@import "material-design-icons/iconfont/material-icons.css";
@font-face {
  font-family: Roboto-Regular;
  src: url('font/roboto/woff/Roboto-Regular.WOFF');
}
/************************************************************************/
/* 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);
}
#pnlPTO {
  margin-top: 3%;
}
#pnlNoSchool {
  background-color: white;
  opacity: 0.9;
}
#lblSchool {
  background-color: white;
  opacity: 0.8;
}
/* General */
.centering {
  float: none;
  margin: 0 auto;
}
.appDisplay {
  display: none;
}
/* Positioning */
.login-container {
  display: table;
  padding: 0;
}
.row-fluid {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
/* Jumbotrons*/
.jumboTitle {
  width: 80%;
  padding: 15px 15px 10px 15px;
  opacity: 0.8;
  border-radius: 15px;
}
.jumboDescription {
  padding: 40px 30px;
  border-radius: 0rem;
  opacity: 0.7;
  font-weight: bold;
  color: black;
}
.jumboSchoolCode {
  width: 50%;
  padding: 10px 5px 5px 5px;
  margin-top: 10px;
  opacity: 0.8;
  border-radius: 15px;
}
/* Nav Buttons */
.btn-group.special {
  display: flex;
  margin-top: 20px;
}
.btn-group .btn {
  border-radius: 0rem;
  border: 0px;
  padding: 12px;
}
a#cmdAccLogin,
a#cmdAccRegister,
a#cmdAccSendPIN {
  color: white;
  font-size: 9pt;
  background-color: #8b8b8b;
}
a#cmdAccLogin:hover,
a#cmdAccRegister:hover,
a#cmdAccSendPIN:hover {
  background-color: #333;
}
.btn-custom {
  background-color: #636363 !important;
}
/* Card */
.card {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8) !important;
}
.card-body {
  margin-top: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
}
.form-control {
  border-radius: 0;
}
/* Alert */
.alert {
  border-radius: 0px;
  margin-bottom: 5px;
}
.alert-warning {
  background-color: #fec418;
  color: #000;
  font-weight: bold;
  font-size: 10pt;
  opacity: 1;
  border: 0;
}
.alert-danger {
  background-color: #ff4351;
  color: white;
  font-size: 10pt;
  border: 0;
  margin: 0px;
}
.card-footer-custom {
  margin: 0px;
  padding: 0px;
}
/*Login page*/
.cmdAccLogin {
  border: 2px solid #cecece;
  background-color: #cecece;
  color: black;
  padding: 5px;
  font-size: 11pt;
}
/* Accordion */
#divLogin .accordionHeader {
  visibility: hidden;
  height: 0px;
}
#divLogin .accordionHeader a {
  color: #FFFFFF;
  background: none;
  text-decoration: underline;
}
#divLogin .accordionHeader a:hover {
  background: none;
  text-decoration: underline;
}
#divLogin .accordionHeaderSelected {
  visibility: hidden;
  height: 0px;
}
#divLogin .accordionHeaderSelected a {
  color: #FFFFFF;
  background: none;
  text-decoration: none;
}
/* Header */
#mainLogonLogo {
  width: 100px;
  height: 100px;
  margin-top: -3%;
  background-image: url('css/PTO_Logo_main.png');
  background-repeat: no-repeat;
  background-position: center;
}
#pnlOutageWarn {
  background-color: #fec418;
  font-size: 15pt;
  height: 60px;
  width: 100%;
}
/* Footer */
#pnlCopyright {
  background-color: white;
  opacity: 0.7;
  padding: 3px 6px 3px 6px;
  border-radius: 10px;
  text-align: right;
  width: 100px;
}
@media only screen and (max-width: 992px) {
  #pnlCopyright {
    margin-right: 40vw;
  }
  #pnlLoginMessage {
    display: none;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  #pnlCopyright {
    margin-right: 20vw;
  }
  .appDisplay {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  #mainLogonLogo {
    display: none;
  }
  #schoolLogo {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  #pnlOutageWarn {
    display: none;
  }
}
.MasterLogo {
  width: 61px;
  height: 61px;
  background-image: url('css/PTO_Logo_main.png');
}
.LogonLogo {
  width: 100px;
  height: 100px;
  background-image: url('css/PTO_Logo_main.png');
  background-repeat: no-repeat;
  background-position: center;
}
#SchoolElementBanner {
  margin-top: 15px;
}
#SchoolNameBanner {
  font-size: 1.6rem;
  margin-bottom: 0%;
  font-weight: 750;
  line-height: 1.2;
}
@media only screen and (max-width: 1400px) {
  /* tablets and desktop */
  .button > span {
    display: none;
  }
  .button > span.negate {
    display: inline;
  }
}
@media only screen and (max-width: 767px) {
  /* phones  */
  .MasterLogo {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: none;
  }
  #SchoolNameBanner {
    margin-left: 8%;
    font-size: 14pt;
    font-weight: 600;
    line-height: 1.6;
  }
  #PTOHeading {
    display: none;
  }
  #loginText {
    display: none;
  }
  #cmdPTOAdmin {
    display: none;
  }
  #cmdLogout {
    content: '<i class="exit_to_app"></i>';
    padding: 2%;
  }
  #needHelpButton {
    padding: 2%;
  }
}
.overlay {
  position: relative;
}
.overlay.message {
  position: absolute;
  top: 0;
  left: 7%;
  background-color: white;
  z-index: 1000;
  margin: 5%;
  padding: 5%;
  border: 1px black solid;
}
.downloadButtonAnimation {
  /*animation: pulse 5s infinite;*/
  box-shadow: 0 0 0 0 rgba(27, 154, 247, 0.5);
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.downloadButtonAnimation:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 2px rgba(27, 154, 247, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 154, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 154, 247, 0.3);
  }
}
@-moz-keyframes pulse {
  0% {
    box-shadow: 0 0 0 2px rgba(27, 154, 247, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 154, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 154, 247, 0.3);
  }
}
@-ms-keyframes pulse {
  0% {
    box-shadow: 0 0 0 2px rgba(27, 154, 247, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 154, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 154, 247, 0.3);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 2px rgba(27, 154, 247, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 154, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 154, 247, 0.3);
  }
}
.DownloadEmailSchedule {
  position: absolute;
  top: 0%;
  right: 25%;
  z-index: 100;
}
.divDownloadEmailSchedule {
  padding: 15px;
  background-color: White;
  border: solid 1px gray;
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
}
.bookedTextLabel {
  margin-left: 90%;
  white-space: nowrap;
}
.panelAutomaticSteps {
  position: relative;
  color: #333333;
  line-height: 18px;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  text-align: left;
  margin-top: -1%;
}
.panelModeAuto {
  border-top: 1px Solid #1b9af7;
  border-bottom: 1px Solid #1b9af7;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
}
.GridViewHeader {
  background-repeat: repeat-x;
  color: #333333;
  font-size: 10pt;
  font-weight: bold;
  line-height: 22px;
  margin: 5px 75px 0px 75px;
  padding: 5px 60px 10px 60px;
  width: 715px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border: 1px solid white;
}
.GridViewRow {
  border: 1px solid white;
}
.GridViewPager {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  background-repeat: repeat-x;
  color: #333333;
  font-size: 9pt;
  font-weight: bold;
  line-height: 22px;
  margin: 5px 75px 0px 75px;
  padding: 5px 60px 10px 60px;
  width: 715px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
.cmdAutoPrev {
  margin-top: 10%;
  z-index: 10;
}
.cmdAutoNext {
  margin-top: 10%;
  z-index: 10;
}
.btnNext {
  margin-top: -9%;
}
input[type=checkbox] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
input[type="checkbox"] + label {
  padding-left: 5px;
}
input[type=radio] {
  width: 17px;
  height: 17px;
  background-color: none;
  outline: none;
  vertical-align: middle;
}
input[type="radio"] + label {
  padding-left: 5px;
  padding-right: 15px;
}
.chkRed input[type="checkbox"] {
  box-shadow: inset 0 0 1px 1px rgba(255, 0, 0, 0.6), 0 0 1px 1px rgba(255, 0, 0, 0.6);
  -moz-box-shadow: inset 0 0 1px 1px rgba(255, 0, 0, 0.6), 0 0 1px 1px rgba(255, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 0, 0, 0.6), 0 0 1px 1px rgba(255, 0, 0, 0.6);
}
.chkGreen input[type="checkbox"] {
  /*box-shadow: inset 0 0 1px 1px @Blue, 0 0 1px 1px @Blue;*/
  box-shadow: inset 0 0 1px 1px rgba(0, 255, 0, 0.6), 0 0 1px 1px rgba(0, 255, 0, 0.6);
  -moz-box-shadow: inset 0 0 1px 1px rgba(0, 255, 0, 0.6), 0 0 1px 1px rgba(0, 255, 0, 0.6);
  -webkit-box-shadow: inset 0 0 1px 1px rgba(0, 255, 0, 0.6), 0 0 1px 1px rgba(0, 255, 0, 0.6);
}
.SchedulePos {
  position: absolute;
  top: 158px;
  z-index: 10;
}
.ScheduleBox {
  background-color: White;
  border: solid 1px gray;
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  z-index: 10;
}
.table {
  table-layout: fixed;
  position: relative;
  margin-left: 0vh;
  margin-right: 10vw;
  overflow: auto;
  border: none;
}
.table th {
  font-size: 11pt;
  border: none;
  top: -5px;
  background-color: white;
  z-index: 1;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  width: 240px;
}
.table td {
  padding: 5px;
  font-size: 10pt;
  border: none;
}
#pnlSwitchAutoManualInner {
  width: 400px;
  font-size: 11pt;
}
.ParentBookingWarnings {
  width: 100%;
  margin-top: -1%;
  margin-bottom: 2px;
  margin-left: 0.1%;
  padding: 0.5%;
  background-color: #fec418;
  color: black;
}
.ParentBookingError {
  background-color: #ff4351;
  width: 100%;
  color: black;
}
.BookingHeader {
  color: #333333;
  height: 60px;
  width: 100%;
  margin-top: -1%;
  padding: 10px 7px 0px 7px;
}
.BookingBody {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 0%;
}
.bookingButtons {
  width: 30px;
  height: 30px;
  line-height: 0;
  border-radius: 15px;
}
.offCenterButton {
  margin-left: 95px;
}
.table th:nth-child(1),
.table td:nth-child(1) {
  width: 0px;
}
.FormatRadioButtonHorizontalList {
  line-height: 1%;
  padding-right: 3px;
}
.ddlIntLanguage {
  margin-top: 2vh;
  bottom: -100vh;
}
@media only screen and (max-width: 767px) {
  /* phones  */
  /*#region Main Sections */
  .MainPanel,
  .ParentBooking {
    max-width: 550px;
  }
  .BookingHeader {
    margin-left: -2%;
    margin-top: -1%;
  }
  .BookkingBody {
    margin-bottom: -20%;
    margin-left: -35%;
  }
  .ParentBookingWarnings {
    margin-left: -1%;
    background-color: #fec418;
  }
  /*#endregion */
  /*#region Student Booking Table */
  .GridViewHeader {
    text-align: left;
    vertical-align: middle;
  }
  .table {
    margin-right: -10%;
  }
  .table th {
    font-size: 12pt;
    word-wrap: normal;
    width: -20vw;
  }
  .table td {
    padding: 0.5%;
    font-size: 11pt;
    word-wrap: normal;
    vertical-align: middle;
    text-align: center;
    width: -20vw;
  }
  .table th:nth-child(1),
  .table td:nth-child(1) {
    width: 0px;
    height: 0px;
  }
  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: 5vw;
  }
  .table th:nth-child(3) {
    left: 0px;
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    z-index: 2;
    width: 5vw;
  }
  .table td:nth-child(3) {
    background-color: rgba(255, 255, 255, 0.9);
    left: 0px;
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    width: 5vw;
  }
  .table th:nth-child(4),
  .table td:nth-child(4) {
    width: 5vw;
  }
  .table th:nth-child(5),
  .table td:nth-child(5),
  .table th:nth-child(6),
  .table td:nth-child(6) {
    width: 5vw;
  }
  /*#endregion*/
  /*#region Booking Mode Panel */
  .StepsPanel {
    position: relative;
    margin-left: -1%;
    margin-top: 7%;
  }
  .panelModeAuto {
    margin-left: 0%;
  }
  .pnlAuto {
    margin-left: -19%;
    margin-top: -7%;
    width: 340px;
  }
  #cmdAutoPrev {
    margin-left: 5%;
  }
  #cmdAutoNext {
    margin-top: 3%;
  }
  .btnNext {
    margin-left: 76vw;
    margin-top: -21%;
  }
  .btnPrev {
    margin-left: -7%;
    margin-top: 2%;
  }
  /*#endregion*/
  /*#region Download/Email Pop up */
  .SchedulePos {
    margin-top: 20%;
    margin-left: -50%;
  }
  a#cmdSchedule.button {
    width: 20%;
  }
  /*#endregion*/
  #pnlAuto1.b {
    font-size: medium;
  }
  #ParentBookingWarnings {
    margin-left: 1%;
  }
  #pnlLogin1 {
    margin-left: -180%;
  }
  .ddlIntLanguage {
    margin-left: 10%;
  }
  .DownloadEmailSchedule {
    right: 10%;
  }
  .bookedTextLabel {
    margin-left: 10%;
    white-space: nowrap;
  }
}
.tableEQCheck {
  text-align: left;
  text-wrap: normal;
}
/*#pnlRegistrationInstructions{
    position: center;
}*/
.warning {
  width: 100%;
  margin-top: -1%;
  margin-bottom: 2px;
  padding: 0.5%;
  background-color: #fec418;
  color: black;
}
.error {
  width: 100%;
  margin-top: -1%;
  margin-bottom: 2px;
  padding: 0.5%;
  background-color: #ff4351;
  color: white;
}
ul#uploadSections {
  width: 100%;
  padding: 0;
  margin: 0;
}
ul#uploadSections li {
  display: inline-flex;
  width: 24%;
  padding-top: 3px;
  padding-left: 3px;
  padding-bottom: 0px;
  white-space: nowrap;
}
ul#uploadSections li .center-upload-text {
  margin-left: 20%;
}
.dot {
  height: 15px;
  width: 15px;
  background-color: #939799;
  border-radius: 50%;
  display: inline-block;
  margin-top: 0px;
}
.dot.dot-checked {
  background-color: white;
}
.upload-tick {
  color: #939799;
  margin-top: -5px;
}
.uploadBox {
  padding: 0%;
  display: inline-flex;
  padding-top: 0.4%;
  height: 27px;
  border: 1px solid #cecece;
}
.uploadBox.selectedStep {
  background-color: #1b9af7;
  color: white;
}
.hideNeatUploadAd {
  background-color: white;
  z-index: 48;
  position: relative;
  left: 0%;
  top: -0.9rem;
  width: 150px;
  height: 12px;
}
/* Upload - Errors/Warnings Data */
.affectedData-border {
  border-bottom: 1px solid #cecece;
}
.affectedData {
  color: black;
  margin-left: 26%;
}
.explanation-grid-scroll {
  max-height: 500px;
  overflow-y: scroll;
}
.explanation-grid {
  border: none;
  font-size: 10pt;
  color: black;
  width: 100%;
  word-wrap: normal;
}
.upload-icon {
  margin-right: -5%;
  margin-top: -0.3%;
}
.icon-alignment {
  margin-right: -25px !important;
}
.list-spacing {
  margin-bottom: 0.7rem;
}
.upload-progress-btn {
  margin: 0;
}
html {
  height: 100%;
  background-color: white;
}
body {
  font-family: Roboto-Regular, "Helvetica Neue", Helvetica, Arial, san-serif;
  font-size: 9pt;
  letter-spacing: 0.02em;
  margin: 0px;
  z-index: 1;
  height: 79%;
  color: #333333;
  background-color: white;
}
.displayBlock {
  display: block;
}
.displayNone {
  display: none;
}
.wrapper {
  min-height: 78%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -1px;
  background-color: white;
}
footer {
  position: fixed;
  height: 50px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: 0px;
}
.textbox {
  background-color: White;
  border: 1px solid #a0a0a0;
  padding: 2px 7px 2px 7px;
  outline: none;
}
.textbox:focus {
  border: 1px solid #666666;
}
input[type="image"]:focus {
  outline: none;
}
select {
  border: 2px solid #cecece;
  outline: none;
  padding: 2px 7px 2px 7px;
}
select:focus {
  border: 2px solid #939799;
  outline: none;
  padding: 2px 7px 2px 7px;
  background-color: white;
}
selectX {
  border: 1px solid #ff4351;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
}
selectX:focus {
  background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}
i {
  vertical-align: middle !important;
}
a.cmdAccLogin {
  color: white;
}
/* Red */
.button-red {
  border-color: #ff4351 !important;
  color: #ff4351 !important;
}
.button-red:hover {
  background-color: #ff4351 !important;
  color: white !important;
  cursor: pointer;
}
.button-red-label {
  border-color: #ff4351 !important;
  color: #ff4351 !important;
}
/*button-red-label*/
/* White */
.button-white {
  border-color: White !important;
  color: White !important;
}
.button-white:hover {
  background-color: White !important;
  color: white !important;
  cursor: pointer;
}
.button-white-label {
  border-color: White !important;
  color: White !important;
}
/* Green */
.button-green {
  border-color: #0FA278 !important;
  color: #0FA278 !important;
}
.button-green:hover {
  background-color: #0FA278 !important;
  color: white !important;
  cursor: pointer;
}
.button-green-label {
  border-color: #0FA278 !important;
  color: #0FA278 !important;
}
/* Yellow */
.button-yellow {
  border-color: #fec418 !important;
  color: #fec418 !important;
}
.button-yellow:hover {
  background-color: #fec418 !important;
  color: white !important;
  cursor: pointer;
}
.button-yellow-label {
  border-color: #fec418 !important;
  color: #fec418 !important;
}
/* Grey */
.button-light-grey {
  border-color: #cecece !important;
  color: #cecece !important;
}
.button-light-grey:hover {
  background-color: #cecece !important;
  color: white !important;
  cursor: pointer;
}
.button-light-grey-label {
  border-color: #cecece !important;
  color: #cecece !important;
}
/* Purple*/
.button-purple {
  border-color: #7877E4 !important;
  color: #7877E4 !important;
}
.button-purple:hover {
  background-color: #7877E4 !important;
  color: white !important;
  cursor: pointer;
}
.button-purple-label {
  border-color: #7877E4 !important;
  color: #7877E4 !important;
}
/* Blue */
.button-blue-label {
  border-color: #1b9af7 !important;
  color: #1b9af7 !important;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #1b9af7;
  word-wrap: normal;
  padding: 0px 6px 0px 6px;
  border: 1px solid #1b9af7;
  border-radius: 15px;
  margin-bottom: 3px;
}
.button:hover {
  background-color: #1b9af7;
  color: white;
  cursor: pointer;
}
.button:active {
  outline: none;
  background-color: #1b9af7;
  color: white;
  cursor: pointer;
}
.adminFeeRenewButton {
  display: block !important;
}
.buttonIcon {
  /*display: block;*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #1b9af7;
  word-wrap: break-word;
  border: 1px solid #1b9af7;
  border-radius: 15px;
  text-decoration: none;
  width: 27px;
}
.buttonIcon:hover {
  background-color: #1b9af7;
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.buttonIconDisabled {
  color: #939799 !important;
  border: 1px solid #939799;
  background-color: #cecece;
}
.buttonIconDisabled:hover {
  background-color: #cecece;
}
.buttonIcon-large {
  /*display: block;*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #1b9af7;
  word-wrap: break-word;
  border: 1px solid #1b9af7;
  text-decoration: none;
  border-radius: 40px;
  width: 64px;
}
.buttonIcon-large:hover {
  background-color: #1b9af7;
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.buttonSearch {
  border: 1px solid #cecece;
  padding: 4px;
  margin-left: -6px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.buttonSearch:hover {
  background-color: #1b9af7;
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.borderTop {
  border-top: 1px solid #cecece;
}
a:link {
  color: #1b9af7;
  background-color: white;
}
a:active {
  color: #1b9af7;
}
a:hover {
  text-decoration: none;
  color: #1b9af7;
}
a:visited {
  background-color: white;
}
h1 {
  font-size: 18pt;
}
h2 {
  font-size: 16pt;
}
h3 {
  font-size: 14pt;
}
h4 {
  font-size: 12pt;
}
h5 {
  font-size: 11pt;
}
h6 {
  font-size: 10pt;
}
p {
  font-size: 10pt;
}
.menuImg {
  border: 2px solid #bbbbcc;
}
.code {
  margin: 5px 5px 5px 5px;
  padding: 5px 10px 5px 10px;
  font-family: Courier New, Courier, Serif;
  background-color: #fec418;
}
.TLoc {
  font-size: 8pt;
}
.ToolTip {
  color: #1b9af7;
  background-color: white;
  line-height: 18px;
  font-size: 10pt;
  text-align: left;
  padding: 15px;
  border: 1px solid #1b9af7;
  margin-left: -200%;
  margin-top: -70%;
  width: 800px;
}
.ToolTip ul {
  margin: 3px 0px 3px 15px;
  list-style-type: square;
}
#pnlProgess {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}
.progress {
  width: 270px;
  height: 75px;
  color: #333333;
  background-color: #FFFFFF;
  margin-bottom: 100px;
  border: 1px solid black;
  z-index: 1000;
  padding-top: 25px;
  padding-left: 50px;
}
.progress img {
  z-index: 1000;
  width: 30px;
  height: 30px;
  margin-top: -5px;
}
.InfoPanel {
  font-size: 9pt;
  line-height: 22px;
  padding: 5px 20px 10px 20px;
  background-color: White;
  border: solid 1px #696969;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.InfoPanel ul {
  margin-top: 4px;
  margin-bottom: 4px;
  list-style-type: square;
}
.OptionHeader {
  border-top: solid 2px #DDDDDD;
  border-bottom: none;
  background-repeat: repeat-x;
  color: #333333;
  font-size: 9pt;
  line-height: 18px;
}
.OptionHeader a {
  color: #333333;
}
.InfoPanel2Header {
  background-repeat: repeat-x;
  color: #333333;
  font-size: 9pt;
  line-height: 22px;
  margin: 15px 75px 0px 75px;
  padding: 5px 60px 10px 60px;
}
.InfoPanel2Header a {
  color: #333333;
  text-decoration: underline;
}
.InfoPanel2HeaderReport {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  border-bottom: none;
  background-repeat: repeat-x;
  color: #333333;
  font-size: 9pt;
  line-height: 22px;
  margin: 15px 75px 0px 75px;
  padding: 5px 17px 10px 17px;
  width: 801px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
.InfoPanel2HeaderReport a {
  color: #333333;
  text-decoration: underline;
}
.InfoPanel2HeaderNone {
  border-bottom: none;
  font-size: 9pt;
  line-height: 22px;
  margin: 5px 75px 0px 75px;
  padding: 5px 60px 10px 60px;
}
.InfoPanel2Body {
  /*border-top: 1px solid @LightGrey;*/
  font-size: 10pt;
  line-height: 22px;
  margin: 0px 75px 10px 75px;
  padding: 5px 60px 10px 60px;
}
.ReportSelectHeader {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  border-bottom: none;
  background-repeat: repeat-x;
  color: #333333;
  font-size: 9pt;
  line-height: 22px;
  padding: 3px 5px 2px 10px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
.ReportSelectBody {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  border-top: none;
  font-size: 9pt;
  line-height: 22px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 15px;
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
.InfoPanel2BodyRegistration {
  border-top: none;
  font-size: 9pt;
  line-height: 22px;
  margin: 0px 75px 10px 75px;
}
.InfoPanel2BodyReport {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  border-top: none;
  font-size: 9pt;
  line-height: 22px;
  margin: 0px 75px 10px 75px;
  padding: 5px 17px 10px 17px;
  width: 801px;
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
.InfoPanel2Body h2 {
  color: #333333;
}
.InfoPanelBlue {
  color: #333333;
  line-height: 18px;
  font-size: 10pt;
  padding: 5px 10px 5px 15px;
}
.InfoPanelBlue ul {
  margin-top: 4px;
  margin-bottom: 4px;
  list-style-type: square;
}
.InfoPanelSmallText {
  font-size: 8pt;
  line-height: 20px;
  padding: 5px 20px 7px 20px;
}
.StatusPanel {
  background-color: #fec418;
  font-size: 9pt;
  line-height: 22px;
  padding: 3px 30px 5px 30px;
  text-align: center;
}
.StatusPanel2 {
  background-color: #fec418;
  font-size: 9pt;
  line-height: 22px;
  margin: 5px 75px 5px 75px;
  padding: 3px 60px 5px 60px;
  text-align: center;
  width: 715px;
}
.StatusPanel3 {
  background-color: #fec418;
  font-size: 9pt;
  line-height: 22px;
  margin: -10px 25px 5px 25px;
  padding: 3px 30px 5px 30px;
  text-align: center;
  width: 800px;
}
.RoundedCorners {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.HelpPanel {
  background-color: #E3F3E6;
  border: solid 1px #AAAAAA;
  color: #333333;
  line-height: 18px;
  font-size: 9pt;
  padding: 0px 10px 0px 5px;
  margin: 5px 0px 4px 0px;
}
.HelpPanel ul {
  color: #333333;
  margin-top: 5px;
  margin-bottom: 5px;
  list-style-type: square;
}
.semitransparent {
  background: #fff;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 1500px;
  width: 100%;
  text-align: center;
}
.modal {
  background-color: white;
  filter: alpha(opacity=99);
  /* ie */
  /*-moz-opacity: .99; /* mozilla */
  border-style: solid;
  border-width: 1px;
  margin: 150px 10px 10px 50%;
  width: 300px;
  height: 90px;
  z-index: 100;
}
.modalBG {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 50;
  margin: 100px, 10px, 10px, 10px;
  text-align: center;
  vertical-align: middle;
}
.modalMessage {
  background-color: white;
  filter: alpha(opacity=99);
  /* ie */
  /*-moz-opacity: .99;*/
  /* mozilla */
  border-color: #333333;
  border-style: solid;
  border-width: 1px;
  margin: 25% 10px 10px 10px;
  width: 300px;
  height: 90px;
  z-index: 100;
}
.errorMsg {
  background-color: #ff4351;
  color: white;
}
.modalPopup {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #778899;
  padding: 33px 15px 15px 15px;
  width: 350px;
  border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  z-index: 100;
}
.modalBackground {
  background-color: #fff;
  filter: alpha(opacity=30);
  opacity: 0.3;
}
.smallLink {
  font-size: 8pt;
}
.filtertable {
  background-color: transparent;
  border-width: 0px;
  border-collapse: collapse;
}
.filtertable td {
  background-color: #EECFCC;
  border-width: 0px 0px 1px 0px;
  border-spacing: 0px;
  padding: 1px;
  border-color: #D5D7DB;
  border-style: solid;
}
.filtertable td td {
  border-width: 0px;
}
/* news list */
table.news th {
  background-color: #F5F5F5;
  background-repeat: repeat-x;
  color: #333333;
  padding: 6px;
}
table.news {
  background-color: #05A7FF;
  border-width: 0px;
  border-collapse: collapse;
}
table.news tr {
  background-color: #FFFFFF;
}
table.news td {
  vertical-align: top;
  text-align: left;
  font-size: 9pt;
  color: #333333;
  border-color: #F5F5F5;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-spacing: 0px;
  padding: 9px 6px 12px 6px;
}
.xtest {
  background-color: #ff4351;
}
/* matrix list */
table.Matrix th {
  background-color: #5A5A5A;
  color: #FFFFFF;
  padding: 1px;
  line-height: 3px;
}
table.Matrix {
  background-color: #05A7FF;
  border-width: 0px;
  border-collapse: collapse;
}
table.Matrix tr {
  background-color: #FFFFFF;
}
table.Matrix td {
  vertical-align: top;
  font-size: 8pt;
  color: #333333;
  border-color: #05A7FF;
  border-style: solid;
  border-width: 0px 1px 1px 0px;
  border-spacing: 0px;
  padding: 1px 1px 1px 1px;
}
.RegMsg {
  clear: both;
  text-align: center;
  background-color: #0FA278;
  background-position: bottom;
  background-repeat: repeat-x;
  padding: 6px 5px 6px 5px;
  margin: 6px 0px 6px 0px;
  font-size: 10pt;
  color: white;
  line-height: 22px;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.RegErrMsg {
  clear: both;
  text-align: center;
  background-color: #ff4351;
  background-position: bottom;
  background-repeat: repeat-x;
  padding: 3px 5px 3px 5px;
  margin: 6px 0px 3px 0px;
  font-size: 10pt;
  color: white;
  line-height: 22px;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.TeacherSelect {
  border-collapse: collapse;
}
.TeacherAllowCancel {
  border-collapse: collapse;
}
/*
The menu is one big image that's "sprited" by using negative positioning.
This is quicker for loading and reduces flashing.
Hover and disabled are the same .. the currently selected menu item is disabled!
*/
.selectedNavButton:hover,
.selectedNavButton:disabled,
.selectedNavButton:active {
  color: white !important;
  background-color: rgba(120, 119, 228, 0.3);
  font-weight: 800;
}
.navigationButtons {
  color: #7877E4;
  background-color: transparent;
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 100px;
}
.MenuBG {
  color: #7877E4;
  text-align: center;
  line-height: 22px;
  width: 835px;
}
.MenuBG a {
  color: #939799;
  border: none;
}
.AvailabilityOFF,
.AvailabilitySCHEDULED,
.AvailabilityON {
  background-color: #FFFFFF;
  border: solid 1px #cecece;
}
.AvailabilityON td,
.AvailabilityOFF td,
.AvailabilitySCHEDULED td {
  border: none;
  padding: 3px 6px 3px 6px;
}
.AvailabilityFeatureOFF {
  height: 60px;
  background-image: url(imgAdminAvailSmallOFF.png);
  background-position: left;
  background-repeat: no-repeat;
}
.AvailabilityFeatureSCHEDULED {
  height: 60px;
  background-image: url(imgAdminAvailSmallSCHEDULED.png);
  background-position: left;
  background-repeat: no-repeat;
}
.AvailabilityFeatureON {
  height: 60px;
  background-image: url(imgAdminAvailSmallON.png);
  background-position: left;
  background-repeat: no-repeat;
}
.AvailabilityFeatureOFF span,
.AvailabilityFeatureSCHEDULED span,
.AvailabilityFeatureON span {
  /* push the text over to make room for the background image */
  margin-left: 30px;
}
/* to fix calendarextender in gridview problem ... see release 20130308 */
.calendarContainer table tr td {
  height: 0px;
  width: 0px;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0px !important;
  z-index: -1;
}
.MainPanel {
  background-color: white;
  padding: 7px 0px 0px 0px;
  width: 1200px;
  /*border: 1px solid black;*/
}
.card {
  background-color: #fec418;
}
.required {
  color: #ff4351;
}
.buttonOkPopup {
  padding: 6px 6px 6px 6px;
}
.teacherBookings-icons {
  vertical-align: bottom;
  margin: 0px;
  line-height: 1.6;
}
.GridViewPager {
  /*display: inline-block;*/
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.GridViewPager table > tbody > tr > td {
  display: inline;
}
.GridViewPager table > tbody > tr > td > a,
.GridViewPager table > tbody > tr > td > span {
  position: relative;
  float: left;
  padding: 8px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #dd4814;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  margin-left: -1px;
}
.GridViewPager table > tbody > tr > td > span {
  position: relative;
  float: left;
  padding: 8px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  margin-left: -1px;
  z-index: 2;
  color: #aea79f;
  background-color: #f5f5f5;
  border-color: #dddddd;
  cursor: default;
}
.GridViewPager table > tbody > tr > td:first-child > a,
.GridViewPager table > tbody > tr > td:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.GridViewPager table > tbody > tr > td:last-child > a,
.GridViewPager table > tbody > tr > td:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.GridViewPager table > tbody > tr > td > a:hover,
.GridViewPager table > tbody > tr > td > span:hover,
.GridViewPager table > tbody > tr > td > a:focus,
.GridViewPager table > tbody > tr > td > span:focus {
  color: #97310e;
  background-color: #eeeeee;
  border-color: #dddddd;
}
@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  src: url("font/roboto/woff/Roboto-Regular.WOFF") format("woff");
}
@media only screen and (max-width: 767px) {
  /* phones  */
  .MenuBG {
    width: 100%;
  }
}
.progress-custom {
  display: none;
  position: absolute;
  left: 42%;
  top: 15%;
}
.dis-inline-flex {
  display: inline-flex !important;
}
.email-send-button {
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background-color: white;
}
.dualClassTable {
  table-layout: fixed;
  position: relative;
  overflow: auto;
  border: none;
}
.dualClassTable th {
  font-size: 10pt;
  border: none;
  top: -5px;
  background-color: white;
  z-index: 1;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  width: 240px;
}
.dualClassTable td {
  padding: 5px;
  font-size: 9pt;
  border: none;
}