/*@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');*/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


/*   *{
        margin:0;
        padding:0;
       font-family: 'Roboto', sans-serif;
  }
*/
  

/*
html {
  height: 100%;
  color: #3C3C3B;
}*/

/* ==============================================================
    clearfix
================================================================= */
.clearfix {
  overflow: auto;
}

/* ==============================================================
    Sane box model
================================================================= */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}


/* ==============================================================

    General Purpose Infinitely Nestible Grid Micro-framework

      Based on display inline and the belief that media 
      breakpoints should be defined based on page content 
      vs devices.  See additional comments below for more 
      on what this means in practice.

      Very much inspired by (but not a copy of) Dead Simple Grid:
        https://github.com/mourner/dead-simple-grid

================================================================= */

/* 
 *   Both rows and cols are inline-block.  
 *   Needed for nesting to of grids to work.
 */

.row, 
.col,
.cols { 
  display: inline-block; 
  font-size: 0.95rem;
  width: 100%; 
}

/*
 *  Handle the space problem associated with inline-block grids
 *  via setting font size to zero.  The trade-off with this approach
 *  is that cols must reset font sizes.  1 rem is chosen as a reasonable
 *  default but be aware of the need to "reset" font sizes inside the grid
 *  elements if the document location requires it.
 *
 *  The beauty of an inline-block grid system: text-align justify.
 *  gutters just work since the browser handles rounding.
 */

.row { 
  font-size: 0; 
  text-align: justify; 
}

.row:after { 
  content: ""; 
  display: inline-block; 
  width: 100%; 
}


/*
 *   cols need to "reset" the properties the grid utilizes:
 *
 *   font size: see note above re the set to zero. 
 *   test-align: since the justify magic would cascade down
 *
 *   Note that cols are padded right/left.  
 *   Adjust this with the px* classes as needed.
 */
.col,
.cols { 
  vertical-align: middle; 
/*  font-size: 0.80rem;*/
  text-align: left; 
  padding: 0 1em; 
}

/* ==============================================================
       Alternating Color Grid and Highlighting
================================================================= */

.grid .row:nth-of-type(odd){
   background-color:#f3f3f3;
}   

.grid.odd .row:nth-of-type(odd){
   background-color:#f3f3f3;
}

.grid.even .row:nth-of-type(even){
   background-color:#f3f3f3;
}



.hovHighlight:hover {
    background-color: rgba(0,119,119,.9)  !important; 
}


/* ==============================================================
    Positioning
================================================================= */

/* 
 *    pull-* classes 
 *       should be applied directly to the element to be positioned 
 *
 *       Remember that an inline-block element, since it behaves as an inline element 
 *       with respect to the outside world is positioned based on its wrapper (ie via just-*
 *       classes).  Block elements internal to the inline-block element will be positioned via 
 *       the pull-* classses due to the internal block scope created by inline-block.
 */

.pull-left, .pullLeft{ float: left; }

.pull-right, .pullRight{ float: right; }

.pull-center, .pullCenter{
    display: table;
    margin: auto
}

/* 
 *    just-* (justify) classes 
 *       Must be applied to a wrapper element to position elements inside it.
 *       The wrapper element must provide a box context (ie block, inline-block...) 
 *
 *       Remember that an inline-block element, since it behaves as an inline element 
 *       with respect to the outside world is positioned based on its wrapper (ie via just-*
 *       classes).  Block elements internal to the inline-block element will be positioned via 
 *       the pull-* classses due to the internal block scope created by inline-block.
 */

.just-left, .justLeft{ text-align: left; }

.just-right, .justRight{ text-align: right; }

.just-center, .justCenter{ text-align: center; }



.vtop, .vTop{ vertical-align: top; }
.v-middle, .vMiddle{ vertical-align: middle; }
.v-bottom, .vBottom{ vertical-align: bottom; }
.v-baseline, .vBaseline{ vertical-align: baseline; }





/* ==============================================================
    Margins and Padding Classes
================================================================= */

.mt2 { margin-top: 2em; }
.mb2 { margin-bottom: 2em; }
.ml2 { margin-left: 2em; }
.mr2 { margin-right: 2em; }

.mt1 { margin-top: 1em; }
.mb1 { margin-bottom: 1em; }
.ml1 { margin-left: 1em; }
.mr1 { margin-right: 1em; }

.mt7s { margin-top: 0.7em; }
.mb7s { margin-bottom: 0.7em; }
.ml7s { margin-left: 0.7em; }
.mr7s { margin-right: 0.7em; }

.mt5s { margin-top: 0.5em; }
.mb5s { margin-bottom: 0.5em; }
.ml5s { margin-left: 0.5em; }
.mr5s { margin-right: 0.5em; }

.mt3s { margin-top: 0.3em; }
.mb3s { margin-bottom: 0.3em; }
.ml3s { margin-left: 0.3em; }
.mr3s { margin-right: 0.3em; }

.mt2s { margin-top: 0.2em; }
.mb2s { margin-bottom: 0.2em; }
.ml2s { margin-left: 0.2em; }
.mr2s { margin-right: 0.2em; }

.mt1s { margin-top: 0.1em; }
.mb1s { margin-bottom: 0.1em; }
.ml1s { margin-left: 0.1em; }
.mr1s { margin-right: 0.1em; }




.pt2 { padding-top: 2em; }
.pb2 { padding-bottom: 2em; }
.pl2 { padding-left: 2em; }
.pr2 { padding-right: 2em; }

.pt1 { padding-top: 1em; }
.pb1 { padding-bottom: 1em; }
.pl1 { padding-left: 1em; }
.pr1 { padding-right: 1em; }

.pt7s { padding-top: 0.7em; }
.pb7s { padding-bottom: 0.7em; }
.pl7s { padding-left: 0.7em; }
.pr7s { padding-right: 0.7em; }

.pt5s { padding-top: 0.5em; }
.pb5s { padding-bottom: 0.5em; }
.pl5s { padding-left: 0.5em; }
.pr5s { padding-right: 0.5em; }

.pt3s { padding-top: 0.3em; }
.pb3s { padding-bottom: 0.3em; }
.pl3s { padding-left: 0.3em; }
.pr3s { padding-right: 0.3em; }
     
.pt2s { padding-top: 0.2em; }
.pb2s { padding-bottom: 0.2em; }
.pl2s { padding-left: 0.2em; }
.pr2s { padding-right: 0.2em; }

.pt1s { padding-top: 0.1em; }
.pb1s { padding-bottom: 0.1em; }
.pl1s { padding-left: 0.1em; }
.pr1s { padding-right: 0.1em; }


/* ==============================================================
    colors
================================================================= */

.orange { color: #D56939 !important; }
.bg-orange, .bgOrange { background-color: #D56939 !important; }


.yellow { color: #efba08 !important; }
.bg-yellow, .bgYellow { background-color: #efba08 !important; }


.red { color: #860038 !important; }
.bg-red, .bgRed { background-color: #860038 !important; }

   
.purple { color: #69287d !important; }
.bg-purple, .bgPurple { background-color: #69287d !important; }

/*formerly blue*/
.cyan { color: #00416D !important; }
.bg-cyan, .bgCyan { background-color: #00416D !important; }

/*formerly dark-blue*/
.blue, .Blue { color: #00416D !important; }
.bg-blue, .bgBlue { background-color: #00416D !important; }


.green { color: #92C83E !important; }
.bg-green, .bgGreen { background-color: #92C83E !important;  }

.dark-green, .darkGreen { color: #008000 !important; }
.bg-dark-green, .bgDarkGreen { background-color: #008000 !important; }

.light-green, .lightGreen { color: #B2D157 !important;  }
.bg-light-green, .bgLightGreen { background-color: #B2D157 !important;  }


.cream { color: #FFFAD5 !important; }
.bg-cream, .bgCream { background-color: #FFFAD5 !important; }

.white { color: #FFFFFF !important; }
.bg-white, .bgWhite { background-color: #FFFFFF !important; }


.light-grey, .lightGrey { color: #f6f6f6 !important; }
.bg-light-grey, .bgLightGrey { background-color: #f6f6f6 !important; }

.grey { color: #75787B !important; }
.bg-grey, .bgGrey { background-color: #75787B !important; }



/* ============================================================
       Borders and Lines
===============================================================  */

.bottom-border-dotted, .bottomBorderDotted { border-bottom: 1px dotted #ddd; }

.bottom-border-solid, .bottomBorderSolid { border-bottom: 1px solid #ccc;  }

.underline { border-bottom: 1px solid #1B3663; }



/* ============================================================
       Corners:
===============================================================  */

.round-1, .round1 { border-radius: 1px; }
.round-2, .round2 { border-radius: 2px; }
.round-3, .round3 { border-radius: 3px; }
.round-4, .round4 { border-radius: 4px; }
.round-5, .round5 { border-radius: 5px; }
.round-6, .round6 { border-radius: 6px; }
.round-7, .round7 { border-radius: 7px; }
.round-8, .round8 { border-radius: 8px; }
.round-9, .round9 { border-radius: 9px; }
.round-10, .round10 { border-radius: 10px; }



/* ==============================================================
    Shapes
================================================================= */

.circle {
   border-radius: 50%;
   display: inline-block;
}
.circle.small {
   width: 15px;
   height: 15px
}


.triangle {
      display: inline-block;
      vertical-align: text-top;
      width: .5em;
      height: 1em;
      border-bottom: solid .5em transparent;
      border-top: solid .5em transparent;
    }

.cyan.triangle { border-left: solid .5em #00b1bd;  }
.white.triangle { border-left: solid .5em hsl(0, 0%, 100%); }
.black.triangle { border-left: solid .5em #000; }

.down.triangle {
    border-left: solid .5em transparent;
    border-right: solid .5em transparent;
    border-top: solid .5em #000;
    border-bottom: solid .5em transparent;
}

.up.triangle {
    border-left: solid .5em transparent;
    border-right: solid .5em transparent;
    border-top: solid .5em transparent;
    border-bottom: solid .5em #000;
}



/* ==============================================================
    validation 
================================================================= */
 .validationMessage { color: Red; }   
 .customMessage { color: Orange; }



/* ==============================================================
    Misc Fine-Tuning
================================================================= */

.relative { position: relative; }

.block { display: block; }
.inlineBlock { display: inline-block; }

.cPointer { cursor: pointer; }

.hide { display: none;}
.not-visible, .notVisible { visibility: hidden; }

.faded, fade2 { opacity: 0.2; }
.fade4 { opacity: 0.4; }

.h-50, .h50 { height: 50px; }
.h-100, .h100 { height: 100px; }
.h-150, .h150 { height: 150px; }
.h-200, .h200 { height: 200px; }
.h-250, .h250 { height: 250px; }



/* ==============================================================
    Buttons 
================================================================= */
button {
  outline: 0;
  text-decoration: none;
  padding: 0.4em 1.9em;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: .1rem;
  color: #555;
  background-color: #ddd;
  border: 1px solid #bbb;
  cursor: pointer;
  border-radius: 10px;
}

button:hover,
button:focus {
  color: #333;
  border-color: #333;
}

button.dark:hover,
button.dark:focus {
  color: #333;
  border-color: #eee;
}

button.small {
  padding: 0.2em 0.9em;
  font-size:.65em
}

button.large {
  padding: 0.6em 1.9em;
  font-size:.95em
}

.buttonDisable {
     opacity: 0.5;
   }

/* ==============================================================
    Header, Footer and Containers
================================================================= */

/* Header 
 *   Use class sticky to make it sticky
 *
 *      Note: background must be set otherwise it may inherit transparent and
 *                 page content can be seen through it during scroll
 *
 */
  header {
     width:100%;
     background:#fff;
     border-top: 5px solid #1B3663;
     border-bottom: 0;
     height: 70px; 
     z-index: 7;
     top:0;
  }


/* Footer 
 *
 *   For a sticky footer:
 *
 *     add class page-panel to footer and main
 *     add class page-panel-extended to main
 *
 *   Use class sticky to make it sticky stay visible even on full pages
 * 
 */
  footer {
     color: #444;
     background:#eee;
     border-bottom: 10px solid #1B3663;
     border-top: 1px solid #1B3663;
     height: 2em;
     width:100%;
     bottom:0;
  }


  .sticky {
     position:fixed;
  }

  .container {
      margin: 0 auto;
      width: 100%;
      max-width: 90em;
      overflow-x: auto; /* added for mobile scrolling */
  }


  .with-sticky-header, .withStickyHeader {
     padding:150px 0;
  }



.page-wrap, .pageWrap {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}

.page-panel, .pagePanel {
  display: table-row;
  /* height: 1px; */
}

.page-panel-expanded, .pagePanelExpanded {
   height: 100%;
}



/* ==============================================================
    Basic Navigation Options
================================================================= */

.nav-horizontal, .navHorizontal {
  display: inline-block;
}

.nav-horizontal ul, .navHorizontal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-horizontal li, .navHorizontal li {
  float: left;
  background-color: #1B3663;
}

.nav-horizontal li:hover, .navHorizontal li:hover {
   background-color: #3687ad !important;  
}

.nav-horizontal li a, .navHorizontal li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}

/* ---    add a hover color for each background color you expect to use in a nav   -- */

.nav-horizontal li.bg-white:hover, .navHorizontal li.bg-white:hover {
   background-color: #eee !important;
}
.nav-horizontal li.bg-green:hover, .navHorizontal li.bg-green:hover {
   background-color: #B2D157 !important;
}



/* ==============================================================
    Typograpy
================================================================= */

a{
        font-size:.95em;
        /*text-decoration:none;*/
        color:#5f90b0;
}

a:hover{
        color:#406882;
}


/*h1, .h1, .f1,
h2, .h2, .f2,
h3, .h3, .f3,
h4, .h4, .f4,
h5, .h5, .f5,
h6, .h6, .f6,
.f7{
        font-weight:500
}

h1, .h1, .f1{ font-size:3.5rem }
h2, .h2, .f2{ font-size:2.5rem }
h3, .h3, .f3{ font-size:2rem }
h4, .h4, .f4{ font-size:1.5rem }
h5, .h5, .f5{ font-size:1rem }
h6, .h6, .f6{ font-size:.8rem }
.f7{ font-size: 0.55rem }



.rem45 {font-size: 4.5rem; }
.rem4 {font-size: 4rem; }

.rem35 {font-size: 3.5rem; }
.rem3 {font-size: 3rem; }

.rem25 {font-size: 2.5rem; }
.rem2 {font-size: 2rem; }

.rem15 {font-size: 1.5rem; }
.rem1 {font-size: 1rem; }

.rem95s {font-size: 0.95rem; }
.rem9s {font-size: 0.90rem; }

.rem85s {font-size: 0.85rem; }
.rem8s {font-size: 0.80rem; }

.rem75s {font-size: 0.75rem; }
.rem7s {font-size: 0.70rem; }

.rem65s {font-size: 0.65rem; }
.rem6s {font-size: 0.60rem; }

.rem55s {font-size: 0.55rem; }
.rem5s {font-size: 0.50rem; }

.rem45s {font-size: 0.45rem; }
.rem4s {font-size: 0.40rem; }



.em45 {font-size: 4.5em; }
.em4 {font-size: 4em; }

.em35 {font-size: 3.5em; }
.em3 {font-size: 3em; }

.em25 {font-size: 2.5em; }
.em2 {font-size: 2em; }

.em15 {font-size: 1.5em; }
.em1 {font-size: 1em; }

.em95s {font-size: 0.95em; }
.em9s {font-size: 0.90em; }

.em85s {font-size: 0.85em; }
.em8s {font-size: 0.80em; }

.em75s {font-size: 0.75em; }
.em7s {font-size: 0.70em; }

.em65s {font-size: 0.65em; }
.em6s {font-size: 0.60em; }

.em55s {font-size: 0.55em; }
.em5s {font-size: 0.50em; }

.em45s {font-size: 0.45em; }
.em4s {font-size: 0.40em; }



.font-thin, .fontThin, .font2 { font-weight: 200; }
.font3 { font-weight: 300; }
.font4 { font-weight: 400; }
.font5 { font-weight: 500; }
.font-thick, .fontThick, .font6 { font-weight: 600; }
.bold, .font7 { font-weight: 700; }




p {
 font-size: 1em;
 line-height: 1.5;
 margin: 0 0 1.5em;
}*/

.thick, .bold, .font7 { font-weight: 700; }

pre,
code {
  /*font-family: 'Source Code Pro', Consolas, monospace;*/
  font-size: inherit;
  padding: 1em;
  background-color: #eee;
  margin-top: 0;
  margin-bottom: 1em;
  border-radius: 0.3em;
}

pre {
  display: block;
  overflow-x: scroll;
}

code {
  display: inline-block;
}


/* ==============================================================
    Tables
================================================================= */

table{
  width:100%;
  border-spacing:0;
  border-collapse:collapse;
  text-align:left;
}

table caption {
  /*font-weight: 200;
  font-size: 1.5em;*/
  color: #575757;
  margin-bottom: 10px;
}

/*th,
td{
  border-bottom:2px #d1d1d1 solid;
  text-align: left;
  padding:8px 12px;
}*/

td{
  border-bottom:1px #d4d4d4 solid;
}


.tab-loose th, .tabLoose th,
.tab-loose td, .tabLoose td {
  padding: 12px 15px;
}

.tab-flush th:first-child, .tabFlush th:first-child,
.tab-flush td:first-child, .tabFlush td:first-child {
  padding-left: 0; 
}

.tab-flush th:last-child, .tabFlush th:last-child,
.tab-flush td:last-child, .tabFlush td:last-child {
  padding-right: 0; 
}
 
/*.tab-stripe tbody tr:nth-child(2n+1),
.tabStripe tbody tr:nth-child(2n+1){
  background-color:#f3f3f3;
}*/

.tab-border, .tabBorder{
  border:1px #CCC solid;
}

.tab-border td, .tabBorder td,
.tab-border th, .tabBorder th{
  border:1px #CCC solid;
}

.tab-nowrap td{
    white-space: nowrap;
}

.tr-deadline-passed td { 
	opacity: 0.5;
	color: black !important;
	background-color: #ccc !important;
	border-bottom: 1px solid #fff;
}
.deadline-passed {
	font-weight: bold !important;
	pointer-events: none; /* Prevents clicks */
}


.tr-class-full td { 
	opacity: 0.4;
	color: black !important;
	background-color: #ffc65c !important;
	text-decoration: line-through !important;
}
.class-full {
	font-weight: bold !important; 
	pointer-events: none; /* Prevents clicks */
}


#coursegrid:has(div + table.schedule) {
    overflow-x: auto;
    cursor: ew-resize;
}



/* ==============================================================
    Forms
================================================================= */

form label,
input[type=text], 
input[type=url], 
input[type=email], 
input[type=password], 
input[type=time], 
input[type=date], 
input[type=checkbox], 
input[type=tel] {
  margin: 0;
  height: 30px;
  font-size: 1.0em;
  margin-bottom: 3px;
  padding-left: 4px;

  display: inline-block;
  width: 95%;
  line-height: 30px;

  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.2);

  color: rgba(0,0,0,.8);
}

form label {
  display: inline;
  border-bottom: 0;
  margin-bottom: 1px;
}
  

 input[type=text]:focus, 
 input[type=url]:focus, 
 input[type=email]:focus, 
 input[type=password]:focus, 
 input[type=time]:focus, 
 input[type=date]:focus, 
 input[type=checkbox]:focus, 
 input[type=tel]:focus {
  outline: none;
  border-color: #53CACE;
}

input[type=range] {
  display: block;
  margin: 0 auto;
  width: 80%;
}

input[type=range]::-webkit-slider-thumb {
  width: 44px; 
  height: 44px;
  background: #fdfdfd; 
  border: 1px solid #bbb;
  border-radius: 22px;
}

input[type=checkbox] {
  width: auto;
  height: 15px;
}

[type=submit] {
  display: block;
  margin: 1em auto 0;
  width: 80%;
  border: 0;
  background-color: #91B2DB;
  border-radius: 5px;
  height: 50px;
  color: white;
  font-weight: 400;
  font-size: 1.0em;
}

[type='submit']:hover {
  border: 2px solid #1B3663;
}

form fieldset {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
  
form legend {
  color: #384313;
  font-size: 1.0em;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 5px;
}
  
textarea {
  width: 95%;
  height: 80%;
  padding: 5px;
}

select {
  display: inline-block;

  margin: 0 auto;
  margin-bottom: 5px;

  width: 95%; 
  height: 30px;

  font-size: 1.0em;
  line-height: 30px;

  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.2);

  color: rgba(0,0,0,.8);
}

select[multiple] {
    height: auto;
}

/*  ------- Boxed forms ----- */

.boxed input[type=text],
.boxed input[type=url],
.boxed input[type=email],
.boxed input[type=password],
.boxed input[type=time],
.boxed input[type=date],
.boxed input[type=checkbox],
.boxed input[type=tel] {
  padding: 0.4em;
  height: 2.25em;
  font-size: 1.0em;
  line-height: 2.25em;
  border: 1px solid black;
  width: 95%;
}

.boxed label {
  color: #000;
  height: 1.35em;
  font-size: 1.0em;
  line-height: 1.35em;
}




/* ==============================================================
    Media Queries
================================================================= */

@media only screen and (min-width: 38em) {

/*
 *   Since the grid is mobile first, define all other sizes inside media queries.
 *
 *   ATTENTION: these are only here as an example and to be used for small 
 *   areas in the document that need positioning.  No content aware restructuring
 *   is possible with general col sizing so no attempt is made to refine sizes
 *   across media query breakpoints.
 *
 *   For major areas of your design you are expected to define size and characteristics 
 *   when using cols and handle media query breakpoints with content in mind vs device
 *   sizes.  See the following for more information:
 *   http://www.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/
 */

  .HCA_COL { width: 12%; }
    
  .dotOne { width: 1%; }
  .dotTwo { width: 2%; } 
  .dotThree { width: 3%; }
  .dotFour { width: 4%; }
  .dotFive { width: 5%; }
  .dotSix { width: 6%; }
  .dotSeven { width: 7%; }
  .dotEight { width: 8%; }
  .dotNine { width: 9%; }

  .one { width: 10%; }
  .oneDotTwo { width: 12%; }
  .oneDotFive { width: 15%; }

  .two { width: 20%; }
  .twoDotFive { width: 25%; }


  .three { width: 30%; }
  .threeDotFive { width: 35%; }

  .four { width: 40%; }
  .fourDotFive { width: 45%; }

  .five { width: 50%; }
  .fiveDotFive { width: 55%; }

  .six { width: 60%; }
  .sixDotFive { width: 65%; }

  .seven { width: 70%; }
  .sevenDotFive { width: 75%; }

  .eight { width: 80%; }
  .eightDotFive { width: 85%; }

  .nine { width: 90%; }
  .nineDotFive { width: 95%; }

  .ten { width: 100%; }


/*
 * Header adjustments as grid adjusts to screen size
 *
 */

  header {
     height: 60px;
  }

  .with-sticky-header {
     padding:110px 0;
  }

}


@media only screen and (min-height: 900px) { 
  
  select {
    height: 33px;
    line-height: 32px;
  }
  
}



@media print and (color) {
  .HCA_COL { width: 12%; }
    
  .dotOne { width: 1%; }
  .dotTwo { width: 2%; } 
  .dotThree { width: 3%; }
  .dotFive { width: 5%; }
  .dotSix { width: 6%; }
  .dotSeven { width: 7%; }
  .dotEight { width: 8%; }
  .dotNine { width: 9%; }

  .one { width: 10%; }
  .oneDotTwo { width: 12%; }
  .oneDotFive { width: 15%; }

  .two { width: 20%; }
  .twoDotFive { width: 25%; }


  .three { width: 30%; }
  .threeDotFive { width: 35%; }

  .four { width: 40%; }
  .fourDotFive { width: 45%; }

  .five { width: 50%; }
  .fiveDotFive { width: 55%; }

  .six { width: 60%; }
  .sixDotFive { width: 65%; }

  .seven { width: 70%; }
  .sevenDotFive { width: 75%; }

  .eight { width: 80%; }
  .eightDotFive { width: 85%; }

  .nine { width: 90%; }
  .nineDotFive { width: 95%; }

  .ten { width: 100%; }


/*
 * Header adjustments as grid adjusts to screen size
 *
 */

  header, footer, #subHeader, #adminCogs {
     display: none;
  }

  
  * {
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact;
  }
  
}



/* ============================================================
      Alight Mods and Additions
============================================================ */



/* ============================================================
            Panel Styles
  ============================================================ */

  /* --------------------------------------
       Side Panel
   -------------------------------------- */

.sidePanel {
  position: fixed;
  z-index: 40;
  background-color: #fff;
  top: 40px;
  right: 0;
  width: 370px;
  height: 100%;
  overflow-y: scroll;
  transform: translateX(320px);
  transition: transform 0.3s;
  display: none;
  padding: 40px 35px;
}

.sidePanel.is_active {
  transform: translateX(0);
  background-color: #f6f6f6;
  display: block;
}

.has_push_right {
    max-width: 70%;
    float: right; 
    margin-right: 10px;
 }


.o-wrapper.has_push_right {
  transform: translateX(-320px);
}

.sidePanel-nav  {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #fff;
  line-height: 40px;
  text-align: center;
}

.sidePanel-nav.hide {
    display: none;
}

.sidePanel-nav a.sideClose {
  right: 0;
  font-weight: 700;
}


a.sidePanel-nav.open {
  left: 0;
  width: 50px;
  font-weight: 400;
}

a.sidePanel-nav.open-1 {
  top: 0;
}
a.sidePanel-nav.open-2 {
  top: 40px;
}
a.sidePanel-nav.open-3 {
  top: 80px;
}

[class^="icon-"], [class*=" icon-"] {
  line-height: 1.7;
}

/* ============================================================
  OVERLAY PANELS
============================================================ */
section {
  z-index: 50;
  position: fixed;
  top: -9999px;
  left: -9999px;
  visibilty: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);

  -webkit-transition: opacity 0.1s;
  -moz-transition: opacity 0.1s;
  -o-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

section.activeOverlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibilty: visible;
  opacity: 1;
}

section .content {
  position: absolute;
  top: 100px;
  bottom: 40px;
  left: 90px;
  right: 90px;
  margin: 0 auto;
  max-width: 85em;
  padding: 40px;
  border-radius: 5px;
  background-color: #fff;
  overflow-y: scroll;
  opacity: 0;

  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: opacity 0.1s, -webkit-transform 0.1s;
  -moz-transition: opacity 0.1s, -moz-transform 0.1s;
  -o-transition: opacity 0.1s, -o-transform 0.1s;
  transition: opacity 0.1s, transform 0.1s;

  -webkit-transition-delay: 0.0s;
  -moz-transition-delay: 0.0s;
  -o-transition-delay: 0.0s;
  transition-delay: 0.0s;

}

section.activeOverlay .content {
  opacity: 1;

  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

section .content div.close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #57aed1;
  color: #fff;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

section .content a.close:hover {
  background-color: #6699CC;
}

/* ============================================================
  DIALOG PANELS
============================================================ */
section {
  z-index: 20;
}

section .content.dialog {
  top: 20%;
  bottom: 25%;
  left: 30%;
  right: 30%;
  border-radius: 0;
}

section .content.dialog {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

section.activeOverlay .content.dialog {

  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


/* ============================================================ */

    
 .iconInfo:before {
   visibility: hidden;
}


/* ============================================================
      Tooltip Styles
      https://chrisbracco.com/a-simple-css-tooltip/
============================================================ */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 1.0em;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}




/* ------------------------------------------------------------------
      Page Error and Input Validation Related Styling
   ------------------------------------------------------------------- */

    
    .pageMsg_err {
      margin: 10px 0px;
      padding:12px;
      color: #D8000C;
      background-color: #FFD2D2;
    }
    
    .err_el {
        color: #FA1D00;
    }




/* ============================================================
      Fast Grid Formatting
============================================================ */

#coursegrid thead tr {
    background-color: #EFBA08;
    font-weight: 700;
}

    table.gridtable {
      color:#333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
    }
    table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
    }
    table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
    }