:root {
    --ci-text-light: #ffffff;
    --ci-text-dark: #0f1724;
    --ci-primary-color: #4A90E2;
    --ci-primary-light-color: #E8F4FD;
    --ci-secondary-color: #5BA3F5;

    /* Corporate Identity Colors - Light Blue Theme */
    --corporate-primary-color: #4A90E2;           /* Main light blue */
    --corporate-primary-color-light: #E8F4FD;     /* Very light blue background */
    --corporate-primary-color-rgb: 74, 144, 226;  /* RGB for dynamic usage */

    /* Hover and interaction states */
    --corporate-primary-hover: #3A7BC8;           /* Darker blue for hover */
    --corporate-primary-active: #2A6BB0;          /* Even darker for active/pressed */
    --corporate-primary-focus: #5BA3F5;           /* Slightly lighter for focus */

    /* Derived colors with opacity variations */
    --corporate-primary-015: rgba(74, 144, 226, 0.15);
    --corporate-primary-025: rgba(74, 144, 226, 0.25);
    --corporate-primary-030: rgba(74, 144, 226, 0.30);
    --corporate-primary-040: rgba(74, 144, 226, 0.4);
    --corporate-primary-060: rgba(74, 144, 226, 0.6);
    --corporate-primary-080: rgba(74, 144, 226, 0.8);
    --corporate-primary-100: rgba(74, 144, 226, 1);
}

/*------------------------------------*\
  #ACCOUNT
\*------------------------------------*/

/*Login tile*/
.button__login {
    border-radius: 40px;
    text-align: center;
    width: 130px;
}

.button__login--color,
.button__login--color:hover {
    color: #fff;
    background-color: var(--corporate-primary-color);
}

/*Password recovery tile*/
.button__passwordrecovery {
    border-radius: 40px;
    text-align: center;
    width: auto;
}

.button__passwordrecovery--outline-color,
.button__passwordrecovery--outline-color:hover {
    border-color: var(--corporate-primary-color);
    color: var(--corporate-primary-color);
}

/*------------------------------------*\
  #DASHBOARDS
\*------------------------------------*/

/*Prediction*/
.prediction__icon--color {
    color: var(--corporate-primary-color);
}

/*Counting tiles*/
.icon-container__icon--bg-color {
    background: var(--corporate-primary-color-light);
}

.icon-container__icon--color {
    color: var(--corporate-primary-color);
}

/*Member validate tile*/
.button__validation-link {
    width: 100px;
}

.button__validation-link--color,
.button__validation-link--color:hover {
    border-color: var(--corporate-primary-color);
    color: var(--corporate-primary-color);
}

/*Member upload tile*/
.button__upload-link {
    width: 70px;
    border: none;
}

.button__upload-link--color,
.button__upload-link--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}

/*Reward system tile*/
.button__viewdetails {
    width: 110px;
}

.button__viewdetails--color,
.button__viewdetails--color:hover {
    border-color: var(--corporate-primary-color);
    color: var(--corporate-primary-color);
}

/*World Map*/
.worldMap__region:hover,
.worldMap__region--fill-color {
    fill: var(--corporate-primary-color);
}

/*Table row highlight*/
tbody.table-body-td tr:hover,
tbody.topflop-table-body tr:hover td:not([rowspan]),
.area-row-hover,
.product-row-hover,
.table-row-hover {
    color: #fff;
    background-color: var(--corporate-primary-color);
}

/*Top Ten Table*/
.topten-progress__bar--bg-color {
    background-color: var(--corporate-primary-color);
}

.topten-progress__bar--bg-color-light {
    background-color: #edbd82;
}


/*------------------------------------*\
  #TYPEAHEAD
\*------------------------------------*/
.typehead-title {
    font-size: 12pt;
    font-weight: 700;
    color: var(--corporate-primary-color);
}

.selectr-selected-item--bg-color {
    background: var(--corporate-primary-color-light);
}

.selectr-selected-item__text--color,
.selectr-selected-item__text--color:hover {
    text-decoration: none !important;
    color: #000 !important;
}

.selectr-selected-item__icon--color {
    color: var(--corporate-primary-color);
}

/*------------------------------------*\
  #GENERIC
\*------------------------------------*/
.ci__badge--style {
    margin: 0px !important;
    border-radius: 10rem;
    background-color: var(--ci-primary-light-color);
    color: var(--ci-primary-color);
}

/*------------------------------------*\
  #GENERIC
\*------------------------------------*/
.star-rating__icon--color {
    color: var(--corporate-primary-color);
}

.ci__icon--color {
    color: var(--ci-primary-color);
}

.hyperlink__ci--color {
    color: var(--corporate-primary-color)!important;
}

.border__ci--color {
    transition: border 0.1s ease;
}

    .border__ci--color:hover {
        border: 1px solid var(--corporate-primary-color);
        border-radius: 5px;
    }

/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/
/*Generic*/
.button__ci-outline {
    border-color: var(--corporate-primary-color);
    color: var(--corporate-primary-color);
}
.button__ci-outline:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}

.button__ci--color,
.button__ci--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}
.btn__ci--rounded {
    border-radius: 20px;
}

.btn__ci--primary-outline {
    border-color: var(--ci-primary-color);
    color: var(--ci-primary-color);
}
    .btn__ci--primary-outline:hover {
        background-color: var(--ci-primary-color);
        color: #fff;
    }

.btn__ci--primary,
.btn__ci--primary:hover {
    background-color: var(--ci-primary-color);
    color: #fff;
}

.button__ci--secondary,
.button__ci--secondary:hover {
    background-color: var(--ci-primary-color);
    color: #fff;
}


.button__ci-button-outline--color {
    color: var(--corporate-primary-color);
    border-color: var(--corporate-primary-color);
}

    .button__ci-button-outline--color:hover {
        background-color: var(--corporate-primary-color);
        color: #fff;
    }

.modal-footer__button--color,
.modal-footer__button--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}

.modal-footer__button-outline--color,
.modal-footer__button-outline--color:hover {
    color: var(--corporate-primary-color);
    border-color: var(--corporate-primary-color);
}

/*Custom pill button*/
.group-btn {
    text-align: center;
    width: 150px;
    border-radius: 20px;
    padding: 0px;
    font-size: .85em;
}

.group-btn--active--color,
.group-btn--active--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}

.group-btn--color,
.group-btn--color:hover {
    background-color: #E9ECEF;
    color: #868E96;
}

/*Filter section*/
.side-filter__button {
    border-radius: 20px;
}

.side-filter__button--color,
.side-filter__button--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}

.side-filter__button-outline--color,
.side-filter__button-outline--color:hover {
    color: var(--corporate-primary-color);
    border-color: var(--corporate-primary-color);
}

/*------------------------------------*\
  #ID Card
\*------------------------------------*/
.idcard__website-url--color {
    color: var(--corporate-primary-color);
}

.idcard-alert-container {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.idcard-alert-container--bg-color {
    color: var(--corporate-primary-color);
    background-color: var(--corporate-primary-color-light);
}

.idcard-alert-container__button--color,
.idcard-alert-container__button--color:hover {
    background-color: var(--corporate-primary-color);
    color: #fff;
}
/*------------------------------------*\
  #CONTACT PERSON
\*------------------------------------*/
.contactperson__contactdata-link--color {
    color: var(--corporate-primary-color);
}

/*------------------------------------*\
  #COMPANY STRUCTURE
\*------------------------------------*/

.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: var(--corporate-primary-color) !important;
    border-color: var(--corporate-primary-color) !important;
}

.headquarter-container__icon {
    font-size: 1.5rem;
}

.headquarter-container__icon--color {
    color: var(--corporate-primary-color);
}

.button__show-world-map--color,
.button__show-world-map--color:hover {
    color: var(--corporate-primary-color);
    border-color: var(--corporate-primary-color);
}

/*------------------------------------*\
  #MANUAL DATA ENTRY 
\*------------------------------------*/
table.dataTable tbody tr.selected {
    color: #fff;
    background-color: var(--corporate-primary-color) !important;
}

table.child-table tbody tr.selected {
    color: #fff;
    background-color: var(--corporate-primary-color) !important;
}