:root {
    --yellowColor: #E4C90E;
    --primaryColor: #056838;
    --lightGreen: #EFEB8F;
    --softGreen: #1DD179;
    --currentColor: #F2F2F2;
}

.dataTables_filter {
    padding-top: 15px;
    padding-right: 5px;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-bottom: 0px !important;
}

body.dark-only .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #374462;
}

body.dark-only .invalid-feedback {
    color: white;
}

.toast {
    z-index: 999999;
    position: fixed;
    top: 85px;
    right: 20px;
    border-radius: .375rem !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.img-cover {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}

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

.column-vertical-align-top tr td {
    vertical-align: top !important;
}

.column-with-image img {
    max-width: 100%;
}

.cart-image-item {
    height: 250px;
}

.banner-home {
    min-height: 270px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.banner-home img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-home .content {
    position: relative;
    z-index: 2;
}

.btn-warning {
    background-color: #F9CB58 !important;
    color: #0C643C;
    border-color: rgb(230, 185, 74) !important;
}

.btn-darkgreen {
    background-color: var(--primaryColor);
    color: white;
}

.btn-darkgreen:hover {
    background-color: #03371e;
    color: white;
}

.badge-lightgreen,
.bg-lightgreen {
    background-color: var(--lightGreen);
}

.btn-outline-darkgreen,
.btn-outline-darkgreen:hover {
    border: 1px solid var(--primaryColor);
    color: var(--primaryColor);
}

.btn-outline-darkgreen:hover {
    background-color: var(--lightGreen);
}

.text-darkgreen {
    color: var(--primaryColor);
}

.border-darkgreen {
    border-color: var(--primaryColor);
}

.bg-darkgreen {
    background-color: var(--primaryColor) !important;
}

.text-green {
    color: #1DD179;
}

.text-lightgreen {
    color: #A6B319;
}

.rounded-base {
    border-radius: 10px;
}

.rounded-md {
    border-radius: 20px;
}

.card-test .card-image {
    height: 180px;
    position: relative;
}

.card-test .card-image .label {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.card-test .card-image .label div {
    border-radius: 8px;
    background-color: white;
}

.page-title h4 {
    color: white;
}

.page-wrapper .page-header .breadcrumb .breadcrumb-item,
.page-wrapper .page-header .breadcrumb .breadcrumb-item:before {
    color: white;
}

.page-wrapper .page-header .breadcrumb .breadcrumb-item a svg {
    stroke: #ffffff;
}

.page-wrapper .page-header .breadcrumb .breadcrumb-item.active {
    color: var(--yellowColor);
}

#sidebar-menu #simple-bar .sidebar-list .sidebar-submenu::before,
#sidebar-menu #simple-bar .sidebar-list .sidebar-submenu li a::after {
    content: unset;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li.sidebar-list:hover a:hover {
    background-color: #E4C90E;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active span,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li:hover .sidebar-link:not(.active):hover span {
    color: #333333;

}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li:hover a svg.stroke-icon,
.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li.active a svg.stroke-icon {
    stroke: #333333 !important;

}

a.sidebar-link.sidebar-title.link-nav.active svg.stroke-icon,
a.sidebar-link.sidebar-title.link-nav:hover svg.stroke-icon {
    stroke: #333333 !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active {
    margin-bottom: 0px;
}

.arrow-toggle-sidebar {
    position: absolute;
    right: 20px;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.arrow-toggle-sidebar.rotate {
    transform: rotate(180deg);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li.sidebar-list:hover a:hover .arrow-toggle-sidebar,
li.sidebar-list a.active .arrow-toggle-sidebar {
    color: #333333;
}

.sidebar-submenu li.active a::before {
    background-color: #e4c70ec9 !important;
}

.sidebar-submenu li.active a {
    color: #e4c70ec9 !important;
}

.sidebar-submenu li.active:hover a {
    background-color: unset !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper .according-menu {
    display: block !important;
}

.page-wrapper .page-header .header-wrapper .nav-right>ul>li {
    background-color: #099A53;
}

.page-wrapper .page-header .header-wrapper .nav-right ul li svg {
    stroke: white;
}

.page-wrapper .page-header .header-wrapper .nav-right ul li input::placeholder,
.page-wrapper .page-header .header-wrapper .nav-right ul li input {
    color: white;
}

.multiple-answer-item {
    display: flex;
    /* margin-bottom: 10px; */
}

.multiple-answer-item label {
    background-color: #999999;
    display: flex;
    border-radius: 50em;
    padding: 10px 25px;
    align-items: center;
    margin-bottom: 0px;
}

.multiple-answer-item input[type="radio"] {
    display: none;
}

.multiple-answer-item input[type="radio"]:checked+label {
    background-color: var(--primaryColor);
}

.multiple-answer-item label .answer-option-label {
    width: 18px;
    height: 18px;
    border: 1px solid white;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.col-md-12 .multiple-answer-item label.answer-item-label .answer-option-text {
    max-width: 90%;
}

.multiple-answer-item label.answer-item-label .answer-option-text {
    max-width: 97%;
}

.multiple-answer-item label .answer-option-text {
    color: white;
}

#question-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

#question-list .question-number {
    width: 15%;
    text-align: center;
    border: 1px solid var(--primaryColor);
    color: var(--primaryColor);
    border-radius: 5px;
    padding: 4px 0px;
    font-size: 16px;
    font-weight: 600;
}

#question-list .question-number.is-answered {
    background-color: var(--primaryColor);
    color: #ffffff;
    border: 1px solid var(--primaryColor);
}

.flex-column {
    flex-direction: column;
}

.max-w-100 {
    max-width: 100%;
}

#question-list .question-number.active {
    background-color: #F9CB58;
    color: #333333;
    border: 1px solid #F9CB58;
}

.question-nav .prev,
.question-nav .next {
    outline: none;
    padding: 5px 10px;
    background-color: #D9D9D9;
    color: black;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-nav .prev {
    border-bottom-left-radius: 50em;
    border-top-left-radius: 50em;
}

.question-nav .next {
    border-bottom-right-radius: 50em;
    border-top-right-radius: 50em;
}

.bg-current {
    background-color: var(--currentColor);
}

.intray-video {
    border-radius: 10px;

}

ul.intray-menus {
    list-style: none;
}

ul.intray-menus li {
    margin-bottom: 10px;
}

ul.intray-menus li a {
    color: #333333;
    background: var(--currentColor);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    font-weight: 600;
}

ul.intray-menus li:hover a,
ul.intray-menus li a.active-menu {
    color: #fff;
    background: var(--primaryColor);
}

ul.intray-menus li a .icon {
    font-size: 25px;
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.input-group-append button {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.mail-list .mail-item {
    border-bottom: 1px solid #D9D9D9;
    background-color: var(--currentColor);
    display: flex;
    padding: 15px;
    transition: .2s ease;
}

.mail-list .mail-item:hover {
    box-shadow: 0px -1px 10px #bebebe;
}

.mail-list .mail-item.has-been-read {
    background-color: white;
}

.mail-list .mail-item .mail-avatar,
.mail-avatar {
    width: 130px;
    border-radius: 10px;
    overflow: hidden;
    height: 94px;
    margin-right: 15px;
}

.mail-list .mail-item .mail-avatar img,
.mail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mail-list .mail-item .email-text {
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-gray {
    color: #DFDFDF;
}

.bg-gray,
.badge-gray {
    background: #DFDFDF;
}

.btn-softgreen,
.btn-softgreen:hover {
    background-color: var(--softGreen);
}

.attribute {
    padding: 8px 14px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333333;
    transition: .3s ease-in-out;
}

.attribute svg {
    color: var(--primaryColor);
}

.attribute.active,
.attribute:hover {
    background-color: var(--softGreen);
}

.attribute.active svg,
.attribute.active,
.attribute:hover svg {
    color: #333333 !important;
}

.btn-lightgreen {
    background-color: var(--yellowColor);
    color: var(--primaryColor);
}


.breadcrumb-item a {
    color: white;
}

.btn-group-qty .input-group-prepend button {
    border-radius: 50em 0px 0px 50em !important;
}

.btn-group-qty .input-group-append button {
    border-radius: 0px 50em 50em 0px !important;
}

.avatar-user-default {
    width: 50px;
    height: 50px;
    overflow: hidden;
}

#webcamUser {
    transform: scaleX(-1);
}

.notify-mail {
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 10;
}

.dropdown-item.active {
    background-color: var(--primaryColor) !important;
    color: white !important;
    opacity: 1 !important;
}

.vscomp-ele {
    max-width: unset !important;

}

.child-menu ul {
    padding-left: 30px;
    margin-top: 13px;

}

.child-menu ul li {
    padding: 0px 8px 0px 8px;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    font-size: 13px;
}

.child-menu ul li:hover,
.child-menu ul li.active {
    color: var(--primaryColor);
    font-weight: 600;
}

.child-menu ul li .icon {
    font-size: 23px;
    margin-right: 8px;
    height: 23px;
}

.select2-container--open .select2-dropdown--below {
    margin-top: -20px;
}


.table-container {
    max-height: 80vh;
    overflow-y: scroll;
}

.table-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.table-container::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.table-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, var(--primaryColor)),
            color-stop(0.72, var(--primaryColor)),
            color-stop(0.86, var(--primaryColor)));
}

.card-accordion {
    margin-top: 0px !important;
    border-radius: 5px;
    overflow: hidden;
}

.card-accordion:hover {
    box-shadow: none !important;
}

.card-accordion .card-body {
    border-bottom: 0px !important;
}

.card-accordion .button-link {
    padding: 12px 20px;
    width: 100%;
    border-bottom: 1px dashed rgba(106, 113, 133, 0.3);
}

.button-link {
    position: relative;
}

.button-link.collapsed::before {
    transform: rotate(0deg);
}

.button-link::before {
    content: url('https://api.iconify.design/ph/caret-right-bold.svg');
    position: absolute;
    left: 0px;
    transform: rotate(90deg);
    transition: .3s ease-in-out;
}

.status-session.session-status-offline span,
.status-session.session-status-online span,
.status-session.session-status-izin span {
    position: relative;
    padding-left: 12px;
}

.status-session span::before {
    content: '';
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    height: 7px;
    width: 7px;
    border-radius: 50%;
}

.status-session.session-status-offline span::before {
    background-color: #999999;
}

.status-session.session-status-online span::before {
    background-color: var(--softGreen);
}

.status-session.session-status-izin span::before {
    background-color: var(--yellowColor);
}

.layer-background {
    position: fixed !important;
    height: 100%;
    width: 100vw;
    background-color: #3333337c;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.highlight {
    position: relative;
    z-index: 999999;
}

.guide-content {
    position: absolute;
    bottom: 0;
    z-index: 100;
    min-height: fit-content;
    box-shadow: 0px 0px 5px 6px rgba(0, 0, 0, 0.3);
}

.guide-content .close-guide-content {
    position: absolute;
    right: 0;
    top: 0;
    color: black;
}


.guide-content .text-guide {
    text-align: left;
    text-wrap: wrap;
    color: black;
    font-weight: normal;
    font-size: 13px;
}

.page-wrapper .page-header {
    z-index: 10 !important;
}

.redeem-code-section.highlight p,
.redeem-code-section.highlight .iconify {
    color: white !important;
}

.filter-package-test.nav-pills .nav-link {
    background-color: #777777;
    color: white;
}

.filter-package-test.nav-pills .nav-link.active {
    background-color: var(--primaryColor);
    color: white;
}

.cart-package-test-0.highlight .guide-content {
    bottom: unset;
}

.table-package-test.highlight,
.email-input.highlight,
.password-input.highlight,
.regulation-highlight.highlight,
.button-regulation.highlight .button-last-step.highlight,
.aggrement-field,
.highlight-background-white,
.highlight-background-white.highlight {
    background-color: white;
}

.btn-start-test.highlight .guide-content,
.highlight.highlight-bottom-unset .guide-content {
    bottom: unset;
}

.padding-highlight.highlight {
    padding: 10px;
}

.onhover-dropdown.highlight:hover .onhover-show-div {
    visibility: hidden;
}

.text-green {
    color: var(--softGreen);
}

.chat-wrapper {
    overflow-y: scroll;
    scrollbar-width: initial !important;
    scrollbar-color: initial !important;
}

.talk-bubble {
    margin: 5px 20px 0px 20px;
    display: inline-block;
    position: relative;
    max-width: 70%;
    min-width: 100px;
    height: auto;
    background-color: white;
    border-radius: 5px;
}

.evaluation-chat .talk-bubble {
    background-color: rgb(200, 200, 200);
}

.receiver .talk-bubble {
    margin-left: auto !important;
}

.talktext {
    padding: 1em 1em .5em 1em;
    text-align: left;
    line-height: 1.5em;
    z-index: 4;
    position: relative;
}

.talktext p {
    /* remove webkit p margins */
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

.talk-bubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 0px;
    bottom: auto;
    z-index: 3;
    border: 22px solid;
    border-color: white transparent transparent transparent;
}

.evaluation-chat .talk-bubble:after {
    border-color: rgb(200, 200, 200) transparent transparent transparent;
}

.chat-group.sender div:nth-child(1) .talk-bubble:after {
    left: -20px;
    right: auto;
}

.chat-group div:nth-child(1) .talk-bubble {
    margin: 10px 20px 0px 20px;

}

.chat-group {
    padding-top: 10px;
}

.chat-group.receiver div:nth-child(1) .talk-bubble::after {
    left: auto;
    right: -20px;
}

.chat-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
    background-color: #F5F5F5 !important;
}

.chat-wrapper::-webkit-scrollbar {
    width: 4px !important;
    background-color: #F5F5F5 !important;
}

.chat-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--softGreen) !important;
}

.user-input-answer-container {
    bottom: 0px;
    width: 100%;
    z-index: 5;
}

.user-input-answer {
    background-color: #e0e0e0;
    padding: 10px 20px;
}

.user-input-answer textarea {
    background-color: white;
    width: 100%;
    border-radius: 10px;
    max-height: 250px;
    resize: none;
    padding: 10px 10px;
    scrollbar-width: 0px !important;
}

.user-input-answer-container .button-submit {
    width: 40px;
    height: 40px;
    display: flex;
    color: white;
    background-color: var(--primaryColor);
    align-items: center;
    justify-content: center;
}

.talktext .time {
    font-size: 11px;
}

.user-input-answer textarea::placeholder {
    line-height: 20px;
}

.file-chat {
    width: 300px;
    cursor: zoom-in;
}

.document-chat {
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 10px;
    background-color: #d0d0d0;
    min-height: 150px;
    justify-content: center;
}

.pdf-viewer {
    position: relative;
}

.pdf-viewer::before {
    content: '';
    background-color: #323639;
    width: 200px;
    height: 47px;
    position: absolute;
    top: 10px;
    right: 0px;
    z-index: 1000;
}

.intray-font-family,
.intray-font-family * {
    font-family: Calibri, sans-serif !important;
}

.summernote-style ul,
.summernote-area ul {
    padding-left: 2rem;
    list-style: inherit;
}

.summernote-style ul li span,
.summernote-area ul li span,
.summernote-style ol li span,
.summernote-area ol li span {
    display: inline !important;
}

/* .summernote-style ol{
    list-style-type: none;
    counter-reset: item;
}

.summernote-style ol li::before, .summernote-area ol li::before {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 1.2em;
    content: counter(item) ". ";
    counter-increment: item;
}

.summernote-style ol li:has(b)::before, .summernote-area ol li:has(b)::before {
    font-weight: bold;
}

.summernote-style ol li:not(:has(b))::before, .summernote-area ol li:not(:has(b))::before{
    font-weight: normal;
}

.summernote-style ol li, .summernote-area ol li{
    position: relative;
    padding-left: 23px;

} */

.summernote-style .image,
.summernote-area .image {
    text-align: center;
    margin: 0 auto;
}

.summernote-style .image img,
.summernote-area .image img {
    aspect-ratio: unset;
    width: 100%;
    height: auto;
}

.summernote-style .image-style-block-align-left,
.summernote-area .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

.summernote-style .image-style-block-align-right,
.summernote-area .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}


table.table-evaluation th {
    background-color: #24afd2;
    text-align: center;
    color: black !important;
}

table.table-evaluation td,
table.table-evaluation th {
    border: 1px solid #323639 !important;
    vertical-align: top;
}

/* .summernote-area ol > li > span:first-child, .summernote-style ol > li > span:first-child{
    display: block;
} */

.banner-text p {
    margin-bottom: 4px;
}


.loader-wrapper {
    z-index: 100001 !important;
}

.page-wrapper .page-header .header-wrapper .nav-right>ul>li.profile-nav {
    display: inline-block !important;
}

.select2-container span {
    display: inline;
}

.ck-editor__editable {
    min-height: 400px;
}

.positive-score-check:checked+.positive-score-label {
    background-color: red;
}

.negative-select-anwer label,
.positive-select-anwer label {
    border: 1px solid #a9a9a9;
    width: 100%;
    color: black;
    transition: .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    height: 100%;
}

.positive-select-anwer label {
    border-radius: 10px 0px 0px 10px;
}

.negative-select-anwer label {
    border-radius: 0px 10px 10px 0px;
}

.negative-select-anwer input,
.positive-select-anwer input {
    height: 1px;
    width: 1px;
    display: none;
}

.disc-expression-answer {
    padding: 3px 10px;
    border-top: 1px solid #a9a9a9;
    border-bottom: 1px solid #a9a9a9;
    height: 100%;
}

.negative-check-with-label:checked+.negative-label-for-check {
    color: white;
    border: 1px solid #ff4e4e;
    background: #ff4e4e;
}

.positive-check-with-label:checked+.positive-label-for-check {
    color: white;
    border: 1px solid #2feafe;
    background: #2feafe;
}

ul#cart-lists {
    max-height: 250px;
    overflow-y: scroll;
}

ul#cart-lists::-webkit-scrollbar {
    width: 8px !important;
}

ul#cart-lists::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

ul#cart-lists::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    border-radius: 4px !important;
    border: 2px solid #f5f5f5 !important;
}

#answer_field .horizontal-answer {
    /* background-color: #03371e; */
}

#answer_field .horizontal-answer img {
    max-width: 100% !important;
}

.page-wrapper .page-header .header-wrapper .nav-right ul li.contact-admin-guide {
    display: inline-block !important;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 0px;
}

.select2-search--dropdown {
    display: block !important;
}

.select2-container .select2-selection--multiple {
    min-height: 43px !important;
}

.select2-container--default .select2-selection--multiple {
    padding-top: 6px;
}

@media(max-width: 992px) {
    .page-wrapper .page-header .header-wrapper .nav-right>ul>li.profile-nav .text-profile {
        color: black !important;
    }
}

@media(max-width:767px) {
    .header-report-assessment img {
        max-height: 50px !important;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        z-index: 1000;
    }

    .filter-package-test {
        display: flex;
        flex-wrap: wrap;
    }

    .filter-package-test li {
        margin-bottom: 10px;
        width: auto;
    }

    .mb-justify-content-between {
        justify-content: space-between !important;
    }

    #answer_field .horizontal-answer {
        width: 50% !important;
    }
}

@media (max-width: 1199px) {
    .page-wrapper .page-header .header-wrapper .nav-right>ul>li:nth-child(2) {
        display: block !important;
    }
}