@import url("../Fonts/stylesheet.css");
@import url("../clp/01/fonts/styles.css");
* {font-family: 'open_sansregular', Arial; margin: 0; padding: 0; box-sizing: border-box;}
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {overflow: hidden;}
body {background: linear-gradient(270deg, #bdbe00, #00a58c, #0092d4, #eb5c47, #fbba00); background-size: 1000% 1000%; -webkit-animation: Gradient 41s ease infinite; -moz-animation: Gradient 41s ease infinite; animation: Gradient 41s ease infinite;}   
@-webkit-keyframes Gradient {0%{background-position:78% 0%} 50%{background-position:23% 100%} 100%{background-position:78% 0%}}
@-moz-keyframes Gradient {0%{background-position:78% 0%} 50%{background-position:23% 100%} 100%{background-position:78% 0%}}
@keyframes Gradient {0%{background-position:78% 0%} 50%{background-position:23% 100%} 100%{background-position:78% 0%}}
.clear {clear: both;}
.cropbox {left: 0; position: fixed; bottom: 0;}
#defaultForm p.error {color: #ff0000; font-size: 14px; margin: 10px 0 0; position: absolute; top: -65px; width: 100%;}
.errorSign {display: inline-block; margin: 13px 0 0; position: absolute; right: -15px; top: -6px; width: 10px;}
textarea:focus, input:focus{outline: 0;}
*:focus {outline: 0;}
.headerLogo {left: 55px; position: absolute; top: 22px; font-family: 'AvantGardeLT-Book';}
.headerLogo h1 {color: #fff; font-weight: normal; font-family: 'AvantGardeLT-Book';}
.footerLogo {bottom: 25px; left: 55px; position: absolute; width: 85px;}
.headerLogo img, .footerLogo img {width: 100%;}
.leftBar {color: #fff; float: left; margin: 0 80px 0 0; width: 378px; display: none;}
.leftBar h1 {font-family: "open_sanslight", Arial; font-size: 38px; font-weight: normal;}
.leftBar p {color: #bfcbcb; font-size: 22px; margin: 20px 0 30px;}
.leftBar a {color: #bfcbcb; font-size: 22px;}
.pageWrapper {width: 900px; margin: 10px auto;}
.titleBlock {margin: 0 auto 10px; color: #fff; text-align: center; padding: 10px 0; border-radius: 15px; font-size: 20px;}
.titleBlock h1 {font-size: 38px;  font-weight: normal;  font-family: "open_sanslight", Arial;}
.contentBlock {background: #2c5250; color: #bfcbcb; padding: 20px 0 0; text-align: center; font-size: 20px; border-radius: 45px; margin: 0 0 10px;}
.loginBlock h3 {text-align: center; color: #bfcbcb; margin: 0 0 20px; font-weight: normal;}
.contentBlock p {padding: 0 0 10px;}
.contentBlock a, .supportBlock a {color: #bfcbcb;}
.supportBlock {font-size: 22px; text-align: center; color: #fff; background: #2c5250; margin: 10px 0; border-radius: 7px; padding: 5px 0;}
.loginBlock {background: #2c5250; padding: 20px 30px; border-radius: 30px;}    
#form-wrapper {background: #2c5250; margin: 0; position: static; width: auto; padding: 0;}
.leftBlock {margin: 35px auto 0; position: relative; width: 100%;}
.loginContent {float: left; color: #bfcbcb; font-size: 20px; width: 440px; margin: 70px 0 0;}
.loginContent p a {color: #bfcbcb;}
#defaultForm {background: #fff; float: right; height: auto; margin: 0; padding: 20px 30px; position: static; width: 350px;}
#defaultForm h1 {font-size: 22px; color: #386463; font-weight: normal;}
#defaultForm p.error {color: #ff0000; font-size: 14px; margin: -20px 0 10px; position: static; width: 100%;}
.block1, .block2 {position: relative;}
#form-wrapper .input {background: #fff; border: 0 none; color: #386463; float: left; font-size: 18px; margin: 0 0 25px; padding: 0 0 10px; width: 100%; border-bottom: 1px solid #979797;}
#userNameBox {background: #fff url("../images/email_icon.png") no-repeat scroll right center !important;}
#passWordBox {background: #fff url("../images/password_icon.png") no-repeat scroll right center !important;}
input, textarea {-webkit-appearance: none; -webkit-border-radius: 0;}
#defaultForm p {color: #000; font-size: 18px; font-weight: 400;}
.buttonWrap {margin: 0 auto; width: 170px;}
#LoginBtn {background: #3E90D0; border: 0 none; border-radius: 30px; color: #fff; cursor: pointer; font-size: 18px; height: 40px; width: 170px;}
.forgot-pwd {color: #2c5250; display: block; font-size: 18px; margin: 10px 0 0; text-align: center; text-decoration: none;}
@media all and (max-width: 1366px){.pageWrapper {width: 800px; margin: 0 auto;} .titleBlock {padding: 5px 0 0;} .contentBlock {padding: 10px 0 0; font-size: 18px;} .loginBlock {padding: 10px 30px 15px;} .titleBlock h1 {font-size: 30px;} .clickHere img {width: 150px;} .loginBlock h3 {margin: 0 0 10px; font-size: 18px;} .loginContent {font-size: 18px; width: 360px;} #defaultForm h1 {font-size: 18px; } #form-wrapper .input {margin: 0 0 20px;}}
@media all and (max-width: 1280px) {.headerLogo, .footerLogo {left: 20px;}}
@media all and (max-width:1152px) {body {overflow: visible;}.titleBlock, .contentBlock, .supportBlock, .loginContent {display: none;} .pageWrapper {width: 100%; margin: 0; position: relative; top: 26%;} #form-wrapper {padding: 0 0 0 40px; display: flex; display: -ms-flexbox; -ms-flex-direction: row; flex-direction: row; flex-basis: 100%;} .headerLogo {left: 40px; position: absolute; top: 25px; width: 100px;} .footerLogo {bottom: 0; left: 40px; width: 70px; z-index: 9999;} .leftBar {margin: 0; flex-basis: 65%; -ms-flex-basis: 65%; display: block; padding: 30px 0 60px;} .leftBar h1 {font-size: 28px;} .leftBar p {font-size: 16px; margin: 30px 0; width: 70%;} .leftBar a {font-size: 16px;} #defaultForm {height: auto; padding: 30px; flex-basis: 35%; -ms-flex-basis: 35%;} #defaultForm h1 {font-size: 22px;} .loginBlock {padding: 0; border-radius: 0; margin: 0;} .leftBlock {margin: 50px auto 0; position: relative; width: 100%;} #form-wrapper .input {font-size: 16px; margin: 0 0 40px; } .buttonWrap, #LoginBtn {font-size: 22px;} .buttonWrap, #LoginBtn {width: 150px;} .forgot-pwd {color: #2c5250; display: block; font-size: 22px; margin: 30px 0 0; text-align: center; text-decoration: none;} #defaultForm p.error {font-size: 12px; position: static;} .loginBlock h3 {display: none;} .leftBar h1 span {font-size: 16px; display: block; color: #bfcbcb;} .loginBox .contentBlock {display: block; background: none; padding: 10px 0 10px 40px; font-size: 16px; text-align: left; border-radius: 0; margin: 20px 0 0 -40px; background: #426563;} .leftBar .contentBlock p {margin: 0 0 10px; padding: 0;}}
@media all and (max-width:840px){.leftBar {flex-basis: 50%; -ms-flex-basis: 50%; display: block; padding: 30px 0;} #defaultForm {flex-basis: 50%; -ms-flex-basis: 50%;}.leftBar p {width: 90%;} .footerLogo {margin-bottom: -45%; padding: 0 0 10px;}}
@media all and (max-width:700px){.pageWrapper {top: 23px;} .loginBlock {padding: 27px 0;} #form-wrapper {margin: 0 0 25px; padding: 5px 20px 0px; position: static; width: 100%; flex-direction: column; -ms-flex-direction: column;} .headerLogo {margin: 35px 0 0 35px; position: static; width: 100px;} .leftBar {float: none; margin: 0 auto 35px; width: 100%; padding: 0; -ms-flex: 1 1 auto;} .leftBar p {width: 100%;} .leftBar a {font-size: 16px;} .footerLogo {margin: 50px 35px 10px; position: static; width: 70px;} #defaultForm {left: auto; padding: 30px; position: static; right: 0; width: 100%; padding: 30px 30px 50px 30px; -ms-flex: 1 1 auto;} .leftBar .forgot-pwd {display: none;} .loginBlock h3 {display: none;} .leftBar h1 {text-align: center;} .leftBar h1 span {display: none;} .loginBox .contentBlock {width: 110%; padding: 10px 20px; margin: 20px 0 0 -20px;} .leftBar .clickHere a {display: block;}}
@media all and (max-width: 340px){.loginBox .contentBlock {width: 120%;}}