.whatsapp-logotype {
width: 20px;
height: 20px;
margin: 0 0.5rem;
display: inline-block;
background: transparent url('https://cdn.fiatrepublic.com/apps/2021-11-25/shared/assets/whatsapp-icon-logo.png') center center / contain no-repeat;
}
form {
display: block;
width: 100%;
}
.border {
padding: 30px 0 0;
border-top: 1px solid rgba(187, 187, 187, 0.6);
}
.auth-form-links, .auth-form-actions {
width: 100%;
margin: 30px 0 0;
display: flex;
align-items: center;
}
.form-field {
margin-bottom: 20px;
position: relative;
}
.form-field input {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 4px 11px;
border: 1px solid #d9d9d9;
border-radius: 6px;
position: relative;
display: inline-block;
line-height: 1.5715;
font-size: 14px;
background-color: #ffffff;
color: #2a2563;
transition: all 0.3s ease 0s;
}
.form-field input:hover {
border-color: #bbbbbb;
}
.form-field.form-field--with-error .fr-form-field--error {
padding: 0.25rem 0;
display: block;
}
.form-field.form-field--with-error {
margin-bottom: 0;
}
.form-field.form-field--with-error input {
border-color: #d9363e;
}
.form-field input:focus, .form-field input:focus-within, .form-field input:focus-visible {
border-color: #bbbbbb;
outline: none;
box-shadow: 0 0 0 2px rgba(187, 187, 187, 0.2);
}
.form-field.form-field--with-error input:focus, .form-field.form-field--with-error input:focus-within, .form-field.form-field--with-error input:focus-visible {
outline-color: #d9363e;
}
.form-field label {
margin-bottom: 0.5rem;
display: block;
font-size: 14px;
white-space: nowrap;
color: #8f8f8f;
}
.alert {
padding: 8px 15px;
border-radius: 6px;
box-sizing: border-box;
line-height: 1.5715;
font-size: 14px;
position: relative;
display: flex;
flex-direction: column;
}
.alert h2 {
margin-bottom: 1rem;
font-size: 16px;
font-weight: 600;
}
.alert.error {
border: 1px solid #ffccc7;
background-color: #fff2f0;
color: #d9363e;
}
.alert.warning {
border: 1px solid #ffe58f;
background-color: #fffbe6;
color: #d48806;
}
.alert.success {
border: 1px solid #b7eb8f;
background-color: #f6ffed;
color: #389e0d;
}
.form-field select {
width: 100%;
height: 32px;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 6px;
padding: 4px 11px;
line-height: 1.5715;
transition: all 0.3s ease 0s;
outline: none;
color: #2a2563;
font-size: 14px;
}
.form-field select:hover {
border: 1px solid #bbbbbb;
}
.fr-form-field-radio label {
padding: 8px 15px;
border: 1px solid rgba(110, 110, 110, 0.4);
border-radius: 50px;
cursor: pointer;
}
.fr-form-field-radio input[type=radio] {
display: none;
}
.fr-form-field-checkbox input[type=checkbox] {
width: 14px;
height: 14px;
margin: 0;
}
.fr-form-field-checkbox label {
margin: 0 0 0 0.5rem;
white-space: normal;
max-width: calc(100% - 14px - 0.5rem);
}
.form-field input:disabled, .form-field select:disabled {
cursor: not-allowed;
}
.fr-form-field--error {
font-size: 0.75rem;
color: #d9363e;
}
.form-field input.fr-valid:not(.pristine) {
border-color: #389e0d;
}
.additional-actions {
margin-top: 2rem;
display: flex;
flex-direction: column;
width: 100%;
}
.autoComplete_wrapper > ul {
width: 22rem;
max-width: 99vw;
border-radius: 2px;
overflow-y: auto;
margin-top: 4px;
background-color: #f4f4f4;
border: 0 none transparent;
box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.12);
}
.autoComplete_wrapper > ul > li {
padding: 0.25rem 0.625rem;
font-size: 0.8125rem;
min-height: 1.625rem;
line-height: 1.25rem;
color: #2a2563;
border-radius: 0;
background-color: transparent;
}
.autoComplete_wrapper > ul > li:hover {
background-color: #d9d9d9;
}
.autoComplete_wrapper .no-result {
padding: 0.25rem 0.625rem;
font-size: 0.8125rem;
}
.form-field select option {
font-size: 13px;
padding: 2px 8px;
}
.autoComplete_wrapper:after {
top: 50% !important;
margin-top: -0.3rem;
}
.autoComplete_wrapper[aria-expanded=true]:after {
top: 50% !important;
margin-top: -0.2rem;
}
.autocomplete-no-data-wrapper {
margin: 0.5rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
.autocomplete-no-data-wrapper span {
color: #d9d9d9;
margin: auto;
font-size: 0.875rem;
}
.autocomplete-no-data-img-wrapper {
margin-bottom: 0.5rem;
height: 2.1875rem;
}
.autocomplete-no-data-img path, .autocomplete-no-data-img-g {
stroke: #d9d9d9;
}
.autocomplete-no-data-img-path, .autocomplete-no-data-img-ellipse {
fill: rgba(255, 255, 255, 0.85);
}
@media (prefers-color-scheme: dark) {
.alert.error {
border: 1px solid rgba(255, 163, 158, 0.3);
background-color: rgba(255, 241, 240, 0.1);
color: #eaeaea;
}
.alert.success {
border: 1px solid rgba(183, 235, 143, 0.3);
background-color: rgba(246, 255, 237, 0.1);
color: #eaeaea;
}
.form-field input:hover, .form-field select:hover {
border-color: rgba(187, 187, 187, 0.6);
}
.form-field input:focus, .form-field input:focus-within, .form-field input:focus-visible {
border-color: rgba(187, 187, 187, 0.6);
outline: none;
box-shadow: 0 0 0 2px rgba(187, 187, 187, 0.2);
}
.form-field.form-field--with-error input:focus, .form-field.form-field--with-error input:focus-within, .form-field.form-field--with-error input:focus-visible {
outline-color: #d9363e;
box-shadow: none;
}
.form-field label {
color: rgba(255, 255, 255, 0.85);
}
.form-field input, .form-field select {
background-color: transparent;
border: 1px solid #434343;
color: rgba(255, 255, 255, 0.85);
}
.form-field select option {
background-color: #141414;
}
.form-field input:disabled, .form-field select:disabled {
background-color: #141414;
border-color: #434343;
cursor: not-allowed;
}
.fr-form-field--error {
color: #a61d24;
}
.form-field input.fr-invalid:not(.pristine) {
border-color: #a61d24;
}
.autoComplete_wrapper > ul {
background-color: #202020;
}
.autoComplete_wrapper > ul > li {
color: rgba(255, 255, 255, 0.85);
}
.autoComplete_wrapper > ul > li:hover {
background-color: #434343;
}
.autocomplete-no-data-wrapper span {
color: rgba(255, 255, 255, 0.3);
}
.autocomplete-no-data-img path, .autocomplete-no-data-img-g {
stroke: #434343;
}
.autocomplete-no-data-img-ellipse {
fill: rgba(255, 255, 255, 0.85);
fill-opacity: 0.08;
}
.autocomplete-no-data-img-path {
fill: #202020;
}
}