body {
    font-family: Arial, sans-serif;    
    background-color: #fff;
    color: #333; 
}

h1, h2 ,h4{
    color: #007bff;
    text-align: center;
}

.logo {
    display: block;
    margin: 0 auto 10px;
    width: 250px;
    height: auto; /* Ajustar a la altura automática */
}

input[type="number"], 
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 1px solid #007bff; /* Borde azul eléctrico */
    border-radius: 4px; /* Esquinas redondeadas */
}

input[type="number"]:focus, 
input[type="text"]:focus {
    border-color: #0056b3; /* Color del borde al enfocar */
    outline: none; /* Sin contorno al enfocar */
}

button {
    background-color: #000; /* Botones negros */
    color: white; /* Texto blanco */
    padding: 10px;
    border: none;
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    margin: 5px 0; /* Espaciado vertical */
    width: 25%; /* Botones a ancho completo */
    transition: background-color 0.3s; /* Transición suave */
}

button:hover {
    background-color: #444; /* Color oscuro al pasar el mouse */
}

.result {
    margin-top: 20px;
    background-color: #f8f9fa; /* Fondo claro para resultados */
    padding: 10px;
    border: 1px solid #007bff; /* Borde azul eléctrico */
    border-radius: 4px; /* Esquinas redondeadas */
}

.result div {
    margin: 5px 0;
}

.input-container {
    margin-bottom: 10px;
}

.borrar {
    background-color: #dc3545;width:50px
}

.borrar:hover {
    background-color: #c82333; /* Color más oscuro al pasar el mouse */
}

.boton-porcentaje {
    background-color: #007bff; /* Botón azul eléctrico para porcentajes */
    width: auto; /* Ancho automático */
}

.boton-porcentaje:hover {
    background-color: #0056b3; /* Color oscuro al pasar el mouse */
}
.btnAddSearch{ width:50px}



input[type="number"] {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    box-sizing: border-box;
}
.result {
    margin-top: 20px;
}
.result div {
    margin: 5px 0;
}
.logo {
    display: block;
    margin: 0 auto 10px;
    width: 290px;
    height: 140px;
}


input[type="number"] {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    box-sizing: border-box;
}
.result {
    margin-top: 20px;
}
.result div {
    margin: 5px 0;
}
.logo {
    display: block;
    margin: 0 auto 10px;
  
    height: 128px;
}
.resultInvCuotas{ margin-top:0; margin-bottom:5px}


input[type="password"], input[type="email"], select  {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 1px solid #007bff !important;
    border-radius: 4px;
}
#btnLogin{ padding-top:10px; padding-bottom:10px;}
.spinner-border{ height:20px;width:20px;}
.row{margin:0}




/*main loader*/
#loaderCont{z-index: 9999;background-color:rgba(168, 164, 166, 0.93)}
.loader {
    --d:52px; width: 8px; height: 8px; color: #007BFF;
    border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;    
    box-shadow: 
      calc(1*var(--d))      calc(0*var(--d))     0 0,
      calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
      calc(0*var(--d))      calc(1*var(--d))     0 2px,
      calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
      calc(-1*var(--d))     calc(0*var(--d))     0 4px,
      calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
      calc(0*var(--d))      calc(-1*var(--d))    0 6px;
    animation: l27 1s infinite steps(8);
  }
  @keyframes l27{100% {transform: rotate(1turn)}}

  .buttonsNavigate{ text-align: center; margin-bottom:45px; }
  .buttonsNavigate button {
      width: 28%;margin-right: 4%;display: inline-block;
  }
  .buttonsNavigate button a{ color:white; text-decoration: none; }
  .buttonsNavigate button:last-child {margin-right: 0;}

@media(max-width:790px){
    #usersTable ul, #productsTable ul{ width:100%  }
    #usersTable .dtr-data button, #productsTable .dtr-data button{ width: 17%;}
    .navBarCol{ padding:0 !important}
    nav{padding:0 !important}
}