:root {
    /*color*/
    --color-branding: #1363B9;
    --color-white: #FFFFFF;
    --color-background: #F6F9FF;
    --color-placeholder: #B9C0C7;
    --color-text-gray: #99A1A9;
    --color-text-dark: #010B1D;
    --color-border-input: #CED4DA;
    --color-text-menu: #010B1D;
    --color-line: #E2E2E2;
    --color-green: #2B982B;
    --color-red: #FF4141;
    --color-blue-600: #00B6F0;
    --color-pink: #FFE4E6;
    --color-orange: #EB8E51;
    --color-background-dark: #3E3E3E;
    --color-yellow: #FA9704;
    --color-background-gray: #F2F2F2;
    --color-background-warning: #FFF6EA;
    --color-brown: #BF2600;
    --color-blue: #46B2EF;
    --color-purple: #A93790;
    --color-blue-300: #F4FAFD;
    --color-blue-500: #E1F1FA;
    --color-gray-100: #DDDDDD;
    --color-gray-50: #F0F0F0;
    --color-orange-200: #FBE8DC;
    --color-gray-25: #F9F9F9;
    --color-pink-100: #FFF5F5;
    --color-disable: #F1F1F4;
    --color-brading-blue: #06527A;
    /*height*/
    --max-width-page: 1440px;
    /*text size*/
    --text-size-medium: 14px;
    --text-size-small: 13px;
}

.table-list {
    /*height: 76vh;*/
    min-height: 450px;
    -ms-overflow-style: none;
    position: relative;
    overflow-x: hidden;
}

    .table-list::-webkit-scrollbar {
        display: none;
    }

.custom-table-list {
    height: 67vh;
    -ms-overflow-style: none;
    position: relative;
    overflow-x: hidden;
}

    .custom-table-list::-webkit-scrollbar {
        display: none;
    }

.table-list-don-vi {
    height: 500px;
    -ms-overflow-style: none;
    position: relative;
    overflow-x: hidden;
}


/*Custom table*/
.table > .custom-table-thead {
    border-top: 1px dashed var(--color-line, "#E2E2E2");
    border-bottom: 1px dashed var(--color-line, "#E2E2E2");
    background: var(--color-background, "#F6F9FF");
}

.custom-color-td {
    background: var(--color-background, #F6F9FF) !important;
}

.table > .custom-table-tbody {
    border-bottom: 1px solid var(--color-line, "#E2E2E2") !important;
}


.custom-search-group {
    border: 1px solid #C1C7D0;
    border-radius: 5px;
    position: relative;
}

    .custom-search-group .select2.select2-container {
        border-right: 1px solid var(--color-border-input, "#CED4DA");
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 130px !important;
    }

    .custom-search-group .custom-input-group {
        padding: 5px 26px 6px 8px;
        border: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

.custom-upload-avatar {
    border-radius: 5px;
    border: 1px dashed var(--color-branding, #1363B9);
    background: #F5FBFF;
    width: 165px;
    height: 190px;
}

.custom-upload-file {
    width: 130px;
    height: 32px;
    border-radius: 5px;
    border: 1px dashed var(--color-border-input, "#CED4DA");
    background: var(--color-white, "#FFFFFF");
}



.custom-btn {
    padding: 5px 14px;
    border-radius: 5px;
    min-width: 80px;
    height: 32px;
    font-size: var(--text-size-medium);
}

.custom-btn-cancel {
    border: 1px solid #F1F5FD;
    color: var(--color-branding);
    background: #F1F5FD;
}

    .custom-btn-cancel:hover {
        background: #c2d3fb;
    }


.custom-btn-save {
    border: 1px solid var(--color-branding, "#FDF1F1");
    color: var(--color-white, "#ffffff");
    background: var(--color-branding, "#FDF1F1");
}

    .custom-btn-save:hover {
        background: #0038bd;
    }


.custom-btn-delete {
    border: 1px solid #FDF1F1;
    color: #F1390B;
    background: #FDF1F1;
}

    .custom-btn-delete:hover {
        border: 1px solid #F1390B;
        background: #F1390B;
        color: #FDF1F1;
    }

.custom-btn-urge {
    border: 1px solid #46B2EF;
    color: white;
    background: #46B2EF;
}

    .custom-btn-urge:hover {
        border: 1px solid #1363B9;
        background: #1363B9;
        color: white;
    }


.custom-btn-search-user {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    border: 1px solid var(--color-branding, "#1363B9");
    background: var(--color-branding, "#1363B9");
}

    .custom-btn-search-user:hover {
        background: #0038bd;
    }

.custom-btn-delete-user {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    border: 1px solid #BF2600;
    background: #BF2600;
}

.table-responsive {
    display: inline-table;
}

.custom-btn-icon {
    border: none;
    background-color: transparent;
}

/*Custom form control*/
.form-label {
 
    font-size: var(--text-size-medium, "14px");
    color: var(--color-text-dark, "#010B1D");
     
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 500;
}

.form-control {
    padding: 5px 7px;
    border-radius: 5px;
    border: 1px solid var(--color-border-input, "#CED4DA");
    background: var(--color-white, "#FFFFFF");
    font-size: var(--text-size-medium, "14px");
    color: var(--color-text-dark, "#010B1D");
}

.fv-row {
    margin-bottom: 1.25rem;
}


/*avatar*/
.upload-block {
    gap: 4px;
    height: 32px;
    width: 130px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px dashed #CED4DA;
    border-radius: 5px;
}

.custom-upload-block {
    height: 100px;
    border: 1px dashed var(--color-branding, "#1363B9");
    border-radius: 10px;
}

.custom-button-remove-image {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 16px;
    right: 16px;
    height: 28px;
    width: 28px;
    border: 1px dashed var(--color-brown, "#BF2600");
    border-radius: 5px;
    cursor: pointer;
}

.custom-input-check-image {
    position: absolute;
    top: 14px;
    left: 20px;
    width: 15px;
    height: 25px;
    z-index: 10;
}

.custom-avatar-block {
    border: 1px dashed var(--color-branding, "#1363B9");
    border-radius: 10px;
}

.custom-block-btn-avatar {
    position: absolute;
    top: 8px;
    right: 8px;
}

.custom-button-edit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-branding, "#1363B9");
    border-radius: 5px;
    cursor: pointer;
    height: 32px;
    width: 32px;
}

.custom-button-remove-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-brown, "#BF2600");
    border-radius: 5px;
    cursor: pointer;
    height: 32px;
    width: 32px;
}

/*Custom button modal delete*/
.custom-btn-modal-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    color: var(--color-text-dark);
    height: 32px;
    min-width: 75px;
}

.custom-btn-modal-delete_cancel {
    background-color: #F2F2F2;
}

.custom-btn-modal-delete_confirm {
    background-color: #E63F65;
    color: var(--color-white);
}

/*Popup viewer pdf*/
@media (min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1)
    }

    .modal-dialog {
        max-width: var(--bs-modal-width) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .modal-sm {
        --bs-modal-width: 300px
    }
}

/*Phan trang*/

.pagination-separated .page-item .page-link {
    margin-left: 0.35rem;
    border-radius: var(--vz-border-radius);
}

.pagination-rounded .page-link {
    border-radius: 30px !important;
    margin: 0 3px !important;
    border: none;
    min-width: 32px;
    min-height: 32px;
    text-align: center;
}

.pagination-rounded.pagination-sm .page-link {
    min-width: 25px;
    min-height: 25px;
}

.page-item.active .page-link {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--color-brading-blue);
}