@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url(./Inter-roman.var.woff2) format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url(./Inter-italic.var.woff2) format('woff2');
}

body,
html {
    color: hsl(241, 77%, 12%);
    height: 100%;
    font-family: Inter, sans-serif, sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: hsl(227, 100%, 50%);
}

form {
    height: 100%;
}

* {
    box-sizing: border-box;
}

.text--small {
    font-size: 12px;
}

.text--error {
    color: hsl(0, 89%, 57%);
    font-weight: normal;
}

.top-bar {
    align-items: center;
    background: hsla(0, 0%, 100%, 0.6);
    display: flex;
    height: 40px;
    left: 0;
    padding: 5px 16px;
    position: absolute;
    top: 0;
    width: 100%;
}

    .top-bar .logo {
        height: 30px;
        width: auto;
    }

    .top-bar .product-name {
        font-weight: 600;
        padding-left: 16px;
    }

.login-wrapper {
    background-image: url(/ClientResources/Images/login-background-image-munters.png);
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    justify-content: center;
    align-items: center;
}

@supports (min-height: 100dvh) {
    .login-wrapper {
        min-height: 100dvh; /* preferred on mobile */
    }
}

.modal {
    background: hsla(0, 0%, 100%, 0.46);
    max-width: 50%;
    padding: 32px 20px;
    width: 500px;
    -webkit-animation: modalGrow 0.15s 0.5s ease-out both;
    animation: modalGrow 0.15s 0.5s ease-out both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

    .modal ol {
        display: block;
        list-style: none;
        margin: 0 auto;
        padding: 0;
        max-width: 325px;
        width: auto;
    }

        .modal ol li {
            margin-bottom: 15px;
            text-align: center;
        }

            .modal ol li:last-child {
                margin-bottom: 0;
            }

            .modal ol li.login-header-container {
                text-align: left;
            }

            .modal ol li .login-header {
                font-size: 1.437rem;
                font-weight: 300;
                letter-spacing: -0.019rem;
                line-height: 2.5rem;
            }

            .modal ol li ul {
                list-style: none;
                padding-left: 0;
            }

                .modal ol li .text--error ul li {
                    margin-bottom: 0.4rem;
                }

        .modal ol label {
            display: block;
            margin-bottom: 4px;
        }

        .modal ol input {
            font-family: Inter, sans-serif, sans-serif;
        }

            .modal ol input[type='text'],
            .modal ol input[type='email'],
            .modal ol input[type='password'] {
                background: hsl(0, 0%, 100%);
                border: 1px solid hsl(0, 0%, 62%);
                border-radius: 4px;
                color: hsl(241, 77%, 12%);
                outline: none;
                transition: all 0.2s ease-in-out;
            }

            .modal ol input[type='text'],
            .modal ol input[type='email'],
            .modal ol input[type='password'],
            .modal ol input[type='submit'],
            .modal ol .link {
                font-size: 16px;
                padding: 10px;
                width: 100%;
            }

            .modal ol input[type='submit'],
            .modal ol .link {
                background-color: #1776da;
                border: 0 solid;
                border-color: #1776da;
                border-radius: 100px;
                padding: 1rem 1.25rem;
                color: #fff;
                cursor: pointer;
            }

        .modal ol .link {
            display: block;
            text-decoration: none;
        }

        .modal ol label {
            display: block;
            font-size: 14px;
            text-align: left;
        }

        .modal ol input[type='checkbox'] {
            margin-right: 4px;
        }

        .modal ol input:focus {
            border: 1px solid hsl(227, 100%, 50%);
        }

        .modal ol input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px hsl(0, 0%, 100%) inset;
        }

        .modal ol p {
            margin: 0;
        }

.cookie-information {
    height: auto;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    padding-top: 10px;
    text-align: left;
    transition: all 0.1s ease-in;
}

    .cookie-information.is-visible {
        max-height: 100px;
        opacity: 1;
        transition: all 0.2s ease-in;
    }

@-webkit-keyframes modalGrow {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes modalGrow {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}