/* all buttons on the authentication page shall have this style */
.u-authn-screen vaadin-button {
    background-color: #023d6b;
    color: #fff;
    /*width: 100%; why?*/
    /*text-transform: uppercase;*/
}

/* couple of general changes, applicable to all screens */
html {
    --lumo-font-size-xxxl: 3rem;
    --lumo-font-family: Verdana, "Verdana Ref", sans-serif;
    --lumo-size-xl: 5rem;
    --lumo-primary-text-color: #023d6b;
    --lumo-primary-color-50pct: #ebebeb;
    --lumo-primary-color-10pct: #ebebeb;
    --lumo-primary-color: #023d6b;
    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
    --lumo-header-text-color: #023d6b;
    --lumo-error-color: #FF4637;
    --lumo-success-color: #00B720;
    --unity-font-weight: 500;
    --vaadin-text-field-default-width: 16em;
    --lumo-button-primary-background: #fff;
    --vaadin-button-primary-background: #023d6b;
    --unity-hover-button-color: #adbde3;
    --unity-selected-tab-color: #002036;
    --unity-tab-hover-color: #002036;
    /* This naming schema >.< */
    --unity-icon-color: #002036;
    /* Why is the default so stupid here? Make a handsymbol for clickable stuff*/
    --lumo-clickable-cursor: pointer;
    /*This one works on u-authn-screen*/
    background-color: #fff;
    /* fix text field width*/
    --unity-text-field-medium: 100%;
}

/*https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b*/
/*Fix annoying scrollbar*/
:root {
    --footer-height: 151px;
    /*copied from fz-juelich.de !*/
}

.u-main-layout-container>div:nth-child(2),
.u-main-layout-container,
.main-subsite .container {
    min-height: calc(100vh - var(--footer-height)) !important;
}

#unity-layout-bottom {
    min-height: var(--footer-height) !important;
}

/* fix h1 being stupid*/
.main-subsite .container h1 {
    margin-top: 0;
    padding-top: 10px;
}

/* base flex classes*/
.flex-center-column {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.flex-center-row {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.flex-evenly-row {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}

.flex-right-row {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}

.v-stretch {
    height: 100%;
}

/* footer */
#unity-layout-bottom {
    text-align: center;
    background-color: #002036;
    height: var(--footer-height);
    margin-top: auto;
}

#unity-layout-bottom a {
    color: #fff;
    padding: 0 1rem 0 1rem;
}

/* auth screen
.u-authn-screen {
    margin: 1% 15% 1% 15%;
    padding: 1rem;
    border-radius: 4px;
    background-color: #FAFAFA;
    width: 70% !important;
    height: 96% !important;
} */

/* search bar */
.u-authn-search {
    width: 34em;
}

/* signin-button e.g forschuntszentrum jülich */
.u-signin-button {
    margin: 1px;
}

/* OTHER sites */
.main-subsite {
    margin: 0;
}

/* logged in: right side */
.u-main-layout-right-container {
    background-color: #FFF;
}

/* logged in: left side */
.u-main-layout-left-container {
    background-color: #023d6b;
}

/* logged in: navbar, where "Profile" is written*/
.u-main-layout-navbar {
    background-color: #fff;
}

/* move title up due to hidden logo */
.u-authn-title {
    margin-top: 0;
    margin-left: 1px;
    margin-right: 1px;
}

.main-subsite .container {
    margin: 0 15% 0 15%;
    padding: 0 1rem 0 1rem;
    background-color: #fff;
}

/* Fix clipping and use elipsies */
.u-authn-screen .u-text-left::part(label) {
    padding-right: 0;
    text-overflow: ellipsis;
}

/* Fix consent screen width*/
.u-consentMainColumn .u-consent-screen {
    width: auto;
}

/* Fix consent screen header beeing dark blue on blue */
/*.u-consentMainColumn > vaadin-vertical-layout:nth-child(1),
.u-consentMainColumn > vaadin-vertical-layout:nth-child(1) > h2,
.u-consentMainColumn .u-underline {
    color: #e7ebef;
}

.u-consentMainColumn .u-consentDeclineButton {
    background-color: #e7ebef;
    color: var(--lumo-contrast-70pct);
}*/
.u-consentMainColumn {
    background-color: #fff;
    width: 70% !important;
    border-radius: 4px;
}

/* Hide phone menu buttons */
#footer-menu-button {
    background-color: #023d6b;
    border-radius: 4px;
    border: 3px solid #fff;
    color: #fff;
    height: 30px;
    width: 40px;
}

#footer-menu-button-menu {
    display: none;
    position: absolute;
}

#footer-menu-button:hover {
    background-color: #023d6b;
    cursor: pointer;
}

#copyright {
    color: #fff;
}

#footer-menu .btn {
    border-right: 1px solid #fff;
}

#footer-menu .btn:last-child {
    border-right: none;
}

@media(max-width: 900px) {

    /* menu toggles */
    #footer-menu-button-menu {
        display: block;
        left: 0;
    }

    #footer-menu {
        display: none;
    }

    #footer {
        padding: 0;
    }

    #footer-menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: #002036;
        border: 3px solid #fff;
        border-radius: 4px;
        padding: 0;
        margin: 0;
        z-index: 2;
        left: 0;
    }

    .u-authn-screen {
        margin: 1% 0 1% 0;
        padding: 0;
        width: 100% !important;
    }

    /* fix searchbar and title having fixed width*/
    .u-authn-title,
    .u-authn-search {
        width: 80vw;
    }

    .u-consentMainColumn {
        /* use as much as you can */
        width: 100% !important;
    }

    /* fix consent screen buttons margin left */
    .u-consent-screen-buttons {
        margin-left: auto;
    }

    #footer-menu .btn {
        border-right: none;
    }
}