.dash-nav-dropdown-item { padding: 8px 20px 8px 20px; }
.card-header { cursor: default; }
.input-group-text { border-width: 1px 0 1px 1px; }
/*input:invalid+span:after { content: '✖'; padding-left: 5px; }*/
/*input:valid { border:1px solid green; }*/
input:invalid { border:1px solid red; }
/*input:valid+span:after { content: '✓'; padding-left: 5px; }*/

.notify-badge{

   position: absolute;
   text-align: center;
   border-radius: 30px;
   padding:5px 10px;
   font-size:10px;
   z-index: 1;
}

.float-right { float: right; }
.float-left { float: left; }

.pointer { cursor: pointer }
.hidden { display:none }
.showed { display:flex }

/* RGPD cookies */
#cookies {
   position: fixed;
   bottom: 0;
   z-index: 1500;
   display: inline-block;
   padding: 20px;
   width: 100%;
   min-height: 64px;
   background-color: #fecb72;
   -webkit-transition: top .4s ease-in;
   transition: top .4s ease-in;
}

/* shadow */
/* v1.86 - 30/12/2019 */

@keyframes shadow-pulse-up
{
   0% { box-shadow: 0 0 0 0px rgba(0, 255, 0, 0.2); }
   100% { box-shadow: 0 0 0 35px rgba(0, 255, 0, 0); }
}
@keyframes shadow-pulse-dn
{
   100% { box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.2); }
   0% { box-shadow: 0 0 0 35px rgba(255, 0, 0, 0); }
}
.pulse { border-radius: 50%; }
.pulse.up { color:green; animation: shadow-pulse-up 1s infinite; }
.pulse.dn { color:red; animation: shadow-pulse-dn 1s infinite; }

.b { font-weight: bold;}

.red, .up { color:red; }
.dn { color:greenyellow; }
.pshop, .zz { color:yellow; }
.wapp { color:green; }

/*--------------------------------------------------*/
.price { text-align: center;}
.prixe { text-align: center;}

/*--------------------------------------------------*/
   /* The Modal (background) */
   .modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

   /* Modal Content/Box */
   .modal-content {
      /* background-color: #fefefe; */
      color:white;
      font-size:3rem;
      font-weight:900;
      text-align:center;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      /* border: 1px solid #888; */
      width: 50%; /* Could be more or less, depending on screen size */
   }

   .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 9999; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }

   /* Modal Content/Box */
   .modal-contents {
      /* background-color: #fefefe; */
      color:white;
      font-size:3rem;
      font-weight:900;
      text-align:center;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      /* border: 1px solid #888; */
      width: 50%; /* Could be more or less, depending on screen size */
   }
/*--------------------------------------------------*/
canvas { display: block; position: relative; z-index: 1; pointer-events: none; position: fixed; top: 0; }
/*--------------------------------------------------*/
.prixchoc { color:red; background:yellow; }

.dash-nav-item.active i.red,
.dash-nav-item.active span.red { color : white !important }
.dash-nav-item.active i.pshop,
.dash-nav-item.active span.pshop { color : yellow !important }

:root {
   /* Not my favorite that line-height has to be united, but needed */
   --lh: 1.2rem;
 }

html {
/*
max-width: 22rem;
margin: 2rem auto;
*/
line-height: var(--lh);
}
.truncate-overflow {
   --max-lines: 4;
   position: relative;
   max-height: calc(var(--lh) * var(--max-lines));
   overflow: hidden;
   padding-right: 1rem; /* space for ellipsis */
 }
 .truncate-overflow::before {
   position: absolute;
   content: "...";
   /* tempting... but shows when lines == content */
   /* top: calc(var(--lh) * (var(--max-lines) - 1)); */

   /*
   inset-block-end: 0;
   inset-inline-end: 0;
   */
   bottom: 0;
   right: 0;
 }
 .truncate-overflow::after {
   content: "";
   position: absolute;
   /*
   inset-inline-end: 0;
   */
   right: 0;
   /* missing bottom on purpose*/
   width: 1rem;
   height: 1rem;
   /* background: white; */
 }