.form-quiz {}
.form-quiz h1 {margin: 0 0 10px 0; }
.form-quiz h2 {}
.form-quiz h3 {font-size: 20px; font-weight: 300; margin: 0 0 20px 0; }

.quiz-error {background: red;align-items: center;padding: 15px 20px 15px 60px;margin: 10px 0 20px 0;color: #fff;position: relative;border-radius: 10px;line-height: 1.2;}
.quiz-error::before {content:"\f06a";font-family: "Font Awesome 6 Pro";font-weight: 600;font-size: 31px;position: absolute;left: 20px;top: 50%;transform: translateY(-50%);}

.quiz-success {background: #16b565;align-items: center;padding: 15px 20px 15px 57px;margin: 10px 0 20px 0;color: #fff;position: relative;border-radius: 10px;line-height: 1.2;}
.quiz-success::before {content:"\f00c";font-family: "Font Awesome 6 Pro";font-weight: 600;font-size: 28px;position: absolute;left: 20px;top: 50%;transform: translateY(-50%);}


.form-quiz #btnsubmitquiz {background: var(--c-main); color: #fff; border: solid 1px var(--c-mian); font-weight: 600; font-size: 16px; }
.form-quiz #btnsubmitquiz:hover { background:var(--c-black); color:var(--c-white)}

.form-quiz input[name="cw-verification-code"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border-radius: 10px;
    background: var(--c-gray-lighter);
    border: none;
    font-size: 16px;
    font-weight: 300;
}
.form-quiz input[name="cw-verification-code"] + .error {margin-top:10px}


.form-quiz ul {list-style: none; padding: 0; margin: 0; }
.form-quiz .question {font-weight: 600;margin: 20px 0 10px 0;font-size: 18px;line-height: 1.3;}
.form-quiz .question span {color: red;font-size: 11px;vertical-align: top;margin: 2px 0 0 1px;display: inline-block;}

.form-quiz .your-answers {margin: 0 0 8px 0;line-height: 1.5;}
.form-quiz .your-answers.correct::after {content:"\f00c";font-family: "Font Awesome 6 Pro";font-weight:600;margin: 0px 0 0 10px;font-size: 14px;vertical-align: top;display: inline-block;background: #16b565;color: var(--c-white);width: 26px;height: 26px;text-align: center;line-height: 26px;border-radius: 50%;}
.form-quiz .your-answers.incorrect::after {
    content:"\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    margin: 0px 0 0 10px;
    font-size: 14px;
    vertical-align: top;
    display: inline-block;
    background: #d50000;
    color: var(--c-white);
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
    }
.form-quiz .rationale {
    line-height: 1.3;
    padding: 15px;
    background: var(--c-gray-lighter);
    font-size: 13px;
    margin: 15px 0 0 0;
    border-radius: 10px;
    opacity: 0.8;
}
.form-quiz .rationale strong {}
.form-quiz .error {background: none; color: red; text-align: left; padding: 0; font-size: 12px; margin: -7px 0 10px 0; }
.form-quiz ul li {padding: 0;position: relative;padding: 0 0 0 0;line-height: 1;font-size: 16px;margin: 3px 0 15px 0;}

.form-quiz ul.inline {}
.form-quiz ul.inline li {display: inline-block;margin: 0 30px 4px 0;}

.form-quiz textarea {width: 100%; padding: 15px; border: none; background: var(--c-gray-lighter); border-radius: 5px; font-family: inherit; color: inherit; height: 100px; }
.form-quiz ul li input {display: none }
.form-quiz ul li input + label {cursor: pointer;padding-left: 27px;line-height: 20px;}
.form-quiz ul li input[type="radio"] + label::before {content: '';position: absolute;left: 0;top: 0px;width: 21px;height: 21px;border: 2px solid #ddd;border-radius: 100%;background: #fff;}
.form-quiz ul li input[type="radio"]:checked + label::before {background: var(--c-main); border: 2px solid var(--c-main); }
.form-quiz ul li input[type="radio"]:checked + label::after {content: '';position: absolute;left: 0;top: 0px;width: 21px;height: 21px;border-radius: 50%;background: #fff;transform: scale(0.5);}
.form-quiz ul li input[type="checkbox"] + label::before {content: '';position: absolute;left: 0;top: 0px;width: 21px;height: 21px;border: 2px solid #ddd;border-radius: 4px;background: #fff;}
.form-quiz ul li input[type="checkbox"]:checked + label::before {background: var(--c-main); border: 2px solid var(--c-main); }
.form-quiz ul li input[type="checkbox"]:checked + label::after {content: '\f00c';position: absolute;left: 0;top: 0px;width: 21px;height: 21px;border-radius: 50%;color: #fff;font-family: "Font Awesome 6 Pro";font-weight: 900;text-align: center;line-height: 21px;font-size: 12px;}


.quiz-buttons {display: flex; align-items: center; margin: 20px 0 0 0; }
#submit-quiz {background: var(--c-main);color: #fff;border: solid 1px var(--c-mian);font-weight: 600;font-size: 16px;padding: 15px 20px;border-radius: 10px;line-height: 1;margin: 0;}
#submit-quiz:hover {background: var(--c-secondary);color: #fff;}
.quiz-buttons .btn.secondary {margin: 0 0 0 auto;padding: 0 0 4px 0 !important;border: none !important;border-bottom: solid 2px var(--c-main)!important;background: none !important;color: var(--c-main) !important;border-radius: 0;}


#cw-modal-quiz { z-index: 100008; }
#cw-modal-quiz h3 {font-size: 18px;margin: -10px 0 10px 0;}
#cw-modal-quiz .content { min-height: 200px; }
#cw-modal-quiz .content .btn { margin: 10px 10px 0 0; }
#cw-modal-quiz .content .btn i {margin: 0 6px 0 0;font-size: 18px;}
#cw-modal-quiz .content .note  {margin-top:20px}
#cw-modal-quiz .content .note .dotted-box {
    display: block;
    text-align: center;
    margin: 10px 0;
    padding: 10px 20px;
    font-size: 19px;
}
#cw-modal-quiz .content .note .remaining-courses { padding: 0; margin: 0; list-style: none;
}
#cw-modal-quiz .content .note .remaining-courses li {display: flex;align-items: flex-start;margin: 7px 0px 10px;position: relative;padding: 0;}
#cw-modal-quiz .content .note .remaining-courses li i {background: #fff;color: var(--c-orange);width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius: 50%;margin: 0 9px 0 0;position: absolute;left: 0;top: 0px;font-size: 13px;display: none;}
#cw-modal-quiz .content .note .remaining-courses li.completed i {background: none; color: #fff; font-size: 20px; font-weight: 300;}
#cw-modal-quiz .content .note .remaining-courses li a {color: var(--c-main);text-decoration: underline;flex: 1;line-height: 1.2;}
#cw-modal-quiz .content .note .remaining-courses li a:hover {}


/* #cw-modal-quiz .content .dropdown {}
#cw-modal-quiz .content .dropdown .btn {border: solid 1px var(--c-secondary);background: none;color: var(--c-secondary);box-shadow: none;margin: 0;}
#cw-modal-quiz .content .dropdown .btn i { font-size: 20px; margin: 0 7px 0 0; }
#cw-modal-quiz .content .dropdown .btn::after { margin: 0 0 0 10px; }
#cw-modal-quiz .content .dropdown .btn.show {background: var(--c-secondary);color: #fff;border-radius: 10px 10px 0 0;min-width: 260px;}
#cw-modal-quiz .content .dropdown .dropdown-menu {padding: 15px;background: var(--c-secondary);border: none;border-radius: 0 0 10px 10px;box-shadow: none;top: 40px !important;font-size: 14px;min-width: 260px;max-width: 260px;bottom: auto !important;!i;!;transform: none !important;!i;!;}
#cw-modal-quiz .content .dropdown .dropdown-menu li { margin: 0 0 12px 0; }
#cw-modal-quiz .content .dropdown .dropdown-menu li:last-child { margin: 0; }
#cw-modal-quiz .content .dropdown .dropdown-menu li a { color: #fff; text-decoration: none; }
#cw-modal-quiz .content .dropdown .dropdown-menu li a:hover {font-weight:500} */