span.Livré {
    color: #1ee0ac;
   background: rgba(30,224,172,.15) !important;

}
span.En.livraison {
    background-color: rgba(244,189,14,.15) !important;
    color: #f4bd0e;
}
span.Attribué.au.livreur {
    background: #efe8ff !important;
    color: #854fff;
}
span.Reçu.par.livreur {
    color: #f89406;
    background: #f8940614 !important;
}
span.Echec.de.livraison {
    background: #e96f501a !important;
    color: #ff3400;
}
span.Attribuer.à.la.zone {
    background: #ffe1c4 !important;
    color: #934800;
}
span.Collecté {
    background: #3c763d1c !important;
    color: #3c763d;
}
span.Nouveau {
    background: rgb(255 214 232);
    color: #fe4997;
}
span.Retour.confirmé {
    background-color: #e5e9f2;
    color: #8094ae;
}
span.Annulé {
    color: #e85347;
    background-color: #fce9e7 !important;
}
span.Refusé {
    color: #ff1300;
    background-color: #ff180017 !important;
}
span.Livraison.retardée {
    color: #2b73e2;
    background-color: #2b73e21c !important;
}
span.retour.au.Dépot {
    background-color: rgb(196 221 255);
    color: rgb(65 146 254);
}
span.Reporté {
    color: #00505b;
    background-color: #dff7fb !important;
}
span.Encaissé {
    background-color: #c3c3c340;
    color: #343434;
}
span.Confirmé {
    color: #0fac81;
    background-color: #e0f4ef !important;
}

.Disponible {
    color: #ffffff;
    background-color: #f89406 !important;
    opacity: 0.6;
    padding: 0 5px;
}

.Accepté.Par.Moi {
    color: #ffffff;
    background: #03bc81;
    padding: 1px 5px;
    opacity: 0.6;
}
span.Demande.de.Changement {
    color: #f89406;
    background-color: #f8940617 !important;
}
span.Changement.Rejeté {
    color: #ef5252;
    background-color: #ef52521a !important;
}
span.Annulée {
    color: #e85347;
    background-color: #c53d3d1a !important;
}
span.Fermé {
    color: #333;
    background-color: #33333314 !important;
}
span.En.attente {
    color: #ccc;
    background-color: #000000 !important;
}
span.bag_num {
    color: #ccc;
    background-color: #000000 !important;
    margin-left: 5px;
    padding: 0 5px;
}
span.Pas.de.réponse {
    color: #6facff;
    background-color: #eef5ff;
}
span.Échoué {
    background-color: #fd646440;
    color: #960606;
}
span.Reprogrammée {
    background: #fff6e9;
    color: #fb8851;
}
span.Remis.du.pilote.au.dépot {
    background-color: #65886424;
    color: #658864;
}
span.Recu.du.vendeur.au.pilote {
    color: #C3ACD0;
    background: #c3acd024;
}

span.Vérifier.la.destination {
    background: #ff980017;
    color: #FF9800;
}

.labelStatut:before {
    content: ". ";
    font-size: 3em;
    line-height: 0.1em;

}

.labelStatut {
	border-radius: 20px;
	padding: 5px 12px;
	font-size: 12px;
	border: none;
	font-weight: 700;
	display: inline-flex;
}
@media screen and (min-width:992px) { 
.labelStatut {
      font-size: 16px;
} 
	}


.SuiviOrdersAgent{
    float: right;
    right: 2em;
    position: absolute;
    color: var(--sd-base-gray-900);
    font-size: 1.5em;
    font-weight: 900;
}
.AddressOrdersAgent {
    font-weight: 300;
    font-size: 1.3em;
    margin-left: 7px;
}


:root{
	--bg-color-bright: #f9fafb;
    --theme-color-bright: #0057fc;
    --theme-color-dark: #586980;
    --theme-color-light-gray: #F2F2F3;
    --theme-color-dark-gray: #2F353C;
    --theme-color-teal: #05A4B5;
    --theme-font-color-grey: #7f7f7f;
    --theme-color-banner-gray: #666666;
    --theme-color-banner-bg: #d5fff1;
    --theme-color-pill-light-yellow: #F8FDE8;
    --theme-color-pill-dark-yellow: #87452B;
    --sd-black: #000000;
    --sd-base-gray: #33424f;
    --sd-base-gray-25: #F8F9FD;
    --sd-base-gray-50: #EDEFF1;
    --sd-base-gray-200: #D1D8DB;
    --sd-base-gray-700: #596D79;
    --sd-base-gray-800: #495963;
    --sd-base-gray-900: #283237;
    --sd-base-gray-400: #94A3AD;
    --sd-base-gray-300: #B3BEC4;
    --sd-base-gray-500: #7D8F9B;
    --sd-base-green-400: #5CD3AB;
    --sd-error-red: #EB4E3D;
    --sd-error-red-50: #FCECEE;
    --sd-error-red-100: #F7CFD3;
    --sd-error-red-400: #DD5E56;
    --sd-basic-dark: #273240;
    --sd-primary-500: #e9801c;
    --sd-attention-orange: #F6C244;
    --sd-attention-orange-dark: #dea91e;
    --sd-brand-50: #EBFAF5;
    --sd-neutral-200: #F7F9FA;
    --sd-neutral-300: #EFEFEF;
    --sd-neutral-400: #9da3a6;
    --sd-neutral-500: #7C7C7C;
    --sd-neutral-600: #4A4A4A;
    --sd-neutral-700: #242424;
    --sd-neutral-800: #101010;
    --sd-primary-100: #232b34;
    --sd-primary-100-2: #162377;
    --sd-primary-400: #17C2891C;
    --sd-error-red-v2: #F83B3B ;
    --sd-orange: #DC8809;
}


body, html {
    font-family: 'tajawal', sans-serif;
    color: var(--sd-base-gray-900);
}

i.viewList {
    color: #ffffff99;
    font-size: 1.5em;
}
i.viewList.fa.fa-qrcode {
color: #ffffff99;
    font-size: 2em !important;
}
.notification-badge {
  position: relative;
  top: -8px;
  left: 5px;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: red;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
  line-height: 16px;
}