#image-captcha{
  /*margin-top: 10px;*/
  width: 50%;;
  font-weight: 400;
  /*padding-bottom: 0px;*/
  height: 70px;
  user-select: none;
  text-decoration:line-through;
  font-style: italic;
  font-size: x-large;
  border: black 2px solid;
 
   
}

.inline{
  display:inline-block;
}

.inline{
  display:inline-block;
}

.btn-colors{
  background-color: #969fa7;
  
}

.btn-colors:hover{
  background: grey;
}


.img-simulador{
  align-items: center;
  position: relative;
  right: 0;
  left: 0;

}

.bg-imagesimulador{
  max-width: 100%;
  /*height: 40%;
  width: auto;*/
  height: auto;
  
}


.principalshow{
  align-items: center;
  position: absolute;
  right: 0;
  left: 0;

}

.bg-imageprincipal{
  opacity: 1; 
  max-width: 100%;
  /*height: 40%;
  width: auto;*/
  height: auto;
  
}


.bg-icons{
    background-color: white!important;
}

.border1{
    border: 1px solid black;
}

.pointer{
    cursor: pointer;
}

body{
    font-family: 'Montserrat', 'Times New Roman', Times, serif;
}

.bgctwo{
    background-color: #f2f3f8;
}

.bgccontacto{
    background-color: #2d3c43;
}

.bgt{
    background-color:transparent!important ;
}

.nbfs{
    font-size: large;
    font-weight: bold;
}

/*.ul-nav li a:hover{
    color: white!important;
}*/

.maxw {
    max-width: 100%;
    height: auto;
    
}

.bg-img-navold {
    /* The image used */
    background-image: url("../img/normales/bgima.jpg");
   
  
    min-height: 450px;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Needed to position the navbar */
    position: relative;

   
  }

  .bg-img-nav{
    min-height: 100vh;
    /*background:url('/img/lbg.png');*/
    background: url("/img/normales/bgima.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover !important;
    
}


  .ul-nav{
    margin:0;
    padding:0;
    display:flex;
  }
  
  .ul-nav li{
    list-style:none;
    margin:0 20px;
    transition:0.5s;
  }
  
  .ul-nav li a{
    display: block;
    position:relative;
    text-decoration:none;
    padding:5px;
    font-size:18px;
    font-family: sans-serif;
    color:#333!important;
    text-transform:uppercase;
    transition:0.5s;
  }
  
  .ul-nav:hover li a{
    transform:scale(1.5);
    opacity:0.2;
    filter:blur(2px);
  }
  
  .ul-nav li a:hover{
    transform:scale(2);
    opacity:1;
    filter:blur(0);
    text-decoration:none;
    color:#fff!important;
  }
  
  .ul-nav li a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#056e46;
    transition:0.5s;
    transform-origin:right;
    transform:scaleX(0);
    z-index:-1;
  }
  
  .ul-nav li a:hover:before{
    transition:transform 0.5s;
    transform-origin:left;
    transform:scaleX(1);
  }

  .lineUp {
    animation: 2s anim-lineUp ease-out;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  
  div.slide-left {
    width:100%;
    overflow:hidden;
  }
  div.slide-left p {
    animation: slide-left 2s;
  }
  
  @keyframes slide-left {
    0% {
        opacity: 0;
        transform: translate(80%);
      }
      20% {
        opacity: 0;
      }
      50% {
        opacity: 1;
        transform: translate(0%);
      }
      100% {
        opacity: 1;
        transform: translate(0%);
      }
  }

  .zoom {
    padding: 50px;
  background-color: green;
    transition: transform .2s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  
  .zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

  .bg-img-serv {
    /* The image used */
    background-image: url("../img/normales/serv5.jpg");
   
  
    min-height: 450px;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Needed to position the navbar */
    position: relative;

   
  }

  .page-title:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    /*margin: 0 auto; /* This will center the border. */
    width: 15%; /* Change this to whatever width you want. */
    padding-top: 5px; /* This creates some space between the element and the border. */
    border-bottom: 3px solid #056e46; /* This creates the border. Replace black with whatever color you want. */
}
.pt-m0:after {
    margin: 0 auto; /* This will center the border. */

}

.page-title-contact:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 15%; /* Change this to whatever width you want. */
    padding-top: 5px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid white; /* This creates the border. Replace black with whatever color you want. */
}

.tc-footer{
    color: #c0c1c2;
    transition: 0.5s;
}

.tc-footer:hover{
    color: white;
}

.pointer{
    cursor: pointer;
}

.bgf-second{
    background-color: #263238!important;
}

.border-fi{
    border: 1px solid #c0c1c2; 
    padding:10px 12px 10px 12px;
    border-radius: 50%;
    transition: 0.5s;
    
}

.border-fi:hover{
    border-color: white; 

}



.footerb{
    /*position: fixed;*/
    bottom: 0;
    width: 100%;
        
}

.bg-text-slider{
    background-color: rgba(0, 0, 0, .5)
}

.header-one{
    background-color: #000;
    width: 100%;
    height: auto;
    padding: 10px;
}

.header-one-modal{
  background-color: #000000;
  width: 100%;
  height: auto;
  padding: 10px;
}

.modal-backdrop-dark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
  z-index: 1050; /* Asegura que el fondo oscuro esté por encima de otros elementos */
}

.header-second{
    background-color: #999B9B;
    width: 100%;
    height: auto;
    padding: 15px;
}

.header-second-modal{
  background-color: #999B9B;
  width: 100%;
  height: auto;
}

@keyframes animacion-principal { 
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animation-show{
  animation: animacion-principal 1s;
}

.hoverTable{
  transition: 0.5s;
}

.hoverTable tr:hover{
  background-color: #969fa7;
  color: white;
  cursor: pointer;
}

.letra-tabla{
  font-family:"Montserrat", sans-serif; 
  font-size:90%
}

hr{
  height: 2px;
  background-color: #ccc;
  border: none;
}

.table-wrapper {
  max-height: 900px;
  overflow: auto;
  display:inline-block;
}

.table-wrapper-busqueda {
  max-height: 500px;
  overflow: auto;
  display:inline-block;
}

/*Calendario*/



.bg-calendar-base{
  background-color: #2ECC71;
}

.body-calendar {
  background-color: lightgray;
  font-family: 'Kanit', sans-serif;
  border-radius: 25px;
  
}

.calendar-base {
  
  background-color: white;
  color: black;
}

.year {
  color: #E8E8E8;
  font-size: 30px;
  right: 75px;
  top: 20px;
  font-weight: bold;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  right: 90px;
  top: 36px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  left: 20px;
  top: 36px;
}
.triangle-left:hover{
  border-right: 10px solid#2ECC71;
}
.triangle-right:hover{
  border-left: 10px solid#2ECC71;
}

.month-color {
  color: #27AE60;
}
.month-hover:hover{
  color:#27e879 !important;
}

.months {
  color: #AAAAAA;
  font-weight: normal;
}

.month-line {
  border-color: #E8E8E8;  
  top: 85px;
  width: 57%;
  left: 178px;
}

.days {
  color: #AAAAAA;
  font-weight: bold;
}

.num-dates {
  float: right;
  position: relative;
  top: 110px;
  right: 50px;
  z-index: 1;
}

.semana1 {
  margin-bottom: 25px;
  word-spacing: 55px;
}

.semana2 {
  margin-bottom: 25px;
  word-spacing: 53px;
}

.semana3 {
  margin-bottom: 25px;
  word-spacing: 58px;
}

.semana4 {
  margin-bottom: 25px;
  word-spacing: 58px;
}

.semana5 {
  margin-bottom: 25px;
  word-spacing: 56px;
}

.semana6 {
  margin-bottom: 25px;
  word-spacing: 55px;
}

.active-day {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #2ECC71;
  position: relative;
  top: 295px;
  left: 661px;
}

.white {
  color: white;
}

.event-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2980B9;
  position: relative;
  top: 304px;
  left: 695px;
}

.two {
  position: relative;
  top: 168px;
  left: 535px;
}

.grey {
  color: #AAAAB1;
}

.calendar-left {
  width: 300px;
  height: 500px;
  border-radius: 20px 0px 0px 20px;
  background-color: #2ECC71;
  position: relative;
  z-index: -1;
  bottom: 500px;
  color: white;
}

.hamburger {
  position: relative;
  top: 25px;
  left: 25px;
}

.burger-line:hover, .hamburger:hover{
  background-color:#27e879 !important;
}

.burger-line {
  width: 25px;
  height: 3px;
  background-color: white;
  border-radius: 15%;
  margin-bottom: 3px;
}

.num-date {
  font-size: 150px;
  width: 50%;
  font-weight: 700;
  color: white;
}

.day {
  width: 50%;
  font-size: 30px;
  bottom: 60px;
  color: white;
}

.current-events {
  font-size: 15px;
  position: relative;
  margin-left: 25px;
  bottom: 30px;
}

.posts {
  text-decoration: underline dotted;
}
.posts:hover{
  color:#27e879 !important;
}

.create-event {
  font-size: 18px;
  position: relative;
  margin-top: 30px;
  margin-left: 25px;
}

.event-line {
  width: 90%;
}

.add-event {
  width: 20px;
  height: 20px;
  padding: 0px;
  border-radius: 50%;
  border: solid white 2px;
  position: relative;
  bottom: 42px;
  left: 260px;
}

.add {
  font-size: 25px;
  position: relative;
  left: 4px;
  bottom: 10px;
}

.add:hover, .create-event:hover, .add-event:hover{
  color:#27e879 !important;
  border-color: #27e879 !important;
}

.punto {
  position: relative; /* Hacer que el elemento sea posicionado */
}

.punto::before {
  content: ""; /* Agregar contenido al elemento */
  position: absolute; /* Posicionar el contenido de forma absoluta */
  top: 0; /* Posicionar el contenido en la esquina superior */
  right: 0; /* Posicionar el contenido en la esquina derecha */
  width: 8px; /* Establecer el ancho del punto */
  height: 8px; /* Establecer la altura del punto */
  background: black; /* Establecer el color del punto */
  border-radius: 50%; /* Darle una forma redondeada al punto */
 
}

.btn-black{
  background-color: black;
  color: white;
  transition: 0.3s;
}
.btn-black:hover{
  background-color: rgba(0, 0, 0, 0.534);
  color: white;
}

.btn-grey{
  background-color: grey;
  color: white;
  transition: 0.3s;
}

.btn-grey:hover{
  background-color: rgba(128, 128, 128, 0.658);
  color: white;
}

.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px) !important;   /* tamaño del input de Bootstrap */
    padding: .375rem .75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
}

.select2-selection__rendered {
    line-height: calc(2.25rem) !important;
}

.select2-selection__arrow {
    height: calc(2.25rem) !important;
}