body{margin:0;}

ul.sidenav {
list-style-type:none;
margin:0;
padding:0;
width:25%;
background-color: red;
position: fixed;
height:100%;
overflow: auto;
}


ul.sidenav li a {
 display: block;
 color: white;
 padding: 8px 16px;
 text-decoration: none;
  font-weight:bold;
}

ul.sidenav li a.active {
 background-color: black;/* #2F5795; */  /* #4CAF50; */
 color: white;
}

ul.sidenav li a:hover:not(.active){
 background-color: #555;
 color: white;
}

div.content {
 margin-left: 25%;
 padding: 1px 16px;
 height: 1000px;
}

@media screen and (max-width:900px){
 ul.sidenav {
  width: 100%;
  height: auto;
  position: relative;
 }

ul.sidenav li a {
  float:left;
  padding: 15px;
}
  div.content {margin-left:0;}
}

@media screen and (max-width:400px){
 ul.sidenav li a{
  text-align:center;
  float:none;
 }
}

.case{width:60px;height:40px;}
.case1{width:125px;height:40px;}
.bouton{border: none; outline: none; width:50px; height:50px; border-radius: 5px; background-color: #f7f7f7; box-shadow: 0 3px #a8a8a8; font-size:18px;}
.bouton:active{box-shadow: 0 1px #a8a8a8;}
#toucheClear{background-color:red;}
#toucheEgale{background-color:lightgreen;width:108px;}
#toucheEntree{background-color:lightgreen;width:108px;}
.active{background-color:lightblue;color:white;}