:root {
    --hitech-blue: #087fec;
    --hitech-blue-dark: #075fc7;
    --hitech-navy: #102b49;
    --hitech-border: #cedbea;
    --hitech-muted: #7b8ca2;
}

html,
body.login-form.hitech-ebok {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body.login-form.hitech-ebok {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    padding: 38px 9vw;
    overflow-x: hidden;
    background:
        linear-gradient(
            90deg,
            var(--hitech-blue-dark) 0%,
            #0879e5 39%,
            #fff 39%,
            #fff 100%
        );
    color: var(--hitech-navy);
    font-family: Arial, Helvetica, sans-serif;
}

/* Duży znak H po lewej */
body.login-form.hitech-ebok::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 4.5vw;
    top: 10vh;
    width: 28vw;
    height: 76vh;
    min-width: 310px;
    opacity: .42;
    background: linear-gradient(135deg, #d7ebff, #76b8ff);
    clip-path: polygon(
        0 0, 35% 13%, 35% 42%,
        65% 42%, 65% 13%, 100% 0,
        100% 100%, 65% 87%, 65% 58%,
        35% 58%, 35% 87%, 0 100%
    );
}

body.login-form.hitech-ebok::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -7vw;
    bottom: -20vh;
    width: 58vw;
    height: 68vh;
    opacity: .65;
    background:
        linear-gradient(
            135deg,
            rgba(217, 235, 255, .65),
            rgba(247, 251, 255, .15)
        );
    clip-path: polygon(18% 0, 100% 56%, 100% 100%, 0 100%);
}

/* Karta */
body.login-form.hitech-ebok > .container-fluid {
    position: relative;
    z-index: 2;
    width: 540px;
    max-width: calc(100vw - 64px);
    margin: 0;
    padding: 38px 44px 34px;
    border: 1px solid rgba(203, 218, 234, .65);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 22px 65px rgba(15, 48, 83, .14),
        0 3px 12px rgba(15, 48, 83, .07);
}

body.login-form.hitech-ebok .container-fluid > .row {
    display: block;
    margin: 0;
}

body.login-form.hitech-ebok .container-fluid > .row > .col {
    width: 100%;
    padding: 0;
}

/* Logo i tytuł */
body.login-form.hitech-ebok .form-signin-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 28px;
}

body.login-form.hitech-ebok .hitech-brand-logo {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 8px;
}

body.login-form.hitech-ebok .hitech-login-title {
    display: block;
    color: var(--hitech-navy);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.5px;
}

/* Formularze */
body.login-form.hitech-ebok .form-signin {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.login-form.hitech-ebok
.form-signin fieldset.hitech-credential-field {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    height: 56px;
    margin: 0 0 16px;
    padding: 0;
}

body.login-form.hitech-ebok
fieldset.hitech-credential-field > label {
    display: contents;
    font-size: 0;
}

/* Ikona */
body.login-form.hitech-ebok
fieldset.hitech-credential-field::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 56px;
    border: 1px solid var(--hitech-border);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background-color: #f4f8fc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 21px;
}

body.login-form.hitech-ebok
fieldset.hitech-login-field::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23102b49' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.52 0-10 2.69-10 6v2h20v-2c0-3.31-4.48-6-10-6Z'/%3E%3C/svg%3E");
}

body.login-form.hitech-ebok
fieldset.hitech-password-field::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23102b49' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3Zm-7-2a2 2 0 0 1 4 0v2h-4V6Zm3 11.73V20h-2v-2.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
}

/* Pola */
body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control {
    position: static;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--hitech-border);
    border-radius: 0 7px 7px 0;
    background: #fff;
    color: var(--hitech-navy);
    font-size: 17px;
}

body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control::placeholder {
    color: var(--hitech-muted);
    opacity: 1;
}

body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control:focus {
    z-index: 2;
    border-color: var(--hitech-blue);
    box-shadow: 0 0 0 3px rgba(8, 127, 236, .14);
}

/* Przycisk */
body.login-form.hitech-ebok
#login button[name="loginform[submit]"],
body.login-form.hitech-ebok
#remind button[name="remindform[submit]"] {
    width: 100%;
    min-height: 56px;
    margin: 2px 0 0;
    border: 0;
    border-radius: 7px;
    background:
        linear-gradient(135deg, #0794f5, var(--hitech-blue));
    box-shadow: 0 9px 21px rgba(8, 127, 236, .22);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

body.login-form.hitech-ebok
#login button[name="loginform[submit]"]:hover,
body.login-form.hitech-ebok
#remind button[name="remindform[submit]"]:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
}

body.login-form.hitech-ebok .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 17px 0;
}

body.login-form.hitech-ebok .form-signin > a,
body.login-form.hitech-ebok .form-signin > p a {
    display: block;
    margin-top: 19px;
    color: var(--hitech-blue-dark);
    text-align: center;
}

/* Zwykłe pola przypominania i kodów */
body.login-form.hitech-ebok
.form-signin fieldset:not(.hitech-credential-field) {
    color: var(--hitech-navy);
}

body.login-form.hitech-ebok
.form-signin fieldset:not(.hitech-credential-field) .form-control {
    border-color: var(--hitech-border);
    border-radius: 7px;
    background: #fff;
}

/* Telefon */
@media screen and (max-width: 700px) {
    body.login-form.hitech-ebok {
        justify-content: center;
        min-height: 100vh;
        padding: 22px 14px;
        background:
            linear-gradient(
                155deg,
                var(--hitech-blue-dark) 0,
                #0784eb 31%,
                #f8fbff 31%
            );
    }

    body.login-form.hitech-ebok::before {
        top: -22px;
        left: -20px;
        width: 190px;
        min-width: 0;
        height: 230px;
        opacity: .22;
    }

    body.login-form.hitech-ebok::after {
        display: none;
    }

    body.login-form.hitech-ebok > .container-fluid {
        width: min(100%, 440px);
        max-width: 100%;
        padding: 29px 23px 25px;
        border-radius: 17px;
    }

    body.login-form.hitech-ebok .hitech-brand-logo {
        width: 78px;
        height: 78px;
    }

    body.login-form.hitech-ebok .hitech-login-title {
        font-size: 24px;
    }
}

/* HITECH VALIDATION FIX */

/* Puste wymagane pola nie są błędem przed próbą wysłania */
body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control:invalid {
    border-color: var(--hitech-border) !important;
    box-shadow: none;
}

/* Fokus pozostaje niebieski */
body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control:focus {
    border-color: var(--hitech-blue) !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 236, .14) !important;
}

/* Błąd dopiero po interakcji użytkownika */
body.login-form.hitech-ebok
fieldset.hitech-credential-field input.form-control:user-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .12);
}