.logo-holder     { position: absolute; top: 20px; left: 20px; }
.logo-holder img { width: 220px; }

.background-login { background-image:url(media/crystal-kwok-mhUsz2ezlXQ-unsplash-colored-b.jpg); 
                    background-size: cover; display: flex; justify-content: space-between; 
                    align-items: center; flex-direction: column; }


.form-z-index { z-index: 5; position: relative; }


/* Login Container */
.login-box-title { color:white}
.login-box-container { background: linear-gradient(0deg, #00468d 0%, rgb(0 32 57) 100%); border-radius: 5px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.301); border: 1px solid rgba(255, 255, 255, 0.347); font-family: var(--font-01); line-height: 20px; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.483); }
        .login-input-container {background-color: rgb(0 0 0 / 40%);padding: 10px 0px;border-radius: 5px;margin-bottom: 8px;transition: 0.2s all;}
        .login-input-container:hover { background-color: rgb(255, 255, 255);   }
                .login-input-container:hover i { color:black;    }
                .login-input-container:hover input  { color:black  }
                .login-input-container:hover input::placeholder  { color:rgb(188, 188, 188)  }
        .login-box-container i {color:white; text-indent: 15px; }
        .login-input-container input { background-color: transparent; border: 0px; outline: none; color:white; width: 80%; text-indent: 20px;  }
        .login-input-container input::placeholder { color:white;  }
        
.login-form-options  { color:white;}
.login-form-options a, label {  color:white}

.login-options {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;font-size: 0.8em;}

.login-title-container { margin-bottom: 20px;}
        .login-box-title { font-family: var(--font-01); font-weight: 600;}
        .login-box-subtitle { font-family: var(--font-01); font-style: italic; font-weight: 200; color:white; font-size: 2em;}

        .login-form-submit { font-family: var(--font-01); color:var(--color-blue); font-weight: 800; font-size: 2em; width: 145%; margin-left: -23%; padding: 20px; border: 0px; border-radius: 1px; border-bottom: 5px solid white; position:relative; transition: 0.2s; }
        .login-form-submit:hover { background-color: rgb(255, 255, 255); box-shadow: 0px 10px 20px rgba(16, 130, 196, 0.871); letter-spacing: 2px; color: black; border-bottom: 5px solid rgb(163, 206, 255); }

        .spinner-wrapp {   position: absolute; right: 16px; top: 11px; }

        .fa-custom-spinner { text-indent: 0px !important; background-color: #26ba8c; padding: 5px; border-radius: 50px; right: 27px; top: 11px; text-shadow: 0px 0px 7px #6a848e; font-size: 1em; letter-spacing: 0px !important; }



.login-text-footer { font-family: var(--font-01); color:white; padding: 10px 10px; text-align: center;}

@media only screen and (min-width: 320px) and (max-width: 800px)  
{

        .background-login { overflow: scroll;}
        .login-lang-selector { margin: 10px 10px;  text-align: center; position: absolute; top:-160px; right: 0px; flex-direction: column; font-size: 1em;}
        .login-lang-selector li { list-style-type: none;  text-align: center; margin: 0px 10px; }
        .logo-holder { position: relative; margin-bottom: 40px; left: unset; top:10px  }
        .login-text-footer { font-size: 0.80em; line-height: 15px;}
        .login-form-submit {               
                font-size: 1.7em;
                width: 100%;
                margin: unset;
                padding: 10px 0px;
                border: 0px;
                border-radius: 5px;
            }

}