:root {
    --BRESCA_primary-blue: #445EF4;
    --BRESCA_primary-green: #00B586;
    --BRESCA_primary-black: #0F0742;
    --BRESCA_primary-light-blue: #D8F3FA;
    --BRESCA_primary-white: #FEFEFE;
}

body,
html {
    height: 100dvh;
    background-color: var(--BRESCA_primary-blue) !important;
    /* Prefijo para navegadores antiguos */
    background: -webkit-linear-gradient(top, #cad2fc, var(--BRESCA_primary-blue)); /* Chrome, Safari, iOS */
    background: -moz-linear-gradient(top, #cad2fc, var(--BRESCA_primary-blue));    /* Firefox */
    background: -o-linear-gradient(top, #cad2fc, var(--BRESCA_primary-blue));      /* Opera */
    background: -ms-linear-gradient(top, #cad2fc, var(--BRESCA_primary-blue));     /* IE 10+ */
    /* Gradiente estándar para navegadores modernos */
    background: linear-gradient(to bottom, #cad2fc, var(--BRESCA_primary-blue));
    font-family: "Rubik", system-ui;
}
@media (max-width: 600px) {
    body {
        font-size: 120%; /* Escalar todo el texto en general */
    }
}
.btn, .btn-large, .btn-small {
    background-color: #445EF4;
}
.btn:hover, .btn-large:hover, .btn-small:hover,.btn:focus, .btn-large:focus, .btn-small:focus {
    background-color: #00B586;
}
/*.card-panel{background-color: #ffffffde}*/
.card-panel {background-color:#ffffff;/*border: 5px solid #00b586;*/}
.h100 {
    height: 100%;
}
#logo {
    fill: black !important;
    width: 60%;
    margin-top: 20px;
}
.error {
    background-color: #e25151;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    margin: 10px 0;
}

@media(max-width: 350px){
    #formu{max-width:310px  !important;}
}
.formu{
    max-width:420px;
    margin:0 auto;
    z-index: 2;
    position: relative;
    min-width: 320px;
}
#sls{
    position: relative;
    margin: 0px;
    padding: 0.8em;
    padding-top: 1em;
    height: 90px;
}
#sls img{ 
    width: 100%;
    max-width: 110px;
}
#slsContainer{
    border: 1px solid #fff;
    border-top: 0px;
    align-items: center;
    text-align: center;
    margin-top: -1px;
    background-color: rgba(0, 92, 152, 0.5);
}
#bajada1,#bajada2{
    font-size: 0.6em;
    margin: 0px auto;
    color: #fff;
}
#recuperar{
    font-size: 0.6em;
    margin: 0px;
    width: 100%;
    display: block;
    padding-top: 6px;
    color: #d1d1d1;
}
canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}
.posicionLogin{
    position: absolute;
    top: 0;
    width: 100%;
}

#slsProv{
    position: relative;
    margin: 0px;
    padding: 1em;
    border-top: 1.5px solid white;
    border-right: 1.5px solid white;
    border-left: 1.5px solid white;
}
#slsProv img{ 
    width: 100%;
    max-width: 110px;
}
#saveButton i { margin-right: 5px;}
#saveButton span { font-size: 0.7em;}

.pt-20 { padding-top: 20px;}

.line-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #333; /* Color del texto */
}

.line-with-text::before,
.line-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc; /* Color de la línea */
    margin: 0 10px; /* Espaciado entre la palabra y la línea */
}

.line-with-text span {
    font-size: 16px; /* Tamaño de la fuente */
    padding: 0 5px; /* Espaciado interno de la palabra */
}
@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar {
      background: #445EF4; /* Color de fondo para la barra */
    }
}
.redes {
    height: 100%;
    padding: 6px;
}
.btn:not(.btn-floating), .btn-large:not(.btn-floating), .btn-small:not(.btn-floating) {
    border-radius: 1em;
}
.facebook {
    background-color: #2c2299;
}
.instagram {
    background: #833ab4;
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
}
.w100{width: 100%;}
.volver {
    font-size: 0.8em;
    margin: 0px;
    padding-top: 6px;
    color: #bebebe;
}
.invalidClass{
    border-bottom: 1px solid #F44336 !important;
    -webkit-box-shadow: 0 1px 0 0 #F44336 !important;
    box-shadow: 0 1px 0 0 #F44336 !important;
}
.validClass{
    border-bottom: 1px solid #4CAF50 !important;
    -webkit-box-shadow: 0 1px 0 0 #4CAF50 !important;
    box-shadow: 0 1px 0 0 #4CAF50 !important;
}


.password-input-box{
    position: relative;
    height: 40px;
}

.password-input{
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    padding: 5px 15px;
    outline: none;
    border-radius: 5px;
    padding-right: 45px;
}

.show-password{
    position: absolute;
    right: 15px;
    top: 33%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--BRESCA_primary-white);
}

::placeholder {
    color: #e8e8e8;
}

.input-field {
    margin-top: 0rem;
}
.input-field > label {
    color: var(--BRESCA_primary-black);
    top: -9px;
}
.iti__search-input {
    padding: 0.5em !important;
}