/* ===========================================================================
   ONWARD SHARS Medicaid - palette
   ---------------------------------------------------------------------------
   THE single source of colour truth for the whole application. Every rule below
   references these variables; do not reintroduce raw hex values.

   Blue is the primary. The legacy EPIC scheme used orange as the action colour
   and a mid-blue for headings; both are now mapped onto this scale, so a brand
   tweak is a one-line edit here.

   Which token to use where:

     --brand-navy        primary buttons, nav, toolbar and footer bands, page
                         headings. The default for anything structural.
     --brand-navy-dark   hover/active state of any navy fill.
     --brand-blue        links, icons, secondary emphasis, sub-nav. Use when
                         navy would be too heavy for inline text.
     --brand-blue-soft   large tinted areas, table heads, panel fills.
     --brand-amber       accent only: heading rules, badges, and at most ONE
                         call-to-action per screen. Never body text -- it fails
                         contrast on white.
     --brand-amber-dark  hover state of any amber fill.
     --brand-amber-soft  row/area wash where yellow carries meaning, e.g. the
                         assigned list on Edit Caseload.
     --brand-danger      errors and destructive actions ONLY.

   Deliberate change of meaning: orange used to serve as BOTH the button colour
   and the error colour (.message, .bigMessage, .description .red), so an error
   was indistinguishable from a call to action. Errors are now red and actions
   are navy.
   =========================================================================== */
:root {
  --brand-navy: #0b3d77;
  --brand-navy-dark: #092f5c;
  --brand-blue: #1665a8;
  --brand-blue-soft: #eaf1f8;
  --brand-amber: #f5a623;
  --brand-amber-dark: #dc9114;
  --brand-amber-soft: #fdf7d8;
  --brand-danger: #c0392b;

  --brand-ink: #2d3748;
  --brand-muted: #6b7c93;
  --brand-line: #d9e2ec;

  /* Zebra stripe on data rows. Lighter than --brand-blue-soft, which is the hover
     fill: a stripe the same weight as the hover state makes hovering invisible. */
  --brand-row-alt: #fafcfe;

  /* The "not yet submitted" row fill on Review Sessions. Named here because it is used
     in two places that must agree and cannot share a rule: `SavedSessions/index.php`
     writes it inline per row from JS, and `onward.css` paints the legend key that
     explains it. They had already drifted - the legend was written twice, `#E3E5E7`
     above the grid and `lightgrey` below it, neither matching the other. */
  --brand-row-unsubmitted: #E3E5E7;
}

.column {
  display:inline-block;
}
.ui-jqgrid {
	z-index:9;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  margin:auto;
}
/* min-height, not height, on body. With `height:100%` the body is capped at the
   viewport, so #wrapper (flex:1 0 auto) fills it and the footer is then pushed
   PAST the bottom -- the page ends up scrollable by exactly the footer's height
   on otherwise short pages. min-height lets the body grow to fit both. */
html {
height: 100%;
}
body {
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: 'Quicksand', sans-serif;
font-weight: 500 !important;
}
/* body is `display:flex; flex-direction:column`, so #wrapper and #footer are its
   flex items. Letting #wrapper grow pins the footer to the bottom on short pages
   without any JS measuring -- the old footHeight script existed only to fake this.
   Restoring the (previously commented-out) flex-grow is what makes it work. */
#wrapper {
flex: 1 0 auto;
}
/* The fallback matters and its absence was a real defect, not a tidy-up.
   `body` declares `'Quicksand', sans-serif` while this declared bare `'Quicksand'`
   with `!important`, so the two resolved through different stacks and rendered the
   same string at different widths - measured 64.02px against 59.44px for one pager
   button's label, at identical font-size, weight and transform. The `!important`
   also meant no stylesheet could correct it: `onward.css` carries a
   `font-family: inherit` on `.ui-jqgrid` that had never applied. */
.ui-widget {
font-family: 'Quicksand', sans-serif !important;
font-size: 1em;
background-color:#FFF;
font-weight: 500 !important;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.border{
border:"1";
cell-padding:"1";
cell-spacing:"1";
}
.calendar{
	font-size:11.5px;
	font-family: 'Quicksand', sans-serif;
	text-transform: uppercase;
	font-weight: 500;
}
.add-date-box{
	background-color: #f0f4f7;
	margin-top: 10px;
}	
.dates{
	font-size:12px;
}
.date-desc {
	font-size: 12px;
	margin-top: 10px;
	text-align: center;
	font-weight:bold;
}		
.opsel {
	width:auto;
	display:inline-block;
	margin-right:3px;
}
.badge1 {
   position:relative;
}
.badge1[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-35px;
   font-size:1em;
   background:var(--brand-amber);
   color:white;
   width:23px;height:20px;
   text-align:center;
   padding-left:10px;
   line-height:20px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
   font-family:Quicksand;
   font-weight:bold;
}
/*slideshow for the training page*/
#slideshow {/*slider container css*/
width: 680px;
height: 430px;
overflow: hidden;
margin: 50px auto 50px auto;
box-shadow: 0px 0px 50px #333;
-moz-box-shadow: 0px 0px 50px #333;
-webkit-box-shadow: 0px 0px 50px #333;
}
#slideshow ul {/*manage slider scroll elements css*/
width: 600px;
list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {/* Slider navigation container css */
width: 600px;
margin: auto 65px auto;
}
#slideshow-nav ul {
list-style: none;
}
#slideshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {/* navigation styling css */
display: block;
width: 20px;
height: 20px;
float: left;
margin: 0 5px;
background: #fff;
text-indent: -9999px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
background: #333;
}
.training-link {
	font-size: 12px;
	font-weight: bold;
	color: var(--brand-blue);
	text-decoration: none;
	margin-left:10px;
	text-transform:uppercase;
}
.report-button{
text-decoration:none;
margin-bottom:15px !important;
color:white;
width:200px;
display:inline-block;
font-weight:bold;	
	text-transform:uppercase;
}
#training-guide-link {
	font-size: 12px;
	font-weight: 500;
	color: var(--brand-blue);
	text-decoration: none;
	text-transform:uppercase;
}
.training-link:hover, #training-guide-link:hover{
	text-decoration: underline;
	text-decoration-color: var(--brand-blue);
}
.training-label {
	font-size: 12px;
	color: black;
}
#video:hover {
	text-decoration: underline;
	text-decoration-color: var(--brand-blue);

}
.content h5 {
	margin: 10px auto auto auto;
	font-family: 'Quicksand';
	font-size: 14px;
	font-weight: bold;
	display: flex;
	text-align:center
}
.content h6 {
	margin: 20px auto auto auto;
	font-family: 'Quicksand';
	font-size: 12px;
	font-weight: bold;
	color: var(--brand-navy);
	display: flex;
	text-transform:uppercase;
}
.message{
color: var(--brand-danger);
font-weight: 600;
font-size: 12px;
display: inline-block;
padding-top: 15px;
line-height:1.5;
}
.ptEightEm{
font-size:.8em;
}
.bigMessage{
color: var(--brand-danger);
font-weight: 500;
margin-top: -10px;
font-size: 12px;
display: inline-block;
line-height:1.5;
padding-bottom:10px;
}
.ui-pg-selbox, #last_pager, #next_pager, #prev_pager, #first_pager, 
#first_t_list_toppager, #prev_t_list_toppager, #next_t_list_toppager, #last_t_list_toppager {
	background-color:white;
}
/* The disabled paging arrows are styled in includes/css/onward.css, alongside the
   enabled ones, so the two states are defined next to each other and cannot drift.
   This rule used to force the SAME navy fill a live button has, with `!important`, so
   an arrow that could not be clicked looked exactly like one that could - measured all
   eight arrows on a one-page grid at rgb(9,47,92) with no difference from enabled. */
.nongrid-form{
	font-size: 12px;
}
.post-label{
	display:inline-block !important;
	width:70% !important;	
}
.inline{
	display:inline-block;
	font-family:Quicksand;
}
.secondHeader{
	margin-top:-20px !important;
	z-index: 999;	
}
.ui-dialog.dialog-border{
	border-width: 1px;
	border-color: #a6a9ac;	
}
.ui-selectmenu-menu .ui-menu {
	max-height: 200px;
}
/* these are all about making the grid line elements all the same height and minimizing the size of the line */
.ui-jqgrid-view button{
/*    margin-bottom: 18px;*/
    height: 22px;	
    vertical-align: middle;	
}
.datepicker-btn {
	height:22px;
	margin-top:0px;
}
[id$='_svc'] {   
	height:22px;
}
.ui-jqgrid .ui-jqgrid-view button[id$='_stud_ms'] {   
	max-width:145px;
	margin-top:0px;
}
.ui-jqgrid .ui-jqgrid-view button[id$='_stud_ms'] span:nth-child(2) {
	overflow-x:hidden;
	display:block;
	max-width:125px;
}
.ui-jqgrid .ui-jqgrid-view button[id$='_act_ms'] {   
	max-width:96px;
	margin-top:0px;	
}
.ui-jqgrid .ui-jqgrid-view button[id$='_act_ms'] span:nth-child(2) {
	overflow-x:hidden;
	display:block;
	max-width:85px;
}
.ui-helper-reset {
 	width:450px;
	background-color:white;
	overflow-x:hidden;	
	max-height:200px !important;
	height:auto !important;
	border-color:#a6a9ac;
	border-style:solid;
	border-width:1px;
}
.Quicksand{
	font-family:Quicksand;
	font-weight: 500;
}
.hover{
	cursor:pointer;
}
.form-quarter{
	width: 25%;
	display:inline-block;
	margin-bottom:5px;
	float:left;
	margin-right: 2%;
}
.form-left-half{
	width: 49%;
	display:inline-block;
	margin-bottom:5px;
	float:left;
	/*this is for the captcha box*/
	min-width:306px; 
}
.form-right-half{
	width: 49%;
	display:inline-block;
	margin-bottom:5px;
	float:right;
	/*this is for the captcha box*/	
	min-width:306px;
}
.subhead{
	font-size: 13px;
	font-weight: 500;
	margin-bottom:5px;
	display:inline;
	line-height:1.5;	
}
.label {
	margin-top:15px;
}
.link {
font-size: 11px;
font-weight: bold;
color: var(--brand-blue);
text-decoration: none;
}
.link:hover {
text-decoration: underline;
	text-decoration-color: var(--brand-blue);
}
.ui-dialog-titlebar-close {
	visibility:hidden;
}
.ui-dialog-title {
	font-size:14px;
	color:var(--brand-navy);
}
.bold td {
	font-weight : bold !important;
}
.bold {
	font-weight : bold !important;
}
.upper {
	text-transform : uppercase;
}

.center {
	align:center;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.pad-right {
	margin-right:10px;
}
.pad-right-50 {
	margin-right:50px;
}
.pad-right-30 {
	margin-right:50px;
}
.pad-left {
	margin-left:10px;
}
.pad-left-30 {
	margin-left:30px;	
}
.pad-left-50 {
	margin-left:50px;
}
.pad-left-80 {
	margin-left:80px;
}
.pad-top {
	margin-top:15px;
}
.pad-bottom {
	margin-bottom:15px;
}
.pad-bottom-small{
	padding-bottom:8px !important;
}
.gray {
	background-color:#f3f3f3 !important;
}
.white {
	background-color:white !important;
}
#toolbar {
width: 100%;
height: 19px;
background-color: #0b3d77;
}
#toolbar-links {
box-sizing: border-box;
width: 1100px;
margin: 0 auto;
padding: 0;
color: #ffffff;
font-size: 11px;
text-align: center;
}
#toolbar-notify {
float: none;
box-sizing: border-box;
padding: 8px 0 5px;
display: inline-block;
width: 100%;
font-size: 11px;
background-color: var(--brand-amber);
color: #FFEA00;
height: 28px;
text-align: center;
margin-top:-35px;
z-index:100;
}
#toolbar-toggle {
display: none;
}
/* Padding, not #toolbar's height, is what actually sizes the bar once a user is
   logged in -- these buttons are its only content. Halved along with the height
   so the logged-in bar matches the logged-out one. */
.top-button {
display: inline-block;
margin-left: 25px;
padding: 4px 0 3px;
}
.top-button:first-child {
margin-left: 0;
}
.top-button.top-select {
padding-top: 0;
}
.top-button a {
color: #ffffff;
}
.top-button a:hover {
color: #f0f4f7;
}
.top-button b {
font-size: 12px;
}
.top-button .fa {
margin-right: 4px;
}

.chkAll-button {
	width: 60px;
    height: 32px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    display: inline-block !important;
}
#toolbar .ui-selectmenu-button.ui-button {
height: 10px;
padding: 4px 4px 4px 8px;
margin: -2px 0 0 4px;
width: auto;
}
#toolbar .ui-selectmenu-icon.ui-icon {
margin-top: -3px;
}
ul#practSpoof-menu {
	width:250px;
}
.ui-menu .ui-menu-item {
font-size: 11px;
}
.ui-menu .ui-menu-item-wrapper:hover {
background-color: #fcf6bb;
}
#header {
box-sizing: border-box;
width: 1100px;
margin: 0 auto;
padding: 20px 0 15px;
background-color: #ffffff;
}
#epic-logo {
width: 294px;
height: auto;
max-height: 86px;
}
#header-links {
float: right;
margin: 20px 0 30px;
}
.header-column {
position: relative;
display: inline-block;
margin-left: 30px;
}
.sub-column {
position: absolute;
z-index: 99;
display: none;
}
.sub-column.sub-show {
display: block;
}
/* Navy, not the legacy EPIC orange (#e9482d), to match the Onward palette.
   Changed here rather than globally: var(--brand-blue) appears 32 times in this file and is
   still the accent for buttons, .message text, .link and grid affordances on every
   other screen -- a blanket replace would recolour the whole app. */
.header-button {
display: block;
padding: 10px;
font-family: 'Quicksand';
font-weight: bold;
font-size: 14px;
text-decoration: none;
background-color: #ffffff;
color: #0b3d77;
}
.header-sub-button {
display: block;
width: 100%;
padding: 10px;
font-family: 'Quicksand';
font-weight: bold;
font-size: 12px;
text-decoration: none;
background-color: #f0f4f7;
color: var(--brand-navy);
border-top: 2px solid #ffffff;
position: relative;  /* <-- added declarations */
z-index:9999;
}
/* Navy fill on the active/hovered nav item, matching .header-button's new colour
   and the toolbar/footer bands. Was var(--brand-navy), the old EPIC mid-blue. */
.header-button.active,
.header-button:hover,
.header-sub-button:hover,
.header-column:hover .header-button {
background-color: #0b3d77;
color: #ffffff;
}
.header-button .fa {
display: none;
}
#menu,
#menu-close {
display: none;
}
#content-frame {
width: 100%;
box-sizing: border-box;
padding: 0px 50px 50px 50px;
/*background-image: url('images/bluebonnets.jpg');*/
background-image: url('../images/epic-bkg-gray2.png');
background-size:auto;
}
.content-header {
display: table;
min-height: 50px;
width: 100%;
text-align:center;
max-width: 1200px;
margin: auto;
}
.content-header a {
color: var(--brand-blue);
font-weight:bold;
text-decoration: none;
}
.content-header a:hover {
text-decoration: underline;
}
.content-header i {
margin-right:5px;	
}
.content {
display: table;
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: #ffffff;
}
.content.tier-one {
display: flex;
}
.content.tier-two {
display: table;
}
/* Bottom padding was 60px here, then overridden to 40px for `.account` and 26px for
   Contact Us, so the same card component ended with three different tails - measured
   61px of empty white under the PAR panel against 41px on My Account and 27px on
   Contact Us. 40px is the value the two most-used screens already settled on; the
   overrides that set it are now redundant rather than corrective. */
.content.account,
.content.caseload,
.content.review,
.content.sessions,
.content.log-in {
box-sizing: border-box;
padding: 20px 25px 40px;
}
.content h1 {
margin: 20px 0;
font-family: 'Quicksand';
font-size: 24px;
font-weight: 500;
color: var(--brand-navy);
display: flex;
}
.content h1 .fa {
margin-right: 8px;
}
.content h1:after {
content: '';
flex: 1;
margin: auto 0 auto 10px;
height: 0;
border-top: solid #b0b0b3 1px;
}
.content-panel {
display: table-cell;
width: 25%;
padding: 40px 20px 60px;
border-right: 1px solid #cccccc;
text-align: center;
box-sizing: border-box;
}
.content-panel:last-child {
/*width: 34%;*/
border-right: none;
}
.content-panel:hover {
background-color: #f3f3f3;
}
.content-panel h2 {
margin: 30px 0 15px;
font-size: 18px;
font-weight: 500;
font-family: 'Quicksand';
color: var(--brand-navy);
text-align: center;
}
.content-panel .view-options {
display: none;
}
.content-panel ul {
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
line-height: 18px;
}
.content-panel li {
margin-top: 10px;
padding-left: 12px;
text-indent: -12px;
font-weight: bold;
color: #393939;
text-align: left;
}
.content-panel li a {
margin-left: 5px;
color: var(--brand-blue);
text-decoration: none;
}
.content-panel li a:hover {
text-decoration: underline;
}
.fontawesome-icon.circle-yes {
height: 120px;
width: 120px;
border-radius: 50%;
background-clip: inherit;
border-width: 2px;
border-style: solid;
border-color: #000000;
background-color: #ffffff;
font-size: 60px;
line-height: 120px;
color: var(--brand-navy);
text-align: center;
}
.alert .fontawesome-icon.circle-yes {
/*background-color: #e9482d;
color: #ffffff;*/
}
.top-details {
box-sizing: border-box;
padding: 8px 18px 6px;
width: 100%;
font-size: 11px;
background-color: #f0f4f7;
}
.top-details.center-details {
text-align: center;
}
.top-details b {
font-size: 12px;
color: var(--brand-navy);
}
.top-details span.hilight {
font-size: 12px;
color: var(--brand-navy);
}
.top-details .ui-selectmenu-button.ui-button {
height: 14px;
margin: -3px 18px 0 6px;
}
.top-details .ui-selectmenu-text {
margin-top: 2px;
}
.top-detail {
display: inline-block;
}
.ui-icon.white { 
background-image: url(images/ui-icons_ffffff_256x240.png);
}
.account-panel {
width: 22%;
padding: 20px 30px;
margin-right: 4% !important;
float: left;
border: 1px solid #e5e5e5;
box-sizing: border-box;
}
.account-panel:last-child {
margin-right: 0;
}
.account-panel h2,
#add-student h2 {
margin: 20px 0 0;
font-size: 19px;
font-family: 'Quicksand';
font-weight: 500;
color: var(--brand-navy);
}
.account-panel h3 {
margin: 5px 0 2px;
font-size: 12px;
}
.account-panel h3 a {
color: var(--brand-blue);
text-decoration: none;
}
.account-panel h3 a:hover {
text-decoration: underline;
}
#add-student {
text-align: center;
}
#add-student h3 {
margin: 6px 0 4px;
font-size: 12px;
font-weight: bold;
color: var(--brand-navy);
text-transform: uppercase;
}
#add-student .description span {
color: var(--brand-danger);
}
#add-student-box {
background-color: #f0f4f7;
display: inline-block;
margin-top: 10px;
padding: 20px 100px;
}
#add-student-form input[type="text"] {
display: block;
box-sizing: border-box;
width: 300px;
margin-bottom: 5px;
padding: 6px 10px 4px;
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form input[type="text"]::-webkit-input-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form input[type="text"]::-moz-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form input[type="text"]:-ms-input-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form input[type="text"]:-moz-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form input[type="text"]::-webkit-input-placeholder::after {
content: "*";
color: var(--brand-blue);
}
#add-student-form input[type="checkbox"] {
display: inline-block;
box-sizing: border-box;
margin-bottom: 5px;
font-size: 6px;
font-family: 'Quicksand';
color: #000000;
}
#add-student-form #polabel {
display: inline-block;
box-sizing: border-box;
margin-bottom: 6px;
padding: 6px 10px 4px;
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
#shars-services {
margin-top: 10px;
}
#shars-text {
display: inline-block;
font-size: 11px;
margin-left: 12px;
color: var(--brand-navy);
float: left;
}
#shars-text span {
color: var(--brand-blue);
}
#shars-inputs {
display: inline-block;
font-size: 11px;
float: right;
}
#shars-inputs label {
margin-left: 5px;
margin-right: 10px;
}
#shars-inputs label:last-child {
margin-right: 0;
}
#add-student-form input[type="submit"] {
margin: 20px 0 0;
padding: 6px 8px 4px;
background-color: var(--brand-navy);
border-radius: 4px;
border: none;
font-size: 11px;
font-weight: bold;
font-family: 'Quicksand';
color: #ffffff;
cursor: pointer;
}
#add-student-form input[type="submit"]:hover {
background-color: var(--brand-navy-dark);
}
#select-service-button {
width: auto;
}
.input-form {
width: 100%;
margin: 30px 0;
font-size: 11px;
}
.input-form input[type="text"] {
height: 26px;
border: 2px solid #f3f3f3;
margin-top: -1px;
width: 100%;
box-sizing: border-box;
}
.input-form input[type="text"].input-mm-dd-yyyy {
width: calc(100% - 15px);
}
.input-row {
float: left;
}
.input-column {
float: left;
margin-top: 2px;
border-right: 1px solid #ffffff;
box-sizing: border-box;
}
.input-column:last-child {
border-right: none;
}
.input-column .ui-selectmenu-button.ui-button {
height: 24px;
width: 100%;
box-sizing: border-box;
}
.input-head {
background-color: var(--brand-navy-dark);
height: 30px;
padding: 9px 6px 0;
box-sizing: border-box;
color: #ffffff;
font-family: 'Quicksand';
text-align: center;
}
.input-head.stacked {
padding: 4px 6px;
}
.input-head.second-head {
display: none;
}
.input-body {
height: 44px;
padding: 10px 8px;
box-sizing: border-box;
background-color: #f0f4f7;
text-align: center;
font-weight: 500;
}
/* `height: 22px` with `padding: 6px` and `border-box` leaves a 10px content box, but
   the icon glyph's line box is 18.85px - so the content overflowed the bottom instead of
   centring. Measured: the lock and trash icons sat 9px below the top edge and flush
   against the bottom, the EDIT/ADD labels 3px low.
   Centred with flex rather than by tuning the padding, so the box holds whatever the
   glyph or label actually needs. */
.input-button, .ui-dialog-buttonset button {
color: #ffffff !important;
background-color: var(--brand-navy);
min-height: 22px;
padding: 3px 6px;
box-sizing: border-box;
border-radius: 3px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.dialog-text {
	height:23px;
	padding-left:5px;
}
/* `flex`, not `block`: these were `display: block` so the glyph inside could not be
   centred vertically. Kept block-level (rather than inline-flex) because the grid's
   action cells stack these one per cell and relied on the block behaviour. */
.input-button {
	display: flex;
}
.ui-dialog-buttonset button {
	display: inline-flex;
}
.input-button:hover {
background-color: var(--brand-navy-dark);
}
.block{
display: block;
}
#button-comments {
text-align: center;
}
.input-button-row .input-button, .ui-dialog-buttonset button {
float: left;
margin-right: 20px;
font-size: 11px;
font-weight: 700;Su
}
.input-body .ui-selectmenu-text {
margin-top: 2px;
}
.ui-menu .ui-menu-item {
	font-size: 11px;
}
.input-body .fa-plus,
.input-body .fa-sort-amount-desc,
.input-body .fa-repeat {
margin-top: 6px;
color: var(--brand-blue);
font-size: 14px;
}
.desc {
font-size: 12px;
line-height: 14px;
}
.report-desc {
font-size: 12px;
line-height: 18px;
font-weight:500;
}
#login-form {
float: left;
width: 37%;
margin-right: 3%;
}
.log-in input[type="text"],select,textarea,input[type="password"] {
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 15px;
padding: 6px 10px 4px;
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
-webkit-text-fill-color:#000000;
}
.log-in textarea {
height: 172px;
}
.log-in input[type="text"]::-webkit-input-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
.log-in input[type="text"]::-moz-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
.log-in input[type="text"]:-ms-input-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
.log-in input[type="text"]:-moz-placeholder {
font-size: 12px;
font-family: 'Quicksand';
color: #000000;
}
.log-in .button, .button {
margin: 15px 10px 0 0;
padding: 8px 8px 6px;
background-color: var(--brand-navy);
border-radius: 4px;
border: none;
font-size: 12px;
font-weight: bold;
font-family: 'Quicksand';
color: #ffffff;
cursor: pointer;
}
.log-in .button:hover, .button:hover {
background-color: var(--brand-navy-dark);
}
.button-disabled {
cursor: not-allowed;
pointer-events: none;
background-color: #a9a9a9;
margin: 15px 10px 0 0;
padding: 8px 8px 6px;
border-radius: 4px;
border: none;
font-size: 12px;
font-weight: bold;
font-family: 'Quicksand';
color: #ffffff;
}
#forgot-password {
font-size: 11px;
font-weight: bold;
color: var(--brand-blue);
text-decoration: none;
}
#forgot-password:hover {
text-decoration: underline;
}
#new-provider {
float: left;
box-sizing: border-box;
width: 60%;
padding: 20px;
background-color: #f0f4f7;
}
#new-provider h2 {
margin: 5px 0;
font-size: 18px;
font-weight: 500;
font-family: 'Quicksand';
color: var(--brand-navy);
}
/* --- Footer: Onward navy band ---------------------------------------------
   A full-width navy band with an amber top rule, support contact details on the
   left and the utility links on the right. Applies to every screen.

   Note the width: the old footer was a centred 1100px column, so it did not
   line up with the full-bleed #content-frame above it. This one spans the
   viewport and constrains its CONTENT instead, which is why #footer-inner
   exists. */
#footer {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
font-size: 13px;
position: relative;
background-color: #0b3d77;
border-top: 4px solid #f5a623;
color: #ffffff;
font-family: 'Quicksand';
/* `display:flow-root` establishes a block formatting context so the band always
   wraps its content. It also makes the height immune to the legacy inline
   `height` the old footer script used to stamp on this element -- that script
   ran from a <script> placed AFTER </body>, so on a cached or slow load it could
   fire before layout settled and pin the band to a few pixels. min-height keeps
   the band a sensible size even if the contact block fails to render. */
display: flow-root;
height: auto !important;
min-height: 104px;
/* As a flex item of <body> the band would otherwise shrink; 0 0 auto keeps it at
   its content height while #wrapper takes the free space. */
flex: 0 0 auto;
}
/* width:100% + box-sizing keeps the horizontal padding INSIDE the 1300px cap.
   Without it the padding is added on top of max-width and the page gains a
   horizontal scrollbar at viewports just above 1300px. */
#footer-inner {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 24px 50px 18px;
}
#footer-contact {
display: flex;
align-items: center;
gap: 16px;
}
#footer-contact-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border: 2px solid rgba(255,255,255,0.55);
border-radius: 50%;
font-size: 20px;
color: #ffffff;
}
#footer-contact-title {
margin-bottom: 3px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
color: #f5a623;
}
#footer-contact-detail a {
display: block;
font-size: 13px;
line-height: 1.55;
color: #ffffff;
text-decoration: none;
}
#footer-contact-detail a:hover {
text-decoration: underline;
}
/* The old footer used #tsbs-logo; the markup no longer emits it, but the rule is
   kept harmless in case a stale cached page still references it. */
#tsbs-logo {
display: none;
}
#footer-text {
float: left;
margin: 10px 0 0 20px;
}
#footer-links {
display: flex;
align-items: center;
gap: 0;
}
/* Labels stay uppercase as authored (TRAINING / USER GUIDE / CONTACT US) so that
   anything reading this text is unaffected. No text-transform: `capitalize` is a
   no-op on already-uppercase text, and faking sentence case via ::first-letter
   only reaches the first word ("User guide"). Slightly wider tracking at a small
   size is what carries the design here. */
#footer-links a {
float: none;
margin: 0;
padding: 0 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: #ffffff;
text-decoration: none;
border-left: 1px solid rgba(255,255,255,0.35);
}
#footer-links a:first-child {
border-left: none;
}
#footer-links a:hover {
color: #ffffff;
text-decoration: underline;
}
/* box-sizing is required here: the base rule for this id is `width:100%` and the
   band adds 50px of horizontal padding, which without border-box makes the
   element 100% + 100px and gives the whole PAGE a horizontal scrollbar. */
#footer-tag {
box-sizing: border-box;
float: none;
width: 100%;
margin: 0;
padding: 0 50px 18px;
font-size: 11px;
font-style: normal;
text-align: center;
color: rgba(255,255,255,0.75);
}
#live-chat {
display: none;
position: absolute;
bottom: 0;
right: 40px;
padding: 25px 50px;
background-color: #000000;
color: #ffffff;
border-radius: 10px 10px 0 0;
}
#chat-icon {
float: left;
}
#chat-text {
float: left;
margin: 12px 0 0 15px;
}
#chat-big {
font-size: 18.5px;
font-family: 'Quicksand';
}
#chat-small {
font-size: 11px;
line-height: 16px;
}
.fontawesome-icon.circle-yes.fa-comments {
height: 60px;
width: 60px;
border-width: 0;
font-size: 30px;
line-height: 60px;
}

/* jqGrid */
th.ui-th-column div{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px
white-space: 500 !important;
height: auto !important;
padding: 2px;
}
.nobr {
white-space: nowrap;
}
.ui-tooltip.ui-widget-content {
font-size: 12px;
background-color: #fcf6bb;
border: none;
border-radius: 0;
box-shadow: none;
}
#multiselect-container {
margin-left: auto;
margin-right: auto;
width: 880px;
height: 202px;
border: 1px solid var(--brand-navy);
margin-bottom: 30px;
}
.multiselect {
display: block;
width: 880px;
height: 200px;
}
.uix-multiselect.ui-widget {
margin-bottom: 30px;
}
.multiselect-available-list {
width: 440px !important;
left: 0 !important;
height: 201px !important;
}
.multiselect-selected-list {
width: 440px !important;
left: 440px !important;
height: 201px !important;
}
.uix-multiselect .ui-widget-header {
background-color: var(--brand-navy-dark);
padding: 6px 8px;
border: none;
border-radius: 0;
}
.uix-multiselect .ui-widget-header div.header-text {
font-family: 'Quicksand';
padding: 8px;
font-size: 12px;
color: #ffffff;
text-transform: uppercase;
display: inline-block !important;
}
.uix-multiselect .uix-list-container {
/*height: 160px !important;*/
}
.uix-multiselect .option-element {
background-color: var(--brand-row-alt);
padding: 6px 16px 6px;
font-size: 12px;
border-color: #ffffff;
border-style: solid;
border-width: 0 0 2px 0;
}
.uix-multiselect .option-element:hover {
background-color: var(--brand-blue-soft);
}
/* Selected activities were `#fcf6bb`, a legacy yellow and the only yellow surface left
   in the app - it read as a highlighter mark rather than as "assigned".

   Carried by a navy rule down the leading edge rather than by a fill, so it stays
   distinct from the hover state: giving selection the soft-blue fill would make it the
   same colour as hover, and hovering a selected row would then show no feedback at all.
   The 3px rule is taken out of the left padding so the text does not shift when a row
   becomes selected. */
.uix-multiselect .option-element.option-selected {
border-left: 3px solid var(--brand-blue);
padding-left: 13px;
font-weight: 600;
color: var(--brand-navy);
}
.uix-multiselect .ui-widget-header .uix-control-right, .uix-multiselect .ui-widget-header .uix-control-left {
border: none;
height: auto;
padding: 7px 10px;
background-color: var(--brand-navy);
color: #ffffff;
font-weight: bold;
font-size: 11px;
}
.uix-multiselect .ui-widget-header .uix-search {
height: 16px;
width: 180px !important;
margin-right: 13px;
padding: 3px 8px;
border-radius: 0;
font-size: 11px;
font-family: 'Quicksand';
color: #000000;
position: relative;
background-color: #ffffff;
/*background-image: url("images/search.png");*/
background-repeat: no-repeat;
background-size: 21px;
background-position: right 6px center;
}
.uix-multiselect .ui-widget-header .uix-search::-webkit-input-placeholder {
font-size: 11px;
font-family: 'Quicksand';
color: #000000;
}
.uix-multiselect .ui-widget-header .uix-search::-moz-placeholder {
font-size: 11px;
font-family: 'Quicksand';
color: #000000;
}
.uix-multiselect .ui-widget-header .uix-search:-ms-input-placeholder {
font-size: 11px;
font-family: 'Quicksand';
color: #000000;
}
.uix-multiselect .ui-widget-header .uix-search:-moz-placeholder {
font-size: 11px;
font-family: 'Quicksand';
color: #000000;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button,
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {
background-color: var(--brand-navy);
text-transform: uppercase;
font-size: 11px;
padding: 0 8px;
}
#list_toppager_left,
#list_toppager_right,
#pager_left,
#pager_right {
width: 25% !important;
}
#list_toppager_center,
#pager_center {
width: 50% !important;
}
#list_toppager_right,
#pager_right {
padding: 0 5px 0 1px;
}
.ui-jqgrid tr.ui-row-ltr td {
text-align: center;
}
#year-select {
margin-bottom: 10px;
text-align: center;
font-size: 11px;
text-transform: uppercase;
}
#list_toppager,
#pager {
background-color: var(--brand-navy-dark);
color: #ffffff;
border: 0;
}
#loading {
    display: inline-block;
    font-size: 6em;
    height: 1em;
    line-height: 1;
    margin: 115px;
}

.ui-jqgrid .ui-state-default.ui-th-column, tr.ui-search-toolbar{
background-color: #f0f4f7 !important;
font-family: 'Quicksand';
font-weight: bold;
font-size: 10px !important;
text-transform: uppercase;
}
.ui-widget input.grid-button, .ui-dialog-buttonset button {
background-color: var(--brand-navy);
color: #ffffff;
border: 0;
/* Same complete stack as `.ui-widget` above - a bare family renders at a different
   width from the `body` declaration, which is what put two copies of one pager
   button 5px apart. */
font-family: 'Quicksand', sans-serif !important;
text-transform: uppercase;
font-size: 11px !important;
border-radius: 3px;
width: 90px !important;
height: 32px !important;
padding: 4px 2px;
}
.grid-button.delete-button {
width: 57px;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: 5px 0 5px 5px;
float: left;
background-color: var(--brand-navy);
color: #ffffff;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
background-color: var(--brand-navy-dark);
color: #ffffff;
}
.ui-button:hover {
border: none;
}
.ui-jqgrid tr.jqgrow td {
height: auto;
padding: 4px 4px 3px 4px;
border-color:#a6a9ac;
}
#gview_list .ui-widget-content {
background-color: #ffffff;
/*color: #e9482d;*/
border: 1px solid #a6a9ac;
    padding: 3px 0px 4px 2px;
}

.description {
font-size: 12px;
margin-top: 10px;
text-align: center;
}
.desc-left {
font-size: 12px;
margin-top: 10px;
margin-left:10px;
text-transform:uppercase;
text-align: left;
}
.desc-select {
width:150px !important;
display:inline-block;
margin-right:10px;
margin-top:2px;
}
.description .green {
color: green;
}
.orange {
color: orange;
}
.blue {
color: var(--brand-navy);	
}
.DarkGrey {
color: DarkGrey ;
}
.disabled {
	background-color:#f3f3f3 !important;
	pointer-events:none;	
}
.disabledHead {
	background-color: DarkGrey !important;
	pointer-events:none;	
}
.description .red {
color: var(--brand-danger);
}
.description .gray {
padding: 4px;
color: var(--brand-navy);
background-color: #f3f3f3;
}
#gview_list .ui-widget-content.ui-state-highlight {
background-color: #fcf6bb;
}
.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-input,
.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-jqgrid-pager .ui-pg-input {
padding: 3px 2px 2px;
text-align: center;
border-radius: 0;
margin: 0 3px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button,
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {
font-size: 9px;
font-weight: bold;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button:hover,
.ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager .ui-pg-button:hover,
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button:hover,
.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager .ui-pg-button:hover {
background-color: #ffffff;
color: var(--brand-navy);
border: none;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button .fa,
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button .fa {
font-size: 11px;
padding-right: 3px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager .ui-pg-button,
.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager .ui-pg-button {
background-color: var(--brand-navy-dark);
text-align: center;
padding: 0 6px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager .ui-pg-button .fa,
.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager .ui-pg-button .fa {
font-size: 14px;
padding-right: 00000;
}
.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager .ui-separator,
.ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager .ui-separator {
display: none;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control {
height: auto;
}
.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager, .ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager,
.ui-jqgrid .ui-jqgrid-pager .navtable, .ui-jqgrid .ui-jqgrid-toppager .navtable {
border-collapse: separate;
border-spacing: 5px;
}
.ui-multiselect-menu.ui-widget.ui-widget-content,
.ui-multiselect.ui-widget.ui-state-active {
z-index: 3000000000;
}

@media (max-width: 1200px) {
#toolbar-links {
width: 100%;
padding: 0 50px;
}
.top-button {
margin-left: 30px;
}
#header {
width: 100%;
padding: 20px 50px 15px;
}
#footer {
width: 100%;
padding: 0;
}
}

@media (max-width: 1100px) {
#toolbar-links {
padding: 0 20px;
}
.top-button {
margin-left: 20px;
}
#content-frame {
padding: 25px;
}
.account-panel {
width: 48%;
}
.account-panel:nth-child(3) {
margin-right: 0;
}
.account-panel:nth-child(4),
.account-panel:last-child {
/*margin-top: 20px;*/
}
#live-chat {
display: none;
}
.input-row {
margin-bottom: 10px;
}
.input-column {
margin-top: 4px;
}
.input-head.second-head {
display: block;
}
}
@media (max-width: 940px) {
#toolbar {
height: auto;
min-height: 24px;
}
#toolbar-links {
margin: 0;
padding: 0;
}
.top-button {
display: none;
margin: 0;
width: 100%;
background-color: #434444;
padding: 12px;
box-sizing: border-box;
border-top: 1px solid #616161;
text-align: center;
}
.top-button .fa {
font-size: 11px;
}
#toolbar-links.toggle-open .top-button {
display: block;
}
.top-button.top-select {
padding: 8px 12px;
}
#toolbar .ui-selectmenu-button.ui-button {
height: 12px;
padding: 3px 1em;
}
#toolbar .ui-selectmenu-icon.ui-icon {
margin-top: -2px;
}
#toolbar-toggle {
box-sizing: border-box;
display: block;
padding: 8px;
width: 100%;
text-align: center;
font-size: 11px;
}
#toolbar-toggle a {
color: #ffffff;
text-decoration: none;
}
#toolbar-toggle a span {
text-decoration: underline;
}
#toolbar-toggle .fa {
margin-right: 4px;
font-size: 11px;
}
#toolbar-toggle .fa-times {
display: none;
}
#toolbar-links.toggle-open #toolbar-toggle {
padding: 12px;
}
#toolbar-links.toggle-open #toolbar-toggle .fa-times {
display: inline-block;
}
#toolbar-links.toggle-open #toolbar-toggle .fa-bars {
display: none;
}
#header {
padding: 20px 35px 15px;
}
#header.open-menu {
padding: 0;
}
#header.open-menu #epic-logo,
#header.open-menu #menu-button {
display: none;
}
#header-links {
display: none;
width: 100%;
margin: 0;
}
#header.open-menu #header-links {
display: block;
border-bottom: 2px solid #ffffff;
}
.header-column,
.sub-column {
position: relative;
display: block;
width: 100%;
margin-left: 0;
}
.header-button,
.header-sub-button,
.header-button:hover,
.header-sub-button:hover,
.header-column:hover .header-button {
display: block;
width: 100%;
margin: 0;
background-color: var(--brand-navy);
font-size: 11px;
font-family: 'Quicksand';
padding: 12px;
box-sizing: border-box;
border-top: 1px solid var(--brand-navy-dark);
text-align: center;
color: #ffffff;
text-transform: uppercase;
}
#menu-close {
background-color: var(--brand-navy);
}
.header-button .fa {
display: inline;
margin-right: 4px;
font-size: 11px;
}
#menu {
display: block;
margin-top: 15px;
float: right;
color: var(--brand-blue);
font-size: 12px;
}
#menu .fa {
font-size: 38px;
}
#menu span {
color: var(--brand-navy);
}
#menu-close {
display: block;
}
}

@media (max-width: 980px) {
#multiselect-container,
.multiselect,
.uix-multiselect.ui-widget {
width: 100% !important;
height: 440px;
box-sizing: border-box;
}
#multiselect-container {
height: 442px;
}
.multiselect-available-list,
.multiselect-selected-list {
width: 100% !important;
height: 220px !important;
}
.multiselect-selected-list {
left: 0 !important;
top: 220px !important;
}
.uix-multiselect .uix-list-container {
height: 180px !important;
}
}

@media (max-width: 700px) {
.input-button-row {
text-align: center;
}
.input-button-row .input-button {
display: inline-block;
float: none;
margin-right: 10px;
}
.input-button-row .input-button:last-child {
margin-right: 0;
}
}

@media (max-width: 600px) {
#header {
padding: 20px;
}
#epic-logo {
width: 70%;
height: auto;
}
#menu {
margin-top: 6px;
}
.content-panel,
.content-panel:last-child {
display: block;
text-align: left;
padding: 30px 20px 30px 40px;
width: 100%;
border-right: none;
border-bottom: 1px solid #cccccc;
}
.content-panel:last-child {
border-bottom: none;
}
.fontawesome-icon.circle-yes {
height: 80px;
width: 80px;
border-radius: 50%;
background-clip: inherit;
border-width: 2px;
border-style: solid;
border-color: #000000;
background-color: #ffffff;
font-size: 40px;
line-height: 80px;
color: var(--brand-navy);
text-align: center;
}
.content-panel .content-head {
display: inline-block;
margin: 20px 0 0 10px;
text-align: left;
vertical-align: sub;
}
.content-panel h2 {
display: block;
margin: 0 0 10px;
vertical-align: middle;
}
.content-panel .view-options {
display: block;
color: var(--brand-blue);
font-size: 12px;
cursor: pointer;
}
.content-panel ul {
font-size: 16px;
margin: 30px 20px 0;
display: none;
}
.content-panel ul.list-options.show-options {
display: block;
}
.account-panel,
.account-panel:last-child {
width: 100%;
margin: 20px 0 0;
}
.account-panel h3 {
font-size: 16px;
}
#login-form {
width: 100%;
margin-right: 0;
}
#new-provider {
width: 100%;
margin-top: 40px;
}
/* Narrow screens: stack the contact block above the links and centre both. */
#footer-inner {
flex-direction: column;
align-items: center;
gap: 18px;
padding: 22px 24px 14px;
text-align: center;
}
#footer-contact {
flex-direction: column;
gap: 10px;
}
#footer-links {
flex-wrap: wrap;
justify-content: center;
}
#footer-tag {
padding: 0 24px 16px;
}
.input-button-row .input-button {
margin-bottom: 10px;
height: auto;
width: 40%;
}
.input-button-row .input-button:nth-child(2) {
margin-right: 0;
}
#add-student-box {
padding: 20px;
display: block;
}
#add-student-form input[type="text"] {
width: 100%;
}
}

@media (max-width: 530px) {
.uix-multiselect .ui-widget-header .uix-search {
width: 145px !important;
}
}

@media (max-width: 500px) {
#top-details {
padding: 4px 18px 2px;
}
.top-detail {
display: block;
margin: 12px 0;
}
.multiselect-selected-list .ui-button span,
.multiselect-available-list .ui-button span {
display: none;
}
}

@media (max-width: 440px) {
.uix-multiselect .ui-widget-header .uix-search {
width: 100px !important;
}
}

@media (max-width: 400px) {
.uix-multiselect .ui-widget-header .uix-search {
width: 70px !important;
}
#shars-text {
display: block;
margin-left: 0;
float: none;
}
#shars-inputs {
display: block;
margin-top: 6px;
float: none;
}
}

@media (max-width: 360px) {
.content-panel {
padding: 20px 15px;
}
.content-panel .content-head {
margin: 20px 0 0 5px;
}
#shars-text {
display: block;
margin-left: 0;
float: none;
}
#shars-inputs {
display: block;
float: none;
}
}

/* Create Sessions Forms */

#input-form-therapy .plus,
#input-form-therapy .edit {
width: 3%;
}
#input-form-therapy .mm-dd-yyyy {
width: 7%;
}
#input-form-therapy .students,
#input-form-therapy .service-code {
width: 14%;
}
#input-form-therapy .type-qual,
#input-form-therapy .activity {
width: 10%;
}
#input-form-therapy .start-time,
#input-form-therapy .stop-time,
#input-form-therapy .iep-goal {
width: 7%;
}
#input-form-therapy .minutes {
width: 6%;
}
#input-form-therapy .comments {
width: 12%;
}
#input-form-service .plus,
#input-form-service .edit {
width: 3%;
}
#input-form-service .mm-dd-yyyy {
width: 9%;
}
#input-form-service .students,
#input-form-service .service-code {
width: 15%;
}
#input-form-service .start-time,
#input-form-service .stop-time,
#input-form-service .iep-goal,
#input-form-testing .qualify {
width: 8%;
}
#input-form-service .minutes {
width: 7%;
}
#input-form-service .activity {
width: 11%;
}
#input-form-service .comments {
width: 13%;
}
#input-form-care .plus,
#input-form-care .edit {
width: 3%;
}
#input-form-care .mm-dd-yyyy {
width: 7%;
}
#input-form-care .students,
#input-form-care .service-code {
width: 14%;
}
#input-form-care .start-time,
#input-form-care .stop-time,
#input-form-care .pcare-time,
#input-form-care .billable-time {
width: 8%;
}
#input-form-care .other-time {
width: 12%;
}
#input-form-care .activities {
width: 15%;
}

@media(max-width: 1100px) {
#input-form-therapy .plus,
#input-form-therapy .edit {
width: 6%;
}
#input-form-therapy .mm-dd-yyyy {
width: 14%;
}
#input-form-therapy .students,
#input-form-therapy .service-code {
width: 30%;
}
#input-form-therapy .type-qual,
#input-form-therapy .activity {
width: 20%;
}
#input-form-therapy .start-time,
#input-form-therapy .stop-time {
width: 13%;
}
#input-form-therapy .minutes {
width: 12%;
}
#input-form-therapy .iep-goal {
width: 15%;
}
#input-form-therapy .comments {
width: 21%;
}
#input-form-service .plus,
#input-form-service .edit {
width: 6%;
}
#input-form-service .mm-dd-yyyy {
width: 18%;
}
#input-form-service .students,
#input-form-service .service-code {
width: 30%;
}
#input-form-service .start-time,
#input-form-service .stop-time,
#input-form-service .iep-goal,
#input-form-service .qualify {
width: 16%;
}
#input-form-service .minutes {
width: 14%;
}
#input-form-service .activity {
width: 22%;
}
#input-form-service .comments {
width: 26%;
}
#input-form-care .plus,
#input-form-care .edit {
width: 7%;
}
#input-form-care .mm-dd-yyyy {
width: 15%;
}
#input-form-care .students,
#input-form-care .service-code {
width: 30%;
}
#input-form-care .start-time,
#input-form-care .stop-time {
width: 18%;
}
#input-form-care .pcare-time,
#input-form-care .billable-time,
#input-form-care .other-time {
width: 15%;
}
#input-form-care .activities {
width: 30%;
}
}

@media(max-width: 700px) {
#input-form-therapy .plus,
#input-form-therapy .edit {
width: 11%;
}
#input-form-therapy .mm-dd-yyyy {
width: 23%;
}
#input-form-therapy .students,
#input-form-therapy .service-code {
width: 33%;
}
#input-form-therapy .type-qual,
#input-form-therapy .activity {
width: 40%;
}
#input-form-therapy .start-time,
#input-form-therapy .stop-time,
#input-form-therapy .minutes {
width: 20%;
}
#input-form-therapy .iep-goal {
width: 23%;
}
#input-form-therapy .comments {
width: 26%;
}
#input-form-service .plus,
#input-form-service .edit {
width: 11%;
}
#input-form-service .mm-dd-yyyy {
width: 23%;
}
#input-form-service .students,
#input-form-service .service-code {
width: 33%;
}
#input-form-service .start-time,
#input-form-service .stop-time,
#input-form-service .minutes {
width: 20%;
}
#input-form-service .iep-goal,
#input-form-service .qualify {
width: 23%;
}
#input-form-service .activity {
width: 40%;
}
#input-form-service .comments {
width: 66%;
}
#input-form-care .plus,
#input-form-care .edit {
width: 11%;
}
#input-form-care .mm-dd-yyyy {
width: 23%;
}
#input-form-care .students,
#input-form-care .service-code {
width: 33%;
}
#input-form-care .start-time,
#input-form-care .stop-time,
#input-form-care .pcare-time,
#input-form-care .billable-time,
#input-form-care .other-time {
width: 25%;
}
#input-form-care .activities {
width: 64%;
}
}

@media (max-width: 500px) {
#input-form-therapy .plus,
#input-form-therapy .edit {
width: 10%;
}
#input-form-therapy .mm-dd-yyyy {
width: 25%;
}
#input-form-therapy .students {
width: 65%;
}
#input-form-therapy .service-code {
width: 60%;
}
#input-form-therapy .type-qual {
width: 40%;
}
#input-form-therapy .start-time,
#input-form-therapy .stop-time {
width: 35%;
}
#input-form-therapy .minutes {
width: 30%;
}
#input-form-therapy .activity {
width: 70%;
}
#input-form-therapy .iep-goal {
width: 30%;
}
#input-form-therapy .comments {
width: 90%;
}
#input-form-service .plus,
#input-form-service .edit {
width: 10%;
}
#input-form-service .mm-dd-yyyy {
width: 25%;
}
#input-form-service .students {
width: 65%;
}
#input-form-service .service-code {
width: 50%;
}
#input-form-service .start-time,
#input-form-service .stop-time {
width: 25%;
}
#input-form-service .minutes,
#input-form-service .iep-goal,
#input-form-service .qualify {
width: 30%;
}
#input-form-service .activity {
width: 70%;
}
#input-form-service .comments {
width: 60%;
}
#input-form-care .plus,
#input-form-care .edit {
width: 10%;
}
#input-form-care .mm-dd-yyyy {
width: 25%;
}
#input-form-care .students {
width: 65%;
}
#input-form-care .service-code {
width: 50%;
}
#input-form-care .start-time,
#input-form-care .stop-time {
width: 25%;
}
#input-form-care .pcare-time,
#input-form-care .billable-time {
width: 33%;
}
#input-form-care .other-time {
width: 34%;
}
#input-form-care .activities {
width: 90%;
}
}
@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}
#overlay {
    position: fixed;
    left: -100%;
    top: 0;
	width:100%;
    height:auto;
    background-color:#FFF;
    transition: 1s;
	z-index: 999;
}

#overlay_content {
    padding: 2em
}

#close_o {
    position: absolute;
    top: 1em;
    right: 1.5em
}

.ui-jqgrid .ui-jqgrid-sortable span.s-ico {
    display: inline-block !important; /* Ensure visibility */
    float: left; /* Position to the left */
    margin-right: 5px; /* Add some spacing between icon and text */
}