/***** general style *****/
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	/** counter-bootstrap variables **/
	--haq-primary: rgb(160,30,39);
	--haq-btn-bg: var(--haq-primary);
	--haq-btn-border-color: #75151C; 
	--haq-btn-hover-bg: #75151C;
	--haq-btn-hover-border-color: #540F14;
	--haq-nav-link-color: var(--haq-primary);
	--haq-nav-link-hover-color: #db434d;
}

/* @font-face {
    font-family: 'Arvo';
    src: url('../css/fonts/Arvo/Arvo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../css/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */

html {
	position: relative;
	min-height: 100%;
}

html,
body {
	margin:0;
	padding:0;
	min-width: 100%;
	background: #ffffff;
	color: #444444;
	font-family: 'Open Sans', Arial, Verdana, Helvetica, sans-serif;
	font-size: 1rem;
}

a {
  color: #444444;
  text-decoration: none;
  font-weight: bold;
}

a, a:hover, a:focus {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}

h1 {
  border-bottom: ridge 4px #8C0E06;
  width: 80%;
  padding-bottom: 6px;
  font-family: Arvo, Arial, Verdana, Helvetica, sans-serif;
}

h3 { font-weight: normal; }
.center{ text-align: center; }
.alignleft { float: left; }
.alignright { float: right; }
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.autowidth { width: auto !important; }
.nowrap { white-space: nowrap; }
.inline-block {
	display: inline-block;
	width: 200px;
}
.profile_photo { box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.replacewithicon { display: none; }
.delbutton.pressed { color: #f00; }


/***** table style *****/
table {
  margin-bottom: 20px;
  empty-cells: show;
  }
  
td {
  border-top: solid 1px #444444;
  padding: 4px 8px;
  }
  
th {
  padding: 4px 8px;
  vertical-align: top;
  }

tr td { vertical-align: top; }

tr td pre {
	padding: 0px;
	margin: 0px;
}

tr.alterrow  td { background-color: #eeeeee; }

.personnel-details th { text-align: left; }

.personnel-details th, .personnel-details td { border: none; }

td.list-section {
  border-bottom: solid 2px black;
  padding-left: 0px;
  padding-top: 15px;
  font-weight: bold;
}

table.schoolsatt { margin-left: 0px; }

table.schoolsatt tr, table.schoolsatt th, table.schoolsatt td {
  vertical-align: top;
  padding: 10px;
}

table.progressreport td.subject { text-align: right; }

table.progressreport tr.makabayan { opacity: 0.7; }

#progressreport table {
	display: inline-block;
	margin-bottom: 15px;
	text-align: center;
}

.columnview {
	display: inline-block;
	width: 40%;
	min-width: 200px;
	vertical-align: top;
}

.table-spacer {
	width: 5px;
	background: #fff;
}

.table-nonfluid { width: auto !important; }

table.sticky {border-collapse: separate; border-spacing: 0}
table.sticky thead td, table.sticky thead th {position: sticky; top: 20px; background-color: white}
table.sticky.table-bordered {border: 1px solid #dee2e6;}





/***** table details/buttons *****/
thead tr th.edit, tr td.edit, tr.alterrow td.edit {
  background-color: transparent;
  border-color: transparent;
  padding-right: 10px;
}

table .boolean { text-align: center; }






/***** forms - login *****/

#loginform {
  border-radius: 15px;
  font-size: 18px;
  margin: 0px auto;
  padding: 40px;
  width: 450px;
  margin-top: 100px;
  position: relative;
  border: solid rgba(0,0,0,0.1) 1px;
}

@media all and (max-width: 600px) {
	#loginform {
		border: none;
		margin-top: 0;
	}
}

#loginform img#loginlogo {
	display: block;
	margin: 0 auto;
}

#loginform img#loginlogo_sa {
	position: absolute;
	right: -20px;
	top: 76px;
}

#loginform ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#loginform ul li {
  margin: 15px 0px;
}
  
#loginform label {
  display: inline-block;
  width: 85px;
  text-align: right;
  margin-right: 10px;
}
/*  
#loginform input[type="text"], #loginform input[type="password"] {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
}	  
*/
#loginform input.btn-lg { padding: 5px; }

#loginform #notice { font-size: 0.7em; margin-top: 1rem; margin-bottom: 1rem;}  

#loginform #notice .wrongpass { color: #cc0000; }

#loginform .formError .formErrorContent { font-size: 0.7em; }
  
form#bsearch input, form#bsearch select {
  display: block;
  margin: 0px 0px 18px auto;
  width: auto;
  min-width: 200px;
  padding: 10px 16px;
  font-size: 1.0em;
}  

form#bsearch input[type="submit"] {
  width: auto;
  margin-bottom: 0px;
  font-size: 1.0em;
}






/***** forms *****/
input[type="text"], textarea, select, input[type="password"], input[type="date"], input[type="time"], input[type="email"], input[type="number"] {
  padding: 5px;
  border: solid 1px #dddddd;
}

table.schoolsatt input[type="text"].short { width: 80px; }

input[type="file"] { height: 40px; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=number] { -moz-appearance:textfield; /* Firefox */ }


/***** containers *****/
.footer {
	font-size: 0.8rem;
	text-align: center;
	background-color: #8C0E06;
	color: #ffffff;
	padding: 20px;
	position: absolute;
	bottom: 0px;
	width: 100%;
}

@media all and (max-width: 480px) { .footer span { display: block; } }

.wrapper #content:not(.login) {	padding: 20px 20px; padding-bottom: 80px; }
.wrapper #content.login { width: 100%; }

#logo {
  position: absolute;
  top: 10px;
  left: -100px;
}

#wholenav .msgcount {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 50;
	font-size: 0.7em;
	font-weight: bold;
	padding: 6px;
	border-radius: 30px;
	background-color: #f5e1c7;
	color: #000;
}

#wholenav .profile_pic {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 5px;
	float: left;
	margin-top: -4px;
}

/* full screen */


@media all and (max-width: 767px) {
	#logo { display: none; }

	#wholenav .msgcount {
		left: 90px;
		right: auto;
	}

	#loginform { width: 100%; }
}

#dashboard-buttons .dashboard-button {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	vertical-align: top;
	width: 150px;
}

#dashboard-buttons .dashboard-label {
	display: block;
	text-align: center;
	font-weight: normal;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: .75rem;
	border-bottom-right-radius: .75rem;
}

#dashboard-buttons a > .fa {
	height: 100px;
	border: solid 2px #5B0602;
	border-bottom: none;
	border-radius: .75rem .75rem 0 0;
	display: block;
	text-align: center;
	line-height: 100px;
	font-size: 50px;
}

#dashboard-buttons a:hover, #dashboard-buttons a:hover > .fa {
	text-decoration: none;
	background-color: #F5E1C7;
}




/***** login form *****/
  

/***** buttons *****/
.edit-button, .personnel .edit-button {
  display: inline-block;
  padding: 8px 12px;
  background: #C6635E;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
  font-size: 0.7em;
  margin-left: 10px;
  border-style: none;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  cursor: pointer;
  width: auto;
}
  
.edit-button:hover, .personnel .edit-button:hover {
  text-decoration: none;
  background: #f5e1c7;
  color: #C6635E;
}
  
.edit form { margin-bottom: 0px; }
  

  
/***** search *****/
#search-results-list li {
  padding-bottom: 7px;
  font-size: 1.3em;
}




/***** forms *****/
form ul { list-style: none outside none; }
form label.thick { vertical-align: top; }
form input[type="text"], form input[type="password"], form textarea, form select, input[type="date"], form input[type="time"], form input[type="email"] {
    padding: 8px;
}
form textarea {
	width: 300px;
	height: 150px;
}
form input[readonly] { background-color: #dddddd; }
form  div.listitem { display: inline-block; }
form select { width: 198px; }
form input.teachername, form.form-inline input.teachername { width: 350px; }
form .name input { text-align: center; }
form .name.prefix { width: auto; }
form .name input.prefix, form .name label.prefix, form .name input.suffix, form input.yearinput {
	width: 70px;
	padding-left: 8px;
	padding-right: 8px;
}

form input[type="submit"].autowidth { width: auto; }
form ul.readonly input[type="text"] {
    border: medium none;
    color: #444444;
    margin: 10px;
    padding: 0;
}
form .ac_results li { font-size: 1.3em; }
form td, .neolist td { border-top: none; }
form.readonly label { vertical-align: bottom; }
form .red { color: #ff0000; }

@media all and (max-device-width: 640px) {
	form label {
		display: block;
		width: auto;
		text-align: left;
	}
	form ul li { margin-bottom: 20px; }
}




/************** datepicker *************/
#ui-datepicker-div { box-shadow: 0px 0px 70px #888888; }
.ui-datepicker-today a { font-weight: bold !important; }



/************ forms - clickable boxes (radios, checkboxes) *************/
form label.clickbox {
	text-align: left;
	cursor: pointer;
	width: auto;
	display: block;
	padding: 0px 10px;
	margin: 0px auto;
	padding-bottom: 5px;
}
form li label.clickbox { padding-left: 0px; }
form li label.clickbox input {
	display: inline-block;
	padding: 0px;
	margin-right: 10px;
}
form li label.clickbox input[type="text"] { padding: 8px; }
form td label.clickbox{
	text-align: center;
	margin: 0px auto;
	display: block;
	padding: 2px 10px;
}
form td label.clickbox input { margin: 0px auto; }
	


/***** forms - information *****/
@media all and (min-device-width: 1025px) {
	form.info .name { display: inline-block; }
}
form.info .name label {
	text-align: center;
	margin: 0px;
	font-size: 0.7em;
	width: auto;
	display: block;
}
form.info h3 { margin-bottom: 0px; }
form.info p.smallnote {
	margin-top: 0px;
	font-size: 0.9em;
}
form.info .data {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
form tbody th {
	font-size: inherit;
	background: inherit;
	text-align: inherit;
	font-weight: inherit;
	vertical-align: inherit;
}
form.studentinfo { display: inline-block; }
form.studentinfo ul { margin-top: 0px; }
.accordionheadlink {
	cursor: pointer;
	text-decoration: underline;
}
.accordioncontent { display: none; }


/***** lists *****/
.pagenumbers span { margin: 0px 0.3em; }

ul#dashboard-updates li {
	list-style: none;
	font-weight: bold;
	margin-bottom: 20px;
}

ul#dashboard-updates li ul { margin-bottom: 5px; }

ul#dashboard-updates li ul li {
	list-style: inherit;
	font-weight: normal;
	margin-bottom: 0px;
}



/***** grading *****/
.grading-sheet .names { white-space: nowrap; }

.grading-sheet .grading-score {
	font-size: 0.8em;
	white-space: nowrap;
}

.grading-sheet .grading-score input[type="text"], input[type="text"].score, .grading-sheet .grading-score input[type="number"], input[type="number"].score {
	width: 60px;
	font-family: Courier New, monospace;
	padding: 2px;
	text-align: center;
	color: #000;
}

.grading-sheet .zero { background-color: #ff6666; }

.grading-sheet a { font-weight: normal; }




/***** Progress Bar *****/
#pbOverlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 2000;
	background-color: rgba(0,0,0,0.7);
	display: block;
}

#pbOverlay.loading { display: block; }

#progressBar {
	width: 400px;
	height: 22px;
	border: 1px solid #111;
	background-color: #292929;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -11px;
	margin-left: -200px;
	
    background: none repeat scroll 0 0 #292929;
    border: 1px solid #111111;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #333333;
    overflow: hidden;
}

#progressBar div {
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 22px; /* same as #progressBar height if we want text middle aligned */
	width: 0;
	background-color: #0099ff;
}






/***** Attendance *****/
.attendance h1 { width: 100%; }

.attendance img.photoid {
	width: 400px;
	height: 600px;
}

.attendance img.photoid.fetcher { height: auto; }

.attendance #studentinfo #studentphoto { float: left; }

.attendance #clockside { float: left; }

.attendance #clockside h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 50px;
	border: none;
	font-size: 2.8em;
	text-align: center;
	width: 350px;
	border-radius: 20px 20px 0px 0px;
	border-bottom: none;
	background-color: #F9F9F9;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.attendance #studentphoto { float: left; }

.attendance #studentinfo { margin-left: 420px; }

.attendance #fetcherphotos img {
	width: 170px;
	display: block;
}

.attendance #fetcherphotos div {
	margin-right: 30px;
	margin-bottom: 20px;
	width: 170px;
	display: inline-block;
	text-align: center;
}

.attendance h3.mainlog { font-size: 4.0em; }




/******* JQuery counter-styles *********/
.ui-widget {
	font-size: inherit !important;
	font-family: 'Open Sans', Arial, Verdana, Helvetica, sans-serif !important;
}

#tabs.ui-widget-content {
	border: none;
}

#tabs.ui-widget-content a.ui-tabs-anchor {
	font-weight: normal;
}

.ui-widget select {
	width: auto;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: inherit;
}

.custom-jquery-tabs { 
    padding: 0px; 
    background: none; 
    border-width: 0px; 
} 
.custom-jquery-tabs .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    border-color: #ddd;
} 
.custom-jquery-tabs .ui-tabs-panel { 
    border-width: 0px 1px 1px 1px; 
}
.custom-jquery-tabs .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: #444;
}
.custom-jquery-tabs .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border-color: #ddd;
	background-color: #C6635E;
}

.ui-widget-header {
	background: #A01E27;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-state-active {
	font-weight: normal;
	border-color: transparent;
	background: #C6635E;
	color: #fff;
}

.ui-menu .ui-menu-item {
	padding: 4px;
}

.ui-dialog .ui-dialog-title { color: #fff; }



/******* Bootstrap counter-styles *********/
.navbar, .navbar a {
	font-weight: normal;
	font-family: Arvo, Arial, Verdana, Helvetica, sans-serif;	
}

#wholenav .sectionname .nav-link {
	font-size: 1.7em;
	padding-top: 0px;
	padding-bottom: 0px;
}

#wholenav .dropdown-menu {
	background: #8C0E06;
	border: none;
}

#wholenav .dropdown-menu a {
	color: #fff;
	font-size: .85rem;
}

#wholenav .dropdown-menu a:hover, #wholenav .dropdown-menu.dropdown-menu-right a:hover {
	color: #444;
}

#wholenav .dropdown-item:active, #wholenav .dropdown-item.dropdown-menu-right:active {
	background-color: #ddd;
	color: #8C0E06;
}

#wholenav .dropdown-menu .active {
	background: #fff;
	color: #444;
}

#wholenav #nickname {
	font-size: 1.2rem;
}

#wholenav i {
	width: 20px;
}


.navbar #schoolyearinfo {
	height: 50px;
	line-height: 20px;
	padding: 15px;
	color: rgb(68,68,68);
	position: absolute;
	right: 0px;
	top: 50px;
	z-index: 1;
}

@media all and (max-width: 767px) {
	.navbar #schoolyearinfo { z-index: 5; }
	#schoolyearinfo ul.nav.navbar-nav > li a { padding-left: 15px; }
}

#schoolyearinfo ul.nav.navbar-nav > li a { color: #444; }
#schoolyearinfo ul.nav.navbar-nav > li > a { padding: 0px; }

#schoolyearinfo .dropdown-menu a i { width: 16px; display: inline-block; }

#schoolyearinfo .dropdown-menu {
	background-color: #fff;
	border: solid 1px #444;
	min-width: auto;
	right: 0px;
}

#schoolyearinfo .dropdown-menu > li > a {
	padding-right: 8px;
	text-align: right;
}


.navbar-dark .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.0);
	color: rgba(255,255,255);
}

.form-control-static {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0px;
    line-height: 1.25;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-width: 1px 0px;
}

.btn-primary {
	--bs-btn-bg: var(--haq-btn-bg);
	--bs-btn-border-color: var(--haq-btn-border-color);
}

.alert-primary {
	background-color: #A01E27;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
	--bs-btn-hover-bg: var(--haq-btn-hover-bg);
	--bs-btn-hover-border-color: var(--haq-btn-hover-border-color);	
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(50,50,50,.5);
	color: #fff;
}

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary.active[disabled], fieldset[disabled] .btn-primary.active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
	background-color: #A82C35;
	border-color: #8C1821;
}

.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus {
	border-color: #A01E27;
	color: #A01E27;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .open > .dropdown-toggle.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .open > .dropdown-toggle.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
	border-color: #A01E27;
	background-color: #A82C35;
	color: #fff;
}

.nav-link {
	--bs-nav-link-color: var(--haq-nav-link-color);
}

.nav-link:focus, .nav-link:hover {
	--bs-nav-link-hover-color: var(--haq-nav-link-hover-color);
}

.form-control:focus, .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
	border-color: #A82C35;
	box-shadow: 0 0 0 .2rem rgba(168,44,53,.25);
}

.google {
	width: 70.85px;
	height: 41.85px;
	float: right;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	background: #F5E1C7;
	color: #000 !important;
}

@media (max-width: 767px) {
	#wholenav .sectionname.separator {
		display: none;
	}
	.nav {
		padding-left:2px;
		padding-right:2px;
	}
	.nav li {
		/*display: block !important;*/
		/*width: 100%;*/
		/*margin: 0px;*/
	}
	.nav li a:hover {
		background-color: #e9ecef;		
	}
	.nav li.active {
		border-bottom: 1px solid #ddd!important;
		margin: 0px;
	}
	.nav-tabs .nav-link {
		/*border-color: #ddd;*/
	}
	.nav-tabs .nav-link:not(.active) {
		color: #888;
	}
	.btn.btn-mobilewhole{
		width: 100%;
		text-align: center;
	}
}

.page-link { color: #A82C35; }
.page-link:hover { color: #A82C35; }
.page-item.active .page-link {
	background-color: #A82C35;
	border-color: #8C1821;
}

.fa.fa-input { font-family: "Font Awesome 5 Free", 'Open Sans', Arial, Verdana, Helvetica, sans-serif; }
/*** .btn has font-weight 400 which causes font awesome error on icon ***/
.fa.delbutton.btn { font-weight: 900; }







/********** DataTable counter-styles *********/





/********* admin stuff ************/
.nonadminhidden {
	display: none;
}










#loading-overlay {
	width: 100%;
	height: 100%;
	/* background: url('images/loading.gif') no-repeat center center rgba(0,0,0,0.3); */
	background: rgba(0,0,0,0.3);
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 9999;
	text-align: center;
	vertical-align: middle;
}


@keyframes lds-eclipse {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes lds-eclipse {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.lds-eclipse { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); bottom: calc(50% - 100px); right: calc(50% - 100px); }
.lds-eclipse div:nth-child(1) {
	position: absolute;
	-webkit-animation: lds-eclipse 1s linear infinite;
	animation: lds-eclipse 1s linear infinite;
	width: 160px;
	height: 160px;
	top: 20px;
	left: 20px;
	border-radius: 50%;
	box-shadow: 0 4px 0 0 #a01e27;
	-webkit-transform-origin: 80px 82px;
	transform-origin: 80px 82px;
}
.lds-eclipse div:nth-child(2) {
	position: absolute;
	-webkit-animation: lds-eclipse 2.0s linear infinite;
	animation: lds-eclipse 2.0s linear infinite;
	width: 140px;
	height: 140px;
	top: 30px;
	left: 30px;
	border-radius: 50%;
	box-shadow: 0 4px 0 0 #ffffff;
	-webkit-transform-origin: 70px 72px;
	transform-origin: 70px 72px;
}
.lds-eclipse {
	width: 200px !important;
	height: 200px !important;
	-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
	transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

.require-marker {
	display: none;
}






/*********** ATTENDANCE ************/
#attdata h3 {
	margin: 0;
}






/*********** album view ************/
.albumview div {
	width: 180px;
	display: inline-block;
	text-align: center;
	border: 5px ridge rgba(50,50,50,0.6);
	margin: 5px;
	vertical-align: top;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	min-height: 275px;
}

.albumview div:hover {
	border: 5px ridge rgba(50,50,50,1.0);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}

.albumview div img {
	width: 150px;
	display: block;
	margin: 0px auto;
}







.ll-skin-cangas .ui-datepicker-header {
	border: none;
	background-color: #ddd;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.ll-skin-cangas .ui-datepicker-header .ui-state-hover {
	background: #8dc532;
	border-color: transparent;
	cursor: pointer;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

.ll-skin-cangas .ui-datepicker .ui-datepicker-next span,
.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span {
	background-image: url(../images/ui-icons_ffffff_256x240.png);
	background-position: -32px -16px;
}

.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span {
	background-position: -96px -16px;
}

.ll-skin-cangas .ui-datepicker table {
	margin: 0;
}

.ll-skin-cangas .ui-datepicker-calendar th {
	font-size: 9px;
	color: #6c7173;
	font-size: 9px;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
	text-transform: uppercase;
	font-weight: normal;
	border: none;
	border-top: 1px solid rgba(186,194,200,.6);
	border-bottom: 1px solid rgba(186,194,200,.6);
	background-color: #e6ebf0;
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5YzVjNSIgc3RvcC1vcGFjaXR5PSIwLjMzIi8+CjxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNjOWM1YzUiIHN0b3Atb3BhY2l0eT0iMC4zMyIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4zMyIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, rgba(201,198,198,.33) 0%, rgba(201,198,198,.33) 0.76%, rgba(255,255,255,.33) 100%);
	background-image: -o-linear-gradient(bottom, rgba(201,198,198,.33) 0%, rgba(201,198,198,.33) 0.76%, rgba(255,255,255,.33) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(201,198,198,.33) 0%, rgba(201,198,198,.33) 0.76%, rgba(255,255,255,.33) 100%);
	background-image: linear-gradient(bottom, rgba(201,198,198,.33) 0%, rgba(201,198,198,.33) 0.76%, rgba(255,255,255,.33) 100%);
}

.ll-skin-cangas .ui-datepicker td {
	border: none;
	border-top: 1px solid #e7e9ea;
	border-right: 1px solid #e7e9ea;
	padding: 0;
	background: #eee;
}

.ll-skin-cangas .ui-datepicker tr:first-child td {
	border-top: none;
}

.ll-skin-cangas .ui-datepicker td:last-child {
	border-right: none;
}

.ll-skin-cangas td .ui-state-default {
	border: 1px solid transparent;
	text-align: center;
	padding: .7em 0;
	margin:0;
	font-size: 12px;
	font-weight: bold;
	background: #f5f8fa;
	color: #6c7173;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);

}

.ll-skin-cangas td.ui-state-disabled .ui-state-default {
	text-shadow: none;
	opacity: .8;
	color: #6c7173;
}

.ll-skin-cangas td .ui-state-active,
.ll-skin-cangas td .ui-state-hover {
	border: 1px solid #a01e27;
	background: #cd454f;
	color: #fff;
	text-shadow: 0 -1px 0 #30332a;
}

.ll-skin-cangas .ui-widget-header select {
	color: #6C7173;
	padding-top: 0;
	padding-bottom: 0;
}







/****** Google Forms counter-style ******/
.ss-form label {
	width: auto;
	display: block;
	text-align: left;
}

.ss-form .ss-q-title label {
	display: none;
}

.ss-form .ss-q-title {
	font-weight: bold;
}

.ss-required-asterisk {
	color: #C43B1D;
	display: inline;
}

.ss-q-help {
	color: #8C8C8C;
	font-size: 0.9em;
}

.error-message, .required-message {
	color: #C43B1D;
	font-size: 0.9em;
	display: inline;
	margin-right: 10px;
	display: none;
}

.ss-item {
	margin: 12px 0;
}

#ss-submit {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-moz-user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #A01E27;
	border-color: #75151C;
	color: #FFF;
	cursor: pointer;
}




/***************** Announcements ***********************/
div.listitem.message ul {
	padding-left: 40px;
	list-style-type: disc;
}



/***************** Nav Topbar **********************/
#topbar { background: #8C0E06; }



/***************** Nav Sidebar **********************/
#sidebar .sidebar-header {
    padding: 20px;
    background: #8C0E06;
}
#sidebar ul li a {
    padding: 8px;
    display: block;
	font-family: Arvo, Arial, Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: .85rem;
	padding-left: 14px;
	color: var(--bs-white);
}

#sidebar ul li a i {
	width: 20px;
}

#sidebar ul li a:hover, #sidebar.active ul li a:hover {
    color: var(--bs-gray-800);
    background: var(--bs-white);
}

#sidebar ul li.active > a, #sidebar ul li a.active {
	
}

#sidebar ul li.active {
	position: relative;
}

/**** start active nav item pointer ****/
#sidebar ul li.active:after, #sidebar ul li.active:before {
  right: 0px;
  position: absolute;
  bottom: 30%;
  content: " ";
  pointer-events: none;
  border: solid transparent;
}

#sidebar ul li.active:after {
	border-right-color: #fff;
	border-width: 6px;
	margin-left: -6px;
	z-index: 1;
}
#sidebar ul li.active:before {
	border-right-color: #fff;
	border-width: 9px;
	margin-left: -9px;
	z-index: 1;
}
/**** end active nav item pointer ****/

#sidebar ul ul a {
    padding-left: 45px !important;
    background: rgb(160,30,39);
}

#sidebar ul ul ul a { padding-left: 60px !important; }


/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header strong {
    display: none;
}
#sidebar.active .sidebar-header h3 {
    display: none;
}
#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;	/**** larger padding to make tapping easier ****/
}

#sidebar.active ul ul a {
    padding-left: 25px !important;
    background: rgb(160,30,39);
}

#sidebar.active ul ul ul a { padding-left: 40px !important; }




#sidebarCollapse {
    width: 30px;
    height: 30px;
    background-color: #8C0E06;
    padding: 5px;
    margin-left: -20px;
    margin-top: -30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border:none;
    z-index: 0;
}

#sidebarCollapse.active {
	background-color: #8C0E06;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #fff;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 3px auto;
}

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 200px;
    max-width: 200px;
    min-height: 100vh;
    background: #8C0E06;
    color: #fff;
    transition: all 0.3s;
    transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
    position: relative;
    z-index: 1;
}

#sidebar.active {
    margin-left: -200px;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -200px;
    }
    #sidebar.active {
        margin-left: 0;
    }

    /* Reversing the behavior of the bars: 
       Removing the rotation from the first,
       last bars and reappear the second bar on default state, 
       and giving them a vertical margin */
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 2px auto;
    }

    /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }    
}





/***** NOTIFICATIONS *****/

.reflectchange-success {animation: reflectchange-success 2s;}
.reflectchange-error {animation: reflectchange-error 2s;}

@keyframes reflectchange-success {
	from {background: rgb(84, 225, 95);}
	to {background: transparent;}
}

@keyframes reflectchange-error {
	from {background: rgb(255, 150, 150);}
	to {background: transparent;}
}