/* Personalizar botón primario */
.btn-custom-primary {
    color: white;
    background-color: #00554e;
    border-color: #00554e;
    /* box-shadow: 0 0.5rem 1rem rgba(0, 85, 78, 0.15); */
}

.btn-custom-primary:hover {
    color: white;
    background-color: #003e38;
}

.btn-custom-primary:focus {
    color: white;
    box-shadow: 0 0 0 0;
}

.bg-custom-primary {
    background-color: #00554e;
    border-color: #00554e;
}

.btn-custom-secondary {
  color: white;
  background-color: #ff6a00;
  border-color: #ff6a00;
}

.btn-custom-secondary:hover {
  color: white;
  background-color: #cc5500;
}

.btn-custom-secondary:focus {
  color: white;
  box-shadow: 0 0 0 0;
}

.btn-custom-jobs {
  color: black;
  background-color: lightgray;
  border-color: lightgray;
}

.btn-ordercolor {
    width: 30px;
    height: 30px;
    border: 1px solid;
    display: block;
  }
  
  /* Estilos del boton para cambiar el color de las ordenes */
  li > button.btn-ordercolor {
    margin: 7px;
  }
  
  .btn-ordercolor-green {
    background-color: #d4edda;
  }
  
  .btn-ordercolor-red {
    background-color: #f8d7da;
  }
  
  .btn-ordercolor-yellow {
    background-color: #fff3cd;
  }
  
  .btn-ordercolor-primary {
    background-color: #cce5ff;
  }
  
  .btn-ordercolor-null {
    background-color: #FFFFFF;
  }

/* estilos semaforo sincro de ordenes  */

.pub-badge-green {
    background-color: #49A078;
    color: #49A078;
}
  
.pub-badge-yellow {
    background-color: #F5D547;
    color: #F5D547;
}
  
.pub-badge-red {
    background-color: #E94F37;
    color: #E94F37;
}

/* Saco sombra al clickear en un form-control, form-select y form-check-input */

.form-control,.form-select, .form-check-input {
    box-shadow: 0 0 0 0 !important;
}

.form-check-input:checked {
  background-color: #00554e;
  border-color: #00554e;
}

.offcanvas-step {
  display: none;
}
.offcanvas-step.active {
  display: block;
}

/* Customizo el ancho de los offcanvas en la vista de ordenes */
.offcanvas-custom-width {
  width: 500px !important;
}
.offcanvas-custom-width#newShippingOffcanvas {
  width: 700px !important;
}

/* Estilos para el parpadeo */
@keyframes flicker-input-error {
  0% { border-color: red; }
  50% { border-color: transparent; }
  100% { border-color: red; }
}

.flicker-input-error {
  animation: flicker-input-error 1s ease;
}

/* Estilo para que cada item impar tenga un color diferente al par */
.list-group li:nth-of-type(odd) {
  background-color: RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1));
}
 

.custom-select {
    background-color: rgb(245, 245, 245) !important; /* Cambia el color de fondo */
    max-width: 200px !important;
}

.right-input-search-rounded {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

input::placeholder {
    color: rgb(170, 170, 170) !important; /* Color del texto del placeholder */
    opacity: 1; /* Asegura que el color tenga el nivel de opacidad deseado */
}

.custom-btn {
    background-color: #f8f9fa; /* Fondo gris clarito */
    border: 1px solid rgb(170, 170, 170); /* Borde gris */
    font-weight: bold !important; /* Tipografía fuerte */
}

.custom-btn:hover {
    background-color: #f8f9fa; /* Fondo un poco más oscuro al pasar el cursor */
    border-color: rgb(170, 170, 170); /* Borde más oscuro al pasar el cursor */
}


h3.pageTitle {
    font-size: 12px;
    margin: 0px !important;
    padding: 8px 10px;
    color: white;
    width: auto;
    line-height: 5px !important;
    border-radius: 100px;
    text-align: center;
    position: absolute;
    z-index: -1000;
    background-color: #2c2460 !important;
}

.img-oms{width:25px!important;}

.img-oms-detail{width:25px!important;margin-left: 0.3em;}

.tr-data{vertical-align:middle!important;font-size:11px!important;}

.green-badge {
  border: 1px solid rgb(125, 200, 125); /* Borde verde */
  background-color: rgb(185, 255, 185); /* Fondo verde claro */
  color: black; /* Texto negro */
}

.grey-badge {
  border: 1px solid rgb(180, 180, 180); /* Borde verde */
  background-color: rgb(240, 240, 240); /* Fondo verde claro */
  color: black; /* Texto negro */
}

.yellow-badge {
  border: 1px solid rgb(255, 204, 0); /* Borde amarillo */
  background-color: rgb(255, 255, 185); /* Fondo amarillo claro */
  color: black; /* Texto negro */
}

.red-badge {
  border: 1px solid rgb(255, 99, 71); /* Borde rojo */
  background-color: rgb(255, 200, 200); /* Fondo rojo claro */
  color: black; /* Texto negro */
}

.page-link {
  color: black;
}

#ordersTable thead th:first-child {
  border-top-left-radius: 5px;
}

#ordersTable thead th:last-child {
  border-top-right-radius: 5px;
}

#ordersTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

#ordersTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

.dropdown-toggle::after {
  display: none;
}

.comment-balloon {
  max-width: 100%;
  background-color: #edf0f4;
  margin-bottom: 10px;
  border-radius: 7px;
}

.comment-balloon > .comment-balloon-info, 
.comment-balloon > .comment-balloon-message, 
.comment-balloon > .comment-balloon-bottom {
  padding: 0 5px;
}

.comment-balloon > .comment-balloon-info {
  padding-top: 5px;
}

.comment-balloon > .comment-balloon-bottom {
  padding-bottom: 5px;
}

.comment-balloon-bottom {
  text-align: right;
}

.comment-balloon-bottom > a {
  font-size: .8rem;
}

.withoutCommentsBox{
  color: #6a6a6a;
  background-color: #fafafa;
  border-color: #666;
  text-align: center;
  padding: 15px;
  margin-bottom: 20px;
}

.loadingCommentsBox{
  color: #6a6a6a;
  background-color: #fafafa;
  border-color: #666;
  text-align: center;
  padding: 15px;
  margin-bottom: 20px;
}

.range-input {
  margin-top: 10px;
}

.list-group-item input[type="checkbox"] {
  margin-right: 1rem;
  accent-color: #003e38;
}

.custom-row {
  background-color: inherit !important; /* Asegura que uses el valor inline */
}

.custom-row td {
  background-color: inherit !important; /* Asegura que también se aplique a las celdas */
}

.card {
  transition: border-color 0.3s ease;
}

.card-active {
  border: 2px solid var(--active-color) !important;
}

.sync-btn {
  font-size: 0.8rem !important;
  text-align: center;
  padding: 0.25rem 0.5rem !important;
  vertical-align: middle !important;
}

tr:has(td > .collapse:not(.show)) {
  border-top: hidden !important;
}

/* Muevo las flechas del slick para que sean visibles */
.slick-prev,.slick-prev::before {
  left: -12px !important;
  color: #003e38 !important;
}

.slick-next,.slick-next::before {
  right: -12px !important;
  color: #003e38 !important;
}

#selectAllHref {
  margin-left: 7px;
}