#kc-login-register .wrapper {
    background: var(--thim-body-bg-color);
    position: relative;
    border-radius: var(--thim-border-radius-item, 0);
    padding: 40px 50px;
    overflow: hidden;
    width: 900px;
    max-width: calc(100% - 60px);
    color: var(--thim-font-body-color);
    cursor: default;
}

#kc-login-register .container {
    overflow: hidden;
    display: flex;
    margin: auto;
}

#kc-login-register .inner {
    display: flex;
    width: 100%;
    transition: all .3s;
    text-align: left;
}

#kc-login-register .wrapper #login-form,
#kc-login-register .wrapper #register-form {
    margin-top: 30px !important;

}

#kc-login-register .wrapper .login-form-content,
#kc-login-register .wrapper .register-form-content {
    min-width: 100%;
    padding: 0 50px;
    position: relative;
    float: left;
    clear: none;
}

#kc-login-register.sign-up .inner {
    transform: translateX(-100%);
}

#kc-login-register .inner {
    display: flex;
    width: 100%;
    transition: all .3s;
    text-align: left;
}

#kc-login-register .login-password #show_pass.active,
#kc-login-register .register-password #show_pass_register.active,
#kc-login-register .repeat-password #show_pass_repeat.active {
    color: #333;
}

#kc-login-register .login-password,
#kc-login-register .register-password,
#kc-login-register .repeat-password {
    position: relative;
}

#kc-login-register .login-password #show_pass,
#kc-login-register .register-password #show_pass_register,
#kc-login-register .repeat-password #show_pass_repeat {
    position: absolute;
    line-height: 40px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    color: #aeaeae;
}

#kc-login-register .lr-social-title {
    color: #FF3F33;
    text-align: center;
    font-family: "Roboto";
    font-weight: 900;
    font-size: 26px;
    line-height: 1.2;
}

#kc-login-register input {
    width: 100%;
    border-color: #999;
}

#kc-login-register input::placeholder {
    color: rgb(56, 55, 55);
    /* Cambia el color */
    font-style: italic;
    /* Cambia el estilo de la fuente */
    font-size: 16px;
    /* Cambia el tamaño de la fuente */
    opacity: 0.7;
    /* Cambia la opacidad del placeholder */
}

#kc-login-register .wrapper-text-login-social {
    width: 100%;
    text-align: center;
}

#kc-login-register .text-login-social {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #000;
    text-align: center;
}

#kc-login-register .text-login-social::before {
    content: '';
    position: absolute;
    left: -20px;
    /* Ajusta este valor para que la línea sobresalga más o menos */
    right: -20px;
    /* Ajusta este valor para que la línea sobresalga más o menos */
    top: 50%;
    height: 1px;
    /* Grosor de la línea */
    background-color: #000;
    /* Color de la línea */
    z-index: 1;
    /* Coloca la línea detrás del texto */
}

#kc-login-register .text-login-social span {
    background-color: #fff;
    /* Fondo del texto para tapar la línea */
    padding: 0 10px;
    /* Espacio alrededor del texto */
    position: relative;
    z-index: 1;
    /* Coloca el texto sobre la línea */
}

#kc-login-register .wc-social-login {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin: 30px 0px !important;
}

#kc-login-register .button-social-login {
    width: 250px;
    text-align: left;
    /* margin: 30px 0px; */
}

#kc-login-register .lr-button-submit {
    width: 100% !important;
    padding: 15px 10px !important;
    font-size: 22px !important;
    margin-top: 30px !important;
    border: none;
}

#kc-login-register .lr-button-submit:hover {
    background-color: #000 !important;
}

#kc-login-register .lr-button-submit.loading {
    background-color: #000 !important;

}

#kc-login-register .lost-password-link {
    display: flex;
    justify-content: end;
    color: #FF3F33;
}

#kc-login-register .link-button {
    display: flex;
    color: #000;
    justify-content: center;
    margin-top: 30px;
}

#kc-login-register .link-button a {
    color: #FF3F33;
    padding-left: 15px;
}


#kc-login-register .form-group {
    position: relative;
    /* Contenedor relativo para posicionar el error */
    margin-bottom: 20px;
    /* Espacio entre campos */
}

#kc-login-register .form-row {
    display: flex;
    gap: 10px;
}

#kc-login-register .form-group {
    position: relative;
    width: 100%;
}


/* Estilos para los mensajes de error debajo de los inputs */
#kc-login-register .error-message {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: red;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    display: none;
}

#kc-login-register .invalid {
    border-color: red !important;
    /* Borde rojo */
}

/* Estilos para el mensaje de error general */
#kc-login-register .general-error-message {
    color: red;
    font-size: 14px;
    display: none;
}



.spinner {
    position: relative;
    width: 20px;
    /* Contenedor más pequeño */
    height: 20px;
    /* Contenedor más pequeño */
}

.spinner div {
    position: absolute;
    width: 2px;
    /* Barritas más delgadas */
    height: 100%;
    background-color: #FFF;
    /* Color de las barritas */
    animation: scale 1.2s infinite ease-in-out;
}

.spinner div:nth-child(1) {
    left: 0;
    animation-delay: -0.4s;
}

.spinner div:nth-child(2) {
    left: 6px;
    /* Espaciado reducido */
    animation-delay: -0.2s;
}

.spinner div:nth-child(3) {
    left: 12px;
    /* Espaciado reducido */
    animation-delay: 0s;
}

.spinner div:nth-child(4) {
    left: 18px;
    /* Espaciado reducido */
    animation-delay: 0.2s;
}

@keyframes scale {

    0%,
    100% {
        transform: scaleY(0.4);
        /* Inicia pequeña */
    }

    50% {
        transform: scaleY(1);
        /* Se agranda a la mitad del ciclo */
    }
}

#kc-login-register .login-in {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#kc-login-register .login-in-text {
    width: 100%;
    text-align: center;
}

#kc-login-register .login-in-button {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

#kc-login-register .login-in-button .logout-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #FF3F33;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

#kc-login-register .login-in-button .logout-link:hover {
    background-color: #000;
}


@media (min-width: 768px) {
    #kc-login-register .wrapper {
        padding: 40px 0;
        /* width: 790px; */
    }
}

@media (max-width: 480px) {
    #kc-login-register .wrapper {
        padding: 0 15px;
        max-width: 100%;
    }

    #kc-login-register .lr-social-title {
        font-size: 22px;

    }

    #kc-login-register .wrapper .login-form-content,
    #kc-login-register .wrapper .register-form-content {
        padding: 0px;
    }
}