/* 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-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));
 }