@font-face{
  font-family: "Roboto-Regular";
  src: url("./Roboto-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto-Bold";
  src: url("./Roboto-Bold.ttf") format("truetype");
}

#topbar {
   display                    : none;
   visibility                 : hidden;
}

h1 {
   font-family                : Roboto-Bold;
}

body {
   padding                    : 0px;
   margin                     : 0px;
   background-color           : #F9FBFC;
}

table {
   border-collapse            : collapse;
}

#_bodydiv {
   width                      : 100%;
   min-height                 : 100%;   
}

#_leftpane {
   width                      : 250px;
   background-color           : #252E43;
   position                   : absolute;
   left                       : 0px;
   top                        : 0px;
   z-index                    : 10;
   min-height                 : 100%;
}

#_mainpane {
   position                   : absolute;
   left                       : 0px;
   top                        : 0px;
   z-index                    : 0;
   background-color           : #F9FBFC;
   padding-left               : 270px;
   min-height                 : 100%;
}

#_toppane {
   position                   : absolute;
   left                       : 0px;
   top                        : 0px;
   z-index                    : 0;
   background-color           : #F9FBFC;
   width                      : 100%;
   height                     : 50px;
}

.menuitem {
   height                     : 30px;
   width                      : 200px;
   padding-left               : 20px;
}

.submenuitem {
   height                     : 30px;
   width                      : 200px;
   padding-left               : 40px;
}

.menulink {
   color                      : #818B9D;
   font-size                  : 13pt;
   font-family                : Roboto-Regular;
   text-decoration            : none;
}

.submenulink {
   color                      : #818B9D;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   text-decoration            : none;
}

#logindiv {
   width                      : 1000px;
   height                     : 480px;
   position                   : absolute;
   left                       : 50%;
   top                        : 50%;
   margin-left                : -500px;
   margin-top                 : -280px;
} 

#logintable {
   width                      : 1000px;
   margin-left                : 20px;
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   border                     : 1px #252E43 solid;
}

.logininput {
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   height                     : 30px;
   width                      : 200px;
   border                     : 1px #000000 solid;
}

.schoolheader {
   width                      : 100%;
   border-top                 : 1px #FFFFFF solid;
   border-bottom              : 1px #FFFFFF solid;
   font-family                : Roboto-Bold;
   color                      : #FFFFFF;
   background-color           : #000000;
   height                     : 34px;
   text-align                 : center;
   font-size                  : 14pt;
   display                    : flex;
   align-items                :center;
}
   
.newtextform {
   border                     : 1px #252E43 solid;
   padding-left               : 15px;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;   
   height                     : 30px;
}

.newdropdownform {
   border                     : 1px #252E43 solid;
   padding-left               : 15px;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;   
   height                     : 30px;
}

.newtextsubmit {
   border                     : 1px #252E43 solid;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;   
   height                     : 30px;
}

.newtextsubmitbig {
   border                     : 1px #252E43 solid;
   font-family                : Roboto-Regular;
   font-size                  : 15pt;   
   height                     : 35px;
   min-width                  : 150px;
}

.newdropdownformbig {
   border                     : 1px #252E43 solid;
   padding-left               : 15px;
   font-family                : Roboto-Regular;
   font-size                  : 15pt;   
   height                     : 35px;
}

.infobox-success {
   background-color           : #EDFFE6;
   padding                    : 10px;
   min-width                  : 500px;
   font-family                : Roboto-Bold;
   font-size                  : 12pt;
   margin-top                 : 20px;
}

.infobox-failed {
   background-color           : #FFE6EB;
   padding                    : 10px;
   min-width                  : 500px;
   font-family                : Roboto-Bold;
   font-size                  : 12pt;
   margin-top                 : 20px;
}

th {
   font-family                : Roboto-Bold;
   font-size                  : 12pt;   
}

.newcheckboxform {
   width                      : 15px;
   height                     : 15px;
   border                     : 1px #252E43 solid;
}

.tabberheadlink {
   font-family                : Roboto-Bold;
   font-size                  : 13pt;
   text-decoration            : none;
   color                      : #000000;
}

.LoginPageLink {
   font-family                : Roboto-Regular;
   font-size                  : 13pt;
   text-decoration            : none;
   color                      : #252E43;
}


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}   

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.PageButton {
   border                     : 0px;
   background-color           : #8ACCC8;
   border-radius              : 5px;
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   height                     : 30px;
   text-align                 : center;
   color                      : #FFFFFF;
}

#StatusPopUpSuccess {
   width                      : 600px;
   text-align                 : center;
   font-family                : Roboto-Regular;
   font-size                  : 14pt;
   min-height                 : 40px;
   padding-top                : 20px;
   padding-bottom             : 20px;
   background-color           : #E1FFE1;
   border                     : 1px #000000 solid;
   box-shadow                 : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -webkit-box-shadow         : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -moz-box-shadow            : 2px 2px 5px 0px rgba(0,0,0,0.72);
   border-radius              : 0px 0px 10px 10px;
   position                   : fixed;
   top                        : 0px;
   left                       : 50%;
   margin-left                : -300px;
   -webkit-animation          : signup-response 0.5s 1;
   animation                  : signup-response 0.5s 1;
   -webkit-animation-delay    : 2s; /* Safari and Chrome */
   animation-delay            : 3s;
   -webkit-animation-fill-mode: forwards;   
   animation-fill-mode        : forwards;
}

@keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}


.newstable {
  border-collapse          : collapse;
  border-radius            : 10px;
  border-style             : hidden; /* hide standard table (collapsed) border */
  box-shadow               : 0 0 0 1px #E6E7E9; /* this draws the table border  */ 
  overflow: hidden
}

.newstable th {
  font-family              : Roboto-Bold;
  font-size                : 12pt;
  color                    : #76A591;
  background-color         : #F9FAFB;
}

.newstable td {
  border                   : 1px solid #ccc;
  background-color         : #FFFFFF;
  font-family              : Roboto-Regular;
  font-size                : 11pt;  
  color                    : #000000;  
  padding                  : 5px;
}

.tablelistingtr:hover {
  background-color         : #EBEBEB;   
}

.listinglink {
   color                   : #000000;
   font-size               : 11pt;
   text-decoration         : underline dotted;
}

.tabbingtable {
   width                      : 99%;
   margin-top                 : 15px;
   margin-left                : 5px;
   margin-bottom              : 30px;
}

.tabbingtableth {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #FFFFFF solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #FFFFFF solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablethselected {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #359AB9 solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #359AB9 solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablelink {
   font-size                  : 12pt;
   color                      : #000000;
   text-decoration            : none;
}

.tabbingtablelinkselected {
   font-size                  : 12pt;
   color                      : #359AB9;
   text-decoration            : none;
}