:root {
    --gov-dark-blue: #003375;
    --gov-light-blue: #00b0f0;
    --medium-blue: #325b90;
    --navbar-height: 43px;
    --navbar-border-bottom: 4px;
    --sidenav-width: 300px;
    --text-color: #494e63;
    --sdad-font-size: 13px;
    --sdad-ethnosimo-size: 48px;
    --sdad-euespa-size: 250px;
    --gov-ethnosimo-color: #2c5aa0;
    --font-family: "Roboto";
    --sdad-font-size-welcome-text: 16px;
}

body {
    font-family: var(--font-family), sans-serif;
    padding: 0;
    margin: 0;
    font-size: var(--sdad-font-size);
    background-color: #f3f3f3;
    color: var(--text-color);
    line-height: 1.5;
    height: 100vh;
    overflow-x: auto;
}

.sdad-gov-dark-blue {
    background-color: var(--gov-dark-blue);
    color: white;
}

.sdad-hover-gov-light-blue:hover {
    background-color: var(--gov-light-blue) !important;
    color: white !important;
}

.sdad-padding-0, .w3-bar-item.sdad-padding-0 {
    padding: 0;
}

.sdad-padding-left-16, .w3-bar-item.sdad-padding-left-16 {
    padding-left: 16px;
}

.sdad-flex-keep-size {
    flex: 0 0 auto;
}

.sdad-flex-expand-1 {
    flex: 1 1 auto;
}

.sdad-overflow-with-ellipsis {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdad-white-space-nowrap {
    white-space: nowrap !important;
}

.sdad-right-aligned-for-absolute-position {
    right: 0;
}

/* ******************************* */
/* W3.CSS SPECIALIZATION OVERRIDES */
/* ******************************* */
header.w3-top {
    border-bottom: var(--navbar-border-bottom) solid var(--gov-light-blue);
}

body.sdad-main-layout header.w3-top {
    display: grid;
    grid-template-columns: var(--sidenav-width) auto;
}

body.sdad-main-layout.page-navigator-open header.w3-top {
    grid-template-columns: var(--sidenav-width) auto;
}

@media (max-width: 600px) {
    body.sdad-main-layout header.w3-top {
        grid-template-columns: 50px auto;
    }

    body.sdad-main-layout.page-navigator-open header.w3-top {
        grid-template-columns: 50px auto;
    }
}

/* Keep the hover color of the dropdown hover button */
.w3-dropdown-hover:hover > .w3-button.sdad-hover-gov-light-blue:first-child {
    background-color: var(--gov-light-blue);
    color: white;
}

.w3-button.sdad-side-hover-color:hover {
    background-color: var(--gov-light-blue) !important;
    color: #383428 !important;
}

#page-navigator button.w3-bar-item, #page-navigator input[type=button].w3-bar-item {
    width: 100%;
    text-align: left;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-navigator button.pnct {
    text-overflow: ellipsis;
}

#page-navigator button .font-based-icon-icon {
    margin-right: 3px;
    padding-left: 3px;
}

#page-navigator .w3-disabled {
    pointer-events: none !important;
}

/* ******************************* */
#page-navigator {
    width: 0;
    background-color: var(--gov-dark-blue);
    color: white;
    overflow-x: hidden;
    position: fixed;
    top: calc(var(--navbar-height) + var(--navbar-border-bottom));
    bottom: 0;
}

body.sdad-sidenav-transition #page-navigator {
    transition: width 0.5s;
}

body.page-navigator-open #page-navigator {
    width: var(--sidenav-width);
}

#main-container {
    padding-top: calc(var(--navbar-height) + var(--navbar-border-bottom));
    display: grid;
    min-height: 100%;
    grid-template-rows: auto 60px;
    padding-left: 0;
}

body.sdad-sidenav-transition #main-container {
    transition: padding-left 0.5s;
}

body.page-navigator-open #main-container {
    padding-left: var(--sidenav-width);
}

body.sdad-front-layout > #main-container > #main {
    margin: 0 auto;
    max-width: 1200px;
}

body.sdad-front-layout > #main-container > #main > * {
    padding: 40px 70px;
    display: grid;
    grid-template-areas:
        "heading logo"
        "text    logo"
        "button  logo";
}

@media (max-width: 749px) {
    body.sdad-front-layout > #main-container > #main > div {
        grid-template-areas:
            "heading"
            "logo"
            "text"
            "button";
    }
}

body.sdad-front-layout #sdad-welcome-heading {
    grid-area: heading;
}

body.sdad-front-layout #sdad-welcome-text {
    grid-area: text;
}

body.sdad-front-layout #sdad-welcome-text > h1 {
    margin-top: 0;
}

body.sdad-front-layout #sdad-welcome-text .sdad-field-padding {
    padding-left: 0;
    padding-right: 0;
}

body.sdad-front-layout #sdad-welcome-text p {
    margin-top: 1.4em;
    font-size: var(--sdad-font-size-welcome-text);
    text-align: justify;
}

body.sdad-front-layout #sdad-welcome-text .sdad-button-bar {
    padding: 0;
    margin-top: 0;
    margin-bottom: 40px;
}

body.sdad-front-layout #sdad-welcome-logo {
    grid-area: logo;
    justify-self: center;
}

body.sdad-front-layout #sdad-gsis-login-btn-container {
    padding: 0;
    grid-area: button;
}

body.sdad-front-layout #sdad-gsis-login-btn-container > .sdad-w3-button {
    font-size: 160%;
}

#main {
    height: 100%;
    margin: 0 0 0 0;
}

.w3-bar .w3-bar-item.sdad-bar-divider {
    padding-right: 0;
    opacity: 0.4;
}

#back button {
    padding: 12px 12px 12px 12px !important;
    font-size: 16px;
    line-height: 1.5;
}

#title {
    font-size: 16px;
    font-weight: 700;
}

footer {
    color: var(--gov-ethnosimo-color);
    background-color: white;
    display: grid;
    column-gap: 8px;
    justify-content: center;
}

body.sdad-main-layout footer {
    /*grid-template-columns: 1fr calc(20px + var(--sdad-ethnosimo-size)) 1fr;*/
    grid-template-columns: auto calc(20px + var(--sdad-ethnosimo-size)) auto;
    grid-template-areas:
        "links1 ethnosimo info1"
        "links2 ethnosimo info2";
}

body.sdad-front-layout footer {
    grid-template-columns: auto calc(20px + var(--sdad-euespa-size)) calc(20px + var(--sdad-ethnosimo-size)) auto;
    grid-template-areas:
        "links1 euespa ethnosimo info1"
        "links2 euespa ethnosimo info2";
}

footer p {
    margin: 0;
}

.sdad-footer-links1 {
    grid-area: links1;
    justify-self: right;
    align-self: end;
}

.sdad-footer-links2 {
    grid-area: links2;
    justify-self: right;
    align-self: start;
}

.sdad-footer-euespa {
    grid-area: euespa;
    width: var(--sdad-euespa-size);
    justify-self: right;
    align-self: center;
}

.sdad-footer-ethnosimo {
    grid-area: ethnosimo;
    width: var(--sdad-ethnosimo-size);
    justify-self: center;
    align-self: center;
}

.sdad-footer-info1 {
    grid-area: info1;
    justify-self: left;
    align-self: end;
    font-weight: bold;
}

.sdad-footer-info2 {
    grid-area: info2;
    justify-self: left;
    align-self: start;
    font-weight: bold;
}

@media (max-width: 899px) {
    body.sdad-main-layout.page-navigator-open footer {
        grid-template-columns: 0 var(--sdad-ethnosimo-size) auto;
    }

    body.sdad-main-layout.page-navigator-open footer .sdad-footer-links1 {
        display: none;
    }

    body.sdad-main-layout.page-navigator-open footer .sdad-footer-links2 {
        display: none;
    }

    body.sdad-front-layout footer {
        grid-template-columns: 0 var(--sdad-euespa-size) calc(20px + var(--sdad-ethnosimo-size)) auto;
    }

    body.sdad-front-layout footer .sdad-footer-links1 {
        display: none;
    }

    body.sdad-front-layout footer .sdad-footer-links2 {
        display: none;
    }
}

@media (max-width: 489px) {
    body.sdad-front-layout footer {
        grid-template-columns: 0 0 calc(20px + var(--sdad-ethnosimo-size)) auto;
    }

    body.sdad-front-layout footer .sdad-footer-links1 {
        display: none;
    }

    body.sdad-front-layout footer .sdad-footer-links2 {
        display: none;
    }

    body.sdad-front-layout footer .sdad-footer-euespa {
        display: none;
    }
}

@media (max-width: 600px) {
    body.sdad-main-layout footer {
        grid-template-columns: 0 var(--sdad-ethnosimo-size) auto;
    }

    body.sdad-main-layout footer .sdad-footer-links1 {
        display: none;
    }

    body.sdad-main-layout footer .sdad-footer-links2 {
        display: none;
    }
}