/* !!! THIS FILE UNIFIES DIFFERENT COMPONENT STYLES IN ONE SINGLE FILE DUE TO PERFORMANCE REASONS  */


/* LOGIN */
.login__body {
    padding: var(--Size-Big, 16px) 28px 36px;
    font-family: 'Inter';
    text-align: center;
}
.login__body .login__section {
    font-family: inherit;
}
.login__body .login__section:not(.login__section:last-child) {
    margin-bottom: 32px;
}

/* Login intro */
.login__body .login__intro p:first-child {
    font-size: 30px;
    line-height: 32px;
    margin-bottom: var(--Size-Smallest, 8px);
}

/* Login form */
.login__body .login__form .form__container:last-child a {
    color: var(--Bases-Darkest, #252525);
}
.login__body .login__form .form__container:last-child a:hover {
    color: var(--Principales-Verde-primario, #05E172);
}

/* Login action */
.login__body .bplay25-btn--primary {
    width: 100%;
    height: 40px;
}
.login__body .bplay25-btn--primary[disabled] {
    pointer-events: none;
    color: var(--especiales-txt-button-disable, rgba(69, 69, 69, 0.20));
    background: var(--especiales-bg-button-disable, rgba(199, 199, 199, 0.40));
    cursor: not-allowed;
}
.login__body .bplay25-btn--primary:hover {
    color: var(--Bases-Light-Gray, #ECECEC);
    background: var(--Principales-Verde-secundario, #0CAB5A);
}

/* Login footer */
.login__body .login__footer p a {
    color: var(--Principales-Verde-secundario, #0CAB5A);
}
.login__body .login__footer p a:hover {
    color: var(--Principales-Verde-Terciario, #00683E);
}


/* GENERAL FORM COMPONENT -- isolated at "/css/bplay-v25/components/modular/form-v25.css" */

.form {
    font-family: inherit;
}
.form .form__container {
    position: relative;
    font-family: inherit;
}
.form .form__label {
    font-family: inherit;
    font-size: var(--Size-Small, 12px);
    line-height: var(--Size-Big, 16px);
    margin-bottom: var(--Size-Mini, 4px);
}
.form .form__container[data-appearance="info"] .form__label {
    color: var(--Semanticos-Info---Dark, #178FBB);
}
.form .form__container[data-appearance="error"] .form__label {
    color: var(--Semanticos-Error---Dark, #CC1428);
}
.form .form__input {
    display: block;
    width: 100%;
    height: 32px;
    background: transparent;
    font-family: inherit;
    font-size: var(--Size-Small, 12px);
    line-height: var(--Size-Big, 16px);
    padding: var(--Size-Small, 12px) 32px var(--Size-Small, 12px) 4.18px;
    border: none;
    outline: none;
    border-bottom: 1.5px solid var(--Bases-Darkest, #252525);
    margin-bottom: 0;
    border-radius: 0;
}
.form .form__input:-webkit-autofill,
.form .form__input:-webkit-autofill:hover, 
.form .form__input:-webkit-autofill:focus {
    background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
    border-bottom: 1.5px solid var(--Bases-Darkest, #252525) !important;
    padding: var(--Size-Small, 12px) 32px var(--Size-Small, 12px) 4.18px !important;
    -webkit-text-fill-color: var(--Bases-Darkest, #252525) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--Bases-Pure-White, #FCFCFC) inset;
    transition: background-color 5000s ease-in-out 0s;
}
.form .form__container[data-appearance="info"] .form__input {
    border-bottom: 1.5px solid var(--Semanticos-Info---Dark, #178FBB);
}
.form .form__container[data-appearance="error"] .form__input {
    border-bottom: 1.5px solid var(--Semanticos-Error---Dark, #CC1428);
}
.form .form__container:not(.form__container:last-child) {
    margin-bottom: var(--Size-Small, 12px);
}
.form .form__eye {
    position: absolute;
    right: 5.23px;
    bottom: 4px;
    width: 25.1px;
    height: var(--Size-Huge, 24px);
}
.form .form__eye:hover {
    cursor: pointer;
}
.form .form__eye svg {
    position: static;
    width: 100%;
}
.form .form__container[data-appearance="info"] .form__eye svg path {
    fill: var(--Semanticos-Info---Dark, #178FBB);
}
.form .form__container[data-appearance="error"] .form__eye svg path {
    fill: var(--Semanticos-Error---Dark, #CC1428);
}