/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');

* {

    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.5px;
}



body {
  background-color: #e7ecf3 !important;
  /* background-image: 
  linear-gradient(
    to bottom in oklab, 
    lab(90% 0 -6) 0%, 59%, hsl(218 31% 80%) 100%
  )  ; 
  https://gradient.style/#type=linear&space=oklab&linear_named_angle=to+bottom&linear_angle=180&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22lab%2890%25+0+-6%29%22%2C%22position1%22%3A0%2C%22position2%22%3A0%2C%22auto%22%3A0%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22percentage%22%3A59%2C%22auto%22%3A50%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22hsl%28218+31%25+80%25%29%22%2C%22auto%22%3A100%2C%22position1%22%3A100%2C%22position2%22%3A100%7D
  
  */
}


/***************** SPINNER *********************/

.loader {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-block;
border-top: 4px solid #59c4e2;
border-right: 4px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';  
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
border-radius: 50%;
border-bottom: 4px solid #0070b9;
border-left: 4px solid transparent;
}
@keyframes rotation {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
} 

/********************************************/


.msj {
  /* OLD ¿podre reutilizarlo ? QUITAR SINO */
  background-color: rgba(192, 190, 190, 0.37);
  border-radius: 20px;
  position: absolute;
  width: max-content;
  padding: 1%;
  height: 10%;
  height: min-content;
  z-index: 2;
  top: 5%;
  right: 5%;
  /* right: 50%; */
  box-shadow: rgba(27, 27, 27, 0.404) 0px 6px 20px 0px;
  font-weight: 600;
}
/* https://gradient.style/#type=radial&space=oklab&radial_shape=circle&radial_position=%7B%22x%22%3A50%2C%22y%22%3A50%7D&radial_named_position=center&radial_size=farthest-corner&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22%23a74f4f%22%2C%22position1%22%3A15%2C%22position2%22%3A15%2C%22auto%22%3A0%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22percentage%22%3A79%2C%22auto%22%3A50%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2848%25+0.00+0+%2F+0%25%29%22%2C%22auto%22%3A100%2C%22position1%22%3A100%2C%22position2%22%3A100%7D */
.container-mensaje {
  position: absolute;
  background-color: #ca2c2cec; 
  /* width: 90%;  */
  width: auto; 
  min-width: 430px;
  /* height: 10%;  */
  min-height: 40px; 
  height: max-content;
  margin: 1% !important; 
  padding: 2px;
  border-radius: 8px;
  box-shadow: rgba(27, 27, 27, 0.404) 0px 2px 20px 0px;
  bottom: 1%;
  left: 1%;
  /* left: 50%;
  transform: translate(-50%,0); */
  text-align: center;
  

}

.mensaje {
  color: rgb(255, 231, 231);
  /* position: absolute;
  width: 100%;
  background-image:
   radial-gradient(farthest-corner circle at 50% 50% in oklab,
      #a74f4f 15% 15%, 79%, oklch(48% 0.00 0 / 0%) 100%);
  text-align: center; */
  display: block !important;
  word-break: break-all;
  padding-right: 2%;
  padding-top: 2%;
  /* visibility: hidden; */
  /* margin: 2%; */

}

.info {
  background-color: #2c8037e3 !important; 

}


.cerrar-mensaje {
  color: white; 
  cursor:pointer; 
  position: absolute; 
  top: 0; 
  right: 0; 
  padding: 2%;

}



@media screen and (max-width: 575px) {
  .container-mensaje {
    min-width: 80vw !important;
  }
}