body{
  overflow: hidden;
}

.bg-login-image{
    background: url('../img/logo.png');
    background-position:center;
    background-size: cover;
}

.left-comment {
    float: left;
    clear: both;
  }
  
  .right-comment {
    float: right;
    clear: both;
  }


  .bg-bar1 {
    background-color: #FF0000 !important;
  }
  
  a.bg-bar1:hover, a.bg-bar1:focus,
  button.bg-bar1:hover,
  button.bg-bar1:focus {
    background-color: #FF0000 !important;
  }

  .bg-bar2 {
    background-color: #FF7800 !important;
  }
  
  a.bg-bar2:hover, a.bg-bar2:focus,
  button.bg-bar2:hover,
  button.bg-bar2:focus {
    background-color: #FF7800 !important;
  }

  .bg-bar3 {
    background-color: #ffdd00 !important;
  }
  
  a.bg-bar3:hover, a.bg-bar3:focus,
  button.bg-bar3:hover,
  button.bg-bar3:focus {
    background-color: #ffdd00 !important;
  }

  .bg-bar4 {
    background-color: #007CFF !important;
  }
  
  a.bg-bar4:hover, a.bg-bar4:focus,
  button.bg-bar4:hover,
  button.bg-bar4:focus {
    background-color: #007CFF !important;
  }

  .bg-bar5 {
    background-color: #00BE17 !important;
  }
  
  a.bg-bar5:hover, a.bg-bar5:focus,
  button.bg-bar5:hover,
  button.bg-bar5:focus {
    background-color: #00BE17 !important;
  }

  .swal2-container{
    z-index: 10000000000;
  }




/* Estilo básico para el contenedor del Select2 */
.select2-container {
  width: 100%;
}

/* Estilo para el campo de entrada del Select2 */
.select2-selection__rendered {
  background-color: #fff;
  border: 0px;
  padding: 5px;
  border-radius: 5px;
}

/* Estilo para la flecha desplegable */
.select2-selection__arrow {
  border-color: #ccc transparent transparent transparent;
}

.select2-container--open .select2-dropdown--below{
  border:0px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
  border:0px;
}

.select2-container--default .select2-selection--single{
  border: 0px !important;
}

.pass{
  height: 40px !important;
}


/* Estilo para las filas de encabezado */
.table-header th {
  height: 50px; /* Establece la altura fija deseada */
  vertical-align: middle; /* Centrado vertical */
}

/* Estilo para las filas de datos */
.table-body td {
  height: 50px; /* Establece la altura fija deseada */
  vertical-align: middle; /* Centrado vertical */
}

.valid {
  border: 2px solid rgb(0, 193, 0);
}

.invalid {
  border: 2px solid red;
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente */
  z-index: 99999999; /* Coloca la barra de carga en la parte superior */
  display: flex;
  justify-content: center;
  align-items: center;
  display: none; /* Inicialmente oculto */
}

.loader {
  border: 8px solid rgba(0, 123, 255, 0.5);
  border-top: 8px solid #007bff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
  display: none;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.dataTable th,
.dataTable td {
    max-width: 500px; /* Establece el ancho máximo deseado */
    white-space: normal; /* Ajusta el espacio en blanco según tus necesidades */
    overflow: hidden;
    text-overflow: ellipsis; /* Opcional: agrega puntos suspensivos si el contenido es demasiado largo */
}

.auto-width-card {
  display: inline-block; /* Hace que el card se ajuste al ancho de su contenido */
  width: auto; /* Ancho automático basado en el contenido */
  max-width: 100%; /* Limita el ancho máximo al 100% del contenedor padre si es necesario */
}

table.dataTable tbody th, table.dataTable tbody td{
  padding: 5px 3px !important;
}

/* Centrar contenido en todas las celdas de todas las tablas */
table th,
table td {
    vertical-align: middle !important;
}

/* Estilo para el select cuando está visible */
.extra-fields .select2 {
  display: block; /* Mostrar el select */
  width: 100% !important;   /* Restablecer la altura automática */
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.horario-item {
  margin-bottom: 10px;
}

.tour-image {
  height: 200px; /* ajusta este valor según tus necesidades */
  width: 100%;
  object-fit: cover;
  cursor: pointer;
}

html, body {
  overflow: auto;
  height: 100%;
}