@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root{
    /* --def:#5686ec; */
    /* --def:#5072e4; */

    --def-op:rgba(28, 94, 235, 0.089);
    /* --dark:#66667e; */
    --dark:#5c5c70;
}
body{
 
    /* font-family: 'Nunito Sans', sans-serif; */
    font-family: 'Poppins', sans-serif;
    min-height: 900px;
    color: #2b2b33;
    
}
.offcanvas-body{
  background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(0,800,401)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23F5FBFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='2000' height='1666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover; 
}
.header{
    width: 100%;
    background-color: rgb(26, 28, 46);
    height: 55px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.267);
}
.sub-header{
    width:100%;
    height: 55px;
    background-color: white;

}
.content{
    width: 100%;
    margin-top: 71px;
    display: none;
}
.load{
  width: 100%;
  height: 100vh;
  text-align: center;
  padding-top: 190px;
  background-color: rgba(240, 242, 247, 0.808);
}
.btn-secondary{
  border:1px solid #6c757d;
}
.spinner-border{
  padding: 21px;
  font-size: 11px;
}

.icone-menu{
    width: 46px;
}

.select-hover{
    border: 2px solid white !important;
    box-shadow: 0px 40px 44px 44px rgba(44, 47, 59, 0.016);
}
.select-hover:hover{
    border: 2px solid var(--def) !important;
    transition: 0.3s;
    cursor: pointer;
    color: var(--def);
}
a{
    color: rgb(90, 93, 126);
    text-decoration-line: none;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(51, 51, 51, 0);
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: rgb(71, 69, 90);
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;

  }
  
  li a:hover {

    color: var(--def);

  }
  .img-menu{
    width: 24px;
  }
  .card-header{
    border-bottom: none !important;
    font-size: 12px;
  }
/* 6C6A81 */
/* 524F6D */
.qty-devis{
  width: 50px !important;
}

.subli{
    width:160px;
    position: absolute;
    height: 150px;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    margin-top: -6px;
    color: #c9c9c9;
}



  .btn-primary{
    border: 1px solid var(--def);
    background-color: var(--def);
    color: white;
    font-size: 13px;
  }


  .btn-primary:focus , .btn-primary:hover {
    border: 1px solid var(--def);
    background-color: var(--def);
    color: white;
    font-size: 13px;
  }

  .btn-soft-primary{
    color: var(--def);
    font-size: 13px;
    background-color: #cdddffab;
    border: none !important;
  }
  .btn-soft-primary:focus{
    background-color: var(--def);
    font-size: 13px;
    border: none !important;
    opacity: 0.8;
  }
  .border-sett{
    width: 37px;
    height: 37px;
    text-align: center;
    padding-top: 6px;
    border: 1px solid rgb(226, 227, 233);
    border-radius:50%;
    background-color: var(--def-op);
    color: var(--def);
  }
  .font-w-small{
    font-weight: 300;
  }
  .f-small{
    font-size: 12px;
  }
  .tit-l{
    font-size: 13px;
    text-transform:uppercase;
  }
  .menu-sub{
    font-size: 14px;
  }
  .card{
    border-radius: 11px !important;
    /* border: 1px solid rgba(209, 209, 209, 0.5) !important; */
    margin-bottom: 18px;
    /* box-shadow: 0px 0px 22px 22px rgba(23, 21, 53, 0.027) !important; */
    font-weight: 700;
    overflow: auto;
    border: 2px solid white !important;
}
.navbar-sub{
  width: 100%;
  padding: 15px;
  background-color: #6C6A81;
}


table {
  border-collapse: collapse;
  width: 100%;
  background-color: rgb(255, 255, 255) !important;
}

th, td {
  text-align: left;
  padding: 8px 11px;
  font-size: 12px;

  color: #5c5b6d;
}
th{ 
  font-size: 11px;
  /* text-transform: uppercase;  background-color: #686a8f !important; */
  text-transform: uppercase;  
  /* background-color: var(--dark) !important; */
  background: #65657B;
background: -moz-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%);
background: -webkit-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%);
background: linear-gradient(to bottom, #65657B 0%, #40404D 100%, #C59237 100%);
  color: white !important;
  font-weight: 900 !important;
}
tr > th{
padding: 11px;
margin-top: 12px;
}
tr > td{
  padding: 11px;
  box-shadow :none !important;
}
.sorting_1{
  box-shadow :none !important;
}

tr:nth-child(even) {background-color: #ebecf36b !important;}
.dataTables_info , .dataTables_filter > label , .dataTables_length > label{
  font-size: 13px;
  opacity: 0.7;
}

.paginate_button {
  background-color: #ffffff !important;
  padding: 5px 13px !important;
  font-size: 12px;
}
span > .current{
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 0%) !important;
  background: white !important;
  color: white !important;
}




.btn-success{
  /* background-color: rgb(18, 170, 107);
  border-color:rgb(18, 170, 107) ; */
  border: 1px solid #0ba38f;
  color:  #0ba38f;
  background: white;
}

.containers {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containers input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;

  border: 1px solid rgb(223, 223, 223);
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containers:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containers input:checked ~ .checkmark {
  background-color: var(--def);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containers input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containers .checkmark:after {
  left: 5px;
  top: 0px;
  width: 7px;
  height: 14px;
  border: solid white;

  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.inp-tit{
  opacity: 1;
  font-size: 11px;
  padding-bottom: 13px;
  text-transform: uppercase;
  color: #444655;
}
.menu{
  font-size: 12px;
  color: var(--def);
}
.menu-text{
  color: #6C6A81;
  font-size: 13px;
  text-transform: uppercase;
}
.btn-light{
  color: #373644;
  border: 1px solid rgb(226, 226, 226);
}
.bg-red{
  background-color: #cf5a5a;
  color: white;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border:none;
  /* border-bottom: 1px solid rgb(231, 231, 231);
  border-top: 1px solid rgb(231, 231, 231); */
  /* background: #5C5D7E; */
/* background: -moz-linear-gradient(-45deg, #5C5D7E 0%, #9194C8 100%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #5C5D7E 0%, #9194C8 100%, #C59237 100%);
background: linear-gradient(135deg, #5C5D7E 0%, #9194C8 100%, #C59237 100%); */
}

/* Style the buttons inside the tab */
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 10px;
  transition: 0.3s;
  font-size: 12px;
  font-weight: 900;
  color:rgb(72, 69, 87);
  border: 2px solid #ffffff;
  background-color: #ffffff;
  /* border-radius: 12px; */
  margin-left: 12px;
  margin-bottom: 4px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  /* border-bottom: 1px solid var(--def); */
  
}

/* Create an active/current tablink class */
.tab button.active {
  /* border-bottom: 1px solid var(--def); */
  color: rgb(40, 42, 54);
  background: #efeff700;
  border-bottom: 2px solid #66667e;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 12px 12px;
  border-top: none;
}
.box-ana{
  width: 50px;
  height: 50px;
  border-radius: 5px;
  color: white;
  text-align: center;
  font-size: 16px;
  padding-top: 14px;
}
.active{

}
.sel{
  font-size: 12px;
}
.sel-active{
  border: 1px solid var(--def);
  font-size: 12px;
}
select{
  font-size: 12px !important;
  padding: 10px !important;
}
.btn-radius-danger{
  border-radius: 50%;
  border: 1px solid red;
  color: red;
  width:37px;
  padding:0px;
  height:34px !important;
}

.btn-radius{
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.623);
  color: rgba(255, 255, 255, 0.623);
  width:37px;
  padding:0px;
  height:34px !important;
}
.bell{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  color:white;
  text-align: center;
  font-weight: 900;
  margin-left: -12px;
  font-size: 13px;
}


input , select , textarea {
  outline: none !important;
}
.form-control{
  width: 100%;
  padding: 0px 7px;
  border-radius: 6px;
  font-size: 12px;
  border: none !important;
}
tit-inp{
  font-size: 13px ;
  color: #6C6A81;
}
input:focus , select:focus , textarea:focus{
  /* border: none !important;
  box-shadow: none !important; */
  border: 1px solid rgb(255, 255, 255) !important;
  box-shadow: 0px 0px 1px 2px var(--def) !important;
}
input::placeholder{
  font-size: 13px;
}
.input-container{
  display: flex;
  gap: 2px;
  border-radius: 6px;
  margin-bottom: 12px;
  height: 38px;
  border: 1px solid #dddcdc !important;
  box-shadow: 0px 0px 0px 0px #eeeeee !important;
}
.focusInputDiv{
  border: 1px solid rgb(255, 255, 255) !important;
  box-shadow: 0px 0px 1px 2px var(--def) !important;
}
.input-container > input{
  height: 100%;
}
.validation{
  text-align: center;
  width: 50px;
}
.validation > img{
 margin-top: 7px;
 display: none;
}
.select-form{
  border: 1px solid rgb(255, 255, 255) !important;
  box-shadow: 0px 0px 1px 2px rgb(238, 238, 238) !important;
}
select:focus{
  border: 1px solid rgb(255, 255, 255) !important;
  box-shadow: 0px 0px 1px 2px var(--def) !important;
}
.card-footer{
  font-size: 12px;
  color: #5c5b6d;
}
.btn-light-plus
{
  width: 19px;
  height: 19px;
  font-size: 12px;
  border-radius: 50%;
  text-align: center;
  padding: 0px !important;
  color: white;
  background-color: #119982;
  border: 1px solid rgb(8, 177, 98);
}
.navbar-dark{

 background-color: var(--navbar) !important;
 /* background: var(--dark) !important; */
 /* background: -moz-linear-gradient(-45deg, #0E2150 0%, #3253AE 63%, #1C43A2 100%);
 background: -webkit-linear-gradient(-45deg, #0E2150 0%, #3253AE 63%, #1C43A2 100%);
 background: linear-gradient(135deg, #0E2150 0%, #3253AE 63%, #1C43A2 100%); */

}
.alert{
  width: 420px;
  background-color: #ffffff !important;
  font-size: 13px;
  margin-top: 20px !important;
  box-shadow: 0px 0px 28px 2px rgba(0, 0, 0, 0.075);
} 
.tag{
  padding: 6px 14px;
  background-color: rgb(240, 240, 240);
  border-radius: 5px;
  font-size: 13px;
  margin-right: 12px;
  margin-bottom: 12px;
}
.deleteTag{
  background: rgb(238, 92, 92);
  color: white;
  cursor: pointer;
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 12px;
  margin-left: 7px;
}
.validation-text{
  font-size: 12px;
  color: rgb(223, 52, 52);
  margin-bottom: 8px;
}

.btn-close{
  border-radius: 50%;
  background-color: rgb(194, 194, 194);
  font-size: 12px;
}

.btn-outline-primary{
  border-color:var(--def) ;
  color: var(--def);
}
.btn-outline-primary:hover{
  background-color: var(--def);
}

.btn-action{
  border-radius: 50%;
  border: none;
}
.blue{
  color: #264fb6;
}
.red{
  color: #ee3838;
}
.green{
  color: #0d915a;
}
.blue:hover{
  color: #264fb6;
}
.red:hover{
  color: #ee3838;
}
.green:hover{
  color: #0d915a;
}

.small{
  font-size: 12px;
  opacity: 0.9;
}
.bg-partiel{
  background-color: #f1e3a7be;
  color: #925821;
}
.bg-receptionne{
  background-color: #a7f1c6be;
  color: #12644b;
}
.bg-encour{
  background-color: #cae1ffbe;
  color: #282941;

}
.bg-brouillon{
  background-color: #cacacabe;
  color: #292a3b;

}
.bg-bloque{
  background-color: #ffe6e6;
  color: #ad3636;

}
.bg-danger-carnet{
  background-color: #ffacacbe;
  color: #b11919;
}
.icon-navbar{
  width: 28px;
  margin-right: 8px;
  border-radius: 3px;
}
.backg-card{
  height: 100%;
  /* 53669A */
}
input{
  font-weight: bold !important;
}
.qty-devis{
    width:80px !important;
}

.btnn-warning{
  background-color: #05a5aa;
  border: 1px solid #05a5aa;
  color: white;
}
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(209, 209, 209); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(151, 151, 151); 
}
.articles-devis{
  width: 250px !important;
}
.qty-devis, .unite-devis, .val-devis, .p_u-devis,.qty-recp ,.qty-recv , .rest , .ht-devis , .tva-devis , .ttc-devis{
  width: 100% !important;
  text-align: center !important;
}
.qty-devis_2, .unite-devis_2, .val-devis_2, .p_u-devis_2,.qty-recp_2 ,.qty-recv_2 , .rest_2 , .ht-devis_2 , .tva-devis_2 , .ttc-devis_2{
  width: 100% !important;
  text-align: center !important;
}
/* var articles = document.getElementsByClassName('articles-devis');
var qty = document.getElementsByClassName('qty-devis');
var unite = document.getElementsByClassName('unite-devis');
var p_u = document.getElementsByClassName('p_u-devis');
var recep = document.getElementsByClassName('qty-recp');
var recv = document.getElementsByClassName('qty-recv');
var rest = document.getElementsByClassName('rest');
var ht = document.getElementsByClassName('ht-devis');
var tva = document.getElementsByClassName('tva-devis');
var ttc = document.getElementsByClassName('ttc-devis'); */
.form-control-fact{
  border: 1px solid rgb(228, 228, 228);
  padding: 7px;
  text-align: center;
  border-radius: 4px;
  width: 100px;
}
.border-reg{
  color:#484c6d;font-size:12px;text-align:center;
  border-radius: 5px;
  cursor: pointer;
  
}
.border-reg-sel{
  border: 1px solid var(--def) !important;
  background-color: #f8faff;
  color:#484c6d;font-size:12px;text-align:center;
  border-radius: 5px;
  cursor: pointer;
}
.sel-print{
  color: rgb(90, 93, 126);
}
.sel-print:hover{
  border: 1px solid var(--def);
  cursor: pointer;
}
.tab-title-modal{
  color: white;
  background-color: rgb(104, 106, 143);
  padding: 8px 12px;
  border-radius: 4px;
 
}
@media only screen and (max-width: 800px) {
  .articles-devis{
    width: 140px !important;
  }
  .qty-devis, .unite-devis, .val-devis, .p_u-devis,.qty-recp ,.qty-recv , .rest , .ht-devis , .tva-devis , .ttc-devis{
    width: 82px !important;
    text-align: center !important;
  }
}
@media only screen and (max-width: 600px) {
  .sel-print{
    font-size: 12px;
  }
}

.tab_date_v{
  border-radius: 44px;
  color: white;
  text-align: center;
  padding: 5px;
  font-size: 12px;
  height: 27px;
  background-color:rgb(104, 106, 143);
}
.line_date_v{
  width: 100%;
  height: 1px;
  margin-top: 12px;
  background-color: rgba(104, 106, 143, 0.514);
}
/* Autre detail paiement */


.circle-info-sett{
  border-radius: 50%;
  background-color: #d2d6e0;
  color: rgb(49, 51, 78);
  text-align: center;
  padding-top: 10px;
  text-transform: uppercase;
  font-size: 15px;
  width: 40px;
  height: 40px;
}
.bg-secondary{
  border-radius: 50%;
  background-color: #05a5aa !important;
}
input{
  /* text-transform: uppercase !important; */
}
.btn-stock-ac{
  background: #f1fff9;
  color: rgb(5, 87, 73);
}
.a_link_index{
  font-size: 13px;
  margin-left: 7px;
}
.a_primary{
  color: var(--def);
}
.circle-statu{
  border-radius: 50%;
  width:58px;
  height:58px;
  text-align: center;
  padding-top: 10px;
  margin-top: -14px;
}













.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-spinner div {
  transform-origin: 28px 28px;
  margin-left: -19px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  left: 25px;
  width: 4px;
  height: 14px;
  border-radius: 5%;
  background: gray;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.btn:focus{
  outline: none !important;
  box-shadow: none !important;
}
.nav-link{
  font-size: 12px !important;
}
.badge{
  font-size: 11px !important;
  text-transform: capitalize;
}
.add_icone{
  width: 18px;
}

.non-valid{
  border-radius: 44px;
  font-size: 12px;
  padding: 4px 15px !important;
  background-color: rgba(255, 8, 0, 0.637);
  color: white;
}
.yes-valid{
  border-radius: 44px;
  font-size: 12px;
  padding: 4px 15px !important;
  background-color: rgba(6, 172, 103, 0.664);
  color: white;
}
.yes-br{
  border-radius: 44px;
  font-size: 12px;
  padding: 4px 15px !important;
  background-color: rgba(95, 112, 131, 0.664);
  color: white;
}
.non-valid:hover,.non-valid:focus{
  background-color: rgba(255, 8, 0, 0.637);
  color: white;
}
.yes-valid:hover,.yes-valid:focus{
  background-color: rgba(6, 172, 103, 0.664);
  color: white;
}
.yes-br:hover,.yes-br:focus{
  background-color: rgba(95, 112, 131, 0.664);
  color: white;
}


/* serach input select  */

.search_select{
  padding: 6px 8px;
  border: 1px solid rgb(224, 224, 224) !important;
}
.search_select::placeholder{
  font-size: 11px;
}
.container_select{
  border: 1px solid rgb(212, 212, 212);
  padding: 6px;
  margin-top: -10px;
  position:absolute;
  z-index: 10;
  background: white;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.062);
  display: none;
}
.profile{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: white;
  background: #2C43EC;
  background: -moz-linear-gradient(-45deg, #2C43EC 0%, #875DDA 100%, #C59237 100%);
  background: -webkit-linear-gradient(-45deg, #2C43EC 0%, #875DDA 100%, #C59237 100%);
  background: linear-gradient(135deg, #2C43EC 0%, #875DDA 100%, #C59237 100%);
  text-align: center;
  padding-top: 6px;
  text-transform: uppercase;
}
.profile-article{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: white;
  background: #8B8BAC;
background: -moz-linear-gradient(-45deg, #8B8BAC 0%, #484253 100%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #8B8BAC 0%, #484253 100%, #C59237 100%);
background: linear-gradient(135deg, #8B8BAC 0%, #484253 100%, #C59237 100%);
  text-align: center;
  padding-top: 6px;
  text-transform: uppercase;
}

.profile-depot{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: white;
  background: #EB7A1F;
background: -moz-linear-gradient(-45deg, #EB7A1F 0%, #E63D8B 100%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #EB7A1F 0%, #E63D8B 100%, #C59237 100%);
background: linear-gradient(135deg, #EB7A1F 0%, #E63D8B 100%, #C59237 100%);
  text-align: center;
  padding-top: 6px;

  text-transform: uppercase;
}
.profile-transport{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: white;
  background: #12A384;
background: -moz-linear-gradient(-45deg, #12A384 0%, #185ECA 100%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #12A384 0%, #185ECA 100%, #C59237 100%);
background: linear-gradient(135deg, #12A384 0%, #185ECA 100%, #C59237 100%);
  text-align: center;
  padding-top: 6px;

  text-transform: uppercase;
}
.profile-car{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: white;
  background: #FF4070;
background: -moz-linear-gradient(-45deg, #FF4070 0%, #8F30B6 100%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #FF4070 0%, #8F30B6 100%, #C59237 100%);
background: linear-gradient(135deg, #FF4070 0%, #8F30B6 100%, #C59237 100%);
  text-align: center;
  padding-top: 6px;

  text-transform: uppercase;
}
.table_for_search > tr > th{
  background: white !important
}
tr:hover {cursor: pointer;}
tr > td {
  padding: 7px !important
}
.select-div{
  cursor: pointer;
  min-width: 199px !important;
}
codef{
  font-size: 10px;color:#999999
}
.card-info{
  /* min-height: 380px; */
}
.card{
  position: static !important;
}
.droit-active{
  background: #66667e;color:white;border-radius:0px;padding:6px 8px;
}
.droit{
  background: #ffffff;color:#66667e;border-radius:0px;padding:6px 8px;
}
/* .btn-danger{
  background-color: rgba(255, 255, 255, 0) !important;
  color: rgb(243, 74, 74);
  font-size: 13px;
  border: none  !important;
}
.btn-danger:focus , .btn-danger:focus{
  color: rgb(253, 100, 100) !important;
} */
select{
  cursor: pointer;
}
select > option{
  cursor: pointer;
}
.exportExcel{
  background: #f0f3ffb6 !important;
  border: 1px solid rgb(233, 235, 236)  !important;
  border-radius: 4px  !important;
  font-size: 12px  !important;
  color: var(--def) !important; 
}

@media only screen and (max-width: 900px) {
  .profile, .profile-article, .profile-depot, .profile-transport , .profile-car{
    display: none;
  }
}
.btn-primary-green{
  background-color: rgb(220, 255, 247) !important;
  color: rgb(16, 116, 82);
}
.btn-primary-red{
  background-color: rgb(255, 232, 236) !important;
  color: rgb(155, 21, 21);
}
.tabs , .sortie_tabs{
  margin-top: 20px;
}

.bg-green{
  background-color: rgb(224, 224, 235);
  color: rgb(82, 87, 119);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: bold;
}
.btn-gray{
  background-color: rgba(233, 233, 233, 0.336);
}
.sort_btn-gray{
  background-color: rgba(233, 233, 233, 0.336);
}
.btn-select{
  border-bottom: 2px solid var(--def);
  
}
.btn-select:focus{
  border-bottom: 2px solid var(--def);
}

input::placeholder{
  font-size: 11px !important;
}
.card > .w-100 {
  background: #65657B !important;
  background: -moz-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%) !important;
  background: -webkit-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%) !important;
  background: linear-gradient(to bottom, #65657B 0%, #40404D 100%, #C59237 100%) !important;
}
.modal-body > .w-100 {
  background: #65657B !important;
  background: -moz-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%) !important;
  background: -webkit-linear-gradient(top, #65657B 0%, #40404D 100%, #C59237 100%) !important;
  background: linear-gradient(to bottom, #65657B 0%, #40404D 100%, #C59237 100%) !important;
  border-radius: 4px !important;
}