@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
:root {
    --main-color-1: #f86700;
    --sub-main-color-1: #ff7d21;
    --main-color-2: #3f3f3f;
    --sub-main-color-2: #898686;

    --a-color: #f2f2f2;
    --neutral-color: #F5F6FC;
}
.container-global{
    position: relative;
    min-height: 100vh;
    padding: 25px 15px 40px 105px;   /* 85px is the side of AdminSideBar */
    background: #efefef;
}
.container-global .center{
    position: relative;
    min-height: calc(100vh - 65px);
}
/************************  Title  *************************/
.container-global .center .title{
    font-weight: 500;
    display: flex;
    align-items: center;
    color: var(--main-color-2);
    margin-bottom: 30px;
}
.container-global .center .title span{
    position: relative;
}
.container-global .center .title span:first-child{
    font-size: 25px;
    margin-right: 10px;
    font-weight: 600;
}
.container-global .center .title span:last-child{
    font-size: 28px;
}


.container-global .center .no-data{
    font-size: 35px;
    display: inline-block;
    width: 100%;
    text-align: center;
}


/************************ filter ************************/
.container-global .center .filter{
    position: relative;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 25px;
    background: #fff;
    padding: 13px 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.container-global .center .filter > span{
    font-size: 19px;
}
.container-global .center .filter .filter-content{
    display: flex;
    margin-top: 15px;
    flex-wrap: wrap;
    row-gap: 15px;
}

/************************ Buttons ************************/
.container-global .center .button{
    width: 100%;
    text-align: center;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.container-global .center .button span.add{
    padding: 5px 20px;
    background: var(--main-color-1);
    color: #fff;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
}
.container-global .center .button span.active{
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    background: var(--main-color-2);
    color: #fff;
}
.container-global .center .button span:hover{
    text-decoration: underline;
}

/******************* Add Item *********************/
.container-global .center .add-item{
    width: 100%;
    /* text-align: right; */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 15px;
}
.container-global .center .add-item span{
    padding: 5px 20px;
    color: #fff;
    border-radius: 7px;
    font-size: 16px;
    cursor: pointer;
}
.container-global .center .add-item span.color-1{
    background: var(--main-color-1);
}
.container-global .center .add-item span.color-2{
    background: var(--main-color-2);
}
.container-global .center .add-item span:hover{
    text-decoration: underline;
}


/************************ Box-Error ************************/
.box-success, .box-error{
    font-size: 15px;
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid transparent;
}
.box-error{
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
.box-success{
    color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

@media (max-width: 768px){
    .container-global{
        padding: 25px 15px 40px 15px;
    }
}


.inactive{
    pointer-events: none
}

/************************ Tooltip ************************/
.tooltip{
    position: relative;
    cursor: pointer;
    top: 1px;
}
.tooltip .tooltip-icon.on{
    color: #2bfd5f;
}
.tooltip .tooltip-icon.off{
    color: #ff2323;
}
.tooltip .tooltip-text{
    position: absolute;
    top: -31px;
    left: 2px;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 5px;
    visibility: hidden;
    pointer-events: none;
}
.tooltip .tooltip-text.on{
    background: #2bfd5f;
    color: #fff;
}
.tooltip .tooltip-text.off{
    background: #ff2323;
    color: #fff;
}
.tooltip:hover .tooltip-text{
    visibility: visible;
}


/********************** Actions style ************************/
.preparation{
    background: #cf97b1;
}
.ramassage{
    background: #ecd006;
}
.reception-agence{
    background: #48cfff;
}
.depot-agence{
    background: #ff5def;
}
.acheminement-depart{
    background: #5ea3a2;
}
.acheminement-arrive{
    background: #b0ad6b;
}
.livraison-domicile{
    background: #808080;
}
.livraison-agence{
    background: #008b07;
}
.stock-agence{
    background: #f09d00;
}
.retour-client{
    background: #b8821e;
}

.default{
    color: #000 !important;
    background: #fff;
}

.nwe{
    background: #2f45ff;
}
.livre{
    background: #008b07;
}
.retour{
    background: #ff2323;
}
.annule{
    background: #df0064;
}

.a-domicile{
    background: #804515;
}
.en-agence{
    background: #0F434F;
}

.a-accuse{
    border-color:  #d700ff !important;
    color:  #d700ff;
}
.s-accuse{
    border-color: #0028ff !important;
    color: #0028ff;
}
.pick-up{
    border-color: #21130d !important;
    color: #21130d;
}
.autre{
    border-color: #AEB227 !important;
    color: #AEB227;
}