.container-object{
    height: 500px;
}
ul, ol {
    list-style-type: none; /* Remove bullets from all lists */
  }

  ul.show-li-points, ol.show-li-points {
    list-style-type: disc;
  }

  li {
    padding: 0; /* Remove default padding from list items */
    margin: 0; /* Remove default margin from list items */
  }
object {
    /* object-fit: cover; */
    width: 100%;
    height: 100%;
    margin: 0;
 }

 @media (max-width: 768px) {
    object {
        object-fit: contain;
    }
 }

 /* Clases generales */
 .rounded-none {
  border-radius: 0 !important; }


  .input-group.input-group-outline .form-control.rounded-start {
    border-bottom-left-radius: 0.25rem !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .input-group.input-group-outline .form-control.rounded-end {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
  }

 .social-buttons-container {
    /* width: 276px; */ /* Ancho del contenedor principal */
    display: flex; /* Activa flexbox en el contenedor principal */
    justify-content: space-around; /* Distribuye los botones con espacio alrededor */
}

.social-button {
    border: 2px solid white;
    border-radius: 5px;
    width: 69px;
    height: 69px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-button a {
    margin: 0; /* Elimina todos los márgenes */
    display: flex; /* Activa flexbox en el enlace */
    justify-content: center; /* Centra el ícono horizontalmente */
    align-items: center; /* Centra el ícono verticalmente */
    height: 100%; /* Hace que el enlace ocupe todo el alto del contenedor */
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* Permite que el contenido principal se expanda */
}
/* Estilos conifguraciones generales */
.wq-30 {
  width: 30% !important; /* Usar !important para asegurar que sobrescriba las reglas de Bootstrap */
}


/* Estilos generales para los inputs */
.input-container {
  position: relative;
  margin-bottom: 30px; /* Espacio entre los inputs */
  width: 300px; /* Ancho del input */
}

.input-field {
  width: 100%;
  /* padding: 15px 12px; */
  /* border: 1px solid #ccc; */
  border: 1px solid #d2d6da;
  border-radius: 8px;
  font-size: 1rem;
  outline: none; /* Quitamos el borde azul al hacer focus por defecto */
  /* Transición para el color del borde */
  /* transition: border-color 0.3s ease-in-out; */
}

 /*Color del borde al hacer focus */
.input-field:focus {
   /* border-color: #007bff; */
}

  /* Nuevo estilo: Cuando el input tiene texto (o el placeholder no se muestra) */
  .input-field:not(:placeholder-shown) {
    /* Sombra al hacer focus */
    box-shadow: 0 0 0 0.1rem rgb(140, 210, 245); 
    /* box-shadow: rgb(140, 210, 245) 1px 0px none, rgb(140, 210, 245) 1px 0px none, rgb(140, 210, 245) 0px 1px none;
    border-color: transparent rgb(140, 210, 245) rgb(140, 210, 245); */
  }

.input-label {
  position: absolute;
  top: 7px; /* Posición inicial del label dentro del input */
  left: 12px;
  color: #888;
  pointer-events: none; /* Asegura que el label no interfiera con el input */
  transition: transform 0.15s ease-in-out, font-size 0.15s ease-in-out, color 0.15s ease-in-out;
  background-color: transparent; /* Para que el texto del label no se vea cortado si el input tiene padding */
  padding: 0 5px; /* Pequeño padding para que no se pegue al borde del input */
}

/* Cuando el input tiene focus O NO ESTÁ VACÍO */
  .input-field:focus + .input-label,
  .input-field:not(:placeholder-shown) + .input-label {
  /* Ajusta el translateY para que el label quede centrado verticalmente con su nuevo tamaño */
  /* Puedes experimentar con este valor, podría ser -25px, -27px, etc. */
  transform: translateY(-15px) translateX(5px);
  font-size: 0.7rem;
  color: rgb(140, 210, 245);
  background-color: #ffffff; /* Usar el color de fondo del body */
  padding: 0 1px; /* Ajusta este padding para controlar el "marco" blanco */
  }

/* Estilo del borde cuando el input tiene focus */
.input-field:focus {
  /* border-color: #007bff; */
  /* box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25); */
  box-shadow: 0 0 0 0.1rem rgb(140, 210, 245); 
  /* box-shadow: rgb(140, 210, 245) 1px 0px none, rgb(140, 210, 245) 1px 0px none, rgb(140, 210, 245) 0px 1px none;
    border-color: transparent rgb(140, 210, 245) rgb(140, 210, 245); */
}

/* Si quieres que el label cambie de color al hacer focus aunque no haya texto */
.input-field:focus + .input-label {
  color: rgb(140, 210, 245);
}

/* Estilos input error */
.input-container-error .input-field{
  box-shadow: 0 0 0 0.1rem rgba(255, 0, 0, 0.25) !important;
  border-color: #fc4c4c !important; /*Color del borde al hacer focus */
}

.input-container-error .input-label {
  color: #fc4c4c !important;
}

/* Estilos para vistas del proceso de creación de shipment */
.separator {
    height: 1px;
    background-color: #ccc;

  }
  .separator-points{
    border-bottom: 1px dashed #343a40; /* Grosor, estilo y color de la línea */
  }

  .separator-points-red{
    border-bottom: 1px dashed #ec2a1c; /* Grosor, estilo y color de la línea */
  }

  .selectable-list {
    /* Container styles */
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    border: 1px solid #ddd; /* Optional border */
    display: block; /* Ensure the list displays as a block */
    width: 100%; /* Set width to fit the container */
  }

  .selectable-list-item {
    /* Option styles */
    padding: 5px 10px; /* Adjust padding as needed */
    cursor: pointer; /* Indicate clickable elements */
    transition: background-color 0.2s ease-in-out; /* Smooth transition on hover */
  }

  .selectable-list-item:hover {
    /* Hover effect */
    background-color: #eee;
  }

  .selectable-list-item.selected {
    /* Selected option style */
    background-color: #ccc;
  }

/* Estilos para el submenú */
.nav-submenu {
    list-style: none;
    padding-left: 1.5rem;
    background-color: rgba(1, 1, 40, 0.3);
    border-radius: 0.5rem;
    margin: 0.25rem 1rem;
}

.nav-submenu-item {
    padding: 0.25rem 0;
}

.nav-submenu-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: white;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.nav-submenu-link:hover {
    background-color: #8CD2F5;
    color: #010128;
    transform: translateX(5px);
}

.nav-submenu-link.active-submenu {
    background-color: #8CD2F5;
    color: #010128;
    font-weight: 600;
}

.nav-link-submenu-arrow {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
    opacity: 0.8;
}

.nav-link[aria-expanded="true"] .nav-link-submenu-arrow {
    transform: rotate(180deg);
}

/* Efecto hover para los elementos principales */
.nav-item .nav-link:hover {
    background-color: #8CD2F5 !important;
    color: #010128 !important;
    transition: all 0.3s ease;
}

/* Asegurar que el submenú no tenga padding cuando está colapsado */
.collapse:not(.show) {
    padding: 0;
}
 /* Estilos para la sección de cotización */
 #quoter-country-dropdown {
  top: 14rem;
}

#quoter-province-state-dropdown {
  top: 14rem;
}

@media (min-width: 991px) {
  #quoter-country-dropdown {
    top: 9rem;
  }

  #quoter-province-state-dropdown {
    top: 9rem;
  }
}