.syn-loading-inner::before, syn-auth-login-form.syn-auth-login-form--loading::before, .syn-loading-inner::after, syn-auth-login-form.syn-auth-login-form--loading::after {
    z-index: 1000;
    content: " ";
}

.syn-loading-inner::before, syn-auth-login-form.syn-auth-login-form--loading::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
}

.syn-loading-inner::after, syn-auth-login-form.syn-auth-login-form--loading::after {
    opacity: .5;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiICAgdmlld0JveD0iMCAwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+ICA8cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGw9IiMwMDAiIGQ9Ik0yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiAgICBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNCAgICBjMC02LjQyNSw1LjIwOS0xMS42MzQsMTEuNjM0LTExLjYzNGM2LjQyNSwwLDExLjYzMyw1LjIwOSwxMS42MzMsMTEuNjM0QzMxLjgzNCwyNi41NDEsMjYuNjI2LDMxLjc0OSwyMC4yMDEsMzEuNzQ5eiIvPiAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTI2LjAxMywxMC4wNDdsMS42NTQtMi44NjZjLTIuMTk4LTEuMjcyLTQuNzQzLTIuMDEyLTcuNDY2LTIuMDEyaDB2My4zMTJoMCAgICBDMjIuMzIsOC40ODEsMjQuMzAxLDkuMDU3LDI2LjAxMywxMC4wNDd6Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlVHlwZT0ieG1sIiAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgICAgICB0eXBlPSJyb3RhdGUiICAgICAgZnJvbT0iMCAyMCAyMCIgICAgICB0bz0iMzYwIDIwIDIwIiAgICAgIGR1cj0iMXMiICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4gICAgPC9wYXRoPiAgPC9zdmc+");
}

.syn-login-form {
    background-color: #F56E69;
    padding: 15px;
    margin: 15px auto !important;
    border-radius: 8px;
}

.syn-login-form_body {
    padding: 3rem 4rem;
}

.syn-login-form_row {
    margin-bottom: 2rem;
}

.syn-login-form_input, input[type=text] {
    border-width: inherit;
    line-height: inherit;
    height: inherit;
    border-style: inherit;
    padding: 0.9rem 2.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-family: Asap, sans-serif;
    width: 100%;
    color: #F56E69;
    -webkit-text-fill-color: #F56E69 !important;
}

    .syn-login-form_input:-webkit-autofill, input[type=text]:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
    }

    .syn-login-form_input:focus, input[type=text]:focus {
        outline-width: 0;
        box-shadow: inset 0 0 0 3px #ba4b47;
        -webkit-box-shadow: inset 0 0 0 3px #ba4b47;
    }

.checkbox-custom {
    opacity: 0;
}

    .checkbox-custom + .checkbox-custom-label::before {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0.3333333333rem;
        margin-right: 1rem;
        vertical-align: middle;
        background: #fff;
        border-radius: 8px;
        text-align: center;
        content: "";
    }

.checkbox-custom, .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1rem;
    cursor: pointer;
}

.checkbox-custom-label {
    font-size: 1.4rem;
    line-height: 2rem;
    color: #fff;
}

.checkbox-custom:checked + .checkbox-custom-label::before {
    color: #F56E69;
    content: "\2713";
}

.syn-login-form_submit {
    padding: 0.9rem 2.2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-family: Asap, sans-serif;
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    color: #fff;
    text-transform: uppercase;
}

.syn-login-form_errors {
    display: none;
    position: relative;
    padding: 2rem 4rem 0;
    margin-top: 2rem;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
}

.syn-user-card {
    height: 12.5rem;
}

    .syn-user-card .syn-user-card_picture {
        box-sizing: border-box;
        float: left;
        top: -2rem;
        left: 2rem;
        padding: 3px;
        background: #fff;
        border: #c8c8c8 1px solid;
    }

        .syn-user-card .syn-user-card_picture ._placeholder {
            width: 12.5rem;
            height: 12.5rem;
            background: #efefef;
        }

    .syn-user-card .syn-user-card_titles {
        margin-top: 2rem;
        margin-left: 16.5rem;
    }

    .syn-user-card .syn-user-card_title {
        font-size: 24px;
        color: #fff;
    }

    .syn-user-card .syn-user-card_subtitle {
        font-size: 14px;
        color: #949494;
    }

.syn-auth-login-form {
    font-family: Asap, sans-serif;
}

    .syn-auth-login-form .syn-login-form-logo {
        width: 100%;
        height: 60px;
        text-align: center;
    }

        .syn-auth-login-form .syn-login-form-logo logo svg, .syn-auth-login-form .syn-login-form-logo logo img {
            max-width: 60%;
            max-height: 60%;
        }


    .syn-auth-login-form.syn-auth-login-form {
        width: 100%;
        left: 0;
        height: 100%;
    }

    .syn-auth-login-form.syn-auth-login-form--error .syn-login-form_errors {
        display: block;
    }

    .syn-auth-login-form.syn-auth-login-form--success .syn-login-form {
        display: none;
    }

    .syn-auth-login-form.syn-auth-login-form--success .syn-user-card {
        display: block;
    }

    .syn-auth-login-form .syn-login-form, .syn-auth-login-form .syn-user-card {
        width: 100%;
        top: 50%;
        right: 0;
        left: 0;
        margin: auto;
        max-width: 450px;
    }

    .syn-auth-login-form .syn-login-body {
        width: 100%;
        top: 0;
        right: 0;
        bottom: 5.3rem;
        left: 0;
    }

    .syn-auth-login-form .syn-login-footer {
        box-sizing: border-box;
        width: 100%;
        height: 5.3rem;
        bottom: 0;
        font-size: 1rem;
        color: #fff;
        text-align: center;
    }

        .syn-auth-login-form .syn-login-footer span {
            display: inline-block;
            margin-right: 15px;
        }

.syn-login-form-logo {
    font-size: 140%;
    margin-bottom: 30px;
}

    .syn-login-form-logo .main-icon-bg {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 50px;
    }

.syn-login-form .syn-user-card_title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
}

.syn-login-form_submit {
    margin-top: 15px;
}

.syn-login-form .checkbox span {
    color: #fff;
}

@media (max-width: 767px) {
    .syn-login-form {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) {
    .syn-auth-login-form .syn-login-form-logo {
        height: 100px;
    }
}

.login-page {
    background-color: #fff;
}

.syn-auth-login-form .checkbox input:checked + span:before {
    background-color: #fff;
}

.checkbox input:checked + span:after {
    color: #F56E69;
}

.syn-login-footer {
    text-align: center;
}

@media (max-width: 767px) {
    .jkeyboard {
        display: none !important;
    }

    .syn-login-footer {
        margin-top: 20px;
        text-align: center;
    }
}