form {width: 80%; display: flex;flex-direction: column; gap: var(--spac4);}
form .form_division {display: flex;flex-direction: row;gap: var(--spac4);}
span.input_field { --darkgreenbg: #00332a21; display: flex; width: 100%; transition: .1s; position: relative; }
span.input_field label { position: absolute; color: var(--darkgreen); padding: var(--spac5); pointer-events: none; transition: .1s;}

.input_field input, 
.input_field textarea, 
.input_field select {width: 100%; padding: var(--spac5); font-weight: var(--font-medium); color: var(--darkgreen) !important; background: var(--darkgreenbg); border: 1px solid var(--darkgreenbg); border-radius: var(--box-border-radius-small); border: 0;transition: .1s; height: 60px; box-sizing: border-box; }
.input_field select option {font-weight: var(--font-regular);}


input[type="checkbox"] {appearance: none;width: 18px;height: 18px;border: 1px solid var(--gray300);cursor: pointer;position: relative;border-radius: 6px;vertical-align: middle;}
input[type="checkbox"]:checked {background-color: var(--lightgreen);border: 1px solid var(--lightgreen);}
input[type="checkbox"]:checked::after {content: '\2713';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 16px;color: white;margin-top: -1px;}
.actionCheckboxs { width: 100%; position: fixed; bottom: 0;left: 0;background-color: var(--lightgreen); padding: var(--spac4) var(--spac8);display: flex; justify-content: space-between;z-index: 99;box-sizing: border-box;align-items: center;}
.actionCheckboxs p { color: white;}

.input_field input:focus, 
.input_field input:autofill, 
.input_field input:active, 
.input_field input.filled, 
.input_field textarea:focus, 
.input_field textarea:autofill, 
.input_field textarea:active, 
.input_field textarea.filled {padding-top: 32px;}

.input_field input:focus + label, 
.input_field input:autofill + label, 
.input_field input:active + label, 
.input_field input.filled + label, 
.input_field textarea:focus + label, 
.input_field textarea:autofill + label, 
.input_field textarea:active + label, 
.input_field textarea.filled + label {margin-top: -8px; opacity: .6; font-size: 12px; font-weight: var(--font-medium); }


.input_field input:valid, 
.input_field textarea:valid, 
.input_field select:valid { }

.lembrar-senha a {color: var(--blue);}
.input_field textarea {height: 130px;}

@media (max-width: 750px) { 
     form {width: 100%;}
}
@media (max-width: 500px) { 
     form .form_division {flex-direction: column;}
}

.input_field input.hasDatepicker, 
.input_field input.hasDatepicker::placeholder {padding-top: 0;text-align: center;font-size: 16px;}

#ui-datepicker-div {z-index: 10000 !important;background: #f8f8f5; border-radius: var(--box-border-radius-small); box-shadow: var(--shadow);}
#ui-datepicker-div a { color: var(--darkgreen) !important; font-weight: var(--font-medium) !important; }
#ui-datepicker-div a:hover { color: var(--darkgreen-hover) !important;}
.ui-datepicker-header{ display: flex;width: -webkit-fill-available;justify-content: space-between;padding: var(--spac4); }
.ui-datepicker-title{font-weight: var(--font-medium);text-align: center; position: absolute;width: -webkit-fill-available;pointer-events: none;}
.ui-state-default{color: var(--text);}