body{background-color: #fff;}
.container {width: 100%; height: 100%; padding: 0; margin:0;}
.logincontainer{max-width:320px; width:90%; position:relative; padding:12rem 2.5rem 3.5rem 2.5rem; margin: 0 auto;background-color: #fff; height: 100vh; }
.ctitle{font-size:1.3rem; text-transform: uppercase;color: #dc3545 }
.logincontainer img{max-width:250px; height: auto; margin-bottom:10px; }

.logincontainer h4{margin-bottom:15px;color: #505050; font-size: 1.3rem;}
.subtext{font-weight: 400;}
.maintext{font-weight: 600;}

/* Form Elements*/
.input,input[type=text],select{color:#000;width:100%;font-size:1.5rem;height:45px;line-height:normal;
border:#505050 solid 1px;border-radius:0px;padding:10px; background: transparent;}
input.outside{padding-left:50px;}
input:focus,select:focus{outline:0!important;}
.floating-label{position:absolute;pointer-events:none;top:16px;transition:.2s ease all;font-size:1.3rem;letter-spacing:.5px;z-index:3;}
.floating-label.outside{left:50px;top:12px;}
input:focus~.floating-label input:not(:focus):valid~.floating-label{top:10px;left:50px;font-size:1rem;opacity:1;}
input:focus~.floating-label,input:valid~.floating-label{top:-7px;opacity:1;font-size:12px;background:#fff;padding:0px 5px;color:#777;}
input:focus~.floating-label,input:not(:focus):valid~.floating-label{left:45px}

.input-icon{position:absolute;top:15px;z-index:3;color:#777;}
.input-icon.outside{left:17px;}
.form-group .fa{ font-size:15px;}
/* Custom checkbox */
.custom-checkbox {position: relative; margin-right:10px;}
.custom-checkbox input[type="checkbox"] {opacity: 0;position: absolute;margin: 5px 0 0 3px;z-index: 9;}
.custom-checkbox label:before{width: 18px;height: 18px;}
.custom-checkbox label:before {content: '';margin-right: 10px;display: inline-block;vertical-align: text-top;background: white;border: 1px solid #bbb;border-radius: 2px;
box-sizing: border-box;z-index: 2;}
.custom-checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;left:6px;top: 3px;width: 6px;height: 12px;border: solid #000;border-width: 0 3px 3px 0;transform: inherit;z-index: 3;transform: rotateZ(45deg);}
.custom-checkbox input[type="checkbox"]:checked + label:before {border-color: #0d47a1;background: #fff;}
.custom-checkbox input[type="checkbox"]:checked + label:after {border-color: #0d47a1;}
.custom-checkbox input[type="checkbox"]:disabled + label:before {color: #b8b8b8;cursor: auto;box-shadow: none;background: #ddd;}

.error-message {padding: 10px;font-size: 14px;background-color: #fce4e4; border: 1px solid #fcc2c3;}
.error-text {color: #f44336 ;line-height: 20px;text-shadow: 1px 1px rgba(250,250,250,.3);}

/* Button Background Colors*/
.btn { font-family:Roboto; font-weight:500; min-width:100px; text-align:center; padding:9px 14px; display:block; font-size: 1.5rem; }
.btn-default{ background: #000000 !important; border: 1px solid #000000; color:#ffffff !important; border-radius:25px;}
.btn-default:hover {background-color:#333333;}

.btn-outline-default{ background: none; border: 1px solid #000000; color:#000000; border-radius:25px;}
.btn-outline-default:hover {background-color:#000000; color:#ffffff;}

.success-message {width:100%;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); padding-top:50px;}
.success-message__icon {max-width: 75px;}
.success-message__title {color: #3DC480;padding:10px 0;}
.active .success-message__title {transform: translateY(0);}
.success-message__content {color: #B8BABB; font-size:1.2rem; margin-bottom:7px;}
.active .success-message__content {transform: translateY(0);}
.icon-checkmark circle {fill: #3DC480;}
.icon-checkmark path {transition: stroke-dashoffset 350ms ease;transition-delay: 100ms;}
.active .icon-checkmark circle {transform: scale(1);}


@media only screen and (max-width:420px) {
    html {font-size: 82.5%;}
    body{background-color: #fff;}
    .logincontainer{max-width:100%;padding:1.5rem; }
}