html {
    height:100%;
}
body {
    padding-bottom: 40px;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #fff;
    background-image: url(../Images/login-image-1802px.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.form-signin {
    vertical-align: middle;
    text-align: center;
}

.FormContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    /*background-color: rgba(255, 255, 255, 0.90);*/
    background-size:cover;
    margin-left: -165px;
}

.Loginform {
    display: inline-block;
    height: 100%;
    position: relative;
}

.Loginform {
    background-color: white;
}

@media screen and (orientation:portrait) {
    .Loginform.robot {
        margin-top: 20vh;
        padding-top: 50px;
    }

    .Loginform.robot > ul > li > img {
        height: 10vh;
    }
}

@media screen and (orientation:landscape) {
    .Loginform.robot {
        margin-top: 10vh;
        padding-top: 50px;
    }

    .Loginform.robot > ul > li > img {
        height: 20vh;
    }
}


.spacer {
    height:40px;
}
    

.FormContainer, .FormContainer ul {
    width: 330px;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.FormContainer ul {
    margin: 0;
    padding: 0px 20px;
}


.FormContainer ul li {
    display: inline-block;
    float: left;
    width: 100%;
}

 .FormContainer ul li:nth-child(1) 
{
    background: none;
    padding: 5% 0%;
    border: none;
}
.FormContainer ul li:nth-child(1) .form-control {
    height: 44px;
    border: 2px solid #ddd;
    box-shadow: none;
    outline: none;
}
.FormContainer ul li:nth-child(1) .form-control.red {
    border: 2px solid red;
}

.FormContainer ul li:nth-child(1) .form-control::-webkit-input-placeholder {
   color: #C3C1C1;
}

.FormContainer ul li:nth-child(1) .form-control:-moz-placeholder { /* Firefox 18- */
   color: #C3C1C1;  
}

.FormContainer ul li:nth-child(1) .form-control::-moz-placeholder {  /* Firefox 19+ */
   color: #C3C1C1;  
}

 .FormContainer ul li:nth-child(1) .form-control:-ms-input-placeholder {  
   color: #C3C1C1;  
}

/* on alert time*/
.FormContainer ul li:nth-child(1) .form-control.red::-webkit-input-placeholder {
   color: red;
}

 .FormContainer ul li:nth-child(1) .form-control.red:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

 .FormContainer ul li:nth-child(1) .form-control.red::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

 .FormContainer ul li:nth-child(1) .form-control.red:-ms-input-placeholder {  
   color: red;  
}
.FormContainer .lgnftrtxt {
    font-size: 10pt;
    color: #ffffff;
    margin-top: 360px;
}


.FormContainer ul li:nth-child(1) .form-control:focus {    
    border-color: #66afe9;
    box-shadow: 0 0 2px #66afe9;
}

.FormContainer ul li:nth-child(1) .form-control.Eml {
    background-image: url(../Images/email.png);
    background-repeat: no-repeat;
    background-position: 258px;
    background-size: 21px 25px;
}

 .FormContainer ul li:nth-child(1) .form-control.pass {
    background-image: url(../Images/pass.png);
    background-repeat: no-repeat;
    background-position: 258px;
    background-size: 21px 22px;
}

.FormContainer ul li:nth-child(1) .form-control.send {
    box-shadow: none;
    background: #72bb53;
    color: #fff;
    border: 1px solid #72ABD8;
    padding: 10px;
    margin-top: 30px;
    font-size: 17px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}

.FormContainer ul li:nth-child(1) .form-control.create {
    box-shadow: none;
    background: #75a9f9;
    color: #fff;
    border: 1px solid #72ABD8;
    padding: 10px;
    font-size: 17px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}

.FormContainer ul li:nth-child(1) .form-control.send:hover, .FormContainer ul li:nth-child(1) .form-control.send:focus {
    background: #60904c;
}

.FormContainer ul li:nth-child(1) .form-control.create:hover, .FormContainer ul li:nth-child(1) .form-control.create:focus {
    background: #577fbb;
}

.form-signin .form-signin-heading,
.form-signin .form-signin-logo, 
.form-signin .form-control, 
.form-signin input[type="submit"],
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px 35px 10px 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-signin .form-signin-logo {
    max-width: 300px;
}

.form-signin .form-signin-heading {
    text-align: center;
}

.form-signin input[type="checkbox"] {
    margin-right: 5px;
}

.error
{
    margin-bottom: 10px;
    color:red;
    text-align: left;
}

.input-validation-error{ border-color: red;}
.validation-summary-errors > ul > li{color: red;}

#logopanel {
    position: relative;
    top: -350px;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    font-family: 'Alice'; 
    font-size:72pt; 
    color: #dcf2e7;
    height: 80px;
}

#logo-mobile { 
    font-family: 'Megrim'; 
    font-size:28pt; 
    color: #713370;
    /*height: 70px;*/
    /*display: block;*/
    font-weight:bold;
    padding: 10px 0px 30px 0px;
}

#logodesc {
    font-size:28pt; 
    color: #004E63;
    text-align: left;
    padding-left: 11%;
    padding-right: 11%;
}

.footnote {
    position: relative;
    top: 20px;
    height: 0px;
    color: #FFFFFF;
    font-family: Arial,
         "Helvetica Neue",
         Helvetica,
         sans-serif;
}

#divForgot {
    margin: 20px 0px 10px 0px;
}

@media (max-aspect-ratio: 3/2) {
    body {
        background-size: auto;
    }
}

@media (max-width: 320px) {
    .FormContainer, .FormContainer ul {
        width: 300px;
    }

    .FormContainer {
        margin-left: -150px;
    }

    .FormContainer ul li:nth-child(1) .form-control.Eml, .FormContainer ul li:nth-child(1)  .form-control.pass {
        background-position: 228px;
    }
}