:root 
{ 
 --members-column-width: 160px;
 --members-name-align:center;
}

div
{
 user-select: none;
}

#titre
{
 margin:0;
 position:absolute;
 left:0;
 right:0;
 height:100%;
} 

#titre span
{
 position:absolute;
 display:block
 font-weight:bold;
 text-align:center;
 font-size:24pt;
 left:0;
 right:50px;
 text-align:center;
 white-space:nowrap;
 text-overflow:ellipsis;
 overflow:hidden;
} 

#titre img#config-panel
{
 position:absolute;
 top:5px;
 right:10px;
}

#panneau-haut
{
 position:absolute;
 left:0px;
 top:0px;
 right:0;
 height:50px;
}

#panneau-central
{
 position:absolute;
 left:5px;
 top:50px;
 right:0;
 bottom:0;

}

#panneau-central div.membres  
{
 position:absolute;
 left:0;
 top:93px;
 bottom:0;
 width:var(--members-column-width);
 overflow:hidden;
} 

#panneau-central div.dates  
{
 position:absolute;
 left:var(--members-column-width);
 top:0;
 right:0;
 height:92px;
 overflow:hidden;
} 

#panneau-central div.reservations  
{
 position:absolute;
 left:var(--members-column-width);
 top:93px;
 bottom:0;
right:0;
  overflow:auto;

} 

#panneau-central div.membres > div
{
 position:absolute;
 height:50px;
 line-height:50px;
 width:var(--members-column-width);
 border:1px dotted silver;
 text-align:var(--members-name-align);
  background-color: whitesmoke;
  color:navy;
  white-space:nowrap;
 text-overflow:ellipsis;
 overflow:hidden;
}

#panneau-central div.membres > div.impaire
{
  background-color: #E6E6E6;
}

#panneau-central div.membres > div.rupture
{
 border:none;
 border-left:1px dotted silver; 
 height:30px;
 line-height:30px;
 background-color:#5d6d7e; 
 margin-top:10px;
 color:white;
 font-weight:bold;
}

#panneau-central div.membres > div.rupture:first-child
{
 border-top:1px dotted silver; 

}


#panneau-central div.dates > div
{
 position:absolute;
 height:93px;
 width:80px;
 border-top:1px dotted silver;
 border-right:1px dotted silver;
 text-align:center;
}   

/* Cellule de réservation */
#panneau-central div.reservations > div
{
 position:absolute;
 height:50px;
 width:80px;
 /*border:1px dotted silver;*/
 border:1px solid white;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color:whitesmoke;
}

#panneau-central div.reservations > div.impaire
{
 background-color:#E6E6E6;
}

#panneau-central div.reservations > div.checked
{
 background-color: #d1f2eb ;
}

#panneau-central div.reservations > div.rupture
{
 border:none;
 border-right:1px dotted silver; 

 width:100%;
 text-align:center;
  height:30px;
  background-color:#5d6d7e;
  color:white;
  font-weight:bold;
  margin-top:10px;
}

#panneau-central div.resa:hover
{
 cursor:pointer;
 /*opacity:0.5;*/
 filter: brightness(0.8);
}


#panneau-menu
{
 position:absolute;
 width:200px;
 top:50px;
 height:310px;
 right:10px;
 background-color:bisque;
 font-size:16pt;
 color:navy;
 font-weight:bold;
  -moz-border-radius : 4px 4px 4px 4px;
 -webkit-border-radius:4px 4px 4px 4px;
 border-radius:4px 4px 4px 4px; 
 box-shadow: 3px 3px 5px silver;
}

#panneau-menu table
{
 width:100%;
 margin-top:15px;
}

#panneau-menu td
{
 padding:10px;
}

#panneau-menu tr:hover
{
 background-color:orange;     
 color:white;
 cursor:pointer;
}

.categorie
{
 background-color:#5d6d7e; 
 color:white;
}

.selection
{
 outline:2px solid red;
}

#dlgParametreMembres tr:hover, #dlgParametreCalendrier tr:hover, #dlgParametreEvenements tr:hover  
{
 background-color:silver; 
 color:white;
}

.categorie tr
{
 width:100%;
}

.categorie td input
{
 background-color:transparent;
 color:white;
 width:98%;
}



#dlgParametreMembres td, #dlgParametreCalendrier td, #dlgParametreEvenements td
{
 padding:5px;
}

.width-members 
{
 position:absolute;
 left: var(--members-column-width);
 width:0;
 top:0;
 bottom:0;
 width:5px;
 background-color:orange;
}

.width-members:hover 
{
 cursor:col-resize;
}

/*-------------------------------------------------*/
button.menu-button 
{
 border:solid 1px #04AA6D;

 
 padding:5px;
 background-color: #04AA6D;
 color:white;
 font-family:robot;
 font-size:17px;
 font-weight:bold;
 border-radius: 5px;
 
 display:inline-bloc;
 margin-left:5px;
 margin-bottom:20px; 
 height:60px;
}

button.menu-button:hover
{
 outline: 0;
 border-color: #059862;
 background-color: #059862;
 text-decoration: none;
 cursor:pointer;
}

button.menu-button.selected
{
  background-color: #066218;
  text-decoration:underline;
}


/*-------------------------------------------------*/
button.exec-button 
{
 border:solid 1px #fead0d;

 padding:10px 10px;
 background: linear-gradient(#F16529, #E44D26);
 color:white;
 font-family:robot;
 font-size:17px;
 font-weight:bold;
 border-radius: 5px;
}

button.exec-button:hover
{
 outline: 0;
 border-color: #ff9c00;
 background: linear-gradient(#E44D26, #F16529);
 text-decoration: none;
 cursor:pointer;
}

/*-------------------------------------------------*/
.membres .selected
{
 filter: brightness(0.9); 
}

.week1
{
 background-color:#E6E6E6;
 color:navy;
}

.week2
{
 background-color:#F2F2F2;
 color:#8A0808;
}