body {
    font-family: Lato, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.column {
  float: left;
  padding: 10px;
}
.page-wrapper {
  height: 100%;
  position: relative;
}

.acol {
  position:fixed; /* <-- fixes the left panel to prevent from scrolling */
  top:0;
  bottom:0;
  left:0;
  width: 240px;
  height:100%;
  text-align:center;
}

.bcol {
  margin-left:240px;
  padding-left:3px;
  width: calc(100% - 240px);
  min-height:80%;
}

.font16 { font-size:16px;}
.font14 { font-size:14px !important;}
.font15 { font-size:15px;}
.font13 { font-size:13px;}
.font12 { font-size:12px !important;}
.font18 { font-size:18px;}
.font10 { font-size:10px;}
.font24 { font-size: 24px;}
.font20 { font-size:20px;}
.font18 { font-size:18px;}

.subdue-font10 { font-size:10px; opacity: 0.6;}
.subdue-font14 { font-size:14px; opacity: 0.6;}
.subdue-font12 { font-size:12px; opacity: 0.6;}
.subdue-font16 { font-size:16px; opacity: 0.6;}
.subdue-font11 { font-size:11px; opacity: 0.6;}

.bold {
  font-weight: 600 !important;
}

.bold800 {
  font-weight: 800 !important;
}

.bold700 {
  font-weight: 700 !important;
}

.bold600 {
  font-weight: 600 !important;
}

.grey {
  color: #7E7E7E;
}

.white {
  color: white;
}
/* Clear floats after the columns
.row:after {
  content: "";
  display: table;
  clear: both;
}
*/
/* school tab bar */
ul.nav {
    border-bottom: 1px solid #ccc;
}
ul.nav > li.nav-item > a {
    color:#000;
}
ul.nav > li.nav-item > a.active {
    border-bottom: 1px solid #007bff;
    color: #007bff;
}
/* school tab bar */

ul.nav.nounderline {
    border-bottom: none;
}

/* nav horizontal */
ul.rnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: right;
}
ul.rnav > li {
  float: right;
}
ul.rnav > li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover
ul.nav > li a:hover {
  background-color: #555;
  color: white;
}
*/
/* nav vertical */
ul.vnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
ul.vnav > li {
  display: block;
  vertical-align: middle;
  color: #fff;
  padding: 10px 16px;
}

ul.vnav > li a {
  color: #fff;
  text-decoration: none;
}

div.socialaccount_ballot > ul a {
    color: white;
    font-size: 20px;
}
.no-bullet-list {
    list-style-type: none;
}

.skill-no-bullet-list {
  list-style-type: none;
}

ul input {
   margin-right:10px;
}

/* lp editor tool styles - begin */
.ql-editor {
     white-space: pre-wrap;
}
.containerdiv img {
    height:90px;
}

.containerdiv video {
    height:100px;
}

.mediap{
    /* max-height:70px; */
    max-width: 100%;
}

.boxy {
    border: solid 1px #6c757d;
    margin: 8px 0;
    padding: 8px;
}

.preview {
    color: #434c8d;
    font-size: 14px;
}
.preview ul li{
/*    color: #0F0F0F; */
    margin-bottom: 8px;
}
.preview ol li{
/*    color: #0F0F0F; */
    margin-bottom: 8px;
}
.preview tr {
    margin-top: 12px;
}


#sortable { list-style-type: none; margin: 0; padding: 0;  }
#sortable li { margin: 0 3px 12px 3px;  }

#u_sortable { list-style-type: none; margin: 0; padding: 0;  }
#u_sortable li { margin: 0 3px 12px 3px;  }

td p { padding-left: 0px;}
p.ql-indent-1 { padding-left: 0px;}
p.ql-indent-2 { padding-left: 36px;}
p.ql-indent-3 { padding-left: 48px;}
p.ql-indent-4 { padding-left: 60px;}
ul {padding-left: 16px;}
ol {padding-left: 16px;}


td.nolist p{ padding-left: 12px;}
td.nolist p.ql-indent-1 { padding-left: 24px;}
td.nolist p.ql-indent-2 { padding-left: 36px;}
td.nolist p.ql-indent-3 { padding-left: 48px;}
td.nolist p.ql-indent-4 { padding-left: 60px;}

/* lp editor tool styles -begin */

/* school editor tool styles */

/* school list styles */

/* display table styles begins*/
.table-curved {
    border-radius: 8px;
    border: 0.5px solid #E1E3E5;
    border-spacing: 0px;
    border-collapse: separate;
}
.table-curved td {
    border: none;
    border-top: 0.5px solid #E1E3E5;
    font-weight: 400;
    font-size: 14px;
}
.table-curved th {
    border-top: none;
    border-bottom: none;
    font-weight: 500;
    font-size: 14px;
}

.table-curved th i{
    font-size: 14px;
    color: lightslategray;
}

.table-curved tr:last-child td:first-child {
    border-bottom-left-radius: 8px !important;
}
.table-curved tr:last-child td:last-child {
    border-bottom-right-radius: 8px !important;
}
.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):before {
    font-family: "Font Awesome 5 Free";
    color: #5C5F62;
    content: "\f0dc\00a0\00a0";
    font-weight: 900;
}
#sorttable_sortfwdind, #sorttable_sortrevind { display: none; }
th.sorttable_sorted::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0dd\00a0\00a0";
    color: #5C5F62;
    font-weight: 900;
}
th.sorttable_sorted_reverse::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0de\00a0\00a0";
    color: #5C5F62;
    font-weight: 900;
}

.table thead>tr>th {border:none;}

.borderless td, .borderless th {
    border: none;
}

.thead-bordered thead {
  border-bottom: 0.5px solid #E1E3E5 !important;
  border-spacing: 0px;
  border-collapse: separate;
}

.table-bordered {
  border-radius: 8px;
  border: 0.5px solid #E1E3E5;
  border-spacing: 0px;
  border-collapse: separate;
}

.table-bordered td {
  border: none;
  border-top: 0.5px solid #E1E3E5;
  border-right: 0.5px solid #E1E3E5;
  font-weight: 400;
  font-size: 14px;
}

.table-bordered th {
  border-top: none;
  border-right: 0.5px solid #E1E3E5;
  font-weight: 500;
  font-size: 14px;
}

/* display table style ends */

/* text styles */

h1.title-header {
    font-size: 28px;
    font-weight: 700;
}

p#field-group-header {
    font-size: 12px;
    color: grey

}

/* slider style begins */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

input:checked + .slider {
    background-color: #007bff;
}

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

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

.slider.round {
    border-radius: 20px;
}

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

/* slider style ends */

/* attendance-slider style begins */
.attendance-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F24040;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}


input:checked + .attendance-slider {
  background-color: #61C27A;
}

input:focus + .attendance-slider {
  box-shadow: 0 0 1px #61C27A;
}

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

.attendance-slider.round {
  border-radius: 20px;
}

.attendance-slider.round:before {
  border-radius: 50%;
}
/* attendance-slider style ends */

/* misc styles */

.input-group-text {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-right: none;
    background-color: transparent;
}

input#searchinput{
    border-bottom-left-radius: 0px;
    border-left: none;
    border-top-left-radius: 0px;
}

.has-search .form-control {
    padding-left: 2.375rem;
    border:none;
    border-bottom: 1px solid #cccccc;
    border-radius: 0;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.no-bullets {
    list-style-type: none;
    padding-left: 0;
}

i.fas.fa-pen {
    color: transparent;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #5C5F62;
   font-weight: 900;
}

i.fas.fa-trash.outline {
    color: transparent;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #EB5757;
   font-weight: 900;
}

.form-control-underlined {
    border-width: 0;
    border-bottom-width: 1px;
    border-radius: 0;
    padding-left: 0;
  }

/* school timetable styles */

.schedule-container {
  margin: 10px;
  margin-top:10px;
  margin-right: 0px;
  overflow: auto;
}

.weeklyPicker tr:hover {
  background-color: #808080;
}
#ui-datepicker-div {
  z-index: 2000 !important;
}
#weeklyPicker {
  z-index: 2000 !important;
}

.no-border-input {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border-style: none;
  border: none;
  background: transparent;
}

.bold-font20{
  font-size: 20px;
  font-weight: 600;
}

.day {
  width: 145px;
  float: left;
  background-color: rgb(255, 255, 255);
  background-size: 1px 20%;
}

.hourtime {
  width: 100px;
  float: left;
  background-color: rgb(255, 255, 255);
  background-size: 1px 20%;
  font-family: Lato;
  font-size: 12px;
  line-height: 14px;
  color: #202223;
}

.day_exception {
  display: table-cell;
  min-width: 136px;
  max-width: 136px;
  background-color: rgb(255, 255, 255);
  background-size: 1px 20%;
}

.day_exception_hourtime {
  display: table-cell;
  min-width: 100px;
  background-color: rgb(255, 255, 255);
  background-size: 1px 20%;
}

.day_title {
  height: 10vh;
  background-color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}
.exception {
  font-weight: normal;
  text-transform: none;
}

.hour {
  text-align: right;
  height: 12vh; /* 0.2vh per minute */
  width: 100%;
  line-height: 1vh;
  font-size: 16px;
  opacity: 0.6;
  align-content: right;
  /* margin: 4px; */
  /* padding: 5px; */
  padding-right: 15px;
}
.time-slot-hr {
  width: 700%;
}

.class {
  font-family: Lato;
  width: 100%;
  line-height: 1vh;
  font-weight: 300;
  align-content: left;
  border-radius: 5px;
  margin: 5px;
  margin-top: 0px;
  margin-bottom: 2px;
  padding: 5px;
}

.spacing { background-color: transparent; }

.watermark {
  left: 15%;
  line-height: 200px;
  margin-top: 15%;
  position: absolute;
  text-align: center;
  top: 30%;
  width: 1088px;
  font-family: Lato;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.subject {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: Lato;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #202223;
}
.break {
  font-size: 12px;
}

.time {
  font-family: Lato;
  font-size: 12px;
  line-height: 14px;
  color: #202223;
}

.day_heading {
  font-family: Lato;
  font-size: 20px;
  color: #000000;
}

.conflict {
  width: 100%;
  line-height: 1vh;
  background: #FFEFEF;
  border: 2px solid #CC2F2F;
  font-size: 12px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.strike {
  display: block;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 1200%;
  margin-left: 100%;
  padding-bottom: 2px;
}

.strike > span {
  position: relative;
  display: inline-block;
}

.strike > span:before,
.strike > span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #000000;
  opacity: 0.1;
}

.strike > span:before {
  right: 100%;
  margin-right: 15px;
}

.strike > span:after {
  left: 100%;
  margin-left: 15px;
}

.dropdown-content {
  display: none;
  position: relative;
  margin-top: 60px;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show{ display: block; }

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

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

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

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

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

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

/* student admin tool styles  - begin */
.iframe-row {position: absolute; top: 0; left: 200px; right: 0; bottom: 0;  }
.iframe-row iframe {display: block; width: 100%; height: 100%; border: none;}
/* school editor tool styles - end */

/* teacher assign checkbox styles - begin */
label.normal {
    border: 1px solid #E0E0E0;
    background: white;
    color: black;
}

label.active {
    border: 1px solid #007bff;
    background: #007bff;
    color: white;
}

label.disabled {
    border: 1px solid #E0E0E0;
    background: #E0E0E0;
    color: #5b5b5b;
}

ul.nav-pills li.nav-item a.active{
    background: #F6F6F9;
    border: none;
    color: black;
}

/* Holiday editor tool styles - begin */
.form {
  margin: 12px;
}

.radio {
	background: transparent;
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -1px 0px #BCBFC3, inset 1px 0px 0px #BBBFC3, inset 0px 1px 0px #BBBFC3, inset -1px 0px 0px  #BBBFC3;
  border-radius: 4px;
	position: relative;
	display: inline-block;
}

.radio input {
	width: auto;
	height: 100%;
	appearance: none;
	outline: none;
	cursor: pointer;
	border-radius: 2px;
	padding: 4px 8px;
	background: transparent;
	color: #202223;
	font-size: 14px;
	transition: all 100ms linear;
}

.radio input:checked {
  background-color: #2F80ED;
	color: #fff;
	box-shadow: 0 1px 1px #0000002e;
	text-shadow: 0 1px 0px #79485f7a;
}

.radio input:before {
  content: attr(label);
	display: inline-block;
	text-align: center;
	width: 100%;
}

.footer {
  background: #F6F6F7;
  box-shadow: inset 0px 1px 0px #E4E5E7;
}

.heading {
  font-size: 14px;
  font-weight: 600;
  color: #202223;
}
/* Holiday editor tool styles - end */

/* School Timetable Tab styles - begin */
/* table {
	width: 750px;
	border-collapse: collapse;
	margin:50px auto;
	}

th {
	background: #3498db;
	color: white;
	font-weight: bold;
	}
*/

/* This was applying universally, maybe there can be a more
specific selector */

/* td, th {
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 20px;
	} */

.labels {
	background-color: #F4F9FE;
	font-weight: 600;
	color: black;
}

.label label {
	display: block;
}

.novalid {
  color: #D60000;
}

.incomplete{
  color: #DD9B38;
}

.complete {
  color: #747474;
}

[data-toggle="toggle"] {
	display: none;
}
/* School Timetable Tab styles - end */

/* School Timetable Wizard -start */

.assign-subjects-container {
  width: 1160px;
}

div#table-container {
    min-width: 100%;
}

table > tbody#basettreview > tr >td:not(:first-child) {
    box-shadow: 0px -1px 0 0 #E1E3E5;
}

table > tbody#basettreview > tr >td:nth-child(2) {
    box-shadow: 0px -1px 0 0 #E1E3E5, -1px 0 0 0 #E1E3E5;

}

table > tbody#basettreview > tr:last-child >td:not(:first-child) {
    box-shadow: 0px -1px 0 0 #E1E3E5, 0 1px 0 0 #E1E3E5;
}

table > tbody#basettreview > tr:last-child >td:nth-child(2) {
    box-shadow: 0px -1px 0 0 #E1E3E5, -1px 1px 0 0 #E1E3E5;
}

table > tbody#basettreview > tr >td:last-child {
    box-shadow: 0px -1px 0 0 #E1E3E5, 1px 0 0 0 #E1E3E5;

}

table > tbody#basettreview > tr:last-child >td:last-child {
    box-shadow: 0px -1px 0 0 #E1E3E5, 1px 1px 0 0 #E1E3E5;
}

table > tbody#basettreview > tr:first-child >td:nth-child(2) {
    border-top-left-radius: 6px;
}

table > tbody#basettreview > tr:first-child >td:last-child {
    border-top-right-radius: 6px;
}

table > tbody#basettreview > tr:last-child >td:nth-child(2) {
    border-bottom-left-radius: 6px;
}

table > tbody#basettreview > tr:last-child >td:last-child {
    border-bottom-right-radius: 6px;
}

table.table.tt {
    display:inline-table;
    z-index: 0;
    table-layout: fixed;
    position: relative;
}

.table td.label {
    display: flex;
    font-size: 11px;
    padding-top: 0px;
    justify-content: flex-end;
}

td.tt {
    min-height: 11vh;
    height: 11vh;
    max-height: 15vh;
}

.tt-event {
    position: absolute;
    color: #202223;
    border-radius: 2px;
    line-height: 1;
    margin-left: 4px;
    overflow: hidden;
}

.regular-event {
    background-color: #EFEFF8;
}

.general-event {
    background-color: #F7F7FB;
}

.tt-event-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 130px;
    display: block;
    font-size: 10px;
    position: relative;
}

.day-header {
    color:#7E7E7E;
    white-space: nowrap;
}

.day-header i.fas.fa-pen {
    -webkit-text-stroke-color: #7E7E7E;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width:1200px;
    }
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 240px;
    padding: 5px 0px;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: none !important;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
  }

  .ui-autocomplete > li > div {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
  }

  .ui-state-hover,
  .ui-state-active,
  .ui-state-focus {
    text-decoration: none;
    color: #262626 !important;
    background-color: #f5f5f5 !important;
    border: none !important;
    cursor: pointer;
  }

  .dot {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
  }

  ul.subject-list {
    list-style:none;
    padding-left: 0;
  }

  .subject-tray-item {
    position: relative;
    min-height: 65px;
    width: 140px;
    background-color: grey;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 2px;
  }

  div.regular.ui-state-hover {
    box-sizing: border-box !important   ;
    /* box-shadow: inset -1px 0 0 #458FFF, inset 1px 0 0 #458FFF, inset 0 -1px 0 #458FFF, inset 0 1px 0 #458FFF; */
    border: 2px solid #458FFF !important;
    background-color: #DFDFF2 !important;
  }

  .subject-tray-item:hover {
    box-sizing: border-box !important;
    border: 2px solid #458FFF;
    box-shadow: 0 0 12px 0.4px #ccc;
    cursor: pointer;
  }

  .subject-tray-item a {
      position: absolute;
      top: 5px;
      right: 10px;
      visibility: hidden;
      font-size: 12px;
  }

  .subject-content a {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
    font-size: 10px;
  }

  .subject-tray-item:hover a, .subject-content:hover a {
      visibility: visible;
  }
  
  .subject-content {
    border-radius: 4px;
  }

  .class-teacher-content a {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
    font-size: 10px;
  }

  .class-teacher-content:hover a {
      visibility: visible;
  }

  .class-teacher-content {
    border-radius: 4px;
  }

  ul.teacher-list {
    list-style:none;
    padding-left: 0;
  }

  .teacher-tray-item {
    position: relative;
    min-height: 65px;
    width: 140px;
    background-color: grey;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 2px;
  }

  .teacher-tray-item:hover {
    box-sizing: border-box !important;
  border: 2px solid #458FFF;
    box-shadow: 0 0 12px 0.4px #ccc;
    cursor: pointer;
  }

  .teacher-tray-item a {
      position: absolute;
      top: 5px;
      right: 10px;
      visibility: hidden;
      font-size: 12px;
  }

  .teacher-content a {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
    font-size: 10px;
  }

  .teacher-tray-item:hover a, .teacher-content:hover a {
      visibility: visible;
  }

  .teacher-content {
    border-radius: 4px;
  }

  .schedule-content a {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
    font-size: 10px;
  }

  .schedule-content:hover a {
    visibility: visible;
  }

  .schedule-content {
    border-radius: 4px;
  }

  .class-teacher-schedule-content a {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
    font-size: 10px;
  }

  .class-teacher-schedule-content:hover a {
    visibility: visible;
  }

  .class-teacher-schedule-content {
    border-radius: 4px;
  }

/* School Timetable Wizard - End */
/* Teacher Details Page styles - begin */
.badge-role {
  background-color: #FEC1FF;
}
/* Teacher Details Page styles - end */

/* User Management Page styles - begin */
.gray {
  color: #6D7175;
}
/* User Management Page styles - end */

/* School Timetable tab styles - begin */
.template_container {
  display: block;
  overflow: hidden;
  background: #F4F9FE;
  height: 170px;
  margin: 0px;
  padding: 10px 20px;
  margin-right: 15px;
  margin-left: 15px;
}

.add-template-btn {
  display:table-cell;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #E8EEF3;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 16px 8px;
  margin-left: 12px;
  width: 160px;
  height: 102px;
}
.add-template-btn:hover{
  box-sizing: border-box;
  box-shadow: 
			inset 0 0 0 2px #666,
			0 0 1px rgba(0, 0, 0, 0);
}

.template-options {
  cursor: pointer;
  margin: 16px 0px;
  padding: 20px 12px;
  width: 417px;
  height: 76px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 10px;
  line-height: 1vh;
}
.template-options:hover {
  box-sizing: border-box;
  box-shadow: 
			inset 0 0 0 2px #666,
			0 0 1px rgba(0, 0, 0, 0);
}

.template-show {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  padding: 12px;

  position: static;
  width: 160px;
  height: 102px;
  left: 157px;
  top: 0px;

  background: #DFE2FF;
  border: 1px solid #E8EEF3;
  box-sizing: border-box;
  border-radius: 8px;

  /* Inside Auto Layout */

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 8px;
  margin-bottom: 16px
}
.template-show:hover{
  box-sizing: border-box;
  box-shadow: 
			inset 0 0 0 2px #666,
			0 0 1px rgba(0, 0, 0, 0);
}

.base-color {
  background: #DFE2FF;
}
.exception-color {
  background: #FFE8D3;
}

.template-radio.selected{
  border: 2px solid #2470BC;
  box-sizing: border-box;
}

.overflow-ellipsis {
  display: -webkit-box;
  line-height: 1.2;
  vertical-align: bottom;
  max-width: 130px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-name {
  line-height: 60px;
  height: 40px;
}

.modallg {
  width: 610px;
  height: 544px;
}
/* School Timetable tab styles - end */

/* Setup structure styles - begin */
.week-attr-container {
  width: 96%;
  height: 175px;
  background: #F4F9FE;
}
/* Setup structure styles - end */

.message {
  background: #FFE3E2;
}

.section {
  width: 136px;
  height: 60px;
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}

.subject-tile {
  width: 136px;
  height: 60px;
  background: #F7F7FB;
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  /* line-height: 60px; */
  margin-bottom: 4px;
  border-radius: 4px;
}

.class-teacher-tile {
  width: 136px;
  height: 60px;
  background: #F7F7FB;
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  margin-bottom: 4px;
  border-radius: 4px;
}

.gss-container {
  width: 100%;
}
.subject-col-container {
  width: 136px;
  margin: 12px;
  margin-top: 0px;
  padding: 0px;
}

.pattern {
  position: absolute;
  top: 0px;
  left: 0px;
}

.user-container {
	width: 44px;
	height: 44px;
	background: #BAE0FC;
	border-radius: 9999px;
  margin-left: 4px;
  margin-top: 4px;
}

.profile-image-container {
  width: 98px;
	height: 98px;
	border-radius: 9999px;
  margin-left: 4px;
  margin-top: 4px;
}

#attendance td {
  height: 65px;
  text-align: center;
  vertical-align: middle;
}

.login-bg {
  background-image: url(/static/images/login_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

tbody.manage-class-tbody > tr > td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.login-container {
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(64, 69, 107, 0.13);
  border-radius: 10px;
  padding: 0px;
  position: absolute;
  width: 500px;
  height: 600px;
  left: 176px;
  top: 10%;
}

i.fas.fa-trash.outline {
  cursor: pointer;
}

/* div.subject-tile.ui-state-hover {
  box-sizing: border-box !important   ;
  box-shadow: inset -1px 0 0 #458FFF, inset 1px 0 0 #458FFF, inset 0 -1px 0 #458FFF, inset 0 1px 0 #458FFF;
  background-color: #DFDFF2 !important;
} */

#loading {
  background-color: rgba(200, 200, 200, 0.4);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index:10;
}

#loading * {
  vertical-align: middle;
}

#loading_box {
  display: inline-block;
  height: 100%;
}

.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
border: 2px solid #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
border-top-color: #3a7cf0;
border-left-color: #3a7cf0;
animation: spin 1s infinite ease-in;
}

.loading.flutter_web {
border: 4px solid #fff;
width: 40px;
height: 40px;
border-radius: 50%;
border-top-color: #000;
border-left-color: #000;
animation: spin 1s infinite ease-in;
}

@keyframes spin {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}
}
#file-drag {
	border        : 2px dashed #555;
	border-radius : 7px;
	color         : #555;
	cursor        : pointer;
	display       : block;
	margin        : 1em 0;
	padding       : 3em;
	text-align    : center;
	transition    : background 0.3s, color 0.3s;
}

#file-drag:hover {
	background : rgb(245, 242, 242);
}

#file-drag:hover,
#file-drag.hover {
	border-style : solid;
}

#file-upload-form {
	margin : auto;
	width  : 100%;
}

/* ul {
	list-style-type : none;
	margin          : 0;
	padding         : 0;
} */

  /* Dashboard */
  ul.nav-pills.card-header-pills li.nav-item a.active{
    background: #EEF1F8;
    border: none;
    color: black;
    font-size: 14px;
    font-weight: 700;
}

.mb-2-5 {
  margin-bottom: .75rem!important;
}

#id_report_table          { overflow: auto; height: 380px; }
#id_report_table thead { position: sticky; top: -1px; z-index: 1; }

/* Just common table stuff. Really. */
#id_report_table table  { border-collapse: collapse; width: 100%; }
#id_report_table th     { background:#eee; }

.sticky-header thead th {
  position: sticky;
  top: -1px;
  z-index: 1;
  background:#eee;
}

.online-sortable:not(.asc-sort):not(.desc-sort):before {
  font-family: "Font Awesome 5 Free";
  color: #5C5F62;
  content: "\f0dc\00a0\00a0";
  font-weight: 900;
}

.asc-sort:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0dd\00a0\00a0";
  color: #5C5F62;
  font-weight: 900;
}

.desc-sort:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0de\00a0\00a0";
  color: #5C5F62;
  font-weight: 900;
}

.w-36 {
 width: 36%;
}

.px-6 {
  padding-left: 7.25rem !important;
  padding-right: 7.25rem !important;
}

.col-2-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 17.833333%;
    flex: 0 0 17.833333%;
    max-width: 17.833333%;
}

.right-border {
    border-right: 1px solid;
}

small.teacher {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-size: 0.6em;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
  bottom: 0;
}
span.frac > sup {border-bottom: 0.08em solid; top: 0;}
span.frac > span {display: none;}

.clickable-selected {
  box-sizing: border-box !important;
  border: 2px solid #458FFF;
  box-shadow: 0 0 12px 0.4px #ccc;
  cursor: pointer;
}

#id_wa_templates td {
    border-right: none;
    vertical-align: middle;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}

/* Pre-Primary Teacher assignment styling */

.home-teacher-content a {
  position: absolute;
  top: 10px;
  right: 10px;
  visibility: hidden;
  font-size: 10px;
}

.home-teacher-content:hover a {
    visibility: visible;
}

.home-teacher-content {
  border-radius: 4px;
}

.home-teacher-schedule-content a {
  position: absolute;
  top: 10px;
  right: 10px;
  visibility: hidden;
  font-size: 10px;
}

.home-teacher-schedule-content:hover a {
  visibility: visible;
}

.home-teacher-schedule-content {
  border-radius: 4px;
}

.home-teacher-tile {
  width: 136px;
  height: 60px;
  background: #F7F7FB;
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  margin-bottom: 4px;
  border-radius: 4px;
}

.type-tile {
  width: 136px;
  height: 60px;
  background: #F7F7FB;
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  /* line-height: 60px; */
  margin-bottom: 4px;
  border-radius: 4px;
}