@import "enhancements.css";

#wrap {
	height: auto;
	min-height: 100%;
	width: 100%;
	padding-top: 42px;
	box-sizing: border-box;
}

/*FixedMenu bug when menu hidden*/

#menu.fixedmenu-fixed.hide + div {
	width: 0!important
}

#menu {
	width: 232px;
	border-width: 0 1px 0 0;
	border-style: solid
}

#menu {
	position: relative;
	float: left;
	overflow: visible;
	z-index: 1 !important;
	min-height: 100vh;
	/* 100% of browser screen height */
}

#menu.fixedmenu-fixed #menu-top {
	margin-top: 39px;
}

#menu-top select {
	width: 100%;
}

#body {
	padding: 0 20px 50px;
}

#footer {
	clear: both;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	/*height: 40px;*/
	width: 100%
}

#footerwrap {
	height: 42px;
	padding: 0 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-width: 0;
	border-style: solid;
}

#footerhelp {
	display: none;
	max-height: 210px;
	max-height: 33vh;
	overflow-y: scroll;
	height: auto;
	width: 100%;
	/* Prevent body from scrolling when help open */
	overscroll-behavior: contain;
}

/* Better readability: format Help text in 3 columns max., 480px width min. (70 to 100 characters). */

#footerhelp .footerhelp-content {
	padding: 6px 12px;
	columns: 3 480px;
	widows: 6;
}

.footerhelp-content p:first-child {
	margin-top: 0;
}

#footerhelp .footerhelp-content p:first-child:first-letter {
	font-weight: bold;
	font-size: larger;
}

.mod {
	overflow: hidden
}

.mod:after {
	content: "";
	display: table;
	clear: both
}

input,
.fixed-col select {
	max-width: 100%
}

/* @link https://stackoverflow.com/questions/10672586/how-to-make-select-elements-shrink-to-max-width-percent-style-within-fieldset */

select {
	max-width: 340px;
}

#search input,
#search select {
	max-width: 217px;
}

#search label {
	max-width: 217px;
	display: inline-block;
}

#search #general_table select {
	width: 100%;
}

#search .postbox {
	margin-bottom: 16px;
}

/* Fix date (year and day) select width */

#search #general_table select[name^="day_"],
#search #general_table select[name^="year_"] {
	width: auto;
}

textarea {
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

input[type=checkbox],
input[type=radio] {
	margin: 0 0 2px 0;
	vertical-align: middle;
	height: 16px;
	width: 16px;
	cursor: pointer;
}

input[type=number] {
	width: 64px
}

input[type=number][name*=AMOUNT],
input[type=number][name*=amount],
input[type=number][name*=balance],
input[type=number][name*=PRICE] {
	width: 88px
}

input[type=color] {
	border-width: 0;
	border-style: solid;
	padding: 0;
	cursor: pointer;
	width: 40px;
}

.color-input-value {
	height: 25px;
	width: 40px;
	margin: 1px 1px 1px 0;
}

fieldset[disabled] button,
button[disabled],
fieldset[disabled] input,
input[disabled],
fieldset[disabled] select,
select[disabled],
fieldset[disabled] textarea,
textarea[disabled] {
	cursor: not-allowed;
}

::selection {
	color: white;
	background: #0073aa;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	/* Do NOT use global word-break, is awful!
	   Use it wisely, only on specific elements which will not overflow nicely */
	/*word-break: break-word;*/
}

html,
body,
input,
select,
textarea,
/* Chosen JS select */

div.chosen-container,
/* JS calendar */

.calendar,
.calendar table {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	/* Fix font size auto-adjust on iPhone. */
	-webkit-text-size-adjust: none;
}

body,
textarea,
input,
select {
	font-family: 'Lato', sans-serif;
	line-height: 1.27;
}

/* https://stackoverflow.com/questions/61992025/google-chrome-showing-black-border-on-focus-state-for-button-user-agent-styles */

a {
	-webkit-transition: color 0.18s ease, opacity 0.18s ease;
	transition: color 0.18s ease, opacity 0.18s ease;
}

iframe,
img {
	border: 0
}

/* Responsive image */

img {
	max-width: 100%;
	height: auto;
}

td {
	line-height: inherit
}

input,
select,
textarea {
	line-height: 1.3;
	margin: 1px 1px 1px 0;
	padding: 2px 4px;
}

input[type=number] {
	padding-right: 2px;
}

select {
	padding: 0 2px;
}

.browser-firefox select {
	padding: 0 2px 0 4px;
}

a,
input,
select:focus {
	text-decoration: none
}

blockquote,
q {
	quotes: none
}

p {
	margin: 1em 0
}

blockquote {
	margin: 1em;
	border-left-width: 4px;
	border-left-style: solid;
	padding-left: 4px;
}

label {
	cursor: pointer
}

legend {
	text-transform: uppercase;
	padding: 0 7px;
	font-size: 14px;
}

li {
	margin-bottom: 6px
}

small {
	font-size: 70%;
}

h1,
h2,
h3,
h4 {
	display: block;
	font-weight: bold;
	line-height: 1em
}

h1 {
	font-size: 2em;
	font-weight: 400;
	margin: .67em 0
}

h2 {
	font-size: 1.58em;
	margin: .83em 0
}

h3 {
	font-size: 1.17em;
	margin: 1em 0
}

h4 {
	font-size: 1.05em;
	margin: 1.33em 0
}

ul {
	list-style-type: square;
}

ul,
ol {
	margin-top: 0;
	padding-left: 20px;
}

code {
	font-family: Consolas, Monaco, monospace;
	padding: 1px 3px;
	margin: 0 1px;
	font-size: 14px;
}

pre {
	overflow-x: auto;
	padding: 10px;
}

hr {
	height: 2px;
	border: 0 none;
	margin: 14px 0
}

sub,
sup {
	font-size: smaller;
}

summary {
	cursor: pointer;
}

summary::marker {
	cursor: pointer;
}

dl dd {
	margin: 0.5em 0 1em 2em;
}

/* Fix place cellpadding-5 before widefat */

.cellpadding-5 td {
	padding-right: 5px;
	padding-bottom: 5px
}

.widefat,
textarea,
input[type=text],
input[type=password],
input[type=file],
input[type=button],
input[type=submit],
input[type=reset],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
input[type=time],
select,
.postbox {
	border-width: 1px;
	border-style: solid
}

input[type=text],
input[type=password],
input[type=file],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
input[type=time],
input[type=color],
select {
	box-sizing: border-box;
	height: 27px;
}

.postbox {
	border-bottom-width: 2px
}

.widefat {
	clear: both;
	margin: 0;
	/* Move .cellspacing-0 directly here */
	border-spacing: 0;
}

.widefat a {
	text-decoration: none
}

.widefat thead th:first-of-type {
	border-top-left-radius: 3px
}

.widefat thead th:last-of-type {
	border-top-right-radius: 3px
}

.widefat tfoot th:first-of-type {
	border-bottom-left-radius: 3px
}

.widefat tfoot th:last-of-type {
	border-bottom-right-radius: 3px
}

/* listOutput sorting icon */

.widefat th a[href*="LO_dir"]:after {
	font-family: monospace;
	font-size: larger;
	line-height: 0.5em;
	content: "\0000a0";
	/**
	 * Prevent wrapping to next line
	 * @link https://stackoverflow.com/questions/16100956/prevent-after-element-from-wrapping-to-next-line
	 */
	display: inline-block;
	width: 10px;
	padding-left: 3px;
	margin-right: -13px;
}

.widefat th a[href*="LO_dir"] {
	padding-right: 13px;
}

.widefat th a[href*="LO_dir=1"]:hover:after {
	content: "\25b4";
}

.widefat th a[href*="LO_dir=-1"]:hover:after {
	content: "\25be";
}

/*empty header link (checkbox / checkAll)*/

.widefat th a:empty:after {
	content: "";
	padding-left: 0;
}

.widefat td,
.widefat th {
	text-align: left;
	border-width: 1px 0;
	border-style: solid;
	padding: 6px 11px;
	vertical-align: top;
}

.list.widefat th {
	padding: 4px 11px 1px;
	/*line-height: 2.226em;*/
	line-height: 1.8em;
	height: 28px;
}

/* @since 7.0 CSS Add .widefat.files class */

.widefat.files td {
	padding: 1px 7px;
	font-weight: normal;
}

.widefat tfoot th {
	border-bottom: none
}

.widefat th {
	overflow: hidden;
	font-weight: normal;
	line-height: 1.4em;
}

.widefat th,
.widefat th a {
	font-size: 16px;
}

.widefat td p {
	margin: 0 0 .8em
}

/* Lists */

.list-wrapper {
	overflow-x: auto;
}

.list-nav,
.list {
	/* Move .width-100p here */
	width: 100%;
	border-spacing: 0;
}

.list-nav {
	margin-top: 16px;
}

.list-nav td {
	padding: 4px 12px;
}

.list {
	margin-bottom: 16px;
}

.list-no-nav {
	margin-top: 24px;
}

.list-header {
	margin-bottom: 0;
	border-bottom: solid 1px #f1f1f1;
}

.list-header + .postbox {
	padding: 5px;
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: none;
}

#LO_search {
	padding-right: 28px;
	height: inherit;
	width: 160px;
	float: right;
}

#LO_search + .button {
	position: relative;
	left: 157px;
	top: 3px;
	cursor: pointer;
	height: 22px;
	float: right;
}

div.error,
div.updated {
	padding: 3px 7px;
	margin: 16px 0
}

select option {
	padding: 2px
}

input[type=submit],
input[type=reset],
input[type=button] {
	text-decoration: none;
	font-size: 15px;
	text-transform: uppercase;
	line-height: 16px;
	padding: 6px 10px 4px;
	margin: 0 8px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	/* Display button text on multiple lines if too long */
	white-space: normal;
	/* Fix button on iPhone iPad. */
	-webkit-appearance: none;
	/* Do not break text inside button */
	word-break: normal;
}

input[type="button"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="color"],
input[type="time"],
select,
textarea {
	border-bottom-width: 2px;
	transition: border .2s;
	border-radius: 0;
}

.header2.align-right input[type="button"],
.header2.align-right input[type="reset"],
.header2.align-right input[type="submit"] {
	margin: 0 0 0 16px;
}

.button-primary {
	line-height: 16px;
	white-space: nowrap;
}

/* Choose checkbox, see MakeChooseCheckbox() */

.list td:first-of-type label input[type="checkbox"] {
	vertical-align: initial
}

/* Proper Date, see ProperDate() */

.proper-date {
	white-space: nowrap;
	display: inline-block;
}

.proper-date:first-letter {
	text-transform: capitalize;
}

/**
 * Side Menu form: add CSS classes.
 *
 * @since 3.8
 */

#menu form {
	padding: 0 6px;
}

#menu-top span {
	padding-top: 3px;
}

#menu-top .today-date {
	text-transform: capitalize;
}

#menu-top .username,
#menu-top .today-date {
	padding-left: 4px;
}

.adminmenu,
.wp-submenu {
	width: 100%;
	list-style: outside none none;
}

.adminmenu {
	clear: left;
	margin: 0;
	padding: 0;
	margin-top: 5px;
}

.adminmenu *,
.widefat th {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.wp-submenu {
	top: -1000em;
	left: 0;
	position: absolute;
	min-width: 215px;
	padding: 0;
	padding-top: 1px;
	padding-bottom: 1px;
	margin: 0;
	overflow: hidden;
	-webkit-transition: top 0s, left 0s, box-shadow 0s;
	transition: top 0s, left 0s, box-shadow 0s;
	-webkit-transition-delay: .15s;
	transition-delay: .15s;
	box-shadow: none;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
}

.adminmenu li {
	margin-bottom: 0;
}

.menu-module {
	position: relative;
}

/* Edge browser fix: Do not merge focus-within styles with hover styles */

.no-touch .menu-module:focus-within .menu-top:after {
	content: "\276F";
	padding-top: 6px;
	position: absolute;
	right: 5px;
}

.no-touch .menu-module:hover .menu-top:after {
	content: "\276F";
	position: absolute;
	right: 5px;
	bottom: 13px;
}

#selectedModuleLink:after {
	content: "";
}

/* Edge browser fix: Do not merge focus-within styles with hover styles */

.no-touch .menu-module:focus-within .wp-submenu {
	-webkit-transition-delay: .15s;
	transition-delay: .15s;
	z-index: 20;
	top: 0;
	left: 232px;
	width: 232px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	/* Prevent body from scrolling when submenu open */
	overscroll-behavior: contain;
	word-wrap: break-word;
	min-height: 36px;
}

.no-touch .menu-module:hover .wp-submenu {
	-webkit-transition-delay: .15s;
	transition-delay: .15s;
	z-index: 20;
	top: 0;
	left: 232px;
	width: 232px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	/* Prevent body from scrolling when submenu open */
	overscroll-behavior: contain;
	word-wrap: break-word;
	min-height: 36px;
}

/* @since 4.4 Open submenu on touch (mobile & tablet), see warehouse.js */

#selectedModuleLink + .wp-submenu {
	transition-delay: 0s;
	z-index: 1;
	top: 0;
	left: 0;
	position: relative;
	margin-top: 0 !important;
	border: 0;
	min-height: 0;
	min-width: 205px;
	max-height: none;
	box-shadow: none;
}

.menu-inter {
	text-transform: uppercase;
	font-size: 14px;
	border-width: 1px 0 0;
	border-style: solid;
	padding: 4px 6px 2px 12px;
	margin-top: 2px;
}

.adminmenu a {
	display: block;
	line-height: 18px;
	padding: 4px 6px;
}

.menu-top {
	font-size: 13px;
	min-width: 10em;
	border-width: 1px 0 1px;
	border-style: solid;
	text-transform: uppercase;
}

.menu-top span {
	padding-right: 4px;
}

.menu-top img {
	height: 32px;
	vertical-align: middle
}

.wp-submenu a {
	padding: 4px 6px 4px 12px;
	font-size: 15px;
	margin: 0
}

.current-person {
	padding: 1px 5px;
	margin-top: 5px;
	font-weight: bold;
}

.postbox-wrapper {
	overflow-x: auto;
}

.postbox {
	padding: 0;
	margin: 0 auto;
	position: relative;
	min-width: 255px;
	line-height: 1.1
}

.postbox > thead th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding: 0 12px;
}

.postbox th h3,
.postbox .h3multi {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.postbox th h3 {
	line-height: 32px;
	height: 32px;
	margin: 0;
	border: 0
}

.postbox th h3,
.postbox th h3 a {
	display: inline-block;
	font-weight: normal
}

.postbox .h3selected a {
	font-weight: bold;
}

.postbox th h3,
.postbox th h3 a,
.postbox > thead th,
.widefat tfoot tr th,
.widefat th,
.widefat th a,
.widefat th span,
.widefat th label {
	font-size: 14px;
	text-transform: uppercase;
}

.postbox th h3 a {
	padding: 0 10px
}

.postbox .h3multi {
	overflow-y: hidden;
	margin-bottom: -2px;
}

th a {
	display: block;
	overflow: hidden;
}

fieldset {
	border-width: 1px;
	border-style: solid;
	margin: 0 0 4px;
	padding-bottom: 4px;
}

.error a {
	text-decoration: underline
}

.updated a {
	text-decoration: none;
	padding-bottom: 2px
}

div.error p,
div.updated p {
	margin: .2em 0;
	padding: 2px
}

h3 span {
	font-weight: normal
}

.highlight {
	padding: 3px 3px 3px 12px;
	margin-left: -12px;
	font-weight: bold;
	border: 0 none
}

/*added*/

.hide {
	display: none
}

.user-photo {
	max-width: 150px;
	max-height: 150px
}

.alignImg {
	vertical-align: middle;
	height: 32px
}

.header {
	/* Move .cellspacing-0 & width-100p directly here */
	border-spacing: 0;
	width: 100%;
}

.header1 h2 {
	font-size: 28px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	margin: 0;
	padding: 14px 16px 14px 0;
	letter-spacing: -0.02em;
	color: #1a1f3c;
}

.header2 {
	padding: 5px 12px;
	word-break: break-word;
}

.header2 .fixed-col {
	word-break: normal;
}

.header2 table {
	line-height: 1.1;
	margin-left: -3px
}

.header2 .widefat {
	margin-left: 0;
}

/* Scheduling Requests Courses div */

#courses_div {
	position: absolute;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	right: 0;
	left: 0;
	display: none;
	max-height: 80px;
	overflow: auto;
	width: auto
}

/* @since 12.0 Add .uld class, alias of .underline-dots */

.underline-dots,
.uld {
	border-bottom-style: dotted;
	border-bottom-width: 1px
}

/* Textarea MarkDown */

div.underline-dots,
div.uld {
	display: inline-block;
	max-height: 240px;
	max-width: 100%;
	overflow: auto;
	line-height: inherit;
}

span.underline-dots,
span.uld,
.checkbox-label,
.no-input-value {
	line-height: 27px;
	padding-bottom: 1px;
}

.span-grade-points + label {
	line-height: 27px;
}

textarea {
	width: 100%;
	min-width: 280px;
	/* Max width: 1024px for PDF */
	max-width: 1024px;
}

/* MarkDown */

.md-preview {
	min-width: 280px;
	/* Max width: 1024px for PDF */
	max-width: 1024px;
}

.md-preview > .tab {
	border-width: 1px;
	border-bottom: 0;
	border-style: solid;
	padding: 6px 10px;
	margin: 0 2px 0 0;
	line-height: 28px;
	text-transform: uppercase;
	font-size: 14px;
}

.md-preview > .tab.disabled {
	padding-top: 5px;
	pointer-events: none;
	cursor: default
}

.md-preview .md-link {
	line-height: 26px;
	float: right
}

.md-preview > div {
	display: none;
	border-width: 1px;
	border-bottom-width: 2px;
	border-style: solid;
	padding: 2px 4px;
	margin-bottom: 2px;
	box-sizing: border-box;
	overflow-y: auto;
}

.md-preview + textarea {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-top: 0;
	resize: vertical;
}

/*MarkDown to HTML table styling*/

.markdown-to-html table {
	border-collapse: collapse;
	border-spacing: 0;
}

.markdown-to-html th,
.markdown-to-html td {
	border: 1px solid #bbb;
	padding: 5px 10px;
}

.markdown-to-html {
	line-height: 1.3;
}

.list.widefat td .markdown-to-html {
	line-height: 1.236em;
}

.legend-gray,
.legend-red {
	font-size: 15px;
	line-height: 1.27;
	margin-top: 0;
	margin-bottom: 9px;
	display: inline-block
}

.underline-dots ~ .legend-gray,
.underline-dots ~ .legend-red,
.uld ~ .legend-gray,
.uld ~ .legend-red {
	margin-top: 2px;
}

/* Fix Dashboard tip message row too tall */

td > .legend-gray:first-child {
	margin-bottom: 0;
}

.logo {
	max-width: 64px;
	max-height: 64px;
}

#menu .logo {
	margin-top: 4px
}

.onclick {
	cursor: pointer
}

div.onclick {
	display: inline-block;
	max-width: 100%;
}

.cellspacing-0 {
	/*cellspacing="0"*/
	border-spacing: 0
}

.width-100p {
	/*width="100%"*/
	width: 100%
}

.fixed-col {
	table-layout: fixed;
	word-wrap: break-word;
	/* Fix cell content overflow */
}

.popTable {
	padding: 13px 11px;
}

td.valign-top,
tr.valign-top,
table.valign-top td {
	vertical-align: top
}

td.valign-bottom,
tr.valign-bottom td,
table.valign-bottom td {
	vertical-align: bottom
}

td.valign-middle,
tr.valign-middle td,
table.valign-middle td {
	vertical-align: middle
}

/* Vertical align button inside first td, use when row has input (list with fields) */

.list.has-input:not(.valign-middle) > tbody > tr > td:first-child .button,
.list.has-input:not(.valign-middle) > tbody > tr > td:first-child .button + b {
	padding-top: 7px
}

.align-right,
.align-right td,
td.align-right,
th.align-right {
	text-align: right
}

.col1-align-right > tbody > tr > td:first-child {
	text-align: right;
	vertical-align: middle
}

.center {
	/*<CENTER> && <td align="center">*/
	text-align: center
}

span.center,
a.center {
	display: block
}

img.center {
	display: block;
	margin: 0 auto;
}

table.center {
	text-align: inherit;
	margin-left: auto;
	margin-right: auto;
}

span.nobr {
	white-space: nowrap
}

div.nobr div {
	display: inline
}

tr.address > td {
	border-style: none dotted none none;
	border: 1;
	padding: 0 12px 0 12px
}

.br-after {
	display: block
}

/*Honor Roll cliparts + frames*/

td.image-radio-list {
	height: 160px;
	padding: 0;
	margin: 0;
	float: left;
	position: relative
}

label.image-radio-list {
	padding: 0 20px
}

img.image-radio-list {
	vertical-align: top;
	max-width: 150px;
	max-height: 150px
}

/*buttons*/

.button {
	vertical-align: -15%;
	height: 16px;
	max-width: none;
}

.valign-middle .button,
a > .button,
.button.bigger {
	vertical-align: middle;
}

.button.smaller,
.list-header a > .button.smaller {
	vertical-align: -12%;
}

a > .button.smaller {
	vertical-align: -18%;
}

.underline-dots .button,
.uld .button {
	vertical-align: text-top;
}

.current-person .button {
	vertical-align: -40%;
}

.error .button.bigger,
.updated .button.bigger {
	vertical-align: -35%;
}

a:has(.button) {
	white-space: nowrap;
}

a > .button {
	padding: 1px;
}

.button.bigger {
	height: 24px
}

.button.smaller {
	height: 14px
}

.button.cal {
	cursor: pointer;
	height: 32px;
	margin-top: -9px;
	vertical-align: middle;
}

.login .popTable td {
	padding-bottom: 16px;
}

.login .popTable tr:last-of-type td {
	padding-bottom: 0;
}

/* Login form */

.login #loginform input[type=text],
.login #loginform input[type=password] {
	font-weight: 200;
	font-size: 20px;
	width: 100%;
	max-width: 100%;
	height: 34px;
	padding: 3px 6px;
	margin-top: 2px;
	margin-right: 6px;
	box-shadow: inset 1px 1px 2px rgba(200, 200, 200, .2)
}

/*bottom*/

.BottomButton {
	margin-right: 12px;
	display: inline-block;
}

.BottomButton span {
	vertical-align: top;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 2px;
	line-height: 24px;
}

.BottomButton img {
	height: 18px;
	border-radius: 50%;
	padding: 3px;
}

#BottomButtonMenu {
	height: 32px;
	float: left;
}

/**
 * SVG menu icon
 *
 * @link https://feathericons.com/?query=menu
 */

#BottomButtonMenu svg {
	padding: 3px;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.BottomButton.loading {
	float: right;
	padding-bottom: 13px;
}

.BottomButton.hide {
	display: none;
}

/* Loading spinner */

.loading {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: url('spinning.gif') no-repeat center;
	background-size: contain;
	visibility: hidden;
	/* Tofix */
	padding-bottom: 0 !important;
}

input + .loading {
	vertical-align: bottom;
	width: 26px;
	height: 26px;
}

/* Adjust File input size with spinner on its right */

input[type=file] {
	max-width: calc( 100% - 38px);
}

/* Reduce File input size when inside list */

.list.widefat input[type=file] {
	width: 180px;
}

/* Hide File input "Browse" button */

input[type=file]::file-selector-button {
	display: none;
}

input[type=file]::-webkit-file-upload-button {
	display: block;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	border: none;
}

input[type=file]::-ms-browse {
	display: none;
}

/*bars*/

.bar {
	word-wrap: normal;
}

/*stackable tables*/

div.st {
	float: left;
	padding: 4px
}

/*Fix list overflow-x scroll inside div.st*/

div.st > .list-outer {
	display: inline-grid;
}

/*student comments*/

#student-comments {
	max-width: 100%;
	width: 500px;
}

#student-comments span {
	font-size: 14px;
	color: #333;
}

#student-comments div {
	padding: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid;
}

#student-comments div > :first-child {
	margin-top: 0;
}

#student-comments div > :last-child {
	margin-bottom: 0;
}

/*calendar*/

#calendar {
	table-layout: fixed;
	height: 80%;
}

#calendar > thead > tr > th {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.calendar-day {
	min-width: 109px;
}

.calendar-day > table {
	height: 100%;
	width: 100%;
}

/*http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell*/

.calendar-event {
	height: 26px;
	font-size: 14px;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.231
}

.calendar-day .bold {
	font-weight: bold
}

.calendar-day .number {
	font-size: 1.2em;
}

.calendar-minutes {
	text-align: right;
}

.calendar-newevent {
	vertical-align: bottom;
}

.no-touch .calendar-minutes,
.no-touch .calendar-newevent {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.15s linear;
}

.calendar-day:hover .calendar-minutes,
.calendar-minutes input:checked,
/* @link https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css */

.calendar-minutes input[type=number]:not(:placeholder-shown),
.calendar-day:hover .calendar-newevent {
	visibility: visible;
	opacity: 1;
}

.calendar-event div {
	border-left-width: 4px;
	border-left-style: solid;
	margin: 1px 0
}

.calendar-event a,
.calendar-event span {
	padding: 4px 2px;
	display: inline-block
}

td.calendar-menu {
	white-space: normal;
	max-width: none
}

.calendar-event-poptable {
	max-width: 340px;
}

/* Legend */

.legend-square {
	width: 32px;
	height: 32px;
	border-radius: 3px;
}

/* colorBox */

#cboxContent {
	padding: 0 0 8px 8px;
	margin-left: -8px;
	margin-right: 8px;
	box-sizing: border-box;
}

#cboxLoadedContent {
	margin: 0 0 0 8px !important;
	padding: 8px 12px !important;
	/* Prevent body from scrolling when colorBox open */
	overscroll-behavior: contain;
}

#cboxLoadedContent .header1 h2 {
	padding-top: 8px;
}

#cboxLoadedContent h1 {
	margin-top: 0.42em;
}

#cboxTitle {
	left: 30px;
}

/* Add-on module/plugin README inside colorBox */

.addon-readme {
	/* screenshots are 2880px DPR2 */
	width: 1080px;
	max-width: 100%;
}

/*responsive tables*/

.rt .link2colorBox {
	display: none
}

/*portal polls*/

.divPortalPoll {
	max-height: 350px;
	overflow-y: auto;
	min-width: 300px
}

.divPortalPoll .widefat {
	margin-bottom: 0.8em;
}

.widefat .divPortalPoll > p {
	margin-bottom: 2px;
}

/* Grades */

.span-grade-points {
	float: left;
}

/* Report Cards */

.grade-minmax-wrap {
	min-width: 120px;
}

/* Note: Total width < 100% so to leave space for triangle sort icon (::after). */

.grade-minmax-min {
	float: left;
	width: 23%;
	font-size: 14px;
}

.grade-minmax-grade {
	float: left;
	width: 48%;
	text-align: center;
}

.grade-minmax-max {
	float: left;
	width: 23%;
	text-align: right;
	font-size: 14px;
}

.grade-minmax-min,
.grade-minmax-grade,
.grade-minmax-max {
	/* Do not break grades */
	word-wrap: initial;
}

/* Take Attendance */

/* Attendance Codes */

.attendance-code {
	display: inline-block;
	padding: 2px 8px;
	/* One letter codes: same width */
	min-width: 10px;
	text-align: center;
	line-height: 1.82;
}

/*arrows*/

.arrow.right:before,
.switchMenu:before {
	content: "\25b6\0000a0";
	vertical-align: 10%;
}

.switchMenu.switched:before {
	content: "\25bc\0000a0";
}

.arrow,
.switchMenu {
	display: inline-block;
}

/**
 * @deprecated since 12.5 CSP: use `<details><summary>`
 */

.switchMenu {
	padding: 5px
}

#search details summary {
	padding: 6px;
	font-weight: bold;
	outline: none;
}

/* Chart.js */

.chart {
	position: relative;
	/* 90% viewport width - menu width. */
	width: calc( 90vw - 205px);
	max-width: 1024px;
}

/*tipmessage (DO NOT EDIT)*/

#tipMsg {
	visibility: hidden;
	position: absolute;
	z-index: 1000;
	top: -100px;
	max-width: 300px
}

.tipmsg-label {
	display: inline-block;
	border-bottom: 1px dashed #bbb;
	cursor: default;
}

a > .tipmsg-label {
	cursor: pointer;
}

.tipmsg-label .button + b,
a .button + b {
	font-weight: normal;
	text-transform: uppercase;
	font-size: 14px;
	vertical-align: middle;
}

/* Tooltip */

.tooltip {
	position: absolute;
	display: inline-block;
	margin-left: 5px;
	margin-top: -1px;
	cursor: help;
	text-transform: none;
}

.tooltip:before {
	content: "i";
	font-family: monospace;
	font-size: 0.85em;
	font-weight: bold;
	width: 16px;
	height: 16px;
	line-height: 16px;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
}

.tooltip > i {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: -90px;
	width: 180px;
	z-index: 999;
	display: inline-block;
	padding: 5px 7px;
	transition: opacity .3s;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
}

/* @since 12.1 Display tooltip at bottom */

.tooltip.bottom > i {
	bottom: auto;
	top: 100%;
}

.legend-gray .tooltip > i,
.legend-red .tooltip > i {
	bottom: 130%;
}

.legend-gray .tooltip.bottom > i {
	bottom: auto;
	top: 130%;
}

.tooltip:hover > i {
	visibility: visible;
	opacity: 1
}

/* MiniColors */

.minicolors {
	margin: 2px 2px 2px 0;
}

/* Accessibility (a11y) */

.a11y-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#footerwrap a.a11y-hidden:active,
#footerwrap a.a11y-hidden:focus {
	clip: auto !important;
	position: absolute;
	text-decoration: underline;
	left: 9%;
	width: auto;
	height: auto;
}

/* Login, First login & Password Reset pages */

.login,
.first-login,
.password-reset {
	height: auto;
}

.login #body,
.first-login #body {
	padding: 64px 2px;
	margin-bottom: 0;
}

.login .postbox,
.password-reset .postbox {
	max-width: 320px;
}

/* AJAX error message */

.ajax-error {
	position: fixed;
	top: 0;
	right: 0;
	padding: 11px;
	background-color: red;
	font-weight: bold;
	color: #fff;
	z-index: 100000;
	display: none;
}

/**
 * TinyMCE
 */

.tinymce {
	min-height: 200px;
}

/* @since 12.5 CSS add .tinymce-document class: double default height */

.tinymce-document {
	height: 360px;
}

.mce-tinymce.mce-container {
	/* Max width: 1024px for PDF */
	max-width: 1024px;
}

.tinymce-horizontal .mce-tinymce.mce-container {
	/* Max width: 1448px for Horizontal PDF */
	max-width: 1448px;
}

/* Hide "Powered by TinyMCE" */

.mce-branding {
	display: none !important;
}

.mce-tinymce.mce-fullscreen,
.tinymce-horizontal .mce-tinymce.mce-fullscreen {
	max-width: none;
}

/* TinyMCE responsive toolbar buttons */

.mce-btn-group .mce-btn {
	float: left;
}

.tinymce-html img,
.markdown-to-html img {
	/* Responsive image for TinyMCE & Markdown HTML. */
	height: auto;
}

/* Select2 select */

.select2-dropdown,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-radius: 0 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-bottom-width: 2px !important;
	min-height: 27px !important;
}

.select2-container--default .select2-search__field {
	height: auto;
}

.select2-container--default .select2-search__field,
.select2-container--default .select2-selection__choice {
	margin-top: 2px !important;
	margin-bottom: 0;
	font-size: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 27px !important;
}

.select2-container--default .select2-selection__rendered {
	text-align: left;
}

.select2-container--default li {
	margin-bottom: 0;
}

.select2-container--default .select2-results__option {
	padding: 5px 6px;
}

/* Fix Select2 dropdown hidden when inside colorBox (has z-index 9999) */

.select2-dropdown {
	z-index: 10051 !important;
}

/* Chosen/Select2 select: add 15px to original width so Chosen options ALL fit */

.chosen-select,
.select2-select {
	min-width: 55px;
	padding-right: 15px;
}

.select2-container {
	min-width: 55px;
}

/* Add 23px to multiple Chosen/Select2 select */

.chosen-select[multiple],
.select2-select[multiple] {
	padding-right: 23px;
}

/**
 * Disguise phone number "tel" links on desktop
 * http://stackoverflow.com/questions/15425356/how-to-disable-link-to-phone-number-when-on-desktop
 */

.no-touch .phone-link {
	color: #333;
	/*pointer-events: none;*/
	cursor: default;
}

/* Dashboard */

.dashboard-module-title {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	margin: 0.85em 0;
}

.dashboard-module-title span {
	padding-right: 4px;
}

.dashboard-module-data {
	padding-left: 8px;
}

.dashboard-module-data .tipmsg-label {
	margin-bottom: 11px;
}

.dashboard-module-data .tipmsg-label .legend-gray {
	margin-bottom: 1px;
}

.dashboard-module-data-tipmsg .legend-gray,
.dashboard-module-data-tipmsg .legend-gray .proper-date {
	font-size: 14px;
}

.dashboard-module-title img,
.dashboard-module-title .module-icon {
	vertical-align: -70%;
}

/* Teacher Programs */

.teacher-programs-wrapper {
	/*border-width: 3px;*/
	border-style: dashed;
	padding: 7px;
	width: 100%;
	margin-left: -9px;
}

/* Password Input */

.password-input-wrapper {
	display: inline-block;
}

.password-strength-bars {
	/*height: 6px;*/
	line-height: 5px;
	font-size: 5px;
}

.password-strength-bars + br {
	display: none;
}

.password-toggle {
	float: right;
	margin-left: -22px;
	margin-right: 3px;
	margin-top: 2px;
	cursor: pointer;
	position: relative;
	padding: 4px 2px;
	background: #fff;
}

.password-hide {
	display: none;
}

.password-strength-bars span {
	display: inline-block;
	width: 18.5%;
	line-height: 5px;
	height: 5px;
	padding: 0 1px 0 0;
	visibility: hidden;
}

.password-strength-bars ~ label {
	display: inline-block;
	margin-top: -2px;
}

/**
 * Mailing Labels
 *
 * @since 11.6 Add Mailing Label position
 */

.mailing-label-left,
.mailing-label-right {
	margin-top: 21px;
	margin-bottom: 36px;
}

.mailing-label-left td:first-of-type,
.mailing-label-right td:last-of-type {
	width: 60px;
}

.mailing-label-left td:last-of-type,
.mailing-label-right td:first-of-type {
	width: 400px;
}

.mailing-label-right {
	width: auto;
	margin-right: 0;
	margin-left: auto;
}

.mailing-label-top-margin {
	/* Add the equivalent of 6 line breaks. */
	margin-top: 126px;
}

/**
 * Upsell Premium
 *
 * @since 12.1
 */

.button-upsell-premium {
	border: none;
	display: inline-block;
	padding: 6px 10px;
	text-decoration: none;
	text-transform: uppercase;
	min-width: 112px;
	text-align: center;
	border-radius: 0;
	box-sizing: border-box;
	position: fixed;
	bottom: 16px;
	right: 15px;
	z-index: 9;
}

/* Add-on module/plugin PREMIUM.md inside colorBox */

.addon-upsell-premium {
	/* screenshots are 2880px DPR2 */
	width: 1080px;
	max-width: 100%;
}

.addon-upsell-premium img[alt="additional-screenshot"] {
	max-width: 260px;
	padding-top: 7px;
	padding-right: 7px;
}

/**
 * IE fix hide <template>
 *
 * @link https://stackoverflow.com/questions/22222950/html5-template-not-working-on-internet-explorer-how-to-solve-it
 */

template {
	display: none;
}

/**
 * Fix first column (list, table)
 *
 * @since 12.6
 */

.fix-first-column th:first-child,
.fix-first-column > tbody > tr > td:first-child {
	position: sticky;
	left: 0;
}

.fix-first-column > tbody > tr > td:first-child {
	background-color: inherit;
}

/* Keep font size at the end so they can override other rules */

.size-3 {
	font-size: 12px;
}

.size-1 {
	font-size: 14px;
}

.sizep1 {
	font-size: 16px
}

.sizep2 {
	font-size: 17px
}


/* ============================================================
   OrtizTheme Elite Polish Enhancements — auto-appended
   ============================================================ */

/* ============================================================
   RosarioSIS OrtizTheme — Colors
   Modern College Palette (Green/Red/Charcoal)
   ============================================================ */

html {
	background: #f5f6f5;
}

textarea,
input[type="text"],
input[type="password"],
input[type="file"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="time"],
input[type="color"],
select {
	border-color: #c3ccc1;
	background: #fff;
	/* Normalize color on iOS 15+ */
	color: inherit;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-color: #c3ccc1 !important;
}

input[type="button"]:hover,
input[type="email"]:hover,
input[type="file"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="reset"]:hover,
input[type="search"]:hover,
input[type="submit"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="url"]:hover,
input[type="color"]:hover,
input[type="time"]:hover,
input[type="color"]:hover,
select:hover,
textarea:hover {
	border-color: #8cb385;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="time"]:focus,
input[type="color"]:focus,
select:focus {
	border-color: #8cb385;
	border-bottom-color: #48a339;
	outline: none;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: #8cb385 !important;
	border-bottom-color: #48a339 !important;
}

/* Select2 */

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #48a339 !important;
}

.select2-container--default .select2-selection__rendered {
	color: #1c1f1c !important;
}

code,
pre {
	background: #ebf0e9;
}

hr {
	background: #d8e0d6;
}

blockquote {
	border-left-color: #c3ccc1;
}

input[readonly] {
	background: #f5f6f5;
}

/* Body bg */

html,
body {
	background: #f5f6f5;
}

body {
	color: #1c1f1c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #111111;
}

#menu {
	background: linear-gradient(180deg, #242424 0%, #111111 100%);
	border-color: rgba(255,255,255,0.06);
	color: #fff;
}

#menu.fixedmenu-fixed + div {
	background: #242424;
}

#menu-top select {
	border-color: rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.9);
}

#menu-top select:focus {
	border-bottom-color: #74c466;
}

.menu-inter {
	border-color: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.38);
}

#footer {
	background: rgba(17, 17, 17, 0.97);
	box-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

#footerwrap {
	border-color: rgba(255,255,255,0.07);
}

#footerhelp {
	background: #f8faf8;
}

.widefat {
	border-color: rgba(72,163,57,0.13);
}

.postbox,
.widefat {
	background: #ffffff;
}

.postbox > thead th,
.widefat th,
.widefat tfoot tr th {
	background: linear-gradient(180deg, #f2f7f1, #e8f0e7);
}

.postbox .h3selected {
	border-top: 2px solid #d12027; /* Use red for selected header */
	background: #ffffff;
}

.postbox > thead th {
	border-bottom-color: rgba(72,163,57,0.15);
}

.widefat tr:nth-child(odd),
.alternate,
.alt {
	background: #ffffff;
}

.widefat tr:nth-child(even) {
	background: #f8faf8;
}

.widefat tr:hover {
	background: #edf2ec;
}

.wp-submenu,
.highlight,
.widefat tr.highlight {
	background: #ffffff;
}

input[type=button],
input[type=submit] {
	border-color: #c3ccc1;
	color: #273325;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=button]:focus,
input[type=submit]:focus {
	color: #111111;
	border-color: #48a339;
}

input[type=button]:focus,
input[type=submit]:focus {
	border-bottom-color: #48a339;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
	background: #ffffff;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background: #f5f6f5;
}

/* Primary button */

input.button-primary,
button.button-primary,
a.button-primary {
	border-color: #2c6e20;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(135deg, #48a339 0%, #5ac249 100%);
}

input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
	background: #38852a;
}

input.button-primary:hover,
button.button-primary:hover,
a.button-primary:hover,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
	border-color: #1c4a14;
	color: #fff;
	outline: none;
}

a:hover,
a:active,
a:focus,
.adminmenu a:hover,
.adminmenu a:focus {
	color: #38852a;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: 1px dotted #48a339;
}

div.error,
div.updated {
	background: #fff5f5;
	border-left: 4px solid #ef4444;
}

div.error a {
	color: #dc2626;
}

div.updated {
	border-left-color: #10b981;
	background: #f0fdf4;
}

.widefat td,
.widefat th {
	border-color: rgba(72,163,57,0.08);
	border-bottom-color: rgba(72,163,57,0.12);
}

a {
	color: #48a339;
}

a:hover,
a:active,
a:focus {
	color: #38852a;
}

a:active,
a:focus,
.wp-submenu a:focus {
	outline: 1px dotted #48a339;
}

summary:focus {
	outline: 1px dotted #273325;
}

.adminmenu a,
a.menu-top:hover,
a.menu-top:focus,
.BottomButton:hover,
.BottomButton:active,
.BottomButton:focus {
	color: #a6cfa0;
}

a.menu-top,
.BottomButton {
	color: rgba(255,255,255,0.88);
}

.BottomButton img {
	background-color: rgba(255,255,255,0.15);
}

.postbox {
	border-color: rgba(72,163,57,0.13);
	background: #ffffff;
}

.postbox th {
	color: #273325;
}

.postbox th:hover,
.postbox th:hover h3 {
	color: #111111;
}

.adminmenu {
	background: #111111;
	border-color: rgba(255,255,255,0.06);
}

.menu-top {
	background-color: transparent;
	text-shadow: none;
	border-top-color: rgba(255,255,255,0.06);
	border-bottom-color: transparent;
}

#selectedModuleLink,
.menu-top:hover,
.menu-top:focus {
	background-color: rgba(72,163,57,0.14);
}

.no-touch .menu-module:focus-within .menu-top::after {
	color: rgba(255,255,255,0.6);
}

.no-touch .menu-module:hover .menu-top::after {
	color: rgba(255,255,255,0.6);
}

.wp-submenu {
	background: #181a18;
	border-color: rgba(255,255,255,0.07) rgba(0,0,0,0.2);
}

.wp-submenu a:focus,
.wp-submenu a:active,
.wp-submenu a:hover,
#selectedMenuLink {
	background-color: rgba(72,163,57,0.2);
	color: #fff;
}

.header2 {
	background: #ffffff;
	border-bottom: 1px solid rgba(72,163,57,0.15);
	border-top: 1px solid rgba(255,255,255,0.8);
}

#courses_div {
	background: #fff;
}

fieldset {
	border-color: rgba(72,163,57,0.2);
}

.bgcolor {
	background: #edf2ec;
}

.legend-gray {
	color: #4d574c;
}

.legend-red {
	color: #dc2626;
}

.underline-dots,
.uld {
	border-bottom-color: #9ab895;
}

.md-preview .tab,
.md-preview > div {
	border-color: rgba(72,163,57,0.2);
}

.md-preview .tab:hover,
.md-preview .tab.disabled {
	background: #fff;
	border-color: #8cb385;
}

.md-preview > .tab.disabled {
	border-top: 2px solid #d12027; /* Use red for active tab */
}

hr {
	color: #f5f6f5;
}

.current-person,
.current-person a {
	color: #fff;
}

.current-person.student {
	background: linear-gradient(135deg, #0e6abf 0%, #1a8fd1 100%);
}

.current-person.staff {
	background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.current-person.self {
	background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.current-person a:hover,
.current-person a:active,
.current-person a:focus {
	color: #fff;
}

#student-comments div {
	background: #fff;
}

#calendar {
	background: #e9ece8; /* slightly green tinted gray */
}

#calendar th {
	background: #273325;
	color: #fff;
}

.calendar-day.full {
	background: #ecfdf5;
}

.calendar-day.minutes {
	background: #eef2ff;
}

.calendar-day.no-school {
	background: #fef2f2;
}

.calendar-event {
	border-color: rgba(39,51,37,0.2);
}

.calendar-event .assignment {
	border-color: #ef4444;
}

.calendar-event .assigned {
	border-color: #10b981;
}

.legend-square.full {
	background-color: #6ee7b7;
}

.legend-square.minutes {
	background-color: #a5b4fc;
}

.legend-square.no-school {
	background-color: #fca5a5;
}

.attendance-code.present {
	color: #fff;
	background-color: #10b981;
}

.attendance-code.absent {
	color: #fff;
	background-color: #ef4444;
}

.attendance-code.half-day {
	color: #fff;
	background-color: #f59e0b;
}

.attendance-code.present-alt {
	color: #065f46;
	background-color: #d1fae5;
}

.attendance-code.absent-alt {
	color: #991b1b;
	background-color: #fee2e2;
}

.attendance-code.half-day-alt {
	color: #92400e;
	background-color: #fef3c7;
}

.attendance-code select,
.attendance-code input {
	color: #1c1f1c;
}

.switchMenu:before {
	color: #9ab895;
}

#BottomButtonMenu svg {
	stroke: rgba(255,255,255,0.88);
	background-color: rgba(255,255,255,0.1);
}

.bar {
	color: transparent;
}

.bar.relevance {
	background: #9ab895;
}

.divPortalPoll .bar {
	background: #48a339;
}

#cboxContent {
	background: transparent;
}

#cboxLoadedContent {
	background: #fff !important;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
}

.tooltip {
	color: #fff;
}

.tooltip:before {
	background: #48a339;
}

.tooltip > i {
	background: #111111;
	border: 1px solid rgba(255,255,255,0.12);
}

.teacher-programs-wrapper {
	border-color: rgba(72,163,57,0.2);
}

.password-strength-bars span {
	background-color: #ef4444;
}

.password-strength-bars .score2 {
	background-color: #f97316;
}

.password-strength-bars .score3,
.password-strength-bars .score4 {
	background-color: #10b981;
}

.button-upsell-premium {
	color: #111111;
	background: #fbbf24;
}

.button-upsell-premium:active,
.button-upsell-premium:hover,
.button-upsell-premium:focus {
	outline: none;
	background: #f59e0b;
	color: #000;
}

@media only screen and (max-width: 1023px) {
	.rt tr {
		border-right-color: rgba(72,163,57,0.15);
	}
}


/**
 * RosarioSIS OrtizTheme — Enhancements
 * Modern UI/UX upgrade layer
 * Designed to be loaded after the base stylesheets.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* Brand palette */
  --color-primary:          #48a339;
  --color-primary-dark:     #38852a;
  --color-primary-darker:   #2c6e20;
  --color-primary-light:    #74c466;
  --color-primary-glow:     rgba(72, 163, 57, 0.28);
  --color-accent:           #d12027;
  --color-accent-light:     rgba(209, 32, 39, 0.15);

  /* Sidebar */
  --menu-bg-from:           #242424;
  --menu-bg-to:             #111111;
  --menu-border:            rgba(255,255,255,0.06);
  --menu-item-hover-bg:     rgba(72, 163, 57, 0.14);
  --menu-item-active-bg:    rgba(72, 163, 57, 0.22);
  --menu-item-active-bar:   var(--color-accent);
  --menu-width:             232px;

  /* Top bar / footer */
  --topbar-bg:              rgba(17, 17, 17, 0.97);
  --topbar-shadow:          0 2px 16px rgba(0,0,0,0.45);
  --topbar-height:          42px;

  /* Body */
  --body-bg:                #f5f6f5;
  --body-bg-alt:            #ebeceb;

  /* Cards */
  --card-bg:                #ffffff;
  --card-border:            rgba(72, 163, 57, 0.13);
  --card-radius:            10px;
  --card-shadow:            0 2px 14px rgba(40,60,40,0.09), 0 1px 3px rgba(40,60,40,0.06);
  --card-shadow-hover:      0 6px 24px rgba(40,60,40,0.15), 0 2px 6px rgba(40,60,40,0.09);

  /* Tables */
  --table-head-bg-from:     #f2f7f1;
  --table-head-bg-to:       #e8f0e7;
  --table-row-odd:          #ffffff;
  --table-row-even:         #f8faf8;
  --table-row-hover:        #edf2ec;
  --table-border:           rgba(72, 163, 57, 0.15);

  /* Forms */
  --input-border:           #c3ccc1;
  --input-border-hover:     #8cb385;
  --input-border-focus:     var(--color-primary);
  --input-radius:           6px;
  --input-shadow-focus:     0 0 0 3px var(--color-primary-glow);

  /* Buttons */
  --btn-radius:             6px;
  --btn-primary-from:       #48a339;
  --btn-primary-to:         #5ac249;
  --btn-primary-shadow:     0 4px 14px rgba(72, 163, 57, 0.3);
  --btn-primary-shadow-hover: 0 6px 20px rgba(72, 163, 57, 0.45);

  /* Status colours */
  --color-success:          #10b981;
  --color-error:            #ef4444;
  --color-warning:          #f59e0b;
  --color-info:             var(--color-primary);

  /* Transitions */
  --transition-fast:        0.15s ease;
  --transition-base:        0.22s ease;
  --transition-slow:        0.35s ease;

  /* Typography */
  --font-main:              'Plus Jakarta Sans', system-ui, sans-serif;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-caps:    0.07em;
}

/* ============================================================
   Global Reset Upgrades
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background: var(--body-bg);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #1e2340;
}

h1, h2, h3, h4, h5, h6 {
  color: #1a1f3c;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover, a:focus, a:active {
  color: var(--color-primary-dark);
}

::selection {
  background: var(--color-primary);
  color: #fff;
}

/* ============================================================
   Top Bar / Footer (fixed bar at top)
   ============================================================ */

#footer {
  background: var(--topbar-bg) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--topbar-shadow) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

#footerwrap {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none !important;
}

/* Top bar action buttons (bottom buttons shown at top) */
.BottomButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.BottomButton:hover,
.BottomButton:focus,
.BottomButton:active {
  background: rgba(79,110,247,0.25);
  color: #fff !important;
  transform: translateY(-1px);
}

.BottomButton img {
  height: 18px !important;
  width: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15) !important;
  padding: 2px;
  object-fit: contain;
}

.BottomButton span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-caps);
  vertical-align: middle;
  text-transform: uppercase;
}

#BottomButtonMenu svg {
  stroke: rgba(255,255,255,0.88) !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50%;
  padding: 3px;
  height: 20px !important;
  width: 20px !important;
  transition: stroke var(--transition-fast), background var(--transition-fast);
}

#BottomButtonMenu:hover svg {
  stroke: #fff !important;
  background: rgba(79,110,247,0.35) !important;
}

/* ============================================================
   Sidebar / Left Menu
   ============================================================ */

#menu {
  background: linear-gradient(180deg, var(--menu-bg-from) 0%, var(--menu-bg-to) 100%) !important;
  border-right: 1px solid var(--menu-border) !important;
  box-shadow: 4px 0 24px rgba(10,15,60,0.25);
  overflow-x: hidden;
}

/* Sidebar scrollbar (webkit) */
#menu::-webkit-scrollbar {
  width: 4px;
}
#menu::-webkit-scrollbar-track {
  background: transparent;
}
#menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* Username / date area */
#menu-top {
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--menu-border);
}

#menu-top .username {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

#menu-top .today-date {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* Dropdowns in menu top */
#menu-top select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.9) !important;
  padding: 3px 6px !important;
  font-size: 13px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  margin-top: 4px;
}

#menu-top select:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

#menu-top select:focus {
  border-color: var(--color-primary-light) !important;
  background: rgba(255,255,255,0.16) !important;
  outline: none;
}

/* Module top-level links */
.menu-top {
  background: transparent !important;
  border-top: 1px solid var(--menu-border) !important;
  border-bottom: none !important;
  text-shadow: none;
  font-size: 13px !important;
  letter-spacing: var(--letter-spacing-caps);
  color: rgba(255,255,255,0.78) !important;
  padding: 10px 8px 10px 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: background var(--transition-base), color var(--transition-base);
  cursor: pointer;
}

.menu-top::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--menu-item-active-bar);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.menu-top:hover,
.menu-top:focus {
  background: var(--menu-item-hover-bg) !important;
  color: #fff !important;
}

.menu-top:hover::before,
.menu-top:focus::before {
  opacity: 1;
  transform: scaleY(1);
}

#selectedModuleLink,
.menu-top:hover,
.menu-top:focus {
  background: var(--menu-item-hover-bg) !important;
  color: #fff !important;
}

#selectedModuleLink {
  background: var(--menu-item-active-bg) !important;
  color: #fff !important;
  font-weight: 700;
}

#selectedModuleLink::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  background: var(--menu-item-active-bar) !important;
}

.menu-top img {
  height: 28px !important;
  width: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
  transition: filter var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.menu-top:hover img {
  filter: drop-shadow(0 2px 8px rgba(79,110,247,0.5));
  transform: scale(1.08);
}

/* Module category separator (REPORTS, etc.) */
.menu-inter {
  font-size: 10px !important;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38) !important;
  border-top: 1px solid var(--menu-border) !important;
  text-transform: uppercase;
  padding: 10px 14px 4px !important;
  margin-top: 4px !important;
}

/* Submenu (fly-out / opened) */
.wp-submenu {
  background: #1d2348 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.35) !important;
}

.wp-submenu a {
  color: rgba(255,255,255,0.72) !important;
  padding: 8px 14px 8px 18px !important;
  font-size: 13.5px !important;
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), padding-left var(--transition-fast);
}

.wp-submenu a:hover,
.wp-submenu a:focus,
.wp-submenu a:active,
#selectedMenuLink {
  background: var(--menu-item-hover-bg) !important;
  color: #fff !important;
  border-left-color: var(--color-primary-light) !important;
  padding-left: 22px !important;
}

#selectedMenuLink {
  background: var(--menu-item-active-bg) !important;
  border-left-color: var(--color-primary) !important;
  font-weight: 700;
  color: #fff !important;
}

/* Current person badge */
.current-person {
  border-radius: 8px;
  padding: 6px 10px !important;
  margin: 6px 8px 4px !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.current-person.student {
  background: linear-gradient(135deg, #0e6abf 0%, #1a8fd1 100%) !important;
  box-shadow: 0 2px 10px rgba(14,106,191,0.4);
}

.current-person.staff {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 2px 10px rgba(5,150,105,0.4);
}

.current-person.self {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  box-shadow: 0 2px 10px rgba(217,119,6,0.4);
}

/* Logo area */
.logo {
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* ============================================================
   Main Content Area
   ============================================================ */

#wrap {
  padding-top: var(--topbar-height);
}

#body {
  padding: 0 20px 50px;
}

/* Page title bar */
.header1 {
  padding: 0 4px;
}

.header1 h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a1f3c;
  letter-spacing: -0.02em;
  padding: 14px 16px 14px 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sub-header toolbar (search/filter bar) */
.header2 {
  background: #ffffff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 8px rgba(40,60,160,0.06);
  margin-bottom: 12px;
}

/* When header2 directly follows a header1 row, square the top corners */
.header > tbody > tr + tr .header2,
.header1 + * .header2,
.header1 + .header2 {
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ============================================================
   Postbox / Card Components
   ============================================================ */

.postbox {
  border: 1px solid var(--card-border) !important;
  border-bottom-width: 1px !important;
  border-radius: var(--card-radius) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow var(--transition-base);
  /* Do NOT set overflow:hidden here — it clips select2 / datepicker popups */
}

.postbox > thead th {
  background: linear-gradient(180deg, var(--table-head-bg-from), var(--table-head-bg-to)) !important;
  border-bottom: 1px solid var(--table-border) !important;
  padding: 2px 14px !important;
}

.postbox th h3 {
  color: #2a3080;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  line-height: 36px !important;
  height: 36px !important;
}

.postbox th h3 a {
  color: inherit;
}

.postbox .h3selected {
  border-top: 2px solid var(--color-primary) !important;
  background: var(--card-bg) !important;
}

/* ============================================================
   Tables (.widefat)
   ============================================================ */

.widefat {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg) !important;
  /* Do NOT set overflow:hidden — clips positioned children */
}

/* Wrap the table for radius + shadow to show */
.list-wrapper {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.list-wrapper .widefat {
  box-shadow: none;
  border-radius: 0;
}

.widefat thead th:first-of-type {
  border-top-left-radius: var(--card-radius);
}
.widefat thead th:last-of-type {
  border-top-right-radius: var(--card-radius);
}

.widefat th,
.widefat tfoot tr th {
  background: linear-gradient(180deg, var(--table-head-bg-from), var(--table-head-bg-to)) !important;
  color: #2a3080 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  border-bottom: 1px solid var(--table-border) !important;
  padding: 10px 13px !important;
}

.widefat td {
  color: #2a2f5b;
  border-bottom: 1px solid rgba(100,116,200,0.08) !important;
  padding: 9px 13px !important;
  vertical-align: middle !important;
  transition: background var(--transition-fast);
}

.widefat tr:nth-child(odd) {
  background: var(--table-row-odd) !important;
}

.widefat tr:nth-child(even) {
  background: var(--table-row-even) !important;
}

.widefat tr:hover {
  background: var(--table-row-hover) !important;
}

.widefat a {
  color: var(--color-primary);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.widefat a:hover {
  color: var(--color-primary-dark);
}

/* ============================================================
   Forms & Inputs
   ============================================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="time"],
input[type="file"],
select,
textarea {
  border: 1px solid var(--input-border) !important;
  border-bottom: 2px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  background: #fff !important;
  color: #1e2340 !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  padding: 4px 8px !important;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="time"]:hover,
input[type="file"]:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-hover) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="time"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
  border-color: var(--input-border-hover) !important;
  border-bottom-color: var(--color-primary) !important;
  box-shadow: var(--input-shadow-focus) !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--input-border) !important;
  border-bottom: 2px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--input-border-hover) !important;
  border-bottom-color: var(--color-primary) !important;
  box-shadow: var(--input-shadow-focus) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
}

fieldset {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 10px 14px 12px !important;
  margin-bottom: 10px !important;
}

legend {
  color: #2a3080;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-caps);
  font-size: 12px !important;
  padding: 0 8px !important;
}

/* Checkboxes and Radios */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ============================================================
   Buttons
   ============================================================ */

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  border-radius: var(--btn-radius) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-caps);
  padding: 8px 18px 7px !important;
  margin: 0 6px !important;
  transition: background var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base), transform var(--transition-fast),
              color var(--transition-base) !important;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  transform: translateY(0);
}

/* Primary button — gradient */
input.button-primary,
button.button-primary,
a.button-primary {
  background: linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%) !important;
  border: none !important;
  border-bottom: 2px solid var(--color-primary-darker) !important;
  color: #fff !important;
  box-shadow: var(--btn-primary-shadow) !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-caps);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

input.button-primary:hover,
button.button-primary:hover,
a.button-primary:hover,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  box-shadow: var(--btn-primary-shadow-hover) !important;
  border-bottom-color: #1e35b8 !important;
  color: #fff !important;
  transform: translateY(-2px);
  outline: none;
}

input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(79,110,247,0.35) !important;
}

/* Default (secondary) button */
input[type="button"],
input[type="reset"],
input[type="submit"]:not(.button-primary) {
  background: #fff !important;
  border: 1px solid #c8cde8 !important;
  border-bottom: 2px solid #b0b8e0 !important;
  color: #2a3080 !important;
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:not(.button-primary):hover {
  background: #f4f5ff !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ============================================================
   Error / Success / Info Banners
   ============================================================ */

div.error,
div.updated {
  border-radius: 8px !important;
  border-left: 4px solid var(--color-error) !important;
  background: linear-gradient(90deg, #fff5f5, #fff) !important;
  padding: 10px 14px !important;
  margin: 14px 0 !important;
  box-shadow: 0 1px 6px rgba(239,68,68,0.1);
}

div.updated {
  border-left-color: var(--color-success) !important;
  background: linear-gradient(90deg, #f0fdf4, #fff) !important;
  box-shadow: 0 1px 6px rgba(16,185,129,0.1) !important;
}

/* ============================================================
   Attendance Code Badges
   ============================================================ */

.attendance-code {
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.attendance-code.present {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(5,150,105,0.3);
}

.attendance-code.absent {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220,38,38,0.3);
}

.attendance-code.half-day {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(217,119,6,0.3);
}

.attendance-code.present-alt {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0;
}

.attendance-code.absent-alt {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5;
}

.attendance-code.half-day-alt {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a;
}

/* ============================================================
   Tooltips
   ============================================================ */

.tooltip:before {
  background: var(--color-primary) !important;
  font-weight: 700;
  border-radius: 50%;
}

.tooltip > i {
  background: #1a1f3c !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px;
  color: #f0f2fc;
  font-style: normal;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  padding: 8px 12px;
}

/* ============================================================
   Colorbox Modal
   ============================================================ */

#cboxOverlay {
  background: rgba(17, 17, 17, 0.75) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#cboxLoadedContent {
  background: #fff !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2) !important;
  padding: 12px 16px !important;
}

/* ============================================================
   Tabs (Postbox multi-tab)
   ============================================================ */

.md-preview > .tab {
  border-radius: 6px 6px 0 0 !important;
  border: 1px solid var(--card-border) !important;
  border-bottom: none !important;
  background: #f4f5ff;
  color: #2a3080;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-caps);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.md-preview > .tab:hover {
  background: #eceeff !important;
  border-color: var(--color-primary-light) !important;
}

.md-preview > .tab.disabled {
  border-top: 2px solid var(--color-accent) !important;
  background: #fff !important;
  color: var(--color-primary);
}

/* ============================================================
   Password Strength Bars
   ============================================================ */

.password-strength-bars span {
  background-color: #ef4444 !important;
  border-radius: 3px;
  height: 5px !important;
}

.password-strength-bars .score2 {
  background-color: #f97316 !important;
}

.password-strength-bars .score3,
.password-strength-bars .score4 {
  background-color: #10b981 !important;
}

/* ============================================================
   Login Page
   ============================================================ */

.login #body,
.first-login #body {
  padding: 80px 20px !important;
}

.login .postbox,
.password-reset .postbox {
  max-width: 360px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(40,60,160,0.18), 0 2px 8px rgba(40,60,160,0.08) !important;
  overflow: hidden;
}

.login #loginform input[type="text"],
.login #loginform input[type="password"] {
  height: 40px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  padding: 6px 12px !important;
}

/* ============================================================
   Module Icons
   ============================================================ */

.module-icon {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  transition: filter var(--transition-base), transform var(--transition-base);
}

.menu-top:hover .module-icon {
  filter: drop-shadow(0 2px 8px rgba(79,110,247,0.5));
  transform: scale(1.1);
}

/* ============================================================
   Dashboard
   ============================================================ */

/*
  RosarioSIS dashboard layout: .mod > div.st > table.postbox
  Each .st is a float column. We improve spacing without
  changing the float model (which PHP controls).
*/

div.st {
  padding: 6px 8px !important;
}

/* Dashboard card header strip */
.dashboard-module-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2a3080;
  padding: 0 4px 6px !important;
  margin: 0 0 6px 0 !important;
  border-bottom: 1px solid rgba(100,116,200,0.18) !important;
  line-height: 1.4;
}

.dashboard-module-title span {
  padding-right: 0 !important;
}

/* Module icon inside dashboard title */
.dashboard-module-title .module-icon,
.dashboard-module-title img {
  vertical-align: middle !important;
  width: 22px !important;
  height: 22px !important;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Dashboard data region */
.dashboard-module-data {
  padding: 4px 6px 6px !important;
  font-size: 14px;
  line-height: 1.5;
  color: #2a2f5b;
}

.dashboard-module-data .tipmsg-label {
  display: block;
  margin-bottom: 9px !important;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(79,110,247,0.04);
  border-left: 3px solid rgba(79,110,247,0.2);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dashboard-module-data .tipmsg-label:hover {
  background: rgba(79,110,247,0.08);
  border-left-color: var(--color-primary);
}

.dashboard-module-data .tipmsg-label .legend-gray {
  margin-bottom: 1px !important;
  font-size: 13px;
  color: #4a5280;
}

/* Stat values shown as the main number/label */
.dashboard-module-data-tipmsg .legend-gray,
.dashboard-module-data-tipmsg .legend-gray .proper-date {
  font-size: 13px !important;
  color: #4a5280;
}

/* Dashboard postbox: give it a left-border accent per module */
div.st > .postbox-wrapper > table.postbox,
div.st > table.postbox {
  border-left: 3px solid var(--color-primary-light) !important;
  border-radius: 0 var(--card-radius) var(--card-radius) 0 !important;
  transition: border-left-color var(--transition-base), box-shadow var(--transition-base);
}

div.st > .postbox-wrapper > table.postbox:hover,
div.st > table.postbox:hover {
  border-left-color: var(--color-primary) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* Dashboard module title row inside postbox */
div.st > .postbox-wrapper > table.postbox > thead > tr > th,
div.st > table.postbox > thead > tr > th {
  background: linear-gradient(90deg, rgba(79,110,247,0.06), transparent) !important;
  border-bottom: 1px solid rgba(100,116,200,0.12) !important;
  padding: 8px 14px !important;
}

/* Dashboard body cell */
div.st > .postbox-wrapper > table.postbox > tbody > tr > td,
div.st > table.postbox > tbody > tr > td {
  padding: 10px 14px 12px !important;
  vertical-align: top;
}

/* Responsive: tighter padding on smaller screens */
@media only screen and (max-width: 874px) {
  div.st {
    padding: 4px 4px !important;
  }

  .dashboard-module-title {
    font-size: 10px !important;
  }

  .dashboard-module-data {
    padding: 4px 4px 6px !important;
  }
}

/* ============================================================
   HR Dividers
   ============================================================ */

hr {
  background: linear-gradient(90deg, transparent, var(--card-border) 20%, var(--card-border) 80%, transparent) !important;
  height: 1px !important;
  border: none !important;
  margin: 16px 0 !important;
}

/* ============================================================
   Scrollbar (content area)
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--body-bg);
}

::-webkit-scrollbar-thumb {
  background: #c0c8e8;
  border-radius: 6px;
  border: 2px solid var(--body-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #9aa5d8;
}

/* ============================================================
   AJAX Error
   ============================================================ */

.ajax-error {
  border-radius: 0 0 8px 8px !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(220,38,38,0.35) !important;
}

/* ============================================================
   Upsell Premium Button
   ============================================================ */

.button-upsell-premium {
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(255,196,57,0.45) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.button-upsell-premium:hover,
.button-upsell-premium:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,196,57,0.6) !important;
}

/* ============================================================
   Responsive overrides (keep layout intact)
   ============================================================ */

@media only screen and (max-width: 874px) {
  #footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #footerwrap {
    height: 36px !important;
    padding: 3px 10px !important;
  }

  .header1 h2 {
    font-size: 20px !important;
    padding-left: 4px !important;
  }

  .postbox {
    border-radius: 8px !important;
  }

  .widefat {
    border-radius: 8px !important;
  }

  #body {
    padding: 0 10px 42px !important;
  }
}

@media only screen and (max-width: 479px) {
  .BottomButton span {
    display: none;
  }

  .current-person {
    border-radius: 6px !important;
    margin: 4px 6px !important;
  }
}


/* ============================================================
   Elite Polish Enhancements (Login, Print, Dark Mode, Forms)
   ============================================================ */

/* 2. Login Screen Overhaul */
.login, .first-login {
  background: radial-gradient(circle at 100% 100%, #111111 0%, #242424 50%, #2a3328 100%) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.login #wrap, .first-login #wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}

.login #body, .first-login #body {
  padding: 20px !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.login .postbox,
.first-login .postbox,
.password-reset .postbox {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2) !important;
  padding: 30px 20px !important;
  max-width: 420px !important;
  width: 100%;
}

.login input[type="text"],
.login input[type="password"] {
  height: 48px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  padding: 0 16px !important;
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
  background: #fff !important;
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 4px var(--color-primary-glow) !important;
}

.login input.button-primary {
  height: 48px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  width: 100% !important;
  margin: 20px 0 0 !important;
}


/* 3. Modern Checkbox & Toggle Switches */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 42px !important;
  height: 24px !important;
  background: #c3ccc1 !important;
  border-radius: 24px !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  border: none !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important;
  transition: background var(--transition-base), box-shadow var(--transition-base) !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  transition: transform var(--transition-base) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

input[type="checkbox"]:checked {
  background: var(--color-primary) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

input[type="checkbox"]:checked::after {
  transform: translateX(18px) !important;
}

input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--color-primary-glow), inset 0 1px 3px rgba(0,0,0,0.15) !important;
}


/* 4. Professional Print Styles */
@media print {
  @page {
    margin: 1.5cm;
    size: A4;
  }
  
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }

  #menu, #footer, .BottomButton, .header2, .password-toggle, .ajax-error, input[type="submit"], input[type="button"], .noprint {
    display: none !important;
  }

  #wrap {
    padding-top: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  #body {
    padding: 0 !important;
  }
  
  .postbox, .widefat {
    box-shadow: none !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    page-break-inside: avoid;
  }

  .postbox > thead th, .widefat th, .widefat tfoot tr th {
    background: #f0f0f0 !important;
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
  }
  
  .widefat td, .widefat tr:nth-child(even), .widefat tr:nth-child(odd) {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #ccc !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  h1, h2, h3, h4, h5, h6, .dashboard-module-title {
    color: #000 !important;
    page-break-after: avoid;
  }
}


/* 5. Automatic Dynamic Dark Mode */
@media (prefers-color-scheme: dark) {
  body:not(.login):not(.first-login) {
    --body-bg:          #111111;
    --body-bg-alt:      #1a1a1a;
    --card-bg:          #1f1f1f;
    --card-border:      rgba(255, 255, 255, 0.08);
    --card-shadow:      0 4px 20px rgba(0,0,0,0.5);
    --card-shadow-hover:0 8px 30px rgba(0,0,0,0.7);

    --table-head-bg-from:#242424;
    --table-head-bg-to:  #1e1e1e;
    --table-row-odd:     #1f1f1f;
    --table-row-even:    #1a1a1a;
    --table-row-hover:   #2a2a2a;
    --table-border:      rgba(255, 255, 255, 0.08);

    --input-border:      #333333;
    --input-border-hover:#555555;
    
    color: #e0e0e0 !important;
  }
  
  body:not(.login):not(.first-login) h1,
  body:not(.login):not(.first-login) h2,
  body:not(.login):not(.first-login) h3,
  body:not(.login):not(.first-login) h4,
  body:not(.login):not(.first-login) h5,
  body:not(.login):not(.first-login) h6,
  body:not(.login):not(.first-login) .dashboard-module-title {
    color: #ffffff !important;
  }

  body:not(.login):not(.first-login) .widefat td,
  body:not(.login):not(.first-login) .dashboard-module-data {
    color: #cccccc !important;
  }

  body:not(.login):not(.first-login) .header2 {
    background: #1f1f1f !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  body:not(.login):not(.first-login) input[type="text"],
  body:not(.login):not(.first-login) input[type="password"],
  body:not(.login):not(.first-login) select,
  body:not(.login):not(.first-login) textarea {
    background: #151515 !important;
    color: #e0e0e0 !important;
  }

  body:not(.login):not(.first-login) input[type="button"],
  body:not(.login):not(.first-login) input[type="submit"]:not(.button-primary) {
    background: #242424 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
  }
  
  body:not(.login):not(.first-login) input[type="button"]:hover,
  body:not(.login):not(.first-login) input[type="submit"]:not(.button-primary):hover {
    background: #333 !important;
  }

  body:not(.login):not(.first-login) .postbox > thead th,
  body:not(.login):not(.first-login) .widefat th,
  body:not(.login):not(.first-login) .widefat tfoot tr th {
    color: #d1d1d1 !important;
  }
}