:root {
  /*====== Feedback Colors =================================================*/
  --alert: #fff6bf;
  --error: #8a1f11;
  --error-bg: #fcd6d6;
  --info-bg: #d7ecfa;
  --warning: #fff3d9;
  /*====== Standard Colors =================================================*/
  --black: #222222;
  --white: #fefefe;
  --x-light-gray: #f1f1f1;
  --light-gray: #e6e6e6;
  --gray: #cccccc;
  --dark-gray: #808080;
  
}

/***** User agent fix on element outline ****************************/
div:focus,button:focus,a:focus,select:focus,input:focus,textarea:focus{
  outline: none;
}
button{
  cursor: pointer;
}
button.clear.as-link{
  text-decoration: none;
  color: var(--primary-color);
}
button.clear.as-link:hover{
  text-decoration: underline;
  color: var(--primary-color-hover);
}

/***** Color definitions ****************************/
.bg-primary{
  background: var(--primary-color);
  color: var(--primary-color-text);
}
.bg-black{
  background: var(--black);
}
.bg-white{
  background: var(--white);
}
.bg-gray{
  background: var(--gray);
}
.bg-dark-gray{
  background: var(--dark-gray);
}
.bg-lt-gray{
  background: var(--light-gray);
}
.bg-x-lt-gray{
  background: var(--x-light-gray);
}
.bg-alert{
  background: var(--alert);
}
.bg-info{
  background: var(--info-bg);
}
.txt-primary{
  color: var(--primary-color);
}
.txt-black{
  color: var(--black) !important;
}
.txt-dark-gray{
  color: var(--dark-gray);
}
.txt-gray{
  color: var(--gray);
}
.txt-white{
  color: var(--white);
}
.txt-warning{
  color: #f58c00;
}
.transparent{
  color:transparent;
}

/***** Page structure ****************************/
html, body {
  width: 100%;
  height: 100%;
/*  font-family: Roboto,'Arial','Helvetica',sans-serif;*/
}
article {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

header, main, footer {
  flex-shrink: 0;
}
.grid-container.expanded{
  max-width:1200px;
}

/***** Global element styling ****************************/
i{
  margin-right:0.375em;
}
i.warning{
  color: var(--warning);
}

.upper{
  text-transform: uppercase;
}
.kerning-2{
  letter-spacing:2px;
}
.kerning-1{
  letter-spacing:1px;
}

@media screen and (max-width: 40em) {
  .lead{
    font-size:115%;
  }
}
.sw-align-top{
  vertical-align:top;
}
.bold,.strong{
  font-weight: bold;
}
.quarter-below{
  margin-bottom:0.25em !important;
}
.quarter-above{
  margin-top:0.25em !important;
}
.half-below{
  margin-bottom:0.5em !important;
}
.half-above{
  margin-top:0.5em !important;
}
.single-below{
  margin-bottom:1em !important;
}
.single-above{
  margin-top:1em !important;
}
.single-right{
  margin-right:1em !important;
}
.single-left{
  margin-left:1em !important;
}
.kill-below{
  margin-bottom:0 !important;
}
.kill-above{
  margin-top:0 !important;
}
.double-below{
  margin-bottom: 2em !important;
}
.double-above{
  margin-top: 2em !important;
}
.quarter-right{
  margin-right:0.25em !important;
}
.half-left{
  margin-left:0.5rem !important;
}
.kill-pad-left{
  padding-left:0 !important;
}
.kill-pad-right{
  padding-right:0 !important;
}
.half-pad-right{
  padding-right:0.5em !important;
}
.half-pad-left{
  padding-left:0.5em !important;
}

.hide{
  display: none;
}
.font-90{
  font-size: 90%;
}
.backward{
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  unicode-bidi:bidi-override;
  direction:rtl;
}

.close-button{
  background: transparent;
}
  .close-button:hover{
    background: transparent;
    text-decoration: none;
  }
 
  input.error, select.error, textarea.error{
    border:1px solid var(--error);
    margin-bottom:0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  small.error{
    background-color: var(--error);
    color: var(--white);
    padding:.25em .5em;
    margin:0 0 1em 0;
    border:none;
    display: block
  }
  
.required:after{
  content:"*";
  color: var(--error);
  margin-left:2px;
}
.no-break, .nobr{
  white-space: nowrap;
}
.border-dk-gray{
  border:1px solid var(--dark-gray);
}
.border-top-black{
  border-top: 1px solid var(--black);
}
.border-btm-black{
  border-bottom: 1px solid var(--black);
}
.border-btm-dk-gray{
  border-bottom: 1px solid var(--dark-gray);
}
.border-btm-gray{
  border-bottom: 1px solid var(--gray);
}
.border-btm-lt-gray{
  border-bottom: 1px solid var(--light-gray);
}
.border-lft-lt-gray{
  border-left: 1px solid var(--light-gray);
}
hr.black{
  border-bottom: 1px solid var(--black);
}
hr.thin{
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}

.callout[data-closable]{
  padding-right:2.5rem;
}
.callout.error {
    background: var(--error-bg);
    color: var(--black);
}
.callout.info{
  background-color: var(--info-bg);
}
.callout.info a, .callout.info a:visited{
  /*color: #1779ba;*/
  color: #14679f;
}
.callout > p:last-of-type{
  margin-bottom:0;
}
.callout.inline{
  display:inline-block;
}
.callout.tight{
  padding:0.25rem 0.5rem;
}
.callout.cozy{
  padding:0.5rem 0.5rem;
}
.callout.form-feedback{
  padding:0.25rem 0.5rem;
}
.callout-accent-left{
  background: var(--primary-color);
  background: -moz-linear-gradient(var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  background: -webkit-linear-gradient(var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  background: linear-gradient(to bottom, var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  border-radius: 3px;
}
.callout-accent-top{
  background: var(--primary-color);
  background: -moz-linear-gradient(left, var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  background: -webkit-linear-gradient(left, var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  background: linear-gradient(to right, var(--callout-accent-dk) 0%, var(--callout-accent-lt) 20%, var(--callout-accent-dk) 100%);
  border-radius: 3px;
}
.callout-accent-left .callout{
  margin-left:0.5rem;
  margin-bottom: 0;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.callout-accent-top .callout{
  margin-top:0.5rem;
  margin-bottom: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.callout > .callout-title{
  font-weight: bold;
  font-size:1.375em;
  margin-bottom: 0.25rem;
}
.callout-body p:last-of-type{
  margin-bottom: 0;
}

.label{
  background: var(--primary-color);
}
div.notice{
  clear: both;
  text-align: left;
  padding:0.5rem 1rem;
  background-color: var(--warning);
}

ul.error-list{
  margin-left:0;
  margin-bottom:0
}
ul.error-list li{
  font-size: 0.9375rem;
}
.error-list-title{
  font-weight: bold;
}
ul.error-list li.list-err{
  /*list-style-image: url("/img/ErrorWarningIcon/error-12.png");*/
  background: url("/img/ErrorWarningIcon/error-12.png") no-repeat left top 6px;
  list-style: none;
  margin-bottom:0;
  text-decoration: none; 
  cursor: default;
  padding-left:18px;
}
ul.error-list li.list-warn{
  background: url("/img/ErrorWarningIcon/warning-12.png") no-repeat left top 6px;
  list-style: none;
  margin-bottom:0;
  text-decoration: none; 
  /*cursor: pointer;*/
  padding-left:18px;
}
ul.error-list li a{
  text-decoration: none;
  /*color:#8a1f11;*/
  color: var(--black);
}
ul.plain{
  list-style-type: none;
  margin-left:0;
}

span.as-link{
  color: var(--link-color);
  cursor:pointer;
}
span.as-link:hover,span.as-link:focus{
  color: var(--link-color-hover);
  text-decoration: underline;
  cursor:pointer;
}

/***** General element styling **********************************/
a{
  color: var(--link-color);
}
  a:hover, a:focus{
    color: var(--link-color-hover);
    text-decoration: underline;
  }
.menu .active > a{
  background: var(--primary-color);
}
.error a,.error a:hover,.error a:active,.error a:focus{
  color:var(--error);
  text-decoration: underline;
}
.button{
  background: var(--button-bg-color);
  color: var(--button-color);
  text-decoration: none;
}
  .button:hover, .button:focus, main.button:active{
    background: var(--button-bg-color-hover);
    color: var(--button-color-hover);
  }
  .button.hollow{
    border: 1px solid var(--button-bg-color);
    background: transparent;
    color: var(--button-bg-color)
  }
  .button.hollow.bg-white{
    background: var(--white);
  }
    .button.hollow:hover, main .button.hollow:focus{
      background: var(--button-bg-color);
      color: var(--button-color);
      border: 1px solid var(--button-bg-color);
    } 
  .button.round{
    -webkit-border-radius: 1000px;
       -moz-border-radius: 1000px;
            border-radius: 1000px;
  }
  .button.inactive, .button:disabled, .button:disabled:hover{
    background: var(--dark-gray);
    color: var(--white);
    cursor: not-allowed;
    opacity: 1;
  }
.button.thin{
  padding-left:0.75rem;
  padding-right:0.75rem;
}
.button.medium{
  font-size:1.1em;
}
main .form-group{
  margin-bottom:1.5em;
}

.data-lbl{
  font-weight: bold;
  font-size: .8em;
  /*color: var(--dark-gray);*/
  color: var(--black);
  margin-bottom: 0;
  line-height: 1;
}
p.data-lbl{
  margin-bottom: 0.25rem;
}

.data-det{
  font-size: 1.1em;
  line-height: 1
}

i.error
,span.error{
  color: var(--error);
}

p.small,span.small{
  font-size: 80%;
}

button.note{
  padding:0.4em 0.75em;
  margin-bottom:0;
  /*margin-top:-8px;*/
  font-size: 0.875rem;
}
td.ln-rt, th.ln-rt{
  border-right: 1px solid var(--black);
}
.plain{
  background: transparent;
  color: var(--black);
  border: none;
  border-radius: 0;
}
.button.gray{
  border-left:0;
  background: var(--light-gray);
  color: var(--black);
}
.button.gray:hover{
  background: var(--gray);
}
.has-shadow{
  box-shadow: 0 3px 4px #999;
}


/******************************** ACCORDION *********************************/
.accordion-item{
  background:var(--x-light-gray);
}
.accordion-title{
  border-color:var(--gray);
}
:last-child:not(.is-active) > .accordion-title {
  border-bottom-color:var(--gray);
}
/********* STATE INFO *************************************************************************************************/
.state-bar{
  margin-bottom:0.5rem;
  margin-top:-0.627rem;
/*  overflow: hidden;
  display: block;*/
}
span.active-session{
  font-weight: bold;
}
span.active-student{
  font-weight: bold;
}

/***** Login Modal  ************************************/
@media screen and (min-width: 40em){
  #mdlLogin{
    max-width: 400px;
  }
}

/***** Tables *****************************************/
table thead tr th, table tr th{
  font-size:0.9em;
  padding: 0.25rem 0.5rem;
}
table thead{
  background: var(--light-gray);
}

table tbody tr td, table tr td{
  padding: 0.375rem 0.5rem 0.5rem;
}

table.structural, table.structural thead, table.structural tbody
 ,table.structural thead tr, table.structural tbody tr
 ,table.structural thead tr th, table.structural tbody tr td{
   border:0;
   background-color: transparent;
   width:auto;
   padding:0;
 }
  table.structural.pad-x th, table.structural.pad-x td{
    padding: 0 0.5rem;
  }
  table.structural.pad-y th, table.structural.pad-y td{
    padding: 0.375rem 0 0.5rem 0;
  }
  table.structural.cozy tbody tr td,table.structural.cozy thead tr th{
    padding:0.25rem 0.375rem;
  }
table.standard .button{
  padding: 0.375rem 0.75rem;
}
table.w-auto{
  width:auto;
}
table.w-full{
  width:100%;
}
tr.can-click{
  cursor: pointer;
}

/***** Responsive Tables *****************************************/
@media screen and (max-width: 39.99875em){
  table.cards-for-small {
      border: 0;
      width: 100% !important;
    }

  table.cards-for-small > thead {
    display: none;
  }

  table.cards-for-small > tbody > tr {
    display: block;
    padding-top:1rem;
    padding-bottom:1rem;
  }

  table.cards-for-small > tbody > tr > td {
    display: block;
    padding:0.25rem 1rem;
    text-align: center
  }
    table.cards-for-small td.class-name {
      font-size:125%;
    }

  table.cards-for-small > tbody > tr > td:last-child {
    border-bottom: 0;
  }

  table.cards-for-small > tbody > tr > td::before {
    content: attr(data-label);
    display:block;
    font-weight: bold;
    font-size: 0.8rem;
    color: #808080;
    margin-bottom: 0;
    line-height: 1.1em;
  }
    table.cards-for-small.label-left > tbody > tr > td::before{
      /* TODO: vertical align label to bottom */
      float:left;
      padding-right:0.5rem;
      padding-top:3px;
/*      min-width:25%;*/
      text-align:left;
    }
    table.cards-for-small.label-left > tbody > tr > td {
      text-align: right;
    }
    table.cards-for-small.label-left > tbody > tr > td.text-center {
      text-align: center;
    }
  
  table.cards-for-small.class-list .button{
    padding:0.5rem 1rem;
  }
  
  table.cards-for-small > tbody > tr > td.data-is-empty{
    display: none;
  }
 
  .card-text-large{
    font-size:1.2em;
  }
  
  #selScheduleHeaderId{
    min-width:200px;
  }
}

/***** Customer-Generatred Html Reset *****************************************/
.cust-html *{
/*  width: 100% !important;
  height: 100% !important;*/
  /*color: var(--black) !important;*/
}

/*****************************************************************************/

p.tight{
  line-height:1.2;
}
.card .card-divider.v-tight{
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.card .card-section.v-tight{
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.card .card-divider.h-tight{
  padding-left:0.5rem;
  padding-right:0.5rem;
}
.card .card-section.h-tight{
  padding-left:0.5rem;
  padding-right:0.5rem;
}
.card .card-divider.tight{
  padding:0.5rem;
}
.card .card-section.tight{
  padding:0.5rem;
}
.keylines{
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  line-height: 1;
  padding-top:0.562em;
  padding-bottom:0.5em;
}
.badge.rectangle{
    border-radius: 3px;
    margin-left:0.5rem;
    background: var(--primary-color);
    color: var(--primary-color-text);
    margin-right:0;
    margin-left:0.5rem;
    padding-left:0.375em;
    padding-right:0.375em;
  }
  .badge.gray{
    background: var(--dark-gray);
    color: var(--white);
  }

/*** MENUS *******************************************************************/
.menu.stacked-data:last-of-type{
  margin-bottom: 0.25rem;
}
  .menu.stacked-data li{
    margin-bottom:0.75rem;
  }
  .menu.stacked-data li:not(:last-of-type){
    padding-right:1.75rem;
  }
  .menu.stacked-data .data-lbl, .menu.stacked-data .data-det{
    display:block;
  }
  .menu.stacked-data .data-lbl{
    margin-bottom:0.1875rem;
  }
.menu.inline-data:last-of-type{
  margin-bottom: 0.25rem;
}
  .menu.inline-data li{
    margin-bottom:0.75rem;
  }
  .menu.inline-data li:not(:last-of-type){
    padding-right:1.75rem;
  }
  .menu.inline-data .data-lbl{
    padding-right:0.5em;
  }
  
  
/*** FORMS *******************************************************************/  
select.disabled,input.disabled,textarea.disabled{
  color:var(--dark-gray);
  background-color: var(--light-gray);
  cursor: not-allowed;
}
input.show-cal{
  background: url('/img/studioworks/calendar-medgray.png') no-repeat right;
  background-origin: content-box;
}
.input-group-label.plain{
  padding-left:0;
}
.input-group-label.plain + input.input-group-field{
  border-radius: 3px;
}
.input[type=checkbox]~span.form-error.is-visible{
  margin-top:0.5rem;
}
textarea,textarea[rows]{
  height: 4.5rem;
}

/*** SHAPES *****************************************************************/
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--black);
}
.arrow-up.inactive {
  border-bottom: 6px solid var(--gray);
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--black);
}
.arrow-down.inactive {
  border-top: 6px solid var(--gray);
}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--black);
}
.arrow-right.inactive {
  border-left: 6px solid var(--gray);
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; 
  border-right:6px solid var(--black); 
}
.arrow-left.inactive {
  border-right:6px solid var(--gray); 
}

/* *********** CHECKBOX STYLING ***********************************/
input[type=checkbox]
,input[type=radio]{
  opacity: 0;
  position: absolute;
}
input[type=checkbox]:checked + label::before
,input[type=radio]:checked + label::before{
  background: var(--primary-color);
}
input[type=checkbox] + label::before
,input[type=radio] + label::before{
  display: inline-block;
  text-align: center;
  line-height: 1;

  border: 0.0625rem solid var(--primary-color);
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;

  font-size: 0.875rem;
  color: var(--white);
  background: var(--white);
}
input[type=checkbox] + label::before{
  content: "\2713";
  padding-right: 1px;
  border-radius: 0.125rem;
}      
input[type=radio] + label::before{
  content: "\2713";
  border-radius: 50%;
}


/* *********** DEMO PANELS ***********************************/
.demo-block{
  background: var(--x-light-gray);
  border: 1px solid var(--gray);
  margin-bottom:1.5rem;
}