:root {
    --bs-body-font-size: 1rem;
    --bs-body-color: #6c7278;
    --bs-btn-line-height: 1.2;
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-active-color: var(--cl-primary);
    --bs-accordion-active-bg: var(--cl-body);
}

a {
    color: var(--cl-primary);
    text-decoration: none;
    transition: 0.35s ease-in-out;
}

a:hover {
    color: var(--cl-primary-dark);
    text-decoration: none;
}
.col-2p4 {flex: 0 0 auto;width: 20%;}
.col-1p7 {flex: 0 0 auto;width: 14.28571428%;}
.col-1p5 {flex: 0 0 auto;width: 12.5%;}
.col-1p3 {flex: 0 0 auto;width: 11.11111111%;}
.col-1p2 {flex: 0 0 auto;width: 10%;}

/*============================================
            FONT
===================================== */
.h5,
h5 {
    font-size: 1.2rem;
}

.fs-6 {
    font-size: 1.15rem !important;
}

.h4,
h4 {
    font-size: calc(1.2rem + .3vw);
}

@media (min-width: 1200px) {

    .h4,
    h4 {
        font-size: 1.4rem;
    }
}

@media (min-width: 1200px) {
    .col-xl-2p5 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.card-body {
    background: var(--cl-white);
}

/*============================================
            NAVBAR
===================================== */
.nav-pills {
    --bs-nav-pills-border-radius: 0.375rem;
    --bs-nav-pills-link-active-color: var(--cl-theme-color);
    --bs-nav-pills-link-active-bg: var(--cl-theme-bg);
    box-shadow: 0 0 1px rgb(0 0 0 / 60%);
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.125rem;
}

.nav-pills .nav-link {
    color: var(--bs-nav-pills-link-active-color);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--cl-active-text); 
    background-color: var(--cl-primary);
    border-radius: 0.125rem;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--cl-active-text); 
    background-color: var(--cl-primary);
}

.nav-link {
    font-weight: 500;
}

/*============================================
            BUTTON
===================================== */
.btn {
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-padding-y: 0.17rem;
    --bs-btn-line-height: 1.3;
    --bs-btn-border-radius: 0.175rem;
}

.cl-btn {
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    border: var(--bs-btn-border-width) solid var(--cl-gray-600);
}

.btn:hover {
    color: var(--bs-btn-color);
}

.btn-check:focus+.btn,
.btn:focus,
.btn:active {
    box-shadow: none;
}

.btn-check:active+.btn:focus,
.btn-check:checked+.btn:focus,
.btn.active:focus,
.btn.show:focus,
.btn:active:focus {
    box-shadow: none;
}

.cl-btn-primary, .btn-primary, .btn-sina-submit {
    --bs-btn-color: var(--cl-active-text); 
    --bs-btn-bg: var(--cl-primary);
    --bs-btn-border-color: var(--cl-primary-dark);
    /* --bs-btn-hover-color: var(--cl-text); */
    --bs-btn-hover-bg: var(--cl-primary-dark);
    --bs-btn-hover-border-color: var(--cl-primary-dark);
    --bs-btn-focus-shadow-rgb: 250, 9, 53; 
    --bs-btn-active-bg: var(--cl-primary-dark);
    --bs-btn-active-border-color: var(--cl-primary-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--cl-primary);
    --bs-btn-disabled-border-color: var(--cl-primary);
}

.btn-outline-info,
.btn-sina-title-add {
    --bs-btn-color: var(--cl-black);
    --bs-btn-bg: var(--cl-white);
    --bs-btn-border-color: var(--cl-primary);
    --bs-btn-hover-color: var(--cl-primary);
    --bs-btn-hover-bg: var(--cl-white);
    --bs-btn-hover-border-color: var(--cl-primary-dark);
    --bs-btn-focus-shadow-rgb: 250, 9, 53;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cl-primary-dark);
    --bs-btn-active-border-color: var(--cl-primary-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cl-primary);
    --bs-btn-disabled-border-color: var(--cl-primary);
}

.btn-outline-danger {
    --bs-btn-hover-color: var(--cl-white);
}

/*============================================
            CARD
===================================== */
.card {
    --bs-card-cap-padding-y: 0.35rem;
    --bs-card-bg: #fff;
}

.card-header {
    background-color: var(--cl-gray-50);
}


/*============================================
            TAB
===================================== */
.nav-link {
    color: var(--cl-text);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--cl-primary);
}


/*============================================
            INPUT
===================================== */
label, .cl-form-label {
    margin-bottom: 0;
    color: var(--cl-other);
    font-weight: 400;
}

.form-control, .cl-form-control {
    padding: 0.12rem 0.4rem;
    border-radius: .2rem;
    color: var(--cl-text);
    line-height: 1;
    height: 1.75rem;
    margin-bottom: 0.2rem;
}

.form-control:focus, .cl-form-control:focus, .select2-container--focus {
    background-color: var(--cl-white);
    border-color: var(--cl-primary-mid-transparent);
    box-shadow: 0 0 0 .25rem var(--cl-primary-transparent);
}

.form-control[type="file"], .cl-form-control[type="file"] {
    padding: 0.4rem;
}

.form-select, .cl-form-select {
    padding: 0.29rem 1.75rem 0.29rem 0.4rem;
    background-position: right 0.5rem center;
    border-radius: .2rem;
    line-height: 1;
    height: 1.75rem;
}

.form-check, .cl-form-check {
    display: inline-block;
}

input[role="switch"], .cl-form-check-input[role="switch"] {
    height: 1.2em;
}

input[type="checkbox"]:checked, input[role="switch"]:checked, .cl-form-check-input:checked {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary);
}

input[type="checkbox"]:focus, input[type="switch"]:focus, .cl-form-check-input:focus {
    border-color: var(--cl-primary-dark);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--cl-primary-transparent);
}

.form-select:focus, .cl-form-select:focus {
    border-color: var(--cl-primary-dark);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--cl-primary-transparent);
}

.form-check-label, .cl-form-check-label {
    color: var(--cl-gray-900);
}

.col-form-label.cl-form-label {
    padding: 0;
    display: flex;
    align-items: center;
}

.input-group .btn {
    z-index: 0;
}


/*============================================
            TABLE
===================================== */
.table {
    --bs-table-border-color: var(--cl-black);
}

.cl-table th,
.cl-table td {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
    color: var(--cl-text);
    background-clip: padding-box;
}

/*============================================
            MODAL
===================================== */
.modal {
    --bs-modal-padding: 0.75rem;
    --bs-modal-title-line-height: 1.2;
    --bs-modal-header-padding: 0.75rem;
    --bs-modal-footer-border-width: 0;
}

.modal-header {
    position: relative;
    background-color: var(--cl-primary);
}

.modal-header > .modal-title,
.modal-header > h6,
.modal-header > h5,
.modal-header > h4,
.modal-header > h3,
.modal-header > h2,
.modal-header > h1 {
    color: var(--cl-active-text);
}

.offcanvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}

.offcanvas-header,
.offcanvas-footer  {
    position: relative;
}

.modal-header .btn-close.cl-btn-close,
.modal-header button.close,
.btn-close {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 0.9rem;
    background-color: var(--cl-white);
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    opacity: 1;
    border: 1px solid var(--cl-gray-400);
    border-radius: 50%;
    box-shadow: var(--cl-box-shadow-sm-dark);
}

@media (max-width: 520px) {
    .modal-header .btn-close.cl-btn-close,
    .modal-header button.close,
    .btn-close {
        top: 100%;
        transform: translate(-115%, -100%);
    }
}

#cl-widget-offcanvas .btn-close,
.side_modal .btn-close,
.global-offcanvas .btn-close {
    top: 50%;
    left: 100%;
    transform: translate(calc(-100% - 0.75rem), -50%);
}

.modal-footer {
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5) var(--bs-modal-padding);
}

.modal-content {
    box-shadow: 0 2px 28px 2px rgba(0, 0, 0, 0.34);
}

/*============================================
            BADGE 
===================================== */
.badge {
    font-size: 90%;
}
.badge-primary {
    color: var(--cl-active-text);
    background-color: var(--cl-primary);
}


/*============================================
            OFFCANVAS 
===================================== */
.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-width: 290px;
    --bs-offcanvas-padding-x: 0.75rem;
    --bs-offcanvas-padding-y: 0.75rem;
    box-shadow: 0 0 18px -5px rgb(0 0 0 / 60%);
}

/*============================================
            ACCORDION
===================================== */
.accordion {
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-active-color: var(--cl-primary);
    --bs-accordion-active-bg: var(--cl-body);
}

.accordion-button {
    color: var(--cl-heading);
    font-size: 1.2rem;
    background-color: var(--cl-gray-100);
}

/*============================================
            PAGINATION
===================================== */
.pagination {
    --bs-pagination-color: var(--cl-primary);
    --bs-pagination-active-bg: var(--cl-primary);
    --bs-pagination-active-border-color: var(--cl-primary);
}

.active>.page-link, .page-link.active {
    color: var(--cl-active-text);
    background-color: var(--cl-primary);
    border-color: var(--cl-primary);
}


/*============================================
            ANIMATION
===================================== */
.fade {
    transition: opacity 0.3s ease-in-out;
}


/*============================================
            SELECT 2
===================================== */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px !important;
}

.select2-container .select2-selection--single {
    height: 22px !important;
    border-radius: 2px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cl-text) !important;
    line-height: 22px !important;
}


/*============================================
            BORDER
===================================== */
.border-primary {
    border-color: var(--cl-primary) !important;
}