@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);


.timetable {
  font-family: 'Open Sans', sans-serif;
  color: #efefef;
  overflow: hidden;
  /* text-align: center; */
  /* margin: auto; */
  position: relative;
  /* left: 23%; */
}

.day {
  width: 21%;
  height: 100vh;
  float: left;
  background-color: #fff;
  /* background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%); */
  background-size: 1px 20%;
}
.dayver {
  width: 0.5%;
  height: 100vh;
  float: left;
  background-color: #fff;
  /* background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%); */
  background-size: 1px 20%;
}

.day.time { width: 14%; }

.day_title {
  height: 10%;
  background-color: #34495e;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 10vh;
}

.hour {
  height: 8%;
  background-color: rgba(52, 73, 94,0.9);
  font-size: 14px;
  text-align: center;
  line-height: 37px;
  border-bottom: 1px solid;
}
.hour.supv {
    height: 8%;
}
.class {
  width: 100%;
  height: 8vh; /*90min*/
  line-height: 15vh;
  /* background-color: magenta; */
  font-size: 2vw;
  font-weight: 300;
  padding-left: 10px;
}

.class.short { height: 7.5vh; line-height: 7.5vh; } /* 45min class */
.class.b1 {height: 7.8vh;line-height: 7.5vh;} /* after 15 min break */
.class.b2 {line-height: 0.5vh;height: 7.9vh;} /* after 45 min break */
.class.b3 {height: 7.7vh;line-height: 7.5vh;} /* after 2x45 min break */
.class.vide {margin-top: 0.2vh;} /* after 3x45 min break */
.gap{margin-top:1vh;}
.green { background-color: #2ecc71; }
.turquoise { background-color: #1abc9c; }
.navy { background-color: #34495e; }
.blue { background-color: #3498db; }
.purple { background-color: #9b59b6; }
.grey { background-color: #bdc3c7; color: #202020; }
.gray { background-color: #7f8c8d; }
.red { background-color: #e74c3c; }
.orange { background-color: #f39c12; }
.yellow { background-color: #f1c40f; color: #303030; }
.vertclair{  background-color:#CCFFCC;}
.bluedur{ background-color:#3366FF;}
.spacing {background-color: white;}
.couleura{background-color: #d3d1d0;}
.couleurb{background-color: #5a6a7b;}



/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
  width: initial;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 110%;
  left: 50%;
  margin-bottom: 10px;
  margin-left: -75px;
  padding: 7px 5px;
  width: 140px;
  background-color: black;
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 110%;
  left: 50%;
  margin-left: -7px;
  margin-bottom: 3px;
  width: 0;
  border-top: 7px solid black;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  bottom: 90%;
}