:root {
    --blue-primary: #012a5e;
    --blue-secondary: #2e5fcc;
    --gray-text: #8e96a0;
    --light-gray: #e9ecef;
    --gray-bg: #edebf5;
    --color-table: #7d90b2;
    --bg-table: #7d90b2;
    --gray-line: #c4c4c4;
    --gray-light: #c4c4c4;
    --black-text: #26252e;
    --light-blue: #2e5fcc;
}
.pr-40px {
    padding-right: 2.5rem;
}
.font-16px {
    font-size: 1rem !important;
}
.line-height-16px {
    line-height: 1rem !important;
}
.text-black {
    color: var(--black-text) !important;
}
.font-normal {
    font-weight: normal !important;
}
.font-500 {
    font-weight: 500 !important;
}
.font-bold {
    font-weight: bold !important;
}
.text-gray-ci {
    color: var(--gray-text) !important;
}
.text-primary-ci {
    color: var(--blue-secondary) !important;
}
.text-dark-blue {
    color: var(--blue-primary) !important;
}
.bg-table {
    background-color: var(--bg-table) !important;
}
.bg-gray {
    background-color: var(--gray-bg) !important;
}
.mt-30px {
    margin-top: 1.875rem;
}
.mt-40px {
    margin-top: 2.5rem;
}
.min-w-max-content {
    min-width: max-content;
}
.w-action {
    width: 7.5rem;
}
.w-action-lg {
    width: 11.25rem;
}
.text-decoration-none {
    text-decoration: none;
}
.btn {
    font-weight: 400;
}
.btn-shadow {
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
}
.admin-avatar {
    display: inline-block;
    max-width: 3.125rem;
    min-width: 3.125rem;
    max-height: 3.125rem;
    min-height: 3.125rem;
    border-radius: 50%;
}
.admin-avatar img {
    width: 100%;
    border-radius: 50%;
}
.btn-dropdown-admin {
    border-radius: 0.625rem !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff !important;
    border: 1px solid #c4c4c4 !important;
    padding: 0.3125rem 0.6875rem !important;
}
.btn-dropdown-admin.dropdown-toggle::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
}
.text-name-admin {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--blue-primary);
    font-weight: 400;
    text-align: left;
}
.text-under-admin {
    font-size: 0.75rem;
    line-height: 0.75rem;
    color: var(--gray-text);
    font-weight: 700;
    text-align: left;
}
.admin-dropdown-menu .dropdown-item {
    color: var(--blue-primary);
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 400;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.admin-dropdown-menu .dropdown-item:focus {
    background-color: var(--light-gray);
}
.admin-dropdown-menu .dropdown-item:hover {
    color: var(--blue-primary);
}
.cm-nav-menu-sidebar {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0.9375rem;
    padding-left: 0 !important;
}
.cm-nav-menu-sidebar .nav-item {
    list-style: none !important;
    background-color: var(--blue-primary);
}
.cm-nav-menu-sidebar .nav-item .nav-link {
    padding: 1.3125rem !important;
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 700;
}
.cm-nav-menu-sidebar .nav-item.active {
    background-color: #ffffff;
    border-radius: 0.625rem 0 0 0.625rem;
}
.cm-nav-menu-sidebar .nav-item.active .nav-link {
    color: var(--blue-primary);
}
.cm-nav-menu-sidebar .nav-item:last-child {
    border-radius: 0 0 0.625rem 0.625rem !important;
}
.btn-side-menu {
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--blue-primary) !important;
    border-radius: 0.625rem 0 0 0 !important;
    padding: 1.3125rem !important;
}
.btn-side-menu[aria-expanded="false"] {
    background-color: var(--blue-primary) !important;
    border-color: var(--blue-primary) !important;
    color: #ffffff !important;
    border-radius: 0.625rem 0.625rem 0 0 !important;
    padding: 1.3125rem !important;
}
.cm-collapse {
}
.card-collapse {
    background-color: var(--gray-bg);
    border-radius: 0 0 0 0.625rem !important;
    box-shadow: inset -1px 2px 5px rgba(0, 0, 0, 0.15);
}
.card-collapse a.link-sub-menu {
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: var(--color-table);
    padding: 0.5rem 1.3125rem;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none !important;
}
a.link-sub-menu:first-child {
    padding-top: 0.9375rem;
}
a.link-sub-menu:last-child {
    padding-bottom: 0.9375rem;
}
a.link-sub-menu span {
    padding-left: 1.1875rem;
}
a.link-sub-menu i {
    font-size: 0.3125rem;
    line-height: 0.3125rem;
    margin-top: 0.1875rem;
    padding-left: 0.3125rem;
}
a.link-sub-menu.active {
    color: var(--blue-primary);
}

/* calendar */
.contain-box-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-top: 3.75rem;
}
.wrap-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
    width: 90%;
}
@media (min-width: 1024px) {
    .wrap-calendar {
        width: 80%;
    }
}

.wrap-calendar .box-link-item {
    cursor: pointer;
    width: calc(25% - 0.7031rem);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.1875rem 0.1875rem 0.1875rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0.625rem;
    border: 1px solid var(--gray-line);
    text-decoration: none;
}
.wrap-calendar .box-link-item .foot-tex {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.9375rem 0.8125rem;
    background-color: var(--gray-bg);
    border-radius: 0.625rem;
}
.wrap-calendar .box-link-item .item-img {
    max-width: 6.25rem;
    min-width: 6.25rem;
    margin: 0.9375rem 0;
}
.wrap-calendar .box-link-item .item-img img {
    width: 100%;
}
.wrap-calendar .box-link-item .foot-tex span {
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: var(--black-text);
    font-weight: 700;
}

/* holiday */
.contain-holiday {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    width: 100%;
}
.contain-holiday .row-header {
    display: flex;
    flex-direction: row;
    gap: 0.9375rem;
    justify-content: space-between;
    align-items: center;
}
.contain-holiday .row-header .text-header {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-bottom: 0 !important;
    color: var(--black-text);
    font-weight: 700;
}
.wrap-header-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9375rem;
    width: 28.125rem;
}
.box-input-icon {
    position: relative;
    display: inline-block;
    width: calc(28.125rem - 7.9081rem);
}
.box-input-icon i {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    color: var(--gray-text);
    font-size: 1rem;
}
.box-input-icon .cm-form-control {
    padding: 0.375rem 0.75rem 0.375rem 2.1875rem;
}
.cm-form-control::placeholder {
    color: var(--gray-text);
}
.cm-form-control {
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--black-text);
    border: 1px solid var(--gray-line);
}

.btn-outline-blue {
    min-width: max-content;
    font-weight: 700;
    background-color: #ffffff !important;
    border: 1px solid var(--light-blue);
    color: var(--light-blue) !important;
}
.btn-outline-blue:hover {
    background-color: var(--light-blue) !important;
    color: #ffffff !important;
}
.btn.with-icon i {
    margin-right: 0.3125rem;
}
.btn-outline-blue.with-icon i {
    margin-right: 0.3125rem;
}
.btn-outline-blue:focus {
    background-color: var(--light-blue) !important;
    color: #ffffff !important;
}
.btn-outline-blue:active {
    background-color: var(--light-blue) !important;
    color: #ffffff !important;
}

.btn-outline-gray {
    min-width: max-content;
    font-weight: 700;
    background-color: #ffffff !important;
    border: 1px solid var(--gray-text);
    color: var(--gray-text) !important;
}
.btn-outline-gray:hover {
    background-color: var(--gray-text) !important;
    color: #ffffff !important;
}
.btn-outline-gray.with-icon i {
    margin-right: 0.3125rem;
}
.btn-outline-gray:focus {
    background-color: var(--gray-text) !important;
    color: #ffffff !important;
}
.btn-outline-gray:active {
    background-color: var(--gray-text) !important;
    color: #ffffff !important;
}
/* table */
.cm-table {
    border: 1px solid var(--bg-table);
}
.cm-table > thead {
    background-color: var(--bg-table);
}
.cm-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    border: 0;
    background-color: #ffffff;
}
.cm-table.table-striped > tbody > tr:nth-of-type(even) > * {
    border: 0;
    background-color: var(--gray-bg);
}
.cm-table thead > tr th {
    color: #ffffff;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.75rem;
    background-color: var(--bg-table);
}
.cm-table th {
    vertical-align: middle;
    /* padding: 1rem 0.5rem; */
}
.cm-table td {
    vertical-align: middle;
    /* padding: 1rem 0.5rem; */
}
.cm-table tbody > tr td {
    color: var(--black-text);
    font-weight: 400;
    font-size: 0.875rem;
    /* line-height: 0.875rem; */
}
.cm-table tbody > tr th {
    color: var(--black-text);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 0.875rem;
}
.cm-table tfoot {
    background-color: #ffffff;
}
.container-table {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.td-action {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-link.link-td {
    color: var(--color-table);
    text-decoration: none !important;
}
.btn-link.link-td:focus {
    color: var(--blue-primary);
}
.btn-link.link-gray {
    color: var(--gray-text);
    text-decoration: none !important;
}
.btn-link.link-gray:focus {
    color: var(--gray-text);
}
.cm-pagination {
    margin-bottom: 0 !important;
}
.cm-pagination .page-item {
    margin: 0 0.3125rem;
}
.cm-pagination .page-item .page-link {
    border-radius: 0.3125rem;
    color: var(--black-text);
    font-size: 0.875rem;
    /* line-height: 0.875rem; */
    font-weight: 400;
    border: 1px solid var(--color-table);
}
.cm-pagination .page-item .page-link {
    color: var(--black-text);
}
.cm-pagination .page-item .page-text {
    position: relative;
    display: block;
    padding: 0.3125rem 0.3125rem;
}
.cm-pagination .page-item .page-text::before {
    content: "/";
    padding-right: 0.1875rem;
    color: var(--color-table);
}
.cm-pagination .page-item:first-child .page-link {
    border-radius: 0.3125rem;
}
.cm-pagination .page-item:last-child .page-link {
    border-radius: 0.3125rem;
}
.btn-dropdown-pagination.dropdown-toggle::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7";
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    color: var(--color-table);
    vertical-align: middle;
}
.btn-dropdown-pagination {
    border-radius: 0.3125rem;
    color: var(--black-text);
    font-size: 0.875rem;
    /* line-height: 0.875rem; */
    font-weight: 400;
    border: 1px solid var(--color-table);
}
.btn-dropdown-pagination:hover {
    border: 1px solid var(--color-table);
}
.dropdown-menu-page {
    min-width: 5rem;
    border: 1px solid var(--color-table);
}
.dropdown-menu-page .dropdown-item {
    color: var(--black-text);
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 400;
    padding: 0.625rem;
}
.dropdown-menu-page .dropdown-item:hover {
    background-color: var(--gray-bg);
    color: var(--black-text);
}
.title-pagination {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 400;
    color: var(--color-table);
    display: flex;
    align-items: center;
    padding-right: 0.9375rem;
}
.cm-modal .modal-dialog {
    width: 35.3125rem;
    border-radius: 0.625rem;
}
.cm-modal .modal-body {
    border-radius: 0 0 0.625rem 0.625rem;
}
.cm-modal .modal-content {
    border-radius: 0.625rem;
}
.cm-modal .modal-dialog .modal-header {
    padding: 0.9375rem;
    display: flex;
    justify-content: center;
    border-radius: 0.625rem 0.625rem 0 0;
    background-color: var(--blue-secondary);
}
.cm-modal .modal-header i {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: #ffffff;
    margin-right: 0.625rem;
}
.cm-modal .modal-header .modal-title {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: #ffffff;
    font-weight: 400;
}
.cm-modal .modal-body {
    padding: 0.9375rem;
    background-color: #ffffff;
}
.modal-qr .modal-dialog {
    width: 31.25rem;
    border-radius: 1.875rem;
}
.cm-modal-border-radius .modal-content {
    border-radius: 1.875rem !important;
}
.cm-modal-border-radius .modal-header {
    padding: 1.25rem 0.9375rem !important;
    border-radius: 1.875rem 1.875rem 0 0 !important;
}
.cm-modal-border-radius .modal-body {
    border-radius: 0 0 1.875rem 1.875rem !important;
}
.wrap-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border-radius: 0 0 0.625rem 0.625rem;
}
.wrap-form .footer-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.wrap-form .footer-form button {
    min-width: 6.25rem;
}
.column-form {
    display: flex;
    flex-direction: column;
    position: relative;
}
.column-form .form-control {
    color: var(--black-text);
    font-size: 1rem;
    /* line-height: 1rem; */
    position: relative;
    z-index: 1;
    border: 1px solid #c4c4c4;
    padding: 0.4375rem 1.0625rem;
    border-radius: 0.5rem;
}
.column-form .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #c4c4c4;
}
.column-form .form-control::placeholder {
    font-size: 0.875rem;
    color: var(--gray-text);
}

.label-name .form-control {
    color: var(--black-text);
    font-size: 1rem;
    /* line-height: 1rem; */
    position: relative;
    z-index: 1;
    border: 1px solid #c4c4c4;
    padding: 0.4375rem 1.0625rem;
    border-radius: 0.5rem;
}
.label-helper {
    font-size: 0.75rem;
    line-height: 0.75rem;
    position: absolute;
    opacity: 0;
    transition: 0.2s opacity;
    top: -7px;
    left: 0.75rem;
    padding: 0 0.3125rem;
    z-index: 3;
    background-color: #ffffff;
    color: var(--light-blue);
}

.label-custom{
    font-size: 0.75rem;
    line-height: 0.75rem;
    position: absolute;
    opacity: 1;
    transition: 0.2s opacity;
    top: -7px;
    left: 0.75rem;
    padding: 0 0.3125rem;
    z-index: 3;
    background-color: #ffffff;
    color: var(--light-blue);
}


.form-control:not(:placeholder-shown) + .label-helper {
    opacity: 1;
}
.form-control:focus + .label-helper {
    /* bottom: 95%;
    font-family: arial;
    font-size: 14px;
    line-height: 1; */
    opacity: 1;
    /* padding: 4px; */
}

.label-helper-select {
    font-size: 0.75rem;
    line-height: 0.75rem;
    position: absolute;
    opacity: 0;
    transition: 0.2s opacity;
    top: -7px;
    left: 0.75rem;
    padding: 0 0.3125rem;
    z-index: 3;
    background-color: #ffffff;
    color: var(--light-blue);
}
.column-form .form-select {
    color: var(--gray-text);
    font-size: 1rem;
    /* line-height: 1rem; */
    position: relative;
    z-index: 1;
    border: 1px solid #c4c4c4;
    padding: 0.4375rem 1.0625rem;
    border-radius: 0.5rem;
}
.column-form .form-select:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #c4c4c4;
}
.form-select.prefilled {
    color: var(--black-text);
}
.column-form .form-select option:disabled {
    font-size: 0.875rem;
    color: var(--gray-text);
}

.form-select.prefilled + .label-helper {
    opacity: 1;
}
.form-select:focus + .label-helper {
    /* bottom: 95%;
    font-family: arial;
    font-size: 14px;
    line-height: 1; */
    opacity: 1;
    /* padding: 4px; */
}
.modal-delete .modal-body {
    position: relative;
    border-radius: 1.875rem !important;
}
.box-alet-delete {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
    padding: 1.25rem;
}
.box-alet-delete .box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.box-alet-delete .box-text .title-alert {
    margin-bottom: 0;
    /* margin-top: 1.25rem; */
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--black-text);
    font-weight: 500;
    text-align: center;
}
.box-alet-delete .box-text .text-message {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--gray-text);
    font-weight: 500;
    text-align: center;
}

.triangle {
    position: relative;
    background-color: #e0341e;
    text-align: left;
}
.triangle:before,
.triangle:after {
    content: "";
    position: absolute;
    background-color: inherit;
}
.box-triangle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.375rem;
    height: 5.5rem;
}
.box-triangle i {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 2.5rem;
    color: #ffffff;
}
.triangle,
.triangle:before,
.triangle:after {
    display: flex;
    width: 3.125rem;
    height: 3.125rem;
    border-top-right-radius: 30%;
    z-index: 10;
}

.triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}
.triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707)
        translate(0, -50%);
}
.triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
.footer-alert-delete {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.625rem;
    padding-bottom: 0.3125rem;
}
.footer-alert-delete button {
    width: 7.5rem;
}

.box-alet-success {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
    padding: 1.25rem;
}
.box-alet-success .box-icon-success i {
    font-size: 5.625rem;
    color: #1ab117;
}
.box-alet-success .box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.box-alet-success .box-text .title-alert {
    margin-bottom: 0;
    /* margin-top: 1.25rem; */
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--black-text);
    font-weight: 500;
    text-align: center;
}
.box-alet-success .box-text .text-message {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--gray-text);
    font-weight: 500;
    text-align: center;
}

.footer-alert-success {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.625rem;
    padding-bottom: 0.3125rem;
}
.footer-alert-success button {
    width: 7.5rem;
}
.container-cm-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.875rem;
    /* background-color: #ffffff; */
}
.container-cm-tabs .nav-tabs {
    border-radius: 1.875rem 1.875rem 0 0 !important;
    border-bottom: 1px solid var(--blue-secondary) !important;
    padding: 1.25rem 3.375rem 0 3.375rem;
    background-color: var(--blue-secondary);
}
.container-cm-tabs .nav-item .nav-link {
    border: none;
    width: 8.875rem;
    text-align: center;
    border-radius: 10px 0.625rem 0 0;
    background-color: var(--gray-light);
    color: var(--gray-text);
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: normal;
    padding: 0.6875rem;
    width: auto;
}
.container-cm-tabs .nav-item .nav-link.active {
    color: var(--blue-secondary);
    background-color: #ffffff;
}
.container-cm-tabs .body-tab-content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 1.875rem 3.375rem;
    min-height: calc(100vh - 12.5rem);
    border-radius: 0 0 1.875rem 1.875rem;
}
.container-cm-tabs .body-tab-content .wrap-content {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}
.container-cm-tabs .body-tab-content .wrap-content .row-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9375rem;
}
.container-cm-tabs .body-tab-content .wrap-content .row-header .text-header {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--black-text);
    margin-bottom: 0 !important;
    font-weight: 700;
}
.container-cm-tabs
    .body-tab-content
    .wrap-content
    .row-header
    .text-header
    span {
    color: var(--blue-primary);
    padding-left: 0.3125rem;
}

.container-cm-tabs .body-tab-content .flex-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.875rem;
    width: auto;
}
.container-cm-tabs .body-tab-content .flex-select .text-title-select {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
    font-weight: 700;
    margin-bottom: 0;
    /* width: 17.8125rem; */
}
.container-cm-tabs .body-tab-content .flex-select .box-select {
    width: 6.25rem;
}
.btn-dropdown-white {
    background-color: white;
    border: 1px solid var(--gray-line);
    border-radius: 0.5rem;
    width: 5.3125rem;
    text-align: left;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    padding: 0.625rem;
}
.btn-dropdown-white i {
    color: var(--gray-line);
    float: right;
}
.btn-dropdown-white:focus {
    border: 1px solid var(--gray-line);
}
.btn-dropdown-white:hover {
    border: 1px solid var(--gray-line);
}
.btn-dropdown-white.dropdown-toggle::after {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}
.btn-dropdown-white + .dropdown-menu {
    border: 1px solid var(--gray-line);
    border-radius: 0.5rem;
}
.btn-dropdown-white + .dropdown-menu .dropdown-item {
    color: var(--black-text);
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    padding: 0.625rem;
}
.td-bg-gray {
    background-color: var(--gray-bg) !important;
}
.table-timeable thead tr th {
    font-size: 1rem;
    font-weight: normal;
    color: #ffffff !important;
    text-align: center;
    background-color: var(--bg-table) !important;
}
.table-timeable tbody tr td {
    font-size: 1rem;
    color: var(--black-text);
    text-align: center;
}
.table-timeable tfoot {
    background-color: var(--gray-bg);
    border: 1px solid var(--bg-table);
}

.table-timeable tbody tr td.action {
    width: 2.375rem;
    background-color: var(--gray-bg);
}
.table-timeable tbody tr td .link-search {
    color: var(--bg-table);
    text-decoration: none;
}

.table-timeable tbody tr td .link-search i {
    color: var(--bg-table);
}
.w-192px {
    width: 12rem;
    text-align: center;
}
.w-84px {
    width: 5.25rem;
    text-align: center;
}
.w-112px {
    width: 7rem;
    text-align: center;
}

.teacher-calendar {
    padding-top: 1.875rem;
}

.table-calendar thead tr th {
    font-size: 1rem;
    font-weight: normal;
    color: #ffffff !important;
    text-align: center;
    background-color: var(--bg-table) !important;
    border-color: var(--gray-line);
}
.col-time {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.col-time span {
    line-height: 1rem;
    font-weight: normal;
}
.col-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 0.1875rem; */
}
.col-date span {
    color: var(--black-text);
    font-size: 1rem;
    /* line-height: 1rem; */
    font-weight: normal;
}
.col-date span.date {
    color: var(--bg-table);
}

.col-text-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.col-text-detail span.code {
    font-size: 1rem;
}
.col-text-detail span {
    color: var(--black-text);
    font-size: 0.75rem;
    font-weight: normal;
}
.col-text-detail span.room {
    color: var(--blue-primary);
}
.table-calendar tbody tr td {
    border-color: var(--gray-line);
    background-color: var(--light-gray);
}
.break-time {
    width: 6.25rem;
    background-color: var(--gray-bg) !important;
}
.text-break-time {
    font-size: 16px;
    font-weight: normal;
    color: var(--black-text);
}
.foot-content-page.top-xl {
    margin-top: 5rem !important;
}
.foot-content-page {
    margin-top: 1.875rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.875rem 0;
    border-top: 1px solid var(--gray-line);
}

.foot-content-page button {
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    width: 8.5rem;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
}
.container-list {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.row-form-list {
    display: flex;
    flex-direction: row;
    gap: 0.9375rem;
    position: relative;
}
.row-form-list .box-search {
    display: block;
    width: 100%;
    position: relative;
}
.row-form-list .box-search .form-select {
    /* color: var(--black-text); */
    font-size: 1rem;
    position: relative;
    z-index: 1;
    border: 1px solid #c4c4c4;
    padding: 0.4375rem 1.0625rem;
    border-radius: 0.5rem;
}
.label-helper-default {
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding: 0 0.3125rem;
    z-index: 3;
    position: absolute;
    top: -7px;
    left: 0.75rem;
    color: var(--light-blue);
}
.container-list .header-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 1.25rem 2.1875rem;
    background-color: var(--gray-bg);
}
@media (max-width: 1204px) {
    .container-list .header-list {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

.container-list .header-list .text-header {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--black-text);
}
.container-list .header-list .text-title {
    font-weight: normal;
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
}
.container-list .header-list .box-qr {
    display: block;
    width: 7.125rem;
    position: relative;
}
.bg-split-white {
    background: linear-gradient(
        to top,
        white 0%,
        white 10%,
        var(--gray-bg) 70%,
        var(--gray-bg) 100%
    );
}
.p-start-35px {
    padding-left: 2.1875rem !important;
}
.w-40px {
    width: 2.5rem;
}
.w-60px {
    width: 3.75rem;
}
.w-75px {
    width: 4.6875rem;
}
.w-100px {
    width: 6.25rem;
}
.w-120px {
    width: 7.5rem;
}
.w-180px {
    width: 11.25rem;
}
.w-300px {
    width: 18.75rem;
}
.min-120px {
    min-width: 120px;
}
.w-sm-action {
    width: 7.5rem;
}
.text-td-16px {
    font-size: 1rem;
    color: var(--black-text);
    font-weight: normal;
}
.text-bg-table {
    color: var(--bg-table);
}
.box-print {
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.875rem;
    color: var(--bg-table);
}

.box-print:hover,
.box-print:focus,
.box-print:visited {
    color: var(--bg-table);
    border: 0;
}
.box-print i {
    margin-right: 0.3125rem;
}
.content-qr {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
}
.content-qr img {
    width: 250px;
}

.box-select {
    display: block;
    width: 100%;
    position: relative;
}
.box-select .form-select {
    color: var(--black-text);
    font-size: 1rem;
    position: relative;
    z-index: 1;
    border: 1px solid #c4c4c4;
    padding: 0.4375rem 1.0625rem;
    border-radius: 0.5rem;
}

.flex-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}
.row-from {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.9375rem;
}
.row-from .box-item-from {
    display: block;
    width: 100%;
    position: relative;
}
.row-from .box-item-from .form-control:disabled {
    background-color: #ffffff;
    border-color: var(--bg-table);
    color: var(--bg-table);
    font-weight: 500;
}
.row-from .box-item-from.disabled .label-helper {
    color: var(--bg-table);
}

.flex-body .box-body-gray {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
}
.flex-body .box-body-gray .header-body {
    color: var(--black-text);
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 700;
    margin-bottom: 1.5625rem !important;
}
.flex-body .box-body-gray .warp-create {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    max-width: 28.125rem;
}
.flex-body .box-body-gray .flex-row-create {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.flex-body .box-body-gray .flex-row-create li {
    list-style: decimal;
}
.gap-5px {
    gap: 0.3125rem;
}
.gap-10px {
    gap: 0.625rem;
}
.gap-15px {
    gap: 0.9375rem;
}
.gap-20px {
    gap: 1.25rem;
}
.gap-30px {
    gap: 1.875rem;
}

@media (max-width: 1023.999px) {
    .body-from-100 .w-from-xl,
    .body-from-100 .w-from-lg,
    .body-from-100 .w-from-md,
    .body-from-100 .w-from-sm,
    .body-from-100 .w-from-xs,
    .body-from-100 .w-from-xm,
    .body-from-100 .w-from-50per,
    .body-from-100 .w-from-middle,
    .body-from-100 .w-from-sm-max {
        width: 100% !important;
        min-width: auto !important;
    }
}
@media (max-width: 1023.999px) {
    .w-max-content-3 {
        width: 50%;
    }
}
.w-max-conten-3t {
    width: max-content;
}
.w-from-number {
    width: 5rem;
}
.w-from-50per {
    width: 50%;
}
.w-from-xl {
    min-width: 23.75rem;
}
.w-from-middle {
    min-width: calc(100% - 18.4375rem);
}
.w-from-lg {
    min-width: 17.5rem;
}
.w-from-md {
    min-width: 11.375rem;
}
.w-from-sm {
    min-width: 8.9375rem;
}
.w-from-md-max {
    min-width: 12.0625rem;
    max-width: 12.0625rem;
}
.w-from-xm {
    min-width: 7.5rem;
    max-width: 7.5rem;
}
.w-from-xs {
    min-width: 5.625rem;
    max-width: 5.625rem;
}

.flex-body .box-body-gray .row-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.row-check .text-check {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
}
.row-check .text-check .gray {
    color: var(--bg-table);
    padding: 0 5px;
    font-weight: 500;
}
.cm-check.form-check-input:focus {
    /* border-radius: 0.05rem; */
    border-color: #2e5fcc;
    outline: 0;
    box-shadow: 0 0 0 0.5rem rgba(46, 95, 204, 0.25);
}
.cm-check.form-check-input:checked {
    /* border-radius: 0.5rem; */
    border-color: #2e5fcc;
    outline: 0;
    box-shadow: 0 0 0 0.5rem rgba(46, 95, 204, 0.25);
}
.grid-container-map {
    margin-top: 1.875rem;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.3125rem;
}

@media (max-width: 1023.9999px) {
    .grid-container-map {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media (max-width: 991.98px) {
    .grid-container-map {
        grid-template-columns: repeat(7, 1fr);
    }
}
@media (max-width: 767.98px) {
    .grid-container-map {
        grid-template-columns: repeat(6, 1fr);
    }
}
.grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    /* padding: 0.3125rem; */
    border: 1px solid #7d90b2;
}
.grid-item img {
    max-width: 2.875rem;
    min-width: 2.875rem;
    margin-bottom: -0.625rem;
    z-index: 10;
}
.grid-item .text-header {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    /* line-height: 0.75rem; */
    color: var(--bg-table);
    font-weight: 500;
}
.grid-item .text-number {
    font-size: 0.625rem;
    line-height: 0.625rem;
    color: var(--bg-table);
    font-weight: 500;
}
.grid-item .text-id {
    font-size: 0.875rem;
    /* line-height: 0.875rem; */
    color: var(--black-text);
    font-weight: normal;
}
.grid-item .box-foot {
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;
    background-color: var(--gray-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.9375rem 0 0.625rem 0;
}

.container-cm-white {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.875rem;
    background-color: white;
    /* background-color: #ffffff; */
}
.container-cm-white .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2e5fcc;
    color: #ffffff;
    padding: 1.3125rem 5rem;
    border-bottom: 0;
    border-radius: 30px 30px 0px 0px;
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .container-cm-white .header-content {
        padding: 1.875rem;
    }
}
.container-cm-white .body-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.875rem 5rem;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .container-cm-white .body-content {
        padding: 1.875rem;
    }
}

.container-cm-white .body-content .row-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.container-cm-white .body-content .row-header .text-header {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--black-text);
    margin-bottom: 0 !important;
    font-weight: 700;
}
.container-cm-white .body-content .text-topic {
    display: inline-block;
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
    margin: 0.625rem 0 0 0 !important;
    font-weight: 700;
}
.container-cm-white .body-content .header-detial {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    /* margin-bottom: 2.0625rem; */
}
.container-cm-white .body-content .header-detial .text-education {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
    font-weight: 700;
}

.container-cm-white .body-content .header-detial .column-major {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}
.container-cm-white .body-content .header-detial .column-major .item-column {
    min-width: 13.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.container-cm-white .body-content .header-detial .column-major .item-column ul {
    margin-bottom: 0 !important;
}
.container-cm-white .body-content .header-detial .text-major {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--black-text);
    font-weight: normal;
}
.text-title-from {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    color: var(--black-text);
}
.btn-cm-gray {
    background-color: rgba(125, 144, 178, 0.1) !important;
    border: transparent !important;
    color: var(--bg-table) !important;
}
.btn-cm-gray:hover {
    background-color: rgba(125, 144, 178, 0.1) !important;
    border: transparent !important;
    color: var(--bg-table) !important;
}
.btn-cm-gray:focus {
    background-color: rgba(125, 144, 178, 0.1) !important;
    border: transparent !important;
    color: var(--bg-table) !important;
}
.card-body-header-gray {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #c4c4c4;
    border-radius: 0.5rem;
}
.card-body-header-gray .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.9375rem 1.875rem;
    background-color: var(--gray-bg);
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--black-text);
}

.card-body-header-gray .body-from {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    width: 100%;
    background-color: #ffffff;
    padding: 0.9375rem 1.875rem;
    border-radius: 0 0 0.5rem 0.5rem;
}
.wrap-room {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 0.9375rem;
    border-bottom: 1px solid #c4c4c4;
}
.text-room-from {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--bg-table);
    margin: 0.9375rem 0 1.875rem 0;
}

.row-foot-btn-border {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0.9375rem;
    border-top: 1px solid #c4c4c4;
}

.contain-page {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    width: 100%;
}
.contain-page .row-header {
    display: flex;
    flex-direction: row;
    gap: 0.9375rem;
    justify-content: space-between;
    align-items: center;
}
.contain-page .row-header .text-header {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-bottom: 0 !important;
    color: var(--black-text);
    font-weight: 700;
}
.form-check-label {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--black-text);
}
.container-box-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--bg-table);
}
.border-table {
    border-color: var(--bg-table);
}
.table-list thead {
    border-left: 1px solid var(--bg-table);
    border-right: 1px solid var(--bg-table);
}
.table-list thead tr th {
    color: var(--bg-table);
    font-size: 12px;
    font-weight: normal;
    background-color: var(--gray-bg);
    border: 0 !important;
}
.table-list thead tr th.action-btn-40 {
    width: 2.5rem;
}
.table-list tbody {
    border-left: 1px solid var(--bg-table);
    border-right: 1px solid var(--bg-table);
}
.table-list tbody tr td {
    color: var(--black-text);
    font-size: 16px;
    font-weight: normal;
    border: 0;
}
.table-list tbody tr td.border-l {
    border-left: 1px solid var(--bg-table) !important;
}
.table-list tbody tr td .btn-add {
    padding: 0 !important;
    color: var(--bg-table);
}

.container-box-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: min-content;
    border: 1px solid var(--bg-table);
}
.container-box-list .box-list {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--bg-table);
}
.container-box-list .box-list:last-child {
    border-bottom: 0;
}
.container-box-list .box-list .header {
    border-bottom: 1px solid var(--bg-table);
    padding: 0.25rem 0.5rem;
    background-color: var(--gray-bg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container-box-list .box-list .list-item {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--bg-table);
}
.container-box-list .box-list .list-item:last-child {
    border-bottom: 0;
}
.container-box-list .box-list .list-item .item {
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    color: var(--black-text);
}
.container-box-list .box-list .list-item .item.delete-list {
    min-width: 2.5rem;
    text-align: center;
    background-color: var(--gray-bg);
}
.container-box-list .box-list .list-item .item .btn-delete-list {
    padding: 0 !important;
    color: var(--bg-table);
}
.container-box-list .box-list .foot-item {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    color: var(--black-text);
}
.text-check {
    color: var(--bg-table);
}
.cm-check.form-check-input:checked + .text-check {
    color: var(--blue-secondary);
}