*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #7e7d7d;
}
#containerIndex{
    margin-top:  50px;
    border-radius: 10px;
    width: 900px;
}
.personalizado,#btnIndex{
    border-radius: 30px;
    margin: 15px 0;
    height: 48px;
}
.personalizado:focus{
    border-color: #bac8f3;
    box-shadow: 0 0 0 .2rem rgba(78,115,223,.25);
}
.personalizado::placeholder {
    color: #858796;
    opacity: 1;
    font-size: 14px;
}
#btnIndex{
    background-color: #4e73df;
    margin-bottom: 30px;
    height: 43px;
}
#btnIndex:hover{
    background-color: #2e59d9;
}

    /*CSS de Pedidos*/
    .sidebar{
        position: fixed;
        background-color: #4e73df;
        width: 220px;
        height: 100vh;
        z-index: 999;
        transition: visibility 1s;
        overflow: auto;
    }
    .sidebar h5 {
        margin-top: 30px;
        text-align: center;
        color: white;
    }
    .sidebar hr  {
        margin-left: 20px;
        width: 80%;
        background-color: white;
        opacity: 0.2;
    }
    .sidebar li{
        list-style: none;
        margin-left: 20px;
        color:white;
        height: 60px;
    }
    .sidebar ul a {
    display: block;
    text-decoration: none;
    color:white;
    padding: 10px;
    }
    .sidebar ul a:hover{
        margin-left: 40px;
        opacity: 0.5;
        transition: 1s;
    }


    .container-fluid{
        padding: 0 0 0 220px;
        width: 100%;
    }
    .container-fluid nav{
        padding: 10px 10px 0px 220px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 70px;
    }
    .container-fluid nav ul {
        display: flex;
        align-items: center;
        list-style: none;
    }
    .nombre{
        color: #4e73df ;
    }
    .dropdown-menu{
        margin-right: 200px;
    }
    .dropdown-item{
        text-align: right;
        color: #4e73df ;
    }
    div.dropdown-item:hover{
        background-color: white;
        color: #4e73df;
        opacity: 1;
    }
    .dropdown-item:hover{
        background-color: white;
        color: #4e73df;
        opacity: 0.5;
        transition: 1s;
    }
    .container-fluid h2{
        margin: 30px 0 20px 20px ;
    }
    th{
        color: black !important;
    }
    .dataTables_length,.dataTables_filter{
        /*background-color: red !important;*/
        padding-top: 10px !important;
        padding-right: 10px !important;
    }

   .fas{
       cursor: pointer;
   }

   .tabla-datosCliente tr td{
        padding-bottom: 3px !important;
   }
.tabla-datosCliente tr span{
    margin-left: 10px !important;
}


.arr {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#downArr, #downArrLeyendas {
    margin-left: 15px;
    margin-top: -2px;
}
#downUp, #downUpLeyendas {
    margin-left: 15px;
}

.btn-danger:hover {
    color: #fff !important;
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

.swal2-icon-text{
    color: #f8bb86;
}

#dataTable_info, #detailTable_info{
    white-space: normal!important
}

@media (min-width:0px) and (max-width:992px) {
    .sidebar{
        display: none;
        transition: visibility 1s;
    }
    .slide{
        display: block !important;
    }
    .iconSlide{
        margin-left: 220px;
    }
    #containerPedidos, #containerCargaPedidos,#containerConsultaStock,#containerHistorialVentas{
        padding-left: 0;
    }
    #articulo, #clientes, #clienteVentas{
        width: 75% !important;
    }
    #containerBusquedaStock{
        display: flex;
        flex-direction: column;
    }
}
@media (min-width:0px) and (max-width:576px) {
    #containerIndex{
        width: 90%;
    }
    .logo img{
        width: 50%;
        height: 50%;
    }
    #containerInputs{
        display: flex;
        flex-direction: column;
        width: 75%;
    }
}
@media (min-width:577px) and (max-width:768px) {
    .logo img{
        width: 55%;
        height: 55%;
    }
}
@media (min-width:769px) and (max-width: 992px) {
    .logo img{
        width: 87%;
        height: 87%;
    }
    #formGroupIndex{
          padding: 0 60px;
      }
}

@media (min-width:993px) {
    #formGroupIndex{
        padding: 0 60px;
    }
}