body {
    background: transparent !important;
}

header {
    background: radial-gradient(circle at center, var(--main-600) 0, var(--main-900));
}

.content {
    position: relative;
    box-shadow: 0px 0px 1px 0px #00556e;
    background: radial-gradient(circle at center, var(--main-600) 0, var(--main-900));
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    padding-bottom: 24px;
    z-index: 2;
}

.content::before,
.content::after {
    content: '';
    position: absolute;
}

.content::before {
    bottom: 20px;
    inset-inline-start: -100px;
    background-image: url(../assets/courses/small-arrows.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 285px;
    height: 50px;
}

.content::after {
    top: 0%;
    inset-inline-end: -75px;
    background-image: url(../assets/courses/large-arrows.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 150px;
    height: 175px;
}

.questions-box {
    position: relative;
    background-image: url('../assets/courses/courses-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block: 16px 64px;
}

.questions-box form,
.questions-box .panel-footer {
    position: relative;
    z-index: 1001;
}

.questions-box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(241 241 241 / 95%);
    top: 0;
    inset-inline-end: 0;
    z-index: 1;
}

.questions-box.result-mode {
    background: linear-gradient(0deg, #183b57, #056d8d);
    margin-top: -40px;
    padding-top: 40px;
}

.questions-box.result-mode::before {
    display: none;
}

.questions>div {
    background: url(../assets/lines-bg.png) no-repeat 0% / cover
}

.questions>div.active {
    opacity: 1;
    transform: translate(0);
    /* z-index: 1; */
}

.checkBox,
.checkBoxImg {
    position: relative;
    transition: .3s;
}

.checkBox:hover,
.checkBoxImg:hover {
    transform: translateY(-10px);
}

.checkBox input,
.checkBoxImg input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    aspect-ratio: 1/1;
    background: linear-gradient(to top, var(--main-600), var(--main-900));
    box-shadow: inset 0px 0px 0px 9px linear-gradient(to top, var(--main-600), var(--main-900));
    border-radius: 50px;
    position: absolute;
    top: calc(50% - 20px);
    inset-inline-start: 10px;
}

.checkBoxImg input {

    inset-inline-start: 30px;
    top: 30px;
}

.checkBox input+label {
    font-size: 1rem;
    padding: 20px;
    border-radius: 100px;
    -webkit-padding-start: 70px;
    padding-inline-start: 70px;
    transition: .3s;
    display: block;
    background: linear-gradient(to top, #EBEFF0, #FFFFFF);
    box-shadow: 0px 3px 10px rgba(0, 117, 153, 0.36);
}

.checkBoxImg input+label {

    padding: 10px;
    border-radius: 16px;

    transition: .3s;
    display: block;
    background: linear-gradient(to top, #EBEFF0, #FFFFFF);
    box-shadow: 0px 3px 10px rgba(3, 3, 3, 0.36);
}

.checkBoxImg input+label img {
    width: 100%;
    border-radius: 16px;
}

@media (min-width:600px) {
    .checkBox input+label {
        font-size: 1.25rem;
    }

}

@media (min-width:900px) {
    .checkBox input+label {
        font-size: 1.5rem;
    }

}

.checkBox input+label::after,
.checkBoxImg input+label::after {
    content: '';
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    aspect-ratio: 1/1;
    background: white;
    border-radius: 50px;
    position: absolute;
    top: calc(50% - 10px);
    inset-inline-start: 20px;
}

.checkBoxImg input+label::after {
    top: 40px;
    inset-inline-start: 40px;

}

.checkBox input:checked,
.checkBoxImg input:checked {
    background: white;
}

.checkBox input:checked+label,
.checkBoxImg input:checked+label {
    background: linear-gradient(to bottom, var(--main-600), var(--main-900));
    color: white;
}

.checkBox input+label,
.checkBoxImg input+label {
    cursor: pointer;
}


.checkBox input:checked+label::after,
.checkBoxImg input:checked+label::after {
    background: linear-gradient(to bottom, var(--main-600), var(--main-900));
}

.choseQuestion:hover img {
    -webkit-filter: brightness(1) invert(0);
    filter: brightness(1) invert(0);
}

.questions {
    border-radius: 24px;
    -webkit-filter: drop-shadow(0 0 8.5px rgba(0, 0, 0, 0.16));
    filter: drop-shadow(0 0 8.5px rgba(0, 0, 0, 0.16));
    /* background-image: linear-gradient(0deg, #ffffff 0%, #ebeff0 100%); */
    padding-block: 24px;
}

.questions hr {
    width: 90%;
    height: 2px;
    background-color: #07608187;
    border: none;
    margin-block: 12px;
    margin-inline: auto;
    border-radius: 10px;
}

.questions .question {
    display:flex;
    flex-direction:column;
    padding-block: 24px;
    border-radius: 24px;
    width: 90%;
    margin-inline: auto;
    overflow-x: hidden;
}

.question > div > span {
    width: 32px;
    height: 32px;
    display: flex;
    background: #0d5d80;
    border-radius: 4px;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    top: 2px;
    inset-inline-start: 0px;
}

.question .question-head { 
    padding-inline-start: 40px;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

@media(max-width:768px) {
    .question .question-head {
        max-width: 580px;
    }
}

@media(max-width:575px){
    .question .question-head {
        max-width: 300px;
    }
}


.question p:not(.fr-element p) {
    font-size: 1.75rem;
    line-height: 1.5em;
    width: 100%;
}

.exam-info p,
.exam-time p {
    font-size: 1.5rem;
}

.btn-container button {
    box-shadow: inset 0px 3px 10px #ffffff44, 0px 5px 10px #00000015;
    padding: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
    color: rgb(255 255 255);
    transition-duration: 300ms;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    box-shadow: inset 0px 3px 10px #ffffff44, 0px 5px 10px #083344;
}

.btn-container button:hover {
    --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(21 94 117 / var(--tw-text-opacity));
    box-shadow: inset 0px 3px 10px #ffffff44, 0px 5px 10px #007599;

}

.confirmPopUp.show,
.confirmAnswers.show {
    top: 0;
    transform: scale(1) !important;
    z-index: 1000 !important;
}

@media (max-width: 575px) {
    .question p:not(.fr-element p) {
        font-size: 1.5rem;
    }

    .checkBox input+label {
        font-size: 1.25rem !important;
    }
}

/* ******************************************** */
.confirmAnswers span {
    display: block;
    font-size: 1.3125rem;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 16px;
}

.confirmAnswers h2 {
    font-size: 1.825rem;
    color: #ffffff;
    font-weight: 700;
}

.confirmAnswers .form-group input {
    min-width: 260px;
    height: 50px;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 30px;
    -webkit-padding-start: 16px;
    padding-inline-start: 16px;
    font-size: 1.375rem;
    font-weight: 500;
    color: #fff;
    text-align: start;
    direction: inherit;
}

.confirmAnswers .form-group input::-webkit-input-placeholder {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 500;

}

.confirmAnswers .form-group input::-moz-placeholder {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 500;

}

.confirmAnswers .form-group input:-ms-input-placeholder {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 500;

}

.confirmAnswers .form-group input::-ms-input-placeholder {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 500;

}

.confirmAnswers .form-group input::placeholder {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 500;

}

.confirmAnswers button {
    display: block;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    border-radius: 50px;
    background: transparent linear-gradient(180deg, #007599 0%, #193a56 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 7px 14px #00759970;
    color: #fff;
    text-align: center;
    padding: 12px 32px;
    border: 1px solid #fff;
    font-size: 1.375rem;
    transition: all 0.3s ease-in-out;
    margin-inline: auto;
}

.confirmAnswers button:hover {
    box-shadow: 0px 7px 14px #6dc0d970;
    transform: translateY(3px);
}

/* ************************************ */
.status-container.weak {
    --stop-color1: #E54C51;
    --stop-color2: #C21D2C;
}

.status-container.success {
    --stop-color1: #5C8BE8;
    --stop-color2: #2367EC;
}

.status-container.warning {
    --stop-color1: #FED200;
    --stop-color2: #F59815;
}

.status-container.primary {
    --stop-color1: #75C051;
    --stop-color2: #22B24B;
}

.status-container .status div {
    background: linear-gradient(to top, var(--stop-color1), var(--stop-color2));

}

.status-container .circle {
    width: 200px;
    aspect-ratio: 1/1;
    position: relative;
    box-shadow: 0px 5px 22px -6px var(--stop-color1),
        0px 0px 20px 5px rgba(0, 0, 0, 0.219),
        inset 0px 3px 6px white;
    padding: 28px;
    border-radius: 500px;
}

.status-container .circle div {
    background: linear-gradient(to bottom, var(--stop-color1), var(--stop-color2));
    box-shadow: 0px 0px 10px rgb(0 0 0 / 53%),
        inset 0px 1px 10px var(--stop-color2);
    z-index: 0;
    position: relative;
}

.status-container .circle svg {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 100%;
    height: 100%;
}

.status-container .circle circle {
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 30px;
    transform: rotate(270deg);
    stroke-dasharray: 666;
    stroke-dashoffset: 535;
    transition: var(--vlong-duration);
    transform-origin: center;
}

.statics .numbers div,
.statics .percentage div {
    background: linear-gradient(to top, #EBEFF0, white);
    box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 200px;
}

.statics.success .numbers div {
    color: #22B24B;
}

.statics.error .numbers div {
    color: #C21D2C;
}

.statics.warning .numbers div {
    color: #F59815;
}

/*  */
[data-title]:hover:after,
[data-title]:hover:before {
    opacity: 1;
    transition: all 0.3s ease-in-out;
    visibility: visible;

}

[data-title]:after {
    content: attr(data-title);
    background-color: #ffffff;
    position: absolute;
    padding: 16px;
    width: 200px;
    box-shadow: 1px 1px 13px 0px #2222229c;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    transform: translate(0%, -100%);
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    border-radius: 18px;
    font-size: 0.875rem;
    inset-inline-start: 0px;
    top: -20px;
}

[data-title]::before {
    content: '';
    visibility: hidden;
    position: absolute;
    border: 14px solid #d8a8a800;
    border-top-color: white;
    top: -24px;
    z-index: 22222222;
    opacity: 0;
    inset-inline-end: 30px
}

[data-title] {
    position: relative;
}

.sort.active {
    display: block;
}

/* ********************************** */

.questions-select.active {
    display: block;
}

.questions-select>div {
    width: 340px
}

.questions-select>div::-webkit-scrollbar-track {
    background: #00759917;
    border-radius: 20px;
}

.questions-select>div::-webkit-scrollbar-track {
    background: #00759917;
    border-radius: 20px;
}

.questions-select>div::-webkit-scrollbar-thumb {
    background: var(--main-600);
    border-radius: 20px;
}

.questions-select>div::-webkit-scrollbar {

    width: 8px;
}

.questions-select>div>button {
    aspect-ratio: 1/1;
    border: 2px solid var(--main-600);
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.questions-select>div>button.current {
    background: linear-gradient(to top, var(--main-600), var(--main-900));
    border: 2px solid transparent;
    color: white;
}

.questions-select>div>button.done {
    background: linear-gradient(to top, #75C051, #22B24B);
    border: 2px solid transparent;
    color: white;
}

@font-face {
    font-family: M-Saber;
    src: url(../../fonts/M-Saber.otf);
}

.question p:not(.fr-element p) {
    display: flex;
    width: max-content;
    font-size: 2.8rem !important;
    font-family: M-Saber !important;
    gap: 10px;
    font-weight: 500 !important;
    flex-wrap: wrap;
}

.question p *:not(.fr-element *, math *, br), .question table tbody tr td *:not(.fr-element  *,  math  *, br) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2.8rem !important;
    font-family: M-Saber !important;
    font-weight: 500 !important;
    flex-wrap: wrap;
    background: transparent !important;
}

/*.question-head p {
    -webkit-padding-start: 50px;
    padding-inline-start: 50px;
}*/


.question table tbody:not(.fr-element *) {
    display: flex;
    align-items: center;
    /*gap: 24px;*/
    flex-wrap: wrap;
}

.question table tbody tr:not(.fr-element *) {
    /*width:100%*/
    display: flex;
    align-items: center;
    /*gap: 10px;*/
   /*  flex-wrap: wrap;*/
}
.question table tbody tr:not(.fr-element *) img {
    min-width: auto !important;
    object-fit: contain;
    max-width: 200px !important;
}
.question table tbody tr *:not(.fr-element *) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:start;
    min-width:max-content;
}
.checkBox input + label * {
    display: flex;
    align-items: center;
    word-break: break-all;
    text-wrap: balance;
    word-wrap: break-word;
    background: transparent !important;
    flex-wrap: wrap;
    max-width: 100%;
}