html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.countdown {
    float: left;
}

    .countdown:before {
        content: "(";
    }

    .countdown:after {
        content: ")";
    }

.modal-wrapper {
    display: block;
    position: fixed;
    min-width: 20%;
    width: 35%;
    top: 60%;
    right: 0;
    left: 0;
    margin: 0 auto;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    border-top: solid 7px;
    background: white;
    border-radius: 4px;
    padding: 2% 1%;
    overflow: hidden;
    direction: rtl;
    text-align: center;
}

    .modal-wrapper i {
        font-weight: 300
    }

    .modal-wrapper.success {
        border-top-color: #5ab65a;
    }

        .modal-wrapper.success i {
            color: #5ab65a;
        }

    .modal-wrapper.error {
        border-top-color: #e95c5c;
    }

        .modal-wrapper.error i {
            color: #e95c5c;
        }

    .modal-wrapper.warnning,
    .modal-wrapper.security {
        border-top-color: #f9ef8c;
    }

        .modal-wrapper.warnning i,
        .modal-wrapper.security i {
            color: #f9ef8c;
        }


    .modal-wrapper.information,
    .modal-wrapper.help,
    .modal-wrapper.question {
        border-top-color: #1e90ff;
    }

        .modal-wrapper.information i,
        .modal-wrapper.help i,
        .modal-wrapper.question i {
            color: #1e90ff;
        }


    .modal-wrapper.open {
        opacity: 1;
        visibility: visible;
    }

.r-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999999999;
    right: 0;
    bottom: 0;
    background-color: rgba(179, 179, 179, 0.7098039215686275);
}


.modal-wrapper.open {
    margin-top: -340px;
    opacity: 1;
    resize: both;
}

.head {
    width: 90%;
    padding: 1.5em 5%;
    overflow: hidden;
    text-align: center;
}

.btn-close {
    position: absolute;
    right: 18px;
    top: 5px;
    font-weight: bold;
    font-size: 26px;
    color: #666666;
    cursor: pointer;
}

    .btn-close:hover {
        color: #333333;
    }

.content-modal {
    border: none;
    padding: 0;
    margin: 0;
    white-space: pre-line;
    font-family: 'Montserrat';
    width: 100%;
    word-break: normal;
    background: transparent;
    color: #6d6d6d;
    overflow-y: auto;
    font-size: 14px;
    overflow-x: hidden;
    margin-bottom: 10px;
    margin-top: 10px;
    min-height: 50px;
    max-height: 200px;
    z-index: 1;
    justify-content: center;
    margin: 5px 0 0.3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 12px;
    line-height: 1.8;
    font-weight: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    direction: ltr
}

.title-modal {
    margin: 10px 0;
}


.modal-wrapper .btn-white {
    margin: 0 5px;
    padding: 7px 18px;
}

.r-modal .btn.btn-white {
    background-color: #ddd;
    padding: 7px 30px;
    color: #626262 !important;
    border-color: transparent;
    margin: 15px 10px 10px 10px;
    font-size: 12px;
    border-radius: 5px;
    font-family: 'Montserrat';
    transition: all 0.3s ease-out;
}

    .r-modal .btn.btn-white:active,
    .r-modal .btn.btn-white:hover {
        border-color: transparent;
        background-color: #f0f0f0;
        outline: none;
        box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.2);
    }

.modal-wrapper ::-webkit-scrollbar {
    width: 4px;
    border-radius: 4px;
}

.modal-wrapper ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-wrapper ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .modal-wrapper ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.display-none {
    display: none;
}

@media (max-width: 768px) {
    .modal-wrapper {
        min-width: 70%;
        width: 80%;
        padding: 6% 1%;
    }

        .modal-wrapper.open {
            margin: -180px auto;
        }
}

.top-title-modal {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.8em 1em 0;
    color: inherit;
    font-size: 1.475em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    font-family: 'Montserrat';
    word-wrap: break-word;
    color: #545454
}

/*#region Loging */
.logo-loader {
    width: 150px;
    height: 150px;
    border-radius: 0;
    background: white;
    overflow: hidden;
    padding: 2px;
    margin: auto;
    transform: scale(.9);
}

.line-logo {
    width: 100%;
    height: 18px;
    margin: 6px auto 11px auto;
    border-radius: 25px;
    background-color: #ededed;
    overflow: hidden;
}

.logo-loader > .line-logo:nth-child(1),
.logo-loader > .line-logo:nth-child(5) {
    width: 35%;
}

.logo-loader > .line-logo:nth-child(2),
.logo-loader > .line-logo:nth-child(4) {
    width: 80%;
}

.loading-main .dark-blue {
    background-color: #2060bf;
    width: 45%;
    -webkit-animation: .7s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .7s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .green {
    background-color: #33cc99;
    width: 40%;
    -webkit-animation: .4s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .4s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .red {
    background-color: #ff4545;
    width: 70%;
    -webkit-animation: .6s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .6s scale-out-hor-left 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .yellow {
    background-color: #ffcc00;
    width: 60%;
    -webkit-animation: .5s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .5s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .light-blue {
    -webkit-animation: .8s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .8s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    background-color: #0cf;
    max-width: 80%;
    min-width: 10%;
}

.line-logo > div {
    height: 100%;
    border-radius: 50px;
}

@-webkit-keyframes scale-out-hor-left {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

@keyframes scale-out-hor-left {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(0.4);
        transform: scaleX(0.4);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

.ping {
    -webkit-animation: ping 0.8s ease-in-out infinite both;
    animation: ping 0.8s ease-in-out infinite both;
}

@-webkit-keyframes ping {
    0% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.8;
    }

    80% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }
}

@keyframes ping {
    0% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.8;
    }

    80% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Preloader */

.logo-loader {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    background: white;
    overflow: hidden;
    padding: 2px;
    margin: auto;
    transform: scale(0.4);
}

.line-logo {
    width: 100%;
    height: 18px;
    margin: 6px auto 11px auto;
    border-radius: 25px;
    background-color: #ededed;
    overflow: hidden;
}

.logo-loader > .line-logo:nth-child(1),
.logo-loader > .line-logo:nth-child(5) {
    width: 35%;
}

.logo-loader > .line-logo:nth-child(2),
.logo-loader > .line-logo:nth-child(4) {
    width: 80%;
}

.loading-main .dark-blue {
    background-color: #2060bf;
    width: 45%;
    -webkit-animation: .7s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .7s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .green {
    background-color: #33cc99;
    width: 40%;
    -webkit-animation: .4s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .4s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .red {
    background-color: #ff4545;
    width: 70%;
    -webkit-animation: .6s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .6s scale-out-hor-left 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .yellow {
    background-color: #ffcc00;
    width: 60%;
    -webkit-animation: .5s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .5s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
}

.loading-main .light-blue {
    -webkit-animation: .8s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    animation: .8s scale-out-hor-left cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate forwards;
    background-color: #0cf;
    max-width: 80%;
    min-width: 10%;
}

.line-logo > div {
    height: 100%;
    border-radius: 50px;
}

@-webkit-keyframes scale-out-hor-left {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

@keyframes scale-out-hor-left {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(0.4);
        transform: scaleX(0.4);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

.login-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .login-loader .logo-loader {
        margin: -25px;
    }

.loading-show {
    min-height: 52px;
}

.menu-site-box .logo-loader {
    background: transparent;
    transform: scale(0.3);
    margin: -96px;
}

#items .logo-loader {
    width: 150px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -92px;
}

.single-layers-left div.logo-loader {
    width: 150px;
    display: inline-block;
    flex: 0 0 150px;
}

/*#endregion */

/*#region Swich */

.toggle-check-radio .knobs:before,
.toggle-check-radio .knobs:after {
    content: 'Visible';
    position: absolute;
    top: 4px;
    left: 4px;
    width: fit-content;
    min-width: 5px;
    height: 25px;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
    padding: 5px 7px;
    background-color: #f44336;
    border-radius: 5px;
    transition: all .3s ease;
    font-weight: 500;
    font-family: Segoe UI
}

.user-profile-detail .toggle-check-radio .knobs:before,
.user-profile-detail .toggle-check-radio .knobs:after {
    font-size: .6rem
}

.toggle-check-radio .knobs:before {
    content: 'Invisible';
}

.toggle-check-radio .knobs[disable-text]:before {
    content: attr(disable-text);
}

.toggle-check-radio .knobs[enable-text]:after {
    content: attr(enable-text);
}

.toggle-check-radio .knobs:after {
    right: -100%;
    left: auto;
    background-color: #03A9F4;
    transition: all 0.3s ease;
}

.toggle-check-radio .checkbox:checked + .knobs:before {
    left: -100%;
    transition: all 0.3s ease;
}

.toggle-check-radio .checkbox:checked + .knobs:after {
    right: 4px;
    transition: all 0.3s ease;
}

.toggle-filter-row .checkbox ~ .layer {
    background-color: #fff7f7;
    box-shadow: 1px 1px 5px rgba(208, 208, 208, .87);
}

.button-cover {
    border-radius: 4px;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.periodic .button {
    position: relative;
    top: 50%;
    width: 80px;
    height: 34px;
    margin: 0;
    overflow: hidden;
}

    .periodic .button,
    .periodic.button .layer {
        border-radius: 7px;
    }

        .periodic .button.b2 {
            border-radius: 2px;
        }

.periodic .checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
}

.knobs {
    z-index: 2;
    transition: all 0.3s ease;
}

.layer {
    width: 100%;
    background-color: #f4cbcb;
    transition: all 0.3s ease;
    z-index: 1;
}

.toggle-check-radio .checkbox:checked ~ .layer {
    background-color: #ebf7fc;
}

.check-box-control > label > .periodic {
    margin: 1px 4px 0 6px;
}

.check-box-control > label {
    padding: 10px 0 0 0;
    display: flex
}

span.check-box-control > .periodic {
    margin-top: 0 !important;
}

.assessment-search-box-main .form-group div.periodic,
.filter-box-asssessment div.periodic {
    transform: scale(1.3);
    min-width: auto;
    margin-top: 12px !important;
}

.assessment-search-box-main .toggle-check-radio .knobs::before,
.assessment-search-box-main .toggle-check-radio .knobs::after {
    font-size: 0.58rem;
}

.assessment-search-box-main .toggle-check-radio .knobs[disable-text]::before {
    content: attr(disable-text);
}

.assessment-search-box-main .toggle-check-radio .knobs::after,
.modal .toggle-check-radio .knobs::after {
    background-color: rgb(155, 161, 255);
}

.assessment-search-box-main .toggle-check-radio .knobs[enable-text]::after {
    content: attr(enable-text);
}

.assessment-search-box-main .toggle-check-radio .checkbox:checked ~ .layer,
.modal .toggle-check-radio .checkbox:checked ~ .layer {
    background-color: rgb(231, 232, 253);
}

.icon-switch {
}

    .icon-switch .toggle-check-radio .knobs::after {
        content: "";
        font-family: "Font Awesome 5 Pro";
    }

    .icon-switch .toggle-check-radio .knobs::before {
        content: "";
        font-family: "Font Awesome 5 Pro";
    }

.toggle-filter-row .periodic {
    min-width: 87px;
    margin: 0px !important;
}

.toggle-filter-row label {
    font-size: 0.65rem;
    font-family: 'Montserrat';
    color: rgb(120, 115, 115);
    font-weight: 600;
    margin: 6px 0px;
}

.toggle-filter-row .toggle-check-radio .knobs[disable-text]::before,
.toggle-filter-row .toggle-check-radio .knobs[enable-text]::after {
    font-size: 0.7rem;
}

.toggle-filter-row .periodic .button {
    height: 31px;
}

.toggle-filter-row .toggle-check-radio .knobs::before,
.toggle-filter-row .toggle-check-radio .knobs::after {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.periodic .button {
    position: relative;
    top: 50%;
    width: 80px;
    height: 23px;
    margin: 0;
    overflow: hidden;
}

    .periodic .button,
    .periodic.button .layer {
        border-radius: 100px;
    }

.setting-row-item .periodic .toggle-check-radio {
    margin-bottom: -13px;
}

.periodic .checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
}

.toggle-check-radio .checkbox:checked ~ .layer {
    background-color: #ebf7fc;
}

.layer {
    width: 100%;
    background-color: #fcebeb;
    transition: all 0.3s ease;
    z-index: 1;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.toggle-check-radio .knobs:before,
.toggle-check-radio .knobs:after {
    content: 'Visible';
    position: absolute;
    top: 3px;
    left: 4px;
    width: fit-content;
    min-width: 50%;
    height: 17px;
    color: #fff;
    font-size: .85em;
    text-align: center;
    line-height: .6;
    padding: 5px 7px;
    background-color: #f44336;
    border-radius: 25px;
    transition: all .3s ease;
    font-weight: 500;
    font-family: Segoe UI
}

.toggle-check-radio .checkbox:checked + .knobs:before {
    left: -100%;
    transition: all 0.3s ease;
}



.toggle-check-radio .knobs:before {
    content: 'Invisible';
}

.toggle-check-radio .checkbox:checked + .knobs:after {
    right: 4px;
    transition: all 0.3s ease;
}



.toggle-check-radio .knobs[enable-text]:after {
    content: attr(enable-text);
}



.toggle-check-radio .knobs:after {
    right: -100%;
    left: auto;
    background-color: #03A9F4;
    transition: all 0.3s ease;
}

.toggle-check-radio .knobs[disable-text]:before {
    content: attr(disable-text);
}

.knobs {
    z-index: 2;
    transition: all 0.3s ease;
}

.setting-row-item .toggle-check-radio .knobs:before,
.setting-row-item .toggle-check-radio .knobs:after {
    font-size: .65rem;
}

.single-switch > .periodic {
    margin: 6px -17px -1px -2px !important;
}

.single-switch .toggle-check-radio .knobs[disable-text]:before {
    content: "" !important;
}

.toggle-check-radio[enable-color="green"] .knobs[enable-text]:after,
.toggle-check-radio[disable-color="green"] .knobs[disable-text]:before {
    background-color: #56BABD
}

.toggle-check-radio[enable-color="green"] .layer,
.toggle-check-radio[disable-color="green"] .layer {
    background-color: #ebfcf8
}

.toggle-check-radio[enable-color="blue"] .knobs[enable-text]:after,
.toggle-check-radio[disable-color="blue"] .knobs[disable-text]:before {
    background-color: #03A9F4
}

.toggle-check-radio[enable-color="blue"] .layer,
.toggle-check-radio[disable-color="blue"] .layer {
    background-color: #ebf7fc
}

.toggle-check-radio[enable-color="red"] .knobs[enable-text]:after,
.toggle-check-radio[disable-color="red"] .knobs[disable-text]:before {
    background-color: #f44336
}

.toggle-check-radio[enable-color="red"] .layer,
.toggle-check-radio[disable-color="red"] .layer {
    background-color: #fcebeb
}

.single-switch .periodic {
    margin: 3px 0 -5px 0 !important;
}

.share-box-feed-entry-wrapper .icon-switch .toggle-check-radio .knobs::before,
.share-box-feed-entry-wrapper .icon-switch .toggle-check-radio .knobs:after {
    content: "";
}

.single-switch > .periodic {
    margin: 6px -17px -1px -2px !important;
}

.single-switch .toggle-check-radio .knobs[disable-text]:before {
    content: "" !important;
}


.single-switch .periodic {
    margin: 3px 0 -5px 0 !important;
}


/*#endregion */

/*#region Modal */

#ApplyDiscountonStoreComponentModal .modal-content {
    background: transparent;
    box-shadow: none;
}

#ApplyDiscountonStoreComponentModal .modal-body {
    background: transparent;
}

.modal-FullScreen {
    max-width: 100%;
    margin: 0px;
    height: 100%;
}

    .modal-FullScreen > .modal-content {
        width: 100%;
        max-width: 100%;
    }

.layout-box-assessment .modal .image-mapper {
    width: fit-content;
    margin: auto;
    background-color: #fff !important;
}

.modal .teacher-show-read-more {
    max-height: 100% !important;
}

.modal .achievement-step .form-group.form-row-group .form-control {
    padding: 6px 7px;
}

.modal-body .form-group .check-row label input {
    margin-right: 5px;
}

.modal-body .form-group .check-row label {
    display: flex;
    align-items: center;
}

.modal-body .rz-treenode {
    padding-left: 0px;
}

.modal-body .rz-treenode-content .rz-treenode-label {
    padding: 5px;
    border-radius: 5px !important;
}

.modal-body .rz-treenode-content-selected .rz-treenode-label,
.modal-body .rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label {
    border-radius: 2px;
    color: rgb(132, 132, 132);
    background-color: transparent;
}

.modal-body .tree-category-box .rz-chkbox {
    margin-right: 5px;
    height: 1rem;
    min-width: 1rem;
    width: 1rem;
}

.modal-body .tree-category-box .rz-treenode-content {
    margin-bottom: 5px;
    padding: 10px;
    background-color: rgb(241, 241, 241);
    border-radius: 5px;
}

.feed-shared-title.title-modal {
    font-size: 1.2em;
    font-weight: 600;
    color: rgb(93, 93, 93);
    font-family: Segoe UI
}

.modal-body .form-group label.single-title {
    font-size: 1rem;
    color: rgb(47, 47, 47);
    font-weight: 500;
    margin-top: 10px;
}

.modal.fade.show {
    z-index: 9999;
    background: rgba(109, 109, 109, 0.4);
    display: block !important;
}

.fix-modal .modal.fade.show {
    display: none !important;
}

.modal-backdrop {
    z-index: 0;
}

.modal-body .cloud-setting-modal .form-group label {
    margin-bottom: 0px !important;
}

.cloud-setting-modal .form-group input {
    height: 24px;
    padding: 5px;
    line-height: normal;
    width: 43px !important;
    margin: 0px 5px !important;
}

.cloud-setting-modal textarea::placeholder {
    color: rgb(221, 221, 221);
}

.modal-content .finish-button {
    box-shadow: none;
}

.modal-content .form__radio-group.true-answer .form__radio-button {
    border-color: #8be260;
}

.modal-content .question-box .form__radio-group.true-answer .form__radio-button::after {
    background-color: #8be260;
}

.modal-content .form__radio-group.false-answer .form__radio-button {
    border-color: #C34E55;
}

.modal-content .question-box .form__radio-group.false-answer .form__radio-button::after {
    background-color: #C34E55;
}

.modal-content .question-controllers {
    min-height: auto;
    padding: 0px 6px;
}

.modal-content .question-box {
    background-color: transparent !important;
}

    .modal-content .question-box .form-row-control {
        margin: 0px;
    }

.modal-content .question-item {
    padding: 20px;
}

.modal-content .question-item-num,
.modal-content .zoom-question {
    right: 33px;
    box-shadow: none;
    border-radius: 5px;
}

.modal .close:hover,
.modal .close:focus {
    color: rgb(153, 153, 153);
    text-decoration: none;
    cursor: pointer;
}

.modal-title {
    font-family: Segoe UI
}

.modal-content {
    position: relative;
    background-color: rgb(254, 254, 254);
    margin: auto;
    padding: 0px;
    width: 90%;
    max-width: 1200px;
    min-height: 60%;
    border: none;
    box-shadow: rgb(148, 148, 148) 0px 1px 12px;
}

.modal-body .form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    color: rgb(148, 148, 148);
    font-weight: 500;
    width: 100%;
    text-align: left;
    margin-left: 0px;
}


.modal-body .timeline-card-body .form-group.form-group-icon label {
    display: none;
}

.feed-modal .row-input-control {
    margin: 0px;
}

.feed-modal .post-detail {
    flex-direction: row;
    margin: 0px 0px 3px -8px;
}

.modal .internal-buttons-row {
    display: flex;
    flex-direction: row-reverse;
}

.modal .form-price-item span {
    font-weight: 500;
    font-size: 16px;
    padding: 8px;
}

.modal .form-price-item .event-mini-input {
    font-size: 11px;
}

.modal .item-upload.quarter-size .label-uploader {
    font-size: 11px;
    text-align: center;
}

.modal-body .form-group .teacher-box-header label {
    width: fit-content;
    font-size: 0.8rem;
    color: rgb(73, 73, 73);
    font-weight: 600;
}

.scroll-up.modal-open header,
.scroll-down.modal-open header {
    z-index: 3;
}

.modal-open-main {
    overflow: hidden
}

    .modal-open-main .modal {
        overflow-x: hidden;
        overflow-y: auto;
    }

.role-modal {
    padding: 15px;
}

    .role-modal .sharebox-bottom-bar input {
        margin-left: 10px;
        vertical-align: middle;
        margin-right: 8px;
    }

    .role-modal .li-icon.icon-orange {
        background: rgba(223, 185, 111, 0.26);
    }

    .role-modal .li-icon.icon-green {
        background: rgba(128, 190, 97, 0.25);
    }

    .role-modal .li-icon.icon-orange {
        background: rgba(245, 175, 155, 0.36);
    }

    .role-modal .li-icon.icon-blue {
        background: rgba(142, 192, 241, 0.17);
    }

    .role-modal .li-icon.icon-red {
        background: rgba(234, 182, 168, 0.35);
    }

    .role-modal .sharebox-bottom-bar label {
        width: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 0px 10px;
    }

    .role-modal .li-icon {
        font-size: 16px;
        background: rgb(221, 221, 221);
        width: 33px;
        padding: 7px;
        border-radius: 16px;
        display: flex;
        justify-content: center;
    }

    .role-modal .sharebox-bottom-bar {
        border-radius: 50px;
        background: linear-gradient(145deg, #fff, #fff);
        box-shadow: rgb(217, 217, 217) 20px 20px 76px, rgb(236, 236, 236) 0px 1px 6px;
        padding: 0px;
        margin: 4px 4px 15px;
    }

    .role-modal .modal-body {
        padding: 15px 11px;
    }

    .role-modal .other-checkbox {
        margin-top: 20px;
        border-top: 2px solid rgb(221, 221, 221);
    }

    .role-modal .artdeco-button-text {
        padding: 0px;
        font-size: 0.8rem;
    }

    .role-modal .sharebox-bottom-bar:hover {
        background-color: transparent;
    }

.modal .form-group input[type="datetime-local"].form-control {
    z-index: 2;
}

.user-modal > div {
    height: 100%;
}

.full-height-modal .modal-dialog {
    height: calc(100vh - 57px);
}

.full-height-modal .modal-content {
    min-height: 100%;
}

.modal-footer:empty {
    display: none;
}

.modal-open #totop {
    z-index: 1;
}

.modal .item-upload.item-uploaded-control > i:first-child {
    right: 0px;
}

.modal .assessment-terms-detail label,
.modal .check-center-control label {
    font-size: 0.9rem;
    font-family: Segoe UI;
    color: rgb(143, 143, 143);
    font-weight: 400;
}

.modal .button-footer .assessment-btn {
    padding: 8px 17px !important;
}

.modal .check-row.check-center-control .periodic {
    display: block;
    margin: 0px 18px -4px 10px !important;
}

.modal .about-item {
    border: 0px;
    padding: 20px 0px 0px;
}

.modal .select-control {
    padding: 0px !important;
}

.modal .address-selection-box .row {
    margin: 0px;
}

.modal-body .profile-card-img .label-text {
    font-size: 1.2rem;
    color: rgb(85, 85, 85);
    font-weight: 600;
    width: 100%;
    font-family: Segoe UI;
    margin: 2px 0px 4px 0;
}

.modal .table-design table {
    padding: 7px;
}

.modal-open .career-cloud-box .modal {
    top: 0px;
}

:not(.modal-open) .modal.show .modal-dialog {
    padding-top: 100px;
}

.modal.show .modal-dialog.modal-FullScreen {
    padding: 20px;
}

.modal .voice-answer .item-upload,
.modal .book-page-voice .item-upload {
    min-height: 47px;
    font-size: 0.75rem;
    border-radius: 6px;
    margin: 14px auto;
    min-width: 120px !important;
}

.modal .question-item-input.book-page-voice {
    padding-left: 0px;
}

.modal .voice-answer .img-magnifier-container video {
    width: 100%;
}

.modal .assessment-btn,
.report-box .assessment-btn {
    border: none;
    border-radius: 5px;
    padding: 8px 17px;
    color: #ffffff;
    font-family: Segoe UI;
    font-size: 15px;
}

.modal .form-group .assessment-btn {
    padding: 8px 17px;
}

.modal .assessment-terms-button .assessment-btn {
    padding: 9px 18px;
}

.modal .assessment-result-setting.row {
    padding: 0px;
}

.modal-content .bar-wrap {
    margin: 0px 40px;
    background-color: rgba(139, 144, 229, 0.08);
}

.modal-content .bar-text-control:empty {
    display: none;
}

.modal-content .assessment-row-input label span {
    display: none;
}

.modal-content .assessment-row-input .check-row label span {
    display: block;
    font-size: 0.7rem;
    margin-bottom: -2px;
}

.modal-content .assessment-row-input .response-div label span {
    display: block;
}

.modal-content .question-header-titles {
    padding: 0px 42px;
    font-family: Segoe UI
}

.modal-backdrop.show:empty {
    display: none;
}

.modal .response-row .assessment-row-input .timer-answer {
    margin-left: -2px;
    margin-bottom: -10px;
}

.modal .editable-input .edit-title {
    top: 10px;
}

.modal .form-group .form-check-input {
    margin-right: 2px;
}

@media (min-width: 768px) {
    .modal-share-box .btn-row-items {
        display: flex;
        margin: 0px !important;
    }

    .modal-share-box .frame {
        margin-bottom: 0px;
        padding: 8px;
    }

    .modal-share-box .post-reply-setting {
        height: auto;
        margin-bottom: 3px;
    }

    .modal-share-box .post-reply-setting-item {
        padding: 2px 5px;
        margin-right: 8px;
    }

    .modal-share-box .share-box-feed-entry-wrapper {
        background-color: rgb(247, 247, 247);
        border: 1px solid rgb(238, 238, 238);
    }
}

.modal-body .form-group > h5 {
    font-family: Segoe UI;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgb(61, 61, 61);
}

.modal .assessment-result-setting .button-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    margin-bottom: -15px;
}

.modal .color-warning {
    background-color: rgb(224, 168, 0);
    color: #fff !important;
}

.modal .button-row {
    justify-content: end;
}

.modal-body .check-box-row-two ~ .modal-footer,
.modal-body > .modal-footer {
    margin: 10px -15px -15px;
}

.modal-body .custom-table > .justify-content-between {
    padding: 5px;
}

.modal .editable-input .edit-title {
    top: 10px;
}

.modal .item-upload:hover .remove-category,
.item-upload.item-uploaded-control:hover .remove-category,
.exam-item:hover .remove-category {
    opacity: 1;
}

.modal-body .assessment-terms-detail .item-uploaded img {
    margin: 0px;
}

.modal-body .assessment-terms-detail {
    padding-left: 0px;
}

    .modal-body .assessment-terms-detail::after {
        display: none;
    }

@media screen and (max-width: 768px) {
    #AddStudentCreditModal .row.m-0 .col-2 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-left: 13px;
        margin-right: -13px;
    }

    #AddStudentCreditModal .row.m-0 .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #AddStudentCreditModal .modal-lg {
        width: 100% !important;
        padding-top: 0;
        margin: 0;
    }

    .modal-content .question-item {
        padding: 10px;
    }

    .modal-content .question-box .form__checkbox-group,
    .modal-content .question-box .form__radio-group {
        padding-left: 0px;
    }

    .modal-content .question-item-img {
        padding: 0px;
    }

    .modal-content .question-box .form-row-control {
        padding: 10px;
    }

    .modal.fade.show {
        z-index: 99999999;
    }

    .modal-body .form-group label {
        font-size: 0.8rem;
    }

    .modal.show .modal-dialog,
    .modal-content {
        min-height: 100vh;
        margin: 0px;
        padding-top: 0px !important;
    }

    .modal-content,
    .assessment-search-box-main .form-group > div {
        width: 100%;
    }

    .modal-control-top .modal-content {
        border-radius: 0px;
    }

    .modal.fade.show {
        max-height: 100vh;
    }

    .modal-open .footer-mobile .global-nav-primary-items {
        display: none
    }

    .modal-open #responsive-menu-icon {
        position: absolute;
        z-index: 0
    }

    .modal-open .chat-box-btn {
        z-index: auto !important;
    }

    #SendMessageToSuppotersModal .modal-dialog {
        max-width: 100% !important
    }

    .modal-dialog .checkbox-row-control {
        justify-content: flex-end;
    }

    :not(.modal-open) .modal.show .modal-dialog {
        max-width: 100%;
    }
}

.modal .question-box.question-box-right .image-mapper .mapperShow-box {
    position: absolute;
}

    .modal .question-box.question-box-right .image-mapper .mapperShow-box .form-control {
        font-size: 0.75rem;
    }

.modal .main-result-setting.assessment-result-setting {
    width: 100%;
    padding: 0px;
}

.modal .exam-management-tab .assessment-tab-main {
    margin: 0px 0px 20px;
}

.modal .assessment-setting-tab,
.modal .exam-management-tab .assessment-tab-main {
    position: relative;
    top: 4px;
    left: 0px;
    padding: 6px;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 31px;
}

.modal .audio-options {
    padding-left: 25px;
}

    .modal .audio-options label {
        margin: -1px 18px 0px 6px;
    }

.MeetingHallModal .periodic {
    margin: 0px 16px -3px 10px !important;
}

.MeetingHallModal .item-upload {
    min-height: 70px;
    margin: 21px 0px;
}

    .MeetingHallModal .item-upload img {
        background-color: transparent;
    }

.MeetingHallModal .input-with-check-box {
    display: flex;
    align-items: center;
    max-width: 135px;
}

.MeetingHallModal .check-box-row {
    width: auto;
    transform: scale(1.5) translateY(2px);
}

.MeetingHallModal .item-upload {
    min-height: 70px;
}

.modal .question-type {
    width: 100%;
}

.modal .editable-input .form-control {
    padding-left: 5px !important;
}

.modal .form-check > input:checked + label::after {
    top: -0.35rem !important;
}

.modal-open div:not(.modal) .button-cover {
    z-index: 0;
}

.modal .assessment-terms-detail.row-two-switch ~ .row {
    margin: 0px -15px;
}

.assessment-mini .frame.result-tabs .modal .row > div {
    padding: 0px !important;
}

.modal-body .custom-table > .justify-content-between {
    font-size: 11px;
}

.qkids-modal > .modal-dialog > .modal-content > .modal-body {
    padding: 0
}

.qkids-modal .modal-content {
    width: 100%;
}

.qkids-modal .bg-warning.rounded-top {
    padding: 15px !important;
    font-size: 24px;
}

.qkids-modal .row-group-flex .form-group input[type="datetime-local"].form-control {
    width: 190px;
}

.qkids-modal .close {
    display: none !important
}

.qkids-modal .nav-item .btn-sm.btn-default {
    text-transform: none !important;
    background: #f8f8f8;
    color: #464646 !important;
    padding: 9px 18px;
}

.modal-box-site .form-creator .form-group > label {
    font-size: 1rem;
    font-weight: 500;
    color: #3a3a3a;
    margin-top: 10px;
    margin-bottom: 8px;
}

.modal-box-site .form-creator .custom-table tr > th:first-child,
.modal-box-site .form-creator .custom-table tr > td:first-child {
    width: 100%;
}

.modal-body > .row.credit-row-box {
    padding-bottom: 0 !important
}

.modal-open .support-btn {
    z-index: 1
}

.modal-open .support-btn {
    z-index: 1
}

@media screen and (max-width: 992px) {
    .qkids-modal .row-group-flex .form-group input[type="datetime-local"].form-control {
        width: 160px;
    }

    .modal.modal-control-top {
        top: 43px;
    }

    .modal .post-event-view .event-title-input {
        font-size: 0.8rem;
        font-family: Segoe UI;
        height: auto;
        padding: 4px;
        margin: 5px -10px;
    }
}

.modal .div-bg-white {
    padding: 0px !important;
}

.modal .aspects-page {
    margin: 0px 15px;
}

@media screen and (max-width: 1200px) {

    :not(.modal-open) .modal.show .modal-dialog {
        width: 100%;
        max-width: 80%;
        margin: auto;
    }

    .modal-content {
        max-width: 100%;
        width: 100%;
    }

    .modal-open .d-print-none {
        z-index: 1;
    }

    .modal .form-group select.form-control {
        margin: 0px;
        width: 100%;
    }
}

.modal .form-group select.form-control option,
.modal .form-group select.form-control {
    font-weight: 500
}

.modal label > .periodic {
    margin: 0px 0px -4px 5px !important
}

.modal .two-switch label {
    justify-content: space-between;
}

    .modal .two-switch label > .periodic {
        margin: 0px 43px -4px 5px !important;
    }

.modal .assessment-btn svg {
    width: 24px;
    height: 24px;
}

.modal .editable-input .edit-title {
    top: 10px;
}

.modal .frame {
    box-shadow: none;
    padding: 0;
    margin-bottom: 0px;
}

.modal .timeline-card.frame {
    padding: 0
}

.modal .timeline-card-body {
    margin-top: 0;
    height: 100%;
}

    .modal .timeline-card-body.custom-scroll {
        max-height: fit-content;
        margin: 0;
    }

.modal-open .share-box-feed-entry-wrapper {
    z-index: 0
}

.modal .flex-row-event-box .event-credit-box input,
.modal .flex-row-event-box .event-duration-input-box input {
    min-width: 50px;
}

.modal .timeline-card.frame {
    padding: 0
}

.modal .timeline-card-body {
    margin-top: 0;
    height: 100%;
}

    .modal .timeline-card-body.custom-scroll {
        max-height: fit-content;
        margin: 0;
    }

.modal .item-upload {
    width: calc(50% - 8px) !important;
}

.modal-open .share-box-feed-entry-wrapper {
    z-index: 0
}

.modal .flex-row-event-box .event-credit-box input,
.modal .flex-row-event-box .event-duration-input-box input {
    min-width: 50px;
}

.modal-body .form-group > span:not(.form-group-span) {
    font-family: Segoe UI;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgb(61, 61, 61);
    width: 100%;
    display: inline-block;
    background: rgb(240, 240, 240);
    padding: 10px 5px;
    border-radius: 3px;
    border: 1px solid rgb(221, 221, 221);
}

.curved-modal .modal-body,
.curved-modal .modal-content {
    border-radius: 40px;
}

@media screen and (max-width:992px) {
    .qkids-modal .student-score-table .credit-row-items {
        width: 100%;
        flex-wrap: wrap;
        margin: 0;
    }

    .qkids-modal .student-wallet-table .credit-row-items > div {
        width: 100%;
        justify-content: space-between;
        padding: 10px;
    }

        .qkids-modal .student-wallet-table .credit-row-items > div > div,
        .qkids-modal .credit-row-items.credit > div {
            min-width: 100px;
        }

        .qkids-modal .student-wallet-table .credit-row-items > div > span {
            font-size: 16px;
        }

    .qkids-modal .mt-44 {
        margin-top: 20px !important;
    }
}

#QkidsRequestDemoComponentQkidsSiteLayoutModal .si-btn.si-pink {
    padding: 6px 6px 6px 21px;
    margin-top: 25px;
}

.modal-login .modal-content {
    padding: 15px 40px;
    border-radius: 30px;
}

.modal-login .modal-body {
    padding: 0;
}

.modal-login .si-btn {
    box-shadow: 12px 12px 20px 0 rgba(1, 96, 231, 0.3);
    -webkit-box-shadow: 12px 12px 20px 0 rgba(1, 96, 231, 0.3);
    -moz-box-shadow: 12px 12px 20px 0 rgba(1, 96, 231, 0.3);
    font-size: 12px;
    width: 140px;
    max-width: 140px;
    padding: 16px 16px 16px 16px;
}

.modal-login .login-tab .si-btn {
    margin: 0 15px;
}

.modal-login h4 {
    font-size: 2rem;
    font-family: "Gotham Rounded";
    text-align: center;
    margin: 40px 0 25px 0;
    font-weight: bold;
    color: #00c3ff;
}

.modal-login .form-control {
    border-color: #e7e7e7;
    padding: 10px 15px;
    border-radius: 20px;
    height: auto;
    font-size: 16px;
    height: 49px;
    line-height: 1.875;
    font-family: "Gotham Rounded";
}

.modal-login .phone-area-input select.form-control {
    width: fit-content;
    border: none;
    position: absolute;
    top: 9px;
    left: 5px;
    background: transparent;
    padding: 8px 2px;
    font-size: 13px;
    height: auto;
    font-weight: 600;
}

#CreateNewAccountModal .phone-area-input select.form-control {
    position: relative;
    padding: 0;
    border: 1px solid #e7e7e7;
    height: 51px;
    border-radius: 20px 0 0 20px;
    border-right: 0;
    margin-left: 0px;
    top: 0;
    left: 0;
    z-index: 1;
}

    #CreateNewAccountModal .phone-area-input select.form-control + input {
        border-radius: 5px 20px 20px 5px;
        margin: -1px 1px -1px 5px;
        padding: 9px 10px 10px 10px;
    }

.modal-login .modal-content {
    width: 100%;
}

.modal-youtobe {
    text-align: center;
}

    .modal-youtobe iframe {
        width: 900px;
        margin: auto;
        height: 500px;
    }

.modal-box-site .modal-content,
.modal-box-site .modal-body {
    border-radius: 30px;
}

.modal-border-pad * {
    font-family: "Gotham Rounded";
}

.modal-border-pad p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.875;
    font-weight: 400;
}


.modal-border-pad .modal-content,
.modal-border-pad .modal-body {
    border-radius: 30px;
    width: 100%;
}

.modal-border-pad .modal-content {
    padding: 0 15px;
}

.modal-border-pad ul,
.modal-border-pad ol {
    margin: 0 0 20px;
    padding-left: 18px;
    list-style: disc;
    font-size: 16px;
    line-height: 1.875;
    font-weight: 400;
}

.modal-border-pad a {
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    color: #00c3ff;
    text-decoration: none;
}

    .modal-border-pad a:visited {
        color: #00c3ff;
    }

    .modal-border-pad a:hover,
    .modal-border-pad a:focus,
    .modal-border-pad a:active {
        color: #fe4c1c;
        text-decoration: none;
    }

.modal-border-pad .btn {
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}

.custom-modal-pad .modal-body > span {
    color: #595959;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
    width: 100%;
    display: inline-block;
    margin-bottom: 15px;
    font-family: "GothamRounded-Medium", 'Gotham Rounded';
}

.custom-modal-pad ul span {
    font-family: "GothamRounded-Medium", 'Gotham Rounded';
    font-weight: 600;
    color: #595959;
    font-size: 1.875em;
    text-align: left;
}

.modal .login-box .form-group {
    margin: 10px 28px;
    width: auto;
}

    .modal .login-box .form-group .form-control {
        border-radius: 40px;
    }

        .modal .login-box .form-group .form-control:hover {
            border-color: #e7e7e7;
        }

.modal-content-site {
    margin-left: 50px;
    margin-right: 50px;
}

    .modal-content-site h3 {
        text-align: center;
        margin: 40px 0 35px 0;
        font-size: 32px;
    }

@media screen and (max-width: 992px) {
    .modal .link-row + .row-download.row {
        margin: 0
    }

    .modal .download_full .app:before {
        margin: 0 15px !important;
    }

    .modal .d-flex.f-space .si-btn.login-button {
        padding: 5px 10px 5px 25px;
        min-width: fit-content;
        font-size: 1rem;
        margin: 11px 0px !important;
    }

    .modal-login .modal-content {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .modal-login .modal-content {
        padding: 30px 10px !important;
        border-radius: 30px;
    }
}

.modal .download_full .app {
    width: 20%;
    min-width: 30px;
    font-size: 13px;
    margin: 5px;
    padding: 0;
    border: none;
    color: #161616;
    text-align: center;
}

.modal .row-download h1 {
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
}

.modal .download_full .app:before {
    filter: brightness(0.3);
}

.modal .download_full .app:before {
    margin: 0 10px;
    filter: brightness(0.3);
}

.modal .row-download .download_full {
    padding: 10px 5px;
}

.modal .download_full .app {
    width: 23%;
    border-radius: 15px;
    margin: 5px 1px;
}

.modal .link-row {
    flex-direction: column;
    align-items: baseline;
    font-size: 15px;
    line-height: 2;
    margin-top: 20px;
}

    .modal .link-row a i {
        font-style: normal;
        color: #3c95d6;
    }

#QkidsRequestDemoComponentModal .si-btn.si-pink {
    padding: 5px 8px 5px 20px;
}

.cover-store > .container .modal {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: transparent;
    height: auto;
}

.cover-store.basket-box > .container .modal .modal-content {
    box-shadow: 1px 1px 14px 9px rgba(108, 108, 108, .30);
}

.cover-store.basket-box > .container .modal .btn-dark {
    border-radius: 4px;
}

#CreateNewAccountModal .phone-area-input input {
    padding: 9px 10px 10px 10px !important;
}

#SiteForgotPasswordModal .phone-area-input input {
    padding-left: 160px !important;
}

#SiteForgotPasswordModal .phone-area-input select {
    top: 15px;
}

.ad-box .modal .post-gallery {
    margin-top: 30px;
}

.ad-box .modal .feed-shared-body-text .item {
    display: flex;
    justify-content: center;
    background: #ebebeb;
    margin: 15px 0 20px 0;
    border-radius: 10px;
}

.ad-box .modal .feed-shared-body-text .event-title-bold {
    font-size: 17px;
    font-weight: 600;
    max-width: calc(100% - 150px);
    margin-top: 10px;
}

.ad-box .modal .feed-shared-body-text .teacher-show-read-more {
    line-height: 1.3;
    margin-top: 20px;
    text-align: justify;
    font-size: 15px;
}

.ad-box .modal .owl-carousel .owl-item img {
    object-fit: contain;
    width: 100%;
    margin: auto;
    max-height: 400px;
    min-height: 300px;
}

.ad-box .modal .owl-carousel .owl-nav {
    top: 50%;
}

.ad-box .modal .modal-item-event {
    width: fit-content;
    float: right;
}

    .ad-box .modal .modal-item-event .text-dec {
        display: flex;
        font-size: 16px;
        flex-direction: column-reverse;
    }

.ad-box .owl-dots {
    display: none
}

.ad-box .modal .eventView-row {
    display: flex
}

.ad-box .modal .footer-item-event {
    margin: 12px 15px 0 0;
}

.modal-login h4 {
    font-size: 2rem;
    text-align: center;
    font-family: "Gotham Rounded" !important;
    margin: 40px 0px 25px !important;
    font-weight: bold !important;
    color: rgb(0, 195, 255) !important;
}

@media screen and (max-width: 992px) {
    .modal.modal-youtobe .modal-dialog {
        min-height: 30%;
        max-height: 50%;
        margin-top: 200px !important;
    }

    .modal-youtobe iframe {
        width: 100%;
        height: 100%;
        min-height: 400px;
        margin: 0px;
    }
}

@media screen and (max-width: 540px) {
    .modal-youtobe iframe {
        min-height: 200px;
    }
}


.select-search {
    background-color: #fff;
    position: relative;
    border-radius: 8px;
    padding: 5px 7px;
    border: 1px solid #DBDBDB;
    width: 100%;
}

    .select-search > input {
        width: 100%;
        border: none;
        border-radius: 5px;
        padding: 7px;
        font-family: 'Poppins';
        position: relative;
        background: transparent;
        min-height: 33px;
        font-weight: 600;
    }

.sort-icon,
.clear-input {
    position: absolute;
    bottom: 18px;
    right: 9px;
    font-size: 11px;
}

@media(max-width:1200px) {

    .sort-icon,
    .clear-input {
        right: 0
    }
}

.select-values {
    min-width: 200px;
    display: none;
    height: 172px;
    overflow: hidden auto;
}

    .select-values input:focus,
    .select-values input:active {
        outline: none !important;
    }

    .select-values input {
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        border: 1px solid rgb(218, 223, 225);
        width: 100%;
        transition: box-shadow 0.3s ease 0s;
    }

.select-values {
    min-width: 200px;
    display: none;
    height: 172px;
    overflow: auto;
    overflow-x: hidden;
}

    .select-values input[type=checkbox] {
        display: none
    }

.select-search .clear-input {
    z-index: 5
}


.select-values label input {
    position: absolute;
    opacity: 0;
}

.select-values > .item {
    color: #6c6c6c;
    width: 100%;
    text-align: left;
    padding: 11px 16px;
    font-size: .85em;
    cursor: pointer;
    font-weight: 500;
}

    .select-values > .item:hover {
        background-color: #f7f7f7
    }

.check-box-input {
    position: relative;
    display: inline-block;
    padding-left: 26px;
    color: rgb(56, 64, 71);
    font-size: 14px;
}


    .check-box-input:after {
        content: url(/img/icon/check.svg);
        position: absolute;
        filter: invert(1);
        transform: scale(1.2);
        top: 0px;
        left: 4px;
        display: none;
    }

    .check-box-input:before {
        content: "";
        position: absolute;
        left: 0px;
        top: -1px;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        border: 1px solid rgb(218, 223, 225);
        background-color: rgb(255, 255, 255);
        transition: border-color 0s ease 0s, background-color 0s ease 0s, all 50ms ease 0s;
    }

.select-values input[type=checkbox]:checked + .check-box-input:after {
    display: block
}

.select-values input[type=checkbox]:checked + .check-box-input:before {
    background-color: rgb(122, 155, 209);
    border-color: rgb(122, 155, 209);
}

.select-values input[type=checkbox]:checked + .check-box-input img {
    display: inline-block;
}

.check-box-input img {
    position: absolute;
    left: 2px;
    filter: invert(1);
    top: 4px;
    width: 14px;
}

.select-values.active {
    display: block;
    position: absolute;
    background-color: #fff;
    align-items: flex-start;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .20);
    z-index: 9
}

.select-values {
    min-width: 200px;
    display: none;
    height: 172px;
    overflow: auto;
    overflow-x: hidden;
}


    .select-values > input[type="text"] {
        padding: 4px;
        font-size: .8rem;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

:not(.native-search-box) .select-values {
    min-width: 250px;
}



.select-values.active {
    display: block;
    position: absolute;
    background-color: #fff;
    align-items: flex-start;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .20);
    z-index: 9;
}

.select-values input {
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 15px;
    border: 1px solid #dadfe1;
    font-size: .75rem;
    width: 100%;
    transition: box-shadow .3s ease;
}

.select-values label {
    margin-bottom: 5px;
    width: 100%;
    text-align: left;
    font-weight: 600;
}

    .select-values label input {
        position: absolute;
        opacity: 0;
    }

    .select-values label input {
        position: absolute;
        opacity: 0;
    }

.select-values > .item {
    color: #6c6c6c;
    width: 100%;
    text-align: left;
    padding: 11px 16px;
    font-size: .85em;
    cursor: pointer;
    font-weight: 500;
}

    .select-values > .item:hover {
        background-color: #f7f7f7
    }

.select-values input[type=checkbox]:checked + .check-box-input:after {
    display: block
}

.select-values input[type=checkbox]:checked + .check-box-input:before {
    background-color: rgb(122, 155, 209);
    border-color: rgb(122, 155, 209);
}

.select-values input[type=checkbox]:checked + .check-box-input img {
    display: inline-block;
}

.select-control {
    background-image: url("/img/icon/down-arrow.svg");
    background-repeat: no-repeat;
    background-position: 91% 50%;
    background-size: 10px;
    font-size: 14px;
    min-width: 160px;
    z-index: 0;
    padding: 10px !important;
}

.drop-down-icon .row-input-control > .select-option-control ul li {
    padding: 11px 8px;
    font-size: 11px;
}

.row-input-control ul.select-option-control.open {
    display: block;
}

@media(max-width:768px) {
    .select-control {
        background-position: 93% 50%;
        width: 100%;
    }
}

.no-item {
    line-height: normal;
    padding: 0;
    font-weight: 300;
    padding-top: 3px;
    color: #898989;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    font-family: Segoe UI;
    width: 100%;
    text-align: center;
    padding: 5px;
}

    .no-item.text-center {
        display: block;
        width: 100%
    }

@media (min-width: 1200px) {

    .modal-dialog.modal-xxl {
        max-width: 90%;
    }

    .modal-xxl .modal-content {
        max-width: 100%;
        width: 100%
    }

    :not(.modal-open) .modal.show .modal-dialog.modal-xxl {
        padding-top: 20px;
    }
}
/*#endregion */