/************************************************************************/
/* PSEUDO-TOGGLE BUTTON MADE OF ASP.NET CHECKBOX AND CSS3*/
div.onOffToggleButton input[type=checkbox] {
  display: none;
  white-space: nowrap;
}
div.onOffToggleButton label {
  display: block;
  float: left;
  cursor: pointer;
}
/* set the size of the pseudo-toggle button control */
div.onOffToggleButton input[type=checkbox]:checked + label::before,
div.onOffToggleButton input[type=checkbox]:not(:checked) + label::before,
div.onOffToggleButton input[type=checkbox] + label {
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 21px;
}
/* additional styling: rounded border, gradient */
div.onOffToggleButton input[type=checkbox] + label {
  vertical-align: middle;
  text-align: center;
  font-size: 16pt;
  font-family: Arial, Calibri;
  border: 1px solid #bdbdbd;
  border-radius: 5px;
  background: #f0f0f0;
  /* gradient style (optional)*/
  background-image: -moz-linear-gradient(top, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#fdfdfd), color-stop(0.5, #f9f9f9), color-stop(0.5, #e5e5e5), to(#fdfdfd));
  background-image: linear-gradient(to bottom, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
}
/* content to display and style pertinent to unchecked state*/
div.onOffToggleButton input[type=checkbox]:not(:checked) + label::before {
  font-weight: bold;
  content: "OFF ";
  color: #fdfdfd;
  background-color: #ff4351;
}
/* content to display and style pertinent to checked state*/
div.onOffToggleButton input[type=checkbox]:checked + label::before {
  content: "ON ";
  color: #fdfdfd;
  font-weight: bold;
  background-color: #0FA278;
}
div.onOffToggleButton input[type=checkbox]:not(:checked) + label::after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 21px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
/************************************************************************/
/*#region Dashboard */
/*Calendar Popup*/
.ajax__calendar_container {
  visibility: visible;
  position: absolute;
  left: 15px;
  top: 24px;
  width: 168px;
  overflow: visible;
  z-index: 100;
}
/*#endregion*/
.dataStatisticsLabel {
  height: 110px;
  width: 110px;
  border-radius: 50%;
  border: 4px solid #fec418;
  display: inline-block;
  word-spacing: 9999px;
}
.StickyHeader th {
  position: sticky;
  top: 0;
}
.teacherAvailabilityGrid {
  background-color: white;
  border: 2px #cecece solid;
  display: block;
  overflow-x: scroll;
  overflow-y: scroll;
  width: 100%;
  height: 700px;
}
.teacherAvailabilityGrid th {
  font-size: 11pt;
  color: black;
  width: 5vw;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  top: -1px;
  background-color: white;
  border: 1px solid lightGray;
}
.teacherAvailabilityGrid td:nth-child(1) {
  border-bottom: 1px solid lightGray;
  left: -1px;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  background-color: white;
  color: black;
  z-index: 2;
}
.teacherAvailRowStyle {
  background-color: white;
  border-bottom: 1px solid lightGray;
  color: black;
}
.verticalText {
  display: block;
  white-space: nowrap;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
}