﻿body { font-family: Roboto, Verdana, Tahoma, sans-serif; margin: 0px; padding: 0px; }

.row { margin: 0px; }

.login-section { padding:15px 15px; background: #fff; box-shadow: 0 0 10px 0 #000; }
.android-section { padding:15px 15px; background: #fff; box-shadow: 0 0 10px 0 #000; }
.hdrtxt {color: #000; font-size:14pt; font-weight:bold;}
.ftrtxt {color: #fff; font: Bold 8pt Verdana;}
.keepinline { display: flex; flex-direction: row;}

.frgtPass { color: #fff; text-decoration:none; cursor:pointer; text-align:left; }
.frgtPass:hover { color:#fff; }
.frgtPass:active { color:#000; }

.sucMessage {color: Green; font: Bold 9pt Verdana; padding:4px 0; line-height:1.2em; }
.errMessage {color: red; font: Bold 9pt Verdana; padding:4px 0; line-height:1.2em;}
.valMessage {color: red; font: Normal 9pt Verdana; padding:5px 0; line-height:1.2em;}

footer { background: #196ff2; width: 100%; padding: 5px 0px; border-top: 1pt solid #cecece; position: fixed; left: 0px; bottom: 0px; }
footer p { line-height: 1em; }

.font-8 { font-size:8pt; }
.font-9 { font-size:9pt; }
.font-10 { font-size:10pt; }
/*** ERROR PAGE ********************************************************/


.error-section { padding:15px 15px; background: #fff; box-shadow: 0 0 10px 0 #000; }

#errcntr {width:100%; margin: 0px 0 20px 0;}
#errcntr h2 {width:100%; font: Bold 16pt Verdana; color: Red; text-align: left; margin: 0 0 20px 0;
                 border-bottom-style:dotted; border-bottom-color:Red; border-bottom-width:2px; line-height:1.4em;}
#errcntr h4 {width:100%; font: Bold 10pt Verdana; color: #4b6c9e; text-align: left; margin: 30px 0 10px 0;
                 border-bottom-style:dotted; border-bottom-color:#4b6c9e; border-bottom-width:2px; line-height:1.4em;}
#errcntr Label {font: Bold 10pt Verdana; }
#errcntr .ErrorMsg {width:100%; font: Bold 14pt Verdana; color: #4b6c9e; text-align: left; margin: 0 0 20px 0;}
#errcntr .return {width:100%; float:right; text-align:right; margin-top:15px; color:#000;}

#errcntr a { color:#3399cc; font-size:small; line-height: 1.2em; font-weight:bold; text-align:center;}
#errcntr a:hover { color:#ff9900; font-weight:bold; cursor:pointer; text-align:center; text-decoration:underline}
#errcntr a:active { color:#000000; font-weight:bold; cursor:pointer; text-align:center;}


/*** INDEX PAGE ********************************************************/

.wrapper { width: 60%; margin: 0 auto; overflow: hidden; }

.mobileDeive { width: 100%; max-width: 800px; margin: 0px auto; background-image: -webkit-gradient(linear, left bottom, left top, from(#4290fd), to(#155ecd));
    background-image: -o-linear-gradient(bottom, #4290fd 0%, #155ecd 100%); background-image: linear-gradient(0deg, #4290fd 0%, #155ecd 100%); }
.landing-image { height: auto; -o-object-fit: cover; object-fit: cover; width: 100%; }

/*Loading text*/
.loading { font-size: 20px; font-weight: 500; text-align: center; color: #fff; position: absolute; top: 9%; left: 50%;
           -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); }
.loading span { -webkit-animation: loading02 1.2s infinite alternate; animation: loading02 1.2s infinite alternate; }
.loading span:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.loading span:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.loading span:nth-child(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.loading span:nth-child(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.loading span:nth-child(6) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.loading span:nth-child(7) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }

@-webkit-keyframes loading02 {
    0% { -webkit-filter: blur(0); filter: blur(0); opacity: 1; }
    100% { -webkit-filter: blur(5px); filter: blur(5px); opacity: .2; }
}
@keyframes loading02 {
    0% { -webkit-filter: blur(0); filter: blur(0); opacity: 1; }
    100% { -webkit-filter: blur(5px); filter: blur(5px); opacity: .2; }
}


/*** LOGIN PAGE ********************************************************/


.top-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.logos img {
    width: 50%;
}


body#loginPage .top-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}


/*Login Section*/
.form-group.input-group {
    margin: 20px auto;
    width: 100%;
    position: relative;
}


section.logn-main-section {
    margin: 18% 0% 0% 0%;
}

img.img-responsive.logologin {width: 70%;margin: 0px auto;}

.form-group.input-group select {
    background: transparent;
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
    height: 55px;
    font-size: 18px;
    color: #ffffff;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    font-weight: 400;
}
.form-group.input-group select::-webkit-input-placeholder{
   height: 50px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group select option{
   background-color: #206bd9;
   border: 2px solid #fff;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
    padding:10px 0px;
}


.form-group.input-group input {
    background: transparent;
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
    height: 55px;
    font-size: 18px;
    color: #ffffff;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    font-weight: 400;
}
.form-group.input-group input::-webkit-input-placeholder{
   height: 60px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group input::-moz-placeholder{
   height: 60px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group input:-ms-input-placeholder{
   height: 60px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group input::-ms-input-placeholder{
   height: 60px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group input::placeholder{
   height: 60px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.form-group.input-group img {
       right: 22px;
    position: absolute;
    width: 20px;
    top: 16px;
}
#btn-login {
    background: #ec1e30;
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#btn-login img {
    margin-right: 12px;
    width: 20px;
}
#btn-login:hover {
    background: #003975;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


.control p {
        font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
}

.control p a{
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
}

.control p a sup {
    font-size: 12px;
}
body#loginPage {
    position: relative;
}


