body {margin: 0; padding: 0; font-family: "Nunito Sans", sans-serif;}
* {margin: 0; padding: 0;}

/**** header ****/
#header {width: 100%; margin: 0; padding: 15px; background: url(../images/header-bg1.png) repeat; border-bottom: 1px solid #fff; box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.6); box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
#header .loginFormWrapper {max-width: 485px; position: relative;}
#header .loginFormWrapper ul.loginForm {margin: 0; padding: 0; list-style: none; display: flex; align-items: flex-start; flex-wrap: wrap;}
#header .loginFormWrapper ul.loginForm li {margin: 0; padding: 0 0 0 15px;}
#header .loginFormWrapper ul.loginForm li:first-child {padding: 0;}
#header .loginFormWrapper ul.loginForm li label {display: block; width: 100%; padding: 0 0 4px 0; color: #dbf0ff; font-size: 12px;}
#header .loginFormWrapper ul.loginForm li span {display: block; width: 100%;}
#header .loginFormWrapper ul.loginForm li em {display: flex; align-items: center; flex-wrap: wrap; padding-top: 4px;}
#header .loginFormWrapper ul.loginForm li em.rememberMeWrapper input[type="checkbox"] {margin-right: 5px; width: 14px; height: 14px; accent-color: #fff;}
#header .loginFormWrapper ul.loginForm li em.rememberMeWrapper label {width: auto; padding-bottom: 0;}
#header .loginFormWrapper ul.loginForm li a.verrifyBtn {display: block; background: url(../images/login-verify-btn.png) no-repeat; border: none; font-size: 12px; border-radius: 3px; color: #fff; cursor: pointer; width: 72px; height: 26px; cursor: pointer;}
#header .loginFormWrapper ul.loginForm li input[type="submit"] {width: 72px; height: 26px; border: none; background: url(../images/login-btn.png) no-repeat; cursor: pointer;}
#header .loginFormWrapper ul.loginForm li span input[type="text"], header .loginFormWrapper ul.loginForm li span input[type="password"] {background: #fff; border: none; font-size: 13px; color: #434343; padding: 5px; width: 180px; border-radius: 3px;}
#header .loginFormWrapper ul.loginForm li em a {color: #dbf0ff; font-size: 12px; text-decoration: none;}
#header .loginFormWrapper .errorMessageWrapper {font-size: 11px; color: #fff; background: #9d0909; padding: 2px 6px; border-radius: 3px; margin-top: 10px; line-height: 16px; left: 0; position: absolute;}

/**** loginMidPart ****/
#loginMidPart {padding: 15px; height: calc(100vh - 155px); display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box;}
#loginMidPart .loginContentSection {display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; width: auto; max-width: 700px; padding-left: 100px; height: 100%;}
#loginMidPart .loginContentSection h2 {width: 100%; display: block; margin-bottom: 30px; padding-bottom: 15px; background: url(../images/heading-bg.png) repeat-x bottom;}
#loginMidPart .loginContentSection h2 span {font-size: 31px; font-weight: 600; padding-left: 40px; color: #353c3d; background: url(../images/heading-icon.png) no-repeat left;}
#loginMidPart .loginContentSection p {font-size: 16px; text-align: justify; color: #353c3d; padding-bottom: 30px; margin-bottom: 10px; line-height: 24px;}
#loginMidPart .loginContentSection ul {margin: 0; padding: 0; list-style: none;}
#loginMidPart .loginContentSection ul li {display: block; color: #353c3d; font-size: 23px; padding: 0 0 10px 25px; background: url(../images/login-listing-icon.png) no-repeat 0 2px;}
#loginMidPart .loginVectorSection {display: inline-flex; justify-content: flex-end; width: auto; width: 50%; height: 100%; padding: 30px; box-sizing: border-box;}
#loginMidPart .loginVectorSection img {max-width: 100%; height: 100%;}

/**** footer ****/
footer {padding: 15px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; background: url(../images/footer-bg-new.png) repeat; border-top: 1px solid #fff; box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.5);}
footer .copyrightTxt, footer .designedBy {font-size: 12px; font-weight: 400; color: #fff; display: inline-flex; align-items: center; flex-wrap: wrap;}
footer .designedBy a {color: #fff; display: inline-flex; align-items: center; flex-wrap: wrap; margin-left: 6px; text-decoration: none;}
footer .designedBy a:hover {text-decoration: underline;}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 639px) {
    header .logo {width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
    header .logo img {max-width: 160px;}
    header .loginFormWrapper {box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.1); position: fixed; top: 90px; left: 50%; max-width: 400px; transform: translateX(-50%); margin: 0; padding: 15px; width: calc(100vw - 60px); background: #fff;}
    header .loginFormWrapper ul.loginForm {width: 100%;}
    header .loginFormWrapper ul.loginForm li {width: 100%; padding: 0 0 15px 0 !important;}
    header .loginFormWrapper ul.loginForm li label {color: #393939; font-size: 14px; font-weight: 600;}
    header .loginFormWrapper ul.loginForm li span input[type="text"], header .loginFormWrapper ul.loginForm li span input[type="password"] {width: 100%; background: rgba(0, 0, 0, 0.1); padding: 10px; box-sizing: border-box;}
    header .loginFormWrapper ul.loginForm li em a {color: #393939; font-size: 14px; font-weight: 600;}
    header .loginFormWrapper ul.loginForm li.loginBtn label {display: none;}
    header .loginFormWrapper .errorMessageWrapper {position: relative; margin-top: 0;}
    #loginMidPart {height: calc(100vh - 130px); align-items: flex-end;}
    #loginMidPart .loginContentSection {display: none;}
    #loginMidPart .loginVectorSection {width: 100%; height: auto; padding: 30px 30px 0 30px; justify-content: center;}
    #loginMidPart .loginVectorSection img { max-width: 360px;}
    footer .copyrightTxt, footer .designedBy {width: 100%; justify-content: center; padding: 4px;}
    footer {padding: 7px 15px;}
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
    header .logo img {max-width: 130px;}
    header .loginFormWrapper ul.loginForm li span input[type="text"], header .loginFormWrapper ul.loginForm li span input[type="password"] {width: 140px;}
    #loginMidPart .loginContentSection {max-width: 50%; padding-left: 0; padding-right: 30px; box-sizing: border-box;}
    #loginMidPart .loginVectorSection {width: 50%; padding: 0; align-items: center;}
    #loginMidPart .loginContentSection h2 {margin-bottom: 20px;}
    #loginMidPart .loginContentSection h2 span {font-size: 23px; padding-left: 32px; background-size: 23px;}
    #loginMidPart .loginContentSection p {font-size: 14px; padding-bottom: 10px; line-height: 20px;}
    #loginMidPart .loginContentSection ul li {font-size: 18px; padding: 0 0 10px 20px; background-size: 8px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    header .logo img {max-width: 160px;}
    header .loginFormWrapper ul.loginForm li span input[type="text"], header .loginFormWrapper ul.loginForm li span input[type="password"] {width: 170px;}
    #loginMidPart .loginContentSection {max-width: 50%; padding-left: 0; padding-right: 30px; box-sizing: border-box;}
    #loginMidPart .loginVectorSection {width: 50%; padding: 0; align-items: center;}
    #loginMidPart .loginContentSection h2 {margin-bottom: 20px;}
    #loginMidPart .loginContentSection h2 span {font-size: 23px; padding-left: 32px; background-size: 23px;}
    #loginMidPart .loginContentSection p {font-size: 14px; padding-bottom: 10px; line-height: 20px;}
    #loginMidPart .loginContentSection ul li {font-size: 18px; padding: 0 0 10px 20px; background-size: 8px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    header .logo img {max-width: 180px;}
    header .loginFormWrapper ul.loginForm li span input[type="text"], header .loginFormWrapper ul.loginForm li span input[type="password"] {width: 180px;}
    #loginMidPart .loginContentSection {max-width: 50%; padding-left: 0; padding-right: 30px; box-sizing: border-box;}
    #loginMidPart .loginVectorSection {width: 50%; padding: 0; align-items: center;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #loginMidPart .loginContentSection {max-width: 50%; padding-left: 0; padding-right: 30px; box-sizing: border-box;}
    #loginMidPart .loginVectorSection {width: 50%; padding: 0; align-items: center;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #loginMidPart .loginContentSection {max-width: 50%; padding-left: 0; padding-right: 30px; box-sizing: border-box;}
    #loginMidPart .loginVectorSection {width: 50%; padding: 0; align-items: center;}
}

@media only screen and (min-width: 1600px) and (max-width: 1799px) {
    #loginMidPart .loginContentSection {padding-left: 0;}
}