body, html {
    font-size: 13px !important;
    font-family: Inter,Kanit, sans-serif;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: lightgray;
}

*::-webkit-scrollbar-corner {
    background-color: transparent;
}

.app-content {
    padding-top:unset;
}

/*------------Start : Select2 Extension--------------*/
.text-right {
    text-align: right;
}

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


.bg-lighten {
    background-color: rgba(245,248,250,.5);
}

.select2-selection {
    min-height: 40px;
}

/*------------Start : spinner for kt_progress_mask--------------*/
.spinner-border {
    --bs-spinner-border-width: 0.5em;
}
/*------------End : spinner for kt_progress_mask--------------*/

/*------------Start : Select2 Extension--------------*/
.select2-selection {
    min-height: 40px;
}
/*------------End : Select2 Extension-----------------*/

/*------------Start : checkbox extension--------------*/
.form-check-custom.form-check-info .form-check-input:checked {
    background-color: var(--kt-info);
}

.form-check-custom.form-check-secondary .form-check-input:checked {
    background-color: var(--kt-secondary);
}

.form-check-custom.form-check-dark .form-check-input:checked {
    background-color: var(--bs-dark);
}
/*------------End : checkbox extension--------------*/

/*------------Start : checkbox extension--------------*/
.form-control {
    font-weight:normal;
}

/*------------Start : Element Border--------------*/
.bl {
    border-left: 1px solid #ccc !important;
}

.br {
    border-right: 1px solid #ccc !important;
}

.bt {
    border-top: 1px solid #ccc !important;
}

.bb {
    border-bottom: 1px solid #ccc !important;
}

.ba {
    border: 1px solid #ccc !important;
}
/*------------End : Element Border--------------*/

/*------------Start : Sidebar Decoration--------------*/
.app-sidebar-menu-secondary.menu .menu-link .menu-title {
    font-size: 1rem;
    font-weight: 500;
}

/*------------End : Sidebar Decoration--------------*/

.app-sidebar-menu-primary.menu > .menu-item .menu-link .menu-title {
    font-size: 1rem;
    font-weight: normal;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item > .menu-link .menu-title {
    font-size: 1rem;
    font-weight: 500;
}

/*--------Filter Accordion------*/
#filter-accordion .accordion-button,
#filter-accordion .accordion-button:focus {
    border-color: unset;
}

    #filter-accordion .accordion-button:not(.collapsed) {
        background-color: unset;
        box-shadow: none;
    }

#filter-accordion .accordion-button {
    padding: 0;
}

/*--------Display Accordion------*/
#display-accordion .accordion-button,
#display-accordion .accordion-button:focus {
    border-color: unset;
}

    #display-accordion .accordion-button:not(.collapsed) {
        background-color: unset;
        box-shadow: none;
    }

#display-accordion .accordion-button {
    padding: 0;
}

/*-----------For Face API-------------*/
.face-thumbnail {
    background-size: cover;
    background-position: center;
}

/*------------Form check-------------*/
.form-check.form-check-info .form-check-input:checked {
    background-color: var(--bs-info);
}

/* Text display */
.no-wrap {
    white-space:nowrap !important;
}

/*-------------Tab Style--------------*/
.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link.active, 
.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link:hover:not(.disabled), 
.nav-line-tabs.nav-line-tabs-2x .nav-item.show .nav-link {
    border-bottom-width: 4px;
}

.text-color-unset {
    color: var(--bs-gray-800);
}


/*-----------SCV Progress Stepper-----------*/
.scv-block {
    display: flex;
    background: var(--bs-gray-300);
    border-radius: 50%;
    font-weight: bold;
    color: var(--bs-text-gray-400);
    overflow-wrap: break-word;
    border: 5px solid var(--bs-secondary);
}

.scv-wrapper.flex-column .scv-line {
    width: 5px;
    height: 100%;
}

.scv-wrapper.flex-row .scv-line {
    width: 100%;
    height: 5px;
}

.scv-line-wrapper {
    flex: 1 0 auto;
}

.scv-line {
    background: var(--bs-secondary);
}

.scv-line-wrapper, .scv-block, .scv-line {
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.075) !important;
}

.scv-block.active {
    color: var(--bs-light);
    border-color: var(--bs-primary-light);
    background: var(--bs-primary);
}

.scv-line-wrapper.active .scv-line {
    background: var(--bs-primary);
}

.scv-block.problem {
    color: var(--bs-light);
    border-color: var(--bs-warning-light);
    background: var(--bs-danger);
}

.scv-line-wrapper.problem .scv-line {
    background: var(--bs-danger);
}