@media only screen and (max-width: 768px) {
  .mobile {
    margin-top: 180px !important;
  }

  .full-width {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  
    .exp-date {
        visibility:hidden;
        display:none;
    }
    
    .ellipsis-exp {
      width: 250px; /* Ajusta el valor según tus necesidades */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .ellipsis-col {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 150px;
    }
    
    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 180px !important;
    }
    
    #accordionContainerCol {
        max-height:550px;
        overflow-y:auto;
    }
    
    #collapseFactura {
        max-height:170px;
        overflow-y:auto;
    }
}

.custom-nav {
    display: flex;
    justify-content: space-between;
    gap: 2px; /* Espaciado reducido entre los botones */
}

.custom-nav .custom-tab {
    flex: 1; /* Cada botón ocupa el mismo espacio horizontal */
    text-align: center;
    padding: 2px; /* Ajusta el relleno interno */
    border: 1px solid #ccc; /* Borde del botón */
    border-radius: 0.25rem; /* Bordes redondeados */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cursor al pasar sobre el botón */
    background-color: #f8f9fa; /* Fondo predeterminado */
    color: #000; /* Texto negro */
}

.custom-nav .custom-tab.active {
    background-color: #ffc107; /* Fondo amarillo para el tab activo */
    color: #000; /* Texto negro para el activo */
    border-color: #ffc107; /* Borde amarillo */
}

.floating-buttons {
    position: fixed;
    bottom: 160px !important;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-buttons .btn {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* TEMPORAL FLOATING LABEL FIX */

tbody {
    font-family: 'Console', monospace;
}

.highlight {
    background-color: yellow; /* Cambia el color de fondo a tu gusto */
    font-weight: bold; /* Cambia el estilo de fuente a tu gusto */
    opacity: .5;
    color: black;
}


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

.border-primary {
    border:1px solid #0d6efd;
    border-radius:12px 12px 0 0;
}

#searchDirectionInput:empty:before {
    content: attr(placeholder);
    color: #999;
}

body {
  background-color: #000000d0;
  color: #ffffff;
  overflow: auto;

  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
}

.nav-link active {
    color: black;
}

.bg-darker {
    background-color: #3b3b3b;
}

button.active {
    color: black !important;
    background-color: #ffc107 !important;
    border-color: black;
    font-weight:bold;
}

button.nav-link {
    color: white;
    border: 1px solid white !important;
    font-weight:bold;
}

button.nav-link:hover {
    background-color: #edca5f;
    color: black;
}

.nav-link {
    color: white;
}

.nav-link:hover {
    color: white;
}

.border-warning {
    border:1px solid #ffc107;
    border-radius:12px 12px 0 0;
}

.active a {
    color: white !important;
}

.inactive a{
    background-color: var(--bs-dark-bg-subtle) !important;
}

.table-transparent-bg {
    --bs-table-bg: transparent !important;
}

.table-warning-custom th:first-child {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.table-warning-custom th:last-child {
    border-top-right-radius: 10px !important;
}

.table-warning-custom {
    --bs-table-bg: #ffc107;
}

.border-success {
    border:1px solid darkgreen;
    border-radius:8px;
}

#mainTab li button {
  color: white;
}

#mainTab li .active {
  color: black !important;
}

.text-bold {
    font-weight: bold;
}

.tab-mainarea {
  max-height: 85vh !important;
  overflow-y: auto;
  margin: 5px;
}

.tab-header {
  width: 100%;
  margin-top: 5px;
}

.header-menu {
  /*border: 1px dashed red;*/
  padding: 0px;

}

.header-menu button {
  margin: 4px;
}

.tab-pane {
  /*border: 2px dashed yellow;*/
}

/* Define una clase para el contenedor padre si no existe */
.container-ellipsis {
  white-space: nowrap;
  overflow: hidden;
}

/* Define una clase para el elemento de texto que se truncará con ellipsis */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
}

.ellipsis-col {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 220px;
}

.carousel-inner .carousel-item {
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}

/* Media query para desactivar ellipsis en resoluciones mayores a 768px */
@media (min-width: 769px) {
      #myCarousel {
          width: 60%;
          margin:auto;
      }
  
    .ellipsis-col {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 950px;
    }

    /* Define una clase para el elemento de texto que se truncará con ellipsis */
    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 450px;
    }
    
    #accordionContainerCol {
        max-height:650px;
        overflow-y:auto;
    }
    
    #collapseFactura {
        max-height:300px;
        overflow-y:auto;
    }
}

/* Media query para desactivar ellipsis en resoluciones mayores a 768px */
@media (min-width: 1200px) {
  .ellipsis {
    text-overflow: clip; /* Cambia de ellipsis a clip para desactivar el efecto */
    white-space: nowrap; /* Restablece la propiedad white-space a su valor predeterminado */
    max-width: 950px; /* Restablece el ancho máximo */
  }
  
  #myCarousel {
      width: 60%;
      margin:auto;
  }
  
  .ellipsis-col {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 950px;
    }

        /* Define una clase para el elemento de texto que se truncará con ellipsis */
    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 650px;
    }
    
    #accordionContainerCol {
        max-height:750px;
        overflow-y:auto;
    }
    
    #collapseFactura {
        max-height:400px;
        overflow-y:auto;
    }
}

#myCarousel{
    border-radius:5px !important;
}

#tableDirectionsTBody {
    display: block;
    max-height: calc(60vh - 150px); /* Altura máxima calculada */
    overflow-y: auto;
    margin-bottom: 20px;
}

#tableDirectionsTBody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* Fijar las columnas */
}

#tableDirectionsTBody td {
    word-wrap: break-word; /* Para manejar texto largo */
}

#tableDirectionsTBody tr td p {
  margin: 0;
}

#viewDir_url_lbl:hover {
    text-decoration:underline !important;
}

#phonesContainer a:hover {
    text-decoration:underline !important;
}

.action-btn {
    /*heigth:100% !important;
    width:100%;*/
    padding:2px;
}

.rotate-icon {
  transition: transform 1s;
}

.rotating {
  transform: rotate(360deg);
}

/* BS TOOLTIPS */

:root {
  --primary: #0d6efd;
  --secondary: #686c70;
  --warning: #ffc107;
  --danger: #dc3545;
  --success: #198754;
}


.secondary-tooltip {
  --bs-tooltip-bg: var(--secondary);
}

.primary-tooltip {
  --bs-tooltip-bg: var(--primary);
}

.danger-tooltip {
  --bs-tooltip-bg: var(--danger);
}

.success-tooltip {
  --bs-tooltip-bg: var(--success);
}

/* END BS TOOLTIPS*/

/* LOADING SCREEN ANIMATION */

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* END LOADING SCREN ANIAMTION */

.text-left {
    text-align: left !important;
}

.text-link {
  cursor: pointer;
}

.text-purple {
  color: #6610f2 !important;
}

.alert-purple {
  background-color: #bd96fc !important;
  color: #5100d4 !important;
}

.alert-tean {
  background-color: #fff383 !important;
  color: #827717 !important;
}

.bg-tean {
  background-color: #827717;
}

.bg-purple {
  background-color: #6610f2;
}

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

.alert-palid-blue::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-palid-blue:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-palid-blue::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-palid-blue {
  background: #529dcccc;
  color: #004068;
  border-color: #0040687c;
}

.text-palid-blue {
  color: #004068;
}

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

.alert-pink::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-pink:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-pink::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-pink {
  background: #b634a086;
  color: #660055;
  border-color: #af009286;
}

.text-pink {
  color: #660055;
}

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

.alert-dark-green::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-dark-green:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-dark-green::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-dark-green {
  background: #34b68486;
  color: #006856;
  border-color: #00925a86;
}

.text-dark-green {
  color: #34b6a0;
}

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

.alert-yellow::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: grey;
  opacity: 1;
  /* Firefox */
}

.alert-yellow:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: grey;
}

.alert-yellow::-ms-input-placeholder {
  /* Microsoft Edge */
  color: grey;
}

.alert-yellow {
  background: #fffd83c5;
  color: #777500;
  border-color: #cac700;
}

.text-yellow {
  color: #b8b500;
}

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

.alert-blue::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-blue:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-blue::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-blue {
  background: #4e86ffd2;
  color: #002ae7;
  border-color: #3676ff;
}

.text-blue {
  color: #0051ff;
}

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

.alert-grey::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  /*color: white;*/
  opacity: 1;
  /* Firefox */
}

.alert-grey:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  /*color: white;*/
}

.alert-grey::-ms-input-placeholder {
  /* Microsoft Edge */
  /*color: white;*/
}

.alert-grey {
  background: #9b9b9b86;
  color: #5c5c5c;
  border-color: #8b8b8b;
}

.text-grey {
  color: #5c5c5c;
}

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

.alert-white-c::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: grey;
  opacity: 1;
  /* Firefox */
}

.alert-white-c:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: grey;
}

.alert-white-c::-ms-input-placeholder {
  /* Microsoft Edge */
  color: grey;
}

.alert-white-c {
  background: #eeeeeed3;
  color: #5c5c5c;
  border-color: #cacaca;
}

.text-white-c {
  color: #5c5c5c;
}

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

.alert-red::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-red:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-red::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-red {
  background: #ff8989af;
  color: #ff0000;
  border-color: #e42828af;
}

.text-red {
  color: #ff0000;
}

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

.alert-green::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-green:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-green::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-green {
  background: #00800052;
  color: #008000;
  border-color: #0080008a;
}

.text-green {
  color: #008000;
}

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

.alert-sad-blue::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1;
  /* Firefox */
}

.alert-sad-blue:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.alert-sad-blue::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.alert-sad-blue {
  background: #0a2481ad;
  color: white;
  border-color: #0f1733;
}

.text-sad-blue {
  color: white;
}

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