body {
    background-color: #F1F5F8;
}
body, .dropdown-item {
    color: black;
}
a {
    outline: none;
    color: #0C6AD8;
}
b {
    font-weight: 500;
}
.modal {
    overflow-y: auto;
}
.hidden {
    visibility: hidden;
}
input.form-control, select.form-control:not(.list-question-company):not(.list-question-company-sv), .input-group-text {
    height: 40px;
    /*padding: 12px 15px;*/
    border-radius: 8px;
    border: 1px solid #7691AD;
}
.form-control:not(.border-1):not(.border-2):not(.border-3):focus {
    border: 1px solid #7691AD;
}
.multiselect, .select2-selection--single {
    height: 40px;
    border-radius: 8px;
    border: 1px solid #7691AD!important;
}
.select2-selection--single {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
textarea, textarea.form-control {
    padding: 12px 15px 12px 8px;
    border-radius: 8px;
    border: 1px solid #7691AD;
}
button:focus {
    outline: none;
}
a.text-default:focus, a.text-default:hover {
    color: #0C6AD8;
}
.navbar {
    padding: 0 1.5rem;
}
.content {
    padding: 1.5rem;
}
.navbar-top {
    padding-top: 62px;
}
.page-content {
    background-color: #F1F5F8;
}
.bg-body {
    background-color: #F1F5F8;
}
.ddd-hover:hover {
    background-color: #f8f8f8!important;
}
.acabiz-dropdown-menu {
    position: absolute;
    top: 110%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 11.25rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: #000;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: unset;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.acabiz-dropdown-menu.show {
    display: block;
}
.text-main-color {
    color: #032D60;
}
.text-main-color2 {
    color: #2196F3;
}
.text-gray-color2 {
    color: #A6AAAF;
}
.bg-main-color {
    background-color: #032D60;
}
.avatar-user {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #003584;
    text-align: center;
    border-radius: 50%;
}
.w-12px {
    width: 12px;
}
.w-20px {
    width: 20px;
}
.w-30px {
    width: 30px;
}
.w-40px {
    width: 40px;
}
.w-60px {
    width: 60px;
}
.w-100px {
    width: 100px;
}
.w-120px {
    width: 120px;
}
.w-150px {
    width: 150px;
}
.w-200px {
    width: 200px;
}
.w-250px {
    width: 250px;
}
.w-300px {
    width: 300px;
}
.w-500px {
    width: 500px;
}
.w-47 {
    width: 47%;
}
.h-12px {
    height: 12px;
}
.h-20px {
    height: 20px;
}
.h-30px {
    height: 30px;
}
.h-35px {
    height: 35px;
}
.h-40px {
    height: 40px;
}
.h-100px {
    height: 100px;
}
.h-150px {
    height: 150px;
}
.h-200px {
    height: 200px;
}
.line-height-30px {
    line-height: 30px;
}
.line-height-40px {
    line-height: 40px;
}
.top-50 {
    top: 50%;
}
.left-50 {
    left: 50%;
}
.-translate-x-50-y-50 {
    transform: translate(-50%, -50%);
}
.-translate-x-100-y-50 {
    transform: translate(-100%, -50%);
}
.-translate-x-100-y-0 {
    transform: translate(-100%, 0);
}
.fs-10px {
    font-size: 10px;
}
.fs-12px {
    font-size: 12px;
}
.fs-14px {
    font-size: 14px;
}
.fs-16px {
    font-size: 16px;
}
.fs-18px {
    font-size: 18px;
}
.fs-20px {
    font-size: 20px;
}
.fs-24px {
    font-size: 24px;
}
.pr-45 {
    padding-right: 2.25rem;
}
.content-after-none:after {
    content: '';
}
.text-hover-main-color:hover {
    color: #0C6AD8!important;
}
.bgr-main-color {
    color: #ffffff;
    background-color: #0C6AD8!important;
}
.bgr-hover-main-color:hover {
    color: #ffffff;
    background-color: #0C6AD8!important;
}
.btn{
    border-radius: 8px;
}
.btn-primary {
    background-color: #0C6AD8;
}
.btn-color {
    color: #0C6AD8!important;;
}
.btn-bg-color {
    background-color: #0C6AD8!important;;
    color: white;
}
.btn-border-color {
    border-color: #0C6AD8!important;
}
.btn-server {
    color: #000000;
    background-color: #E4E3E3;
    border-radius: 4px;
}
.btn-server.active {
    color: #ffffff;
    background-color: #002333;
}
.color-breadcrumb {
    color: #516F90;
}
.rounded-sm {
    border-radius: 3px;
}
.rounded-4px {
    border-radius: 4px;
}
.rounded-md {
    border-radius: 5px;
}
.rounded-lg {
    border-radius: 8px;
}
.rounded-xl {
    border-radius: 20px;
}
.rounded-full {
    border-radius: 50%;
}
.rounded-top-lg {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.px-12px {
    padding-left: 12px;
    padding-right: 12px;
}
.p-16px {
    padding: 16px;
}
.px-16px {
    padding-left: 16px;
    padding-right: 16px;
}
.py-16px {
    padding-top: 16px;
    padding-bottom: 16px;
}
.px-24px {
    padding-top: 24px;
    padding-bottom: 24px;
}
.box-shadow {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.content .dropdown-menu {
    /*top: 5px!important;*/
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    border: unset;
}
.card {
    border: unset;
    border-radius: 8px;
    /*overflow: hidden;*/
}
.bg-box-content {
    background-color: #F6F9FC;
    border: 1px solid #7691AD;
}
.border-main-color {
    border: 1px solid #7691AD;
}
table {
    border-radius: 8px 8px 0px 0px;
}
table thead tr {
    background-color: #E3F3FD;
}
.table thead th {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DDDDDD;
    font-weight: 500;
}
.acabiz-dropdown {
    position: relative;
}
.multiselect-clear-filter, .multiselect-clear-filter:hover {
    border-color: #7691AD;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.u-course-highlight2 {
    background: #162636;
    color: white;
    padding: 30px 0;
}
.rounded-round {
    border-radius: 2px!important;
    display: inline-flex;
}
.new-progress {
    background-color: #BEBEBE;
}
.pic {
    background-color: gainsboro;
    border-radius: 16px;
}
.radio.selected .pic {
    border: #0C6AD8;
    background-color: #E3F3FD;
}
.sidebar-component {
    border-radius: 8px;
}
.sidebar-component.sidebar-light {
    border: unset;
}
.sidebar:not(.bg-transparent) .card {
    border-radius: 8px;
}
/*.sidebar-light .nav-sidebar .nav-link:not(.disabled):hover,*/
.sidebar-light .nav-sidebar>.nav-item-open>.nav-link:not(.disabled), .sidebar-light .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #E0F3FF;
}
.mw-70px {
    min-width: 70px;
}
.min-w-115px {
    min-width: 115px;
}
.min-w-300px {
    min-width: 300px;
}
.badge {
    font-size: 12px;
    font-weight: 400;
    border-radius: 4px;
}
.badge-success2 {
    color: #000000;
    background-color: #E1FCE2;
}
.badge-primary2 {
    color: #000000;
    background-color: #A5C9F5;
}
.badge-dark2 {
    color: #000000;
    background-color: #DFDFDF;
}
.badge-danger2 {
    background-color: #FFD2D2;
    color: #000000;
}
.badge-warning2 {
    background-color: #FFF5A2;
    color: #000000;
}
.bg-primary2 {
    background-color: #0C6AD8;
}
.bg-navy {
    background-color: #E3F3FD;
    color: #000!important;
}
.bg-navy2 {
    background-color: #F6F9FC;
    color: #000!important;
}
.bg-success2 {
    color: #000000;
    background-color: #8bd58e;
}
.bg-dark2 {
    color: #000000;
    background-color: #DFDFDF;
}
.bg-danger2 {
    background-color: #FFD2D2;
    color: #000000;
}
.bg-warning2 {
    background-color: #fda88d;
    color: #000000;
}
.list-user-add-company-course::-webkit-scrollbar, .list-user-added-company-course::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.list-user-add-company-course::-webkit-scrollbar-track, .list-user-added-company-course::-webkit-scrollbar-track {
    background: #ffffff;
}
.list-user-add-company-course::-webkit-scrollbar-thumb, .list-user-added-company-course::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 8px;
}
.list-user-add-company-course::-webkit-scrollbar-thumb:hover, .list-user-added-company-course::-webkit-scrollbar-thumb:hover {
    background: #bebcbc;
}
.background-item-active {
    background-color: #E0F3FF;
}
.cursor-grab {
    cursor: grab;
}
.card-group-control .card-header {
    position: relative;
}
.card-group-control .card-header:before {
    content: '\e9c2';
    font-family: icomoon;
    position: absolute;
    top: 50%;
    margin-top: -.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.card-group-control .card-header.collapsed:before {
    content: '\e9c1';
}
.card-group-control-right .card-header:before {
    right: 1.25rem;
}
.card-group-control-right .card-header.right-3rem:before {
    right: 3rem;
}
.collapse-change-icon-css > i:before {
    content: '\e9c2';
}
.collapse-change-icon-css.collapsed > i:before {
    content: '\e9c1';
}
select.list-question-company option:checked, select.list-question-company-sv option:checked {
    color: black;
    background-color: #F6F9FC;
    border: 1px solid #7691AD;
}
.timeline:after, .timeline:before {
    width: 6px;
    height: 6px;
    margin-left: -3px;
}
.timeline-container:after, .timeline:after, .timeline:before, .timeline-icon:after {
    background-color: #7691AD;
}
.timeline-icon {
    border: unset;
}
.timeline-icon:after {
    display: none;
}
.max-w-500px {
    max-width: 500px;
}
.max-w-full {
    max-width: 100%;
}
.tab-pane small {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
}
.alert.bg-danger {
    background-color: #FFD2D2!important;
    color: #000 !important;
    border-radius: 8px;
}

ul.ul_show_package li ,ul.ul_show_course li {width: 50%;float: left;padding: 15px;font-size: 14px;border-bottom: 1px dashed #dedede;}
ul.ul_show_package,ul.ul_show_course {list-style: none;display: inline-block;padding: 0 20px;}
ul.ul_show_package  span.span_lable {display: inline-block; font-weight: 500;}
ul.ul_show_course  span.span_lable {display: inline-block;width: 170px;font-weight: 500;}
ul.ul_show_course .li_full,ul.ul_show_package .li_full{width: 100%;display: inline-block}
.span_lable_full{width: 70%;display: inline-block}

.box-shadow-unset {
    box-shadow: unset;
}
.p-card {
    padding: 1.5rem;
}
.total_point_detail {
    position: absolute;
    top: 0;
    right: 120%;
    transform: translateY(-50%);
    width: 250px;
    padding: 10px;
    border-radius: 5px;
    background-image: linear-gradient(#00917a,#079780);
    box-shadow: 0 4px 6px #00000029;
    color: white;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .1s ease-in-out;
}
.total_point:hover .total_point_detail {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}
.chart-left {
    width: 200px;
}
.has-fixed-height-300px {
    height: 200px;
}
.dotted-pie-donut-chart {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.dotted-pie-donut-chart.complete {
    background-color: #5FA550;
}
.dotted-pie-donut-chart.learning {
    background-color: #54B1F7;
}
.dotted-pie-donut-chart.not-learn {
    background-color: #FFAC77;
}
.dotted-pie-donut-chart.incomplete {
    background-color: #F36868;
}
.sidebar-component {
    display: block;
}
.box-course-can-register .btn-action-register-course[data-status="not_register"] {
    visibility: hidden;
    pointer-events: none;
}
.box-course-can-register:hover .btn-action-register-course[data-status="not_register"] {
    visibility: visible;
    pointer-events: all;
}
.course-benefits ul {
    margin-bottom: unset;
}
.course-benefits ul li {
    position: relative;
    padding: 5px 0 5px 25px;
}
.course-benefits ul li:before {
    position: absolute;
    content: "\e601";
    font-family: icomoon;
    left: 0;
    font-size: 20px;
    line-height: 1;
}
.p_count_down{
    text-align: center;
    font-weight: bold;
    position: fixed;
    right: 10%;
    top: 10%;
    border: 1px solid #dedede;
    padding: 10px;
    border-radius: 4px;
    z-index: 999;
    background-color: lightgrey;
}
.w-35 {
    width: 35%;
}
.w-action-learning-path {
    width: calc(30% - 60px);
}
.width-error-box {
    width: auto;
    flex-shrink: 0;
}
.dot-filter {
    margin-left: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    background-color: #f44336;
    font-size: 10px;
}
.box-scrollbar {
    scroll-snap-type: x mandatory;
    /*scrollbar-width: none;*/
    overflow-x: auto;
}
.box-scrollbar::-webkit-scrollbar {
    /*scrollbar-width: none;*/
}
.card-scrollbar {
    scroll-snap-align: start;
}
.progress {
    background-color: #EEF8FF;
    box-shadow: unset;
}
.p-15px {
    padding: 15px;
}
.border-b {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.border-t {
    border-top: 1px solid rgba(0, 0, 0, .125);
}
.border-r {
    border-right: 1px solid rgba(0, 0, 0, .125);
}
.border-l {
    border-left: 1px solid rgba(0, 0, 0, .125);
}
.nav-pills-competency {
    margin-top: 15px;
}
.nav-pills-competency .nav-pills {
    margin-bottom: unset;
}
.nav-pills-competency .nav-pills .nav-item {
    margin-right: 3px;
}
.nav-pills-competency .nav-pills .nav-link {
    padding: .5rem 1.25rem;
    border: 1px solid #ddd;
    border-bottom: none!important;
    border-radius: 8px 8px 0 0;
}
.nav-pills-competency .nav-pills .nav-link.active, .nav-pills-competency .nav-pills .show > .nav-link {
    color: #0C6AD8;
    border: 1px solid #0C6AD8;
}
.nav-pills-competency .nav-pills-competency-border {
    padding: 24px 24px 32px 24px;
    border: 1px solid #ddd;
    border-radius: 0 8px 8px 8px;
}
.nav-pills-competency .nav-pills-competency-student-border {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 0 8px 8px 8px;
}
.box-select-none {
    cursor: not-allowed;
    pointer-events: none;
}
.box-select-none .multiselect {
    color: #999;
    background-color: #fafafa;
}
.pointer-event-none {
    pointer-events: none;
}
.question-menhde p {
    margin-bottom: 0;
}
body:has(> .new-guide) {
    overflow: hidden;
}
.new-guide .bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.6;
    z-index: 9998;
}
.new-guide .new-guide-content {
    position: fixed;
    top: 80px;
    left: 50px;
    width: 400px;
    max-width: 90%;
    background-color: #ffffff;
    border-radius: 8px;
    z-index: 9999;
}
.new-guide .new-guide-content .new-guide-content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}
.new-guide .new-guide-content .new-guide-content__body {
    padding: 10px 15px;
    overflow-y: auto;
    max-height: 80vh;
}

/* countdown next lesson */
.countdown-next-lesson__popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    width: 300px;
    border-radius: 8px;
    z-index: 9999;
}
.countdown-next-lesson__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
}
.countdown-next-lesson__progress-bar {
    width: 100%;
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}
.countdown-next-lesson__progress {
    height: 100%;
    width: 100%;
    background: #4caf50;
    transition: width 1s linear;
}

.btn-toggle-current-password, .btn-toggle-password, .btn-toggle-password-confirm, .btn-toggle-new-password, .btn-toggle-new-password-confirm {
    position: absolute;
    top: 12px;
    right: 8px;
    cursor: pointer;
}

.image-watermark {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 100px;
    max-width: 100px;
}

@media (max-width: 1200px) {
    .w-35 {
        width: 100%;
        margin-bottom: 10px;
    }
    .w-action-learning-path {
        width: 100%;
    }
    .timeline-icon {
        position: relative;
    }
}
@media (min-width: 1024px) {
    .content.w-60 {
        width: 60%;
        max-width: 60%;
        margin: 0 auto;
    }
    .content.w-70 {
        width: 70%;
        max-width: 70%;
        margin: 0 auto;
    }
    .content.w-90 {
        width: 90%;
        margin: 0 auto;
    }
    .content.w-90 hr {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
@media (min-width: 992px) {
    .modal-xl {
        max-width: 1200px;
    }
    .card-register-course {
        position: fixed;
        right: 24px;
        width: calc((100vw - 48px) / 3 - 20px);
        max-width: calc((100vw - 48px) / 3 - 20px);
    }
}
@media (max-width: 575px) {
    .navbar {
        padding: 0 1.25rem;
    }
    .content {
        padding: 1.25rem;
    }
    .width-error-box {
        width: 160px;
    }
    .fs-xs-16px {
        font-size: 16px;
    }
}