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

:root{
    --yellow-gold: #FFD700;
    --red-error: #C6011F;
    --cat-result-bg: #E0FFFF;
    --bg-result-searchLive: #AFEEEE;
    --bg-result-searchLive-hover: #82bebe;
    --titles-result-liveSearch: rgba(25,25,112,0.6);
    --titles-result-liveSearch-hover: rgba(25,25,112,0.9);
    --gradient-blue-options: linear-gradient(180deg, rgba(0, 0, 90) 0%, rgba(0, 0, 215) 60%);
    --left-slider-vignette: 0;
    --width-vignettePdt-slide-multiplier: 1;
    --bg-body: linear-gradient(320deg, #ffdcdc 0%, #fff0f0 40%);
    --bg-btn-selected: linear-gradient(180deg, #a00f00 0%, #640a00 80%);
    --brown-text: #910e00;
    --dark-brown: #640a00;
    --white-color: #fff;
    --black-color: #000;
    --box-shadow-popup: 0 10px 15px rgba(0,0,0,0.1);
    --box-shadow-card: 0 0 10px rgba(0,0,0,0.05);
    --dark-light-background: rgba(0,0,0,0.025);
    --dark-light-background-hover: rgba(0,0,0,0.2);
    --white-transparent: rgba(255,255,255,0.85);
    --light-light-gray: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 60%);
    --font-input: "Poppins", sans-serif;
    --text-title-color: rgba(0,0,0,0.65);
    --text-text-color: rgba(0,0,0,0.5);
    --background-hover-btn: linear-gradient(360deg, #810006 0%, #a31017 40%);
    --background-feat-btn: linear-gradient(120deg, #a31017 0%, #810006 40%);
    --green-loading: #32CD32;
    --green-message-success: #008000;
    --blue-gradient-btn: linear-gradient(225deg, #00008B 0%, #0000FF 80%);
    --dark-blue: #0000FF;
    --background-gradient-brown: linear-gradient(360deg, #810006 0%, #a31017 40%);
    --background-btn-icon: linear-gradient(180deg, #a00f00 0%, #640a00 80%);
    --background-btn-icon-reverse: linear-gradient(180deg, #640a00 0%, #a00f00 80%);
    --width-reportFetch: 300%;
    --black-border-alpha: rgba(0,0,0,0.7);
    --light-light-gray2: linear-gradient(90deg, #FFFFFF 0%, rgba(180,180,180,0.2) 45%), rgba(225,225,225,0.2) 90%;
    --background-toggleBtn-success: linear-gradient(180deg, #2dc32d 0%, #19a019 80%);
    --silver-toggler: linear-gradient(60deg,#e0e0e0 0%,#f5f5f5 25%,#bebebe 50%,#dfdfdf 75%,#ababab 100%);
    --gray-uni: #B4B4B4;
    --box-shadow-vignette: 5px 5px 10px rgba(0,0,0,0.6);
    --bg-icon-unselected: linear-gradient(180deg, #afafaf 0%, #d2d2d2 60%);
    --separateur-black-light: rgba(0,0,0,0.15);
    --bg-gradient-green-btn: linear-gradient(220deg, #006400 0%, #008000 75%);
    --bg-gradient-green-btn-hover: linear-gradient(220deg, #008000 0%, #006400 75%);
    --bg-color-categories: rgba(0,0,0,0.7);
}

.hidden{
    display: none;
}
.foulardLoading{
    z-index: 15;
    position: fixed;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--white-transparent);
}
.foulardLoading.active{
    display: flex;
}
.loadingContainerTop{
    background: var(--background-btn-icon-reverse);
    top: -50vh;
    display: flex;
    position: absolute;
    width: 100%;
    height: 50vh;
    border-bottom: 1px solid var(--text-title-color);
    z-index: 11;
}
.loadingContainerTop.active{
    top: 0;
}
.loadingContainerBottom{
    background: var(--background-btn-icon);
    display: flex;
    position: absolute;
    bottom: -50vh;
    width: 100%;
    height: 50vh;
    border-top: 1px solid var(--text-title-color);
    z-index: 11;
}
.loadingContainerBottom.active{
    bottom: 0;
}
.foulardLoading .progressBarFull{
    position: relative;
    width: 25%;
    border: 1px solid var(--text-title-color);
    border-radius: 10px;
    height: 4px;
    background: var(--white-color);
    padding: 0;
}
.foulardLoading .progressBarFull .loadingBar{
    width: 1%;
    height: 2px;
    position: absolute;
    background: var(--green-loading);
}

.providerInfos{
    margin-left: 20px;
    display: grid;
    grid-template-columns: 25% 60% 5%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.providerInfos .detailsProvider{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
}
.providerInfos .detailsProvider .cardsSupport{
    display: flex;
    width: 100%;
    gap: 10px;
    flex-direction: row;
    background: var(--white-color);
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--box-shadow-card);
}
.providerInfos .detailsProvider .cardsSupport .card{
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-right: 1px solid var(--separateur-black-light);
    width: 33%;
    gap: 5px;
}
.providerInfos .detailsProvider .cardsSupport .card:last-child{
    border-right: none;
}
.providerInfos .detailsProvider .cardsSupport .card .chiffre{
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 24px;
    color: var(--green-loading);
    width: 100%;
    font-weight: 700;
    align-items: center;
}
.providerInfos .detailsProvider .cardsSupport .card .chiffre span{
    color: var(--text-text-color);
    font-size: 11px;
}
.providerInfos .detailsProvider .cardsSupport .card .indice{
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    color: var(--green-message-success);
    font-size: 10px;
    font-weight: 600;
}
.providerInfos .detailsProvider .cardsSupport .card .title{
    font-size: 13px;
    color: var(--dark-brown);
    padding: 5px;
    font-weight: 550;
}
.providerInfos .detailsProvider .locationPvd{
    font-size: 11px;
    font-weight: 500;
    color: var(--titles-result-liveSearch);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
}
.providerInfos .detailsProvider .locationPvd span{
    font-weight: 550;
    color: var(--titles-result-liveSearch-hover);
}
.providerInfos .detailsProvider h1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: var(--white-color);
    font-size: 14px;
    font-weight: 550;
    color: var(--text-title-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow-card);
    width: 100%;
    gap: 15px;
}
.providerInfos .detailsProvider h1 a{
    background: var(--gradient-blue-options);
    color: var(--white-color);
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 20px;
}
.providerInfos .detailsProvider h1 a:hover{
    color: var(--bg-result-searchLive);
}
.providerInfos .detailsProvider h1 span{
    font-size: 12px;
    color: var(--green-message-success);
}
.providerInfos .logo{
    width: 100%;
    height: 250px;
    border-radius: 20px;
    border: 5px solid var(--brown-text);
    padding: 5px;
    object-fit: cover;
    background: var(--bg-icon-unselected);
}

input[type="file"]::file-selector-button{
    background: var(--dark-brown);
    color: var(--white-color);
    font-weight: bold;
    font-size: 11px;
    padding: 10px;
    border-radius: 5px;
    appearance: none;
    border: none;
    cursor: pointer;

}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all .2s ease-out;
}

html, body{
    height: 100vh;
    width: 100%;
    overflow: hidden !important;
    background: var(--bg-body);
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
}

.confirmNotif{
    position: absolute;
    gap: 10px;
    height: 100px;
    top: 10px;
    right: -100%;
    z-index: 998;
    background: var(--white-color);
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border-radius: 10px;
    border-bottom: 5px solid var(--green-loading);
}
.confirmNotif.active{
    right: 10px;
    opacity: 1;
}
.confirmNotif .closeNotif{
    display: flex;
    width: 25px;
    justify-content: center;
}
.confirmNotif .closeNotif ion-icon{
    background: var(--white-color);
    border-radius: 50%;
    font-size: 32px !important;
    color: var(--green-loading);
    cursor: pointer;
    margin-left: -20px;
}
.confirmNotif .content{
    width: calc(100% - 25px);
    padding: 15px;
    line-height: 1.6em;
    font-size: 12px;
    color: var(--green-message-success);
    font-weight: bold;
}

.alertNotif{
    position: absolute;
    gap: 10px;
    height: 100px;
    top: 10px;
    right: -100%;
    z-index: 999;
    background: var(--white-color);
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border-radius: 10px;
    border-bottom: 5px solid var(--brown-text);
    box-shadow: var(--box-shadow-popup);
}
.alertNotif.active{
    right: 10px;
    opacity: 1;
}
.alertNotif .closeNotif{
    display: flex;
    width: 25px;
    justify-content: center;
}
.alertNotif .closeNotif ion-icon{
    background: var(--white-color);
    border-radius: 50%;
    font-size: 32px !important;
    color: var(--brown-text);
    cursor: pointer;
    margin-left: -20px;
}
.alertNotif .content{
    width: calc(100% - 25px);
    padding: 15px;
    line-height: 1.6em;
    font-size: 12px;
    color: var(--brown-text);
    font-weight: bold;
}

.formContainer{
    display: grid;
    grid-template-rows: auto 60px;
    height: 100vh;
    background: var(--light-light-gray);
}
.formContainer h1{
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
}
.formContainer .contentTop{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: scroll;
}
.selectedPvd{
    position: relative;
    cursor: pointer;
}
.selectedPvd input[name='pvdSelected']{
    outline: none;
    cursor: pointer;
}
.selectedPvd::after{
    content: "";
    width: 3px;
    height: 3px;
    border: 2px solid;
    border-color: transparent var(--text-title-color) var(--text-title-color) transparent;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
}
.selectedDepense{
    position: relative;
    cursor: pointer;
}
.selectedDepense input[name='depenseSelected']{
    position: relative;
    cursor: pointer;
}
.selectedDepense::after{
    content: "";
    width: 3px;
    height: 3px;
    border: 2px solid;
    border-color: transparent var(--text-title-color) var(--text-title-color) transparent;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
}
.selectedCustomer{
    position: relative;
    cursor: pointer;
}
.selectedCustomer input[name='customerSelected']{
    position: relative;
    cursor: pointer;
}
.selectedCustomer::after{
    content: "";
    width: 3px;
    height: 3px;
    border: 2px solid;
    border-color: transparent var(--text-title-color) var(--text-title-color) transparent;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
}
.selectedItem{
    position: relative;
    cursor: pointer;
}
.selectedItem input[name="pdtSelected"]{
    outline: none;
    cursor: pointer;
}
.selectedItem::after{
    content: "";
    width: 3px;
    height: 3px;
    border: 2px solid;
    border-color: transparent var(--text-title-color) var(--text-title-color) transparent;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
}
.formContainer .contentTop .blocProduits{
    display: flex;
    flex-direction: column;
    margin: 5px;
    padding: 15px;
    background: var(--white-color);
    box-shadow: var(--box-shadow-card);
    border-radius: 10px;
}
.formContainer .contentTop .blocProduits .title{
    color: var(--text-text-color);
    padding: 5px;
    font-weight: 500;
    font-size: 11px;
}
.formContainer .contentTop .blocProduits .stockBloc{
    justify-content: space-between;
}
.formContainer .contentTop .blocProduits .stockBloc .submitAddBasket{
    display: flex;
    align-items:flex-end;
}
.formContainer .contentTop .blocProduits .stockBloc .submitAddBasket button[class="submit"]{
    padding: 10px 20px;
    background: var(--blue-gradient-btn);
    color: var(--white-color);
    font-weight: 600;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    appearance: none;
}
.formContainer .contentTop .blocProduits .stockBloc .submitAddBasket button[class="submit"]:hover{
    background: var(--dark-blue);
}
.formContainer .contentTop .blocProduits .selectItemPro{
    display: flex;
    flex-direction: column;
}
.selectDepensePro{
    display: flex;
    flex-direction: column;
}
.selectCustomer{
    display: flex;
    flex-direction: column;
}
.dropSelectDepenseContent{
    background: var(--white-color);
    box-shadow: var(--box-shadow-popup);
    border-radius: 0 0 5px 5px;
    padding: 5px;
    flex-direction: column;
    display: none;
}
.dropSelectDepenseContent.active{
    display: flex;
}
.dropSelectCustomerContent{
    background: var(--white-color);
    box-shadow: var(--box-shadow-popup);
    border-radius: 0 0 5px 5px;
    padding: 5px;
    flex-direction: column;
    display: none;
}
.dropSelectCustomerContent.active{
    display: flex;
}
.dropSelectContent{
    background: var(--white-color);
    box-shadow: var(--box-shadow-popup);
    border-radius: 0 0 5px 5px;
    padding: 5px;
    flex-direction: column;
    display: none;
}
.dropSelectPvdContent{
    background: var(--white-color);
    box-shadow: var(--box-shadow-popup);
    border-radius: 0 0 5px 5px;
    padding: 5px;
    flex-direction: column;
    display: none;
}
.dropSelectPvdContent.active{
    display: flex;
}
.dropSelectContent.active{
    display: flex;
}
.selectElements{
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow: auto;
}
.selectElements li{
    display: flex;
    flex-direction: row;
    gap: 3px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
}
.selectElements li.hide{
    display: none;
}
.selectElements li.active{
    background: var(--background-feat-btn);
    color: var(--white-color);
}
.selectElements li.active .detailItem .itemName{
    color: var(--white-color);
}
.selectElements li.active:hover{
    background: var(--background-feat-btn);
}
.selectElements li:hover{
    background: var(--dark-light-background-hover);
}
.selectElements li .detailItem{
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 5px;
}
.selectElements li .detailItem .itemName{
    font-weight: 600;
    font-size: 12px;
    color: var(--text-title-color);
}
.selectElements li .detailItem .itemStock{
    font-size: 10px;
    color: var(--stockColor);
    font-weight: 500;
}
.selectElements li img{
    width: 90px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}
.formContainer .contentTop .blocProduits input{
    border: 1px solid var(--text-text-color);
    border-radius: 5px;
}
.formContainer .contentTop .blocProduits input.classic{
    width: 100%;
    padding: 5px;
}
.formContainer .contentTop .blocProduits .titleBlocOp{
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    color: var(--text-title-color);
}

.formContainer .contentTop .blocInfoProduit{
    margin: 15px;
    padding: 10px;
    border-radius: 5px;
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    height: auto;
    box-shadow: var(--box-shadow-card);
}
.stockBloc{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.stockBloc .qtePdt{
    display: flex;
    flex-direction: column;
    width: 50%;
}
.stockBloc .qtePdt .addRemoveTool{
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}
.stockBloc .qtePdt .addRemoveTool ion-icon{
    cursor: pointer;
    font-size: 16px;
    color: var(--text-title-color);
}
.stockBloc .qtePdt .addRemoveTool ion-icon:hover{
    color: var(--brown-text);
}
.stockBloc .qtePdt .addRemoveTool input{
    width: 50px;
    text-align: center;
    padding: 2px;
    font-weight: bold;
    font-size: 11px;
}
.stockBloc .qtePdt .addRemoveTool input{
    outline: none;
}
.formContainer .contentTop .blocInfoProduit .containerProgressbar{
    width: 100%;
    background: var(--light-light-gray);
    display: flex;
    align-items: center;
    margin: 5px;
}
.formContainer .contentTop .blocInfoProduit .progressBar{
    width: 0;
    background: var(--green-loading);
    border-radius: 5px;
    height: 3px;
}
.formContainer .contentTop .blocInfoProduit textarea{
    width: 100%;
    height: 90px;
    padding: 5px;
    font-family: var(--font-input);
    font-size: 11px;
}
.formContainer .contentTop .blocInfoProduit .dragImages{
    background: var(--light-light-gray);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.formContainer .contentTop .blocInfoProduit .dragImages input[type="file"]{
    width: 50%;
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 10px;
    border-radius: 5px;
    border: 2px dashed var(--dark-brown);
    color: var(--text-title-color);
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen ion-icon{
    color: var(--dark-brown);
    font-size: 32px;
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen input[type="file"]{
    display: none;
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen label{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    background: var(--brown-text);
    border: none;
    border-radius: 5px;
    padding: 10px 50px;
    color: var(--white-color);
    font-weight: 600;
    font-size: 11px;
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen label:hover{
    background: var(--background-hover-btn);
}
.formContainer .contentTop .blocInfoProduit .dragImages .screen label ion-icon{
    font-size: 14px;
    color: var(--white-color);
}
.formContainer .contentTop .blocInfoProduit .dragImages .vignettes{
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    padding: 10px;
    overflow-x: hidden;
    flex-wrap: wrap;
}
.formContainer .contentTop .blocInfoProduit .dragImages .vignettes vignette{
    width: 22%;
}
.formContainer .contentTop .blocInfoProduit .dragImages .vignettes vignette img{
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 2px solid var(--white-color);
    box-shadow: var(--box-shadow-card);
}
.formContainer .contentTop .blocInfoProduit .dragImages .vignettes div{
    width: 22%;
    height: 100px;
    background: var(--light-light-gray);
    border: 1px solid var(--white-transparent);
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: var(--box-shadow-card);
}
.formContainer .contentTop .blocInfoProduit .dragImages .vignettes div ion-icon{
    color: var(--white-color);
    font-size: 24px;
}
.formContainer form .contentTop .blocInfoProduit .dragImages .screen ion-icon{
    font-size: 48px;
    color: var(--dark-brown);
}
.formContainer .contentTop .blocInfoProduit input{
    padding: 5px;
    appearance: none;
    font-size: 11px;
    border-radius: 5px;
    border: 1px solid var(--dark-light-background);
    font-family: var(--font-input);
    width: 100%;
}
.formContainer .contentTop .blocInfoProduit select{
    padding: 5px;
    appearance: none;
    font-size: 11px;
    border-radius: 5px;
    border: 1px solid var(--dark-light-background);
    font-family: var(--font-input);
    width: 100%;
    cursor: pointer;
}
.formContainer .contentTop .blocInfoProduit input:hover{
    border: 1px solid var(--dark-light-background-hover);
}
.formContainer .contentTop .blocInfoProduit .title{
    margin-top: 15px;
    font-size: 13px;
    font-weight: 600;
}
.formContainer .contentTop .blocInfoProduit .titleFields{
    margin-top: 20px;
    font-size: 11px;
    padding: 5px;
    font-weight: bold;
    color: var(--text-title-color);
}
.formContainer .blocSubmitForm{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dark-light-background);
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
}
.formContainer .blocSubmitForm .totalOrderCash{
    font-weight: 600;
    display: flex;
    border-radius: 10px;
    padding: 10px;
    width: 200px;
    text-align: center;
    background: var(--green-message-success);
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--white-color);
}
.formContainer .blocSubmitForm .submit{
    padding: 10px;
    font-size: 11px;
    color: var(--white-color);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: var(--brown-text);
    font-weight: 600;
}
.formContainer .blocSubmitForm .cancelBtn{
    background: var(--white-color);
    padding: 10px;
    font-weight: 600;
    font-size: 11px;
    width: fit-content;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
.formContainer .blocSubmitForm .cancelBtn:hover{
    background: var(--white-transparent);
}

.optionInterface{
    box-shadow: var(--box-shadow-popup);
    width: 20%;
    height: 100px;
    background: var(--brown-text);
    display: flex;
    position: fixed;
    top: 70px;
    right: 1%;
    z-index: 5;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
}
.optionInterface.active{
    visibility: visible;
    opacity: 1;
}
.foulardPanel{
    background: rgba(0,0,0,0.85);
    z-index: 9;
    width: 100%;
    height: 100vh;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s ease-in;
}
.foulardPanel.active{
    visibility: visible;
    opacity: 1;
}

.panelLeft{
    position: fixed;
    height: 100vh;
    height: 100dvh;
    width: 40%;
    left: -40%;
    z-index: 12;
    display: grid;
    grid-template-columns: auto 30px;
    gap: 10px;
    transition: left .5s ease-in;
}
.panelLeft.active{
    left: 0;
}
.panelLeft ion-icon{
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
}
.panelLeft .panel{
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}

.container{
    display: grid;
    grid-template-columns: 20% 80%;
    transition: grid-template-columns 0.5s ease-in-out;
    width: 100%;
    height: 100vh;
}
.container.loginPart{
    width: 100%;
    grid-template-columns: 1fr;
}
.container.active{
    grid-template-columns: 10% auto;
}
.container .leftNav{
    display: grid;
    grid-template-rows: 100px auto 50px;
    width: 100%;
    max-width: fit-content;
    padding: 10px 30px;
    height: 100vh;
    gap: 1rem;
    transition: width .5s ease-out;
}
.container .leftNav.slided{
    width: 0;
    overflow: hidden;
    transition: width 0.5s ease-out;
}
.container .leftNav.active{
    width: calc(max-content, size);
}
.container .leftNav .logoNavActive{
    display: none;
}
.container .leftNav .logoNav{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,0,0,0.1);
}
.container .leftNav .listNav{
    padding-top: 15px;
    display: flex;
    flex-direction: column;
}
.container .leftNav.active .logoNavActive{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,0,0,0.1);
}
.container .leftNav.active .logoNav{
    display: none;
}
.container .leftNav.active a span{
    display: none;
}
.container .leftNav .listNav ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.container .leftNav .listNav ul li{
    display: block;
    margin: 5px;
}
.container .leftNav .listNav ul li.hidden{
    display: none;
}
.container .leftNav .listNav ul li a{
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 11px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
}
.container .leftNav .listNav ul li a:hover{
    background: rgba(255,255,255,0.8);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
}
.container .leftNav .listNav ul li a.selected{
    background: rgba(255,255,255,0.8);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
    color: #810006;
}
.container .leftNav .listNav ul li a.selected ion-icon{
    background: var(--bg-btn-selected);
    color: #fff;
}
.container .leftNav .listNav ul li a ion-icon{
    border-radius: 5px;
    background: var(--bg-icon-unselected);
    padding: 10px;
}
.container .leftNav .footNav{
    display: flex;
    padding: 10px;
    justify-content: center;
}
.container .leftNav .footNav a{
    align-items: center;
    justify-content: center;
    height: fit-content;
    display: flex;
    flex-direction: row;
    width: 100%;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    gap: 10px;
    padding: 10px;
    background: var(--background-feat-btn);
}
.container .leftNav .footNav a:hover{
    background: var(--background-hover-btn);
}
.container .leftNav .footNav a ion-icon{
    font-size: 14px;
}

.container .mainContent{
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all .5s ease-out;
    gap: 20px;
}
.resultCategory{
    width: 100%;
    background: var(--cat-result-bg);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.resultCategory .titleCat{
    width: 100%;
    color: var(--white-color);
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 15px;
    font-size: 13px;
    background-color: var(--titles-result-liveSearch);
}
.resultCategory .resultFetch{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-result-searchLive);
    gap: 10px;
    padding: 5px;
    border-radius: 10px;
}
.resultCategory .resultFetch.highlighted{
    background: var(--bg-result-searchLive-hover);
}
.resultCategory .resultFetch:hover{
    background: var(--bg-result-searchLive-hover);
}
.resultCategory .resultFetch img{
    border-radius: 10px;
    width: 100px;
    height: 80px;
    object-fit: cover;
}
.resultCategory .resultFetch .detailsResult{
    width: calc(100% - 105px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    gap: 2px;
}
.resultCategory .resultFetch .detailsResult .resultNameDetails{
    display: flex;
    flex-direction: column;
    width: auto;
}
.resultCategory .resultFetch .detailsResult .refResult{
    font-size: 9px;
    color: var(--text-text-color);
}
.resultCategory .resultFetch .detailsResult .smallIndice{
    font-size: 9px;
    display: flex;
    justify-content: flex-end;
    font-weight: 550;
    color: var(--text-title-color);
}
.resultCategory .resultFetch .detailsResult .titleResult{
    padding: 5px;
    font-weight: 600;
    color: var(--titles-result-liveSearch);;
    font-size: 11px;
}

.container .mainContent .blocSearch{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: right;
}
.container .mainContent .blocSearch .resultSearch{
    max-height: 400px;
    border-radius: 10px;
    background: #fff;
    width: 300px;
    top: 55px;
    position: absolute;
    margin-top: 0px;
    box-shadow: var(--box-shadow-popup);
    transition: all .2s ease-in-out;
    visibility: hidden;
}
.container .mainContent .blocSearch .resultSearch.active{
    visibility: visible;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    z-index: 11;
}
.container .mainContent .blocSearch .searchBloc{
    width: fit-content;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
    gap: 5px;
}
.container .mainContent .searchBloc ion-icon{
    cursor: pointer;
    color: var(--dark-brown);
    font-size: 16px;
}
.container .mainContent .searchBloc .searchBtn{
    padding: 7px;
    border-radius: 7px;
    background: #640a00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .mainContent .searchBloc input{
    appearance: none;
    outline: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 5px;
}
.container .mainContent .header{
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 40px;
    align-items: center;
    position: relative;
}
.container .mainContent .header .userSetbloc{
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 5px;
    right: 0;
    margin: 5px;
}
.container .mainContent .header .userSetbloc .contentSet{
    width: fit-content;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 15px;
    border-radius: 10px;
    cursor: pointer;
}
.container .mainContent .header .userSetbloc .mainSetcontainer{
    height: calc(100dvh - 90px);
    width: 450px;
    visibility: hidden;
    opacity: 0;
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow-card);
    position: absolute;
    right: 0;
    top: 75px;
    transition: all .5s ease;
    display: grid;
    grid-template-rows: 50px auto 50px;
    overflow: hidden;
}
.container .mainContent .header .userSetbloc .mainSetcontainer.active{
    visibility: visible;
    opacity: 1;
    transition: all .5s ease;
    z-index: 11;
}

.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .rowDepense{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 3px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 10px;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .rowDepense:hover{
    background: var(--light-light-gray2);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .rowDepense .intituleDepense{
    font-weight: 550;
    color: var(--text-title-color);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .rowDepense .intituleDepense span{
    font-size: 9px;
    font-weight: 400;
    color: var(--text-text-color);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .rowDepense .amountDepenseRow{
    font-weight: 700;
    font-size: 12px;
    padding: 7px;
    color: var(--white-color);
    background: var(--bg-btn-selected);
    border-radius: 5px;
    margin: 5px;

}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet{
    width: 300%;
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: row;
    transition: left .5s ease;
    left: 0;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper  .notifHeader{
    width: 100%;
    height: auto;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .depenses{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .depenses .amountDepense{
    display: flex;
    margin: 10px;
    border-radius: 10px;
    border: 3px solid var(--brown-text);
    padding: 30px;
    align-items: center;
    background: var(--light-light-gray2);
    font-weight: 700;
    font-size: 22px;
    color: var(--brown-text);
    justify-content: center;
    box-shadow: var(--box-shadow-card);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .mainSetContentWrapper .containerOptionsSet .equipe{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 15px;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions{
    display: flex;
    flex-direction: row;
    height: auto;
    background: var(--light-light-gray2);
    width: 100%;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label{
    display: flex;
    cursor: pointer;
    color: var(--black-color);
    font-size: 12px;
    font-weight: 550;
    align-items: center;
    justify-content: center;
    width: 45%;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label.notif{
    color: var(--black-color);
    font-size: 12px;
    cursor: pointer;
    width: 10%;
    height: 100%;    
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label.active{
    background: var(--bg-btn-selected);
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label.active:hover{
    background: var(--bg-btn-selected);
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label:hover{
    background: var(--light-light-gray2);
    color: var(--black-color);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .headerOptions label:first-child{
    border-right: 1px solid var(--separateur-black-light);
}
.container .mainContent .header .userSetbloc .mainSetcontainer .footOptions{
    display: flex;
    background: var(--light-light-gray);
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: row;
    cursor: pointer;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .footOptions ion-icon{
    color: var(--dark-brown);
    font-size: 24px;
    font-weight: 800;
}
.container .mainContent .header .userSetbloc .mainSetcontainer .footOptions:hover{
    background: var(--light-light-gray2);
}

.container .mainContent .header .userSetbloc .contentSet.active{
    background: var(--brown-text);
    z-index:11;
}
.container .mainContent .header .userSetbloc .contentSet.active ion-icon{
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc .contentSet:hover{
    background: #fff;
}
.container .mainContent .header .userSetbloc .contentSet.active:hover{
    background: var(--brown-text);
}
.container .mainContent .header .userSetbloc .contentSet.active:hover img{
    border: 5px solid var(--white-color);
}
.container .mainContent .header .userSetbloc .contentSet img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
    border: 5px solid var(--white-color);
}
.container .mainContent .header .userSetbloc .contentSet:hover img{
    border: 5px solid var(--dark-brown);
}
.container .mainContent .header .userSetbloc .userInfos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
}
.container .mainContent .header .userSetbloc .contentSet.active .userInfos{
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc .contentSet .userInfos .nameUser{
    font-weight: 600;
    font-size: 10px;
    padding: 2px;
    text-align: left;
}
.container .mainContent .header .userSetbloc .contentSet .userInfos .roleUser{
    font-size: 9px;
    text-align: left;
    padding: 2px;
}
.container .mainContent .header .burgerMain1{
    margin: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.container .mainContent .header .burgerMain1 .titlePath{
    font-weight: 600;
    color: rgba(0,0,0,0.7);
}
.container .mainContent .header .burgerMain1 ion-icon{
    color: #640a00;
    font-size: 24px;
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
    padding: 10px;
}
.container .mainContent .header .burgerMain1 ion-icon:hover{
    background: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);

}
.container .mainContent .header .burgerMain1.active ion-icon{
    background: #640a00;
    color: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
}
.container .mainContent .header .burgerMain2{
    margin: 10px;
    display: none;
    flex-direction: row;
    align-items: center;
}
.container .mainContent .header .burgerMain2 .titlePath{
    font-weight: 600;
    color: rgba(0,0,0,0.7);
}
.container .mainContent .header .burgerMain2 ion-icon{
    color: #640a00;
    font-size: 24px;
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
    padding: 10px;
}
.container .mainContent .header .burgerMain2 ion-icon:hover{
    background: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);

}
.container .mainContent .header .burgerMain2.active ion-icon{
    background: #640a00;
    color: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
}

.container .mainContent .cardDashboard{
    width: 100%;
    margin: 35px 0;
    height: 150px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0 25px;
}
.container .mainContent .cardDashboard .cardBloc{
    width: 30%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: space-between;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocBottom{
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #32CD32;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocBottom.red{
    color: #FF0000 !important;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocTop{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocTop .detailCard{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocTop .detailCard .titleCard{
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
}
.container .mainContent .cardDashboard .cardBloc .cardBlocTop .detailCard .numberCard{
    font-size: 16px;
    font-weight: 600;
}
.container .mainContent .cardDashboard .cardBloc .cardBlocTop ion-icon{
    background: var(--background-btn-icon);
    color: #fff;
    font-size: 18px;
    color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-top: -20px
}

.container .mainContent .overviewBloc{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
    height: auto;
    margin: 0 20px;
}
.container .mainContent .overviewBloc .salesOverviewbloc{
    background: var(--background-gradient-brown);
    height: 100%;
    width: 60%;
    border-radius: 10px;
    box-shadow: var(--box-shadow-card);
}
.container .mainContent .overviewBloc .orderOverviewBloc{
    background: #fff;
    border-radius: 10px;
    width: 30%;
    box-shadow: var(--box-shadow-card);
    font-family: "Poppins", sans-serif;
    height: 100%;
}


rect{
    fill: rgba(255,255,255,0.1);
    padding: 5px;
    border-radius: 5px;
}

.mainContent .lastAddedPdtbloc{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 20px;
}
.mainContent .lastAddedPdtbloc .optionManagePdt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mainContent .lastAddedPdtbloc .optionManagePdt .contentTop{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mainContent .lastAddedPdtbloc .optionManagePdt div ion-icon{
    background: var(--bg-icon-unselected);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-title-color);
    padding: 10px;
    border: 3px solid transparent;
}
.mainContent .lastAddedPdtbloc .optionManagePdt div ion-icon.selected{
    color: var(--white-color);
    background: var(--bg-btn-selected);
}
.mainContent .lastAddedPdtbloc .optionManagePdt .contentTop ion-icon:first-child{
    color: var(--brown-text);
}
.mainContent .lastAddedPdtbloc .optionManagePdt .contentTop ion-icon.selected:first-child{
    color: var(--white-color);
}
.mainContent .lastAddedPdtbloc .optionManagePdt div ion-icon:hover{
    border: 3px solid var(--white-color);
}
.mainContent .lastAddedPdtbloc .vignetteContainer{
    width: 30%;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    position: relative;
    box-shadow: var(--box-shadow-card);
    overflow: hidden;
}
.mainContent .lastAddedPdtbloc .vignetteContainer .sliderVignettePdt{
    display: flex;
    flex-direction: row;
    position: absolute;
    width: calc(var(--width-slider-pdt) * 100%);
    left: calc(var(--left-slider-vignette) * -100%);
}
.mainContent .lastAddedPdtbloc .vignetteContainer .sliderVignettePdt img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    cursor: pointer;
}
.mainContent .lastAddedPdtbloc .detailsProduct{
    border-radius: 10px;
    background: var(--white-color);
    width: 55%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow-card);
    gap: 8px;
    padding: 10px;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .vignettesPdt{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .vignettesPdt img{
    width: 25%;
    height: 50px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .vignettesPdt img.active{
    border: 3px solid var(--green-loading);
    box-shadow: var(--box-shadow-vignette);
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .vignettesPdt img.active:hover{
    border: 3px solid var(--green-loading);
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .vignettesPdt img:hover{
    border: 2px solid var(--white-color);
    box-shadow: var(--box-shadow-vignette);
}
.toggletOnOff{
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}
.toggletOnOff .toggleBtnSupport{
    background: var(--background-toggleBtn-success);
    width: 60px;
    height: 27px;
    float: right;
    margin-right: 5px;
    margin-left: auto;
    border-radius: 12.5px;
    padding: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}
.toggletOnOff .toggleBtnSupport.off{
    background: var(--light-light-gray);
    border: 1px solid var(--gray-uni);
}
.toggletOnOff .toggleBtnSupport.off .togglerRound{
    right: calc(100% - 25px);
    transition: all .25s ease-in-out;
}
.toggletOnOff .toggleBtnSupport .togglerRound{
    width: 25px;
    height: 25px;
    border: 2px solid var(--white-color);
    background: var(--silver-toggler);
    border-radius: 50%;
    position: absolute;
    right: 0;
    transition: all .25s ease-in-out;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt{
    width: 100%;
    display: flex;
    gap: 2px;
    background: var(--light-light-gray2);
    height: 80px;
    padding: 1px 0;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt div{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1px 25px;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt div .overviewPdtBottom{
    font-size: 9px;
    color: var(--green-message-success);
    display: flex;
    align-items: center;
    justify-content: end;
    font-weight: 500;
    padding: 5px;
    justify-content: right;
    width: 100%;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt div .overviewPdtTop{
    display: flex;
    flex-direction: column;
    padding: 3px 10px;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt div .overviewPdtTop .indiceOverview{
    font-size: 10px;
    font-weight: bold;
    color: var(--text-title-color);
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt div .overviewPdtTop .number{
    font-weight: 600;
    font-size: 18px;
    color: var(--brown-text);
    padding-left: 10px;
}

.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt .saleThisWeekPdt{
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 50%;
}
.mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt .sellAllTime{
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 50%;
}
.mainContent .lastAddedPdtbloc .detailsProduct p{
    padding: 10px;
    color: var(--text-title-color);
    font-size: 11px;
    line-height: 1.8em;
}
.mainContent .lastAddedPdtbloc .detailsProduct .label{
    color: var(--text-title-color);
    padding: 10px 25px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 3px solid var(--black-border-alpha);
    border-radius: 10px;
}

.mainContent .creationBloc{
    padding: 10px;
}
.mainContent .creationBloc button{
    float: right;
    color: var(--white-color);
    border-radius: 5px;
    padding: 10px 15px;
    font-weight: 550;
    font-size: 11px;
    background: var(--bg-gradient-green-btn);
    appearance: none;
    cursor: pointer;
    font-family: var(--font-input);
    border: none;
    margin-right: 15px;
}
.mainContent .creationBloc button:hover{
    background: var(--bg-gradient-green-btn-hover);
}
.mainContent .creationBloc a{
    text-decoration: none;
    padding: 10px 15px;
    float: right;
    display: block;
    margin-right: 10%;
    margin-left: auto;
    border-radius: 5px;
    font-weight: 550;
    color: #fff;
    background: var(--blue-gradient-btn);
    font-size: 11px;
}
.mainContent .creationBloc a:hover{
    background: var(--dark-blue);
}

.createClient a{
    margin-top: 10px;
    text-decoration: none;
    padding: 10px 15px;
    float: right;
    display: block;
    margin-right: 10%;
    margin-left: auto;
    border-radius: 5px;
    font-weight: 550;
    color: #fff;
    background: var(--blue-gradient-btn);
    font-size: 11px;
}

.mainContent .cardFeaturedBloc{
    width: 100%;
    margin: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.mainContent .cardFeaturedBloc .catPdtChart{
    background: var(--background-gradient-brown);
    width: 30%;
    height: 400px;
    border-radius: 10px;
    box-shadow: var(--box-shadow-card);
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
}
.mainContent .cardFeaturedBloc .catPdtChart .title{
    color: var(--white-color);
    font-weight: 600;
    padding: 15px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.mainContent .cardFeaturedBloc .catPdtChart .navReport{
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.mainContent .cardFeaturedBloc .catPdtChart .navReport ion-icon{
    color: var(--white-color);
    font-size: 16px;
    cursor: pointer;
}
.mainContent .cardFeaturedBloc .catPdtChart .reportContainer{
    overflow: hidden;
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}
.mainContent .cardFeaturedBloc .catPdtChart .reportContainer .reportFetch{
    width: 300%;
    position: absolute;
    display: flex;
    flex-direction: row;
    left: 0;
    height: 100%;
    gap: 5px;
}
.mainContent .cardFeaturedBloc .catPdtChart .reportContainer .reportFetch .report{
    width: 100%;
    border-radius: 10px;
    height: 100%;
}

.mainContent .cardFeaturedBloc .featuredPdt{
    height: auto;
    background: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
    width: 60%;
    gap: 20px;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent{
    padding: 10px;
    border-top: 1px solid rgba(0,0,0,0.2);
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .headList{
    background: rgba(0,0,0,0.15);
    font-weight: 600;
    font-size: 11px;
    display: grid;
    grid-template-columns: 60% 20% 20%;
    align-items: center;
    height: 60px;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    gap: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail{
    display: grid;
    grid-template-columns: 60% 20% 20%;
    align-items: center;
    min-height: 60px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    padding: 10px;
    gap: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail .online{
    font-weight: bold;
    background: #32CD32;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail .offline{
    padding: 5px;
    color: #fff;
    font-weight: bold;
    background: #CE2029;
    border-radius: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail:hover{
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail div{
    display: flex;
    flex-direction: row;
    gap: 10px;;
    align-items: center;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail div span{
    font-size: 11px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail div img{
    width: 50px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .bannerCardFeatPdt{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.mainContent .cardFeaturedBloc .featuredPdt .bannerCardFeatPdt .titleCard{
    font-size: 18px;
    padding: 5px 15px;
    color: rgba(0,0,0,0.7);
    font-weight: 600;
}
.mainContent .cardFeaturedBloc .featuredPdt .bannerCardFeatPdt a{
    font-size: 10px;
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    padding: 8px;
    border-radius: 5px;
    background: linear-gradient(360deg, #FF0800 0%, #ff2019 40%);
}
.mainContent .cardFeaturedBloc .featuredPdt .bannerCardFeatPdt a:hover{
    background: linear-gradient(360deg, #a31017 0%, #810006 40%);
    color: #fff;
}

.mainContent .cardFeaturedBloc .calendar{
    width: 30%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
}
.mainContent .cardFeaturedBloc .calendar .headerCalendar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.mainContent .cardFeaturedBloc .calendar .headerCalendar button{
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    width: 25px;
    height: 25px;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.mainContent .cardFeaturedBloc .calendar .days{
    display: grid;
    grid-template-columns: repeat(7,1fr);
}
.mainContent .cardFeaturedBloc .calendar .days .day{
    text-align: center;
    padding: 5px;
    color: rgba(0,0,0,0.7);
}

.chartPdtSelectedContainer{
    display: flex;
    overflow: hidden;
    width: 90%;
    margin: 20px;
    max-height: 0;
    position: relative;
    flex-direction: column;
    transition: max-height 1s ease;
}
.chartPdtSelectedContainer.active{
    min-height: 400px;
    max-height: 600px;
    transition: max-height 1s ease;
}
.chartPdtSelectedContainer .optionsPdtSelected{
    display: flex;
    height: 300px;
    flex-direction: row;
    position: absolute;
    width: 300%;
    left: 0;
}
.chartPdtSelectedContainer .optionsPdtSelected .chartPdtSelected{
    width: 100%;
    border-radius: 10px;
    min-height: 400px;
}
.chartPdtSelectedContainer .optionsPdtSelected .pdtSelectedEditor{
    width: 100%;
    border-radius: 10px;
    min-height: 400px;
}
.chartPdtSelectedContainer .optionsPdtSelected .deletePdtSelected{
    width: 100%;
    border-radius: 10px;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-color-categories) url(--bgDeletepdt);
    font-size: 12px;
    color: var(--white-color);
    font-weight: bold;
    background-size: cover;
    background-repeat: no-repeat;
}
.chartPdtSelectedContainer .optionsPdtSelected .deletePdtSelected span{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.chartPdtSelectedContainer .optionsPdtSelected .deletePdtSelected form{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.chartPdtSelectedContainer .optionsPdtSelected .deletePdtSelected img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    background: var(--white-color);
    padding: 5px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-vignette);
}
.chartPdtSelectedContainer .optionsPdtSelected .deletePdtSelected button{
    background: var(--bg-btn-selected);
    cursor: pointer;
    padding: 20px;
    border-radius: 5px;
    color: var(--white-color);
    font-weight: 600;
    font-size: 12px;
}

.basketBloc{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.basketBloc .title{
    padding: 5px;
    font-size: 12px;
    color: var(--text-title-color);
    font-weight: 550;
    border-bottom: 1px solid var(--separateur-black-light);
}
.basketBloc .basketList{
    min-height: 100px;
    border-radius: 5px;
    background: var(--light-light-gray2);
    max-height: 214px;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rowBasket{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
.rowBasket.newAdded{
    background: #F9629F;
    animation: blinkHard .5s step-end infinite;
}
.rowBasket:hover{
    background: var(--white-transparent);
    padding-left: 10px;
}
.rowBasket .operationPdtchiffre{
    width: 40%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
}
.rowBasket .operationPdtchiffre ion-icon{
    cursor: pointer;
    color: var(--white-color);
    font-size: 18px;
    background: var(--silver-toggler);
    border-radius: 50%;
    margin: 5px;
    padding: 5px;
    color: var(--brown-text);
}
.rowBasket .operationPdtchiffre .qteBasket{
    width: 48px;
    height: 48px;
    border-radius: 10px;
    color: var(--white-color);
    font-size: 12px;
    padding: 5px;
    background: var(--background-btn-icon);
    display: flex;
    font-weight: 550;
    justify-content: center;
    align-items: center;
}
.rowBasket .blocPdtList{
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}
.rowBasket .blocPdtList img{
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 3px solid var(--brown-text);
    padding: 3px;
    border-radius: 50%;
}
.rowBasket .blocPdtList .nomPdt{
    font-size: 12px;
    font-weight: 550;
    color: var(--text-title-color);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-content: center;
}
.rowBasket .blocPdtList .nomPdt span{
    font-size: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding: 5px;
    color: var(--text-text-color);
}
.vignetteCatbloc{
    display: flex;
    flex-direction: column;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.vignetteCatbloc label{
    font-weight: 550;
    color: var(--white-color);
    border-radius: 5px;
    padding: 10px;
    background: var(--dark-brown);
    width: fit-content;
    cursor: pointer;
    font-size: 12px;
}
.vignetteCatbloc label:hover{
    background: var(--brown-text);
}
.vignetteUnik{
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
.vignetteUnik img{
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background: var(--light-light-gray2);
    box-shadow: var(--box-shadow-vignette);
    border: 5px dashed var(--light-light-gray);
    padding: 3px;
    object-fit: cover;
}
.vignetteUnik ion-icon{
    width: 200px;
    height: 200px;
    font-weight: 550;
}

.catListing{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 20px;
}
.catListing .blocCatquick{
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}
.catListing .blocCatquick .catDiv{
    width: 30%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: auto;
    border-radius: 20px;
    overflow: hidden;
}
.catListing .blocCatquick .catDiv .containerCatContainer{
    width: 100%;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-color-categories);
}
.catListing .blocCatquick .catDiv .containerCatContainer h1{
    font-weight: 600;
    font-size: 24px;
    color: var(--white-color);
}
.catListing .blocCatquick .catDiv .containerCatContainer .rowDetailsCat{
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    color: var(--white-color);
    align-items: center;
    font-size: 12px;
    font-weight: 550;
}
.catListing .blocCatquick .catDiv .containerCatContainer .rowDetailsCat.cashFlow{
    padding: 10px;
    color: var(--green-message-success);
    background: var(--white-transparent);
    color: var(--green-message-success);
}
.catListing .blocCatquick .catDiv .containerCatContainer .rowDetailsCat span{
    font-weight: 600;
    line-height: 1.8em;
    font-size: 22px;
}

.containerLogin{
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        var(--white-color) 0%,
        var(--white-color) 50%,
        var(--brown-text) 50%,
        var(--brown-text) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.containerLogin .loginBloc{
    box-shadow: var(--box-shadow-card);
    border-radius: 20px;
    width: 30%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    color: var(--white-color);
    font-weight: 600;
    font-size: 16px;
}
.containerLogin .loginBloc .contentTop{
    width: 100%;
    height: 50%;
    background: var(--brown-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
    gap: 20px;
}
.containerLogin .loginBloc .contentTop .indices{
    font-size: 10px;
}
.containerLogin .loginBloc .contentTop img{
    width: 30%;
    border-radius: 50%;;
    height: auto;
    background: var(--white-color);
    border: 5px solid var(--brown-text);
    margin-top: -25%;
}
.containerLogin .loginBloc .loginFields{
    width: 100%;
    background: var(--white-color);
    height: 50%;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 20px 20px;
    padding: 10px 25px;
    align-items: center;
    gap: 5px;
}
.containerLogin .loginBloc .loginFields input[name='loginUser']{
    border-radius: 5px;
    border: 2px solid var(--black-border-alpha);
}
.containerLogin .loginBloc .loginFields .passLoginBloc{
    padding: 1px 5px;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid var(--black-border-alpha);
}
.containerLogin .loginBloc .loginFields .passLoginBloc input{
    color: var(--black-color);
    font-weight: 550;
    width: calc(100% - 20px);
    background: none;
}
.containerLogin .loginBloc .loginFields .passLoginBloc ion-icon{
    width: 20px;
    height: 20px;
    color: var(--text-title-color);
    cursor: pointer;
}
.containerLogin .loginBloc .loginFields button{
    cursor: pointer;
    width: fit-content;
    padding: 10px 20px;
    font-weight: 550;
    font-size: 12px;
    background: var(--dark-brown);
    border: none;
    border-radius: 5px;
    color: var(--white-color);
}
.containerLogin .loginBloc .loginFields button:hover{
    background: var(--brown-text);
}
.containerLogin .loginBloc .loginFields .title{
    font-size: 12px;
    font-weight: 550px;
    color: var(--text-title-color);
    width: 100%;
    padding: 5px;
    text-align: left;
}
.containerLogin .loginBloc .loginFields input{
    outline: none;
    background: none;
    font-family: "Poppins", sans-serif;
    appearance: none;
    border: none;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    color: var(--text-text-color);
}

.allDeleveriesCurrPvd{
    display: flex;
    width: 90%;
    flex-direction: column;
    gap: 20px;
    margin-left: 20px;
}
.allDeleveriesCurrPvd .blocDeleveries{
    width: 100%;
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    box-shadow: var(--box-shadow-card);
}
.allDeleveriesCurrPvd .blocDeleveries input[name='fetchDeleveryList']{
    display: none;
}
.allDeleveriesCurrPvd .blocDeleveries input[name='fetchDeleveryList']:checked + .listDeleveryPdt{
    padding: 10px 20px;
    max-height: 500px;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt{
    display: flex;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    transition: max-height 0.5s ease;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt button{
    border-radius: 5px;
    padding: 15px;
    color: var(--white-color);
    background: var(--background-gradient-brown);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    margin: 10px;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt .rowListPdtDelevery{
    border-radius: 20px;
    width: 100%;
    cursor: pointer;
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr 1fr;
    gap: 1.5rem;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt .rowListPdtDelevery .blocNameInfosPdt{
    display: flex;
    flex-direction: column;
    font-weight: 550;
    font-size: 13px;
    gap: 5px;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt .rowListPdtDelevery .blocNameInfosPdt span{
    font-size: 11px;
    color: var(--text-text-color);
    font-size: 500;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt .rowListPdtDelevery img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    background: var(--bg-body);
    padding: 3px;
}
.allDeleveriesCurrPvd .blocDeleveries .listDeleveryPdt .rowListPdtDelevery:hover{
    background:var(--dark-light-background-hover);
}
.allDeleveriesCurrPvd .blocDeleveries label{
    align-items: center;
    border-radius: 30px;
    padding: 3px;
    background: var(--gray-uni);
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}
.allDeleveriesCurrPvd .blocDeleveries label .amountDVY{
    margin-right: 20px;
    color:var(--brown-text);
    font-size: 18px;
    width: 30%;
    text-align: right;
    font-weight: 600;
    /*-webkit-text-stroke: .5px var(--black-color);*/
}
.allDeleveriesCurrPvd .blocDeleveries label .PdtNum{
    text-align: right;
    font-weight: 550;
    font-size: 13px;
    color: var(--text-text-color);
    width: 20%;
}
.allDeleveriesCurrPvd .blocDeleveries label .DVYNum{
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 20%;
    font-size: 14px;
    font-weight: 550;
    color: var(--text-title-color);
}
.allDeleveriesCurrPvd .blocDeleveries label .DVYNum span{
    font-weight: 500;
    font-size: 11px;
}
.allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY{
    width: 30%;
    display: flex;
    flex-direction: row;
    padding: 3px;
}
.allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY img{
    border: 3px solid var(--white-color);
    margin-left: -30px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .2s ease;
}
.allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY img:hover{
    transform: scale(1.05);
    z-index: 5;
    box-shadow: var(--box-shadow-vignette);
}
.allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY img:first-child{
    margin-left: 0;
}

.blocChoiceRadio{
    display: flex;
    flex-direction: row;
    border: 1px solid var(--dark-blue);
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
}
.blocChoiceRadio label{
    cursor: pointer;
    padding: 5px;
    display: flex;
    flex-direction: column;
    color: var(--titles-result-liveSearch);
    align-items: center;
    justify-content: center;
    font-weight: 550;
    font-size: 12px;
    gap: 5px;
    width: 33%;
    border-right: 1px solid var(--dark-blue);
}
.blocChoiceRadio label.active{
    background: var(--titles-result-liveSearch);
    color: var(--white-color);
}
.blocChoiceRadio label.active img{
    border: 3px solid var(--white-color);
}
.blocChoiceRadio label:last-child{
    border-right: none;
    width: 34%;
}
.blocChoiceRadio label input[type='radio']{
    display: none;
}
.blocChoiceRadio label img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--titles-result-liveSearch);
    object-fit: cover;
}

.customerPhotoProfil label{
    width: 100%;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customerPhotoProfil label img{
    width: 180px;
    height: 180px;
    border: 5px solid var(--titles-result-liveSearch);
    border-radius: 50%;
    object-fit: cover;
}

.blocOrders{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: relative;
}
.blocOrders .blocOrder{
    box-shadow: var(--box-shadow-card);
    border-radius: 40px;
    background: var(--white-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.blocOrders .blocOrder input[type="radio"]{
    display: none;
}
.blocOrders .blocOrder input[type="radio"]:checked + .contentCMD{
    max-height: 600px;
}
.blocOrders .blocOrder .blocClientBaskset{
    margin: 5px;
    width: 98%;
    display: flex;
    height: 200px;
    background: var(--light-light-gray);
    border-radius: 20px;
}
.blocOrders .blocOrder .contentCMD{
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-height: 0;
    transition: max-height 1s ease;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
}
.amountMobile{
    width: 100%;
    align-items: flex-end;
    justify-content: end;
    text-align: right;
    margin: 5px;
    border-radius: 5px;
    background: var(--light-light-gray2);
    color: var(--brown-text);
    padding: 5px 25px;
    font-weight: 650;
    display: none;
}
.blocOrders .blocOrder .contentCMD .viewOrderDetails{
    width: 95%;
    font-size: 12px;
    font-weight: 600;
    color: var(--white-color);
    padding: 15px;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-gradient-brown);
    cursor: pointer;
    border-radius: 20px;
}
.blocOrders .blocOrder .contentCMD .viewOrderDetails:hover{
    background: var(--brown-text);
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket{
    width: 98%;
    cursor: pointer;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    margin: 5px 10px;
    gap: 15px;
    align-items: center;
    padding: 5px;
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket:hover{
    background: var(--text-text-color);
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 3px solid var(--white-color);
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket .nomPdtBasket{
    width: 30%;
    font-weight: 550;
    color: var(--black-color);
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket .qtePdtBasket{
    display: flex;
    justify-content: right;
    width: 30%;
    font-weight: 550;
    color: var(--brown-text);
}
.blocOrders .blocOrder .contentCMD .rowCMDBasket .totalRowBasket{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-weight: 500;
    font-size: 18px;
    text-align: right;
    padding: 0 20px;
}
.blocOrders .blocOrder label{
    border-radius: 40px;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    background: var(--text-title-color);
}
.blocOrders .blocOrder label .vignettesCMD{
    width: 30%;
    display: flex;
    flex-direction: row;
}
.blocOrders .blocOrder label .vignettesCMD img{
    margin-left: -40px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--white-color);
    transition: transform .2s ease;
}
.blocOrders .blocOrder label .vignettesCMD img:hover{
    box-shadow: var(--box-shadow-vignette);
    z-index: 2;
}
.blocOrders .blocOrder label .vignettesCMD img:first-child{
    margin-left: 0;
}
.blocOrders .blocOrder label .infosCMD{
    width: 70%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
}
.blocOrders .blocOrder label .infosCMD .amountCMD{
    font-weight: 650;
    font-size: 24px;
    margin-right: 20px;
    color: var(--status-invoice);
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
}
.blocOrders .blocOrder label .infosCMD .amountCMD div{
    border: 3px solid var(--white-color);
}
.blocOrders .blocOrder label .infosCMD .titleCMD{
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--white-color);
    font-weight: 550;
    font-size: 18px;
}
.blocOrders .blocOrder label .infosCMD .titleCMD span{
    font-size: 12px;
    opacity: .6;
}

.blocSessionOrder{
    margin-left: 20px;
    margin-top: 20px;
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow-popup);
    width: 90%;
    border: 1px solid var(--black-border-alpha);
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto 70px;
    position: relative;
    padding: 0 30px;
}
.blocSessionOrder .footOrderSession{
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    background: var(--light-light-gray);
    padding: 10px;
    border-radius: 5px;
    margin: 5px;
}
.blocSessionOrder .footOrderSession span{
    font-size: 12px;
    font-weight: 550;
    color: var(--text-text-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.blocSessionOrder .footOrderSession span span{
    color: var(--green-loading);
}
.blocSessionOrder .footOrderSession span img{
    height: 65px;
    width: auto;
    border: 3px solid var(--white-color);
    box-shadow: var(--box-shadow-card);
    object-fit: cover;
    border-radius: 5px;
}
.blocSessionOrder .headerBlocSessionOrder{
    margin-top: -25px;
    height: fit-content;
    width: 100%;
    display: grid;
    grid-template-columns: 30% 70%;
    background: var(--black-color);
    border-radius: 10px;
    padding: 0 20px;
    align-items: center;
    color: var(--white-color);
}
.blocSessionOrder .headerBlocSessionOrder .vignettesCMD{
    display: flex;
    flex-direction: row;
}
.blocSessionOrder .headerBlocSessionOrder .vignettesCMD img{
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-left: -30px;
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--white-color);
}
.blocSessionOrder .headerBlocSessionOrder .vignettesCMD img:hover{
    z-index: 2;
    box-shadow: var(--box-shadow-vignette);
}
.blocSessionOrder .headerBlocSessionOrder .vignettesCMD img:first-child{
    margin-left: 0;
}
.blocSessionOrder .headerBlocSessionOrder .infosCMD{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
}
.blocSessionOrder .headerBlocSessionOrder .infosCMD .invoiceNumber{
    font-weight: 550;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    gap: 5px;
    width: 50%;
}
.blocSessionOrder .headerBlocSessionOrder .infosCMD .invoiceNumber span{
    font-size: 12px;
    font-weight: 500;
}
.blocSessionOrder .headerBlocSessionOrder .infosCMD .amountInvoiceSess{
    display: flex;
    font-weight: 550;
    color: var(--brown-text);
    width: 50%;
    align-items: end;
    justify-content: end;
}
.blocSessionOrder .listPdtOrderSession{
    display: flex;
    flex-direction: column;
    padding: 10px 25px;
    gap: 5px;
}
.blocSessionOrder .listPdtOrderSession .rowBasket{
    display: grid;
    grid-template-columns: 64px 2fr 1fr 50px 1fr;
    width: 100%;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    gap: 10px;
    padding: 7px;
}
.blocSessionOrder .listPdtOrderSession .rowBasket:hover{
    background: var(--light-light-gray);
}
.blocSessionOrder .listPdtOrderSession .rowBasket span:last-child{
    display: flex;
    justify-content: end;
    font-weight: 600;
}
.blocSessionOrder .listPdtOrderSession .rowBasket img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 3px solid var(--white-color);
    box-shadow: var(--box-shadow-vignette);
}
.blocSessionOrder .footerSessionOrder{
    background: var(--black-color);
    border-radius: 25px;
    overflow: hidden;
    color: var(--white-color);
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-bottom: -25px;
}
.blocSessionOrder .footerSessionOrder div{
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    padding: 15px;
    color: var(--white-color);
    width: 50%;
}
.blocSessionOrder .footerSessionOrder .deleteOrderBtn:hover{
    background: var(--red-error);
}
.blocSessionOrder .footerSessionOrder .editOrderbtn:hover{
    background: var(--blue-gradient-btn);
}

.listPaymentAccepted{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.listPaymentAccepted .methodPay{
    gap: 15px;
    display: flex;
    flex-direction: row;
    font-weight: 550;
    font-size: 14px;
    width: 100%;
    align-items: center;
    cursor: pointer;
}
.listPaymentAccepted .methodPay input[type="radio"]{
    display: none;
}
.listPaymentAccepted .methodPay input[type="radio"]:checked + label{
    background: var(--gradient-blue-options);
    color: var(--white-color);
}
.listPaymentAccepted .methodPay label:hover{
    background: var(--light-light-gray);
}
.listPaymentAccepted .methodPay.active{
    color: var(--white-color);
    background: var(--gradient-blue-options);
}
.listPaymentAccepted .methodPay img{
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}
.listPaymentAccepted .methodPay label{
    gap: 15px;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.titleBloc{
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    color: var(--text-title-color);
}
.vignetteUploadBloc{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 120px;
}
.vignetteUploadBloc .vignetteProof{
    width: 30%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}
.vignetteUploadBloc .vignetteProof label{
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
}
.vignetteUploadBloc .vignetteProof label img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.vignetteUploadBloc .vignetteProof label ion-icon{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed var(--white-color);
}
#myChartSales{
    padding: 30px;
}

.rowEquipe{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    cursor: pointer;
    gap: 5px;
    position: relative;
    padding: 3px;
    justify-content: start;
}
.rowEquipe:hover{
    background: var(--light-light-gray2);
}
.rowEquipe:hover .infosConnected img{
    background: var(--background-gradient-brown);
}
.rowEquipe .infosConnected{
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 60px auto 15px;
    align-items: center;
    border-bottom: 1px solid var(--separateur-black-light);
    gap: 10px;
}
.rowEquipe .infosConnected img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 5px;
    background: var(--white-color);
}
.rowEquipe .infosConnected .infosUserConnexion{
    font-weight: 600;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.rowEquipe .infosConnected .infosUserConnexion span{
    font-size: 10px;
    color: var(--text-title-color);
}
.greenDot{
    width: 12px;
    height: 12px;
    background: var(--green-message-success);
    border-radius: 50%;
}
.redDot{
    width: 12px;
    height: 12px;
    background: var(--red-error);
    border-radius: 50%;
}

.bannerCatSess{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: cover no-repeat;
    gap: 5px;
    width: 90%;
    margin-left: 20px;
}
.bannerCatSess .titleCat{
    font-weight: 600;
    padding: 20px;
    font-size: 24px;
    color: var(--white-color);
    width: 100%;
    background-color: var(--bg-color-categories);
}
.listPdtCat{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: 20px;
    margin-bottom: 20px;
    gap: 20px;
}
.listPdtCat .containerPdtCat{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: var(--bg-icon-unselected);
    border-radius: 10px;
    padding: 20px;
}
.listPdtCat .containerPdtCat .detailsCount{
    max-height: 0;
    transition: max-height .5s ease;
    overflow: hidden;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.listPdtCat .containerPdtCat .detailsCount .soldWeek{
    width: 33%;
    border-radius: 10px;
    background: var(--blue-gradient-btn);
    color: var(--white-color);
    font-weight: 600;
    font-size: 26px;
    padding: 20px;
    min-height: 100px;
    border: 10px solid var(--white-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-card);
    margin: 20px;
}
.listPdtCat .containerPdtCat .detailsCount .soldWeek span{
    font-size: 14px;
}
.listPdtCat .containerPdtCat input[type='checkbox']{
    display: none;
}
.listPdtCat .containerPdtCat input[type='checkbox']:checked + .detailsCount{
    max-height: 200px;
    transition: max-height .5s ease;
}
.listPdtCat .containerPdtCat .rowPdtCat{
    border-radius: 5px;
    align-items: center;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50px;
}
.listPdtCat .containerPdtCat .rowPdtCat .countPdtCat{
    font-weight: 700;
    font-size: 24px;
    color: var(--brown-text);
    display: flex;
    width: fit-content;
    padding-right: 25px;
}
.listPdtCat .containerPdtCat .rowPdtCat .infosProduit{
    align-items: center;
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.listPdtCat .containerPdtCat .rowPdtCat .infosProduit .titleProduit{
    font-weight: 650;
    font-size: 14px;
}
.listPdtCat .containerPdtCat .rowPdtCat .infosProduit img{
    background: var(--black-color);
    padding: 5px;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    z-index: 2;

}

.blocPdtEditor{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.blocPdtEditor button{
    background: var(--background-gradient-brown);
    border-radius: 5px;
    padding: 10px 15px;
    margin-right: 20px;
    margin-left: auto;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
}
.blocPdtEditor button:hover{
    background:var(--dark-brown);
}
.blocPdtEditor .infosPdt2Edit{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}
.blocPdtEditor .infosPdt2Edit select{
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
.blocPdtEditor .infosPdt2Edit .titleOp{
    padding-left: 10px;
    color: var(--text-title-color);
    font-weight: 550;
    font-size: 12px;
    width: 100%;
}
.blocPdtEditor .infosPdt2Edit input.classic{
    border-radius: 5px;
    width: 100%;
    padding: 10px;
    border: none;
    appearance: none;
}

.wrappContentClientSelected{
    margin-top: 30px;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-icon-unselected);
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    gap: 20px;
    border-radius: 20px;
    width: 90%;
    position: relative;
}
.wrappContentClientSelected .blocOrders{
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease;
}
.wrappContentClientSelected input[type=checkbox]:checked + .blocOrders{
    max-height: 100vh;
    overflow: auto;
    transition: max-height .5s ease;
}
.wrappContentClientSelected .badgeClient{
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 5px;
    background: var(--silver-toggler);
    position: absolute;
    right: -25px;
    top: -25px;
    box-shadow: var(--box-shadow-vignette);
}
.wrappContentClientSelected .contactClient{
    z-index: 2;
    display: flex;
    position: absolute;
    right: 0;
    top: -15px;
}
.wrappContentClientSelected .contactClient a{
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--white-color);
    padding: 15px 45px 15px 15px;
    background: var(--bg-gradient-green-btn);
    color: var(--white-color);
    border-radius: 25px;
    font-weight: 650;
    font-size: 15px;
    gap: 10px;
}
.wrappContentClientSelected .viewOrdersLabels{
    border-radius: 5px;
    background: var(--background-gradient-brown);
    padding: 10px;
    font-weight: 550;
    color: var(--white-color);
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.wrappContentClientSelected label:hover{
    background: var(--brown-text);
}
.wrappContentClientSelected .blocCustomerSelected{
    align-items: center;
    width: 100%;
    margin-left: 20px;
    display: grid;
    grid-template-columns: 200px auto 100px;
    gap: 10px;
}
.wrappContentClientSelected .blocCustomerSelected .logoClient{
    width: 200px;
    height: 200px;
    object-fit: cover;
    padding: 5px;
    background: var(--dark-brown);
    border-radius: 20px;
}
.wrappContentClientSelected .blocCustomerSelected .infosClientSelected{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos .infoText.cashInText{
    color: var(--green-message-success);
    font-size: 15px;
}
.wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos .titleInfo{
    width: 50%;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-title-color);
}
.wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos .infoText{
    font-weight: 750;
    color: var(--brown-text);
    width: 50%;
    font-size: 13px;
}

.listUsers{
    border: 1px solid var(--black-border-alpha);
    border-radius: 5px;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: 20px;
    background: var(--white-color);
}
.listUsers .titleListUser{
    background: var(--background-gradient-brown);
    color: var(--white-color);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
}
.listUsers .rowuser{
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}
.listUsers .rowuser:hover{
    background: var(--light-light-gray2);
}
.listUsers .rowuser .infosClientrow{
    width: calc(60% - 64px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.listUsers .rowuser .numberOrders{
    width: 40%;
    font-weight: 750;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.listUsers .rowuser .numberOrders span{
    font-size: 13px;
    color: var(--green-message-success);
}
.listUsers .rowuser .infosClientrow .etsClient{
    font-size: 16px;
    font-weight: 750;
    color: var(--dark-brown);
}
.listUsers .rowuser .infosClientrow .dateCli{
    font-size: 11px;
    font-weight: 550;
}
.listUsers .rowuser img{
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}
.listUsers .rowuser img:hover{
    box-shadow: var(--box-shadow-popup);
}

.receptDVYbloc{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.otherProviders{
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.otherProviders .rowPVD{
    border: 3px solid transparent;
    padding: 5px;
    border-radius: 15px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 75px 30% 30% 30%;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.otherProviders .rowPVD:hover{
    background: var(--dark-light-background-hover);
    border: 3px dotted var(--separateur-black-light);
}
.otherProviders .rowPVD .infosPVD{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 550;
    color: var(--text-title-color);
    gap: 5px;
}
.otherProviders .rowPVD .infosPVD span{
    font-size: 13px;
    color: var(--text-text-color);
    font-weight: 550;
}
.otherProviders .rowPVD .deleveryInfos{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    color: var(--brown-text);
}
.otherProviders .rowPVD .deleveryInfos span{
    font-size: 13px;
    color: var(--text-text-color);
    font-weight: 550;
}
.otherProviders .rowPVD .colisIn{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    color: var(--dark-brown);
}
.otherProviders .rowPVD .colisIn span{
    color: var(--text-text-color);
    font-size: 13px;
    font-weight: 550;
}
.otherProviders .rowPVD img{
    box-shadow: var(--box-shadow-vignette);
    margin-left: -15px;
    border-radius: 10px;
    width: 75px;
    height: 75px;
    object-fit: cover;
}

.selectPayType{

    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5px;

}
.selectPayType .contentChoicePay{
    cursor: pointer;
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 3px solid transparent;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 550;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--dark-blue);
}
.selectPayType .contentChoicePay input[type="radio"]{
    display: none;
}
.selectPayType .contentChoicePay:has(input[type="radio"]:checked){
    color: var(--white-color);
    background: var(--gradient-blue-options);
    border: 3px solid var(--dark-blue);
}
.selectPayType .contentChoicePay:has(input[type="radio"]:checked) label img{
    box-shadow: var(--box-shadow-vignette);
}
.selectPayType .contentChoicePay label{
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.selectPayType .contentChoicePay label:last-child img{
    border: 5px solid var(--red-error);
}
.selectPayType .contentChoicePay label img{
    border-radius: 50%;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 5px solid var(--dark-blue);
}

.grayed{
    filter: grayscale(100%);
    opacity: 0.6;
}

.blocAmountDVY2Pay{
    border-radius: 15px;
    border: 2px solid var(--text-title-color);
    display: grid;
    grid-template-columns: 75% 25%;
    overflow: hidden;
}
.blocAmountDVY2Pay input{
    border: none !important;
    background: none !important;
    width: 100%;
    padding: 15px;
    font-size: 12px;
    font-weight: 550;
    border-radius: 0 !important;
    color: var(--text-title-color);
}
.blocAmountDVY2Pay .deviseAmount{
    border-left: 2px solid var(--text-title-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    font-weight: 650;
    font-size: 13px;
    color: var(--text-title-color);
    background: var(--gray-uni);
    align-items: center;
    justify-content: center;
}

.blocUpload{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.blocUpload label{
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.blocUpload label img{
    width: 175px;
    height: 175px;
    object-fit: cover;
    border-radius: 20px;
}
.blocUpload .titleBloc{
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title-color);
    padding: 15px;
}

.blocMainContent{
    width: 90%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 0 15px 25px;
}
.blocMainContent h1{
    color: var(--white-transparent);
    font-weight: 600;
    font-size: 16px;
    padding: 20px;
    background: var(--dark-brown);
    border-bottom: 1px solid var(--separateur-black-light);
    border-radius: 30px;
    box-shadow: var(--box-shadow-popup);
}

.blocClientCMD{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}
.blocClientCMD h1{
    color: var(--white-transparent);
    padding: 15px 30px;
    background: var(--background-gradient-brown);
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    width: 100%;
    box-shadow: var(--box-shadow-popup);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blocClientCMD .rowClientCMD{
    padding: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: grid;
    grid-template-columns: 85px 1fr 1fr;
    border-radius: 20px;
    border: 3px solid transparent;
}
.blocClientCMD .rowClientCMD:hover{
    background: var(--gray-uni);
}
.blocClientCMD .rowClientCMD img{
    border-radius: 15px;
    width: 85px;
    height: 85px;
    object-fit: cover;
    margin-left: -25px;
    box-shadow: var(--box-shadow-vignette);
}
.blocClientCMD .rowClientCMD .infosClientCMD{
    color: var(--text-title-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    font-weight: bold;
}
.blocClientCMD .rowClientCMD .infosClientCMD span{
    font-size: 11px;
    font-size: 500;
}
.blocClientCMD .rowClientCMD .ordersClient{
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--brown-text);
    font-weight: 650;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.blocClientCMD .rowClientCMD .ordersClient span{
    font-size: 14px;
    color: var(--text-title-color);
}

.blocButtonSolo{
    padding: 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.blocButtonSolo .addUser{
    border-radius: 5px;
    background: var(--dark-brown);
    color: var(--white-color);
    padding: 15px;
    font-weight: 650;
    font-size: 13px;
    cursor: pointer;
}

.blocProduits .blocInpuFile{
    border-radius: 8px;
    border: 2px solid var(--brown-text);
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px;
    overflow: hidden;
}
.blocProduits .blocInpuFile .button{
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-weight: 550;
    color: var(--white-color);
    background: var(--background-gradient-brown);
    font-size: 12px;
}
.blocProduits .blocInpuFile input{
    width: 100%;
    padding: 10px;
    outline: none;
    border: none !important;
    background: none !important;
}
.blocProduits .previewPhotouser{
    padding: 15px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.blocProduits .previewPhotouser img{
    object-fit: cover;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 5px solid var(--dark-brown);
    background: transparent;
    padding: 5px;
}
.blocProduits .previewPhotouser.active{
    display: flex;
}

.catPdtbloc{
    width: 90%;
    display: flex;
    flex-direction: row;
    height: 350px;
    gap: 10px;
    margin-left: 20px;
}
.catPdtbloc .listScreen{
    width: calc(70% - 20px);
    max-height: 350px;
    overflow: hidden;
}
.catPdtbloc .listScreen .listPdtContainer{
    max-height: 350px;
    overflow-y: auto;
    width: calc(100% + 20px);
    padding-right: 20px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat{
    display: flex;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat:hover{
    background: var(--bg-icon-unselected);
    border-radius: 10px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat.active{
    background: var(--bg-gradient-green-btn);
    color: var(--white-color);
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat.active .infosPdtCat .prixPdtCat,
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat.active .infosPdtCat .nomPdtQte{
    color: var(--white-color);
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat.active .infosPdtCat .nomPdtQte span{
    color: var(--white-transparent);
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat .infosPdtCat{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 65px);
    gap: 5%;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat .infosPdtCat .prixPdtCat{
    display: flex;
    font-weight: 600;
    font-size: 15px;
    color: var(--dark-brown);
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat .infosPdtCat .nomPdtQte{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    color: var(--text-title-color);
    font-weight: 550;
    font-size: 13px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat .infosPdtCat .nomPdtQte span{
    font-weight: 500;
    color: var(--text-text-color);
    font-weight: 11px;
}
.catPdtbloc .listScreen .listPdtContainer .listCatPdt .rowListPdtCat img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}
.catPdtbloc .listCat{
    display: flex;
    flex-direction: column;
    width: 30%;
    max-height: 350px;
    overflow: hidden;
}
.catPdtbloc .listCat .listCatScreen{
    height: 350px;
    overflow: auto;
    width: calc(100% + 20px);
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}
.catPdtbloc .listCat .listCatScreen .rowCatList{
    border-radius: 10px;
    font-weight: 600;
    color: var(--text-title-color);
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    height: 80px;
}
.catPdtbloc .listCat .listCatScreen .rowCatList:hover{
    background: var(--bg-icon-unselected);
}
.catPdtbloc .listCat .listCatScreen .rowCatList.active{
    color: var(--white-color);
    background: var(--bg-btn-selected);
}
.catPdtbloc .listCat .listCatScreen .rowCatList.active span{
    color: var(--white-color);
}
.catPdtbloc .listCat .listCatScreen .rowCatList span{
    font-weight: 500;
    font-size: 11px;
}

.deleteUserEditing{
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-size: 14px;
    font-weight: 550;
    color: #fff;
    background: var(--red-error);
}

@keyframes blinkHard {
    50% {
      background-color: #e74c3c; /* Alternating color */
    }
}






@media screen and (max-width:768px){
    .formContainer{
        height: 100dvh;
        overflow: auto;
    }
    body{
        height: 100vh;
        padding-bottom: 100px;
        width: 100vw;
        position: fixed;
    }
    .panelLeft{
        width: 100%;
        left: -100%;
        z-index: 13;
    }
    .panelLeft.active{
        left: 0;
    }
    .containerLogin{
        width: 100%;
        height: 100vh;
        background: linear-gradient(
            to bottom,
            var(--white-color) 0%,
            var(--white-color) 50%,
            var(--brown-text) 50%,
            var(--brown-text) 100%
        );
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .containerLogin .loginBloc{
        box-shadow: var(--box-shadow-card);
        border-radius: 20px;
        width: 90%;
        height: 70vh;
        display: flex;
        flex-direction: column;
        color: var(--white-color);
        font-weight: 600;
        font-size: 16px;
    }
    .alertNotif{
        position: absolute;
        gap: 10px;
        height: 100px;
        top: 10px;
        right: -100%;
        z-index: 999;
        background: var(--white-color);
        width: 75%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        border-radius: 10px;
        border-bottom: 5px solid var(--brown-text);
        box-shadow: var(--box-shadow-popup);
    }
    .confirmNotif{
        width: 75%;
    }
    .foulardLoading .progressBarFull{
        width: 50%;
    }
    .container .mainContent .cardDashboard{
        width: 100%;
        padding: 0 20px;
        flex-direction: column;
        height: auto;
    }
    .container .mainContent .cardDashboard .cardBloc{
        width: 100%;
        margin: 0;
    }
    .container{
        width: 100%;
        padding: 0;
    }
    .container .mainContent{
        overflow-y: auto;
        width: 100%;
        height: 100%;
        padding-left: 0;
        padding-bottom: 100px;
    }
    .container .mainContent .overviewBloc{
        width: 100%;
        flex-direction: column;
        min-height: auto;
    }
    .container .mainContent .overviewBloc .salesOverviewbloc{
        width: 90%;
        min-height: auto;
    }
    .container .mainContent .overviewBloc .orderOverviewBloc{
        width: 93%;
        min-height: auto;
    }
    .container{
        display: block;
        width: 100%;
    }
    .container .leftNav{
        position: absolute;
        transition: left .5s ease;
        left: -100%;
        max-width: 100% !important;
        width: 80% !important;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        z-index: 11;
        background: var(--bg-body);
        box-shadow: var(--box-shadow-card);
    }
    .container .leftNav.show{
        transition: left .5s ease;
        left: 0;
    }
    .container .mainContent .header .burgerMain1{
        display: none;
    }
    .mainContent .cardFeaturedBloc{
        flex-direction: column;
        margin: 0 !important;
        padding: 10px 20px;
        width: 100%;
    }
    .mainContent .cardFeaturedBloc .catPdtChart{
        width: 100%;
        min-height: 400px;
    }
    .mainContent .cardFeaturedBloc .featuredPdt{
        padding: 0 !important;
        width: 100%;
    }
    .mainContent .cardFeaturedBloc .calendar{
        width: 100%;
    }
    .chartPdtSelectedContainer{
        width: 98%;
        padding: 10px;
        margin: 0 5px;
        height: auto;
    }
    .container{
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .container .mainContent .header{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        gap: 5px;
        align-items: center;
        justify-content: center;
        padding: 5px 20px;
    }
    .container .mainContent .header .burgerMain1{
        display: none;
    }
    .container .mainContent .header .burgerMain2{
        display: flex;
        width: 100%;
    }
    .container .mainContent .header .userSetbloc{
        width: 100%;
        float: right;
        margin-right: 5px;
        margin-left: auto;
    }
    .catListing{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0 20px;
    }
    .catListing .blocCatquick{
        flex-direction: column;
        width: 100%;
    }
    .catListing .blocCatquick .catDiv{
        width: 100%;
        height: auto;
    }

    .mainContent .lastAddedPdtbloc{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0 20px;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .mainContent .lastAddedPdtbloc .vignetteContainer{
        width: 100%;
        height: 300px;
        align-items: center;
        justify-content: center;
    }
    .mainContent .lastAddedPdtbloc .optionManagePdt{
        flex-direction: row;
        width: 100%;
    }
    .mainContent .lastAddedPdtbloc .detailsProduct{
        width: 100%;
        flex-direction: column-reverse;
    }
    .mainContent .lastAddedPdtbloc .optionManagePdt .contentTop{
        flex-direction: row;
        width: 75%;
    }

    .blocSessionOrder{
        width: 100%;
        margin: 20px 0;
        padding: 0 10px;
    }
    .blocSessionOrder .headerBlocSessionOrder{
        align-items: center;
    }
    .blocSessionOrder .headerBlocSessionOrder .vignettesCMD img{
        width: 50px;
        height: 50px;
    }
    .blocSessionOrder .headerBlocSessionOrder .infosCMD .invoiceNumber{
        font-size: 14px;
    }
    .blocSessionOrder .headerBlocSessionOrder .infosCMD .invoiceNumber span{
        font-size: 10px;
    }
    .blocSessionOrder .headerBlocSessionOrder .infosCMD .amountInvoiceSess{
        font-size: 14px;
    }
    .blocOrders .blocOrder label{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blocOrders .blocOrder label .infosCMD .titleCMD.paid{
        color: var(--green-loading);
    }
    .blocOrders .blocOrder label .infosCMD .titleCMD.unpaid{
        color: var(--yellow-gold);
    }
    .blocOrders .blocOrder label .infosCMD .amountCMD{
        font-size: 14px;
        display: none;
    }
    .blocOrders .blocOrder label .infosCMD .titleCMD{
        font-size: 14px;
    }
    .blocOrders .blocOrder label .infosCMD .titleCMD span{
        font-size: 10px;
    }
    .blocOrders .blocOrder label .vignettesCMD img{
        width: 50px;
        height: 50px;
        margin-left: -35px;
    }
    .blocOrders .blocOrder .contentCMD .rowCMDBasket img{
        width: 40px;
        height: 40px;
    }
    .blocOrders .blocOrder .contentCMD .rowCMDBasket .nomPdtBasket{
        font-size: 12px;
    }
    .blocOrders .blocOrder .contentCMD .rowCMDBasket .qtePdtBasket{
        font-size: 12px;
    }
    .blocOrders .blocOrder .contentCMD .rowCMDBasket .totalRowBasket{
        font-size: 12px;
        font-weight: 600;
    }

    .providerInfos{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0 10px;
    }
    .providerInfos .detailsProvider h1{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .providerInfos .detailsProvider .cardsSupport{
        flex-direction: column;
    }
    .providerInfos .detailsProvider .cardsSupport .card{
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--separateur-black-light);
    }
    .providerInfos .detailsProvider .cardsSupport .card:first-child{
        border-top: none;
    }
    .providerInfos .logo{
        width: 90%;
    }
    .allDeleveriesCurrPvd{
        width: 100%;
        margin-left: 0 !important;
    }
    .allDeleveriesCurrPvd .blocDeleveries label .amountDVY{
        font-size: 16px;
        justify-content: end;
        width: 30%;
        display: none;
    }
    .allDeleveriesCurrPvd .blocDeleveries label .PdtNum{
        display: none;
    }
    .allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY{
        width: 30%;
    }
    .allDeleveriesCurrPvd .blocDeleveries label .blocVignettePdtDVY img{
        width: 45px;
        height: 45px;
        margin-left: -25px;
    }
    .allDeleveriesCurrPvd .blocDeleveries label .DVYNum{
        width: 40%;
    }

    .container .mainContent .blocSearch .resultSearch{
        width: 100%;
    }
    .container .mainContent .blocSearch{
        width: 100%;
        padding: 0 10px;
    }
    .container .mainContent .blocSearch .searchBloc{
        width: 100%;
    }
    .container .mainContent .searchBloc input{
        width: 100%;
    }
    .container .mainContent .blocSearch .resultSearch{
        top: 145px;
        height: 100dvh;
        overflow: auto;
        width: 100%; 
    }
    .container .mainContent .header .userSetbloc .contentSet{
        margin: 5px 5px 5px auto;
    }
    .container .mainContent .header .userSetbloc .mainSetcontainer{
        width: 100%;
    }
    .mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt .saleThisWeekPdt{
        width: 100%;
    }
    .mainContent .lastAddedPdtbloc .detailsProduct .overviewPdt .sellAllTime{
        width: 100%;
    }
    .mainContent .creationBloc a{
        margin-right: 0 !important;
    }
    .amountMobile{
        display: flex;
    }
    .listPdtCat .containerPdtCat .detailsCount{
        flex-direction: column;
    }
    .listPdtCat .containerPdtCat .detailsCount .soldWeek{
        width: 90%;
    }
    .listPdtCat .containerPdtCat input[type='checkbox']:checked + .detailsCount{
        max-height: 640px;
    }

    .blocSessionOrder .headerBlocSessionOrder .infosCMD .amountInvoiceSess{
        display: none;
    }

    .wrappContentClientSelected{
        margin-left: 0 !important;
        padding: 25px !important;
        margin: 20px !important;
    }
    .wrappContentClientSelected .blocCustomerSelected{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
    .wrappContentClientSelected .blocCustomerSelected .logoClient{
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos{
        flex-direction: column;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
        gap: 10px;
    }
    .wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos:hover{
        background: var(--light-light-gray);
    }
    .wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos .infoText,
    .wrappContentClientSelected .blocCustomerSelected .infosClientSelected .rowClientInfos .titleInfo {
        width: 100%;
        align-items: center;
    }

    .otherProviders{
        padding: 0 15px 0 25px;
    }
    .otherProviders .rowPVD{
        display: grid;
        grid-template-columns: 60px 40% 40%;
    }
    .otherProviders .rowPVD .colisIn{
        display: none;
    }
    .otherProviders .rowPVD img{
        margin-left: -20px;
    }

    .blocMainContent{
        width: 100%;
        margin-left: 0;
        padding: 0 !important;
    }

    .wrappContentClientSelected{
        width: 100%;
        margin-left: 0 !important;
    }

    .listUsers{
        width: 100%;
        margin: 0 !important;
        padding: 10px;
    }
    #truncateText{
        width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catPdtbloc{
        flex-direction: column-reverse;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 10px !important;
        height: auto !important;
    }
    .catPdtbloc .listScreen{
        width: 100%;
    }
    .catPdtbloc .listCat{
        width: 100% !important;
        flex-direction: row;
        height: auto !important;
    }
    .catPdtbloc .listCat .listCatScreen{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 5px;
        height: auto !important;
    }
    .catPdtbloc .listCat .listCatScreen .rowCatList{
        width: calc(50% - 5px);
    }

}