td button[data-view=lecon-lexique]{
  color: var(--primaire);
  background-color: var(--primaire-100) !important;
}
td button[data-view=lecon-exercice]{
  color: var(--bs-black);
  background-color: var(--gray-200) !important;
}
td button[data-view=lecon-evaluation]{
  color: var(--danger);
  background-color: var(--danger-100) !important;
}



input[data-source]{
  padding-right:2rem;
}
input[data-label]{
  padding-right:2.5rem;
}
input[data-source] + em,input[data-label] + em{
  position:absolute;
  color: var(--bs-gray-600);
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
}


/* .chosen-container i.icon-hourglass-outline {
  animation: pulse 1.5s infinite ease-in-out;
}
.chosen-container i.icon-hourglass-outline::before {
  color: var(--bs-danger)!important;
} */

.table-editable {
  position: relative;
  overflow-y: hidden;
}
.table-row-add,.table-row-mod, .table-row-remove,.table-collapse {
  cursor: pointer;
  font-size: 1rem;
}






/* Loading line scale pulse out */
.line-scale-pulse-out > div {
      background-color: var(--bs-black);
      width: 0.125rem;
      height: 2.1875rem;
      border-radius: 0.125rem;
      margin: 0.125rem;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
              animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); 
}
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
          animation-delay: -0.4s !important; 
}
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    -webkit-animation-delay: -0.2s !important;
            animation-delay: -0.2s !important; 
}
@-webkit-keyframes line-scale-pulse-out {
  0% {-webkit-transform: scaley(1);transform: scaley(1); }
  50% {-webkit-transform: scaley(0.4);transform: scaley(0.4); }
  100% {-webkit-transform: scaley(1);transform: scaley(1); } 
}  
@keyframes line-scale-pulse-out {
    0% {-webkit-transform: scaley(1); transform: scaley(1);}
    50% {-webkit-transform: scaley(0.4); transform: scaley(0.4);}
    100% {-webkit-transform: scaley(1); transform: scaley(1);} 
}
/*:::::::::::: Pieds de page :::::::::::: */
.stat-container{
  padding: 1.5rem 1rem;
  border-radius: .5rem;
  margin-bottom: 1rem;
}
.stat-container article{
  background: #fff;
  border-radius: .5rem;
  padding: 1rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--bs-gray-300);
}
.stat-container article.bg-vert{
  background: rgba(30, 169, 24, 0.125);
}
.stat-container .article-header{
  font-size: 1.5rem;
  font-family: 'AirbnbCerealBold';
  margin-bottom: 1rem;
}
.stat-container .article-consulter-link{
  font-size: .85rem;
  font-family: 'AirbnbCerealBook';
  background: var(--e4e5e6);
  font-family: 'AirbnbCerealBook';
  padding: .25rem 1rem;
  border-radius: 1rem;
}
.stat-container .article-link{
  font-size: .85rem;
  color: var(--bs-success);
}
.stat-container .article-link i{
  font-size: .85rem;
  font-family: 'AirbnbCerealMedium';
  background: var(--color-111);
  color: #fff;
  border-radius: .25rem;
  padding: .0125rem .125rem;
  width: 1.5rem;
  height: 1.15rem;
}
.stat-container article .article-bubble i{
  font-size: 1.25rem;
  background: var(--color-111);
  color: #fff;
  border-radius: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: .5rem;
}
.stat-container article .article-bubble p{
  font-size: 1rem;
  color: var(--primaire);
  font-family: 'AirbnbCerealMedium';
}
.stat-container article .article-title{
  font-size: 1rem;
  font-family: 'AirbnbCerealLight';
}
.stat-container .article-value{
  font-size: 1.5rem;
  font-family: 'AirbnbCerealMedium';
}






/* Notification input style 
.notification {
  position: fixed;
  top: 1.25rem;
  right: -18.75rem;
  min-width: 15.625rem;
  background-color: #3f9f42;
  color: #fff;
  padding:.5rem 1rem;
  border-radius: .25rem;
  transition:  0.5s;
  font-size: .85rem;
  font-family: 'AirbnbCerealBook';
  z-index: 102;
}
.notification.error{
  background-color: #ff4040;
}
.notification.active{
  right: 2rem;
}*/
/* Search input style 
.search-container i{
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
}
input.search-input,input.search-input:focus{
  background: var(--bs-gray-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  background-position:1rem center;
  border: 0;
  padding-left: 2.5rem;
  font-size: .85rem;
  width: 30rem;
  color: var(--bs-gray-900);
  height: 2.5rem;
  border-radius: 2rem;
}
input.search-input::placeholder {
  color:var(--bs-black);
  font-size: .85rem;
  font-family: 'AirbnbCerealBook';
  white-space: nowrap;
}*/
/* Add - Export -Import button style */
.add-btn,.panel-btn-submit button{
  padding: .5rem;
  background: #fff;
  border: 1px dashed var(--bs-gray-600);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 10.5rem;
}
.add-btn:hover{
  background: var(--primaire-100);
}
.add-btn i{
  background: var(--bs-gray-100);
  padding: 1rem;
  border-radius: 100%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.add-btn img{
  width: 2rem;
}
.add-btn span{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem!important;
  line-height: 1.1;
}
/* Statistique container style */
.stat-container .stat-container-table{
  background: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: .5rem;
  border: 1px solid var(--bs-gray-300);
  /* height: 30rem; */
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  position: relative;
}
.stat-container .stat-container-table .graphe-zone-cooperative{
  max-height: 30rem;
}
.stat-container .stat-container-table .download{
  background: #fff;
  background:var(--primaire-100);
  color: var(--bs-success);
  font-size: .8rem;
  padding: .5rem 1.5rem !important;
  border:0;
  border-radius: .5rem ;
  /* position: absolute;
  top: 1rem;
  right: 1rem; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.3125rem;
  overflow: hidden;
}
.stat-container .stat-container-table .download:hover
.stat-container .stat-container-table .download:focus,
.stat-container .stat-container-table .download:active{
  background: var(--primaire);
}
.stat-container .stat-container-table .download i{
  font-size: 1rem;
}
.stat-container .stat-container-table .download:disabled {
  background-color: #ccc; /* Light gray background */
  color: #666;            /* Darker gray text */
  cursor: not-allowed;    /* Change cursor to indicate disabled state */
  opacity: 0.5;           /* Make it slightly transparent */
}
.done-container {
  /* display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0; */
  margin-bottom: 1rem;
}
.done-container .done-btn-container{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.done-container h2{
  font-size: .8rem;
  font-family: 'AirbnbCerealMedium';
  margin-bottom: .5rem;
}
.done-btn,.done-all-btn {
  background: var(--bs-gray-300);
  border: 0;
  padding: .25rem .5rem;
  font-size: .8rem;
  border-radius: .25rem;
  /* margin-right: 1rem; */
}
.done-btn:last-child {margin-right: 0;}
.done-all-btn {
  margin-right: 0;
  margin-left: auto;
  background-color: transparent;
  color: var(--bs-success);
  font-family: 'AirbnbCerealMedium';
  padding: 0;
  font-size: .7rem;
}
.container-statistique canvas:not(.not-width){
  height: 100% !important;
  width: 100% !important;
}
.stat-container .stat-container-table h1{
  font-family: 'AirbnbCerealMedium';
  font-size: 1.25rem;
  /* margin:1rem 0; */
  text-align: center;
}
.stat-container .stat-container-table dt{
  font-size: .75rem;
  color: var(--7f7c90);
  background-color: var(--fafafd);
  padding: .25rem .25rem;
}
.stat-container .stat-container-table dd{
  font-size: .75rem;
  color: #333;
  padding: .75rem .25rem !important;
  border-top: 1px solid var(--e4e5e6);
  display: flex;
  align-items:center;
}
/* .stat-container .stat-container-table dd em{
  border: 1px solid var(--e4e5e6);
  width: 1rem;
  display: flex;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .6rem;
  font-family: 'AirbnbCerealMedium';
  color: var(--primaire);
} */
.stat-container .stat-container-table dd em{
  border-radius: .25rem;
  font-size: .75rem;
  font-family: 'AirbnbCerealMedium';
  color: var(--primaire-900);
  background: var(--primaire-100);
  padding: .25rem .5rem;
}
.stat-container .stat-container-table dd .categorie{
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  display: flex;
  border: 1px solid var(--e4e5e6);
  padding: .15rem;
}
.stat-container .stat-container-table dd .bubble{
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
}
.stat-container .stat-container-table dd .bubble + span{
  font-family: 'AirbnbCerealMedium';
}

.stat-container .stat-bar-container{
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-right: .75rem;
}
.stat-container .stat-bar-container:last-child{
  margin-right:0;
}
.stat-container .stat-bar-container .stat-bar-value{
  background:var(--primaire-200);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
}
.stat-container .stat-bar-container.stat-bar-max .stat-bar-value{
  background:var(--primaire-700);
}
.stat-container .stat-bar-container .stat-bar-periode{
  background: var(--primaire-050);
  border-radius: .5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .6rem;
  font-family: 'AirbnbCerealMedium';
  color: var(--primaire);
  height: 2rem;
  margin-top: .5rem;
}
.stat-container .stat-bar-container.stat-bar-max .stat-bar-periode{
  background: var(--bs-gray-800);
  color: #fff;
}
.stat-container .stat-bar-container .stat-bar-periode span:first-child{
  padding-top: .5rem;
}.stat-container .stat-bar-container .stat-bar-periode span:last-child{
  padding-bottom: .5rem;
}
/*:::::::::::: Statistique  :::::::::::: */
.container-statistique h1{
  font-size: 1.5rem;
  font-family: 'AirbnbCerealMedium';
}
.container-statistique h6 {
  font-size: .95rem;
  font-family: 'AirbnbCerealBook';
  color: var(--bs-gray-900);
}
.container-statistique .police-btn{
  background: var(--bs-gray-400);
  border-radius: 1rem;
  padding: .75rem .75rem;
  margin-top:1.5rem;
  color: var(--bs-gray-900);
  font-size: .85rem;
  font-family: 'AirbnbCerealMedium';
  border: 0;
}
.container-statistique .police-btn.active {
  background-color: var(--primaire);
  color: #fff;
}
.container-statistique .police-btn span {
  background: #fff;
  width: 2rem;
  height: 2rem;
  color: var(--primaire);
  font-family: 'AirbnbCerealMedium';
  font-size: .95rem;
  border-radius: 1.5rem;
  margin-right: 1rem;
}
.container-statistique .police-btn h2 {
  font-size: 1rem;
  margin-bottom: .25rem;
}
.container-statistique .police-btn.active h2 {
  color: #fff;
}
.container-statistique .police-btn p {
  font-size: .8rem;
  font-family: 'AirbnbCerealBook';
  white-space: nowrap;
}
.container-statistique .police-btn.active p {
  color: rgba(255,255,255,.75);
}


.container-lecon-item{
  color: #000;
  border: 0;
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  background-color: #fff;
  font-family: "AirbnbCerealMedium";
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container-lecon-item i,.container-lecon-item img{
  width: 3rem;
}
.container-lecon-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container-lecon-item em {
  display: block;
  font-family: "AirbnbCerealBook";
  font-size: .9rem;
}
.container-lecon-item button {
  margin-left: auto;
  border: 0;
  background-color: transparent;
  color: var(--bs-gray-700);
  font-size: 1.25rem;
  padding: 0;
}
.container-lecon-item.lecon-1  i { background-color: var(--lecon-1-100) !important;  color: var(--lecon-1) !important; }
.container-lecon-item.lecon-2  i { background-color: var(--lecon-2-100) !important;  color: var(--lecon-2) !important; }
.container-lecon-item.lecon-3  i { background-color: var(--lecon-3-100) !important;  color: var(--lecon-3) !important; }
.container-lecon-item.lecon-4  i { background-color: var(--lecon-4-100) !important;  color: var(--lecon-4) !important; }
.container-lecon-item.lecon-5  i { background-color: var(--lecon-5-100) !important;  color: var(--lecon-5) !important; }
.container-lecon-item.lecon-6  i { background-color: var(--lecon-6-100) !important;  color: var(--lecon-6) !important; }
.container-lecon-item.lecon-7  i { background-color: var(--lecon-7-100) !important;  color: var(--lecon-7) !important; }
.container-lecon-item.lecon-8  i { background-color: var(--lecon-8-100) !important;  color: var(--lecon-8) !important; }
.container-lecon-item.lecon-9  i { background-color: var(--lecon-9-100) !important;  color: var(--lecon-9) !important; }
.container-lecon-item.lecon-10 i { background-color: var(--lecon-10-100) !important; color: var(--lecon-10) !important; }
.container-lecon-item.lecon-11 i { background-color: var(--lecon-11-100) !important; color: var(--lecon-11) !important; }
.container-lecon-item.lecon-12 i { background-color: var(--lecon-12-100) !important; color: var(--lecon-12) !important; }
.container-lecon-item.lecon-13 i { background-color: var(--lecon-13-100) !important; color: var(--lecon-13) !important; }
.container-lecon-item.lecon-14 i { background-color: var(--lecon-14-100) !important; color: var(--lecon-14) !important; }
.container-lecon-item.lecon-15 i { background-color: var(--lecon-15-100) !important; color: var(--lecon-15) !important; }
.container-lecon-item.lecon-16 i { background-color: var(--lecon-16-100) !important; color: var(--lecon-16) !important; }
.container-lecon-item.lecon-17 i { background-color: var(--lecon-17-100) !important; color: var(--lecon-17) !important; }
.container-lecon-item.lecon-18 i { background-color: var(--lecon-18-100) !important; color: var(--lecon-18) !important; }
.container-lecon-item.lecon-19 i { background-color: var(--lecon-19-100) !important; color: var(--lecon-19) !important; }
.container-lecon-item.lecon-20 i { background-color: var(--lecon-20-100) !important; color: var(--lecon-20) !important; }
.container-lecon-item.lecon-21 i { background-color: var(--lecon-21-100) !important; color: var(--lecon-21) !important; }
.container-lecon-item.lecon-22 i { background-color: var(--lecon-22-100) !important; color: var(--lecon-22) !important; }
.container-lecon-item.lecon-23 i { background-color: var(--lecon-23-100) !important; color: var(--lecon-23) !important; }
.container-lecon-item.lecon-24 i { background-color: var(--lecon-24-100) !important; color: var(--lecon-24) !important; }
.container-lecon-item.lecon-25 i { background-color: var(--lecon-25-100) !important; color: var(--lecon-25) !important; }
.container-lecon-item.lecon-26 i { background-color: var(--lecon-26-100) !important; color: var(--lecon-26) !important; }
.container-lecon-item.lecon-27 i { background-color: var(--lecon-27-100) !important; color: var(--lecon-27) !important; }
.container-lecon-item.lecon-28 i { background-color: var(--lecon-28-100) !important; color: var(--lecon-28) !important; }
.container-lecon-item.lecon-29 i { background-color: var(--lecon-29-100) !important; color: var(--lecon-29) !important; }
.container-lecon-item.lecon-30 i { background-color: var(--lecon-30-100) !important; color: var(--lecon-30) !important; }
.container-lecon-item.lecon-31 i { background-color: var(--lecon-31-100) !important; color: var(--lecon-31) !important; }
.container-lecon-item.lecon-32 i { background-color: var(--lecon-32-100) !important; color: var(--lecon-32) !important; }
.container-lecon-item.lecon-33 i { background-color: var(--lecon-33-100) !important; color: var(--lecon-33) !important; }
.container-lecon-item.lecon-34 i { background-color: var(--lecon-34-100) !important; color: var(--lecon-34) !important; }
.container-lecon-item.lecon-35 i { background-color: var(--lecon-35-100) !important; color: var(--lecon-35) !important; }
.container-lecon-item.lecon-36 i { background-color: var(--lecon-36-100) !important; color: var(--lecon-36) !important; }
.container-lecon-item.lecon-37 i { background-color: var(--lecon-37-100) !important; color: var(--lecon-37) !important; }
.container-lecon-item.lecon-38 i { background-color: var(--lecon-38-100) !important; color: var(--lecon-38) !important; }

[contenteditable="true"] {
  position: relative;
}

[contenteditable="true"][data-action*="-capsule"]{
  padding:.125rem .75rem;
  font-size: .8rem;
  min-width: 3.5rem;
}
[contenteditable="true"]:before {
  content: "\ea8d";
  font-family: "ionicons";
  position: absolute;
  top: .25rem;
  right: .25rem;
  color: var(--bs-red);
  font-size: .8rem;
}
[contenteditable="true"][data-action*="-capsule"]:before {
    content: ""!important;
}
[contenteditable="true"].done:before {
  content: "\ea21";
  color: var(--bs-success);
}
[contenteditable="true"].saving {
  opacity: 0.5;
}
[contenteditable="true"].saving:before {
  content: "\eb7f";
  color: var(--bs-red);
  animation: pulse 1.5s infinite ease-in-out;
}
[contenteditable="true"]:hover {
  background-color: var(--bs-gray-200)!important;
  border:1px solid var(--primaire2c);
  cursor: pointer;
}
[contenteditable="true"]:focus {
  outline: none;
  border:1px solid var(--primaire2c);
}
[contenteditable="true"].contenteditable {
  border-left: 3px solid var(--bs-gray-300);
}
table .titre[contenteditable="true"]{
  font-size: 1.75rem;
  font-family: "AirbnbCerealMedium";
  background-color: #fff;
  border-radius: .5rem;
  padding: 1.25rem 1.875rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
table th.sous-titre,table td.sous-titre{
  font-size: .95rem;
  font-family: "AirbnbCerealMedium";
  padding: .5rem;
}
.table-section{
  display: none;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  background-color: #fff;
  padding: 1rem;
  border-radius: .5rem;
  width: 100%;
}
.table-section.active{display: block;opacity: 1;}
.lecon-section-btn{
    color: #000;
    border: 0;
    padding: .75rem 1rem;
    /* border-radius: .5rem; */
    font-size: .95rem;
    flex: 1;
    background-color: transparent;
    font-family: "AirbnbCerealMedium";
    text-align: center;
}
.lecon-section-btn.active{
  background-color: var(--primaire);
  color: #fff;
  border-radius: 5rem;
}
.container-capsule{
  background-color: var(--bs-gray-100);
  background-color: #fff;
  color: var(--bs-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:.25rem;
  border: .5px solid var(--bs-gray-300);
  font-family: "AirbnbCerealBook";
  font-size: .8rem;
  min-width: 6.1rem;
  min-height: 2rem;
  /* margin: .25rem .5rem; */
}
.container-capsule button{
  padding: .5rem;
  padding-right: .75rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex: 0 0 auto;
  border: 0;
  background-color: transparent;
}
.container-capsule button.btn-new-capsule{
  margin: 0;
  border-radius: 0 !important;
  width: 100%;
  padding: 0 !important;
  background-color: var(--primary-100);
  height: 100%;
}
.container-capsule img{width: .8rem;}
.container-capsule i{font-size: 1.15rem;color: #1565C0 !important;}
.container-capsule button.btn-sup-capsule i{color: var(--bs-danger) !important;}