body {
	font-family: Georgia, Arial;
	overflow-y: scroll;
}

/* Custom color utilities */
.text-orange {
	color: #fd7e14 !important;
}
.bg-orange {
	background-color: #fd7e14 !important;
	color: #fff !important;
}

hr {
	color: #000000;
	opacity: 1;
}


/* Sizes */
.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-33 {
    width: 33% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.w-10p {
	width: 10px !important;
}

.w-15p {
	width: 15px !important;
}

.w-20p {
	width: 20px !important;
}

.w-25p {
	width: 25px !important;
}

.w-30p {
	width: 30px !important;
}

.w-40p {
	width: 40px !important;
}

.w-50p {
	width: 50px !important;
}

.w-75p {
	width: 75px !important;
}

.w-80p {
	width: 80px !important;
}

.w-90p {
	width: 90px !important;
}

.w-100p {
	width: 100px !important;
}

.w-125p {
	width: 100px !important;
}

.w-150p {
	width: 150px !important;
}

.w-200p {
	width: 200px !important;
}

.w-250p {
	width: 250px !important;
}

.w-300p {
	width: 300px !important;
}

.w-350p {
	width: 350px !important;
}

.w-400p {
	width: 400px !important;
}

.w-450p {
	width: 450px !important;
}

.w-500p {
	width: 500px !important;
}

.w-600p {
	width: 600px !important;
}

.w-700p {
	width: 700px !important;
}

.w-800p {
	width: 800px !important;
}

.w-900p {
	width: 900px !important;
}

.w-1000p {
	width: 1000px !important;
}

.mw-10p {
	min-width: 10px !important;
}

.mw-15p {
	min-width: 15px !important;
}

.mw-20p {
	min-width: 20px !important;
}

.mw-25p {
	min-width: 25px !important;
}

.mw-30p {
	min-width: 30px !important;
}

.mw-40p {
	min-width: 40px !important;
}

.mw-50p {
	min-width: 50px !important;
}

.mw-75p {
	min-width: 75px !important;
}

.mw-80p {
	min-width: 80px !important;
}

.mw-90p {
	min-width: 90px !important;
}

.mw-100p {
	min-width: 100px !important;
}

.mw-125p {
	min-width: 100px !important;
}

.mw-150p {
	min-width: 150px !important;
}

.mw-200p {
	min-width: 200px !important;
}

.mw-250p {
	min-width: 250px !important;
}

.mw-300p {
	min-width: 300px !important;
}

.mw-400p {
	min-width: 400px !important;
}

.mw-500p {
	min-width: 500px !important;
}

.mw-600p {
	min-width: 600px !important;
}

.mw-700p {
	min-width: 700px !important;
}

.mw-800p {
	min-width: 800px !important;
}

.mw-900p {
	min-width: 900px !important;
}

.mw-1000p {
	min-width: 1000px !important;
}

.mxw-15p {
	max-width: 15px !important;
}

.mxw-20p {
	max-width: 20px !important;
}

.mxw-25p {
	max-width: 25px !important;
}

.mxw-30p {
	max-width: 30px !important;
}

.mxw-40p {
	max-width: 40px !important;
}

.mxw-50p {
	max-width: 50px !important;
}

.mxw-75p {
	max-width: 75px !important;
}

.mxw-80p {
	max-width: 80px !important;
}

.mxw-90p {
	max-width: 90px !important;
}

.mxw-100p {
	max-width: 100px !important;
}

.mxw-125p {
	max-width: 100px !important;
}

.mxw-150p {
	max-width: 150px !important;
}

.mxw-200p {
	max-width: 200px !important;
}

.mxw-250p {
	max-width: 250px !important;
}

.mxw-300p {
	max-width: 300px !important;
}

.mxw-400p {
	max-width: 400px !important;
}

.mxw-500p {
	max-width: 500px !important;
}

.mxw-600p {
	max-width: 600px !important;
}

.mxw-700p {
	max-width: 700px !important;
}

.mxw-800p {
	max-width: 800px !important;
}

.mxw-900p {
	max-width: 900px !important;
}

.mxw-1000p {
	max-width: 1000px !important;
}

.h-10 {
    height: 10% !important;
}

.h-15 {
    height: 15% !important;
}

.h-20 {
    height: 20% !important;
}

.h-25 {
    height: 25% !important;
}

.h-30 {
    height: 30% !important;
}

.h-33 {
    height: 33% !important;
}

.h-40 {
    height: 40% !important;
}

.h-60 {
    height: 60% !important;
}

.h-75 {
    height: 75% !important;
}

.h-80 {
    height: 80% !important;
}

.h-90 {
    height: 90% !important;
}

.h-100 {
    height: 100% !important;
}

.h-10p {
	height: 10px !important;
}

.h-15p {
	height: 15px !important;
}

.h-20p {
	height: 20px !important;
}

.h-25p {
	height: 25px !important;
}

.h-30p {
	height: 30px !important;
}

.h-40p {
	height: 40px !important;
}

.h-50p {
	height: 50px !important;
}

.h-75p {
	height: 75px !important;
}

.h-80p {
	height: 80px !important;
}

.h-90p {
	height: 90px !important;
}

.h-100p {
	height: 100px !important;
}

.h-125p {
	height: 100px !important;
}

.h-150p {
	height: 150px !important;
}

.h-200p {
	height: 200px !important;
}

.h-250p {
	height: 250px !important;
}

.h-300p {
	height: 300px !important;
}

.h-400p {
	height: 400px !important;
}

.h-500p {
	height: 500px !important;
}

.h-600p {
	height: 600px !important;
}

.h-700p {
	height: 700px !important;
}

.h-800p {
	height: 800px !important;
}

.h-900p {
	height: 900px !important;
}

.h-1000p {
	height: 1000px !important;
}

.mh-15p {
	min-height: 15px !important;
}

.mh-20p {
	min-height: 20px !important;
}

.mh-25p {
	min-height: 25px !important;
}

.mh-30p {
	min-height: 30px !important;
}

.mh-40p {
	min-height: 40px !important;
}

.mh-50p {
	min-height: 50px !important;
}

.mh-75p {
	min-height: 75px !important;
}

.mh-80p {
	min-height: 80px !important;
}

.mh-90p {
	min-height: 90px !important;
}

.mh-100p {
	min-height: 100px !important;
}

.mh-125p {
	min-height: 100px !important;
}

.mh-150p {
	min-height: 150px !important;
}

.mh-200p {
	min-height: 200px !important;
}

.mh-250p {
	min-height: 250px !important;
}

.mh-300p {
	min-height: 300px !important;
}

.mh-400p {
	min-height: 400px !important;
}

.mh-500p {
	min-height: 500px !important;
}

.mh-600p {
	min-height: 600px !important;
}

.mh-700p {
	min-height: 700px !important;
}

.mh-800p {
	min-height: 800px !important;
}

.mh-900p {
	min-height: 900px !important;
}

.mh-1000p {
	min-height: 1000px !important;
}

.mxh-15p {
	max-height: 15px !important;
}

.mxh-20p {
	max-height: 20px !important;
}

.mxh-25p {
	max-height: 25px !important;
}

.mxh-30p {
	max-height: 30px !important;
}

.mxh-40p {
	max-height: 40px !important;
}

.mxh-50p {
	max-height: 50px !important;
}

.mxh-75p {
	max-height: 75px !important;
}

.mxh-80p {
	max-height: 80px !important;
}

.mxh-90p {
	max-height: 90px !important;
}

.mxh-100p {
	max-height: 100px !important;
}

.mxh-125p {
	max-height: 100px !important;
}

.mxh-150p {
	max-height: 150px !important;
}

.mxh-200p {
	max-height: 200px !important;
}

.mxh-250p {
	max-height: 250px !important;
}

.mxh-300p {
	max-height: 300px !important;
}

.mxh-400p {
	max-height: 400px !important;
}

.mxh-500p {
	max-height: 500px !important;
}

.mxh-600p {
	max-height: 600px !important;
}

.mxh-700p {
	max-height: 700px !important;
}

.mxh-800p {
	max-height: 800px !important;
}

.mxh-900p {
	max-height: 900px !important;
}

.mxh-1000p {
	max-height: 1000px !important;
}


/* Fonts */
body.hei {
	/* font-family: Century Gothic; */
	font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
}

body.pagu {
	/* font-family: Century Gothic; */
	font-family: Arial,sans-serif;
}

/* Colors */
.bg-orange {
	background-color: #ffa500;	
}

.bg-red {
	background-color: #ff0000;
}

.bg-white {
	background-color: #ffffff;
}

.color-blue {
	color: #0000ff !important;
}

.color-orange {
	color: #ffa500 !important;
}

.color-red {
	color: #ff0000 !important;
}

.color-white {
	color: #ffffff !important;
}

.border-black {
	border-color: #005a88 !important;
}

.hei-orange, .hei-color {
	color: #f18404 !important;
	color: #f89521 !important;
}

.hei-bg-orange, .hei-bgcolor {
	background-color: #f18404 !important;
	background-color: #f89521 !important;
}

.scsu-blue, .scsu-color {
	color: #005a88 !important;
}

.scsu-bg-blue, .scsu-bgcolor {
	background-color: #005a88 !important;
}

.scsu-bg-blue2, .scsu-bgcolor2 {
	background-color: #235b82 !important;
}

.scsu-blue-border {
	border-color: #005a88 !important;
}

.pagu-green, .pagu-color {
	color: #008e02 !important;
}

.pagu-bg-green, .pagu-bgcolor {
	background-color: #008e02 !important;
}

.pagu-green-border {
	border-color: #008e02 !important;
}

/*
 * Most shared forms already use the SCSU utility classes. Keep those forms
 * shared and remap their visual treatment when the active school is PAGU.
 */
.pagu .scsu-blue,
.pagu .scsu-color {
	color: #008e02 !important;
}

.pagu .scsu-bg-blue,
.pagu .scsu-bgcolor {
	background-color: #008e02 !important;
}

.pagu .scsu-bg-blue2,
.pagu .scsu-bgcolor2 {
	background-color: #006b02 !important;
}

.pagu .scsu-blue-border {
	border-color: #008e02 !important;
}

/*
 * Bootstrap's primary utilities inherit --bs-primary, but some components
 * (buttons, pagination, accordion, etc.) define their own primary values.
 * Keep every Bootstrap-primary surface aligned with the active school.
 */
body.scsu {
	--school-primary: #005a88;
	--school-primary-rgb: 0, 90, 136;
	--school-primary-hover: #00466a;
	--school-primary-hover-rgb: 0, 70, 106;
	--school-primary-active: #003d5c;
	--school-primary-subtle: #cce4ef;
	--school-primary-border-subtle: #99c8df;
	--school-primary-text-emphasis: #002b41;
}

body.pagu {
	--school-primary: #008e02;
	--school-primary-rgb: 0, 142, 2;
	--school-primary-hover: #006b02;
	--school-primary-hover-rgb: 0, 107, 2;
	--school-primary-active: #005302;
	--school-primary-subtle: #ccefcc;
	--school-primary-border-subtle: #99df9a;
	--school-primary-text-emphasis: #003901;
}

body.scsu,
body.pagu {
	--bs-primary: var(--school-primary);
	--bs-primary-rgb: var(--school-primary-rgb);
	--bs-link-color: var(--school-primary);
	--bs-link-color-rgb: var(--school-primary-rgb);
	--bs-link-hover-color: var(--school-primary-hover);
	--bs-link-hover-color-rgb: var(--school-primary-hover-rgb);
	--bs-focus-ring-color: rgba(var(--school-primary-rgb), 0.25);
	--bs-primary-bg-subtle: var(--school-primary-subtle);
	--bs-primary-border-subtle: var(--school-primary-border-subtle);
	--bs-primary-text-emphasis: var(--school-primary-text-emphasis);
}

body.scsu .btn-primary,
body.pagu .btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--school-primary);
	--bs-btn-border-color: var(--school-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--school-primary-hover);
	--bs-btn-hover-border-color: var(--school-primary-hover);
	--bs-btn-focus-shadow-rgb: var(--school-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--school-primary-active);
	--bs-btn-active-border-color: var(--school-primary-active);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--school-primary);
	--bs-btn-disabled-border-color: var(--school-primary);
}

body.scsu .btn-outline-primary,
body.pagu .btn-outline-primary {
	--bs-btn-color: var(--school-primary);
	--bs-btn-border-color: var(--school-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--school-primary);
	--bs-btn-hover-border-color: var(--school-primary);
	--bs-btn-focus-shadow-rgb: var(--school-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--school-primary-active);
	--bs-btn-active-border-color: var(--school-primary-active);
	--bs-btn-disabled-color: var(--school-primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--school-primary);
	--bs-gradient: none;
}

body.scsu .pagination,
body.pagu .pagination {
	--bs-pagination-color: var(--school-primary);
	--bs-pagination-hover-color: var(--school-primary-hover);
	--bs-pagination-focus-color: var(--school-primary-hover);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--school-primary-rgb), 0.25);
	--bs-pagination-active-bg: var(--school-primary);
	--bs-pagination-active-border-color: var(--school-primary);
}

body.scsu .nav-pills,
body.pagu .nav-pills {
	--bs-nav-pills-link-active-bg: var(--school-primary);
}

body.scsu .dropdown-menu,
body.pagu .dropdown-menu {
	--bs-dropdown-link-active-bg: var(--school-primary);
}

body.scsu .list-group,
body.pagu .list-group {
	--bs-list-group-active-bg: var(--school-primary);
	--bs-list-group-active-border-color: var(--school-primary);
}

body.scsu .accordion,
body.pagu .accordion {
	--bs-accordion-active-color: var(--school-primary-text-emphasis);
	--bs-accordion-active-bg: var(--school-primary-subtle);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--school-primary-rgb), 0.25);
}

body.scsu .form-check-input:checked,
body.pagu .form-check-input:checked,
body.scsu .form-range::-webkit-slider-thumb,
body.pagu .form-range::-webkit-slider-thumb,
body.scsu .form-range::-moz-range-thumb,
body.pagu .form-range::-moz-range-thumb {
	background-color: var(--school-primary);
	border-color: var(--school-primary);
}

body.scsu .form-check-input:focus,
body.pagu .form-check-input:focus {
	border-color: var(--school-primary);
	box-shadow: 0 0 0 0.25rem rgba(var(--school-primary-rgb), 0.25);
}


/* Navbar */
.navbar-brand, .navbar-brand:hover {
	color: #005a88;
}

.school-brand-text,
.scsu-brand-text {
	white-space: normal;
	line-height: 1.3;
	flex-shrink: 1;
	font-size: 1rem;
}

@media (max-width: 450px) {
	.school-brand-text,
	.scsu-brand-text {
		font-size: 0.9rem;
		max-width: 145px;
	}
}

.pagu .navbar-brand, 
.pagu .navbar-brand:hover {
	color: #008e02;
}


/* Tables */
.table > :not(caption) > * > * {
	background-color: unset; /* resetting Bootstrap */
}

.table-bordered td, .table-bordered th {
	position: relative;
}

.bordered {
	border: 1px solid #000000;
	border-collapse: collapse;
}

.bordered td, .bordered th {
	border: 1px solid #000000;
}

caption.top-side {
	caption-side: top;
}

caption.bottom-side {
	caption-side: bottom;
}


/* Forms */
.form-margin-top {
	margin-top: 160px;
}

.form-margin-top2 {
	margin-top: 120px;
	margin-top: 96px;
}

.important-marker { /* color red, superscript */
	color: #ff0000;
	font-weight: bold;
}

.required {
	color: #ff0000 !important;
	font-weight: 700 !important;
}

.form-header-bgcolor {
	background-color: #cccccc;
	background-color: rgba(0,0,0,.075) !important;
	color: #212529;
}

.form-header-bgcolor > th {
	background-color: inherit!important;
}

.hei .form-control, 
.hei .form-select, 
.hei .form-check-input {
	border-color: #6c757d; /* --bs-gray-600 */
}

.hei .form-select:focus, 
.hei .form-control:focus, 
.hei .form-check-input:focus {
	border-color: #f89521;
	box-shadow: 0 0 4px .125rem #f89521;
}


.scsu .form-control, 
.scsu .form-select, 
.scsu .form-check-input, 
.scsu .form-check-input[type="checkbox"] {
	border-color: #000000;
	border-color: #005a88;
	border-radius: 0.375rem;
}

.scsu .form-check-input[type="radio"] {
	border-radius: 50%;
}

.scsu .form-select:focus, 
.scsu .form-control:focus, 
.scsu .form-check-input:focus {
	border-color: #005a88;
	box-shadow: 0 0 4px .125rem #005a88;
}

.pagu .form-control, 
.pagu .form-select, 
.pagu .form-check-input, 
.pagu .form-check-input[type="checkbox"] {
	border-color: #000000;
	border-color: #008e02;
}

.pagu .form-select:focus, 
.pagu .form-control:focus, 
.pagu .form-check-input:focus {
	border-color: #008e02;
	box-shadow: 0 0 4px .125rem #008e02;
}



/* Menus */
.scsu .dropdown-menu {
	border-radius: 0.375rem;	
}

/* Submenu styles */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	margin-left: 0;
	margin-top: -0.375rem;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

/* Arrow for any menu item with a submenu */
.dropdown-submenu > a {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.dropdown-submenu > a::after {
	content: "\f054" !important;
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
	margin-left: 0.75rem !important;
	margin-right: 0 !important;
	display: inline !important;
	border: none !important;
	font-size: 0.875rem !important;
}

/* Mobile menu handling */
@media (max-width: 991.98px) {
	.dropdown-submenu > .dropdown-menu {
		position: static;
		display: none;
		margin-left: 1rem;
		border: none;
		box-shadow: none;
		background-color: #f8f9fa;
	}

	.dropdown-submenu > .dropdown-menu .dropdown-item {
		padding-left: 2rem;
	}

	.dropdown-submenu.show > .dropdown-menu {
		display: block;
	}

	.dropdown-submenu > a {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.dropdown-submenu > a::after {
		content: "\f054" !important;
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		margin-left: 0.75rem !important;
		margin-right: 0 !important;
		display: inline !important;
		border: none !important;
		font-size: 0.875rem !important;
	}
}	


/* Buttons */
.btn, .input-group-text {
	/* border-radius: 0; */
}

.btn.btn-hei {
	color: #fff;
	background-color: #f18404;
	background-color: #f89521;
	border-color: #f18404;
	border-color: #f89521;
}

.btn.btn-hei:hover {
	color: #fff;
	background-color: #ff6600;
	border-color: #ff6600;
}

.btn.btn-hei-outline {
	border-color: #f89521;
}

.btn.btn-hei-outline:hover {
	color: #fff;
	background-color: #f89521;
	border-color: #f89521;
}

.btn.btn-scsu {
	color: #fff;
	background-color: #235b82;
	border-color: #235b82;
}

.btn.btn-scsu:hover {
	color: #fff;
	background-color: #006699;
	border-color: #006699;
}

.btn.btn-scsu-outline {
	border-color: #235b82;
}

.btn.btn-scsu-outline:hover {
	color: #fff;
	background-color: #235b82;
	border-color: #235b82;
}

.btn.btn-pagu {
	color: #fff;
	background-color: #008e02;
	border-color: #008e02;
}

.btn.btn-pagu:hover {
	color: #fff;
	background-color: #006b02;
	border-color: #006b02;
}

.btn.btn-pagu-outline {
	border-color: #008e02;
}

.btn.btn-pagu-outline:hover {
	color: #fff;
	background-color: #006b02;
	border-color: #006b02;
}

.pagu .btn.btn-scsu {
	color: #fff;
	background-color: #008e02;
	border-color: #008e02;
}

.pagu .btn.btn-scsu:hover {
	color: #fff;
	background-color: #006b02;
	border-color: #006b02;
}

.pagu .btn.btn-scsu-outline {
	border-color: #008e02;
}

.pagu .btn.btn-scsu-outline:hover {
	color: #fff;
	background-color: #008e02;
	border-color: #008e02;
}


.scsu button, .scsu .btn {
	border-radius: 0.375rem;
}


/* Cards */
.card {

}

.hei .card {
	border-color: #005a88;
	color: rgba(33, 37, 41, 0.75);
}


/* Datepicker */
.datepicker {
	/* border-radius: inherit !important; */
	/* padding: 12px !important; */
	padding: .375rem .75rem !important;
	border-radius: var(--bs-border-radius);
}

.datepicker-days,
.datepicker-months,
.datepicker-years,
.datepicker-decades, {
	padding: 0px 8px;
}

.datepicker-days table .datepicker-switch,
.datepicker-months table .datepicker-switch,
.datepicker-years table .datepicker-switch,
.datepicker-decades table .datepicker-switch,
.datepicker-centuries table .datepicker-switch,
.datepicker-days table .dow, 
.datepicker-days table .day {
	padding: 8px;
}

.datepicker-months table .datepicker-switch, 
.datepicker-years table .datepicker-switch,
.datepicker-decades table .datepicker-switch,
.datepicker-centuries table .datepicker-switch {
	width: 225px;
}

.datepicker-months table .month,
.datepicker-years table .year, 
.datepicker-decades table .decade,
.datepicker-centuries table .century {
	padding: 0px 12px 4px;
}

.datepicker.datepicker-dropdown.dropdown-menu {
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; /* based from Bootstrap */
}

.datepicker td, .datepicker th {
	border-radius: 0.375rem;
}

.scsu .datepicker {
	border-radius: 0.375rem;
}


/* Signature */
.signature-canvas {
	width: 300px;
	width: 320px;
	width: 350px;
	height: 70px;
	height: 116px;
	height: 1150x;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	cursor: url("/assets/SignaturePad/RWHandwriting.cur"), auto;
}

@media (min-width: 576px) {
		.dropdown:hover > .dropdown-menu {
		display: block;
		margin-top: 0;
	}
}

a {
	text-decoration: none;
	color: inherit; 
}


/* jQuery UI */
.ui-widget {
	font-family: inherit;
}

.ui-autocomplete .ui-menu-item {

}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
	padding-left: 12px;
	padding-right: 12px;
}