html {
    --footer-height: 8rem;
    --nav-height: 3.5rem;
    /**/
    --eoa-blue: #009fe3;
    --eoa-green: #c7d540;
}

html, nav, body, footer {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 400;
}

nav * {
    /*font-size: 0.9rem;*/
}

h1, h2, p {
    white-space: pre-line;
}

h1 {
    color: var(--eoa-blue);
    font-size: 2rem;
}

h2 {
    /*color: var(--eoa-blue);*/
    font-size: 1.15rem;
    font-weight: bold;
    /*text-transform: uppercase;*/
}

h3 {
    font-weight: bold;
    font-size: 1.25rem;
}

a {
    color: var(--eoa-green);
}

a:hover {
    color: var(--eoa-blue);
}

.btn.btn-primary {
    background-color: var(--eoa-blue);
    border-color: var(--eoa-blue)
}

.btn.btn-primary:hover {
    filter: brightness(80%);
}

.navbar.fixed-top .navbar-nav .active a {
    color: var(--eoa-green)
}

body {
    padding-bottom: var(--footer-height);
    padding-top: var(--nav-height);
}

/*nav {
    min-height: var(--nav-height);
}*/

footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    background: #fff;
    height: var(--footer-height);
    padding: 0 2rem;
    box-shadow: inset 0rem 1rem 2rem -.5rem rgba(0, 0, 0, .15);
    font-size: 0.9rem;
}

footer button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--eoa-blue);
}

footer button:hover {
     color: var(--eoa-green);
     text-decoration: underline;
}


#deltacad-logo {
    height: 2rem
}

#primary-username, #secondary-username, #primary-logo a {
    text-transform: none;
    text-decoration: none;
}

#primary-logo img, #secondary-logo img {
    height: calc(var(--nav-height) - 4rem);
    object-fit: contain;
}

#login-card {
    background: #fff;
    max-width: 40rem;
    padding: 2rem;
}

#login-card > form > div > button.btn {
    background: var(--eoa-green);
    border-color: var(--eoa-green);
    font-weight: bold;
}

#login-card > form > div > a {
    text-decoration: none;
}

#login-card > form > div > a:hover{
    filter: brightness(80%);
}

#login-card > form > div > a:hover {
    color: var(--eoa-green);
    text-decoration: underline;
}

#login-card > form {
    margin-bottom: 3rem;
    width: 25rem;
}

#login-card > form > p {
    font-size: 1.5rem;
}

#login-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login-card-top > img {
    height: 10rem;
}

#login-card-top > h1 {
    color: #000;
    text-transform: uppercase;
    font-weight: normal;
    font-weight: bold;
}

#login-card-top > p {
    text-align: justify;
    font-size: 1rem;
    padding: 0 1.25rem;
}

#login-card-top > p:first-of-type {
    text-align: justify;
    font-size: 1.25rem;
    font-weight: bold;
}

#login-card-bottom {
    display: flex;
    padding: 0 2rem;
}
#login-card-bottom > div {
    width: 50%;
}

section#login-card > div#login-card-bottom > div > p {
    margin: 0;
}

section#login-card > div#login-card-bottom > div > a {
    color: var(--eoa-blue);
    text-decoration: none;
}

section#login-card > div#login-card-bottom > div > a:hover {
    color: var(--eoa-green);
    text-decoration: none;
}

#login-card-bottom > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#login-card-bottom > div:last-child {
    align-items: center;
}

#login-card-bottom > div > a > img {
    height: 8rem;
}

#backgroundImage {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 1.5rem 0;
    color: white;
    overflow: hidden;
    background: linear-gradient(rgb(0,159,227,0.8), rgb(199,213,64,0.8)), url("/images/image_banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#navbarsCastor ul:last-child {
    flex-grow: 1;
    justify-content: end;
    align-items: center;
}

div#navbarsCastor .nav-item:not(.active) .nav-link:not(.demo-active):hover {
    color: var(--eoa-blue);
}

.btn-custom {
    border: 2px solid #000;
    padding: 0 1rem;
    color: #fff;
    background-color: var(--eoa-blue);
    text-decoration: none;
    text-align: center;
}

.btn-custom:hover {
    background-color: var(--eoa-green);
    color: var(--eoa-blue);
}

#buttons-div .btn-custom
{
    border: none;
}

article {
    margin: 1rem 0;
    text-align: justify;
}

footer a, article a {
    color: var(--eoa-blue);
}

footer a:hover, article a:hover {
    color: var(--eoa-green);
}

.highlight {
    /*background-color: #ffff00;*/
}

.italic {
    font-style: italic;
}

#usage-warning {
    background-color: #d5effc;
    padding: 1rem;
}

#homeBody > p:last-of-type {
    margin: 0;
}

#usage-warning > p {
    margin: 0;
}

#usage-warning > h2 {
    color: var(--eoa-blue);
    text-transform: uppercase;
    font-weight: bold;
}

.warning-sign {
    position: relative;
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.warning-sign::after {
    content: "⚠";
    position: absolute;
    left: 0.1rem;
}

.warning-sign::before {
    content: "▲";
    color: #ff0;
}

#buttons-title > li::marker, #buttons-title > li {
    color: var(--eoa-blue);
}

#buttons-div {
    display: flex;
    justify-content: center;
    gap: min(8rem, 10vw);
}

#buttons-div > a {
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5rem;
    width: 11rem;
}

#buttons-div > a > img {
    display: block;
    margin: 0 auto;
    margin-top: 0.25rem;
    height: 4rem;
}

li.nav-item:not(:first-child) {
    border-left: .1rem solid var(--eoa-blue);
}

a.nav-link:hover {
    color: var(--eoa-blue);
}

.nav-text {
    display: block;
    padding: .5rem 1rem;

}

#castor-logo {
    width: 11.5rem;
    height: 3.5rem;
}

#castor-logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#castor-logo + button + div {
    display: flex;
    align-items: center;
    padding-left: .5rem;
}

.navbar-nav li#primary-username + li.nav-item > a.nav-link {
    color: var(--eoa-blue);
}
.navbar-nav li#primary-username + li.nav-item > a.nav-link, li#secondary-username + li.nav-item > a.nav-link {
    color: var(--eoa-blue);
}
.navbar-nav li#primary-username + li.nav-item > a.nav-link:hover, li#secondary-username + li.nav-item > a.nav-link:hover {
    color: var(--eoa-green);
}

li#secondary-username + li.nav-item > .nav-link {
    padding: .5rem 1rem;
}

body > nav > div.container > div:first-child > div:last-child a {
    padding: .5rem;
}

body > nav > div.container > div:nth-child(2) {
    display: flex;
    flex-direction: row-reverse;
    flex-grow: 1;
}

body > nav > div.container > div:nth-child(2) > ul {
    flex-direction: row;
}

#castor-logo + button {
    padding: 0 2rem;
    border: none;
    border-radius: 0;
    box-shadow: 2px 0px 3px -1px rgba(0,0,0,.15);
}

.demo-active {
    background : var(--eoa-green);
    color: #000;
}

.demo-active:hover {
    background: var(--eoa-blue);
    color: #000;
}

.error-message {
    margin: 0 auto;
    padding: .5rem 1rem;
    width: fit-content;
    text-align: center;
    background-color: #f00;
    border-radius: .75rem;
    color: #fff;
    font-weight: bold;
}

#terms-of-use {
    margin-bottom: 1rem;
}

#terms-of-use a {
    text-decoration: none;
    color: var(--eoa-blue);
}

#terms-of-use a:hover {
    color: var(--eoa-green);
}

#hide-footer {
    margin-left: 1em;
    width: 1.75em;
    height: 1.75em;
    grid-column: 3;
    grid-row: 2;
}

@media screen and (max-width: 422px) and (min-height: 606px), 
    screen and (max-width: 469px) and (min-height: 605px), 
    screen and (max-width: 516px) and (min-height: 667px), 
    screen and (max-width: 563px) and (min-height: 745px), 
    screen and (max-width: 610px) and (min-height: 805px), 
    screen and (max-width: 657px) and (min-height: 875px), 
    screen and (max-width: 704px) and (min-height: 941px), 
    screen and (max-width: 751px) and (min-height: 1001px) {
    footer {
        padding: 0 1em;
    }
}

/*
    screen and (max-width: 422px) and (max-height: 606px),
    screen and (max-width: 469px) and (min-height: 605px),
    screen and (max-width: 516px) and (min-height: 667px),
    screen and (max-width: 563px) and (min-height: 745px),
    screen and (max-width: 609px) and (min-height: 805px),
    screen and (max-width: 610px) and (min-height: 875px), 
    screen and (max-width: 657px) and (min-height: 941px), 
    screen and (max-width: 751px) and (min-height: 1001px)
*/

footer > div:first-child img {
    height: 8rem
}

footer img {
    object-fit: contain;
    padding: 0.2em;
    border-radius: 1rem;
}

footer > div:last-child > a:last-child > img {
    height: 6em
}

footer > div:last-child > a:first-child > img {
    height: 7em
}


footer > div:nth-child(2) {
    margin: 0;
}

footer > div:nth-child(3) {
    text-align: center;

}

footer > div:nth-child(3) > a:first-of-type > img {
    height: 5em;
}

footer > div:nth-child(3) > a:last-of-type > img {
    height: 4em;
}

    footer > div:nth-child(2) > a {
        text-align: center;
    }

footer > div:last-child {
    display: grid !important;
    grid-template-columns: 5em 4em auto;
    grid-template-rows: 1em auto;
    height: 7em;
    align-self: center;
}

footer > div:last-child > div:first-child {
    grid-column: 1 / 3;
    grid-row: 1;
    text-align: center;
}

footer > div:last-child > a:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

footer > div:last-child > a:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}


@media screen and (max-width: 328.5px),
    screen and (max-width: 365.5px) and (min-height: 605px),screen and (max-width: 401.5px) and (min-height: 667px),
    screen and (max-width: 438px) and (min-height: 745px),
    screen and (max-width: 474px) and (min-height: 805px),
    screen and (max-width: 512px) and (min-height: 875px), 
    screen and (max-width: 548px) and (min-height: 941px), 
    screen and (max-width: 585px) and (min-height: 1001px) {
    html {
        --nav-height: 6rem;
    }
}


/*@media screen and (max-width: 510px) and (min-height: 1001px) {
    html {
        --footer-height: 8rem;
    }

    footer {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 1fr;
    }

    footer > div:nth-child(2n+1) {
        justify-content: center !important;
    }

    footer > div:nth-child(2) {
        grid-column: 1;
    }

    footer > div:nth-child(3) {
        grid-row: 3;
    }
}*/

@media (max-height: 1000px) {
    html {
        font-size: 15px;
    }
}

@media (max-height: 940px) {
    html {
        font-size: 14px;
    }
}

@media (max-height: 875px) {
    html {
        font-size: 13px;
    }
    #login-card {
        margin-top: 2rem !important;
    }
}

@media (max-height: 805px) {
    html {
        font-size: 12px;
    }
}

@media (max-height: 745px) {
    html {
        font-size: 11px;
    }
    #login-card {
        margin-top: 1rem !important;
    }
}

@media (max-height: 666px) {
    html {
        font-size: 10px;
    }
}

@media (max-height: 605px) {
    html {
        font-size: 9px;
    }
}