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

/***** Color definitions ****************************/
.bg-primary{
  background: var(--primary-color);
  color: var(--primary-color-text);
}
.bg-black{
  background: var(--black);
  color:var(--white);
}
.bg-trans{
  background:transparent;
}
.bg-white{
  background:var(--white);
}
.bg-gray{
  background: var(--gray);
}
.bg-dark-gray{
  background: var(--dark-gray);
}
.bg-lt-gray,.bg-light-gray{
  background: var(--light-gray);
}
.bg-x-lt-gray,.bg-x-light-gray{
  background: var(--x-light-gray);
}
.bg-alert{
  background: var(--alert);
}
.bg-info{
  background: var(--info-bg);
}
.bg-highlighter{
  background: var(--highlighter);
}
.txt-primary{
  color: var(--primary-color);
}
.txt-black{
  color: var(--black) !important;
}
.txt-dark-gray{
  color: var(--dark-gray);
}
.txt-gray{
  color: var(--gray-text);
}
.txt-lt-gray{
  color: var(--light-gray);
}
.txt-white{
  color: var(--white) !important;
}
.txt-warning{
  color: #f58c00;
}
.txt-accent{
  color: var(--accent-color);
}
.transparent{
  color:transparent;
}
.fs-15{
  font-size:0.9375rem !important;
}
.fs-14{
  font-size:0.875rem !important;
}
.fs-16{
  font-size:1rem !important;
}
.fs-110p{
  font-size:1.1rem;
}
.fs-150p{
  font-size:1.5rem;
}
.fs-200p{
  font-size: 2rem;
}

/***** Page structure ****************************/

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

main, .article-offcanvas-wrapper, .off-canvas-content  {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

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

/***** Global element styling ****************************/
h2{
  font-size:2.375rem;
  font-weight:600;
  text-transform: uppercase;
}
h2.ebs{
  text-transform: none;
}
/*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%;
  }
}
a.inactive
,a.inactive:hover,a.inactive:focus{
  cursor: not-allowed;
  color: var(--gray-text);
}
.bold,strong,b{
  font-weight: 600;
}
thead th{
  font-weight: 600;
}
.semi-bold{
  font-weight: 500;
}
.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;
}
.kill-right{
  margin-right:0 !important;
}
.kill-left{
  margin-left:0 !important;
}
.double-below{
  margin-bottom: 2em !important;
}
.double-above{
  margin-top: 2em !important;
}
.triple-below{
  margin-bottom: 3em !important;
}
.triple-above{
  margin-top: 3em !important;
}
.quad-below{
  margin-bottom: 4em !important;
}
.quad-above{
  margin-top: 4em !important;
}
.quarter-right{
  margin-right:0.25em !important;
}
.half-left{
  margin-left:0.5rem !important;
}
.kill-pad-top{
  padding-top:0 !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;
}
h1.ul.ul,h2.ul,h3.ul,h4.ul,h5.ul,h6.ul{
  border-bottom: 1px solid var(--black);
  
}
h1.ul-primary.ul-primary,h2.ul-primary,h3.ul-primary,h4.ul-primary,h5.ul-primary,h6.ul-primary{
  border-bottom: 1px solid var(--primary-color);
}
h1.ul-gray.ul-gray,h2.ul-gray,h3.ul-gray,h4.ul-gray,h5.ul-gray,h6.ul-gray{
  border-bottom: 1px solid var(--gray);
  line-height: 1.75;
}
.cursor-help,.c-help{
  cursor: help;
}
.ul-hover-dotted:hover
,.ul-hover-dotted:focus{
  border-bottom: 1px dotted var(--dark-gray);
}
.hide{
  display: none;
}
.hidden{
  visibility: hidden;
  top:0;
  left:0;
}
.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(--black);
    color: var(--white);
    padding:.375em .5em;
    margin:0.25em 0 1em 0;
    font-weight: 500;
    font-size:0.75rem;
    /*border-left:8px solid var(--error);*/
    display: block;
  }
  
.required:after{
  content:"*";
  color: var(--error);
  margin-left:2px;
}
.no-break, .nobr{
  white-space: nowrap;
}
.nobo{
  border:none;
}
.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-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;
}
.badge.rectangle{
  border-radius: 3px;
  background: var(--primary-color);
  color: var(--primary-color-text);
  padding-left:0.375em;
  padding-right:0.375em;
}
.badge.rectangle.large{
  font-size:0.75rem;
  font-weight: 500;
  padding-left:0.6rem;
  padding-right:0.6rem;
}
.badge.item-tag{
    border-radius: 4px;
    background: var(--dark-gray);
    color: var(--white);
    margin-right:0;
    /*margin-left:0.5rem;*/
    font-size:0.6rem;
    padding-left:0.5em;
    padding-right:0.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:500;
  }

.callout[data-closable]{
  padding-right:2.5rem;
}
.callout.error
,.callout.error p{
    background: var(--error-bg);
    color: var(--black);
}
.callout.info{
  background-color: var(--info-bg);
}
.callout.info a, .callout.info a:visited
,.callout.info > .as-link{
  /*color: #1779ba;*/
  /*color: #14679f;*/
  color: #185b8b;
}
.callout > p:last-of-type{
  margin-bottom:0;
}
.callout.form-feedback{
  padding:0.25rem 0.5rem;
}
.callout.inline{
  display:inline-block;
}
.callout.tight{
  padding:0.25rem 0.5rem;
}
.callout.cozy{
  padding:0.5rem 0.5rem;
}
.roomy{
  padding:2rem;
}

.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-top.plain
,.callout-accent-left.plain{
  background: var(--primary-color);
}
.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);
}
.highlighter{
  background-color: var(--highlighter);
}

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;
}
.info-link{
  font-weight: 400;
  color:var(--gray-text);
  cursor:pointer;
}
.info-link:hover{
  text-decoration: underline;
}
.success span.as-link{
  color: #1f3d0c;
  text-decoration: underline;
}
span.pad-rt
,i.pad-rt{
  padding-right:0.375rem;
}
i.standalone{
  padding-right:0 !important;
}
i.fa-spin{
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
}
svg ~ span.pad-lft
,i.pad-lft{
  padding-left:0.375rem;
}
.pad-lft{
  padding-left:0.5em;
}

/* *********** 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(--checkbox-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(--checkbox-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%;
}
input[type=checkbox].switch-input + label::before
,input[type=radio].switch-input + label::before{
  visibility: hidden;
}

/********* FOUNDATION LINK to SPAN  ***********************************************************************************/
.dropdown.menu > li > span.as-link {
    padding: 0.7rem 1rem;
}
nav .top-bar ul span.as-link {
    color: var(--nav-color);
}
.menu span.as-link {
    margin-bottom: 0;
}
.menu span.as-link {
  line-height: 1;
  text-decoration: none;
  display: block;
  padding: 0.7rem 1rem;
}
nav span.as-link
,nav span.as-link:hover{
    text-decoration: none;
}

nav .menu .is-active > span.as-link
,nav .menu .nav-active > span.as-link{
  background: var(--primary-color);
}


/***** General element styling **********************************/
img{
  font-size:9px;
  font-weight: 400;
}
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;
  font-weight:500;
  
}
  .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);
    font-weight: 400;
  }
  .button.hollow.white{
    border: 1px solid var(--white);
    color: var(--white)
  }
  .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.clear{
    font-weight: 400;
  }
  .button.clear:hover, .button.clear:focus {
    color: var(--primary-color); 
  }
  .button.inactive
  ,.button.disabled,.button.disabled:hover,.button.disabled:focus
  ,.button:disabled, .button:disabled:hover,.button:disabled:focus{
    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;
}
.button.clear.primary-hover:hover{
  background:var(--primary-color);
  color: var(--primary-color-text);
}
main .form-group{
  margin-bottom:1.5em;
}

.data-lbl{
  font-weight: 600;
  font-size: .8em;
  color: var(--gray-text);
  margin-bottom: 0;
  line-height: 1;
}

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

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

p.small{
  font-size: 0.75rem;
}
p.tiny, a.tiny{
  font-size:0.6875rem;
}

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);
}
.product-price-wrapper .price,.price{
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
  line-height:1.2;
}
.product-price-wrapper .list-price,.list-price{
  font-size: 0.8125rem;
  color: var(--light-gray-text);
  padding-left:1em;
  font-weight: 500;
  /*padding-right:1em;*/
  /*text-decoration: line-through;*/
}

/***** Basic Page styling **********************************/
article {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

header, footer {
  flex-shrink: 0;
}
/*article {
  font-size:0.875rem;
}*/
section.page-top{
  margin-top:1rem;
}
section.page-top p{
  color: var(--gray-text);
}
section.standard{
  margin-bottom:4.5rem;
}
.section-sub-head{
  font-size:1rem;
  text-align: center;
}

/******************************** 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;
  }
}
/******************************** TABS *********************************/
.tabs{
  border-top:none;
  border-right:none;
  border-left:none;
}
.tabs .tabs-title a{
  font-size:0.875rem;
  padding:1em 1.5em;
  color: var(--black);
  background: var(--light-gray);
}
.tabs-title > a:focus
,.tabs-title > a[aria-selected='true']{
  background: var(--white);
  color: var(--black);
  text-decoration: none;
}
.tabs-title > a[aria-selected='true']:hover{
  color: var(--black);
  background: var(--white);
}
.accordion-title,.accordion-title:hover,.accordion-title:focus {
    color: var(--black);
    font-size:0.875rem;
}
.accordion-title[aria-selected='true']{
  font-weight: 500;
}
/***** Tables *****************************************/
table thead tr th, table tr th{
  font-size:0.9em;
  padding: 0.25rem 0.75rem;
}
table thead{
  background: var(--light-gray);
}

table tbody tr td, table tr td{
  padding: 0.375rem 0.75rem 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.standard .button{
  padding: 0.375rem 0.75rem;
}
div.callout.w-auto{
  display: inline-block;
}
table.w-auto{
  width:auto;
}
.w-full{
  width:100%;
}
.can-click{
  cursor: pointer;
}
.card.can-select:hover{
  border-color:var(--black);
}
table.vert-lines th:not(:last-of-type)
,table.vert-lines-lt th:not(:last-of-type)
,table.vert-lines td:not(:last-of-type){
  border-right:1px solid var(--light-gray);
}
table.vert-lines-lt td:not(:last-of-type){
  border-right:1px solid var(--light-gray);
}

table td.is-link{
  cursor:pointer;
}
table{
  font-size:0.875rem;
}

/*.breadcrumbs li:not(:last-child)::after{
  font-family: "Font Awesome 5 Pro";
  content: "\f105";
}*/
section.breadcrumbs{
  margin: 1.5rem 0;
}
ul.breadcrumbs{
  margin-bottom: 0;
}
ul.breadcrumbs li{
  font-weight: 600;
  font-size: 1em;
  color: var(--gray-text);
}
ul.breadcrumbs li span.as-link{
  color: var(--gray-text);
  display: inline;
  padding: 0;
}
ul.breadcrumbs li span.as-link:hover{
  text-decoration: none;
  color: var(--link-color);
  
}



/***** FontAwesome Overrides *****************************************/
.fad.fa-heart-circle{
  --fa-secondary-opacity: 0.25;
}


/***** 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: 500;
    font-size: 0.8rem;
    color: #808080;
    margin-bottom: 0;
    /*padding-bottom:2px;*/
    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.label-left .checkout-item .item-price
    ,table.cards-for-small.label-left .checkout-item .item-qty
    ,table.cards-for-small.label-left .checkout-item .item-ext {
         width: auto; 
    }
    table.cards-for-small.label-left .checkout-item .item-desc
    ,table.cards-for-small.label-left .checkout-item .item-img-sm{
      text-align:center;
      width:100%;
    }
  
  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;
  }
}

/***** Customer-Generated Html Reset *****************************************/
.cust-html *{
  font-family: 'Poppins', 'Arial',Helvetica, sans-serif;
  font-size: 1em !important;
  width: 100% !important;
  height: 100% !important;
  /*color: var(--black) !important;*/
}

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

p.tight{
  line-height:1.2;
}

.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;
}

/*** 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.375rem;
  }
.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;
  }
.accordion-title::before {
  content: '\25BC';
}
.is-active > .accordion-title::before {
  content: '\25B2';
}  
  
/*** FORMS *******************************************************************/  
.form-error{
  font-weight: 600;
}
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::placeholder{
  color:#999999;
}
input:-ms-input-placeholder{
  color:#999999;
}
.input-group.view-as .button{
  padding-left:0.5rem;
  padding-right:0.5rem;
  color:var(--gray-text);
  font-size:1.25rem;
}
.input-group.view-as .button:hover
,.input-group.view-as .button.is-active{
  color:var(--primary-color);
}
.input-group.view-as span.input-group-label{
  padding-right:0.25em;
}

input[type=text].underline{
  border:0;
  outline: none;
  border-bottom:1px solid var(--black);
  background: transparent;
  box-shadow: none;
  padding-bottom:2px;
}
.input-group-textbox span.input-group-label{
  border-right:1px solid #cacaca;
  border-bottom:none;
  padding:3px 0.5rem;
}
.input-group-textbox textarea.input-group-textarea{
  height:3.5rem;
  font-size:0.75rem;
  margin-bottom:0;
}

/*** 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); 
}

/*** CARDS *****************************************************************/
.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;
}
.card-section.double-pad{
  padding:2rem;
}
.card .menu-card-icon{
  font-size:3.5em;
  line-height: 1;
  margin-bottom:0.25rem;
}
.has-shadow{
  box-shadow: #dddddd 0 0 25px 0;
}
.has-shadow-tight{
  box-shadow: #dddddd 0 0 10px 0;
}
.menu-card-icon i{
  margin-right: 0;
}
.menu-card{
  background-color:#f4f5f7;
  box-shadow: 0 2px 3px #999;
  cursor: pointer;
}
  .menu-card:hover{
    /*background-color:#f1f1f1;*/
    border: 1px solid var(--dark-gray);
    /*box-shadow: none;*/
  }
  .menu-card.not-selected:hover .title-text {
    color: var(--black);
  }
  .menu-card.inactive:hover{
    background-color:#f4f5f7;
  }
  .menu-card a, .menu-card a p, .menu-card:hover a,  .menu-card:hover a p{
    text-decoration: none;
    color: var(--black);
  }
.menu-card.inactive *{
  cursor:not-allowed;
}

/*div.card .card-divider{
  background:var(--dark-gray);
  color:var(--white);
}
div.card .card-divider span
,div.card .card-divider p{
  color:var(--white);
}*/

.content-filter-section:not(:last-of-type){
  margin-bottom:1.5rem;
}
.vendor-filter-title{
  font-size:1.2em;
  /*line-height: 2;*/
  font-weight: 600;
  margin-bottom:0.5rem;
}
.as-link.search-clear{
  padding-left:0.75rem;
  font-size:90%;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.11.1/svgs/regular/times.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .5;
  pointer-events: all;
  cursor: pointer;
}

.reset-filter-link .as-link{
  font-size:0.75rem;
  text-transform: uppercase;
  color:var(--black);
}
.reset-filter-link .as-link:hover{
  color:var(--gray-text);
}

input[type=number] {
    -moz-appearance:textfield;
}
.dropdown-pane .large-click-list{
  margin:-0.75rem -1rem;
}
.large-click-list .list-item{
  font-size:1.2rem;
  font-weight: 300;
  padding:0.75rem 0.25rem;
  cursor: pointer;
}
.large-click-list .list-item:not(:last-of-type){
  border-bottom:1px solid var(--gray);
}
.large-click-list .list-item:hover{
  /*background: var(--light-gray);*/
  /*font-weight: 400;*/
  color:var(--primary-color);
  text-decoration:underline;
}
.large-click-list .list-item.selected:hover{
  /*background: var(--light-gray);*/
  /*font-weight: 300;*/
  color:var(--black);
  text-decoration:none;
}

/*** AJAX LOADING  *****************************************************************/
.loading-row-wrapper{
  border: 1px solid var(--light-gray);
  border-bottom:none;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.loading-row-wrapper:last-of-type{
  border-bottom:1px solid var(--light-gray);
}
.loading-anim {
  color: transparent;
  background: var(--light-gray);
}
.loading-row-wrapper .menu.inline-data li:not(:last-of-type) {
    margin-right: 1.75rem;
    padding-right: 0;
}
.loading-row-wrapper .inline-data li{
  font-size:0.65rem;
  margin-bottom:0.5rem;
}
.loading-anim.large{
  font-size:1.1rem;
}
p.loading-anim.small{
  line-height: 1.1;
}
.block-anim{
  color:transparent;
  background:var(--white);
}
@keyframes loading {
  0% {
    /*background-position: -968px 0;*/
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
    /*background-position: 968px 0;*/
  }
}
@keyframes loadingFirst {
  0% {
    /*background-position: -968px 0;*/
    background-position: 100% 0;
  }
  32%,100% {
    background-position: 0 0;
    /*background-position: 968px 0;*/
  }
}

.loading-anim{
  color: transparent;
  background: linear-gradient(100deg, var(--light-gray) 40%, var(--x-light-gray) 50%, var(--light-gray) 60%);
  background-size: 300%;
  animation-fill-mode: forwards;
  animation: loading 2s linear infinite;
}
.loading-anim.first{
  background-size: 400%;
  animation: loadingFirst 2s linear infinite
}

.loading-block{
  background:var(--light-gray);
}
.loading-block.anim{
  background: linear-gradient(100deg, var(--light-gray) 40%, var(--x-light-gray) 50%, var(--light-gray) 60%);
  background-size: 200%;
  animation-fill-mode: forwards;
  animation: loading 2s linear infinite;
}
.loading-block.input{
  height:39px;
  margin-bottom:1em;
}
.card.ebs-selector.loading{
  border:1px solid var(--light-gray);
}
/*@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.loading-row-wrapper{
  color: transparent;
  background: linear-gradient(120deg, var(--light-gray) 40%, #fbfbfb 50%, var(--light-gray) 60%);
  background-size: 300%;
  animation: loading 1.8s ease-in-out 2s infinite;
  border:1px solid var(--light-gray);
  border-bottom:none;
}
.anim-block{
  background:var(--white);
}
.anim-block.h-8{
  height:8px;
}
.anim-block.h-16{
  height:16px;
}
.anim-block.h-24{
  height:24px;
}
.anim-block.h-32{
  height:32px;
}
.anim-block.w-8{
  width:8px;
}
.anim-block.w-16{
  width:16px;
}
.anim-block.w-24{
  width:24px;
}
.anim-block.w-32{
  width:32px;
}*/

span.dropship{
  display: inline-block;
  vertical-align: middle;
  /*margin: 0 0 1rem 0;*/
  border: 1px solid transparent;
  line-height: 1;
  text-align: center;
  background-color: transparent;
  background: #e2dfd3;
  color: #494440;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.5rem;
  cursor: default;
}