:root {
    --backgroundColor: #303234;
    --bg-color: #303234;
    --bg-color-secondary: #3a3c3e;
    --color-orange: #fab30f;
    --color-green: #4ac201;
    --color-light-green: #8ef798;
}

#demo-exercises.popup-shadow {
    background-color: #0000009c;
}

#panel-intros-homeworks-popup {
    font-family: "Montserrat", sans-serif;
}


#panel-intros-homeworks-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    min-height: 270px;
    max-height: 90vh;
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--shadow-concave);
    max-width: 1260px;
    background-color: var(--bg-color);
    color: #e0e0e0;
    border: 2px solid #000000;
}
#panel-intros-homeworks-popup .neu-inset,
#panel-intros-homeworks-popup .neu-inset-hov:hover,
#panel-intros-homeworks-popup .neu-inset-act:active,
#exercise-confirm.neu.active:active,
.disabled,
.neu.ok-alert-btn:active, .circle-small {
    background-color: rgba(var(--bg-color-black), 0.2);
    box-shadow: 4px -4px 8px 1px rgba(66, 69, 83, 0.51),
                4px 4px 8px 1px rgba(0, 0, 0, 0.35),
                inset -4px -4px 4px 0px rgba(0, 0, 0, 0.45),
                5px 6px 7px 1px rgba(0, 0, 0, 0.35),
                inset 2px 2px 2px 1px rgba(71, 80, 89, 1);
    border-radius: 99px;
    border: 2px solid #000000;
}

#exercise-confirm{
    margin-top: 16px;
    width: 15vw;
    margin-left: auto;
    margin-right: auto;
}

#panel-intros-homeworks-popup .neu,
#panel-intros-homeworks-popup .neu-ring-big,
#classes-exercise-section .finish-exercise-yes,
#classes-exercise-section .finish-exercise-no,
#panel-intros-homeworks-popup .switch:after,
.neu.alert-popup,
.alert-popup button.ok-alert-btn {
    border-radius: 18px;
    background-color: #303234;
    box-shadow: var(--shadow-concave);
    border: 2px solid #000000;
    padding: 0.5rem;
}

#panel-intros-homeworks-popup .card,
#panel-intros-homeworks-popup .card-title,
#panel-intros-homeworks-popup .btn,
#panel-intros-homeworks-popup.classes-exercise-answers,
.alert-popup button.ok-alert-btn:hover{
    color: var(--color-orange);
}

.done-text{
    margin: .2rem 2rem;
}

#classes-exercise-question{
    width: 96%;
}



#panel-intros-homeworks-popup .elements-intro-homework .card:hover,
#panel-intros-homeworks-popup .elements-intro-homework .card .btn:hover,
#panel-intros-homeworks-popup .elements-intro-homework .card .btn:active,
#panel-intros-homeworks-popup .neu.active,
.ai-info-text {
    color: var(--color-orange);
}

#panel-intros-homeworks-popup .neu-ring-inside {
    box-shadow: none !important;
    width: 20px;
    height: 20px;
    border-radius: 0%;
}

.check {
    position: relative;
    margin-left: auto;
    background-image: url("../img/icons/checkGrey.png");
    background-repeat: no-repeat;
    background-size: 21px 14px;
    background-position: center;
    pointer-events: none;
    border: 2px solid black;
}


.check .active {
    background-image: url("../img/icons/check.png");
    cursor: pointer;
    pointer-events: auto;
}

#classes-exercise-answers textarea,
.alert-popup button.ok-alert-btn  {
    background-color: var(--bg-color-secondary);
    color: #e0e0e0;
}

#exercise-steps .step {
    border-radius: 99px;
    border: 2px solid #000000;
}

#exercise-steps .step.next {
    background-color: rgba(250, 179, 15, 0.2);
    color: #000000;
}

#exercise-steps .step.disabled {
    background-color: rgba(250, 179, 15, 0.1);
    color: #808080;
}

#exercise-steps .active,
#test-steps .active,
#panels-steps .active,
#panel-intros-homeworks-popup .elements-intro-homework .card .btn:active {
    border: 2px solid black;
}

#classes-exercise-answers .answer.active,
#panel-intros-homeworks-popup button:active {
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

#classes-exercise-answers .answer.active .answer-mark,
#classes-exercise-answers .answer.active .answer-text,
#classes-exercise-answers .answer.my-answer .answer-mark,
#classes-exercise-answers .answer:hover .answer-mark,
#panel-intros-homeworks-popup .switch-user-answer,
#panel-intros-homeworks-popup button:hover {
    color: var(--color-orange);
}

#classes-exercise-answers .answer.active .answer-mark,
#classes-exercise-answers .answer:hover .answer-mark,
#classes-exercise-answers .answer.my-answer .answer-mark {
    border: 3px solid var(--color-orange);
}

#classes-exercise-answers .answer.good .answer-mark{
    border-color: var(--color-light-green);
    color: var(--color-light-green);
}

#classes-exercise-answers .ai-background {
    background-size: cover;
    background-repeat: no-repeat;
}

#classes-exercise-answers .ai-star-container {
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 40px;
}

#classes-exercise-answers .ai-star {
    margin: 5px;
}


.ai-star.disabled {
    box-shadow: none !important;
    background-color:#475059;
    border: none !important;
}

.ai-star {
    width: 24px;
    height: 24px;
}

.ai-star-container{
    height: 54px;
}

#classes-exercise-answers .ai-textbox-container {
    height: auto;
}

.ai-textbox-container .ai-microphone-active,
.ai-textbox-container .ai-microphone-inactive {
    margin: 0.3rem auto;
    width: 20px;
    height: 20px;
}
.ai-microphone {
    right: 11px;
    border-radius: 32px !important;
}

.ai-microphone-active {
    --un-icon: url(../img/icons/microphone_mk.svg);
}

.ai-microphone-inactive {
    --un-icon: url(../img/icons/microphone-off_mk.svg);
}

.ai-star.disabled {
    --un-icon: url("../img/icons/star-empty_mk.svg");
}

.ai-star.empty {
    --un-icon: url("../img/icons/star-empty_mk.svg");
}

.ai-star.filled {
    --un-icon: url("../img/icons/star-filled_mk.svg");
}

#classes-exercise-question .attachments-btn {
    background-image: url("../img/icons/attachmentMK.svg");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.check.active {
    background-image: url("../img/icons/check_mk.png");

}

#classes-exercise-question .attachments-box {
    right: 0;
}

.ai-tooltip-ico {
    width: 56px;
    height: 56px;
    bottom: 2px;
    right: 10px;
    border-radius: 59px !important;
}

.ai-tooltip-ico:hover .neu-inset-act {
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e !important;
}

.ai-tooltip-ico .neu-inset-act:active {
    background-color: var(--bg-color-secondary) !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    outline: none !important;
}

#exercise-steps-box-hidden .neu-inset-act.done {
    color: #50c4d9;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

#exercise-steps-box-hidden .neu-inset-act.active {
    color: var(--color-orange);
    background-color: var(--bg-color-secondary);
    box-shadow: inset 5px 5px 8px rgba(0, 0, 0, 0.55),
            inset -5px -5px 6px rgba(73, 73, 73, 0.6);
    border-radius: 99px;
}
.mq-math-mode .mq-empty {
    background-color: var(--bg-color-secondary);
}

#show-ai-coach {
    background-color: var(--color-orange) !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.COMPLETE textarea, .DESCRIPTION textarea, .AI textarea {
    border-radius: 1rem !important;
    box-shadow: inset 3px 3px 6px #26282a, inset -2px -2px 4px #3a3c3e !important;
    background-color: var(--bg-color-secondary) !important;
    font-size: 1rem !important;
}

/* ========================================
   REUSABLE COMPONENTS - Ring Close Button
   ======================================== */

.close-popup {
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 50%;
    cursor: pointer;
    width: 55px;
    height: 55px;
    z-index: 1;
}

.ring-big {
    color: #e0e0e0;
    background-color: var(--bg-color);
    box-shadow: var(--shadow-concave);
    border: 2px solid var(--color-black);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ring-inside {
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-block;
    position: relative;
}

.ring-inside::before,
.ring-inside::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 3px;
    background-color: var(--color-orange);
    border-radius: 2px;
}

.ring-inside::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ring-inside::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ring-inside:active {
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.ai-stars-container{
    height: 56px;
}

#classes-exercise-answers{
    width: 96%;
}

#demo-paths-grid .div_concave_border.disabled {
    box-shadow: inset 8px 8px 16px #1e1f21, inset -8px -8px 16px #424447;;
    border-radius: 15px;
    border: none;
    opacity: 0.75;
    pointer-events: none;
    filter: grayscale(50%);
}


.ai-microphone.pushed .ai-microphone-active{
    background-color:var(--color-green)
}