/* Averta Regular */
@font-face {
    font-family: 'Averta Regular';
    font-weight: 400; /* Regular */
    font-style: normal;
    src: url('../public/averta-regular.woff2') format('woff2'),
    url('../public/averta-regular.woff') format('woff');
}

/* Averta Bold */
@font-face {
    font-family: 'Averta Bold';
    font-weight: 700; /* Bold */
    font-style: normal;
    src: url('../public/averta-bold.woff2') format('woff2'),
    url('../public/averta-bold.woff') format('woff');
}

:root {
    --solarwatt-colors__darkForest: #003339;
    --solarwatt-colors__forest: #064349;
    --solarwatt-colors__flux: #4DF0B4;
    --solarwatt-colors__hover: #EBEFEF;
    --solarwatt-colors__gray: #c8c8c8;
    --solarwatt-colors__lightgrey: #D9E1E1;
    --solarwatt-colors__sun: #F66841;
    --solarwatt-colors__greyshade15: #D9E1E1;
    --solarwatt-colors__greyshade65: #597A7E;
    --pf-v5-global--link--Color: var(--solarwatt-colors__forest);
}


/* We need to render one out of three stylings for this page, according to the url*/

/* This is only for installer-portal */
.swtt-custom-registration {
    display: none;
}

.swtt-home-portal:not(.swtt-installer-portal, .swtt-energy-manager) {
    background-image: url("../public/bg-home-opt.webp");
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
    background-position: 90% center;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;

    @media (max-width: 1000px) {
        background-position: 70% center;
    }

    @media (min-width: 1800px) {
        background-image: url("../public/bg-home-large.webp");
    }

    @media (max-width: 620px) {
        .kc-header__links {
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            background-color: white;
            top: 60px;
            right: 20px;
            padding: 10px;
            border-radius: 5px;

            a {
                color: var(--solarwatt-colors__darkForest);
            }
        }

        #hamburger {
            display: block;
            z-index: 3;
            color: var(--solarwatt-colors__darkForest);
        }

        .kc-header__links.active {
            display: flex;
            position: absolute;
            top: 60px;
            right: 20px;
            height: auto;
            z-index: 2;
            border: 1px solid var(--solarwatt-colors__darkForest);
            align-items: flex-start;
        }
    }

    #kc-header-wrapper div:first-child {
        background-image: url("../public/logo-swtt-blank.svg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        margin: 0;
        padding: 0;
        margin-left: 15px;
        height: 90px;
        width: 200px;

        span {
            display: none;
        }
    }

    .swtt-login-hint {
        display: none;
    }

    .kc-header__links {
        a {
            display: none;
        }

        .kc-header__links--manager-portal {
            display: block;
        }
    }

    .kc-form-footer-ruler {
        display: none;
    }
}

.swtt-energy-manager {
    background-image: url("../public/bg-manager-portal-opt.webp");
    background-repeat: no-repeat;
    background-position: 85% center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;

    @media (max-width: 1000px) {
        background-position: 80% center;
    }

    @media (max-width: 620px) {
        .kc-header__links {
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            background-color: white;
            top: 60px;
            right: 20px;
            padding: 10px;
            border-radius: 5px;

            a {
                color: var(--solarwatt-colors__darkForest);
            }
        }

        #hamburger {
            display: block;
            z-index: 3;
            color: var(--solarwatt-colors__darkForest);
        }

        .kc-header__links.active {
            display: flex;
            position: absolute;
            top: 60px;
            right: 20px;
            height: auto;
            border: 1px solid var(--solarwatt-colors__darkForest);
            z-index: 2;
            align-items: flex-start;
        }
    }

    #kc-header-wrapper div:first-child {
        background-image: url("../public/manager-portal.svg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        margin: 0;
        padding: 0;
        height: 90px;
        width: 200px;

        span {
            display: none;
        }
    }

    .kc-header__links {
        a {
            display: none;
        }

        .kc-header__links--energymanager {
            display: block;
        }

        .kc-header__links--installers-login {
            display: block;
        }

        .kc-header__links--solarwatt-homepage {
            display: block;
        }
    }
}

#hamburger {
    display: none;
    font-size: 32px;
    color: var(--solarwatt-colors__greyshade65);
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 15px;
}

.swtt-installer-portal {
    background-image: url("../public/bg-installer-portal-opt.webp");
    background-repeat: no-repeat;
    background-position: 80% center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;

    @media (max-width: 1000px) {
        background-position: 70% center;
    }

    @media (max-width: 620px) {
        .kc-header__links {
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            background-color: var(--solarwatt-colors__darkForest);
            top: 60px;
            right: 20px;
            padding: 10px;
            border-radius: 5px;

            a {
                color: white;
            }
        }

        #hamburger {
            display: block;
        }

        .kc-header__links.active {
            display: flex;
            position: absolute;
            top: 60px;
            right: 20px;
            height: auto;
            z-index: 2;
            border: 1px solid white;
            align-items: flex-start;
        }
    }


    #hamburger {
        color: white;
    }

    #kc-header {
        background-color: var(--solarwatt-colors__darkForest);
    }

    #kc-header-wrapper div:first-child {
        background-image: url("../public/installer-center.svg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        margin: 0;
        padding: 0;
        margin-left: 10px;
        height: 90px;
        width: 200px;

        span {
            display: none;
        }
    }

    .kc-header__links {
        a {
            color: white;
            display: none;
        }

        .kc-header__links--energymanager {
            display: block;
        }

        .kc-header__links--home {
            display: block;
        }

        .kc-header__links--pro-portal {
            display: block;
        }
    }

    .swtt-login-message-3 {
        display: none;
    }

    #login-select-toggle {
        background-color: var(--solarwatt-colors__darkForest);
        color: white;
    }


    .swtt-login-hint {
        .swtt-custom-message__manager-hint {
            display: none;
        }
    }

    .swtt-custom-registration {
        display: flex;
        gap: 10px;

        a {
            text-decoration: underline;
        }

        a:hover {
            color: var(--solarwatt-colors__darkForest);
        }
    }

}

.login-pf-page-header {
    background: var(--solarwatt-colors__darkForest);
    color: white;
}

#kc-login, .pf-v5-c-button.pf-m-primary {
    width: 100%;
    padding: 10px 0;
    border-radius: 24px;
    background-color: var(--solarwatt-colors__sun);
    color: white;

    &:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}

#kc-form-wrapper {
    color: var(--solarwatt-colors__forest);
}

.swtt-forgot-password {
    color: var(--solarwatt-colors__forest);
    text-decoration: underline;
}

.swtt-checkbox {
    position: relative;
}

.pf-v5-c-form__label-text {
    color: var(--solarwatt-colors__forest);
    font-family: "Averta Bold", sans-serif;
}

.login-pf-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-end: auto;

    :nth-child(2) {
        text-align: end;

        > *:not(.pf-v5-c-button.pf-m-primary) {
            color: var(--solarwatt-colors__forest);
        }
    }
}

#kc-reset-password-form {
    .pf-v5-c-form__group.login-pf-settings {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30px;

        div, a {
            width: 100%;
        }

        #kc-form-options {
            align-self: flex-end;
            height: auto;

            a {
                text-decoration: underline;
            }
        }

    }
}

#kc-reset-password-form {
    #username {
        line-height: 2rem;
        border: none;
    }
}

.login-pf body {
    background-color: var(--solarwatt-colors__darkForest);
}

.login-pf-manager body {
    background: url("../public/bg-manager-portal.webp") no-repeat right center fixed;
    background-size: cover;
    height: 100%;
}

.login-pf-home body {
    background: url("../public/bg-home-large.webp") no-repeat center center fixed;
    background-size: cover;
}

.login-pf-installer body {
    background: url("../public/bg-installer-portal.webp") no-repeat center center fixed;
    background-size: cover;

    @media (min-width: 1400px) {
        background: url("../public/bg-installer-portal-large.webp") no-repeat center center fixed;
        background-size: cover;
    }
}

.login-pf-page-header {
    background: #fff;
    color: #000;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.login-pf-installer {
}

#kc-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height: 90px;
    background: #fff;
}

#kc-header-wrapper {
    flex-shrink: 0;
    position: relative;
    width: 200px;
}

.kc-header__links {
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    flex: 1;

    a {
        color: var(--solarwatt-colors__greyshade65);
    }
}


.swtt-language-select {
    right: 10px;

    select {
        width: 50px;
        color: var(--solarwatt-colors__greyshade65);
        border: none;
    }
}

.swtt-login-hint {
    color: var(--solarwatt-colors__forest);
    font-family: "Averta Regular", sans-serif;
    font-size: 16px;
    margin-top: 10px;
}

.kc-form-footer-links {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: left;

    a {
        color: var(--solarwatt-colors__greyshade65);
    }
}

.kc-form-footer-ruler {
    border: 1px solid var(--solarwatt-colors__greyshade15);
}


.swtt-language-select button svg {
    width: 20px;
    padding-top: 5px;
}

.pf-v5-c-login__main {
    font-family: "Averta Regular", sans-serif;

    h1 {
        font-family: "Averta Bold", sans-serif;
    }

    input {
        background-color: var(--solarwatt-colors__lightgrey);
        color: var(--solarwatt-colors__forest);
    }
}

.pf-v5-c-login__container {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (min-width: 1900px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media (min-width: 2200px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    @media (max-width: 1200px) {
        grid-template-columns: 1fr;
    }
}

.pf-v5-c-login__main-header {
    grid-column-start: 1;
    color: var(--solarwatt-colors__forest);
}

.pf-v5-c-form-control__utilities {
    display: none;
}

/* NO JAVASCRIPT ENABLED */
.kc-logo-text {
    background-image: url("../public/logo-default.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    margin: 0;
    padding: 0;
    margin-left: 10px;
    height: 90px;
    width: 200px;

    span {
        display: none;
    }
}

#login-targets {
    display: none;
}

.show-targets {
    #login-targets {
        display: block;
        width: 75%;
        @media (min-width: 1000px) {
            width: 50%;
        }
        @media (min-width: 1500px) {
            width: 33%;
        }
    }
    #login-form-container {
        display: none;
    }
}

.target-buttons-container {
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    font-family: "Averta Bold", sans-serif;
    color: var(--solarwatt-colors__forest);
    gap: 20px;

    @media (max-width: 800px) {
        padding: 0 1rem;
    }
}

.target-buttons-header {
    padding-bottom: 2rem;
}


.target-buttons-headline {
    color: var(--solarwatt-colors__forest);
    font-family: "Averta Bold", sans-serif;
    font-size: 20px;
}

.target-buttons {
    cursor: pointer;
    display: flex;
    font-family: "Averta Bold", sans-serif;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    border-radius: 24px;
    background-color: white;
    color: var(--solarwatt-colors__forest);
    border: 2px solid var(--solarwatt-colors__forest);
}

.target-buttons-container-headline {
    color: var(--solarwatt-colors__forest);
    font-family: "Averta Bold", sans-serif;
    font-size: 24px;
}

.target-buttons-footer-links {
    padding-left: 3rem;
    padding-top: 1rem;
    padding-bottom: 2rem !important;
    display: flex;
    gap: 2rem;

    @media (max-width: 600px) {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1rem;
    }
    a {
    color: var(--solarwatt-colors__greyshade65);
    }
}

.target-buttons-footer-ruler {
    margin-top: 1.5rem;
    border: 1px solid var(--solarwatt-colors__greyshade15);
}

.show-targets {
    .kc-header__links {
        display: none;
    }
}