@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body.login{
    background-image: url('/assets/themes/Focus Inspired/images/background.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color:transparent !important;
    min-height:100vh !important;
}
body{
    overflow-x:hidden;
}
body.login{
    background-color:transparent !important;
}
body.login td.popTable{
    background-color:rgba(33, 60, 107, 0.75);
    border-radius:5px;
    color:white;
}
#loginform p.align-right a{
    background-color:#e0e1e2;
    color:rgba(0,0,0,.6);
    border-style:none;
    border-radius:5px;
    padding: 0.5em 1em;
    font-family:Outfit;
    font-size:20px;
    width:90% !important;
    margin:auto !important;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically, optional */
}

.about-rosariosis p{
    font-family:sans-serif !important;
    font-size:0.65em;
    text-align:center;
}
#loginform div.align-right a{
    display:none;
}
#loginform input.button-primary{
    background-color:#f2711c;
    color:white;
    border-style:none;
    border-radius:5px;
    padding: 0.5em 1em;
    font-family:Outfit;
    font-size:20px;
    text-transform:capitalize;
    font-weight:400;
}
#loginform input.button-primary:hover{
    background-color:rgb(252, 81, 32);
    transition:0.3s all;
}

#login input:first-of-type{
    margin-top:15px;
}
#login input, #PASSWORD{
    display:block;
    border: 0%;
    width:100% !important;
    border-radius:5px;
    background-color:white;
    color:black;
    font-size:16px;
    font-family:Outfit;
    padding: 0.5em 1em;
    border-width:0px;
}

summary{
    display:none;
}

div.calendar {
    position: relative;
    z-index: 100
}
.calendar, .calendar table {
    border: 1px solid #556;
    color: #000;
    cursor: default;
    background: #eef;
    font-family: Lato, sans-serif
}
.calendar .button {
    text-align: center;
    padding: 2px
} .
.calendar .nav {
    background: url(menuarrow.gif) 100% 100% no-repeat #778
}

h4.center{
    display:none;
}

.calendar thead .title {
    font-weight: 700;
    text-align: center;
    background: #fff;
    color: #000;
    padding: 2px
}
.calendar thead .headrow {
    background: #778;
    color: #fff
}
.calendar thead .daynames {
    background: #bdf
}
.calendar thead .name {
    border-bottom: 1px solid #556;
    padding: 2px;
    text-align: center;
    color: #000
}
.calendar thead .weekend {
    color: #a66
}
.calendar thead .hilite {
    background-color: #aaf;
    color: #000;
    border: 1px solid #04f;
    padding: 1px
}
.calendar thead .active {
    background-color: #77c;
    padding: 2px 0 0 2px
}
.calendar tbody .day {
    width: 2em;
    color: #456;
    text-align: right;
    padding: 2px 4px 2px 2px
}
body{
    font-family:sans-serif !important;
}
.calendar tbody .day.othermonth {
    font-size: 80%;
    color: #bbb
}
.calendar tbody .day.othermonth.oweekend {
    color: #fbb
}
.calendar table .wn {
    padding: 2px 3px 2px 2px;
    border-right: 1px solid #000;
    background: #bdf
}
.calendar tbody .rowhilite td {
    background: #def
}
.calendar tbody .rowhilite td.wn {
    background: #eef
}
.calendar tbody td.hilite {
    background: #def;
    padding: 1px 3px 1px 1px;
    border: 1px solid #bbb
}
.calendar tbody td.active {
    background: #cde;
    padding: 2px 2px 0
}
form[name="search"] input[type="text"] {
   background-color:white;
   border-style:solid;
   border-radius:3px;
   padding:0px !important;

}
table:has(tbody form[name="search"]) th {
background-color:purple !important;
font-family:sans-serif !important;
}
table:has(form[name="search"]) th h3 {
   font-family:sans-serif !important;
   padding:0px !important;
}
.current-person.student{
    background-color:orange !important;
}
}
.calendar tbody td.selected {
    font-weight: 700;
    border: 1px solid #000;
    padding: 1px 3px 1px 1px;
    background: #fff;
    color: #000
}
.calendar tbody td.weekend {
    color: #a66
}
.calendar tbody td.today {
    font-weight: 700;
    color: #00f
}
.calendar tbody .disabled {
    color: #999
}
.calendar tbody .emptycell {
    visibility: hidden
}
.calendar tbody .emptyrow {
    display: none
}
.calendar tfoot .footrow {
    text-align: center;
    background: #556;
    color: #fff
}
.calendar tfoot .ttip {
    background: #fff;
    color: #445;
    border-top: 1px solid #556;
    padding: 1px
}
.calendar tfoot .hilite {
    background: #aaf;
    border: 1px solid #04f;
    color: #000;
    padding: 1px
}
.calendar tfoot .active {
    background: #77c;
    padding: 2px 0 0 2px
}
.calendar .combo {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 4em;
    cursor: default;
    border: 1px solid #655;
    background: #def;
    color: #000;
    font-size: 90%;
    z-index: 100
}
.calendar .combo .label, .calendar .combo .label-IEfix {
    text-align: center;
    padding: 1px
}
.calendar .combo .label-IEfix {
    width: 4em
}
.calendar .combo .hilite {
    background: #acf
}
.calendar .combo .active {
    border-top: 1px solid #46a;
    border-bottom: 1px solid #46a;
    background: #eef;
    font-weight: 700
}
.calendar td.time {
    border-top: 1px solid #000;
    padding: 1px 0;
    text-align: center;
    background-color: #f4f0e8
}
.calendar td.time .ampm, .calendar td.time .hour, .calendar td.time .minute {
    padding: 0 3px 0 4px;
    border: 1px solid #889;
    font-weight: 700;
    background-color: #fff
}
.calendar td.time .ampm {
    text-align: center
}
.calendar td.time .colon {
    padding: 0 2px 0 3px;
    font-weight: 700
}
.calendar td.time span.hilite {
    border-color: #000;
    background-color: #667;
    color: #fff
}
.calendar td.time span.active {
    border-color: red;
    background-color: #000;
    color: #0f0
}
#cboxOverlay, #cboxWrapper, #colorbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden
}
#cboxWrapper {
    max-width: none
}
#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .9
}
#cboxBottomLeft, #cboxMiddleLeft {
    clear: left
}
#cboxContent {
    position: relative;
    margin-top: 32px;
    overflow: visible
}
#cboxTitle {
    margin: 0;
    position: absolute;
    top: -22px;
    left: 0;
    color: #000
}
#cboxLoadingGraphic, #cboxLoadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
#cboxClose, #cboxNext, #cboxPrevious, #cboxSlideshow {
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -20px;
    background: url(images/controls.png) no-repeat
}
.cboxPhoto {
    float: left;
    margin: auto;
    border: 0;
    display: block;
    max-width: none;
    -ms-interpolation-mode: bicubic
}
.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    background: #fff
}
#cboxContent, #cboxLoadedContent, #colorbox {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box
}
#cboxClose:active, #cboxNext:active, #cboxPrevious:active, #cboxSlideshow:active, #colorbox {
    outline: 0
}
#cboxError {
    padding: 50px;
    border: 1px solid #ccc
}
#cboxLoadingGraphic {
    background: url(images/loading.gif) center center no-repeat
}
#cboxLoadingOverlay {
    background: #000
}
#cboxCurrent {
    position: absolute;
    top: -22px;
    right: 205px;
    text-indent: -9999px
}
#cboxPrevious {
    background-position: 0 0;
    right: 44px
}
#cboxPrevious:hover {
    background-position: 0 -25px
}
#cboxNext {
    background-position: -25px 0;
    right: 22px
}
#cboxNext:hover {
    background-position: -25px -25px
}
#cboxClose {
    background-position: -50px 0;
    right: 0
}
#cboxClose:hover {
    background-position: -50px -25px
}
.cboxSlideshow_off #cboxPrevious, .cboxSlideshow_on #cboxPrevious {
    right: 66px
}
.cboxSlideshow_on #cboxSlideshow {
    background-position: -75px -25px;
    right: 44px
}
.cboxSlideshow_on #cboxSlideshow:hover {
    background-position: -100px -25px
}
.cboxSlideshow_off #cboxSlideshow {
    background-position: -100px 0;
    right: 44px
}
.cboxSlideshow_off #cboxSlideshow:hover {
    background-position: -75px -25px
}
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=time], input[type=url], select, textarea {
    border-color: #cacaca;
    background: #fff;
    color: inherit
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
    border-color: #cacaca !important
}
input[type=button]:hover, input[type=color]: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=time]:hover, input[type=url]:hover, select:hover, textarea:hover {
    border-color: #aaa
}
input[type=button]:focus, input[type=email]:focus, input[type=file]:focus, input[type=number]:focus, input[type=password]:focus, input[type=reset]:focus, input[type=search]:focus, input[type=submit]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, select:focus, textarea:focus {
    border-color: #aaa #aaa #298cba;
    outline: 0
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #aaa #aaa #298cba !important
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0073aa !important
}
.select2-container--default .select2-selection__rendered {
    color: #111 !important
}
input[readonly] {
    background: #eee
}
body, html {
    background: #efefef;
    height: 100%;
    margin: 0;
    padding: 0;
    word-wrap: break-word
}
body {
    color: #111
}
h1, h2, h3, h4, h5, h6 {
    color: #2d2d2d
}
#menu {
    background: #3b92de;
    border-color: #000;
    color: #fff;
}
#menu-top select {
    border-color: transparent;
    background: #29669b;
    border-radius:5px;
    color: #fff;
    width: 100%;
    font-family:Outfit;
}

span.today-date.size-1{
    background-color:#29669b;
    border-radius:5px;
    min-width: calc(100% - 6px);
    margin-bottom:10px;
    font-family:Outfit;
    display:block;
    padding:0px 0px 5px 0px;
    padding-left:6px !important;
    font-size:16px;
    margin-bottom:-19px;
    overflow-x:auto;
    white-space:nowrap;
}

span.username.br-after{
    background-color:#29669b;
    border-radius:5px;
    min-width: calc(100% - 6px);
    margin-bottom:10px;
    font-family:Outfit;
    display:block;
    padding:0px 0px 5px 1px;
    padding-left:6px !important;
    font-size:18px;
    margin-bottom:6px;
    overflow-x:auto;
    white-space:nowrap;
    font-weight:bold;
    margin-top:5px;
}
#menu-top select:focus {
    border-bottom-color: #298cba
}
.menu-inter {
    border-color: #333;
    color: #eee
}
#footer {
    background: #29669b;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    clear: both;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%
}
#footerwrap {
    border-color: #000
}
#footerhelp {
    background: #fff;
    display: none;
    max-height: 33vh;
    overflow-y: scroll;
    height: auto
}
.widefat {
    border-color: #cacaca;
    clear: both;
    margin: 0;
    border-spacing: 0
}
.postbox, .widefat {
    background-color: transparent !important;
}
.postbox>thead th, .widefat tfoot tr th, .widefat th {
    background: #f9f9f9
}
.postbox .h3selected {
    border-top: 2px solid #21759b;
    background-color: #fafdff;
}
h3.title.h3selected a{
    color:#0073aa;
}
h3.title.h3selected a:hover{
    color:white;
    background-color:#0073aa;
}
.postbox>thead th {
    border-bottom-color: #dfdfdf
}
.alt, .alternate, .widefat tr:nth-child(odd) {
    background: #fafdff
}
.widefat tr:nth-child(even) {
    background: #d6efff
}
.highlight, .widefat tr.highlight, .widefat tr:hover, .wp-submenu {
    background: #fff
}
input[type=button], input[type=submit] {
    border-color: #bbb;
    color: #333
}
input[type=button]:focus, input[type=button]:hover, input[type=submit]:focus, input[type=submit]:hover {
    color: #000;
    border-color: #666
}
input[type=button]:focus, input[type=submit]:focus {
    border-bottom-color: #298cba
}
input[type=button], input[type=reset], input[type=submit] {
    background: #f9f9f9
}
input[type=button]:active, input[type=reset]:active, input[type=submit]:active {
    background: #ededed
}
a.button-primary, button.button-primary, input.button-primary {
    border-color: #15556b;
    font-weight: 700;
    color: #fff;
    background: #298cba
}
a.button-primary:active, button.button-primary:active, input.button-primary:active {
    background: #1d6385
}
a.button-primary:focus, a.button-primary:hover, button.button-primary:focus, button.button-primary:hover, input.button-primary:focus, input.button-primary:hover {
    border-color: #10354b;
    color: #fff;
    outline: 0
}
.adminmenu a:focus, .adminmenu a:hover, a:active, a:focus, a:hover {
    color: #d54e21
}
input[type=checkbox]:focus, input[type=radio]:focus {
    outline: #000 dotted 1px
}
div.error, div.updated {
    background: #fff;
    border-left: 4px solid #b80a04
}
div.error a {
    color: #c00
}
div.updated {
    border-left-color: #0baa38
}
.widefat td, .widefat th {
    border-color: #fff #fff #dfdfdf
}
a {
    color: #000000;
    -webkit-transition: color .2s ease-out;
    transition: color .2s ease-out
}
a:active, a:focus, a:hover {
    color: #0090c3
}
.wp-submenu a:focus, a:active, a:focus {
    outline: #0090c3 dotted 1px
}
summary:focus {
    outline: #000 dotted 1px
}b
.BottomButton:active, .BottomButton:focus, .BottomButton:hover, .adminmenu a, a.menu-top:focus, a.menu-top:hover {
    background-color: #dadada;
    color:black;
}
.BottomButton, a.menu-top {
    font-family:Outfit;
    color:white;
}
.BottomButton img {
    background-color: #fff
}
.postbox {
    border-color: none;
    background: #f9f9f9
}
body.login .postbox th{
    display:none;
}
.postbox th {
    color: #333
}
.postbox th:hover, .postbox th:hover h3 {
    color: #000
}
.adminmenu {
    background: #121212;
    border-color: #222
}
.menu-top {
    background-color: #f0f0f0 !important;
    text-shadow: none;
    color:black !important;
}
#selectedModuleLink, .menu-top:focus{
    background-color: #3b92de !important;
    color:white !important;
    font-family:Outfit;
}

a.menu-top{
    font-family:Outfit;
}
.menu-top:hover{
    background-color:#dadada !important;
    transition:0.2s;
}
.no-touch .menu-module:focus-within .menu-top::after {
    color: #eee
}
.no-touch .menu-module:hover .menu-top::after {
    color: #eee
}
.wp-submenu {
    background: #111;
    border-color: #222 #000
}
#selectedMenuLink, .wp-submenu a:focus, .wp-submenu a:hover {
    background-color: #dadada;
    color: black
}
.header2 {
    background: #f9f9f9;
    border-bottom: 1px solid #dfdfdf;
    border-top: 1px solid #fff
}
fieldset {
    border-color: #cacaca
}
.bgcolor {
    background: #ececec
}
.legend-gray {
    color: #333
}
.legend-red {
    color: red
}
.underline-dots {
    border-bottom-color: gray
}
.md-preview .tab, .md-preview>div {
    border-color: #cacaca
}
.md-preview .tab.disabled, .md-preview .tab:hover {
    background: #fff;
    border-color: #aaa
}
.md-preview>.tab.disabled {
    border-top: 2px solid #21759b;
    padding-top: 5px;
    pointer-events: none;
    cursor: default
}
.current-person, .current-person a, hr {
    color: #fff
}
.current-person.student {
    background: #0073aa
}
.current-person.staff {
    background: #0baa38
}
.current-person.self {
    background: #fbb429
}
.current-person a:active, .current-person a:focus, .current-person a:hover {
    color: #fff
}
#calendar {
    background: #dfdfdf;
    table-layout: fixed;
    height: 80%
}
#calendar th {
    background: #333;
    color: #fff
}
.calendar-day.full {
    background: #efe
}
.calendar-day.minutes {
    background: #eef
}
.calendar-day.no-school {
    background: #fee
}
.calendar-event {
    border-color: #000
}
.calendar-event.assignment {
    border-color: red
}
.calendar-event.assigned {
    border-color: #0f0
}
.legend-square.full {
    background-color: #afa
}
.legend-square.minutes {
    background-color: #aaf
}
.legend-square.no-school {
    background-color: #faa
}
.attendance-code.present {
    color: #fff;
    background-color: #82d160
}
.attendance-code.absent {
    color: #fff;
    background-color: #fa3a37
}
.attendance-code.half-day {
    color: #fff;
    background-color: #fc0
}
.attendance-code.present-alt {
    color: #fff;
    background-color: #a3d1a3
}
.attendance-code.absent input[type=radio], .attendance-code.present input[type=radio]{
    visibility:hidden;
}

.attendance-code.absent-alt {
    color: #fff;
    background-color: #fdd
}
.attendance-code.half-day-alt {
    color: #fff;
    background-color: #fed
}
.switchMenu:before {
    color: gray
}
.bar {
    color: transparent
}
.bar.relevance {
    background: gray
}
.divPortalPoll .bar {
    background: #b80a04
}
#cboxLoadedContent {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    box-shadow: rgba(0, 0, 0, .3) 0 3px 8px;
    margin: 0 0 0 8px !important;
    padding: 8px 12px !important
}
.tooltip:before {
    background: #27b4b4
}
.tooltip>i {
    background: #111;
    border: 1px solid #000
}
.teacher-programs-wrapper {
    border-color: #dfdfdf
}
.password-strength-bars .score2 {
    background-color: #ff851b
}
.password-strength-bars .score3, .password-strength-bars .score4 {
    background-color: #2ecc40
}
@media only screen and (max-width:1023px) {
    .rt tr {
        border-right-color: #dfdfdf
    }
}
@font-face {
    font-family: Lato;
    src: url('fonts/Lato/regular.woff2') format('woff2'), url('fonts/Lato/regular.woff') format('woff');
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: Lato;
    src: url('fonts/Lato/italic.woff2') format('woff2'), url('fonts/Lato/italic.woff') format('woff');
    font-weight: 400;
    font-style: italic
}
@font-face {
    font-family: Lato;
    src: url('fonts/Lato/bold.woff2') format('woff2'), url('fonts/Lato/bold.woff') format('woff');
    font-weight: 700;
    font-style: normal
}
.module-icon {
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: -30%
}
h2 span.module-icon{
    width:30px;
    height:30px;
}
.header1 .module-icon {
    vertical-align: bottom;
    vertical-align:-15%;
}
.module-icon.Accounting {
    background-image: url("modules/Accounting.png")
}
.module-icon.Attendance {
    background-image: url("modules/Attendance.png")
}
.module-icon.Discipline {
    background-image: url("modules/Discipline.png")
}
.module-icon.Grades {
    background-image: url("modules/Grades.png")
}
.module-icon.Eligibility {
    background-image: url("modules/Eligibility.png")
}
.module-icon.Example {
    background-image: url("modules/Example.png") !important
}
.module-icon.Food_Service {
    background-image: url("modules/Food_Service.png")
}
.module-icon.Library {
    background-image: url("modules/Library.png")
}
.module-icon.Messaging {
    background-image: url("modules/Messaging.png") !important
}
.module-icon.misc {
    background-image: url("modules/misc.png")
}
.module-icon.Quiz {
    background-image: url("modules/Quiz.png") !important
}
.module-icon.Resources {
    background-image: url("modules/Resources.png")
}
.module-icon.Reports {
    background-image: url("modules/Reports.png") !important
}
.module-icon.Scheduling {
    background-image: url("modules/Scheduling.png")
}
.module-icon.School_Setup {
    background-image: url("modules/School_Setup.png")
}
.module-icon.SMS {
    background-image: url("modules/SMS.png")
}
.module-icon.Staff_Absences {
    background-image: url("modules/Staff_Absences.png") !important
}
.module-icon.Student_Billing {
    background-image: url("modules/Student_Billing.png")
}
.module-icon.Students {
    background-image: url("modules/Students.png")
}
.module-icon.Users {
    background-image: url("modules/Users.png")
}
#wrap {
    height: auto;
    min-height: 100%;
    width: 100%;
    padding-top: 39px;
    box-sizing: border-box
}
#menu.fixedmenu-fixed.hide+div {
    width: 0 !important
}
#menu {
    width: 223px;
    border-width: 0 1px 0 0;
    border-style: solid;
    position: relative;
    float: left;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 1 !important;
    height: calc(100vh - 39px)
}
#menu.fixedmenu-fixed #menu-top {
    margin-top: 39px
}
#footerwrap {
    height: 32px;
    padding: 3px 6px;
    text-align: center;
    border-width: 1px 0;
    border-style: solid
}
#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: 700;
    font-size: larger
}
.mod {
    overflow: hidden
}
.mod:after {
    content: "";
    display: table;
    clear: both
}
.fixed-col select, input {
    max-width: 100%
}
#search input, #search select {
    max-width: 217px
}
#search label {
    max-width: 217px;
    display: inline-block
}
#search #general_table select {
    width: 100%
}
#search #general_table select[name^=day_], #search #general_table select[name^=year_] {
    width: auto
}
input[type=password], input[type=text], textarea {
    -ms-box-sizing: border-box;
    box-sizing: border-box
}
input[type=checkbox], input[type=radio] {
    margin-bottom: 2px;
    margin-right: 0;
    vertical-align: middle;
    height: 40px;
    width: 16px !important;
    cursor: pointer
}
th.center{
        background-color:#29669b !important;
}
h3.title{
    font-family:Outfit;
    font-size:18px !important;
    font-weight:500 !important;
    color:white !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
}
input[type=number] {
    width: 58px;
    padding-right: 2px
}
input[type=number][name*=AMOUNT], input[type=number][name*=PRICE], input[type=number][name*=amount], input[type=number][name*=balance] {
    width: 80px
}
input[type=color] {
    border-width: 0;
    border-style: solid;
    padding: 0;
    cursor: pointer
}
.color-input-value, input[type=color] {
    height: 26px;
    width: 40px
}
button[disabled], fieldset[disabled] button, fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea, input[disabled], select[disabled], textarea[disabled] {
    cursor: not-allowed
}
::selection {
    color: #fff;
    background: #0073aa
}
.calendar, .calendar table, body, div.chosen-container, html, input, select, textarea {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}
body, input, select, textarea {
    font-family: Lato, sans-serif;
    line-height: 1.27
}
iframe, img {
    border: 0
}
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
}
select {
    max-width: 340px;
    padding: 0 2px 0 4px;
    height: 27px
}
a, input, select:focus {
    text-decoration: none
}
blockquote, q {
    quotes: none
}
p {
    margin: 1em 0
}
blockquote {
    margin: 1em
}
label {
    cursor: pointer;
    vertical-align: middle
}
legend {
    text-transform: uppercase;
    padding: 0 7px;
    font-size: 14px
}
dd, li {
    margin-bottom: 6px
}
small {
    font-size: 70%
}
h1, h2, h3, h4 {
    display: block;
    font-weight: 700;
    line-height: 1em
}
h1 {
    font-size: 2em;
    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
}
ol, ul {
    margin-top: 0;
    padding-left: 20px
}
code {
    background: #eaeaea;
    font-family: Consolas, Monaco, monospace;
    padding: 1px 3px;
    margin: 0 1px;
    font-size: 14px
}
hr {
    background: #dfdfdf;
    height: 2px;
    border: 0;
    margin: 14px 0
}
sub, sup {
    font-size: smaller
}
summary {
    cursor: pointer
}
summary::marker {
    cursor: pointer
}
.cellpadding-5 td {
    padding-right: 5px;
    padding-bottom: 5px
}
.postbox, .widefat, 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=time], input[type=url], select, textarea {
    border-width: 1px;
    border-style: solid
}
.postbox {
    border-bottom-width: 2px
}
.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
}
.widefat th a[href*=LO_dir]:after {
    font-family: monospace;
    font-size: larger;
    line-height: .5em;
    content: "\0000a0";
    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"
}
.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: 1.8em;
    height: 28px
}
.widefat.files td {
    padding: 1px 7px;
    font-weight: 400
}
.widefat tfoot th {
    border-bottom: none
}
.widefat th {
    overflow: hidden;
    font-weight: 400;
    line-height: 1.4em
}
.widefat td p {
    margin: 0 0 .8em
}
.list-wrapper {
    overflow-x: auto
}
.list, .list-nav {
    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: 1px solid #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=button], input[type=reset], input[type=submit] {
    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;
    white-space: normal;
    -webkit-appearance: none;
    word-break: normal
}
input[type=button], input[type=color], 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=time], input[type=url], 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
}
.list td:first-of-type label input[type=checkbox] {
    vertical-align: initial
}
.proper-date {
    white-space: nowrap;
    display: inline-block
}
.proper-date:first-letter {
    text-transform: capitalize
}
#menu form {
    padding: 0 6px
}
#menu-top span {
    padding-top: 3px
}
#menu-top .today-date {
    text-transform: capitalize
}
#menu-top .today-date, #menu-top .username {
    padding-left: 6px
}
.adminmenu, .wp-submenu {
    width: 100%;
    list-style: none
}
.adminmenu {
    clear: left;
    margin: 5px 0 0;
    padding: 0
}
.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: 1px 0;
    margin: 0;
    overflow: hidden;
    -webkit-transition: top 0s .15s, left 0s .15s, box-shadow 0s .15s;
    transition: top 0s .15s, left 0s .15s, box-shadow 0s .15s;
    box-shadow: none;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box
}
.adminmenu li {
    margin-bottom: 0
}
.menu-module {
    position: relative
}
.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: ""
    display:none;
}
.no-touch .menu-module:focus-within .wp-submenu {
    -webkit-transition-delay: .15s;
    transition-delay: .15s;
    z-index: 20;
    top: 0;
    left: 223px;
    width: 223px;
    overflow: visible;
    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: 223px;
    width: 223px;
    overflow: visible;
    word-wrap: break-word;
    min-height: 36px
}
#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;
    box-shadow: none
}
.menu-inter {
    background-color:#3b92de;
    text-transform:uppercase;
    font-size: 14px;
    padding: 4px 6px 2px 12px;
    margin-top: 2px;
    font-family:Outfit;
}

.adminmenu a {
    display: block;
    line-height: 18px;
    padding: 4px 6px
}
th{
    background-color:yellow;
}
.menu-top {
    font-size: 15px;
    min-width: 10em;
    text-transform: capitalize
}
#menu-top{
    position:sticky;
    top:0px;
    z-index:100;
    background-color:#3b92de;
    padding-top:10px;
    padding-bottom:10px;
}
.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: 700
}
.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 .h3multi, .postbox th h3 {
    -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: 400
}
.postbox .h3selected a {
    font-weight: 700
}
.postbox th h3, .postbox th h3 a, .postbox>thead th, .widefat tfoot tr th, .widefat th, .widefat th a, .widefat th label, .widefat th span {
    font-size: 14px;
}
.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
}
.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: 400
}
.highlight {
    padding: 3px 3px 3px 12px;
    margin-left: -12px;
    font-weight: 700;
    border: 0
}
.hide {
    display: none
}
.user-photo {
    max-width: 150px;
    max-height: 150px
}
th{
    background-color:#3b92de !important;
}
th a{
    color:white;
    font-family:Outfit;
    font-size:18px !important;
    text-transform:capitalize;
    font-weight:bold;
}

th a:hover{
   color:white !important;
}
.alignImg {
    vertical-align: middle;
    height: 25px;
}
.underline-dots .button {
    vertical-align: baseline;
    height: 16px
}
#body {
    padding: 0 15px 38px
}
.header {
    border-spacing: 0;
    width: 100%
}
.header1 h2 {
    font-size: 32px;
    font-family: Outfit;
    font-weight: bold;
    color: #29669b;
    margin: 0;
    padding: 16px 16px 16px 0
}
.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
}
#courses_div {
    background: #fff;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    right: 0;
    left: 0;
    display: none;
    max-height: 80px;
    overflow: auto;
    width: auto
}
.size-3 {
    font-size: 12px
}
.size-1 {
    font-size: 14px
}
.sizep1 {
    font-size: 16px
}
.sizep2 {
    font-size: 17px
}
div.underline-dots {
    display: inline-block;
}

.legend-gray, .legend-red, .onclick .checkbox-label,  #divuser_name .onclick .legend-gray{
    background-color:#e6e6e6;
    width:350px !important;
    border-style:solid;
    border-width:1px;
    border-color:silver;
    padding: 2px 5px 2px 5px;
    font-family:Outfit;
    font-size:18px !important;
    font-weight:450;
    cursor:default;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    margin-top:-5px;
    color: inherit; /* Ensure the text retains its original color */
}
.legend-red::before{
     content: '* ';
     color:red;
}

.list-outer.notes th{
    background-color:orange !important;
}
input[type="checkbox"]{
     width: 15px !important; /* Set the width */
  height: 15px !important;  /* Set the height */
  border-radius:3px;
    background-color:white;

}
table:has(form[name="search"]) {
border-color:purple;
background-color:white !important;
min-width:45vw;
    /* Your styl
input[type="checkbox"]:focus {
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 5px #4CAF50; /* Add green shadow for focus */
}
.checkbox-label{
    font-family:Outfit;
    font-weight:500;
    font-size:20px;
}

.underline-dots::-webkit-scrollbar{
    display:none;
}

#staffEMAIL{
    width:350px !important;
}

#divstudent_name input, #divstudent_name select, #divuser_name select, #divuser_name input{
    width:162px !important;
}
#student tbody tr.st td{
    background-color:white;
border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:silver;
    padding-top:10px;
    box-sizing: border-box;
    padding-right:10px;
    padding-left:10px;
}

#student tbody tr.st .legend-gray{
    margin-top:10px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    margin-bottom:-6px;
    width:102% !important;
    padding: 0px 0px 0px 0px;
    margin-left:-11px;
    padding-left:10px;
}

div[id$="POINTS"] .underline-dots {
    width:35px !important;
    text-align:center;
    padding:0px !important;
}

form[action^="Modules.php?modname=Grades/Grades.php"] th:not(:has(.h3multi)){
    /* Your styles here */
    /* Example: */
    background-color: #e8ffd9 !important;
            width:fit-content;
            position:sticky;
            top:0px;
}
thead{
            width:fit-content;
            position:sticky;
            top:0px;
}
.list-wrapper{
    max-height:80vh !important;
}
input[id$="POINTS"] {
    width:35px !important;
    text-align:center;
    border-bottom-width:1px !important;
    border-width:0px;
    background-color:transparent;
    padding:0px !important;
}
form[action^="Modules.php?modname=Grades/Grades.php"] th:not(:has(.h3multi)) a {
    color:black;
    font-family:sans-serif !important;
    font-weight:400;
        width:fit-content;
    width:100px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

td:not(.size-1):has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&assignment_id="]),
td:not(.size-1):has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&type_id="]),
td:not(.size-1):has(span.span-grade-points),
td:not(.size-1):has(div[id$="COMMENT"]),
td:not(.size-1):has(input[id$="COMMENT"]),
td:not(.size-1):has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&assignment_id=all"]),
th:has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&assignment_id="]),
th:has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&type_id="]),
th:has(span.span-grade-points),
th:has(div[id$="COMMENT"]),
th:has(input[id$="COMMENT"]),
th:has(a[href^="Modules.php?modname=Users/TeacherPrograms.php&include=Grades/Grades.php&assignment_id=all"]) {
    box-shadow: 0 0 0 0.5px black; /* Adjust the size and color as needed */
}

/* THIS HANDLES ATTENDANCE CODE COLORS */

td:nth-child(4) div.attendance-code.present input[type="radio"] {
    display: none; 
}

td:nth-child(4) div.attendance-code.present::after {
    content: 'P'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(4) div.attendance-code.present {
    background-color:#00ff00 !important;
    color:black !important;
}


td:nth-child(5) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(5) div.attendance-code.absent::after {
    content: 'NS'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(5) div.attendance-code.absent {
    background-color:lightgray !important;
    color:black !important;
}

td:nth-child(6) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(6) div.attendance-code.absent::after {
    content: 'A'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(6) div.attendance-code.absent {
    background-color:#ff0000 !important;
    color:white !important;
}

td:nth-child(7) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(7) div.attendance-code.absent::after {
    content: 'AU'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(7) div.attendance-code.absent {
    background-color:#cc0000 !important;
    color:white !important;
}

td:nth-child(8) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(8) div.attendance-code.absent::after {
    content: 'X'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(8) div.attendance-code.absent {
    background-color:#e69138 !important;
    color:white !important;
}

td:nth-child(9) div.attendance-code.present input[type="radio"] {
    display: none; 
}

td:nth-child(9) div.attendance-code.present::after {
    content: 'T'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(9) div.attendance-code.present {
    background-color:#ff3500 !important;
    color:white !important;
}

td:nth-child(10) div.attendance-code.present input[type="radio"] {
    display: none; 
}

td:nth-child(10) div.attendance-code.present::after {
    content: 'TE'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(10) div.attendance-code.present {
    background-color:#ffff00 !important;
    color:black !important;
}

td:nth-child(11) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(11) div.attendance-code.absent::after {
    content: 'A5'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(11) div.attendance-code.absent {
    background-color:#42a0de !important;
    color:white !important;
}

td:nth-child(12) div.attendance-code.absent input[type="radio"] {
    display: none; 
}

td:nth-child(12) div.attendance-code.absent::after {
    content: 'SR'; 
    display: inline; 
    margin-left: 5px; 
}
td:nth-child(12) div.attendance-code.absent {
    background-color:#0000ff !important;
    color:white !important;
}
/*THIS IS THE END OF THE ATTENDANCE CODE DICTIONARY*/

table tr td:first-child, table tr th:first-child {
    background-color:inherit;
    position:sticky;
    left:0px;
    border-right-width:1px !important;
    border-right-color:gray !important;
    border-right-style:solid !important;
}
thead{
    z-index:10 !important;
}
td{
    font-size:14px !important;
}




td:has(input[id$="POINTS"]:not(:placeholder-shown)) {
    background-color: #ffe3a6;
}
.thead-repeat {
    display: none; 
}
th[class^="list-column-code"] {
    width:200px;
    white-space:nowrap;
    text-overflow:ellipsis;
}
select {
    border-width:1px;
    border-style:solid;
}
#divstudent_name .legend-gray, #divuser_name .legend-gray{
    width:150px !important;
}

.underline-dots, tr.st td span.no-input-value, td input, td select, .tipmsg-label{
    display:inline-block;
    background-color:transparent;
    width:350px !important;
    border-style:solid;
    border-width:0px;
    border-bottom-width:0.5px;
    border-color:silver;
    padding: 10px 5px 10px 5px;
    white-space:nowrap;
    overflow:auto;
    cursor:text;
    font-family:Roboto;
    font-size:16px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
}

.tipmsg-label .legend-gray{
    margin-top:10px;
}
td input#studentsCUSTOM_200000013{
    width:350px !important;
}

td input{
    width:362px !important;
    font-family:Roboto;
    font-size:16px;
}

td select{
    width:362px !important;
    font-family:Roboto;
    font-size:16px;
    height:42px;
}

td select#monthSelect1, select#monthSelect2, select#monthSelect3, select#monthSelect4{
    width:200px !important;
}
td select#daySelect1 , select#daySelect2, select#daySelect3, select#daySelect4{
    width: 50px !important;
}
td select#yearSelect1, select#yearSelect2, select#yearSelect3, select#yearSelect4{
    width:110px !important;
}
tr.st td span.no-input-value{
    cursor:not-allowed !important;
}

td.header2.align-right input{
    background-color:#E6E6E6 !important;
    border-radius:5px !important;
    border-style:none !important;
    border-width:0px !important;
    width: 75px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
}
td.header2.align-right input.button-primary{
    background-color:#29669b !important;
    border-radius:5px !important;
    border-style:none !important;
    border-width:0px !important;
    width: 75px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
}
textarea {
    width: 100%;
    min-width: 280px;
    max-width: 1024px
}
.md-preview {
    min-width: 280px;
    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 .md-link {
    line-height: 26px;
    float: right
}
.md-preview>div {
    display: none;
    border-width: 1px 1px 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 {
    border-collapse: collapse;
    border-spacing: 0
}
.markdown-to-html td, .markdown-to-html th {
    border: 1px solid #bbb;
    padding: 5px
}
.markdown-to-html {
    line-height: 1.3
}
.list.widefat td .markdown-to-html {
    line-height: 1.236em
}
.legend-gray, .legend-red {
    font-size: 15px;
    margin-bottom: 12px;
    display: inline-block
}
td>.legend-gray:first-child {
    margin-bottom: 0
}
.logo {
    max-width: 100%;
    background-color:white;
    border-radius:5px;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
    max-height: 64px;
}
#menu .logo {
    margin-top: 4px
}
.onclick {
    cursor: pointer
}
div.onclick {
    display: inline-block;
    max-width: 100%
}
.cellspacing-0 {
    border-spacing: 0
}
.width-100p {
    width: 100%
}
.fixed-col {
    table-layout: fixed;
    word-wrap: break-word
}
.popTable {
    padding: 13px 11px
}
table.valign-top td, td.valign-top, tr.valign-top {
    vertical-align: top
}
table.valign-bottom td, td.valign-bottom, tr.valign-bottom td {
    vertical-align: bottom
}
table.valign-middle td, td.valign-middle, tr.valign-middle td {
    vertical-align: middle
}
.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: 8px
}
.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 {
    text-align: center;
    margin-top:10px;
}
a.center, span.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: none;
    padding: 0 12px
}
.br-after {
    display: block
}
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
}
.button {
    vertical-align: middle;
    height: 16px;
    max-width: none
}
.error .button, .updated .button {
    vertical-align: -12%
}
.error .button.bigger, .updated .button.bigger {
    vertical-align: -32%
}
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
}
.login .popTable td {
    padding-bottom: 16px
}
.login .popTable tr:last-of-type td {
    padding-bottom: 0
}
.BottomButton {
    margin-right: 8px;
    display: inline-block
}
.BottomButton span {
    vertical-align: top;
    text-transform: uppercase;
    font-size: 14px;
    padding-left: 4px;
    line-height: 32px
}
.BottomButton img {
    height: 24px;
    border-radius: 50%;
    padding: 3px
}
#BottomButtonMenu {
    height: 32px;
    line-height: 28px;
    float: left
}
#BottomButtonMenu:before {
    color: #000;
    background-color: #fff;
    content: "\2261";
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 21px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    padding: 3px;
    display: inline-block
}
.BottomButton.loading {
    float: right;
    padding-bottom: 13px
}
.BottomButton.hide {
    display: none
}
.loading {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: url('spinning.gif') center/contain no-repeat;
    visibility: hidden;
    padding-bottom: 0 !important
}
input+.loading {
    vertical-align: bottom;
    width: 26px;
    height: 26px
}
input[type=file] {
    padding: 0;
    max-width: calc(100% - 38px);
    height: 25px
}
.list.widefat input[type=file] {
    width: 220px
}
.bar {
    word-wrap: normal
}
div.st {
    float: left;
    padding: 4px
}
div.st>.list-outer {
    display: inline-grid
}
#student-comments {
    max-width: 100%;
    width: 500px
}
#student-comments span {
    font-size: 14px;
    color: #333
}
#student-comments div {
    background: #fff;
    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>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%
}
.calendar-event {
    height: 32px;
    font-size: 14px
}
.calendar-day td {
    max-width: 103px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.231
}
.calendar-day .bold {
    font-weight: 700
}
.calendar-day .number {
    font-size: 1.2em
}
.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
}
.legend-square {
    width: 32px;
    height: 32px;
    border-radius: 3px
}
#cboxContent {
    background: 0 0;
    padding: 0 0 8px 8px;
    margin-left: -8px;
    margin-right: 8px;
    box-sizing: border-box
}
.addon-readme {
    max-width: 1440px
}
.rt .link2colorBox {
    display: none
}
.divPortalPoll {
    max-height: 350px;
    overflow-y: auto;
    min-width: 300px
}
.divPortalPoll .widefat {
    margin-bottom: .8em
}
.widefat .divPortalPoll>p {
    margin-bottom: 2px
}
.span-grade-points {
    float: left
}
.grade-minmax-wrap {
    min-width: 120px
}
.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-grade, .grade-minmax-max, .grade-minmax-min {
    word-wrap: initial
}
.attendance-code {
    display: inline-block;
    padding: 2px 8px;
    min-width: 10px;
    text-align: center;
    line-height: 1.82
}
.arrow.right:before, .switchMenu:before {
    content: "\25b6\0000a0";
    vertical-align: 10%
}
.switchMenu.switched:before {
    content: "\25bc\0000a0"
}
.arrow, .switchMenu {
    display: inline-block
}
.switchMenu {
    padding: 5px
}
.chart {
    position: relative;
    width: calc(90vw - 205px);
    max-width: 1024px
}
#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: 400;
    text-transform: uppercase;
    font-size: 14px;
    vertical-align: middle
}
.tooltip {
    color: #fff;
    position: absolute;
    display: inline-block;
    margin-left: 5px;
    cursor: help;
    text-transform: none
}
.tooltip:before {
    content: "i";
    font-family: monospace;
    font-size: .85em;
    font-weight: 700;
    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: 110%;
    left: -90px;
    width: 180px;
    z-index: 999;
    display: inline-block;
    padding: 7px;
    transition: opacity .3s;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal
}
.tooltip:hover>i {
    visibility: visible;
    opacity: 1
}
.toggle {
    cursor: pointer
}
input[type=checkbox].toggle {
    position: absolute;
    left: -9999px
}
.toggle~.toggle-me {
    display: none
}
.toggle:checked~.toggle-me {
    display: block
}
.toggle:before {
    content: "\25b6\0000a0";
    vertical-align: 10%
}
.toggle:checked+.toggle:before {
    content: "\25bc\0000a0"
}
.minicolors {
    margin: 2px 2px 2px 0
}
.a11y-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px)
}
#footerwrap a.a11y-hidden:active, #footerwrap a.a11y-hidden:focus {
    clip: auto !important;
    position: absolute;
    text-decoration: underline;
    left: 9%
}
.first-login, .login, .password-reset {
    height: auto
}
.first-login #body, .login #body, .password-reset #body {
    padding: 64px 2px;
    margin-bottom: 0
}
.password-reset #body {
    padding-top: 0
}
.login .postbox, .password-reset .postbox {
    max-width: 320px
}
.create-account {
    padding: 0 2px
}
.ajax-error {
    position: fixed;
    top: 0;
    right: 0;
    padding: 11px;
    background-color: red;
    font-weight: 700;
    color: #fff;
    z-index: 100000;
    display: none
}
.tinymce {
    min-height: 200px
}
.mce-tinymce.mce-container {
    max-width: 1024px
}
.tinymce-horizontal .mce-tinymce.mce-container {
    max-width: 1448px
}
.mce-branding {
    display: none !important
}
.mce-tinymce.mce-fullscreen, .tinymce-horizontal .mce-tinymce.mce-fullscreen {
    max-width: none
}
.mce-btn-group .mce-btn {
    float: left
}
.markdown-to-html img, .tinymce-html img {
    height: auto
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, .select2-dropdown {
    border-radius: 0 !important
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
    border-bottom-width: 2px !important;
    min-height: 28px !important
}
.select2-container--default li {
    margin-bottom: 0
}
.select2-dropdown {
    z-index: 10051 !important
}
.chosen-select, .select2-select {
    min-width: 55px;
    padding-right: 15px
}
.select2-container {
    min-width: 55px
}
.chosen-select[multiple], .select2-select[multiple] {
    padding-right: 23px
}
.no-touch .phone-link {
    color: #333;
    cursor: default
}
.dashboard-module-title {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    margin: .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 .module-icon, .dashboard-module-title img {
    vertical-align: -30%;
}
.teacher-programs-wrapper {
    border-style: dashed;
    padding: 7px;
    width: 100%;
    margin-left: -9px
}
.password-input-wrapper {
    display: inline-block
}
.password-strength-bars {
    line-height: 5px;
    font-size: 5px
}
.password-strength-bars+br {
    display: none
}
.password-toggle {
    float: right;
    margin-left: -22px;
    margin-top: 5px;
    cursor: pointer;
    position: relative;
    margin-right: 3px;
    background: #fff
}
.password-hide {
    display: none
}
.password-strength-bars span {
    background-color: #ff4136;
    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-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 {
    margin-top: 126px
}
@media only screen and (max-width:1270px) {
    tr.address.st>td {
        float: left;
        width: 100%;
        box-sizing: border-box
    }
    tr.address>td {
        border-style: none none dotted;
        padding: 12px 0
    }
    tr.address>td:last-of-type {
        border-style: none
    }
}
@media only screen and (max-width:874px) {
    .wp-submenu a:hover {
        background: 0 0;
        color: #21759b
    }
    .mod {
        position: relative !important;
        float: none !important;
        clear: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0
    }
    #wrap {
        height: 100%
    }
    #footer {
        position: fixed !important;
        top: 0;
        bottom: auto
    }
    #footerhelp {
        border-width: 1px 0;
        border-style: solid
    }
    .BottomButton span {
        display: none
    }
    #menu .logo {
        max-width: 64px;
        max-height: 64px;
        margin: 5px;
        float: right
    }
    #menu {
        position: fixed !important;
        top: 39px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow-x: visible;
        overflow-y: scroll;
        padding-bottom: 0;
        min-height: auto;
    }
    .adminmenu {
        margin-bottom: 5px
    }
    .adminmenu a {
        padding: 2px 5px
    }
    #menu form, .wp-submenu a {
        padding: 5px
    }
    .menu-top img {
        height: 30px
    }
    #menu-top select {
        max-width: none
    }
    .no-touch .menu-module:hover .menu-top:after {
        content: ""
    }
    .no-touch .menu-module:hover .wp-submenu {
        top: -1000em
    }
    #body {
        width: auto !important;
        padding: 0 5px;
        box-sizing: border-box
    }
    .header1 h2 {
        font-size: 24px;
        line-height: 26px;
        padding-left: 36px;
        text-indent: -36px
    }
    .header2 .fixed-col {
        word-break: break-all
    }
    #LO_search, #search input, #search select {
        max-width: 150px
    }
    #LO_search {
        float: left
    }
    #LO_search+.button {
        left: -28px;
        float: left
    }
    #modulesBody textarea {
        width: 100% !important
    }
    .chart {
        width: 90vw;
        min-width: 450px
    }
    input[type=button], input[type=reset], input[type=submit] {
        margin: 0 4px
    }
    tr.st>td {
        float: left;
        width: 100%;
        box-sizing: border-box
    }
    table.col1-align-right>tbody>tr.st>td:first-child {
        text-align: left;
        border-bottom: none
    }
    table.col1-align-right>tbody>tr.st>td:nth-child(2) {
        border-top: none
    }
    .fixed-col {
        table-layout: auto
    }
    .fixed-col select {
        max-width: 340px
    }
    .divPortalPoll {
        min-width: 0
    }
    .tooltip::before {
        font-size: .9em;
        width: 20px;
        height: 20px;
        line-height: 20px
    }
    .tooltip>i {
        bottom: 150%;
        left: -70px;
        width: 140px;
        font-size: .9em;
        line-height: 1.4
    }
    .first-login, .login, .password-reset {
        padding: 32px 2px
    }
    .password-reset {
        padding-top: 0
    }
    .mce-container .mce-dropzone {
        height: 60px !important
    }
    .teacher-programs-wrapper {
        padding: .5%;
        width: 99%;
        margin-left: -.5%
    }
    #cboxLoadedContent {
        padding: 6px 8px !important
    }
}
@media only screen and (max-width:1023px) {
    #body {
        padding: 0 6px
    }
    .rbr {
        display: none
    }
    .rseparator {
        visibility: hidden
    }
    .rseparator:after {
        content: ' ';
        display: block
    }
    .rt {
        display: block;
        position: relative;
        width: 100%
    }
    .rt thead {
        display: block;
        float: left;
        max-width: 160px
    }
    .rt tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
        overscroll-behavior-y: none
    }
    .rt thead tr {
        display: block
    }
    .list.rt th, .rt th {
        display: block;
        line-height: 2.137em;
        height: 2.137em
    }
    .rt th, .rt th a {
        line-height: 2.137em;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .rt tbody tr {
        display: inline-block;
        vertical-align: top
    }
    .rt td {
        display: block;
        line-height: 1.87em;
        height: 1.87em
    }
    .rt img {
        max-height: 2em
    }
    .rt input, .rt select {
        margin: 0
    }
    .rt tr {
        border-right-width: 1px;
        border-right-style: solid
    }
    .rt input, .rt select, .rt textarea {
        max-width: 190px
    }
    .list.rt td, .list.rt th {
        padding: 6px 11px
    }
    .rt .link2colorBox {
        display: block
    }
    .rt .link2colorBox .colorboxinline {
        background: url('btn/visualize.png') 0 0/contain no-repeat;
        width: 24px;
        height: 24px;
        display: block
    }
    .rt2colorBox {
        overflow: auto
    }
    .widefat th a[href*=LO_dir] {
        padding-right: 0
    }
    .widefat td .rt2colorBox p {
        margin-top: 0
    }
    .rt .link2colorBox+.rt2colorBox {
        display: none
    }
    .rt div.error, .rt div.updated {
        padding: 0;
        margin: 0
    }
    .rt .thead-repeat {
        display: none
    }
    .divPortalPoll {
        max-height: none;
        overflow-y: visible
    }
    thead{
        border-top-left-radius:15px !important;
        border-top-right-radius:15px !important;
    }
    #calendar>thead>tr>th {
        font-size: 1em;
        line-height: 1.3;
        overflow: hidden;
        word-wrap: normal;
        padding: 4px
    }
    .calendar-day {
        position: relative;
        min-height: 48px
    }
    .calendar-day>table {
        display: block;
        width: inherit;
        z-index: 1
    }
    .calendar-day td {
        display: none
    }
    .calendar-day .hover:hover td, .calendar-day .number {
        display: table-cell
    }
    .calendar-day .number {
        font-size: 1em
    }
    .calendar-day .hover:hover {
        height: auto;
        min-width: 202px;
        min-height: 102px;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        background-color: inherit;
        box-shadow: 2px 2px 2px 1px #9f9f9f
    }
    .calendar-day.thu-fri-sat .hover:hover {
        right: 0;
        left: auto;
        box-shadow: -2px 2px 2px 1px #9f9f9f
    }
    .calendar {
        z-index: 10000
    }
    #courses_div {
        position: relative;
        width: 210px;
        float: right
    }
    .widefat th a[href*=LO_dir]:after, .widefat th a[href*=LO_dir]:hover:after {
        content: ""
    }
}
@media only screen and (max-width:479px) {
    .st>.align-right, .st>.center {
        text-align: left
    }
    .header2.align-right input[type=button], .header2.align-right input[type=reset], .header2.align-right input[type=submit] {
        margin: 0 16px 0 0
    }
    .calendar-day {
        height: 36px
    }
    .calendar-day .hover:hover {
        min-width: 177px;
        min-height: 78px
    }
    .fixed-col select, input, select {
        max-width: 260px
    }
    .teacher-programs-wrapper {
        padding: 1%;
        width: 98%;
        margin-left: -1%
    }
    .rt thead {
        max-width: 130px
    }
}
html[dir=RTL] #menu {
    float: right;
    border-width: 0 0 0 1px
}
html[dir=RTL] #BottomButtonMenu {
    float: right
}
html[dir=RTL] .wp-submenu {
    right: 0;
    left: auto;
    -webkit-transition: top, right;
    transition: top, right
}
html.no-touch[dir=RTL] .menu-module:focus-within .menu-top:after {
    left: 5px;
    right: auto
}
html.no-touch[dir=RTL] .menu-module:hover .menu-top:after {
    left: 5px;
    right: auto
}
html.no-touch[dir=RTL] .menu-module:focus-within .wp-submenu {
    right: 217px
}
html.no-touch[dir=RTL] .menu-module:hover .wp-submenu {
    right: 217px
}
html[dir=RTL] #selectedModuleLink+.wp-submenu, html[dir=RTL] #selectedModuleLink:after {
    right: 0;
    left: auto;
    display:none;
}
html[dir=RTL] .widefat td, html[dir=RTL] .widefat th {
    text-align: right
}
html[dir=RTL] div.st {
    float: right
}
html[dir=RTL] .tooltip>i {
    text-align: right
}
html[dir=RTL] .arrow.right:before, html[dir=RTL] .switchMenu.switched:before, html[dir=RTL] .switchMenu:before, html[dir=RTL] .toggle:before {
    content: "\25c0\0000a0"
}
html[dir=RTL] input[type=checkbox].toggle {
    right: -9999px
}
html[dir=RTL] .span-grade-points {
    float: right
}
html[dir=RTL] .login form input[type=password], html[dir=RTL] .login form input[type=text] {
    margin-left: 6px;
    margin-right: 0
}
html[dir=RTL] .align-right, html[dir=RTL] .align-right td, html[dir=RTL] table.col1-align-right>tbody>tr>td:first-child, html[dir=RTL] td.align-right, html[dir=RTL] th.align-right {
    text-align: left
}
html[dir=RTL] #LO_search+.button {
    left: 24px
}
html[dir=RTL] #LO_search {
    padding-right: 2px;
    padding-left: 28px
}
@media only screen and (max-width:1023px) {
    html[dir=RTL] .calendar-day .hover:hover {
        right: 0
    }
    html[dir=RTL] .calendar-day.thu-fri-sat .hover:hover {
        left: 0;
        right: auto
    }
}
@media only screen and (max-width:874px) {
    html[dir=RTL] .header1 h2 {
        padding-left: 0;
        padding-right: 42px
    }
}