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

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: #31a425 !important;
}

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


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

.pagu .navbar-brand, 
.pagu .navbar-brand:hover {
	color: #31a425;
}


/* 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: #86b7fe;
	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: #31a425;
}

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



/* 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: #31a425;
	border-color: #31a425;	
}

.btn.btn-pagu:hover {
	color: #fff;
	background-color: #23751b;
	border-color: #23751b;
}

.btn.btn-pagu-outline {
	border-color: #31a425;
}

.btn.btn-pagu-outline:hover {
	color: #fff;
	background-color: #23751b;
	border-color: #23751b;
}


.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;
}