/**
Adding variables so that in the future, one line is changed instead of all lines with colors.
As you can see, this file reuses the same color code multiple times.
**/

:root{
    /* Brand system (semantic) */
    --gnl-brand-primary: #243746;        /* main brand surface + primary actions (header, sidebar, primary buttons or button-like components, active states, highlights, wizard step, pagination active, tabs active, list-group selected, navigation left border, steppers, alerts info */
    --gnl-brand-primary-hover: #3a4b59;  /* Hover/focus/active background for contained buttons, file upload hover */
    --gnl-brand-on-primary: #ffffff;     /* text/icons on primary surfaces (header and footer) */

    --gnl-footer-bg: #64717c;            /* footer background */

    --gnl-link: #003b6a;                 /* link color */
    --gnl-link-hover: #003b6a;           /* link hover (could differ later) */
    --gnl-focus-bg: #e6ecf0;             /* focus highlight background */
    --gnl-navbar-link_active:#fff;       /* undeline color to highlight active link*/

}


/**
Color styles coming from commonLayout.css
**/
.left_col{
    background-color: var(--gnl-brand-primary)!important;
}
.wizard_horizontal .step_no, .wizard_horizontal ul.wizard_steps li a.selected:before {
    background: var(--gnl-brand-primary);
    color: var(--gnl-brand-on-primary);
}


#navbar{
    background-color: var(--gnl-brand-primary)!important;
}

.file-upload-btn {
    color: var(--gnl-brand-on-primary)!important;
    background: var(--gnl-brand-primary)!important;
}

.file-upload-btn:hover {
    background: var(--gnl-brand-primary-hover)!important;
    color: var(--gnl-brand-on-primary)!important;
}

/*.btn-primary{*/
/*    background-color: var(--gnl-brand-primary)!important;*/
/*    border-color: var(--gnl-brand-primary)!important;*/
/*}*/

.modal-body .nav-link{
    color: var(--gnl-link)!important;
}

.modal-body .nav-link:hover{
    color: var(--gnl-link-hover) !important;
}


.active .page-link{
    background-color: var(--gnl-link)!important;
    border-color: var(--gnl-link)!important;
}

.active .page-link{
    color: var(--gnl-brand-on-primary)!important;
}

.page-link{
    color: var(--gnl-link) !important;
}

.text-primary{
    color: var(--gnl-brand-primary)!important;
}

/**
 * Colors
 */
#header,
.gnl-header {
    background: var(--gnl-brand-primary);
}
#footer,
.gnl-site-footer {
    background: var(--gnl-footer-bg);
}
a {
    color: var(--gnl-link);
}
a:hover {
    color: var(--gnl-link);
}
.gnl-link {
    color: var(--gnl-link);
}
.gnl-link:hover {
    color: var(--gnl-link);
}
a.gnl-link:focus,
a.gnl-link:hover {
    color: var(--gnl-link);
    background-color: var(--gnl-focus-bg);
}
.gnl-header-1,
.gnl-header-2,
.gnl-header-3,
.gnl-header-4,
.gnl-header-5,
.gnl-header-6,
.gnl-list-group__primary-text {
    color: var(--gnl-brand-primary);
}

h1,
h2,
h3,
h4,
h5,
h6{
    color: var(--gnl-brand-primary);
}
.gnl-icon--help {
    color: var(--gnl-brand-primary);
}
/*TODO: Question 2 - #spinner-front, #spinner-back are in commonLayout with color white and black*/
.gnl-icon--spinner,
.gnl-icon--spinner--small,
.gnl-icon--spinner-button {
    color: var(--gnl-brand-primary);
}
.gnl-icon--visibility {
    color: var(--gnl-brand-primary);
}
.gnl-avatar--icon--blue {
    color: var(--gnl-brand-primary);
}
.gnl-button--back,
.gnl-button--link,
.gnl-button--next {
    color: var(--gnl-brand-primary);
}
.active.gnl-button--back,
.active.gnl-button--next,
.gnl-button--back:active,
.gnl-button--link.active,
.gnl-button--link:active,
.gnl-button--next:active {
    color: var(--gnl-brand-primary);
}
.gnl-button--outlined.active {
    color: var(--gnl-brand-primary);
}
.gnl-button--contained {
    background: var(--gnl-brand-primary);
}
.gnl-button--contained:not(:disabled):not(.disabled).hover,
.gnl-button--contained:not(:disabled):not(.disabled):hover {
    background: var( --gnl-brand-primary-hover);
}
.gnl-button--contained:not(:disabled):not(.disabled).focus,
.gnl-button--contained:not(:disabled):not(.disabled):focus {
    background: var( --gnl-brand-primary-hover);
}
.gnl-button--contained.active,
.gnl-button--contained:active {
    background: var( --gnl-brand-primary-hover);
}
.gnl-button--back.active,
.gnl-button--back:active {
    color: var(--gnl-brand-primary);
}
.gnl-button--next.active,
.gnl-button--next:active {
    color: var(--gnl-brand-primary);
}
.gnl-button--function-copy::before,
.gnl-button--function-document::before,
.gnl-button--function-print::before,
.gnl-button--function-receipt::before,
.gnl-button--function-save::before,
.gnl-button--function-thumb-down::before,
.gnl-button--function-thumb-up::before {
    color: var(--gnl-brand-primary);
}
.co-pagination .co-page-item .co-page-link {
    color: var( --gnl-brand-primary-hover);
}
.co-pagination .co-page-item .co-page-link:hover {
    background-color: var(--gnl-brand-primary);
    border-color: var(--gnl-brand-primary);
}
.co-pagination .co-page-item .co-page-link.co-page-link--active {
    background: var(--gnl-brand-primary);
}
.gnl-tabs.nav-pills .nav-link.active {
    color: var(--gnl-brand-primary);
    border-bottom-color: var(--gnl-brand-primary);
}
.gnl-tabs--responsive.nav-pills .nav-link.active {
    color: var(--gnl-brand-primary);
    border-bottom-color: var(--gnl-brand-primary);
}
@media (min-width:840px) {
    .gnl-tabs--responsive.nav-pills .nav-link.active {
        border-left: 4px solid var(--gnl-brand-primary);
    }
}
.gnl-card--info a.gnl-card__footer,
.gnl-card--info-box a.gnl-card__footer {
    color: var(--gnl-brand-primary);
}
.gnl-card--info button.gnl-card__footer,
.gnl-card--info-box button.gnl-card__footer {
    color: var(--gnl-brand-primary);
}
.gnl-color-theme--brand-blue {
    background-color: var(--gnl-brand-primary);
}
.gnl-alert--info {
    background-color: var(--gnl-brand-primary);
}
.gnl-alert--callout-info {
    color: #3b4148;
    background-color: #f1f3f4;
}
.gnl-alert--warning {
    color: #000;
}
.gnl-color-theme--blue-light-brand {
    color: var(--gnl-brand-primary);
}
a.gnl-color-theme--blue-light-brand:hover {
    color: var(--gnl-brand-primary);
}
.gnl-color-theme--fg-blue {
    color: var(--gnl-brand-primary);
}
a.gnl-color-theme--fg-blue:hover {
    color: var(--gnl-brand-primary);
}
.gnl-color-theme--bg-blue {
    background: var(--gnl-brand-primary);
}
.gnl-color-theme--blue-on-white {
    color: var(--gnl-brand-primary);
}
.gnl-color-theme--blue-on-white.active,
.gnl-color-theme--blue-on-white:active,
.gnl-color-theme--blue-on-white:not(:disabled):not(.disabled).focus,
.gnl-color-theme--blue-on-white:not(:disabled):not(.disabled).hover,
.gnl-color-theme--blue-on-white:not(:disabled):not(.disabled):focus,
.gnl-color-theme--blue-on-white:not(:disabled):not(.disabled):hover {
    color: var(--gnl-brand-primary);
}
.gnl-color-text-blue-dark {
    color: var( --gnl-brand-primary-hover);
}
.gnl-color-text-brand-blue {
    color: var(--gnl-brand-primary);
}
.gnl-color-bg-blue-dark {
    background-color: var( --gnl-brand-primary-hover);
}
.gnl-color-bg-brand-blue {
    background-color: var(--gnl-brand-primary);;
}
.gnl-expansion-panel__icon {
    color: var(--gnl-brand-primary);
}
.gnl-expansion-panel__button-text {
    color: var(--gnl-brand-primary);
}
.gnl-form-check__input.checked+.gnl-form-check__label::before,
.gnl-form-check__input:checked+.gnl-form-check__label::before {
    color: var(--gnl-brand-primary);
}
.gnl-form-radio__input.checked+.gnl-form-radio__label::before,
.gnl-form-radio__input:checked+.gnl-form-radio__label::before {
    color: var(--gnl-brand-primary);
}
.gnl-file__input--masked.focus+label .gnl-file__top,
.gnl-file__input--masked:focus+label .gnl-file__top {
    color: var( --gnl-brand-primary-hover);
}
.gnl-file__input--masked.focus+label .gnl-file__name,
.gnl-file__input--masked:focus+label .gnl-file__name {
    background-color: var( --gnl-brand-primary-hover);
}
.gnl-file label:active .gnl-file__top,
.gnl-file label:hover .gnl-file__top {
    color: var( --gnl-brand-primary-hover);
}
.gnl-file label:active .gnl-file__name,
.gnl-file label:hover .gnl-file__name {
    background-color: var( --gnl-brand-primary-hover);
}
.gnl-file__top {
    color: var(--gnl-brand-primary);
}
.gnl-file__name {
    background-color: var(--gnl-brand-primary);
}
a.gnl-list-group__item.active {
    color: var(--gnl-brand-primary);
}
button.gnl-list-group__item.active {
    color: var(--gnl-brand-primary);
}
.gnl-list-group--selection input[type=radio]:checked+.gnl-list-group__item {
    color: var(--gnl-brand-primary);
}
.gnl-list-group--selection .gnl-list-group__item.active,
.gnl-list-group--selection .gnl-list-group__item:active {
    color: var(--gnl-brand-primary);
}
.modal-content .gnl-link {
    color: var(--gnl-brand-primary);
}
.gnl-navigation.gnl-navigation--side .gnl-navigation__nav-item.active {
    border-left: 4px solid var(--gnl-brand-primary);
}
.gnl-navigation.gnl-navigation--side .gnl-navigation__nav-link.active {
    color: var(--gnl-brand-primary);
}
.gnl-navigation.gnl-navigation--side .gnl-navigation__nav-link.active:before {
    background-color: var(--gnl-brand-primary);
}
.gnl-pagination .gnl-pagination__dot.gnl-pagination__dot--on {
    background-color: var(--gnl-brand-primary);
}
.gnl-stepper__step--active .gnl-stepper__number {
    background-color: var(--gnl-brand-primary);
}
.gnl-stepper__icon::before {
    color: var(--gnl-brand-primary);
}
.gnl-u-text-blue-dark {
    color: var( --gnl-brand-primary-hover);
}
.hover\:gnl-u-text-blue-dark:hover {
    color: var( --gnl-brand-primary-hover);
}
.focus\:gnl-u-text-blue-dark:focus {
    color: var( --gnl-brand-primary-hover);
}
.gnl-u-text-brand-blue {
    color: var(--gnl-brand-primary);
}
.hover\:gnl-u-text-brand-blue:hover {
    color: var(--gnl-brand-primary);
}
.focus\:gnl-u-text-brand-blue:focus {
    color: var(--gnl-brand-primary);
}
.gnl-u-bg-blue-dark {
    background-color: var( --gnl-brand-primary-hover);
}
.hover\:gnl-u-bg-blue-dark:hover {
    background-color: var( --gnl-brand-primary-hover);
}
.focus\:gnl-u-bg-blue-dark:focus {
    background-color: var( --gnl-brand-primary-hover);
}
.gnl-u-bg-brand-blue {
    background-color: var(--gnl-brand-primary);
}
.hover\:gnl-u-bg-brand-blue:hover {
    background-color: var(--gnl-brand-primary);
}
.focus\:gnl-u-bg-brand-blue:focus {
    background-color: var(--gnl-brand-primary);
}
@media (min-width:480px) {
    .sm\:gnl-u-text-blue-dark {
        color: var( --gnl-brand-primary-hover);
    }
    .sm\:hover\:gnl-u-text-blue-dark:hover {
        color: var( --gnl-brand-primary-hover);
    }
    .sm\:focus\:gnl-u-text-blue-dark:focus {
        color: var( --gnl-brand-primary-hover);
    }
    .sm\:gnl-u-text-brand-blue {
        color: var(--gnl-brand-primary);
    }
    .sm\:hover\:gnl-u-text-brand-blue:hover {
        color: var(--gnl-brand-primary);
    }
    .sm\:focus\:gnl-u-text-brand-blue:focus {
        color: var(--gnl-brand-primary);
    }
    .sm\:gnl-u-bg-blue-dark {
        background-color: var( --gnl-brand-primary-hover);
    }
    .sm\:hover\:gnl-u-bg-blue-dark:hover {
        background-color: var( --gnl-brand-primary-hover);
    }
    .sm\:focus\:gnl-u-bg-blue-dark:focus {
        background-color: var( --gnl-brand-primary-hover);
    }
    .sm\:gnl-u-bg-brand-blue {
        background-color: var(--gnl-brand-primary);
    }
    .sm\:hover\:gnl-u-bg-brand-blue:hover {
        background-color: var(--gnl-brand-primary);
    }
    .sm\:focus\:gnl-u-bg-brand-blue:focus {
        background-color: var(--gnl-brand-primary);
    }
}
@media (min-width:840px) {
    .md\:gnl-u-text-blue-dark {
        color: var( --gnl-brand-primary-hover);
    }
    .md\:hover\:gnl-u-text-blue-dark:hover {
        color: var( --gnl-brand-primary-hover);
    }
    .md\:focus\:gnl-u-text-blue-dark:focus {
        color: var( --gnl-brand-primary-hover);
    }
    .md\:gnl-u-text-brand-blue {
        color: var(--gnl-brand-primary);
    }
    .md\:hover\:gnl-u-text-brand-blue:hover {
        color: var(--gnl-brand-primary);
    }
    .md\:focus\:gnl-u-text-brand-blue:focus {
        color: var(--gnl-brand-primary);
    }
    .md\:gnl-u-bg-blue-dark {
        background-color: var( --gnl-brand-primary-hover);
    }
    .md\:hover\:gnl-u-bg-blue-dark:hover {
        background-color: var( --gnl-brand-primary-hover);
    }
    .md\:focus\:gnl-u-bg-blue-dark:focus {
        background-color: var( --gnl-brand-primary-hover);
    }
    .md\:gnl-u-bg-brand-blue {
        background-color: var(--gnl-brand-primary);
    }
    .md\:hover\:gnl-u-bg-brand-blue:hover {
        background-color: var(--gnl-brand-primary);
    }
    .md\:focus\:gnl-u-bg-brand-blue:focus {
        background-color: var(--gnl-brand-primary);
    }
}
@media (min-width:1200px) {
    .lg\:gnl-u-text-blue-dark {
        color: var( --gnl-brand-primary-hover);
    }
    .lg\:hover\:gnl-u-text-blue-dark:hover {
        color: var( --gnl-brand-primary-hover);
    }
    .lg\:focus\:gnl-u-text-blue-dark:focus {
        color: var( --gnl-brand-primary-hover);
    }
    .lg\:gnl-u-text-brand-blue {
        color: var(--gnl-brand-primary);
    }
    .lg\:hover\:gnl-u-text-brand-blue:hover {
        color: var(--gnl-brand-primary);
    }
    .lg\:focus\:gnl-u-text-brand-blue:focus {
        color: var(--gnl-brand-primary);
    }
    .lg\:gnl-u-bg-blue-dark {
        background-color: var( --gnl-brand-primary-hover);
    }
    .lg\:hover\:gnl-u-bg-blue-dark:hover {
        background-color: var( --gnl-brand-primary-hover);
    }
    .lg\:focus\:gnl-u-bg-blue-dark:focus {
        background-color: var( --gnl-brand-primary-hover);
    }
    .lg\:gnl-u-bg-brand-blue {
        background-color: var(--gnl-brand-primary);
    }
    .lg\:hover\:gnl-u-bg-brand-blue:hover {
        background-color: var(--gnl-brand-primary);
    }
    .lg\:focus\:gnl-u-bg-brand-blue:focus {
        background-color: var(--gnl-brand-primary);
    }
}
.gnl-intro .gnl-intro__title {
    color: var(--gnl-brand-primary);
}

.gnl-footer__links a, .gnl-site-footer a, footer a, #footer a, .footer a {
    color: #e0e4e6;
}

.gnl-footer__links ul li a {
    color: #e0e4e6;
}

.gnl-site-footer, footer, #footer {
    background: #64717c;
    color: #fff;
}

gnl-site-footer .text-links a {
    color: #e0e4e6;
}