@media(max-width: 1200px) and (min-width: 576px) {
    .col-sm-6.links {
        max-width: 40%;
        margin: 20px auto 0;
    }
}

.middle-container {
    position: relative;
}

/* problem info */
.problem-info h3 {
    display: grid;
    grid-template-columns: 9% 40% 37%;

    grid-template-rows: 100%;
    font-size: 18px;
}

.problem-info h3.problem-Name {
    grid-template-columns: 50% 50%;
}

.problem-info span:first-of-type {
    grid-area: 1/1/2/2;
    text-align: right;
}
.problem-info .dropdown-link span{
    text-align: center;
}
.dropdown-link span{
    text-align: center;
}

.problem-info .info-col {
    grid-area: 1/2/2/4;
    text-align: left;
}
.problem-info .info-col .mq-root-block,
.problem-info .info-col .mq-math-mode .mq-root-block {
    overflow: visible;
    white-space: normal;
}

/* form */
.try-again {
    font-size: 18px;
    margin-left: calc(6% - 10px);
    margin-bottom: 0;
    margin-top: 10px;
}

.problem-form input {
    height: 34px;
    padding: 5px;
    width: 100%;
}

.problem-form .keyboard-icon-container {
    position: absolute;
    right: 10px;
    top: 1px;
}

.problem-form .keyboard-icon-container.keyboard-opened {
    right: 3px;
}

.input-container {
    display: grid;
    grid-template-rows: minmax(40px, max-content) minmax(40px, max-content);
    ;
    grid-template-columns: 0.8fr 0.01fr 1fr;
    align-items: center;
}

.steps-container .input-container {
    grid-template-columns: 9% 65% 12%;
    display: grid;
    grid-template-rows: minmax(40px, max-content) minmax(3px, max-content);
}
.steps-container .input-container.last-input{
    /* grid-template-columns: 23% 40% 37%;
    grid-template-columns: 0.8fr 1fr 1fr; */

}
.problem-form .input-container {
    grid-template-rows: minmax(40px, max-content) 15px;
    grid-template-columns: 0.8fr 1fr 1fr;
}
.problem-form .equation {
    min-width: 100%;
}

.problem-form .validation-error-message {
    grid-area: 2/2/3/3;
}

.input-container .label-container {
    grid-area: 1/1/2/2;
    text-align: right;
}


.input-container .equation-container {
    grid-area: 1/2/2/3;
    text-align: left;
    position: relative;
    width: max-content;
    max-width: 100%;
    width: 100%;
}
.problem-form .equation-container, .input-container .equation-container.new-problem-equation {
    width: 100%;
}

.copy-related-icons {
    width: 20px;
    position: absolute;
    /* right: 5px; */
    top: calc(50% - 10px);
    cursor: pointer;
}

.paste-icon {
    width: 22px;
    height: 22px;
    position: relative;
    top: 0;
    right: -8px;
    cursor: pointer;
}
.paste-icon.tryItNow {
   right: 0;
   margin-left: 5px;
}
.input-container .message-container.container-popup{
    display: none;
}
.input-container .message-container .footer-message{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    z-index:100
    /* position: relative; */
}
.footer-message .add-questions-btn{
    display: none;
}
.footer-message .add-questions-btn.show{
    display: block;
}
.container-popup.questions-mistake{
    left: -5px !important;
    transform: translateX(-100%) translateY(-50%) !important;
    top: 25px !important;
}
@media screen and (max-width:668px) {
    .input-container .message-container .footer-message{
        position: relative;
    }
}
.container-popup.questions-mistake .separate-line{
    width: 100%;
    height: 1px;
    background: #d4d4d4;
}
.container-popup.questions-mistake .content-answers-mistake .answer{
    margin-top: 5px;
}
/* first question show/hide*/
.content-answers-mistake .answer#first-answer .sub-answer{
    display: none;
}
.answer#first-answer .sub-answer .sub-content-answer .equation-container{
    background: #ddd;
    width: 90%;
    border-radius: 3px;
}
.answer#first-answer .sub-answer .sub-content-answer .add-answer-mistake{
    border: none;
    outline: none;
    width: 100%;
    min-height: 28px;
}
.content-answers-mistake .answer#first-answer .sub-answer.show{
    display: block;
}
/* first sub question show/hide */
.content-answers-mistake .answer#first-answer .sub-answer .sub-content-answer{
    display: none;
}
.content-answers-mistake .answer#first-answer .sub-answer .sub-content-answer.show{
    display: block;
}
/* last sub question show/hide */
.content-answers-mistake .answer#last-answer .sub-answer{
    display: none;
}
.content-answers-mistake .answer#last-answer .sub-answer.show{
    display: block;
}
.content-answers-mistake .answer#figured-mistake .sub-answer{
    display: none;
}
.content-answers-mistake .answer#figured-mistake .sub-answer.show{
    display: block;
}
.content-answers-mistake .answer .sub-answer{
    padding-left: 35px;
}
.content-answers-mistake .answer .sub-answer.last-sub-q{
    margin-bottom: 10px;
}
.answer .sub-answer.last-sub-q .last-answer,
.answer#figured-mistake .sub-answer input{
    border: none;
    background: #ddd;
    width: 90%;
    border-radius: 3px;
    outline: none;
}
.content-answers-mistake .answer .sub-answer .sub-title-answer{
    font-size: 15px;
}
.container-popup.questions-mistake .footer-questions-mistake{
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
.container-popup.questions-mistake .footer-questions-mistake .btn-check:focus+.btn, .btn:focus{
    box-shadow: none !important;
}
.container-popup.questions-mistake .footer-questions-mistake .btn-secondary{
    margin-right: 7px;
}
.input-container .message-container.container-popup.show{
    display: block;
    z-index : 101;
}
@media screen and (min-width:1147px) and (max-width:1333px) {
    .input-container .container-popup:not(.questions-mistake){
        width: 260px;
    }
}
.container-popup.message-container{
    left: 25px !important;
}
.message-container.lastone{
    margin-left: 22px;

}
.input-container .message-container, .pristine-error {
    grid-area: 2/3/3/4;
}

.input-container .message-container .mistake, .mistake {
    color: red;
}

.input-container .message-container .success {
    color: green;
}

.equation {
    min-height: 28px;
    width: 100%;
    background-color: #DDD;
    border-radius: 2px;
    padding: 5px;
    padding-right: 50px;
    max-width: 100%;
}

.equation.mq-editable-field {
    background-color: #FFF;
}
.tryItNow .equation.mq-editable-field {
    overflow-wrap: anywhere;
    word-break: break-all;
}
.equation .mq-root-block, .equation-preview .mq-root-block {
    overflow: visible;
    white-space: pre-wrap;
}
.equation-preview {
    background-color: #DDD;
    padding: 5px;
    padding-right: 30px;
    /* text-align: center !important; */
    /* font-size: 23px; */
}
.equation-preview span {
    text-align: center !important;
}

.lastone {
    display: flex;
    align-items: center;
}

.result {
    font-size: 24px;
}

.script-output p {
    margin-bottom: 5px;
}

.loader {
    width: 20px;
    animation: spin 2s linear infinite;
}

.keyboard-icon-container {
    position: absolute;
    right: 32px;
    top: calc(50% - 15px);
    padding: 0;
    background-color: transparent;
    border: 0;
}

.keyboard-icon-container.keyboard-opened {
    right: 26px;
}

.keyboard-icon {
    width: 30px;
    height: 31px;
}

.arrow-down {
    width: 15px;
}

.backspace-icon {
    width: 20px;
    height: 100%;
}

#custom-keyboard {
    background-color: #ededed;
    min-width: 300px;
    max-width: 70%;
    margin: auto;
    position: relative;
}

.categories {
    padding: 0 10px;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.categories li {
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 3px solid #e2e2e2;
    cursor: pointer;
    margin-right: 10px;
}

.categories li:last-of-type {
    margin-right: 0;
}

.categories li.selected {
    color: #4781b9;
    border-bottom: 3px solid #4781b9;
}

.category-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
    grid-gap: 4px;

}

.category-content button {
    box-shadow: inset 0 1px rgb(255 255 255 / 25%), inset 0 -1px rgb(0 0 0 / 2%);
    background: linear-gradient(#f6f6f6, #f0f0f0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 36px;
    max-height: 36px;
    overflow: hidden;
    font-size: 16px;
    width: 100%;
}

.category-content button:hover {
    background: linear-gradient(#f0f0f0, #fafafa);
}

.category-commands {
    max-height: 136px;
    overflow: auto;
    min-height: 136px;
}

.numbers-basic-operators, .shortcut-fns, .controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    column-gap: 5px;
    row-gap: 3px;
    padding: 5px;
}

.numbers-basic-operators {
    min-width: 200px;
}

.shortcut-fns {
    grid-template-columns: repeat(2, 1fr);
}

.controls {
    grid-template-rows: repeat(3, 1fr);
    min-width: 160px;
    grid-area: 1/3/2/4;
}

.controls>div {
    margin: auto 0;
}

.controls div:first-of-type {
    grid-area: 1/1/2/5;
}

.controls div:nth-of-type(2) {
    grid-area: 2/1/3/2;
}

.controls div:nth-of-type(3) {
    grid-area: 2/2/3/3;
}

.controls div:nth-of-type(4) {
    grid-area: 2/4/3/5;
}

.controls div:nth-of-type(5) {
    grid-area: 2/3/3/4;
}

.controls div:nth-of-type(6) {
    grid-area: 3/1/4/3;
}

.controls div:nth-of-type(7) {
    grid-area: 3/3/4/4;
}

.controls div:nth-of-type(8) {
    grid-area: 3/4/4/5;
}

.control img {
    width: 30px;
    height: 20px;
}

.control.enter img {
    width: 20px;
}

.control.enter {
    background-color: #6c99c4;
}

.control.enter:hover {
    background-color: #4781b9;
}

.hand-write{
  width: 95%;
  height: fit-content;

  margin: 10px;
  z-index :99
}

.functions {
    position: absolute;
    z-index: 30;
    right: 60px;
    bottom: -30px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    max-width: 100%;
}

/* .functions::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #fff;
    transform: rotate(45deg);
    display: inline-block;
    top: 8px;
    left: 70%;
    position: relative;
} */
.main-tab.category-content {
    grid-template-columns: 1fr 0.5fr 1fr;
    grid-template-rows: 1fr;
    padding: 0;
}

.main-tab button {
    background: linear-gradient(rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0.16));
    border: 1px solid #bbb;
    width: 100%;
    padding: 5px 0;
    border-radius: 2px;
    box-shadow: inset 0 1px rgb(255 255 255 / 10%), inset 0 -1px rgb(0 0 0 / 2%);
    min-height: 36px;
}

.main-tab button:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.19));
}

.main-tab button.operator {
    background: #fcfcfc;
}

.main-tab button.operator:hover {
    background: #ebebeb;
}
#custom-domain,
#edit-problem-custom-domain{
    display: none;
}
#custom-domain.show{
    display: grid;
}
#edit-problem-custom-domain.show{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    margin-top: 15px !important;
}
.container-custom-domain{
    display: flex;
}
.container-custom-domain select{
    min-width: 60px;
    border: none;
    background: #ddd;
    outline: none;
    border-right: 1px solid #fff;
}
.container-custom-domain select#rightDropdown{
    border-left: 1px solid #fff;
}
.container-custom-domain>span{
    padding: 0 7px;
    font-size: 24px;
}
.container-custom-domain .equation-container .custom-domain-first-section,
.container-custom-domain .equation-container .custom-domain-last-section
{
    outline: none;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 60px;
    border: none;
    background: #ddd;
}
.err-msg{
    display: none;
    font-size: 12px;
    color: red;
    font-weight: 600;
    margin-top: 7px;
    text-align: left;
}
.err-msg.show{
    display: block;
}
@media (max-width: 500px) {
    div.functions {
        right: 4px;
    }
    .more-actions-btn{
        grid-template-columns: 8% 90% 0% !important;
    }
}

@media(max-width: 700px) {
    .main-tab.category-content {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 0px 1fr;
    }

    .controls {
        grid-area: 3/1/4/3;
    }

    .numbers-basic-operators {
        grid-area: 1/1/2/2;
    }

    .shortcut-fns {
        grid-area: 1/2/2/3;
    }

    #custom-keyboard {
        max-width: 90%;
    }

    #custom-keyboard.functions-opened {
        margin-top: 100px;
        /* animation: slide-down 0.25s linear; */
    }

    .functions {
        right: calc(50% - 150px);
        bottom: 140px;
    }

    .functions::after {
        left: 50%;
    }

    .category-content button {
        font-size: 14px;
        min-height: 30px;
        max-height: 30px;
    }

    .keyboard-btns-container {
        display: flex;
        flex-direction: column;
    }

    .keyboard-btns-container #custom-keyboard {
        /* order: 1; */
        margin-top: 20px;
    }

    /* .keyboard-btns-container .before-done {
        order: 0;
    } */
}

@media (min-width: 701px) {
    #custom-keyboard {
        max-width: 80%;
    }

    /* #custom-keyboard.functions-opened {
        margin-top: 200px;
        animation: slide-down 0.25s linear;
    }
    .functions-closed {
        animation: slide-up 0.5s linear;
    } */
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slide-down {
    from {
        margin-top: 0
    }

    to {
        margin-top: 200px
    }
}

@keyframes slide-up {
    from {
        margin-top: 200px
    }

    to {
        margin-top: 0
    }
}
.keyboard-btns-container .main-tab >div >div {
    position: relative;
}
.command[data-command='\\left\\{\\right\\}'] .mq-non-leaf {
    display: inline;
}


/* Added By Alaa */
.steps-container h3 {
    align-items: center;
    font-size: 18px;
}

@media (min-width: 992px) {

    /* .last-input{
       margin-top: 2em;
    } */
    .input-container .message-container, .pristine-error {
        grid-area: 1/3/2/4;
    }

    /* .do_math span.mq-math-mode{
        font-size: 23px;
    } */

    /* .do_math .problem-info .info-col {
        grid-area: 1/3/2/4;
    } */
    /* section .row .mobile{
        display: none;
    } */

    .steps-container .equation-content span,
    .steps-container .equation-content .info-col,
    .input-container .label-container,
    .input-container .equation-container,
    .input-container .equation-container span {
        font-size: 18px;
    }

    .mobile {
        display: none;
    }
}

@media (max-width: 576px) {

    .steps-container .input-container,
    .problem-info h3:not(.problem-Name), .problem-form .input-container {
        grid-template-columns: 30% 61%;
    }
    .problem-form .input-container {
        grid-template-rows: minmax(40px, max-content) 1fr;
    }

    .try-again {
        margin-left: calc(21% - 78px);
        font-size: 23px;
    }
    .right-side-container{
        grid-area: right;
        grid-column: 1 / 3;
        justify-content: flex-end;
        margin: 10px 0 5px;
    }
    .right-side-container.errorMessageBesideLatexInp{
        max-width: 227px;
        width: 100%;
    }

    .message-container.container-popup.message.show {

            z-index:101;
    }
    .right-side-container .container-popup:not(.questions-mistake,.tryItNowPopup){
        max-width: 300px;
        width: 100% !important;
        left: unset !important;
        top: 35px !important;
        transform: unset !important;
    }
    .input-container.last-input{
        grid-template-columns: 23% 35% 37%;
    }
    .input-container .equation-container.lastone{
        grid-area: 1/2/2/4;
    }
    .message-container.lastone{
        margin: 0;
        margin-bottom: 20px;

    }
    .hand-write{
        display: block;
        position: fixed;
        top: 70px;
        /* left: 10px; */
        height:80%
    }
    #toggle-full-screen{
        display: block;
    }

}

@media (max-width: 992px) {

    /* .problem-info h3.problem-Name {
        grid-template-columns: 30px 1fr 1fr;
    } */
    .input-container .message-container:not(.tryItNowPopup), .pristine-error {
        grid-area: 2/2/3/4;
    }

    /*
    .do_math .last-input{
       margin-top: 2em;
    } */



    .steps-container .problem-info h3.problem-Name {
        grid-template-columns: 50px repeat(2, calc((100% - 50px) / 2));
    }

    .info-col {
        text-align: left;
    }

    .steps-container .problem-info .problem-Name .info-col {
        grid-area: 1/3/2/4;
    }

    section .row .mobile {
        display: block !important;
        grid-area: 1/1/2/2;
    }

    .problem-info .my-3 .me-3 {
        margin-right: 0.5rem !important;
    }

    h3.problem-Name .h3-title {
        grid-area: 1/2/2/2;

    }

    div.steps-container .problem-info,
    div.steps-container .do_math .input-container .label-container,
    .steps-container .problem-info h3.problem-Name,
    .steps-container .equation-content span {
        font-size: 23px;
    }

    .faq-links-content {
        margin: auto 2em;
        padding: 1em 0.5em;
    }

    .script-output {
        margin: 1em;
    }
    .hand-write{
        display: block !important;
        position: fixed;
        top: 70px;
        /* left: 10px; */
    }
    #toggle-full-screen{
        display: block;
    }

}

@media (min-width: 576px) and (max-width: 992px) {
    .input-container .message-container, .pristine-error {
        grid-area: 1/3/3/4;
    }
    .hand-write{
        display: block !important;
        position: fixed;
        top: 70px;
        /* left: 10px; */
    }
    #toggle-full-screen{
        display: block;
    }


}

@media(min-width: 701px) and (max-width: 1400px) {
    .functions {
        right: -8px;
    }

    #custom-keyboard {
        margin: 42px auto;
    }
}

@media(max-width: 330px) {
    .keyboard-icon-container, .keyboard-icon-container.keyboard-opened {
        right: 0;
    }
    .hand-write{
        display: block;
    }
    #toggle-full-screen{
        display: block;
    }

}

@media(max-width: 350px) {
    .keyboard-icon-container.keyboard-opened {
        right: 0;
    }
    .hand-write{
        display: block;
        position: fixed;
        top: 70px;
        /* left: 10px; */
    }
    #toggle-full-screen{
        display: block;
    }

}

.showHide{
    display:block;
    position: fixed;
    top: 70%;
    left: 28px;
    z-index: 100;
}
#hand_write.hide {
    display : none !important;
}
.hide-error-message {
    border: none;
    outline: none;
    margin-right: 10px;
    width: auto;
    margin-left: auto;
    text-align: center;
    color: red;
    display: none;
    font-size: 19px;
    background: #ffa5004a;
}
.right-side-container{
    display: flex;
    position: relative;
    margin-left: 15px;
}
.right-side-container .right-side-icons{
    display: flex;
    justify-content: flex-end;
}
.right-side-container .add-comment-icon img{
    width: 25px;
    cursor: pointer;
}
.error-icon.epiphany-icon.hide img{
    display: none;
}
.error-icon.epiphany-icon  .error-image.hide{
    display: none;
}
.error-icon.epiphany-icon img{
    width: 20px;
    cursor: pointer;
    margin-right: 7px;
}
.right-side-container .no-error-icon{
    width: 27px;
    height: 26px;
}
.right-side-container .container-popup{
    display: none;
    position: absolute;
    left: 55px;
    top: 25px;
    z-index: 10;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    padding: 20px 10px;
    width: 270px;
    transform: translateY(-50%);
}
.container-popup.show{
    display: block !important;
}
.container-popup .content-comments{
    display: flex;
    align-items: flex-start;
    min-height: 60px;
    flex-direction: column;
    max-height: 115px;
    overflow: auto;
    scroll-behavior: smooth;
}
.container-popup .content-comments::-webkit-scrollbar{
    width: 8px;
}
.container-popup .content-comments::-webkit-scrollbar-track{
    background: #fff;
    border: 1px solid rgb(255, 255, 255,0.7);
}
.container-popup .content-comments::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-top: 40px solid #b5daff;
    border-radius: 5px;
}
.content-comments.first-add-comment{
    flex-direction: row;
}
.content-comments .reply{
    width: 100%;
}
.content-comments .reply .info-reply{
    display: flex;
    align-items: center;
}
.reply .info-reply .info{
    display: flex;
    flex-direction: column;
    color: #3c4043;
}
.info-reply .info .name{
    font-size: 16px;
    font-weight: 600;
}
.info .date{
    opacity: 0.8;
    font-size: 12px;
}
.reply .content-reply{
    min-height: 60px;
    width: 100%;
    padding: 10px 0;
    padding-left: 10px;
}
.reply.children .info-reply .logo{
    display: flex;
    align-items: center;
}
.reply.children .info-reply .reply-icon img{
    width: 24px;
    transform: rotate(177deg);
}
.content-reply .reply-btn{
    float: right;
    border: none;
    border-radius: 15px;
    padding: 3px 20px;
    background: #84c1ff;
    color: #fff;
}
.content-reply p{
    font-size: 14px;
    font-weight: 500;
}
.reply.children .content-reply{
    padding-left: 24px;
}
.content-comments span{
    color: #3c4043;
    padding-left: 5px;
}
.reply-comment .form{
    margin-top: 10px;
}
.reply-comment .form .actions{
    margin-top: 7px;
}
.actions .btn-secondary{
    background: #fff;
    border: 1px solid #dadce0!important;
    color: #1a73e8;
}
.mention-comment{
    display: flex;
    justify-content: space-between;
    background: #f3f3f3;
    padding: 2px 10px;
    align-items: center;
    border-radius: 5px 5px 0 0;
    display: none;
}
.mention-comment .content-parent-comment {
    color: #0d6efd;
    display: inline;
}
.mention-comment .cancel-reply{
    display: inline-block;
    float: right;
    padding-top: 5px;
}
.mention-comment .cancel-reply img{
    width: 12px;
    cursor: pointer;
}
.overlay-do-math{
    position: fixed;
    z-index: 7;
    opacity: 0;
    transition: 100ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0,0.3);
    pointer-events: none;
}
.overlay-do-math.active{
    pointer-events: all;
    opacity: 1;
}
.right-side-container.hide{
    display: none;
}
@media screen and (max-width:1147px) {
    .right-side-container .container-popup{
        transform: translateX(-100%);
    }
    .container-popup.questions-mistake{
        top: -10px !important;
        left: 20px !important;
        transform: translateY(-100%) translateX(-100%) !important;
    }
}
@media screen and (min-width:576px) {
    .copy-related-icons{
        right: 5px;
    }
}
@media (max-width: 576px) {
    .container-popup.questions-mistake{
        right: 0px !important;
        transform: translateY(-100%) !important;
        left: unset !important;
    }
}
@media screen and (max-width : 576px) {
    .hide-error-message {
        display: none;
        grid-area: 2/1/3/2;
    }
    .equation-preview{
        padding-right: 10px;
    }
    .copy-related-icons{
        right: -20px;
    }
    .steps-container .problem-info h3.problem-Name {
        grid-template-columns: 0 repeat(2, calc(100% / 2));
    }
}
/* .input-container:nth-last-child(2){
    color: red !important;
} */
/* start more actions style */
.more-actions-btn{
    display: grid;
    grid-template-columns: 8% 90% 0% !important;
}
.container-more-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}
.container-more-actions.top-section-problem,
.more-actions-btn.bottom-section-problem
{
    gap: 0;
    display: grid;
    grid-template-columns: 8% 90% 0% !important;
}
.more-actions-btn.top-section-problem{
    margin-bottom: 30px;
}
.container-more-actions .dropdown {
	 position: relative;
	 display: flex;
	 /* min-width: 180px; */
     max-width: 200px;
	 flex-direction: column;
}
.container-more-actions .dropdown a.dropdown-link {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-transform: capitalize;
    background-color: #b5daff;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, .35);

}
.container-more-actions .dropdown button.dropdown-link{
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 7px 0 7px 14px;
    text-align:center;
}
.container-more-actions .more-actions-link button.dropdown-link{
    padding:7px 15px 7px 15px;
    width: 110px;
}
.container-more-actions #dropdown-toggle button{
    padding: 0 !important;
    margin-right: 15px !important;
}
.container-more-actions .dropdown a.dropdown-link:hover,
.container-more-actions .dropdown a.dropdown-link-is-active {
    box-shadow: 0 0.5rem 1.5rem -0.5rem rgb(0 0 0 / 65%);
}
.container-more-actions .dropdown a.dropdown-link.dropdown-link-is-active img.dropdown-icon-arrow-down {
	 transform: rotate3d(0, 0, 1, -180deg);
}
.container-more-actions .dropdown a.dropdown-link.more-actions-link{
	 /* padding-left: 40px; */
}
.container-more-actions .dropdown a.dropdown-link .arrow {
    position: absolute;
    display: flex;
    width: 32px;
    height: 100%;
    top: 0;
    align-items: center;
    justify-content: center;
    right: 145px;
}
.container-more-actions .dropdown a.dropdown-link .arrow img {
    width: 17px;
}
.container-more-actions .dropdown a.dropdown-link img.dropdown-icon-profile {
	 position: absolute;
	 display: flex;
	 fill: #fff;
	 pointer-events: none;
     width: 17px;
     top: 12px;
}
.dropdown a.dropdown-link img.dropdown-icon.dropdown-icon-profile{
    left: 10px;
    width: 15px;
    top: 12px;
}
.dropdown a.dropdown-link img.dropdown-icon-arrow-down {
	 right: 5px;
	 will-change: transform;
	 transform-style: preserve-3d;
	 transform: rotate3d(0, 0, 0, 0);
	 transition: 0.25s ease all;
}
.container-more-actions .dropdown .dropdown-menu {
	 position: absolute;
	 top: 65px;
	 z-index: 9;
	 left: 0px;
	 display: flex;
	 width: 100%;
	 background-color: #fff;
	 box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, .35);
	 opacity: 0;
	 visibility: hidden;
	 transform: translate3d(0, 2.5rem, 0);
	 transform-style: preserve-3d;
	 will-change: transform, opacity, visibility;
	 overflow: hidden;
	 transition: 0.25s ease all;
}
.container-more-actions .dropdown .dropdown-menu .dropdown-content {
	 display: flex;
	 width: 100%;
	 flex-direction: column;
}
.container-more-actions .dropdown .dropdown-menu .dropdown-content ul.dropdown-nav {
	 display: flex;
	 width: 100%;
	 flex-wrap: wrap;
	 list-style: none;
     padding: 0;
     margin: 0;
     background: #b5daff;
}
.container-more-actions .dropdown .dropdown-menu .dropdown-content ul.dropdown-nav li.dropdown-item {
	 display: flex;
	 width: 100%;
	 transition: 0.35s ease all;
     padding: 0;
}
ul.dropdown-nav li.dropdown-item form {
    width: 100%;
    margin: 0;
}
ul.dropdown-nav li.dropdown-item form button{
    border: none;
    background: transparent;
    width: 100%;
    padding: 7px 15px 7px 15px;
    font-size: 16px;
    text-align: left;
}
.container-more-actions .dropdown .dropdown-menu .dropdown-content ul.dropdown-nav li.dropdown-item--is-active,
.container-more-actions .dropdown .dropdown-menu .dropdown-content ul.dropdown-nav li.dropdown-item:hover {
	 background-color: #81bae0;
}
 .container-more-actions .dropdown .dropdown-menu .dropdown-content ul.dropdown-nav li.dropdown-item a.dropdown-link {
	 background-color: transparent;
	 border-radius: 0;
	 box-shadow: none;
     cursor: pointer;
}
.container-more-actions .dropdown--is-active .dropdown-menu {
	 opacity: 1;
	 visibility: visible;
	 transform: translate3d(0, -1rem, 0);
     padding: 0;
}
.assignment-complete{
    position: absolute;
    top: 5px;
    right: 15px;
    max-width: 300px;
    width: 100%;
    transition: 0.5s;
    display:block;

}
.assignment-complete.fade.hide{
   display:none;
}

/* end more actions style */
/* style custom dropdown options/action */
.open-options#step-problem-option-icon + .options-list{
    top: 36px !important;
    width: 100%;
}
.open-options#step-problem-option-icon + .options-list::before{
    display: none;
}
.container-more-actions .dropdown-options-action{
    width: 100%;
    max-width: 220px;
}
.continue-anyway-icon{
    display: none;
}
.continue-anyway-icon.show{
    display: block;
}
.selected{
    color: white;
    border: 2px solid rgb(51 51 144);
    background-color: rgb(51, 51, 144);
}
.not-selected{
    color: rgb(51 51 144);
    border: 2px solid rgb(51, 51, 144);
    background-color: white;

}
.selected:hover{
    color: white;
}
.not-selected:hover{
    color: rgb(51, 51, 144);
}

@media (min-width: 1081px  ) {
    .showHide{
      display: none;
    }
  }

  @media (max-width: 1081px and max-height:811px ) {
    .hand-write{
        display: block ;
        position: fixed;
        top: 70px;
        /* left: 10px; */
    }
    #toggle-full-screen{
        display: block;
    }
    @media (min-width: 1081px) {
        .hand-write{
        display: block ;
        position: fixed;
        top: 70px;
        /* left: 10px; */
    }
    #toggle-full-screen{
        display: block;
    }


  }
  /* @media (min-width: 1081px) {
    .hand-write{
        display: none ;

    }
    #toggle-full-screen{
        display: block;
        display: none;
    }

  } */

  .questions-mistake.show{
    z-index:100;
  }

  svg[data-layer='MODEL'] {
    /* max-width: 100% !important; */
    overflow-x: scroll !important;
    /* white-space: normal !important; */
    position:relative !important;
}