#calendrier-cols {
    margin: 20px 0;
    display:flex;
    justify-content:space-between;
}

#calendrier {
    width:70%;
    margin:auto;
}

#calendrier-jours {
    transition:0.5s ease-in all;     
}

.calendrier-header {

    background-color:var(--primary-base);
    padding: 5px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin:0!important;
}

.calendrier-title {
    font-weight:500;
    text-transform: capitalize;
    margin:0!important;
}

.calendrier-nav {
    display:flex;
    gap:10px;
    margin:0!important;
}

.calendrier-nav > div, .calendrier-nav > a {
    cursor:pointer;
    padding:4px;

    background-color:var(--primary-base);
    color:#fff;
    font-weight:500;
    font-size: 20px;
    border-radius:2px;
    transition:ease-in 0.2s all;
    height:24px;
    width:24px;
    display:flex;
    justify-content:center;
    align-items:center;  
    text-align:center;  
    margin:0!important;
}
.calendrier-nav > div:hover, .calendrier-nav > a:hover {
    background-color:var(--primary-tint-1);  
}

.calendrier-header div {
    color:#fff;

}

#calendrier-jours-header, #calendrier-jours  {
    display:flex;
    flex-wrap:wrap;
    margin:0!important;
}

#calendrier-jours-header > div {
    width: calc(100% / 7);
    border:1px solid rgba(80,80,80,0.9);
    border-bottom:0;
    background-color:rgba(80,80,80,0.9);
    color:#fff;
    text-align:center;
    padding:2px 4px;
    margin:0!important;
    
}

#calendrier-jours > div {
    width: calc(100% / 7);
    border:1px solid rgba(80,80,80,0.9);
    height:50px;
    position:relative;
    
    transition:0.2s ease-in all;
    margin:0!important;
}
#calendrier-jours > div[data-weekend=true] {
    background-color:rgba(80,80,80,0.1);
}
#calendrier-jours > div[data-jour_ferie=true] {
    background-color:rgba(80,80,80,0.1);
}
#calendrier-jours > div[data-today=true] .calendrier-jour-indice, #calendrier-jours > div[data-today=true]:hover .calendrier-jour-indice {
    background-color: var(--primary-base);
}

#calendrier-jours > div.indisponible, #calendrier-jours > div.indisponible:hover {
    background-color: #a44;
    cursor:default;
}
#calendrier-jours > div.prereservee, #calendrier-jours > div.prereservee:hover {
    background-color: #FF9900;
    cursor:default;
}
#calendrier-jours > div.disponible {
    background-color: #FFF;
    cursor:pointer;
}
#calendrier-jours > div.disponible:hover {
    background-color: #FFF;
}

#calendrier-jours > div.passe {
    background-color:rgba(200,200,200,0.5)!important;
}
#calendrier-jours > div.passe .calendrier-jour-indice {
    background-color:rgba(200,200,200,0.2);!important;
}

#calendrier-jours > div:hover {
    background-color:rgba(200,200,200,0.1);
}
#calendrier-jours > div:hover .calendrier-jour-indice {
    /*background-color:rgba(80,80,80,0.9);*/
}
.calendrier-jour-indice {
    position:absolute;
    top:5px;
    left:50%;
    margin-left:-10px;
    width:20px;
    text-align:center;
    padding:2px;
    font-size:0.6em;
    background-color:rgba(80,80,80,0.4);
    color:#fff;
    border-radius:2px;
}

.calendrier-jour-autre-mois {
    background-color:rgba(200,200,200,0.2)!important;
}

.calendrier-jour-events {
    margin-top:30px;
}
.calendrier-jour-event {
    font-size:0.8em;
    display:flex;
    align-items:center;
    gap:4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.calendrier-jour-event::before {
    content:'';
    width:12px;
    height:12px;
    min-width: 12px;
    background-color:#888;
    margin-left:4px;
}

.calendrier-jour-event span {
    font-weight:300;
    color:#777;
}

.calendrier-jour-events-plus {
    background-color:rgba(80,80,80,0.9);
    color:#fff; 
    padding:2px 0 0 16px; 
}
.calendrier-jour-events-plus::before {
    display:none;
}



@media (max-width: 900px) {
  #calendrier-cols {
      flex-direction:column;
      gap:20px;  
  }

  #calendrier {
      width:100%;
  }
  #calendrier-jours > div {
      width: calc(100% / 7);
      height:40px;
  }
}