/*CSS FOR THE LOGIN PAGE*/

.main_login {
    background:#fff; color:#000;
}
.main_login main {
    width:100%; left:0; right:0; margin:0;
}
.login {
    display:flex; align-items:center; height:100vh; width:40%; margin:0 auto;
}
.login .login_container {
    width:100%; padding:5em;
}
.login .login_container .logo {
    text-align:center;
}
.login .login_container .logo img {
    width:24em; padding:4em 4em 0 4em; margin:0 auto; position:relative;
}
.login .login_container .logo h1 {
    font-size:1.8em; line-height:2em; color:#0f1a3f; text-align:center;
}
.login .login_container .infot {
    margin:1em auto 0 auto; color:#444;
}
.login .login_container .infot h1 {
    font-size:1.8em; line-height:2em;
}
.login .login_container .infot p {
    font-size:1.2em; line-height:2em;
}
.login .login_container .liner {
    padding:2em; text-align:center;
}
.login .login_container .liner p {
    font-size:0.8rem; line-height:1.2rem; color:#fff;
}
.login .login_container .liner a {
    color:#fcb42c;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.login .login_container .liner a:hover {
    color:#F4D14B;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.error {
    margin:2em 0 0 0; background:#d35563; padding:14px; text-align:center;
    -webkit-transition:top 0.2s, left 0.2s, font-size 0.2s;
    -moz-transition:top 0.2s, left 0.2s, font-size 0.2s;
    transition:top 0.2s, left 0.2s, font-size 0.2s;
}
.error h1 {
    color:#fff; font-size:1.2rem; margin:0 0 7px 0;
}
.error p {
    color:#fff; font-size:1rem;
}

.cd-form *, .cd-form *::after, .cd-form *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cd-form::after {
    clear:both; content:""; display:table;
}
.cd-form fieldset {
    margin:0;
}
.cd-form legend {
    padding-bottom:10px; margin-bottom:20px; font-size:2rem; border-bottom:1px solid #ecf0f1; text-align:center;
}
.cd-form div {
    position:relative; margin:20px 0 0 0;
}
.cd-form h1 {
    font-size:20px; padding:0 0 10px 0;
}
.cd-form h4, .cd-form .cd-label {
    font-size:1.0rem; color:#0f1a3f; background:transparent; border:1px solid #0f1a3f; border-bottom:0; padding:8px;
}
.cd-form .cd-label {
    display:block;
}
.cd-form input, .cd-form textarea, .cd-form select, .cd-form label {
    font-size:1.2rem; color:#000; text-transform:lowercase;
}
span {
    color:#444;
}
.cd-form input[type="text"], .cd-form input[type="tel"], .cd-form input[type="email"], .cd-form input[type="password"], .cd-form textarea, .cd-form select, .cd-form legend {
    display:block; width:100%;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}
.cd-form input[type="text"], .cd-form input[type="tel"], .cd-form input[type="email"], .cd-form input[type="password"], .cd-form textarea, .cd-form select {
    padding:8px; border:1px solid #0f1a3f; border-top:0; background-color:transparent;
}
.cd-form input[type="text"]:focus, .cd-form input[type="tel"]:focus, .cd-form input[type="email"]:focus, .cd-form input[type="password"]:focus, .cd-form textarea:focus, .cd-form select:focus {
    outline:none; border-bottom:1px solid; border-bottom-color:red; box-shadow:0 5px 5px -5px rgba(44, 151, 222, 0.2);
}
.cd-form .cd-select {
    position:relative;
}
.cd-form .cd-select::after {
    content:''; position:absolute; z-index:1; right:16px; top:50%; margin-top:-8px; display:block; width:16px; height:16px; background:url("../img/cd-icon-arrow.svg") no-repeat center center; pointer-events:none;
}
.cd-form select {
    cursor:pointer; border-radius:0;
}
.cd-form select::-ms-expand { 
    display:none;
}
.cd-form .cd-form-list {
    margin-top:16px;
}
.cd-form .cd-form-list::after {
    clear:both; content:""; display:table;
}
.cd-form .cd-form-list li {
    display:inline-block; position:relative; margin:0 26px 16px 0; float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.cd-form textarea {
    min-height:200px; resize:vertical; overflow:auto;
}
.cd-form input[type="submit"] {
    border:none; background:#000; padding:14px 0; color:#ffffff; font-weight:bold; cursor:pointer; font-size:1rem; width:140px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}
.no-touch .cd-form input[type="submit"]:hover {
    background:red; color:#000;
}
.cd-form input[type="submit"]:focus {
    outline:none; background:red; color:#000;
}
.cd-form input[type="submit"]:active {
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -o-transform:scale(0.9);
    transform:scale(0.9);
}
.cd-form [required] {
    background:url("../img/cd-required.svg") no-repeat top right;
}
.cd-form .error-message p {
    background:#e94b35; color:#ffffff; font-size:1.0rem; text-align:center; padding:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.cd-form .error {
    border-color:#e94b35 !important;
}

@media only screen and (min-width:600px) {
    .cd-form div {
        margin:32px 0 0 0;
    }
    .cd-form legend + div {
        margin-top:20px;
    }
    .cd-form h4, .cd-form .cd-label {
        font-size:1.0rem; padding:16px 16px 6px 16px;
    }
    .cd-form input[type="text"], .cd-form input[type="tel"], .cd-form input[type="email"], .cd-form input[type="password"], .cd-form textarea, .cd-form select {
        padding:6px 16px 16px 16px;
    }
}

/* --------------------------------FLoating labels-------------------------------- */
.js .floating-labels div {
    margin:28px 0;
}
.js .floating-labels .cd-label {
    position:absolute; top:16px; left:16px; font-size:1.2rem; cursor:text;
    -webkit-transition:top 0.2s, left 0.2s, font-size 0.2s;
    -moz-transition:top 0.2s, left 0.2s, font-size 0.2s;
    transition:top 0.2s, left 0.2s, font-size 0.2s;
}
.js .floating-labels .icon .cd-label {
    left:26px;
}
.js .floating-labels .cd-label.float {
    font-size:1.2rem; top:-16px; left:0 !important;
}
@media only screen and (min-width:600px) {
    .js .floating-labels legend + div {
        margin-top:16px;
    }
    .js .floating-labels .cd-label {
        top:20px;
    }
}