.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;
}

.mail-info-details-footer > button {
    margin-right: 5px;
}

.btn-red {
    border: none;
    outline: none;
    height: 30px;
    font-size: 14px;
    color: #ffffff;
    background-color: rgb(252, 69, 69);
    padding: 0px 10px;
    border-radius: 5px;
}

    .btn-red:hover {
        background-color: rgb(229, 56, 56);
    }

.btn-green {
    background-color: rgb(48, 165, 50);
    border: none;
    outline: none;
    height: 34px;
    font-size: 14px;
    color: #ffffff;
    padding: 1px 20px;
    font-family: "Open Sans";
    border-radius: 4px;
    font-weight: 500;
}

    .btn-green:hover {
        background-color: rgb(46, 152, 34);
    }

.btn-blue {
    border: none;
    outline: none;
    height: 30px;
    font-size: 14px;
    color: #ffffff;
    background-color: rgb(70, 100, 215);
    padding: 0px 10px;
    border-radius: 5px;
}

    .btn-blue:hover {
        background-color: rgb(45, 90, 183);
    }

.btn-orang {
    border: none;
    outline: none;
    height: 30px;
    font-size: 14px;
    color: #ffffff;
    background-color: rgb(239, 104, 53);
    padding: 0px 10px;
    border-radius: 5px;
}

    .btn-orang:hover {
        color: #ffffff;
        background-color: rgb(224, 109, 24);
        opacity: 0.9;
    }

.display-flex {
    display: flex !important;
}

.feed-shared-body > img, .feed-shared-body > video {
    width: 100%;
}

html {
    background-color: rgb(243, 242, 239) !important;
}

.show-read-more .more-text {
    display: none;
}

.show-read-more.visible, .teacher-show-read-more.visible {
    max-height: 1500px !important;
}

.feed-des.teacher-show-read-more {
    position: relative;
}

    .feed-des.teacher-show-read-more.visible::after {
        display: none;
    }

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

.show-read-more {
    max-height: 67px;
    transition: all 0.5s ease 0s;
    overflow: hidden;
}

.assessment-list-component .justify-content-sm-end, .assessment-list-component .justify-content-sm-end > .right-assessment-search, .assessment-list-component .justify-content-sm-end > .right-assessment-search > .row {
    width: 100%;
}

.assessment-list-component .right-assessment-search .row > .w-30-filter, .assessment-list-component .right-assessment-search .row > .w-70-filter, .multi-select-search-filter {
    padding: 0px 15px 0px 0px;
}

    .assessment-list-component .right-assessment-search .row > .w-70-filter:first-child {
        width: 70%;
        max-width: 70%;
        flex: 0 0 70%;
    }

        .assessment-list-component .right-assessment-search .row > .w-70-filter:first-child + div {
            width: 30%;
            max-width: 30%;
            flex: 0 0 30%;
        }

.calendar-icon {
    display: inline-block;
    font-size: 21px;
    margin: 4px 0px 0px 2px;
    color: rgb(155, 155, 155);
    width: 21px !important;
}

.full-gray-img {
    filter: invert(65%) sepia(100%) saturate(16%) hue-rotate(6deg) brightness(85%) contrast(80%);
}

.tab-control-margin {
    min-height: calc(100vh - 275px);
    padding-bottom: 10px;
    margin-top: -5px;
}

.tab-control-padding {
    min-height: calc(100vh - 275px);
    padding-bottom: 10px;
}

.package-item .package-item-detail {
    margin-bottom: 0px;
    position: absolute;
    width: 100%;
    bottom: -1px;
    z-index: 3;
}

.frame-core.olakid .package-item {
    height: 300px;
}

.closebox-filter + #community-panel-right {
    height: 450px;
    min-height: auto;
}

.aside-chat #community-panel-right {
    position: relative;
    top: 0px;
    box-shadow: none;
}

.form-group label:empty, .form-group:empty {
    display: none;
}

.tab-mini .form-group label:empty, .tab-mini .form-group:empty {
    min-height: 24px;
    display: block !important;
}

.form-group.form-row-group .form-control {
    padding: 2px 7px;
    margin: 0px 6px;
}

.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;
}

.form-group.form-row-group label {
    white-space: nowrap;
}

.card-header > div {
    display: flex;
}

.form-group.form-row-group {
    display: flex;
    align-items: center;
}

.form-group label.label-text:empty {
    display: block;
}

.search-input-user:focus {
    outline: none;
}

.search-input-user {
    width: calc(100% - 16px);
    padding: 6px;
    border: none;
    border-radius: 3px;
    font-size: 0.85em;
    display: inline-block;
    background: rgb(238, 238, 238);
}

.input-search-add {
    display: flex;
    margin: 10px 0px;
    padding: 6px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 3px;
    font-size: 0.85em;
}

    .input-search-add input:focus {
        outline: none;
    }

    .input-search-add input {
        padding: 5px;
        width: calc(100% - 16px);
        border: none;
    }

.edo-btn-list.form-group {
    margin: 0px;
    width: 100%;
}

.btn-success.color-white:hover {
}

.question-post-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 11px 11px 11px 3px;
}

.btn-success:hover {
}

.assessment-widget-box {
    padding: 19px 12px !important;
}

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

.modal-control-top .modal-dialog {
    margin-top: 70px;
}

@media screen and (min-width: 992px) {
    .right-rail.height-fit #community-panel-right {
        height: fit-content !important;
    }

    .user-card li .user-card-options, .user-card li input[type="checkbox"] {
        transition: opacity 0.3s ease 0s;
        opacity: 0;
    }

    .user-card li:hover .user-card-options, .user-card li:hover input[type="checkbox"] {
        opacity: 1;
    }
}

.edit-input input::placeholder {
    color: rgb(190, 190, 190);
}

.edit-input input:focus, .edit-input input:active {
    outline: none;
    border-bottom-color: rgb(190, 190, 190);
}

.edit-input input {
    padding: 5px 0px;
    width: 100%;
    border-top: none;
    border-right: none;
    border-left: none;
    border-image: initial;
    border-bottom: 1px solid rgb(233, 233, 233);
}

.edit-input {
    position: relative;
}

    .edit-input a {
        position: absolute;
        right: 5px;
        top: 5px;
        color: rgb(131, 131, 131);
    }

.item-user span, .item-user-offline span {
    font-size: 14px;
    padding-left: 7px;
    font-weight: 500;
    color: rgb(118, 118, 118);
    width: 100%;
    display: inline-block;
}

.user-card .item-user span, .user-card .item-user-offline span {
    word-break: break-word;
    font-size: 14px;
    font-weight: 600;
    padding: 6px;
}

.comment-memebr-info, .des-memebr-info {
    word-break: break-word;
}

.item-user-room::after {
    top: 5px;
    left: 4px;
    animation: auto ease 0s 1 normal none running none;
}

.user-room-list {
    position: relative;
    display: flex;
    margin-right: 30px;
    margin-top: 20px;
}

.item-user-room {
    position: relative;
    margin: 1px -3px;
}

    .item-user-room img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
    }

.item-last-list {
    position: absolute;
    right: -5px;
    top: -5px;
    background: #ffffff;
    color: rgb(94, 165, 221);
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    box-shadow: rgb(160, 160, 160) 1px 1px 1px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-item-footer {
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.input-search-add {
    display: flex;
    border-radius: 5px;
    font-size: 0.85em;
    position: relative;
    padding: 4px;
    margin: 8px 0px;
}

    .input-search-add a {
        background-color: var(--color-btn-mobile);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9em;
        padding: 3px 14px;
        border-radius: 3px;
        color: #fff !important;
    }

.global-video {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.event-controls {
    width: 100%;
    padding: 10px 0px;
    border-radius: 0px;
    position: static;
}

    .event-controls a {
        transition: opacity 0.3s ease 0s;
        font-size: 0.9rem;
        background-color: #ffffff;
        border-radius: 25px;
        padding: 7px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .event-controls a:hover {
            opacity: 0.8;
        }

    .event-controls li {
        padding: 0px 6px;
        position: relative;
    }

        .event-controls li::after {
            width: 1px;
            height: 100%;
            top: 0px;
            bottom: 0px;
            background-color: rgb(240, 240, 240);
            right: 0px;
        }

.search-input-user {
}

.invite-user span {
    width: 50px;
    padding: 4px;
    font-size: 21px;
    color: rgb(221, 221, 221);
}

.invite-user {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-event-detail.frame {
    padding: 0px;
    overflow: hidden;
}

.post-detail .event-detail {
    width: 65%;
}

.user-in-video {
    text-align: center;
    padding: 7px;
    background: rgb(237, 237, 237);
    color: rgb(19, 19, 19);
    font-weight: 500;
}

.event-img img {
    width: 60px;
    margin: auto;
    display: inline-block;
}

.event-img {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 15px;
}

.block {
    display: block;
}

.money-text-big strong {
    font-weight: 400 !important;
}

.money-text-big {
    font-weight: 600;
    font-size: 0.85em;
    margin: 6px 0px 7px;
    display: flex;
    align-items: center;
}

.blue-row {
    color: rgb(99, 105, 142);
}

.card-header-img {
    position: relative;
    margin: 12px 0px;
    border-bottom: 2px solid rgb(231, 231, 231);
}

    .card-header-img img {
        position: absolute;
        bottom: -23px;
        right: 0px;
        width: 45px;
        padding: 7px;
        background: #ffffff;
    }

.money-text-big img {
    width: 20px;
    margin: -8px 2px -5px 10px;
}

.money-text-big.green-color {
    color: rgb(0, 136, 109);
}

.money-text-big.orange-color {
    color: rgb(191, 77, 50);
}

.money-text-small {
    color: rgb(0, 119, 181);
    font-family: "Open Sans";
    font-weight: 700;
    font-size: 0.75em;
    padding-bottom: 15px;
    margin: 5px 0px 17px;
    border-bottom: 1px dashed rgb(221, 221, 221);
}

.has-bg.btn-primary {
    padding: 2px 39px;
}

.frame-core .file-manager-body-totlsbox > .dis-flex {
    justify-content: space-between;
}

@media screen and (max-width: 992px) {
    .frame-core {
        box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
        border: none !important;
        border-radius: 3px !important;
    }
}

.identity_profile_photo img {
    box-shadow: none;
    border: 2px solid #ffffff;
    margin: -41px auto 5px;
    background-color: #ffffff;
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    background-clip: content-box;
    border-radius: 50%;
    object-fit: contain;
}

.profile-rail-card-actor-link {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(84, 84, 84);
    font-family: var(--font-base);
    margin-bottom: 6px;
}

.identity-headline {
    font-size: 12px;
    line-height: 1.33333;
    font-weight: 700;
    color: white;
    padding-top: 8px;
    padding-bottom: 7px;
    background-color: rgba(0, 0, 0, 0.6);
    position: relative;
    min-height: 31px;
}

#paint-drag .paint-content {
    height: auto;
    max-height: calc(100% - 96px);
}

#paint-drag {
    position: fixed;
    left: 0px;
    z-index: 11;
    border-radius: 13px;
    border: 2px solid rgb(226, 226, 226);
    background-color: #ffffff;
    box-shadow: rgb(221, 221, 221) 1px 1px 1px;
    width: fit-content;
    top: 300px;
}

    #paint-drag .paint-tool {
        z-index: 222;
        background-color: transparent;
        cursor: all-scroll;
        border-bottom: 2px solid rgb(221, 221, 221);
    }

    #paint-drag .remove-category {
        opacity: 1;
        transform: scale(1.4);
        cursor: pointer;
        z-index: 2222222;
    }

    #paint-drag .picturepanel > canvas {
        box-shadow: none;
        background-color: transparent;
    }

.brush-color > div {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    box-shadow: white 0px 0px 0px 2px inset;
    border: 2px solid #ffffff;
}

#paint-drag .color-picker-content {
    height: auto;
}

.color-picker-palette .color-picker-case svg {
    width: 10px;
    height: 10px;
    margin: -1px 3px 2px;
    fill: #ffffff;
}

#paint-drag .color-picker-body {
    width: 295px;
    display: inline-block;
    background: rgb(253, 253, 253);
    box-shadow: rgb(196, 196, 196) 0px 0px 7px;
    padding: 5px 5px 4px;
    border-radius: 4px;
}

#paint-drag .color-picker-show {
    position: absolute;
    width: 80%;
    height: auto;
    bottom: 100%;
}

#paint-drag .color-picker-palette, .paint-box .color-picker-palette {
    height: 152px !important;
}

.paint-box .color-picker-content {
    background: #ffffff;
    padding: 15px;
}

.color-picker-palette .color-picker-case {
    width: 15px !important;
    height: 15px !important;
}

.achievement-radio-list li {
    position: relative;
    margin: -8px 0px 0px 11px;
}

.achievement-radio-list {
    display: flex;
}

.achievement-header-steps [type="checkbox"]:checked, .achievement-header-steps [type="checkbox"]:not(:checked) {
    position: absolute;
    left: 0px;
    opacity: 0;
    top: 0px;
}

    .achievement-header-steps [type="checkbox"]:checked + label, .achievement-header-steps [type="checkbox"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        display: inline-block;
        color: rgb(102, 102, 102);
    }

        .achievement-header-steps [type="checkbox"]:checked + label::before, .achievement-header-steps [type="checkbox"]:not(:checked) + label::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 25px;
            height: 25px;
            border: 4px solid rgb(221, 221, 221);
            border-radius: 15px;
            background: #ffffff;
        }

        .achievement-header-steps [type="checkbox"]:checked + label::after, .achievement-header-steps [type="checkbox"]:not(:checked) + label::after {
            content: "";
            width: 0.86rem;
            height: 0.83rem;
            background: rgb(248, 125, 169);
            position: absolute;
            top: 0.38em;
            left: 0.36em;
            border-radius: 13px;
            transition: all 0.2s ease 0s;
        }

        .achievement-header-steps [type="checkbox"]:not(:checked) + label::after {
            opacity: 0;
            transform: scale(0);
        }

        .achievement-header-steps [type="checkbox"]:checked + label::after {
            opacity: 1;
            transform: scale(1);
        }

.achievement-header-steps .light-blue [type="checkbox"]:checked + label::before, .achievement-header-steps .light-blue [type="checkbox"]:not(:checked) + label::before {
    border-color: rgb(2, 204, 255);
}

.achievement-header-steps .light-blue [type="checkbox"]:checked + label::after, .achievement-header-steps .light-blue [type="checkbox"]:not(:checked) + label::after {
    background-color: rgb(2, 204, 255);
}

.achievement-header-steps .yellow [type="checkbox"]:checked + label::before, .achievement-header-steps .yellow [type="checkbox"]:not(:checked) + label::before {
    border-color: rgb(255, 217, 102);
}

.achievement-header-steps .yellow [type="checkbox"]:checked + label::after, .achievement-header-steps .yellow [type="checkbox"]:not(:checked) + label::after {
    background-color: rgb(255, 217, 102);
}

.achievement-header-steps .red [type="checkbox"]:checked + label::before, .achievement-header-steps .red [type="checkbox"]:not(:checked) + label::before {
    border-color: rgb(255, 60, 0);
}

.achievement-header-steps .red [type="checkbox"]:checked + label::after, .achievement-header-steps .red [type="checkbox"]:not(:checked) + label::after {
    background-color: rgb(255, 60, 0);
}

.achievement-header-steps .green [type="checkbox"]:checked + label::before, .achievement-header-steps .green [type="checkbox"]:not(:checked) + label::before {
    border-color: rgb(169, 209, 142);
}

.achievement-header-steps .green [type="checkbox"]:checked + label::after, .achievement-header-steps .green [type="checkbox"]:not(:checked) + label::after {
    background-color: rgb(169, 209, 142);
}

.achievement-header-steps .blue [type="checkbox"]:checked + label::before, .achievement-header-steps .blue [type="checkbox"]:not(:checked) + label::before {
    border-color: rgb(0, 94, 230);
}

.achievement-header-steps .blue [type="checkbox"]:checked + label::after, .achievement-header-steps .blue [type="checkbox"]:not(:checked) + label::after {
    background-color: rgb(0, 94, 230);
}

.achievement-header-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .achievement-header-steps > div {
        display: flex;
        flex-wrap: wrap;
    }

    .achievement-header-steps .form-control::placeholder {
        color: rgb(221, 221, 221);
    }

    .achievement-header-steps .form-control {
        font-size: 0.8rem;
        border-radius: 25px;
        padding: 6px 7px;
        height: auto;
        font-family: var(--font-base);
        min-width: 400px;
        max-width: fit-content;
    }

.achievement-list {
    padding: 5px;
}

    .achievement-list ul {
        display: flex;
        flex-direction: column;
    }

.achievement-list-item {
    position: relative;
    background-color: rgb(249, 249, 249);
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 11px;
    border-radius: 2px;
    color: rgb(114, 114, 114);
    font-weight: 600;
    font-size: 0.8rem;
}

    .achievement-list-item:hover {
        background-color: rgb(246, 246, 246);
        transition: background-color 0.3s ease 0s;
    }

@media screen and (max-width: 768px) {
    .achievement-header-steps .form-control {
        min-width: 215px;
    }

    .achievement-header-steps .btn-primary {
        min-width: fit-content;
    }

    .achievement-header-steps {
        min-height: 60px;
    }
}

.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;
}

.edit-icon {
    font-size: 20px;
    margin-right: 10px;
}

.fix-modal {
    overflow: hidden;
}

.last-button > .table {
    margin-bottom: 0px;
}

.last-button .badge-red {
    color: rgb(220, 53, 69);
}

.last-button thead > tr > th:last-child {
    width: 20px;
}

.table-icon-button {
    cursor: pointer;
}

.email-area .sharebox-bottom-bar {
    width: auto;
}

.role-modal .sharebox-bottom-bar {
    width: auto;
}

.artdeco-button-text {
}

.sharebox-bottom-bar-image .li-icon, .sharebox-bottom-bar-image .li-icon-mail {
    color: rgb(112, 181, 249);
}

.sharebox-bottom-bar-video .li-icon-mail, .icon-green {
    color: rgb(127, 193, 94) !important;
}

.sharebox-bottom-bar-event .li-icon, .sharebox-bottom-bar-event .li-icon-mail, .icon-orange {
    color: rgb(231, 163, 62) !important;
}

.sharebox-bottom-bar-article .li-icon, .sharebox-bottom-bar-article .li-icon-mail, .icon-red {
    color: rgb(245, 152, 126) !important;
}

.sharebox-bottom-bar-question .li-icon, .sharebox-bottom-bar-question .li-icon-mail, .icon-brown {
    color: rgb(80, 69, 56) !important;
}

.sharebox-bottom-bar-survey .li-icon, .sharebox-bottom-bar-survey .li-icon-mail, .icon-blue {
    color: rgb(112, 181, 249) !important;
}

.sharebox-bottom-bar-survey {
    margin-right: 10px;
}

.sharebox-bottom-bar:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.li-icon-mail {
    overflow: visible;
    flex-shrink: 0;
    margin: 0px 13px 0px 10px;
    display: inline-block;
    position: relative;
    font-size: 17px;
    color: rgb(214, 214, 214);
}

.artdeco-dropdown {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    margin: 0px 0px 8px;
    padding: 0px;
    position: relative;
}

.relative {
    position: relative;
}

.break-words {
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 30px;
}

.feed-shared-title {
    font-size: 1.2em;
    font-weight: 600;
}

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

.native-speaker .item, .event-items .item {
    margin-bottom: 4px;
}

.native-speaker, .event-items {
    margin: 8px 0px;
}

.modal-book-img {
    text-align: center;
    width: 100% !important;
}

.user-career-remove i {
    margin-right: 5px;
    color: rgb(255, 93, 93);
}

.response-div .dropdown-menu li a {
    font-size: 0.72rem;
}

.user-card .user-card-header-filter li, .user-card-header .dropdown-menu li, .item-user-option.dropdown-menu li, .tree-category-box .dropdown-menu li {
    margin: 0px;
}

.tree-category-box .icon-btn + .dropdown-menu {
    z-index: 2;
}

.timeline-card {
}

.check-row-control label {
    margin-left: 5px;
}

.address-section {
    position: relative;
    text-align: left;
    margin: 20px 0px;
}

    .address-section::after {
        content: "";
        position: absolute;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 1px;
        top: 50%;
        background-color: rgb(155, 161, 255);
        transform: translateY(-50%);
    }

    .address-section span {
        background: rgb(254, 254, 254);
        padding: 0px 8px 0px 0px;
        position: relative;
        z-index: 1;
        color: rgb(155, 161, 255);
        font-weight: 400;
        font-family: "Open Sans";
        font-size: 1.1rem;
    }

.check-row-control {
    display: flex;
    align-items: center;
}

.collapse-icon:focus {
    outline: none;
}

.obj-contain {
    object-fit: contain !important;
}

.collapse-icon {
    border: none;
    background-color: rgb(213, 234, 254);
    position: absolute;
    right: 6px;
    bottom: 3px;
    color: rgb(63, 137, 209);
    border-radius: 50%;
    width: 18px;
    font-size: 0.7rem;
    padding-top: 2px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.event-card {
    min-height: 58px;
}

.event-card-header {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
}

.user-card li i {
    margin-right: 5px;
    color: rgb(178, 178, 178);
    font-size: 0.6rem;
}

.right-rail .member-select .member-info {
    min-height: 70px;
    z-index: -1;
}

.white-100 {
    width: 100%;
    background: #ffffff;
}

.right-rail .member-select .user-card .custom-scroll {
    min-height: 100%;
    max-height: 100%;
}

.right-rail .member-select .user-card {
    height: 235px;
    overflow: hidden;
    border: 3px dashed rgb(240, 199, 127);
}

.event-plus {
    font-size: 30px;
    position: relative;
    top: -8px;
    padding: 5px;
    border-radius: 5px;
    background: rgb(248, 249, 250);
    cursor: pointer;
}

.event-header-text {
    margin-bottom: 10px;
    width: auto;
    display: inline-block;
}

.event-card-header {
    position: absolute;
    right: 11px;
    top: 11px;
}

.carrer-event .event-header-text {
    margin-bottom: 0px;
}

.carrer-event .event-card-header {
    position: absolute;
    right: 0px;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0px 10px 0px 18px;
    align-items: center;
}

.event-card-body {
    cursor: pointer;
    align-items: baseline;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
}

.event-card-item {
    display: flex;
    cursor: pointer;
    width: 100%;
    align-items: center;
    margin-bottom: 11px;
}

.event-item-text {
    color: rgba(0, 0, 0, 0.6);
    min-width: 190px;
    font-size: 12px;
    width: 100%;
    display: flex;
}

.event-item-icon-user i {
    margin-right: 5px;
    margin-left: 3px;
}

.event-item-icon-user {
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 0.7em;
    color: rgb(240, 240, 240);
    justify-content: space-between;
    background: linear-gradient(45deg, rgb(102, 102, 102), rgb(102, 102, 102));
    border-radius: 2px 10px 2px 17px;
    padding: 0;
    overflow: hidden;
}

    .event-item-icon-user > label {
        margin: 0 0 0 5px;
        font-weight: 600;
        font-size: 15px;
        padding: 5px 10px 5px 5px;
        border-right: 3px solid #5c5c5c;
    }

.event-item-icon {
    margin-right: 8px;
    flex: 0 0 30px;
}

    .event-item-icon img {
        max-width: 100%;
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }

.event-item-title {
    line-height: 26px;
    color: rgb(106, 106, 106);
    font-weight: 800;
    font-size: 14px;
    padding-right: 5px;
}

.carrer-event .event-card-item {
    margin-top: 20px;
}

.event-card .event-card-body .event-card-item {
    width: 100%;
}

.event-item-date {
    color: rgba(0, 0, 0, 0.6);
    font-size: 10px;
    display: block;
    flex: 0 0 65px;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
}

.rz-html-editor-button, .rz-html-editor-dropdown, .rz-html-editor-toolbar, .rz-html-editor-toolbar, .rz-html-editor-colorpicker {
    margin: 0px !important;
    padding: 0.4rem !important;
}

.alert-danger {
    width: 100%;
    display: flex;
    margin: 15px 0px 0px;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    font-family: Poppins;
    font-weight: 500;
}

.flip-card-inner .alert-danger {
    position: absolute;
    top: -12px;
    padding: 8px;
}

.dis-block {
    z-index: 99999;
    position: relative;
    display: block !important;
}

.dis-none {
    display: none;
}

.native-search-box {
    margin-top: 30px;
    width: 100%;
    color: rgb(204, 204, 204);
    position: relative;
    z-index: 0;
}

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

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

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

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

.search-box-item-space :not(.native-search-box) .select-values, .select-search :not(.native-search-box) .select-values {
    min-width: 200px;
}

.assessment-list.question-bank.list-item-assessment .just-assessment {
    flex-direction: row;
}

.footer-search span {
    font-size: 0.8rem;
    font-weight: 800;
}

.footer-search p {
    margin: 0px;
    font-family: var(--font-base);
    font-weight: 600;
}

.footer-search {
    background: var(--rgba-primary-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(69, 69, 69);
    padding: 3px 10px;
    font-weight: 300;
    border-radius: 0px 0px 7px 7px;
}

.search-clear {
    background-color: transparent;
    color: rgb(102, 102, 102);
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 0.8rem;
    font-weight: 600;
}

.channel-search, .event-search {
}

.search-career-title {
    cursor: pointer;
    font-weight: 700;
    line-height: normal;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 210px;
    margin-bottom: 5px;
}

.event-search-item > div, .channel-search-item > div {
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
}

.event-search {
    padding-left: 15px;
    max-width: 300px;
}

.event-search-item, .channel-search-item {
    display: flex;
    margin: 0px 0px 20px;
}

.channel-search {
    max-width: 430px;
}

.search-result-box > .ml-auto {
    display: inline-block;
    padding: 0px 25px 0px 0px;
    float: right;
    position: absolute;
    right: 0px;
}

.row-search-box h4 {
    padding: 0px 0px 15px;
}

.row-search-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 12px 15px 0px;
}

.channel-search video, .channel-search img {
    width: 180px;
    flex: 0 0 180px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}

.channel-search video {
    object-fit: fill;
}

.event-search img {
    object-fit: cover;
    border-radius: 10px;
    width: 60px;
    height: 60px;
}

.search-career-category {
    font-size: 0.75em;
    margin: 0px;
    min-height: 10px;
    font-family: var(--font-base);
    color: rgb(172, 172, 172);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-user-option .dropdown-menu {
    display: none;
}

.item-user-option {
    position: absolute;
    top: -2px;
    left: 100%;
    width: fit-content;
    display: flex !important;
}

.user-card-name {
    position: relative;
    width: fit-content !important;
}

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

.post-header-icon {
    margin-right: 15px;
}

.assessment-search-box-main .form-group div.periodic, .filter-box-asssessment div.periodic {
    transform: scale(1.3);
    min-width: auto;
    margin-top: 5px !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);
}

.assessment-detail-list .dropdown-toggle {
    background: rgb(243, 242, 239);
    padding: 8px;
    margin-right: -7px;
    border-radius: 4px;
}

.mail-tools-icon {
    font-size: 18px;
    margin-left: 10px;
    position: relative;
}

.delete-icon {
    color: rgb(242, 91, 91) !important;
}

.archive-icon {
    color: rgb(228, 163, 30) !important;
}

.feed-mail-header {
    padding-left: 0px;
    min-height: 50px;
    padding-top: 12px;
    color: rgb(59, 59, 59);
    font-size: 12px;
    line-height: 1.33333;
    font-weight: 400;
    position: relative;
    border-bottom: 1px solid rgb(221, 221, 221);
    display: flex;
    flex-direction: column;
    font-family: var(--font-base);
}

.mail-header-title {
    width: 25%;
    max-width: 25%;
    flex: 0 0 25%;
    font-size: 18px;
}

.mail-header-tools {
    text-align: right;
    padding: 0px 0px 10px;
}

    .mail-header-tools:empty {
        display: none;
    }

.mail-select-all {
    height: 33px;
    line-height: 33px;
    position: relative;
    padding-left: 30px;
    background-color: rgb(249, 249, 249);
    border-radius: 5px;
    font-size: 14px;
}

.mail-table-row {
    min-height: 33px;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    font-family: var(--font-base);
}

    .mail-table-row:nth-child(2n+1) {
        background-color: rgb(249, 249, 249);
    }

.mail-row-checkbox {
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    left: 10px;
}

.mail-row-data {
    display: flex;
    font-size: 14px;
    line-height: 32px;
}

.mail-row-username {
    width: 20%;
    max-width: 20%;
    flex: 0 0 20%;
    margin: auto 13px;
    font-weight: 800;
    color: rgb(107, 107, 107);
}

.mail-row-subject {
    width: 60%;
    max-width: 60%;
    flex: 0 0 60%;
    margin: auto 2.5%;
    line-height: 20px;
    font-weight: 500;
    font-family: Poppins;
}

@media screen and (min-width: 768px) {
    .mail-row-data > span > span:first-child {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .rz-dialog-wrapper .rz-dialog {
        border-radius: 0px;
        min-height: 100vh !important;
    }

    .global-body {
        width: 100%;
        margin-bottom: 55px;
        display: inline-block;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px !important;
    }

    .feed-shared-body.event-body-text {
        padding: 15px;
    }

    .native-search-box .feed-shared-body.event-body-text {
        overflow: hidden !important;
        padding-left: 10px !important;
    }

    .search-header .title {
        color: rgb(90, 90, 90);
    }

    .result-search-teacher > .result-item:nth-child(2n) > div .teacher-btn {
        transform: translateX(-10px);
    }

    .mail-row-data > span > span:first-child {
        display: none;
        color: rgb(165, 165, 165);
    }

    .mail-row-data {
        flex-direction: column;
        width: 100%;
    }

        .mail-row-data > span {
            width: 100%;
            line-height: normal;
            max-width: 100%;
            flex: 0 0 auto;
            display: flex;
            justify-content: space-between;
            margin: 4px 0px 0px;
            color: rgb(162, 165, 185);
            padding-right: 10px;
            min-height: 30px;
            align-items: center;
        }

    .td-label {
        font-size: 0.95em;
    }

    .mail-row-checkbox {
        top: 20px;
        bottom: auto;
    }

    .mail-select-all .mail-row-checkbox {
        top: 0px;
        bottom: 0px;
        left: 3px;
    }

    .mail-select-all {
        display: inline-block;
        padding: 0px 31px;
        width: 100%;
        margin: 0px -8px;
    }

    .mail-table-row {
        padding: 10px;
        margin: 0px -15px;
        display: flex;
    }

        .mail-table-row .mail-row-checkbox {
            position: initial;
            margin: 8px 9px 0px 0px;
        }
}

.mail-row-date {
    font-size: 0.8rem;
    max-width: 15%;
    flex: 0 0 15%;
    margin: auto 0px;
    font-weight: 500;
    color: rgb(199, 199, 199);
}

.compose-to {
    position: relative;
}

.compose-to-search-result, .compose-to-search-result-multi {
    position: absolute;
    background-color: #ffffff;
    padding: 8px 10px;
    z-index: 2;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 4px;
    width: 100%;
    top: 66px;
    margin: -5px 0px;
}

.onrow-input .compose-to-search-result, .onrow-input .compose-to-search-result-multi {
    padding: 0px;
    width: calc(100% - 76px);
    left: 40px;
    top: 56px;
    box-shadow: rgb(244, 244, 244) 2px 4px 8px;
}

    .onrow-input .compose-to-search-result p, .onrow-input .compose-to-search-result-multi p {
        font-family: var(--font-base);
        margin: 0px;
    }

.pending-parent-box .search-compose-to-title i {
    margin-bottom: -4px;
    color: rgb(134, 134, 134);
}

.pending-parent-box .search-compose-to-title p {
    color: rgb(159, 159, 159);
    margin: 0px;
    font-family: var(--font-base);
    font-size: 0.82rem;
}

.pending-parent-box .compose-to-search-result, .pending-parent-box .compose-to-search-result-multi {
    width: 100%;
    left: 0px;
    padding: 0px;
    top: 40px;
    max-height: 350px;
    overflow: auto;
}

.compose-to-serach-row {
    padding: 8px 6px;
    border-radius: 5px;
}

    .compose-to-serach-row:nth-child(2n) {
        background-color: rgb(249, 249, 249);
    }

.search-compose-to-title {
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    font-family: var(--font-base);
    word-break: break-word;
    justify-content: flex-end;
    font-weight: 500;
}

    .search-compose-to-title i {
        margin-right: 5px;
        color: rgb(84, 132, 190);
    }

.set-tooltip:hover > .title-tooltip {
    opacity: 1;
    transform: translate(-50%, 0px);
    display: block;
}

.title-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 100%;
    opacity: 0;
    margin-bottom: 1em;
    padding: 1em;
    color: #ffffff;
    background-color: rgb(95, 87, 87);
    font-size: 10px;
    text-align: left;
    white-space: nowrap;
    transform: translate(-50%, 1em);
    transition: all 0.15s ease-in-out 0s;
    border-radius: 5px;
    z-index: 1;
}

    .title-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0px;
        height: 0px;
        border-width: 0.5em;
        border-style: solid;
        border-color: rgb(95, 87, 87) transparent transparent;
        border-image: initial;
        transform: translate(-50%, 0px);
    }

.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;
}

.chat {
    margin-top: -7px;
    width: 100%;
    float: left;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: rgb(67, 70, 81);
    background-color: #ffffff;
    box-shadow: rgba(82, 63, 105, 0.05) 0rem 0.3125rem 0.3125rem 0rem;
}

    .chat .chat-history {
        padding: 30px 30px 20px;
        overflow-y: scroll;
        height: calc(100vh - 140px);
    }

.message-row div::selection, .message-row span::selection {
    background-color: rgb(162, 165, 185);
    color: #ffffff;
}

.chat .chat-history .message-data {
    margin-right: 15px;
    flex: 0 0 35px;
    display: inline-block;
}

.chat .chat-history .message-data-time {
    color: rgb(162, 165, 185);
    padding-right: 6px;
    margin: 0px;
    font-size: 0.65em;
    font-family: var(--font-base);
}

.chat .chat-history .message {
    color: white;
    padding: 5px 10px;
    line-height: 26px;
    font-size: 12px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}

.message-data-name {
    font-size: 0.92em;
    margin-top: -14px;
}

.chat .message-data-name {
    font-family: var(--font-base);
    font-size: 1.05em;
    display: inline-block;
    margin-top: 7px;
    color: rgb(149, 153, 174);
    font-weight: 700;
}

.chat .chat-history .my-message {
    background: rgb(147, 214, 168);
}

.chat .chat-history .other-message {
    background: #ffffff;
    border-radius: 0px 12px 12px;
    padding: 0px 15px 4px;
    color: rgb(162, 165, 185);
    font-weight: 400;
    font-family: "Open Sans";
    margin-bottom: 3px;
    width: auto;
}

    .chat .chat-history .other-message > div {
        margin-top: 10px;
        display: inline-block;
        width: 100%;
        padding-bottom: 2px;
        font-size: 1.1em;
    }

    .chat .chat-history .other-message > .message-data-name + div {
        font-weight: 400;
        font-family: var(--font-base);
        margin-top: 0px;
    }

.message-data-info {
    display: flex;
    width: 100%;
}

.chat-history ul li {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.other-user-message .chat .chat-history .other-message {
    border-radius: 12px 0px 12px 12px;
    text-align: right;
}

.other-user-message .message-data-info {
    flex-direction: row-reverse;
}

.chat .chat-history .other-user-message .message-data {
    margin: 0px 0px 0px 15px;
}

.chat .chat-history .other-user-message .other-message {
    background: rgb(230, 229, 237);
    border-radius: 12px 0px 12px 12px;
}

.message-row {
    display: flex;
    flex-direction: column;
}

.user-message .message-row {
    align-items: flex-end;
}

.other-user-message .message-row {
    align-items: flex-start;
}

.user-message {
    align-items: flex-end;
}

.chat-history ul {
    display: flex;
    flex-direction: column;
}

.chat .chat-message {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgb(227, 227, 227);
    margin: 0px 14px 15px 11px;
    width: calc(100% - 22px);
    transition: border-color 0.3s ease 0s;
}

    .chat .chat-message:hover {
        border-color: rgb(203, 203, 203);
    }

.message-date-detail {
    display: flex;
}

.chat .chat-message textarea {
    padding: 0px 10px;
    border-radius: 5px;
    height: 44px;
    overflow: hidden;
    resize: none;
    line-height: 45px;
    white-space: nowrap;
    margin-left: 40px;
    font-weight: 300;
    letter-spacing: 0.06em;
    font-size: 0.9em;
    width: calc(100% - 130px) !important;
    max-width: inherit !important;
    flex: 0 0 auto !important;
}

.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
    font-size: 16px;
    color: gray;
    cursor: pointer;
}

.chat .chat-message textarea {
    width: 100%;
}

.chat .emoji {
    left: 5px;
    color: rgb(221, 221, 221);
    position: absolute;
    padding: 1px 5px;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

    .chat .emoji:hover {
        background-color: rgb(240, 240, 240);
        color: rgb(84, 132, 190);
    }

.chat .chat-message:focus {
    box-shadow: rgba(221, 221, 221, 0.7) 1px 1px 4px;
}

.chat .emoji-list.dis-block {
    z-index: 9;
    position: sticky;
    bottom: 0px;
    top: auto;
    background: #ffffff;
    padding: 5px;
    border-radius: 5px;
}

.chat .chat-message button {
    border: none;
    outline: none;
    background: var(--color-btn-mobile);
    color: #ffffff;
    width: 66px;
    font-size: 15px;
    font-weight: 500;
    position: absolute;
    border-radius: 8px;
    right: 5px;
    padding: 7px 13px;
}

.chat .chat-message textarea::placeholder {
    font-size: 0.85em;
    color: rgb(182, 182, 182);
}

.user-in-chat {
    color: rgb(139, 137, 131);
    background: rgb(221, 221, 221);
    padding: 8px 15px 8px 25px;
    font-size: 0.7em;
    border-radius: 26px;
    font-weight: 600;
    margin: 11px 6px;
    display: inline-block;
    font-family: "Open Sans";
    position: relative;
}

    .user-in-chat::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: rgb(5, 218, 96);
        left: 8px;
        z-index: 999;
        top: 50%;
        border-radius: 14px;
        transform: translateY(-50%);
    }

.rz-scheduler-nav .rz-scheduler-nav-title {
    display: flex;
    align-items: center;
}

.rz-scheduler .rz-week .rz-event {
    position: absolute;
    padding: 2px 1px;
    margin-top: 5px;
}

.rz-scheduler .rz-week .rz-slot {
    justify-content: center;
    padding: 9px 0px;
    color: rgb(211, 211, 211);
}

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

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.event-duration-box {
    background-color: #ffffff;
    border-top: 1px dashed rgb(199, 199, 199);
    padding: 29px 0px 8px;
    margin: 15px 7px;
    display: flex;
    flex-wrap: wrap;
}

.event-moderator-delete, .event-participants-delete {
    position: absolute;
    color: rgb(220, 53, 69);
    font-size: 12px;
    top: 6px;
    right: 7px;
    cursor: pointer;
    z-index: 2;
    padding: 4px;
    height: 23px;
    width: 23px;
    border-radius: 15px;
    border: 2px solid;
}

.event-ask-duration-moderator {
    width: 100%;
    text-align: center;
    display: flex;
    margin-bottom: 5px;
    flex-direction: column;
    position: relative;
}

.event-ask-duration-participants {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.event-moderator-input-box {
    height: 35px;
    margin: 0px 0px 5px;
    background-color: #ffffff;
    display: flex;
    position: relative;
    border: 1px solid rgb(212, 217, 223);
    padding-right: 10px;
    right: -40px;
    justify-content: space-between;
    border-radius: 3px 20px 20px 3px;
    width: calc(100% - 40px) !important;
}

.event-participants-input-box {
    height: 35px;
    margin: 0px 0px 5px;
    background-color: #ffffff;
    display: flex;
    position: relative;
    border: 1px solid rgb(212, 217, 223);
    padding-right: 10px;
    right: -40px;
    justify-content: space-between;
    border-radius: 3px 20px 20px 3px;
    width: calc(100% - 40px) !important;
}

.event-duration-plus-icon {
    color: rgb(0, 107, 162);
    text-align: center;
    font-size: 1.05rem;
    line-height: 20px;
    float: right;
    position: absolute;
    cursor: pointer;
    right: 33px;
    top: 10px;
}

.event-duration-box.form-group.full-size > div {
    padding: 0px !important;
}

.event-duration-box.form-group.full-size {
    padding: 20px 0px 0px;
}

.event-duration-box .user-selector .search-compose-to-title p {
    margin-bottom: 0px;
    margin-left: 5px;
    font-size: 0.75rem;
}

.event-moderator-input {
    flex: 0 0 85%;
    font-weight: 400;
    color: rgb(111, 111, 111);
    width: 85%;
    border-radius: 10px;
    display: inline-block;
    border: none;
    outline: none;
    padding-left: 10px;
    font-size: 14px;
}

.event-moderator-area {
    height: 115px;
    background-color: #ffffff;
    border-radius: 20px;
}

.event-moderator-area-input {
    display: block;
    padding: 5px 8px;
    height: 115px;
    border-radius: 3px;
    border: none;
    outline: none;
    overflow-y: auto;
    background-color: rgb(242, 242, 242);
    width: 100%;
}

.moderator-to-search-result {
    position: absolute;
    background-color: #ffffff;
    padding: 8px 10px;
    z-index: 2;
    box-shadow: rgb(204, 204, 204) 0px 0px 10px;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 10px;
    width: 120%;
    left: -10%;
    top: 32px;
}

.search-moderator-to-title {
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .event-duration-input-icon {
        margin: 0px -10px 0px 0px;
    }
}

.big-event-item {
    width: 80%;
    margin: 0px;
    display: inline-block;
}

.just-center {
    margin-right: 10px;
    align-items: center;
    margin-left: 55px;
    justify-content: center;
}

    .just-center .question-box {
        background-color: transparent;
    }

.button-row-icon a:hover {
    color: var(--color-secondary) !important;
}

.post-view-item-row .small-event-item + .big-event-item {
    width: 80%;
    min-height: 30px;
}

.form-bg.flex-col-start {
    padding: 15px;
    border-radius: 5px;
}

.flex-row-input {
    display: flex;
    align-items: center;
}

.just-center .question-btn-control {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-bg.flex-col-start > .form-group {
    width: 100%;
}

    .form-bg.flex-col-start > .form-group input {
        width: 50%;
    }

.form-bg.flex-col-start label {
    margin-bottom: 5px;
}

.box-fileupload {
    width: 100%;
    border: 3px dashed rgb(68, 73, 74);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    min-height: 40px;
    color: #ffffff;
    position: relative;
}

.file-upload-input {
    display: none;
}

.row-input-control-item {
    justify-content: space-between;
    display: flex;
    min-height: 30px;
}

    .row-input-control-item .row-input-control > label {
        margin-bottom: 2px;
        margin-left: 5px;
    }

    .row-input-control-item .row-input-control > .form-control {
        padding: 2px 5px;
        height: auto;
        font-weight: 600;
        width: 65px;
    }

    .row-input-control-item .row-input-control span {
        white-space: nowrap;
        font-size: 0.8rem;
        margin-right: 10px;
        text-overflow: ellipsis;
    }

    .row-input-control-item .row-input-control {
        align-items: center;
        margin: 0px;
        display: flex;
    }

label.file-upload-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(204, 204, 204);
    opacity: 0.3;
    z-index: 1;
}

.question-box-area label.file-upload-btn {
    max-height: 50px;
    max-width: 50px;
    display: flex;
    align-items: center;
}

.box-fileupload__lable {
    position: absolute;
    inset: 0px;
    margin: auto;
    max-width: 130px;
    line-height: 34px;
    height: 34px;
    color: rgb(51, 51, 51);
    cursor: pointer;
}

.assessment-row-input > div > .display-flex {
    align-items: center;
}

.event-box .assessment-row-input .dis-flex.align-items-center label {
    outline: none;
}

.toggle-filter-row {
    display: flex;
    padding: 11px 0px;
    align-items: flex-start;
    justify-content: space-between;
}

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

    .toggle-filter-row label {
        font-size: 0.65rem;
        font-family: var(--font-panel);
        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;
    }

.filter-text-bottom > div {
    display: flex;
    flex-direction: column;
}

.filter-text-bottom {
    display: flex;
}

    .filter-text-bottom .select-search .sort-icon, .filter-text-bottom .select-search .clear-input {
        right: 12px !important;
        top: 45% !important;
    }

    .filter-text-bottom .select-search .clear-input {
        top: 53% !important;
    }

.native-search-box .filter-text-bottom .select-search {
    padding: 2px;
    margin-top: -6px !important;
}

    .native-search-box .filter-text-bottom .select-search > input {
        font-size: 0.75rem;
        min-height: 28px;
        padding: 4px 13px !important;
    }

.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;
}

.multiple-select-item {
    font-size: 12px;
}

.rz-calendar .rz-inputtext {
    font-size: 13px;
}

.has-img > .survey-select::after {
    content: "";
    position: absolute;
    inset: 0px;
    background-color: rgba(49, 49, 49, 0.26);
    height: 100%;
    width: 100%;
}

.has-img {
    height: 150px;
}

    .has-img > .survey-select {
        position: relative;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.survey-post-img {
    max-height: 150px;
    object-fit: contain;
}

.upload-btn .survey-post-img {
    width: 32px;
    max-height: 34px;
    object-fit: contain;
    border-radius: 2px;
    overflow: hidden;
}

.survey-item .form-check {
    border: 0.14em solid rgba(0, 115, 177, 0.6);
    padding: 0px;
    border-radius: 2px;
    height: 100%;
    display: flex;
    width: 100%;
    position: relative;
    z-index: 1;
}

.survey-select input[type="radio"]:checked + .form-check .form-check-label {
    color: #ffffff;
}

.survey-label {
    font-family: var(--font-base);
    font-size: 1em;
    margin: 20px 15px 21px;
    font-weight: 500;
    color: rgb(64, 64, 64);
}

.pl-result {
    position: relative;
    display: flex;
    padding: 0px 18px;
    height: auto;
    margin-bottom: 10px;
}

.pl-result-img {
    display: none;
}

.pl-result-row {
    width: 100%;
}

.has-img .pl-result-row {
    width: 100%;
    display: flex;
}

.has-img.pl-result .progress {
    margin: 0px 0px 0px 3px;
}

.has-img .pl-result-img {
    display: block;
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: 3px;
}

.has-img.pl-result .progress-bar {
    padding: 11px 0px;
    font-size: 1.15em;
    display: flex;
}

    .has-img.pl-result .progress-bar span {
        padding: 0px 15px;
    }

.pl-result .progress {
    background-color: rgb(249, 249, 249);
    width: 100%;
    cursor: pointer;
    height: auto;
}

.pl-result .progress-bar > span {
    font-family: var(--font-base);
    padding: 0px 9px;
    width: calc(100% - 45px);
    white-space: normal;
    line-height: 1.2;
    display: block;
    position: relative;
}

.pl-result .progress-bar .progress-bar-bg {
    background-color: rgb(227, 232, 238);
    position: absolute;
    height: 100%;
    top: 0px;
    transition: width 0.6s ease 0s;
    bottom: 0px;
}

.pl-result .progress-bar {
    background-color: rgb(249, 249, 249);
    position: relative;
    color: rgb(82, 82, 82);
    padding: 11px 0px;
    font-size: 1.05em;
    font-weight: 700;
    text-align: left;
    width: 100%;
    display: inline-block;
}

.has-img .progress-percentage {
    font-size: 0.9em;
    font-weight: 700;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
}

.progress-percentage {
    font-size: 0.78em;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-family: "Open Sans";
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
}

.answer-label {
    margin: 10px 15px 0px;
    display: inline-block;
    font-size: 0.75em;
    font-family: "Open Sans";
}

.survey-item + button {
    margin: 15px 15px 0px;
}

.survey-select input[type="radio"]:checked + .form-check {
    background-color: rgb(0, 115, 177);
}

.has-img .survey-select input[type="radio"]:checked + .form-check {
    background-color: rgba(0, 115, 177, 0.72);
}

.text-warning {
    margin-bottom: 10px;
}

.SignalBar i.text-warning {
    margin-bottom: 0
}

.post-icon-box {
    padding: 0px;
    display: inline-block;
    font-size: 13px;
}

    .post-icon-box + ul {
        display: flex;
    }

.post-detail .btn {
    font-size: 1em !important;
    padding: 4px 18px !important;
}

.post-icon-box .small, .post-icon-box .btn-primary.small {
    padding: 4px 18px;
    margin: 0px 0px -4px !important;
    font-size: 0.96em !important;
}

.yellow-color {
    color: rgb(232, 197, 125);
}

.pink-color {
    color: rgb(230, 136, 174);
}

.date-post {
    font-weight: 400;
    color: rgb(67, 67, 67);
    margin: 2px 15px 0px 0px !important;
}

.post-event-body-icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.credit-row {
    display: flex;
    padding-right: 5px;
}

    .credit-row:empty {
        display: none;
    }

.credit-value {
    display: flex;
    align-items: center;
    padding: 0px 2px 0px 0px;
    font-size: 0.99em;
    color: rgb(33, 37, 41);
    font-weight: 400;
}

.credit-row > .credit-value:last-child {
    padding: 0px 14px 0px 5px;
}

.credit-value img {
    margin-right: 5px;
    width: 18px;
}

.icon-item-post i {
    margin-right: 4px;
    font-size: 1.15rem;
}

.icon-item-post {
    margin: 15px 12px 0px -2px;
    color: rgb(92, 92, 92);
    display: flex;
    align-items: center;
}

.post-event-body-value {
    font-size: 14px;
}

.rz-dialog-content {
    color: rgb(80, 81, 82);
    font-family: SF-UI;
}

.mail-info-details, .mail-info-details-owner, .mail-info-details-message-lable-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mail-info-details-subject-lable, .mail-info-details-to-lable, .mail-info-details-from-lable, .mail-info-details-message-lable {
    padding: 0px;
    margin-right: 5px;
    border-radius: 10px;
    font-size: 0.92em;
    text-transform: lowercase;
    font-weight: 300;
}

.mail-info-details-subject, .mail-info-details-to, .mail-info-details-from, .mail-info-details-message-text {
    font-size: 0.9em;
    padding: 0px;
}

.mail-info-details-to, .mail-info-details-from {
    font-weight: 500;
    text-decoration: underline;
}

.mail-info-details-message {
    font-weight: 300;
    padding: 10px 0px 25px;
    font-size: 1.05em;
}

.mail-info-details-subject {
    font-size: 1.2em;
    font-weight: 500;
    padding: 16px 0px;
    color: rgb(65, 65, 65);
}

.post-read-more-btn {
    position: relative;
    text-align: center;
    height: 35px;
    margin-top: 10px;
    display: none;
}

.slide-item-event {
    font-family: var(--font-base);
    padding: 0px;
    text-align: center;
    background-color: rgb(244, 246, 252);
    border-radius: 5px;
    border: 1px solid rgb(220, 227, 248);
    color: rgb(0, 119, 181);
}

.read-more.visible {
    display: inline-block !important;
}

.label-show label {
    min-height: 23px;
    display: block !important;
}

.label-show .form-control {
    margin-left: 19px;
    margin-top: 4px !important;
    padding: 4px !important;
}

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

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

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

.btn-book {
    font-family: var(--font-base) !important;
}

.no-footer .row.justify-content-between {
    display: none !important;
}

.credit-code .dicount-code-btn {
    font-size: 15px;
    border-radius: 0px 6px 6px 0px;
    height: 40px;
    padding: 0px 12px;
    font-weight: 500;
}

.credit-code .dicount-code-input {
    width: calc(100% - 68px);
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    border-radius: 9px 0px 0px 9px;
}

    .credit-code .dicount-code-input::placeholder {
        font-size: 14px;
    }

.dep-label {
    font-size: 0.68rem !important;
}

.input-credit-mini {
    margin-left: -15px;
    width: 95px;
}

.pass-score-text {
    color: rgb(207, 139, 0);
    padding: 10px 0px 21px 14px;
    font-size: 14px;
}

.event-input-date {
    margin-left: 1%;
}

.event-microphone > img, .event-salon > img {
    filter: brightness(0.5);
    width: 23px;
    margin: 6px 8px;
}

.event-microphone, .event-salon {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
}

.uploader-head {
    margin-bottom: 15px;
    width: 94%;
    right: 0px;
    border: none;
}

.event-select-event {
    margin: 10px 13px;
    display: flex;
    flex-wrap: wrap;
    padding: 13px 0px 0px;
    border-top: 1px solid rgb(236, 236, 236);
}

.event-select-event-item {
    cursor: pointer;
    margin-right: 10px;
    position: relative;
    display: flex;
}

.event-select-event-list {
    position: absolute;
    padding: 8px;
    border: 1px solid rgb(204, 204, 204);
    background: #ffffff;
    border-radius: 10px;
    top: 100%;
    z-index: 2;
    display: none;
}

    .event-select-event-list > ul > li {
        display: flex;
        font-size: 11px;
        padding: 5px 0px;
        min-width: 120px;
    }

.event-select-event-list-check {
    margin: 0px 5px;
    flex: 1 1 0%;
}

.event-select-event-list-text {
    flex: 9 1 0%;
}

.event-select-event-level-item {
    border: 2px solid rgb(112, 112, 112);
    border-radius: 34px;
    padding: 6px 9px;
    margin-left: 10px;
    color: rgb(112, 112, 112);
    font-size: 12px;
    transition: all 0.3s ease 0s;
}

    .event-select-event-level-item:hover {
        box-shadow: rgb(112, 112, 112) 0px 0px 0px 1px inset;
        background: rgb(242, 242, 242);
    }

.check-box-row {
    display: flex;
    place-content: center space-between;
    width: 100%;
    font-size: 0.8em;
    padding: 11px;
    flex-direction: row-reverse;
    color: rgb(114, 114, 114);
    font-family: var(--font-base);
    font-weight: 500;
}

.level-image {
    height: 14px;
    margin: auto;
    padding-left: 10px;
}

.chat-message-sender-image {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.file-manager-box {
    display: flex;
}

.list-item-desktop {
    max-width: 23%;
    flex: 0 0 23%;
    overflow-x: auto;
    border-right: 1px solid rgb(204, 204, 204);
}

    .list-item-desktop .file-manager-side {
        width: 100%
    }

.file-manager-body {
    width: 100%;
    padding: 10px 15px;
}

.file-manager-side > .tree-view {
    overflow: hidden;
    margin-left: 0px;
    padding: 15px 15px 15px 20px;
}

.tree-view > div {
    margin: 7.5px 0px;
}

.icon-btn-file {
    border: 0px;
    background-color: transparent;
    font-size: 2rem;
    margin-left: 10px;
}

.icon-btn-file {
    position: absolute;
    top: 46px;
    font-size: 0.85rem;
    color: rgb(127, 127, 127);
    margin-left: 20px;
}

.cloud-setting-modal > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.cloud-setting-modal .fit-size-children > * {
    font-family: var(--font-base);
    margin: 0px !important;
    width: fit-content !important;
}

.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);
}

.assessment-btn-row + .frame .icon-btn-file {
    top: 24px;
}

.frame-core .file-manager-file-box {
    min-height: auto;
}

.frame-core .icon-btn-file {
    top: 58px;
    color: rgb(162, 162, 162);
    left: -16px;
}

.input-control {
    font-weight: 500;
    height: 40px;
    border-radius: 9px;
}

.tree-view-title .bg-primary {
    background-color: rgb(102, 102, 102) !important;
}

.tree-view .tree-view .tree-view-title {
    color: rgb(193, 193, 193);
}

.tree-view-title, .tree-view-icon {
    font-size: 1em;
    color: rgb(138, 138, 138);
}

.tree-view .cursor-pointer {
    border-radius: 5px;
    display: flex;
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.7rem;
    font-family: "Open Sans";
    padding: 5px !important;
}

    .tree-view .cursor-pointer span {
        display: inline-block;
        min-height: 13px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden !important;
    }

.icon-btn-singel {
    border: none;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 1.3rem;
    color: rgb(21, 126, 251);
    margin-left: 6px;
    margin-top: 5px;
    padding: 5px 8px;
}

.career-cloud-box .full-right-flex button {
    margin-top: 0px;
}

.link-name a {
    color: rgb(112, 112, 112) !important;
}

.link-name-img {
    margin-left: 3px;
    margin-bottom: -3px;
    width: 15px !important;
}

.rz-event-content {
    height: fit-content !important;
    max-height: 40px !important;
    overflow: auto !important;
}

.blazor-context-menu__list i {
    margin: 4px 5px 5px;
    font-size: 14px;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .tree-category-box {
        max-height: 330px;
        overflow: hidden;
        min-height: 220px !important;
    }

        .tree-category-box .custom-scroll {
            max-height: 205px;
            overflow: auto;
            min-height: 170px;
        }
}

.tree-scroll-control {
    margin-top: 30px !important;
}

.tree-category-box.frame .rz-tree-container {
    padding-right: 20px;
}

.tree-category-box.frame .rz-treenode-content-selected, .tree-category-box.frame .rz-treenode-content:not(.rz-treenode-content-selected):hover {
    border-radius: 5px;
}

.tree-category-box.frame .rz-tree-container, .tree-category-box.frame .rz-treenode-children {
    margin-top: 5px;
}

.tree-category-box.frame .rz-treenode-content .rz-treenode-label:hover .icon-btn {
    opacity: 1;
}

.tree-category-box.frame .rz-treenode-content .rz-treenode-label {
    width: 100%;
    border-radius: 5px;
    font-size: 0.8rem;
    margin: 0px;
    padding: 10px;
    color: rgb(105, 111, 103);
    background: rgb(239, 239, 239);
    transition: background-color 0.3s ease 0s;
}

.tree-category-box.frame .rz-treenode {
    margin-bottom: 5px;
}

.tree-category-box.frame .rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label {
    background-color: rgb(226, 226, 226);
    border-radius: 5px;
    color: rgb(118, 118, 118);
}

.question-item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 20px 20px 20px 30px;
}

.question-item-num, .zoom-question {
    background-color: var(--color-secondary);
    width: 24px;
    height: 24px;
    font-weight: 500;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0px 11px 0px 0px;
    color: #ffffff;
    border-radius: 25px;
    position: absolute;
    left: -20px;
    top: 20px;
    box-shadow: rgb(243, 242, 239) 0px 0px 0px 6px;
}

    .zoom-question.d-flex {
        position: absolute;
        box-shadow: rgb(254, 254, 254) 0px 0px 0px 6px;
        top: -38px;
        background: #ffffff;
        right: 34px;
        z-index: 11;
        left: auto;
        font-size: 0.9rem;
        color: rgb(115, 115, 115) !important;
    }

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

.modal-content .form__radio-group.true-answer .form__radio-button {
    border-color: var(--border-color-toast-success);
}

.modal-content .question-box .form__radio-group.true-answer .form__radio-button::after {
    background-color: var(--border-color-toast-success) !important;
}

.modal-content .form__radio-group.false-answer .form__radio-button {
    border-color: var(--color-danger);
}

.modal-content .question-box .form__radio-group.false-answer .form__radio-button::after {
    background-color: var(--color-danger) !important;
}

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

.modal-content .question-box {
    border: 1px solid #ddd;
    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;
}

.img-magnifier-box .img-magnifier-glass img {
    width: 100%;
}

.img-magnifier-main-text {
    margin: 15px 0px;
    display: inline-block;
    color: rgb(183, 183, 183);
    font-size: 0.75rem;
    font-weight: 400;
    font-family: "Open Sans";
}

.img-magnifier-box > img {
    width: 100%;
    max-height: 200px;
    padding: 0px;
    object-fit: contain;
}

.img-magnifier-box .zoom-question {
    left: auto;
    right: -24px;
    box-shadow: rgb(230, 231, 250) 0px 0px 0px 6px;
    color: #fff !important;
}

.img-magnifier-container {
    position: relative;
}

.form__radio-group .zoom-question {
    display: none !important;
}

.zoom-question {
    display: none;
}

.img-magnifier-glass {
    position: fixed;
    max-width: 100%;
    width: fit-content;
    min-width: 500px;
    height: fit-content;
    overflow: auto;
    bottom: 21px;
    max-height: 100%;
    background: #ffffff;
    padding: 10px;
    margin: auto;
    border-radius: 10px;
    z-index: 99999;
    box-shadow: rgba(39, 39, 39, 0.08) 1px 1px 0px 2000px;
    top: 34px !important;
    left: 0px !important;
    right: 0px !important;
}

.frame-core .note-box-main .ql-container .ql-editor {
    min-height: 200px;
}

@media screen and (max-width: 768px) {
    .img-magnifier-glass {
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0px;
        top: 0px !important;
    }
}

.remove-icon::after {
    font-weight: 400;
    font-family: "Font Awesome 5 Pro";
    content: "";
}

.remove-icon {
    position: absolute;
    top: 13px;
    width: 25px;
    right: 6px;
    height: 25px;
    background: var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    color: #fff !important;
}

.question-item-img .img-magnifier-glass img {
    max-height: inherit;
    width: 100%;
    border-radius: 5px;
}

.question-box .zoom-question {
    display: flex;
    left: auto;
    right: -22px;
    box-shadow: rgb(230, 231, 250) 0px 0px 0px 6px;
    color: #fff !important;
}

.img-magnifier-container .img-magnifier-glass + .img-magnifier-glass {
    display: none;
}

.blazor-context-menu--default {
    padding: 0px !important;
    border-radius: 10px !important;
    background-color: #fff !important;
}

.share-box-feed-top-box {
    background: #ffffff;
    text-align: center;
    padding: 20px 0px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgb(204, 204, 204);
    position: relative;
}

    .share-box-feed-top-box + .share-box-feed-entry-wrapper {
        position: relative;
        top: 0px;
    }

.share-box-feed-top-box-des {
    margin-top: 20px;
}

.share-box-feed-top-box-online-feed img {
    width: 18px;
    cursor: pointer;
}

.meetingHall-box {
    margin: 0px 15px 25px;
}

.share-box-feed-top-box-online-feed {
    font-size: 10px;
    position: absolute;
    right: 10px;
    bottom: 4px;
    left: 10px;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.product-list-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.product-list-items {
    flex: 0 0 30%;
    max-width: 30%;
    margin: 15px 1%;
    cursor: pointer;
    padding: 0px 0.5%;
    border-radius: 10px;
}

.product-list-items-add-box {
    padding: 20px 0px;
    text-align: center;
    visibility: hidden;
}

.product-list-items-add {
    border: none;
    outline: none;
    height: 35px;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    background: rgb(72, 195, 144);
    color: #ffffff;
    z-index: 1;
}

    .product-list-items-add:hover {
        background: rgb(39, 169, 42);
    }

.product-list-items:hover {
    box-shadow: rgb(204, 204, 204) 0px 0px 3px;
}

    .product-list-items:hover .product-list-items-add-box {
        visibility: visible;
    }

.product-list-items-price {
    height: 40px;
    display: flex;
    width: 100%;
    margin: 15px 0px;
}

.product-list-items-discount {
    background: rgb(226, 45, 45);
    max-width: 20%;
    flex: 0 0 20%;
    line-height: 40px;
    color: #ffffff;
    text-align: center;
    margin-right: 5%;
}

.product-list-items-price-box {
    display: flex;
    flex: 0 0 75%;
    max-width: 75%;
    flex-direction: column;
}

.product-list-items-base-price {
    text-decoration: line-through;
    font-size: 14px;
    color: rgb(148, 140, 140);
    height: 20px;
    line-height: 20px;
}

.product-list-items-current-price {
    height: 20px;
    line-height: 20px;
}

.product-list-items-Name {
    font-size: 14px;
    line-height: 24px;
    margin: 15px 0px;
}

.product-list-items-image {
    height: 300px;
    position: relative;
}

    .product-list-items-image img {
        position: absolute;
        inset: 0px;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }

.product-detail-section {
    width: 100%;
}

.product-detail-box {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.product-detail-top {
    display: flex;
    width: 100%;
    position: relative;
}

.product-detail-image-slider {
    flex: 0 0 50%;
    max-width: 50%;
}

.product-detail-top-right {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
}

.product-detail-current-image {
    max-width: 98%;
    margin: 0px 1% 30px;
    height: 700px;
    position: relative;
    background: #ffffff;
}

    .product-detail-current-image img {
        position: absolute;
        inset: 0px;
        margin: auto;
    }

.product-detail-image-slider-row {
    height: 100px;
}

.product-detail-image-row > .column {
    padding: 0px 8px;
    height: 100%;
}

.product-detail-image-row::after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 15%;
    cursor: pointer;
}

img.hover-shadow {
    transition: all 0.3s ease 0s;
    max-height: 100%;
}

.hover-shadow:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;
}

.demo {
    opacity: 0.6;
    max-height: 100%;
}

    .active, .demo:hover {
        opacity: 1;
    }

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.next {
    right: 0px;
    border-radius: 3px 0px 0px 3px;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: all 0.6s ease 0s;
    border-radius: 0px 3px 3px 0px;
    user-select: none;
}

.mySlides {
    display: none;
    height: 80vh;
    text-align: center;
}

    .mySlides img {
        max-height: 100%;
        max-width: 100%;
    }

.cursor {
    cursor: pointer;
}

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

.close-singel {
    position: absolute;
    right: 20px;
    z-index: 1;
    top: 15px;
    padding: 20px;
    font-size: 33px;
    font-weight: 500;
}

.normal-modal .post-icon-box .small, .normal-modal .post-icon-box .btn-primary.small {
    margin: 0px 0px -1px !important;
}

.normal-modal .post-icon-box > span {
    padding-top: 0px !important;
}

.normal-modal .feed-shared-footer {
    margin: 0px;
}

.normal-modal .feed-shared-comment {
    width: 100%;
}

.normal-modal .feed-shared-footer {
    margin: 10px 0px;
}

.normal-modal .post-icon-box {
    display: flex;
    align-items: center;
}

.count-user {
    color: rgb(176, 176, 176);
    align-items: center;
    display: flex;
    margin-left: 10px;
}

.modal-title {
    font-family: var(--font-base);
}

.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;
}

.product-detail-modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(51, 51, 51);
}

.img-zoom-lens {
    position: absolute;
    width: 40px;
    height: 40px;
}

.img-zoom-result {
    width: 50%;
    height: 75vh;
    position: absolute;
    right: 0px;
    z-index: 999;
    background: #ffffff;
    display: none;
}

.product-detail-master-image {
    cursor: zoom-in;
}

@media screen and (max-width: 768px) {
    .share-box-feed-top-box-des {
        margin-top: 0px;
    }

    .child-ptop .share-box-feed-top-box-des {
        margin-top: 20px;
    }

    .btn {
        margin-bottom: 5px;
    }

    .full-size-screen .event-time-row .event-duration-input-icon {
        margin: 0px;
    }

    .full-size-screen .event-time-row > .event-item-content {
        width: calc(100% - 8px) !important;
    }
}

.feed-shared-body.internal-content-page .compose-to-search-result-multi {
    left: 0px;
}

.feed-shared-body.internal-content-page label + div .pt-4 {
    padding-top: 5px !important;
}

.html-design .form-group label, .feed-shared-body.internal-content-page label, .event-form-box .form-group label, .modal-body .form-group label, .feed-shared-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;
}

.feed-shared-body.internal-content-page label {
    padding-left: 13px
}

.feed-shared-body.internal-content-page h5 + label {
    margin-left: 10px;
    width: auto;
    background: var(--primary);
    padding: 4px;
    border-radius: 10px;
    color: #ffffff;
}

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

.comments-comments-list .comments-comments-list-comment-item {
    position: relative;
}

    .comments-comments-list .comments-comments-list-comment-item .remove-category i {
        padding-top: 1px;
    }

    .comments-comments-list .comments-comments-list-comment-item:hover .remove-category, .show-uploaded .item-upload:hover .remove-category {
        opacity: 1;
        z-index: 2;
    }

.just-assessment.passive .assessment-btn {
    filter: grayscale(0.8);
    opacity: 0.8;
}

.just-assessment.passive .exam-item-detail i {
    filter: grayscale(0.8);
}

.show-uploaded .item-upload > input[type="file"] {
    z-index: 1;
}

.items-upload.items-upload-mini {
    font-weight: 300;
    font-size: 13px;
    padding: 15px;
}

.items-upload-mini .remove-icon {
    transform: scale(0.7);
    right: -11px;
    font-size: 16px;
}

.items-upload-box:empty {
    display: none;
}

.btn-row-items .btn-success.disabled, .btn-row-items .btn-success:disabled {
    color: rgb(75, 181, 99) !important;
    background-color: #fff !important;
}

.btn-row-items .btn {
    margin-right: 5px;
}

.download-icon {
    color: rgb(0, 119, 181);
    cursor: pointer;
}

.items-upload-full {
    width: 100%;
    margin: 5px 0px;
}

.profile-banner-header {
    display: none;
}

.package-list {
    display: inline-block;
    padding: 10px 15px 15px;
    width: 100%;
}

    .package-list:empty {
        padding: 0px;
    }

    .package-item video, .package-list .package-item .main-img {
        position: absolute;
        max-height: 250px;
        width: 100%;
        border-radius: 5px;
        margin: 0px !important;
    }

    .package-list .package-item .main-img {
        z-index: 1;
        object-fit: contain;
    }

.channel-item.frame .banner-img-cover {
    width: 100%;
}

.package-item {
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: center center;
    min-height: 215px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

    .package-item::after {
        display: none;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        inset: 0px;
        border-radius: 5px;
        z-index: 9;
        background-color: rgba(50, 50, 50, 0.54);
    }

    .package-item > * {
        position: relative;
    }

.package-description {
    line-height: 1.5;
    font-family: Poppins;
    font-size: 14px;
    padding: 10px 8px;
    max-height: 250px;
    overflow: auto;
    font-weight: 500;
}

.responsive-table .img-magnifier-container .main-img {
    width: 44px;
    height: 44px;
    margin: 3px 0px 0px;
    object-fit: cover;
    border-radius: 50%;
}

.forsale-box label > div {
    display: flex;
    align-items: center;
}

.forsale-box {
    display: flex;
    align-items: baseline;
    flex-direction: row !important;
}

    .forsale-box a.btn-setting {
        font-size: 17px;
        transition: color 0.3s ease 0s;
        color: rgb(164, 164, 164);
    }

        .forsale-box a.btn-setting:hover {
            color: rgb(140, 140, 140);
        }

.main-result-setting .forsale-box .btn {
    margin-top: -8px;
    padding: 7px 8px;
}

.frame-core.olakid .package-description {
    margin: 5px -15px -5px;
    border-radius: 0px 0px 10px 10px;
    background: white;
    padding: 13px 15px 8px;
    min-height: 9px;
}

.package-item-detail {
    min-height: 90px;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 16px;
    justify-content: space-between;
}

    .package-item-detail.justify-content-end {
        min-height: 35px;
    }

        .package-item-detail.justify-content-end .active-package-box {
            margin: 0px 10px;
            padding: 4px 8px 0px;
        }

.owl-carousel.post-gallery .owl-nav > button {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .owl-carousel.post-gallery .owl-item img {
        border-radius: 0px;
        margin-bottom: 10px;
    }
}

.outline-button {
    border-radius: 15px;
    border: 3px solid;
}

.follow-btn {
    border-color: rgb(0, 176, 240);
    color: rgb(0, 176, 240) !important;
}

.following-btn {
    border-color: rgb(146, 208, 80);
    color: rgb(146, 208, 80) !important;
}

.enroll-btn {
    border-color: rgb(51, 63, 83);
    color: rgb(51, 63, 83) !important;
}

.enrolled-btn {
    border-color: rgb(112, 48, 160);
    color: rgb(112, 48, 160) !important;
}

.join-box a {
    background: rgb(208, 228, 209);
    font-size: 0.82rem;
    padding: 0px 30px;
    border-radius: 26px;
    font-weight: 700;
    transition: all 0.3s ease 0s;
    color: rgb(82, 81, 81) !important;
    border: 3px solid #fff !important;
}

    .join-box a:hover {
        background: linear-gradient(45deg, rgb(234, 234, 234), rgb(181, 174, 174));
        color: #fff !important;
    }

.post-dr-bottom .subscribe-btn {
    background-color: rgb(237, 125, 49);
    border: 3px solid rgb(95, 95, 95) !important;
}

.post-dr-bottom .following-btn {
    padding: 4px 32px;
    border: none;
    background: linear-gradient(0deg, rgb(146, 208, 80), rgb(200, 255, 139));
    transition: background 0.3s ease 0s;
    color: #fff !important;
}

    .post-dr-bottom .following-btn:hover {
        background: linear-gradient(0deg, rgb(67, 112, 20), rgb(173, 245, 95));
    }

.post-dr-bottom .follow-btn, .join-box a {
    padding: 4px 32px;
    border: none;
    background: linear-gradient(0deg, rgb(245, 137, 92), rgb(255, 231, 221));
    transition: background 0.3s ease 0s;
    color: #fff !important;
}

    .post-dr-bottom .follow-btn:hover, .join-box a:hover {
        background: linear-gradient(10deg, rgb(245, 137, 92), rgb(255, 231, 221));
    }

.join-box a {
    padding: 3px 27px;
    border: none !important;
}

.post-dr-bottom .enroll-btn {
    background-color: rgb(51, 63, 83);
    border: 3px solid rgb(95, 95, 95) !important;
    color: #fff !important;
}

    .post-dr-bottom .enroll-btn:hover {
        background-color: rgb(207, 207, 207);
        border: 3px solid rgb(177, 177, 177) !important;
        color: #fff !important;
    }

.post-dr-bottom .enrolled-btn {
    background-color: rgb(112, 48, 160);
    border: 3px solid rgb(95, 95, 95) !important;
    color: #fff !important;
}

    .post-dr-bottom .enrolled-btn:hover {
        background-color: rgb(207, 207, 207);
        border: 3px solid rgb(177, 177, 177) !important;
        color: #fff !important;
    }

.column-row-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
}

.subscribe-btn {
    border-color: rgb(237, 125, 49);
}

.subscribed-btn {
    border-color: rgb(237, 125, 49);
    color: rgb(237, 125, 49) !important;
}

.dicount-row .dicount-code-input::placeholder {
    color: rgb(154, 154, 154);
    font-size: 0.75rem;
}

.dicount-row .dicount-code-input {
    width: 90px;
    border-radius: 5px;
    font-size: 14px;
    padding: 6px;
    font-family: Poppins;
    font-weight: 600;
}

.package-off {
    color: rgba(116, 125, 147, 0.93);
    font-size: 0.75rem;
    margin: 0px 2px 0px 5px;
    font-weight: 600 !important
}

.package-price {
    font-size: 0.85rem;
    color: rgb(116,116,116);
    margin-left: 4px;
    display: flex;
    text-shadow: 0px 0px 1px #fbfbfb;
}

.dicount-row {
    width: 100%;
    display: flex;
    justify-content: end;
    padding: 0px 10px;
    margin-bottom: 17px;
}

.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;
}

.package-item-detail .select-control {
    background-position: calc(100% - 7px) 50%;
    color: rgb(135, 135, 135);
    font-weight: 600;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 10px;
    font-family: Poppins;
    padding: 8px 29px 7px 10px !important;
}

.user-selector-item {
    position: absolute;
    z-index: 99;
    height: 40px;
    width: 40px !important;
}

.package-item-detail .row-input-control {
    background: #ffffff;
    margin: 1px 20px 0px 0px;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    font-size: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

    .package-item-detail .row-input-control ul {
        display: none;
        position: absolute;
        top: 108%;
        width: 100%;
        left: 0px;
        z-index: 5;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: rgb(194, 194, 194) 0px 0px 4px;
        max-height: 200px;
        overflow: auto !important;
    }

        .package-item-detail .row-input-control ul li:hover {
            background-color: rgb(221, 221, 221);
            color: rgb(131, 131, 131);
        }

        .package-item-detail .row-input-control ul li {
            padding: 11px 10px;
            border-bottom: 1px solid rgb(226, 226, 226);
            color: rgb(158, 157, 157);
            font-size: 13px;
            font-weight: 500;
            transition: background-color 0.3s ease 0s;
        }

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

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

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

.pakage-btn:hover {
    color: rgb(73, 73, 73);
}

.pakage-btn {
    background: var(--primary);
    padding: 9px 17px;
    margin: -2px -3px;
    font-weight: 500;
    border-radius: 5px;
    font-size: 13px;
    display: inline-block;
    color: #fff !important;
}

.package-item-detail .dicount-row ~ .active-package-box {
    margin-bottom: 7px;
    background-color: #ffffff;
}

.active-package-box {
    display: flex;
    padding: 4px 8px 7px;
    border-radius: 5px;
    position: relative;
    justify-content: end;
    margin: 0px;
    background: #ffffff;
}

.package-item-detail.banner-heade .fa-globe {
    font-size: 22px;
}

.package-item-detail.banner-header > .d-flex {
    align-items: center;
}

.package-item-detail .mini-input .select-control {
    min-width: 80px;
    width: 80px;
}

.coin-box {
    display: flex;
    align-items: center;
    margin: 0px 25px 0px 0px;
    color: rgb(184, 184, 184);
    font-size: 15px;
}

.coin-img {
    width: 21px;
}

.img-select-package {
    border-radius: 5px;
    width: 100%;
}

.product-info-detail h3 {
    margin: -5px 0px 4px;
    color: rgb(90, 90, 90);
    font-size: 21px;
    font-weight: 800;
}

.product-info-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.product-info-head {
    padding: 5px 0px;
}

.product-info-detail {
    padding: 4px 0px 0px;
}

.product-purchased-box-main {
    padding: 0px 15px;
}

.product-info-detail h3.product-purchased-title {
    margin: 0px;
    color: rgba(60, 60, 60, 0.867);
    font-size: 1.4rem;
    font-weight: 700;
}

.product-purchased-status-product {
    margin-bottom: 10px;
    font-size: 0.75rem;
}

.product-purchased-day-remain {
    background-color: rgb(154, 196, 39);
    padding: 7px 5px;
    margin: 0px;
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: 5px;
    color: #ffffff;
}

.product-purchased-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.product-purchased-title-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.product-contnet .header-placement {
    text-align: right;
    padding: 15px 5px 20px 1px;
    font-size: 18px;
    font-weight: 600;
}

.product-contnet > div {
    padding-left: 0px;
    padding-right: 0px;
}

.day-remain {
    font-size: 15px;
    margin-top: 5px;
    color: var(--primary);
}

.status-product strong {
    font-weight: 700;
    color: rgb(86, 86, 86);
}

.status-product {
    font-size: 14px;
    margin-top: 5px;
    color: rgb(133, 133, 133);
}

.video-call-box {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0px;
    margin-top: 25px;
    border-radius: 15px;
    overflow: hidden;
}

    .video-call-box iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

.progress-item-row .progress {
    height: auto;
    border-radius: 2px;
    position: relative;
    background: #ffffff;
    padding-right: 50px;
}

.progress-item-row .progress-bar {
    width: 100%;
    background: rgb(217, 228, 236);
    min-height: 34px;
}

.progress-item-row {
    display: inline-block;
    width: 100%;
    padding: 3px 8px;
}

    .progress-item-row span {
        margin-bottom: 0px;
        font-size: 14px;
        display: inline-block;
        font-weight: 600;
        color: rgb(71, 71, 71);
        text-align: left;
        padding-left: 10px;
    }

    .progress-item-row img {
        display: none;
    }

.result-box {
    border: 2px solid rgb(222, 222, 222);
    padding: 11px 5px;
    border-radius: 3px;
    display: inline-block;
    margin: 10px 17px;
    width: calc(100% - 35px);
}

.progress-value {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}

.display-flex {
    display: flex !important;
}

.peek-carousel-controls__button {
    height: 3.2rem;
    width: 3.2rem;
    min-width: auto;
}

    .peek-carousel-controls__button:visited:hover {
        background-color: white;
        color: grey;
    }

.peek-carousel-controls__button {
    padding: 0px !important;
}

.peek-carousel-controls__button {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 167ms;
    align-items: center;
    border: none;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    min-width: 6.4rem;
    max-width: 480px;
    overflow: hidden;
    text-align: center;
    transition-property: background-color, box-shadow, color;
    vertical-align: middle;
}

.item-upload video {
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 100%;
    margin: 0px !important;
}

.frame.users-list-video {
    margin-right: 0px;
    margin-top: 5px;
    border-radius: 15px 15px 7px 7px;
}

.frame-image {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    margin-bottom: -4px;
}

.aside-chat.frame {
    padding: 8px 5px !important;
}

    .aside-chat.frame:empty {
        box-shadow: none;
        padding: 0px !important;
    }

.chat .chat-history {
    height: 380px;
    padding: 10px;
}

.item-upload.quarter-size {
    width: calc(25% - 8px) !important;
}

.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;
}

.question-box .item-upload {
    min-height: 150px;
    width: 250px !important;
    min-width: 50px !important;
}

.career-setting-box .upload-row {
    width: 100%;
    min-width: 210px;
}

.career-setting-box .item-upload {
    width: calc(18% - 8px) !important;
    font-size: 13px;
    min-width: 152px !important;
}

    .career-setting-box .item-upload label.file-upload-btn {
        text-align: center;
        font-size: 0.8em;
        color: rgb(198, 198, 198);
    }

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

.skills-row > div span {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgb(178, 178, 178);
}

.achievement-header {
    display: flex;
    justify-content: center;
    width: 158px !important;
}

    .achievement-header img {
        width: 35px;
        margin-right: 5px;
        object-fit: contain;
    }

.data-item input[type="number"] {
    width: 70px;
}

.skills-row > div {
    width: 48%;
    display: flex;
    justify-content: space-between;
}

.skills-row {
    display: flex;
    justify-content: space-between;
}

.teacher-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-from-control input[type="file"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    font-weight: 400;
    line-height: 1.5;
    color: rgb(73, 80, 87);
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid rgb(206, 212, 218);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    padding: 3px;
    font-size: 14px;
}

.event-controls ul {
    display: flex;
}

.success-result span {
    background: rgb(37, 191, 96);
}

.message-result.failed i {
    font-size: 23px;
    margin: -3px 3px;
}

.message-result i {
    font-size: 23px;
    margin: -3px 0px;
}

.message-result {
    color: rgb(37, 191, 96);
    background: #ffffff;
    font-weight: 400;
    border: none;
    padding: 8px 15px;
    font-size: 0.94em;
    display: inline-block;
    border-radius: 20px;
    box-shadow: rgb(198, 198, 198) 0px 1px 6px;
}

    .message-result > span i {
        margin-right: 5px;
        animation: 1.1s ease 0s 1 normal both running bounce-in-top;
    }

    .message-result > span {
        border-radius: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .message-result.success span {
        background: rgba(37, 191, 96, 0.14);
    }

    .message-result.failed span {
        transform: translateY(2px);
        background: rgb(255, 242, 242);
    }

    .message-result.failed {
        color: rgb(244, 79, 78);
    }

    .message-result.failed {
    }

@-webkit-keyframes bounce-in-top {
    0% {
        transform: translateY(-500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        transform: translateY(-65px);
        animation-timing-function: ease-in;
    }

    72% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    81% {
        transform: translateY(-28px);
        animation-timing-function: ease-in;
    }

    90% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    95% {
        transform: translateY(-8px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        transform: translateY(-500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        transform: translateY(-65px);
        animation-timing-function: ease-in;
    }

    72% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    81% {
        transform: translateY(-28px);
        animation-timing-function: ease-in;
    }

    90% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }

    95% {
        transform: translateY(-8px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
}

.career-setting-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px 5px;
    align-items: center;
}

.career-setting-box-title {
    font-size: 20px;
    color: rgb(114, 110, 110);
    font-weight: 500;
}

.channel-section-area .default-input {
    border-width: 1px;
}

.channel-section-area .item-upload {
    width: calc(25% - 8px) !important;
}

.channel-logo > img {
    width: 80px;
    border-radius: 80px;
    height: 80px;
    right: 13px;
    background-color: #ffffff;
    position: absolute;
    object-fit: cover;
    bottom: -31px;
    box-shadow: rgb(254, 254, 254) 0px 0px 0px 6px;
}

.channel-section-main {
    padding: 15px 0px;
    line-height: 1.5;
}

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

.single-line {
    display: flex;
    flex-wrap: wrap;
}

.channel-section-title {
    color: rgb(102, 96, 96);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    font-family: "Open Sans";
    margin-bottom: 13px;
}

.channel-section-dec {
    margin: 20px 0px 0px;
    font-family: "Open Sans";
    color: rgb(148, 138, 138);
}

.channel-banner {
    position: relative;
}

    .channel-banner > img {
        max-height: 200px;
        width: 100%;
        object-fit: contain;
        border-radius: 4px;
    }

.channel-section-area .career-item-group .career-setting-input-row, .channel-section-area .career-item-group {
    width: 100%;
}

.channel-section-area .upload-row {
    width: 100%;
    margin: 0px -10px;
}

.upload-btn-frame button {
    border: 2px solid rgb(200, 200, 200);
    padding: 5px 15px;
    background-color: rgb(240, 240, 240);
    border-radius: 6px;
    color: rgb(138, 138, 138);
    font-weight: 300;
    font-size: 0.8em;
}

.career-item-group.row {
    margin: 0px -10px;
}

.join-box {
    background: rgba(255, 135, 72, 0.7);
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: space-between;
    padding: 11px 15px;
    align-items: center;
    color: #ffffff;
    font-size: 1rem;
    font-family: var(--font-base);
}

    .join-box button {
        background: #ffffff;
        padding: 2px 22px;
        font-size: 0.9rem;
    }

.join-type-row.row {
    margin: 0px -10px;
}

.join-type-row .check-row {
    margin-bottom: 20px;
    position: relative;
}

    .join-type-row .check-row .periodic {
        margin-bottom: -3px !important;
    }

.career-item-group {
    display: flex;
    flex-wrap: wrap;
}

textarea.default-input {
    min-height: 124px;
}

.default-input:focus {
    outline: none;
}

.default-input {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    width: 100%;
    resize: none;
    color: rgb(110, 110, 110);
    padding: 5px 10px;
    border: 1px solid rgb(219, 219, 219);
    height: 40px;
    border-radius: 9px;
}

.default-div input[type="checkbox"] {
    vertical-align: -4px;
}

.default-div {
    width: auto;
    display: inline-block;
    border: none;
}

.join-type-row .default-input {
    margin: 0px 0px 5px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    resize: none;
    color: rgb(110, 110, 110);
    padding: 5px 10px;
    border: 1px solid rgb(219, 219, 219);
    height: 40px;
    border-radius: 9px;
}

    .join-type-row .default-input option {
        font-weight: 500;
    }

.keyword-items div {
    padding: 5px;
}

    .keyword-items div span {
        background-color: rgb(180, 199, 231);
        color: #ffffff;
        width: 100%;
        display: flex;
        border-radius: 5px;
        align-items: center;
        font-size: 0.8em;
        justify-content: center;
        padding: 7px;
        font-family: "Open Sans";
        font-weight: 600;
    }

.career-setting-item-row {
}

.max-user i {
    font-size: 1.4em;
}

.max-user {
    display: flex;
    align-items: center;
    color: rgb(221, 221, 221);
}

    .max-user .default-input {
        margin: 0px 0px 0px 10px;
    }

.keyword-items {
    display: flex;
    margin-top: 8px;
    flex-wrap: wrap;
}

    .keyword-items > div:nth-child(2n+1) {
        width: 70%;
    }

    .keyword-items > div:nth-child(2n) {
        width: 30%;
    }

.join-type-row li label input {
    max-width: 70px;
    margin: 3px;
    font-weight: 600;
    font-size: 0.9em;
}

.career-setting-header .item-upload i {
    text-align: left;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1em;
    color: rgb(190, 190, 190);
    top: -26px;
}

.career-setting-header .item-upload > input[type="file"] {
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    transform: none;
}

.join-type-row input[type="checkbox"] {
    vertical-align: middle;
}

.join-type-row li label {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    color: rgb(118, 118, 118);
    font-weight: 600;
    font-size: 15px;
}

.join-type-row {
    display: flex;
}

.career-item-group ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.right-show > ul:first-child {
    justify-content: end;
}

.credit-count-box {
    width: 50px;
    margin: 0px 0px 0px 8px !important;
    border-width: 2px !important;
}

.module-item {
    margin: 5px;
    background: rgb(242, 242, 242);
    border-radius: 10px;
    padding: 2px 7px;
    cursor: pointer;
}

    .module-item label {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 10px 9px;
        cursor: pointer;
        font-weight: 500;
    }

    .module-item img {
        width: 20px;
        margin-right: 5px;
        height: 20px;
        border-radius: 5px;
        object-fit: contain;
    }

.join-type-row li .label-gray {
    font-size: 0.7em;
    color: rgb(196, 191, 191);
    font-weight: 400;
    font-family: "Open Sans";
}

.module-item label input[type="checkbox"] {
    margin-right: 10px;
}

input[type="radio"] {
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    appearance: none;
    border-color: rgb(221, 221, 221);
    border-width: 0.125rem;
    border-style: solid;
}

input:checked[type="radio"] {
    border-color: var(--primary);
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

input[type="checkbox"]:indeterminate {
    background-color: rgb(255, 106, 89);
    border-color: rgb(255, 106, 89);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.filter-list input[type="radio"], input[type="checkbox"] {
    border-color: rgb(221, 221, 221);
    border-width: 0.125rem;
    border-style: solid;
    width: 1.15rem;
    flex: 0 0 1.15rem;
    height: 1.15rem;
    appearance: none;
    border-radius: 4px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center center;
}

.filter-list input:checked[type="radio"], input:checked[type="checkbox"] {
    border-color: var(--primary);
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.role-list {
    margin: 0px -5px;
    padding: 0px 5px;
    width: 102%;
}

    .role-list li {
        width: 25%;
        padding: 7px;
    }

    .role-list .add-role {
        color: rgb(182, 182, 182);
        display: inline-block;
        width: 100%;
        text-align: center;
        border: 1px solid rgb(221, 221, 221);
        padding: 7px;
        border-radius: 5px;
    }

.edit-role {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(104, 104, 104);
    padding: 6px 7px 4px 10px;
    border-radius: 20px;
    background: rgb(236, 236, 236);
    transition: all 0.3s ease 0s;
}

    .edit-role:hover {
        background-color: rgb(104, 104, 104);
        color: #fff !important;
    }

.role-edit .default-input {
    margin: 0px;
    padding: 8px;
}

.role-edit {
    position: relative;
    margin-bottom: 10px;
}

.join-type-row > li > div > label:last-child {
    margin-left: 5px !important;
}

.join-type-row > li > div > label.ml-0:last-child {
    white-space: nowrap;
    margin-left: 0px !important;
}

.join-type-row > li > div.check-row > span {
    margin-left: 5px;
}

.join-type-row > li > div.check-row {
    align-items: center;
    margin-top: 5px;
    margin-bottom: 13px;
    display: flex;
    z-index:5
}

.post-cover-pre-upload ~ .label-uploader {
    text-align: center;
    font-size: 0.8em;
    position: absolute;
    top: 0px;
    background: rgba(255, 255, 255, 0.82);
    right: 0px;
    padding: 4px;
    left: 0px;
    font-family: var(--font-base);
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.3s ease 0s;
    color: rgb(38, 38, 38) !important;
}

.join-type-row > li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.password-box-channel {
    width: 103px;
    height: auto;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align: center;
    margin-left: 32px !important;
}

.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;
    }

.form-group input[type="datetime-local"].form-control {
    position: relative;
    padding: 3px;
    min-height: 34px;
    margin-top: 0px;
}

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

.form-bg .form-group label, .col-12.edit-user label {
    margin-bottom: 7px;
    font-family: var(--font-base);
    font-size: 0.9rem;
}


.form-group .form-control {
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    width: 100%;
    resize: none;
    color: rgb(110, 110, 110);
    padding: 5px 10px;
    border: 1px solid rgb(219, 219, 219);
    height: 40px;
    border-radius: 9px;
}

.form-group textarea.form-control {
    height: auto
}

.form-date-control input {
    font-weight: 400;
    font-family: var(--font-base);
    font-size: 0.83rem !important;
}

    .form-date-control input:focus {
        outline: none;
    }

.form-date-control {
    width: 100%;
}

.form-group .form-control:hover, .form-group .form-control:focus {
    border-color: rgb(124, 124, 124);
}

.user-selected-list {
    display: flex;
    flex-wrap: wrap;
}

.user-selected .search-compose-to-title {
    font-size: 13px;
}

.user-selected {
    display: flex;
    margin: 0px 10px 10px 0px;
    padding: 6px 11px;
    border-radius: 30px;
    justify-content: space-between;
    background-color: rgb(243, 243, 243);
    font-size: 0.73rem;
    font-family: var(--font-base);
    font-weight: 500;
    align-items: center;
}

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

.border-none {
    margin: 0px;
    padding: 0px;
    border: none !important;
}

.user-selector .compose-to-search-result, .user-selector .compose-to-search-result-multi {
    top: 57px;
    padding: 0px;
    overflow: auto;
    max-height: 200px;
}

.users-list-video .user-selector .compose-to-search-result:empty, .users-list-video .user-selector .compose-to-search-result-multi:empty {
    border: none !important;
}

.users-list-video .user-selector .compose-to-search-result, .users-list-video .user-selector .compose-to-search-result-multi {
    width: 180px;
}

.users-list-video .user-selector .search-compose-to-title p {
    font-size: 0.68rem;
    line-height: 1.3;
}

.user-selector {
    position: relative;
}

    .user-selector .icon-btn {
        position: absolute;
        right: 5px;
        top: 10px;
        border: 0px;
        background: none;
        color: rgb(74, 184, 99);
        font-size: 1.1rem;
    }

.email-area .user-selector .compose-to-search-result {
    top: calc(100% + 7px);
}

.career-item-group .user-selector {
    z-index: 4;
}

.user-selector {
    width: 100%;
    position: relative;
}

    .user-selector .search-compose-to-title i {
        background-color: rgba(100, 143, 193, 0.16);
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        font-size: 1.1em;
    }

.remove-user {
    background-color: rgb(217, 217, 217);
    border: none;
    width: 17px;
    height: 17px;
    font-size: 1em;
    padding: 3px;
    color: rgb(113, 113, 113);
    border-radius: 15px;
    margin-left: 13px;
    transition: background-color 0.3s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .remove-user:focus {
        outline: none;
    }

    .remove-user:hover {
        background-color: rgb(205, 205, 205);
    }

.user-selector .search-compose-to-title p {
    font-family: "Open Sans";
    margin-left: 5px;
}

.user-selector .compose-to-serach-row:hover {
    background: rgb(240, 240, 240);
}

.user-selector .compose-to-serach-row {
    border-radius: 0px;
}

.item-video-group h5 {
    font-size: 0.86em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 47px);
}

.item-video-group {
    color: rgb(187, 187, 187);
    display: flex;
    justify-content: space-between;
    border: 2px solid rgb(214, 214, 214);
    padding: 8px;
    margin-bottom: 7px;
    font-size: 0.85em;
    border-radius: 11px;
    font-family: var(--font-base);
    align-items: center;
}

.group-option {
    cursor: pointer;
    transition: opacity 0.3s ease 0s;
}

    .group-option:hover {
        opacity: 0.8;
    }

.group-option-div a {
    width: 100%;
    text-align: center;
    display: inline-block;
    font-size: 17px;
    padding: 4px;
    transition: background 0.3s ease 0s;
    font-weight: 600;
}

    .group-option-div a:hover {
        background: rgb(231, 231, 231);
    }

.group-option-div {
}

.add-group:focus {
    outline: none;
}

.video-group {
    margin-top: 150px;
}

.add-group {
    color: rgb(203, 203, 203);
    width: 100%;
    border: none;
    padding: 4px;
    background-color: transparent;
    border-radius: 24px;
}

.paint-content {
    overflow: auto;
}

.table-bordered td, .table-bordered th {
    border: 0px;
    padding: 5px;
}

.custom-table thead th {
    color: rgb(46, 46, 46);
    vertical-align: middle;
}

.about-item .custom-table td i {
    margin-right: 5px;
}

.about-item .custom-table td a {
    display: flex;
    font-size: 15px;
    align-items: center;
}

.about-item .custom-table td, .about-item .custom-table td span {
    font-size: 0.72rem;
    font-family: var(--font-base);
    font-weight: 500;
}

.custom-table.new-1 table {
    margin-bottom: 0px;
}

.custom-table.new-1 thead th, .custom-table.new-1td {
    padding: 15px !important;
}

.custom-table.new-1 thead tr {
    background: var(--color-btn-mobile);
}

.order-header-title {
    justify-content: space-between;
}

.horizontal-tabs.profile-tabs li > a.tab-item > span {
    background-color: var(--primary);
    color: #ffffff;
    margin: -5px 0px -3px 5px;
    padding: 2px 3px;
    border-radius: 15px;
    min-width: 25px;
    min-height: 17px;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    vertical-align: middle;
}

    .horizontal-tabs.profile-tabs li > a.tab-item > span:empty {
        display: none;
    }

.result-tabs .about-item .custom-table td, .result-tabs .about-item .custom-table td span {
    font-size: 15px;
    padding: 10px;
    font-weight: 600;
    font-family: Poppins;
    color: rgb(82, 82, 82);
}

.custom-table.responsive-table td {
    font-weight: 400;
    font-size: 0.85rem;
}

.about-item .custom-table.gray-table table {
    margin-bottom: 0px;
}

.custom-table.gray-table {
    overflow: visible;
}

.about-item .custom-table.gray-table td a {
    height: auto;
    margin: 0px;
}

.custom-table.gray-table tr th:first-child {
    border-radius: 5px 0px 0px;
    padding: 10px !important;
}

.big-title {
    display: flex;
    margin-bottom: -17px;
    align-items: baseline;
}

    .big-title .assignment-main-title {
        padding: 0px;
        font-size: 11px;
        margin: 8px;
        transform: translateY(-4px);
    }

.custom-table.gray-table tr th:last-child {
    border-radius: 0px 5px 0px 0px;
}

.custom-table.gray-table td:first-child {
    border-radius: 0px 0px 0px 5px;
}

.custom-table.gray-table tr td:last-child {
    border-radius: 0px 0px 5px;
}

.about-item .custom-table.gray-table table tbody tr:nth-child(2n) {
    background-color: rgb(237, 237, 237);
}

.about-item .custom-table.gray-table td, .about-item .custom-table.gray-table td span {
    position: relative;
    font-size: 0.8rem;
}

.gray-table .item-user::after, .gray-table .item-user-offline::after {
    top: 6px;
}

.gray-table .item-user-option {
    left: auto;
    top: 0px;
    right: 0px;
}

.custom-table {
    overflow: auto;
}

    .custom-table thead tr {
    }

@media screen and (min-width: 600px) {
    .custom-table td input {
        border: 1px solid rgb(170,170, 170);
        border-radius: 4px;
        padding: 3px 8px;
        font-size: 0.8rem;
    }

    .modal .custom-table thead th, .modal .custom-table td {
        padding: 15px;
        font-size: 14px;
    }

    .custom-table .login-submit {
        margin: 0px;
        font-size: 0.8rem;
        padding: 9px 8px;
        background-color: var(--color-primary);
    }

    .custom-table thead th, .custom-table td {
        vertical-align: middle;
        border: none;
        padding: 15px;
    }

    .custom-table .sesstion-item-list thead th {
        padding: 7px 15px;
    }

    .icon-arrow::before {
        vertical-align: middle;
        font-size: 16px;
    }

    .custom-table tbody > tr:first-child .fa-angle-up {
        opacity: 0;
        position: relative;
        z-index: -1;
    }

    .custom-table tbody > tr:last-child .fa-angle-down {
        opacity: 0;
        position: relative;
        z-index: -1;
    }

    .actions-button {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .custom-table td a {
        margin: 0px 6px;
        cursor: pointer;
        height: 15px;
        display: flex;
        align-items: center;
    }

    .custom-table td a {
        height: 15px;
        display: flex;
        align-items: center;
    }

    .assessment-student .custom-table td a {
        display: inline-block;
    }

    .actions-button > div {
        display: flex;
        width: 43px;
        margin-left: 8px;
    }

    .custom-table {
        display: table;
        width: 100%;
        font-weight: 500;
        border-radius: 10px;
        overflow: hidden;
    }

    .ct-body > .ct-body-row:nth-child(even) {
        background-color: rgb(250, 250, 250);
    }

    .ct-header {
        display: table-header-group;
    }

    .ct-header-row, .ct-body-row, .ct-row {
        display: table-row;
    }

        .ct-header-row .ct-item {
            color: rgb(55, 69, 87);
            font-size: 15px;
            /* border-bottom: 2px solid rgb(221, 221, 221); */
        }

    .ct-header-row {
        background: #ffffff;
    }

    .ct-item {
        display: table-cell;
        padding: 9px 5px;
        color: rgb(102, 102, 102);
        font-size: 14px;
    }

    .ct-body {
        display: table-row-group;
    }

    .ds-none {
        display: none;
    }
}

.acency-multiselect .select-search > input {
    font-size: 0.85rem;
}

.acency-multiselect > label {
    font-size: 0.85rem;
    color: rgb(116, 116, 116);
    font-weight: 500;
}

.acency-multiselect .select-search {
    width: 250px;
    margin-left: 11px;
}

.new-ui-table thead th, .new-ui-table td {
    padding: 10px !important;
}

.status-assign .fa-heart-rate {
    border: 2px solid rgb(26, 163, 185);
    padding: 3px 4px;
    border-radius: 4px;
}

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

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

.new-ui-table thead tr > th:last-child, .new-ui-table tr > td:last-child {
    min-width: 50%;
}

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

@media screen and (max-width: 600px) {
    .ds-none {
        display: block;
    }

    .ct-body {
        flex-wrap: wrap;
        display: flex;
    }

    .ct-header-row {
        display: none;
    }

    .ds-none, .ct-body-row {
        width: 50%;
        padding: 7px 15px;
    }

    .ct-body > div:nth-child(4n+1), .ct-body > div:nth-child(4n+2) {
        background: rgb(242, 242, 242);
    }

    .res-header {
        color: rgb(140, 139, 139);
        font-size: 1.1em;
        margin-bottom: 6px;
        font-weight: 400;
        font-family: var(--font-base);
    }

    .ct-item {
        color: rgb(100, 97, 97);
        font-size: 1.1em;
        margin-bottom: 6px;
        font-weight: 500;
        font-family: var(--font-base);
    }
}

.feed-shared-footer:empty, .event-body-text:empty, .feed-shared-body-text:empty, .feed-des:empty {
    display: none;
}

#totop, .back-button {
    display: inline-block;
    position: fixed;
    right: 5px;
    margin: auto;
    bottom: 15px;
    z-index: 2;
    left: 0px;
    height: auto;
}

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

#VideoComponentDiv {
    padding-bottom: 42.25%;
    margin-right: -15px;
}

.totop, .back-flat {
    right: 25px;
    width: 30px;
    z-index: 9999;
    position: fixed;
    bottom: -500px;
    background: linear-gradient(45deg, rgb(140, 208, 247), rgb(66, 176, 238));
    padding: 7px 5px;
    transition: all 0.3s ease 0s;
    left: 110px;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
}

    .totop.show, .back-flat.show {
        transition: all 0.3s ease 0s;
        bottom: 65px;
    }

    .totop::after, .back-flat::after {
        position: absolute;
        z-index: -1;
        content: "";
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        background: radial-gradient(at center center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 80%);
        opacity: 1;
    }

    .totop svg, .totop i, .back-flat svg, .back-flat i {
        margin: 0px !important;
    }

.right-rail + #totop {
    max-width: 552px;
}

.global-main .full-size-screen #totop, .global-main .right-rail.d-none ~ #totop {
    max-width: 1230px;
    width: auto;
}

.close-menu.nav-assessment {
    margin-top: -20px;
    padding: 0px 5px 8px;
    font-size: 28px;
}

.nav-assessment .toolbar-item {
    background-color: #ffffff;
    font-size: 15px;
    color: var(--color-secondary) !important;
}

.plus-icon {
    display: none;
}

    .plus-icon.active {
        display: block;
    }

.w-50px {
    width: 50px;
}

.add-tree-button {
    display: flex;
    justify-content: flex-end;
}

.tree-category-box .rz-treenode-content:not(.rz-treenode-content-selected):hover {
    background-color: rgb(239, 239, 239);
    color: rgb(44, 44, 44);
}

.tree-category-box {
    padding: 10px 7px 10px 2px;
}

    .tree-category-box .rz-chkbox-box.rz-state-active {
        background-color: rgb(32, 136, 190);
        border: none;
        border-radius: 4px;
    }

    .tree-category-box .rz-treenode-content-selected {
        border-radius: 2px;
        color: rgb(44, 44, 44);
        background-color: rgb(209, 209, 209);
    }

    .tree-category-box .rz-treenode-label {
        margin-left: 3px;
    }

    .tree-category-box .rz-tree {
        width: 100%;
        font-family: var(--font-base);
        font-weight: 400;
    }

.search-content.fixed .search-row-main {
    width: 1109px;
    margin: auto;
    transform: none;
}

.title {
    font-size: 1.2em;
    font-weight: 400;
    color: rgb(59, 59, 59);
    margin: 0px 0px 20px 4px;
    text-align: left;
    font-family: var(--font-base);
}

.description {
    font-size: 0.9em;
    line-height: 1.7;
    color: rgb(61, 61, 61);
}

.search-content {
}

.search-row-main {
}

.post-event-body-box-icon-row .btn-warning {
    color: rgb(255, 193, 7) !important;
}

.post-event-body-box-icon-row input.form-control {
    height: auto;
    font-size: 12px;
    font-weight: 500;
    margin: 4px 0px;
}

.btn-warning:hover {
    color: rgb(33, 37, 41) !important;
}

@media screen and (max-width: 768px) {
    .question-post-row .btn.btn-success {
        margin: 4px 0px 0px;
    }
}

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

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

.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;
    }

.form-group .select-values input {
    margin-bottom: 0px;
}

.form-group .check-box-input span {
    font-size: 13px;
    margin: 2px 0 0 0px;
}

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

.select-values input:hover {
    box-shadow: rgba(0, 0, 0, 0.08) 2px 2px 2px;
}

.select-items.active .select-img {
    filter: brightness(4.5);
}

.select-items.active {
    background-color: rgb(59, 179, 189);
}

.select-items {
    max-width: 25%;
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 0px;
    cursor: pointer;
    border-right: 1px solid rgb(218, 223, 225);
}

    .select-items:hover .select-time-name, .select-items:hover .select-time {
        color: rgb(59, 179, 189);
    }

    .select-items:nth-child(-n+4) {
        border-bottom: 1px solid rgb(218, 223, 225);
    }

    .select-items:nth-child(4n) {
        border-right: none;
    }

    .select-items.active .select-time, .select-items.active .select-time-name {
        color: #ffffff;
    }

.time-select-content {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(218, 223, 225);
    border-radius: 4px;
}

.range-select .select-search > input {
    max-width: 100%;
}

.range-select .select-search {
    display: flex;
}

.select-img img {
    width: 17px;
    height: 17px;
}

.select-time {
    font-weight: 500;
    transition: color 0.3s ease 0s;
}

.time-select-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .time-select-section span, .week-select-section span {
        margin: 5px 0px;
        font-size: 0.82em;
        color: rgb(138, 149, 158);
        letter-spacing: 1px;
    }

.week-select-section span {
    margin-top: 15px;
}

.select-time-name {
    text-align: center;
    padding: 0px;
    font-size: 11px;
    font-weight: 600;
    color: rgb(174, 181, 188);
    transition: color 0.3s ease 0s;
}

.week-select-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.week-select-content {
    display: flex;
    border-radius: 4px;
    border: 1px solid rgb(218, 223, 225);
}

    .week-select-content > a {
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        padding: 8px;
        flex: 1 1 10px;
        border-right: 1px solid rgb(218, 223, 225);
        transition: color 0.3s ease 0s;
    }

        .week-select-content > a:hover {
            color: rgb(59, 179, 189);
        }

.selectlanguage {
    padding: 0px !important;
}

.search-box-footer {
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -15px;
    margin: auto;
}

.search-box-footer-dec {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

    .search-box-footer-dec p {
        padding-bottom: 27px;
        color: #ffffff;
        font-family: var(--font-base);
        font-weight: 600;
        font-size: 1.2em;
        text-shadow: rgb(69, 69, 69) 2px 2px 4px;
    }

    .search-box-footer-dec img {
        width: 270px;
    }

.feature-list {
    display: flex;
    margin: 40px 0px;
}

    .feature-list li span {
        color: rgb(116, 116, 116);
        text-align: left;
        line-height: 1.4;
        font-size: 0.8em;
    }

    .feature-list li {
        display: flex;
        align-items: center;
    }

    .feature-list img {
        object-fit: contain;
        height: 70px;
        width: 93px;
    }

.collapse-item {
    display: none;
    width: 96%;
}

.selector {
    position: relative;
    padding: 20px;
    width: 400px;
    color: rgb(126, 126, 126);
}

    .selector ul {
        position: relative;
        display: block;
        overflow: auto;
        min-width: 138px;
        max-height: 200px;
        background: #ffffff;
        list-style: none;
        white-space: inherit;
        padding-right: 17px;
        width: calc(100% + 17px);
    }

    .selector li {
        position: relative;
        padding: 3px 20px 3px 25px;
        cursor: pointer;
    }

        .selector li::before {
            position: absolute;
            left: 0px;
            top: 4px;
            display: inline-block;
            margin-right: 9px;
            width: 17px;
            height: 17px;
            background-color: rgb(244, 244, 244);
            border: 1px solid rgb(213, 213, 213);
            content: "";
        }

        .selector li[data-selected="1"]::before {
            border: 1px solid rgb(215, 215, 215);
            background-color: #ffffff;
        }

        .selector li[data-selected="1"]::after {
            position: absolute;
            left: 3px;
            top: 11px;
            display: inline-block;
            width: 4px;
            height: 10px;
            border-right: 2px solid;
            border-bottom: 2px solid;
            background: none;
            color: rgb(57, 201, 169);
            content: "";
            transform: rotate(40deg) translateY(-50%);
        }

        .selector li:hover {
            color: rgb(170, 170, 170);
        }

        .selector li .total {
            position: absolute;
            right: 0px;
            color: rgb(215, 215, 215);
        }

    .selector .price-slider {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        position: relative;
        padding-top: 17px;
    }

@media (min-width: 768px) {
    .selector .price-slider {
        padding-top: 8px;
    }
}

.selector .price-slider::before {
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: 0px;
    color: rgb(57, 201, 169);
    content: attr(data-currency);
    transform: translateY(-50%);
}

.selector #slider-range {
    width: 90%;
    margin-bottom: 30px;
    border: none;
    background: rgb(226, 247, 242);
    height: 3px;
    margin-left: 8px;
    margin-right: 8px;
}

@media (min-width: 768px) {
    .selector #slider-range {
        width: 100%;
    }
}

.selector .ui-slider-handle {
    border-radius: 50%;
    background-color: rgb(57, 201, 169);
    border: none;
    top: -14px;
    width: 28px;
    height: 28px;
    outline: none;
}

@media (min-width: 768px) {
    .selector .ui-slider-handle {
        top: -7px;
        width: 16px;
        height: 16px;
    }
}

.ql-formats.float-right > button i.fa-expand {
    transform: translateY(-5px);
}

.selector .ui-slider-range {
    background-color: rgb(215, 215, 215);
}

.selector .slider-price {
    position: relative;
    display: inline-block;
    padding: 5px 40px;
    width: 40%;
    background-color: rgb(226, 247, 242);
    line-height: 28px;
    text-align: center;
}

    .selector .slider-price::before {
        position: absolute;
        top: 50%;
        left: 13px;
        margin-top: 0px;
        color: rgb(57, 201, 169);
        content: attr(data-currency);
        transform: translateY(-50%);
    }

.selector .show-all {
    position: relative;
    padding-left: 25px;
    color: rgb(57, 201, 169);
    cursor: pointer;
    line-height: 28px;
}

    .selector .show-all::after, .selector .show-all::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 4px;
        margin-top: -1px;
        color: rgb(57, 201, 169);
        width: 10px;
        border-bottom: 1px solid;
    }

    .selector .show-all::after {
        transform: rotate(90deg);
    }

.selector.open ul {
    max-height: none;
}

.selector.open .show-all::after {
    display: none;
}

.teacher-buttons-control a.action-button {
    color: #ffffff;
    font-size: 0.9rem;
    padding: 10px;
    text-align: center;
    width: fit-content;
    display: inline-block;
    background: rgb(73, 68, 84);
    margin-right: 6px;
    border-radius: 30px;
    transition: opacity 0.3s ease 0s;
}

    .teacher-buttons-control a.action-button:hover {
        color: #ffffff;
        opacity: 0.9;
    }

.row-btn-item {
    display: flex;
    align-items: center;
}

.internal-content-page .internal-buttons-row {
    margin: 10px 0px 20px;
}

.internal-header-page > div > a {
    font-size: 1rem;
    padding: 12px 0px;
    color: rgb(128, 128, 128);
    font-family: var(--font-base);
    font-weight: 600;
}

.Profile-page-content {
    width: 100%;
    margin-top: 25px;
}

.mask-box, .mask-box-InternetSpeed {
    position: relative;
    overflow: hidden;
}

    .mask-box::after, .mask-box-InternetSpeed::after {
        inset: 0px;
        content: "";
        z-index: 44;
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(250, 187, 81, 0.99);
    }

    .mask-box-InternetSpeed > div.row {
        display: none
    }

.detail-user-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
}

.profile-avatar-overlay img {
    border: none;
    border-radius: 140px;
    overflow: hidden;
    width: 140px !important;
}

.user-image-edit {
    padding: 0px 30px;
}

.user-text-dec {
    padding: 10px 30px;
}

.user-name-profile {
    font-size: 1.7rem;
    font-weight: 800;
    padding: 22px 0px 0px;
    color: var(--primary);
}

.Profile-page-content .detail-user-box a {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgb(26, 35, 126) !important;
}

    .Profile-page-content .detail-user-box a:hover {
        text-decoration: underline !important;
    }

.row-item-detail li, .row-item-grade li {
    margin: 0px 10px 0px 0px;
    font-size: 0.95rem;
    color: #9b9b9b;
}

.row-item-detail, .row-item-grade {
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.school-info-container {
    margin-top: 10px;
    display: inline-block;
}

.result-tabs .about-user-box > span {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgb(92, 92, 92);
    padding: 12px 19px;
}

.result-tabs {
    font-family: var(--font-base);
    padding: 0px;
}

.frame.result-tabs > .row {
    width: 100%;
    margin: 0px;
}

.result-tabs .about-user-box {
    width: 100%;
}

.profile-tabs.horizontal-tabs {
    margin-top: -5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

    .profile-tabs.horizontal-tabs ul {
        display: flex;
        overflow: auto;
        width: 100%;
        padding: 5px 10px;
    }

    .profile-tabs.horizontal-tabs > ul {
        padding: 10px 0px;
        overflow: hidden;
    }

.modal .profile-tabs.horizontal-tabs > ul {
    width: fit-content
}

.horizontal-tabs.profile-tabs .big-title {
    align-items: center
}

    .horizontal-tabs.profile-tabs .big-title .assignment-main-title {
        margin: 0 8px;
    }

.show-detail {
    display: flex;
    flex-wrap: wrap;
}

    .show-detail .form-group {
        width: 50%;
    }

    .show-detail label, .show-detail span {
        width: 100%;
    }

    .show-detail label {
        margin-bottom: 5px;
        color: rgb(79, 79, 79) !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .show-detail span {
        min-height: 24px;
        display: inline-block;
        padding: 5px 0px;
    }

.profile-tabs {
    margin-bottom: 10px;
}

    .profile-tabs a.active {
        background-color: var(--rgba-primary-1);
        color: var(--primary) !important;
    }

    .profile-tabs a {
        width: 100%;
        border-radius: 7px;
        display: inline-block;
        padding: 10px 12px;
        font-size: 15px;
        margin-right: 3px;
        font-weight: 500;
        white-space: nowrap;
        color: rgb(88, 88, 88) !important;
    }

.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: var(--font-base);
    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;
}

.global-body.Profile-page .profile-tabs a {
    font-size: 14px;
}

.widgetCandidates {
    display: flex;
    font-size: 0.7rem;
}

.about-user-box .profile-tabs a.active {
}

.Profile-page-content > .row {
    margin-bottom: 10px;
}

.profile-avatar-overlay .remove-image {
    display: none;
}

.profile-avatar-overlay .item-upload > div {
    position: absolute;
    transition: all 0.3s ease 0s;
    opacity: 0;
    background: rgba(39, 39, 39, 0.61);
    top: 0px;
    right: 0px;
    height: 100%;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-overlay .item-upload {
    border-radius: 140px;
}

    .profile-avatar-overlay .item-upload i {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }

    .profile-avatar-overlay .item-upload span {
        position: relative;
        font-size: 1rem;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
    }

    .profile-avatar-overlay .item-upload:hover > div {
        pointer-events: none;
        cursor: default;
        opacity: 1;
    }

.profile-avatar-overlay .form-group {
    margin: 0px;
}

.profile-avatar-overlay .item-upload {
    min-height: 120px;
    border: none;
    overflow: hidden;
    object-fit: contain;
    width: 120px !important;
}

.about-item {
    padding: 15px;
}

.about-user-box.detail-box .feed-shared-body {
    padding: 0px;
}

.about-user-box.detail-box {
    display: inline-block;
    width: 100%;
}

.Profile-page-content .about-user-box {
    margin: 0;
}

.about-user-box, .tab-mini, .assessment-mini {
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05)
}

    .about-user-box > span, .tab-mini > span, .assessment-mini > span {
        font-size: 1.2rem;
        font-weight: 400;
        padding: 18px;
        font-family: var(--font-base);
        display: inline-block;
        width: 100%;
    }

    .about-user-box.post-box, .tab-mini.post-box, .assessment-mini.post-box {
        background: transparent;
    }

    .about-user-box.order-tab-box {
        box-shadow: none;
        background-color: transparent
    }

.Profile-page-content .tab-item:hover {
    text-decoration: none !important;
}

.assessment-mini .assessment-search-box-main .right-assessment-search .row {
    padding-left: 5px;
    padding-right: 5px;
}

    .assessment-mini .assessment-search-box-main .right-assessment-search .row > div {
        padding: 0px 7px;
    }

.assessment-mini .assessment-search-box-main > .form-group {
    flex-wrap: nowrap;
}

.about-item .title {
    margin: 0px 0px 10px;
    display: inline-block;
    font-family: Poppins;
    font-weight: 500;
    font-size: 14px;
    color: rgb(148, 148, 148);
}

.about-item {
    position: relative;
    border-top: 1px solid rgb(236, 236, 236);
}

.reset-password .about-item, .reset-password .feed-shared-body {
    padding: 0px;
}

.reset-password .about-item {
    border: 0px;
}

.Profile-page-content a.edit-item, .edit-item {
    position: absolute;
    right: 14px;
    top: 14px;
}

.about-user-box, .tab-mini, .tab-processes-agency, .assessment-mini {
    display: none;
}

    .about-user-box.active, .tab-mini.active, .tab-processes-agency, .assessment-mini.active {
        box-shadow: none;
        display: block;
    }

.Institution-box .frame {
    box-shadow: none
}

.Institution-box .editable-input .edit-title {
    top: 5px;
}

.about-item p {
    font-size: 0.9rem;
    margin: 2px 0px 10px;
    color: rgb(131, 131, 131);
}

.tab-mini .about-item .feed-shared-body, .about-user-box .about-item .feed-shared-body, .assessment-mini .about-item .feed-shared-body {
    padding: 10px 0px;
}

.about-item .form-group .border-input > div {
    width: 100%;
}

.about-item .form-group {
    font-size: 14px;
    color: rgb(148, 148, 148);
    margin: 0px 0px 11px;
    font-weight: 600;
}

    .about-item .form-group.button-form {
        margin: 7px 0px 5px;
        display: inline-block;
    }

.about-item .feed-shared-body-half .form-group {
    width: calc(50% - 6px);
    margin: 7px 3px;
}

.description-text {
    font-size: 0.8rem;
}

.feed-shared-body-half {
    display: flex;
    flex-wrap: wrap;
}

.form-group-detail {
}

.rz-html-editor-colorpicker .rz-colorpicker {
    border: 0px !important;
}

.blazored-toast {
    width: auto;
    border-radius: 0.25rem;
    display: grid;
    top: 40px;
    margin: auto;
    right: 0px;
    z-index: 9999;
}

.blazored-toast-heading, .blazored-toast-close, .blazored-toast-progressbar {
    display: none;
}

.blazored-toast {
    padding: 8px;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 10px;
    left: 0px;
    line-height: 1.3;
    max-width: 450px;
    display: inline-table;
    position: fixed !important;
}

.blazored-toast-body p {
    font-size: 0.84rem;
    font-family: var(--font-base);
    text-align: center;
    font-weight: 500;
}

.blazored-toast-success {
    border-color: var(--border-color-toast-success);
    background: var(--bg-color-toast-success);
}

    .blazored-toast-success .blazored-toast-body p {
        color: var(--color-toast-success);
    }

.blazored-toast-info {
    border-color: var(--border-color-toast-info);
    background: var(--bg-color-toast-info);
}

    .blazored-toast-info .blazored-toast-body p {
        color: var(--color-toast-info);
    }

.blazored-toast-warning {
    border-color: var(--border-color-toast-warning);
    background: var(--bg-color-toast-warning);
}

    .blazored-toast-warning .blazored-toast-body p {
        color: var(--color-toast-warning);
    }

.blazored-toast-danger {
    border-color: var(--border-color-toast-danger);
    background: var(--bg-color-toast-danger);
}

    .blazored-toast-danger .blazored-toast-body p {
        color: var(--color-toast-danger);
    }

button:focus {
    outline: none;
}

.feed-product-detail button::placeholder, .buy-btn::placeholder {
    color: rgb(173, 170, 230);
}

.address-box.address-selected .card-body {
    position: relative;
    z-index: 1;
}

.address-box.address-selected .address-selected-icon {
    position: absolute;
    top: 5px;
    left: 50%;
    font-size: 5rem;
    transform: translateX(-50%);
    color: rgba(221, 221, 221, 0.5);
    z-index: 0;
}

.feed-product-total {
    background: rgba(92, 218, 110, 0.12);
    width: auto;
    color: rgb(92, 218, 110);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
}

    .feed-product-total span {
        font-weight: 500;
        color: rgb(92, 218, 110);
    }

.address-selection-box .address-box {
    position: relative;
    background: linear-gradient(145deg, #fff, #fff);
    box-shadow: rgb(217, 217, 217) 5px 4px 16px, rgb(236, 236, 236) 0px 1px 6px;
    margin-bottom: 11px;
    border-radius: 8px;
}

.address-selection-box .address-box-row:hover .address-tools-btn-box {
    opacity: 1;
    z-index: 2;
}

.address-selection-box {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-between;
}

    .address-selection-box .address-box {
        min-height: 128px;
    }

    .address-selection-box .address-box-row, .about-user-box .address-box-row {
        width: 49%;
    }

.address-box-row {
    position: relative;
}

.address-tools-btn-box {
    position: absolute;
    opacity: 0;
    top: 17px;
    right: 9px;
    transition: opacity 0.3s ease 0s;
}

.input-label-flex .form-control:hover, .input-label-flex .form-control:focus {
    border-color: rgb(206, 212, 218) !important;
}

.input-label-flex .form-control {
    padding: 3px 46px 3px 8px;
    margin: 10px 0px 5px 5px;
    width: 100%;
}

.input-label-flex span {
    font-size: 0.7rem;
    position: absolute;
    right: -5px;
    top: 0px;
    background-color: rgb(206, 212, 218);
    padding: 8px;
    height: 28px;
    color: rgb(123, 132, 141);
    margin-left: 5px;
    border-radius: 0px 4px 4px 0px;
}

.name-file {
    font-size: 0.8rem;
    color: rgb(102, 102, 102) !important;
}

    .name-file ~ i {
        display: none;
    }

.item-upload-auto-size {
    padding: 10px;
    width: fit-content !important;
    min-width: 85px !important;
}

.input-label-flex {
    position: relative;
}

.address-box .card-text {
    color: rgb(160, 160, 160);
    font-weight: 400;
    font-size: 0.8rem;
    font-family: var(--font-base);
}

.address-tools-btn-box > a {
    margin-left: 5px;
}

.address-box .card-title {
    width: calc(100% - 55px);
}

.add-address {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

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

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

.about-user-box .address-selection-box {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-between;
}

.about-user-box .address-box {
    width: 100%;
}

.order-list {
    padding: 20px 0;
}

.card-order-body:not(.active) {
    display: none;
}

.card-order .card-order-info, .card-order .card-order-info h3 {
    font-size: 0.87rem;
}

.card-order {
    background-color: rgb(250, 250, 250);
    margin-bottom: 10px;
    border-radius: 7px;
    padding: 15px 80px 15px 15px;
    font-size: 0.87rem;
    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05);
    position: relative;
}

.card-order-header .order-time {
    min-width: 23%;
    display: flex;
    font-weight: 500;
}

.card-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acc-item {
    position: absolute;
    right: 10px;
}

.order-section {
    display: inline-block;
    padding: 25px;
    background-color: rgb(244, 244, 244);
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
}

.order-item-img {
    position: relative;
}

.icon-cargo {
    color: rgb(156, 156, 156);
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.order-item-box {
    text-align: left;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

    .order-item-box h5 {
        width: 100%;
        font-size: 0.95em;
        font-weight: 500;
        line-height: 1.4;
        display: inline-block;
        color: rgb(97, 97, 97);
    }

    .order-item-box .order-item-price {
        width: calc(100% - 108px);
    }

.order-item-price .amount, .order-item-price .unit-price, .order-item-price .discount-price, .order-item-price .total-price {
    font-size: 0.95em;
    color: rgb(97, 97, 97);
    font-weight: 500;
    padding: 8px 4px;
    margin: 0px;
}

.order-item-box .amount {
    display: flex;
    align-items: center;
}

.order-item-price .amount span, .order-item-price .unit-price span {
    font-size: 1.1em;
}

.total-price {
    width: fit-content;
    border-radius: 5px;
    color: var(--secondary) !important;
    background-color: rgb(234, 240, 238) !important;
    padding: 10px !important;
    font-size: 1rem !important;
}

.quantity span, .order-item-price .unitprice span, .order-item-price .discount-price span {
    background: var(--color-bg-secondary);
    padding: 0px 5px;
    border-radius: 5px;
    color: var(--color-secondary);
}

.order-item-price .unitprice span {
    background: var(--rgba-primary-1);
    color: var(--primary);
}

.order-item-price .discount-price span {
    background-color: var(--color-bg-warning);
    color: var(--color-warning);
}

.quantity {
    margin-right: 10px;
}

.acc-item {
    position: absolute;
    width: 30px;
    display: flex;
    height: 30px;
    font-size: 27px;
    justify-content: center;
    background-color: rgb(230, 230, 230);
    right: 25px;
    border-radius: 30px;
    align-items: center;
    box-shadow: rgba(64, 64, 64, 0.01) 1px 1px 4px;
    transition: box-shadow 0s ease 0s, transform 0.3s ease 0s;
}

.card-order-header.active .acc-item {
    transform: rotate(180deg);
}

.acc-item:hover {
    box-shadow: rgba(64, 64, 64, 0.1) 1px 1px 4px;
}

.card-order-info h3 {
    font-weight: 800;
    color: var(--secondary);
    font-size: 16px !important;
    margin-bottom: 5px;
}

.card-order-info {
    display: flex;
    flex-direction: column-reverse;
    color: rgb(140, 140, 140);
    font-size: 0.8em;
    max-width: 25%;
    flex: 0 0 25%;
    font-weight: 500;
}

.success-order {
    color: rgb(124, 188, 119);
}

.reject-order {
    color: rgb(249, 138, 137);
}

.none-order {
    color: rgb(37, 169, 211);
}

.pending-order {
    color: rgb(255, 201, 55);
}

.status-order > div span {
    color: rgb(111, 111, 111);
}

.status-order > div i {
    margin: 0px 5px;
    font-size: 22px;
}

.status-order > div {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.order-item-box h5 a {
    color: rgb(97, 97, 97);
    font-weight: 600;
}

.order-item-box h5 {
    width: 100%;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.4;
    display: inline-block;
    color: rgb(60, 60, 60);
}

.order-item-box .order-item-price {
    width: calc(100% - 108px);
}

.order-item-price .amount, .order-item-price .unit-price {
    font-size: 0.9em;
    margin-top: 5px;
    color: rgb(97, 97, 97);
}

.order-item-price .total {
    font-size: 1em;
    color: rgb(97, 97, 97);
    font-weight: 700;
    margin-top: 10px;
}

    .order-item-price .total span {
        font-size: 1.2em;
        color: rgb(69, 171, 61);
    }

.card-order-body {
    padding-top: 30px;
}

.container-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px 40px;
}

    .container-header > div {
        display: flex;
        align-items: center;
    }

.store-admin-content h2 {
    padding-bottom: 10px;
    margin: 15px 0px;
    font-size: 1.4em;
}

.store-basket-box {
    display: flex;
    background: rgb(243, 242, 239);
    padding: 25px 0px;
    align-items: center;
    border-radius: 5px;
}

.basket-items {
    margin-bottom: 10px;
}

.manage-order .title-page + span {
    font-size: 0.95em;
    margin-bottom: 0px;
    margin-left: 15px;
    font-weight: 500;
    color: rgb(123, 123, 123);
}

.store-basket-des h2 {
    font-size: 0.9rem;
    color: rgb(134, 131, 131);
    font-family: var(--font-base);
}

.profile-card {
    padding-top: 40px;
}

    .profile-card .profile-card-img {
        text-align: center;
        margin-bottom: 10px;
    }

        .profile-card .profile-card-img img {
            width: 120px;
            height: 120px;
            border-radius: 120px;
            object-fit: cover;
            border: 3px solid rgb(212, 212, 212);
        }

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

.profile-card .about-item .form-group label.label-text {
    background-color: rgb(247, 247, 247);
    border: 1px solid rgb(235, 235, 235);
}

.profile-card .about-item p {
    margin: 3px 0px 12px;
    color: rgb(81, 126, 169);
    background: rgb(216, 236, 254);
    width: auto;
    padding: 5px 12px;
    line-height: 1;
    display: inline-block;
    font-family: var(--font-base);
    font-weight: 400;
    border-radius: 23px;
    font-size: 0.75rem;
}

.profile-card .about-item .form-group {
    font-family: var(--font-base);
    font-size: 0.85rem;
    color: rgb(136, 136, 136);
    margin: 0px 3px 11px;
    width: 100%;
    display: inline-block;
}

.profile-card-img {
    position: relative;
}

    .profile-card-img div {
        position: relative;
        width: 123px;
        margin: auto;
    }

        .profile-card-img div span {
            position: absolute;
            left: 10px;
            background: rgb(139, 189, 231);
            border-radius: 20px;
            width: 25px;
            height: 25px;
            display: flex;
            top: 0px;
            font-size: 0.7rem;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            box-shadow: #fff 0px 0px 0px 4px;
        }

        .profile-card-img div::after {
            content: "";
            position: absolute;
            border-width: 0px 5px 5px 0px;
            border-right-style: solid;
            border-bottom-style: solid;
            border-right-color: rgb(109, 180, 238);
            border-bottom-color: rgb(109, 180, 238);
            border-image: initial;
            width: 125px;
            inset: 0px 0px 6px;
            height: 125px;
            margin: auto;
            border-radius: 120px;
            border-left-style: initial;
            border-left-color: initial;
            border-top-style: initial;
            border-top-color: initial;
        }

.mail-confirmation {
    padding: 52px 25px 25px;
    height: 99vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .mail-confirmation i {
        font-size: 4rem;
    }

    .mail-confirmation h1 {
        font-size: 1.2rem;
        font-family: var(--font-base);
        color: rgb(126, 134, 141);
        margin: 10px 0px 0px;
    }

.form-group > i, .form-group > .address-delete-btn {
    position: absolute;
    right: 10px;
    bottom: 11px;
}

.form-group > .form-control + .address-delete-btn {
    bottom: 0.01rem;
    right: 0px;
    background: var(--primary);
    padding: 8px 15px;
    border-radius: 0 9px 9px 0;
}

    .form-group > .form-control + .address-delete-btn .text-info {
        color: #fff !important
    }

.form-group > .auto-width {
    width: auto !important;
}

    .form-group > .auto-width + .address-delete-btn {
        bottom: 8px;
        right: auto;
        margin-left: 15px;
    }

.filter-box-asssessment.assessment-search-box-main > div {
    display: flex;
    align-items: center;
}

.filter-box-asssessment.assessment-search-box-main {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between !important;
}

.comfirmation-email, .confirmation-btn, .confirmed-btn {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 100%;
    font-size: 0.7rem;
    line-height: normal;
    z-index: 2;
    color: rgb(144, 188, 214);
    transition: opacity 0.3s ease 0s;
}

    .comfirmation-email:hover {
        opacity: 0.9;
    }

.confirmation-btn, .confirmed-btn {
    top: 33px;
    right: 5px;
    padding: 7px;
    border-radius: 5px;
    color: #fff !important;
}

.confirmation-btn {
    background-color: rgb(129, 151, 178);
}

.confirmed-btn {
    background-color: rgb(138, 209, 148);
}

.del {
    text-decoration: line-through;
}

.question-generated {
    padding: 25px;
}

    .question-generated .form-group {
        display: flex;
    }

.label-question-generated {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    white-space: nowrap;
    margin: 0px 7px 0px 14px;
}

.question-generated input[type="text"]:focus {
    outline: none;
}

.question-generated input[type="text"] {
    border-top: none;
    border-right: none;
    border-left: none;
    border-image: initial;
    border-bottom: 1px dashed rgb(221, 221, 221);
    border-radius: 0px;
    padding: 2px;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.login-box-bg header {
    background-color: transparent;
    box-shadow: none;
    position: relative;
    width: 800px;
    padding: 25px 0px;
    height: auto;
    margin: auto;
}

.skills-header {
    height: 86px;
    width: 100vw;
}

.section {
    margin: 0px auto;
}

.skills-main-menu {
    direction: rtl;
    line-height: 86px;
}

.main-menu > ul > li {
    width: 100px;
    text-align: center;
}

.main-menu a {
    font-family: Montserrat;
    color: #ffffff;
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
}

    .main-menu a:hover {
        color: rgb(70, 70, 70);
        transition: var(--trans,color .4s ease 0s);
    }

.login-section {
    font-family: Montserrat;
    display: flex;
    background-color: #ffffff;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    min-width: 750px;
}

.small-banner a::after {
    content: "";
    position: absolute;
    inset: 0px;
    background-color: rgba(0, 28, 132, 0.29);
}

.small-banner a {
    width: 100%;
    position: relative;
    height: 100%;
    display: inline-block;
}

.section {
    width: 750px;
    margin: auto;
}

.login-form {
    height: auto;
}

.small-banner {
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    padding: 50px;
}

.login-inpu-box {
    width: 100%;
    height: 35px;
    margin-bottom: 15px;
}

.login-input::placeholder {
    font-weight: 500;
    font-family: Montserrat;
    font-size: 0.85em !important;
}

.login-form h4 {
    font-weight: 800;
    font-family: Montserrat;
    text-align: center;
    padding: 14px;
    color: rgb(43, 95, 144);
    font-size: 1.3rem;
    margin-bottom: 40px;
}

.login-box-main {
    margin-top: 80px;
}

.login-input {
    padding: 5px 3px;
    width: 100%;
    height: 35px;
    border-width: 0px 0px 2px;
    border-top-style: initial;
    border-right-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-left-color: initial;
    border-image: initial;
    outline: none;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 230, 230);
}

    .login-input::placeholder {
        font-size: 18px;
        color: rgb(153, 153, 153);
    }

.login-btn-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-text {
    color: rgb(174, 174, 174);
    font-family: Montserrat;
    font-size: 0.65rem;
    margin: 45px 10px 15px;
}

.login-btn-box {
    flex: 1 1 auto;
    text-align: right;
}

.btn-login {
    background: rgb(88, 133, 175);
    border: 0px;
    outline: none;
    border-radius: 5px;
    color: #ffffff;
    padding: 12px 24px;
    letter-spacing: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    transition: opacity 0.3s ease 0s;
    box-shadow: rgb(49, 95, 138) 0px 1px 3px;
}

    .btn-login:hover {
        opacity: 0.8;
    }

.banner-imgage {
    width: 440px;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

header .section {
    width: 100%;
}

.section-footer {
    margin-top: 40px;
    color: #ffffff;
}

    .section-footer > p:last-child {
        margin-bottom: 15px;
    }

    .section-footer > p:first-child {
        border-top: 1px solid rgba(59, 72, 86, 0.1);
        width: fit-content;
        padding-top: 9px;
        margin-bottom: 15px;
    }

.bold {
    font-weight: bold;
}

@media screen and (max-width: 992px) {
    .section, .login-box-bg header {
        width: 100%;
        min-width: auto;
    }

    .post-view-item-row .small-event-item {
        position: relative;
    }

    .banner-imgage {
        width: 390px;
    }

    .form-group.form-row-group {
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .search-item, .select-search {
        background-color: transparent;
    }

    .feed-shared-body.feed-pd .row > div .form-group {
        flex-wrap: nowrap
    }

    a.send-message-btn i {
        display: block;
    }

    a.send-message-btn p {
        display: none;
    }

    .login-section {
        flex-direction: column;
        margin-top: 50px;
    }

    .login-section, .login-box-main {
        margin: 0px;
    }

    .main-menu > ul > li {
        width: fit-content;
    }

    .small-banner a {
        width: 100%;
        display: none;
    }

    .banner-imgage {
        width: 100%;
    }

    .global-nav-bar-gold .global-nav-bar-icon {
        margin-top: 0px !important;
    }
}

.assessment-sutdent-dec {
    display: inline-block;
    height: 100%;
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    width: 100%;
}

.assessment-student-img {
    height: 100%;
    padding-bottom: 15px;
    text-align: center;
}

    .assessment-student-img img {
        width: 100%;
        margin: auto auto 15px;
        height: 100%;
        max-width: 120px;
        object-fit: contain;
        border-radius: 15px !important;
        background-color: #fff !important;
    }

.ol-package .btn-info {
    color: rgb(17, 122, 139);
}

    .ol-package .btn-info:hover {
        background-color: rgb(17, 122, 139);
        color: #ffffff;
    }

.ol-package {
    display: flex;
    padding: 10px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0px;
}

    .ol-package .btn {
    }

        .ol-package .btn:hover {
            opacity: 1 !important;
        }

.assessment-tab-main {
    display: flex;
}

.assessment-tab {
    background-color: rgb(61, 175, 197);
    border-radius: 3px;
    margin-right: 5px;
    cursor: pointer;
    padding: 10px;
    font-size: 0.9rem;
    transition: opacity 0.3s ease 0s;
}

    .assessment-tab:hover {
        opacity: 0.8;
    }

.assessment-tab-content.active {
    display: block;
}

.assessment-tab-content {
    display: none;
}

    .assessment-tab-content .check-row label {
        font-family: var(--font-base);
        margin-left: 5px;
        font-weight: 400;
        font-size: 0.8rem;
    }

    .assessment-tab-content .check-filter-row {
        margin-top: 18px;
    }

        .assessment-tab-content .check-filter-row .check-row label {
            margin: 1px 15px 0px 1px;
        }

        .assessment-tab-content .check-filter-row .check-row input[type="checkbox"] {
            vertical-align: middle;
        }

    .assessment-tab-content > .check-row {
        align-items: center;
        display: flex;
    }

.pending-assessment {
    padding: 13px 0px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 20px;
}

.white-box {
    padding: 20px;
    background-color: #ffffff;
    font-family: var(--font-base);
}

.assessment-student-detail {
    display: flex;
    justify-content: space-between;
}

.deadline {
    font-size: 0.8rem;
    color: rgb(112, 112, 112);
    font-weight: 500;
}

    .deadline strong {
        color: rgb(117, 203, 168);
        font-weight: 500;
    }

.read-before {
    font-size: 0.8rem;
    font-weight: 500;
}

.assessment-sutdent-dec h4 {
    font-size: 0.9rem;
    font-weight: 600;
}

.start-test {
    padding: 10px 20px;
    border-radius: 35px;
    background-color: rgb(186, 218, 85);
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 25px 0px;
    font-family: var(--font-base);
    transition: opacity 0.3s ease 0s;
    color: #fff !important;
}

    .start-test:hover {
        opacity: 0.8;
    }

.feed-shared-body-text .start-test {
    margin: 0px;
    line-height: normal;
    padding: 7px 12px;
    border-radius: 15px;
    font-family: "Open Sans";
    font-size: 0.8rem;
    font-weight: 500;
}

.assessment-sutdent-dec p {
    line-height: 1.7;
    font-size: 0.7rem;
}

.assessment-sutdent-dec h4 {
    margin-bottom: 10px;
}

    .assessment-sutdent-dec h4.assessment-sutdent-dec-title {
        margin-bottom: 20px;
    }

.assessment-student-page .native-speaker h5, .assessment-student-page .event-items h5 {
    font-size: 1.1rem;
    text-align: center;
}

.assessment-student .custom-table .table-bordered {
    border: none !important;
}

.assessment-student .custom-table tbody td {
    padding: 15px;
}

.assessment-student .custom-table thead th {
    padding: 15px;
    background-color: var(--color-secondary);
}

.item-assessment-student ul {
    display: flex;
    border: 2px solid rgb(140, 207, 221);
    padding: 10px;
}

    .item-assessment-student ul li {
        background-color: rgb(140, 207, 221);
        min-height: 200px;
        width: 100%;
        cursor: pointer;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #ffffff;
        font-size: 0.75rem;
        border: 1px solid rgb(140, 207, 221);
        transition: all 0.3s ease 0s;
        padding: 15px;
        line-height: 1.3;
    }

        .item-assessment-student ul li span {
            color: rgb(228, 228, 228);
        }

        .item-assessment-student ul li label {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .item-assessment-student ul li:hover span {
            color: rgb(221, 221, 221);
        }

        .item-assessment-student ul li:hover {
            background-color: #ffffff;
            color: rgb(0, 0, 0);
            border-color: rgb(0, 0, 0);
        }

.item-assessment-student {
    text-align: center;
    padding: 60px 60px 10px;
}

.assessment-student-owl, .assessment-student-owl .owl-stage-outer {
    position: relative;
}

    .assessment-student-owl .owl-stage-outer {
    }

.item-assessment-student h5 {
    padding: 0px 0px 20px;
    text-align: center;
    font-weight: 700;
}

.assessment-student-owl .owl-nav {
    display: flex!important;
    justify-content: space-between;
}

.assessment-student-owl.owl-carousel .owl-nav button.owl-prev, .assessment-student-owl.owl-carousel .owl-nav button.owl-next {
    top: 44%;
    transform: translateY(-50%);
    z-index: 2;
    position: absolute;
    background-color: rgb(227, 230, 252) !important;
    padding: 6px 10px !important;
    color: #fff !important;
}

.assessment-student-owl.owl-carousel.duty-flow .owl-nav button.owl-prev, .assessment-student-owl.owl-carousel.duty-flow .owl-nav button.owl-next {
    background-color: var(--color-secondary) !important;
}

.assessment-tab.active {
    background-color: var(--color-secondary);
    color: #fff !important;
}

.assessment-student-page-tab .assessment-badge {
    right: 0px;
    background-color: rgb(243, 242, 239);
    color: rgb(118, 119, 120);
    font-weight: 700;
    position: relative;
    font-family: var(--font-panel);
    margin-left: 5px;
}

.assessment-student-page-tab .assessment-tab {
    display: flex;
    align-items: center;
    position: relative;
}

    .assessment-student-page-tab .assessment-tab.active {
    }

.assessment-btn-list {
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

    .assessment-btn-list a {
        color: rgb(198, 198, 198);
        margin: 0px 12px 0px 0px;
        transition: color 0.3s ease 0s;
    }

        .assessment-btn-list a:hover {
            color: rgb(155, 154, 154);
        }

.white-box .chart {
    padding: 30px 0px;
    max-width: 100%;
}

.width-60 {
    min-width: 60px;
}

select.mini-input-text {
    padding: 0px;
    font-size: 0.7rem;
    text-align: left;
    margin-left: 0px !important;
    max-width: fit-content !important;
}

.mini-input-text {
    margin-left: 6px !important;
    max-width: 65px !important;
    flex: 0 0 65px!important;
}

.career-setting-box .col-12.col-md-12.align-items-center {
    padding: 15px 0px;
}

.mini-input-table {
    padding: 0px 6px;
    min-height: auto;
    width: 50px;
    font-size: 0.7rem;
    height: 25px;
}

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

.table-design table {
    border-spacing: 0px 10px;
    background-color: rgb(241, 241, 241) !important;
}

.table-design .table-striped tbody tr {
    box-shadow: rgb(207, 207, 207) 1px 1px 2px;
    border-radius: 10px;
    margin-bottom: 10px !important;
    background: #fff !important;
}

    .table-design .table-striped tbody tr:nth-of-type(2n+1) {
        background-color: transparent;
    }

.table-design td, .table-desgin th {
    vertical-align: middle;
    text-align: center;
}

.table-bordered tr > td:first-child {
}

.table-design table, .table-design .table-bordered thead th {
    border: none;
    font-family: Montserrat;
    font-size: 0.7rem;
    font-weight: 500;
    border-collapse: separate;
    border-spacing: 0px 8px;
    border-radius: 7px;
    text-align: center;
}

.table-design thead th {
    color: rgb(162, 162, 162);
}

.table-design .pagination .page-link {
    margin-right: 10px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-family: Montserrat;
    font-weight: 500;
    background: rgb(241, 241, 241);
    border: none;
}

.table-design .table-primary, .table-design .table-primary > td, .table-design .table-primary > th {
    background-color: rgb(209, 209, 209);
}

.table-design .form-group {
    font-size: 0.7rem;
    font-family: Montserrat;
    color: rgb(193, 190, 190);
    font-weight: 500;
}

.table-design .page-item.disabled .page-link {
    background: rgb(241, 241, 241);
    color: rgb(193, 190, 190);
}

.table-design td {
    border-style: solid none;
    padding: 10px;
}

.table-design table td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.table-design table td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.agreement-text {
    max-height: 400px;
    overflow: auto;
    line-height: 1.7;
    text-align: justify;
    font-size: 0.85rem;
    padding: 10px 50px;
    margin-bottom: 25px;
    color: rgb(118, 118, 118);
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .video-call-box {
        position: relative;
        padding-top: 25px;
        height: 100vh;
    }

    .global-main.global-video {
        min-height: auto;
        margin-top: 10px;
    }
}

@media screen and (max-width: 992px) {
    .paint-box {
        display: none !important;
    }
}

.reply-row {
    border-bottom: 1px solid rgb(234, 234, 234);
    padding: 13px 0px;
    font-size: 0.9rem;
    font-family: var(--font-base);
}

.reply-title {
    position: relative;
    font-weight: 600;
    display: flex;
    align-items: center;
}

    .reply-title:hover .replay-actions {
        display: flex;
    }

.reply-row-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

    .reply-row-item > div:first-child {
        width: 80%;
        justify-content: space-between
    }

        .reply-row-item > div:first-child > div {
            margin-right: 200px;
            display: flex;
        }

.reply-title-text p, .reply-dec p, .reply-date p {
    font-weight: 500;
    color: rgb(126, 126, 126);
    font-size: 0.9rem;
}

.reply-dec p {
    font-weight: 500;
    font-size: 0.8rem;
}

.reply-date p {
    font-size: 10px;
    white-space: nowrap;
    margin-left: 4px !important;
}

.reply-back {
    font-size: 1.4rem;
    margin-right: 15px;
    color: rgb(162, 162, 162) !important;
}

.reply-box-header {
    display: flex;
    align-items: center;
    padding: 10px 0px 15px 5px;
}

    .reply-box-header span {
        font-size: 0.95rem;
        font-family: "Open Sans";
        font-weight: 700;
        color: rgb(135, 134, 134);
    }

.reply-attachments {
    color: rgb(181, 181, 181);
    width: 28px;
    flex: 0 0 28px;
    font-size: 1rem;
}

    .reply-attachments a {
        color: rgb(102, 102, 102) !important;
    }

.reply-dec {
    max-width: calc(100% - 205px);
    margin-left: 20px;
    border: 1px solid #e6e6e6;
    box-shadow: 1px 1px 5px #eaeaea;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}

    .reply-date p, .reply-dec p, .reply-title-text p {
        margin: 1px 15px;
    }

.reply-title-text {
    min-width: 150px;
    flex: 0 0 150px;
}

.reply-icon {
    flex: 0 0 12px;
}

.reply-title-text p, .reply-dec p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    line-height: 1.2;
}

.reply-row-item > div {
    width: 20%;
    display: flex;
    align-items: center;
}

.replay-actions {
    position: absolute;
    right: 10px;
    top: -5px;
    display: none;
}

.reply-icon img {
    width: 12px;
}

.reply-subject {
    background: rgb(242, 242, 242);
    font-weight: 600;
    margin: 0px;
    font-size: 0.8rem;
    padding: 16px 9px;
    border-radius: 10px 10px 0px 0px;
}

.replay-action-btn {
    margin-left: 4px;
    padding: 5px;
}

.reply-content {
    background: rgb(242, 242, 242);
    padding: 9px;
    margin-top: 2px;
    border-radius: 0px 0px 10px 10px;
}

    .reply-content p {
        font-size: 0.78rem;
        font-weight: 500;
        margin-top: 0px;
        line-height: 1.5;
        color: rgb(99, 99, 99);
        font-family: var(--font-base);
    }

.reply-title img {
    margin-right: 10px;
    width: 20px;
    object-fit: contain;
}

.replay-actions .btn-danger {
    background-color: #fff !important;
    color: rgb(220, 53, 69) !important;
    border-color: rgb(220, 53, 69) !important;
}

.replay-actions .btn-primary {
    background-color: #fff !important;
    color: rgb(0, 119, 181) !important;
    border-color: rgb(0, 119, 181) !important;
}

.reply-title h2 {
    width: 100%;
}

.collapse-item {
    display: none;
    margin-right: 41px;
    padding: 14px 0px;
    margin-top: 10px;
    border-radius: 5px;
}

.collapse-row > .reply-row:last-child .reply-collapse {
    display: block;
}

.scrolls {
    padding: 20px;
}

.section-box-content .section-sortable.ui-sortable .show {
    position: relative;
    z-index: 9;
}

.question-exm strong {
    color: rgb(57, 201, 169);
}

.question-exm span {
    color: rgb(0, 119, 181);
}

.counter-warning, .counter-danger {
    display: flex;
    width: 45px;
    height: 45px;
    background: rgb(240, 199, 127);
    color: rgb(255, 249, 239);
    margin: 0px auto;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-family: var(--font-panel);
    border-radius: 50px;
    font-weight: 700;
}

.pulse-counter .counter-danger.pulse::before, .pulse-counter .counter-danger.pulse::after, .counter-danger {
    background-image: initial;
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(221, 221, 221) !important;
}

.record-area {
    display: flex;
    width: fit-content;
}

.pulse-counter .pulse {
    position: relative;
}

.record-area .pulse-counter.message-warning, .record-area .pulse-counter {
    height: 90px;
    position: relative;
    display: flex;
    margin: auto;
    flex-direction: column-reverse;
    width: fit-content !important;
}

    .record-area .pulse-counter.message-warning span {
        font-size: 0.8rem;
        color: rgb(106, 106, 106);
        transform: translateY(-50%);
        font-weight: 600;
        margin-bottom: 7px;
        margin-top: 13px;
    }

.record-area .pulse {
    height: 30px;
    width: 30px;
    position: relative;
    left: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 50%;
    place-items: center;
    font-size: 0.9rem;
    z-index: 1;
    margin: 5px;
    color: rgb(81, 81, 81) !important;
}

    .record-area .pulse::before, .record-area .pulse::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgb(252, 252, 252);
        border-radius: 50%;
        z-index: -1;
        opacity: 0.7;
    }

.record-area .pulse-counter .pulse::before, .record-area .pulse-counter .pulse::after {
    background-color: rgb(240, 199, 127);
}

.record-area .pulse::before {
    animation: 2s ease-out 0s infinite normal none running pulse;
}

.record-area .pulse::after {
    animation: 2s ease-out 1s infinite normal none running pulse;
}

.record-area .stop::before, .record-area .stop::after {
    animation: auto ease 0s 1 normal none running none;
}

@keyframes pulse {
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

:root {
    --white: #ffffff;
    --black: #221f1f;
    --lightpurple: #9e91f2;
    --darkgray: #1e1f26;
}

.trigger-menu-wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    padding: 20px;
    z-index: 2;
    background: var(--lightpurple);
    transition: transform 0.4s ease 0s;
}

.page-header .trigger-menu {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: var(--white);
    letter-spacing: 0.2em;
}

    .page-header .trigger-menu svg {
        fill: var(--white);
        margin-right: 8px;
        transition: transform 0.3s ease 0s;
    }

.page-header .menu {
    position: fixed;
    inset: 0px;
    display: none;
    text-align: center;
    padding: 15vh 0px 5vh;
    overflow: auto;
    z-index: 1;
    background: var(--lightpurple);
}

    .page-header .menu a {
        font-size: 3rem;
    }

.page-header .sub-menu a {
    font-size: 1.5rem;
}

.page-main section {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

    .page-main section::before {
        content: "";
        position: absolute;
        inset: 0px;
        background: rgba(0, 0, 0, 0.25);
    }

@media screen and (max-width: 768px) {
    .scroll-down #header {
        transform: translate3d(0px, -131%, 0px)
    }

    .reply-row-item {
        flex-direction: column
    }

        .reply-row-item > div:first-child {
            width: 100%
        }

            .reply-row-item > div:first-child > div {
                margin-right: 0;
                display: flex;
            }

    .collapse-row > .reply-row:last-child .reply-collapse {
        display: block;
        overflow: auto;
    }

    .reply-dec {
        overflow: auto;
        max-width: 100%
    }

    .center-div-img {
        max-width: 195px;
        overflow: auto !important;
        height: 35px !important;
        min-width: 100px;
    }

    .user-row-icons {
        display: flex;
        margin-top: 0px;
    }

    .center-div-img {
        margin-top: 2px;
        margin-bottom: -7px;
    }

    .scroll-down .footer-mobile .global-nav-primary-items {
        transform: translate3d(0px, 100%, 0px);
    }

    .chat-box-btn {
        transition: all 0.3s ease 0s;
        bottom: 8px !important;
    }

    .scroll-down .chat-box-btn {
        bottom: -45px !important;
    }
}

.note-box-main .Add-note label {
    margin-bottom: 5px;
}

.career-cloud-box .form-group textarea, .label-text-item {
    border: 0px;
    padding: 0px 13px;
    margin: 5px 0px 0px;
    color: rgb(167, 165, 165);
    width: calc(100% - 10px);
    height: 220px !important;
    max-height: 200px !important;
    overflow: auto !important;
}

.label-text-item {
    appearance: none;
    user-select: none;
    white-space: break-spaces;
    padding: 36px 9px;
}

.img-contain {
    object-fit: contain;
}

.form-group .form-control.label-text-item {
    padding: 6px 4px;
    margin: auto;
    width: calc(100% - 16px);
    overflow-x: hidden !important;
}

.Add-note.singel-note .form-control::placeholder {
    color: rgb(166, 166, 166);
}

.career-cloud-box .form-group > label {
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: rgb(108, 103, 103);
}

.assessment-row-input .form-control.auto-width {
    max-width: 200px;
    margin-top: 0;
    min-height: 39px;
}

.career-cloud-box {
    height: calc(100% - 250px);
    z-index: 1;
    top: 0px;
    display: inline-block;
    width: 100%;
}

.channel-item-box.col-xl-4 .career-cloud-box {
    height: auto;
}

.row.row-career .channel-item-box.col-xl-4 .career-cloud-box {
    height: calc(100% - 250px);
}

.chat + .career-cloud-box {
    width: 100%;
    margin: 15px 0px;
}

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

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

.mapper-box {
    position: absolute;
    background-color: rgba(204, 230, 255, 0.7);
    border: 1px dashed rgb(112, 112, 112);
    z-index: 1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

    .mapper-box button img {
        width: 25px;
        opacity: 0;
        filter: opacity(0.5);
    }

    .mapper-box button {
        background-color: transparent;
        border: none;
    }

    .mapper-box.show-img-always .edit-content-mapper {
        display: block;
    }

    .mapper-box.show-img-always button img {
        display: block;
        opacity: 1;
    }

    .mapper-box.show-img-hover:hover button img {
        opacity: 1;
    }

.cloud-exam .icon-btn-file {
    top: 22px;
}

.cloud-exam .frame {
    border: 1px solid rgb(221, 221, 221);
}

.cloud-exam:empty {
    display: none;
}

.cloud-exam {
    background-color: #ffffff;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    width: 50%;
}

.main-ready-exam .cloud-exam .assessment-btn {
    margin: auto;
}

.cloud-exam-row > i {
    font-size: 1.5rem;
    color: rgb(111, 120, 182);
}

.question-controllers + .cloud-exam {
    margin: auto;
}

.cloud-exam p {
    font-family: var(--font-base);
    padding: 15px 0px;
    color: rgb(156, 156, 156);
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.5;
}

.cloud-exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cloudTimer {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    border: 2px solid rgb(149, 149, 158);
    font-weight: 700;
    color: rgb(176, 176, 176);
    font-size: 1.05rem;
}

.close-mapper-box {
    font-size: 0.6rem;
    background-color: #ffffff;
    width: 11px;
    height: 11px;
    border-radius: 10px;
    align-items: center;
    padding-top: 1px;
    justify-content: center;
    color: rgb(209, 54, 54) !important;
}

.close-mapper-box, .drag-mapper-box, .resize-mapper-box {
    display: none;
    position: absolute;
    right: -6px;
    top: -6px;
}

.resize-mapper-box {
    cursor: nw-resize;
}

.drag-mapper-box, .resize-mapper-box {
    transform: rotate(90deg);
    padding: 1px;
    background: #ffffff;
    border-radius: 12px;
    width: 12px;
    height: 12px;
    justify-content: center;
    align-items: center;
    font-size: 0.55rem;
    inset: auto -4px -4px auto;
    position: absolute;
    display: none;
}

.drag-mapper-box {
    inset: -5px auto auto -4px;
    cursor: move;
    transform: rotate(45deg);
}

.image-mapper, .image-mapper-img {
    user-select: none;
}

.mapper-div #MapperDivSelecte {
    padding-top: 15px;
    background: transparent;
    border-top: 0px;
    margin-bottom: 0px;
    z-index: 1;
}

.book-page-header-row + #MapperDivSelecte {
    padding-top: 36px;
}

.mapper-div {
    z-index: 0;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
}

    .mapper-div > div {
        position: relative;
        display: inline-block;
    }

.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;
}

.click-mapper {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

.voice-answer .img-magnifier-container {
    border: 2px dotted rgb(221, 221, 221);
    border-radius: 5px;
    text-align: center;
}

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

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

.voice-answer .question-item-input .record-btn {
    margin: 5px 1px 0px 3px;
}

.voice-answer .img-magnifier-container .main-img {
    margin: auto;
    display: block;
}

.voice-answer .img-magnifier-container audio {
    margin: auto;
    display: block;
}

.book-page-header-row > .book-pages-number:first-child {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: 0px;
}

.image-mapper-img {
    border-radius: 3px;
}

.layout-box-assessment .image-mapper {
    position: relative;
    background: rgb(178, 178, 178);
}

:not(.note-box-control) .auto-height .ql-container.ql-snow {
    max-height: 365px;
    border: 1px solid rgb(206, 212, 218);
    border-radius: 0px 0px 5px 5px;
    overflow: auto;
}

.edit-content-mapper:focus, .edit-content-mapper:active {
    outline: none;
}

.edit-content-mapper {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    font-size: 1.5rem;
    background-color: transparent;
    border: none;
    color: rgb(101, 101, 101) !important;
}

.mapper-box:hover .edit-content-mapper, .mapper-box:hover .resize-mapper-box, .mapper-box:hover .drag-mapper-box, .mapper-box:hover .close-mapper-box {
    display: flex !important;
}

.event-Users-delete {
    position: absolute;
    top: 7px;
    right: 13px;
    color: rgb(244, 67, 54);
}

@media screen and (max-width: 992px) {
    .event-Users-delete {
        top: 5px;
    }
}

@media screen and (max-width: 768px) {
    .event-Users-delete {
        top: 7px;
    }
}

.score-item {
    font-size: 0.75rem;
    margin: 0px 5px;
}

.event-box .question-row-main {
    font-family: "Open Sans";
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.question-row-main > .title-assessment-page .form-group select {
    width: 250px;
}

.question-row-main > .title-assessment-page .col-sm-4 .form-group select {
    width: 100%;
}

.question-row-main > .title-assessment-page .form-group {
    margin: 0px;
    width: 100%;
}

.total-score + p {
    display: inline-block;
}

.total-score {
    margin: 5px 0px 6px;
    color: rgb(77, 197, 145);
}

.icon-filter {
    display: flex;
    justify-content: flex-end;
}

.btn-icon-filter {
    border: none;
    outline: none;
    font-size: 23px;
    background-color: transparent;
}

.color-white {
    white-space: nowrap;
    color: #ffffff;
    filter: drop-shadow(rgb(190, 190, 190) 2px 4px 6px);
}

.color-gray {
    filter: drop-shadow(rgb(190, 190, 190) 2px 4px 6px);
    color: var(--color-bg-body-text);
}

.fa-star.color-gray {
    filter: none;
}

.color-gold {
    filter: drop-shadow(rgb(190, 190, 190) 2px 4px 6px);
    color: var(--color-warning);
}

.color-gold-icon {
    position: absolute;
    color: rgb(250, 208, 98);
    left: -18px;
    top: 6px;
}

.robutton {
    padding: 0px 10px !important;
}

.question-row-main > .title-assessment-page {
    background-color: transparent;
    padding: 0px;
}

.title-assessment-page.row .check-row label {
    font-size: 0.7rem;
    padding: 2px 5px;
}

.title-assessment-page.row .check-row {
    align-items: flex-start;
    display: flex;
}

.event-box .answer-with-uploader {
    display: flex;
}

.event-box .remove-answer {
    position: absolute;
    top: -5px;
    right: -8px;
    z-index: 99;
    background-color: var(--color-danger);
    box-shadow: rgb(176, 176, 176) 1px 1px 5px;
    width: 15px;
    height: 15px;
    font-size: 11px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease 0s;
    border: none;
    opacity: 0;
    color: #fff !important;
}

.event-box .response-item:hover .remove-answer {
    opacity: 1;
}

.event-box .form__radio-group {
    height: 44px;
}

.form__radio-group, .form__checkbox-group {
    position: relative;
    width: 20px;
    height: 51px;
}

.form__radio-input, .form__checkbox-input {
    display: none;
}

.form__label-radio, .form__label-checkbox {
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    padding-left: 0px;
}

.form__radio-button, .form__checkbox-button {
    height: 1rem;
    width: 1rem;
    border: 2px solid rgb(139, 142, 159);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 3px;
}

    .form__radio-button::after, .form__checkbox-button::after {
        content: "";
        display: block;
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--color-secondary);
        opacity: 0;
        transition: opacity 0.2s ease 0s;
    }

    .form__checkbox-button::after {
        font-size: 0.7rem;
        font-family: "Font Awesome 5 Pro";
        content: "";
        font-weight: 900;
        background: transparent;
        top: 6px;
        height: 100%;
        bottom: 0px;
        left: 4px;
        color: rgb(139, 142, 159);
    }

.form__checkbox-button {
    border-radius: 3px;
    margin-top: 0;
}

.form__checkbox-input:checked ~ .form__label-checkbox .form__checkbox-button::after, .form__radio-input:checked ~ .form__label-radio .form__radio-button::after, .form__radio-input.checked ~ .form__label-radio .form__radio-button::after {
    opacity: 1;
}

.form__radio-group img {
    margin-right: 15px;
    margin-left: 10px;
    width: 250px;
    height: 150px;
    box-shadow: rgb(228, 226, 219) 1px 1px 5px;
    border-radius: 5px;
    object-fit: contain;
}

.qustion-list-num .form__label-checkbox {
    min-width: 10px;
    text-align: end;
}

.qustion-list-num .form__radio-button, .qustion-list-num .form__checkbox-button {
    border-color: #ffffff;
    background-color: rgb(236, 236, 236);
}

.question-box .form__radio-button::after, .question-box .form__checkbox-button::after {
}

.question-box .form__radio-button, .question-box .form__checkbox-button {
    border: 2px solid var(--color-secondary);
}

    .question-box .form__checkbox-button::after {
        color: var(--color-secondary);
    }

.form__radio-group.active, .form__checkbox-group.active {
    background: var(--color-primary);
    color: #fff !important;
}

.assessment-btn-row .assessment-btn, .assessment-btn.color-tertiary, .modal .assessment-btn, .report-box .assessment-btn {
    border: none;
    border-radius: 5px;
    padding: 8px 17px;
    color: #ffffff;
    font-family: var(--font-base);
    font-size: 15px;
}

.form-group-icon {
    display: flex;
    align-items: center;
}

    .form-group-icon > i {
        color: var(--color-primary);
        position: static;
        margin: 0px 0px 0px 5px;
        font-size: 17px;
    }

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

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

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

.assessment-result-setting {
    font-family: Montserrat;
    color: rgb(104, 104, 104);
    font-size: 0.8rem;
}

.profile-list {
    border: none;
    margin: 0px;
    width: auto;
    flex: 1 1 auto;
    border-radius: 15px 15px 0px 0px;
    padding: 18px 11px 11px;
    background-color: #ffffff;
}

    .profile-list:empty {
        padding: 0px;
        margin: 5px 0px;
    }

    .profile-list .question-post .question-post-title img {
        width: 40px;
        height: 40px;
        background-size: 40px;
        border-radius: 40px;
        background-color: #ffffff;
    }

    .profile-list .question-post {
        width: 45px;
        padding: 0px;
        min-height: auto;
        border: none;
    }

    .profile-list .break-time-text, .profile-list .assesment-setting-item {
        font-family: var(--font-base);
    }

    .profile-list .remove-category {
        top: 7px;
        right: 0px;
    }

    .profile-list .support-input {
        width: 50%;
    }

    .profile-list .channel-search-drp .form-control.support-input {
        width: 30%;
        margin: 0px;
    }

    .profile-list .item-dots-list {
        margin-bottom: 10px;
    }

.channel-search-drp .btn-default {
    background: rgb(235, 235, 235);
    color: rgb(143, 143, 143);
    font-size: 0.9rem;
    font-family: var(--font-base);
    font-weight: 400;
    border-radius: 5px;
}

.profile-list .item-dots-list li {
    width: auto !important;
}

.profile-list .statistic-box > .row {
    flex-direction: column-reverse;
}

    .profile-list .statistic-box > .row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

#AssSettingList .assesment-setting-item {
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: rgb(121, 121, 121);
}

.question-post .assessment-item-dec > label {
    white-space: nowrap;
    font-size: 0.8rem;
    font-family: var(--font-base);
}

.color-primary {
    background-color: var(--primary);
}

.qustion-list-num .form__checkbox-button::after {
    top: -1px;
    bottom: 0px;
    left: 2px;
    color: rgb(155, 161, 255);
    font-size: 1rem;
    font-weight: 500;
}

.qustion-list-num .form__radio-group, .qustion-list-num .form__checkbox-group {
    height: auto;
    font-weight: 600;
    color: rgb(116, 116, 116);
    padding: 6px 0px;
    width: 100%;
    display: flex;
    align-items: center;
    border: 2px solid rgb(155, 161, 255);
    border-radius: 5px;
}

.question-controllers .badge-warning.text-danger {
    color: #fff !important;
}

.question-controllers h4 {
    width: 100%;
    text-align: center;
    color: rgb(88, 88, 88);
    font-size: 1em;
}

.question-controllers {
    display: flex;
    min-height: 105px;
    flex-wrap: wrap;
}

.question-box-area + .question-controllers .question-btn-control {
    margin-top: -60px;
}

.question-box-area + .question-controllers {
    display: inline-block;
    width: 100%;
    background-color: rgb(230, 231, 250);
    margin-top: 0px;
    transform: translateY(75px);
    padding: 0px 0px 0px 10px;
}

.zoom-open .post-view-item-row > .question-box-area {
    z-index: 22;
}

.post-view-item-row > .question-box-area .question-item-img {
    position: relative;
}

.post-view-item-row > .question-box-area .zoom-question {
    position: absolute;
    top: 28px;
    right: 0px;
    left: auto;
    z-index: 1;
}

.question-box-area > .row > .col-md-6.col-11:not(.sticky-box) {
    z-index: 9;
}

.fixed-page-num .qustion-list-num .form__checkbox-group {
    padding: 7px 0px 6px;
    margin-top: 4px;
}

.qustion-list-num .form__label-radio.form__radio-label, .qustion-list-num .form__label-checkbox.form__checkbox-label {
    min-width: 100%;
    text-align: center;
    font-size: 0.74rem;
    background-color: transparent !important;
}

.question-box .form__checkbox-group, .question-box .form__radio-group {
    width: auto;
    height: auto;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 15px;
}

.assessment-bg .form__radio-input:disabled + label span, .assessment-bg .form__checkbox-input:disabled + label span {
    border-color: rgb(204, 206, 218);
}

.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: var(--font-base);
}

.form__radio-input:disabled + label, .form__checkbox-input:disabled + label {
    color: rgb(199, 201, 214);
}

.form-row-control {
    padding: 10px 25px;
}

.feed-shared-body .post-view-item-row .question-item-num, .feed-shared-body .post-view-item-row .zoom-question {
    position: relative;
    top: 0px;
    left: -3px;
    box-shadow: none;
}

.question-box.question-box-right .form__label-checkbox.form__checkbox-label > span:first-child, .question-box.question-box-right .form__label-radio.form__radio-label > span:first-child {
    padding-left: 25px;
}

.modal .question-box.question-box-right .form__label-checkbox.form__checkbox-label > span:first-child, .modal .question-box.question-box-right .form__label-radio.form__radio-label > span:first-child {
    padding-left: 5px;
}

.question-result .question-box.question-box-right .form__label-checkbox.form__checkbox-label > span:first-child, .question-result .question-box.question-box-right .form__label-radio.form__radio-label > span:first-child {
    padding-left: 0px;
    margin-top: -2px;
}

.question-result .question-box.question-box-right .form__label-checkbox.form__checkbox-label, .question-result .question-box.question-box-right .form__label-radio.form__radio-label {
    align-items: start;
}

.assessment-bg .main-ready-exam .question-box-area .question-box.question-box-right .form__label-checkbox.form__checkbox-label > span:first-child, .assessment-bg .main-ready-exam .question-box-area .question-box.question-box-right .form__label-radio.form__radio-label > span:first-child {
    padding-left: 0px;
}

.question-row-content .response-item-row .item-uploaded.handel-uploader {
    max-width: calc(100% - 30px);
}

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

.post-view-item-row .question-btn-control .assessment-btn-text-second + .color-secondary {
    background-color: #fff !important;
}

.assessment-bg .question-btn-control .color-secondary, .question-controllers .question-btn-control .assessment-btn-text-second + .color-secondary, .question-controllers .question-btn-control .float-left .color-secondary {
    font-size: 1rem !important;
    background-color: var(--color-secondary) !important;
}

.question-row-header {
    display: flex;
    justify-content: space-between;
}

.question-preview {
    width: 700px;
    border: 1px solid rgb(224, 224, 224);
    position: absolute;
    top: 80px;
    background-color: #ffffff;
    padding: 20px;
    display: none;
    z-index: 2;
    border-radius: 5px;
    white-space: pre-wrap;
    overflow: unset;
    line-height: 1.5;
    text-overflow: ellipsis;
    box-shadow: rgb(222, 222, 222) 1px 1px 4px;
}

    .question-item-hover:hover + .question-preview, .question-preview:hover {
        display: block;
    }

.finish-button {
    position: absolute;
    right: 0px;
    border: none;
    font-size: 0.85rem;
    background-image: initial;
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    padding: 7px 18px;
    font-weight: 600;
    background-color: var(--color-secondary);
    box-shadow: rgb(243, 242, 239) 0px 0px 0px 6px;
    border-radius: 5px 0px 0px 5px;
    bottom: 3px;
    color: #fff !important;
}

.w-90-px {
    width: 45px;
    padding: 0px 2px 0px 6px;
}

.event-box .mini-header {
    display: flex;
    padding: 2px 17px;
    font-family: "Open Sans";
    font-size: 0.9rem;
}

.response-item-row .rz-html-editor-dropdown {
    font-size: 0.8rem;
}

.answer-with-uploader {
    display: flex;
    width: calc(100% - 15px);
}

.response-row .assessment-row-input .answer-with-uploader {
    width: auto;
}

.response-row .assessment-row-input .timer-answer {
    margin-top: 10px;
    margin-left: -1px;
}

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

.response-row .assessment-row-input .answer-with-uploader + .check-row {
    margin-bottom: -15px;
}

.response-row .assessment-row-input .answer-text-box label {
    margin-left: 10px;
}

.response-row .assessment-row-input {
    flex-wrap: wrap;
}

.assessment-row-input label {
    display: flex;
    padding: 6px 9px 0px 0px;
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
}

.assessment-row-input .answer-with-uploader label {
    font-size: 0.8rem;
    justify-content: center;
    padding-top: 0px;
    white-space: nowrap;
    color: rgb(104, 104, 104);
}

.response-div span {
    font-size: 0.6rem;
}

.response-div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

    .response-div > div {
        color: rgb(134, 134, 134);
    }

        .response-div > div strong {
            font-size: 0.7rem;
            font-weight: 500;
        }

.assessment-row-input .form-control {
    font-size: 0.8rem;
}

.assessment-row-input select {
    margin-right: 5px;
}

.response-item-row .assessment-row-input {
    margin-bottom: 10px;
}

.assessment-row-input {
    position: relative;
    display: flex;
}

.response-item input[type="text"]:focus {
    outline: none;
}

.response-item input[type="text"]::placeholder {
    color: rgb(59, 59, 59);
}

.response-item .item-upload div span::after {
    width: 50px;
    height: 50px;
    z-index: 111;
}

.response-item div audio {
    width: 106px;
    margin: 29px 0px;
}

.response-item .item-upload div span i {
    transform: none !important;
}

.response-item .item-upload div span {
    width: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid rgb(77, 197, 145);
    border-radius: 100px;
    margin-left: 0px;
    z-index: 99999;
    position: relative;
    color: rgb(77, 197, 145);
    font-size: 2rem;
    background: #ffffff;
}

    .response-item .item-upload div span a {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

.response-item {
    border: 1px solid rgb(202, 202, 202);
    padding: 10px 10px 10px 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    min-height: 57px;
}

.auto-scroll.book-list .item-upload label, .mapper-img > .item-upload label {
    margin: 0px;
}

.auto-scroll.book-list .item-upload, .mapper-img > .item-upload {
    margin: 0px 0px 18px;
    max-width: 12% !important;
    min-width: 130px !important;
}

.mapper-img + div .add-exam-box .response-row {
    max-width: calc(100% - 70px);
}

.mapper-img + div .question-options-item {
    top: 59px;
}

.editable-input .response-item-row {
    width: 100%;
}




.remove-answer i {
    transform: rotate(45deg);
}

.question-type > .assessment-row-input {
    width: 100%;
    justify-content: space-between;
    padding-right: 18px;
    padding-left: 18px;
}

.response-row-box li {
    text-align: left;
}

.response-row .assessment-row-input {
    flex-wrap: wrap;
}

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel {
    background-color: #ffffff;
}

.question-row-content.bg-lightgreen > div > div > p > audio::-webkit-media-controls-play-button, .question-row-content.bg-lightgreen > div > div > p > audio::-webkit-media-controls-panel {
    background-color: rgb(233, 233, 233) !important;
}

audio {
    display: inline-block !important;
}

.response-item-row > div > audio {
    width: 100%;
    margin: 10px 0px;
}

.response-item-row > div > video {
    width: 100%;
    margin: 10px 0px;
    border-radius: 10px;
}

.handel-uploader {
    position: relative;
}

.response-item-row > div > img {
    max-width: 100%;
    max-height: 650px;
    object-fit: contain;
    width: auto;
    object-position: center center;
    top: -10px;
    height: calc(100% + 8px);
    left: 0px;
    z-index: 10;
    border-radius: 7px;
}

.question-type ~ .assessment-row-input, .response-row {
    padding-top: 10px;
}

    .response-row .item-upload:hover > i {
        color: var(--color-body-text-color);
    }

    .response-row .item-upload > i {
        color: rgb(221, 221, 221);
    }

    .response-row .item-upload i {
        position: absolute;
        cursor: pointer;
        transform: rotate(136deg);
        transition: color 0.3s ease 0s;
    }

    .response-row .item-upload > input[type="file"] {
        z-index: 1;
    }

    .response-row .item-upload {
        cursor: pointer;
        margin: 0px;
        border: 0px;
        font-size: 1rem;
        color: rgb(139, 142, 159);
        width: auto !important;
        min-width: 16px !important;
        height: auto !important;
        min-height: auto !important;
    }

.question-row .response-row .item-upload {
    width: 51px !important;
    min-width: 35px !important;
    height: 40px !important;
    overflow: hidden;
}

.survey-box-row {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.response-item-row > div > audio {
    width: 100%;
    margin: 10px 0px;
}

.response-item-row > div > video {
    width: 100%;
    margin: 10px 0px;
    border-radius: 10px;
}

.response-item-row > div > img {
    max-width: 100%;
    max-height: 650px;
    object-fit: contain;
    width: auto;
    object-position: center center;
    top: -10px;
    height: calc(100% + 8px);
    left: 0px;
    z-index: 10;
    border-radius: 7px;
}

.item-uploaded {
    margin: 10px 0px;
    border-radius: 5px;
    text-align: center;
    transition: all 0.3s ease 0s;
}

    .item-uploaded img {
        margin: 10px;
        border-radius: 5px;
    }

    .item-uploaded.handel-uploader img {
        margin: 0px;
        max-width: 400px;
    }

.assessment-row-input .item-upload:hover {
    color: rgb(104, 104, 104);
}

.assessment-row-input .item-upload {
    position: absolute;
    right: 0px;
    top: 0px;
    border: 0px;
    font-size: 1.15rem;
    cursor: pointer;
    width: 35px !important;
    min-width: auto !important;
    min-height: 35px !important;
}

.response-item input[type="text"] {
    border: 0px;
    min-width: 70%;
    font-size: 0.85rem;
    padding: 8px 0px;
    margin-left: 15px;
    font-weight: 500;
}

    .response-item input[type="text"]::placeholder {
        color: rgb(104, 104, 104);
    }

.response-title {
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgb(65, 65, 65);
}

.bg-lightgreen {
    background: rgb(193, 249, 197) !important;
}

.assessment-left-panel .global-brand {
    width: 35px;
    height: 35px;
    margin: 7px 15px;
}

.assessment-left-panel {
}

    .assessment-left-panel > a {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

.assessment-title-menu {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgb(37, 37, 37);
    align-items: center;
    display: none;
}

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

.assessment-panel-menu {
    padding-bottom: 25px;
    margin-top: 20px;
}

.div-bg-white .about-item {
    padding: 15px 0px;
    border: 0px;
    width: 100%;
    margin: 0px;
}

.assign-list li {
    display: flex;
    margin: 0px;
    border-bottom: 1px solid rgb(241, 241, 241);
    padding: 10px 0px;
    justify-content: space-between;
    align-items: center;
}

.edit-menu .btn {
    margin-top: -6px !important;
}

.list-name-assign {
    font-size: 0.8rem;
    min-width: 74px;
    text-align: center;
}

.global-body .core-rail .frame-core.olakid.visible ~ .share-box-feed-entry-wrapper {
    margin-top: 15px !important;
}

.btn-row-items {
    display: flex;
}

.status-assign {
    min-width: 60px;
    display: flex;
    align-content: center;
}

    .status-assign > a {
        align-items: center;
        display: flex;
    }

    .status-assign .fa-trash-alt {
        margin-top: 4px;
    }

.share-button {
    font-size: 1.25rem;
}

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

    .modal-share-box .sharebox-items .owl-stage {
    }

    .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);
    }
}

.radio-row label input {
    vertical-align: middle;
}

.radio-row label {
    margin-right: 10px;
}

.full-name-assign {
    flex: 0 0 60%;
}

.assign-list .full-name-assign {
    font-size: 0.75rem;
}

.assign-count {
    min-width: 30px;
    text-align: center;
}

.formatdate-assign {
    background-color: var(--color-bg-secondary);
    color: var(--color-secondary);
    padding: 7px;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--font-panel);
    border-radius: 5px;
}

.assessment-item-menu.active .fa-secondary {
    opacity: 0.4;
}

.assessment-item-menu-sub {
    flex-direction: column;
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    width: fit-content;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: rgba(116, 116, 116, 0.19) 1px 2px 6px;
    overflow: hidden;
}

    .assessment-item-menu-sub a {
        white-space: nowrap;
        border-bottom: 1px solid rgb(243, 242, 239);
        transition: background-color 0.3s ease 0s;
        padding: 11px 15px 11px 11px !important;
        font-size: 0.73rem !important;
    }

        .assessment-item-menu-sub a:hover {
            background-color: rgb(247, 247, 247);
        }

    .assessment-item-menu-sub > li:last-child a {
        border-bottom: 0px;
    }

.duty-flow-row .form-control {
    margin-bottom: 10px;
    min-width: 800px;
}

@media screen and (max-width: 992px) {
    .duty-flow-row .form-control {
        min-width: auto;
        width: 100%;
    }
}

.flow-left {
    position: fixed;
    left: 0px;
    width: 220px;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
}

.duty-flow {
    min-height: calc(100vh - 185px);
    padding-left: 40px;
    align-items: center;
    display: flex !important;
}

.assessment-student-owl .question-box.question-box-right.question-box-nwith-number {
    margin: auto;
    max-width: fit-content;
}

.assessment-student-owl .question-box.question-box-right {
    max-width: 980px;
    background-color: transparent;
    margin: auto;
}

.duty-flow-button > button {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
}

.duty-flow-row {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-end;
    width: fit-content;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 65px;
}

.duty-flow-button {
    display: flex;
    justify-content: end;
}

#MapperDivSelecte {
    overflow: auto hidden;
}

.custom-table tbody tr:nth-of-type(2n) {
}

@media screen and (max-width: 992px) {
    .duty-flow .item {
        padding: 0px 30px;
    }

    .duty-flow {
        padding-left: 18px;
    }

    .duty-flow-row .form-control {
        min-width: 100%;
    }

    .duty-flow-row {
        width: 100%;
        padding: 15px;
    }

        .duty-flow-row > div {
            position: relative;
            width: 100%;
        }

    .flow-left {
        position: inherit;
        padding: 15px;
        width: 100%;
        background-color: #ffffff;
        margin: 0px 0px 10px;
        max-width: inherit;
    }

    .flow-center {
        padding: 5px 20px;
    }

        .flow-center .title-text-flow {
            font-size: 0.75rem;
        }

    .acency-multiselect .select-search {
        width: auto;
        padding: 0;
    }

    .assessment-item-menu-sub, .assessment-item-menu-sub a {
        width: 100%;
        padding-left: 10px;
    }

    .assessment-item-menu-sub {
        position: relative;
        top: auto;
        left: auto;
        box-shadow: none;
        padding-left: 0px;
    }
}

.assessment-item-menu.active svg {
    fill: var(--color-secondary);
}

.assessment-item-menu.active {
    border-bottom: 3px solid;
    color: var(--color-secondary);
}

    .assessment-item-menu.active a {
    }

.assessment-box {
    display: flex;
    flex-direction: row-reverse;
}

.assessment-item-menu {
    border-bottom: 3px solid transparent;
    position: relative;
    margin-left: 15px;
    text-align: center;
    display: flex;
    align-items: center;
}

    .assessment-item-menu i {
        font-size: 15px;
        margin-right: 6px;
        width: 0.9rem;
        text-align: center;
        display: flex;
        justify-content: center;
        color: var(--primary);
    }

    .assessment-item-menu:not(.active) a {
        color: rgb(150, 160, 175);
    }

    .assessment-item-menu a {
        white-space: nowrap;
        width: 100%;
        display: flex;
        text-align: left;
        padding: 17px 0px 15px;
        align-items: center;
        font-size: 16px;
        font-family: Poppins;
        font-weight: 600;
    }

    .assessment-item-menu svg {
        width: 22px;
        height: 22px;
        margin-right: 5px;
        fill: rgb(200, 200, 200);
    }

@media (max-width: 768px) {
    .assessment-item-menu.active, .assessment-item-menu {
        border: none;
    }

        .assessment-item-menu a {
            padding: 10px 0px;
        }

    .assessment-item-menu {
        margin-left: 0px;
        padding: 0px 10px;
        flex-wrap: wrap;
    }

    .has-child {
        position: relative;
    }

        .has-child > a::after {
            position: absolute;
            content: "";
            font-weight: 400;
            font-family: "Font Awesome 5 Pro";
            right: 10px;
        }

        .has-child.toggle > a::after {
            transform: rotate(180deg);
        }

    .assessment-panel-menu > .assessment-item-menu:last-child {
        flex-direction: column;
    }

    .assessment-badge {
        position: absolute;
        top: 10px;
        right: 9px !important;
    }

    .assessment-student-page-tab .assessment-badge {
        right: 0px !important;
        top: 0;
    }

    .assessment-item-timer {
        bottom: 3px;
    }

    .header-assessment-right {
        position: absolute;
        top: -26px;
        margin: 0px;
        right: 0px;
    }
}

.assessment-title-box > i {
    cursor: pointer;
    width: 22px;
}

.assessment-title-box.fixed + .assessment-detail-list {
    position: fixed;
    top: 69px;
    right: 15%;
    z-index: 2;
}

.assessment-page-title-container {
    width: 100%;
    padding: 0px 10px;
}

@media screen and (max-width: 992px) {
    .assessment-page-title-container {
        max-width: 100%;
        padding: 0px 15px;
    }

    .credit-row > .credit-value:last-child {
        padding: 0px;
    }

    .main-setting-row .onrow-input.form-group {
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 992px) {
    .global-body.Assesment-Layout .left-rail {
        z-index: 0;
    }

        .global-body.Assesment-Layout .left-rail:hover {
            z-index: 11;
        }

    .assessment-page-title-container.fixed {
        position: fixed;
        top: 53px;
        background: rgb(243, 242, 239);
        z-index: 2;
        padding: 15px 10px 0px !important;
    }
}

.assessment-title-box.fixed {
    background-color: #ffffff;
    position: sticky;
    top: 50px;
    z-index: 1;
    padding: 17px 10px;
    border-radius: 0px 0px 15px 15px;
    box-shadow: rgba(31, 31, 31, 0.15) 1px 1px 6px;
}

.assessment-title-box, .assessment-title-box-text {
    min-height: 42px;
    display: flex;
    color: rgb(39, 39, 39);
    font-size: 1.4rem;
    align-items: center;
    padding: 10px 8px 11px 0px;
    margin-bottom: 10px;
}

    .assessment-title-box-text a {
        margin-right: 15px;
        font-size: 1.3rem;
    }

.assessment-title-box-text {
    margin-right: 13px;
    font-size: 1.15rem;
    color: rgb(64, 64, 64) !important;
}

.assessment-manage-tab-control .assessmnet-title-button {
    padding: 15px 15px 0px;
}

.assessment-manage-tab-control .assessment-search-box-main {
    margin-top: 15px;
}

.event-box .row .sticky-child {
    position: absolute;
    top: 33px;
    right: 0px;
    width: fit-content;
}

    .event-box .row .sticky-child > .mb-2 {
        display: none;
    }

    .event-box .row .sticky-child .assessment-btn-row > .assessment-btn {
        border-radius: 26px;
        font-weight: 500;
    }

.assessmnet-title-button {
    flex-flow: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.filter-box-asssessment .form-group .form-control {
    padding: 3px 7px;
    margin: 0px;
}

.filter-box-asssessment .check-row {
    line-height: normal;
    vertical-align: middle;
    display: flex;
    align-items: center;
    margin-right: 11px;
}

.filter-box-asssessment .form-group {
    margin: 0px 15px 0px 0px;
    display: flex;
}

.filter-box-asssessment label input {
    margin-right: 5px;
}

.filter-box-asssessment .check-row label {
    min-width: auto;
}

.filter-box-asssessment .width-box-100 .form-group .form-control {
    padding: 6px 7px !important;
}

.space-box-100 {
    flex: 0 0 108px;
}

.left-sesstion-time select {
    width: 193px;
}

@media screen and (max-width: 992px) {
    .space-box-100 {
        display: none;
    }

    .flex-date-child label {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .filter-box-asssessment.assessment-search-box-main > div, .flex-date-child {
        flex-wrap: wrap;
    }
}

.left-sesstion-time {
    display: flex;
    width: 50%;
}

.width-box-100 {
    width: 100%;
}

.flex-date-child {
    display: flex;
}

    .flex-date-child > .form-group:last-child {
        margin-right: 0px;
    }

.filter-box-asssessment label {
    display: flex;
    font-size: 0.75rem;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 7px;
}

.assessment-search-box {
    width: 50px;
    display: flex;
    overflow: hidden;
    background: #ffffff;
    padding: 5px;
    border-radius: 50px;
}

    .assessment-search-box.open {
        width: 150px;
    }

.assessment-status ~ .assessment-item-title {
    margin-top: 35px;
}

.assessment-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 20px 20px 40px;
    position: relative;
    font-family: var(--font-panel);
    border-radius: 10px;
    margin-bottom: 10px;
}

.col-md-4 > .assessment-item {
    min-height: 165px;
}

.assessment-item-title-box .title-text {
    line-height: 1.2;
    margin-left: 9px;
    font-size: 0.9rem;
}

.assessment-item-title-box {
    padding: 13px 0px;
    display: flex;
    align-items: center;
}

.assessment-list .assessment-status .setting-btn {
    top: 13px;
    right: 10px;
    color: #fff !important;
}

.assessment-status {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background: rgb(82, 31, 130);
    height: 40px;
    border-radius: 10px 10px 0px 0px;
}

.assessment-item.passive .assessment-status {
    background: rgb(192, 191, 191);
}

.list-item-assessment .assessment-item.passive .assessment-status {
    background: transparent;
}

.list-item-assessment .assessment-item.passive {
    margin-top: -2px;
}

.list-item-assessment .assessment-item.passive, .assessment-item.passive {
    background: rgb(249, 249, 249);
}

    .list-item-assessment .assessment-item.passive .i-color-secondary, .assessment-item.passive .i-color-secondary {
        color: rgb(216, 216, 216);
    }

    .assessment-item.passive .crumbs ul li a.active {
        background: rgb(192, 191, 191);
    }

        .assessment-item.passive .crumbs ul li a.active::after {
            border-left-color: rgb(192, 191, 191);
        }

.assessment-item-edit {
    flex-direction: row-reverse;
    position: absolute;
    right: 20px;
    top: 17px;
    color: rgb(158, 158, 158);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

    .assessment-item-edit i {
        position: relative;
    }

.user-count {
    margin: 0px 2px;
    background-color: rgb(243, 242, 239);
    color: rgb(158, 158, 158);
    border-radius: 50px;
    min-width: 17px;
    min-height: 17px;
    font-weight: 600;
    font-family: var(--font-panel);
    font-size: 0.71rem;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assessment-item-icon {
    background: var(--color-secondary-gradiant);
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    flex: 0 0 40px;
}

.assessment-item-title {
    color: rgb(84, 84, 84);
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: inherit;
    position: relative;
    max-width: calc(100% - 100px) !important;
}

.assessment-item-box-title {
    max-width: unset !important;
}

.text-title .assessment-item-title {
    text-overflow: clip;
    white-space: normal;
    line-height: 1.2;
}

.assessment-title-career {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 15px 15px 0px 0px;
    margin-bottom: 0px;
    max-width: 100% !important;
}

    .assessment-title-career + .profile-list {
        margin: 0px;
        border-radius: 0px;
        padding: 15px;
    }

.profile-list > .row-item-wrap {
    padding: 0px !important;
}

.assessment-item-title h5 {
    font-size: 1rem;
    font-family: var(--font-base);
    color: rgb(145, 145, 145);
}

.btn-admin {
    position: absolute;
    right: 5px;
    z-index: 1;
    left: auto;
    top: 9px;
    padding: 4px 11px;
    width: auto !important;
    font-size: 0.8rem !important;
}

.child-ptop .about-item {
    padding-top: 32px;
}

.line-active .tab-item.button-title {
    margin: 0px;
    background-color: rgb(143, 170, 220);
    padding: 13px 23px;
    border-radius: 14px;
    color: #fff !important;
}

.blazored-toast {
    padding: 0.7rem 0.75rem !important;
    width: 25rem !important;
}

.blazored-toast-message {
    margin: 2px !important;
}

.assessment-title-career + .profile-list .row-item-wrap, .row-wrap-career {
    background-color: #ffffff;
    padding: 15px 10px 10px;
    margin: 8px 0px 0px;
    border-radius: 15px 15px 0px 0px;
}

.row.m-0 + .div-bg-white {
    border-radius: 0px;
    padding-bottom: 0px;
    margin: 0px !important;
}

.row-wrap-career {
    background-color: #ffffff;
    padding: 10px 15px;
    margin: 0px 0px 8px;
    border-radius: 0px 0px 15px 15px;
}

.profile-list:empty {
    display: none;
}

.row-wrap-career .form-group label {
    font-family: var(--font-base);
    font-size: 0.85rem;
    color: rgb(99, 99, 99);
    margin-bottom: 4px;
}

.member-select {
    width: 100%;
}

    .member-select .user-card-name:hover {
    }

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

.search-inputs {
    width: 100%;
}

.btn-single {
    height: 44px;
    margin: 5px 15px !important;
}

.col-1 .btn-single {
    margin: 5px 0 !important;
}

.button-right {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.assessment-tab-content .form-group label {
    min-height: 25px;
    display: flex;
    align-items: center;
}

.assessment-tab-content .form-group .check-row {
    display: flex;
    align-items: center;
}

    .assessment-tab-content .form-group .check-row label {
        margin-right: 15px;
        margin-left: 5px;
        flex-direction: row-reverse;
    }

.assessment-tab-content .check-row label input[type="checkbox"] {
    margin-top: 3px;
    margin-right: 5px;
    vertical-align: middle;
}

.assessment-item .assessment-btn-row {
    justify-content: space-between;
}

.assessment-status ~ .assessment-btn-row {
    margin-bottom: 0px !important;
}

.assessment-btn-row {
    align-items: end;
    display: flex;
    margin: 0px -4px 18px;
}

.assessment-btn:focus {
    outline: none;
}

.assessment-label {
    width: 100%;
    padding: 8px 10px;
    text-align: center;
    display: inline-block;
    margin-top: 16px;
    font-size: 0.7rem;
    cursor: not-allowed;
    border-radius: 5px;
}

.color-gray {
    color: rgb(190, 190, 190);
    background-color: rgb(243, 242, 239);
}

.assessment-btn:hover, .btn:hover, .btn:focus {
    opacity: 0.9;
}

.assessment-item-btn-area {
    display: inline-block;
    justify-content: center;
    margin: auto;
    width: 100%;
}

    .assessment-item-btn-area .assessment-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        margin: 17px 0px 0px;
    }

.credit-free {
    color: var(--color-primary);
    background-color: var(--color-bg-primary);
    font-weight: 500;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 0.6rem;
}

.assessment-item-detail-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .assessment-item-detail-header .credit-span {
        color: rgb(98, 101, 107);
        font-weight: 700;
        font-size: 0.7rem;
        font-family: var(--font-family-sans-serif);
    }

    .assessment-item-detail-header .assessment-item-coin {
        width: 12px;
    }

    .assessment-item-detail-header .assessment-item-point {
        margin: 0px;
        border: 0px;
        padding: 6px 5px;
        background-color: var(--color-bg-warning);
    }

.assessment-item-top-body {
    border-radius: 3px 5px 5px 3px;
    background-color: rgb(239, 240, 249);
    color: rgb(243, 242, 239);
    font-size: 0.6rem;
    padding: 4px 4px 6px;
    margin-top: -2px;
    border-left: 3px solid var(--color-secondary);
}

.assessment-item-time {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

.assessment-item-header h2 {
    margin-bottom: 7px;
    font-weight: 700;
}

.assessment-item-coin {
    width: 22px;
    margin-right: 5px;
}

.assessment-unlimited, .assessment-time {
    color: rgb(162, 165, 185);
    font-size: 0.67rem;
    font-weight: 700;
}

.assessment-time {
    font-size: 0.7rem;
    justify-content: flex-start;
}

.assessment-btn i {
    margin-right: 3px;
}

.about-item.bg-white .form-row-group .item-upload {
    min-height: 28px;
    margin: -3px 4px;
    border-radius: 2px;
}

.assessment-button-list .assessment-btn i {
    margin-right: 5px !important;
}

.assessment-box .assessment-btn i {
    margin-right: 0px;
}

.assessment-item-header {
    color: rgb(69, 69, 69);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 56px;
}

.input-dec {
    color: rgb(192, 192, 192);
    font-family: var(--font-panel);
    font-size: 0.6rem;
    font-weight: 400;
    margin-top: 2px;
}

.assessment-item .dropdown-menu {
    right: 0px;
    font-size: 0.7rem;
    min-width: 115px;
    padding: 4px;
    border: 1px solid rgb(242, 242, 242);
    box-shadow: rgba(217, 217, 217, 0.48) 3px 2px 20px, #fff -20px -20px 60px;
    left: auto !important;
}

.assessment-item .dropdown-item {
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
}

    .assessment-item .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.01);
        color: var(--color-secondary) !important;
    }

    .assessment-item .dropdown-item.active, .assessment-item .dropdown-item:active {
        background-color: var(--color-secondary);
        color: #fff !important;
    }

.assessment-item .assessment-btn {
    justify-content: center;
    margin: 0px;
    position: relative;
    text-transform: capitalize;
    font-size: 0.7rem !important;
}

.prew-assessment {
    font-size: 1.4rem;
    color: rgb(216, 216, 216) !important;
}

.assessment-item .color-secondary-outline {
    background: transparent;
}

.count-question {
    position: absolute;
    left: calc(100% + 3px);
    padding: 8px 4px;
    background-color: var(--color-bg-secondary);
    color: var(--color-secondary);
    border-radius: 5px 0px;
    font-weight: 600;
    font-size: 0.7rem;
}

.preparing-assessment {
    font-weight: 600;
    font-size: 1em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.assessment-item-box {
    margin-bottom: 15px;
}

.assessment-item-main .assessment-start-time {
    text-align: left;
}

.assessment-item-main .assessment-end-time {
    text-align: right;
}

.assessment-item-main .assessment-start-time, .assessment-item-main .assessment-end-time {
    min-width: 120px;
}

.assessment-item-main {
    font-family: var(--font-panel);
    text-align: center;
    margin: 10px auto !important;
}

.item-exam .assessment-btn {
    margin: auto auto 0px !important;
}

.item-exam i {
    font-size: 2.9rem;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.assessment-start-time, .assessment-end-time {
    font-weight: 700;
    font-size: 0.7rem;
    color: rgb(162, 165, 185);
}

    .assessment-end-time:empty {
        display: none;
    }

.assessment-end-time, .color-danger {
    color: var(--color-danger);
}

.assessment-item-time .assessment-questions-title {
    font-size: 0.7rem;
    font-weight: 600;
}

.row_Container > .form-control::placeholder {
    color: rgb(179, 179, 179);
}

.row_Container > textarea.form-control {
    min-height: 123px;
}

.row_Container > .form-control {
    margin: 0px 10px;
    border-color: rgb(228, 229, 237);
    border-radius: 20px;
    font-size: 0.85rem;
    padding: 9px 12px;
    height: auto;
    font-family: var(--font-base);
    line-height: normal;
}

a .assessment-btn {
    max-width: fit-content;
}

.assessment-item-body .assessment-btn {
    display: inline-block;
    margin: 10px 0px 0px;
    padding: 7px 10px;
    font-size: 0.7rem !important;
}

.assessment-btn-row-space {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.assessment-item-body {
    font-family: var(--font-panel);
}

a:not([href]):not([tabindex]).assessment-btn {
    color: #ffffff;
}

.color-danger-outline i {
    margin: 0px;
}

.color-secondary {
    background-color: var(--color-secondary) !important;
}

.color-secondary-outline {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary) !important;
}

.btn-default {
    background-color: rgb(221, 221, 221);
}

.row-item-wrap .btn-dark, .btn-default, .btn-dark {
    height: fit-content;
    /*font-size: 0.9rem;*/
    font-family: var(--font-base);
    border-radius: 20px;
}

.library-img {
    width: 24px;
    margin: 5px;
}

.career-img {
    cursor: pointer;
    vertical-align: -4px;
    width: 25px;
}

.user-card.frame {
    position: static;
}

.color-warning {
    background-color: var(--color-warning);
    padding: 6px 17px;
}

.flex-ac-spw {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-direct-assign {
    font-size: 15px;
    font-family: var(--font-base);
    margin-bottom: -5px;
}

.img-button img {
    width: 21px;
    height: 23px;
    margin: -10px 5px;
    filter: opacity(0.7);
}

    .img-button img.assgin {
        margin-bottom: -13px;
        height: 26px;
    }

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

.img-button.active {
    filter: opacity(0.4);
}

.line-active .tab-item {
    border-bottom: 2px solid transparent;
    border-radius: 0px;
    padding: 6px 0px;
    width: fit-content;
    margin: 10px 5px;
}

    .line-active .tab-item.active, .line-active .tab-item.active-tab {
        border-color: rgb(221, 221, 221);
        background-color: transparent;
    }

.custom-table.gray-table thead tr {
    background: rgb(158, 158, 158);
}

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

.color-warning {
    font-family: var(--font-base);
    font-size: 0.9rem;
    background-color: var(--color-warning) !important;
    padding: 6px 17px !important;
    border-radius: 15px !important;
}

.color-tertiary {
    background-color: var(--color-tertiary);
}

.color-default {
    background-color: rgb(221, 221, 221);
    color: rgb(124, 124, 124) !important;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
}

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

.button-row .assessment-btn {
    margin-right: 5px;
}

.check-box-row-two {
    display: flex;
    flex-flow: wrap;
    width: 100%;
}

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

.check-box-row-two .form__radio-group, .check-box-row-two .form__checkbox-group {
    font-size: 0.9rem;
    width: 25%;
    height: auto;
    text-align: left;
    min-height: 37px;
    margin-bottom: 10px;
}

.check-box-row-two .form__label-checkbox {
    font-size: 0.9rem;
    padding-left: 20px;
}

.check-box-row-two .form__checkbox-group input[type="checkbox"] {
    opacity: 0;
}

.check-box-row input {
    align-items: center;
}

.global-main .left-rail.content-manager-menu {
    display: flex;
    margin: 0px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px;
}

.content-manager .assessment-btn.color-secondary {
    padding: 9px;
    font-size: 0.9rem;
    font-family: var(--font-base);
    font-weight: 600;
}

.content-manager-menu {
    font-family: var(--font-base);
    font-size: 0.9rem;
}

    .content-manager-menu .form-group {
        display: flex;
        align-items: center;
        margin: 0px;
    }

        .content-manager-menu .form-group label {
            font-size: 0.8rem;
            margin: 0px 10px;
            font-family: var(--font-base);
            font-weight: 600;
            color: rgb(140, 140, 140);
            white-space: nowrap;
        }

        .content-manager-menu .form-group .form-control {
            margin: 0px;
        }

.check-box-row-two {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    font-family: var(--font-base);
}

.check-box-row-item {
    display: flex;
    flex: 1 1 0%;
}

    .check-box-row-item label {
        margin-left: 5px;
    }

.global-body.Assesment-Layout .global-main {
    overflow: visible;
}

.Introduction-btn {
    width: 100%;
    margin-top: 20px;
    border: none;
    background: var(--color-danger);
    padding: 8px;
    font-weight: 500;
    color: #ffffff;
    border-radius: 5px;
}

.input-placeholder {
    height: 32px !important;
}

    .input-placeholder::placeholder {
        font-size: 0.75rem;
    }

.question-row-content {
    border: 1px solid rgb(221, 221, 221);
    min-height: 65px;
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
}

.assessment-row-input .item-upload > input[type="file"] {
    z-index: 1;
}

.assessment-row-input .item-upload i {
    transform: rotate(136deg);
    cursor: pointer;
    z-index: 0;
    transition: all 0.3s ease 0s;
    position: absolute;
}

.question-row-content.bg-lightgreen {
    background-color: rgb(233, 233, 233) !important;
}

.question-type > .assessment-row-input {
    width: 100%;
    justify-content: space-between;
    padding-right: 18px;
    padding-left: 18px;
}

.response-row-box li {
    text-align: left;
}

.response-row .assessment-row-input .timer-answer {
    margin-top: 10px;
    margin-left: -10px;
    justify-content: flex-start;
}

.Assesment-Layout .core-rail-just-left.layout-box-assessment > .row {
    width: 100%;
    margin: 0;
}

    .Assesment-Layout .core-rail-just-left.layout-box-assessment > .row:first-child {
        position: relative;
        z-index: 4
    }

.response-row .assessment-row-input .answer-text-box label {
    margin-left: 10px;
}

.response-row .assessment-row-input {
    flex-wrap: wrap;
}

.response-item-row > div > audio {
    width: 100%;
    margin: 10px 0px;
}

.response-item-row > div > video {
    width: 100%;
    margin: 10px 0px;
    border-radius: 10px;
}

.response-item-row > div > img {
    max-width: 100%;
    max-height: 650px;
    object-fit: contain;
    width: auto;
    object-position: center center;
    top: -10px;
    height: calc(100% + 8px);
    left: 0px;
    z-index: 10;
    border-radius: 7px;
}

.assessment-row-input .item-upload:hover {
    color: rgb(104, 104, 104);
}

.assessment-row-input .item-upload {
    position: absolute;
    right: 0px;
    top: 0px;
    border: 0px;
    font-size: 1.15rem;
    cursor: pointer;
    width: 35px !important;
    min-width: auto !important;
    min-height: 35px !important;
}

.assessment-row-input.icon-out-upload {
    margin-top: 30px;
}

    .assessment-row-input.icon-out-upload .item-upload {
        top: -30px;
        right: -16px;
    }

.answer-with-uploader {
    display: flex;
    width: calc(100% - 15px);
}

.name-of-file:not(:empty) i {
    color: rgb(250, 151, 151);
    margin-right: 5px;
    font-size: 0.85rem;
}

.name-of-file:not(:empty) {
    color: rgb(202, 202, 202);
    font-family: var(--font-base);
    margin: 5px;
    font-weight: 400;
    display: flex;
    justify-content: center;
}

    .name-of-file:not(:empty) + i {
        display: none;
    }

.name-of-file:empty {
    display: none;
}

.response-row .assessment-row-input .answer-with-uploader {
    width: auto;
}

.assessment-row-input .answer-text-box label {
    font-size: 0.8rem;
    margin-left: 14px;
}

audio {
    display: inline-block !important;
}

.tooltipbox {
    position: relative;
    overflow: visible !important;
}

    .tooltipbox > .tooltip {
        right: calc(100% + 10px);
        top: 6px;
        width: fit-content;
        max-width: 250px;
        display: none;
    }

    .tooltipbox:hover > h5:not(:empty) + .tooltip.fade, .tooltipbox:hover > p:not(:empty) + .tooltip.fade {
        display: block;
        opacity: 1 !important;
    }

.response-item:hover .remove-answer {
    opacity: 1;
}

.user-row-tr {
    position: relative
}

.remove-category {
    opacity: 0;
    z-index: 1;
    transform: none;
}

.user-row-tr .remove-category {
    right: 20px;
    top: 20px;
}

.user-row-tr:hover .remove-category {
    opacity: 1;
}

.handel-uploader {
    position: relative;
}

    .assessment-item:hover .remove-category, .handel-uploader:hover .remove-category {
        opacity: 1;
        z-index: 1;
    }

.back-flat.color-tertiary {
    display: flex;
    height: 29px;
    background: var(--color-tertiary);
}

.back-flat {
    margin-right: -44px;
}

.assessment-row-input .rz-html-editor {
    border-radius: 15px;
    overflow: hidden;
}

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel {
    background-color: #ffffff;
}

.question-row-content.bg-lightgreen > div > div > p > audio::-webkit-media-controls-play-button, .question-row-content.bg-lightgreen > div > div > p > audio::-webkit-media-controls-panel {
    background-color: rgb(233, 233, 233) !important;
}

.item-upload.item-uploaded-control > i {
    display: none;
}

    .item-upload.item-uploaded-control > i:first-child, .item-upload.item-uploaded-control i:first-child + .form-control[type="file"] {
        color: rgb(196, 196, 196);
        font-size: 1.3em;
        position: absolute;
        top: -30px;
        display: block;
        margin-left: -20px;
    }

.item-upload.item-uploaded-control {
    border: 0px;
    min-height: 5px;
    padding: 0px;
    margin: 0px;
    width: auto !important;
}

    .item-upload.item-uploaded-control .item-uploaded-control {
        margin: 0px;
        min-height: 50px;
        border: 1px dashed rgb(214, 220, 226);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        border-radius: 3px !important;
    }

.item-uploaded:hover {
    background-color: rgb(247, 247, 247);
}

.response-item .item-upload > div {
    width: 150px;
    height: 120px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    border-radius: 9px;
    padding: 5px;
    z-index: 2;
}

.response-row .item-upload video {
    top: -10px;
    height: calc(100% + 8px);
    left: 0px;
    border-radius: 7px;
    z-index: 10;
}

.response-title {
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgb(65, 65, 65);
}

.response-div span {
    font-size: 0.6rem;
}

.response-div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

    .response-div > div {
        color: rgb(134, 134, 134);
    }

        .response-div > div strong {
            font-size: 0.7rem;
            font-weight: 500;
        }

.assessment-row-input .form-control {
    font-family: var(--font-base);
    font-size: 0.8rem;
}

.change-question-num {
    right: 20px;
}

.question-type {
    display: flex;
    margin-top: -2px;
    align-items: center;
}

.question-num {
    font-size: 0.95rem;
    margin-right: 10px;
    position: absolute;
    left: 41px;
    top: 26px;
    width: 23px;
}

.question-type > .assessment-row-input {
    padding-left: 16px;
    margin-top: 8px;
}

.mini-header {
    margin-top: 8px;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    max-height: 30px;
    display: flex;
    align-items: center;
}

    .mini-header img {
        margin-bottom: 0px;
        max-height: 20px;
        margin-right: 15px;
        margin-left: 5px;
        border-radius: 5px;
    }

    .mini-header span {
        font-size: 0.6rem !important;
        font-family: Montserrat !important;
    }

.question-row .question-row-content .mini-header .question-preview + * {
    display: inline-block;
    line-height: 0.55;
    padding-top: 3px;
    height: 20px;
    padding-left: 5px;
}

.achievement-node-row {
    display: flex;
    width: 100%;
    padding: 6px 10px;
    margin: 6px 0px 1px;
    position: relative;
    align-content: center;
    background-color: rgb(246, 246, 246);
    font-family: var(--font-base);
}

    .achievement-node-row > span {
        margin: 0px 5px;
    }

    .achievement-node-row > i {
        margin-right: 5px;
        margin-top: 5px;
    }

    .achievement-node-row .table-icon-button {
        display: none;
        position: absolute;
        right: 6px;
        color: rgb(230, 112, 112);
    }

    .achievement-node-row:hover .table-icon-button {
        display: block;
    }

.question-drag, .answer-drag {
    cursor: grab;
    left: 20px;
}

.question-row-item {
    min-height: 28px;
}

    .question-row-item .mini-header-box {
        min-height: 40px;
        padding: 1px;
        margin-top: 1px;
    }

.mini-header audio {
    border-radius: 5px;
    object-fit: cover;
    height: 44px;
    margin: -21px 0px;
}

.mini-header i {
    padding: 5px;
    font-size: 1.1rem;
}

.answer-drag i {
    margin: 0px 3px;
}

.answer-drag, .question-drag, .change-question-num {
    top: 23px;
    position: absolute;
    font-size: 1.3rem;
}

.question-drag {
    left: 16px;
    cursor: grab;
    top: 24px;
    font-size: 1.2rem;
    color: rgb(209, 208, 206);
    z-index: 1;
}

.answer-drag {
    left: -34px;
    top: 0px;
    width: 30px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(139, 142, 159) !important;
}

.response-item input[type="text"]:focus {
    outline: none;
}

.response-item input[type="text"]::placeholder {
    color: rgb(59, 59, 59);
}

.response-item input[type="text"] {
    border: 0px;
    min-width: 70%;
    font-size: 0.85rem;
    padding: 8px 0px;
    margin-left: 15px;
    font-weight: 500;
}

    .response-item input[type="text"]::placeholder {
        color: rgb(104, 104, 104);
    }

.help-input {
    margin: 10px 0px;
    display: inline-block;
    font-size: 0.6rem;
    color: rgb(176, 176, 176);
}

.response-item-row img {
    object-fit: contain;
    background: rgb(248, 248, 248);
}

.response-item-row .assessment-row-input {
    margin-bottom: 10px;
}

.assessment-row-input label i {
    font-size: 0.8rem;
    margin-bottom: 2px;
    margin-top: -3px;
}

.assessment-row-input .answer-with-uploader label {
    font-size: 0.8rem;
    justify-content: center;
    padding-top: 0px;
}

.assessment-row-input label {
    display: flex;
    padding: 6px 9px 0px 0px;
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
}

.assessment-row-input .check-row label input {
    margin: 0px 5px -2px;
}

.assessment-row-input .check-row label {
    flex-direction: row-reverse;
    min-height: 32px;
    padding: 19px 15px 0px;
}

.response-row .assessment-row-input .check-row label {
    min-height: 32px;
    padding: 2px 15px 0px;
    font-size: 13px;
}

.event-box .assessment-row-input .display-flex label {
    margin-left: 25px;
}

.assessment-row-input .display-flex label {
    border: 1px solid transparent;
    background: rgb(243, 242, 239);
    color: rgb(176, 176, 176);
    padding: 9px 35px 9px 11px;
    font-size: 0.8rem;
    font-weight: 400;
    margin-right: 5px;
    border-radius: 4px;
}

.response-item-row {
    padding: 17px;
}

.add-response {
    font-size: 0.7rem;
    color: rgb(135, 131, 168);
}

.response-item .item-upload div span::after {
    width: 50px;
    height: 50px;
    z-index: 111;
}

.response-item div audio {
    width: 106px;
    margin: 29px 0px;
}

.response-item .item-upload div span i {
    transform: none !important;
}

.response-item .item-upload div span {
    width: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid rgb(77, 197, 145);
    border-radius: 100px;
    margin-left: 0px;
    z-index: 99999;
    position: relative;
    color: rgb(77, 197, 145);
    font-size: 2rem;
    background: #ffffff;
}

    .response-item .item-upload div span a {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

.response-item {
    border: 1px solid rgb(202, 202, 202);
    padding: 10px 10px 10px 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    min-height: 57px;
}

.question-item-img:empty {
    display: none !important;
}

.question-item-img img {
    max-height: 650px;
    object-fit: contain;
}

.modal .question-item-img img {
    margin: auto;
    border-radius: 5px;
}

.assessment-bg .question-item-img {
    display: inline-block;
}

.question-item-img {
    padding: 15px;
    margin-bottom: 15px;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.icon-board {
    content: url("/img/icon/border-all.png");
}

.icon-list {
    content: url("/img/icon/list.png");
}

.qustion-list-right > div {
    text-align: right;
    padding: 10px 0px;
    margin: 0px;
}

.btn-icon {
    font-size: 1.2rem;
    margin: 4px;
    display: inline-block;
    color: var(--color-body-text) !important;
}

.qustion-list-right {
    width: 70px;
    margin: 0px 15px;
    float: right;
}

.list-num .question-right-list {
    height: fit-content;
}

::-webkit-scrollbar {
    background-color: transparent;
    width: 8px;
    opacity: 0;
}

    ::-webkit-scrollbar:hover {
        opacity: 1;
    }

.question-right-list {
    inset: 120px 0px 0px;
    height: 70px;
    margin: auto;
    position: absolute !important;
}

.qustion-list-num {
    font-family: var(--font-panel);
    background: rgb(226, 226, 226);
    padding: 0px;
    width: 55px;
    border-radius: 15px;
    overflow: hidden;
}

.list-num-box {
}

.list-num .qustion-list-num {
    justify-content: flex-start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
}

.qustion-list-num .form__radio-button, .qustion-list-num .form__checkbox-button {
    left: -6px;
    border-radius: 10px;
    width: 0.8rem;
    height: 0.8rem;
    top: -16px;
    background-color: #ffffff;
    box-shadow: rgb(157, 162, 225) 0px 1px 5px;
}

.question-detail {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.question-options a {
    color: rgb(140, 140, 140);
    margin-left: 10px;
    font-size: 0.7rem;
}

    .question-options a:hover {
        text-decoration: underline !important;
    }

.question-options-item {
    right: 10px;
    display: flex;
    top: 78px;
    align-items: center;
    flex-direction: column;
    position: absolute !important;
}

.assessment-row-input.question-options-item label {
    padding-right: 5px;
}

.response-item-row.question-list-container .response-row .item-upload {
    border: 2px dotted rgb(221, 221, 221);
    padding: 5px;
    border-radius: 9px;
    height: 50px !important;
    width: 100px !important;
}

.assessment-row-input.question-options-item .form-control {
    font-size: 0.7rem;
    font-weight: 500;
    height: 25px;
    margin: 4px 0px;
    padding: 0px 0px 0px 5px;
    font-family: var(--font-base);
    width: 35px !important;
}

.response-item-row.question-list-container .assessment-row-input .check-row label {
    padding: 0px;
}

.assessment-row-input.question-list-container .display-flex label {
    background: transparent;
    padding: 10px 3px;
}

.question-grading > div {
    display: flex;
    font-size: 0.7rem;
    align-items: center;
}

.question-grading span {
    margin-bottom: 12px;
    display: inline-block;
    font-size: 0.9rem;
    color: rgb(31, 31, 31);
}

.question-grading input {
    margin-right: 5px;
    width: 80px;
    font-size: 0.8rem;
    font-weight: 500;
}

.question-detail.right-show-items {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 45px;
}

.matching-choice-row {
    display: flex;
}

.assessment-row-input select {
    margin-right: 5px;
}

.auto-width {
    width: auto;
}

.assessment-row-input {
    position: relative;
    display: flex;
}

.change-question-num i {
    transition: transform 0.3s ease 0s;
}

.change-question-num.closed i {
    transform: rotate(180deg);
}

.level-box {
    border: 1px solid rgb(221, 221, 221);
    background: rgb(250, 250, 250);
    border-radius: 5px;
    padding: 15px;
}

.question-sum > label:last-child {
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(157, 163, 254, 0.21);
    display: inline-block;
    min-width: 81px;
    padding: 6px;
    width: auto;
    border: 1px solid rgb(183, 187, 252);
    border-radius: 5px;
    margin: 5px 0px 0px;
}

.text-success {
    color: var(--color-primary) !important;
}

.user-assessment-list {
    border-radius: 15px;
    background-color: #ffffff;
    padding: 5px 20px;
}

    .user-assessment-list .user-assessment-item:last-child {
        border-bottom: 0px;
        margin-bottom: 0px;
    }

.user-assessment-item-content {
    display: flex;
    align-items: center;
}

.user-assessment-item {
    align-items: center;
    justify-content: space-between;
    display: flex;
    margin-bottom: 10px;
    padding: 15px 0px;
    border-bottom: 1px solid rgb(242, 242, 242);
}

.user-assessment-date {
    width: 100px;
}

.user-assessment-title, .user-assessment-status, .user-assessment-date {
    font-family: var(--font-panel);
    font-weight: 500;
    font-size: 0.8rem;
}

.user-assessment-item .assessment-btn {
    padding: 2px 5px;
    border-radius: 32px !important;
    margin: 0px !important;
}

.user-assessment-title {
    width: 250px;
}

.bg-white-box .search-compose-to-title {
    font-size: 0.75rem;
}

.bg-white-box .compose-to-search-result, .bg-white-box .compose-to-search-result-multi {
    padding: 0px;
    top: calc(100% + 7px);
}

.bg-white-box {
    margin: 15px 0px;
}

.user-assessment-status {
    font-size: 0.7rem;
    padding: 7px 12px;
    border-radius: 5px;
}

.status-warning {
    background-color: var(--color-bg-warning);
    color: var(--color-warning);
}

.status-success {
    background-color: var(--color-bg-primary);
    color: var(--color-primary);
}

.compose-to-serach-row {
    padding: 11px 10px;
}

.div-bg-white {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
}

.custom-table-ui .pagination li a {
    padding: 8px;
    min-width: 35px;
    font-size: 0.7rem;
    text-align: center;
    border-color: rgb(232, 235, 238);
    border-radius: 31px !important;
}

.custom-table-ui .pagination li {
    margin-right: 5px;
}

.custom-table-ui {
    border-radius: 10px;
}

    .custom-table-ui .table thead tr {
        background-color: var(--color-light-bg-secondary);
        color: var(--color-secondary);
    }

    .custom-table-ui .table thead th {
        border: 0px;
        padding: 18px 12px;
    }

    .custom-table-ui .table-striped tbody tr:nth-of-type(2n+1) {
        background-color: transparent;
    }

    .custom-table-ui .table-striped tbody tr:nth-of-type(2n) {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .custom-table-ui table {
        border: none;
        border-radius: 10px;
        overflow: hidden;
        font-size: 0.8rem;
    }

.main-ready-exam .question-box-area {
    z-index: 1;
    width: 100%;
}

.question-btn-control .color-secondary {
    font-size: 1rem;
    background-color: transparent !important;
}

.assessment-bg .question-btn-control .color-secondary {
    background-color: var(--color-secondary) !important;
}

.question-box-area {
    width: 100%;
    margin-top: 15px;
    position: relative;
    border-radius: 15px;
}

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

.main-ready-exam .assessment-btn {
    margin: auto;
}

    .main-ready-exam .assessment-btn.color-primary {
        margin-top: 13px;
        padding: 15px;
        z-index: 2;
        position: inherit !important;
        font-size: 0.8rem !important;
    }

.assessment-bg .main-ready-exam .assessment-btn.color-primary {
    position: fixed !important;
}

.assessment-bg .main-ready-exam .video-control-row .assessment-btn.color-primary {
    position: inherit !important;
}

.w-button .duty-flow-row {
    padding: 0px 20px 0px 0px;
    margin: 0px;
}

    .w-button .duty-flow-row .form-control {
        margin-bottom: 0px;
    }

.w-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: self-end;
    text-align: center;
    justify-content: center;
    padding-left: 160px;
}

@media screen and (max-width: 992px) {
    .w-button .duty-flow-row {
        margin-left: -10px;
        padding: 0px;
    }

    .full-profile-user .teacher-dec-full {
        width: calc(100% + 100px);
        margin-left: -67px;
        margin-top: 45px;
    }

    .w-button {
        padding-left: 0px;
        flex-flow: column-reverse wrap;
    }
}

.assessment-item-timer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-box .upload-row {
    padding-left: 30px;
    justify-content: center;
}

.assessment-bg .question-box-right {
    z-index: 1;
}

.assessment-bg .col-md-6.col-11 > .question-box {
    z-index: 1;
}

.assessment-bg .question-box {
    z-index: 1;
    position: sticky;
}

.question-box {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    margin-bottom: 10px;
    font-family: var(--font-panel);
}

.main-ready-exam-center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.exam-map:empty {
    display: none;
}

.Assesment-Layout :not(.assessment-bg).question-box {
    border-top: 9px solid rgb(243, 242, 239);
}

.time-over-message {
    position: absolute;
    inset: 0px;
    background: rgba(243, 242, 239, 0.57);
    margin: 0px;
    z-index: 0;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stop-button-control {
    height: 50px;
    width: 63px;
    position: relative;
}

.pulse-counter .pulse {
    position: relative;
}

.pulse-counter.message-warning, .pulse-counter {
    height: 90px;
    position: relative;
    display: flex;
    margin: auto;
    flex-direction: column-reverse;
    width: fit-content !important;
}

    .pulse-counter.message-warning span {
        font-size: 0.8rem;
        color: rgb(106, 106, 106);
        transform: translateY(-50%);
        font-weight: 600;
        margin-bottom: 7px;
        margin-top: 13px;
    }

.pulse {
    height: 150px;
    width: 150px;
    position: absolute;
    margin: auto;
    left: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 50px;
    color: #ffffff;
    z-index: 1;
}

    .pulse::before, .pulse::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: var(--color-tertiary);
        border-radius: 50%;
        z-index: -1;
        opacity: 0.7;
    }

.pulse-counter .pulse::before, .pulse-counter .pulse::after {
    background-color: rgb(240, 199, 127);
}

.pulse::before {
    animation: 2s ease-out 0s infinite normal none running pulse;
}

.pulse::after {
    animation: 2s ease-out 1s infinite normal none running pulse;
}

@keyframes pulse {
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.timer-bottom {
    position: absolute;
    bottom: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.prepare-dec-timer {
    left: 10px;
    color: var(--color-tertiary);
}

.answer-dec-timer {
    right: 10px;
    color: var(--color-danger);
}

.question-box .question-item-title p, .question-box .question-item-title span {
    line-height: 1.5;
    white-space: normal !important;
}

.question-item-title {
    line-height: 1.3;
    font-size: 0.9rem;
    color: rgb(74, 74, 74);
    font-weight: 600;
}

.question-box .form__radio-group label, .question-box .form__checkbox-group label {
    min-height: 17px;
    line-height: normal;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: rgb(98, 98, 98);
    flex-direction: column;
}

.assessment-bg .column_Container .row_Container, .assessment-bg .row_Container .column_Container {
    border: none;
}

.column_Container, .row_Container {
    padding: 5px 5px 5px 11px;
    display: inline-block;
    width: 100%;
}

.assessment-bg .column_Container, .assessment-bg .row_Container {
    border-top: 8px solid rgb(230, 231, 250);
    padding-top: 15px;
}

.none-bg-border {
    min-height: 190px;
    border-top: none !important;
}

.question-box .column_Container .form__radio-group, .question-box .column_Container .form__checkbox-group {
    margin-bottom: 10px;
}

.assessment-bg .question-box .column_Container .form__radio-group, .assessment-bg .question-box .column_Container .form__checkbox-group {
    margin-bottom: 0px;
}

.question-btn-control .assessment-btn {
    display: inline-block;
}

.question-btn-control:empty {
    display: none !important;
}

.question-btn-control {
    padding: 0px;
    margin-top: 10px;
    max-width: 100%;
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-end;
}

.full-screen-open .duty-flow-control {
    margin-bottom: 50px;
}

.full-screen-open .assessment-btn {
    bottom: 60px;
}

.question-controllers .question-btn-control .assessment-btn i {
    margin: 0px;
}

.row_Container {
    padding-left: 17px;
    display: flex;
    flex-flow: wrap;
    width: 100%;
    margin: 0px;
}

.assessment-bg .row_Container {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
}

.mapperShow-box input[type="text"].form-control {
    font-size: 0.75rem;
    border-radius: 3px;
    padding: 5px;
}

.question-box-area .sticky-box {
    width: 100%;
    z-index: auto;
    position: static;
    padding: 0px !important;
}

.question-box-area .bar-text-control:empty {
    display: none;
}

.question-box-area .img-magnifier-glass {
    height: calc(100vh - 100px);
    bottom: 50px;
    overflow: inherit;
    top: 100px !important;
}

.modal-FullScreen .question-box-area .img-magnifier-glass {
    min-height: fit-content;
    height: fit-content;
}

.assessment-bg .question-box-area .sticky-box {
    width: 100%;
    z-index: auto;
    position: static;
    padding: 0px !important;
}

.feed-shared-body .exam-post {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
}

.feed-shared-body .question-bix-area .sticky-box {
    position: static;
}

.assessment-bg .question-box-area .sticky-box {
    z-index: auto;
    padding-left: 15px !important;
}

.question-box-area .just-center .sticky-box {
    display: flex;
    width: fit-content;
    flex-direction: column;
}

.question-box-area .col-md-5.col-none {
    margin-left: -80px;
}

.question-box-area .mapperShow-box select.form-control {
    font-size: 0.75rem;
    border-radius: 3px;
    padding: 5px;
}

.question-box-area .mapperShow-box {
    position: absolute;
}

.mapperShow-box p {
    -webkit-text-stroke: 0.04rem rgb(0, 0, 0);
    text-shadow: rgb(24, 24, 24) -1px 0px 3px;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: var(--font-panel);
}

    .mapperShow-box p.red {
        -webkit-text-stroke: 0.02rem rgb(0, 0, 0);
        color: rgb(255, 0, 20);
    }

    .mapperShow-box p.green {
        color: rgb(29, 247, 142);
    }

.question-box-area col-md-6.sticky-box {
    z-index: 1;
}

.sticky-box {
    bottom: 220px;
    top: 10px;
    position: sticky;
    height: fit-content;
    border-radius: 5px;
    z-index: 1;
}

.question-box .row_Container > .form__checkbox-group label, .question-box .row_Container > .form__radio-group label {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-panel);
    background-color: inherit !important;
}

.question-box .row_Container > .form__checkbox-group:last-child, .question-box .row_Container > .form__radio-group:last-child {
    margin-bottom: 0px;
}

.question-box .row_Container .form__checkbox-group, .question-box .row_Container .form__radio-group, .answer-group {
    margin: 0px 0px 0px 5px;
    background: #ffffff;
    padding: 0px 7px;
    border-radius: 30px;
}

    .answer-group > .column_Container, .answer-group > .row_Container {
        padding-left: 0px;
    }

        .answer-group > .row_Container > .form__checkbox-group {
            padding: 7px 5px;
            margin: 0px;
        }

.assessment-bg .question-box .row_Container .form__checkbox-group, .assessment-bg .question-box .row_Container .form__radio-group {
    margin: 0px;
    padding: 10px 7px;
}

.answer-group {
    margin-left: 28px;
}

.assessment-questions-count {
    color: rgb(84, 84, 84);
    font-weight: 700;
    font-size: 0.65rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.assessment-item-btn .text-primary {
    font-size: 0.9em;
    font-weight: 700;
}

.assessment-item-btn:hover .text-primary {
    color: #fff !important;
}

.assessment-item-btn {
    margin-bottom: 5px;
    border: 1px solid rgb(162, 165, 185);
    color: rgb(162, 165, 185);
    text-align: center;
    padding: 11px 25px 11px 0px;
    border-radius: 30px;
    transition: opacity 0.3s ease 0s;
    align-items: center;
    font-size: 0.95em;
    display: flex;
    justify-content: space-evenly;
}

    .assessment-item-btn > i {
        margin-right: 11px;
    }

    .assessment-item-btn.expired {
        padding: 11px 25px;
        background-color: rgb(162, 165, 185);
        color: #ffffff;
    }

    .assessment-item-btn:hover {
        opacity: 0.8;
        background-color: rgb(162, 165, 185);
        color: #ffffff;
    }

    .assessment-item-btn .text-info {
        font-size: 0.7em;
        font-weight: 800;
        margin-left: 9px;
        color: rgb(58, 197, 234) !important;
    }

.ready-exam {
    margin: auto;
    padding: 30px 20px;
}

    .ready-exam.photo-box-main {
        padding: 10px 20px;
    }

    .ready-exam .assessment-item-time {
        align-items: end;
        margin-top: 0px;
    }

    .ready-exam .assessment-item-top-body {
        background-color: #ffffff;
        padding: 0px;
        margin: 3px 0px 0px;
    }

    .ready-exam .assessment-item-header {
        justify-content: center;
        margin-bottom: 15px;
    }

.ready-exam-title:empty {
    display: none;
}

.ready-exam-title, .ready-exam-dec {
    color: rgb(84, 90, 96);
    font-size: 1rem;
    margin: 3px 15px 10px;
    line-height: 1.3;
}

.ready-exam-dec {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.text-credit-need {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: rgb(150, 150, 150);
    font-size: 0.8em;
}

.form__radio-group .color-primary {
    background: transparent;
    color: var(--color-primary) !important;
}

    .form__radio-group .color-primary span::after {
        background-color: var(--color-primary);
    }

    .form__radio-group .color-primary span {
        border-color: var(--color-primary) !important;
    }

.form__radio-group .color-tertiary {
    color: var(--color-tertiary) !important;
}

    .form__radio-group .color-tertiary span {
        border-color: var(--color-tertiary) !important;
    }

        .form__radio-group .color-tertiary span::after {
            background-color: var(--color-tertiary) !important;
        }

.score-result strong {
    font-weight: 300;
    font-size: 0.8rem;
}

.question-box-area ~ .score-result-div {
    justify-content: end;
    display: flex;
}

.score-result-div {
    display: none;
}

.score-result {
    background-color: var(--color-primary);
    padding: 15px;
    color: #ffffff;
    border-radius: 0px 0px 15px 15px;
    margin-bottom: 15px;
    margin-right: 29px;
    position: relative;
}

.question-box img + .form__radio-button, .question-box img + .form__checkbox-button {
    top: 50%;
    transform: translateY(-50%);
}

.question-item-input {
    padding-bottom: 10px;
    width: 100%;
    padding-left: 25px;
}

    .question-item-input.book-page-voice {
        padding-bottom: 5px;
        padding-left: 15px;
    }

    .question-item-input .record-btn {
        margin: 5px 1px 0px -5px;
        flex: 0 0 46px;
    }

.record-btn {
    background: var(--color-tertiary);
    margin: 5px 23px 0px -5px;
    display: flex;
    border-radius: 45px;
    width: 45px;
    text-align: center;
    height: 45px;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: #fff !important;
}

.question-action audio {
    z-index: 2;
}

    .question-action audio + .record-btn {
        margin: 0px 10px 0px 23px;
    }

.question-item-input .answerTitle {
    margin: -15px -9px 9px;
    display: inline-block;
}

.assessment-bg .question-item-input .answerTitle {
    margin: 2px;
}

.assessment-bg .answerTitle {
    margin: 3px 0px 0px 33px;
    display: inline-block;
}

.upload-row .answerTitle {
    display: none;
}

.answerTitle:empty {
    display: none;
}

.questionTimer {
    font-size: 0.7rem;
    float: right;
    margin: 24px 20px;
    font-weight: 600;
    font-family: var(--font-panel);
}

    .questionTimer > span {
        margin-right: 5px;
    }

.timerProgress {
    border-radius: 15px 15px 0px 19px;
    position: relative;
    margin: 5px 0px;
    background: rgb(218, 218, 218);
    height: 6px !important;
}

.progress-bar {
    transition: all 0.3s ease 0s;
}

.timerProgress span {
    position: absolute;
    left: 0px;
    right: 0px;
    font-size: 0.83em;
    width: 100px;
    font-weight: 600;
    font-family: var(--font-base);
    display: inline-block;
    color: rgb(33, 33, 33);
    text-shadow: rgb(182, 182, 182) 0px 0px 0px;
    margin: 2px auto 5px;
}

.ready-exam > div > button {
    display: inline-block;
    margin: 5px auto 1px !important;
}

.ready-exam {
    font-family: var(--font-panel);
}

.voice-answer > .question-action {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qustion-list-status ul {
    column-width: 71px;
    column-fill: auto;
    padding: 10px;
}

.qustion-list-status {
    width: 334px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 30px;
}

    .qustion-list-status li a.complate::after {
        font-weight: 800;
        font-family: "Font Awesome 5 Pro";
        content: "";
        position: absolute;
        background: rgb(228, 255, 243);
        font-size: 0.63rem;
        box-shadow: rgb(228, 255, 243) 0px 0px 0px 4px;
        right: 5px;
        top: 2px;
        bottom: 2px;
        padding: 1px;
        border-radius: 20px;
        display: flex;
        align-items: center;
    }

    .qustion-list-status li a.active {
        background-color: var(--color-bg-primary);
    }

    .qustion-list-status li a:hover {
        border-color: var(--color-bg-primary);
    }

    .qustion-list-status li a {
        position: relative;
        border: 2px solid transparent;
        height: 23px;
        width: 100%;
        display: inline-block;
        margin: 4px 0px;
        border-radius: 10px;
        padding: 3px;
        text-align: center;
        transition: all 0.3s ease 0s;
        color: var(--color-primary) !important;
    }

.loading-header {
    position: relative;
    width: auto;
    display: inline-block;
    padding-right: 15px;
}

    .loading-header h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 5px 4px 15px;
    }

.rz-html-editor {
    padding: 0
}

body, .assessment-bg {
    min-height: 100vh;
    height: auto
}

.assessment-bg {
    background-color: var(--color-bg-secondary) !important;
}

.header-assessment:empty {
    display: none;
}

.assessment-bg {
    min-height: calc(100vh - 100px);
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    min-width: 100%;
    position: relative;
    z-index: 3;
}

.question-box-area:empty {
    display: none;
}

.assessment-bg > .row {
    position: relative;
    width: 100%;
}

.Assesment-Layout .icon-btn {
    margin: 14px 0px 11px;
    width: 100%;
    padding: 0px 9px;
    text-align: right;
    font-size: 1.1rem;
    color: rgb(100, 100, 100);
    justify-content: space-between;
}

.left-icon-btn {
    float: left;
}

.assessment-bg[bg-color="purple"] {
    background-color: var(--color-bg-secondary);
}

    .assessment-bg[bg-color="purple"] .question-item-num {
        box-shadow: rgb(230, 231, 250) 0px 0px 0px 6px;
    }

.assessment-bg[bg-color="gray"] {
    background-color: var(--color-bg-body-text);
}

    .assessment-bg[bg-color="gray"] .question-item-num {
        box-shadow: 0px 0px 0 6px var(--color-bg-body-text);
    }

    .assessment-bg[bg-color="gray"] .question-box-area, .assessment-bg[bg-color="gray"] .assessment-item-main, .assessment-bg[bg-color="gray"] .assessment-item-top-body {
        background-color: var(--color-bg-s-body-text);
    }

.assessment-header-site > .container > .row {
    align-items: center;
}

.header-assessment-center {
    position: relative;
    margin: 0px 0px 10px;
}

.assessment-title-header i {
    color: var(--color-secondary);
}

.assessment-title-header .form-control {
    font-size: 0.7rem;
}

.assessment-title-header {
    font-size: 0.8rem;
    font-family: var(--font-panel);
    font-weight: 600;
    text-align: left;
    margin: 2px 0px -5px;
    width: calc(100% - 130px);
    line-height: 1.5;
}

.assessment-item-timer {
    border-radius: 24px;
    position: absolute;
    bottom: -2px;
    color: rgb(34, 37, 46);
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: var(--font-panel);
    left: 100%;
    min-width: 90px;
    width: fit-content;
    font-weight: 500;
}

    .assessment-item-timer + .assessment-item-timer {
        left: calc(100% + 97px);
    }

.timer-changes strong {
    font-weight: 700;
    margin-right: 0px;
    min-width: 33px;
    display: inline-block;
}

@media screen and (max-width: 700px) {
    .header-assessment .progress {
        margin-right: 10px;
        height: 0.9rem;
        border-radius: 5px;
        flex: 0 0 76%;
    }

    .assessment-item-timer + .assessment-item-timer {
        left: 0px;
    }

    .header-assessment-left {
        display: none !important;
    }
}

.header-assessment {
    padding: 0px 15px;
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.header-assessment-left h2 {
    font-size: 0.8rem;
    font-family: var(--font-panel);
}

.header-assessment-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .header-assessment-left .global-brand {
        width: 25px;
        height: 25px;
        margin: 0px;
        object-fit: contain;
        border-radius: 5px;
    }

.header-assessment-right {
    display: flex;
    justify-content: flex-end;
}

.header-assessment-icon {
    margin-top: -13px;
    padding: 5px 12px;
    font-family: var(--font-base);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.mask-box .message-assessment, .mask-box-InternetSpeed .internet-speed-box {
    display: block;
}

.message-assessment, .internet-speed-box {
    position: fixed;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 1.3rem;
    display: none;
}

#btn-full-screen {
    position: absolute;
    bottom: -55px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: fit-content;
    background: #ffffff;
    padding: 11px 18px;
    border-radius: 18px;
    box-shadow: rgba(212, 148, 40, 0.73) 1px 1px 8px 0px;
    transition: all 0.3s ease 0s;
    display: inline-block !important;
}

    #btn-full-screen:hover {
        opacity: 0.9;
        box-shadow: rgba(212, 148, 40, 0.73) 1px 1px 15px 2px;
    }

.header-assessment-icon img {
    margin-right: 4px;
    width: 18px;
    margin-bottom: 2px;
}

.header-assessment .progress {
    height: 0.65rem;
    border-radius: 5px;
    width: 100%;
    float: right;
}

.header-assessment > .row {
    justify-content: space-between;
    align-items: center;
}

.assessment-bg .question-box .upload-row {
    border-top: 9px solid rgb(230, 231, 250);
}

.question-box .upload-row {
    padding-left: 30px;
    padding-top: 10px;
}

.visible-aside-menu {
    position: sticky;
    top: 73px;
    width: 20px;
    height: 20px;
    z-index: 9999;
    font-size: 1.2rem;
    margin-left: -48px;
}

    .visible-aside-menu.visible {
        right: 100%;
        left: auto;
        top: 83px;
    }

.Assesment-Layout .core-rail-just-left {
    margin-top: -20px;
}

.visible-aside-menu.visible i::before {
    content: "";
}

.assessment-detail-list {
    position: sticky;
    top: 65px;
    margin-top: -42px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    margin-right: 10px;
    text-align: right;
    z-index: 2;
    float: right;
}

.assessment-list-component .assessment-detail-list {
    margin-top: -36px;
}

.assessment-detail-list .form-control {
    font-size: 12px;
}

.width-60 {
    min-width: 60px;
}

.assessment-btn-text {
    border: none;
    background-color: transparent;
    font-size: 0.75rem;
}

.assessment-btn-text-second {
    font-family: var(--font-panel);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: rgb(124, 124, 124);
}

.assessment-detail-list .assessment-item-title {
    color: var(--color-secondary);
    margin: 0px 0px 4px;
    max-width: 100%;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-base);
}

.assessment-detail-list .dropdown-toggle::after {
    display: none;
}

.i-color-secondary {
    color: var(--color-secondary);
}

.i-color-primary {
    color: var(--color-primary);
}

.i-color-danger {
    color: var(--color-danger);
}

.assessment-search-box-main > .form-group {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

.assessment-search-box-main .assessment-btn {
    height: 33px;
    margin-top: 2px;
}

.assessment-page-title-container.question-bank-container .editable-input {
    width: 100%;
    display: flex;
}

    .assessment-page-title-container.question-bank-container .editable-input .item-upload {
        cursor: pointer;
        min-height: 24px;
        margin: 0px 5px;
        padding: 5px;
        border-radius: 5px;
        width: 10px !important;
        min-width: 40px !important;
    }

.assessment-page-title-container.question-bank-container .title-assessment-page {
    justify-content: space-between;
    background-color: #ffffff;
}

.title-assessment-page {
    background-color: #ffffff;
    display: flex;
    justify-content: flex-start;
    padding: 15px 10px;
    border-radius: 10px;
    align-items: center;
    margin-bottom: 15px;
    font-family: var(--font-panel);
}

.assessment-list .setting-btn {
    bottom: 13px;
}

.title-assessment-page p {
    margin-left: 10px;
}

.title-assessment-page input:focus {
    outline: none;
}

.assessment-tab-content.active {
    display: block;
}

.assessment-tab-content {
    display: none;
}

.filter-box-asssessment {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.assessmnet-title-button.col-lg-6 {
    padding: 0px 13px 0px 0px;
}

.assessment-tabs-head {
    display: flex;
    margin-bottom: 15px;
}

.Profile-page-content .assessment-tabs-head {
    padding: 5px 15px;
}

.assessment-tabs {
    width: 100%;
    position: relative;
}

.assessment-tab, .assessment-setting-tab-item {
    padding: 10px 19px;
    border-radius: 7px;
    font-size: 0.9rem;
    line-height: 1;
    margin-right: 5px;
    background-color: rgb(236, 236, 236);
    font-weight: 500;
}

    .assessment-tab.active, .assessment-setting-tab-item.active-tab, .exam-management-tab.active {
        background-color: var(--rgba-primary-2);
        font-weight: 500;
        color: var(--primary) !important;
    }

.assessment-student-page-tab .assessment-badge {
    right: 0px;
    background-color: transparent;
    color: rgb(118, 119, 120);
    font-weight: 700;
    position: relative;
    font-family: var(--font-panel);
    margin-left: 5px;
}

.assessment-student-page-tab .assessment-tab {
    display: flex;
    align-items: center;
    position: relative;
}

   
.title-assessment-page > p {
    border: none;
    width: calc(100% - 150px);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgb(108, 108, 108);
}

.assessment-bg .media-control > img:first-child {
    width: calc(100% - 100px);
    display: block;
    margin: 0px 50px 20px;
    border-radius: 5px;
}

.assessment-bg .media-control > video:first-child {
    width: calc(100% - 100px);
    margin: auto 50px;
}

.editor-box .fa-paperclip::before {
    color: rgb(78, 78, 78);
}

.assessment-row-input.icon-out-upload .item-upload {
    right: 0px;
}

.assessment-row-input.control-uploader.icon-out-upload {
    height: 36px;
    margin: 0px;
}

.editor-box {
    flex-direction: column;
}

    .editor-box strong {
        font-weight: bold !important;
    }

    .editor-box em {
        font-style: italic;
    }

.editable-input {
    position: relative;
    min-width: 50%;
}

    .editable-input .edit-title {
        position: absolute;
        left: 10px;
        top: 8px;
        color: rgb(221, 221, 221) !important;
    }

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

.editable-input .form-control {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    height: auto;
    font-size: 0.8rem;
    border: 1px solid rgb(208, 214, 219);
    line-height: 1.5;
    font-weight: 500;
    font-family: var(--font-panel);
    padding-left: 32px !important;
}

.assessment-row-input:not(.editor-box) .item-upload, .assessment-row-input.editable-input:not(.editor-box) .item-upload {
    top: -17px;
    padding: 1px;
    font-size: 1rem;
    right: -12px;
    width: 18px !important;
    min-height: 24px !important;
}

div.rz-html-editor + .item-upload {
    top: 6px !important;
    right: 0px !important;
}

.form-group-second {
    display: flex;
    align-items: center;
}

    .form-group-second .assessment-btn {
        white-space: nowrap;
    }

.edit-title {
    color: rgb(64, 64, 64);
}



.right-assessment-search > div {
    display: flex;
    align-items: center;
}

.big-select.right-assessment-search {
    margin: 0px;
    justify-content: flex-start;
    padding-left: 5px;
    min-width: 100% !important;
}

.right-assessment-search {
    justify-content: space-between;
    display: flex;
    min-width: 25% !important;
}

.big-select > div {
    display: flex;
    align-items: center;
    padding: 0px;
}

@media screen and (min-width: 768px) {
    .book-pages-header img {
        margin: 0px;
        width: 90px;
        border-radius: 10px;
    }
}

.big-select > div:last-child label {
    margin-left: 25px;
}

.big-select select.form-control {
    width: 100%;
}

.assessment-search-box-main .form-group > div {
    min-width: 31%;
    display: flex;
    align-items: center;
}

.assessment-detail-list .exam-item-detail {
    margin-bottom: 0px;
    margin-top: 2px;
}

.assessment-detail-list .form-group .form-control {
    display: inline-block;
    width: auto;
}

.assessment-detail-list .form-group label {
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.assessment-detail-label.form-group label {
    margin-bottom: 0px;
    margin-right: 10px;
}

.assessment-detail-label {
    align-items: center;
}

.assessment-search-box-main > .form-control {
    max-width: 350px;
}

.assessment-search-box-main {
    margin-bottom: 12px;
    width: 100%;
    border-radius: 15px;
}

.right-0 {
    right: 0px !important;
}

.assessment-search-box-main label {
    white-space: nowrap;
    font-size: 0.8rem;
    width: auto;
    margin-right: 10px;
}

.assessment-detail-list .dropdown-menu.show {
    right: 0px;
    min-width: 315px;
    max-height: 330px;
    overflow: auto;
    z-index: 1;
    border-radius: 10px;
    border: none;
    box-shadow: rgb(221, 221, 221) -1px 1px 7px;
    transform: none !important;
    top: 23px !important;
    left: auto !important;
}

.assessment-detail-list.button-default-list {
    margin: 0px 5px;
    padding: 0px;
    font-size: 0.8rem;
}

    .assessment-detail-list.button-default-list input[type="checkbox"] {
        vertical-align: middle;
    }

    .assessment-detail-list.button-default-list .dropdown-menu.show {
        min-height: 420px;
        padding-top: 20px;
        right: -8px;
        top: 35px !important;
    }

    .assessment-detail-list.button-default-list .dropdown-menu > div {
        padding: 0px 10px 10px;
    }

.assessment-detail-list {
    position: sticky;
}

.sticky-child {
    position: sticky;
    top: 60px;
    height: fit-content;
    display: inline-block;
}

.assessment-terms-detail .handel-uploader img {
    width: 100%;
    height: 50px;
    object-fit: contain;
    margin: 10px 0px;
}

.assessment-title-box + .assessment-detail-list .dropdown-menu.show {
    top: 37px !important;
}

.assessment-detail-list .dropdown-menu > div {
    padding: 10px;
}

.assessment-input-text {
    padding: 0px 0px 5px;
}

.item-upload.item-uploaded-control .remove-category {
    color: #ffffff;
    font-size: 0.7rem;
}

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

.exam-item {
    border: 1px dashed rgb(186, 186, 186);
    margin-bottom: 5px;
    position: relative;
    padding: 11px;
    border-radius: 9px;
}

    .exam-item > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.exam-item-detail img {
    width: 13px;
    height: auto;
}

.exam-item-detail li span {
    margin-left: 5px;
    font-weight: 500
}

.assessment-mini .assessment-item-dec-p-line strong {
    font-weight: 500 !important
}

.exam-item-detail li {
    margin: 0px 4px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    color: rgb(100, 100, 100);
}

.exam-item-date {
    font-size: 0.6rem;
    color: var(--color-secondary);
}

.exam-item-detail i {
    font-size: 0.75rem;
}

.break-time-de {
    padding: 10px 11px;
    font-size: 0.7rem;
    margin: 10px 0px;
    color: rgb(182, 182, 182);
    background-color: rgb(242, 242, 242);
    border-radius: 5px;
}

.break-time-text {
    border-radius: 5px;
}

.assesment-setting-item:active {
    cursor: grabbing;
}

.assesment-setting-item {
    display: flex;
    background-color: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 15px;
    line-height: 1.3;
    align-items: center;
    cursor: grab;
    justify-content: space-between;
    position: relative;
}

    .assesment-setting-item:hover .remove-category {
        opacity: 1;
    }

    .assesment-setting-item.break-time {
        background-color: rgb(247, 247, 247);
        color: rgb(146, 146, 146);
    }

#AssSettingList .fa-times::before {
    content: "";
    display: flex;
    margin-top: 1px;
    margin-right: 1px;
}

@media screen and (min-width: 1920px) {
    #AssSettingList .fa-times::before {
        margin-top: 1px;
        margin-right: 1px;
    }
}

#AssSettingList .assesment-setting-item .remove-category {
    width: 12px;
    height: 12px;
    right: -4px;
    border-radius: 16px;
    font-size: 0.6rem !important;
}

.assessment-result-setting + .assessment-btn-row {
    justify-content: flex-start;
}

.assessment-result-setting {
    display: flex;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.text-detail {
    color: rgb(178, 178, 178);
    font-size: 0.7rem;
}

.assessment-terms-detail label {
    min-width: 76px;
    font-weight: 600;
    margin: 5px 0px 15px;
    display: flex;
    align-items: flex-start;
}

.assessment-terms-detail.row-two-switch span > label {
    padding-left: 30px;
}

.assessment-terms-detail.row-two-switch .periodic {
    margin-right: 0px !important;
}

.assessment-terms-detail.row-two-switch {
    display: flex;
}

@media screen and (max-width: 768px) {
    .left-side-book-de img {
        min-width: fit-content;
        width: 200px;
        max-height: fit-content;
        max-width: 100%;
    }

    .publisher-dec img {
        width: 100px;
        height: auto;
        margin: 10px 0px;
    }

    .book-create {
        padding: 0px;
    }

    .left-side-book-de {
        display: flex;
        justify-content: center;
        padding: 5px;
        flex-direction: column;
        align-items: center;
    }

    .Introduction-btn {
        font-family: var(--font-base);
        max-width: 200px;
        font-size: 0.8rem;
    }

    .check-box-row-two .form__radio-group, .check-box-row-two .form__checkbox-group {
        font-size: 0.9rem;
        width: 50%;
    }

    #paint-drag {
        position: fixed;
        left: 6px;
        z-index: 999999999;
        top: 47px;
        right: 0px;
        width: 95vw;
    }

    .paint-box.resizeable-paint {
        height: 87vh;
    }

    #paint-drag .paint-content {
        height: auto;
        max-height: calc(100% - 66px);
    }

    .scroll-down #paint-drag {
        top: 30px;
    }

    .list-item-assessment.question-bank .assessment-title-row {
        min-width: 216px;
    }

    .mapper-div {
        overflow: auto;
        width: 100vw;
    }

    #paint-drag .color-picker-palette, .paint-box .color-picker-palette {
        width: 300px;
        margin-top: 51px;
        height: 252px !important;
    }

    .chat {
        height: calc(100vh - 65px);
        bottom: 60px;
    }

    .confirmed-btn, .confirmation-btn {
        top: 14px;
    }

    .global-body.Assesment-Layout .left-rail {
        z-index: 10 !important;
    }

    .global-main .left-rail.open-left-menu {
        display: block !important;
    }

    #productDownload .app {
        font-size: 10px;
        min-width: 50px;
        margin: 0px 5px;
        width: calc(25% - 10px) !important;
    }

    .product-download {
        margin: 0px -10px;
    }

    #productDownload {
        padding: 0px;
        bottom: -12px;
        left: 9px;
        height: auto !important;
    }

    .item-assessment-student ul {
        display: flex;
        flex-wrap: wrap;
    }

        .item-assessment-student ul li {
            width: 43%;
        }

    .assessment-terms-detail.row-two-switch {
        flex-wrap: nowrap;
        flex-direction: row !important;
    }

    .res-mobile {
        margin: 0px;
    }

        .res-mobile .d-flex {
            flex-wrap: wrap;
        }

        .res-mobile > div {
            padding: 0px;
        }

            .res-mobile > div.book-row {
                padding: 15px;
            }
}

@media screen and (max-width: 500px) {
    .item-assessment-student ul li {
        width: 100%;
    }

    .app {
        width: calc(50% - 10px) !important;
    }
}

@media screen and (min-width: 1200px) {
    .assessment-terms-detail.row-two-switch {
        flex-wrap: nowrap;
        flex-direction: row !important;
    }
}

.row-two-switch > span i {
    color: rgb(154, 154, 154);
    font-size: 1.1rem;
    margin-left: 2px;
}

.row-two-switch > span {
    display: flex;
    align-items: center;
}

.assessment-terms-detail .form-control {
    font-size: 0.8rem;
    padding: 5px 8px;
    height: auto;
}





.assessment-terms-button {
    align-items: center;
    display: flex;
}

.assessment-terms-detail .btn-success {
}

.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;
    }

.right-side-setting {
    border-left: 1px solid rgb(243, 242, 239);
    padding-left: 20px;
    margin-left: 10px;
}



.mobile-item-button {
    display: none;
}

@media screen and (max-width: 768px) {
    .book-page-item img {
        height: 175px;
        max-width: 150px;
    }

    .book-pages > .row > div {
        padding: 0px 7px;
    }

    .book-page-box > .row > .col-12 {
        padding: 0px;
    }

    .book-page-item .remove-category {
        top: 5px;
        right: 3px;
    }

    .question-box.question-box-right .form__label-radio.form__radio-label > span:first-child {
    }

    .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;
    }

  
    .book-pages {
        padding: 0px;
        margin: 10px 0px 0px;
    }

        .book-pages > .row {
            margin: 0px;
        }

    .book-pages-header {
        margin-bottom: 0px;
        margin-right: 5%;
        margin-top: 20px;
    }

    .book-pages > .row > .col-12 {
        margin-top: 10px;
        padding: 0px;
    }

    .book-page-item {
        width: fit-content;
        min-width: fit-content;
        margin: auto;
        border: 1px solid rgb(221, 221, 221);
    }

    .assessment-btn-list {
        position: absolute;
        top: 12px;
        right: 15px;
    }

    .book-page-item + span {
        left: 0px;
        right: 0px;
    }

    .book-list .row {
        width: 100%;
        margin: 7px 0px 0px;
    }



 
        .assessment-title-box.fixed ~ .assessment-detail-list {
            position: fixed;
            top: 108px;
        }

   
    .assessment-item-timer {
        bottom: 0px;
        left: auto;
    }



   

    .Assesment-Layout .core-rail-just-left {
        margin-top: 40px;
    }

    .global-main .left-rail {
        padding: 0px;
    }

    .assessment-title-menu {
        font-size: 0.9rem;
    }

    .assessment-item-menu i {
        font-size: 0.8rem;
    }

    .assessment-item-menu a {
        font-size: 0.7rem;
    }

    

    .card-order-header .order-time {
        min-width: 23%;
        font-size: 0.75rem;
    }

    .status-order > div i {
        font-size: 16px;
    }

    .card-order {
        padding: 7px 35px 7px 7px;
    }

    .Profile-page-content a.acc-item {
        font-size: 1.5rem;
        transform: scale(0.7);
        right: 4px;
    }

    .mobile-item-button {
        display: block;
        position: absolute;
        right: 0px;
    }

        .mobile-item-button ul {
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
        }

    .teacher-buttons-control {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .reply-row-item {
        margin-right: 70px;
    }

        .reply-row-item > div:last-child {
            justify-content: end
        }

    .assessment-panel-menu {
        display: flex;
        margin: 0px;
        flex-wrap: wrap;
        padding: 0px;
    }

    .assessment-left-panel {
        padding: 0px;
        display: flex;
    }

        .assessment-left-panel > a {
            display: flex;
            width: auto;
            text-align: center;
        }
}

@media screen and (max-width: 575px) {
    .assessment-row-input select {
        margin-right: 0px;
        padding: 7px 3px;
        font-size: 0.65rem !important;
    }

    .assessment-item-header {
        margin-bottom: 10px;
    }

    .assessment-list.row > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .core-rail-just-left > .row {
        padding: 3px;
    }
}

.assessment-list .assessment-item {
    padding: 13px 20px 20px;
}

.list-item-assessment {
    flex-direction: row;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 3px 0px;
    margin: 0px !important;
}

@media screen and (min-width: 360px) and (max-width: 575px) {
    .assessment-item-btn-area .assessment-btn {
        width: 150px;
        margin: 10px 0px 0px !important;
    }
}

.assessment-list:not(.list-item-assessment) .edit-assessment ~ .assessment-item-dec {
    height: 30px;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.3;
}

.crumbs {
    text-align: left;
    overflow: auto scroll;
    padding-bottom: 0px;
    margin: 10px 0px -4px;
    -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 17px, black 17px);
    -webkit-mask-size: 100% 20000px;
    -webkit-mask-position: left bottom;
    transition: mask-position 0.3s ease 0s, -webkit-mask-position 0.3s ease 0s;
}

    .crumbs:hover {
    }

    .crumbs h1 {
        padding: 0px 0px 11px;
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 600;
        color: rgb(128, 147, 167);
        text-align: left;
    }

    .crumbs ul {
        margin-bottom: 5px;
        list-style: none;
        display: flex;
    }

        .crumbs ul li {
            display: inline;
            margin-right: 5px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .crumbs ul li a:hover {
                color: rgb(128, 147, 167) !important;
            }

            .crumbs ul li a.active:hover {
                color: #fff !important;
            }

            .crumbs ul li a {
                display: block;
                float: left;
                background: rgb(243, 245, 250);
                text-align: center;
                padding: 12px 0px 12px 15px;
                position: relative;
                margin: 0px;
                font-size: 0.65rem;
                text-decoration: none;
                color: rgb(128, 147, 167);
            }

                .crumbs ul li a::after {
                    content: "";
                    border-top: 1.12rem solid transparent;
                    border-bottom: 1.04rem solid transparent;
                    border-left: 9px solid rgb(243, 245, 250);
                    position: absolute;
                    right: -9px;
                    top: 0px;
                    z-index: 1;
                }

                .crumbs ul li a::before {
                    content: "";
                    border-top: 1.15rem solid transparent;
                    border-bottom: 1.15rem solid transparent;
                    border-left: 10px solid #ffffff;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                }

            .crumbs ul li:first-child a, .list-item-assessment .crumbs ul li:first-child a {
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                padding-left: 7px;
                padding-right: 3px;
            }

                .crumbs ul li:first-child a::before, .list-item-assessment .crumbs ul li:first-child a::before {
                    display: none;
                }

            .crumbs ul li:last-child a, .list-item-assessment .crumbs ul li:last-child a {
                padding-right: 10px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }

                .crumbs ul li:last-child a::after {
                    display: none;
                }

            .crumbs ul li a.active {
                background: var(--color-tertiary);
                color: #ffffff;
            }

            .crumbs ul li a.break {
                color: var(--color-tertiary);
                padding: 12px 0px 12px 13px;
            }

            .crumbs ul li:last-child a.break {
                padding-right: 6px;
            }

            .crumbs ul li a.active::after {
                border-left-color: var(--color-tertiary);
                color: #ffffff;
            }

.list-item-assessment .crumbs ul li a::after {
    border-top: 1.15rem solid transparent;
    border-bottom: 1.15rem solid transparent;
    border-left: 9px solid rgb(243, 245, 250);
    right: -8px;
    top: 0px;
}

.list-item-assessment .crumbs ul li a::before {
    border-top: 1.15rem solid transparent;
    border-bottom: 1.15rem solid transparent;
    border-left: 9px solid #ffffff;
}

.list-item-assessment .crumbs ul li a.active::after {
    border-left-color: var(--color-tertiary);
    color: #ffffff;
}

.list-item-assessment .crumbs ul li a {
    border-radius: 2px;
}

.list-item-assessment .crumbs ul li a {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 12px;
    font-weight: 600;
}

.menu-out + .assessment-item-title .list-item-assessment .crumbs ul li a {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 12px;
    font-weight: 600;
}

.big-event-item .event-item-control {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.exam-item-detail {
    display: flex;
}

.setting-btn {
    bottom: 18px;
    right: 19px;
    position: absolute;
    color: rgb(158, 158, 158) !important;
}

.setting-row-fit .setting-btn {
    position: unset;
}

.assessment-item-title span {
    font-size: 0.7rem;
}

.list-num {
    position: fixed;
    bottom: 0px;
    width: 60px;
}

.show-right a {
    padding: 0px 2px;
    background-color: var(--color-secondary);
    border-radius: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    transition: opacity 0.3s ease 0s;
    color: #fff !important;
}

    .show-right a:hover {
        opacity: 0.8;
    }

.list-row-mini {
    display: flex;
    margin: 0px 10px;
    justify-content: end;
}

    .list-row-mini span strong {
        font-weight: 600;
    }

    .list-row-mini span {
        padding: 0px 8px;
        font-weight: 400;
    }

    .list-row-mini .show-right, .qustion-list-num {
        padding: 7px;
        font-weight: 700;
        font-family: Montserrat;
        font-size: 0.9rem;
        border-radius: 6px;
        background: linear-gradient(145deg, #fff, #fff);
        box-shadow: rgba(183, 166, 204, 0.59) 8px 2px 60px, #fff -20px -20px 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.list-row-mini {
    display: flex;
    justify-content: end;
}

.list-num-row .form__checkbox-button, .list-num-row .form__checkbox-button::after {
    width: 15px;
    height: 15px;
    top: -17px;
    z-index: 9;
    color: rgb(155, 161, 255);
    left: -8px;
    font-size: 1rem;
    font-weight: 400;
}

    .list-num-row .form__checkbox-button::after {
        top: 3px;
        left: 7px;
    }

.list-num .form__radio-group.active, .list-num .form__checkbox-group.active, .list-num-row .form__radio-group.active, .list-num-row .form__checkbox-group.active {
    background: rgb(155, 161, 255);
    color: #fff !important;
}

.list-num-row .qustion-list-num li {
    margin: 0px 4px;
}

.list-num-row .qustion-list-num li, .list-num .qustion-list-num li {
    margin: 0px 6px;
    min-width: 31px;
    flex: 0 0 28px;
}

.list-num .qustion-list-num li {
    margin: 6px 0px;
}

.list-num-row .qustion-list-num {
    width: fit-content;
    display: flex;
    overflow: auto;
    margin: auto;
    justify-content: start;
    max-width: 100%;
}

.list-num-row .question-right-list {
    top: 20px;
    width: 100%;
}

.list-num ::-webkit-scrollbar, .list-num-row ::-webkit-scrollbar {
    visibility: hidden;
    background-color: rgb(221, 221, 221);
    width: 10px;
    height: 10px;
    transition: all 0.3s ease 0s;
}

.list-num ::-webkit-scrollbar-thumb, .list-num-row ::-webkit-scrollbar-thumb {
    transition: all 0.3s ease 0s;
    visibility: hidden;
}

.list-num:hover ::-webkit-scrollbar, .list-num-row:hover ::-webkit-scrollbar {
    visibility: visible;
}

.list-num:hover ::-webkit-scrollbar-thumb, .list-num-row:hover ::-webkit-scrollbar-thumb {
    visibility: visible;
}

.list-num-row {
    margin-left: 1%;
    min-height: 75px;
    display: flex;
}

.list-num {
    position: fixed;
    bottom: 0px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.fixed-page-num {
    flex: 0 0 5%;
    width: 100%;
    padding: 10px 0px;
}

    .fixed-page-num + .question-box-area {
        margin-top: 10px;
        min-height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.main-ready-exam > div > .row {
    justify-content: center;
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.setting-remark {
    width: 100%;
    display: block;
    font-size: 0.85rem;
    padding: 25px 15px 24px;
    font-weight: 600;
    font-family: var(--font-panel);
    text-align: center;
    color: rgb(64, 64, 64);
    border-bottom: 4px solid rgb(230, 231, 250);
    line-height: 1.5;
}

    .setting-remark + .ready-exam-title {
        padding: 10px;
    }

.blazored-toast-container {
    z-index: 9;
    width: 100%;
}

.break-time-menu {
    display: flex;
    top: 180px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

    .break-time-menu .icon-btn a i {
        font-size: 1.2rem;
        margin: 0px 10px;
        color: var(--color-secondary);
    }

    .break-time-menu .icon-btn a {
        font-size: 0.7rem;
        align-items: center;
        display: flex;
    }

.setting-remark:empty, .qustion-list-num:empty {
    display: none;
}

.break-time-menu .icon-btn {
    margin: 0px;
}

.break-time-menu .qustion-list-right {
    display: flex;
    width: 100%;
    margin: 0px 0px 0px 40px;
    justify-content: space-between;
}

.break-time-menu.list-num .qustion-list-num {
    width: 50%;
    margin: 0px 20px;
}

@media screen and (max-width: 768px) {
    .full-profile-user .teacher-dec-full {
        margin-top: 30px;
    }

    .question-box-area .img-magnifier-glass {
        top: 0px !important;
        height: 100% !important;
    }

    .break-time-menu, .break-time-menu .qustion-list-right, .break-time-menu.list-num .qustion-list-num {
        width: 100%;
    }

    .assessment-item-menu a {
        white-space: nowrap;
        padding: 13px 0px 10px;
        width: 100%;
    }

    .question-row-main + .sticky-child {
        position: relative !important;
    }

    .change-question-num {
        z-index: 1;
    }

    .question-preview {
        left: 0px;
        width: 100% !important;
    }

    .mini-header span {
        font-weight: 600;
        padding: 3px;
        font-size: 0.9rem !important;
    }
}

.media-presentor {
    margin-top: 15px;
    padding: 5px 10px 10px;
    text-align: center;
}

    .media-presentor > img, .media-presentor > video, .media-presentor > audio {
        border-radius: 20px;
        object-fit: contain;
        text-align: center;
        padding: 4px;
        margin: 0px auto 8px;
        display: inline-block;
        max-height: 650px;
        width: 100% !important;
    }

.finish-button {
    margin-top: 55px;
    float: right;
    margin-right: -3px;
}

.header-assessment:empty, .row:empty {
    display: none;
}

.media-presentor ~ .item-exam.assessment-item-main {
    padding-top: 3px;
}

.assessment-bg video {
    border-radius: 15px;
    object-fit: cover;
    display: block;
}

.assessment-bg section {
    opacity: 1;
    transition: opacity 500ms ease-in-out 0s;
}

.cam-box-component {
    background-color: #ffffff;
    padding: 5px;
    position: fixed;
    top: 67px;
    left: 10px;
    border-radius: 15px;
    display: flex;
    width: 50px;
}

.camView-component {
    position: relative;
    float: left;
    cursor: pointer;
    background-color: rgb(191, 10, 10);
    animation-name: recording;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    height: 10px;
    border-radius: 50%;
    margin: 3px 5px 0px;
    width: 10px;
}

@keyframes recording {
    0% {
        background-color: rgb(191, 10, 10);
    }

    100% {
        background-color: white;
    }
}

.cam-box {
    background-color: #ffffff;
    padding: 5px;
    display: inline-block;
    position: fixed;
    top: 85px;
    left: 10px;
    border-radius: 15px;
}

.removed {
    display: none;
}

.invisible {
    opacity: 0.2;
}

.camera-footer-button .dis-flex {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}

.camera-footer-button {
    padding: 0px 10px;
    justify-content: end;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 39%;
    max-width: 270px;
}

.taken-photo-box {
    align-items: flex-start;
    padding: 15px 0px;
    display: flex;
}

.taken-photo {
    width: 100%;
    border: none;
    border-radius: 5px;
    object-fit: contain;
    max-height: 134px;
}

.webcam-screen .dis-flex {
    width: 100%;
    justify-content: end;
}

.webcam-screen {
    border-radius: 6px;
    width: 100%;
}

.camView {
    position: relative;
    float: left;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

    .camView p {
        position: absolute;
        padding: 5px;
        background-color: rgba(255, 111, 0, 0.85);
        color: #ffffff;
        border: 1px dashed rgba(255, 255, 255, 0.7);
        z-index: 2;
        font-size: 12px;
    }

    .camView p {
        right: 0px;
    }

.highlighter {
    background: rgba(0, 255, 0, 0.25);
    border: 1px dashed #ffffff;
    z-index: 1;
    position: absolute;
}

.icon-btn:empty {
    display: none;
}

.add-exam-box {
    flex: 1 1 34%;
    display: flex;
    flex-wrap: wrap;
}

.w-34 {
    width: 34% !important;
}

.editable-input .form-control.w-34 {
    width: 400px !important;
}

.added-exam-item {
    line-height: 30px;
    padding: 0px 10px;
    border: 1px solid rgb(204, 204, 204);
    margin: 0px 5px;
    border-radius: 5px;
    position: relative;
    height: fit-content;
}

.form-group-span {
    padding: 38px 0px 0px;
    display: inline-block;
}

.height-30px {
    height: 30px;
}

.added-exam-item:hover .remove-category {
    opacity: 1;
}

@media (max-width: 1100px) {
    .assessment-bg video, .camView {
        width: 150px;
        height: 150px;
    }
}

@media (min-width: 992px) {
    .global-nav-search-assessment {
        margin-left: 0px;
    }

    .profile-tabs + .result-tabs .assessment-mini .global-nav-search-assessment {
        min-width: 50px !important;
    }

    .lg-custom-2 {
    }
}

.package-list .img-magnifier-container .remove-category {
    display: none !important;
}

@media (max-width: 992px) {
    .assessment-bg video, .camView {
        width: 100%;
        height: 100%;
    }

    .global-nav-search-assessment {
        margin-left: 20px;
    }

    .assessment-search-box-main.search-box-item-space .form-group > div > .global-nav-search-assessment {
        margin: 0px;
    }

    .assessment-search-box-main.search-box-item-space .form-group > div > .periodic + .global-nav-search-assessment {
        margin: 0px 10px 0px 21px;
    }

    .header-assessment-right {
        margin-left: 45px;
        margin-top: 12px;
    }

    .periodic {
        margin: 0px 0px 0px 13px !important;
    }

    .select-search > input {
        font-size: 0.75rem;
    }

    .mobile-filter-header {
        display: none;
    }

        .mobile-filter-header ~ label {
        }

    .select-values.select-controls {
        padding: 7px;
    }

    .check-box-input::after {
        top: 1px !important;
    }
}

@media (min-width: 992px) {
    .right-assessment-search .form-control {
        width: fit-content;
    }

    .right-assessment-search > div:first-child {
        justify-content: flex-end;
    }
}

@media (max-width: 992px) {
    .list-item-assessment .crumbs + .assessment-btn-row {
        z-index: 1;
        top: 10px !important;
    }

        .list-item-assessment .crumbs + .assessment-btn-row a {
            font-size: 0.92rem;
            bottom: auto;
            top: 0px;
            color: rgb(216, 216, 216) !important;
        }

    .sticky-child {
        top: 62px;
    }

    .assessment-search-box-main .form-group > div.assessment-box {
        min-width: auto;
    }

    .assessment-search-box-main {
        padding: 0px 6px;
        background-color: transparent;
    }

    .assessment-terms-detail {
        flex-wrap: wrap;
    }

        .assessment-terms-detail label {
            margin-bottom: 9px;
        }

        .assessment-terms-detail::after {
            display: none;
            top: 5px;
            transform: none;
        }

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

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

    .search-box-item-space .assessment-box {
        margin-left: 10px;
    }

    .assessment-list .setting-btn {
        bottom: auto;
        top: 50px;
    }

    .assessment-tab {
        font-size: 0.8rem;
        min-width: 80px;
    }

    .assessment-tabs-head {
        overflow: auto;
        padding-bottom: 8px;
    }

    .assessment-tabs-head {
    }

        .assessment-tabs-head::-webkit-scrollbar {
            height: 7px;
            width: 14px !important;
        }

        .assessment-tabs-head::-webkit-scrollbar-track {
            background: #fff !important;
        }

        .assessment-tabs-head::-webkit-scrollbar-thumb {
            background-color: rgb(228, 228, 228) !important;
            border-radius: 13px !important;
            border: 2px solid rgb(228, 228, 228) !important;
        }

    .assessment-tabs {
        padding-bottom: 15px;
    }

    .div-bg-white .about-item {
        padding: 15px;
    }

    .radio-row label {
        font-size: 0.78rem;
    }

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

    .cam-box {
        margin-bottom: 15px;
        position: relative;
        top: 8px;
        left: 0px;
    }
}

.camView canvas {
    display: none;
}

@media (min-width: 560px) {
    .search-input-icon {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1300px) {
    .assessment-result-setting {
        flex-direction: column;
    }

    .right-side-setting {
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        border-left: 0px;
        border-top: 1px solid rgb(235, 234, 234) !important;
        padding-top: 21px !important;
        margin: 21px 0px 0px !important;
    }
}

@media (max-width: 560px) {
    .main-ready-exam .assessment-btn.color-primary {
        right: 85px;
        bottom: 5px;
    }

    .assessment-result-setting {
        flex-flow: column;
    }

    .question-type > .assessment-row-input {
        justify-content: space-between;
        margin-left: 33px;
        margin-top: 2px;
    }

    .question-row-main + .sticky-child {
        order: -1;
        top: 0px;
        padding: 10px !important;
    }

    .assessment-detail-list {
        top: 0px;
        margin: -31px;
    }

    .order-item-box .order-item-price {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .quantity {
        margin-bottom: 10px;
    }

    .order-item-price .amount {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .search-box-item-space {
        padding-top: 10px !important;
    }

        .search-box-item-space .assessment-box {
            position: absolute;
            top: 2px;
            right: 2px;
        }

    .search-button {
        display: none;
    }

    .assessment-box {
        order: -1;
        margin-bottom: 8px;
    }

    .assessment-search-box-main {
        padding: 0px;
        border-radius: 0px;
        margin: 0px 0px 2px 2px;
        width: auto;
    }

        .assessment-search-box-main .form-group > div {
            margin-bottom: 6px;
            margin-left: 0px !important;
        }

    .search-input-icon {
        position: absolute;
        display: block;
        top: 13px;
        right: 9px;
        color: rgb(108, 117, 126);
    }

    .assessment-search-box-main select {
        background-image: url("/img/icon/down-arrow.svg");
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) 50%;
        background-blend-mode: difference;
        background-size: 10px;
        font-size: 14px;
        min-width: 160px;
        z-index: 0;
        appearance: none;
        padding: 10px !important;
    }

    .assessment-search-box-main label {
        font-size: 0.8rem;
        margin: 3px 12px 0px 0px;
    }

    .core-rail-just-left > .row > div.col-12 {
        padding: 0px 5px;
    }

    .assessment-search-box-main .form-group select {
        padding: 6px 7px !important;
    }

    .assessment-search-box-main .form-group > div:first-child {
        min-width: 100%;
        position: relative;
        margin-bottom: 6px;
    }

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

    .assessment-setting-tab-item, .exam-management-tab .assessment-tab {
        text-align: center;
    }

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

    .global-nav-search-assessment {
        margin-right: 0px;
    }

    .assessment-search-box-main .assessment-btn {
        min-width: 33px;
        height: 31px;
        width: 31px;
        min-height: 31px;
        padding: 3px;
        font-size: 0.8rem;
        justify-content: center;
    }

    .assessment-search-box-main .flex-date-child .assessment-btn {
        width: auto !important;
    }

    .layout-box-assessment .assessment-item-title h5 {
        width: calc(100% - 50px);
    }
}

.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;
}

.success-dropdown {
    background: var(--border-color-toast-success) !important;
    border-color: var(--border-color-toast-success) !important;
}

    .success-dropdown option {
        background: #fff !important;
    }

.danger-dropdown, .danger-dropdown.form-control:focus {
    background: var(--border-color-toast-danger) !important;
    border-color: var(--border-color-toast-danger) !important;
}

    .danger-dropdown option {
        background: #fff !important;
    }

@media (max-width: 560px) {
    .assessment-result-setting > div .assessment-terms-detail:first-child ~ .assessment-terms-detail {
        margin: 20px 0px 10px;
    }

    .sticky-child .assessment-result-setting > div {
        width: 100%;
        display: inline-block;
        border: 0px;
        padding: 0px;
        margin: 8px 0px 0px;
    }

    .right-side-setting {
        margin-top: 21px !important;
        border-top: 1px solid rgb(235, 234, 234) !important;
        padding-top: 21px !important;
    }

    .right-rail.menu-mobile .right-side-setting {
        border-left: 0px;
        margin-left: 0px;
        margin-top: 15px !important;
        padding-left: 0px !important;
        padding-top: 15px !important;
    }

    .right-rail.menu-mobile .main-result-setting.assessment-result-setting {
        width: 100%;
        padding: 13px 6px;
        margin-bottom: 0px;
    }

    .editable-input {
        width: 100%;
    }
}

.label-drag-answer {
    top: -1px;
    left: -1px;
    padding: 3px;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    right: -2px;
    min-height: 18px;
}

.DfffropAreaFillInTheBlank .label-drag-answer {
    bottom: -2px;
    text-align: center;
    border-radius: 5px;
    right: -1px;
}

.drag-question-row .fill-blank-darg video {
    width: 150px;
    border-radius: 5px;
    height: 80px;
    margin-top: 21px !important;
}

.draggableAnswer audio {
    margin: 25px 5px 0px;
}

.DfffropAreaFillInTheBlank video {
    margin-top: 20px !important;
}

    .DfffropAreaFillInTheBlank audio + .label-drag-answer, .DfffropAreaFillInTheBlank video + .label-drag-answer, .DfffropAreaFillInTheBlank .img-magnifier-container + .label-drag-answer {
        bottom: auto;
        border-radius: 5px 5px 0px 0px;
        right: -1px;
        text-align: left;
    }

.drag-question-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 30px 20px;
}

    .drag-question-row > ol:first-child {
        margin-bottom: 10px;
        min-width: 150px;
        min-height: 70px;
    }

.feed-shared-body .drag-question-row > ol:first-child {
    min-width: 50%;
}

.exam-map {
    display: flex;
    padding: 10px 0px 0px 10px;
    position: sticky;
    top: 0px;
    z-index: 1;
    background: rgb(230, 231, 250);
    margin-bottom: -10px;
}

    .exam-map ~ .exam-map {
        background-color: transparent;
    }

.next-exam {
    flex: 1 1 auto;
    text-align: right;
}

.next-exam, .pre-exams {
    font-family: var(--font-panel);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(124, 124, 124) !important;
}

.pre-exams {
    padding-bottom: 5px;
}

    .next-exam i, .pre-exams i {
        color: var(--color-secondary);
        font-size: 1rem;
        vertical-align: middle;
    }

.cursor-pointer {
    cursor: pointer !important;
}

.width-content {
    width: fit-content !important;
}

.assessment-setting-tab {
    display: flex;
    position: absolute;
    top: 0px;
    left: 10px;
}

.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;
}

.assessment-setting-tab-item, .exam-management-tab .assessment-tab {
    color: rgb(78, 78, 78);
    font-size: 12px;
    padding: 10px;
    cursor: pointer;
}

    .assessment-setting-tab-item.active-tab {
        border-right: 1px solid rgb(204, 204, 204);
        border-bottom: 1px solid rgb(204, 204, 204);
        border-left: 1px solid rgb(204, 204, 204);
        border-image: initial;
        border-top: none;
    }

.assessment-modal-container {
    margin-top: 30px;
}

.full-width-top-btn {
    flex: 1 1 auto;
    text-align: right;
}

.add-question-source-btn {
    width: 100%;
    border-radius: 34px;
    border: none;
    margin-bottom: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgb(69, 69, 69);
    padding: 5px 0px;
    background: rgb(155, 255, 162);
}

.assessment-show-per-question {
    line-height: 37px;
    margin-right: 10px;
}

.audio-options {
    line-height: 54px;
    margin: 0px auto;
}

.audio-options {
    justify-content: center;
    display: flex;
    align-items: center;
}

    .audio-options label {
        margin: 0px 0px 0px 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }

.response-item-row .audio-options label {
    margin: 0px 12px 0px 4px;
}

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

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

.fill-blank-darg, .DfffropAreaFillInTheBlank {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .fill-blank-darg li:active, .DfffropAreaFillInTheBlank li:active {
        cursor: grabbing;
    }

    .fill-blank-darg li, .DfffropAreaFillInTheBlank li {
        position: relative;
        margin: 5px;
        border-radius: 6px;
        background: rgb(192, 195, 241);
        padding: 9px;
        font-size: 0.8rem;
        font-family: var(--font-base);
        font-weight: 600;
        color: rgb(98, 98, 98);
        cursor: grab;
        border: 2px solid var(--color-secondary);
    }

.DfffropAreaFillInTheBlank {
    min-width: 80px;
    min-height: 34px;
    padding: 0px 6px;
    border: 1px dashed rgb(169, 165, 165);
    border-radius: 5px;
    width: fit-content;
}

.bar-text-control {
    min-height: 85px;
    position: relative;
}

.bar-wrap {
    font-family: var(--font-panel);
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    background-color: var(--bar-wrap-back-color);
}

    .bar-wrap .bar {
        height: 15px;
        transition: width 0.15s ease-out 0s;
        background-color: var(--color-secondary);
        border-radius: 100px;
        box-shadow: rgba(0, 0, 0, 0.29) -1px -1px 10px inset;
    }

    .bar-wrap span {
        position: absolute;
        left: 50%;
        right: 0px;
        color: rgb(34, 34, 34);
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        font-size: 0.7rem;
        font-family: var(--font-base);
    }

.question-generated-items {
    display: flex;
    flex-wrap: wrap;
}

.fill-blank-darg li i:last-child, .DfffropAreaFillInTheBlank li i:last-child {
    margin-right: 3px;
}

.fill-blank-darg li i, .DfffropAreaFillInTheBlank li i {
    margin: 0px -1px;
    color: var(--color-secondary);
}

.question-box-area > .row {
    margin-right: 10px;
    align-items: center;
}

.post-view-item-row .question-box-area > .row {
    margin-right: -12px;
}

.post-view-item-row .question-box .form__radio-group label, .post-view-item-row .question-box .form__checkbox-group label {
    text-align: left;
    align-items: flex-start;
}

@media screen and (min-width: 768px) {
    .col-md-12.col-sm-12.main-ready-exam > .col-11 {
        flex: 0 0 100%;
        padding-right: 75px;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .book-pages-header {
        margin-left: 10px;
    }

    .form-group-span {
        padding: 0px;
    }

    .qustion-list-num {
        max-height: calc(100vh - 190px);
        overflow-y: auto;
    }

    .question-right-list {
        top: 150px;
    }

    .question-box-area > .row {
        margin-right: 0px;
    }
}

.col-md-6 + .sticky-box .height-control {
    min-height: 100px;
}

.bar-wrap-text {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: end;
    top: 0px;
    right: 0px;
}

.bar-wrap-box {
    width: 200px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 0px;
    line-height: 1.5;
}

    .bar-wrap-box p {
        margin: 0px;
        font-size: 0.75rem;
        font-weight: 500;
    }

.question-item-hover {
    position: absolute;
    width: 75px;
    height: 65px;
    display: inline-block;
    top: 0px;
    left: 0px;
}

.question-preview {
    min-width: fit-content;
    width: 700px;
    border: 1px solid rgb(224, 224, 224);
    position: absolute;
    top: 80px;
    background-color: #ffffff;
    padding: 20px;
    display: none;
    z-index: 2;
    border-radius: 5px;
    white-space: pre-wrap;
    overflow: unset;
    line-height: 1.5;
    text-overflow: ellipsis;
    box-shadow: rgb(222, 222, 222) 1px 1px 4px;
}

    .question-preview:empty {
        display: none !important;
    }

    .question-item-hover:hover + .question-preview, .question-preview:hover {
        display: block;
    }

.question-image-row {
    width: 100%;
    text-align: center;
}

.question-preview img {
    margin-bottom: 15px;
    max-height: inherit;
    width: 100%;
    border-radius: 10px;
}

.del {
    text-decoration: line-through;
}

@media (max-width: 768px) {
    .sticky-box {
        position: relative;
    }

    .assessment-search-box-main .form-group > div {
        margin-bottom: 5px;
    }

    .assessment-search-box-main > .form-group {
    }

    .question-box-area > .row {
        align-items: center;
        padding-left: 10px;
    }

    .bar-wrap-box {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 10px;
        background-color: rgb(207, 209, 255);
        margin-top: -15px;
    }

    .bar-wrap-text {
        right: 0px;
        position: relative;
    }
}

.message-warning {
    min-height: 55px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.message-warning-text {
    margin: auto auto 15px;
    width: auto;
    display: inline-block;
    background: rgb(255, 249, 239);
    padding: 10px;
    border-radius: 5px;
    color: rgb(229, 184, 105);
    font-family: var(--font-panel);
    font-weight: 500;
    font-size: 0.7rem;
    box-shadow: rgba(171, 171, 171, 0.32) 1px 1px 5px;
    border-left: 4px solid var(--color-warning);
}

.counter-warning, .counter-danger {
    display: flex;
    width: 45px;
    height: 45px;
    background: rgb(240, 199, 127);
    color: rgb(255, 249, 239);
    margin: 0px auto;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-family: var(--font-panel);
    border-radius: 50px;
    font-weight: 700;
}

.pulse-counter .counter-danger.pulse::before, .pulse-counter .counter-danger.pulse::after, .counter-danger {
    background-color: var(--color-tertiary) !important;
}

    .counter-danger[value="0"] + span, .counter-warning[value="0"] + span, .counter-danger[value="0"], .counter-warning[value="0"] {
        display: none;
    }

.assessment-header-site img {
    width: 120px;
}

.assessment-header-site {
    background-color: #ffffff;
    padding: 20px 0px 10px;
    position: relative;
    z-index: 1;
}

.agreement-footer .check-center-control label {
    font-weight: 600;
    color: rgb(98, 98, 98);
    font-family: Montserrat;
}

.agreement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 45px 0px 35px;
}

.main-ready-exam .assessment-btn {
    margin: 0px;
}

.main-ready-exam .camera-footer-button .assessment-btn {
    margin: 5px !important;
    font-size: 0.7rem !important;
}

.minitab {
    position: relative;
    height: 34px;
    padding: 0px 3px;
    display: flex;
    margin: 2px 0px 0px 5px;
    border-radius: 5px;
    align-items: center;
}

.full-size-answer {
    padding-right: 10px;
}

    .full-size-answer input[type="text"] {
        width: 100%;
    }

.icon-assessment-button {
    padding: 5px;
}

.icon-assessment {
    width: 20px;
}

.assessment-title-row {
    margin-top: 35px;
}

.list-item-assessment.question-bank .assessment-item-dec::after, .list-item-assessment .assessment-title-row::after {
    content: "";
    position: absolute;
    width: 28px;
    top: 0px;
    right: -6px;
    bottom: 0px;
    height: 100%;
    filter: blur(2px);
    background: rgba(255, 255, 255, 0.65);
}

.assessment-list.list-item-assessment .assessment-title-row:hover::after {
    display: none;
}

.list-item-assessment .assessment-title-row {
    position: relative;
    margin-top: -1px;
}

.list-item-assessment .assessment-item-box-title {
    margin-bottom: 0px !important;
}

.list-item-assessment .assessment-item-dec > p {
    font-size: 15px;
    margin: 0px !important;
}

.assessment-item-dec-p-line strong {
    margin-right: 5px;
    color: var(--color-body-text-color);
    min-width: auto !important;
}

.list-item-assessment .assessment-title-row h5 {
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0px !important;
    overflow: hidden !important;
}

.list-item-assessment .assessment-btn-row {
    position: absolute;
    right: 0px;
    top: 0px;
}

.list-item-assessment .assessment-item-edit.edit-assessment {
    right: 40px;
}

.list-item-assessment .crumbs + .assessment-btn-row a {
    font-size: 0.92rem;
    color: rgb(216, 216, 216) !important;
}

    .list-item-assessment .crumbs + .assessment-btn-row a:hover {
        color: rgb(158, 158, 158) !important;
    }

.list-item-assessment .crumbs + .assessment-btn-row {
    top: 38px;
    right: 0px;
}

.assessment-list-component .crumbs ~ .assessment-btn-row a:hover, .assessment-list-component .crumbs ~ .assessment-btn-row a {
    color: #fff !important;
}

.assessment-list-component .periodic, .assessment-list-component .toggleview-row {
    display: none;
}

.row-item-wrap ~ .row .global-nav-search-assessment {
    min-width: 50px !important;
}

.row-item-wrap ~ .row .assessment-search-box-main > .form-group {
    flex-wrap: nowrap;
}

.two-col {
    display: flex;
    align-items: flex-start;
}

.list-view-icon {
    color: rgb(148, 148, 148);
    font-size: 18px;
    margin-left: 9px;
}

.assessment-list-component .crumbs ~ .assessment-btn-row {
    right: 33%;
    display: none;
    top: 4px !important;
}

.assessment-manage-tab-control .assessment-button-control .assessment-btn-row {
    display: none;
    margin: 0px !important;
    top: 0px !important;
    right: 80% !important;
}

.assessment-manage-tab-control .list-item-assessment .prew-assessment.dpbutton {
    right: 66px !important;
}

.assessment-manage-tab-control .just-assessment:hover .assessment-button-control .assessment-btn-row {
    display: block !important;
}

.assessment-manage-tab-control .list-item-assessment .prew-assessment {
    right: 9px;
}

.assessment-manage-tab-control .row > .col-12 > .assessment-search-box-main.search-box-item-space > .form-group {
    flex-wrap: nowrap;
}

.assessment-manage-tab-control .list-item-assessment .assessment-button-list {
    margin-right: 100px;
}

.assessment-manage-tab-control .exam-item-detail li {
    font-size: 0.65rem;
}

.assessment-list-component .assessment-list {
    width: 100%;
}

.assessment-list-component .assessment-search-box-main .form-group {
    flex-wrap: nowrap;
    padding: 11px;
}

.assessment-list-component .assessment-item:hover .crumbs + .assessment-btn-row {
    display: block;
}

.assessment-manage-tab-control .assessment-button-control .assessment-btn-row, .assessment-list-component ~ .assessment-list:not(.list-item-assessment) .assessment-btn-row {
    position: absolute;
    right: 57px;
    top: 8px;
    display: none;
}

.sesstion-item-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 250px;
    overflow: auto;
    margin-bottom: 15px;
}

.sesstion-item i {
    display: none;
    position: absolute;
    right: 8px;
}

.sesstion-item:hover i {
    display: block;
}

.sesstion-item {
    cursor: pointer;
    font-family: var(--font-base);
    color: rgb(107, 107, 107);
    font-size: 0.9rem;
    background-color: rgb(247, 247, 247);
    display: flex;
    position: relative;
    align-items: center;
    padding: 13px;
    border-radius: 1px;
    margin-bottom: 4px;
    transition: background-color 0.3s ease 0s;
}

    .sesstion-item:hover {
        background-color: rgb(244, 244, 244);
    }

.row-item-wrap ~ .assessment-list .assessment-item:hover .crumbs + .assessment-btn-row {
    display: block;
}

.row-item-wrap ~ .list-item-assessment .assessment-item-edit.edit-assessment {
    right: 15px;
}

.career-assessment ~ .list-item-assessment .crumbs + .assessment-btn-row .exam-item-detail, .row-item-wrap ~ .list-item-assessment .crumbs + .assessment-btn-row .exam-item-detail {
    display: none;
}

.layout-box-assessment .list-item-assessment .assessment-item-title h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 0px;
    max-height: 41px;
    height: auto;
}

.left-sesstion-time input[type="checkbox"] {
    margin-right: 5px;
}

.list-item-assessment .assessment-title-row {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: calc(100% - 335px);
}

    .list-item-assessment .assessment-title-row.assessment-title-list {
        width: calc(100% - 220px);
        margin-top: 2px;
    }

.assessment-list-component .list-item-assessment .assessment-title-row.assessment-title-list {
    min-width: 400px;
    max-width: calc(100vw - 1305px);
}

.list-item-assessment .assessment-item-box-title {
    overflow: hidden;
    position: relative;
}

.list-item-assessment .assessment-item-title {
    display: none;
}

    .list-item-assessment .assessment-item-title h5 {
        display: none;
    }

.list-item-assessment .edit-assessment a i {
    font-weight: 400;
}

.list-item-assessment .edit-assessment a {
    font-size: 1.05rem;
    color: rgb(216, 216, 216);
    margin-right: 4px;
}

.list-item-assessment .assessment-title-row .assessment-item-dec > p {
    transition: all 2s ease 0s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.list-item-assessment .assessment-title-row:hover .assessment-item-dec > p {
    overflow: visible;
    transform: translateX(0px);
    animation: 30s linear 0s infinite normal none running example1;
}

@-webkit-keyframes example1 {
    0% {
        transform: translateX(0px);
    }

    25% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0px);
    }
}

.list-item-assessment .tooltip {
    display: none !important;
}

.has-p-10.custom-table thead th, .has-p-10.custom-table td {
    padding: 11px;
}

.assessment-list.list-item-assessment .assessment-status .setting-btn {
    right: 48px;
    top: -1px;
    bottom: 0px;
    font-size: 1rem;
    height: 47px;
    padding-left: 5px;
    display: flex;
    align-items: center;
    z-index: 1;
    color: rgb(216, 216, 216) !important;
}

.assessment-list.list-item-assessment.question-bank .assessment-status .setting-btn {
    right: 15px;
}

.list-item-assessment.question-bank .assessment-button-list {
    margin-right: 50px;
}

.assessment-user-list {
    margin-bottom: -3px;
    display: flex;
    align-items: center;
    max-width: 250px;
    flex-wrap: wrap;
    height: 27px;
}

.color-yellow {
    color: var(--border-color-toast-warning);
}

.asssessment-item-user img {
    width: 25px !important;
    height: 25px !important;
    border-radius: 25px !important;
}

.list-item-assessment.question-bank .assessment-title-row {
    justify-content: space-between;
    width: calc(100% - 550px);
}

    .list-item-assessment.question-bank .assessment-title-row::after {
        display: none;
    }

.last-form-group {
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.input-with-check-box {
    display: flex;
    align-items: center;
}

    .input-with-check-box .form-control {
        font-size: 12px;
        margin: -16px 0px 0px;
        font-weight: 500;
    }

.switch-has-pic img {
    width: 31px;
}

.switch-has-pic {
    align-items: center;
    display: flex;
}

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

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

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

.last-form-group select {
    min-width: 200px;
}

.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;
}

.custom-table.bg-white.purple-table thead tr {
    background: var(--color-secondary);
}

.custom-table.bg-white.purple-table thead th, .custom-table.bg-white.purple-table td {
    padding: 10px;
}

.custom-table.bg-white {
    border-radius: 12px;
    padding: 3px 0px 5px;
    border: 0px;
    background-color: #fff !important;
}

.global-body.Assesment-Layout .left-rail {
    z-index: 11;
    flex: 0 0 auto;
    width: 100%;
}

.active-hall {
    position: absolute;
    right: 0px;
    font-size: 0.75rem;
}

.form-group label.career-label {
    min-height: 16px;
}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 612px) {
    .assessment-search-box-main > .form-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .ol-package {
        padding: 5px 0px 0px;
        margin-bottom: -15px;
    }

    .package-item-detail.has-download .dicount-row {
        bottom: 33px;
        right: 12px;
    }

    .sticky-box {
        position: relative;
    }

    .assessment-search-box-main .form-group > div {
        margin-bottom: 5px;
    }

    .assessment-search-box-main > .form-group {
    }

    .question-box-area > .row {
        align-items: center;
        padding-left: 10px;
    }

    .bar-wrap-box {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 10px;
        background-color: rgb(207, 209, 255);
        margin-top: -15px;
    }

    .bar-text-control .bar-wrap-box {
        margin-top: 0px;
    }

    .bar-wrap-text {
        right: 0px;
        position: relative;
    }
}

@media screen and (max-width: 450px) {
    .check-box-row-two .form__radio-group, .check-box-row-two .form__checkbox-group {
        width: 100%;
    }

    .list-num .qustion-list-num {
        transform: scale(0.8);
    }

    .list-num {
        right: 0px;
    }

    .question-box-area .sticky-box {
        padding-right: 0px;
    }

    .header-assessment-icon span {
        display: none;
    }
}

.question-exm p {
    font-size: 0.7rem;
}

.question-exm > p:first-child {
    font-weight: 500;
    font-size: 0.75rem;
}

.question-exm {
    padding: 9px;
    background: rgb(249, 249, 249);
    margin: 10px 0px;
    border-radius: 2px;
    line-height: 1.5;
    color: rgb(179, 179, 179);
    font-weight: 400;
    border-left: 2px solid rgb(221, 221, 221);
}

.draggableAnswer .img-magnifier-container > img {
    width: 80px;
    height: 80px;
    margin-top: 20px;
    object-fit: contain;
}

.draggableAnswer .zoom-question i {
    font-weight: 400;
    color: #fff !important;
    margin: 3px 2px !important;
    font-size: 0.65rem !important;
}

.draggableAnswer .zoom-question {
    width: auto;
    height: auto;
    box-shadow: none;
    top: 0px;
    right: 0px;
    z-index: 1;
    margin: 0px;
    background-color: transparent;
    left: auto;
}

.drag-question-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 30px 20px;
}

    .drag-question-row > ol:first-child {
        margin-bottom: 10px;
        min-width: 150px;
        min-height: 70px;
    }

#MapperDiv {
    position: relative;
    user-select: none;
}

.image-mapper-svg {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
}

.event-box .display-flex.align-items-center {
    margin-left: 15px;
}

.event-box .assessment-row-input .form-control {
    font-size: 0.72rem;
}

.duplicate-question .color-success {
    color: rgb(8, 183, 88);
}

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

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

.min-400 {
    min-height: 400px !important;
}

.form-check > input {
    padding: 0px;
    height: initial;
    width: initial;
    margin-bottom: 0px;
    display: none;
    cursor: pointer;
}

.form-check > label {
    position: relative;
    cursor: pointer;
    font-size: 13px;
}

.accordion-step .form-check input {
    display: block;
    position: absolute;
    z-index: 1;
    opacity: 0;
}

.accordion-step .check-box-row {
    padding: 0px 8px 0px 0px;
    width: fit-content;
}

.form-check > label::before {
    content: "";
    appearance: none;
    background-color: rgb(247, 247, 247);
    border: 2px solid rgb(171, 171, 171);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px, rgba(0, 0, 0, 0.05) 0px -15px 10px -12px inset;
    padding: 6px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 3px;
    margin-top: 0px;
    border-radius: 4px;
    transform: scale(0.85);
}

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

.form-check > input:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: -0.2rem;
    left: 0.1rem;
    width: 13px;
    height: 25px;
    border-style: solid;
    border-color: rgb(135, 135, 135);
    border-image: initial;
    border-width: 0px 6px 6px 0px;
    transform: rotate(45deg) scale(0.4);
    border-radius: 3px;
}

.agency-tabs .nav-link {
    border-width: 2px 1px 2px 2px;
    border-radius: 0px;
    padding: 13px 33px;
    font-size: 15px;
    font-weight: 500;
    margin-right: 0px;
    color: var(--primary) !important;
    background-color: var(--rgba-primary-1) !important;
}

    .agency-tabs .nav-link.active {
        background-color: var(--primary) !important;
        color: #fff !important;
    }

.agency-tabs .nav-item {
    width: 100%;
}

.agency-tabs > li:last-child a {
    border-right: 0px;
}

.agency-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0px;
    border-bottom: 2px solid rgb(221, 221, 221);
    padding-bottom: 7px;
}

.agency-tab-content-head > div {
    display: flex;
    align-items: center;
}

.agency-tab-content-head a {
    font-size: 1.2rem;
    color: rgb(155, 155, 155) !important;
}

.agency-box-head ul {
    display: flex;
}

.agency-box-head .form-control {
    max-width: 250px;
    height: auto;
    font-weight: 500;
    border-radius: 8px;
}

.agency-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .agency-box-head a {
        margin: 5px;
        font-size: 1.2rem !important;
        color: rgb(155, 155, 155) !important;
    }

.agency-box span {
    font-size: 0.75rem;
}

.agency-tab-content-head select {
    font-size: 0.85rem;
    margin-right: 8px;
    min-width: 150px;
}

.agency-tab-content-head {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 600px) {
    .agency-tab-content-head {
        flex-wrap: wrap;
    }

        .agency-tab-content-head > div {
            margin-bottom: 10px;
        }

    .agency-tabs {
        flex-wrap: nowrap;
        width: 100%;
    }

        .agency-tabs .nav-link {
            padding: 9px 17px;
            text-align: center;
            border-radius: 4px;
            margin: 2px;
        }

    .agency-box {
        justify-content: center;
        flex-wrap: wrap;
    }

        .agency-box > div {
            padding: 20px 0px 10px;
            font-weight: 600;
            text-align: center;
            width: 100%;
        }

    .agency-tab-content-head select {
        padding-left: 2px;
        font-weight: 500;
    }

    .custom-table.responsive-table td {
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-color: rgb(221, 221, 221);
    }

    .responsive-table table {
        border: 0px;
    }

        .responsive-table table caption {
            font-size: 1.3em;
        }

        .responsive-table table thead {
            border: none;
            clip: rect(0px, 0px, 0px, 0px);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0px;
            position: absolute;
            width: 1px;
        }

        .responsive-table table tr {
            border-bottom: 3px solid rgb(221, 221, 221);
            display: block;
            margin-bottom: 0.625em;
            padding: 0px 11px;
            background: rgb(248, 248, 248);
            border-radius: 4px;
        }

        .responsive-table table td {
            display: block;
            min-height: 40px;
            font-size: 0.8em;
            font-weight: 400;
            text-align: right;
            padding: 14px 3px;
        }

            .responsive-table table td::before {
                content: attr(data-label);
                font-weight: 600;
                font-size: 0.75rem;
                text-transform: uppercase;
            }

            .responsive-table table td:last-child {
                border-bottom: 0px;
            }

            .responsive-table table td:first-child {
                border-top: 0px;
            }

    .agency-tab-content-head a {
        font-size: 1.2rem !important;
    }
}

.feed-shared-body .form-group > .d-block {
    height: 26px;
    display: block !important;
}

.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";
    }

.icon-input-big > i {
    font-size: 1.6rem;
    margin: 0px 8px 0px 2px;
}

.icon-input-big i {
    color: rgb(205, 205, 205);
}

.icon-input-big {
    display: flex;
    align-items: center;
}

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

.single-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.icon-input-big .compose-to-serach-row {
    padding: 0px;
}

.single-switch .form-control {
    font-size: 0.8rem;
    padding: 4px;
    font-family: var(--font-base);
    font-weight: 500;
    color: rgb(141, 141, 141);
    height: 29px;
}

.institution-box {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    justify-content: space-between;
}

    .institution-box span {
        padding: 2px 12px 5px;
        background: rgb(221, 221, 221);
        border-radius: 5px;
        color: #ffffff;
    }

    .institution-box .active {
        background: rgb(110, 224, 38);
    }

    .institution-box .passive {
        background: rgb(255, 184, 147);
    }

    .institution-box label {
        margin: 0 10px !important;
    }

.table-button {
    background: transparent;
    border: 0px;
    color: rgb(41, 78, 145);
}

.user-list-home-work li {
    position: relative;
    width: 100%;
    display: inline-block;
    padding: 10px 0px;
    font-size: 0.92rem;
    font-family: var(--font-base);
    color: rgb(154, 154, 154);
}

.user-list-home-work li {
    margin: 0px;
    cursor: pointer;
    padding: 12px 0px;
    border-bottom: 1px solid rgb(242, 242, 242);
}

    .user-list-home-work li::after {
        position: absolute;
        content: "";
        width: 150px;
        height: 20px;
        background: rgb(221, 221, 221);
        right: 0px;
        top: 9px;
        border-radius: 3px;
    }

.collapse-item-dec {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
    cursor: pointer;
}

.button-toggle-collapse {
    transition: transform 0.3s ease 0s;
    font-size: 17px;
    margin: 4px 0px 0px 8px;
}

.input-box-icon {
    display: flex;
    align-items: center;
}

.user-list-item > .user-list-home-work.show + .collapse-item-dec .button-toggle-collapse {
    transform: rotate(180deg);
}

.user-list-home-work ul {
    padding-top: 20px;
}

.user-list-item {
    display: flex;
    flex-direction: column-reverse;
}

.collapse-item-dec p {
    width: fit-content;
    font-size: 0.73rem;
}

    .collapse-item-dec p strong {
        font-weight: bold;
    }

.user-list-home-work li.green::after {
    background-color: rgb(147, 187, 133);
}

.user-list-home-work li.red::after {
    background-color: rgb(219, 125, 125);
}

.fixed-top-button {
    position: absolute;
    top: 70px;
}

.about-item-content-tree {
    position: relative;
    padding: 18px 0px;
}

.institution-area {
    padding-bottom: 60px;
    position: relative;
}

.file-manager-side .tree-view-icon {
    margin-top: 3px;
}

.file-manager-side > .tree-view > div > .tree-view-title > span, .file-manager-side > .tree-view > div > .tree-view > div > .tree-view-title > span span {
    font-weight: 600;
}

.accordion-step .card-header .header-ac {
    width: 100%;
    cursor: pointer;
    padding: 15px 120px 15px 15px;
    font-family: var(--font-base);
    color: rgb(146, 146, 146);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-step span img, .accordion-step span i {
    margin: 0px 4px;
}

.accordion-step span {
    display: flex;
    align-items: center;
}

    .accordion-step span img {
        width: 25px;
        height: 24px;
        object-fit: contain;
        margin: -7px 7px;
    }

#accordionExample2 .header-ac {
    font-weight: 500;
}

.accordion-step .header-ac > span:first-child {
    font-style: italic;
}

.accordion-step .header-ac:not(.collapsed) > span > i {
    transform: rotate(180deg);
}

.accordion-step {
    margin: 15px 0px;
}

    .accordion-step .card-header {
        padding: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgb(255, 255, 252);
        border: none;
    }

    .accordion-step > .card > div > .card-header {
        background-color: red;
    }

    .accordion-step > .card > div > .card-body:first-child {
    }

    .accordion-step > .card > div > .card-body:last-child {
        margin-bottom: 20px;
    }

    .accordion-step .card .card-body {
        padding: 0px;
        margin: 0px;
    }

        .accordion-step .card .card-body .accordion-step .card > .collapse .collapse-box {
            padding: 14px 8px !important;
        }

        .accordion-step .card .card-body .card-body {
            margin: 0px;
        }

        .accordion-step .card .card-body .card {
            margin: 0px !important;
            border-bottom: 2px dashed rgb(217, 217, 217) !important;
        }

            .accordion-step .card .card-body .card .card {
                border-bottom: 0px !important;
            }

        .accordion-step .card .card-body .card-header {
            background-color: #ffffff;
            padding: 0px 20px;
            border-radius: 0px !important;
        }

            .accordion-step .card .card-body .card-header > h2 {
                font-weight: 500;
            }

        .accordion-step .card .card-body .card .card-body .card-header {
            border-top: 2px solid rgb(246, 246, 246);
            padding: 0px 40px;
            background-color: #ffffff;
        }

            .accordion-step .card .card-body .card .card-body .card-header > h2 {
                color: rgb(185, 185, 185);
            }

.label-text-input span {
    height: 34px;
    background-color: rgb(221, 221, 221);
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 3px;
    color: rgb(127, 127, 127);
}

.label-text-input {
    display: flex;
    align-items: center;
    border: 0px;
    padding: 0px !important;
}

    .label-text-input input {
        border: 1px solid rgb(206, 206, 206);
        height: 34px;
        width: 100%;
    }

    .label-text-input span + input {
        border-left: 0px;
        border-radius: 0px 4px 4px 0px;
        margin: 0px 0px 0px -1px !important;
    }

.accordion-step .card button i {
    width: 0.8rem;
}

.accordion-step .card button {
    padding: 5px 4px;
    margin: 1px 12px 0px -5px;
    height: 20px;
    border: none;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    background: rgb(222, 222, 222) !important;
    box-shadow: none !important;
    color: rgb(114, 114, 114) !important;
    border-radius: 5px !important;
}

.accordion-step .card {
    border-top: 1px solid rgb(247, 247, 247);
    border-right: 1px solid rgb(247, 247, 247);
    border-left: 1px solid rgb(247, 247, 247);
    border-image: initial;
    margin: 0px;
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: 2px solid rgb(242, 242, 242) !important;
}

.accordion-step .card-header {
}

.duty-flow-row > div {
    position: relative;
}

.duty-flow-row .item-upload {
    position: absolute;
    right: -11px;
    top: 0px;
    border: 0px;
    width: 50px !important;
    min-height: 32px !important;
}

.flow-center {
    display: flex;
    width: fit-content;
    margin: 0px;
    padding: 20px 20px 0px;
    align-items: center;
}

    .flow-center .title-text-flow {
        font-family: var(--font-panel);
        font-size: 0.8rem;
        font-weight: 600;
        margin: 0px 8px;
        color: rgb(73, 73, 73);
        line-height: 1.5;
    }

    .flow-center .btn-flow {
        background-color: transparent;
        padding: 5px 8px 5px 0px;
        border: 0px;
    }

        .flow-center .btn-flow i {
            margin-right: 0px;
            font-size: 1rem;
            color: var(--color-secondary) !important;
        }

    .flow-center .custom-table {
        border: none;
        border-radius: 6px 0px 0px;
    }

    .flow-center .justify-content-between {
        font-size: 0.75rem;
    }

.session-management .event-mini-input-icon {
    margin: 0px 11px 0px 0px;
}

.session-management .event-duration-input {
    border-radius: 50px;
}

.session-management .event-credit-box {
    display: flex;
}

.fixed-post {
    z-index: 1;
}

.book-page {
}

.select-area > div {
    width: 100%;
    display: inline-block;
    height: 100%;
    cursor: pointer;
}

.select-area {
    border: 3px dashed rgb(45, 45, 45);
    border-radius: 20px;
}

.flashcard-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 35px 0px 0px;
    text-align: center;
}

.flashcard-img {
    margin: auto;
    border-radius: 15px;
    width: fit-content;
}

.flashcard-dec {
    padding: 15px;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

    .flashcard-dec span, .flashcard-dec p {
        background-color: transparent;
        line-height: 1.4;
    }

.flashcard-sound img {
    width: 55px;
}

.flashcard-title {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 21px;
    font-family: var(--font-base);
}

.book-pages-icon {
    margin: 0px 15px 0px 14px;
    display: inline-block;
    color: var(--color-secondary);
}

.pl12 {
    padding-left: 12px;
}

.book-pages-number .form-control {
    height: auto;
    padding: 5px;
    min-height: 10px;
    line-height: normal;
    font-size: 0.75rem;
    width: 45px;
    margin: 0px 10px;
}

.flashcard-box-item img {
    margin: 0px !important;
}

.flashcard-box-item {
    display: flex;
    height: 100%;
    width: 100%;
    cursor: pointer;
    align-items: flex-start;
    border: 0px !important;
}

.aside-chat {
    background-color: transparent !important;
}

.global-nav-primary-items .dropdown-menu {
    overflow: hidden;
    border-radius: 5px !important;
}

.mapperShow-box {
    z-index: 99;
}

.question-box.question-box-right > div img[src="img/icon/headphone-big.png"], .question-box.question-box-right > div img[src="img/icon/headphone-big-pause.png"] {
    background: #fff;
    width: 100% !important;
    opacity: 1 !important;
}

.question-box.question-box-right > div img[src="img/icon/pausee-blue.png"] ,
.question-box.question-box-right > div img[src="img/icon/play-blue.png"] {
    position: absolute;
    left: 4px;
    top: 4px;
    margin-top: 0;
    width: 17px !important;
}

.audioPlayer-click {
    width: 100%;
    height: 100%;
}

.size-auto img.main-img {
    max-width: fit-content;
}

.image-mapper .mapperShow-box img {
    opacity: 0;
    transition: opacity 0.3s ease 0s;
    width: 20px !important;
}

.mapperShow-box.fit-size img {
    opacity: .35;
    margin-top: 2px;
    height: auto;
    width: 25px !important;
}

.mapperShow-box.fit-size .flashcard-box img {
    opacity: 1;
}

.image-mapper .mapperShow-box img.red-img {
    opacity: 1;
    height: 16px;
    width: 21px !important;
    object-fit: contain;
    margin: 0 !important
}

.mapperShow-box > .flashcard-box-item {
}

.image-mapper .mapperShow-box:hover img {
    opacity: 1;
}

.book-page-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 37px 12px 2px 10px;
}

    .book-page-header img, .red-img {
        width: 33px;
        filter: invert(11%) sepia(45%) saturate(7495%) hue-rotate(355deg) brightness(108%) contrast(96%);
    }

        .book-page-header img.color-gray-img, .color-gray-img {
            filter: invert(14%) sepia(6%) saturate(7%) hue-rotate(103deg) brightness(102%) contrast(98%);
        }

.contain-img {
    object-fit: contain !important;
}

.book-page .item-upload img {
    width: fit-content;
    height: fit-content;
    position: inherit;
    object-fit: contain !important;
}

.book-page .event-time-row {
    padding: 0px 15px;
    margin: 5px 0px;
}

.show-uploaded .item-upload {
    margin: 0px;
    min-width: fit-content !important;
}

.book-sound-row {
    display: flex;
    align-content: center;
}

    .book-sound-row img {
        width: 30px;
        height: auto;
        object-fit: contain;
    }

.sound-truck-footer {
    padding: 28px 28px 0px 0px;
    display: flex;
}

    .sound-truck-footer img {
        width: 18px;
        margin: 0px 6px;
    }

    .sound-truck-footer .form-check > label {
        transform: scale(2);
        flex-direction: row-reverse;
        align-items: center;
        display: flex;
    }

    .sound-truck-footer .form-check > input:checked + label::after {
        top: -0.01rem;
        right: 0.01rem;
        width: 13px;
        left: auto;
        transform: rotate(45deg) scale(0.4);
    }

    .sound-truck-footer .check-box-row {
        justify-content: center;
    }

.fit-size {
}

.width-40 {
    width: 40px;
}

.global-nav-right-item.nborder {
    border: 0px !important;
}

.setting-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.onrow-input {
    display: flex;
    align-content: center;
    margin: 0px;
    padding: 15px 0px;
}

.setting-row-item img {
    margin-bottom: -3px;
    width: 20px;
}

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

.onrow-input .icon-btn {
    display: flex;
    align-items: center;
    margin: 0px 9px;
    font-size: 1.1rem;
    color: rgb(93, 93, 93) !important;
}

.onrow-input .form-control, .channel-setting-row-item input.form-control {
    padding: 7px;
    line-height: normal;
    font-size: 0.7rem;
}

.main-setting-tab .profile-avatar-overlay .item-upload {
    min-height: 35px;
    margin: 17px 0px;
    width: 35px !important;
    min-width: 35px !important;
}

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

.img-icon {
    width: 18px;
    height: 13px;
    border: 2px solid rgb(188, 188, 188);
    border-radius: 5px;
    margin-bottom: -5px;
}

.main-setting-tab {
    padding: 15px 10px;
}

.setting-row-item > div span {
    margin-left: 10px;
    font-size: 0.85rem;
    font-family: var(--font-base);
    color: rgb(124, 124, 124);
    font-weight: 600;
}

.setting-row-item > div, .setting-row-fit > div {
    display: flex;
    align-items: center;
}

.setting-row-item .check-row label input {
    margin-left: 3px;
}

.setting-row-item .check-row label {
    display: flex;
    align-items: center;
    color: rgb(175, 175, 175);
    font-family: var(--font-base);
    font-size: 0.75rem;
    margin-left: 12px;
}

.check-row.cursor-pointer {
    position: relative;
}

    .check-row.cursor-pointer::after {
        position: absolute;
        content: "";
        left: 0px;
        top: 0px;
        width: 20px;
        height: 20px;
    }

.check-agreement input {
    margin-right: 5px;
}

.check-agreement {
    display: flex;
    justify-content: space-between;
}

    .check-agreement label {
        font-family: var(--font-base);
        color: rgb(133, 133, 133);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
    }

.setting-row-fit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.img-menu-fix {
    width: 24px;
    height: 21px;
    object-fit: cover;
    margin-right: -4px;
}

.channel-setting-row-item .btn-icon {
    font-size: 0.9rem;
    margin-right: 13px;
}

.channel-setting-row-item > div {
    display: flex;
    align-items: center;
    text-align: justify;
    padding: 9px 20px 9px 0px;
    justify-content: center;
}

.channel-setting-row-item input[type="checkbox"] {
    margin-left: 10px;
}

.channel-setting-row-item {
    justify-content: center;
    display: flex;
    align-items: center;
    font-family: var(--font-base);
}

    .channel-setting-row-item input.form-control {
        margin-right: 10px;
        font-size: 0.75rem;
    }

.form-control-institutional {
    max-width: 180px;
    margin-right: 16px;
    font-weight: 500;
    font-size: 0.75rem;
}

.widgetCandidates {
    display: flex;
    font-size: 0.7rem;
    text-align: left;
    font-weight: 500;
}

.main-setting-row > label, .label-row-portfolio {
    margin: 15px 0px;
    font-size: 1rem;
    font-family: var(--font-base);
    font-weight: 700;
    color: rgb(81, 81, 81);
}

.count-channel-m i {
    margin-right: 5px;
}

.count-channel-m {
    display: flex;
    color: rgb(174, 174, 174);
    font-size: 0.85rem;
}

.channel-search-drp .compose-to-search-result p, .channel-search-drp .compose-to-search-result-multi p {
    font-family: var(--font-base);
    margin: 0px;
    font-weight: 500;
}

.channel-search-drp .compose-to-search-result, .channel-search-drp .compose-to-search-result-multi {
    padding: 0px;
    box-shadow: rgb(204, 204, 204) 0px 0px 10px;
    top: 43px;
}

.channel-search-drp {
    width: 100%;
    margin-right: 10px;
    position: relative;
}

.channel-row-item > div input {
    margin-right: 5px;
}

.channel-row-item > div {
    align-items: center;
    display: flex;
}

.item-input-row > div .compose-to-search-result-multi, .item-input-row > div .compose-to-search-result {
    display: none !important;
}

.adv-multi-select .check-box-input span {
    white-space: normal;
}

.portfolio-row {
    display: flex;
}

.adv-multi-select {
    padding: 15px 0px !important;
}

    .adv-multi-select.select-values label {
        padding-left: 15px;
        display: inline-block;
    }

    .adv-multi-select .check-box-input {
        margin-bottom: 14px;
    }

.portfolio-row > div {
    margin-left: 10px;
    min-width: 250px;
}

.portfolio-row input[type="text"] {
    font-size: 0.8rem;
}

.label-row-portfolio {
    min-width: 200px;
}

.select-values-child {
    padding-left: 15px;
}

    .select-values-child .select-values-child {
        padding-left: 25px;
    }

.portfolio-row {
    width: 100% !important;
    justify-content: flex-start !important;
}

.layout-box-assessment.container .row > .assessment-tabs {
    padding: 0px 30px;
}

.native-radar-img img {
    width: 200px;
}

.native-radar-img {
    width: 100%;
    justify-content: flex-end;
    display: flex;
}

.native-radar-tab > label {
    font-family: var(--font-base);
}

.native-radar-tab > input[type="text"] {
    font-size: 0.8rem;
    font-family: var(--font-base);
    margin: 0px 15px 15px;
    width: calc(100% - 30px);
}

.adv-multi-select.select-values.nborder label {
    padding-left: 0px;
}

.nborder {
    border: 0px !important;
}

.native-radar-tab {
    display: block !important;
}

.native-radar-tab {
    border: 1px solid rgb(221, 221, 221);
    border-radius: 5px;
    padding: 10px;
}

.native-radar-tab-label {
    font-size: 0.8rem;
    font-family: var(--font-base);
    font-weight: 500;
    color: rgb(97, 97, 97);
    padding: 10px 0px;
    display: inline-block;
}

.main-setting-row-mini .main-setting-row {
    min-height: 400px;
}

.native-radar-tab-label strong {
    font-weight: bold;
}

.show-right-item {
    display: flex;
    justify-content: flex-end;
}

.picturepanel {
    position: relative;
}

    .picturepanel > canvas:first-child {
        z-index: 99;
    }

    .picturepanel > canvas {
        position: absolute;
        left: 0px;
    }

.paint-content .picturepanel > canvas {
    position: inherit;
}

.question-video-control > video {
    margin: 30px auto 0px;
    box-shadow: rgb(227, 227, 227) 1px 1px 5px 4px;
}

.question-video-control {
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    justify-content: center;
}

.question-audio-control > audio {
    margin: auto;
}

.question-audio-control {
    text-align: center;
}

.video-control-row {
    display: flex;
    width: 100%;
    padding: 20px 0px 0px;
    justify-content: center;
    align-items: center;
}

.main-ready-exam .video-control-row .assessment-btn.color-primary {
    font-size: 0.75rem !important;
    padding: 8px !important;
    margin: 5px !important;
}

.post-event-view > span {
    font-size: 0.9rem;
    color: rgb(47, 98, 193);
    font-family: var(--font-base);
    font-weight: 600;
}

.post-event-view-coin img {
    width: 21px;
    margin-left: 5px;
    object-fit: contain;
}

.post-event-view-coin span {
    font-size: 0.9rem;
    color: rgb(54, 54, 54);
}

.post-event-view-coin {
    display: flex;
    justify-content: end;
    margin: 3px 0px 8px;
}

.input-password-post {
    font-size: 0.75rem;
    padding: 5px;
    max-width: 100px;
    font-weight: 500;
    border: 2px solid rgb(221, 221, 221);
    text-align: center;
    font-family: var(--font-base);
}

.post-event-view {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.post-dr-bottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start !important;
}

.video-call {
    background-color: rgb(229, 229, 229);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 1;
    transition: opacity 0.3s ease 0s;
    color: rgb(87, 87, 87) !important;
}

    .video-call:hover {
        opacity: 0.8;
    }

.charge-money .side-footer-logos {
    /* margin: 17px 0px -90px; */
}

    .charge-money .side-footer-logos img {
        width: 250px;
    }

.credit-code .dicount-code-input::placeholder {
    font-size: 0.75rem;
}

.toggle-text-fix > .periodic {
    font-size: 0.75rem;
    margin: 23px 0px !important;
}

.modal .toggle-text-fix > .periodic {
    margin: 13px 0px !important;
}

.cart-item-box {
    font-weight: 700;
    width: calc(100% - 55px);
    color: rgb(113, 113, 113);
    font-family: var(--font-base);
}

.disable-cart .address-box {
    opacity: 0.5 !important;
    background: rgb(211, 211, 211) !important;
}

.cart-item-detail {
    display: flex;
    padding: 0px 17px 17px;
    flex-direction: column;
    font-size: 0.85rem;
}

    .cart-item-detail label {
        font-size: 0.9rem;
        color: rgb(96, 117, 157);
    }

    .cart-item-detail span {
        margin-top: 9px;
        font-weight: 500;
        color: rgb(81, 165, 227);
        font-size: 0.8rem;
        margin-bottom: -2px;
    }

.onrow-input {
    display: flex;
    align-content: center;
    margin: 0px;
    padding: 15px 0px;
}

    .onrow-input .form-control, .channel-setting-row-item input.form-control {
        padding: 7px;
        line-height: normal;
        font-size: 0.8rem;
    }

    .onrow-input .icon-btn {
        display: flex;
        align-items: center;
        margin: 0px 9px;
        font-size: 1.1rem;
        color: rgb(93, 93, 93) !important;
        background-color: transparent !important;
    }

.setting-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

    .setting-row-item > div, .setting-row-fit > div {
        display: flex;
        align-items: center;
    }

.ac-step-row .periodic {
    margin: 0px !important;
}

.ac-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.note-list-header {
    font-size: 1.15rem;
    width: 100%;
    text-align: center;
    font-weight: 600;
    color: rgb(166, 160, 160);
}

.item-selected-row .remove-career i {
    color: rgb(243, 242, 239);
    transition: color 0.3s ease 0s;
}

.item-selected-row {
    background: rgb(243, 242, 239);
    padding: 5px 6px;
    display: flex;
    justify-content: space-between;
    font-weight: 300;
    color: rgb(77, 75, 75);
    font-size: 0.85rem;
    border-bottom: 1px solid rgb(221, 221, 221);
}

    .item-selected-row:hover .remove-career i {
        color: rgb(159, 159, 159);
    }

.selected-item-ab .label-row-portfolio {
    margin: 0px;
    transform: translateY(-30px);
}

.list-user-row {
    display: flex;
    flex-direction: column;
}

    .list-user-row li {
        background-color: #ffffff;
        color: rgb(88, 85, 85);
        padding: 9px;
        border-radius: 5px;
        margin: 0px 5px 5px 0px;
        font-size: 0.85rem;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .list-user-row span {
        margin: 0px 5px;
    }

.list-user-main li {
    position: relative;
}

    .list-user-main li .remove-category {
        transform: scale(0.8);
    }

    .list-user-main li:hover .remove-category {
        opacity: 1;
    }

.ac-list .btn-success {
}

.ac-list .btn-danger {
}

.ac-list > li {
    justify-content: space-between;
}

.ac-list .btn {
}

    .ac-list .btn:hover {
    }

.list-user-row li {
    justify-content: space-between;
}

.list-user-row .text-success {
    font-size: 0.65rem;
    font-weight: 500;
}

.text-orange {
    color: rgb(236, 96, 0);
    font-size: 0.65rem;
    font-weight: 500;
}

.favorite-card .career-card-row-list.custom-scroll {
    max-height: 150px;
    overflow: hidden auto;
    min-height: 55px;
}

.favorite-card .career-card-row-list.custom-scroll {
    max-height: 100px;
}

.career-card-row-list.custom-scroll {
    overflow: hidden auto;
}

#community-panel > .community-panel-box:first-child .career-card-row-list.custom-scroll {
    transition: top 0.3s ease 0s;
    max-height: 100%;
}

@media screen and (max-width: 1600px) {
    .favorite-card .career-card-row-list.custom-scroll {
        max-height: 100px;
    }
}

.second-header > .header-ac {
    color: rgb(194, 194, 194) !important;
}

.question-footer-dec {
    width: 100%;
    padding: 15px;
    margin-top: 15px;
}

.indicators-question .response-item input[type="text"] {
    background-color: #ffffff;
}

.indicators-question {
    padding: 15px;
}

.indicators-question-item {
    margin: 3px;
    padding: 3px 10px;
    max-width: 250px;
}

    .indicators-question-item span {
        font-size: 0.7rem;
        font-weight: 500;
        padding: 9px 0px;
        display: inline-block;
    }

.score-item-value {
}

.indicators-question .response-row-box li span {
    padding-bottom: 23px;
}

.indicators-question .response-row-box li {
    margin-right: 60px;
}

.indicators-question-value {
    position: absolute;
    right: -60px;
    display: flex;
    flex-direction: column;
    top: -25px;
    font-size: 0.75rem;
    text-align: center;
}

.indicators-score-max {
    position: relative;
}

    .indicators-score-max span {
        font-size: 0.75rem;
        position: absolute;
        top: -34px;
        padding: 0px;
        width: 100%;
        text-align: center;
    }

.indicators-question > ul > li:not(:first-child) > .indicators-score-max span, .indicators-question > ul > li:not(:first-child) > label span {
    opacity: 0;
}

.indicators-label-textbox {
    font-size: 0.8rem;
    padding-bottom: 10px;
    font-family: var(--font-base);
}

.bg-white-box.report-box {
    padding: 15px;
    background-color: #ffffff;
    border-radius: 10px;
}

.about-item .bg-white-box.report-box {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.frame.result-tabs .assessment-mini .about-item {
    padding: 3px;
}

.frame.result-tabs > .row > .col-lg-12 {
    padding: 0px;
}

.report-box .form-group label {
    font-size: 14px;
    margin-top: 5px;
    display: inline-block;
}

.layout-box-assessment .form-group label:empty {
    display: block;
    height: 28px;
}

.layout-box-assessment .form-group > .assessment-btn {
    margin: 7px 0px;
}

.report-button {
    width: fit-content;
    margin: 0px !important;
}

#productDownload {
    position: relative;
    background: transparent;
    width: 100%;
    z-index: auto;
    border: 0px;
    top: auto;
    height: 90px;
    border-radius: 9px;
}

.frame-core.olakid .ol-package {
    margin-top: 0px;
    padding-top: 10px;
    left: 12px;
    right: 12px;
    width: auto;
}

#productDownload .frame-core {
    margin-top: 0px;
    transition: all 0.3s ease 0s !important;
}

#productDownload.show ~ .frame-core {
    animation: 0.8s ease 0s 1 normal none running mbottom;
    margin-top: 84px;
}

#productDownload.show ~ .share-box-feed-entry-wrapper {
    position: relative;
    top: 79px;
}

.container1 {
    padding: 1%;
}

.content1 {
    display: flex;
    padding: 20px 0px;
}

.main1 {
    height: 2000px;
    margin-right: 10px;
    background: linear-gradient(rgb(238, 238, 238) 0%, rgb(183, 234, 224) 100%);
}

.side1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 10px;
    width: 140px;
    height: 140px;
    color: #ffffff;
    background: rgb(48, 178, 152);
}

@keyframes mbottom {
    0% {
        margin-top: 0px;
    }

    100% {
        margin-top: 84px;
    }
}

.product-download {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.app {
    width: calc(25% - 10px);
    min-width: 110px;
    display: inline-block;
    margin: 5px;
    text-align: center;
    vertical-align: text-top;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 13px;
    position: relative;
    font-weight: 500;
    cursor: pointer;
    background: var(--secondary) !important;
}

    .app img {
        width: 160px;
        height: 160px;
        border-radius: 6px;
        padding: 2px;
        background: #ffffff;
        position: absolute;
        top: 50px;
        left: 40px;
        opacity: 0;
        transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    }

    .app::before {
        display: inline-block;
        content: "";
        width: 30px;
        height: 30px;
        vertical-align: -9px;
        margin-right: 11px;
        background-repeat: no-repeat;
        background-position: 50% center;
        background-size: 100% 100%;
        transition: transform 0.3s ease 0s;
    }

    .app.windows::before {
        background-image: url("/img/icon/ic_windows.svg");
    }

    .app.mac::before {
        background-image: url("/img/icon/ic_mac.svg");
    }

    .app.ipad::before {
        background-image: url("/img/icon/ic_ipad.svg");
    }

    .app.android::before {
        background-image: url("/img/icon/ic_android.svg");
    }

    .app.ios::before {
        background-image: url("/img/icon/ic_ios.svg");
    }

    .app.miniprogram::before {
        background-image: url("/img/icon/ic_miniprogram.svg");
    }

    .app:hover {
        opacity: 0.95;
    }

        .app:hover img {
            opacity: 1;
            transform: translateY(20px);
        }

        .app:hover::before {
            transform: scale(1.1);
        }

.report-header-row {
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding-bottom: 13px;
}

.report-box .report-header-row > div {
    display: flex;
}

.report-box .report-header-row h3 {
    padding: 6px 13px;
    font-size: 0.9rem;
    font-family: var(--font-base);
    font-weight: 700;
}

.session-report-title {
    position: relative;
}

    .session-report-title::after {
        position: absolute;
        content: "-";
        left: 0px;
        font-size: 20px;
        color: rgb(221, 221, 221);
    }

.question-row-content.instruction-box {
    background: #e9f2f5
}

.assessment-bg .col-md-6.col-11 > .question-box.asssessment-instruction-box, .asssessment-instruction-box {
    height: fit-content;
    border-radius: 5px;
    background: #e9f2f5;
    border: 2px solid rgb(204, 226, 239);
}

.qustion-list-num .num-instruction .form__radio-group, .qustion-list-num .num-instruction .form__checkbox-group {
    border-color: rgb(162, 220, 255);
}

.list-num .num-instruction .form__radio-group.active, .list-num .num-instruction .form__checkbox-group.active, .list-num-row .num-instruction .form__radio-group.active, .list-num-row .num-instruction .form__checkbox-group.active {
    background-color: rgb(162, 220, 255) !important;
}

.num-instruction .form__checkbox-button {
    display: none !important;
}

.main-box-re {
    display: flex;
    padding-right: 0px;
    position: absolute;
    right: 0px;
    bottom: 35px;
    align-items: center;
    width: 70px !important;
    margin-bottom: 0px !important;
}

.assignment {
    bottom: auto;
    top: 78%;
    left: 0px;
    font-size: 0.75rem;
    padding: 9px;
    white-space: nowrap;
    min-width: fit-content;
    border-radius: 3px;
    box-shadow: rgb(221, 221, 221) 1px 1px 10px;
    color: rgb(118, 118, 118);
    border: 1px solid rgb(221, 221, 221);
}

.profile-list .question-post-title:hover .assignment {
    display: block;
}

.break-time-text strong {
    font-weight: normal;
}

.single-card {
}

.multi-select-main {
    position: relative;
}

    .multi-select-main input.form-control {
        margin-top: 1px !important;
        padding: 5px 6px !important;
    }

    .multi-select-main .compose-to-search-result-multi {
        top: 39px !important;
        left: 13px !important;
    }

.assessment-user-list .custom-tooltip {
    margin-right: 5px;
    flex: 0 0 25px;
    margin-top: -5px;
}

    .assessment-user-list .custom-tooltip::before, .assessment-user-list .custom-tooltip::after {
        bottom: auto;
        left: auto;
        position: fixed;
        transform: translateY(-32px);
    }

    .assessment-user-list .custom-tooltip::after {
        transform: rotate(45deg) translateY(5px) translateX(-20px);
    }

.custom-tooltip img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.label-filter {
    font-family: var(--font-base);
    padding-bottom: 3px;
    font-size: 0.75rem;
}

.custom-tooltip {
    margin-right: -18px;
    font-size: 1.8rem;
    font-weight: 500;
    color: #ffffff;
    position: relative;
    padding-top: 3px;
}

    .custom-tooltip::before {
        content: attr(data-tooltip);
        font-size: 13px;
        position: absolute;
        left: 20%;
        bottom: 100%;
        background: rgb(218, 218, 218);
        padding: 7px 10px;
        opacity: 0;
        color: rgb(80, 80, 80);
        font-family: var(--font-base);
        z-index: 5;
        border-radius: 5px;
        min-width: 150px;
        transition: opacity 100ms ease 0s;
    }

    .custom-tooltip::after {
        content: "";
        position: absolute;
        left: 33%;
        bottom: 92%;
        width: 8px;
        height: 8px;
        background: rgb(218, 218, 218);
        opacity: 0;
        transform: rotate(45deg);
        transition: opacity 100ms ease 0s;
    }

    .custom-tooltip:hover::before, .custom-tooltip:hover::after {
        opacity: 1;
    }

.check-all-table {
    position: absolute;
    top: 70px;
    left: 23px;
}

.global-nav-right-item .global-nav-bar-icon.img-mobile-size.img-question {
    width: 21px !important;
}

.setting-channel {
    position: absolute;
    top: 8px;
    right: 5px;
    z-index: 1;
    font-size: 16px;
    padding: 7px;
    box-shadow: rgb(170, 170, 170) 0px 1px 2px;
    background: #ffffff;
    border-radius: 31px;
}

    .setting-channel i {
        color: rgb(156, 156, 156);
        cursor: pointer;
    }

.pending-channel {
    font-size: 17px;
    padding: 7px;
    box-shadow: rgb(170, 170, 170) 0px 1px 2px;
    background: #ffffff;
    border-radius: 31px;
}

.header-item-right {
    padding: 20px 0 0px;
}

.start-right {
    justify-content: flex-end;
}

.row-item-wrap {
    display: flex;
    flex-wrap: wrap;
}

.assessment-mini .frame.result-tabs .row-item-wrap {
    width: 100%;
}

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

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

.new-question-post {
    border: 1px solid rgb(221, 221, 221);
    padding: 27px;
    min-height: 140px;
    display: flex;
    border-radius: 20px;
    width: calc(25% + 10px);
    margin: 5px;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    color: rgb(221, 221, 221) !important;
}

.question-post {
    border-radius: 20px;
    border: 2px dashed rgb(221, 221, 221);
    width: calc(25% + 10px);
    margin: 5px;
    display: flex;
    min-height: 140px;
    padding: 15px;
    position: relative;
    font-family: var(--font-base);
    flex-direction: column;
    color: rgb(143, 143, 143) !important;
}

.career-assessment div.question-post-title {
    padding-top: 4px;
    min-height: 35px;
    height: auto;
    font-size: 0.85rem !important;
}

.career-assessment .question-post > div.question-post-item-setting {
    position: absolute;
    right: 10px;
    top: 10px;
}

.row-item-wrap.w-100 .new-question-post {
    width: calc(24% + 10px);
}

.row-item-wrap.w-100 .question-post-item-setting a {
    font-size: 0.9rem;
}

.row-item-wrap.w-100 .question-post {
    width: calc(24% + 10px);
    padding: 9px 8px 5px 9px;
}

    .row-item-wrap.w-100 .question-post .assessment-item-dec > label {
        white-space: nowrap;
        font-size: 0.7rem;
    }

    .row-item-wrap.w-100 .question-post .question-post-time i {
        font-size: 0.7rem;
        margin-top: 6px !important;
    }

.main-result-setting .assessment-btn, .main-result-setting .btn {
}

.main-result-setting .btn {
}

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

.assessment-item-btn-area {
    display: inline-block;
    justify-content: center;
    margin: auto;
    width: 100%;
}

    .assessment-item-btn-area .assessment-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        margin: 17px 0px 0px;
    }

@media screen and (max-width: 992px) {
    .question-post {
        width: calc(43% + 10px);
    }

    .package-item video, .package-list .package-item .main-img {
        object-fit: fill;
    }

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

@media screen and (max-width: 768px) {
    .assessment-item-menu-sub.open {
        display: flex;
        position: unset;
        flex-direction: column;
        width: 100%;
        box-shadow: none;
    }

    .assessment-item-menu .assessment-item-menu-sub a {
        position: unset;
    }

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

    .question-post, .new-question-post {
        width: calc(50% + 10px);
    }

    .assessment-mini .about-item .form-group {
        width: 100%;
    }

    .check-box-form.check-row .check-box-row label {
        margin: -2px 8px 0px 4px !important;
    }
}

@media screen and (max-width: 550px) {
    .question-post {
        width: calc(100% + 10px);
    }

    .assessment-mini .new-question-post, .assessment-mini .question-post {
        width: calc(50% - 11px);
    }
}

.career-assessment + .row .form-group {
    flex-wrap: nowrap;
}

.question-post-item-setting a {
    font-size: 1.2rem;
    color: rgb(143, 143, 143) !important;
}

.question-post > div.question-post-item-setting {
    padding: 0px;
}

.question-post > div {
    padding: 11px 0px;
    justify-content: start;
    font-size: 0.9rem;
    font-weight: 500;
    align-items: center;
}

.question-post-item-setting {
    display: flex;
    justify-content: end;
}

.question-post-title {
    line-height: 1.3;
    font-weight: 600;
    word-break: break-word;
    height: 55px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1rem !important;
}

.question-post-time {
    display: flex;
    justify-content: end;
}

.question-post-detail {
    display: flex;
    justify-content: space-between;
}

.check-box-form.check-row .check-box-row {
    vertical-align: middle;
    align-items: center;
    padding: 10px 0px;
    flex-flow: wrap;
}

.switch-100 .toggle-check-radio {
    flex: 0 0 100px;
    width: 100px;
}

.check-box-form.check-row .check-box-row label {
    font-size: 0.8rem;
    margin: -2px 16px 0px 4px !important;
}

.join-type-row .channel-search-drp {
    width: auto;
}

.support-input {
    margin: 0px 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    width: 100%;
    resize: none;
    color: rgb(110, 110, 110);
    padding: 5px 10px;
    border: 1px solid rgb(219, 219, 219);
    height: 40px;
    border-radius: 9px;
}

.Agreement-button {
    background-color: var(--color-btn-mobile);
    border: none;
    border-radius: 5px;
    padding: 5px;
    margin: 0px 5px;
    font-size: 0.73rem;
    color: #ffffff;
}

.career-list .carrer-scroll .career-card-row > span:empty {
    display: none;
}

.video-paint .share-box-feed-entry-wrapper {
    position: static;
}

.paint-box {
    position: relative;
    z-index: auto;
    height: 300px;
}

    .paint-box:not(.resizeable-paint) {
        z-index: 9;
        height: 180px !important;
    }

        .paint-box:not(.resizeable-paint) .paint-content {
            overflow: auto;
            min-height: 300px;
            height: 100%;
        }

.paint-content .picturepanel > canvas {
    z-index: auto;
}

.chat + .career-cloud-box .note-component {
    z-index: auto;
}

.multiple-select-search.select-group .compose-to-search-result-multi {
    top: 77px;
    min-width: 250px;
}

.w-100 .width-control {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

@media screen and (max-width: 992px) {
    .feed-shared-update .poster-image {
        z-index: auto !important;
    }

    .post-event-body-box-icon-row {
        padding: 9px 13px !important;
    }

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

    .tree-category-box.channel-list .timeline-card-header {
        padding: 4px 8px 0px 9px;
    }

    #video-box {
        position: relative;
        width: 100%;
    }

    .chat {
        margin: -13px 0px 0px;
        padding: 5px;
    }

    .global-video.global-main .right-rail.aside-chat {
        position: fixed;
        top: 61px;
        height: 100vh;
        overflow: auto;
        background: #ffffff;
        right: 0px !important;
        display: none !important;
    }

        .global-video.global-main .right-rail.aside-chat.open-right-menu {
            display: block !important;
        }
}

.chat-closed {
    display: none;
}

    .chat-closed.active {
        display: block;
    }

.close-active .chat-open {
    display: none;
}

.msg-overlay-conversation-bubble.close-active {
    height: 50px;
}

.mt--2 {
    margin-top: -10px;
}

.title-input {
    position: absolute;
    background: var(--bg-color-toast-warning);
    bottom: 100%;
    font-family: var(--font-base);
    padding: 8px;
    font-size: 0.8rem;
    color: rgb(100, 100, 100);
    line-height: 1.4;
    border-radius: 7px;
    display: none;
}

.info-input {
    position: absolute;
    right: 29px;
    color: rgb(231, 231, 231);
}

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

.radio-list label input {
    vertical-align: -2px;
}

.radio-list label {
    font-family: var(--font-base);
    color: rgb(107, 107, 107);
    margin-right: 15px;
    font-size: 0.9rem;
}

.radio-list {
    display: flex;
}

.main-content .global-main.container > .frame-core {
    width: 100%;
}

.red-check:hover + .title-input {
    display: block;
}

.text-field p {
    margin-top: 10px;
    font-size: 0.8rem;
}

.text-field {
    font-family: var(--font-base);
    line-height: 1.5;
    font-size: 0.95rem;
    text-align: justify;
}

.multiple-select-search .check-all-table {
    top: 20px;
    left: 20px;
}

.indicators-question-value input::-webkit-outer-spin-button, .indicators-question-value input::-webkit-inner-spin-button {
    appearance: none !important;
    margin: 0px !important;
}

.multiple-select-search .compose-to-serach-row {
    display: flex;
}

.multi-select-check {
    margin-right: 7px;
}

.multiple-select-search .compose-to-search-result-multi {
    padding: 45px 5px 5px;
    top: 81%;
    left: 15px;
}

.multiple-select-search .compose-to-search-result-multi {
    top: 60px;
    left: 0px;
}

.multiple-select-search input.form-control {
    height: auto;
    min-height: auto;
    font-size: 0.8rem;
    margin-top: -7px;
}

.form-group.form-group-icon span {
    font-family: var(--font-base);
    font-size: 0.8rem;
    font-weight: 700;
}

.img-agreement {
    width: 170px;
}

.text-field > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 17px;
    font-size: 0.8rem;
}

.title-invite .form-group span {
    margin: 5px 0px;
}

.title-invite {
    font-size: 15px;
    font-family: var(--font-base);
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(236, 236, 236);
    padding: 2px 0px 15px;
    font-weight: 500;
    color: rgb(118, 118, 118);
}

.assignment-content-area span {
    padding: 0px 11px 7px;
    font-size: 13px;
    color: rgb(142, 142, 142);
    text-align: center;
    font-family: Poppins;
}

.invite-show .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.assignment-image-area img {
    height: 55px;
    border-radius: 5px;
    margin: 0px 4px;
    width: 55px !important;
}

.assignment-item {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0px 0px 15px;
    justify-content: center;
}

    .assignment-item > div {
        width: 100%;
        flex-flow: column;
        display: flex;
        align-items: center;
    }

.assignment-owl .owl-nav .owl-prev {
    position: absolute;
    left: 10px;
}

.assignment-owl .owl-nav .owl-next {
    position: absolute;
    right: 0px;
}

.assignment-owl .owl-nav {
    position: absolute;
    top: 2px;
    font-size: 1.7rem;
    left: -8px;
    right: -15px;
    color: rgb(191, 191, 191);
}

.assignment-owl {
    max-width: 288px;
}

.assignment-image-area {
    flex: 0 0 65px;
}

.assignment-counter {
    position: absolute;
    bottom: 13px;
    left: 13px;
    background-color: #ffffff;
}

.assignment-content-area {
    font-family: Poppins;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.assignment-counter span {
    margin: 0px 5px;
}

.assignment-item .btn {
    margin-top: 18px;
}

.assignment-counter {
    font-family: var(--font-base);
    color: rgb(119, 119, 119);
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content !important;
}

.assignment-main-title, .assignment-content-area h6 {
    font-family: var(--font-base);
    padding: 0px 0px 21px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgb(90, 90, 90);
}

.assignment-content-area h6 {
    padding: 0px;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    white-space: pre-wrap;
    min-height: 30px;
    margin-bottom: 0px;
    font-family: Poppins;
    text-align: center;
}

.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
    animation: 15s cubic-bezier(0.075, 0.82, 0.165, 1) 0s infinite normal none running colorSlide;
}

    .error-page .text-center {
        text-align: center;
    }

    .error-page h1, .error-page h3 {
        margin: 10px;
        cursor: default;
    }

    .error-page .fade-in {
        animation: 2s ease 0s infinite normal none running fadeIn;
    }

    .error-page h1 {
        font-size: 8em;
        transition: font-size 200ms ease-in-out 0s;
        border-bottom: 1px dashed white;
    }

span#digit1 {
    animation-delay: 100ms;
}

span#digit2 {
    animation-delay: 200ms;
}

span#digit3 {
    animation-delay: 300ms;
}

span#digit4 {
    animation-delay: 400ms;
}

span#digit5 {
    animation-delay: 500ms;
}

.error-page button {
    border: 1px solid white;
    background: transparent;
    outline: none;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    transition: background-color 200ms ease-in 0s;
    margin: 20px 0px;
}

    .error-page button:hover {
        background-color: white;
        color: rgb(85, 85, 85);
        cursor: pointer;
    }

@keyframes colorSlide {
    0% {
        background-color: rgb(21, 42, 104);
    }

    25% {
        background-color: royalblue;
    }

    50% {
        background-color: seagreen;
    }

    75% {
        background-color: tomato;
    }

    100% {
        background-color: rgb(21, 42, 104);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.w-50 {
    margin-right: 30px;
    width: 50px !important;
}

.btn-info.outline-btn {
}

.wideguy {
    min-width: 20em;
}

.line-active + .frame.result-tabs .about-user-box .form-group {
    width: calc(50% - 20px);
    margin: 6px 10px;
}

.form-group.internal-buttons-row {
    text-align: right;
    width: 100% !important;
}

.btn-excel i {
    color: rgb(24, 143, 66) !important;
}

.btn-excel {
    margin-left: 10px;
    font-size: 0.8rem !important;
    color: rgb(156, 156, 156) !important;
}

@media screen and (max-width: 768px) {
    .address-selection-box .address-box-row .address-tools-btn-box {
        opacity: 1;
    }

    .line-active + .frame.result-tabs .about-user-box .form-group {
        width: calc(100% - 20px);
    }

    .assessment-list-component .multi-select-search-filter {
        padding-left: 0px;
    }
}

.line-active + .frame.result-tabs .about-user-box.active {
    display: flex;
    flex-wrap: wrap;
}

.invite-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    padding-bottom: 10px;
}

.QuestionListDraggable {
    position: relative;
}

.loading-row {
    position: absolute;
    width: 100%;
    inset: -5px 0px 0px;
    background: rgba(221, 221, 221, 0.63);
    height: 78px;
    border-radius: 15px 15px 0px 0px;
    display: flex;
}

.invite-row > div {
    display: flex;
    align-items: center;
}

.loading-row .logo-loader {
    margin-top: -35px;
    padding: 3px 0px;
    height: 135px;
    width: 135px;
}

.QuestionListDraggable li + .loading-row {
    top: auto !important;
}

.select-all-table > th {
    position: relative;
}

.select-all-table .check-all-table {
    top: 14px;
    left: 15px;
}

.generate-header-question {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}

.assessment-row-input .generate-header-question label {
    padding: 8px 7px 2px 6px;
    justify-content: center;
}

.padding-7 {
    padding: 0px 7px;
}

.resizeable-paint .row {
    margin: 0px;
}

.resizeable-paint {
    overflow: auto hidden;
    resize: both;
}

.banner-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: #ffffff;
    align-items: center;
    min-height: fit-content;
    position: absolute;
    top: 15px;
    margin: 0px !important;
    z-index: 3 !important
}

.dicount-code-control {
    position: absolute;
    bottom: 0px;
}

.input-dropdown-control {
    display: flex;
    margin-top: 10px;
    margin-bottom: -5px;
    justify-content: end;
}

.assessment-manage-tab-control > .row {
    width: 100%;
    margin: 0px;
}

.assessment-manage-tab-control .assessment-item-dec {
    font-size: 0.7rem;
}

.frame.result-tabs .row {
}

.assessment-manage-tab-control .col-md-4 > .assessment-item {
    padding: 0px 8px;
    background: rgb(248, 248, 248);
}

.assessment-manage-tab-control .assessment-item-dec strong, .assessment-manage-tab-control .second-label {
    min-width: 50px;
}

.line-active + .frame.assessment-manage-tab-control .about-user-box .form-group {
    width: 100%;
    margin: 0px 0px 10px;
}

.list-item-session {
    flex-direction: column !important;
}

    .list-item-session .icon-assessment {
        width: 20px;
        margin-top: 15px;
    }

    .list-item-session .assessment-btn-row {
        margin: 10px !important;
    }

    .list-item-session .assessment-detail-list .dropdown-toggle {
        background-color: transparent;
        padding: 0px 8px;
        margin-right: -7px;
    }

    .list-item-session .filter-box-asssessment.assessment-search-box-main {
        padding: 18px 18px 0px;
    }

.input-credit-mini .default-input {
    margin: 6px -3px -2px;
    border-width: 1px;
    font-size: 15px;
    padding: 4px 5px;
}

.multiple-select-search .mini-search-user .input-text-select-row {
    padding: 0px 15px;
    width: 100%;
}

.mini-search-user .search-inputs label:empty {
    display: none !important;
}

.mini-search-user .input-text-select-row input {
    margin: 2px 0px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    width: 100%;
    resize: none;
    color: rgb(110, 110, 110);
    padding: 5px 10px;
    border: 1px solid rgb(219, 219, 219);
    height: 40px;
    border-radius: 9px;
}

.mini-search-user .search-inputs {
    display: flex;
}

.users-list-video .multiple-select-search .mini-search-user .input-text-select-row input {
}

.feed-space-between label {
    width: auto !important;
}

.feed-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .feed-space-between span {
        min-width: 115px;
        padding: 8px;
        font-family: var(--font-base);
        font-weight: 500;
        text-align: center;
        font-size: 15px;
        color: #ffffff;
        background: var(--color-bg-body-text);
        border-radius: 0 9px 9px 0;
    }

.credit-row-title {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    font-weight: 500;
    color: rgb(146, 146, 146);
}

.credit-row-items {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    width: calc(100% - 400px);
}

.credit-row .credit-row-items > div {
    width: calc(33% - 10px);
    background: rgb(221, 221, 221);
    min-width: 150px;
    padding: 11px;
    margin: 5px;
    color: rgb(75, 75, 75);
    border-radius: 8px;
    font-weight: 500;
    font-size: 19px;
    box-shadow: rgba(82, 63, 105, 0.05) 0rem 0.3125rem 0.3125rem 0rem;
}

.student-wallet-table .credit-row-items > div {
    width: calc(33% - 10px);
    text-align: left;
    display: flex;
    align-items: center;
}

.student-score-table .credit-row-items {
    display: flex;
    padding: 0 10px 15px 10px;
    flex-wrap: wrap;
    width: calc(100% - 400px);
    margin: 0 15px;
}

select.form-control option {
    font-weight: 500;
}

.student-wallet-table .credit-row-items > div > span, .credit-row-items.credit > div > span {
    padding: 7px;
    display: inline-block;
    color: #4a4a4a;
}

.credit-row-items.credit > div > span {
    font-size: 16px;
}

.student-wallet-table .credit-row-items > div > div, .credit-row-items.credit > div {
    min-width: 150px;
    padding: 11px;
    margin: 5px;
    color: rgb(75, 75, 75);
    border-radius: 8px;
    font-weight: 500;
    font-size: 19px;
    box-shadow: rgba(82, 63, 105, 0.05) 0rem 0.3125rem 0.3125rem 0rem;
}

    .credit-row-items.credit > div:last-of-type, .credit-row-items > div.try-credit, .credit-row-items > div .try-credit {
        border-color: var(--color-secondary);
        background: var(--color-bg-secondary);
    }

    .credit-row-items.credit > div:nth-of-type(2),
    .credit-row-items > div.usd-credit, .credit-row-items > div .usd-credit {
        border-color: var(--color-tertiary);
        background: var(--rgba-primary-3);
    }

    .credit-row-items.credit > div:nth-of-type(3),
    .credit-row-items > div.eur-credit, .credit-row-items > div .eur-credit {
        border-color: var(--color-warning);
        background: var(--color-bg-warning);
    }

.credit-row-items .success-cr {
    background: var(--rgba-secondary-4) !important;
}

.credit-row-items .total-cr {
    background: #f4f4c6 !important;
}

    .credit-row-items .success-cr > span:last-child, .credit-row-items .total-cr > span:last-child {
        font-weight: 800;
    }

.em-loading {
    width: 20px;
    position: relative;
}

    .em-loading .logo-loader {
        transform: scale(0.15);
        position: absolute;
        right: -80px;
        top: -63px;
    }

.main-result-setting.assessment-result-setting {
    display: inline-block;
    width: inherit;
}

    .main-result-setting.assessment-result-setting .event-credit-box-price > div.form-price-item {
        margin-right: 5px;
    }

    .main-result-setting.assessment-result-setting .form-price-item .event-mini-input {
        width: 78px;
        padding-left: 24px;
        font-weight: 500;
        font-size: 10px;
    }

    .main-result-setting.assessment-result-setting .form-price-item span {
        font-weight: 400;
    }

    .main-result-setting.assessment-result-setting .event-credit-box.event-credit-box-price {
        padding-left: 24px;
    }

.assessment-result-setting .assessment-terms-button .btn-info {
}

.sticky-child .main-result-setting.assessment-result-setting .form-price-item .event-mini-input {
    width: 92px;
}

.member-select + .assessment-result-setting .assessment-terms-button .btn-info:hover {
}

@media screen and (max-width: 768px) {
    .credit-row-items > div {
        font-size: 12px;
        min-width: auto;
    }

    .credit-row-items {
        width: 100%
    }

    .button-row-footer {
        padding: 0
    }

    .credit-row {
        margin-bottom: 35px;
        flex-wrap: wrap;
    }

    .user-credit-box {
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 15px;
    }

    .internal-buttons-row.credit-header > div > button {
        margin-left: 0px !important;
    }

    .main-result-setting.assessment-result-setting .event-credit-box.event-credit-box-price {
        padding-left: 0px;
    }

    .assessment-list-component .list-item-assessment .assessment-title-row.assessment-title-list {
        min-width: calc(100vw - 247px);
    }

    .assessment-list-component .crumbs ~ .assessment-btn-row, .assessment-manage-tab-control .assessment-button-control .assessment-btn-row {
        right: 185px !important;
    }

    .global-main.layout-box-assessment.container.row.pending-parent-box {
        min-height: auto;
        padding: 10px;
    }
}

@media screen and (max-width: 768px) {
    .question-box.question-box-right > div img[src="img/icon/pausee-blue.png"] ,
    .question-box.question-box-right > div img[src="img/icon/play-blue.png"] {
        position: absolute;
        left: 2px;
        top: 0px;
        width: 12px !important;
    }

    .image-mapper .mapperShow-box img.red-img {
        width: 16px !important;
    }

    .mapperShow-box.fit-size img {
        margin: 0
    }
}

@media screen and (max-width: 400px) {
    .assessment-list-component .list-item-assessment .assessment-title-row.assessment-title-list {
        min-width: calc(100vw - 200px);
    }
}

.big-search-user {
    display: flex;
    flex-wrap: wrap;
}

    .big-search-user .input-text-select-row, .big-search-user .div-select-row {
        width: calc(25% - 10px);
        margin: 5px;
    }

.select-all-table .mail-select-all {
    background: transparent;
    padding-left: 0px;
}

.search-result-control {
    max-height: 250px;
    overflow: auto;
    margin-bottom: 10px;
}

.multiple-select-search .mini-search-user + .compose-to-search-result-multi {
    left: 0px;
    width: 50%;
    top: 79px !important;
}

@media screen and (min-width: 768px) {
}

.mini-search-user {
    display: flex;
    width: 100%;
    padding-right: 10px;
}

    .mini-search-user .multiple-select-search .compose-to-search-result-multi {
        top: 70px;
    }

.link-page-title {
    font-size: 1.4rem;
    color: rgb(117, 117, 117);
    font-weight: 600;
}

.link-item {
    position: relative;
    display: flex;
    padding: 5px 17px 9px 30px;
    width: fit-content;
    font-family: var(--font-base);
}

.about-user-box .link-page > .form-group .form-control {
    margin-top: 11px;
    height: 28px;
    font-size: 0.8rem;
}

.link-item-edit {
    position: absolute;
    left: 5px;
    color: rgb(3, 169, 244) !important;
}

.icon-open {
    color: rgb(167, 167, 167);
    margin: 3px;
}

.link-page {
    display: flex;
    justify-content: space-between;
}

.aspects-page .link-item {
    padding: 5px 17px 9px 7px;
    color: rgb(37, 37, 37);
    width: 100%;
    background: rgb(249, 249, 249);
}

.node-main .link-page.aspects-page .link-item {
    flex-wrap: wrap;
}

    .node-main .link-page.aspects-page .link-item input {
        margin: 4px;
    }

.link-item div {
    width: 100%;
}

.row-group-flex .row-group-flex {
    width: 90px;
    padding: 10px;
}

.node-main.aspects-page .node-tree-root li span:first-child::after, .node-main.aspects-page.caret-down::after {
    border-color: rgb(219, 219, 219) !important;
    border-style: solid !important;
    border-width: 0px 0px 0.07rem 0.07rem !important;
}

.node-main.aspects-page .node-tree-root li .close span:first-child::after {
    display: none;
}

.node-main.aspects-page .node-main-page > .node-tree-root > li > div > span::after {
    display: none;
}

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

.aspects-page .w-100 > .link-item-list .link-item > div .link-item-title {
    margin: 10px;
}

.aspects-page {
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
}

.node-main-page {
    padding: 15px;
}

.link-box-header {
    display: flex;
    margin-bottom: 25px;
    margin-top: 5px;
    align-items: center;
}

.link-row {
    display: flex;
    align-items: center;
}

.form-group .link-row .form-control {
    max-width: fit-content;
    margin: 2px;
}

.text-answer {
    font-family: var(--font-base);
    line-height: 1.3;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.lesson-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(228, 228, 228);
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 400;
    padding: 5px 5px 13px 1px;
}

    .lesson-answer-header h4 {
        font-weight: 600;
        font-size: 1.5rem;
    }

.link-box-item .main-img {
    width: 100px;
    min-height: 100px;
    background: rgb(239, 239, 239);
    padding: 7px;
    margin: 10px 0px;
    border-radius: 10px;
}

.lesson-answer-title {
    font-size: 1.1rem;
    margin-right: 15px;
    display: inline-block;
}

.lesson-answer-row-item {
    padding: 10px 0px;
    margin-bottom: 10px;
}

.lesson-answer-row-text {
    margin-top: 15px;
    display: flex;
}

.lesson-answer-row-letter > span {
    font-size: 1.3rem !important;
}

.lesson-answer-row-letter span {
    font-size: 0.9rem;
    padding: 4px;
    color: rgb(131, 129, 129);
    font-family: var(--font-base);
    font-weight: 500;
}

.lesson-answer-row-letter {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(237, 237, 237);
    margin: 0px 0px 0px -1px;
    padding: 0px;
    align-items: center;
}

    .lesson-answer-row-letter a {
        border-bottom: 1px solid rgb(237, 237, 237);
        padding: 5px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

.link-box-item {
    display: flex;
    flex-direction: column;
}

    .link-box-item > a {
        width: fit-content;
    }

    .link-box-item span {
        font-family: var(--font-base);
        min-height: 32px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.lesson-answer-row {
    padding: 10px;
    border: 1px solid rgb(221, 221, 221);
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 7px;
}

.link-page .item-upload {
    min-width: 130px !important;
}

.link-box-header h3 {
    padding: 0px 8px;
    font-size: 19px;
}

.link-box-header > img {
    width: 23px;
}

.link-box-main {
    padding: 15px;
}

.link-page h4 {
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    margin-bottom: 15px;
}

.link-page > .form-group:first-child {
    position: absolute;
    left: 200px;
    right: auto;
    width: fit-content;
    margin: auto;
    top: -47px;
}

.link-item .form-check {
    margin-left: 10px;
}

.link-item-title {
    font-family: var(--font-base) !important;
}

.btn-link {
    background: rgb(221, 221, 221);
    padding: 0px 9px;
    margin-top: 15px;
    color: rgb(108, 108, 108) !important;
}

.link-item-list {
    width: 100%;
    padding: 15px 0px;
}

.show-drop-mobile .global-nav-bar-icon.img-mobile-size {
    width: 45px;
    height: 100%;
    margin-top: 0px;
    margin-bottom: -18px;
}

@media screen and (max-width: 768px) {
    .join-box a {
        background: #5b32ff;
        font-weight: 500;
    }

    .channel-item video, .channel-item img {
        max-width: inherit;
    }

    .career-cloud-box .note-component .form-group {
        justify-content: center;
    }

    .big-search-user .input-text-select-row, .big-search-user .div-select-row {
        width: 100%;
    }

    .big-search-user {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }

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

.row-select-item > .form-group {
    margin: 3px 5px 7px 0px;
    min-width: 195px
}

.item-type a {
    color: rgb(102, 102, 102);
}

.row-select-item {
    margin-bottom: 20px;
}

.cell-item-type {
    position: relative;
}

.cell-item-row > span::after {
    position: absolute;
    content: "";
    height: 100%;
    top: 0px;
    width: 19px;
    background-color: rgba(220, 255, 215, 0.49);
    opacity: 0;
    transform: translateX(0px);
}

.bg-deactive {
    width: 100%;
    padding: 0px 10px 5px 1px;
    display: inline-block;
    max-height: 300px;
    overflow: auto;
}

.bg-active {
    background: #ffffff;
    box-shadow: rgb(231, 231, 231) 1px 1px 6px;
    width: 100%;
    display: inline-block;
    max-height: 300px;
    overflow: auto;
}

.cell-item-title > div {
    display: flex;
}

.cell-item-title {
    display: flex;
    margin-bottom: 15px;
    align-items: start;
    justify-content: space-between;
}

    .cell-item-title h4 {
        font-size: 1.3rem;
        color: rgb(102, 102, 102);
        font-weight: 500;
    }

    .cell-item-title p {
        color: rgb(102, 102, 102);
        font-size: 0.9rem;
    }

.cell-item-row > span:hover::after {
    opacity: 1;
}

.cell-item-type tr {
}

.cell-item-row > span:empty {
    transform: translateX(0px);
}

.cell-item-row > span {
    min-width: 22px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    height: 24px;
    padding: 0px 1px;
    margin: 1px;
}

.cell-item-type span {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(237, 237, 237);
}

.color-item-type {
    position: absolute;
    left: 9px;
    width: 8px;
    top: 13px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 3px;
}

.cell-item-row {
    display: flex;
}

.header-letter {
    position: relative;
    z-index: 22
}

.mt-template-control {
    margin-top: 58px
}

.item-type {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: rgb(221, 221, 221) 3px 1px 5px;
    padding: 11px 11px 11px 25px;
    margin: 5px 0px;
    border-radius: 4px;
}

.form-bg-white {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
}

.row-select-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.node-main-page > .node-tree-root .node-tree-root {
    display: none;
}

.node-main-page > .node-tree-root .caret-down ~ .node-tree-root {
    display: block;
}

.aspects-page .assessment-btn.color-secondary i {
    margin: 0px;
}

.aspects-page .blazor-context-menu__list {
    padding: 0px;
}

.aspects-page .blazor-context-menu__item--default {
    padding: 5px 9px;
    font-family: var(--font-base);
    font-size: 0.9rem;
}

.end-assessment {
    display: flex;
    flex-direction: column;
    font-family: var(--font-base) !important;
}

    .end-assessment img {
        max-width: 300px;
        margin: 25px auto 60px;
    }

    .end-assessment button {
        width: fit-content;
        margin: 10px auto;
        background: transparent;
        border: none;
        color: rgb(166, 162, 162);
        transition: color 0.3s ease 0s;
    }

        .end-assessment button:hover {
            color: rgb(126, 121, 121);
        }

.successful-message {
    color: rgb(176, 224, 181);
}

.loading-mini-icon {
    position: relative;
    width: fit-content;
    margin: 9px 0px;
    font-size: 0.8rem;
    font-weight: 500;
}

#loading-bar-spinner.spinner {
    margin-left: -20px;
    top: 0px;
    right: -30px;
    margin-top: -5px;
    position: absolute;
    animation: 400ms linear 0s infinite normal none running loading-bar-spinner;
    z-index: 1 !important;
}

    #loading-bar-spinner.spinner .spinner-icon {
        width: 20px;
        height: 20px;
        border-width: 3px;
        border-style: solid;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-image: initial;
        border-radius: 50%;
        border-top-color: rgb(0, 200, 177) !important;
        border-left-color: rgb(0, 200, 177) !important;
    }

@keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
    }

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

.product-item-book-border {
    border-radius: 5px;
    padding: 15px 7px;
    display: flex;
    min-height: 250px;
    margin: 50px 0px 35px;
    position: relative;
    background: #ffffff;
    box-shadow: rgb(204, 204, 204) 0px 0px 5px;
}

    .product-item-book-border.room-box {
        border-radius: 30px;
        padding: 20px 5px 20px 25px;
        margin: 16px 0px 0px;
        box-shadow: none;
        min-height: 160px;
    }

.room-box .gallery-slider-control > .product-item-publish-image {
    padding: 0px !important;
}

.room-box .product-item-book-border {
    border-radius: 20px;
    min-height: fit-content;
}

.product-item-publish-image img {
    border-radius: 5px;
}

.product-item-publish-body {
    justify-content: center;
    width: 100%;
    display: flex;
    position: relative;
}

.product-item-publish-body-context {
    width: 100%;
    max-height: 100%;
    display: flex;
    margin: 0px;
    justify-content: space-between;
}

.product-item-publish-body {
    justify-content: center;
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    padding: 0px;
}

.product-item-publish-title-box {
    display: flex;
}

.product-item-certificate-title-top {
    font-family: Poppins;
    font-size: 14px;
    color: rgb(144, 144, 144);
    padding: 0px;
    font-weight: 500;
}

.publisher-items-description {
    max-width: 95%;
    line-height: 25px;
    margin: 10px 0px 20px;
    text-overflow: ellipsis;
    min-height: 130px;
    text-align: justify;
    font-family: calibri;
    font-weight: bold;
    font-size: 14px;
    color: rgb(102, 102, 102);
}

.room-box .publisher-items-description {
    line-height: 22px;
    margin: 10px 0px 0px;
    min-height: 130px;
    text-align: justify;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 14px;
    color: rgb(102, 102, 102);
}

.native-search-box .publisher-items-description, .native-search-box .publisher-items-description-box {
    min-height: fit-content;
}

.user-managment .big-search-user > div:first-child {
    width: 100%;
    display: flex;
}

.user-managment .big-search-user .div-select-row {
    width: auto;
}

.user-managment .big-search-user {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.room-display {
    border-radius: 25px;
    min-height: 100px;
    padding: 45px 20px 10px;
    margin: 0px auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (min-width: 1000px) {
    .room-page .result-search-teacher {
        margin: 35px -10px 0px;
        padding: 0px;
    }
}

@media screen and (max-width: 768px) {
    .room-search-title {
        flex-flow: column wrap;
    }

    .room-display .select-search {
        border-radius: 10px;
        margin: 7px 0px;
        background: #ffffff;
    }

    .room-box .row {
        margin: 0px !important;
    }

    .native-search-box .room-search-title .form-control {
        max-width: 100%;
        width: 100%;
    }

    .room-search {
        flex-direction: column-reverse;
        display: flex;
        align-items: baseline;
    }

    .room-display .form-group .check-row {
        margin: 2px;
    }

    .room-display {
        padding: 15px !important;
    }
}

.gallery-slider-control > .product-item-publish-image {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.room-search-title {
    display: flex;
}

.publisher-items-de h5 {
    text-align: center;
    color: rgb(96, 96, 96);
    font-family: var(--font-base);
    font-weight: 500;
}

.room-page .publisher-items-de h5 {
    font-size: 13px;
}

.room-page .label-item {
    min-height: fit-content;
}

.room-page .eventView-row .footer-item-event img {
    width: 20px !important;
    margin-left: 10px !important;
    height: 20px !important;
}

.room-page .owl-dots {
    display: none;
}

.room-page .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: -13px 0px 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 0px;
}

.room-page .eventView-row .footer-item-event {
    font-size: 16px;
    font-family: Calibri;
    color: rgb(51, 51, 51);
    font-weight: 600;
}

.room-item-description p {
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: rgb(47, 47, 47);
    font-weight: 700;
}

.gallery-slider-control a {
    margin: 9px -7px 16px 16px;
    display: inline-block;
}

    .gallery-slider-control a img {
        width: 15px;
        height: 15px;
        object-fit: contain;
    }

.room-tag {
    color: rgb(113, 113, 113);
    font-family: var(--font-base);
    font-size: 0.8rem;
    font-weight: 500;
    height: fit-content;
    min-height: 33px;
    padding-left: 15px;
    display: inline-block;
    width: calc(100% - 250px);
    min-width: 250px;
}

.more-room, .less-room {
    border: 2px solid rgb(177, 177, 177);
    margin: 10px 0px;
    display: inline-block;
    font-size: 0.8rem;
    padding: 5px 18px;
    border-radius: 5px;
    width: fit-content;
    cursor: pointer;
    color: rgb(177, 177, 177) !important;
}

.less-room {
    border-color: rgb(215, 215, 215);
    color: rgb(215, 215, 215) !important;
}

.room-box .teacher-show-read-more:empty {
    display: none !important;
}

.publisher-items-de {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.product-item-publish-body-context .product-item-publish-body > div {
    display: flex;
    flex-direction: column;
    padding: 0px 5px;
}

.room-box .publisher-items-de-bottom {
    margin-bottom: -35px;
    text-align: center;
}

.publisher-items-description-box {
    min-height: 150px;
    font-size: 14px;
}

.publisher-items-price-box {
    text-align: right;
    height: 100%;
}

.discount-code-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
    width: 100%;
    align-items: flex-start;
}

.input-voucher {
    height: 30px;
    outline: none;
    border: 1px solid rgb(204, 204, 204);
    padding-left: 7px;
    width: 100%;
}

.discount-code-box .timer {
    margin: 5px 0px;
    color: rgb(103, 116, 132);
    font-size: 0.75rem;
}

.items-price-box-button {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 63%;
    margin-bottom: 0px;
}

.publisher-items-price {
    font-size: 15px;
    width: 100%;
    height: 72px;
    background: rgb(95, 167, 244);
    text-align: center;
    line-height: 72px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
}

.publisher-items-price, .publisher-items-time, .input-voucher {
    border-radius: 5px;
}

.publisher-items-time {
    margin-bottom: 10px;
    height: 72px;
    width: 100%;
    text-align: center;
    background: rgb(89, 89, 89);
    line-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publisher-items-discount {
    color: #ffffff;
    height: 32px;
    vertical-align: bottom;
    line-height: 36px;
}

.mixed-report-item {
    max-width: 100%;
    overflow: auto;
    display: flex;
}

    .mixed-report-item > .item {
        margin-right: 10px;
        min-width: 200px;
    }

@media screen and (max-width: 400px) {
    .mixed-report-item > .item {
        min-width: 100%;
    }
}

.mixed-report-item > .item .label-item {
    padding-top: 0px !important;
}

@media screen and (max-width: 992px) {
    .mixed-report-item > .item {
        position: relative;
        min-height: 69px;
        background: rgb(247, 247, 247);
    }

    #totop, .back-button {
        z-index: 3
    }

    .mixed-report-item .slide-item-event {
        background-color: transparent;
    }

    .mixed-report-item > .book.item .slide-item-event span {
        left: auto;
        right: auto;
        margin: auto;
        text-align: center;
        width: 100%;
        bottom: 10px;
    }

    .mixed-report-item .slide-item-event h4 {
        z-index: 1;
        position: relative;
        padding-top: 9px;
        background-color: transparent;
    }
}

.search-content {
}

.custom-table.bg-white .form-group .form-control {
    margin-top: 7px;
}

.search-content.fixed .select-search .sort-icon {
    right: 15px !important;
    top: 38% !important;
}

.search-content.fixed .room-display .form-group {
    margin: 0px;
}

.search-content.fixed .room-display {
    min-height: 80px;
    max-width: 1025px;
    flex-direction: row;
    align-items: center;
    transform: translateX(3px);
    padding: 5px 20px 4px;
    border-radius: 10px;
    box-shadow: rgba(146,146,146, .43) 1px 2px 6px 1px;
}

.alert-box {
    background: var(--bg-color-toast-warning);
    padding: 10px;
    margin: 10px 0px;
    border-radius: 5px;
    line-height: 1.3;
    font-family: var(--font-base);
}

.landing-page {
    position: relative;
    background-color: #ffffff;
}

    .landing-page .header-area {
        display: flex;
        padding: 25px 0px 0px;
        position: relative;
    }

        .landing-page .header-area .logo {
            text-transform: uppercase;
            font-style: italic;
            margin-top: 10px;
            font-size: 19px;
            width: 300px;
            color: rgb(93, 93, 93);
        }

        .landing-page .header-area .links {
            list-style: none;
            padding: 0px;
            margin: 0px;
            width: 100%;
            text-align: right;
        }

            .landing-page .header-area .links li {
                display: inline-block;
                margin-left: 30px;
                color: rgb(93, 93, 93);
                cursor: pointer;
            }

                .landing-page .header-area .links li:last-child {
                    border: 0px;
                    border-radius: 20px;
                    padding: 10px 18px;
                    color: #ffffff;
                    background-color: rgb(108, 99, 255);
                }

    .landing-page .info {
        width: 35%;
        float: left;
        margin-top: 130px;
    }

        .landing-page .info h1 {
            font-size: 44px;
            margin: 0px 0px 20px;
            line-height: 1.4;
            color: rgb(93, 93, 93);
        }

        .landing-page .info p {
            margin: 0px;
            line-height: 1.6;
            font-size: 15px;
            color: rgb(93, 93, 93);
        }

        .landing-page .info button {
            border: 0px;
            border-radius: 20px;
            padding: 12px 30px;
            margin-top: 30px;
            cursor: pointer;
            color: #ffffff;
            background-color: rgb(108, 99, 255);
        }

    .landing-page .image {
        width: 50%;
        float: right;
        margin-top: 35px;
    }

        .landing-page .image img {
            max-width: 100%;
        }

.clearfix {
    clear: both;
}

.comment-book {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-family: var(--font-base);
}

    .comment-book p {
        font-family: var(--font-base);
        padding: 10px 0px;
        line-height: 1.4;
        font-size: 0.85rem;
        font-weight: 400;
    }

    .comment-book p {
        font-size: 0.8rem;
        color: rgb(57, 57, 57);
    }

    .comment-book span {
        font-size: 0.7rem;
        font-weight: 400;
    }

.row-control-size textarea {
    font-size: 0.75rem;
    margin-left: 5px;
    font-family: var(--font-base);
}

.col-md-8.row-control-size {
    display: flex;
}

.assessment-student.book-list .form-group.last-input {
    margin-left: 6px;
    margin-right: -25px;
}

.row-button-book {
    display: flex;
    flex-direction: column;
    align-items: end;
}

@media screen and (max-width: 768px) {
    .career-card-item img {
        margin-top: 0px;
    }

    .user-row-box {
        width: 100%;
    }

    .user-row-item {
        height: 70px;
        width: 70px;
        left: 0px;
    }

    .frame-core.olakid ~ .user-row .user-row-icons {
        min-height: 20px;
        margin-top: -51px;
        margin-left: 83px;
        margin-bottom: 5px;
    }

    .book-box-page h3 {
        margin-top: 20px;
    }

    .comment-book p, .dec-book {
        font-size: 0.82rem;
    }

    .assessment-student.book-list .form-group.last-input {
        margin: 0px;
        padding: 7px;
    }

    .assessment-student.book-list .form-group label {
        margin: 8px 0px 4px;
        width: 100%;
    }

    .book-list .form-group select.form-control {
        min-width: 80%;
    }

    .pages-book, .book-row {
        margin: 5px 0px 0px;
    }

    .assessment-student.book-list .form-group.check-box-control label {
        padding-top: 0px;
    }

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

    .col-md-8.row-control-size {
        flex-direction: column;
    }

    .row-control-size textarea {
        margin: 4px 0px;
    }
}

.comment-book {
    margin-bottom: 15px;
}

.assessment-report-title > img {
    width: 180px;
}

.assessment-report-title > span {
    padding: 14px 6px;
    font-size: 24px;
    color: rgb(47, 47, 47);
    font-weight: 400;
}

.report-detail > span {
    margin-bottom: 16px;
    font-size: 19px;
    color: rgb(39, 39, 39);
}

.assessment-report-header {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

.assessment-report-title, .report-detail {
    display: flex;
    flex-direction: column;
}

    .report-detail img {
        width: 40px;
    }

.assessment-report-footer div {
    display: flex;
    align-items: center;
}

.assessment-report-footer {
    display: flex;
    margin-top: 40px;
    justify-content: space-between;
}

.blue-badge, .green-badge {
    width: 12px;
    height: 22px;
    margin: 0px 5px;
}

.blue-badge {
    background-color: rgb(163, 184, 205);
}

.green-badge {
    background-color: rgb(195, 218, 181);
}

.report-footer-de .blue-badge, .report-footer-de .green-badge {
    width: 22px;
    height: 22px;
}

.assessment-report-footer-last {
}

.color-border {
    margin-top: 20px;
    display: flex;
}

.has-badge {
    display: flex;
    align-items: center;
}

.report-box .table thead th {
    vertical-align: middle;
}

.color-border > li {
    width: 25%;
    height: 10px;
}

    .color-border > li:nth-child(1) {
        background-color: rgb(30, 56, 104);
    }

    .color-border > li:nth-child(2) {
        background-color: rgb(141, 170, 223);
    }

    .color-border > li:nth-child(3) {
        background-color: rgb(43, 85, 157);
    }

    .color-border > li:nth-child(4) {
        background-color: rgb(178, 199, 233);
    }

.partial-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px;
}

.html-design .tab-box {
    width: 100%;
    margin: 0px;
}

.partial-item img {
    width: 30px;
    flex: 0 0 30px;
    margin: 7px auto 9px;
}

.partial-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: calc(50% - 13px);
    max-width: 84px;
    background: rgb(224, 224, 224);
    margin: 2px;
    padding: 5px;
    cursor: all-scroll;
    border-radius: 5px;
}

.innerhtml {
    width: 100%;
    margin-left: 5px;
}

.partial-item p {
    font-family: var(--font-base);
}

.html-design {
    display: flex;
    justify-content: space-between;
}

.menu-button-control {
    position: absolute;
    right: -40px;
    width: 35px;
    height: 35px;
    top: 0px;
    z-index: 999999;
    background: rgb(243, 243, 243);
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    justify-content: center;
    box-shadow: rgb(221, 221, 221) 1px 1px 1px;
    border-radius: 0px 0px 10px;
}

.innerhtml-menu + .innerhtml .bilnet-body {
    position: relative;
}

.menu-button-control i {
    transition: transform 0.3s ease 0s;
}

.innerhtml-menu.open .menu-button-control i {
    transform: rotate(180deg);
}

.html-design {
    position: relative;
    min-height: 100vh;
}

.innerhtml-menu {
    position: fixed;
    z-index: 999999;
    width: 300px;
    padding: 0px;
    left: -300px;
    flex: 0 0 300px;
    min-height: 100vh;
    height: 100%;
    bottom: 0px;
    background: #ffffff;
    border-radius: 0px 5px 15px 0px;
    box-shadow: rgb(221, 221, 221) 1px 1px 4px;
}

    .innerhtml-menu.open {
        left: 0px;
    }

div[id^="row_navbar"] {
    width: 100%;
}

.header-area {
}

.margin-bottom {
    margin-bottom: 35px;
}

.bilnet-logo-box {
    width: 100%;
}

.bilnet-logo {
    z-index: 9;
    position: relative;
}

.bilnet-main-manu {
    display: flex;
    flex-direction: row-reverse;
    height: 50px;
    align-items: center;
}

    .bilnet-main-manu > li > a {
        white-space: nowrap;
    }

.fgitem {
    margin: 3px;
    border-radius: 2px;
    position: absolute;
    left: 0px;
    right: 5px;
    align-items: flex-start;
    z-index: 2147483647;
    top: 0px;
    height: 100%;
    border: 2px dashed var(--border-color-toast-warning);
    display: none;
}

    .fgitem > ul {
        display: flex;
        width: fit-content;
        align-items: center;
        background: var(--border-color-toast-warning);
        padding: 8px 13px;
        margin: -2px;
        border-radius: 2px;
    }

    .fgitem li {
        margin-right: 20px;
    }

        .fgitem li img {
            width: 15px;
        }

.element-drag {
    inset: 0px;
    color: rgb(123, 123, 123);
    font-size: 50px;
    text-align: center;
}

    .element-drag svg {
        transform: translateY(-50%);
        top: 50%;
        left: 0px;
        margin: auto;
        right: 0px;
        position: absolute;
    }

.undefaultheight {
    height: auto;
}

.ui-droppable .drag-content + div {
    float: right;
    width: 100%;
}

.html-page .undefault {
    min-height: inherit !important;
    border: 1px solid rgb(220, 220, 220) !important;
}

.drag {
    height: auto;
    padding: 5px;
    background: rgb(236, 236, 236);
    min-height: 250px !important;
    border: 2px dashed rgb(61, 76, 102) !important;
}

.undefault {
    height: auto;
    background-color: transparent;
    text-align: center;
    min-height: 250px !important;
    border-style: solid !important;
    border-color: rgb(220, 220, 220) !important;
    border-image: initial !important;
    border-width: 0px 0px 1px 1px !important;
}

.html-page .undefault {
    position: relative;
    min-height: inherit !important;
    border: 1px solid rgb(220, 220, 220) !important;
}

.hint--warning.hint--top::before {
    border-top-color: rgb(192, 152, 84);
}

.hint--top:hover::after, .hint--top:hover::before, .hint--top:focus::after, .hint--top:focus::before {
    display: none;
}

.hint--top::before {
    margin-bottom: -12px;
}

.hint--top::after {
    margin-left: -18px;
}

.hint--top::before, .hint--top::after {
    bottom: 100%;
    left: 50%;
}

.hint--top:hover::after, .hint--top:hover::before, .hint--top:focus::after, .hint--top:focus::before {
    transform: translateY(-8px);
}

@media screen and (max-width: 1200px) {
    .post-content .feed-shared-body .owl-item {
        max-width: 100% !important;
    }

    .right-assessment-search {
        justify-content: end;
    }

        .right-assessment-search .assessment-btn.color-secondary {
            justify-content: center;
            align-items: center;
        }

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

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

.click-copy span {
    display: block !important;
}

.copy-text {
    position: relative;
    padding: 0px;
    border: none;
    display: flex;
}

    .copy-text input.text {
        padding: 0px 7px;
        font-size: 13px;
        color: rgb(85, 85, 85);
        border: none;
        outline: none;
        background: #efefef;
        border-radius: 5px;
        font-weight: 600;
        min-width: 390px;
        margin: 0 10px 0px 4px;
    }

    .copy-text button {
        padding: 7px;
        background: rgb(87, 132, 245);
        color: #ffffff;
        font-size: 12px;
        border: none;
        outline: none;
        border-radius: 10px;
        cursor: pointer;
    }

        .copy-text button:active {
            background: rgb(128, 156, 226);
        }

        .copy-text button::before {
            content: "Copied";
            position: absolute;
            top: -45px;
            right: 0px;
            background: rgb(92, 129, 220);
            padding: 8px 10px;
            border-radius: 20px;
            font-size: 15px;
            display: none;
        }

        .copy-text button::after {
            content: "";
            position: absolute;
            top: -20px;
            right: 25px;
            width: 10px;
            height: 10px;
            background: rgb(92, 129, 220);
            transform: rotate(45deg);
            display: none;
        }

#components-reconnect-modal + header {
    position: unset;
}

.file-manager-file-item-name {
    display: flex;
    align-items: center;
}

.copy-text.active button::before, .copy-text.active button::after {
    display: block;
}

.menu-design-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    box-shadow: rgba(146, 146, 146, 0.39) 0px 2px 3px;
}

    .menu-design-header img {
        width: 20px;
        margin-right: 10px;
    }

    .menu-design-header h4 {
        font-family: var(--font-base);
        font-weight: 700;
        font-size: 1.1rem;
        color: rgb(40, 40, 40);
        font-variant-caps: petite-caps;
    }

.html-design .parent-box {
    position: relative;
}

.items-design {
    padding: 15px;
}

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

.assessment-btn {
    margin: 0px;
    font-family: var(--font-base);
    display: flex;
    align-items: center;
    line-height: normal;
    transition: opacity 0.3s ease 0s;
    border: none;
    padding: 6px 10px;
    color: #ffffff;
    border-radius: 5px !important;
    font-weight: 500 !important;
}

    .assessment-btn.color-secondary {
        background-color: var(--color-secondary) !important;
    }

.search-content.fixed .room-display {
    top: 91px;
}

.assignment-counter {
    position: absolute;
    bottom: -2px;
    color: rgb(176, 176, 176);
    font-family: Poppins;
}

.event-video-box .career-cloud-box {
    height: auto;
}

.frame:empty {
    display: none;
}

.credit-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.credit-amount {
    width: 100%;
    padding: 5px;
    text-align: right;
    font-size: 15px;
    font-weight: 500;
    color: rgb(179, 179, 179);
}

.responsive-table .main-img-bg {
    display: none;
}

.institution-box > .form-group {
    display: flex;
    margin: -5px 0px 5px 0;
    align-items: center;
    flex-wrap: nowrap;
}

.form-control {
    font-weight: 500 !important;
}

.event-page .start-time-event {
    font-size: 16px;
    font-weight: 800;
    margin-top: -6px;
}

.main-img-bg {
    display: none !important
}

.frame-div .main-img-bg, .channel-item .main-img-bg, .post-gallery .main-img-bg {
    display: block !important
}

.form-img-group img {
    max-width: 180px;
    border-radius: 10px;
}

.register-page .phone-area-input, .register-page ~ .modal .phone-area-input {
    display: flex;
}

    .register-page ~ .modal .phone-area-input > select,
    .register-page .phone-area-input > select {
        font-size: 12px;
        width: fit-content;
        min-height: 38px;
        padding-left: 6px;
        padding-right: 0;
        margin-right: 5px;
        border-radius: 3px;
    }

        .register-page ~ .modal .phone-area-input > select + input,
        .register-page .phone-area-input > select + input {
            padding-left: 32px;
            border-radius: 3px;
        }

    .register-page ~ .modal .phone-area-input > i, .register-page .phone-area-input > i {
        position: absolute;
        right: auto;
        bottom: 28px;
        position: absolute;
        left: 165px;
        color: #ddd;
    }

.input-icon.phone-area-input i {
    left: 150px !important
}

#SuccessMessageModal .success-message {
    text-align: center
}

    #SuccessMessageModal .success-message i {
        font-size: 45px;
        color: var(--color-primary);
        margin: 5px 0 15px 0;
    }

    #SuccessMessageModal .success-message .line-normal-text {
        text-align: justify;
        line-height: 1.4;
        font-size: 15px;
        font-weight: 500;
    }

@media screen and (min-width:1900px) {
    .row.row-career .frame-div > .banner-img-cover .main-img {
        /*object-fit: cover*/
    }
}
.assessment-student-owl.owl-carousel .owl-nav button.owl-next {
    right:0
}
.join-action-box {
    display: flex;
    flex-direction: column;
}

    .join-action-box span {
        margin-bottom: 10px
    }

.btn-join-action {
    background-color: #3264fe;
    color: #fff;
    font-size: 16px;
    padding: 20px;
}
.assessment-tab-content .assessment-result-setting .assessment-terms-detail label {
    margin: 3px 0px 5px;
    font-size: 15px !important;
}
.assessment-tab-content .assessment-result-setting .assessment-terms-detail  {
    margin-top: 10px;
}