:root {
    --ck-z-default: 99999;
    --btn-color: #0F44A0;
    --btn-color-hover: #0D3A8A;
    --btn-opposite-color: #FFFFFF;
    --btn-opposite-border-color: #0F44A0;
    --btn-opposite-text-color: #0F44A0;
    --btn-opposite-color-hover: #FFFFFF;
    --btn-opposite-text-color-hover: #0F44A0;
    
    --label-font-weight: 700;
}

/*@import url('roboto.css');*/

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .card-icon:hover {
        background-color: none;
    }
}

.tooltip {
    background-color: #080a0c;
}

.sidebar-toggler {
    --cui-sidebar-toggler-color: #0C345C;
    --cui-sidebar-toggler-bg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cGF0aCBzdHJva2U9InJnYmEoMCwgMCwgMjEsIDAuNSkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik00IDdoMjJNNCAxNWgyMk00IDIzaDIyIi8+PC9zdmc+);
}

.sidebar-nav .nav-group-toggle::after {
    background-color: white;
    transform: rotate(270deg);
}

.sidebar-nav .nav-group.show > .nav-group-toggle::after {
    transform: rotate(360deg);
}

.sidebar-nav .nav-link:hover.nav-group-toggle::after {
    background-color: #0F44A0;
}

/*.sidebar-nav .nav-link:focus.nav-group-toggle::after {*/
/*    background-color: #0F44A0;*/
    /*color: white !important;
}*/

/*
.nav-link:focus {
    color: white !important;
}*/

.nav-link:hover {
    color: #0F44A0 !important;
}

html {
    position: relative;
    min-height: 100%;
}

.avatar {
    position: relative;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50em;
    transition: margin 0.15s;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

body {
    background-color: white !important;
    color: #212121 !important;
}

a .navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.btn-info {
    --cui-btn-color: white;
    --cui-btn-form-Search-color: #0F44A0;
    --cui-btn-bg: #0f44a0;
    --cui-btn-border-color: #0f44a0;
    --cui-btn-hover-color: #080a0c;
    --cui-btn-hover-bg: #52a8ff;
    --cui-btn-hover-border-color: #0f44a0;
    --cui-btn-focus-shadow-rgb: 45, 132, 219;
    --cui-btn-active-color: white;
    --cui-btn-active-bg: #0f44a0;
    --cui-btn-active-border-color: #0f44a0;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #080a0c;
    --cui-btn-disabled-bg: #0f44a0;
    --cui-btn-disabled-border-color: #0f44a0;
}

.btn:hover, .fc .fc-button:hover {
    color: white;
    background-color: #0F44A0;
    border-color: var(--cui-btn-hover-border-color);
}

a {
    color: #0C345C;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.header {
    --cui-header-color: #ffffff;
}
/*.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}*/


.search-input-group {
    display: flex;
}

    .search-input-group > input {
        border-radius: 25px;
    }

    .search-input-group > .search-icon {
        display: flex;
        margin-left: -25px;
    }

.fc .fc-button-primary {
    --cui-btn-color: #fff;
    --cui-btn-bg: #1890ff;
    --cui-btn-border-color: #1890ff;
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: #1890ff;
    --cui-btn-hover-border-color: #0705a0;
    --cui-btn-focus-shadow-rgb: 113, 111, 220;
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: #1890ff;
    --cui-btn-active-border-color: #1890FF;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #fff;
    --cui-btn-disabled-bg: #5856d6;
    --cui-btn-disabled-border-color: #5856d6;
}

.btn-check:checked + .btn, .fc .btn-check:checked + .fc-button, :not(.btn-check) + .btn:active, .fc :not(.btn-check) + .fc-button:active, .btn:first-child:active, .fc .fc-button:first-child:active, .btn.active, .fc .active.fc-button, .fc .show.fc-button {
    color: var(--cui-btn-active-color);
    border-color: #1890ff;
}

.btn-link {
}

.btn-grid-icon {
    font-size: 0.8em;
    border: none;
}

.label-required::before {
    content: '*';
    color: red;
    margin-right: 5px;
}


.breadcrumb {
    --cui-breadcrumb-item-active-color: #9BA0A5;
    --cui-breadcrumb-divider-color: #9BA0A5;
    font-weight: var(--label-font-weight);
    --cui-btn-active-border-color: #0F44A0;
}

    .breadcrumb .active {
        color: #0F44A0;
    }

    .breadcrumb a {
        color: #717682;
        text-decoration: none;
    }

        .breadcrumb a:hover {
            color: #0F44A0;
        }

.dropdown-item.active, .dropdown-item:active {
    color: #0F44A0;
    text-decoration: none;
    background-color: #d2e0f8;
}


/*
    KhoaPD26 - đè lên coreui css
*/
:root {
    --cui-body-bg: #ffffff !important;
    --cui-emphasis-color: #0000000;
    --cui-emphasis-color-rgb: 32, 95, 202 !important;
    --cui-tertiary-color: #0F44A0 !important;
    --cui-tertiary-bg-rgb: 255, 255, 255 !important;
    --cui-box-shadow-sm: 0 0.125rem 0.25rem rgb(8 10 12 / 23%);
    --cui-primary: #0f44a0;

    --readonly-bg-color: #f0f0f0;
    --readonly-color: #6c757d;
}

.progress-bar {
    background-color: #0f44a0;
}

.sidebar {
    --cui-sidebar-bg: #0F44A0 !important;
    --cui-sidebar-color: white;
}

.sidebar-nav .nav-link:hover {
    color: #0F44A0;
    font-weight: 600;
    /* background: #FFF6F6; */
}

/*.sidebar-nav .nav-link:focus .nav-icon {
    color: #0F44A0;
}*/

.footer {
    --cui-footer-bg: #fff;
}

.header-nav .nav-link {
    padding: var(--cui-header-nav-link-padding-y) var(--cui-header-nav-link-padding-x);
    color: #000;
}

.btn-primary, .fc .fc-button-primary {
    --cui-btn-hover-bg: #0c56a1;
    --cui-btn-active-bg: #0f44a0;
    --cui-btn-hover-border-color: #0c56a1;
}

.nav-link {
    color: #565f6a;
}

.nav {
    --cui-nav-link-color: #1890ff;
    --cui-nav-link-hover-color: #1890ff;
}

#viewerContainer {
    background-color: #F0F1F2;
}


.bg-body-tertiary {
    --cui-bg-opacity: 1;
    background-color: #F5F8FF !important;
}

.btn-outline-primary {
    --cui-btn-color: #818285;
    --cui-btn-border-color: #0F44A0;
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: #0F44A0;
    --cui-btn-hover-border-color: #0C345C;
    --cui-btn-focus-shadow-rgb: 88, 86, 214;
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: #0F44A0;
    --cui-btn-active-border-color: #0F44A0;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #0F44A0;
    --cui-btn-disabled-bg: transparent;
    --cui-gradient: none;
}

.card-icon {
    --cui-btn-hover-bg: #fff;
}


.btn-primary {
    color: white;
    background-color: #0f44a0;
    border-color: #0f44a0;
}


.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #0C345C
}

.nav {
    --cui-nav-link-color: #0C345C;
    --cui-nav-link-hover-color: #0C345C;
}

/*.modal-header {
    background-color: white !important;
}*/

.btn-outline-secondary {
    --cui-btn-border-color: #0c345c;
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: #0F44A0;
    --cui-btn-hover-border-color: #0F44A0;
    --cui-btn-focus-shadow-rgb: 107, 119, 133;
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: #0F44A0;
    --cui-btn-active-border-color: #0F44A0;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #0F44A0;
    --cui-btn-disabled-bg: transparent;
    --cui-gradient: none;
}

.custom-select {
    background-color: #3d99f5; /* Custom background color */
    color: blue; /* Text color */
}

    /* Change the dropdown border color */
    .custom-select:focus {
        border-color: #343a40; /* Darker border on focus */
    }

.groove {
    border-style: groove;
}

/* Nav Sidebar */
.sidebar-nav {
    /* --cui-sidebar-nav-link-color: white !important; */
    /* --cui-sidebar-nav-link-icon-color: white !important; */
    --cui-sidebar-nav-link-color: white !important;
    --cui-sidebar-nav-link-icon-color: white !important;
    --cui-sidebar-nav-group-toggle-show-bg-color: white !important;
    --cui-sidebar-nav-link-hover-color: #0F44A0;
    --cui-sidebar-toggler-focus-color: #0F44A0;
    --cui-sidebar-toggler-hover-color: #0F44A0;
    --cui-sidebar-toggler-hover-icon-color: #0F44A0;
    --cui-sidebar-nav-link-hover-bg: white;
    font-weight: 400;
    --cui-sidebar-nav-link-active-icon-color: #0F44A0;
    --cui-sidebar-nav-link-active-color: #0F44A0;
    --cui-sidebar-nav-link-hover-icon-color: #0F44A0;
    --cui-sidebar-nav-link-active-icon-bullet-color: #0F44A0;
    --cui-sidebar-nav-link-active-bg-color: white;
    --cui-sidebar-nav-title-color: #0F44A0;
    --cui-sidebar-nav-group-toggle-show-color: #0F44A0;
    --cui-sidebar-nav-link-hover-color: #0F44A0;
}

    .sidebar-nav .nav-group.show .nav-group-toggle:hover {
        /* color: #0F44A0; */
        color: #0F44A0;
    }

    .sidebar-nav .nav-group.show .nav-group-toggle {
        background: white;
    }

        .sidebar-nav .nav-group.show .nav-group-toggle .nav-icon {
            color: #0F44A0;
        }

        .sidebar-nav .nav-group.show .nav-group-toggle::after {
            background-color: #0F44A0;
        }

.nav-link:hover {
    color: #0F44A0;
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--cui-pagination-active-color);
    background-color: #0F44A0;
    border-color: #0F44A0;
}

.sidebar-nav .nav-link.active {
    color: #0F44A0;
    background: white;
}

.sidebar-nav .nav-link {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.sidebar-narrow-unfoldable .nav-link {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link svg,
.sidebar-nav .nav-link .nav-icon {
    flex-shrink: 0;
    margin-right: 8px;
}

.date-picker-input {
    width: 100%;
}

.nav-underline-border .nav-link.active, .nav-underline-border .show > .nav-link {
    font-weight: 700;
    color: #0c345c;
    border-bottom-color: currentcolor;
}

.header > .container-fluid, .header > .container-sm, .header > .container-md, .header > .container-lg, .header > .container-xl, .header > .container-xxl,
.sidebar-header {
    background-color: #ffffff !important;
}

.nav-group.show a:hover {
    color: #0F44A0;
}

/*
    KhoaPD26 - đè lên coreui css
*/

input.form-control[readonly],
textarea.form-control[readonly],
.form-select:disabled,
.form-control:disabled,
.select2-container--disabled,
.disabled .ts-control {
    background-color: var(--readonly-bg-color);
    color: var(--readonly-color);
}

.disabled .ts-control {
    opacity: 1;
}

    .disabled-select {
        pointer-events: none;
        background-color: #f0f0f0;
    }

.button-icon {
    border: none;
    background: none;
    color: rgb(24, 144, 255);
}

.button-icon-minus {
    border: none;
    background: none;
    color: rgb(255, 24, 82);
}

.shadow-header {
    box-shadow: var(--cui-box-shadow-sm) !important;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}

    .toggle-password i {
        font-size: 1.2em;
        color: #92949c;
        transition: color 0.3s;
    }

    .toggle-password:hover i {
        color: #007bff;
    }

    .toggle-password:focus {
        outline: none;
    }

/*Tables*/
.dt-scroll {
    box-shadow: 0px 0px 11.38px 0px #E6E6E6;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --cui-table-color-type: var(--cui-table-striped-color);
    --cui-table-bg-type: #F0F1F2;
}

table.dataTable {
    margin-bottom: 0;
}

    table.dataTable thead th {
        background-color: #F4F4F5 !important;
        color: #0F44A0 /* màu chữ */;
        font-size: 14px;
    }

    table.dataTable thead th, table.dataTable tbody tr {
        vertical-align: middle;
    }

/* Đè lên hiển thị default của DataTables*/
.dt-length {
    display: flex;
    align-items: center; /* Canh giữa theo chiều dọc */
    gap: 5px; /* Khoảng cách giữa các phần tử */
    /*margin-bottom: 10px;*/
}

    .dt-length label {
        white-space: nowrap; /* Không cho phép chữ xuống dòng */
    }

    .dt-length select {
        background-color: #f0f0f0; /* Màu nền */
        color: #333; /* Màu chữ */
        border: 1px solid #ccc; /* Viền */
        border-radius: 5px; /* Bo góc */
        width: auto; /* Kích thước tự động */
    }

    .dt-length .form-select {
        display: inline-block !important; /* Ghi đè thuộc tính block mặc định */
        width: auto; /* Điều chỉnh chiều rộng để phù hợp với nội dung */
        margin-left: 5px; /* Khoảng cách giữa chữ và dropdown */
    }

.dt-info {
    align-content: center;
}
/* Đảm bảo có khoảng trống cho mũi tên trong tiêu đề cột */
th.dt-orderable-asc, th.dt-orderable-desc {
    position: relative;
    padding-right: 25px; /* Tạo khoảng trống cho mũi tên */
}
/*End Tables*/


/*Form tìm kiếm*/
.form-control {
    /*font-size: 14px;*/
}

    .form-control::placeholder {
        opacity: 0.8;
        font-style: italic;
    }

.form-search .text-title {
    color: #0F44A0;
}

.form-search .btn-create {
    border: 1px solid #0F44A0;
}

.form-search form button {
    background: #0F44A0;
    color: white;
    border: none;
    min-width: 130px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/*End Form tìm kiếm*/

/*Pagination*/
.page-link {
    margin-right: 8px;
    background: #F0F1F2;
    border: none;
    border-radius: 8px;
    color: #697178;
}

.pagination {
    margin-bottom: 5px;
}

.page-link.active, .active > .page-link {
    color: white;
    background: #0F44A0;
}

/*End Pagination*/


/* Class để ẩn mũi tên sắp xếp */
th.no-sort {
    position: relative !important;
    padding: 0px !important;
    /* padding-right: 0 !important; Không cần khoảng trống cho mũi tên */
}

    /* Ẩn mũi tên trong các cột không sắp xếp */
    th.no-sort .dt-column-order:before {
        content: "" !important; /* Không hiển thị nội dung */
    }

    th.no-sort .dt-column-order:after {
        content: "" !important; /* Không hiển thị nội dung */
    }

[data-coreui-theme=dark] .dark\:bg-info, [data-coreui-theme=dark] .dark\:bg-info:not([class*="dark:"]), .dark-theme .dark\:bg-info, .dark-theme .dark\:bg-info:not([class*="dark:"]), .bg-info {
    --cui-bg-opacity: 1;
    background-color: #0f44a0 !important;
}

/*.search {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/ /* Đổ bóng cho phần tìm kiếm */
/*border-radius: 5px;*/ /* Bo tròn các góc */
/*}*/

.viewLink {
    text-decoration: none;
}

    .viewLink:hover {
        font-weight: var(--label-font-weight);
        text-decoration: underline;
    }

.select2 {
    width: 100% !important;
    font-size: 1rem;
    font-weight: 400;
    border: var(--cui-border-width) solid var(--cui-border-color);
    line-height: 1.5;
    color: var(--cui-body-color);
    padding: 0.17rem 0.75rem;
    border-radius: 0.25rem;
}

.select2-selection {
    border: none !important;
}

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

.inputGroup {
    position: relative;
}

    .inputGroup label {
        position: absolute;
        top: 0.3rem;
        left: 0px;
        margin-left: 1rem;
        pointer-events: none;
        transition: all 0.3s ease;
        color: rgb(100, 100, 100);
        opacity: 0.8;
        font-weight: var(--label-font-weight);
        /*        font-style: italic;*/
    }

    /* CoreUI multiselect */
    .inputGroup :is(.form-multi-select.show) ~ label {
        transform: translateY(-75%);
        background-color: var(--cui-white);
        opacity: 1;
        margin-left: 1rem;
        font-style: normal;
    }

    /* Text input */
    .inputGroup .form-control:focus ~ label,
    .inputGroup .form-control:not(:placeholder-shown) ~ label {
        transform: translateY(-75%);
        background-color: var(--cui-white);
        opacity: 1;
        margin-left: 1rem;
        font-style: normal;
    }

    /* Select thông thường */
    .inputGroup select:valid ~ label,
    .inputGroup select:focus ~ label,
    .inputGroup:has(select option:checked[value=""]:not(:empty)) label {
        transform: translateY(-75%);
        background-color: var(--cui-white);
        opacity: 1;
        margin-left: 1rem;
        font-style: normal;
    }

    /* Trường hợp option trống => không float label */
    .inputGroup:has(select option:checked[value=""]) label {
        transform: translateY(0);
        opacity: 0.8;
    }

    /* Float label nếu TomSelect có giá trị */
    .inputGroup:has(.ts-control input[value]:not([value=""])) label,
    .inputGroup:has(.ts-control input:focus) label {
        transform: translateY(-75%) !important;
        background-color: var(--cui-white);
        margin-left: 1rem;
        font-style: normal;
        z-index: 1;
    }


.form-multi-select {
}

    .form-multi-select .form-multi-select-cleaner::before {
        background-color: black !important;
    }

    .form-multi-select .form-multi-select-indicator::before {
        background-color: black !important;
    }

.del-img {
    color: red;
    position: absolute;
    right: 1px;
    top: -0.25rem;
}

    .del-img:hover {
        cursor: pointer;
        font-weight: bold;
    }

.rowCheckbox {
    accent-color: #0F44A0;
}

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc, table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc, table.dataTable thead > tr > td.dt-ordering-asc, table.dataTable thead > tr > td.dt-ordering-desc {
    position: relative;
    padding-right: 28px;
}

.modal-body {
    scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
}

    .modal-body::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trên Chrome, Edge, Safari */
    }

/* This selector targets the editable element (excluding comments). */
.ck-editor__editable_inline:not(.ck-comment__input *) {
    min-height: 300px;
}

.form-label {
    font-weight: var(--label-font-weight);
}

.form-check-label {
    font-weight: var(--label-font-weight);
}

.w-150 {
    width: 150px !important;
}

.m-w-150 {
    min-width: 150px !important;
}