*,
 :before,
 :after {
    box-sizing: border-box;
}

textarea {
    resize: none;
}


/* body {
    background: #424242;
    } */

form {
    width: 100%;
    /* margin: 45px auto; */
}

form h1 {
    font-size: 3em;
    font-weight: 300;
    text-align: center;
    color: #2196f3;
}

form h5 {
    text-align: center;
    text-transform: uppercase;
    color: #c6c6c6;
}

form hr.sep {
    background: #2196f3;
    box-shadow: none;
    border: none;
    height: 2px;
    width: 25%;
    margin: 0px auto 45px auto;
}

form .emoji {
    font-size: 1.2em;
}

.group {
    position: relative;
    /* margin: 45px 0; */
    /* margin-bottom: 16px; */
}

input::-webkit-scrollbar, textarea::-webkit-scrollbar {
    width: 9px;
}

input::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {
    background: transparent;
}
input::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 20px;
    border: transparent;
}

input,
textarea {
    cursor: auto;
    scrollbar-color: #747678 #1b1e22;
    scrollbar-width: thin;
    background: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    /* font-size: 18px; */
    padding: 0 20px 12px 20px;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    border-top: 22px solid transparent;
    border-bottom: 1px solid #62686A;
    font-family: Montserrat !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 25px !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 9000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
    color: #ffffff;
}

textarea {
    resize: none;
}

input:focus,
textarea:focus {
    outline: none;
}

input:focus~label,
textarea:focus~label,
input:valid~label,
textarea:valid~label {
    top: 3px;
    color: #62686A;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
}

input:focus~.bar:before,
textarea:focus~.bar:before {
    width: 100%;
}

input[type="password"] {
    letter-spacing: 0.3em;
}

label {
    color: #62686A;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 16px;
    transition: 300ms ease all;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
}

.bar {
    position: relative;
    display: block;
    width: 100%;
}

.bar:before {
    content: '';
    height: 1px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: #ffffff;
    /* transition: 300ms ease all; */
    left: 0%;
}

.bar-error:before {
    background: #FF2E2E !important;
}

.form-error-text {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    /* error */
    color: #FF2E2E;
}


/* only demo styles */

body {
    font-family: Raleway;
}


/* end only demo styles */

.checkbox-custom {
    opacity: 0;
    position: absolute;
    height: 30px;
}

.checkbox-custom,
.checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    left: 0px;
}

.checkbox-custom-label {
    position: relative;
}

.checkbox-custom+.checkbox-custom-label:before {
    content: '';
    /* background: #fff; */
    /* border: 2px solid #ddd; */
    display: inline-block;
    vertical-align: middle;
    /* width: 20px; */
    /* height: 20px; */
    padding: 2px;
    /* margin-right: 10px; */
    text-align: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.checkbox-custom:checked+.checkbox-custom-label:before {
    content: url(../images/checkbox-16.webp);
    font-family: 'FontAwesome';
    background: transparent;
    color: #fff;
}