@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

b {font-weight: 600;}

.containerWrapper {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
}

.containerSidebar{
    background: #293042;
    direction: ltr;
    max-width: 260px;
    min-width: 260px;
    height: 100vh !important;
    overflow-y: auto; 
    scrollbar-width: thin;
    transition: margin-left 0.35s ease-in-out;
}

.moduleMainMenu, .moduleParent {font-size: 11pt;}
.moduleMainMenu, .moduleParent, .moduleItem {color: #e9ecef; text-decoration: none;}
    .moduleMainMenu, .moduleParent:hover, .moduleItem:hover {color: #e9ecef; text-decoration: none;}
    .moduleMainMenu, .moduleParent:focus, .moduleItem:focus {color: #e9ecef; text-decoration: none;}
    .moduleMainMenu i, .moduleParent i {margin-right: 5px;}
    
    .moduleParent.collapsed:after {
        font-family: "Bootstrap-icons"; 
        content: "\F229"; 
        right: 10px;
        position: absolute;
    }
    .moduleParent:not(.collapsed):after {
        font-family: "Bootstrap-icons"; 
        content: "\F235"; 
        right: 10px;
        position: absolute;
    }

.moduleItem {padding: 4px 16px; margin-left: 25px; font-size: 10pt;}
.moduleItem a {color: #e9ecef; text-decoration: none;}
.moduleItem.active a {color: #568fed;}



.transitionDisable {
    transition: none !important;
}

.containerSidebar.collapsed{
    margin-left: -260px;
}

.containerMain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    /*transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;*/
    width: 100%;
    overflow-y: auto; 
    scrollbar-width: thin;
    height: 100vh;
    color: #495057;
    font-size: 1rem;
}

#mainContentWrapper {
    margin-top: 10px;
    padding: 20px;
}

.pageTitle {font-size: 1.3rem; color: #495057; font-weight: 600; margin-bottom: 10px;}
.pageSubTitle {font-size: 1rem; color: #495057; margin-bottom: 10px;}

.pageTab {background-color: white; margin-bottom: 15px; box-shadow: 0 0 .875rem 0 rgba(41,48,66,.05);}
.pageTab > .nav-item > .nav-link.active {background-color: transparent; color: inherit; border-bottom: 3px solid #0a58ca; border-radius: 0;}
    
.card {
    box-shadow: 0 0 .875rem 0 rgba(41,48,66,.05);
    margin-bottom: 24px;
    border-color: #dee6ed;
}

.card-header {background-color: transparent; border-bottom: none; font-weight: 600; font-size: 1.1rem;}

.form-field {margin-bottom: 20px;}
.form-field label {font-weight: 400;}
label.required:after {content: "*"; color: #d9534f;}

.table {color: #424242; width: 100% !important;}
.table thead tr th, .table tbody tr td {border-color: #E0E0E0 !important;}
.table thead {background-color: #d9e6fb;}
.table tbody {}

.pageErrorMessage {padding: 10px;}

.ts-wrapper {padding-top: 1px; padding-bottom: 1px; padding-left: 0px; cursor: pointer;}
    .ts-wrapper.input-active {padding-top: 0px; padding-bottom: 0px;}
.ts-control {border: none;}


#loading {
    display: none;
}

#loadingContent {
    position: fixed;
    width: 70px;
    height: 70px;
    z-index: 9900;
    background: white;
    top: calc(40% - 40px);
    left: calc(50% - 45px);
    border-radius: 3px;
}

#loadingSection {
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: calc(50% - 1.5rem);
    top: 10px;
}

#loadingMask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.7;
    z-index: 9800;
}

#dialogInfoIcon {
    font-size: 2rem;
}


.select2-container--bootstrap-5.select2-container--disabled .select2-selection, 
.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    cursor: auto;
}

select + .select2-container--bootstrap-5 {
    z-index: 0;
}

/* When display md or smaller */
@media (max-width: 767.98px) {
    .btn {margin-bottom: 2px;}
}

/* When display sm or smaller */
@media (max-width: 576px) {
    #dialogInfoBody, #dialogConfirmBody {text-align: center;}
}