:root{
	--primary: rgb(57, 48, 137); /* #393089 */
    /* --altprimary: rgb(0, 52, 73);  #003449 */
    --altprimary: rgb(32, 34, 37); /* #202225 */
    --secondary: rgb(255, 86, 102); /* #FF5666 */

    --success: rgb(0, 147, 0); /* #009300 */
    --warning: rgb(243, 146, 4); /* #f39204 */
    --error: rgb(244, 67, 54); /* #b70000 */

    --lightblue: rgb(89, 197, 242); /* #59C5F2 */
    --babypowder: rgb(253, 255, 252); /* #FDFFFC */
    --pansypurple: rgb(126, 25, 70); /* #7E1946 */
    /* --tool: rgb(33, 145, 255);  #2191ff */

	--form-radius: 0.45rem;
	--box-radius: 16px;
}

body{
    font-family: "DM Sans", system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    overflow: hidden;
}

.relative{ position: relative; }
.no-padding{ padding: 0; }

/**
* Authentification
* Styles
*/
.app.log-or-reg{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    display: flex;
}
.app.log-or-reg > div{
    width: 50%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.app.log-or-reg .left{ padding: 100px; }
.app.log-or-reg .left h3{
    font-family: "DM Serif Display";
    font-size: 4.0em;
    color: var(--primary);
}
.app.log-or-reg .left p{
    font-size: 1.5em;
    margin-top: 30px;
}
.app.log-or-reg .right{ background-color: var(--primary); }
.app.log-or-reg .right > div{
    width: 45%;
    display: block;
    margin: 0 auto;
}
.app.log-or-reg .right .logo{
    width: 100px;
    display: block;
    margin: 0 auto;
}
/* .app.log-or-reg.reg .right .logo{ width: 150px; } */
.app.log-or-reg .right .form h3{
    font-family: 'Raleway-Bold';
    text-align: center;
    font-size: 1.5em;
    color: #fff;
}
.app.log-or-reg .right .form p,
.app.log-or-reg .right .form h3 + p{
    font-family: 'Raleway-thin';
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
}
.app.log-or-reg .right .form{ width: 100%; margin-top: 30px; }
.app.log-or-reg .right .form form{ padding: 0 0px; }
.app.log-or-reg .right .form .indicator{
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}
.app.log-or-reg .right .forgot{
    display: block;
    width: 40%;

    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -20%;

    color: var(--babypowder);
    font-size: 0.8em;
    text-align: center;
    opacity: 0.6;
    text-decoration: none;
}
.app.log-or-reg .right .forgot:hover{ opacity: 0.8; }

/**
* Application
* Styles
*/
#app{
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0px;
    left: 0px;

    background-color: var(--babypowder);
}
#app.dashboard{ background-color: #F9FAFB; }

/* Sidebar */
#app .sidebar{
    display: flex;
    flex-direction: column;
    width: 80px;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    background-color: #fff;

    /* border-top-right-radius: var(--form-radius);
    border-bottom-right-radius: var(--form-radius); */
}
#app.dashboard .sidebar{
    -webkit-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1);
}
.sidebar .infos{ text-align: center; }
.sidebar .photo{
    width: 50px;
    height: 50px;

    display: block;
    margin: 0 auto;

    border-radius: 50%;
    padding: 3px;
    margin-bottom: 10px;
    margin-left: -25px;

    background-color: var(--primary);

    position: absolute;
    top: 15px;
    left: 50%;
}
.sidebar .photo img{
    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.sidebar .menu{
    padding: 100px 10px 0;
    margin: 0;
}
.sidebar .menu li{
    display: block;
    width: 60px;
    height: 60px;
    position: relative;
    margin-bottom: 15px;
}
.sidebar .menu li a{
    display: block;
    width: 100%;
    height: 100%;

    position: relative;
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(34, 34, 34, 0.7);

    background: #fff;
    /* background: -moz-linear-gradient(45deg,  rgba(227,11,23,1) 0%, rgba(243,146,4,1) 100%);
    background: -webkit-linear-gradient(45deg,  rgba(227,11,23,1) 0%,rgba(243,146,4,1) 100%);
    background: linear-gradient(45deg,  rgba(227,11,23,1) 0%,rgba(243,146,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30b17', endColorstr='#f39204',GradientType=1 ); */

    border-radius: 12px;
    transition: all ease-in 0.1s;
    font-size: 0.7em;

    /* -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1); */
}
.sidebar .menu li .ic{ font-size: 1.9em; }
.sidebar .menu li.active a,
.sidebar .menu li:hover a{
    /* background-color: var(--primary); */
    color: rgba(34, 34, 34, 1);
    font-size: 1.1em;

    /* -webkit-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1); */
}
.sidebar .fav{
    position: absolute;
    top: 15px;
    left: 50%;

    width: 60px;
    margin-left: -30px;
}
.sidebar .user-icon{
    position: absolute;
    bottom: 15px;

    width: 50px;
    height: 50px;

    background-color: var(--secondary);

    display: flex;
    justify-content: center;
    align-items: center;

    left: 50%;
    margin-left: -25px;
    border-radius: 50%;
    overflow: hidden;

}
.sidebar .user-icon h3{
    margin: 0;
    font-family: 'DM Sans Medium';
    color: #fff;
    font-size: 1.3em;
}

/* Main content */
#app .content{
    height: 100%;
    padding-left: 80px;
    overflow-y: auto;
}
#app .content > .inner{
    /* background-color: #eee; */
    width: 1180px;
    height: auto;

    display: block;
    margin: 0 auto;
}



/**
* Page
* Styles
*/
.page .page-infos{
    position: relative;
    padding: 30px 0 0;
}
.page .page-infos .colored{
    color: var(--secondary);
}
.page .page-infos .back{
    display: flex;

    position: absolute;
    top: 34px;
    left: -70px;

    text-decoration: none;
    border-radius: 100%;

    background-color: rgba(34, 34, 34, 0.7);
    color: #fff;
    font-size: 1.5em;
    width: 50px;
    height: 50px;

    justify-content: center;
    align-items: center;
}
.page .page-infos .back:hover{
    background-color: var(--primary);
    color: #fff;
}
.page .page-infos h3{
    margin: 0 0;
    font-family: "DM Sans Bold";
}

/**
* List Lavages
*/
.lavages-ls h3.welcome{
    margin-top: 100px;
    text-align: center;

    font-family: 'Raleway-Bold';
    font-size: 2.9em;
    margin-bottom: 0;
}
.lavages-ls h3.welcome .common-name{
    color: var(--primary);
}
.lavages-ls h3.welcome + p{
    text-align: center;
    font-size: 1.7em;
}
.lavages-ls h3.welcome + .forEmpty{
    display: block;
    width: 60%;
    margin: 0 auto;
}
.lavages-ls h3.welcome + .forEmpty p{
    text-align: center;
    font-size: 1.7em;
}
.lavages-ls h3.welcome + .forEmpty small{
    font-size: 1.4em;
    text-align: center;

    display: block;
    font-family: 'Raleway-Light';
    margin-top: 70px;
}
.lavages-ls .list,
.lavages-ls .empty{
    display: block;
    margin: 70px auto 0;

    width: 70%;
}
.lavages-ls .empty{ margin-top: 30px; }
.lavages-ls .list .item{
    position: relative;

    border: 1px solid rgba(49, 133, 252, 0.2);
    background-color: rgba(49, 133, 252, 0.1);
    padding: 15px 20px;

    border-radius: 10px;
    margin-bottom: 15px;

    /* -webkit-box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.03);
    -moz-box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.03);
    box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.03); */
}
.lavages-ls .list .item:hover{
    background-color: var(--babypowder);
}
.lavages-ls .item h3,
.lavages-ls .item p{
    padding: 0px;
    margin: 0px;
}
.lavages-ls .item h3{
    font-size: 1.2em;
    font-family: 'DM Sans Bold';

    color: var(--altprimary);
}
.lavages-ls .item p{
    color: rgba(0, 52, 73, 0.7);
}
.lavages-ls .item p + p{
    color: rgba(0, 52, 73, 0.3);
    font-size: 0.9em;
}
.lavages-ls .item .options{
    margin: 0px;
    padding: 0px;

    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;

    margin-top: -20px;
}
.lavages-ls .item .options li{
    display: inline-block;
    margin-left: 5px;
}
.lavages-ls .item .options li a{
    text-decoration: none;

    width: 40px;
    height: 40px;
    display: flex;

    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: rgba(49, 133, 252, 0.1);
}
.lavages-ls .item .options li:hover a{
    background-color: rgba(49, 133, 252, 1);
    color: var(--babypowder);
}
.lavages-ls .item .options li.update a{
    background-color: rgba(0, 147, 0, 0.1);
    color: var(--success);
}
.lavages-ls .item .options li.update:hover a{
    background-color: rgba(0, 147, 0, 1);
    color: var(--babypowder);
}
.lavages-ls .item .options li.delete a{
    background-color: rgba(255, 86, 102, 0.1);
    color: var(--secondary);
}
.lavages-ls .item .options li.delete:hover a{
    background-color: rgba(255, 86, 102, 1);
    color: var(--babypowder);
}

/**
* Configurer un lavage
*/
.configure .list-tools .form-control{ width: 60%;}
.configure .list-tools .form-control + p{
    font-size: 0.8em;
    margin-top: 5px;
}
.configure .list-tools ul.btn-set{
    list-style: none;
    text-align: right;
}
.configure .list-tools ul.btn-set li{
    display: inline-block;
    margin-left: 5px;
}
.configure .list .card{
    border: 3px solid transparent;
    margin-bottom: 25px;
    position: relative;
    min-height: 215px;
}
.configure .list .opaque .card{ opacity: 0.3; }
.configure .list .checked .card,
.configure .list .card:hover{
    border-color: var(--primary);
    cursor: pointer;
}
.configure .list .checked .card:before{
    content: "\ef0f";
    font-family: icomoon;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: -16px;
    left: -16px;

    font-size: 1.3em;
    width: 32px;
    height: 32px;
    color: #fff;

    border-radius: 100%;
    background-color: var(--primary);

    -webkit-box-shadow: 0px 0px 19px 1px rgba(0,0,0, 0.3);
    -moz-box-shadow: 0px 0px 19px 1px rgba(0,0,0, 0.3);
    box-shadow: 0px 0px 19px 1px rgba(0,0,0, 0.3);
}
.configure .list .card .options{
    position: absolute;
    top: 8px;
    right: 15px;

    list-style: none;
    padding: 0;

    display: none;
}
.configure .list .card:hover .options{ display: block; }
.configure .list .card .options li{
    display: inline-block;
    vertical-align: top;
}
.configure .list .card .options li a{
    display: flex;
    text-decoration: none;

    width: 35px;
    height: 35px;

    justify-content: center;
    align-items: center;

    border-radius: 100%;
}
.configure .list .options li a{
    background-color: rgba(49, 133, 252, 0.1);
    color: var(--primary);
}
.configure .list .options li:hover a{
    background-color: rgba(49, 133, 252, 1);
    color: var(--babypowder);
}
.configure .list .options li.update a{
    background-color: rgba(0, 147, 0, 0.1);
    color: var(--success);
}
.configure .list .options li.update:hover a{
    background-color: rgba(0, 147, 0, 1);
    color: var(--babypowder);
}
.configure .list .options li.delete a{
    background-color: rgba(255, 86, 102, 0.1);
    color: var(--secondary);
}
.configure .list .options li.delete:hover a{
    background-color: rgba(255, 86, 102, 1);
    color: var(--babypowder);
}
.configure .list .card-body{
    min-height: 180px;
    height: 100%;
}
.configure .list .card-body{
    height: 100%;
    position: relative;
}
.configure .list .card p.intitule{
    font-size: 0.9em;
    font-family: "DM Sans Medium";
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
}
.configure .list .card p.intitule + p{
    font-size: 0.8em;
    font-family: "DM Sans";
    color: rgba(0, 0, 0, 0.5);
}
.configure .list .card .details{
    position: absolute;
    bottom: 0px;
    left: 15px;
    right: 15px;
    height: auto;
}
.configure .list .card h3{
    font-size: 1.3em;
    text-align: left;
    font-family: "DM Sans Bold";
}
.configure .list .empty{ margin-top: 70px; }
.configure .list .empty h3{ font-family: "DM Sans Bold";}

.configure .list .card .ic{
    position: absolute;
    top: 15px;
    right: 15px;

    font-size: 1.8em;
}
.configure .list .card .spinner-border{
    position: absolute;
    top: 13px;
    right: 15px;

    --bs-spinner-width: 1.5rem;
    --bs-spinner-height: 1.5rem;
    --bs-spinner-border-width: 0.15em;
    border-color: var(--primary);
    border-right-color: transparent;

    display: none;
}
.configure .list .card.loading .spinner-border{ display: inline-block; }
/* .configure .list .card.loading .spinner-border{ right: 60px; } */
.configure .list .card .card-img-top{
    height: 120px;
    object-fit: cover;
    object-position: center;
}


/**
* Page de configuration
* des engins
*/
.configure.engins .list .card-body{ min-height: 130px; }

/**
* Page de configuration
* des produits
*/
.configure.produits .list .card-body{ min-height: 130px; }

/**
* Page de configuration
* des tarifs de services
*/
.configure.servtarifs .list .card{ border: none; overflow: hidden; }
.configure.servtarifs .list .card-body{ min-height: 110px; }
.configure.servtarifs .list .card .details{ left: 0; right: 0; }
.configure.servtarifs .list .card h3{ padding: 0 15px; }
.configure.servtarifs .list .card ul:not(.options){
    margin: 0;
    padding: 0;
    list-style: none;
}
.configure.servtarifs .list .card ul:not(.options) li{
    padding: 3px 15px;
    font-size: 0.8em;

    display: flex;
}
.configure.servtarifs .list .card ul:not(.options) li .left{ width: 65%; }
.configure.servtarifs .list .card ul:not(.options) li .right{ width: 35%; text-align: right; }
.configure.servtarifs .list .card ul:not(.options) li.forbtn{
    padding: 0;
}
.configure.servtarifs .list .card ul:not(.options) li a{
    display: block;
    width: 100%;
    text-align: center;
    padding: 7px 0px;
    font-size: 1.3em;

    margin-top: 15px;
    background-color: var(--primary);
    color: #fff;
    text-decoration: none;
}

/**
* Page de configuration
* des tarifs de produits
*/
.configure.prodtarifs .products,
.configure .display{
    background-color: #fff;
    border-radius: var(--box-radius);
}
.configure .display{ padding: 30px 0; }
.product,
.configure.prodtarifs .product{
    display: flex;
    width: 100%;

    position: relative;
    border-bottom: 2px solid rgb(241, 241, 241);

    padding: 10px 15px;
}
.product.opaque,
.configure.prodtarifs .product.opaque{ opacity: 0.3; display: none; }
.product:last-child,
.configure.prodtarifs .product:last-child{ border-bottom: none; }
.product .img,
.configure.prodtarifs .product .img{ width: 120px; }
.product .infos,
.configure.prodtarifs .product .infos{
    width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product .infos h3,
.product .infos p,
.configure.prodtarifs .product .infos h3,
.configure.prodtarifs .product .infos p{
    padding: 0;
    margin: 0;
}
.product .infos h3,
.configure.prodtarifs .product .infos h3{
    font-family: "DM Sans Bold";
    font-size: 1.3em;
}
.product .infos p,
.configure.prodtarifs .product .infos p{
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.8em;
}
.product .price,
.product .options,
.configure.prodtarifs .product .price,
.configure.prodtarifs .product .options{
    width: 20%;
    position: absolute;

    top: 0;
    right: 0px;
    height: 100%
}
.product .price,
.configure.prodtarifs .product .price{
    display: flex;
    align-items: center;
    right: 17%;
    text-align: right;
}
.product.candelete .price,
.configure.prodtarifs .product.candelete .price{ right: 25%; }
.product .price h3,
.configure.prodtarifs .product .price h3{
    margin: 0px;
    font-family: "DM Sans Bold";
    width: 100%;
}
.product .img img,
.configure.prodtarifs .product .img img{
    width: 70px;
    height: 70px;

    object-fit: cover;
    object-position: center;
    border-radius: 100%;
}
.product .options,
.configure.prodtarifs .product .options{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 15%;
    padding-right: 15px;
}
.product.candelete .options,
.configure.prodtarifs .product.candelete .options{ width: 30%; }
.product .options ul,
.configure.prodtarifs .product .options ul,
.configure .list .item .options ul{
    padding: 0;
    margin: 0;
    text-align: right;
    width: 100%;

    list-style: none;
}
.product .options li,
.configure.prodtarifs .product .options li,
.configure .list .item .options li{
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}
.product .options li a,
.configure.prodtarifs .product .options li a,
.configure .list .item .options li a{
    display: flex;
    text-decoration: none;

    /* width: 35px;
    height: 35px; */

    justify-content: center;
    align-items: center;

    padding: 7px 15px;
    border-radius: 0.375rem;

    /* border-radius: 100%; */
}
.product .options li a .spinner-border,
.configure.prodtarifs .product .options li a .spinner-border,
.configure .list .item .options li a .spinner-border{
    --bs-spinner-width: 1.3rem;
    --bs-spinner-height: 1.3rem;
    --bs-spinner-border-width: 0.2em;

    /* border-color: var(--primary); */
    border-right-color: transparent;

    display: none;
}
.product .options li a .text,
.configure.prodtarifs .product .options li a .text,
.configure .list .item .options li a .text
{ display: inline-block; }
.product.loading .options li.update a .spinner-border,
.configure.prodtarifs .product.loading .options li.update a .spinner-border,
.configure .list .item.loading .options li.update a .spinner-border
{ display: inline-block; }
.product.loading .options li.update a .text,
.configure.prodtarifs .product.loading .options li.update a .text,
.configure .list .item.loading .options li.update a .text
{ display: none; }
.product .options li:hover a,
.configure.prodtarifs .product .options li:hover a,
.configure .list .item .options li:hover a{
    background-color: rgba(49, 133, 252, 1);
    color: var(--babypowder);
}
.product .options li.update a,
.configure.prodtarifs .product .options li.update a,
.configure .list .item .options li.update a{
    background-color: rgba(49, 133, 252, 0.1);
    color: var(--primary);
}
.product .options li.update:hover a,
.configure.prodtarifs .product .options li.update:hover a,
.configure .list .item .options li.update:hover a{
    background-color: rgba(49, 133, 252, 1);
    color: var(--babypowder);
}
.product .options li.delete a,
.configure.prodtarifs .product .options li.delete a,
.configure .list .item .options li.delete a{
    background-color: rgba(255, 86, 102, 0.1);
    color: var(--secondary);
}
.product .options li.delete:hover a,
.configure.prodtarifs .product .options li.delete:hover a,
.configure .list .item .options li.delete:hover a{
    background-color: rgba(255, 86, 102, 1);
    color: var(--babypowder);
}

/**
* Page de gestion des utilisateurs
* Listing des comptes
*/
.configure.users .list .card{
    border: 2px solid rgba(49, 133, 252, 0.1);
    background: rgba(49, 133, 252, 0.1);
    margin-bottom: 0;
    height: 100%;
}
.configure.users .list .card:hover{
    border-color: rgba(49, 133, 252, 0.2) ;
    background-color: var(--babypowder);
}
.configure.users .list .card-body{ min-height: auto; }
.configure.users .list .card .details{
    display: flex;
    /* align-items: center; */

    position: relative;
    left: 0;
    right: 0;
    bottom: auto;
}
.users .user .details .img{
    width: 50px;
    height: 50px;
    border-radius: 100%;

    background-color: var(--secondary);

    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    border: 3px solid var(--secondary);
}
.users .user .details .img h3{
    display: none;

    padding: 0;
    margin: 0;

    width: 100%;
    text-align: center;
    color: var(--babypowder);
}
.users .user .details .img.initials h3{ display: block; }
.users .user .details .img img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.users .user .details .img.initials img{ display: none; }
.users .user .infos{
    padding-left: 15px;
    width: calc(100% - 50px);
}
.users .user .infos h3,
.users .user .infos p{
    margin: 0;
    padding: 0;
}
.users .user .infos p{ font-size: 0.8em; }
.configure.users .list .card .options{
    position: relative;
    top: auto;
    right: auto;

    display: block;
    width: 100%;
    margin-bottom: 15px;

    text-align: center;
}
.configure.users .list .card .options li{ margin-right: 5px; }

/**
* Dashboard
* Styles
*/
.dashboard .connected{ padding-top: 30px; }
.dashboard .connected p,
.dashboard .connected h3{
    margin: 0;
    font-family: "DM Sans";
    text-align: right;
}
.dashboard .connected h3{
    font-family: "DM Sans Bold";
    font-size: 1.2em;
    margin-top: -2px;
}
.dashboard .connected p:first-child{ font-size: 0.6em; }
.dashboard .connected p:last-child{ font-size: 0.8em; margin-top: -2px; }
.dashboard .tools{
    margin-top: 0px;
    display: flex;
    column-gap: 15px;
}
.dashboard .tools > span{
    display: flex;
    width: 150px;
    align-items: flex-end;
}
.dashboard .tools > span.vertical{
    flex-direction: column;
    align-items: flex-start;
}
.dashboard .tools > span.vertical .label{
    font-size: 0.8em;
    font-family: "DM Sans Medium";
    padding-left: 10px;
}
.dashboard .tools .btn{
    height: 36px;
    border: none;
}

.dashindex .datas,
.dashboard .datas{
    margin-top: 30px;

    display: flex;
    gap: 15px;
}
.dashindex .section .list{ min-height: 339px; }
.dashindex .section .list > p,
.dashindex .section.empty .more,
.dashindex .section.empty .list .item{ display: none; }
.dashindex .section .list.empty {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashindex .section .list.empty p{
    display: block;
    color: #666;
    font-weight: lighter;
}
.dashboard .datas > div{
    width: calc(calc(100% - 15px) / 4);
    background-color: #fff;
    padding: 15px;
    border-radius: var(--box-radius);

    -webkit-box-shadow: 0 0 2px 0 #dddddd;
    -moz-box-shadow: 0 0 2px 0 #dddddd;
    box-shadow: 0 0 2px 0 #dddddd;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    position: relative;
    padding-top: 40px;
}
.dashboard .datas > div .ic{
    font-size: 1.5em;
    color: var(--altprimary);

    position: absolute;
    top: 15px;
    left: 15px;
}
.dashboard .datas > div p,
.dashboard .datas > div h3{
    margin: 0;
}
.dashboard .datas > div p{
    margin-top: 15px;
    font-size: 0.8em;
    font-family: "DM Sans Medium";
}
.dashboard .datas > div h3{
    font-family: "DM Sans Bold";
    color: var(--primary);
    font-size: 1.3em;
}
.dashboard .datas > div a{
    text-decoration: none;
}

.dashboard .datas > div.bg-primary{ background-color: var(--primary) !important; }
.dashboard .datas > div.bg-error{ background-color: var(--error) !important; }
.dashboard .datas > div.bg-primary h3,
.dashboard .datas > div.bg-primary p,
.dashboard .datas > div.bg-primary .ic,
.dashboard .datas > div.bg-error h3,
.dashboard .datas > div.bg-error p,
.dashboard .datas > div.bg-error .ic{
    color: #fff;
}
.dashboard .datas > div .more{
    position: absolute;
    right: 15px;
    top: 15px;

    display: flex;
    width: 30px;
    height: 30px;

    justify-content: center;
    align-items: center;
    background-color: var(--lightblue);
    border-radius: 50%;
    color: #fff;

    -webkit-box-shadow: 0 0 10px 0 #dddddd;
    -moz-box-shadow: 0 0 10px 0 #dddddd;
    box-shadow: 0 0 10px 0 #dddddd;
}
.dashboard .datas > div.bg-error .more{
    background-color: #fff;
    color: var(--error);

    -webkit-box-shadow: 0 0 10px 0 var(--error);
    -moz-box-shadow: 0 0 10px 0 var(--error);
    box-shadow: 0 0 10px 0 var(--error);
}

.dashboard .datas > div:hover{
    background-color: var(--lightblue);
    cursor: pointer;
}
.dashboard .datas > div:hover h3,
.dashboard .datas > div:hover p,
.dashboard .datas > div:hover .ic{
    color: #fff;
}
.dashboard .datas > div:hover .more{
    background-color: #fff;
    color: var(--lightblue);
}

.dashboard .section{
    background-color: #fff;
    border-radius: var(--box-radius);
    overflow: hidden;
    padding: 7px 0 0;


}
.dashboard .section.boxed{ box-shadow: 0 0 2px 0 #dddddd; }
.dashboard .section .header{
    padding: 15px 15px;
    position: relative;
    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.dashboard .section .header p{
    font-family: "DM Sans Bold";
    font-size: 1.1em;
    margin: 0;
}
.dashboard .section .header .more{
    position: absolute;
    top: 0px;
    right: 0px;
    text-decoration: none;

    display: flex;
    width: 30px;
    height: 30px;

    justify-content: center;
    align-items: center;
    background-color: var(--lightblue);
    border-radius: 50%;
    color: #fff;

    -webkit-box-shadow: 0 0 10px 0 #dddddd;
    -moz-box-shadow: 0 0 10px 0 #dddddd;
    box-shadow: 0 0 10px 0 #dddddd;
}
/* .dashboard .section .list{ min-height: 380px; } */
.dashboard .section .more{
    display: flex;
    justify-content: center;

    padding: 8px 0;
    text-decoration: none;
}
.dashboard .section .more a{ text-decoration: none; }

/**
* Liste des
* Prestations
*/
.prestations .list .item{
    padding: 10px 15px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
}
.prestations .list .item a{
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
}
.prestations .list .item:last-child{ border-bottom: none; }
.prestations .list .item .icon{
    width: 45px;
    height: 45px;

    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    font-size: 1.5em;
    border-radius: 100%;
}
.prestations .list .item .icon span{ margin-top: -3px; }
.prestations .list .item .details{
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 86px);

    position: relative;
}
.prestations .list .item.wallet .details:after{
    /* content: 'Payé par carte'; */
    content: url('../img/logos/svg/mlav.svg');
    width: 20px;

    position: absolute;
    top: 50%;
    right: 65px;

    margin-top: -10px;
    /* font-size: 0.6em;

    background-color: #F3D341;
    padding: 3px 7px;
    border-radius: 10px; */
}
.prestations .list .item .details h3,
.prestations .list .item .details p{ margin: 0; }
.prestations .list .item .details h3{
    font-family: "DM Sans Bold";
    color: var(--primary);
    font-size: 0.9em;
    margin: 0 0 5px;
}
.prestations .list .item p{ font-size: 0.7em; }
.prestations .list .item p.price{ color: var(--success); }
.prestations .list .item .details p.heure{
    position: absolute;
    right: 15px;
    top: 50%;

    margin-top: -8px;
    font-size: 0.8em;
    font-family: "DM Sans Bold";
    color: #333;
}
.prestations .list .item .go{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: rgba(49, 133, 252, 0.1);

    font-size: 1.3em;
    padding: 5px;
    margin-left: 10px;

    width: 31px;
    height: 31px;
    text-decoration: none;
}
.prestations .list .item:hover{
    background-color: rgba(49, 133, 252, 0.1);
}
.prestations .list .item:hover .go{
    background-color: rgba(49, 133, 252, 1);
    color: #fff;
}


/**
* Liste des
* Dépenses
*/
/* Liste des dépenses */
.depenses .list .item{
    display: flex;
    flex-direction: column;
    padding: 8px 15px;
    /* border-bottom: 1px solid #eee; */

    position: relative;
}
.depenses .list .item:last-child{ border-bottom: none; }
.depenses .list .item  h3{
    font-size: 0.9em;
    font-family: "DM Sans Bold";
    margin: 0;

    color: var(--primary);
}
.depenses .list .item p{
    margin: 0;
    color: var(--primary);
    font-size: 0.7em;
}
.depenses .list .item p.heure{
    position: absolute;
    right: 15px;
    top: 50%;

    margin-top: -8px;
    font-size: 0.8em;
    font-family: "DM Sans Bold";
    color: #333;
}

/**
* Liste
* des clients
*/
.list.profile .item{ position: relative; }
.list.profile .item.selected:after{
    font-family: 'icomoon';
    content: "\eda3";

    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;

    background-color: var(--success);
    color: #fff;
    font-size: 1.0em;
    border-radius: 100%;

    position: absolute;
    top: 50%;
    margin-top: -25px;
    right: 15px;
}
/* .list.clients .item{
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding: 0 15px 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
} */
.list.profile .item:last-child{ border-bottom: none; }
.list.profile .item .photo,
.profile .presenter .icon{
    background-color: var(--secondary);
    display: flex;

    width: 50px;
    height: 50px;

    overflow: hidden;
    align-items: flex-end;
    justify-content: center;

    font-size: 3.5em;
    border-radius: 100%;

    -webkit-box-shadow: 0 0 10px 3px #dddddd;
    -moz-box-shadow: 0 0 10px 3px #dddddd;
    box-shadow: 0 0 10px 3px #dddddd;
}
.list.profile .photo span,
.profile .presenter .icon span{
    display: flex;
    margin-bottom: -10px;
    color: #fff;
}
.list.profile div h3,
.profile .presenter .libelle{
    font-size: 1.1em;
    font-family: "DM Sans Bold";
    margin: 0;

    color: var(--primary);
}
.list.profile h3 + p{
    margin: 0;
    font-size: 0.9em;
    color: #666;
}


/**
* Laveurs
*/
.listing .table{
    margin: 30px 0;
}
.listing .table th,
.listing .table td{
    vertical-align: middle;
}
.listing .list .item td,
.listing .list .item th{
    border-bottom: 2px solid rgb(241, 241, 241);
    padding-top: 15px;
    padding-bottom: 15px;
}
.listing .list .item:last-child td,
.listing .list .item:last-child th{ border-bottom: none; }
.listing .list .indice{
    text-align: center;
    font-family: "DM Sans Bold";
}
.listing .list .details{
    display: flex;
    align-items: center;
    column-gap: 30px;

    padding: 8px 0;
}
.listing .list .details h3 + p{
    font-size: 0.75em;
}
.listing .list .details p{
    margin: 0;
    font-size: 0.9em;
    color: #666;
}
.listing .list .details .separator{ margin: 5px 0; }
.listing .list .details .infos{
    width: 40%;
}
.listing .list .options{
    padding-right: 30px;
}

/* Clients */
.listing .list.clients .details p{ font-size: 0.75em; }

/**
* Fiche d'un
* client
*/
.page.profile .infos{
    margin: 0 auto;
    row-gap: 30px;
    display: flex;
    flex-direction: column;
}
.profile .infos .top{ display: flex; column-gap: 30px; }
.profile .infos .top > div{ width: 50%; }
.profile .section{ height: 100%; }

.profile .infos .presenter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #fff;
    border-radius: var(--form-radius);
    padding: 30px ;
}
.profile .presenter .icon{
    width: 70px;
    height: 70px;
    font-size: 4.5em;
    margin-bottom: 15px;
}
.profile .presenter p{
    font-size: 0.8em;
    margin: 0;
}
.profile .presenter p.email{ margin: -5px 0 0; }
.profile .presenter .moredetails{
    display: flex;
    /* padding: 0 15px; */

    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}
.profile .presenter .moredetails div{ padding: 0 15px; }
.profile .presenter .moredetails div p:last-child{
    font-family: "DM Sans Bold";
    font-size: 1.0em;
}
.profile .presenter .since,
.profile .presenter .nb{
    text-align: center;
    color: var(--altprimary);
    font-size: 1.0em;
    margin: 0px 0 0;
}
.profile .presenter .date{
    text-align: center;
    color: var(--altprimary);
    font-size: 1.0em;
    margin: 0px 0 0;
}
.profile .presenter .date + p{
    margin-top: 0;
    font-family: 'DM Sans Bold';
    text-align: center;
}
.profile .list.vehicules .item-icon .details{ width: calc(100% - 55px); }

.profile .section .title{
    margin: 0;
    font-size: 1.1em;
    color: #666;
    font-family: "DM Sans Medium";
    padding: 0 15px;
    margin-bottom: 5px;
}
.profile .section.vehicule p.title
{ margin-bottom: 0; }
.profile .section.vehicule p.title + p{
    padding: 0 15px;
    font-size: 0.8em;
    margin: -5px 0 10px;
}
.profile .section > div{
    background-color: #fff;
    padding: 15px;
    border-radius: 16px;
}

/* Liste avec icônes */
.list .item-icon{
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.list .item-icon:last-child{ border-bottom: none; }
.list .item-icon .icon{
    width: 55px;
    height: 55px;

    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    font-size: 1.8em;
    border-radius: 100%;
}
.list .item-icon .icon span{ margin-top: -3px; }
.list .item-icon .details{
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 110px);
}
.list .item-icon .details h3,
.list .item-icon .details p{
    margin: 0;
}
.list .item-icon .details h3{
    font-family: "DM Sans Medium";
    color: var(--primary);
    font-size: 1.0em;
    margin: 0 0 5px;
}
.list .item-icon p{ font-size: 0.8em; }

.list.vehicules .item-icon
{ position: relative; }
.list.vehicules .item-icon.selected:after{
    font-family: 'icomoon';
    content: "\eda3";

    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;

    background-color: var(--success);
    color: #fff;
    font-size: 1.0em;
    border-radius: 100%;

    position: absolute;
    top: 50%;
    margin-top: -15px;
    right: 5px;
}
.list.vehicules .item-icon .details h3{
    font-size: 1.0em;
    font-family: "DM Sans Bold";
    margin-bottom: 5px;
}
.section .libvalue{
    display: flex;
    justify-content: space-between;
}
.list.vehicules .details .libvalue .lib,
.list.vehicules .details .libvalue .value{
    padding: 0;
    font-size: 0.8em;
}
.section.vehicule p.title
{ margin-bottom: 0; }
.section.vehicule p.title + p{
    padding: 0 15px;
    font-size: 0.8em;
    margin: -5px 0 10px;
}
.section.vehicule .empty{
    display: flex;
    justify-content: center;
}
.section.vehicule .empty .circle{
    border: 3px dashed var(--lightblue);
    display: flex;

    width: 60px;
    height: 60px;

    border-radius: 50%;
    justify-content: center;
    align-items: center;
}
.section.vehicule .empty .circle span{
    font-size: 2.5em;
    color: var(--lightblue);
    display: flex;
    margin-top: -3px;
}
.section.vehicule .empty .circle + div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section.vehicule .empty > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    column-gap: 15px;
    text-align: center;
    padding: 0 15px;
}
.section.vehicule div h3,
.section.vehicule .empty h3{
    font-family: "DM Sans Medium";
    font-size: 1.0em;
    margin: 0 0 0;
}
.section.vehicule .empty h3{ color: var(--primary); }
.section.vehicule .empty p{ margin: 0; }
.section.vehicule .list.vehicules:not(.hide) + .empty{
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/**
* Settings
* List
*/
.settings-list{
    display: flex;
    margin: 0 auto;
    width: 60%;
    background-color: #fff;

    flex-direction: column;
    /* padding: 15px 0; */
    margin-top: 30px;
    border-radius: var(--form-radius);
    overflow: hidden;
}
.settings-list .separator{
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.1);
}
.settings-list .item{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.settings-list .item:not(.canbeset){ padding: 15px 15px; }
.settings-list .item a{
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: #111;

    padding: 15px 15px;
}
.settings-list .item:hover a{
    background-color: rgba(49, 133, 252, 0.1);
}
.settings-list .item h3{
    font-family: "DM Sans Bold";
    margin-bottom: 0;
    color: var(--primary);
}
.settings-list .item p{ margin: 0; }
.settings-list .item .value{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/**
* Modal de Paramètres
* et préférences
*/
#settingsModal .options{ margin-top: 0px; }
#settingsModal .options .item{
    border-top: 1px solid rgba(49, 133, 252, 0.1);
}
/* #settingsModal .options .item:last-child{ border-top: none; } */
#settingsModal .options .item a{
    display: flex;
    padding: 7px 15px;
    column-gap: 15px;

    text-decoration: none;
    color: #222;
}
#settingsModal .options .item .ic{ font-size: 2.2em; }
#settingsModal .options .item a > div{
    display: flex;
    flex-direction: column;
}
#settingsModal .options .item a > div h3,
#settingsModal .options .item a > div p{
    margin: 0;
}
#settingsModal .options .item a > div h3{
    font-family: "DM Sans Bold";
    font-size: 1.1em;
}
#settingsModal .options .item a > div p{ font-size: 0.9em; }
#settingsModal .options .item:hover{ background-color: rgba(49, 133, 252, 0.1); }

/**
* Prestation
* details
*/
.prestationdetails .presenter{
    margin-top: 30px;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 30px;
}
.prestationdetails .presenter .icon{
    width: 70px;
    height: 70px;
    background-color: var(--primary);

    display: flex;
    margin: 0 auto 0;
    text-align: center;
    color: #fff;

    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    border-radius: 100%;
}
.prestationdetails .presenter .icon span{
    display: flex;
    margin-top: -4px;
}
.prestationdetails .presenter .libelle{
    text-align: center;
    font-family: "DM Sans Bold";
    font-size: 1.5em;
    margin: 15px 0 0;
    color: var(--primary);
}
.prestationdetails .presenter .price{
    text-align: center;
    color: var(--success);
    font-size: 1.2em;
    margin: 10px 0 0;
}
.prestationdetails .presenter .date{
    margin: 0;
    color: var(--altprimary);
    font-family: "DM Sans Medium";
    font-size: 0.9em;
}

.prestationdetails .section{
    padding: 0 15px;
    margin-bottom: 30px;
}
.prestationdetails .section .title{
    margin: 0;
    font-size: 1.1em;
    color: #666;
    font-family: "DM Sans Medium";
    padding: 0 15px;
    margin-bottom: 5px;
}
.prestationdetails .section > div{
    background-color: #fff;
    padding: 15px;
    border-radius: 16px;
}

.prestationdetails .sections{
    display: flex;
    flex-wrap: wrap;
}
.prestationdetails .sections .section{ width: calc(100% / 3); }
.dashboard.prestationdetails .section{ background-color: transparent; height: auto; }

.prestationdetails .service > div h3,
.prestationdetails .objet > div h3{
    color: var(--altprimary);
    font-family: "DM Sans Bold";
    font-size: 1.4em;
    margin: 0 0 0px;
}
.prestationdetails .service > div p,
.prestationdetails .objet > div p{
    margin: 5px 0 0;
    font-size: 1.1em;
}
.prestationdetails .section .libvalue{
    display: flex;
    align-items: center;
}
.prestationdetails .section .libvalue.pricing.discounted span{ display: inline-block; }
.prestationdetails .section .libvalue.pricing.discounted .realprice{
    font-size: 0.75em;
    text-decoration: line-through;
    margin-right: 5px;
}
.prestationdetails .section .libvalue .value{
    padding: 5px 0px;
    width: 50%;
}
.prestationdetails .section .libvalue .value{
    text-align: right;
    font-family: "DM Sans Bold";
}

.prestationdetails .section.objet .discount-info,
.prestationdetails .section.vehicule .discount-info{
    padding: 0 15px 0 45px;
    position: relative;
    text-align: justify;

    font-size: 0.8em;
    color: var(--primary);
}
.prestationdetails .service-infos .discount-info{
    padding: 0 30px;
    margin-top: -15px;
}
.prestationdetails .section.objet .discount-info span.icon-info,
.prestationdetails .section.vehicule .discount-info span.icon-info{
    font-size: 1.6em;

    position: absolute;
    top: 0px;
    left: 15px;

    color: var(--primary);
}
.prestationdetails .section.produits > div
{ padding: 0; overflow: hidden; }

.prestationdetails .section.produits .list
{ padding: 0 15px; }

.prestationdetails .section.produits .item{
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.prestationdetails .produits .item:last-child
{ border-bottom: none; }

.prestationdetails .produits .item img{
    width: 50px;
    height: 50px;

    object-fit: cover;
    object-position: center;
    border-radius: 100%;
}
.prestationdetails .produits .item .text{
    display: flex;
    flex-direction: column;
    padding: 0 15px;

    width: calc(100% - 130px);
}
.prestationdetails .produits .item .text h3{
    font-size: 1.1em;
    color: var(--primary);
    font-family: "DM Sans Bold";
    margin: 0;
}
.prestationdetails .produits .item .text p
{ margin: 0; }
.prestationdetails .produits .item .price{
    text-align: right;
    width: 80px;
}
.prestationdetails .produits .total{
    background-color: var(--primary);
    padding: 5px 15px;
    color: #fff;
}
.prestationdetails .section.client.horizontal{
    display: flex;
    align-items: center;
    justify-content: center;

    column-gap: 15px;
}
.prestationdetails .section.client .photo{
    background-color: var(--secondary);
    display: flex;

    width: 60px;
    height: 60px;

    margin: 0 auto 0;
    overflow: hidden;
    align-items: flex-end;
    justify-content: center;

    font-size: 4.0em;
    border-radius: 100%;
    margin-bottom: 15px;

    -webkit-box-shadow: 0 0 10px 3px #dddddd;
    -moz-box-shadow: 0 0 10px 3px #dddddd;
    box-shadow: 0 0 10px 3px #dddddd;
}

.prestationdetails .section.client.anonymous .photo span{
    margin-bottom: 0;
    font-size: 0.5em;
}
.prestationdetails .section.client.anonymous .photo{ background-color: var(--altprimary); align-items: center; }
.prestationdetails .section.client.horizontal .photo{
    margin: 0 0 0;
}

.prestationdetails .section.client .photo span{
    display: flex;
    margin-bottom: -10px;
    color: #fff;
}
.prestationdetails .section.client div h3{
    font-family: "DM Sans Bold";
    color: var(--primary);
    font-size: 1.4em;
    margin: 0 0 7px;
}
.prestationdetails .section.client div p{ margin: 0; }

.prestationdetails .laveur-infos .section.client
{ margin-bottom: 15px; }
.prestationdetails .laveur-infos .section.client:not(.empty).emptied
{ margin-bottom: 0; }
.prestationdetails .section.client .laveurs{
    flex-direction: column;
    padding: 0 15px;
}
.prestationdetails .laveur-infos .section.client:not(.empty).emptied .laveurs
{ display: none; }
.prestationdetails .section.client:not(.empty) > div.laveurs > div:nth-child(2)
{ margin-right: 0; }
.prestationdetails .section.client .laveurs .item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;

    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}
.prestationdetails .section.client .laveurs .item > div:not(.photo){ margin-right: 70px; }
.prestationdetails .section.client .laveurs .item:last-child{ border-bottom: none; }
.prestationdetails .section.client .laveurs .options{ right: 15px; }
.prestationdetails .section.client .laveurs .options li a{
    background-color: rgba(255, 86, 102, 0.1);
    color: var(--secondary);
}
.prestationdetails .section.client .laveurs .item .photo{ background-color: var(--primary); }

.prestationdetails .section.client .laveurs .item .photo,
.prestationdetails .section.client div h3{
    margin: 0 !important;
    position: relative;
    text-align: center;
}
.prestationdetails .section.client div p{ text-align: center; }
.prestationdetails .section.client.only-client.hascard div h3:after{
    content: url('../img/logos/svg/mlav.svg');

    width: 20px;
    height: 20px;

    position: absolute;
    top: 50%;
    margin-top: -12px;
    margin-left: 8px;
}
.prestationdetails .section.client .laveurs .item .photo + div{ width: calc(100% - 160px); }
.prestationdetails .list.pay .item-icon .details h3{
    font-size: 1.0em;
    font-family: "DM Sans Bold";
    margin-bottom: 5px;
}
.prestationdetails .list.pay .item-icon .details h3
{ margin-bottom: 0; }
.prestationdetails .list.pay .item-icon .icon{
    background-size: cover;
    background-position: center;
    padding: 10px;
}
.prestationdetails .list.pay .item-icon.wallet .icon
{ background-image: url(../img/logos/svg/washidback.svg); }
.prestationdetails .list.pay .item-icon.cash .icon
{ background-color: var(--lightblue); }
.prestationdetails .list.pay .item-icon.cash .icon img
{ height: 100%; }
.prestationdetails .list.pay .item-icon.wallet .icon img{ width: 100%; }


/**
* Modèle de
* pages centrés
*/
.centered .page-content{
    display: block;
    margin: 40px auto 0;
    width: 50%;
}
.prestationdetails.centered .page-content{ width: 75%; }
.page-content .toolbar{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}
.centered .page-content .section{
    margin-top: 15px;
    height: auto;
}
.page-content .section .paginate{
    display: flex;
    justify-content: flex-end;

    padding: 15px;
}
.page-content .section .paginate .page-item{ margin-right: 10px; }
.page-content .section .paginate .page-item:last-child{ margin-right: 0px; }
.page-content .section .paginate .page-link{
    border: none;
    width: 36px;
    height: 36px;

    border-radius: 50%;
    text-align: center;
}

/**
* All
* Prestations
*/
.dashboard.allprestations{ margin-bottom: 30px; }
.dashboard.allprestations .section{ height: auto; box-shadow: 0 0 2px 0 #dddddd; }
.dashboard.allprestations .datas > div.pie-chart{ padding: 0; }
.dashboard.allprestations .datas > div.pie-chart > div.chart{ padding: 15px;}
.dashboard.allprestations .datas > div.pie-chart:hover{ background-color: #fff; }
.dashboard .datas > div.pie-chart p{ margin-top: 0; margin-bottom: 15px; }
.dashboard .datas > div.pie-chart:hover p{ color: #000; }
.allprestations .page-content{ display: flex; column-gap: 30px; padding-top: 30px; }
.allprestations .page-content .left{ width: 30%; padding-top: 55px; }
.allprestations .page-content .right{ width: 70%; }
.allprestations .page-content .left .datas{
    margin: 0;
    flex-direction: column;
}
.allprestations .page-content .left .datas div{ width: 100%; }
.dashboard.allprestations .datas > div.pie-chart .legends{
    padding: 0;
    margin: 0;
    list-style-type: none;

    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding-bottom: 15px;
}
.dashboard.allprestations .datas > div.pie-chart .legends li{
    display: flex;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
}
.dashboard.allprestations .datas > div.pie-chart .legends li p{ margin: 0; }
.dashboard.allprestations .datas > div.pie-chart .legends li p.label{
    flex: 1;
    flex-wrap: wrap;
}
.dashboard.allprestations .datas > div.pie-chart .legends .color{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex: none;
}
.dashboard.allprestations .datas > div.pie-chart .legends .value{ width: 100px; text-align: right; }


/**
* Prestations
* Details
*/
.pinsights .page-content{
    display: flex;
    flex-wrap: wrap;

    margin-top: 30px;
}
.pinsights .left{ width: 45%; }
.pinsights .right{ width: 55%; }
.pinsights .left .datas{
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
}
.pinsights .left .datas > div{
    width: calc(50% - 15px);
    padding: 60px 15px 20px;
}
.pinsights .left .datas > div:hover{ background-color: #fff; }
.pinsights .left .datas > div:hover .ic{ color: #000; }
.pinsights.dashboard .datas > div:hover h3,
.pinsights.dashboard .datas > div:hover p,
.pinsights.dashboard .datas > div:hover .ic{ color: #000; }

.pinsights .left .datas > div .ic{
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
}
.pinsights .left .datas > div .progress{ height: 8px; }
.pinsights .left .datas > div .bar{
    background-color: rgba(0, 0, 0, 1);
    border-radius: 5px;
}
.pinsights.dashboard .datas > div h3{ margin-top: 15px; }
.pinsights.dashboard .datas > div p{ margin: 0 0 0px; }
.pinsights.dashboard .datas > div p.amount{ margin: 0 0 10px; font-weight: bold; }

/* First item */
.pinsights .left .datas > div:nth-child(n) .ic{
    background-color: rgba(57, 48, 137, 0.3);
    color: rgba(57, 48, 137, 1);
}
.pinsights .left .datas > div:nth-child(n) h3,
.pinsights .left .datas > div:nth-child(n) p{
    color: rgba(57, 48, 137, 1);
}
.pinsights .left .datas > div:nth-child(n) .progress{ background-color: rgba(57, 48, 137, 0.3); }
.pinsights .left .datas > div:nth-child(n) .bar{ background-color: rgba(57, 48, 137, 1); }

/* Second Item */
.pinsights .left .datas > div:nth-child(2n) .ic{
    background-color: rgba(218, 44, 56, 0.3);
    color: rgba(218, 44, 56, 1);
}
.pinsights .left .datas > div:nth-child(2n) h3,
.pinsights .left .datas > div:nth-child(2n) p{
    color: rgba(218, 44, 56, 1);
}
.pinsights .left .datas > div:nth-child(2n) .progress{ background-color: rgba(218, 44, 56, 0.3); }
.pinsights .left .datas > div:nth-child(2n) .bar{ background-color: rgba(218, 44, 56, 1); }

/* Third Item */
.pinsights .left .datas > div:nth-child(3n) .ic{
    background-color: rgba(91, 192, 235, 0.3);
    color: rgba(91, 192, 235, 1);
}
.pinsights .left .datas > div:nth-child(3n) h3,
.pinsights .left .datas > div:nth-child(3n) p{
    color: rgba(91, 192, 235, 1);
}
.pinsights .left .datas > div:nth-child(3n) .progress{ background-color: rgba(91, 192, 235, 0.3); }
.pinsights .left .datas > div:nth-child(3n) .bar{ background-color: rgba(91, 192, 235, 1); }


.pinsights .left .datas > div:nth-child(4n) .ic{
    background-color: rgba(34, 111, 84, 0.3);
    color: rgba(34, 111, 84, 1);
}
.pinsights .left .datas > div:nth-child(4n) h3,
.pinsights .left .datas > div:nth-child(4n) p{
    color: rgba(34, 111, 84, 1);
}
.pinsights .left .datas > div:nth-child(4n) .progress{ background-color: rgba(34, 111, 84, 0.3); }
.pinsights .left .datas > div:nth-child(4n) .bar{ background-color: rgba(34, 111, 84, 1); }

.pinsights .left .datas > div.active .ic{
    background-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
}
.pinsights .left .datas > div.active{ background-color: var(--primary); }
.pinsights .left .datas > div.active h3,
.pinsights .left .datas > div.active p{
    color: rgba(255, 255, 255, 1);
}
.pinsights .left .datas > div.active .progress{ background-color: rgba(255, 255, 255, 0.3); }
.pinsights .left .datas > div.active .bar{ background-color: rgba(255, 255, 255, 1); }

/* Graphs */
.pinsights .graphs{
    width: calc(100% - 15px);
    max-width: 100%;

    padding: 15px;
    background-color: #fff;
    border-radius: var(--box-radius);

    margin-top: 15px;
}
.pinsights .graphs .header h3{
    margin: 0;
    font-family: "DM Sans Bold";
}
.pinsights .graphs .highcharts-title{ font-family: "DM Sans Bold"; }
.pinsights .graphs .highcharts-subtitle{ font-family: "DM Sans"; }

/**
* Tous les achats
* Allachats
*/
.allachats .products{ padding-top: 0; }
.allachats .products .img{ width: 100px; }
.allachats .products .infos{ width: 40%;}
.allachats .product .price{ width: 30%; }
.allachats .product .infos p{
    color: #000;
    font-size: 1.0em;
}
.allachats .product .price h3{ font-size: 1.2em; }
.allachats .page-content .section .paginate{ padding-bottom: 0; }

/* Tab Chooser */
.dashboard .section .tab-chooser {
    position: absolute;
    top: 50%;
    right: 15px;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    list-style: none;
    margin: 0;
    padding: 0;

    margin-top: -16px;
    column-gap: 10px;
}
.tab-chooser li a{
    display: block;
    padding: 4px 12px;
    font-size: 0.85em;

    background-color: rgba(49, 133, 252, 0.1);
    text-decoration: none;
    border-radius: 16px;
}
.tab-chooser li.active a{
    background-color: rgba(49, 133, 252, 1);
    color: #fff;
}

#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 45px;
    background-color: transparent;
    margin-top: 30px;
    font-size: 0.8em;
}
#footer p{
    margin: 0 0;
}
#footer p b{ font-family: "DM Sans Bold"; }

/**
* Datatables
* Modifications
*/
.dataTables_wrapper .dataTables_length{
    margin-left: 30px;
    margin-bottom: 30px;
}
.dataTables_wrapper .dataTables_info{ margin-left: 30px; }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate{
    margin-right: 30px;
}
.table.datatable>:not(caption)>*>*,
table.dataTable.no-footer
{ border-bottom: none; }


/**
* Bootstrap
* Modification
* Styles
*/

/* Inputs & Fields */
/* Input 1 */
.form-control.styleone{ background-color: rgb(204, 204, 204, 0.4); }
.form-control.styleone:focus{
    box-shadow: none;
    border: 1px solid #ced4da;
    background-color: #fff;
}
select.form-control.styleone{
    -webkit-appearance: auto;
    appearance: auto;
}
.form-check-input.styleone:checked{
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input.styleone:focus{
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(247 94 102 / 25%);
}

/* Input 2 on dark backgrounds */
.form-control.styletwo{ background-color: transparent; }
.form-control.styletwo:focus{
    box-shadow: none;
    border: 1px solid #ced4da;
    background-color: #fff;
}
select.form-control.styleone{
    -webkit-appearance: auto;
    appearance: auto;
}
.form-check-input.styleone:checked{
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input.styleone:focus{
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(247 94 102 / 25%);
}

/* Input 3 toolbar */
select.form-control.stylethree,
input.form-control.stylethree{
    -webkit-appearance: none;
    appearance: none;

    position: relative;
    box-shadow: none;
    border: none;
}
select.form-control.stylethree:focus,
select.form-control.stylethree:focus + span,
input.form-control.stylethree:focus{
    border: none;
    color: var(--primary);
    background-color: rgb(223, 227, 245);
}
.custom-select{
    display: flex;
    flex-direction: row;
    position: relative;
    background-color: #fff;

    border-radius: 0.375rem;
}
.custom-select select{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 36px;

    position: relative;
    z-index: 2;
    background-color: transparent;
    padding-right: 35px;
}
.custom-select span{
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0.75rem;
    height: 36px;

    position: absolute;
    right: 0px;
    z-index: 1;
}


/* No border style */
.noborderstyle{
    border: none;
    box-shadow: none;
    outline: none;

    padding-left: 0;
    padding-right: 0;

    font-family: 'DM Sans';
    font-size: 1.0em;
    background-color: transparent;

    color: rgba(255, 255, 255, 1);
    border-radius: 0px;
}
.noborderstyle.bold{ font-family: "DM Sans Bold"; }
.noborderstyle.n1,
.noborderstyle.n1:focus{
    color: rgba(0, 0, 0, 1);
    font-size: 1.1em;
}
.noborderstyle:focus{
    box-shadow: none;
    outline: none;
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
}
.noborderstyle::placeholder{
    font-family: 'Raleway';
    color: rgba(255, 255, 255, 0.4);
}
.noborderstyle.n1::placeholder{
    color: rgba(0, 0, 0, 0.4);
    font-family: 'Raleway';
    /* font-size: 1.1em; */
}
select.noborderstyle{
    -webkit-appearance: auto;
    appearance: auto;
}
input.noborderstyle:-webkit-autofill,
input.noborderstyle:-webkit-autofill:hover,
input.noborderstyle:-webkit-autofill:focus,
textarea.noborderstyle:-webkit-autofill,
textarea.noborderstyle:-webkit-autofill:hover,
textarea.noborderstyle:-webkit-autofill:focus,
select.noborderstyle:-webkit-autofill,
select.noborderstyle:-webkit-autofill:hover,
select.noborderstyle:-webkit-autofill:focus {
    border: none;
    background-color: transparent;
}

/* Modals */
.modal.custom .modal-header{ border-bottom: none; }
.modal.custom#settingsModal .modal-header{
    flex-direction: column;
    align-items: flex-start;

    position: relative;
}
.modal.custom#settingsModal .modal-header .close{
    position: absolute;
    top: 15px;
    right: 15px;

    font-size: 2.0em;
    text-decoration: none;
    color: #888;
}
.modal.custom#settingsModal .modal-header .close:hover{ color: #111; }
.modal.custom .modal-header .modal-title{
    font-family: 'Raleway-Bold';
    font-size: 1.7em;
    color: var(--altprimary);
}
.modal.custom#settingsModal .modal-title{
    margin-bottom: 0;
    color: var(--primary);
}
.modal.custom#settingsModal .modal-title + p{
    margin-bottom: 0;
    margin-top: -5px;
}
.modal.custom .modal-header .spinner-border{
    border-color: var(--altprimary);
    border-right-color: transparent;
    display: none;
}
.modal.custom.loading .modal-header .spinner-border{
    display: inline-block;
}
.modal.custom .modal-body p{
    font-size: 1.2em;
}
.modal.custom .modal-footer{
    padding: 0;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);

    overflow: hidden;
    border-top: none;
}
.modal.custom .modal-footer a,
.modal.custom .modal-footer a:focus,
.modal.custom .modal-footer button,
.modal.custom .modal-footer button:focus{
    width: 50%;
    height: 100%;
    margin: 0;
    border-radius: 0px;

    font-family: 'Raleway-Bold';
    text-transform: uppercase;
    font-size: 1.6em;

    color: #fff;
}
.modal .list .item{
    padding: 7px 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.3);

    cursor: pointer;
    position: relative;
}
.modal .list .item::after{
    content: "\eb53";
    font-family: 'icomoon';

    display: none;
    width: 30px;
    height: 30px;

    font-size: 1.3em;
    justify-content: center;
    align-items: center;
    border-radius: 100%;

    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -15px;
    background-color: rgba(0, 0, 0, 0.3);

    font-weight: bold;
    border: 2px solid transparent;
}
.modal .list .item.selected::after{
    /* background-color: var(--success); */
    background-color: var(--primary);
    color: #fff;
    display: flex;
}
.modal .list .item:not(.selected):hover::after{
    display: none;
}
.modal .list .item.selected:hover::after{
    background-color: #fff;
    color: var(--primary);
}
.modal .list .item:hover{
    background-color: var(--primary);
    color: #fff;
    border-top: 1px solid var(--primary);
}
.modal .list .item:hover + .item{
    border-top: 1px solid var(--primary);
}
.modal .list .item p,
.modal .list .item small{
    margin: 0px;
    padding: 0;
}
.modal .list .item p{
    font-family: 'DM Sans Bold';
}
.modal .list .item small{
    display: block;
    margin-top: -5px;
}

/* Full Form Modal */
.form-modal .modal-body{ padding: 0; }
.form-modal .modal-body .row{
    margin-left: 0px;
    margin-right: 0px;
}
.form-modal .col.bt-sep{
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.form-modal .col.tp-sep{ border-top: 1px solid rgba(0, 0, 0, 0.3); }
.form-modal .col.lf-sep{ border-left: 1px solid rgba(0, 0, 0, 0.3); }
.form-modal .col.rt-sep{ border-right: 1px solid rgba(0, 0, 0, 0.3); }
.form-modal label{
    display: block;
    margin-top: 5px;

    font-family: 'Raleway';
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.1em;
}
.form-modal .col.required,
.form-modal .col.devise{ position: relative; }
.form-modal .col.required::after{
    position: absolute;
    bottom: 50%;
    right: 15px;

    margin-bottom: -5px;

    content: "\ebbf";
    /* font-family: 'Raleway-Light'; */
    font-family: 'icomoon';
    color: rgba(0, 0, 0, 0.9);
    font-size: 0.4em;
}
.form-modal .col.required.textarea::after{
    bottom: 14px;
    margin-bottom: 0px;
}
.form-modal .col.devise::after{
    position: absolute;
    bottom: 4px;
    right: 35px;
    margin-bottom: 0px;

    content: "FCFA";
    font-size: 1.2em;
    font-family: 'DM Sans Bold';
    color: rgba(0, 0, 0, 0.3);
}
.form-modal .col.textarea.nosizable textarea{ resize: none; }
.form-modal .errors{
    padding: 0px 0;
    display: block;
}
.form-modal .errors .error,
.form-modal .errors .success{
    background-color: var(--error);
    color: rgba(253, 255, 252, 0.6);

    font-family: 'Raleway-Bold';
    font-size: 0.8em;

    padding: 5px 15px 5px;
    border-bottom: 1px solid rgba(253, 255, 252, 0.4);
}
.form-modal .errors .error:hover,
.form-modal .errors .success:hover{
    color: rgba(253, 255, 252, 1);
}
.form-modal .errors .success{
    background-color: var(--success);
}


/* Buttons */
.btn-primary,
.btn-primary:hover ,
.btn-primary:focus {
    background-color: var(--primary);
    border: 2px solid var(--primary);
}
/* .btn-outline-primary{
    border-color: var(--primary);
    color: var(--primary);
}
.btn-outline-primary:hover{
    background-color: var(--primary);
    border-color: var(--primary);
} */
.btn-altprimary,
.btn-altprimary:hover ,
.btn-altprimary:focus {
    background-color: var(--altprimary);
    border: 2px solid var(--altprimary);
}
.btn-secondary,
.btn-secondary:hover ,
.btn-secondary:focus {
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
}
.btn-light,
.btn-light:hover ,
.btn-light:focus {
    background-color: var(--babypowder);
    border: 2px solid var(--babypowder);

    color: #111;
}
.btn-outline,
.btn-outline:hover ,
.btn-outline:focus {
    background-color: var(--babypowder);
    border: 2px solid rgb(17, 17, 17);

    color: #111;
}
.btn:hover{ opacity: .8; }
.btn.block{
    display: block;
    width: 100%;
}
.btn-outline:hover {
    background-color: rgb(17, 17, 17);
    color: #fff;
    opacity: 1;
}

.spinner-button.spinning .text,
.spinner-button:not(.spinning) .spinner-border{
    display: none;
}
.spinner-button:not(.spinning) .text,
.spinner-button.spinning .spinner-border{
    display: inline-block;
}

/* Spinners */
.spinner-border.thin{
    border-width: .13em;
}

/* Custom check */
.custom-check input[type="checkbox"]{
    width: 0;
    height: 0;
    visibility: hidden;
}
.custom-check label{
    width: 60px;
    height: 26px;
    margin-top: -26px;
    display:block;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    /* box-shadow: 0 0 20px #10499f50; */

    background-color: rgba(49, 133, 252, 0.2);
    /* background-color: rgba(0, 147, 0, 0.2); */
}
.custom-check label::after{
    content: "";
    width: 16px;
    height: 16px;
    background-color: #fff;
    position: absolute;
    border-radius: 70px;
    top: 5px;
    left: 5px;

    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2) !important;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2) !important;

    transition: cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.custom-check input:checked + label:after{
    left: calc(100% - 5px);
    transform: translateX(-100%);

}
.custom-check input:checked + label{ background-color: rgba(0, 147, 0, 1); }

/* Pagination */
.page-link{ color: var(--primary); }
.page-link:hover{ color: var(--primary); }
.page-item.active .page-link{
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-item.active .page-link:hover{ color: #fff; }

/**
* Custom
* Styles
*/
.z-depth-1{
    -webkit-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1) !important;
    -moz-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1) !important;
    box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.1) !important;
}
.z-depth-05{
    -webkit-box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.08) !important;
    -moz-box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.08) !important;
    box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.08) !important;
}