@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{
    --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;
    --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%);
    --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%);
}

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-x: hidden;
    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;
}
.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 .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;
}
.formContainer .contentTop .blocProduits .selectItemPro .dropSelectContent{
    background: var(--white-color);
    box-shadow: var(--box-shadow-popup);
    border-radius: 0 0 5px 5px;
    padding: 5px;
    flex-direction: column;
    display: none;
}
.formContainer .contentTop .blocProduits .selectItemPro .dropSelectContent.active{
    display: flex;
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements{
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow: auto;
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li{
    display: flex;
    flex-direction: row;
    gap: 3px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li.hide{
    display: none;
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li.active{
    background: var(--background-feat-btn);
    color: var(--white-color);
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li.active .detailItem .itemName{
    color: var(--white-color);
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li.active:hover{
    background: var(--background-feat-btn);
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li:hover{
    background: var(--dark-light-background-hover);
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li .detailItem{
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 5px;
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li .detailItem .itemName{
    font-weight: 600;
    font-size: 12px;
    color: var(--text-title-color);
}
.formContainer .contentTop .blocProduits .selectItemPro .selectElements li .detailItem .itemStock{
    font-size: 10px;
    color: var(--stockColor);
    font-weight: 500;
}
.formContainer .contentTop .blocProduits .selectItemPro .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: 100%;
    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 .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;
    width: 40%;
    left: -40%;
    z-index: 10;
    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{
    height: 100%;
    background: #fff;
}
.container{
    display: grid;
    grid-template-columns: 20% 80%;
    transition: grid-template-columns 0.5s ease-in-out;
}
.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 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;
}
.container .mainContent .blocSearch{
    display: flex;
    align-items: center;
    justify-content: right;
}
.container .mainContent .blocSearch .searchBloc{
    background: red;
    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;
    position: relative;
}
.container .mainContent .header .userSetbloc{
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 15px;
    border-radius: 10px;
    margin: 5px;
    cursor: pointer;
}
.container .mainContent .header .userSetbloc.active{
    background: var(--brown-text);
}
.container .mainContent .header .userSetbloc.active ion-icon{
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc:hover{
    background: #fff;
}
.container .mainContent .header .userSetbloc.active:hover{
    background: var(--brown-text);
}
.container .mainContent .header .userSetbloc.active:hover img{
    border: 5px solid var(--white-color);
}
.container .mainContent .header .userSetbloc 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: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.active .userInfos{
    color: var(--white-color);
}
.container .mainContent .header .userSetbloc .userInfos .nameUser{
    font-weight: 600;
    font-size: 10px;
    padding: 2px;
    text-align: left;
}
.container .mainContent .header .userSetbloc .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{
    display: none;
    color: #640a00;
    font-size: 24px;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px;
    margin: 10px;
    width: fit-content;
    align-items: center;
    justify-content: center;
}
.container .mainContent .header .burgerMain2:hover{
    background: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.05);

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

.container .mainContent .cardDashboard{
    width: 100%;
    margin-top: 10px;
    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;
    min-height: 300px;
    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;
}


rect{
    fill: rgba(255,255,255,0.1);
}

.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);
}
.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);
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .toggletOnOff{
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .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;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .toggletOnOff .toggleBtnSupport.off{
    background: var(--light-light-gray);
    border: 1px solid var(--gray-uni);
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .toggletOnOff .toggleBtnSupport.off .togglerRound{
    right: calc(100% - 25px);
    transition: all .25s ease-in-out;
}
.mainContent .lastAddedPdtbloc .detailsProduct .footDetailsPdt .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 .createCatBloc{
    padding: 10px;
}
.mainContent .createCatBloc 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 .createCatBloc a:hover{
    background: var(--dark-blue);
}

.mainContent .createPdtBloc{
    padding: 10px;
}
.mainContent .createPdtBloc 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 .createPdtBloc a:hover{
    background: var(--dark-blue);
}

.mainContent .createBloc{
    padding: 10px;
}
.mainContent .createBloc 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: linear-gradient(225deg, #00008B 0%, #0000FF 80%);
    font-size: 11px;
}
.mainContent .createBloc a:hover{
    background: #00008B;
}

.mainContent .cardFeaturedBloc{
    width: 100%;
    margin: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.mainContent .cardFeaturedBloc .catPdtChart{
    background: var(--background-gradient-brown);
    width: 30%;
    height: auto;
    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: var(--width-reportFetch);
    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{
    min-height: 300px;
    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: 35% 15% 15% 20% 15%;
    align-items: center;
    height: 60px;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    gap: 5px;
}
.mainContent .cardFeaturedBloc .featuredPdt .featuredContent .listProduitDetail{
    display: grid;
    grid-template-columns: 35% 15% 15% 20% 15%;
    align-items: center;
    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);
}