.badge{font-size: 10px;}

.form-control:focus,
.form-select:focus,
.btn:focus{outline: none !important;box-shadow: none !important;}

.alert{padding: 0 10px; font-size: 12px;}

.btnImprimer{font-size: 12px;}

fieldset.scheduler-border {border: solid 1px #e0eafc; border-radius: 5px; padding:0 10px 10px; margin-bottom: 10px;}
legend.scheduler-border {font-size: 14px; color: #3f80ea; float: none; width: auto;}

.sidebar-wrapper .menu{padding:0 10px;}
.sidebar-wrapper .menu .submenu {padding-left: 10px;}
.sidebar-wrapper .menu .submenu .submenu-item a {padding-left: 10px;}
.sidebar-wrapper .menu .sidebar-link span {margin-left: 10px;}


.form-body{}
.form-body .form-control{padding: 2px 5px; border-radius: 0; font-size: 13px;}
.form-body .btn-sm{padding: 2px 5px; border-radius: 0; font-size: 13px;}
.form-body .form-label{font-size: 13px; margin: 0; color: #25396f; font-weight: bold;}
.form-body .form-label span{color: #dc3545;}
.form-body .boxImage{}
.form-body .boxImage img{height: 100px; border: solid 1px #e2e3e5;}
.form-body .boxSearchProduit{position: relative;}
.form-body .boxSearchProduit .resultat{width: 500px; height: 150px; overflow: auto; position: absolute; top: 30px; background-color: #ffffff; z-index: 99999;}
.form-body .boxSearchProduit .resultat table tr td{padding: 2px 5px; font-size: 12px; cursor: pointer;}

table.report{}
table.report th{font-size: 12px; background-color: #435ebe; color: #ffffff;}
table.report td{font-size: 12px;}
table.arborescence td{font-size: 12px; padding: 2px 5px;}
table.arborescence td.code{width: 50px;}

table tr td .avatar img{border-radius:0}


div.auth{min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-around;}
div.auth h1{font-size: 22px; text-transform: uppercase;}
div.auth h2{font-size: 16px; padding: 12px;}
div.auth p{font-size: 12px;}
div.auth img.logo{width: 30px;}
div.auth .boxAuth{width: 350px; margin: 0 auto; padding: 25px; border: solid 1px #eeeeee;}

/*

 */

div.dt-button-collection {}
div.dt-button-collection button.dt-button {display:block; padding: 4px 10px; color: #435ebe; background: none; border: none; text-align: left;}
div.dt-button-collection button.dt-button:hover {border: none;}
div.dataTables_scrollHead{background-color: #435ebe;}
div.dataTables_scrollBody{border-bottom: 1px solid #d9d9d9 !important;}
table.dataTable tr th, table.datatablexx tr th {font-size: 10px;color: #ffffff;text-transform: uppercase;background-color: #435ebe;border: none !important; padding:8px 5px;}
table.dataTable tr td, table.datatablexx tr td {font-size: 12px; border: none; padding: 5px;}
.dataTables_wrapper .dataTables_filter input{padding: 4px; margin-bottom: 8px;}

/*
    Etat
 */

div.boxEtat{ font-size: 10px; color: #000000;}
div.boxEtat h1{font-size: 16px; padding: 0; margin: 0;}
div.boxEtat h1 span{font-weight: 300;}
div.boxEtat h2{font-size: 14px; padding: 0; margin: 0;}
div.boxEtat h3{font-size: 10px; padding: 0; margin: 0;}
div.boxEtat p{font-size: 10px; padding: 0; margin: 0;}
div.boxEtat .textCenter{text-align: center;}
div.boxEtat .textEnd{text-align: right;}
div.boxEtat .separation{padding: 20px 0;}
div.boxEtat table.header{width: 100%;}
div.boxEtat table.header img{height: 80px;}
div.boxEtat table.header h3{}
div.boxEtat table.header h2{padding: 20px; background-color: #cccccc;}
div.boxEtat table.body{width: 100%; }
div.boxEtat table.body thead th{text-align: center; border: solid 1px #cccccc;}
div.boxEtat table.body tr th.bg,
div.boxEtat table.body tr td.bg{background-color: #eaeaea;}
div.boxEtat table.body tr th.padding,
div.boxEtat table.body tr td.padding{padding: 8px 8px;}
div.boxEtat table.body tr td.bordure{border: solid 1px #cccccc;}
div.boxEtat table.body tr td.bold{font-weight: bold;}

div.boxRechercheEtat{}

.width-10{width: 10px;}
.width-50{width: 50px;}
.width-80{width: 80px;}
.width-100{width: 100px;}
.width-150{width: 150px;}
.width-200{width: 200px;}
.width-250{width: 250px;}
.width-300{width: 300px;}
.width-350{width: 350px;}

/*
    boxFacture
 */
div.boxFacture{padding:0 10px;}
div.boxFacture p{font-size: 12px; padding: 0; margin: 0;}
div.boxFacture p.small{font-size: 10px;}
div.boxFacture h1{font-size: 26px; padding: 0; margin: 0;}
div.boxFacture h2{font-size: 18px; padding: 0; margin: 0;}
div.boxFacture h3{font-size: 16px; padding: 0; margin: 0;}
div.boxFacture h4{font-size: 14px; padding: 0; margin: 0;}
div.boxFacture table{border-collapse: collapse; width: 100%;}
div.boxFacture .header div.titre{display: flex; justify-content: space-between; align-items: flex-start;}
div.boxFacture .header div.titre table{flex: none; width: 200px;}
div.boxFacture .header div.titre h1{text-transform: uppercase; padding-bottom: 16px;}
div.boxFacture .header table tr td{font-size: 12px; color: #000000; padding:0 5px;}
div.boxFacture table.produits th{font-size: 10px; color: #ffffff; border: solid 1px #435ebe; background-color: #435ebe; text-transform: uppercase; padding:8px;}
div.boxFacture table.produits td{font-size: 12px; color: #000000; border: solid 1px #cccccc; padding:8px;}
div.boxFacture .separation{padding: 20px 0;}
div.boxFacture .bold{font-weight: bold;}
div.boxFacture .textCenter{text-align: center;}
div.boxFacture .textEnd{text-align: right;}
div.boxFacture .textPrimary{color: #435ebe !important;}
div.boxFacture .textPrimary{color: #435ebe !important;}
div.boxFacture .boxDeuxCol{display: flex;}
div.boxFacture .boxDeuxCol div{width: 50%;}
div.boxFacture .boxBtns{display: flex; justify-content: space-between; align-items: center;}
/*
    boxComptoir
 */

div.boxComptoir{}
div.boxComptoir .myBtn{cursor: pointer;}
div.boxComptoir .myBtn:hover{background-color: #ebf3ff;}

div.boxComptoir div.categories{display: flex; flex-flow: row nowrap; overflow-x: auto;}
div.boxComptoir div.categories div.categorie{flex: none; width: 150px;  padding: 5px; display: flex;  flex-flow: row nowrap; align-items: center; border: solid 1px #cccccc;}
div.boxComptoir div.categories div.categorie + .active{background-color: #ebf3ff;}
div.boxComptoir div.categories div.categorie div.stats-icon{flex: none; width: 2em; height: 2em;}
div.boxComptoir div.categories div.categorie div.text{padding-left: 5px;}
div.boxComptoir div.categories div.categorie div.text p{font-size: 10px; line-height: 13px; font-weight: bold;}
div.boxComptoir div.articles{height: 60vh; overflow-y: auto;}
div.boxComptoir div.articles div.article{height: 80px; padding: 5px; border-radius: 8px; display: flex;  flex-flow: row nowrap; align-items: center; border: solid 1px #cccccc;}
div.boxComptoir div.articles div.article div.stats-icon{flex: none;}
div.boxComptoir div.articles div.article div.text{padding-left: 10px; flex: auto;}
div.boxComptoir div.articles div.article div.text p{font-size: 10px; line-height: 15px; font-weight: bold;}

div.boxComptoir div.commandes{height: 400px; overflow-y: auto;}
div.boxComptoir div.commandes div.text p{font-size: 10px; line-height: 15px; font-weight: bold;}
div.boxComptoir div.commandes div.boxQte{display: flex; flex-flow: row nowrap; align-items: center;}
div.boxComptoir div.commandes div.boxQte .btn{padding:0px 5px;}
div.boxComptoir div.commandes div.boxQte input{width: 25px; height: 20px; font-size: 10px; font-weight: bold; text-align: center; color: #607080; border: solid 1px #cbd5e0; border-radius: 4px; }
div.boxComptoir div.boxTotal{}
div.boxComptoir div.boxTotal table{}

div.boxComptoir div.calculatrice {}
div.boxComptoir div.calculatrice table{}
div.boxComptoir div.calculatrice table td.touche{width: 40px; height: 40px; line-height: 40px; border: solid 1px #cbd5e0; text-align: center;}
div.boxComptoir div.calculatrice table td.touche + .trash{background-color: #dc354552; color: #dc3545;}

div.boxComptoir div.modePaiement {}
div.boxComptoir div.modePaiement div.paiement{height: 50px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: solid 1px #cbd5e0; border-radius: 4px;}
div.boxComptoir div.modePaiement div.paiement p{font-size: 10px; padding-top: 5px; font-weight: bold;}

div.boxComptoir div.reglement{}
div.boxComptoir div.reglement table td{font-size: 10px;}

@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }

    #main {
        margin: 0;
        padding: 0;
    }
    div.boxEtat h3{font-size: 10px;}
    .page-break {page-break-after: always;}

    @page {
        size: auto;
        margin: 5mm;
    }
}

@media (max-width:767px){
    #main{padding: 10px;}
    .card-header{padding: 10px;}
    .card-body{padding: 10px !important;}
}