/**************************************************
Estilos del area de catalogos de cuentas
***************************************************/

.categorias_cuentas{
	background: white;
}
.mb-0{
	text-align: center;
}
.ui-widget{
    z-index: 10000;
}
.ui-menu-item-wrapper{

    width: 100%;
}
/***********Area de factura nueva******/
.item{
    width: 100%;
}
#tablaC tbody > tr > td, #tablaC > thead:first-child > tr:first-child > th {
    padding: 0;
}
.ui-state-active{
    border:none !important;
    background-color: #e4e4e4 !important;
    padding: 2px !important;
    color: black !important;

}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
    background-color: white; 
}
/*Area de cuentas por cobrar*/
.titulo_total{
    font-size: 24px;
    color: #3dcc5d;
}
.btnLoginInicio{
    float: right;
}
@keyframes animal{
  from {
    color: white;
    background-color: white;
    border-radius: 10px;
    transform: scale(0);

    
  }

  to {
    color: white;
    border-radius: 10px;
    transform: scale(1);
  }
}
.navbar.navbar-light .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


@keyframes animal2{
  from {
    color: white;
    background-color: white;
    border-radius: 10px;
    transform: scale(1);


    
  }

  to {
    color: white;
    border-radius: 10px;
    transform: scale(0);
    display: none;

  }
}
.modal-body{
    border-radius: 5px;
}
.modal-content{
    border-radius: 5px !important;
}

/*******************Estilos de la ventana de roles y permisos***********
************************************************************************/
.seleccionado{
    background: burlywood !important;
    color: white !important;
    border:none !important;
    box-shadow: none !important;
}

.seleccionado:focus{
    background: burlywood !important;
    color: white !important;
    border:none !important;
    box-shadow: none !important;
}
/*******************Estilos ventana modal*******************************
************************************************************************/
.modal-backdrop.show{
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 1;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{

    background-color: #757575;
}

/***********************************************************************
Estilos para los elementos del dashboard
************************************************************************/
.graficosDash{
    display: block;
    width: 112px;
    height: 74px;
    float: right;
    margin-left: 5px;
}

#info_costos, #info_ventas, #info_ultimos7, #info_ingresos{
    display: inline-block;
    width: 100%;
}
/***********************************************************************
Estilos para moviles
************************************************************************/
@media (max-width: 767px) {
    .btn_ocultar_sidebar_desktop, .btn_ocultar_header_escritorio{
    	display: none;
    }
    .page-container{
    	top: 50px;
    }
    .header-mobile .header-mobile__bar{
    	padding: 2px;
    }
    .col-sm-6{
    	padding-right: 0;
    	padding-left: 0;
    }
    .header-mobile__bar .container-fluid{
    	padding-right: 9px;
   		padding-left: 8px;
    }
    .header-mobile-inner .logo img{
		
		max-width: 88%;
    	height: auto;
   		float: left;
    }
    .show-sidebar{
    	width: 100%;
    }
    .menu-sidebar2 .logo{
    	height: 55px;
    }
    /*Estilos del inicio de sesion*/
    .card-login{
        box-shadow: none;
    }
    .card-login > .card-body{
        padding: 0;
    }
    .card-login > .card-body > form > .form-check{
        display: inline-block;
        margin-bottom: 20px;
    }
    a.waves-effect, a.waves-light{
        padding: 6px;
        padding: 0;
        display: initial;
        font-size: 14px;
        box-shadow: none;
        color: #00bcd4;
    }
    .btnLoginInicio{
        display: block;
        width: 100%;
    }

    /***Estilos de la tabla responsive del area de catalogo de cuentas*/
    #example_wrapper .row .col-sm-12{
    	padding-left: 0;
    	padding-right: 0;
    }
    #pepe .card-body{
    	padding: 0;
    }
    #example_wrapper .row{
    	padding-left: 0;
    	padding-right: 0;
    }
    #catalogoCuentas{
    	margin-left: -15px;
    	margin-right: -15px;
    }
    #example_wrapper .row .col-sm-6 .dataTables_length{
    	display: none;
    }
    #example_wrapper .row .col-sm-7{
    	display: none;
    }
    /*Estilos de las tablas */
    #tablaresponsiva_filter > label > .form-control-sm{
        width: 80% !important;

    }
/*******************************************
Estilo para ventana modal
********************************************/
#largeModal > form > .modal-dialog, #largeModal > .modal-dialog {

    max-width: 100% !important;
    margin: 0;
    height: 100%;

}
#largeModal > .modal-dialog > .modal-content, #largeModal > form > .modal-dialog > .modal-content{
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
}
#largeModal > .modal-dialog > div{
    text-align: center !important;
}

#largeModal > .modal-dialog > .modal-content >.modal-header, #largeModal > form > .modal-dialog > .modal-content >.modal-header{
    position: fixed;
    width: 100%;
    z-index: 1;
}
#largeModal > .modal-dialog > .modal-content >.modal-body .row, #largeModal > form > .modal-dialog > .modal-content >.modal-body .row{
    margin-top: 100px;
}
#ctario{
    text-align: center !important;
}

}
/****************Estilos para los elementos del dashboard*****************************/
.overview-box > .icon{
    margin-right: 0;
}
.graficosDash  > div canvas {
    height: 52px;
}

@media (max-width: 991px) {

    div > .logo{
        background-color: white !important;
    }
    body::-webkit-scrollbar {
    display: none;
    } 
    #largeModal > .modal-dialog > .modal-content::-webkit-scrollbar, #largeModal > form > .modal-dialog > .modal-content::-webkit-scrollbar{

      display: none;  
    } 
    .recent-report{
      padding: 12px;
      height: 213px;
      margin-bottom: 0;
    } 
    .grafico1, .grafico2{
        padding: 5px;

    } 
    .grafico1 > .recent-report, .grafico2 > .chart-percent-card {
        border-radius: 0;
    }
    .grafico2 > .chart-percent-card{
        
        padding: 8px;
        height: 213px;
    }
    .chart-note-wrap{

        margin-top: 45px;
    }


    .percent-chart{
        padding: 0;
    }
}
/*Configuraciones para moviles*/
@media (max-width: 767px) {

    .noMovil{
        display: none;
    }
    .account-dropdown:after{
        right: 291px;
    }
    .account-dropdown{
        right: 39px;
        top: 63px;
    }
    /*Estilos de la modal de notificaciones*/
    .email-dropdown {
        top: 49px;
        left: -156px;
    }
    .email-dropdown:before{
        left: 154px;
    }
    .mess-dropdown{
        left: -114px !important;
        top: 44px !important;
    }
    .mess-dropdown::before{
        left: 113px !important;
    }
    .header-wrap .notifi-dropdown{

        left: -197px;
        top: 44px;
    }
    .notifi-dropdown::before{
        left: 193px !important;
    }
    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
        background-color: white; 
    }
    .header-desktop{
        position: fixed;
    }
    /*Elementos del dashboard */
    .overview-item{
        padding: 6px;
        min-height: 144px;
        border-radius: 0;
        margin-bottom:0;

    }
    .elementosDash{
        margin:3px;
        max-width: 48%;
    }
    #btninicio{
        position: absolute;
        right: -165px;
        top: -18px;
    }
    .tituloHome{
        position: absolute;
        left: 6px;
    }
    /*Ventanas modales*/
    .swal2-title{
        font-size: 1em;
    }
    .swal2-confirm{
        padding: 6px;
    }
    .swal2-cancel{
        padding: 6px;
    }

}
.conLabel label{
    width: 124%;
}

.precios{
    border-right: none;
    border-top: none;
    border-left: none;
}

/*Configuraciones para pantallas granders*/
@media (min-width: 992px) {
    .noPc{
        display: none;
    }

}