html {
        min-height: 100%;
}

body {
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--log_in_main_text_color);
        background: var(--log_in_bg_color_base);
        background: -moz-linear-gradient(top,
                var(--log_in_bg_color_base) 0%,
                var(--log_in_bg_color_gradient) 100%
        ); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0%,var(--log_in_bg_color_base)),
                color-stop(100%,var(--log_in_bg_color_gradient))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,
                var(--log_in_bg_color_base) 0%,
                var(--log_in_bg_color_gradient) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,
                var(--log_in_bg_color_base) 0%,
                var(--log_in_bg_color_gradient) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,
                var(--log_in_bg_color_base) 0%,
                var(--log_in_bg_color_gradient) 100%); /* IE10+ */
        background: linear-gradient(to bottom,
                var(--log_in_bg_color_base) 0%,
                var(--log_in_bg_color_gradient) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(
                startColorstr='var(--log_in_bg_color_base)',
                endColorstr='var(--log_in_bg_color_base)',GradientType=0 ); /* IE6-8 */
        background-repeat: no-repeat;
        background-attachment: fixed;
}

div, input, h1, span {
        font-family: Tahoma, Helvetica, sans-serif;
        font-size: 18px;
        font-style: normal;
}

.wf-active div,
.wf-active input,
.wf-active h1,
.wf-active span {
        font-family: 'Lato';
}

#logo {
        background: var(--custom_logo_login);
    background-size: var(--custom_logo_size);
    width: 100%;
    height: 110px;
}

/** {
        border: 1px solid red;
}*/

h1 {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 20px;
        min-height: 20px;
        margin-top: 30px;
        padding-bottom: 10px;
        color: var(--log_in_text_color);;
        padding-top: 25px;
        text-align: center;
}

h1 span {
        font-size: 20px;
}

h1 a {
        text-decoration: none;
        color: inherit;
}

#login_box, #login_box_bg {
        height: 450px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

}

.sso_box {
        text-align: center;
        padding: 5px;
        border-radius: 5px;
        display: inline-block;
        width: 350px;
        height: 40px;
        margin:5px;
        cursor: pointer;
        text-decoration: none; /* Ensure no default underlining for the link */
        color: #000;
}

.sign_in_icon{
        margin-top: 3px;
        margin-left: 5px;
        width: 35px;
        height: 35px;
}

#sign_in_label {
        font-size: 20px;
        font-weight: bold;
        margin-left: 10px;
        line-height: 64px;
        margin-bottom: 5px;
}

.line-with-text {
        width: 85%;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        margin-left: 20px;
}

.line-with-text hr {
        flex: 1;
        border: none;
        height: 1px;
        background-color: #ccc;
}

.providers hr {
        flex: 1;
        border: none;
        height: 1px;
        background-color: #ccc;
}

.or-text {
        padding: 0 10px;
        color: #555;
}

i.icon.eye.slash:before { content: "\f070"; }

.providers {
        margin: auto;
        width: 100%;
        max-width: 303px;
        margin-right: 37px;
}

.providers .btn-google-login {
        background-color: #fff;
        border-color: #356195d9;
        border-radius: 10px;
        margin-top: 20px;
}

.providers .btn img {
        margin-bottom: 15px;
}

.providers .btn>span:first-child {
        background: white;
        padding: 7px;
        width: 38px;
        height: 38px;
        text-align: center;
}
.providers .btn>span:last-child {
        margin-left: 24px;
}

.providers .btn {
        font-weight: bold;
        text-decoration: none;
        display: flex;
        margin-bottom: 10px;
        width: 100%;
        border-radius: 20px;
        text-align: left;
        height: 40px;
        padding: 0;
        color: #686565;
}

.btn, .btn-raised, .btn-basic, .btn-stroked {
        border-radius: 20px;
        padding: 0 20px;
        min-width: 100px;
        height: 40px;
        font-size: 13px;
        line-height: 40px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        letter-spacing: 0.3px;
}


#login_password_field {
        display: inline;
        width: 426px;
        text-align: left;
}

#login_box {
        padding: 20px;
        width: 360px;
}

#login_box_outer {
        margin-top:20px;
        background: #FFFFFF;
        background-image: linear-gradient(rgba(var(--log_in_box_bg_color), 0.23), rgba(var(--log_in_box_bg_color), 0));
        border-radius: 10px;
        height: 450px;
        z-index: -1;
        position: absolute;
        top: 113px;
        left: 0;
        right: 0;
        box-shadow: 0px 2px 12px 0px rgba(45,45,45,0.50);
}

#login_box_bg {
        position: absolute;
        width: 385px;
        height: 650px;
}

#login_username, #login_password, #login_code {
        cursor: pointer;
        width: 85%;
        margin-left: 20px;
        min-height: 22px;
}

#username, #password, #code {
        width: 85%;
        margin-left: 20px;
        padding: 5px;
        background-color: #fff !important;
        -webkit-box-shadow: 0 0 0px 1000px #fff inset;
        border: 1px solid #BCBCBC;
        border-radius: 5px;
        outline: none;
        min-height: 23px;
}

#code {
        letter-spacing: 10px;
        color: black;
        font-weight: bold;
        text-align: center;
}

#login_password {
        margin-top: 10px;
}

#login_code {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
}

#username:focus,
#password:focus {
        border: 1px solid gray;
        outline: none;
}

#login_username_field {
        margin-bottom: 20px;
}

#error {
        border-bottom: 1px solid #D0021B;
        color: #D0021B;
        background: #F7E6E8;
        font-weight: bolder;
        width: 100%;
        margin-bottom: 0px;
        text-align: center;
        z-index: 1000;
        position: absolute;
        top: 0;
        left: 0;
}

#error span {
        display: block;
        padding: 5px;
        font-size: 14px;
        font-weight: 700;
}

form {
        display: inline;
        margin: 0;
        padding: 0;
}

#login_button {
        margin-top: 20px;
        margin-left: 130px;
}

#login_button_label {
    display: inline-block;
    padding: 10px 110px;
    border-radius: 8px;
    background-color: hsl(216.77deg 24.89% 27.86%);
    color: white;
    text-align: center;
    cursor: pointer;
    margin-left: -110px;
    margin-top: 7px;
    background-image: linear-gradient(90deg, hsl(188.22, 100%, 28.63%) 0%, hsl(188.22, 100%, 28.63%) 100%);
    background-size: 0% 100%; /* Initial size of the gradient */
    background-repeat: no-repeat; /* Prevents the background from repeating */
    transition: background-size 1s ease; /* Smooth transition of background size */
}

#login_button_link {
        color: black;
        outline: none;
        text-decoration: none;
}

#login_button input {
        visibility: hidden;
        position: absolute;
        left: -999em;
}

i.lock {
        color: #F89D06;
}

#login_button_link .login_ok {
        color: #ffffff;
}

#login_button_link:hover .login_ok {
        color: #ffffff;
}

#go_back_box {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100px;
}

#back_button {
        display: inline-block;
        margin-top: 5px;
        margin-right: 20px;
}

#buttons {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 360px;
}

#back_button_label {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 20px;
        background-color: #aa1a07;
        color: white;
        text-align: center;
        cursor: pointer;
}

#back_button_link {
        color: black;
        outline: none;
        text-decoration: none;
}

#back_button input {
        visibility: hidden;
        position: absolute;
        left: -999em;
}

#back_button_label:hover {
        color: #ffffff;
}

#login_button_label:hover {
        background-size: 100% 100%; /* Fills the entire background on hover */
}


#login_box_bg_sso {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 10px;
        margin-top: 0px;
        max-width:350px;

}

#login_box_sso {
        position: relative;
        top: -130px;
}

#login_box_outer_sso {
        background: rgba(255, 255, 255, 0.23);
        background-image: linear-gradient(-180deg, #FFFFFF 0%, var(--log_in_box_bg_color) 100%);
        border-radius: 10px;
        height: 230px;
        z-index: -1;
        position: relative;
        top: 113px;
        left: 0;
        right: 0;
        margin-top: 20px;
        box-shadow: 0px 2px 12px 0px rgba(45,45,45,0.50);
}



@media (max-width: 768px) {
    #login_box_bg_sso {
                max-width:350px;
                position: fixed;
                width: 100%;
                padding:20px;
                box-sizing: border-box;
    }
}

.sign_in_box {
        margin: 20px;
        display: flex;
        height: 20px;
        margin-top: 20px;
        background-color: #FFFFFF;
        border-radius: 40px;
        padding: 10px;
        box-shadow: 0px 2px 12px 0px rgba(45, 45, 45, 0.50);
        text-decoration: none;
        font-style: normal;

}

#sso_title {
        display: block;
        padding: 5px;
        font-size: 20px;
        color: var(--log_in_text_color);
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 700;
}

#login_box_title {
        color: var(--log_in_text_color);
        background-color: #FFFFFF;
        text-align: center;
        font-size: 18px;
        height: 40px;
        position: relative;
        margin: auto;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

}

#sign_in_text  {
        margin-left: 30px;
        color : black;
        font-size: 15px;
}