/*===========================================================================================================================*/
/*===========================================================================================================================*/
/*===========================================================================================================================*/
:root {
    --background-color: #ff0000;
    --button-color: #0170c4;
    --heading-color: #ff0000;
    --text-light: #ebf3f7;
    --text-medium: #3f405b;
    --text-dark: #0b3654;
    --font-family: "Times New Roman", Times, serif;
    /* New: Submit Button */
    --submit-button-bg: #54cb5b;
    --submit-button-bg-dark: #29670a;
    --submit-button-bg-light: #54cb5b;
    --submit-button-text: #fff;
    --submit-button-text-dark: #00315e;
    --submit-button-text-light: #ebf3f7;
    /* New: Add Button */
    --add-button-bg: #54cb5b;
    --add-button-bg-dark: #29670a;
    --add-button-hover-dark: #dadee6;
    --add-button-bg-light: #fff;
    --add-button-text: #B62546;
    --add-button-text-dark: #00315e;
    --add-button-text-light: #fff;
    /* New: Cancel Button */
    --cancel-button-bg: #ff0000;
    --cancel-button-bg-dark: #B30000;
    --cancel-button-bg-light: #ca6767;
    --cancel-button-text: #fff;
    --cancel-button-text-dark: #00315e;
    --cancel-button-text-light: #ebf3f7;
    /* New: Reset Button */
    --reset-button-bg: #607d8b38;
    --reset-button-bg-dark: #3643af;
    --reset-button-bg-light: #3f405b;
    --reset-button-text: #ebf3f7;
    --reset-button-text-dark: #00315e;
    --reset-button-text-light: #ebf3f7;
    /* New: DropdownList */
    --ddl-ddl-bg: #ebf3f7;
    --ddl-ddl-bg-dark: #607d8b38;
    --ddl-ddl-bg-light: #fff;
    --ddl-ddl-text: #3f405b;
    --ddl-ddl-text-dark: #000;
    --ddl-ddl-text-light: #29670a;
    --ddl-ddl-border: #29670a;
    --ddl-ddl-radius: 5px 5px 5px 5px;
    --ddl-ddl-width: 250px;
    /* New: TextBox */
    --text-box-bg: #ebf3f7;
    --text-box-bg-dark: #607d8b38;
    --text-box-bg-light: #fff;
    --text-box-height: 35px;
    --text-box-text: #3f405b;
    --text-box-text-dark: #000;
    --text-box-text-light: #29670a;
    --text-box-border: #607d8b38;
    --text-box-radius: 5px 5px 5px 5px;
    --text-box-width: 250px;
    /* New: FormHeader - entry */
    --form-backgrond-header: #e9ecef;
    --form-backgrond-footer: #e9ecef;
    --font-size-header: 1.5em;
    --font-size-footer: 1.1em;
    --form-header-height: 50px;
    --form-header-color: #fff;
    /*New Card*/
    --background-color-body: #00315e;
    --background-color-card: #f9f9f9;
    --max-width-entry-card: 100%;
    --max-height-entry-card: 500px;
    --max-width-list-card: 100%;
    /*New Data Grid Table*/
    --background-color-grid: #fff;
    --background-color-header: #424da5;
    --color: #ebf3f7;
    /*New List Headere*/
    --lis-header-width: auto;
    --list-font-size-header: 1.6em;
    --bg-white: #fff;
    /*error message*/
    /*FOR h3*/
    --color-h3: #00315e;
    --background-color-h3: #00315e;
    --background-color-login: #0078d7;
}

/* classes */

.h3header {
    color: var(--color-h3);
}

.error-message {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    color: #dc3545 !important;
}

.bg-primary {
    background-color: var(--background-color);
    color: var(--text-light);
}

.btn-primary {
    background-color: var(--button-color);
    color: var(--text-light);
    border: none;
    padding: 8px 14px;
}

.text-heading {
    color: var(--heading-color);
}

.text-light {
    color: var(--text-light);
}

.text-dark {
    color: var(--text-dark);
}

.btn-add-new {
    background-color: var(--add-button-bg-light);
    color: var(--add-button-text-dark);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s ease;
    /*/*font-family: var(--font-family);*/*/
    float: right;
    margin: 7px;
}

    .btn-add-new:hover {
        color: var(--submit-button-text-dark);
        /*background-color: var(--add-button-bg-dark);*/
        background: var(--add-button-hover-dark);
    }

.btn-submit-new {
    background-color: var(--submit-button-bg-dark);
    color: var(--submit-button-text-light);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s ease;
    /*font-family: var(--font-family);*/
}

    .btn-submit-new:hover {
        color: var(--submit-button-text-dark);
        background-color: var(--submit-button-bg-light);
    }

.btn-cancel-new {
    background-color: var(--cancel-button-bg-dark);
    color: var(--cancel-button-text-light);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s ease;
    /*font-family: var(--font-family);*/
}

    .btn-cancel-new:hover {
        color: var(--cancel-button-text-dark);
        background-color: var(--cancel-button-bg-light);
    }

.btn-reset-new {
    background-color: var(--reset-button-bg-dark);
    color: var(--reset-button-text-light);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s ease;
    /*font-family: var(--font-family);*/
}

    .btn-reset-new:hover {
        color: var(--reset-button-text-light);
        background-color: var(--reset-button-bg-light);
    }

.drop-down-list-new {
    background-color: var(--ddl-ddl-bg-light);
    color: var(--ddl-ddl-text-light);
    padding: 2px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: var(--ddl-ddl-border);
    border-radius: var(--ddl-ddl-radius);
    border: var(--text-box-border) 1px solid;
    border-radius: var(--text-box-radius);
    height: var(--text-box-height);
    font-size: medium;
    width: var(--ddl-ddl-width);
    float:right;
    /*font-family: var(--font-family);*/
}

    .drop-down-list-new:hover {
        color: var(--ddl-ddl-text-dark);
        background-color: var(--ddl-ddl-bg-dark);
    }

.text-box-new {
    background-color: var(--text-box-bg-light);
    color: var(--text-box-text-light);
    padding: 2px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: var(--text-box-border) 1px solid;
    border-radius: var(--text-box-radius);
    height: var(--text-box-height);
    font-size: medium;
    font-family: Calibri;
    width: var(--text-box-width);
    float:right;
    /*font-family: var(--font-family);*/
}

    .text-box-new:hover {
        color: var(--text-box-text-dark);
        background-color: var(--text-box-bg-dark);
    }

.label-new {
    width: 200px;
    /*font-family: var(--font-family);*/
}

.form-header-new {
    /*font-family: var(--font-family);*/
    font-size: var(--font-size-header);
    text-align: center;
    font-weight: bold;
    color: var(--form-header-color);
    height: var(--form-header-height);
    background-color: var(--form-backgrond-header);
    margin: auto !important;
    padding: 5px !important;
}

.form-footer-new {
    /*font-family: var(--font-family);*/
    font-size: var(--font-size-footer);
    text-align: center;
    font-weight: bold;
    color: #fff;
    height: var(--form-header-height);
    background-color: var(--form-backgrond-footer);
}

.card-header-new {
    background-color: var(--background-color-card);
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
}

.card-body-list-new {
    background-color: var(--background-color-body);
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 10px 0px 10px 0px;
    max-width: var(--max-width-list-card);
    padding: 5px;
}

.card-new-entry {
    background-color: var(--background-color-card);
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0px 0px 0px 0px auto;
    max-width: var(--max-width-entry-card);
    padding-top: 0px;
    max-height: var(--max-height-entry-card) !important;
    overflow-x: auto;
    overflow-y: auto;
}

.button-group {
    padding-top: 6px;
}

.data-grid-table-header {
    background-color: var(--background-color-header);
    color: var(--text-dark);
    font-size: 1.1em;
    /*font-family: var(--font-family);*/
}

.data-grid-table-data {
    background-color: var(--background-color-grid);
    color: var(--text-dark);
    /*font-family: var(--font-family);*/
}

.data-table-new {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    color: var(--text-light);
}

.list-header-new {
    width: var(--lis-header-width);
    float: left;
    color: var(--text-dark);
    font-size: var(--list-font-size-header);
    /*font-family: var(--font-family);*/
    font-weight: 600;
    margin: 5px;
    color: var(--text-light);
}

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

.page-item.active .page-link {
    background-color: #16468c;
    border-color: #203b8a;
}

.modal-xxl {
    max-width: 95%; /* or 100% */
}


/*===========================================================================================================================*/
/*===========================================================================================================================*/
/*===========================================================================================================================*/

section#breadcrumb {
    background: #607d8b38;
    margin-bottom: 2px;
}

.breadcrumb__text {
    margin-bottom: 4px;
    text-align: right;
    padding: 5px;
    border-radius: 6px;
    color: #fff !important;
}

    .breadcrumb__text .breadcrumb__option span {
        font-size: 16px;
        color: #00315e;
        font-weight: 500;
    }

h3 {
    font-size: 20px;
    color: #0c1c44;
    margin-bottom: 15px;
}

p {
    font-size: 15px;
    color: #444e64;
    line-height: 1.6;
}


.bg-light {
    --bs-bg-opacity: 1;
    background-color: #fff !important;
    padding: 20px;
}


#select2-eiCircleMultiple-results {
    position: fixed !important;
    background: var(--bg-white);
    z-index: 999999 !important;
    display: flow-root !important;
    overflow-y: scroll !important;
    height: fit-content;
}

.modal {
    z-index: 1050;
}

.select2-container--open {
    z-index: 9999 !important;
    overflow-y: scroll;
}
.btn-login, .btn-login:hover {
    width: 100%;
    padding: 10px;
    background: var(--background-color-login);
    color: var(--text-light);
    border: none;
    border-radius: 6px;
}