/*
 * 07. NOTIFICATIONS
 */

 /* animaciones css */
 /* https://codepen.io/collection/AzKkRa */


 .noty_layout_mixin,
 #noty_layout__top,
 #noty_layout__topLeft,
 #noty_layout__topCenter,
 #noty_layout__topRight,
 #noty_layout__bottom,
 #noty_layout__bottomLeft,
 #noty_layout__bottomCenter,
 #noty_layout__bottomRight,
 #noty_layout__center,
 #noty_layout__centerLeft,
 #noty_layout__centerRight {
   position: fixed;
   margin: 0;
   padding: 0;
   z-index: 9999999;
   border-radius: 4px;
   -webkit-transform: translateZ(0) scale(1, 1);
   transform: translateZ(0) scale(1, 1);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-font-smoothing: subpixel-antialiased;
   filter: blur(0);
   -webkit-filter: blur(0);
   max-width: 90%;
 }
 
 #noty_layout__top {
   top: 0;
   left: 5%;
   width: 90%;
 }
 
 #noty_layout__topLeft {
   top: 20px;
   left: 20px;
   width: 325px;
 }
 
 #noty_layout__topCenter {
   top: 5%;
   left: 50%;
   width: 325px;
   -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
   transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1);
 }
 
 #noty_layout__topRight {
   top: 20px;
   right: 20px;
   width: 325px;
 }
 
 #noty_layout__bottom {
   bottom: 0;
   left: 5%;
   width: 90%;
 }
 
 #noty_layout__bottomLeft {
   bottom: 20px;
   left: 20px;
   width: 325px;
 }
 
 #noty_layout__bottomCenter {
   bottom: 5%;
   left: 50%;
   width: 325px;
   -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
   transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1);
 }
 
 #noty_layout__bottomRight {
   bottom: 20px;
   right: 20px;
   width: 325px;
 }
 
 #noty_layout__center {
   top: 50%;
   left: 50%;
   width: 325px;
   -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
   transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1);
 }
 
 #noty_layout__centerLeft {
   top: 50%;
   left: 20px;
   width: 325px;
   -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
   transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1);
 }
 
 #noty_layout__centerRight {
   top: 50%;
   right: 20px;
   width: 325px;
   -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
   transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1);
 }
 
 .noty_progressbar {
   display: none;
 }
 
 .noty_has_timeout.noty_has_progressbar .noty_progressbar {
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 0 0 4px 4px;
   opacity: 0.3;
   filter: alpha(opacity=10);
 }
 
 .noty_bar {
   /* -webkit-backface-visibility: hidden; */
   -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
   -ms-transform: translate(0, 0) scale(1, 1);
   transform: translate(0, 0) scale(1, 1);
   -webkit-font-smoothing: subpixel-antialiased;
   overflow: hidden;
 }
 
 .noty_effects_open {
   opacity: 0;
   -webkit-transform: translate(50%);
   -ms-transform: translate(50%);
   transform: translate(50%);
   -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }
 
 .noty_effects_close {
   -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }
 
 .noty_fix_effects_height {
   -webkit-animation: noty_anim_height 75ms ease-out;
   animation: noty_anim_height 75ms ease-out;
 }
 
 .noty_close_with_click {
   cursor: pointer;
 }
 
 .noty_close_button {
   position: absolute;
   top: 2px;
   right: 2px;
   font-weight: bold;
   width: 20px;
   height: 20px;
   text-align: center;
   line-height: 20px;
   background-color: rgba(0, 0, 0, 0.05);
   border-radius: 2px;
   cursor: pointer;
   -webkit-transition: all .2s ease-out;
   transition: all .2s ease-out;
 }
 
 .noty_close_button:hover {
   background-color: rgba(240, 233, 233, 0.1);
 }
 
 .noty_modal {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: #000;
   z-index: 10000;
   opacity: .3;
   left: 0;
   top: 0;
 }
 
 .noty_modal.noty_modal_open {
   opacity: 0;
   -webkit-animation: noty_modal_in .3s ease-out;
   animation: noty_modal_in .3s ease-out;
 }
 
 .noty_modal.noty_modal_close {
   -webkit-animation: noty_modal_out .3s ease-out;
   animation: noty_modal_out .3s ease-out;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }
 
 @-webkit-keyframes noty_modal_in {
   100% {
     opacity: .3;
   }
 }
 
 @keyframes noty_modal_in {
   100% {
     opacity: .3;
   }
 }
 
 @-webkit-keyframes noty_modal_out {
   100% {
     opacity: 0;
   }
 }
 
 @keyframes noty_modal_out {
   100% {
     opacity: 0;
   }
 }
 
 @keyframes noty_modal_out {
   100% {
     opacity: 0;
   }
 }
 
 @-webkit-keyframes noty_anim_in {
   100% {
     -webkit-transform: translate(0);
     transform: translate(0);
     opacity: 1;
   }
 }
 
 @keyframes noty_anim_in {
   100% {
     -webkit-transform: translate(0);
     transform: translate(0);
     opacity: 1;
   }
 }
 
 @-webkit-keyframes noty_anim_out {
   100% {
     -webkit-transform: translate(50%);
     transform: translate(50%);
     opacity: 0;
   }
 }
 
 @keyframes noty_anim_out {
   100% {
     -webkit-transform: translate(50%);
     transform: translate(50%);
     opacity: 0;
   }
 }
 
 @-webkit-keyframes noty_anim_height {
   100% {
     height: 0;
   }
 }
 
 @keyframes noty_anim_height {
   100% {
     height: 0;
   }
 }
 
 .noty_bar {
   margin: 4px 0;
   overflow: hidden;
   position: relative;
   border: 1px solid transparent;
   border-radius: .25rem;
 }
 
 .noty_bar .noty_body {
   font-weight: 600;
   padding: 1.07rem 1.25rem;
 }
 
 .noty_bar .noty_buttons {
   padding: 1.07rem;
 }
 
 .noty_bar .noty_close_button {
   font-size: 1.8rem;
   font-weight: 500;
   line-height: 1;
   color: #f1eded;
   filter: alpha(opacity=20);
   opacity: .5;
   background: transparent;
 }
 
 .noty_bar .noty_close_button:hover {
   background: transparent;
   text-decoration: none;
   cursor: pointer;
   filter: alpha(opacity=50);
   opacity: .75;
 }
 
 .noty_type__alert,
 .noty_type__notification {
   background-color: rgba(44, 48, 77, 0.8);
   color: #fff;
 }
 
 .noty_type__notification.noty_has_timeout.noty_has_progressbar .noty_progressbar {
   background-color: #e76c90;
   opacity: 0.5;
 }
 
 .noty_type__warning {
   background-color: #f0ad4e;
   color: #fff;
   border-color: #f0ad4e;
 }
 
 .noty_type__error {
   background-color: #e70707;
   color: #f0e5e5;
   border-color: #eee8e8;
 }
 
 .noty_type__info,
 .noty_type__information {
   background-color: #5bc0de;
   color: #fff;
   border-color: #5bc0de;
 }
 
 .noty_type__success {
   background-color: #5cb85c;
   color: #fff;
   border-color: #5cb85c;
 }

 .custom-theme .noty_body {
  background-color: #ff0000; /* Cambia el color de fondo de la alerta */
  color: #ffffff; /* Cambia el color de texto de la alerta */
}

.list-wrapper {
  overflow: auto; /*Oculta el desbordamiento */
  height: auto; /* Ajusta la altura automáticamente */
  width: 100%;
}

.responsive-select {
  width: 100%; /* Establece el ancho al 100% */
  max-width: 300px; /* Establece un ancho máximo para evitar que el select se vuelva demasiado ancho en pantallas grandes */
  padding: 10px; /* Agrega un relleno para mayor legibilidad */
  box-sizing: border-box; /* Incluye el relleno en el ancho total del select */
}

/* Media query para ajustar el tamaño del select en pantallas más pequeñas */
@media screen and (max-width: 480px) {
  .responsive-select {
    max-width: none; /* Elimina el ancho máximo para permitir que el select se ajuste completamente */
  }
}

 /* Boton flotante  */
.content-wrapper .btn-float .btn{
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: #29434e;
  padding: 5px 10px;
  border-radius: 10px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 90px;
  transition: all 0.3s ease 0s;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  z-index: 99;  
}
.content-wrapper .btn-float .btn:hover{
  color: #e4e00c;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(-7px);
}
.content-wrapper .btn-float1 .btn{
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: #29434e;
  padding: 5px 6px;
  border-radius: 10px;
  color: #fff;
  position: fixed;
  right: 25px;
  bottom: 30px;
  transition: all 0.3s ease 0s;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  z-index: 99; 
}
.content-wrapper .btn-float1 .btn:hover{
  color: #e4e00c;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(-7px);
}

.btn-float, .btn-chico, .btn-mediano, .btn-grande, .btn-float:link, .btn-float:visited {
  color: #3a56a3;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
}

.btn-float1, .btn-chico, .btn-mediano, .btn-grande, .btn-float1:link, .btn-float1:visited {
  color: #3a56a3;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
}

.btn-chico {
  font-size: 1rem;
  display: inline-block;
  width: calc(50% - 20px);
  /* padding: 10px; */
  margin: 10px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;    
  font-family: 'Source Sans Pro', sans-serif;
  /* padding: 6px 18px; */
}

.btn-mediano {
  font-size: 1rem;
  display: inline-block;
  width: calc(50% - 20px);
  padding: 10px;
  margin: 10px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;    
  font-family: 'Source Sans Pro', sans-serif;
  padding: 6px 18px;
} 

.btn-grande {
  font-size: 1rem;
  display: inline-block;
  width: calc(50% - 20px);
  /* padding: 10px; */
  margin: 10px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;    
  font-family: 'Source Sans Pro', sans-serif;
  /* padding: 6px 18px; */
} 

.btn-float1 {
  /* padding: 10px 20px;
  font-size: 16px;
  background-color: #f5f5f5;
  border: 1px solid #ccc; */
  border-radius: 4px;
}

@media (max-width: 600px) {
  .btn-float1 {
    font-size: 14px;
    /* padding: 8px 16px; */
  }
}


@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


.animated-button {
  position: relative;
  width: 200px;
  height: 50px;
  background-image: linear-gradient(180deg, #bcfcff 0, #8dddff 25%, #53bcf2 50%, #009cda 75%, #007fc5 100%);
  border: none;
  border-radius: 5px;
  font-size: 18px;
  color: #ffffff; 
  animation: animacion 2s linear infinite;
}


@keyframes animacion {
 0% {
   box-shadow: 0 0 0 0 rgba(29, 171, 209, .6),  0 0 0 0 rgba(29, 171, 209, .6);
 }

 30% {
   box-shadow: 0 0 0 100px rgba(29, 171, 209, 0), 0 0 0 0 rgba(29, 171, 209, .6);
 }

 65% {
   box-shadow: 0 0 0 100px rgba(29, 171, 209, 0), 0 0 0 30px rgba(29, 171, 209, 0);
 }

 100% {
   box-shadow: 0 0 0 0 rgba(29, 171, 209, 0), 0 0 0 30px rgba(29, 171, 209, 0);
 }
}

/* 
https://codepen.io/ */
.grid-margin{
  animation: VelozIn 1s;
}
/* Creamos la animación (con keyframes) */
@keyframes VelozIn {
  0% {
    opacity: 0;
    transform: translateX(-100vw) skewX(70deg);
  }
  60% {
    opacity: 1;
    transform: skewX(-20deg);
  }
  80% {
    transform: skewX(15deg);
  }
}


/* creamos animacion paneles : Gastos Fijos, Gastos Varios, Gastos Futuros, Ahorros Personales, Ahorros Compartidos */
.grid-margin1 {
  animation: 3s inRotativo 1;
}
.outRotativo {
  animation: 3s outRotativo 1;
  animation-fill-mode: forwards; /* el animation-fill-mode en su valor forwards luego de que se detiene la animación mantiene aplicado los estilos del keyframe 100% al elemento*/
}
@keyframes inRotativo {  
/* el keyframe 100% representa el estado por defecto del elemento */
    0% {
         opacity: 0;       
         transform: translateX(-150%) rotate(1turn);
    }
  }
@keyframes outRotativo {
/* el keyframe 0% representa el estado por defecto del elemento */
    100% {
      opacity: 0;       
      transform: translateX(100vw) rotate(1turn);
    }
  }
/* Overflow en su valor hideen oculta el elemento outRotativo que sale de la pantalla */
body {
  overflow: hidden;
}







.logoregister {
  animation: 3.5s giro infinite;
  backface-visibility: visible; /* Porpiedad que determina si la partte de atras del elemento será o no visible al girarse pro completo */
}
@keyframes giro {
  /* Tener en cuenta que dependiendo de donde coloquemos el translateZ (si antes o despues del rotate) tendrá otro comportamiento diferente */
  /* 20% {
    transform: perspective(150px) translateZ(60px) rotateY(170deg);
  }
  30% {
    transform: perspective(150px) translateZ(60px) rotateY(190deg);
  }
  60% {
    transform: perspective(150px) translateZ(0px) rotateY(360deg);
  } */
  80% {
    transform: rotateY(360deg);
  }
}



/* Efecto que visualiza los botontes flotando con sombra sobre estos */
/* Estilos de la sombra (ocultada) */
.btn:before {
  content: "";
  position: absolute;
  width: 90%;
  left: 5%;
  top: 100%;
  height: 10px;
  background-image: radial-gradient(ellipse, rgba(0,0,0,0.35) 35%, rgb(255,255,255) 80%);
  transition: all 0.3s;
  opacity: 0;
}
.btn:hover {
  /* Mueve la caja hacia arriba */
     transform: translateY(-5px);
     animation: movercaja 1.5s infinite;
}
@keyframes movercaja {
  50% {
    transform: translateY(6px);
  }
}
.btn:hover:before {
   /* Mueve la sombra hacia abajo y hace aprecer la sombra (previamente camuflada por transparencia) */
    top: 105%;
    opacity: 0.4;
    animation: moversombra 1.5s infinite;
}
@keyframes moversombra {
  50% {
     transform: translateY(-5px);
     opacity: 1;
  }
}



/* Aplica efecto flotanto sobre los logos con el nombre brand-logo */
.brand-logo:hover {
  animation: subir-bajar 1s infinite; 
}
@keyframes subir-bajar {
  50% {
    transform: translateY(-20%);
  }
}
.brand-logo:hover + .sombra {
  animation: transparencia 1s infinite;
}
@keyframes transparencia { 
  50% {
    opacity: 0.2;
  }
}

* {
  user-select: none;
}

 .separar {
  margin-bottom: 100px; /* Ajusta el valor según sea necesario */
}