body{
    display: flex;
    flex-direction: column;

    font-family: "Roboto", sans-serif;;
    min-height: 100vh;
}
:root {
    --UCB_Ppal: #001489;
    --UCB_01: #404FA7;
    --UCB_02: #8089C4;
    --UCB_03: #BFC4E1;
    --UCB_04: #EDF0FF;
    --Gris_Texto: #333;
    --Supporting-Gray-1: #F1EFEA;
    --Supporting-Gray-2: #E2DFDA;
    --Gris_Desactivado: #E7E7E7;
    --Blanco: #FFF;
    --Variante_crema: #CBC6BD;
    --Dark_gray: #515151;
    --Salmon: #F18080;
    --Salmon_04: #FDF3F1;
    --Grises_01: #212121;
    --Gris_Light: #B1B3B3; 
    --Grises_Dark_grey: #53565A;
    --Grises_Extra_light: #F4F4F4;

}

.loader_container{
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #404fa7c0;
    z-index: 9999999;
}
/* .loader {
  width: 24px;
  height: 80px;
  display: block;
  margin: 35px auto 0;
  border: 2px solid #FFF;
  border-radius: 0 0 50px 50px;
  position: relative;
  box-shadow: 0px 0px #404FA7 inset;
  background-image: linear-gradient(#404FA7 100px, transparent 0);
  background-position: 0px 0px;
  background-size: 22px 80px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  border: 2px solid #FFF;
  border-radius: 50%;
  width: 28px;
  height: 6px;
}
.loader::before {
  content: '';  
  box-sizing: border-box;
  left: 0;
  bottom: -4px;
  border-radius: 50%;
  position: absolute;
  width: 6px;
  height: 6px;
  animation: animloader1 3s linear infinite;
}

@keyframes animloader {
  0% {
    background-position: 0px 80px;
  }
  100% {
    background-position: 0px 0px;
  }
}

@keyframes animloader1 {
  0% {
    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
  }
  20% {
    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
  }
  40% {
    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
  }
  60% {
    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
  }
  80% {
    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
  }
} */

.loader {
    height: 5px;
    width: 5px;
    color: #fff;
    box-shadow: -10px -10px 0 5px,
                -10px -10px 0 5px,
                -10px -10px 0 5px,
                -10px -10px 0 5px;
    animation: loader-38 6s infinite;
}

@keyframes loader-38 {
    0% {
        box-shadow: -10px -10px 0 5px,
                    -10px -10px 0 5px,
                    -10px -10px 0 5px,
                    -10px -10px 0 5px;
    }
    8.33% {
        box-shadow: -10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px -10px 0 5px;
    }
    16.66% {
        box-shadow: -10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px 10px 0 5px,
                    10px 10px 0 5px;
    }
    24.99% {
        box-shadow: -10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    33.32% {
        box-shadow: -10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px 10px 0 5px,
                    -10px -10px 0 5px;
    }
    41.65% {
        box-shadow: 10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px 10px 0 5px,
                    10px -10px 0 5px;
    }
    49.98% {
        box-shadow: 10px 10px 0 5px,
                10px 10px 0 5px,
                10px 10px 0 5px,
                10px 10px 0 5px;
    }
    58.31% {
        box-shadow: -10px 10px 0 5px,
                    -10px 10px 0 5px,
                    10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    66.64% {
        box-shadow: -10px -10px 0 5px,
                    -10px -10px 0 5px,
                    10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    74.97% {
        box-shadow: -10px -10px 0 5px,
                    10px -10px 0 5px,
                    10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    83.3% {
        box-shadow: -10px -10px 0 5px,
                    10px 10px 0 5px,
                    10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    91.63% {
        box-shadow: -10px -10px 0 5px,
                    -10px 10px 0 5px,
                    -10px 10px 0 5px,
                    -10px 10px 0 5px;
    }
    100% {
        box-shadow: -10px -10px 0 5px,
                    -10px -10px 0 5px,
                    -10px -10px 0 5px,
                    -10px -10px 0 5px;
    }
}

    


h1{
    margin: 0;

    font-family: 'ITC Avant Garde Gothic Std';
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--Gris_Texto);
}
h2{
     margin: 0;

    font-family: 'ITC Avant Garde Gothic Std';
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--Gris_Texto);
}
h3{
     margin: 0;

    font-family: 'ITC Avant Garde Gothic Std';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--Gris_Texto);
}
p{
    margin: 0;
    
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Gris_Texto);
}
.small{
    font-size: 14px;
}
.bold{
    font-weight: 700;
}

.up { /*Scroll to top*/
    display: none;
    align-items: center;
    justify-content: center;
    
    position: fixed;
    bottom: 245px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: #FFF;
    border-radius: 40px;    
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    
    z-index: 10;
}

.btn_ppal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    width: fit-content;
    height: 42px;
    padding: 10px 20px;    
    border: none;
    border-radius: 40px;    
    background: var(--UCB_Ppal);
    cursor: pointer;

    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #FFF;
}
.btn_ppal:hover {
    background: var(--UCB_02);
}
.btn_ppal:disabled {    
    background: var(--Gris_Desactivado);
    pointer-events: none;
}

.btn_secundary {
    display: flex;    
    justify-content: center;
    align-items: center;
    gap: 12px;

    width: fit-content;
    height: 42px;
    padding: 10px 20px;
    border-radius: 40px;    
    border: 2px solid var(--UCB_Ppal);
    background: #FBFAF9;
    cursor: pointer;

    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--UCB_Ppal);
}
.btn_secundary:hover {    
    color: var(--UCB_02);
    border: 2px solid var(--UCB_02);
    background: #FBFAF9;
}
.btn_secundary:disabled {    
    color: #B1B3B3;
    border: 2px solid var(--Gris_Desactivado);;
    background: #F4F4F4;
    pointer-events: none;
}

ul{
    margin-bottom: 0;
}

ul li::marker, ul ul li::marker{
    color: var(--Salmon);
    list-style-type: disc;
}

ul li{
    color: var(--Gris_Texto);
    font-feature-settings: 'liga' off;

    /* Body/regular */
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 17px;
}

ul li strong{
    color: var(--Gris_Texto, #333);
    font-feature-settings: 'liga' off;

    /* Body/bold */
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

input[type="text"],
input[type="password"] {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 8px 10px 8px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    border: 1px solid var(--Supporting-Gray-2);
    background: #FFF;

    font-family: "Roboto";
    font-size: 16px;
    font-weight: 400;
    color: var(--Gris_Texto);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FFF inset;
  -webkit-text-fill-color: var(--Gris_Texto);
  transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder */
input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: var(--Supporting-Gray-2);
    outline: none;
    box-shadow: none;
}

/* Focus */
input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--UCB_01);
    color: var(--Gris_Texto);
    outline: none;
    box-shadow: none;
}



/* Disabled */
input[type="text"]:disabled,
input[type="password"]:disabled {
    color: var(--Supporting-Gray-2);
    border: 1px solid #FBFAF9;
    background: #FBFAF9;
}

/* Error*/
input[type="text"].is-error,
input[type="password"].is-error {
    color: #C300A3;
    border: 1px solid #C300A3;
    background: linear-gradient(0deg, rgba(195, 0, 163, 0.08) 0%, rgba(195, 0, 163, 0.08) 100%), #FFF;
}
input[type="text"].is-error:focus,
input[type="password"].is-error:focus {
    box-shadow: none;
}
input[type="text"].is-error::placeholder,
input[type="password"].is-error::placeholder {
    color: #C300A3;
}

.icon_eye {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}

.select-wrapper {
  position: relative;
  width: 100%;
}
.select-wrapper select {
  width: 100%;
  height: 40px;
  padding: 10px 20px;
  padding-right: 40px; /* espacio para la flecha */
  border-radius: 10px;
  border: 1px solid var(--Supporting-Gray-2);
  background: #FFF;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url(../img/icons/icon-select-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;

  font-family: "Roboto";
  font-size: 16px;
  line-height: normal;
  color: var(--Gris_Texto);
}

input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.4);
    /* IE */
    -moz-transform: scale(1.4);
    /* FF */
    -webkit-transform: scale(1.4);
    /* Safari and Chrome */
    -o-transform: scale(1.4);
    /* Opera */
    transform: scale(1.4);
    padding: 10px;
    cursor: pointer;
}

input :focus {
    outline: none;
}

a{
     margin: 0;
    
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Gris_Texto);
    text-decoration: none;
}

.bold-blue{
    color: var(--UCB_01);
}