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

p.small{font-size: 12px;}

#app{display: flex; justify-content: center; padding: 10px;}
div.boxPhone{flex: auto; height: 95vh; max-width: 360px; overflow-y: auto; background-color: #ffffff; border-radius: 8px; padding: 10px; }
div.boxPhone div.dashboard{width: 100%; border: solid 1px #e0eafc; border-radius: 8px; margin: 4px 0;}
div.boxPhone div.dashboard h6{font-size: 14px;}
div.boxPhone div.dashboard div.card-body{display: flex; align-items: center; padding: 8px;}
div.boxPhone div.dashboard div.card-body .stats-icon{flex: none; margin: 0;}
div.boxPhone div.dashboard div.card-body .text{flex: auto; padding:2px 10px;}
div.boxPhone div.boxItem {border: solid 1px #e0eafc; border-radius: 5px; padding: 10px; margin: 10px 0;}
div.boxPhone div.boxItem p{font-size: 12px; margin: 0;}
div.boxPhone div.header{font-size: 12px; margin: 0;}
div.boxPhone div.header .retour{flex: none; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;  text-align: center; border-radius: 50%;}

.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 label{font-size: 12px; margin: 0; color: #25396f; font-weight: bold;}
.form-body label span{color: #dc3545;}
.form-group[class*=has-icon-] .form-control-icon i, .form-group[class*=has-icon-] .form-control-icon svg {
    width: 14px;
    color: #6c757d;
    font-size: 14px;
}

.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: 8px;color: #ffffff;text-transform: uppercase;background-color: #435ebe;border: none !important;}
table.dataTable tr td, table.datatablexx tr td {font-size: 10px; border: none;}
.dataTables_wrapper .dataTables_filter input{padding: 4px; margin-bottom: 8px;}

.colAction, .colActionxx{text-align: right;}
.colAction .btn, .colActionxx .btn{font-size: 12px;}
.colAction .btn-sm, .colActionxx .btn-sm{font-size: 8px;}
.colAction .btn-sm svg, .colActionxx .btn-sm svg{width: 12px; height: 12px;}

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

/*
    boxFacture
 */
.boxFacture{font-size: 12px; line-height: 15px; background-color: #ffffff; position: relative;}
.boxFacture p{font-size: 12px; line-height: 22px;}
.boxFacture small{font-size: 10px;}
.boxFacture .header_h{padding: 20px 10px; display: flex; justify-content: space-between; background-color: #eeeeee;}
.boxFacture .header{padding: 20px 10px; display: flex; justify-content: space-between; align-items: center;}
.boxFacture .header .infoFacture{border: solid 1px #a1a1a1; border-radius: 8px; padding: 10px;}
.boxFacture .header .infoFacture h2{padding-bottom: 10px;}
.boxFacture .header .infoFacture table{width: 250px;}
.boxFacture .header .infoClient p{text-align: right;}
.boxFacture .body{padding: 50px 10px;}
.boxFacture table.items{width: 100%; margin: 20px 0;}
.boxFacture table.items tr th{padding:5px 5px; background-color: #0c315e; border: solid 1px #eeeeee; color: #ffffff; text-align: left; font-weight: bold;}
.boxFacture table.items tr td{padding:5px 5px; border: solid 1px #eeeeee;}
.boxFacture table.small tr td{font-size: 10px; line-height: 12px;}
.boxFacture .body .footerItems{display: flex; justify-content: space-between; padding: 20px 0;}
.boxFacture .body .boxTotal table tr td{padding: 10px; background-color: #eeeeee; border: solid 1px #ffffff; text-align: left;}
.boxFacture .body .width-50{width:100px;}
.boxFacture .body .width-100{width:100px;}
.boxFacture .body .width-150{width:150px;}
.boxFacture .pied_page{width: 100%; padding: 10px; border-top: solid 1px #eeeeee; position: absolute; bottom: 0;}
.boxFacture .pied_page p{text-align: center;}


/*
    boxDataForm
 */
.boxDataForm{}
.headerDataForm{display: flex; justify-content: space-between; align-items: center; border-bottom: solid 1px #EEEEEE; padding-bottom: 10px; margin-bottom: 10px;}
.headerDataForm h2{font-size: 14px; margin: 0; color: #0c315e; font-weight: bold; text-transform: uppercase;}
.bodyDataForm{}
.bodyDataForm .boxPhoto{padding-bottom: 10px;}
.bodyDataForm .boxPhoto img{max-height: 100px; border: solid 1px #EEEEEE;}
.bodyDataForm .boxPhoto a{font-size: 12px;}
.bodyDataForm .boxPhoto h2{font-size: 14px; text-transform: uppercase; padding-top: 5px;}
.bodyDataForm .form-control{border-radius: 0;}
.bodyDataForm label{margin: 0; padding:0 0 5px 0; font-size: 12px; font-weight: bold; color: #1b1e21;}
.bodyDataForm label.form-check-label{padding-top: 5px;}
.bodyDataForm hr{}
.bodyDataForm iframe{width: 100%; height: 100%;}
.bodyDataForm h3{font-weight: bold; font-size: 14px; padding: 5px; margin-bottom: 10px; background-color: #f8fafc;}
.footerDataForm{display: flex; border-top: solid 1px #eeeeee; padding-top: 5px;}
.boxRecherche{padding: 16px; background-color: #ffffff; border-radius: 8px;}

.bodyDataForm .nav-tab{}

.ms-panel{padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 7px 14px 0 rgba(59,65,94,.1), 0 3px 6px 0 rgba(0,0,0,.07);}
.ms-panel .ms-panel-header{display: flex; justify-content: space-between; align-items: center;}
.ms-panel .ms-panel-footer{display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: solid 1px #eeeeee;}
.ms-panel .ms-panel-body{padding: 10px 0;}

.boxDataGrid{}
.headerDataGrid{display: flex; justify-content: space-between; align-items: center;}
.headerDataGrid h2{font-size: 14px; margin: 0; color: #0c315e; font-weight: bold;}
.headerDataGrid .boxSearch input{height: 30px; font-size: 12px;}
.headerDataGrid .boxSearch input.text{border: solid 1px #EEEEEE; padding:0 10px;}
.bodyDataGrid{border-top: solid 1px #EEEEEE;}
.bodyDataGrid div.height200{height: 200px; overflow-x: auto; overflow-y: auto;}
.bodyDataGrid div.height300{height: 300px; overflow-x: auto; overflow-y: auto;}
.bodyDataGrid div.height400{height: 400px; overflow-x: auto; overflow-y: auto;}
.bodyDataGrid .flexLine{display: flex; align-items: center; border-bottom: solid 1px #eee; font-size: 10px; color: #1a1d2d; line-height: 16px;}
.bodyDataGrid .flexLine small{font-size: 10px;}
.bodyDataGrid .flexLine div{border-left: solid 1px #eee; padding: 5px 10px; }
.bodyDataGrid .flexLine div.th{font-weight: normal; background-color: #f5f6fa; color: #2d3742; padding: 10px; text-transform: uppercase;}
/*.bodyDataGrid .flexLine:nth-of-type(2n+1){background-color: #f9f9f9;}*/
.bodyDataGrid .flexLine .col10{flex: none; width: 10px; }
.bodyDataGrid .flexLine .col20{flex: none; width: 20px; }
.bodyDataGrid .flexLine .col50{flex: none; width: 50px; }
.bodyDataGrid .flexLine .col80{flex: none; width: 80px; }
.bodyDataGrid .flexLine .col100{flex: none; width: 100px; }
.bodyDataGrid .flexLine .col120{flex: none; width: 120px; }
.bodyDataGrid .flexLine .col150{flex: none; width: 150px; }
.bodyDataGrid .flexLine .col200{flex: none; width: 200px; }
.bodyDataGrid .flexLine .col250{flex: none; width: 250px; }
.bodyDataGrid .flexLine .col300{flex: none; width: 300px; }
.bodyDataGrid .flexLine .col350{flex: none; width: 350px; }
.bodyDataGrid .flexLine .col400{flex: none; width: 400px;}
.bodyDataGrid .flexLine .colAction{flex: auto;}
.bodyDataGrid .flexLine .colAction .btn{font-size: 12px;}
.bodyDataGrid .flexLine .colAction .btn-sm{font-size: 8px;}
.bodyDataGrid .flexLine .colAction .btn-sm svg{width: 12px; height: 12px;}
.bodyDataGrid iframe{width: 100%; height: 100%;}
.footerDataGrid{border-top: solid 1px #EEEEEE; padding-top: 10px;}
.footerDataGrid p{margin: 0; font-size: 12px;}
.bodyDataGrid .boxMessage{display: flex; align-items: center;}
.bodyDataGrid .boxMessage:hover h2{color: #000000;}
.bodyDataGrid .boxMessage div.img{flex: none; border: none; padding: 0;}
.bodyDataGrid .boxMessage div.img img{height: 40px; width: 40px; border-radius: 50%;}
.bodyDataGrid .boxMessage div.text{flex: auto; border: none; padding: 0 10px; position: relative;}
.bodyDataGrid .boxMessage div.text span.badge{position: absolute; top: 0; right: 0;}
table.total_facture{width: 100%;}
table.total_facture td{font-size: 12px; padding: 5px 5px; border-bottom: solid 1px #e2e3e5;}



.col-w-10{width: 10px !important; }
.col-w-50{width: 50px !important; }
.col-w-80{width: 80px !important; }
.col-w-100{width: 100px !important; }
.col-w-150{width: 150px !important; }
.col-w-200{width: 200px !important; }
.col-w-250{width: 250px !important; }
.col-w-300{width: 300px !important; }
.col-w-350{width: 350px !important; }
.col-w-400{width: 400px !important;}
.col-w-Action{}
.col-w-Action .btn{text-transform: uppercase; font-weight: bold; font-size: 12px;}
.col-w-Action .btn:hover{color: #0090f8;}

input.search,
select.search{border-radius: 20px; padding: 0 10px;}
span.search{font-size: 12px; font-weight: bold; padding-left: 10px;}

table.boxBilan{width: 100%;}
table.boxBilan tr td{border: solid 1px #eeeeee; padding: 2px 5px; font-size: 12px;}

table.recap{width: 100%;}
table.recap tr th{border: solid 1px #eeeeee; padding: 2px 5px; font-size: 12px;}
table.recap tr td{border: solid 1px #eeeeee; padding: 2px 5px; font-size: 12px;}



@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 {
        margin: 0;
        padding: 0;
        padding-top: 16px;
    }
}