/* HTML A CUSTOM VARIABLES
----------------------------------------------------------*/

@font-face {
    font-family: 'RobotoBold';
    font-style: normal;
    font-weight: bold;
    src: url('/fonts/roboto-v50-latin_latin-ext-500.woff2') format('woff2');
    font-display: block;
}

html,
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

body {
    background-color: var(--g-color--grey-2);
}

/* app {
    disables viewport movement in iOS 
    position: fixed;
    width: 100%;
    height: 100%;
}*/

input,
textarea {
    font-weight: 500;
    letter-spacing: 0.02em;
}

select {
    font-family: 'RobotoBold', sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}


/* FORMPAGE
----------------------------------------------------------*/

.g-form-page__header {
    padding: 4rem 0;
}

.g-form-page__heading {
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
}

.g-form-page__sub-heading {
    text-align: center;
}

.g-form-page__sub-heading__image {
    display: none;
    width: 2.4rem;
    padding-top: 2.4rem;
    vertical-align: top;
    border-radius: 50%;
    background-size: cover;
    margin-right: 0.7rem;
    background-image: url(/img/formpage/g-backend_web_loginimg.svg);
}

.g-form-page__box {
    box-sizing: border-box;
    width: 25%;
    min-width: 45rem;
    padding: 4rem;
    margin-left: auto;
    margin-right: auto;
}

.g-form-page__box__image {
    width: 50%;
    padding-top: 50%;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 4rem;
    border-radius: 50%;
    background-size: cover;
    background-image: url(/img/formpage/g-backend_web_loginimg.svg);
}

.g-form-page--mb-large {
    margin-bottom: 4rem;
}

.g-form-page--mb-small {
    margin-bottom: 2rem;
}

.g-form-page--mt-large {
    margin-top: 4rem;
}

.g-form-page--mt-small {
    margin-top: 2rem;
}


/* PROVIDERS
----------------------------------------------------------*/

.g-form-page__providers {
    padding: 0;
}

.g-form-page__providers li {
    display: block;
    border-bottom-width: 0.2rem;
    border-bottom-style: solid;
}

.g-form-page__providers li:last-child {
    border-bottom-width: 0;
}

.g-form-page__providers li > a {
    position: relative;
    display: flex;
    justify-content: center;
    height: 6rem;
    padding: 0 4rem;
}

.g-form-page__providers li > a:focus,
.g-form-page__providers li > a:hover,
.g-form-page__providers li > a:active,
.g-form-page__providers li > a.g-working {
    background-color: var(--g-input--focus--hover--background);
}

.g-form-page__providers__icon {
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
    margin: 0 0.8rem 0 -1rem;
    background-image: url(/img/layout/g-backend_web_icons_m.svg);
    background-position: 0 0;
    background-size: 1000%;
    transform-origin: right;
}

.g-form-page__providers__text {
    font-size: 1.6rem;
    height: 6rem;
    line-height: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left;
}

.g-form-page__providers li > a:focus .g-form-page__providers__icon,
.g-form-page__providers li > a:hover .g-form-page__providers__icon,
.g-form-page__providers li > a:active .g-form-page__providers__icon {
    background-position: -100% 0;
}


/* LOADPAGE
----------------------------------------------------------*/

.g-load-page_wrapper {
    width: 100%;
    height: 100%;
}

.g-load-page__upper-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    margin-left: -15%;
    margin-top: calc(-15% - 2rem);
    text-align: center;
}

.g-load-page__inner-text {
    font-family: Arial, Helvetica, Sans-Serif;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    margin-left: -15%;
    margin-top: -0.5em;
    text-align: center;
}

.g-load-page__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    padding-bottom: 30%;
    margin-left: -15%;
    margin-top: -15%;
    background-image: url(/img/layout/g-backend_web_apploader.svg);
    background-size: cover;
    animation: g-load-page__loader-animation 1.5s linear infinite;
}


/* ANIMACE
----------------------------------------------------------*/


@keyframes g-load-page__loader-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* RESPONSIVE
----------------------------------------------------------*/

@media screen and (width > 1280px) {

    .g-load-page__upper-text {
        width: 25%;
        margin-left: -12.5%;
        margin-top: calc(-12.5% - 2rem);
    }

    .g-load-page__inner-text {
        width: 25%;
        margin-left: -12.5%;
    }

    .g-load-page__loader {
        width: 25%;
        padding-bottom: 25%;
        margin-left: -12.5%;
        margin-top: -12.5%;
    }
}

@media screen and (width <= 1024px) {

    html {
        font-size: 8px;
    }

    .g-form-page__box {
        width: 55%;
    }

    .g-form-page__sub-heading {
        margin-top: 0.5rem;
    }

    .g-form-page__sub-heading__image {
        display: inline-block;
    }

    .g-form-page__box__image {
        display: none;
    }

}

@media screen and (width > 820px) and (width <= 1024px) and (orientation: landscape) {

    .g-form-page__box {
        width: 40%;
    }
    
    .g-load-page__upper-text {
        width: 35%;
        margin-left: -17.5%;
        margin-top: calc(-17.5% - 2rem);
    }

    .g-load-page__inner-text {
        width: 35%;
        margin-left: -17.5%;
    }

    .g-load-page__loader {
        width: 35%;
        padding-bottom: 35%;
        margin-left: -17.5%;
        margin-top: -17.5%;
    }
}

@media screen and (width <= 820px), (width > 820px) and (width <= 1024px) and (orientation: portrait) and (hover: none) {

    body {
        background-color: var(--g-color--grey-4);
    }

    body.g-body--form-page {
        background-color: var(--g-color--grey-4);
    }

    .g-form-page__header {
        padding-bottom: 0;
        background-color: var(--g-color--grey-4);
    }

    .g-form-page__box {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        box-shadow: none !important;
    }

    .g-form-page--mb-large {
        margin-bottom: 2rem;
    }

    .g-form-page--mb-small {
        margin-bottom: 1rem;
    }

    .g-form-page--mt-large {
        margin-top: 2rem;
    }

    .g-form-page--mt-small {
        margin-top: 1rem;
    }

    .g-form-page__providers {
        width: calc(100% - 4rem);
        margin-top: 0;
        padding: 0;
    }

    .g-form-page__providers li > a {
        padding: 0 2rem;
    }

    .g-load-page__upper-text {
        width: 70%;
        margin-left: -35%;
        margin-top: calc(-35% - 2rem);
    }

    .g-load-page__inner-text {
        width: 70%;
        margin-left: -35%;
    }

    .g-load-page__loader {
        width: 70%;
        padding-bottom: 70%;
        margin-left: -35%;
        margin-top: -35%;
    }
}


/* RESPONSIVE
----------------------------------------------------------*/

@media screen and (width > 820px) and (width <= 1024px) and (orientation: landscape), (width > 820px) and (width <= 1024px) and (hover: hover), (width > 1024px) {

    /* duplicates due to different behavior: */
        .g-text-color--grey--desktop {
            color: var(--g-text-color--grey) !important;
        }
}

@media screen and (width <= 820px), (width > 820px) and (width <= 1024px) and (orientation: portrait) and (hover: none) {

    /* duplicates due to different behavior: */
        .g-mobile--min--display-none {
            visibility: hidden;
            display: none !important;
        }

        .g-mobile--min--display-block {
            visibility: visible;
            display: block !important;
        }

        .g-mobile--min--display-none--fluid {
            visibility: hidden;
            pointer-events: none;
        }

        .g-mobile--min--display-block--fluid {
            visibility: visible;
            pointer-events: auto;
        }

        .g-text-color--grey--mobile {
            color: var(--g-text-color--grey) !important;
        }
}


/* TOUCH DEVICES
----------------------------------------------------------*/

@media screen and (pointer: coarse) {

    * {
        touch-action: manipulation; /* disables double tap zoom on clickable elements in iOS */
    }

    .g-form-page__providers li > a:hover:not(:active):not(.g-working) {
        background-color: white;
    }

    .g-form-page__providers li > a:hover:not(:active) .g-form-page__providers__icon {
        background-position: 0 0;
    }

}