body {
    --rs-input-component-text-color: #000000;
    --rs-input-component-label-color: #000000;
    --rs-invert-on-dark: invert(0) brightness(100%) drop-shadow(0px 0px 0px #000000);
}

[theme="dark"] {
    --rs-input-component-text-color: #FFFFFF;
    --rs-input-component-label-color: #FFFFFF;
    --rs-invert-on-dark: invert(1) brightness(200%) drop-shadow(0px 0px 0px #000000);
}

@media (prefers-color-scheme: dark) {
    body:not([theme]) {
        --rs-input-component-text-color: #FFFFFF;
        --rs-input-component-label-color: #FFFFFF;
        --rs-invert-on-dark: invert(1) brightness(200%) drop-shadow(0px 0px 0px #000000);
    }
}

.form-input-component label {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--rs-input-component-label-color);
    padding: 0 0 8px 2px;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.form-input-component .input-field-required {
    color: #FF0000FF;
    inset-inline-start: 1rem;
    font-size: 1rem;
    font-weight: 800;
}

.form-input-component input,
.form-input-component textarea {
    background: transparent;
}

.form-input-component input {
    transition: border-color .2s cubic-bezier(.785,.135,.15,.86) 0s;
    border: 1px solid #d6d9de;
    border-radius: 9px;
    box-sizing: border-box;
    color: var(--rs-input-component-text-color, #000);
    font-size: 14px;
    font-weight: 400;
    height: 42px;
    line-height: 1;
    padding: 0 20px 0 42px;
    width: 100%;
    box-shadow: none;
    appearance: none;
}

.form-input-component input:focus,
.form-input-component textarea:focus {
    outline: none;
}

.form-input-component .input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-component .input-icon-group .input-icon {
    position: absolute;
    width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.form-input-component .input-icon-group .input-icon img,
.form-input-component .input-icon-group .input-icon svg,
.form-input-component .input-icon-group .input-icon .input-icon-text {
    width: 18px;
    color: #000000;
    opacity: 25%;
    filter: var(--rs-invert-on-dark);
    display: flex;
    justify-content: center;
}

.password-type-icon {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 1rem;
    opacity: .5;
}


.social-login-divider {
    align-items: center;
    display: flex;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
}

.social-login-divider:before, .social-login-divider:after {
    border-bottom: 1px solid #e8e8e8;
    content: "";
    display: block;
    width: 50%;
}

.social-login-divider_text {
    color: #d9d9d9;
    margin: 0 10px;
    user-select: none;
}