/*
* Core + Bootstrap styles for the NEA Extranet.
* Merged from: extranet.styles, extranet.bootstrap
*/

/*** Structure ***/
body,
#header,
#topNav,
#main-content,
navbar.navbar-expand-lg,
#navbarCollapse,
.dropdown-menu-body {
    background-color: var(--extranet-color-cream);
}

/*** Typography ***/
@font-face {
    font-family: GraphikRegular;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/graphik/regular/Graphik-Regular.eot) format("embedded-opentype"), url(fonts/graphik/regular/Graphik-Regular.woff) format("woff"), url(fonts/graphik/regular/Graphik-Regular.woff2) format("woff2"), url(fonts/graphik/regular/Graphik-Regular.ttf) format("truetype");
}

@font-face {
    font-family: GraphikBold;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/graphik/bold/Graphik-Bold.eot?#iefix) format("embedded-opentype"), url(fonts/graphik/bold/Graphik-Bold.woff) format("woff"), url(fonts/graphik/bold/Graphik-Bold.woff2) format("woff2"), url(fonts/graphik/bold/Graphik-Bold.ttf) format("truetype");
}

@font-face {
    font-family: GraphikSemibold;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/graphik/semibold/Graphik-Semibold.eot?#iefix) format("embedded-opentype"), url(fonts/graphik/semibold/Graphik-Semibold.woff) format("woff"), url(fonts/graphik/semibold/Graphik-Semibold.woff2) format("woff2"), url(fonts/graphik/semibold/Graphik-Semibold.ttf) format("truetype");
}

@font-face {
    font-family: "sanBlueKingtomLight";
    src: url("fonts/sangbleukingdom/SangBleuKingdom-Light.otf");
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'GraphikRegular', georgia, serif;
    color: var(--extranet-color-text-dark);
    margin: 0;
}

p, ul, li, ol, span, caption, label {
    font-family: 'GraphikRegular', helvetica, arial, sans-serif;
    color: var(--extranet-color-text-dark);
    list-style: none;
}

h1 {
    font-size: 36px;
    line-height: 42px;
    margin: 20px 0 20px;
}

h2 {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 10px;
}

    h2 span {
        font-family: 'GraphikRegular', georgia, serif;
        color: var(--extranet-color-text-dark);
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 30px;
    }

h3 {
    font-size: 18px;
    line-height: 20px;
}

Background ul li {
    margin-bottom: 20px;
}

homeBackground ul li:last-child {
    margin-bottom: 0;
}

a {
    color: var(--extranet-color-text-dark);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    text-decoration: none;
}

    a:hover,
    a:focus,
    a:active {
        text-decoration: underline;
        color: var(--extranet-color-text-dark);
    }

/*** Navigation ***/

nav {
    padding: 20px 0 15px;
    border: none;
}

.x-nea-logo {
    width: 77px;
    height: 30px;
    background-color: var(--extranet-color-cream);
}

nav a {
    font-family: 'GraphikRegular', helvetica, arial, sans-serif;
    color: var(--extranet-color-text-dark);
    font-weight: bold;
}

nav ul li {
    margin: 0;
}

.navbar-nav > li > a {
    padding: 15px 10px 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.nav > li > a:hover,
.nav > li > a:focus {
    background: none;
    color: var(--extranet-color-accent-green);
}

.navbar-toggle {
    margin-top: 0;
    margin-bottom: 0;
}

.nav-link {
    cursor: pointer;
}

.icon-bar {
    background-color: var(--extranet-color-text-dark);
}

.brand {
    margin-left: 15px;
}

/* Custom column size */
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

@media screen and (min-width: 768px) {
    .col-lg-5ths {
        width: 20% !important;
        float: left;
        max-width: 20% !important;
        flex: 0 0 20% !important;
    }
}

@media screen and (min-width: 992px) {
    .col-lg-5ths {
        width: 20% !important;
        float: left;
        max-width: 20% !important;
        flex: 0 0 20% !important;
    }
}

@media screen and (min-width: 1200px) {
    .col-lg-5ths {
        width: 20% !important;
        float: left;
        max-width: 20% !important;
        flex: 0 0 20% !important;
    }
}

@media screen and (min-width: 768px) {
    .brand {
        margin-left: 0;
    }
}

/*** Home ***/

.homeBackground {
    background-color: var(--extranet-color-sage);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-bottom: 30px;
}

.resources {
    background-color: #3b3637;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 15px;
    margin-bottom: -30px;
}

    .resources h3 {
        color: var(--extranet-color-accent-green);
        display: block;
    }

    .resources ul li {
        display: inline-block;
        padding: 15px 20px;
        margin: 0;
    }

        .resources ul li a {
            color: #fff;
        }

            .resources ul li a:hover {
                color: #fff;
                text-decoration: underline;
            }

/*** Widget ***/
.widget {
    margin: 0;
}

.widget-content > .row {
    margin: 0;
}

.widgetBox {
    background-color: var(--extranet-color-sage);
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 30px;
}

    .widgetBox hr {
        border-top: 1px solid var(--extranet-color-brand-blue);
        margin: 30px 0;
    }

    .widgetBox h3 a:hover {
        color: var(--extranet-color-accent-green);
        text-decoration: none;
    }

/*** Masonry ***/

.grid-item-content > .row {
    margin: 0;
}

.grid-item-content > ul {
    margin: 0;
    padding: 0;
}

.grid-item {
    margin-bottom: 30px;
}

.masonryBox {
    background-color: #fff;
    border-radius: 4px;
    padding: 30px;
}

    .masonryBox hr {
        border-top: 1px solid var(--extranet-color-accent-green);
        margin: 30px 0;
    }

    .masonryBox ul li {
        margin-top: 20px;
    }

        .masonryBox ul li:first-child {
            margin-top: 0;
        }

    .masonryBox h3 {
        font-family: 'GraphikBold';
    }

        .masonryBox h3 a:hover {
            color: var(--extranet-color-accent-green);
            text-decoration: none;
        }

    .masonryBox ul li a {
        text-decoration-line: none;
    }

        .masonryBox ul li a:hover {
            color: var(--extranet-color-text-dark);
            text-decoration: underline;
        }

    .masonryBox .listCol {
        width: 100%;
    }

        .masonryBox .listCol li {
            padding: 0 0 20px 0;
            margin-top: 0;
        }

/*** Quick Links ***/

.x-quickLinks {
    background-color: #f2f2f2;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 30px;
}

    .x-quickLinks ul {
        padding: 0;
    }

    .x-quickLinks a {
        color: #5d5a5b;
        text-decoration-line: none;
    }

    .x-quickLinks h3 {
        font-weight: bold;
    }

    .x-quickLinks hr {
        border-top: 1px solid var(--extranet-color-accent-green);
        margin: 30px 0;
    }

    .x-quickLinks ul li,
    .x-quickLinks ul li li {
        margin-top: 20px;
    }

        .x-quickLinks ul li:first-child {
            margin-top: 0;
        }

        .x-quickLinks ul li a:hover {
            color: var(--extranet-color-text-dark);
            text-decoration: underline;
        }

    .x-quickLinks ul ul {
        margin-left: 10px;
        margin-top: 20px;
    }

    .x-quickLinks .activeParent {
        font-weight: bold;
        color: #000;
    }

    .x-quickLinks .activeCurrent {
        color: #000;
    }

        .x-quickLinks .activeCurrent::before {
            content: '•';
            margin-right: 5px;
            margin-left: -10px;
        }

        .x-quickLinks .activeCurrent:hover {
            text-decoration: none;
        }

/*** Document Lists  ***/
.x-due-dilligence-header {
    font-size: 1.3rem;
}

ul.x-document-list li {
    margin-bottom: 20px;
}

    ul.x-document-list li:last-child {
        margin-bottom: 0;
    }

/*** Link Icons ***/
.x-document {
    padding-left: 20px;
}

a.x-document:hover {
    color: #007bff !important;
}

.x-document::after {
    content: "\f15c";
    font-family: "FontAwesome";
    font-size: 14px;
    color: var(--extranet-color-gray);
    display: inline-block;
    padding-left: 5px;
    vertical-align: super;
    margin-top: -5px;
}

.x-external-link::after {
    content: "\f14c";
    font-family: "FontAwesome";
    font-size: 14px;
    color: var(--extranet-color-gray);
    display: inline-block;
    padding-left: 5px;
    vertical-align: super;
    margin-top: -5px;
}

/*** Footer ***/
footer {
    padding-top: 10px;
}

.footer {
    background: var(--extranet-color-text-dark);
    padding-top: 10px;
    padding-bottom: 10px;
}

    .footer ul li {
        display: inline-block;
        font-size: 12px;
        line-height: 12px;
        color: var(--extranet-color-taupe);
        padding-right: 20px;
        margin: 0;
    }

        .footer ul li a {
            color: var(--extranet-color-taupe);
        }

            .footer ul li a:hover {
                color: #cbc1ad;
            }

.x-faq-question {
    white-space: normal;
    font-weight: bold;
}

.x-faq-answer {
    white-space: normal;
}

.x-site-header {
    background-color: var(--extranet-color-cream);
    font-size: 32px;
    font-weight: 500;
    font-family: "GraphikRegular";
    color: var(--extranet-color-text-dark);
    margin-top: 18px;
    margin-left: 20px;
    line-height: 42px;
    white-space: nowrap;
}

.x-site-header-sub {
    font-size: 36px;
    font-family: "sanBlueKingtomLight";
}

/* Cookie consent banner wrapper */
.consent-banner {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    background-color: var(--extranet-color-sage); /* original banner green */
    color: var(--extranet-color-charcoal);
    text-align: center;
}

    /* Banner text */
    .consent-banner .fs-5 {
        line-height: 1.4;
    }

/* Accept button (unchanged blue) */
.consent-button {
    background-color: var(--extranet-color-brand-blue);
    color: #FFFFFF;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    margin: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

    .consent-button:hover,
    .consent-button:focus {
        background-color: var(--extranet-color-danger);
        color: #FFFFFF;
    }


/*** General buttons / banners ***/
.page-header {
    font-family: 'GraphikSemibold';
    font-size: 24px;
}

.login-banner {
    font-family: 'sanBlueKingtomLight';
    color: var(--extranet-color-charcoal);
    font-weight: 800;
}

.v-button-solid-ocean {
    background-color: var(--extranet-color-brand-blue);
}

    .v-button-solid-ocean:hover,
    .v-button-solid-ocean.k-hover {
        border-color: #FFFFFF;
        background-color: var(--extranet-color-danger);
    }

    .v-button-solid-ocean .k-button-text,
    .v-button-solid-ocean .k-button-icon {
        color: #FFFFFF;
    }

.v-button-muted-ocean {
    background-color: #5f6f81;
    color: #FFFFFF;
}

    .v-button-muted-ocean:hover,
    .v-button-muted-ocean.k-hover {
        background-color: #7a8da1;
        border-color: #FFFFFF;
    }

    .v-button-muted-ocean .k-button-text,
    .v-button-muted-ocean .k-button-icon {
        color: #FFFFFF;
    }

.grid-command_button {
    padding: 6px;
}

.view-button {
    padding: 6px;
    border-color: currentColor;
    color: inherit;
    background: none;
    background-color: #FFFFFF;
}

.report-button {
    border-color: #ccc;
    color: inherit;
    background: none;
    background-color: #FFFFFF;
}

.top-label {
    padding-top: 25px;
}

.button-col {
    float: right;
}

.x-body-text {
    line-height: 36px;
    text-align: justify;
}

/*** Notifications ***/
div.notifyjs-bootstrap-extranetInformational {
    color: #FFFFFF;
    background-color: var(--extranet-color-steel-blue);
}

    div.notifyjs-bootstrap-extranetInformational span {
        color: #FFFFFF;
        font-family: "GraphikSemibold";
    }

div.notifyjs-bootstrap-extranetWarning {
    color: #FFFFFF;
    background-color: var(--extranet-color-danger);
}

    div.notifyjs-bootstrap-extranetWarning span {
        color: #FFFFFF;
        font-family: "GraphikSemibold";
    }

/*** Dropdown ***/
.dropdown-menu-body.dropdown-menu.dropdown-menu-right {
    background-color: #e4e7eb;
}

/*** Warning tooltip ***/
.x-warning-message.k-tooltip {
    position: static;
    background-color: #FFFFFF;
    border-width: 1px;
}

/* --- Merged from extranet.bootstrap.css --- */

.x-row-spacing > .row {
    padding-top: 5px;
}

.x-row-spacing-container .row {
    padding-top: 5px;
}

.row.x-pageheader {
    padding-top: 20px;
    padding-bottom: 5px;
}

.navbar {
    padding-left: 0px;
}
/* reset everything to the default box model */

/**, :before, :after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}*/

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*.dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent;
    cursor:pointer;
}

a.dropdown-toggle:hover, a.dropdown-toggle:focus, a.dropdown-toggle:active {
    text-decoration:none;
    cursor:pointer !important;
}*/

.btn-clear {
    color: #292b2c;
    background-color: var(--extranet-color-cream);
    border-color: transparent;
}

    .btn-clear:hover {
        color: #292b2c;
        background-color: var(--extranet-color-cream);
        border-color: transparent;
        cursor: pointer;
    }

.btn-clear:focus, .btn-clear.focus {
    /*-webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
    box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);*/
}

.btn-clear.disabled, .btn-clear:disabled {
    background-color: var(--extranet-color-cream);
    border-color: #ccc;
}

.btn-clear:active, .btn-clear.active,
.show > .btn-clear.dropdown-toggle {
    color: #292b2c;
    background-color: var(--extranet-color-cream);
    background-image: none;
    border-color: transparent;
}

/* Make all toasts wider */
#toast-container .toast {
    max-width: 600px; /* or 700px / 50vw, whatever you prefer */
}

/* Informational toast */
.toast-extranet-informational {
    color: #FFFFFF;
    background-color: var(--extranet-color-steel-blue);
}

    .toast-extranet-informational .toast-body {
        color: #FFFFFF;
        font-family: "GraphikSemibold";
        font-size: 1rem; /* larger than Bootstrap default 0.875rem */
    }

/* Success / informational (blue) */
.toast-extranet-success {
    background-color: var(--extranet-color-steel-blue);
    color: #FFFFFF;
}

    .toast-extranet-success .toast-body {
        color: #FFFFFF;
        font-family: "GraphikSemibold";
        font-size: 1rem; /* larger than Bootstrap default 0.875rem */
    }

/* Warning / error (red) */
.toast-extranet-warning {
    background-color: var(--extranet-color-danger);
    color: #FFFFFF;
}

    .toast-extranet-warning .toast-body {
        color: #FFFFFF;
        font-family: "GraphikSemibold";
        font-size: 1rem; /* larger than Bootstrap default 0.875rem */
    }