body {font: 24px/34px Lato, Arial, Helvetica, sans-serif; margin: 0; background-color: transparent; position: relative;}
img {border: 0; vertical-align: top; max-width: 100%;}
p {margin-bottom: 0;}

@charset "utf-8";
/* CSS Document */

* {outline: 0;}
*, *::before, *::after {box-sizing: border-box;}
@media(prefers-reduced-motion: no-preference) {
:root {scroll-behavior: smooth;}
}
::-moz-selection { /* Code for Firefox */ color: #000; background: #98ce18;}
::selection {color: #000; background: #98ce18;}

html, head, body {padding: 0; margin: 0;}

#landing {background: url(images/landing.jpg) no-repeat 0 -144px; max-width: 1920px; margin: 0 auto; height: 910px; position: relative;}
#landing .content {width: 780px; margin: 0 auto; padding-top: 25px; text-align: center;}
#landing .buttons {display: flex; justify-content: center; align-items: center; margin-top: 18px;}
#landing .content a.join {background-color: #99cf17; border: 2px solid #000; border-radius: 14px; padding: 0 22px; text-align: center; box-shadow: 0 0 15px -2px #444444;
font-size: 27px; font-weight: 900; color: #000; line-height: 54px; display: inline-block; text-decoration: none; margin-right: 12px;}
#landing .content a:hover.join {background-color: #add827; font-size: 27px; font-weight: 900; color: #000; text-decoration: none;}
#landing .content a.login {background-color: #57d1da; border: 2px solid #000; border-radius: 14px; text-align: center; width: 302px; box-shadow: 0 0 15px -2px #444444;
font-size: 27px; font-weight: 900; color: #000; line-height: 54px; display: inline-block; text-decoration: none; margin-left: 12px;}
#landing .content a:hover.login {background-color: #1dc8cc; font-size: 27px; font-weight: 900; color: #000; text-decoration: none;}
#landing .copyright, #inner .copyright {position: absolute; bottom: 18px; left: 34px;}
#landing .codesigned, #inner .codesigned {position: absolute; bottom: 18px; right: 34px;}

#inner {background: url(images/landing-inner.jpg); max-width: 1920px; margin: 0 auto; position: relative; padding: 100px 0;}
#inner .flexcenter {display: flex; justify-content: center; align-items: center;}
#inner .flexcenter .col-lg-5, #inner #myprofile {background-color: #fff; border-radius: 9px; padding: 15px 34px; box-shadow: 0 0 15px -2px #444444;}
#inner .flexcenter h1, #inner #myprofile h1 {font: 900 37px/41px 'Lato',Arial,sans-serif; color: #000; margin-bottom: 30px;}
#inner .flexcenter label, #inner #myprofile label {font-size: 20px; margin: 0 0 5px 7px; font-weight: 400;}
#inner .flexcenter input[type=text], #inner .flexcenter input[type=password],
#inner #myprofile input[type=text], #inner #myprofile input[type=password] {background-color: #ececec; padding: 7px 10px; box-shadow: none;
width: 100%; margin-bottom: 14px; font-size: 20px; color: #000; font-weight: 400; border: 1px solid #ececec; border-radius: 5px; height: 39px;}
#inner .flexcenter .select, #inner #myprofile .select {margin: 0 0 10px; border: none; width: 100%; border-radius: 5px; overflow: hidden; position: relative;
line-height: 39px; font-size: 20px; font-weight: 400; color: #000; background: url(images/select.svg) no-repeat 100% 0 #ececec; background-size: 39px;}
#inner .flexcenter .select select, #inner #myprofile .select select {padding: 0 41px 0 11px; border: none; box-shadow: none; width: 100%; background-color: transparent;
background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; height: 39px;font-size: 20px; font-weight: 400; color: #000;}
#inner .flexcenter button[type=submit], #inner #myprofile button[type=submit] {background-color: #57d1da; width: 200px; text-align: center; border: none; margin: 25px auto;
font-size: 25px; font-weight: 900; line-height: 52px; color: #000; box-shadow: 0 0 15px -2px #444444; display: block; border-radius: 14px;}
#inner .flexcenter button[type=submit]:hover, #inner #myprofile button[type=submit]:hover {background-color: #6fdae6;}
#inner .flexcenter .already {display: flex; align-items: center; justify-content: center; margin-top: 14px;}
#inner .flexcenter .already:before, #inner .flexcenter .already:after {content: ""; background: #b5b5b5; width: 100%; height: 1px}
#inner .flexcenter .already span {margin: 0 9px; font-size: 18px; color: #000; white-space: nowrap;}
#inner .flexcenter p {font-size: 16px; line-height: 22px; color: #000; font-weight: 400;}
#inner .flexcenter p a {font-size: 16px; line-height: 20px; color: #1b8793; font-weight: 400; text-decoration: none;}
#inner .flexcenter p a:hover {font-size: 16px; line-height: 20px; color: #1b8793; font-weight: 400; text-decoration: underline;}
#inner .flexcenter .login {text-align: center; margin: 16px 0 25px;}
#inner .flexcenter .login a {background-color: #99cf17; width: 200px; text-align: center; border: none; margin: 0 auto; display: block;
font-size: 24px; font-weight: 900; line-height: 52px; color: #000; box-shadow: 0 0 15px -2px #444444; text-decoration: none; border-radius: 14px;}
#inner .flexcenter .login a:hover {background-color: #90b718; border: none; margin: 0 auto; display: block; font-size: 24px;
font-weight: 900; line-height: 52px; color: #000; box-shadow: 0 0 15px -2px #444444; text-decoration: none; border-radius: 14px;}
#inner .flexcenter .form-check-input {float: left; margin-left: -1.5em;}
#inner .flexcenter .form-check {padding-left: 2.2em;}
#inner .flexcenter .form-check label {display: inline-block; margin: 0 0 0 2px;}
#inner .flexcenter .form-check .form-check-input[type=checkbox] {border: 3px solid #a5a5a5; background-color: #fff;
width: 1.2em; height: 1.2em; border-radius: 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
#inner .flexcenter .form-check-input:checked[type=checkbox] {background: url(images/check-sky.svg) no-repeat #fff 2px 6px; background-size: 18px;}

#inner.fp {height: 801px; padding: 220px 0 0;}
#inner.fp label {line-height: 27px; margin-bottom: 7px;}
#inner .flexcenter .forgot {text-align: right;}
#inner .flexcenter .forgot a {font-size: 20px; color: #1b8793; text-decoration: underline; font-weight: 400;}
#inner .flexcenter .forgot a:hover {font-size: 20px; color: #1b8793; text-decoration: none; font-weight: 400;}
#inner .flexcenter button[type=submit].login {background-color: #99cf17;}
#inner .flexcenter button[type=submit]:hover.login {background-color: #90b718;}
#inner .flexcenter p.joinour a {background-color: #57d1da; width: 310px;}
#inner .flexcenter p.joinour a:hover {background-color: #6fdae6;}
#inner .flexcenter .mx-auto {text-align: center;}
#inner .flexcenter .mx-auto.forgotpass button[type=submit].login {margin: 22px 14px 16px 0; display: inline-block; width: 115px;
font-size: 18px; line-height: 36px;}
#inner .flexcenter .mx-auto.forgotpass .btn-outline-dark {display: inline-block; font-size: 18px; font-weight: 900; line-height: 34px;
padding-left: 20px; padding-right: 20px; box-shadow: 0 0 15px -2px #444444; margin: 22px 0 16px; border-radius: 14px; color: #212529;}
#inner .flexcenter .mx-auto.forgotpass .btn-outline-dark:hover {background-color: #212529; color: #fff; font-size: 18px; font-weight: 900;}

#inner #myprofile .select {background-color: #fff; border: 2px solid #d8d8d8; margin-bottom: 16px;}
#inner #myprofile p {font-size: 20px; font-weight: 400; color: #000;}
#inner #myprofile p.required {margin-top: 34px;}
#inner #myprofile p.required span, #inner #myprofile label span {color: #ff0000;}
#inner #myprofile button[type=submit] {background-color: #99cf17; width: 220px; line-height: 58px; margin-left: 61px;}
#inner #myprofile button[type=submit]:hover {background-color: #90b718;}

.error-message {
            color: red;
        }
.is-invalid {
            border-color: red;
        }