:root {
  --pto-blue: #0778CA;
  --pto-green: #0C8361;
  --pto-amber: #fec418;
  --pto-dark-amber: #BB8E07;
  --pto-red: #E61E2C;
  --pto-purple: #4140D9;
  --pto-dark-grey: #292929;
  --pto-grey: #666666;
  --pto-medium-grey: #727679;
  --pto-light-grey: #949494;
}
/*#region Dashboard */
.AvailabilityON {
  background-color: white;
  border: solid 1px #949494;
}
.AvailabilityON td {
  border: none;
  padding: 3px 6px 3px 6px;
}
.AvailabilityON .AccessDisplay {
  min-height: 60px;
  background-image: url(img/imgAdminAvailSmallON.png);
  background-position: left;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.AvailabilityON .AccessDisplay span {
  margin-left: 30px;
}
.AvailabilityOFF {
  background-color: white;
  border: solid 1px #949494;
}
.AvailabilityOFF td {
  border: none;
  padding: 3px 6px 3px 6px;
}
.AvailabilityOFF .AccessDisplay {
  min-height: 60px;
  background-image: url(img/imgAdminAvailSmallOFF.png);
  background-position: left;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.AvailabilityOFF .AccessDisplay span {
  margin-left: 30px;
}
.AvailabilitySCHEDULED {
  background-color: white;
  border: solid 1px #949494;
}
.AvailabilitySCHEDULED td {
  border: none;
  padding: 3px 6px 3px 6px;
}
.AvailabilitySCHEDULED .AccessDisplay {
  min-height: 60px;
  background-image: url(img/imgAdminAvailSmallSCHEDULED.png);
  background-position: left;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.AvailabilitySCHEDULED .AccessDisplay span {
  margin-left: 30px;
}
/*Calendar Popup*/
.ajax__calendar_container {
  visibility: visible;
  position: absolute;
  left: 15px;
  top: 24px;
  width: 168px;
  overflow: visible;
  z-index: 100;
}
/*#endregion*/
.dataStatisticsRow {
  display: flex;
  justify-content: space-around;
}
.dataStatisticsLabel {
  height: 110px;
  width: 110px;
  border-radius: 50%;
  border: 4px solid #fec418;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.StickyHeader th {
  position: sticky;
  top: 0;
}
.teacherAvailabilityGrid {
  background-color: white;
  border: 2px #949494 solid;
  display: block;
  overflow-x: scroll;
  overflow-y: scroll;
  width: 100%;
  height: 700px;
}
.verticalText {
  display: block;
  white-space: nowrap;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
}
input[type="radio"]:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}
.downloadsPanel {
  font-size: 10pt;
  line-height: 22px;
}
.downloadsPanel .reportGroup {
  margin-bottom: 0.5rem;
}
.downloadsPanel [id*="pnlReportSample"] {
  margin: auto;
}
.downloadsPanel .row > .row {
  margin: 0;
}
.downloadsPanel .previewImg {
  max-width: 500px;
}
[id*="txtEmailBlockDetails"] {
  max-width: 700px;
  width: 100%;
}
.menuImg {
  display: inline-block;
  border: 1px solid;
  background-color: white;
  height: 26px;
}
.menuImg.FullAccess {
  border-color: #0C8361 !important;
  color: #0C8361 !important;
}
.menuImg.ViewAccess {
  border-color: #0778CA !important;
  color: #0778CA !important;
}
.menuImg.NoAccess {
  border-color: #E61E2C !important;
  color: #E61E2C !important;
}
.permissionPanel {
  justify-content: center;
  min-width: 92px;
  max-width: 230px;
  margin: 0;
}
.permissionPanel > div {
  width: 115px;
}
.permissionPanel > div:not(:last-child) {
  padding-bottom: 3px;
}
.adminUsersGrid .GridViewHeader > th:not(:nth-child(2)) {
  text-align: center;
}
.adminUsersGrid .col[id*="Delegate"] {
  min-width: 54px;
}
.adminUsersGrid input[id*="EmailAddress"] {
  width: 100%;
  max-width: 200px;
}
.adminUsersGrid .GridViewRow:not(:last-child) td:last-child #tt_Add {
  display: none;
}
.adminUsersGrid .GridViewRow:last-child td:last-child #tt_Edit,
.adminUsersGrid .GridViewRow:last-child td:last-child #tt_Delete {
  display: none;
}
.adminUsersGrid td:last-child [data-tooltip]:not(.aria-tooltip--show) .aria-tooltip__content {
  margin-left: -15px;
}
@media only screen and (min-width: 768px) {
  .dataStatisticsRow {
    justify-content: center;
  }
  .dataStatisticsLabel:first-child {
    margin-right: 0.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .downloadsPanel .container > .row {
    flex-direction: column-reverse;
  }
  .adminUsersGrid .col-lg-4,
  .adminUsersGrid .col-lg-4 + .col-auto {
    max-width: 145px;
  }
  .menuImg {
    height: 23px;
  }
  .menuImg i {
    font-size: 21px;
  }
  .permissionPanel {
    max-width: 208px;
  }
  .permissionPanel > div {
    width: 104px;
  }
}
@media only screen and (max-width: 767px) {
  .adminUsersGrid .GridViewHeader > th {
    font-size: 9pt;
  }
  .adminUsersGrid .GridViewRow > td {
    font-size: 8pt;
  }
  .adminUsersGrid .GridViewRow > td:not(:nth-child(2)) .container {
    padding: 0;
  }
  .adminUsersGrid largeHeader {
    display: none;
  }
  .menuImg {
    height: 20px;
  }
  .menuImg i {
    font-size: 18px;
  }
  .permissionPanel {
    max-width: 184px;
  }
  .permissionPanel > div {
    width: 92px;
  }
}
@media only screen and (max-width: 576px) {
  .dataStatisticsLabel {
    width: 80px;
    height: 80px;
  }
  .adminUsersGrid .GridViewHeader > th {
    font-size: 8pt;
  }
  .adminUsersGrid .GridViewRow > td {
    font-size: 6pt;
  }
  .adminUsersGrid .button {
    min-height: 20px;
  }
  .adminUsersGrid .button .material-icons {
    font-size: 18px;
  }
  .adminUsersGrid .buttonIcon {
    font-size: 18px;
    width: 20px;
    min-height: 20px;
  }
}
.main-heading {
  padding-left: 16%;
}
.border-bottom {
  border-bottom: 1px solid #949494;
  padding-top: 6px;
}
.chk-group-complete {
  font-size: 24pt;
  font-weight: 600;
  margin-left: 50%;
  margin-top: -10%;
}
@media only screen and (max-width: 575px) {
  .checklistGroup [id*="Help"] {
    padding-right: 15px;
  }
}
.loginWrapper {
  display: grid;
}
.login-body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  /* General */
  /* Positioning */
  /* Jumbotrons*/
  /* Nav Buttons */
  /* Card */
  /* Alert */
  /*Login page*/
  /* Accordion */
  /* Header */
  /* Footer */
  /* LoginHub unavailable Button */
  /* Medium devices (landscape tablets, 768px and up) */
}
.login-body #lblSchool {
  background-color: rgba(255, 255, 255, 0.8);
}
.login-body .centering {
  float: none;
  margin: 0 auto;
}
.login-body .appDisplay {
  display: none;
}
.login-body a:not(.button):not(.btn) {
  background: none !important;
}
.login-body .login-container {
  display: table;
  padding: 0;
}
.login-body .row-fluid {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.login-body .jumboTitle {
  width: 80%;
  padding: 15px 15px 10px 15px;
  background-color: rgba(233, 236, 239, 0.8);
  border-radius: 15px;
}
.login-body .jumboDescription {
  padding: 40px 30px;
  border-radius: 0rem;
  background-color: rgba(233, 236, 239, 0.7);
  font-weight: bold;
  color: black;
}
.login-body .jumboSchoolCode {
  width: 50%;
  padding: 10px 5px 5px 5px;
  margin-top: 10px;
  margin-bottom: 0;
  background-color: rgba(233, 236, 239, 0.8);
  border-radius: 15px;
}
.login-body .btn-group.special {
  display: flex;
  margin-top: 20px;
  margin-bottom: 2rem;
}
.login-body .btn-group .btn {
  border-radius: 0rem;
  border: 0px;
  padding: 12px;
}
.login-body a#cmdAccLogin,
.login-body a#cmdAccRegister,
.login-body a#cmdAccSendPIN {
  color: white;
  font-size: 9pt;
  background-color: #757575;
}
.login-body a#cmdAccLogin:hover,
.login-body a#cmdAccRegister:hover,
.login-body a#cmdAccSendPIN:hover {
  background-color: #333;
}
.login-body .btn-custom {
  background-color: #595959 !important;
}
.login-body .card {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8) !important;
}
.login-body .card-body {
  padding: 1.25rem 4rem;
}
.login-body .form-control {
  border-radius: 0;
}
.login-body .alert {
  border-radius: 0px;
  margin-bottom: 5px;
}
.login-body .alert-warning {
  background-color: #fec418;
  color: black;
  font-weight: bold;
  font-size: 10pt;
  border: 0;
}
.login-body .alert-danger {
  background-color: #E61E2C;
  color: white;
  font-size: 10pt;
  border: 0;
  margin: 0px;
}
.login-body .card-footer-custom {
  margin: 0px;
  padding: 0px;
}
.login-body .cmdAccLogin {
  border: 2px solid #949494;
  background-color: #949494;
  color: black;
  padding: 5px;
  font-size: 11pt;
}
.login-body #divLogin .accordionHeader {
  visibility: hidden;
  height: 0px;
}
.login-body #divLogin .accordionHeader a {
  color: white;
  background: none;
  text-decoration: underline;
}
.login-body #divLogin .accordionHeader a:hover {
  background: none;
  text-decoration: underline;
}
.login-body #divLogin .accordionHeaderSelected {
  visibility: hidden;
  height: 0px;
}
.login-body #divLogin .accordionHeaderSelected a {
  color: white;
  background: none;
  text-decoration: none;
}
.login-body .LogonLogo {
  width: 100px;
  height: 100px;
  text-align: center;
  align-content: center;
}
.login-body .LogonLogo img {
  width: 62px;
}
.login-body #pnlOutageWarn {
  background-color: #fec418;
  padding: 10px 50px;
  font-size: 15pt;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.login-body .copyrightContainer {
  align-self: end;
  margin: 15px auto;
}
.login-body .copyrightContainer .copyrightFooter {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 3px 6px 3px 6px;
  border-radius: 10px;
  text-align: right;
  width: 100px;
}
.login-body .copyrightContainer .copyrightFooter #copyrightLogo {
  content: url('img/BookedIcon.png');
  width: 15px;
  vertical-align: text-bottom;
}
.login-body .loginUnavailable {
  display: block;
  height: 18px;
  width: 18px;
  background: #fec418;
  border-radius: 50%;
  margin: 3px;
  margin-right: -24px;
  align-self: center;
}
.login-body .loginUnavailable i.material-icons {
  margin-left: -3px;
  margin-top: -3px;
}
.login-body .loginHubButton .light {
  height: 100%;
}
.login-body .loginHubButton .dark {
  height: 100%;
  display: none;
}
.login-body .loginHubButton:hover .light,
.login-body .loginHubButton:focus .light {
  display: none !important;
}
.login-body .loginHubButton:hover .dark,
.login-body .loginHubButton:focus .dark {
  display: initial !important;
}
@media only screen and (max-width: 992px) {
  .login-body #pnlLoginMessage .jumboDescription {
    padding: 20px 15px;
  }
  .login-body #pnlOutageWarn {
    padding-right: 150px;
    margin-bottom: -100px;
    font-size: 11pt;
    height: 100px;
  }
  .login-body footer {
    height: 30px;
  }
  .login-body #pnlNoSchool {
    margin-top: 5%;
  }
  .login-body #pnlOutage {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .login-body .appDisplay {
    display: block;
  }
  .login-body .card-body {
    padding: 1.25rem 3rem;
  }
}
@media only screen and (max-width: 600px) {
  .login-body #mainLogonLogo {
    display: none;
  }
  .login-body #schoolLogo {
    display: none;
  }
  .login-body #pnlOutageWarn {
    padding-right: 50px;
    margin-bottom: 0px;
    font-size: 9pt;
    height: auto;
  }
  .login-body .card-body {
    padding: 1.25rem 2rem;
  }
}
.MasterLogo {
  margin-left: 20px;
}
img.MasterLogo,
.MasterLogo img {
  width: 61px;
  content: url('img/PTO_Is_Booked_BlackText.gif');
}
#imgSchoolLogo {
  margin-right: 20px;
}
.MainPanel {
  background-color: white;
  padding: 7px 0px 0px 0px;
  max-width: 1200px;
}
.SkipLink {
  padding: 0 1em;
  position: fixed;
  left: calc(50% - 57px);
  top: -21px;
  text-align: center;
  background-color: #0778CA !important;
  color: white !important;
  z-index: 10;
  font-size: 14px;
  transition: top linear 0.1s;
}
.SkipLink:focus {
  top: 0px;
}
.masterButtons {
  display: flex;
  flex-direction: column;
}
.masterButtons .button {
  margin-left: 8px;
}
#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 {
    font-size: 14pt;
    font-weight: 600;
    line-height: 1.6;
  }
  #PTOHeading {
    display: none;
  }
}
@media only screen and (max-width: 576px) {
  #imgSchoolLogo {
    height: 50px !important;
    margin-right: 10px;
    margin-top: 5px;
  }
  #SchoolElementBanner > .row {
    align-items: center;
  }
  .masterButtons {
    flex-direction: row;
  }
  #SchoolNameBanner {
    flex: 0 0 100%;
  }
}
.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;
}
.DownloadEmailSchedule > div {
  overflow-y: visible !important;
}
.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: #292929;
  line-height: 18px;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  text-align: left;
}
.panelModeAuto {
  border-top: 1px Solid #0778CA;
  border-bottom: 1px Solid #0778CA;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
}
.panelModeAuto .row {
  justify-content: center;
}
.GridViewHeader {
  background-repeat: repeat-x;
  color: #292929;
  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: #292929;
  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;
}
input[type=checkbox] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
input[type=checkbox] + label {
  padding-left: 5px;
  max-width: calc(100% - 20px);
}
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;
  max-width: calc(100% - 17px);
}
.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;
}
.bookingTable {
  table-layout: fixed;
  position: relative;
  overflow: auto;
  border: none;
}
.bookingTable th {
  font-size: 11pt;
  border: none;
  top: -5px;
  background-color: white;
  z-index: 1;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  max-width: 240px;
  text-align: center;
}
.bookingTable td {
  padding: 5px;
  font-size: 10pt;
  border: none;
}
.bookingTable th:nth-child(1),
.bookingTable td:nth-child(1) {
  display: none;
}
.bookingTable select {
  max-width: 150px;
  width: 100%;
}
.TLoc {
  font-size: 8pt;
  word-break: break-word;
}
#pnlSwitchAutoManual {
  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: #E61E2C;
  width: 100%;
  color: black;
}
.BookingHeader {
  color: #292929;
  height: 60px;
  width: 100%;
  margin-top: -1%;
  padding: 10px 7px 0px 7px;
}
.BookingBody {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 0%;
}
.bookingButtons > .button,
.bookingButtons.button {
  width: 30px;
  height: 30px;
  line-height: 0;
  border-radius: 15px;
}
.bookingButtons:not(:first-child) > .button,
.bookingButtons:not(:first-child).button {
  margin-left: 0.5rem;
}
.offCenterButton {
  width: 24px;
}
.FormatRadioButtonHorizontalList {
  line-height: 1%;
  padding-right: 3px;
}
@media only screen and (max-width: 880px) {
  .MainPanel,
  .ParentBooking {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  /* phones  */
  /*#region Main Sections */
  .MainPanel,
  .ParentBooking {
    max-width: 550px;
  }
  .BookingHeader {
    margin-left: -2%;
    margin-top: -1%;
  }
  .ParentBookingWarnings {
    margin-left: -1%;
    background-color: #fec418;
  }
  /*#endregion */
  /*#region Student Booking Table */
  .GridViewHeader {
    text-align: left;
    vertical-align: middle;
  }
  .bookingTable {
    margin-right: -10%;
  }
  .bookingTable th {
    font-size: 12pt;
    word-wrap: normal;
  }
  .bookingTable td {
    padding: 0.5%;
    font-size: 11pt;
    word-wrap: normal;
    vertical-align: middle;
    text-align: center;
  }
  /*#endregion*/
  /*#region Booking Mode Panel */
  .StepsPanel {
    position: relative;
    margin-left: -1%;
    margin-top: 7%;
  }
  .panelModeAuto {
    margin-left: 0%;
  }
  .panelModeAuto > .container-fluid > .row {
    justify-content: space-between;
  }
  .pnlAuto {
    width: auto;
    order: 1;
    margin: auto;
  }
  /*#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%;
  }
  .DownloadEmailSchedule {
    right: 10%;
  }
  .bookedTextLabel {
    margin-left: 10%;
    white-space: nowrap;
  }
}
/* PTOD-515*/
.parentEmail div {
  max-width: 275px;
}
.parentEmail span {
  margin: 0px 5px 0px -10px;
}
.autoCheckbox {
  border-radius: 3px;
  display: inline-grid;
}
.autoCheckbox input:not(:checked) {
  opacity: 0.9;
}
.tableEQCheck {
  text-align: left;
  text-wrap: normal;
}
/*#pnlRegistrationInstructions{
    position: center;
}*/
.teacherAvailabilityGrid .GridViewHeader {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  top: -1px;
  z-index: 3;
}
.teacherAvailabilityGrid th {
  font-size: 11pt;
  color: black;
  width: 5vw;
  top: -1px;
  background-color: white;
  border: 1px solid #949494;
}
.teacherAvailabilityGrid th:nth-child(1) {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  left: -1px;
  z-index: 4;
}
.teacherAvailabilityGrid th:not(:nth-child(1)) [data-tooltip][id*="tt_chk"] {
  height: 24px;
  margin-bottom: -4px;
  margin-top: 5px;
}
.teacherAvailabilityGrid th:not(:nth-child(1)) [data-tooltip][id*="tt_chk"] .aria-tooltip {
  top: 100%;
}
.teacherAvailabilityGrid th:not(:nth-child(1)) [data-tooltip][id*="tt_chk"] input[type=checkbox] {
  vertical-align: initial;
}
.teacherAvailabilityGrid th [data-tooltip][id*="tt_Label"] {
  width: 15px;
  padding-top: 120px;
}
.teacherAvailabilityGrid td:nth-child(1) {
  border-bottom: 1px solid #949494;
  left: -1px;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  background-color: white;
  color: black;
  z-index: 2;
}
.teacherAvailabilityGrid td:nth-child(1) [data-tooltip] {
  width: 24px;
  margin-right: -4px;
}
.teacherAvailabilityGrid td:nth-child(1) [data-tooltip] .aria-tooltip {
  left: 100%;
  top: 0;
}
.teacherAvailRowStyle {
  background-color: white;
  border-bottom: 1px solid #949494;
  color: black;
}
.TU-Available {
  background-color: #0C8361 !important;
}
.TU-Unavailable {
  background-color: #fec418 !important;
}
.TU-Booked {
  background-color: #E61E2C !important;
}
.TU-Overlap-Booking {
  background-color: #0778CA !important;
}
.TU-Overlap-Unavailable {
  background-color: #4140D9 !important;
}
.AccessibilityMode .TU-Available {
  background-image: url("img/TeacherAvailability/Available.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.AccessibilityMode .TU-Unavailable {
  background-image: url("img/TeacherAvailability/Unavailable.png") !important;
  background-color: #BB8E07 !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.AccessibilityMode .TU-Booked {
  background-image: url("img/TeacherAvailability/Booked.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.AccessibilityMode .TU-Overlap-Booking {
  background-image: url("img/TeacherAvailability/Overlap_Booking.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.AccessibilityMode .TU-Overlap-Unavailable {
  background-image: url("img/TeacherAvailability/Overlap_Unavailable.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.TU-Legend {
  height: max-content;
  display: flex;
  flex-wrap: wrap;
}
.TU-Legend h5 {
  display: flex;
  align-content: center;
  width: 100%;
}
.TU-Legend h5 span[class*='TU-'] {
  width: 20px;
  height: 20px;
  display: inline-block;
}
.TU-Legend h5 span:not([class*='TU-']) {
  padding-left: 8px;
  max-width: calc(100% - 20px);
}
.recommendedIcon {
  margin: 0 3px;
}
.recommendedIcon i {
  font-size: 30px;
  margin: -2px -5px;
}
@media only screen and (max-width: 767px) {
  .teacherBookingAvailability {
    margin-right: -120px;
  }
  .TU-Legend h5 {
    width: 50%;
  }
  .TU-Legend [id*="keyA"] {
    order: 1;
  }
  .TU-Legend [id*="keyU"] {
    order: 3;
  }
  .TU-Legend [id*="keyB"] {
    order: 5;
  }
  .TU-Legend [id*="keyCB"] {
    order: 2;
  }
  .TU-Legend [id*="keyCU"] {
    order: 4;
  }
  .TU-Legend.TSMode [id*="keyB"] {
    order: 2;
  }
  .TU-Legend.TSMode [id*="keyCB"] {
    order: 4;
  }
}
@media only screen and (max-width: 575px) {
  .TU-Legend h5 {
    align-items: center;
  }
  .teacherStudentFilter {
    margin-left: -39px;
  }
}
.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: #E61E2C;
  color: white;
}
.success {
  width: 100%;
  margin-top: -1%;
  margin-bottom: 2px;
  padding: 0.5%;
  background-color: #0C8361;
  color: white;
}
.InterpreterTable {
  width: 100%;
  max-width: 750px;
}
.InterpreterTable #tt_NewLanguage,
.InterpreterTable #tt_NewLanguage input {
  width: 100%;
}
.formulaTable {
  table-layout: fixed;
}
.formulaTable > tbody > tr > td:first-child,
.formulaTable > thead * {
  font-weight: bold !important;
}
.formulaTable > * > tr > :first-child {
  padding-right: 25px;
  text-align: right;
}
.formulaTable > * > tr > td {
  word-wrap: break-word;
  vertical-align: baseline;
}
.formulaTable > * > tr td:not(:empty) + td {
  padding-left: 25px;
}
.PSCTRadiobuttons label {
  margin: 0px;
}
.PSCTRadiobuttons tr {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .manualEditPCST > :first-child > .row {
    flex-direction: column-reverse;
  }
  .manualEditPCST > :last-child {
    position: relative;
    left: 50%;
    margin-top: -621.4px;
  }
  .rightPSCT {
    position: absolute;
  }
  .PSCTRadiobuttons {
    font-size: 9px;
  }
}
@media only screen and (max-width: 567px) {
  .manualEditPCST > :last-child {
    margin-top: -614.4px;
  }
  .PSCTRadiobuttons {
    font-size: 8px;
  }
  .grdTEdit {
    width: 20px;
  }
  .grdTEdit .textbox {
    margin-right: -80px;
  }
}
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%;
}
.hideNeatUploadAd + span {
  display: none;
}
/* Upload - Errors/Warnings Data */
.affectedData-border {
  border-bottom: 1px solid #949494;
}
.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-row {
  align-items: center;
}
.upload-row h5,
.upload-row label,
.upload-row p {
  margin: 0;
}
.upload-icon {
  margin-left: 15px;
  min-width: 24px;
}
.upload-tick {
  color: #727679;
  margin: 0 -4.5px;
}
.uploadBox {
  padding: 0%;
  display: inline-flex;
  height: 27px;
  border: 1px solid #949494;
  font-size: 11pt;
}
.uploadBox.selectedStep {
  background-color: #0778CA;
  color: white;
}
.uploadBox.selectedStep .dot {
  background-color: white;
}
.uploadBox > :not(:first-child) {
  padding-left: 0px;
}
.uploadBox .dot {
  height: 15px;
  width: 15px;
  background-color: #727679;
  border-radius: 50%;
  display: block;
}
.uploadProgress {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
}
.icon-alignment {
  margin-right: -25px !important;
}
.list-spacing {
  margin-bottom: 0.7rem;
}
.upload-progress-btn {
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .wondeStudents h5 {
    font-size: 7pt;
  }
}
@media only screen and (max-width: 991px) {
  .uploadProgress {
    margin: 30px calc(-50% + 15px) 0;
  }
}
table[title="First Page"]:not(.aspNetDisabled):focus-within,
table[title="Previous Page"]:not(.aspNetDisabled):focus-within,
table[title="Next Page"]:not(.aspNetDisabled):focus-within,
table[title="Last Page"]:not(.aspNetDisabled):focus-within,
table[title="Refresh"]:not(.aspNetDisabled):focus-within {
  border: 1px solid #336699 !important;
  background-color: #ddeef7 !important;
}
a[title="Export"] {
  background-color: transparent !important;
}
@media only screen and (max-width: 767px) {
  .HeaderAlignBottom-md th {
    vertical-align: bottom;
  }
  .rotate-md {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
  }
  .rotate-md div {
    transform: rotate(-90deg);
    width: 100px;
    height: 22px;
    margin: 0 -42px;
  }
}
@media only screen and (max-width: 567px) {
  .HeaderAlignBottom-sm th {
    vertical-align: bottom;
  }
  .rotate-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
  }
  .rotate-sm div {
    transform: rotate(-90deg);
    width: 100px;
    height: 22px;
    margin: 0 -42px;
  }
}
.floating-textbox {
  position: relative;
}
.floating-textbox > .floating-label {
  color: #292929;
  display: inline-block;
  left: 7px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transform: scale(0.75) translate(0, 2px);
  transform-origin: left;
  white-space: nowrap;
  width: calc(100% - 14px);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 0.1);
}
.floating-textbox > .floating-label--inline {
  font-size: 9pt;
  transform: translate(0, 12px);
}
.floating-textbox .floating-textbox-inner {
  color: #666666;
  font-size: 9pt;
  position: relative;
}
.floating-textbox .floating-textbox-inner > input {
  padding-bottom: 2px;
  padding-top: 18px;
  width: 100%;
}
html {
  height: 100%;
  background-color: white;
}
body {
  font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, san-serif;
  font-size: 9pt;
  letter-spacing: 0.02em;
  margin: 0px;
  z-index: 1;
  height: 79%;
  color: #292929;
  background-color: white;
}
.wrapper {
  min-height: 78%;
  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 #949494;
  padding: 2px 7px 2px 7px;
  outline: none;
}
.textbox:focus {
  border: 1px solid #0778CA;
}
.textbox:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}
.textbox:disabled {
  cursor: default;
  background-color: rgba(239, 239, 239, 0.3);
  color: #666666;
  border-color: rgba(118, 118, 118, 0.3);
}
input[type="image"]:focus {
  outline: none;
}
select {
  border: 2px solid #949494;
  outline: none;
  padding: 2px 7px 2px 7px;
}
select:focus {
  border-color: #0778CA;
  background-color: white;
}
select:focus-visible {
  border-color: #0778CA;
  background-color: white;
  outline: -webkit-focus-ring-color auto 1px;
}
select.wrap-content {
  max-width: 100%;
}
select.wrap-content option {
  max-width: 100%;
  -moz-white-space: pre-wrap;
  -o-white-space: pre-wrap;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
input[type="date"] {
  border: 2px solid #949494;
  outline: none;
  padding: 2px 7px 2px 7px;
  height: 24px;
}
input[type="date"]:focus {
  border: 2px solid #0778CA;
  outline: none;
  padding: 2px 7px 2px 7px;
  background-color: white;
}
input[type="date"]:focus-visible {
  border: 2px solid #0778CA;
  outline: -webkit-focus-ring-color auto 1px;
}
selectX {
  border: 1px solid #E61E2C;
  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.material-icons {
  user-select: none;
  vertical-align: middle !important;
}
a:link {
  color: #0778CA;
  background-color: white;
}
a:active {
  color: #0778CA;
}
a:hover {
  text-decoration: none;
  color: #0778CA;
}
a:visited {
  background-color: white;
}
a.k-link {
  background-color: transparent;
  color: #505968;
}
.report-hide-Refresh [data-command="telerik_ReportViewer_refresh"] {
  display: none;
}
.report-hide-XLSX [data-command="telerik_ReportViewer_export"][data-command-parameter="XLSX"] {
  display: none;
}
.trv-report-page {
  justify-self: center;
}
.button-inline,
a.button-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #0778CA;
  word-wrap: normal;
  padding: 0px 6px 0px 6px;
  border: 1px solid #0778CA;
  border-radius: 15px;
  margin-bottom: 3px;
  min-height: 26px;
  display: inline-flex;
}
.button-inline:hover,
a.button-inline:hover,
.button-inline:focus-visible,
a.button-inline:focus-visible {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.button-inline:active,
a.button-inline:active {
  outline: none;
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.button-inline h1,
a.button-inline h1,
.button-inline h2,
a.button-inline h2,
.button-inline h3,
a.button-inline h3,
.button-inline h4,
a.button-inline h4,
.button-inline h5,
a.button-inline h5,
.button-inline h6,
a.button-inline h6 {
  margin-bottom: 0px;
}
.button,
a.button,
i.button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #0778CA;
  word-wrap: normal;
  padding: 0px 6px 0px 6px;
  border: 1px solid #0778CA;
  border-radius: 15px;
  margin-bottom: 3px;
  min-height: 26px;
}
.button:hover,
a.button:hover,
i.button:hover,
.button:focus-visible,
a.button:focus-visible,
i.button:focus-visible {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.button:active,
a.button:active,
i.button:active {
  outline: none;
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.button h1,
a.button h1,
i.button h1,
.button h2,
a.button h2,
i.button h2,
.button h3,
a.button h3,
i.button h3,
.button h4,
a.button h4,
i.button h4,
.button h5,
a.button h5,
i.button h5,
.button h6,
a.button h6,
i.button h6 {
  margin-bottom: 0px;
}
.button-red,
a.button-red,
i.button-red {
  border-color: #E61E2C;
  color: #E61E2C;
}
.button-red:hover,
a.button-red:hover,
i.button-red:hover,
.button-red:focus-visible,
a.button-red:focus-visible,
i.button-red:focus-visible {
  background-color: #E61E2C;
  color: white;
  cursor: pointer;
}
.button-red-label,
a.button-red-label,
i.button-red-label {
  border-color: #E61E2C;
  color: #E61E2C;
}
.button-yellow,
a.button-yellow,
i.button-yellow {
  border-color: #BB8E07;
  color: #BB8E07;
}
.button-yellow:hover,
a.button-yellow:hover,
i.button-yellow:hover,
.button-yellow:focus-visible,
a.button-yellow:focus-visible,
i.button-yellow:focus-visible {
  background-color: #BB8E07;
  color: white;
  cursor: pointer;
}
.button-yellow-label,
a.button-yellow-label,
i.button-yellow-label {
  border-color: #BB8E07;
  color: #BB8E07;
}
.button-light-yellow,
a.button-light-yellow,
i.button-light-yellow {
  border-color: #fec418;
  color: #fec418;
}
.button-light-yellow:hover,
a.button-light-yellow:hover,
i.button-light-yellow:hover,
.button-light-yellow:focus-visible,
a.button-light-yellow:focus-visible,
i.button-light-yellow:focus-visible {
  background-color: #fec418;
  color: white;
  cursor: pointer;
}
.button-light-yellow-label,
a.button-light-yellow-label,
i.button-light-yellow-label {
  border-color: #fec418;
  color: #fec418;
}
.button-green,
a.button-green,
i.button-green {
  border-color: #0C8361;
  color: #0C8361;
}
.button-green:hover,
a.button-green:hover,
i.button-green:hover,
.button-green:focus-visible,
a.button-green:focus-visible,
i.button-green:focus-visible {
  background-color: #0C8361;
  color: white;
  cursor: pointer;
}
.button-green-label,
a.button-green-label,
i.button-green-label {
  border-color: #0C8361;
  color: #0C8361;
}
.button-blue,
a.button-blue,
i.button-blue {
  border-color: #0778CA;
  color: #0778CA;
}
.button-blue:hover,
a.button-blue:hover,
i.button-blue:hover,
.button-blue:focus-visible,
a.button-blue:focus-visible,
i.button-blue:focus-visible {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.button-blue-label,
a.button-blue-label,
i.button-blue-label {
  border-color: #0778CA;
  color: #0778CA;
}
.button-purple,
a.button-purple,
i.button-purple {
  border-color: #4140D9;
  color: #4140D9;
}
.button-purple:hover,
a.button-purple:hover,
i.button-purple:hover,
.button-purple:focus-visible,
a.button-purple:focus-visible,
i.button-purple:focus-visible {
  background-color: #4140D9;
  color: white;
  cursor: pointer;
}
.button-purple-label,
a.button-purple-label,
i.button-purple-label {
  border-color: #4140D9;
  color: #4140D9;
}
.button-white,
a.button-white,
i.button-white {
  border-color: white;
  color: white;
}
.button-white:hover,
a.button-white:hover,
i.button-white:hover,
.button-white:focus-visible,
a.button-white:focus-visible,
i.button-white:focus-visible {
  background-color: white;
  color: white;
  cursor: pointer;
}
.button-white-label,
a.button-white-label,
i.button-white-label {
  border-color: white;
  color: white;
}
.button-light-grey,
a.button-light-grey,
i.button-light-grey {
  border-color: #949494;
  color: #949494;
}
.button-light-grey:hover,
a.button-light-grey:hover,
i.button-light-grey:hover,
.button-light-grey:focus-visible,
a.button-light-grey:focus-visible,
i.button-light-grey:focus-visible {
  background-color: #949494;
  color: white;
  cursor: pointer;
}
.button-light-grey-label,
a.button-light-grey-label,
i.button-light-grey-label {
  border-color: #949494;
  color: #949494;
}
.adminFeeRenewButton {
  display: block !important;
  padding-left: 1px;
}
.buttonIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #0778CA;
  word-wrap: normal;
  padding: 0px 6px 0px 6px;
  border: 1px solid #0778CA;
  border-radius: 15px;
  margin-bottom: 3px;
  min-height: 26px;
  margin-bottom: 0px;
  padding: 0px;
  width: 27px;
}
.buttonIcon:hover,
.buttonIcon:focus-visible {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.buttonIcon:active {
  outline: none;
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.buttonIcon h1,
.buttonIcon h2,
.buttonIcon h3,
.buttonIcon h4,
.buttonIcon h5,
.buttonIcon h6 {
  margin-bottom: 0px;
}
.row-buttonIcon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.row-buttonIcon .col-auto {
  max-width: 27px;
  padding-left: 0;
  padding-right: 0;
}
.row-buttonIcon .col-auto:not(:last-child) {
  margin-right: 1em;
}
.buttonIcon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: White;
  color: #0778CA;
  word-wrap: normal;
  padding: 0px 6px 0px 6px;
  border: 1px solid #0778CA;
  border-radius: 15px;
  margin-bottom: 3px;
  min-height: 26px;
  margin-bottom: 0px;
  padding: 0px;
  border-radius: 40px;
  width: 64px;
}
.buttonIcon-large:hover,
.buttonIcon-large:focus-visible {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.buttonIcon-large:active {
  outline: none;
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.buttonIcon-large h1,
.buttonIcon-large h2,
.buttonIcon-large h3,
.buttonIcon-large h4,
.buttonIcon-large h5,
.buttonIcon-large h6 {
  margin-bottom: 0px;
}
.buttonIconDisabled,
i.buttonIconDisabled,
.buttonIcon.aspNetDisabled,
.buttonIcon-large.aspNetDisabled,
.button.aspNetDisabled,
a.button.aspNetDisabled,
.aspNetDisabled .button,
.aspNetDisabled .buttonIcon,
.aspNetDisabled .buttonIconLarge {
  color: #727679 !important;
  border: 1px solid #727679;
  background-color: white;
  pointer-events: none;
  cursor: default;
}
.buttonIconDisabled:hover,
i.buttonIconDisabled:hover,
.buttonIcon.aspNetDisabled:hover,
.buttonIcon-large.aspNetDisabled:hover,
.button.aspNetDisabled:hover,
a.button.aspNetDisabled:hover,
.aspNetDisabled .button:hover,
.aspNetDisabled .buttonIcon:hover,
.aspNetDisabled .buttonIconLarge:hover {
  color: #727679;
  background-color: white;
  cursor: default;
}
.imageButton.aspNetDisabled {
  pointer-events: none;
  cursor: default;
}
.buttonSearch {
  border: 1px solid #949494;
  padding: 4px;
  margin-left: -6px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.buttonSearch:hover {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.SearchBox {
  width: 100%;
  max-width: 270px;
  display: inline-flex;
  align-content: center;
}
.SearchBox .textbox {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  width: calc(100% - 34px);
}
.SearchBox .textbox:focus-visible,
.SearchBox .textbox:focus {
  z-index: 3;
}
.SearchBox .buttonSearch {
  display: block;
  border: 1px solid #949494;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0 4px;
  margin-left: 0;
  height: 24px;
}
.SearchBox .buttonSearch:hover {
  background-color: #0778CA;
  color: white;
  cursor: pointer;
}
.SearchBox > :last-child {
  margin-left: -1px;
}
.borderTop {
  border-top: 1px solid #949494;
}
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;
}
.code {
  margin: 5px 5px 5px 5px;
  padding: 5px 10px 5px 10px;
  font-family: Courier New, Courier, Serif;
  background-color: #fec418;
}
.ToolTip {
  color: #0778CA;
  background-color: white;
  line-height: 18px;
  font-size: 10pt;
  text-align: left;
  padding: 15px;
  border: 1px solid #0778CA;
  margin-left: -200%;
  margin-top: -70%;
  width: 800px;
}
.ToolTip ul {
  margin: 3px 0px 3px 15px;
  list-style-type: square;
}
#upp {
  position: sticky;
  top: 10%;
  z-index: 1;
}
#pnlProgess {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}
.progress {
  min-width: 270px;
  min-height: 75px;
  width: fit-content;
  color: #292929;
  background-color: white;
  margin-bottom: 100px;
  border: 1px solid black;
  z-index: 1000;
  padding: 25px 30px;
}
.progress img {
  z-index: 1000;
  width: 30px;
  height: 30px;
  margin-top: -5px;
}
.progress-modal .modal-dialog {
  min-width: 270px;
  min-height: 75px;
  width: max-content;
  margin-top: 100px;
}
.progress-modal .modal-body {
  display: flex;
  justify-content: center;
  padding: 25px 30px;
}
.progress-modal .modal-body h3 {
  align-self: center;
  margin: 0;
}
.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: #292929;
  font-size: 9pt;
  line-height: 18px;
}
.OptionHeader a {
  color: #292929;
}
.InfoPanel2Header {
  background-repeat: repeat-x;
  color: #292929;
  font-size: 9pt;
  line-height: 22px;
  margin: 15px 75px 0px 75px;
  padding: 5px 60px 10px 60px;
}
.InfoPanel2Header a {
  color: #292929;
  text-decoration: underline;
}
.InfoPanel2HeaderReport {
  background-color: #F5F5F5;
  border: solid 1px #DDDDDD;
  border-bottom: none;
  background-repeat: repeat-x;
  color: #292929;
  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: #292929;
  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;
}
.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: #292929;
}
.InfoPanelBlue {
  color: #292929;
  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: #292929;
  line-height: 18px;
  font-size: 9pt;
  padding: 0px 10px 0px 5px;
  margin: 5px 0px 4px 0px;
}
.HelpPanel ul {
  color: #292929;
  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;
}
.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: #292929;
  border-style: solid;
  border-width: 1px;
  margin: 25% 10px 10px 10px;
  width: 300px;
  height: 90px;
  z-index: 100;
}
.errorMsg {
  background-color: #E61E2C;
  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;
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}
.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: #292929;
  padding: 6px;
}
table.news {
  background-color: #0778CA;
  border-width: 0px;
  border-collapse: collapse;
}
table.news tr {
  background-color: white;
}
table.news td {
  vertical-align: top;
  text-align: left;
  font-size: 9pt;
  color: #292929;
  border-color: #F5F5F5;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-spacing: 0px;
  padding: 9px 6px 12px 6px;
}
.xtest {
  background-color: #E61E2C;
}
/* 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: #292929;
  border-color: #0778CA;
  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: #0C8361;
  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;
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.RegWarnMsg {
  clear: both;
  text-align: center;
  background-color: #0C8361;
  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;
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  background-color: #fec418;
  color: black;
}
.RegErrMsg {
  clear: both;
  text-align: center;
  background-color: #0C8361;
  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;
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  background-color: #E61E2C;
  padding: 3px 5px 3px 5px;
  margin: 6px 0px 3px 0px;
}
.TeacherSelect {
  border-collapse: collapse;
}
.TeacherAllowCancel {
  border-collapse: collapse;
}
.pageMenu .row {
  align-items: center;
}
.pageMenu h2 {
  margin: 0;
}
.navigationButtons {
  color: #4140D9;
  background-color: transparent;
  min-width: 90px;
}
.navigationButtons:hover,
.navigationButtons:disabled,
.navigationButtons:active,
.navigationButtons:focus-within {
  color: white !important;
  background-color: #4140D9CC;
  font-weight: 800;
}
.MenuBG {
  color: #4140D9;
  text-align: center;
  line-height: 22px;
  max-width: 835px;
}
.MenuBG a {
  color: #727679;
  border: none;
}
.MenuBG a:hover,
.MenuBG a:focus-visible {
  color: white;
}
.MenuBG a * {
  margin: 0px;
}
.MenuBG .material-icons {
  font-size: 40px;
}
.accordionButton .row {
  align-items: center;
  margin: 0;
}
.accordionButton .row .col > * {
  margin: 0;
}
/* 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;
}
.card {
  background-color: #fec418;
}
.required {
  color: #E61E2C;
}
.buttonOkPopup {
  padding: 6px 6px 6px 6px !important;
}
.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 {
  color: #dd4814;
  background-color: white;
  border: 1px solid #dddddd;
}
.GridViewPager table > tbody > tr > td > span {
  z-index: 2;
  color: #aea79f;
  background-color: #f5f5f5;
  border-color: #dddddd;
}
.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;
  margin-left: -1px;
}
.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;
}
.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 > tdlast-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
@media only screen and (max-width: 767px) {
  /* phones  */
  .MenuBG {
    width: 100%;
  }
}
.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;
}
#chat-widget-container {
  bottom: 0 !important;
  max-height: 100% !important;
}
.col-1 {
  width: 8.333333%;
}
.col-2 {
  width: 16.666667%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.333333%;
}
.col-5 {
  width: 41.666667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.333333%;
}
.col-8 {
  width: 66.666667%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.333333%;
}
.col-11 {
  width: 91.666667%;
}
.col-12 {
  width: 100%;
}
.chkNoMargin > * {
  margin: 0px;
}
.d-grid {
  display: grid !important;
}
@media (min-width: 576px) {
  .col-sm-1 {
    width: 8.333333%;
  }
  .col-sm-2 {
    width: 16.666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.333333%;
  }
  .col-sm-5 {
    width: 41.666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.333333%;
  }
  .col-sm-8 {
    width: 66.666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.333333%;
  }
  .col-sm-11 {
    width: 91.666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    width: 8.333333%;
  }
  .col-md-2 {
    width: 16.666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.333333%;
  }
  .col-md-5 {
    width: 41.666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.333333%;
  }
  .col-md-8 {
    width: 66.666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.333333%;
  }
  .col-md-11 {
    width: 91.666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    width: 8.333333%;
  }
  .col-lg-2 {
    width: 16.666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.333333%;
  }
  .col-lg-5 {
    width: 41.666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.333333%;
  }
  .col-lg-8 {
    width: 66.666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.333333%;
  }
  .col-lg-11 {
    width: 91.666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    width: 8.333333%;
  }
  .col-xl-2 {
    width: 16.666667%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.333333%;
  }
  .col-xl-5 {
    width: 41.666667%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.333333%;
  }
  .col-xl-8 {
    width: 66.666667%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.333333%;
  }
  .col-xl-11 {
    width: 91.666667%;
  }
  .col-xl-12 {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .row-buttonIcon {
    width: 27px;
  }
  .row-buttonIcon .col-auto {
    margin: 0 !important;
  }
}
@media (max-width: 576px) {
  .navigationButtons {
    min-width: 50px;
  }
  .navigationButtons i {
    font-size: 30px !important;
  }
  .MenuBG > .container {
    padding: 0px 4px;
  }
  h1 {
    font-size: 12pt;
  }
  h2 {
    font-size: 11pt;
  }
  h3 {
    font-size: 10pt;
  }
  h4 {
    font-size: 9.5pt;
  }
  h5 {
    font-size: 9pt;
  }
  h6 {
    font-size: 9pt;
  }
  .w-sm-100 {
    width: 100%;
  }
}