.login-card {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: white;
        z-index: 999;
        font-family: 'HelveticaNeueCyr';
        font-weight: 500;
        font-style: normal;
    }


    .login-page {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 20px;
        background: url(/design/images/background.jpg) no-repeat white;
        background-position: center center;
        background-size: cover;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: baseline;
    }

    .login-page>.login-holder {
        width: 40%;
        min-width: 370px;
        height: 100%;
        display: grid;
        justify-items: center;
        align-items: center;
        place-items: center;
    }

    .login-page>.login-holder>.login-form {
        width: 95%;
        max-width: 420px;
        margin: auto;
        border-radius: 8px;
        background: white;
        padding: 20px 20px 60px;
        box-shadow: 0px 3px 40px -2px rgb(106 119 142 / 55%);
        position: relative;
    }

    .login-page>.login-holder>.login-form>.logo {
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
        text-align: center;
        font-size: 38px;
        line-height: 1;
        font-weight: bold;
    }

    .login-page>.login-holder>.login-form>.logo img {
        width: 100%;
    }

    .login-page>.login-holder>.login-form>.msg {
        font-size: 14px;
        line-height: 180%;
        letter-spacing: 0.006em;
        color: #456585;
        text-align: center;
        margin-bottom: 30px;

    }



    .login-page>.login-holder>.login-form>.title {
        font-size: 16px;
        color: #000;
        text-align: center;
    }

    .login-page>.login-holder>.login-form>.loader {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.6);
        display: grid;
        justify-items: center;
        align-items: center;
        place-items: center;
        user-select: none;
        border-radius: 20px;
    }


    .login-page .input-field {
        position: relative;
        width: 100%;
    }

    .login-page .input-field>input {
        width: 100%;
        min-height: 30px;
        outline: none;
        background: white;
        text-shadow: none !important;
        text-align: left;
        line-height: 40px !important;
        height: 40px !important;
        border-radius: 5px;
        width: 100%;
        margin-top: 10px;
        border: 1px solid #e4e4e4;
        padding: 0 20px;
        box-shadow: 0 2px 2px 0 rgba(233, 233, 233, 0.55) !important;
        font-size: 14px;
        color: #77858c;
        z-index: 20;

        border: 1px solid #818181;
        color: #383838;
        font-family: HelveticaNeueCyr;
        font-style: normal;
        font-weight: 300;

        border: 1px solid #d6dbde;
    }

    .login-page .input-field>input:focus {
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(51 128 207 / 60%);
    }


    .login-page .input-field>input:-internal-autofill-selected {
        background-color: white !important;
    }

    .login-page .input-field>input.error {
        border: solid 1px red;
    }

    .login-page .input-field>input+label {
        position: absolute;
        pointer-events: none;
        left: 17px;
        top: 20px;
        line-height: 20px;
        transition: .3s;
        color: #bdced3;
        display: inline-block;
        background: #ffffff;
        padding: 0 3px;
        z-index: 0;
        color: #383838;
        font-family: HelveticaNeueCyr;
        font-style: normal;
        font-weight: 300;
    }

    /*.login-page .input-field > input:not(:focus):valid + label */

    .login-page .input-field>input:focus+label,
    .login-page .input-field>input:not(:focus):valid+label {
        top: 0px;
        z-index: 20;
    }




    .button {
        font-size: 16px;
        border-radius: 8px;
        color: #ffffff !important;
        display: inline-block;
        font-family: HelveticaNeueCyr;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        text-decoration: none !important;
        text-size-adjust: none;
        background: linear-gradient(97.25deg, #6BFFE4 -70.76%, #5197FF 133.16%);
        background: #ad0a0a;
        border-radius: 8px;
        padding: 10px 20px;
        line-height: 1;
        transition: all .1s ease-in-out;
    }

    .button:hover,
    .button:active,
    button:focus {
        background: linear-gradient(92.14deg, rgba(107, 255, 228, 0.66) -17.01%, rgba(81, 151, 255, 0.66) 112.14%);
        background: #8c0303;
        text-decoration: none;
        text-size-adjust: none;
        color: #ffffff;
    }

    .btn-login {
        width: 80%;
    }

    .lbl-error {
        color: red;
        font-size: 13px;
        font-family: HelveticaNeueCyr;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        margin: 10px 0;
        min-height: 20px;
    }


    .shake {
        -webkit-animation: shake 0.5s infinite;
        -moz-animation: shake 0.5s infinite;
        -o-animation: shake 0.5s infinite;
        animation: shake 0.5s infinite;
        position: relative;
    }

    @-webkit-keyframes shake {
        0% {
            top: 0px;
        }

        10% {
            top: 3px;
        }

        20% {
            top: 0px;
        }

        30% {
            top: -3px;
        }

        40% {
            top: 0px;
        }

        50% {
            top: 3px;
        }

        60% {
            top: 0px;
        }

        70% {
            top: -3px;
        }

        80% {
            top: 0px;
        }

        90% {
            top: 3px;
        }

        100% {
            top: 0px;
        }
    }

    @-moz-keyframes shake {
        0% {
            top: 0px;
        }

        10% {
            top: 3px;
        }

        20% {
            top: 0px;
        }

        30% {
            top: -3px;
        }

        40% {
            top: 0px;
        }

        50% {
            top: 3px;
        }

        60% {
            top: 0px;
        }

        70% {
            top: -3px;
        }

        80% {
            top: 0px;
        }

        90% {
            top: 3px;
        }

        100% {
            top: 0px;
        }
    }

    @-o-keyframes shake {
        0% {
            top: 0px;
        }

        10% {
            top: 3px;
        }

        20% {
            top: 0px;
        }

        30% {
            top: -3px;
        }

        40% {
            top: 0px;
        }

        50% {
            top: 3px;
        }

        60% {
            top: 0px;
        }

        70% {
            top: -3px;
        }

        80% {
            top: 0px;
        }

        90% {
            top: 3px;
        }

        100% {
            top: 0px;
        }
    }

    @keyframes shake {
        0% {
            top: 0px;
        }

        10% {
            top: 3px;
        }

        20% {
            top: 0px;
        }

        30% {
            top: -3px;
        }

        40% {
            top: 0px;
        }

        50% {
            top: 3px;
        }

        60% {
            top: 0px;
        }

        70% {
            top: -3px;
        }

        80% {
            top: 0px;
        }

        90% {
            top: 3px;
        }

        100% {
            top: 0px;
        }
    }


    .login-page>.info-holder {
        width: 60%;
    }


    .our-logo {
        position: fixed;
        right: 10px;
        top: 10px;
    }

    .our-logo>img {
        width: 250px;
    }


    .login-page>.login-holder>.login-form>.logo {
        width: 100%;
        font-size: 28px;
    }

    .login-page>.login-holder {
        width: 100%;
        min-width: unset;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .login-page>.login-holder>.login-form>.logo {
        font-size: 27px;
    }

    .login-page .btn-login {
        background: #0766e3;
    }

    .login-page .btn-login:hover {
        background: #5c9ef5;
    }

    .login-page>.login-holder>.login-form {
        box-shadow: 0px 3px 19px -3px rgb(106 119 142 / 50%);
    }

    .login-page .input-field>.passShow {
        display: block;
        position: absolute;
        right: 0;
        top: 26px;
        width: 16px;
        height: 12px;
        cursor: pointer;
        background: url(/design/images/eye_closed.svg) 00 no-repeat;
        background-size: contain;
        margin-right: 8px;

    }

    .login-page .input-field>.passShow.shown {
        background: url(/design/images/eye_open.svg) 00 no-repeat;
        width: 16px;
        height: 12px;
        top: 24px;
    }

    .login-page .input-field>#tbPass{
        padding-right: 30px;
    }

    @media (max-width: 550px) {

        .login-page>.login-holder>.login-form>.logo {
            font-size: 22px;
        }
    }