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


/* 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; /* Color verde */
    border-color: #00554e; /* Usar el color de fondo */
}

.form-check-input:not(:checked):focus {
    border-color: #00554e66; /* Mantener el color del borde */
    --bs-form-check-bg-image: none; /* No mostrar el icono del check */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300554e66'/%3e%3c/svg%3e")
}

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

/* Estilos del boton para cambiar el color de las ordenes */
.btn-ordercolor {
    width: 30px;
    height: 30px;
    border: 1px solid;
    display: block;
}

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;
}

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


/* Estilos del headercontent donde se visualiza la vista que se esta mostrando */

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;
    top: 15px;
  }
  
  .cfj-bgcolor-three {
    background-color: #2c2460 !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;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    font-weight: bold;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    margin-bottom: -1px;
    color: #05361f; /* Color para pestañas no activas */
}

.nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: #05361f; /* Color para la pestaña activa */
    border-color: #dee2e6;
    border-radius: 5px 5px 0 0;
}


.tab-content {
    border: 1px solid #dee2e6;
    border-radius: 0 0 5px 5px;
    padding: 15px;
    background-color: #ffffff;
}

.nav-tabs .nav-link {
    font-weight: bold;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    margin-bottom: -1px;
    color: #05361f; /* Color para pestañas no activas */
}

.nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: #05361f; /* Color para la pestaña activa */
    border-color: #dee2e6;
    border-radius: 5px 5px 0 0;
}