:root {
  --app-theme-color-1: #fefde3;
  --app-theme-color-2: #4a4100;
  --app-theme-color-3: #fffdea;
  --app-theme-color-4: #fffeef;
  --app-theme-color-5: #3a613a;
}
.w3-theme-l5 {color:#000 !important; background-color:var(--app-theme-color-1) !important}
.w3-theme-l4 {color:#000 !important; background-color:var(--app-theme-color-3) !important}
.w3-theme-l3 {color:#000 !important; background-color:#afcfaf !important}
.w3-theme-l2 {color:#000 !important; background-color:#fff45d !important}
.w3-theme-l1 {color:#000 !important; background-color:#fff127 !important}
.w3-theme-d1 {color:#000 !important; background-color:#d8c900 !important}
.w3-theme-d2 {color:#fff !important; background-color:var(--app-theme-color-5) !important}
.w3-theme-d3 {color:#fff !important; background-color:#776836 !important}
.w3-theme-d4 {color:#fff !important; background-color:#443b1e !important}
.w3-theme-d5 {color:#fff !important; background-color:var(--app-theme-color-2) !important}

.w3-theme-light {color:#000 !important; background-color:var(--app-theme-color-1) !important}
.w3-theme-dark {color:#fff !important; background-color:var(--app-theme-color-2) !important}
.w3-theme-action {color:#fff !important; background-color:var(--app-theme-color-2) !important}

.w3-theme {color:#000 !important; background-color:#fefde3 !important}
.w3-text-theme {color:#6a5c2e !important}
.w3-border-theme {border-color:#6a5c2e !important}

.w3-hover-theme:hover {color:#000 !important; background-color:#6a5c2e !important}
.w3-hover-text-theme:hover {color:#6a5c2e !important}
.w3-hover-border-theme:hover {border-color:#6a5c2e !important}

.w3-theme-c1 {color:#000 !important; background-color:#808080 !important}
.w3-theme-c2 {color:#fff !important; background-color:#000 !important}
.w3-theme-c3 {color:#000 !important; background-color:#fefde3 !important}
.w3-theme-logo {background-image:url('../images/logo-min.png'); width:180px; height:180px; background-size:180px 180px; background-repeat:no-repeat; margin:auto; background-position: middle;}
.w3-text-theme-l2 {color:var(--app-theme-color-4) !important}
.w3-text-theme-l1 {color:var(--app-theme-color-1) !important}
.w3-text-theme-d1 {color:#590000 !important}
.w3-text-theme-d2 {color:var(--app-theme-color-2)  !important}
/*
https://www.w3schools.com/W3CSS/w3css_color_generator.asp 
https://rgbacolorpicker.com/hex-to-rgba
*/

h3 { font-size:22px; }
.w3-bar-item-active { background-color:var(--app-theme-color-1) !important; font-weight: bold; }


a:link {
    color: #4d0000;
    text-decoration: none;
}
a:visited {
    color: #660000;
    text-decoration: none;
}
a:hover {
    color: #cc0000;
    text-decoration: none;
}
a:active {
    color: #e8ae98;
    text-decoration: none;
}

.app-link-1 a:link { color:#cdcdcd; }
.app-link-1 a:visited { color:#cdcdcd; }
.app-link-1 a:hover { color:#ffffff; }
.app-link-1 a:active { color:#ffffff; }

.nav-top a:link {
    color: #4d0000;
    text-decoration: none;
}
.nav-top a:visited {
    color: var(--app-theme-color-3);
    text-decoration: none;
}
.nav-top a:hover {
    color: var(--app-theme-color-4);
    text-decoration: none;
}
.nav-top a:active {
    color: #ff6666;
    text-decoration: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

.mgnt-dashboard-button { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(163,159,48,0.05)); }

.mgnt-body {
	min-width: 900px;
	color:#000 !important;
	background-color:#fffff9 !important;
	//background-color:#fefde3 !important;
	font-size: 10pt !important;
}

.w3-striped tbody tr:nth-child(even){background-color:var(--app-theme-color-3);}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}

#datatable, #rptcontent {
	min-width: 800px;
}

.mgnt-footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.mgnt-body { min-width: 644px; }
	#datatable, #rptcontent { min-width: 544px; }
	table td, table th { font-size: 85%; }
	table thead td { font-size: 85%; }
}

@media screen and (max-width: 900px) {
	/* table td, table th { font-size: 10pt; } */
	/* table thead td { font-size: 10pt } */
}



/* SIDEBAR */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
	z-index: 5;
    top: 0;
    left: 0;
    background-color: #211;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 53px;
    -ms-overflow-style: none;
	font-size: 15px !important;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #efefef;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px;
	margin: 0;
	padding: 2px 20px 0px 20px;
}

.sidenav::-webkit-scrollbar
{
	width: 5px;
	background-color: var(--app-theme-color-1);
}

.sidenav::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
	background-color: var(--app-theme-color-1);
}

.sidenav::-webkit-scrollbar-thumb
{
	background-color: var(--app-theme-color-3);
}

.sidenav::-webkit-scrollbar-thumb:hover {
    background: var(--app-theme-color-3); 
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* END OF SIDEBAR */


.app-msgbox-top {
	margin-top:24px;
	margin-left:24px;
	margin-bottom:0px;
	margin-right:24px;
}

/*START of SWITCH*/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.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: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--app-theme-color-2);
}

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

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

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

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

/* END OF SWITCH */

/* START of LESS OR MORE */
/* https://proto.io/freebies/onoff/ */
.onoffswitch {
    position: relative; width: 80px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    /* border: 1px solid #fff; border-radius: 0px; */
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 35px;
    /* font-size: 13px; color: white; */
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "More";
    padding-left: 13px;
    background-color: var(--app-theme-color-2); color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "Less";
    padding-right: 13px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 16px; margin: 11px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 40px;
    border: 2px solid var(--app-theme-color-2); border-radius: 6px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
/* END OF LESS OR MORE  */


/* Clock In/Out Table coloring */
.lateclockin {
background-color: lightpink;
}
.earlyclockout {
background-color: lightpink;
}
.lesstotaltime {
background-color: lightpink;
}


/* Start of Password Strength */

meter {
    /* Reset the default appearance */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
            
    margin: 0 auto 1em;
    width: 100%;
    height: .5em;
    
    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }

.feedback {
    color: #9ab;
    font-size: 90%;
    padding: 0 .25em;
    font-family: Courgette, cursive;
    margin-top: 1em;
}

/* End of Password Strength */


@media print {
    .noprint, .noprint * { display: none !important; }
}


/* Loading animation */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

.mgnt-row-wh {
	font-size:100%;
	font-style:italic;
	color:gray;
}

.mgnt-row-dept {
	font-size:100%;
	font-weight:bold;
	background-color:var(--app-theme-color-3); 
	color:var(--app-theme-color-2);
}

.mgnt-table-title-dept {
	font-size:118%;
	margin: 20px 0px 5px 0px;
}

.longstring { font-size: 80%; }

.mgnt-action-button {
	min-width: 100px;
	height: 34px;
	line-height: 0px;
	margin: 3px;
	font-size: 80%;
}

.mgnt-date-textbox {
	width: 150px;
	height: 34px;
	display: inline-block;
	font-size: 90%;
	background-color: #fafafa;
}

.mgnt-filter-datecontrol {
}
.mgnt-filter-datecontrol .mgnt-prev, .mgnt-filter-datecontrol .mgnt-next {
	height:36px;
	font-size:20px;
	line-height:16px;
}
.mgnt-filter-datecontrol .mgnt-today {
	height:36px;
	font-size:11px;
	line-height:16px;
}
.mgnt-filter-datecontrol .mgnt-find {
	height:36px;
	font-size:16px;
	line-height:16px;
}

.mgnt-filter-option {
	height:36px;
	line-height:16px;
}

.mgnt-filter-button {
	height: 36px;
}

.mgnt-filter-date-textbox {
	background-color: #fafafa;
	height: 38px;
	line-height: 36px;
}

.mgnt-filter-inner-box {
	/* height:38px; */
	/* display:table-cell; */
	/* vertical-align:bottom; */
	/* padding-bottom:8px;" */
}

.mgnt-filter-combobox {
	display:inline-block;
	height: 38px;
}
.mgnt-filter-combobox select {
	height: 36px;
	line-height: 36px;
	padding: 0px 5px 0px 5px;
	max-width: 460px;
	font-size: 100%;
	background-color: #fafafa;
}

.mgnt-workhours-combobox {
	height: 34px;
	display: inline-block;
	padding: 0px 5px 0px 5px;
	max-width: 400px;
	font-size: 90%;
	background-color: #fafafa;
}

.mgnt-filter-checkbox {
	display: inline-block;
	height: 34px;
	line-height: 34px;
}
.mgnt-filter-checkbox input[type="checkbox"] {
	width: 20px !important;
	height: 20px !important;
}

.mgnt-toggle-1 {
	background-color:rgba(238,222,220,0.8);
	color:gray;
}

.mgnt-bar-print {
	border-left:6px solid #ccc!important;
	border-color: var(--app-theme-color-5) !important;
}

.mgnt-bar-print button {
	color:#000 !important; background-color:var(--app-theme-color-3) !important
}

.mgnt-bar-print button i {
	color:var(--app-theme-color-2) !important;
}
.mgnt-bar-print button span {
	color:#000 !important;
}

input[type="datetime-local"], input[type="month"], input[type="number"], input[type="date"], select {
	height: 34px !important;
	line-height: 34px !important;
}

input[type="checkbox"] {
	width: 20px;
}

input[type="radio"] {
	width: 18px !important;
	margin-right: 8px !important;
}

select {
	padding: 5px !important;
}

.mgnt-newworksite-multiselect {
	width: 400px !important;
}


/* START CLOCK ROW COLOR */

.noclockrec {
	color: gray;
}

.night-shift-row {
	/* color:darkblue ;*/
}

.noclockrec-weekend-row {
	color: #ff9999;
}

.normal-weekend-row {
	color:red ;
}

.night-shift-weekend-row {
	color:red ;
}

.public-holiday-row {
	color:purple ;
}

.normal-public-holiday-row {
	color:purple ;
	font-weight:bold;
}

.night-shift-public-holiday-row {
	color:purple ;
	font-weight:bold;
}

.company-event-row {
	color:green ;
}

.normal-company-event-row {
	color:green ;
	font-weight:bold;
}

.night-shift-company-event-row {

}

/* END CLOCK ROW COLOR */


/* START OF MULTISELECT */

.ms-options-wrap,
.ms-options-wrap * {
    box-sizing: border-box;
}
.ms-options-wrap > button:focus,
.ms-options-wrap > button {
    position: relative;
    width: 100%;
    text-align: left;
    border: 1px solid #aaa;
    background-color: #fff;
    padding: 5px 10px 5px 10px;
    margin-top: 1px;
    font-size: .9em;
    color: #000;
    outline: none;
    /*white-space: nowrap;*/
}
.ms-options-wrap > button:after {
    content: ' ';
    height: 0;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    border: 6px solid rgba(0, 0, 0, 0);
    border-top-color: #999;
    margin-top: -3px;
}
.ms-options-wrap > .ms-options {
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 20px;
    background: white;
    z-index: 2000;
    border: 1px solid #aaa;
	text-align:left;
}
.ms-options-wrap > .ms-options > .ms-search input {
    width: 100%;
    padding: 4px 5px;
    border: none;
    border-bottom: 1px groove;
    outline: none;
}
.ms-options-wrap > .ms-options .ms-selectall {
    display: inline-block;
    font-size: .9em;
    /*text-transform: lowercase;*/
    text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
    text-decoration: underline;
}
.ms-options-wrap > .ms-options > .ms-selectall.global {
	margin: 0px;
    padding: 4px 4px 4px 10px;
	font-size: .9em;
	border-bottom: 1px solid #aaa;
	display: block;
}
.ms-options-wrap > .ms-options > ul {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
}
.ms-options-wrap > .ms-options > ul > li {
	list-style-type: none;
	line-height: 12px;
	padding-left: 0px;
	margin-left: 0px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup {
    padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
    border-top: 1px solid #aaa;
}
.ms-options-wrap > .ms-options > ul > li.optgroup .label {
    display: block;
    padding: 5px 0 0 0;
    font-weight: bold;
}
.ms-options-wrap > .ms-options > ul label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 8px 8px;
    margin: 1px 0;
}
.ms-options-wrap > .ms-options > ul li.selected label,
.ms-options-wrap > .ms-options > ul label:hover {
    background-color: var(--app-theme-color-1);
}
.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
	margin-top: 1px;
	margin-left: 5px;
    margin-right: 5px;
    position: absolute;
    left: 4px;
    top: 7px;
}

/* END OF MULTISELECT */



/* START OF PRINT FORMATTING */

#rpt-header-left	{ float:left; height: 0.6in; width:380px; display:table; border:0px solid blue; }
#rpt-header-left-content  { display:table-cell; vertical-align:bottom; }
#rpt-header-right	{ float:right; height: 0.6in; width:400px; display:table; padding-bottom:0px; text-align:right; border:0px solid blue; }
#rpt-header-right-content { display:table-cell; vertical-align:bottom; }
.aline1	 			{ margin-top: 5px; margin-bottom:15px; height:2px; border:0px; border-top:2px solid #999999; }

.rpt-header-companyname { font-size:10pt; font-weight:bold;}
.rpt-header-companydetails div { font-size:8pt; }
.rpt-header-companydetails .address { font-size:9px; margin-bottom:1px; }
.rpt-title			{ font-size: 16pt; letter-spacing:-1; }
.rpt-title-desc		{ font-size: 10pt; letter-spacing:-1; }
.rpt-gen-date 		{ font-size: 7pt; letter-spacing:-1; }

table { table-layout: fixed; width: 100%; word-wrap:break-word; }
table td, table th { font-size: 95%; }
table thead td { font-size: 90%; }

@media print
{
	@page 	 		{ margin: 0.5in 0.5in 0.5in 0.7in; }
	#cio-content	{ margin:0px !important; padding:0px !important; background-color: #fff !important; }
	#rpt-header	 	{ margin-left: 0.0in; display:block !important; }
	#rpt-header-right { margin-right: 0.0in; }
	#content 		{ margin: 0px 0.0in 0px 0.0in; }
	.aline1	 		{ margin-right:0.0in; }
	.pageBR  		{ page-break-after:always; border:0;}
	.noPrint 		{ display:none; }
	.longstring		{ font-size: 10px; }
	.mgnt-header 	{ color:#000 !important; background-color: #fff !important; height:60px; border:1px solid #cfcfcf; margin-bottom:15px; }
	.mgnt-body 		{ background-color:#fff !important; }
	
	table { border-collapse:collapse; border-style:hidden; font-size: 100%; border: 0px; }
	table th { padding: 2px; }
	table td, table th {
		padding: 5px !important;
		font-size: 8pt;
		border: 1px solid #ababab;
		/*color: black;*/
		word-wrap: break-word;
	}
	table thead td { font-weight: bold; font-size: 6pt !important; border-top:2px solid #ababab; 
					 border-bottom:2px solid #ababab; word-wrap: break-word; vertical-align:middle !important;
					 background-color: #efefef !important; color: #333; }
	/*table tr:first-child td { font-weight: bold; font-size: 6pt !important; border-top:2px solid #ababab; border-bottom:2px solid #ababab; }	*/
	.mgnt-table-title-dept:first-child { margin-top:-5px !important; }
	.cio-print { min-width:900px !important; }
	.cio-print table td { font-size:8pt !important; }
}
/* END OF PRINT FORMATTING */


/* CLASS ATTENDANCE */

.mgnt-ca-unassigned-class-highlight{
	background-color: #f08080;
	color: #333333;
}

.notes {
	margin-top: 5px;
	font-style: italic;
	color: grey;
	font-size: 60%;
}

.studattpercentlow {
	background: #c9db74 !important;;	
	color : black;
}

.studattpercentfull {
	background: #a7c957 !important;;
	color : black;
}

.studatttotpresent {
	background: #87c55f !important;;
	color : black;
	font-weight: bold;
	font-size: large;
}

.studattlate {
	background: #f89c74 !important;;
	color: black;	
}
.studatt3late {
	background:#C67C5C !important;;

}

.studattearlyleave {
	background: #9eb9f3 !important;;
	color: black;	
}
.studattmc {
	background: #f6cf71 !important;;
	color: black;	
}

.studattescape {
	background-color: #a4133c !important;;	
	color: white;
}

.studattpermission {
	background-color: #c36060 !important;;	
	color: white;
}

.studattabsent {
	background-color: #c42f2f !important;;	
	color: white;
}

.studatttotabsent {
	background-color: #6a040f !important;;	
	color: white;
	font-weight: bold;
	font-size: large;
}

.tooltip {
  position: relative;
/*   display: inline-block;
  border-bottom: 1px dotted black;   */
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid red;
  border-left: 10px solid transparent;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
 
 .circle-letter {
/*   display: inline-block;
  border-radius: 50%;  
  border: 1px solid #000000;
  padding: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
  color: black;
 */
   display: inline-block;
  border-radius: 50%;
  border: 1px solid #000000;
  padding: 2px;
  font-size: 12px;
  line-height: 8px;
  text-align: center;
 
 }
 
 /* Search student name dropdown box */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
 /*  background-image: url('searchicon.png'); */
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 430px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

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

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/* END Search student name dropdown box */
.schedule-wrapper {
  height: calc(100vh - 100px); /* Adjust the 100px value as needed */
  border: 1px solid var(--borderColor);
  overflow: auto;
}

.schedule tr.pin {
position: sticky;
top: 0;
z-index: 1;
background: var(--stickyBackground);
}

.schedule th.pin,
td.pin {
position: sticky;
left: 0;
background: var(--stickyBackground);
border-right: 1px solid var(--borderColor);
}

.schedule tbody th {
  position: sticky;
  left: 0;
  font-weight:normal;
}

.schedule thead th {
  position: sticky;
  top: 0;
  border-top: 0;
  background-clip: padding-box;
  min-width:6.5em;
}

.schedule thead th.pin {

  left: 0;
  z-index: 2;
  border-left: 0; 
  min-width:6.5em;
}

.latenotapproved {
	background-color: #cb4343;
	color: white;
}

.lateapproved {
	background-color: #c9db74;
	color : black;
}
/* END OF CLASS ATTENDANCE */