/* ===========================================================================
   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;

  /* Text of a submitted or pending session for a non-Medicaid (NM) student on Review
     Sessions, and the legend key that explains it - the same two places, the same
     reason as above. It was the keyword DarkGrey (#a9a9a9, contrast 2.35 on white),
     which failed the 4.5 minimum (PENDING O38). This passes 4.5 on white, the zebra
     stripe, the hover fill and the unsubmitted fill, and stays clearly lighter than
     the black of a Medicaid student's row, which is the distinction it carries. */
  --brand-row-nonmedicaid: #5c6675;
}

.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: var(--brand-row-nonmedicaid);
}
.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;
  }
}

.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 */
}