@charset "UTF-8";
/**
* Bristol 2.7
**/
/**
* Base Framework:
* `zurb foundation` - The ACC App Mobile Framework is based off of a reduced build of zurb foundation all of the grid, columns, base typography, and form elements can be used from zurb.  All functions can be turned back on, but to reduce build size many of the design features have been disabled.
* 
*   @example
*	<a  class="button" href="http://foundation.zurb.com/docs" class="">Go to Zurb Foundation Documentation</a>
*/
body {
  font-size: 14px;
}

/**
* Style Markup:
* `edge > outline` -coloring to show invisible containers in the styleguide.
* 
*   @example
*	<style>
*		.edge,.outline{ border:thin #ccc solid; position: relative; padding:16px 4px 4px;}
*		.outline{ border:dashed thin red}
*		.outline .outline{ border:dotted thin blue; display:inline-block;}
*		.outline .outline .outline{ border:dotted thin green; display:inline-block;}
*		.notation{font-size:10px; position: absolute; top: 0px;right: 4px;}
*		.outline .notation{ color:red;}
*		.outline .outline .notation{ color:blue;}
*		.outline .outline .outline  .notation{ color:green;}
*	</style>
**/
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot");
  src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_300/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/opensans_300/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/opensans_300/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot");
  src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot");
  src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_400/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/opensans_400/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/opensans_400/OpenSans-Regular-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot");
  src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_700/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/opensans_700/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/opensans_700/OpenSans-Bold-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot");
  src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot");
  src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.woff") format("woff"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.ttf") format("truetype"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.svg#open_sanslight") format("svg");
}
@font-face {
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot");
  src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.woff") format("woff"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.ttf") format("truetype"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.svg#open_sanslight") format("svg");
}
.visible-grid > .panel {
  color: black;
  border: 1px solid #aaa;
  background-color: #ccc;
  padding: 1em;
  margin-bottom: .5em;
}

.color-block {
  width: 50%;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: white;
}

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.4.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

    /*  (asterisk
    "State":"success",
	"Selector":".success",
    "Color": $success-color,
    "Icon": $fa-var-check,),


    */
h1, h2, h3, h4, h5, h6, p, td, th {
  -webkit-transition: line-height 1s;
  /* Safari */
  transition: line-height 1s;
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
}

/* TODO: refactor this 
there are two to three needs for icons icons in containers, icons on icons and then icons that are dynamic to a parent container.**/
.fa-holder {
  text-decoration: none;
}
.fa-holder > i.fa-holder:before, .fa-holder * i.fa-holder-dynamic:before {
  text-decoration: none;
}
.fa-holder :after {
  content: ' ';
}

.delete > i.fa-holder:before, .delete.fa:before, .cancel > i.fa-holder:before, .cancel.fa:before, .close > i.fa-holder:before, .close.fa:before, .close-reveal-modal > i.fa-holder:before, .close-reveal-modal.fa:before {
  content: "";
}

.validated > i.fa-holder:before, .validated.fa:before, .selected > i.fa-holder:before, .selected.fa:before {
  content: "";
}

.data > i.fa-holder:before, .data.fa:before {
  content: "";
}

.edit > i.fa-holder:before, .edit.fa:before {
  content: "";
}

.clear > i.fa-holder:before, .clear.fa:before, .refresh > i.fa-holder:before, .refresh.fa:before {
  content: "";
}

.starred > i.fa-holder:before, .starred.fa:before {
  content: "";
}

.add > i.fa-holder:before, .add.fa:before {
  content: "";
}

.home > i.fa-holder:before, .home.fa:before {
  content: "";
}

.top > i.fa-holder:before, .top.fa:before {
  content: "";
}

.fa-check:before {
  content: "";
}

.back > i.fa-holder:before, .back.fa:before {
  content: "";
}

.set > i.fa-holder:before, .set.fa:before {
  content: "";
}

.save > i.fa-holder:before, .save.fa:before {
  content: "";
}

.search > i.fa-holder:before, .search.fa:before {
  content: "";
}

.fa-check:before {
  content: "";
}

.fa-question-circle:before {
  content: "";
}

.fa-arrow-circle-right:before {
  content: "";
}

.fa-exclamation-triangle:before {
  content: "";
}

.fa-exclamation-circle:before {
  content: "";
}

i.fa.fa-question-circle {
  font-size: 1.35em;
}

.required .fa-holder-dynamic:before, .required.fa:before, .required > .fa-holder:before {
  content: "";
}
.required.fa {
  color: #E08514;
}

/**
 * Foundation for Sites by ZURB
 * Version 6.2.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.row {
  max-width: none;
}

.h1, h1, .table th.h1, .h2, h2, .table th.h2, .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3, .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4, .section-nav .text, .h5, h5, .h6, h6 {
  margin-top: 0;
  clear: both;
}

.h1, h1, .table th.h1 {
  letter-spacing: -1px;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.h2, h2, .table th.h2 {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
}

.h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4, .section-nav .text {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
}

.h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3, .h5, h5, .h6, h6 {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.h1, h1, .table th.h1 {
  font-size: 2.42857em;
  line-height: 1.15294em;
  margin-top: 0.57647em;
  margin-bottom: 0.57647em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h1, h1, .table th.h1 {
    line-height: 1.03765em;
    margin-top: 0.51882em;
    margin-bottom: 0.51882em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h1, h1, .table th.h1 {
    line-height: 1em;
    margin-top: 0.43235em;
    margin-bottom: 0.43235em;
  }
}

@media only screen and (min-width: 767px) {
  .h1, h1, .table th.h1 {
    font-size: 3.07143em;
    line-height: 1.36744em;
    margin-top: 0.45581em;
    margin-bottom: 0.45581em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h1, h1, .table th.h1 {
    line-height: 1.2307em;
    margin-top: 0.41023em;
    margin-bottom: 0.41023em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h1, h1, .table th.h1 {
    line-height: 1.16233em;
    margin-top: 0.34186em;
    margin-bottom: 0.34186em;
  }
}

@media only screen and (min-width: 1024px) {
  .h1, h1, .table th.h1 {
    font-size: 3.78571em;
    line-height: 1.10943em;
    margin-top: 0.36981em;
    margin-bottom: 0.36981em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h1, h1, .table th.h1 {
    line-height: 1em;
    margin-top: 0.33283em;
    margin-bottom: 0.33283em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h1, h1, .table th.h1 {
    line-height: 1em;
    margin-top: 0.27736em;
    margin-bottom: 0.27736em;
  }
}

.h2, h2, .table th.h2 {
  font-size: 1.92857em;
  line-height: 1.14074em;
  margin-top: 0.42778em;
  margin-bottom: 0.14259em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h2, h2, .table th.h2 {
    line-height: 1.02667em;
    margin-top: 0.385em;
    margin-bottom: 0.12833em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h2, h2, .table th.h2 {
    line-height: 1em;
    margin-top: 0.32083em;
    margin-bottom: 0.10694em;
  }
}

@media only screen and (min-width: 767px) {
  .h2, h2, .table th.h2 {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0.54444em;
    margin-bottom: 0.18148em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h2, h2, .table th.h2 {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h2, h2, .table th.h2 {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

@media only screen and (min-width: 1024px) {
  .h2, h2, .table th.h2 {
    font-size: 2.42857em;
    line-height: 1.15294em;
    margin-top: 0.43235em;
    margin-bottom: 0.14412em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h2, h2, .table th.h2 {
    line-height: 1.03765em;
    margin-top: 0.38912em;
    margin-bottom: 0.12971em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h2, h2, .table th.h2 {
    line-height: 1em;
    margin-top: 0.32426em;
    margin-bottom: 0.10809em;
  }
}

.h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
  font-size: 1.57143em;
  line-height: 1.4em;
  margin-top: 0.525em;
  margin-bottom: 0.175em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.26em;
    margin-top: 0.4725em;
    margin-bottom: 0.1575em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.19em;
    margin-top: 0.39375em;
    margin-bottom: 0.13125em;
  }
}

@media only screen and (min-width: 767px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0.22273em;
    margin-bottom: 0.66818em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.60364em;
    margin-top: 0.20045em;
    margin-bottom: 0.60136em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.51455em;
    margin-top: 0.16705em;
    margin-bottom: 0.50114em;
  }
}

@media only screen and (min-width: 1024px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0.54444em;
    margin-bottom: 0.18148em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

.h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
  font-size: 1.28571em;
  line-height: 1.08889em;
  margin-top: 0.54444em;
  margin-bottom: 0.54444em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
    line-height: 1em;
    margin-top: 0.49em;
    margin-bottom: 0.49em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
    line-height: 1em;
    margin-top: 0.40833em;
    margin-bottom: 0.40833em;
  }
}

@media only screen and (min-width: 767px) {
  .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0.22273em;
    margin-bottom: 0.66818em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
    line-height: 1.60364em;
    margin-top: 0.20045em;
    margin-bottom: 0.60136em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4 {
    line-height: 1.51455em;
    margin-top: 0.16705em;
    margin-bottom: 0.50114em;
  }
}

.h5, h5 {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h5, h5 {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h5, h5 {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 767px) {
  .h5, h5 {
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h5, h5 {
    line-height: 1em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h5, h5 {
    line-height: 1em;
  }
}

.h6, h6 {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h6, h6 {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h6, h6 {
    line-height: 1.19em;
  }
}

p, ul, ol, .nav-list li, .panel-selector li, h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector, .table, .normal {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  color: #262626;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  p, ul, ol, .nav-list li, .panel-selector li, h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector, .table, .normal {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  p, ul, ol, .nav-list li, .panel-selector li, h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector, .table, .normal {
    line-height: 1.19em;
  }
}

h3 + .nav-list li, h3 + .panel-selector li, .small.nav-list li, .small.panel-selector li, .repeater .render .strong, .bold, b {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.table th, .loud {
  color: black;
}

.quiet {
  color: #404040;
}

.hint, .repeater .render .italic, .table tfoot tr td, .italic {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
}

strong, .strong {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #604faf;
}

em, .emphasis {
  color: #282148;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-weight: 900;
}

.subtle {
  font-family: 'Open Sans',  "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #544d75;
}

.block-margins {
  margin: 0 em(19.6px) 0;
}

.repeater .render .render-holder {
  list-style: none;
  display: block;
  margin: 0;
}
.repeater .render .render-holder > li {
  display: inline-block;
  margin-left: .25rem;
}

/**
 * Header Tags:
 * `Headers` - Headers are used to separate and organize blocks of text. 
 *  You can also us `.h1`,`.h2`,`.h3`,`.h4`,`.h5`, or `.h6` 
 *  to make any text elements style like the associated header tag 
 *
 *     @example
 *     h1 Header 1 Tag
 *		small subheader
 *     h2 Header 2 Tag
 *     h3 Header 3 Tag
 *     h4 Header 4 Tag
 *     h5 Header 5 Tag 
 *     h6 Header 6 Tag
 */
h1 {
  color: #525252;
}

h6 {
  color: #666666;
}

p {
  margin-bottom: .25em;
}
@media only screen and (min-height: 320px) {
  p {
    margin-bottom: .5em;
  }
}

ul, ol {
  margin-bottom: 1em;
}
@media only screen and (min-height: 320px) {
  ul, ol {
    margin-bottom: .5em;
  }
}
@media only screen and (min-height: 0px) {
  ul, ol {
    margin-bottom: .75em;
  }
}
ul li, ol li {
  margin-bottom: .25em;
}
@media only screen and (min-height: 320px) {
  ul li, ol li {
    margin-bottom: .2em;
  }
}
@media only screen and (min-height: 0px) {
  ul li, ol li {
    margin-bottom: .1em;
  }
}
.font {
  color: #333333;
}
.font .font--example {
  background-image: url(//basehold.it/i/21);
}
.font.font-display {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
.font.font-slab {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
}
.font.font-normal {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.font.font-light {
  font-family: 'Open Sans',  "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
.font .font--name {
  color: #00386b;
}
.font .font--dropcase_2x {
  color: #4F4190;
}
.font .font--lowercase, .font .font--uppercase, .font .font--numbers {
  white-space: pre-wrap;
  letter-spacing: -.1em;
}
.font .font--lowercase {
  text-transform: lowercase;
}
.font .font--uppercase {
  text-transform: uppercase;
}
.font .ms12 {
  font-size: 9.28571em;
  line-height: 1.05538em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms12 {
    line-height: 1em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms12 {
    line-height: 1em;
  }
}

.font .ms6 {
  font-size: 3.78571em;
  line-height: 1.10943em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms6 {
    line-height: 1em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms6 {
    line-height: 1em;
  }
}

.font .ms4 {
  font-size: 2.42857em;
  line-height: 1.15294em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms4 {
    line-height: 1.03765em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms4 {
    line-height: 1em;
  }
}

.font .ms2 {
  font-size: 1.57143em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms2 {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms2 {
    line-height: 1.51455em;
  }
}

.font .ms1 {
  font-size: 1.28571em;
  line-height: 1.08889em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms1 {
    line-height: 1em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms1 {
    line-height: 1em;
  }
}

.font .ms {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms {
    line-height: 1.19em;
  }
}
@media only screen and (max-width: 1024px) {
  .texture {
    border-bottom: #e6e6e6 dashed 2px;
    margin-bottom: .5em;
    padding-bottom: 0.5em;
  }
}
.texture .texture--name {
  color: #00386b;
  line-height: 1.5em;
}
.texture .texture--name small {
  display: block;
  clear: both;
  font-size: .8em;
  margin-top: .1em;
}
.texture .texture--thumb {
  width: auto;
  border: 1px solid #b3b3b3;
  display: inline-block;
  padding: 5px;
  width: 162px;
  height: 162px;
}
@media only screen and (max-width: 1024px) {
  .texture .texture--thumb {
    float: left;
  }
}
.texture .texture--holder {
  width: 150px;
  height: 150px;
}
.texture .texture--holder.half-width {
  width: 75px;
  float: right;
}
.texture .texture--holder.third-width {
  width: 50px;
  float: right;
}
.texture .texture--uppercase {
  text-transform: uppercase;
}
.texture .texture--cite {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: font-color(#333333);
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .texture .texture--cite {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .texture .texture--cite {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) {
  .texture .texture--cite {
    float: left;
    width: calc(100% - 200px);
    margin-left: 25px;
  }
}

.order-marker {
  background-color: #4F4190;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-right: 0;
  margin-bottom: 0;
  padding: .75em 0 0 0;
  position: relative;
  top: -.25em;
  margin-right: .5em;
  text-align: center;
  box-sizing: border-box;
  text-transform: capitalize;
  line-height: 0;
  vertical-align: top;
}
.order-marker.hollow {
  background-color: transparent;
  border: 0.1em solid #4F4190;
  color: #4F4190;
}
.order-marker.inverse {
  background-color: #fff;
  color: #4F4190;
}


.button {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  background-color: #4F4190;
  color: #FFF;
  margin-bottom: 0;
}
.button:hover, .button:focus {
  background-color: #3f3473;
  color: #FFF;
}
.button.radius {
  border-radius: 6px;
}
.button.round {
  border-radius: 25px;
}
.button.icon-only .text {
  display: none;
}

.button.navigation {
  background-color: #018adb;
  color: #FFF;
}
.button.navigation:hover, .button.navigation:focus {
  background-color: #016eaf;
  color: #FFF;
}

button[disabled], button[disabled].success, button[disabled].alert, button[disabled].secondary,
button:disabled,
button.success:disabled,
button.alert:disabled,
button.secondary:disabled,
.button.disabled,
.button.disabled.success,
.button.disabled.alert,
.button.disabled.secondary,
.button.disabled:hover,
.button.disabled.success:hover,
.button.disabled.alert:hover,
.button.disabled.secondary:hover {
  background-color: #b3b3b3;
  background-image: url(../img/empty_diamond.png);
  color: #666666;
  border: 1px solid gray;
  cursor: not-allowed;
}

.input-space button[disabled], .switch-input-space button[disabled], .input-space button[disabled].success, .switch-input-space button[disabled].success, .input-space button[disabled].alert, .switch-input-space button[disabled].alert, .input-space button[disabled].secondary, .switch-input-space button[disabled].secondary, .input-space
button:disabled, .switch-input-space
button:disabled, .input-space
button:disabled.success, .switch-input-space
button:disabled.success, .input-space
button:disabled.alert, .switch-input-space
button:disabled.alert, .input-space
button:disabled.secondary, .switch-input-space
button:disabled.secondary, .input-space
.button.disabled, .switch-input-space
.button.disabled, .input-space
.button.disabled.success, .switch-input-space
.button.disabled.success, .input-space
.button.disabled.alert, .switch-input-space
.button.disabled.alert, .input-space
.button.disabled.secondary, .switch-input-space
.button.disabled.secondary, .input-space
.button.disabled:hover, .switch-input-space
.button.disabled:hover, .input-space
.button.disabled:hover.success, .switch-input-space
.button.disabled:hover.success, .input-space
.button.disabled:hover.alert, .switch-input-space
.button.disabled:hover.alert, .input-space
.button.disabled:hover.secondary, .switch-input-space
.button.disabled:hover.secondary {
  padding-top: 7px;
  padding-bottom: 7px;
}

.link.disabled, .link.disabled:hover {
  background-image: url("../img/subtlenet2.png");
  color: #666666;
  font-style: italic;
}

.nobutton {
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.85em 1em;
  margin: 0 0 1rem 0;
  font-size: 1.09375rem;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  background-color: #FFF;
  color: #333333;
  margin-bottom: 0;
}
[data-whatinput='mouse'] .nobutton {
  outline: 0;
}
.nobutton:hover, .nobutton:focus {
  background-color: #cccccc;
  color: #333333;
}
.nobutton.disabled, .nobutton.disabled:hover, .nobutton[disabled], .nobutton[disabled]:hover {
  color: #666666;
  cursor: not-allowed;
  background-color: #fff;
}

/**
* Tabs (Basic):
* `.tabs` - Group of nav that is build for a horizontal space. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*	<nav class="nav"><ul class=" tabs">
*		<li class="tabs-title icon"><a class="home"><i class="fa fa-holder"></i></a></li>
*		<li class="tabs-title"><a>Tab 2</a></li>
*		<li class="tabs-title is-active"><a >Tab 3</a></li>
*		<li class="tabs-title"><a >Tab 4</a></li>
*	</ul></nav>
*/
.tabs {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  background: #e6e6e6;
}
.tabs::before, .tabs::after {
  content: ' ';
  display: table;
}
.tabs::after {
  clear: both;
}
.tabs, .tabs .tabs-title > a {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  font-size: 0.6875rem;
}
@media only screen and (min-width: 767px) {
  .tabs, .tabs .tabs-title > a {
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .tabs, .tabs .tabs-title > a {
    font-size: 0.875rem;
  }
}
.tabs li, .tabs .tabs-title {
  background-color: #cccccc;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: inline-block;
  margin: .2em .2em 0;
}
@media only screen and (min-width: 767px) {
  .tabs li, .tabs .tabs-title {
    margin: .25em .25em 0;
    border-top-left-radius: 4.5px;
    border-top-right-radius: 4.5px;
  }
}
@media only screen and (min-width: 1024px) {
  .tabs li, .tabs .tabs-title {
    margin: .3em .3em 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}
.tabs li > a, .tabs .tabs-title > a {
  display: inline-block;
  padding: .35em .5em .45em;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 auto;
  width: 100%;
  color: #262626;
}
.tabs li > a, .tabs li > a:hover, .tabs .tabs-title > a, .tabs .tabs-title > a:hover {
  background-color: transparent;
}
@media only screen and (min-width: 767px) {
  .tabs li > a, .tabs .tabs-title > a {
    padding: .45em .75em .55em;
  }
}
@media only screen and (min-width: 1024px) {
  .tabs li > a, .tabs .tabs-title > a {
    padding: .65em 1em .75em;
  }
}
.tabs li:hover, .tabs .tabs-title:hover {
  background-color: #bfbfbf;
}
.tabs li:hover a, .tabs .tabs-title:hover a {
  color: #262626;
}
.tabs li.icon, .tabs .tabs-title.icon {
  width: 3em;
}
.tabs li.icon a, .tabs .tabs-title.icon a {
  padding-left: .5em !important;
  padding-right: .5em !important;
}
.tabs li.icon.selected, .tabs li.icon.is-active, .tabs .tabs-title.icon.selected, .tabs .tabs-title.icon.is-active {
  background-color: #fff;
}
.tabs li.icon.selected a, .tabs li.icon.is-active a, .tabs .tabs-title.icon.selected a, .tabs .tabs-title.icon.is-active a {
  color: #262626;
}
.tabs li.icon.selected a:hover, .tabs li.icon.is-active a:hover, .tabs .tabs-title.icon.selected a:hover, .tabs .tabs-title.icon.is-active a:hover {
  color: #525252;
}
.tabs li.icon.selected:hover, .tabs li.icon.is-active:hover, .tabs .tabs-title.icon.selected:hover, .tabs .tabs-title.icon.is-active:hover {
  background-color: #989898;
}
.tabs li.icon.selected:hover a, .tabs li.icon.is-active:hover a, .tabs .tabs-title.icon.selected:hover a, .tabs .tabs-title.icon.is-active:hover a {
  color: #262626;
}
.tabs li.secondary, .tabs li.visited, .tabs .tabs-title.secondary, .tabs .tabs-title.visited {
  background-color: #b3b3b3;
}
.tabs li.secondary a, .tabs li.visited a, .tabs .tabs-title.secondary a, .tabs .tabs-title.visited a {
  color: #262626;
}
.tabs li.secondary:hover, .tabs li.visited:hover, .tabs .tabs-title.secondary:hover, .tabs .tabs-title.visited:hover {
  background-color: #a6a6a6;
}
.tabs li.secondary:hover a, .tabs li.visited:hover a, .tabs .tabs-title.secondary:hover a, .tabs .tabs-title.visited:hover a {
  color: #262626;
}
.tabs li.disabled, .tabs li.disabled:hover, .tabs .tabs-title.disabled, .tabs .tabs-title.disabled:hover {
  background-image: url("../img/subtlenet2.png");
}
.tabs li.disabled a, .tabs li.disabled, .tabs li.disabled:hover a, .tabs li.disabled:hover, .tabs .tabs-title.disabled a, .tabs .tabs-title.disabled, .tabs .tabs-title.disabled:hover a, .tabs .tabs-title.disabled:hover {
  color: #666666;
  cursor: not-allowed;
  opacity: .5;
}
.tabs li.visited, .tabs .tabs-title.visited {
  background-image: url("../img/cross-hatched.png");
}
.tabs li.locked a:before, .tabs li.disabled a:before, .tabs .tabs-title.locked a:before, .tabs .tabs-title.disabled a:before {
  padding-right: .5em;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.tabs li.locked a:before, .tabs .tabs-title.locked a:before {
  content: "\f023";
}
.tabs li.disabled a:before, .tabs .tabs-title.disabled a:before {
  content: "\f05e";
}
.tabs li.selected, .tabs li.is-active, .tabs .tabs-title.selected, .tabs .tabs-title.is-active {
  background-image: none;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
  cursor: context-menu;
  bottom: -1px;
  position: relative;
}
.tabs li.selected a, .tabs li.is-active a, .tabs .tabs-title.selected a, .tabs .tabs-title.is-active a {
  color: #262626;
  cursor: context-menu;
}
@media only screen and (max-width: 320px) {
  .tabs {
    width: 100%;
    clear: both;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    margin: .2em 0;
  }
  .tabs li {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .tabs li.icon {
    -webkit-box-flex: 0 0 2em;
    -moz-box-flex: 0 0 2em;
    -webkit-flex: 0 0 2em;
    -ms-flex: 0 0 2em;
    flex: 0 0 2em;
  }
}

/**
* Tabs (modifications):
* `.tabs+[modification]` - Tabs can be modified with `.secondary`,`.disabled`,`.visited`,`.locked`
* 
*   @example
*	<nav class="nav"><ul class="tabs">
*		<li class="tabs-title visited locked"><a class="home">visited locked</a></li>
*		<li class="tabs-title visited locked"><a>visited locked</a></li>
*		<li class="tabs-title selected"><a >Selected</a></li>
*		<li class="tabs-title secondary"><a >Secondary</a></li>
*		<li class="tabs-title disabled"><a >Disabled</a></li>
*	</ul></nav>
*/
.tabs.tabs-primary {
  border: 0;
  background: none;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
  clear: both;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.51455em;
  }
}

.tabs.tabs-primary li {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.tabs.tabs-primary li a {
  padding: .55em .25em .75em;
}
.tabs.tabs-primary li a:after {
  border-bottom: 8px solid #00386b;
}
.tabs.tabs-primary li.icon {
  -webkit-box-flex: 0 0 2em;
  -moz-box-flex: 0 0 2em;
  -webkit-flex: 0 0 2em;
  -ms-flex: 0 0 2em;
  flex: 0 0 2em;
}
@media only screen and (min-width: 320px) {
  .tabs.tabs-primary {
    font-size: 1em;
    line-height: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.26em;
  }
}
@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary {
    display: block;
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary li a {
    padding: 1em .5em;
  }
}
@media only screen and (min-width: 1024px) {
  .tabs.tabs-primary {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.60364em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.51455em;
  }
}

@media only screen and (min-width: 1200px) {
  .tabs.tabs-primary {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.30667em;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.23407em;
  }
}

.tabs.tabs-primary:after {
  content: "";
  display: table;
  clear: both;
}
.tabs.tabs-primary li {
  position: relative;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: #fff;
  border-top: 1px #999999 solid;
  border-bottom: 0.45em #999999 solid;
  border-left: 1px #999999 solid;
  border-right: 1px #999999 solid;
  margin: 0;
  display: block;
  float: left;
}
.tabs.tabs-primary li a {
  white-space: normal;
  padding: .5em .25em;
  color: #262626;
}
@media only screen and (min-width: 320px) {
  .tabs.tabs-primary li a {
    white-space: nowrap;
  }
}
@media only screen and (min-width: 767px) {
  .tabs.tabs-primary li a {
    padding: 1.25em .75em;
  }
}
.tabs.tabs-primary li:hover {
  background-color: #fff;
  border-color: #4F4190;
}
.tabs.tabs-primary li:hover a {
  color: #4F4190;
}
.tabs.tabs-primary li.sucsess {
  background-color: #14B057;
  border-right: 0 none;
  border-left: 0 none;
  border-top: 0 none;
}
.tabs.tabs-primary li.sucsess a {
  color: #fff;
}
.tabs.tabs-primary li.sucsess:hover {
  background-color: #fff;
  border-color: #14B057;
}
.tabs.tabs-primary li.sucsess:hover a {
  color: #14B057;
}
.tabs.tabs-primary li.selected {
  background-color: #4F4190;
  border-color: #4F4190;
  border-bottom-color: #00386b;
  border-right: 0 none;
  border-left: 0 none;
  bottom: 0;
}
.tabs.tabs-primary li.selected a {
  color: #fff;
}
.tabs.tabs-primary li.selected a:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  /* width: 10%; */
  margin-left: -10px;
  border-style: solid;
  border-color: transparent;
  border-width: 0px 8px;
  border-bottom: 10px solid #00386b;
}
.tabs.tabs-primary li.selected:hover {
  background-color: #4F4190;
}
.tabs.tabs-primary li.selected:hover a {
  color: #fff;
}
.tabs.tabs-primary li.disabled, .tabs.tabs-primary li.disabled:hover {
  border-color: #b3b3b3;
  background: url("../img/subtlenet2.png") repeat;
}
.tabs.tabs-primary li.disabled a, .tabs.tabs-primary li.disabled, .tabs.tabs-primary li.disabled:hover a, .tabs.tabs-primary li.disabled:hover {
  color: #999999;
  cursor: not-allowed;
}
.tabs.tabs-primary li.icon.selected {
  background-color: #4F4190;
}
.tabs.tabs-primary li.icon.selected a {
  color: #fff;
}
.tabs.tabs-primary.reverse {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.51455em;
  }
}

.tabs.tabs-primary.reverse li {
  border-top-width: .45em;
  border-bottom-width: 1px;
}
.tabs.tabs-primary.reverse li.selected {
  border-color: #4F4190;
  border-top-color: #00386b;
}
.tabs.tabs-primary.reverse li.selected a:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: auto;
  left: 50%;
  margin-left: -10px;
  border-style: solid;
  border-color: transparent;
  border-width: 0px 8px;
  border-top: 10px solid #00386b;
  border-bottom: 0 none;
}
@media only screen and (min-width: 320px) {
  .tabs.tabs-primary.reverse {
    font-size: 1em;
    line-height: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
    margin: 0;
  }
}
@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.26em;
  }
}
@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 320px) {
  .tabs.tabs-primary.reverse li.selected a:after {
    border-top: 8px solid #00386b;
  }
}
@media only screen and (min-width: 767px) {
  .tabs.tabs-primary.reverse {
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1em;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1em;
  }
}


.overlap {
  background-color: #cccccc;
  background-image: url("../img/textured_paper.png"), url("../img/bottom-shade.png"), url("../img/top-shade.png");
  background-position: top right,bottom right,right -1px;
  background-repeat: repeat,repeat-x,repeat-x;
  margin-bottom: .25rem;
  border-bottom: 5px solid #5b518c;
}
.overlap .tabs {
  padding-top: .25em;
  border: 0;
  background: transparent none;
  overflow: hidden;
}
.overlap .tabs li, .overlap .tabs .tabs-title {
  border: 1px solid #747084;
  border-bottom: 0;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  margin-bottom: 0;
  vertical-align: bottom;
}
.overlap .tabs li.selected, .overlap .tabs li.is-active, .overlap .tabs .tabs-title.selected, .overlap .tabs .tabs-title.is-active {
  margin-bottom: -1px;
  padding-bottom: 3px;
  background: #5b518c;
  border-color: #5b518c;
  z-index: 1000;
  vertical-align: bottom;
}
.page-overlap .overlap .tabs li.selected, .page-overlap .overlap .tabs li.is-active, .page-overlap .overlap .tabs .tabs-title.selected, .page-overlap .overlap .tabs .tabs-title.is-active {
  background-image: url(../img/billie-holiday-speck.png);
}
.overlap .tabs li.selected a, .overlap .tabs li.is-active a, .overlap .tabs .tabs-title.selected a, .overlap .tabs .tabs-title.is-active a {
  color: #fff;
}
.overlap .tabs li.secondary, .overlap .tabs .tabs-title.secondary {
  border-color: #b3b3b3;
}

.with-group-sections.error .overlap, .paper-page.error .overlap {
  border-bottom-color: #c32231;
}
.with-group-sections.error .overlap li.selected, .with-group-sections.error .overlap li.is-active, .with-group-sections.error .overlap .tabs-title.selected, .with-group-sections.error .overlap .tabs-title.is-active, .paper-page.error .overlap li.selected, .paper-page.error .overlap li.is-active, .paper-page.error .overlap .tabs-title.selected, .paper-page.error .overlap .tabs-title.is-active {
  background-color: #c32231;
  border-color: #c32231;
}
.with-group-sections.warning .overlap, .paper-page.warning .overlap {
  border-bottom-color: #E08514;
}
.with-group-sections.warning .overlap li.selected, .with-group-sections.warning .overlap li.is-active, .with-group-sections.warning .overlap .tabs-title.selected, .with-group-sections.warning .overlap .tabs-title.is-active, .paper-page.warning .overlap li.selected, .paper-page.warning .overlap li.is-active, .paper-page.warning .overlap .tabs-title.selected, .paper-page.warning .overlap .tabs-title.is-active {
  background-color: #E08514;
  border-color: #E08514;
}
.with-group-sections.success .overlap, .paper-page.success .overlap {
  border-bottom-color: #14B057;
}
.with-group-sections.success .overlap li.selected, .with-group-sections.success .overlap li.is-active, .with-group-sections.success .overlap .tabs-title.selected, .with-group-sections.success .overlap .tabs-title.is-active, .paper-page.success .overlap li.selected, .paper-page.success .overlap li.is-active, .paper-page.success .overlap .tabs-title.selected, .paper-page.success .overlap .tabs-title.is-active {
  background-color: #14B057;
  border-color: #14B057;
}
.with-group-sections.info .overlap, .paper-page.info .overlap {
  border-bottom-color: #a6a6a6;
}
.with-group-sections.info .overlap li.selected, .with-group-sections.info .overlap li.is-active, .with-group-sections.info .overlap .tabs-title.selected, .with-group-sections.info .overlap .tabs-title.is-active, .paper-page.info .overlap li.selected, .paper-page.info .overlap li.is-active, .paper-page.info .overlap .tabs-title.selected, .paper-page.info .overlap .tabs-title.is-active {
  background-color: #a6a6a6;
  border-color: #a6a6a6;
}
.with-group-sections.highlighted .overlap, .paper-page.highlighted .overlap {
  border-bottom-color: #4F4190;
}
.with-group-sections.highlighted .overlap li.selected, .with-group-sections.highlighted .overlap li.is-active, .with-group-sections.highlighted .overlap .tabs-title.selected, .with-group-sections.highlighted .overlap .tabs-title.is-active, .paper-page.highlighted .overlap li.selected, .paper-page.highlighted .overlap li.is-active, .paper-page.highlighted .overlap .tabs-title.selected, .paper-page.highlighted .overlap .tabs-title.is-active {
  background-color: #4F4190;
  border-color: #4F4190;
}
.with-group-sections.disabled .overlap, .paper-page.disabled .overlap {
  border-bottom-color: #cccccc;
}
.with-group-sections.disabled .overlap li.selected, .with-group-sections.disabled .overlap li.is-active, .with-group-sections.disabled .overlap .tabs-title.selected, .with-group-sections.disabled .overlap .tabs-title.is-active, .paper-page.disabled .overlap li.selected, .paper-page.disabled .overlap li.is-active, .paper-page.disabled .overlap .tabs-title.selected, .paper-page.disabled .overlap .tabs-title.is-active {
  background-color: #cccccc;
  border-color: #cccccc;
}

/**
* Tabs Overlap:
* `.tabs.overlap` -  Overlap gives shallow space to give a small layer effect
* 
*   @example
*	<nav class="overlap nav"><ul class="tabs ">
*		<li class="tab-title icon"><a class="home"><i class="fa fa-holder"></i></a></li>
*		<li class="tab-title "><a>Tab 2</a></li>
*		<li class="tab-title is-active"><a >Tab 3</a></li>
*		<li class="tab-title "><a >Tab 4</a></li>
*	</ul></nav>
*/
/**
* Navigation List:
* `.nav-list ul li` - A collection of navigation links perfect for side navigation or a collection of external links. Add `.selected` to the `li` to highlight the nav link.
* 
*   @example
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*/
.nav-list a, .panel-selector a, .nav-list .list-item-wrapper, .panel-selector .list-item-wrapper {
  display: table;
  width: 100%;
  text-align: right;
  color: #525252;
}
.nav-list a .text, .panel-selector a .text, .nav-list a i, .panel-selector a i, .nav-list .list-item-wrapper .text, .panel-selector .list-item-wrapper .text, .nav-list .list-item-wrapper i, .panel-selector .list-item-wrapper i {
  display: table-cell;
}
.nav-list a .text, .panel-selector a .text, .nav-list .list-item-wrapper .text, .panel-selector .list-item-wrapper .text {
  text-align: left;
}
.nav-list a i, .panel-selector a i, .nav-list .list-item-wrapper i, .panel-selector .list-item-wrapper i {
  width: 2em;
}
.nav-list li, .panel-selector li {
  padding: .25rem 1rem;
}
.nav-list li .text + .fa, .panel-selector li .text + .fa, .nav-list li .fa + .text, .panel-selector li .fa + .text {
  padding-left: .5em;
}
.nav-list li i.fa-holder-dynamic:before, .panel-selector li i.fa-holder-dynamic:before, .nav-list li.dynamic i.fa-holder:before, .panel-selector li.dynamic i.fa-holder:before {
  content: "";
}
.nav-list li:hover, .panel-selector li:hover {
  background-color: #e6e6e6;
}
.nav-list li:hover a, .panel-selector li:hover a {
  color: #333333;
}
.nav-list li.selected, .panel-selector li.selected {
  background-color: #dad6ec;
}
.nav-list li.selected, .panel-selector li.selected, .nav-list li.selected:hover a, .panel-selector li.selected:hover a {
  color: #262626;
  cursor: pointer;
  cursor: context-menu;
}
.nav-list ul, .panel-selector ul {
  margin: 0;
  width: 100%;
  display: block;
  position: relative;
  list-style-type: none;
}

/**
* Nav List (With Headlines):
* `.nav-list ul li` - The nav list changes styles depending on the headline tag in front of the nav-list. or simply add the class `large`, `medium`, or `small`  
* 
*   @example
*	<h1>H1 header tag</h1>
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*	<br>
*	<div>This list has the medium class</div>
*	<nav class="nav-list medium">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*	<br>
*	<h3>H3 header tag</h3>
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*/
h1 + .nav-list, h1 + .panel-selector, .large.nav-list, .large.panel-selector {
  border-top: #4F4190 2px solid;
  margin-top: -0.75rem;
  padding-top: 0.7rem;
  margin-bottom: 1.5rem;
}

h2 + .nav-list, h2 + .panel-selector, .medium.nav-list, .medium.panel-selector {
  margin-bottom: 1rem;
  padding-top: .5rem;
  margin-top: -.5rem;
  border-top: 2px solid #b3b3b3;
}

h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector {
  margin-bottom: 0.7rem;
}
h3 + .nav-list li, h3 + .panel-selector li, .small.nav-list li, .small.panel-selector li {
  border: 1px solid #cccccc;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0;
  margin-top: -1px;
}

.nav-list.large, .large.panel-selector, .nav-list.medium, .medium.panel-selector, .nav-list.small, .small.panel-selector {
  margin-top: 0;
}

/**
* Nav List (Checklist):
* `.nav-checklist` - add class to the nav to change the .nav-list from forward links to a list with states of `.selected`, `.success`, `.warning`, `.error`
* 
*   @example
*	<nav class="nav-list nav-checklist">
*	<ul>
*	<li class="">
*	<a><span class="text">Nav List Item 1(blank)</span><i class="fa fa-holder-dynamic"></i></a>
*	<li  class="selected">
*	<a><span class="text">Nav List Item 2(selected)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="sucess">
*	<a><span class="text">Nav List Item 3(sucess)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	</ul>
*	</nav>
*/
.nav-list.nav-checklist li, .nav-checklist.panel-selector li {
  border: 1px solid #e6e6e6;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0;
  margin-top: -1px;
  background-image: url(../img/empty_stripe.png);
}
.nav-list.nav-checklist li i.fa-holder-dynamic:before, .nav-checklist.panel-selector li i.fa-holder-dynamic:before, .nav-list.nav-checklist li.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.dynamic i.fa-holder:before {
  content: "";
}
.nav-list.nav-checklist li:hover, .nav-checklist.panel-selector li:hover {
  background-image: none;
}
.nav-list.nav-checklist li.selected, .nav-checklist.panel-selector li.selected {
  border-bottom-width: 1px;
  border-color: #8ef2b9;
  background-image: none;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  color: #262626;
}
.nav-list.nav-checklist li.selected i.fa-holder-dynamic:before, .nav-checklist.panel-selector li.selected i.fa-holder-dynamic:before, .nav-list.nav-checklist li.selected.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.selected.dynamic i.fa-holder:before {
  content: "";
}
.nav-list.nav-checklist li.selected i, .nav-checklist.panel-selector li.selected i {
  color: white;
}
.nav-list.nav-checklist li.completed i.fa-holder-dynamic:before, .nav-checklist.panel-selector li.completed i.fa-holder-dynamic:before, .nav-list.nav-checklist li.completed.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.completed.dynamic i.fa-holder:before {
  content: "";
}
.nav-list.nav-checklist li.completed i, .nav-checklist.panel-selector li.completed i {
  color: #14B057;
}

.nav-list.nav-checklist li.error, .nav-checklist.panel-selector li.error {
  background-color: #f7cfd3;
  border-color: #f0abb2;
  border-bottom-width: 1;
  color: #262626;
}
.nav-list.nav-checklist li.error:hover, .nav-checklist.panel-selector li.error:hover {
  background-color: #ee9fa7;
}
.nav-list.nav-checklist li.error.selected, .nav-checklist.panel-selector li.error.selected {
  color: white;
}
.nav-list.nav-checklist li.error.selected:hover, .nav-checklist.panel-selector li.error.selected:hover {
  color: #474747;
}
.nav-list.nav-checklist li.warning, .nav-checklist.panel-selector li.warning {
  background-color: #fbe7ce;
  border-color: #f7d5aa;
  border-bottom-width: 1;
  color: #262626;
}
.nav-list.nav-checklist li.warning:hover, .nav-checklist.panel-selector li.warning:hover {
  background-color: #f6cf9d;
}
.nav-list.nav-checklist li.warning.selected, .nav-checklist.panel-selector li.warning.selected {
  color: #474747;
}
.nav-list.nav-checklist li.warning.selected:hover, .nav-checklist.panel-selector li.warning.selected:hover {
  color: #474747;
}
.nav-list.nav-checklist li.success, .nav-checklist.panel-selector li.success {
  background-color: #c7f9dc;
  border-color: #9cf4c2;
  border-bottom-width: 1;
  color: #262626;
}
.nav-list.nav-checklist li.success:hover, .nav-checklist.panel-selector li.success:hover {
  background-color: #8ef2b9;
}
.nav-list.nav-checklist li.success.selected, .nav-checklist.panel-selector li.success.selected {
  color: white;
}
.nav-list.nav-checklist li.success.selected:hover, .nav-checklist.panel-selector li.success.selected:hover {
  color: #474747;
}
.nav-list.nav-checklist li.info, .nav-checklist.panel-selector li.info {
  background-color: #ededed;
  border-color: #e0e0e0;
  border-bottom-width: 1;
  color: #262626;
}
.nav-list.nav-checklist li.info:hover, .nav-checklist.panel-selector li.info:hover {
  background-color: #dbdbdb;
}
.nav-list.nav-checklist li.info.selected, .nav-checklist.panel-selector li.info.selected {
  color: #474747;
}
.nav-list.nav-checklist li.info.selected:hover, .nav-checklist.panel-selector li.info.selected:hover {
  color: #474747;
}
.nav-list.nav-checklist li.highlighted, .nav-checklist.panel-selector li.highlighted {
  background-color: #dad6ec;
  border-color: #bdb6de;
  border-bottom-width: 1;
  color: #262626;
}
.nav-list.nav-checklist li.highlighted:hover, .nav-checklist.panel-selector li.highlighted:hover {
  background-color: #b4acda;
}
.nav-list.nav-checklist li.highlighted.selected, .nav-checklist.panel-selector li.highlighted.selected {
  color: white;
}
.nav-list.nav-checklist li.highlighted.selected:hover, .nav-checklist.panel-selector li.highlighted.selected:hover {
  color: #474747;
}
.nav-list.nav-checklist li.disabled, .nav-checklist.panel-selector li.disabled, .nav-list.nav-checklist li.disabled:hover, .nav-checklist.panel-selector li.disabled:hover {
  cursor: none;
  cursor: not-allowed;
  background-color: #cccccc;
  color: #999999;
  background-image: url(../img/empty_stripe.png);
}
.nav-list.nav-checklist li.disabled a, .nav-checklist.panel-selector li.disabled a, .nav-list.nav-checklist li.disabled a:hover, .nav-checklist.panel-selector li.disabled a:hover {
  color: #999999;
  cursor: none;
  cursor: not-allowed;
}

/**
* Nav List (Checklist w/ States):
* `.nav-checklist.statename` - add class to the nav to change the list item to reflect the state with `.warning`, `.error`, `.highlighted`...
* 
*   @example
*	<nav class="nav-list nav-checklist">
*	<ul>
*	<li class="">
*	<a><span class="text">Nav List Item 1(blank)</span><i class="fa fa-holder-dynamic"></i></a>
*	<li  class="selected">
*	<a><span class="text">Nav List Item 2(selected and warning)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="highlighted">
*	<a><span class="text">Nav List Item 3(highlighted)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="warning">
*	<a><span class="text">Nav List Item 4(warning)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li class="error">
*	<a><span class="text">Nav List Item 5(error)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li >
*	<li class="disabled">
*	<a><span class="text">Nav List Item 5(disabled)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li >
*	</ul>
*	</nav>
*/
.section-nav {
  width: 100%;
  display: block;
  position: relative;
  border: 0px solid #b3b3b3;
}
.split-content .section-nav {
  margin-left: -1.07143rem;
  margin-right: -1.07143rem;
  padding-left: 1.07143rem;
  padding-right: 1.07143rem;
}
.with-group-sections .section-nav, .paper-page .section-nav {
  margin-left: 0;
  margin-right: 0;
}
.section-nav .text {
  padding-top: 6.25px;
  padding-bottom: 6.25px;
  -webkit-transition: padding 1.5s;
  /* Safari */
  transition: padding 1.5s;
}
.section-nav .circle {
  position: absolute;
  -webkit-transition: all 1.5s;
  /* Safari */
  transition: all 1.5s;
  overflow: hidden;
  width: 50px;
  height: 50px;
  background: #6959b4;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  border: 4px solid #fff;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
}
.section-nav .circle i {
  font-size: 25px;
  line-height: 1em;
  margin: 10.5px;
  color: #fff;
  -webkit-transition: all 1.5s;
  /* Safari */
  transition: all 1.5s;
  -ms-transform: translate(0px, 0);
  /* IE 9 */
  -webkit-transform: translate(0px, 0);
  /* Safari */
  transform: translate(0px, 0);
}
.section-nav .circle i:before {
  vertical-align: bottom;
}
.section-nav.forward {
  border-top-width: 1px;
  background: url("../img/billie-holiday.png") repeat top right, url("../img/top-shade.png") repeat-x top right;
  margin-top: 37.5px;
  border-top-width: 2px;
}
.section-nav.forward i.fa-holder-dynamic:before, .section-nav.forward.dynamic i.fa-holder:before {
  content: "";
}
.section-nav.forward .circle {
  right: 12.5px;
  bottom: 8.33333px;
}
.section-nav.forward .circle i {
  margin: 10.5px 13px;
}
.section-nav.forward .text {
  padding-right: 75px;
  text-align: right;
}
.section-nav.back {
  background: url("../img/billie-holiday.png") repeat top right, url("../img/bottom-shade.png") repeat-x bottom right;
  margin-bottom: 37.5px;
  border-bottom-width: 2px;
}
.section-nav.back i.fa-holder-dynamic:before, .section-nav.back.dynamic i.fa-holder:before {
  content: "";
}
.section-nav.back .text {
  padding-left: 75px;
  text-align: left;
}
.section-nav.back .circle {
  left: 12.5px;
  top: 8.33333px;
}
.section-nav:hover .circle {
  background: #4f4190;
  border: 4px solid #fff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
}
.section-nav:hover .circle i {
  color: #fff;
}
.section-nav.disabled {
  cursor: context-menu;
}
.section-nav.disabled .text {
  color: #999999;
}
.section-nav.disabled.back .text {
  padding-left: 1.5rem;
}
.section-nav.disabled.forward .text {
  padding-right: 1.5rem;
}
.section-nav.disabled.back .circle {
  top: 28px;
}
.section-nav.disabled.back .circle i {
  -ms-transform: translate(-50px, -12.5px);
  /* IE 9 */
  -webkit-transform: translate(-50px, -12.5px);
  /* Safari */
  transform: translate(-50px, -12.5px);
}
.section-nav.disabled.forward .circle {
  bottom: 28px;
}
.section-nav.disabled.forward .circle i {
  -ms-transform: translate(50px, -12.5px);
  /* IE 9 */
  -webkit-transform: translate(50px, -12.5px);
  /* Safari */
  transform: translate(50px, -12.5px);
}
.section-nav.disabled .circle, .section-nav.disabled.hover.circle {
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  background-color: #999999;
  background-image: url("../img/empty_diamond.png");
  width: 12px;
  height: 12px;
  border-radius: 6PX;
  border: 2px solid #fff;
}

/**
* Circle Section Nav (forward & back):
* `.section-nav with .forward or .back` - A wizard-like page nav. Alter the position of the circle button by adding  `.forward` or `.back` to the `.section-nav` container.
* 
*   @example
*	<div class="page with-group-sections"><div class="section-nav back">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Back</div>
*		</a>
*	</div>
*	<div class="page-wrapper">
*	<section class="group-section">
*		<h1 class="with-underline">Page Title </h1>
*		<p> hello I am some content on this page</p>
*	</div>
*	</section>
*	<div class="section-nav forward">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Forward</div>
*		</a>
*	</div></div>
*/
/**
* Circle Section Nav (Disabled):
* `.section-nav with .disabled` - Adding `.disabled` to the `.section-nav` container with style the circle nav accordingly.
* 
*   @example
*	<div class="page"><div class="section-nav back disabled">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Back</div>
*		</a>
*	</div>
*	<div class="page-wrapper">
*	<section class="group-section">
*		<h1 class="with-underline">Page Title (Disabled)</h1>
*		<p> Somethig on this page has disabled forward navigation</p>
*	</div>
*	</section>
*	<div class="section-nav forward disabled">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Forward</div>
*		</a>
*	</div></div>
*/
.answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based {
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
  margin-bottom: .25em;
}
@media only screen and (min-height: 320px) {
  .answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based {
    margin-bottom: .5em;
  }
}
@media only screen and (min-height: 480px) {
  .answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based {
    margin-bottom: .5em;
  }
}
@media only screen and (min-height: 600px) {
  .answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based {
    margin-bottom: .5em;
  }
}
@media only screen and (min-width: 1024px) {
  .answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based {
    margin-bottom: .5em;
  }
}
.answer input,
.answer textarea,
.answer select,
.answer button,
.answer .button, .answer-group input,
.answer-group textarea,
.answer-group select,
.answer-group button,
.answer-group .button, .question input,
.question textarea,
.question select,
.question button,
.question .button, .question-group input,
.question-group textarea,
.question-group select,
.question-group button,
.question-group .button, .question-inline input,
.question-inline textarea,
.question-inline select,
.question-inline button,
.question-inline .button, .question-grid-based input,
.question-grid-based textarea,
.question-grid-based select,
.question-grid-based button,
.question-grid-based .button {
  margin-bottom: 0;
}

.input-holder [type='text'], .input-holder [type='password'], .input-holder [type='date'], .input-holder [type='datetime'], .input-holder [type='datetime-local'], .input-holder [type='month'], .input-holder [type='week'], .input-holder [type='email'], .input-holder [type='number'], .input-holder [type='search'], .input-holder [type='tel'], .input-holder [type='time'], .input-holder [type='url'], .input-holder [type='color'], .input-holder textarea, .input-holder button, .input-holder .button {
  font-size: 0.875rem;
  line-height: 1.09375rem;
  padding: 0.65625rem 0.65625rem;
  height: 2.1875rem;
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder [type='text'], .input-holder [type='password'], .input-holder [type='date'], .input-holder [type='datetime'], .input-holder [type='datetime-local'], .input-holder [type='month'], .input-holder [type='week'], .input-holder [type='email'], .input-holder [type='number'], .input-holder [type='search'], .input-holder [type='tel'], .input-holder [type='time'], .input-holder [type='url'], .input-holder [type='color'], .input-holder textarea, .input-holder button, .input-holder .button {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-holder [type='text'], .input-holder [type='password'], .input-holder [type='date'], .input-holder [type='datetime'], .input-holder [type='datetime-local'], .input-holder [type='month'], .input-holder [type='week'], .input-holder [type='email'], .input-holder [type='number'], .input-holder [type='search'], .input-holder [type='tel'], .input-holder [type='time'], .input-holder [type='url'], .input-holder [type='color'], .input-holder textarea, .input-holder button, .input-holder .button {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

.input-holder select, .input-holder option {
  font-size: 1rem;
  line-height: 1rem;
  height: 2.1875rem;
}
@media only screen and (max-width: 1024px) {
  .input-holder select, .input-holder option {
    padding: 0 .5rem;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder select, .input-holder option {
    height: 1.96875rem;
  }
}

@media only screen and (min-width: 767px) {
  .input-holder select, .input-holder option {
    padding: 0 .5rem;
  }
}
@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-holder select, .input-holder option {
    height: 1.75rem;
  }
}

.input-holder .prefix, .input-holder .postfix, .input-holder .value {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  padding: .5em;
  margin-top: 0;
  color: #666666;
  border: 1px solid transparent;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .input-holder .prefix, .input-holder .postfix, .input-holder .value {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder .prefix, .input-holder .postfix, .input-holder .value {
    line-height: 1.19em;
  }
}

.input-holder .prefix, .input-holder .postfix {
  background: url("../img/paper-texture.png");
  border: 1px solid #b3b3b3;
}

.question .label-holder, .question .input-holder, .question .message-holder, .question .value-holder, .question .hint {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.question .label-holder::before, .question .label-holder::after, .question .input-holder::before, .question .input-holder::after, .question .message-holder::before, .question .message-holder::after, .question .value-holder::before, .question .value-holder::after, .question .hint::before, .question .hint::after {
  content: ' ';
  display: table;
}
.question .label-holder::after, .question .input-holder::after, .question .message-holder::after, .question .value-holder::after, .question .hint::after {
  clear: both;
}

.label-holder {
  white-space: nowrap;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0.7em;
  margin-bottom: 0.35em;
  position: relative;
  background-color: transparent;
  color: #525252;
}
.label-holder label, .label-holder .label, .label-holder .text {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .label-holder label, .label-holder .label, .label-holder .text {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .label-holder label, .label-holder .label, .label-holder .text {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .label-holder {
    line-height: 1.26em;
    margin-top: 0.63em;
    margin-bottom: 0.315em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .label-holder {
    line-height: 1.19em;
    margin-top: 0.525em;
    margin-bottom: 0.2625em;
  }
}

@media only screen and (max-width: 767px) {
  .label-holder {
    white-space: normal;
  }
}
.label-holder .text {
  padding-right: 1rem;
}

.required-holder {
  display: none;
  height: 1em;
  width: 1em;
  position: relative;
  margin-left: -1em;
  margin-right: -1em;
  color: #333333;
}
.required-holder i.fa-holder-dynamic {
  position: absolute;
  top: 0;
  left: 0;
  font-size: .75em;
}

.required .required-holder, .answer.error .required-holder, .question.error .required-holder, .answer.warning .required-holder, .question.warning .required-holder, .answer.success .required-holder, .question.success .required-holder, .answer.info .required-holder, .question.info .required-holder, .answer.highlighted .required-holder, .question.highlighted .required-holder, .answer.disabled .required-holder, .question.disabled .required-holder, .repeater.required > .label-holder .required-holder {
  background-color: transparent;
  display: inline-block;
}

.required .required-holder {
  color: #E08514;
}
.required .required-holder i.fa-holder-dynamic:before, .required .required-holder.dynamic i.fa-holder:before {
  content: "";
}

.input-holder, .value-holder {
  margin-bottom: 0;
}

.input-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.input-holder::before, .input-holder::after {
  content: ' ';
  display: table;
}
.input-holder::after {
  clear: both;
}

.input-space, .switch-input-space, .value-space {
  padding-left: 0;
  padding-right: 0;
}

.input-space-label {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #666666;
  padding: 0.65625rem 0.65625rem;
  height: 2.1875rem;
  padding-left: 1em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .input-space-label {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-space-label {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-space-label {
    padding: 0.30625rem 0.4375rem;
    height: 1.96875rem;
  }
}

@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-space-label {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

.message-holder > small, .message-holder > span {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  display: none;
  padding: .375rem .5625rem .5625rem;
  margin-top: -1px;
  margin-bottom: .25rem;
  clear: both;
  color: #FFF;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .message-holder > small, .message-holder > span {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .message-holder > small, .message-holder > span {
    line-height: 1.51455em;
  }
}

.message-holder > small i, .message-holder > span i {
  margin-right: .5rem;
}

.hint {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .hint {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .hint {
    line-height: 1.51455em;
  }
}

.answer:disabled, .answer[disabled], .answer-group:disabled, .answer-group[disabled], .question:disabled, .question[disabled], .question-group:disabled, .question-group[disabled], .question-inline:disabled, .question-inline[disabled], .question-grid-based:disabled, .question-grid-based[disabled], .answer .chosen-disabled.chosen-container .chosen-choices, .question .chosen-disabled.chosen-container .chosen-choices {
  background-color: #b3b3b3;
  background-image: url(../img/empty_stripe.png);
  color: #666666;
}

.answer .required, .question .required, .question-inline .required, .question-grid-based .required {
  display: none;
}
.answer.required .required, .question.required .required, .question-inline.required .required, .question-grid-based.required .required {
  display: inline-block;
  width: 100%;
}

.hint .error, .hint .warning, .hint .success, .hint .info, .hint .highlighted, .hint .disabled {
  padding: .25em .5em;
}

.error textarea, .error select, .error input, .error datalist, .warning textarea, .warning select, .warning input, .warning datalist, .success textarea, .success select, .success input, .success datalist, .info textarea, .info select, .info input, .info datalist, .highlighted textarea, .highlighted select, .highlighted input, .highlighted datalist, .disabled textarea, .disabled select, .disabled input, .disabled datalist {
  margin-bottom: 0;
}

.message-holder > .error, .message-holder > .warning, .message-holder > .success, .message-holder > .info, .message-holder > .highlighted, .message-holder > .disabled {
  display: none;
}

.error .message-holder > .error, .message-holder > .error.make-visible, .warning .message-holder > .warning, .message-holder > .warning.make-visible, .success .message-holder > .success, .message-holder > .success.make-visible, .info .message-holder > .info, .message-holder > .info.make-visible, .highlighted .message-holder > .highlighted, .message-holder > .highlighted.make-visible, .disabled .message-holder > .disabled, .message-holder > .disabled.make-visible {
  display: block;
}

.input-space a.button i, .switch-input-space a.button i, .input-space button i, .switch-input-space button i, .input-space .button i, .switch-input-space .button i {
  margin-right: .2rem;
}

/**
* Questions -Required:
* `.question` - This is a standard formating for an input question. 
* 
*   @example
*	<div class="question required">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question Dropdown Title (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 value">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*/
/**
* Questions - States:
* `.question + .warning + error +...` - Modify the container with `.required`, `.warning`, '.error', and other states. Modifiers change the icons and control the visiblity of the message holder.
* 
*   @example
*	<div class="question warning wildcard">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 value">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="info"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
**/
.question-inline {
  display: block;
  margin-bottom: .75rem;
}
.question-inline .label-holder {
  padding-top: .5em;
  padding-bottom: .5em;
  margin: 0;
}
.question-inline .label-holder, .question-inline .input-holder {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  float: left;
}
.question-inline .label-holder * {
  white-space: nowrap;
  padding-right: 1rem;
}
.question-inline .input-holder {
  margin-bottom: .25rem;
}
.question-inline .input-holder .input-space, .question-inline .input-holder .switch-input-space {
  padding-left: 0;
}
.question-inline .message-holder, .question-inline .hint {
  display: block;
  clear: left;
}
.question-inline .hint {
  border-top: 1px solid #e6e6e6;
  padding: .25rem;
  background-color: #eceaf6;
}

/**
* Questions - Inline:
* `.question-inline` - questions when there is a need can be made to be inline so the text box will follow the label. These questions will revert to the base question style when on smaller phones. 
*  Modify any `.question` with the added class of  `.question-inline`
* 
*   @example
*	<div class="question question-inline">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question Dropdown Title (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 post-fix">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*/
.question-grid-based {
  /*.label-holder{padding-left:0 !important;
  	label{display:table;margin-bottom:0;
  	.text,.seq,.required-holder{
  		display: table-cell;
  		padding:0;
  	}
  	.seq,.required-holder{
  	   
  		margin-left:0;
  		margin-right:0;
  	}
  	}
  }*/
  max-width: 600px;
}
.question-grid-based .input-holder input:focus, .question-grid-based .input-holder select:focus {
  -webkit-box-shadow: inset 0px 0px 2px 2px #4F4190;
  -moz-box-shadow: inset 0px 0px 2px 2px #4F4190;
  box-shadow: inset 0px 0px 2px 2px #4F4190;
}
.question-grid-based .label-holder .text {
  white-space: normal;
}
.question-grid-based .label-holder .hint, .question-grid-based .label-holder .message-holder, .question-grid-based .input-holder .hint, .question-grid-based .input-holder .message-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  display: block;
  margin: 0 0 .3em 0;
  padding: 0;
  line-height: 1;
}
.question-grid-based .label-holder .hint::before, .question-grid-based .label-holder .hint::after, .question-grid-based .label-holder .message-holder::before, .question-grid-based .label-holder .message-holder::after, .question-grid-based .input-holder .hint::before, .question-grid-based .input-holder .hint::after, .question-grid-based .input-holder .message-holder::before, .question-grid-based .input-holder .message-holder::after {
  content: ' ';
  display: table;
}
.question-grid-based .label-holder .hint::after, .question-grid-based .label-holder .message-holder::after, .question-grid-based .input-holder .hint::after, .question-grid-based .input-holder .message-holder::after {
  clear: both;
}
.question-grid-based .label-holder, .question-grid-based .input-holder {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 40em) {
  .question-grid-based .label-holder, .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.question-grid-based .label-holder:last-child:not(:first-child), .question-grid-based .input-holder:last-child:not(:first-child) {
  float: right;
}
@media only screen and (min-width: 767px) {
  .question-grid-based .label-holder, .question-grid-based .input-holder {
    display: inline-block;
  }
  .question-grid-based .label-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based .input-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based .input-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .label-holder {
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-2-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based.span-2-col .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .input-holder {
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-2-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based.span-2-col .input-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .label-holder {
    width: 16.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-3-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based.span-3-col .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .input-holder {
    width: 83.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-3-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 767px) {
  .question-grid-based.span-3-col .input-holder:last-child:not(:first-child) {
    float: right;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based .label-holder, .question-grid-based .input-holder {
    display: inline-block;
  }
  .question-grid-based .label-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based .input-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based .input-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .label-holder {
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-2-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based.span-2-col .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .input-holder {
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-2-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based.span-2-col .input-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .label-holder {
    width: 16.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-3-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based.span-3-col .label-holder:last-child:not(:first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .input-holder {
    width: 83.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-3-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .question-grid-based.span-3-col .input-holder:last-child:not(:first-child) {
    float: right;
  }
}
.question-grid-based.label-position-top .label-holder, .question-grid-based.label-position-top .input-holder {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 0;
}
@media screen and (min-width: 40em) {
  .question-grid-based.label-position-top .label-holder, .question-grid-based.label-position-top .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.question-grid-based.label-position-top .label-holder:last-child:not(:first-child), .question-grid-based.label-position-top .input-holder:last-child:not(:first-child) {
  float: right;
}
.question-grid-based.label-position-left .label-holder, .question-grid-based.label-position-left .input-holder {
  float: left;
}
.question-grid-based.label-position-right .label-holder, .question-grid-based.label-position-right .input-holder, .question-grid-based.label-position-right.span-2-col .label-holder, .question-grid-based.label-position-right.span-2-col .input-holder, .question-grid-based.label-position-right.span-3-col .label-holder, .question-grid-based.label-position-right.span-3-col .input-holder {
  float: right;
}
.question-grid-based.label-position-right .label-holder {
  padding-left: 0;
}
.question-grid-based.label-position-right .input-holder {
  padding-right: 0;
}
.question-grid-based.label-position-right.single-switch:after {
  content: '';
  display: table;
  clear: both;
  float: none;
}
.question-grid-based.label-position-right.single-switch .input-holder {
  margin-right: -7.5em;
  width: 7em;
}
.question-grid-based.label-position-right.single-switch .input-holder .input-space, .question-grid-based.label-position-right.single-switch .input-holder .switch-input-space {
  padding-right: 0;
}
.question-grid-based.label-position-right.single-switch .label-holder {
  padding-left: 6em;
  width: 100%;
}
.question-grid-based.label-position-right.single-switch.tiny-switches .label-holder {
  margin-top: .3rem;
  padding-left: 4rem;
}
.question-grid-based.label-position-right.single-switch.small-switches .label-holder {
  margin-top: .4rem;
  padding-left: 5rem;
}
.question-grid-based.label-position-right.single-switch.large-switches .label-holder {
  margin-top: .75rem;
  padding-left: 6.5rem;
}
.question-grid-based.indent-1 .input-holder:before, .question-grid-based.indent-2 .input-holder:before, .question-grid-based.indent-3 .input-holder:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.question-grid-based.indent-1 .input-holder, .question-grid-based.indent-2 .input-holder, .question-grid-based.indent-3 .input-holder {
  position: relative;
}
.question-grid-based.indent-1 .input-holder:before, .question-grid-based.indent-2 .input-holder:before, .question-grid-based.indent-3 .input-holder:before {
  color: #cccccc;
  content: "\f178";
  letter-spacing: .25em;
  position: absolute;
  top: 0;
  left: 0;
  padding: .75em 0;
}
.question-grid-based.indent-1 .input-holder {
  padding-left: 1.5rem;
}
.question-grid-based.indent-2 .input-holder {
  padding-left: 2.5rem;
}
.question-grid-based.indent-3 .input-holder {
  padding-left: 3.5rem;
}
.question-grid-based.indent-2 .input-holder:before {
  content: "\f178\f054";
}
.question-grid-based.indent-3 .input-holder:before {
  content: "\f178\f178\f054";
}

.seq {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #4F4190;
  vertical-align: top;
  display: inline-block;
  margin-top: -.75em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .seq {
    line-height: 1.96em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .seq {
    line-height: 1.85111em;
  }
}

.seq:hover {
  color: #413a62;
  text-decoration: underline;
}

.question-group.fluid-align {
  display: table !important;
  width: 100%;
}
.question-group.fluid-align .question-grid-based {
  display: table-row !important;
}
.question-group.fluid-align .question-grid-based .label-holder, .question-group.fluid-align .question-grid-based .input-holder {
  display: table-cell !important;
  vertical-align: top;
  float: none !important;
}
.question-group.fluid-align .question-grid-based .label-holder {
  padding-top: .89rem;
  padding-right: 0;
}
.question-group.fluid-align .question-grid-based .input-holder {
  min-width: 20%;
}

.group-1up .input-space .group-2up .input-space, .group-1up .switch-input-space .group-2up .input-space, .group-1up .input-space .group-2up .switch-input-space, .group-1up .switch-input-space .group-2up .switch-input-space, .group-3up .input-space, .group-3up .switch-input-space {
  width: 100%;
  float: left;
}
.group-1up .input-space .group-2up .input-space:last-child:not(:first-child), .group-1up .switch-input-space .group-2up .input-space:last-child:not(:first-child), .group-1up .input-space .group-2up .switch-input-space:last-child:not(:first-child), .group-1up .switch-input-space .group-2up .switch-input-space:last-child:not(:first-child), .group-3up .input-space:last-child:not(:first-child), .group-3up .switch-input-space:last-child:not(:first-child) {
  float: right;
}
@media only screen and (min-width: 767px) {
  .group-2up .input-space, .group-2up .switch-input-space, .group-3up .input-space, .group-3up .switch-input-space {
    width: 50%;
    float: left;
  }
  .group-2up .input-space:last-child:not(:first-child), .group-2up .switch-input-space:last-child:not(:first-child), .group-3up .input-space:last-child:not(:first-child), .group-3up .switch-input-space:last-child:not(:first-child) {
    float: right;
  }
}
@media only screen and (min-width: 1024px) {
  .group-3up .input-space, .group-3up .switch-input-space {
    width: 33.33333%;
    float: left;
  }
  .group-3up .input-space:last-child:not(:first-child), .group-3up .switch-input-space:last-child:not(:first-child) {
    float: right;
  }
}

.file-upload-holder {
  height: 37px;
}

.file-upload {
  position: relative;
  overflow: hidden;
  margin: 0 10px;
}

.file-upload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}


.repeater {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.repeater::before, .repeater::after {
  content: ' ';
  display: table;
}
.repeater::after {
  clear: both;
}
.repeater .render, .repeater .question-group, .repeater .repeater-action {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 40em) {
  .repeater .render, .repeater .question-group, .repeater .repeater-action {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.repeater .render:last-child:not(:first-child), .repeater .question-group:last-child:not(:first-child), .repeater .repeater-action:last-child:not(:first-child) {
  float: right;
}
.repeater.required > .label-holder .required-holder {
  color: #E08514;
}
.repeater.required > .label-holder .required-holder i.fa-holder-dynamic:before, .repeater.required > .label-holder .required-holder.dynamic i.fa-holder:before {
  content: "";
}
.repeater .edit, .repeater .clear, .repeater .delete, .repeater .add, .repeater .set, .repeater .save {
  font-size: .8rem;
  line-height: 1rem;
  padding: .5rem .4rem;
  text-decoration: none;
  height: 1.8rem;
}
.repeater .edit .text, .repeater .clear .text, .repeater .delete .text, .repeater .add .text, .repeater .set .text, .repeater .save .text {
  text-transform: capitalize;
}
.repeater .edit .fa + .text, .repeater .clear .fa + .text, .repeater .delete .fa + .text, .repeater .add .fa + .text, .repeater .set .fa + .text, .repeater .save .fa + .text {
  padding-left: .25rem;
}
.repeater .edit, .repeater .clear, .repeater .delete, .repeater .set, .repeater .save {
  color: #404040;
}
.repeater .edit:hover, .repeater .clear:hover, .repeater .delete:hover, .repeater .set:hover, .repeater .save:hover {
  color: black;
}
.repeater .edit:hover .text, .repeater .clear:hover .text, .repeater .delete:hover .text, .repeater .set:hover .text, .repeater .save:hover .text {
  text-decoration: underline;
}
.repeater .render, .repeater .question-group {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}
.repeater .render {
  position: relative;
  display: block;
  border-top: 1px dotted #e6e6e6;
  border-bottom: 1px dotted #e6e6e6;
}
.repeater .render a.button, .repeater .render button {
  margin-bottom: 0;
}
.repeater .render + .render {
  border-top: 0px none;
}
.repeater .render .render-holder {
  margin: 0 17rem 0  0;
  padding: 0.5rem 0;
}
.repeater .render .comma-after:after {
  content: ",";
  padding-left: .25em;
  display: inline;
}
.repeater .render .render-actions {
  position: absolute;
  display: inline-block;
  height: 2rem;
  top: 0;
  right: 0;
  padding: .5rem 0;
}
@media only screen and (max-width: 1024px) {
  .repeater .render .render-actions .text {
    display: none;
  }
}
.repeater .render .starred {
  color: #14B057;
}
.repeater .render .break {
  border-left: 2px solid #b3b3b3;
  padding-left: .5rem;
  margin-left: .25rem;
}
.repeater .render .error {
  color: #c32231;
}
.repeater .render .warning {
  color: #c32231;
}
@media only screen and (max-width: 767px) {
  .repeater .render .edit, .repeater .render .delete, .repeater .render .set {
    display: inline-block;
    float: left;
  }
  .repeater .render .render-holder {
    margin-right: 5rem;
    font-size: .9rem;
  }
}
.repeater .render {
  max-height: 1000px;
  -webkit-transition: max-height 0.8s;
  -moz-transition: max-height 0.8s;
  transition: max-height 0.8s;
  overflow: hidden;
}
.repeater .edit-mode--show {
  display: none;
}
.repeater.edit-mode .render {
  max-height: 0;
}
.repeater.edit-mode .edit-mode--show {
  display: inline;
  display: initial;
}
.repeater.edit-mode .edit-mode--hide {
  display: none;
}
.repeater .question-group {
  padding-top: 1.5em;
  padding-bottom: 1.85em;
  border: 2px dotted #e1e1e1;
  margin-top: .5em;
  border-radius: .5em;
  border-top: 2px soliddesaturate(#6959b4, 40%);
  border-bottom: 2px solid #878787;
  background-image: url(../img/empty_diamond.png);
  background-color: #ededed;
  position: relative;
}
.repeater .question-group .answer.required .required-holder, .repeater .question-group .question.required .required-holder {
  color: #4F4190;
}
.repeater .question-group .required-message {
  font-size: 0.6875rem;
  padding: .25em .5em;
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #878787;
  color: #fff;
  -webkit-transition: background-color 0.8s;
  -moz-transition: background-color 0.8s;
  transition: background-color 0.8s;
}
.repeater.edit-mode .question-group {
  border: 2px dotted #ebdadc;
  margin-top: .5em;
  border-radius: .5em;
  border-top: 2px soliddesaturate(#de404e, 40%);
  border-bottom: 2px solid #b16d73;
  background-image: url(../img/empty_diamond.png);
  background-color: #fcf0e2;
}
.repeater.edit-mode .question-group .required-message {
  background-color: #999999;
}
.repeater .repeater-action {
  position: relative;
  display: block;
  width: 100%;
  height: 2rem;
  margin-top: -2rem;
}
.repeater .repeater-action .add-new-repeater {
  display: inline-block;
  position: relative;
  text-align: right;
  float: right;
  margin-top: -1em;
  padding: .5rem;
}
.repeater .repeater-action .add-new-repeater .text {
  color: #4F4190;
  display: inline-block;
  padding-right: 2rem;
  font-size: 1rem;
}
.repeater .repeater-action .save, .repeater .repeater-action .clear {
  font-size: 1rem;
  padding: .35rem .75rem .45rem;
  border-radius: 4px;
  height: auto;
  border: 2px solid #4F4190;
  font-weight: 900;
}
.repeater .repeater-action .save {
  display: inline-block;
  position: relative;
  text-align: right;
  float: right;
  background-color: #4F4190;
  color: white;
  text-decoration: none;
  margin-right: 1em;
  padding: .5rem 1.75rem .65rem;
  font-size: 1.25rem;
}
.repeater .repeater-action .save:hover {
  background-color: #14B057;
  text-decoration: none;
}
.repeater .repeater-action .clear {
  float: left;
  background-color: white;
  border-radius: 4px;
  margin-left: 1em;
  border-color: #6959b4;
}
.repeater .repeater-action .clear:hover {
  background-color: #e6e6e6;
  border-color: #4f4190;
}

.edit-mode.repeater .repeater-action .clear {
  background-color: #666666;
  border-color: #4d4d4d;
  color: #fff;
}
.edit-mode.repeater .repeater-action .clear:hover {
  background-color: #404040;
  border-color: #333333;
  color: #fff;
}

.question-group .render .message-holder .warning, .question-group .render .message-holder .error {
  display: none;
}
.question-group .render .message-holder .warningsmall, .question-group .render .message-holder .warningspan, .question-group .render .message-holder .errorsmall, .question-group .render .message-holder .errorspan {
  margin-bottom: .65rem;
}
.question-group .render.warning .message-holder .warning {
  display: block;
}
.question-group .render.error .message-holder .error {
  display: block;
}


.close-bar {
  position: absolute;
  width: 100%;
  text-align: right;
  border-top: 5px solid #666666;
  top: -1px;
  right: 0;
  left: 0;
}

.close-bar:hover {
  border-color: #333333;
}
.close-bar:hover .close-button {
  background-color: #333333;
}

.close-bar .close-button {
  background: #666666;
  top: 0;
  right: 0;
  color: white;
  padding: .25em;
}

.close-bar .close-button:hover {
  background-color: #333333;
}

.close-bar .close-button .fa {
  color: #FFF;
}

.error .close-bar:hover, .error .close-bar {
  border-color: #7b2b32;
}
.error .close-bar:hover .close-button, .error .close-bar:hover .close-button:hover, .error .close-bar .close-button, .error .close-bar .close-button:hover {
  background: #7b2b32;
}
.error .close-bar:hover .close-button .fa, .error .close-bar:hover .close-button:hover .fa, .error .close-bar .close-button .fa, .error .close-bar .close-button:hover .fa {
  color: #FFF;
}

.warning .close-bar:hover, .warning .close-bar {
  border-color: #8a5c24;
}
.warning .close-bar:hover .close-button, .warning .close-bar:hover .close-button:hover, .warning .close-bar .close-button, .warning .close-bar .close-button:hover {
  background: #8a5c24;
}
.warning .close-bar:hover .close-button .fa, .warning .close-bar:hover .close-button:hover .fa, .warning .close-bar .close-button .fa, .warning .close-bar .close-button:hover .fa {
  color: #FFF;
}

.success .close-bar:hover, .success .close-bar {
  border-color: #247245;
}
.success .close-bar:hover .close-button, .success .close-bar:hover .close-button:hover, .success .close-bar .close-button, .success .close-bar .close-button:hover {
  background: #247245;
}
.success .close-bar:hover .close-button .fa, .success .close-bar:hover .close-button:hover .fa, .success .close-bar .close-button .fa, .success .close-bar .close-button:hover .fa {
  color: #FFF;
}

.info .close-bar:hover, .info .close-bar {
  border-color: #6d6d6d;
}
.info .close-bar:hover .close-button, .info .close-bar:hover .close-button:hover, .info .close-bar .close-button, .info .close-bar .close-button:hover {
  background: #6d6d6d;
}
.info .close-bar:hover .close-button .fa, .info .close-bar:hover .close-button:hover .fa, .info .close-bar .close-button .fa, .info .close-bar .close-button:hover .fa {
  color: #FFF;
}

.highlighted .close-bar:hover, .highlighted .close-bar {
  border-color: #413a62;
}
.highlighted .close-bar:hover .close-button, .highlighted .close-bar:hover .close-button:hover, .highlighted .close-bar .close-button, .highlighted .close-bar .close-button:hover {
  background: #413a62;
}
.highlighted .close-bar:hover .close-button .fa, .highlighted .close-bar:hover .close-button:hover .fa, .highlighted .close-bar .close-button .fa, .highlighted .close-bar .close-button:hover .fa {
  color: #FFF;
}

.disabled .close-bar:hover, .disabled .close-bar {
  border-color: gray;
}
.disabled .close-bar:hover .close-button, .disabled .close-bar:hover .close-button:hover, .disabled .close-bar .close-button, .disabled .close-bar .close-button:hover {
  background: gray;
}
.disabled .close-bar:hover .close-button .fa, .disabled .close-bar:hover .close-button:hover .fa, .disabled .close-bar .close-button .fa, .disabled .close-bar .close-button:hover .fa {
  color: #FFF;
}

.page-message {
  background-color: #4F4190;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.page-message .fa-holder-dynamic:before {
  content: "";
}
.page-message::before, .page-message::after {
  content: ' ';
  display: table;
}
.page-message::after {
  clear: both;
}
.page-message .message-container {
  display: flex;
  margin: 0 1em 0 0;
  align-items: center;
}
.page-message .icon-holder {
  flex: none;
  color: #666666;
  font-size: 1.5em;
  padding: 0 1em 0 0;
}

table a.button, table button, table .inline-list, table .nobutton {
  margin: 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.table tr + tr td, .table tr + tr th {
  border-top: #e6e6e6 1px solid;
}
.table thead tr:last-child th {
  border-bottom: 2px solid #4F4190;
}
.table tbody tr:nth-child(even) {
  background-color: transparent;
}
.table td, .table th {
  text-align: left;
  padding: .25rem;
}
.table td .color-highlighted, .table th .color-highlighted {
  color: #4F4190;
}
.table td small, .table th small {
  font-size: 80%;
  color: #666666;
}
.table th {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  vertical-align: bottom;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .table th {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .table th {
    line-height: 1.19em;
  }
}

.table th.h1, .table thh2, .table thh3, .table thh4 {
  margin-top: 0;
  clear: both;
  margin-bottom: -.15em;
}
.table th .with-underline {
  border-bottom: 1px dotted #e6e6e6;
}
.table td {
  vertical-align: middle;
}
.table button, .table .button, .table input {
  margin: 0 !important;
}

.table tfoot tr td {
  border: 0;
  border-top: 1px solid #b3b3b3;
  font-size: .9rem;
}

.banded tbody tr:nth-child(even) td, .striped tbody tr:nth-child(even) td {
  background-image: url("../img/cream_pixels_alt.png");
  background-color: #e3e0f1;
}

.striped td:nth-child(even) {
  background-image: url("../img/cream_pixels_blue.png");
}

.striped th:nth-child(even), .striped tr:nth-child(even) td:nth-child(even) {
  background-image: url("../img/cream_pixels_altblue.png");
}

.striped.desaturate td:nth-child(even) {
  background-image: url("../img/cream_pixels_alt.png");
}

.striped.desaturate th:nth-child(even), .striped.desaturate tr:nth-child(even) td:nth-child(even) {
  background-image: url("../img/cream_pixels_altdark.png");
}

.striped tbody tr + tr td, .banded tbody tr + tr td {
  border-top: 0px solid;
}
.striped th, .striped td, .banded th, .banded td {
  padding: .25rem .25rem .25rem .55rem;
}
.striped tfoot td, .striped tfoot td:nth-child(even), .banded tfoot td, .banded tfoot td:nth-child(even) {
  color: #333333;
  border-top: 1px solid #4F4190;
  background-color: #cccccc;
}

/**
* Tables (Banded):
* `.banded` - There are two high styled tables `.banded` or `.striped`.
* 
*   @example
*	<table class="table banded">
*		<thead>
*			<tr>
*				<th>table header</th>
*				<th>table header</th>
*				<th>table header</th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*			<tr>
*				<td> row 3  cell A</td>
*				<td> row 3  cell B</td>
*				<td> row 3  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
/**
* Tables (Striped):
* ` .striped` - Table with the class`.striped`.
* 
*   @example
*	<table class="table striped">
*		<thead>
*			<tr>
*				<th>table header</th>
*				<th>table header</th>
*				<th>table header</th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
/**
* Tables (Striped Desaturate):
* ` .striped.desaturate` - Table with the class`.striped.desaturate` will produce a table that is cross colored with only greys.
* 
*   @example
*	<table class="table striped desaturate">
*		<thead>
*			<tr>
*				<th>table header</th>
*				<th>table header</th>
*				<th>table header</th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
.table tr.seperator td, .table tr.seperator:nth-child(even) td:nth-child(odd) {
  padding-top: 2.2px;
  padding-top: 0.1375rem;
  padding-bottom: 2.2px;
  padding-bottom: 0.1375rem;
  /* can be treated like a fallback */
  background-color: #604faf;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #7060b7, #56479e);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #604faf;
  background: linear-gradient(to left, #7060b7, #56479e);
  border-top: #56479e 1px solid;
  border-bottom: #56479e 2px solid;
  color: #fff;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: .75rem;
}

/**
* Tables Row(Seperator):
* ` .seperator` - Table with the class`.striped`.
* 
*   @example
*	<table class="table striped">
*		<thead>
*			<tr>
*				<th>table header</th>
*				<th>table header</th>
*				<th>table header</th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator">
*				<td colspan='3'> Separator</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
.table tr.error.seperator td, .table tr.error.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #dc3443;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #df4856, #d02434);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #dc3443;
  background: linear-gradient(to left, #df4856, #d02434);
  border-top: #d02434 1px solid;
  border-bottom: #d02434 2px solid;
  color: #fff;
}

.table tr.warning.seperator td, .table tr.warning.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #ec982f;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #eea244, #ea8b15);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #ec982f;
  background: linear-gradient(to left, #eea244, #ea8b15);
  border-top: #ea8b15 1px solid;
  border-bottom: #ea8b15 2px solid;
  color: #262626;
}

.table tr.success.seperator td, .table tr.success.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #19da6c;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #27e679, #16c461);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #19da6c;
  background: linear-gradient(to left, #27e679, #16c461);
  border-top: #16c461 1px solid;
  border-bottom: #16c461 2px solid;
  color: #262626;
}

.table tr.info.seperator td, .table tr.info.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #b3b3b3;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #bbbbbb, #a1a1a1);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #b3b3b3;
  background: linear-gradient(to left, #bbbbbb, #a1a1a1);
  border-top: #a1a1a1 1px solid;
  border-bottom: #a1a1a1 2px solid;
  color: #262626;
}

.table tr.highlighted.seperator td, .table tr.highlighted.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #604faf;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #7060b7, #56479e);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #604faf;
  background: linear-gradient(to left, #7060b7, #56479e);
  border-top: #56479e 1px solid;
  border-bottom: #56479e 2px solid;
  color: #fff;
}

.table tr.disabled.seperator td, .table tr.disabled.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #d4d4d4;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #d8d8d8, #bebebe);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #d4d4d4;
  background: linear-gradient(to left, #d8d8d8, #bebebe);
  border-top: #bebebe 1px solid;
  border-bottom: #bebebe 2px solid;
  color: #262626;
}

/**
* Tables Row(Seperator + State):
* ` .seperator.error` - An Error State on a table sep.
* 
*   @example
*	<table class="table striped">
*		<thead>
*			<tr>
*				<th>table header</th>
*				<th>table header</th>
*				<th>table header</th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator info">
*				<td colspan='3'> Separator With Info</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator success">
*				<td colspan='3'> Separator With success</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator error">
*				<td colspan='3'> Separator With Error</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator warning">
*				<td colspan='3'> Separator With warning</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator disabled">
*				<td colspan='3'> Separator With disabled</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
.table thead tr:last-child th.sortable {
  border-bottom: none 0;
}

.table thead th.sortable {
  vertical-align: top;
}

.sortableheader {
  background-color: gray;
}

th.sortable {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 0px none transparent;
  background-color: gray !important;
  background-image: none !important;
}
th.sortable:hover {
  background-color: #737373 !important;
}
th.sortable select {
  font-size: 0.92857rem;
  margin: 0 0 0 .5em;
  padding-left: 2em;
  border: 0 none transparent;
  background-color: #737373;
  height: 100%;
  top: 0;
  bottom: 0;
  position: absolute;
  left: auto;
  width: 100%;
  font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #FFF;
  right: 0;
  vertical-align: top;
  padding-top: 0;
}
th.sortable select:hover {
  background-color: #4d4d4d;
}
th.sortable .sort {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: inline-block;
  background-color: #666666;
  padding: 0 3px;
  vertical-align: middle;
}
th.sortable .sort .fa-sort {
  color: #cccccc;
  top: .5rem;
  position: relative;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  text-align: center;
}
th.sortable .sort .fa-sort:before {
  content: "\f0dc";
}
th.sortable .sort .fa-sort.selected {
  color: #E08514;
}
th.sortable .sort.sorttwoways .fa-sort {
  position: relative;
}
th.sortable .sort.sorttwoways .fa-sort:before {
  content: "\f0de";
}
th.sortable .sort.sorttwoways .fa-sort + .fa-sort:before {
  content: "\f0dd";
}
th.sortable .sort.sorttwoways .fa-sort + .fa-sort {
  position: absolute;
  top: auto;
  bottom: 0.5rem;
}
th.sortable.selected .sort {
  background-color: #4d4d4d;
}
th.sortable.selected .sorttoggle .fa-sort {
  color: #E08514;
}
th.sortable.selected.asc .sorttoggle .fa-sort:before {
  content: "\f0de";
}
th.sortable.selected.desc .sorttoggle .fa-sort:before {
  content: "\f0dd";
}
th.sortable .text {
  color: white;
  padding: .25rem .5rem 0rem 1.25rem;
  white-space: normal;
  display: block;
  line-height: 1.25;
  min-height: 3em;
}
@media only screen and (min-width: 1024px) {
  th.sortable .text {
    padding: 0.5rem 0.625rem 0.25rem 2rem;
  }
}
th.sortable:hover.text {
  color: #e6e6e6;
}
th.sortable .has-tip {
  border: none 0;
}

.firefoxfix {
  position: initial;
  height: 100%;
}

/**
* Tables (Sortable):
* `.banded or .striped` - tables witha soratable table header. 
*  Just add the class of the column to the table `.col1` and the sort direction `.sort-asc` or `.sort-desc`.
* 
*   @example
*	<table class="table striped  sort-asc col1">
*		<thead class="sortableheader">
*			<tr>
*				<th class="col1 sortable">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttoggle">
*                        	<a class="fa fa-sort"></a>
*                        	</span>
*                        	<a class="text">Table Header </a>
*                        </div>
*                 </th>
*				<th class="col2 sortable selected asc">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttoggle">
*                        	<a class="fa fa-sort"></a>
*                        	</span>
*                        	<a  class="text">Toggle Sorter </a>
*                        </div>
*                 </th>
*				<th class="col3 sortable selected asc">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttwoways">
*                        	<a class="fa fa-sort selected"></a><a class="fa fa-sort"></a>
*                        	</span>
*                        	<a  class="text">Long Table<br>Header </a>
*                        </div>
*                 </th>
*			</tr>
*		</thead>
*		<tbody>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr>
*				<td> row 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/
td.icon {
  padding: .25rem .25rem .25rem .25rem;
  text-align: center;
  vertical-align: middle;
  width: 1%;
}
td.icon i {
  margin: 0 auto;
}

tr.error td, td.error {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #c32231 !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #e66f7a !important;
}

td.error {
  border: solid 1px;
}

tr.warning td, td.warning {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #E08514 !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #f2b66c !important;
}

td.warning {
  border: solid 1px;
}

tr.success td, td.success {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #14B057 !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #56ec96 !important;
}

td.success {
  border: solid 1px;
}

tr.info td, td.info {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #a6a6a6 !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #c9c9c9 !important;
}

td.info {
  border: solid 1px;
}

tr.highlighted td, td.highlighted {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #4F4190 !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #8f83c7 !important;
}

td.highlighted {
  border: solid 1px;
}

tr.disabled td, td.disabled {
  background-image: url("../img/cream_pixels.png");
  font-weight: 900;
  background-color: #cccccc !important;
  color: #000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #e0e0e0 !important;
}

td.disabled {
  border: solid 1px;
}

/**
* Table States Cells:
* `td.state-name` - quickly color table cells. 
* 
*   @example
*	<table class="table">
*		<tr>
*			<td class="error icon"><i class="fa fa-holder"></i></td>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="">Text</td>
*			<td class="warning"><i class="fa fa-holder"></i>Warning</td>
*		</tr>
*		<tr>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="info icon"><i class="fa fa-holder"></i></td>
*			<td class="">Text</td>
*			<td class="info"><i class="fa fa-holder"></i>&nbsp;Info</td>
*		</tr>
*		<tr>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="warning icon"><i class="fa fa-holder"></i></td>
*			<td class="error">Error</td>
*			<td class=""><i class="fa fa-holder"></i>&nbsp;Text</td>
*		</tr>
*		<tr>
*			<td class="success icon"><i class="fa fa-holder"></i></td>
*			<td class="info icon"><i class="fa fa-holder"></i></td>
*			<td class="success">Success</td>
*			<td class=""><i class="fa fa-holder"></i>&nbsp;text</td>
*		</tr>
*	</table>
*/
/**
* Table States - Rows:
* `tr.state` - quickly color table rows with the states. 
* 
*   @example
*	<table class="table striped">
*		<tr class="success">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class=""></td>
*			<td class="">Cell Data in success Row</td>
*			<td class="">Icon is Dynamic</td>
*		</tr>
*		<tr class="warning">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class=""></td>
*			<td class="">Cell Data in Warning Row</td>
*			<td class="error">I am an error cell</td>
*		</tr>
*		<tr class="error">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class="">Icon is Dynamic</td>
*			<td class="">Cell Data in Error Row</td>
*			<td class="">Cell Data</td>
*		</tr>
*	</table>
*/
.bar {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
}
.bar .action-btn {
  text-transform: lowercase;
  padding: .2rem .4rem .2rem .5rem;
  font-size: 1rem;
  right: 0;
  position: absolute;
  display: inline-block;
}
.bar.close {
  top: -2px;
}
.bar.close .action-btn {
  top: -1.1rem;
  color: #4F4190;
}
.bar.jumpToTop {
  bottom: -2px;
}
.bar.jumpToTop .action-btn {
  bottom: -1rem;
  color: #666666;
}

.collapsable-panel {
  position: relative;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  margin-bottom: 1rem;
  display: none;
}
.collapsable-panel::before, .collapsable-panel::after {
  content: ' ';
  display: table;
}
.collapsable-panel::after {
  clear: both;
}
.collapsable-panel .bar.close {
  border-top: 2px solid #4F4190;
}
.collapsable-panel .bar.close .action-btn {
  background-color: white;
}
.collapsable-panel .bar.jumpToTop {
  border-bottom: 2px solid #666666;
}
.collapsable-panel .bar.jumpToTop .action-btn {
  background-color: white;
}
.collapsable-panel .content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 2rem 1rem;
  z-index: 0;
}
@media screen and (min-width: 40em) {
  .collapsable-panel .content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.collapsable-panel .content:last-child:not(:first-child) {
  float: right;
}
.collapsable-panel.inset {
  background-color: white;
  background: url("../img/billie-holiday.png") repeat top right;
  border: 0 none;
}
.collapsable-panel.inset .content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 3.5rem 1.5rem;
  z-index: 0;
}
@media screen and (min-width: 40em) {
  .collapsable-panel.inset .content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.collapsable-panel.inset .content:last-child:not(:first-child) {
  float: right;
}
.collapsable-panel.inset .bar.close {
  border-top: 7px solid #4F4190;
  top: -2px;
}
.collapsable-panel.inset .bar.close .action-btn {
  top: 0;
  color: white;
  background-color: #4F4190;
}
.collapsable-panel.inset .bar.jumpToTop {
  bottom: -2px;
  border-bottom: 7px solid #9a9a9a;
}
.collapsable-panel.inset .bar.jumpToTop .action-btn {
  bottom: 0;
  color: white;
  background-color: #9a9a9a;
}

[data-bind="click:panelShow"], .accordion .toggle {
  margin: 0 auto .5rem;
  position: relative;
  z-index: 1000;
}

h1 + div > .collapsable-panel {
  margin-bottom: 1.5rem;
  margin-top: -1.5rem;
}

table + div > .collapsable-panel {
  margin-top: -1rem;
  margin-bottom: 0.7rem;
}

/**
* Collapsable Panels:
* `.collapsable-panel` - a container element which naturaly is hiden and reveals when it is prompted. This element is great for `read more` links when the content is small.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="row">
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in a collapse panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel inset" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in an inset collapse panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*	</div>
*/
.collapsable-panel.error {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.error.inset {
  background-color: #fbe7e9;
}
.collapsable-panel.error.inset .bar.close .action-btn {
  color: #fff;
}
.collapsable-panel.warning {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.warning.inset {
  background-color: #fdf3e7;
}
.collapsable-panel.warning.inset .bar.close .action-btn {
  color: #262626;
}
.collapsable-panel.success {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.success.inset {
  background-color: #e3fcee;
}
.collapsable-panel.success.inset .bar.close .action-btn {
  color: #fff;
}
.collapsable-panel.info {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.info.inset {
  background-color: #f6f6f6;
}
.collapsable-panel.info.inset .bar.close .action-btn {
  color: #262626;
}
.collapsable-panel.highlighted {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.highlighted.inset {
  background-color: #eceaf6;
}
.collapsable-panel.highlighted.inset .bar.close .action-btn {
  color: #fff;
}
.collapsable-panel.disabled {
  background-color: transparent;
  border: 0 none transparent;
}
.collapsable-panel.disabled.inset {
  background-color: #fafafa;
}
.collapsable-panel.disabled.inset .bar.close .action-btn {
  color: #262626;
}

/**
* Collapsable Panel (State):
* `.collapsable-panel` - Collapse panels can be used with states and the panels subtly color with the state colors.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="row">
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel warning" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in Panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel error inset" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in Inset Panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*	</div>
*/
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.accordion {
  border: 0px none transparent;
}
.accordion .collapsable-panel {
  display: block;
}
.accordion .toggle .fa {
  color: #604faf;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.accordion .toggle .fa.fa-holder:before {
  content: "";
}
.accordion .toggle .text {
  color: #525252;
  padding-left: .5rem;
}
.accordion .toggle:hover .fa {
  color: #4f4190;
}
.accordion .toggle:hover .text {
  color: #333333;
}
.accordion .selected .toggle .fa {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #4f4190;
}

/**
* Accordion (requires Collapsable Panel SCSS):
* `.accordion` - Accordions are built from a group of `Collapsable Panels` and are never full hidden like the collapsable panel. By default only one `panel` of the accordian can be open at a time.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="accordion">
*		<div class="selected">
*			<h2 class="toggle" data-bind="click:panelShow"><i class="fa fa-holder"></i><span class="text">Header and Toggle Area (Open)</span></h2>
*			<div class="collapsable-panel ">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> close</a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<p>Content</p>
*						</div>
*					</div>
*				</div>
*				<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> top</a>
*				</div>
*			</div>
*		</div>
*		<div class="">
*			<h2 class="toggle" data-bind="click:panelShow"><i class="fa fa-holder"></i><span class="text">Header and Toggle Area (Closed)</span></h2>
*		</div>
*	</div>
*/
.panel-selector-holder {
  display: block;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex !important;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-content: strech;
  -moz-align-content: strech;
  -ms-align-content: strech;
  align-content: strech;
  -webkit-align-items: strech;
  -moz-align-items: strech;
  -ms-align-items: strech;
  align-items: strech;
}

.panel-selector {
  max-height: 15em;
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  overflow: auto;
  border: 1px solid #b3b3b3;
  margin-left: -1px;
  -webkit-box-flex: felx-start 1 auto;
  -moz-box-flex: felx-start 1 auto;
  -webkit-flex: felx-start 1 auto;
  -ms-flex: felx-start 1 auto;
  flex: felx-start 1 auto;
}
.panel-selector.active-focus {
  -moz-box-shadow: inset 0 0 10px #4F4190;
  -webkit-box-shadow: inset 0 0 10px #4F4190;
  box-shadow: inset 0 0 10px #4F4190;
}
.panel-selector .paenl-selector-group-title {
  font-size: 18px;
  padding: .5em .75em;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
  background-color: #4F4190;
  color: #fff;
}
.panel-selector ul {
  overflow-x: visible;
}
.panel-selector .group-title
li {
  margin: 3px;
  white-space: nowrap;
}
.panel-selector .group-title
li + li {
  margin-top: 0;
}
.panel-selector .group-title
li.j-focused, .panel-selector .group-title
li.focused {
  background-color: #e6e6e6;
}
.panel-selector .group-title
li.j-selected, .panel-selector .group-title
li.selected {
  background-color: #4F4190;
}
.panel-selector .group-title
li.j-selected > i.fa-holder:before, .panel-selector .group-title
li.j-selected.fa:before, .panel-selector .group-title
li.selected > i.fa-holder:before, .panel-selector .group-title
li.selected.fa:before {
  content: "";
}
.panel-selector .group-title
li.j-selected .text, .panel-selector .group-title
li.j-selected .fa, .panel-selector .group-title
li.selected .text, .panel-selector .group-title
li.selected .fa {
  color: #fff;
}

/**
* Button Selectors:
* `.button-group` -  !! Requires Javascript!!
* 
*   @example
*	<div class="row button-group"id="ButtonGroup" >
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*	</div>
*	<a class="link" href="http://anovi.github.io/selectonic/">Javascript API Documentaion</a> 
*/
.button-group li a.button {
  background-color: #b3b3b3;
}
.button-group li + li {
  margin-top: 0;
}
.button-group li.j-focused a.button, .button-group li.focused a.button {
  background-color: #4F4190;
}
.button-group li.j-selected a.button, .button-group li.selected a.button {
  background-color: #4F4190;
}
.button-group li.j-selected a.button > i.fa-holder:before, .button-group li.j-selected a.button.fa:before, .button-group li.selected a.button > i.fa-holder:before, .button-group li.selected a.button.fa:before {
  content: "";
}
.button-group li.j-selected a.button .text, .button-group li.j-selected a.button .fa, .button-group li.selected a.button .text, .button-group li.selected a.button .fa {
  color: #fff;
}

/**
* Panel Selector:
* `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements.  !! Requires Javascript!!
* 
*   @example
*	<section id="PanelSelector" class="panel-selector-holder">
*		<div class="panel-selector parent">
*			<ul>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*			</ul>
*		</div>								
*		<div class="panel-selector child">
*			<ul>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*			</ul>
*		</div>
*	</section>
*	<a class="link" href="http://anovi.github.io/selectonic/">Javascript API Documentaion</a> 
*/
/**
* Knockout Panel Selector:
* `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements.  !! Requires Javascript!!
* 
*   @example
*	<section id="Knockout" class="panel-selector-holder row collapse">
*	  <div class="panel-selector">
*	    <ul  data-bind="foreach:$root.repeatedItems">
*	      <li data-bind="css: {selected: selected},toggle:selected">
*	        <i class="fa fa-holder"></i>
*	        <span class="text" data-bind="text:name">List Item Parent</span>
*	      </li>
*	    </ul>
*	  </div><div class="panel-selector">
*	    <ul  data-bind="foreach:$root.repeatedItems2">
*	      <li data-bind="css: {selected: selected},toggle:selected">
*	        <i class="fa fa-holder"></i>
*	        <span class="text" data-bind="text:name">List Item Parent</span>
*	      </li>
*	    </ul></div>
*	 </section>
*/
/**
* Toggle Select:
* `.toggle .miniized` - small multi position toggle.  there is not animation like the switches and are not driven by an imput.
* 
*   @example
*	<ul class="toggle">
*	    <li class="toggle-position "><a href="javascript:void(0)">10</a></li>
*	    <li class="toggle-position selected"><a href="javascript:void(0)">20</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">50</a></li>
*	</ul>
*	<ul id="Toggle" class="toggle minimized">
*	    <li class="toggle-position "><a href="javascript:void(0)">10</a></li>
*	    <li class="toggle-position selected"><a href="javascript:void(0)">20</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">50</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">75</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">100</a></li>
*	</ul>
*/
ul.toggle {
  background: #e6e6e6 url("../img/billie-holiday.png") repeat top right;
  border: 2px solid #cccccc;
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0px 2px;
  border-radius: 6px;
  font-size: 1rem;
}
ul.toggle a, ul.toggle a:link {
  text-decoration: none;
  line-height: 1em;
}
ul.toggle .toggle-position {
  display: inline-block;
  padding: .25em .375em;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #e6e6e6;
  opacity: .75;
  font-weight: 700;
}
ul.toggle .toggle-position a {
  color: #262626;
}
ul.toggle .toggle-position:hover {
  background-color: #4F4190;
  opacity: 1;
}
ul.toggle .toggle-position:hover a {
  color: #fff;
}
ul.toggle .toggle-position a {
  box-sizing: border-box;
  padding: .25em .5em;
  display: block;
}
ul.toggle .toggle-position.selected {
  opacity: 1;
  border: #5a4aa5 0.2em solid;
  background-color: #5a4aa5;
  margin: -.25em 0px;
  border-radius: 5px;
  font-weight: 900;
  padding: .45em .375em;
}
ul.toggle .toggle-position.selected:hover {
  background-color: #5a4aa5;
  border-color: #4F4190;
}
ul.toggle .toggle-position.selected a {
  color: #fff;
}
ul.toggle.minimized {
  font-size: .75rem;
  border-radius: 1px;
}
ul.toggle.minimized .toggle-position {
  border-radius: 2px;
}
ul.toggle.minimized .selected {
  border-radius: 2px;
  border-width: 2px;
  margin: -3px;
}

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.875rem;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: .57431rem 0 .57431rem 8px;
  height: 37px;
  border: 1px solid #aaa;
  border-radius: 1px;
  background-color: #fff;
  /*  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
    background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);*/
  background-clip: padding-box;
  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}
.chosen-container-single .chosen-default {
  color: #999;
}
.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}
.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single .chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
  position: absolute;
  top: 9px;
  right: 2px;
  display: block;
  width: 18px;
  height: 100%;
}
.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/chosen-sprite.png") no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
  margin: 0;
  padding: .57143rem 20px .57143rem .57143rem;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #b3b3b3;
  background: white url("../img/chosen-sprite.png") no-repeat 100% -20px;
  background: url("../img/chosen-sprite.png") no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: .57143rem .5rem;
  list-style: none;
  line-height: 21px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}
.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
    background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);*/
  color: #fff;
}
.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}
.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}
.chosen-container .chosen-results li li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: auto !important;
  height: 1%;
  border: 1px solid #aaa;
  background-color: #fff;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
    background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);*/
  cursor: text;
}
.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: -1px 0;
  padding: .57143rem;
  height: 2.64286rem;
  outline: 0;
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none;
  color: #525252;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 4px .25rem 4px 0;
  padding: 6px 20px 6px .5rem;
  border: 1px solid #aaa;
  max-width: 100%;
  border-radius: 3px;
  background-color: #eeeeee;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 13px;
  cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 9px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/
  color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);*/
  box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #222 !important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}

.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}

.chosen-rtl .chosen-choices li {
  float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}

.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  left: 9999px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: white url("../img/chosen-sprite.png") no-repeat -30px -20px;
  background: url("../img/chosen-sprite.png") no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("../img/chosen-sprite@2x.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}

.header.page + .top-bar {
  margin-top: -6px;
}

.top-bar, .top-bar ul {
  background-color: transparent;
}

.top-bar {
  position: relative;
  z-index: 1002;
  padding: 0;
  background-color: #00386b;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
  color: #FFF;
}
.top-bar, .top-bar .menu > li {
  line-height: 2em;
  font-size: 18px;
}
@media only screen and (min-width: 767px) {
  .top-bar, .top-bar .menu > li {
    line-height: 2.75em;
  }
}
.top-bar > a, .top-bar > button, .top-bar .menu > li > a, .top-bar .menu > li > button {
  display: block;
  width: auto;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
  padding: .5em 1em .5em;
}
@media only screen and (min-width: 767px) {
  .top-bar > a, .top-bar > button, .top-bar .menu > li > a, .top-bar .menu > li > button {
    padding: 1em 1em .75em;
  }
}

.top-bar-toggle {
  padding: .25em .5em;
}

.top-bar-right {
  padding-right: .5em;
  background-color: #4F4190;
}
.top-bar-right.secondary {
  background-color: #b3b3b3;
}

.top-bar-left {
  padding-left: .5em;
}
.top-bar-left li:hover {
  background-color: white;
}
.top-bar-left li:hover a, .top-bar-left li:hover button {
  color: #333333;
}
@media only screen and (min-width: 767px) {
  .stack-for-small .top-bar-left li:hover {
    border-top: #4F4190 0.33333em solid;
  }
  .stack-for-small .top-bar-left li:hover a, .stack-for-small .top-bar-left li:hover button {
    margin-top: -0.33333em;
    padding-top: 1em;
  }
}
@media only screen and (min-width: 1024px) {
  .stack-for-medium .top-bar-left li:hover {
    border-top: #4F4190 0.33333em solid;
  }
  .stack-for-medium .top-bar-left li:hover a, .stack-for-medium .top-bar-left li:hover button {
    margin-top: -0.33333em;
    padding-top: 1em;
  }
}
.top-bar-left .submenu {
  margin: 0;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  list-style: none;
}
.top-bar-left .submenu, .top-bar-left .submenu.nav-level-1 {
  font-size: 14px;
}
.top-bar-left .submenu.nav-level-2 {
  font-size: 11px;
}
.top-bar-left .submenu li > a {
  color: #4F4190;
  width: 100%;
  display: inline-block;
  line-height: 1.5;
  padding: 0;
}
.top-bar-left .submenu li {
  padding: .25em .75em;
}
.top-bar-left .submenu li:hover {
  background-color: #4F4190;
  border-top: none 0;
  padding-top: .25em;
}
.top-bar-left .submenu li:hover > a {
  color: #FFF;
}
.top-bar-left .submenu li.parent {
  padding: 0;
}
.top-bar-left .submenu li.parent:hover {
  background-color: transparent;
}
.top-bar-left .submenu.nav-level-2 li {
  padding: .25em .75em .25em 2em;
}

.menu > li {
  display: block;
  width: 100%;
}
.menu > li .dropdown-pane {
  width: 100%;
  max-width: 100vh;
}
@media only screen and (min-width: 320px) {
  .stack-for-small .menu > li {
    display: table-cell;
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .stack-for-small .menu > li .dropdown-pane {
    top: 0 !important;
    left: 0 !important;
    display: block;
  }
  .stack-for-small .menu > li .dropdown-pane.is-open {
    position: relative;
  }
}
@media only screen and (min-width: 1024px) {
  .stack-for-medium .menu > li {
    display: table-cell;
    width: auto;
  }
}
@media only screen and (max-width: 1200px) {
  .stack-for-medium .menu > li .dropdown-pane {
    top: 0 !important;
    left: 0 !important;
    display: block;
  }
  .stack-for-medium .menu > li .dropdown-pane.is-open {
    position: relative;
  }
}

#siteMenu i.fa {
  margin-top: -1px;
  margin-bottom: -1px;
}
#siteMenu .top-bar-left, #siteMenu .top-bar-right {
  width: 100%;
  padding: 0;
}
@media only screen and (min-width: 1024px) {
  #siteMenu .top-bar-left, #siteMenu .top-bar-right {
    width: auto;
    padding: 0 .5em;
  }
}

.top-bar a, .top-bar button {
  color: white;
}
.top-bar .dropdown-pane {
  margin-top: 1px;
  padding: 0;
  padding: .5em 0 .75em;
  border: 0 none transparent;
}
.top-bar .dropdown-pane .double-column {
  width: 80em;
}
.top-bar .dropdown-pane > .row {
  margin: 0 .5em;
}
.top-bar .dropdown-pane .column {
  padding-left: 0em;
  padding-right: .5em;
}
@media only screen and (min-width: 320px) {
  .top-bar.stack-for-small .top-bar .dropdown-pane {
    width: 40em;
    max-width: 75vw;
    border: 1px solid #666666;
    padding: .5em 0 .75em;
  }
  .top-bar.stack-for-small .top-bar .dropdown-pane .column + .column {
    border-left: solid #d9d9d9 1px;
    padding-left: .5em;
    padding-right: 0em;
  }
}
@media only screen and (min-width: 1024px) {
  .top-bar.stack-for-medium .top-bar .dropdown-pane {
    width: 40em;
    max-width: 75vw;
    border: 1px solid #666666;
    padding: .5em 0 .75em;
  }
  .top-bar.stack-for-medium .top-bar .dropdown-pane .column + .column {
    border-left: solid #d9d9d9 1px;
    padding-left: .5em;
    padding-right: 0em;
  }
}

.dropdown-menu-item .fa-holder:before {
  content: "\f107";
}

.dropdown-menu-item:hover .fa-holder:before {
  content: "\f0d7";
}

.search-bar {
  line-height: normal;
  padding: 0.5em;
  clear: both;
  background-image: url(../img/cream_pixels_altdark.png);
  background-color: #b3b3b3;
  display: none;
}
.search-bar .question {
  margin: 0;
}
.search-bar .question input {
  background: #b8b8b8;
  border-radius: 6px 0 0 6px;
  border: #cccccc 1px solid;
}
.search-bar .question .button {
  border-radius: 0 6px 6px 0;
  background-color: gray;
  vertical-align: text-top;
  padding: 0;
  border: 1px solid #cccccc;
}

.top-bar input, .search-bar input {
  max-width: 100%;
}

.pagination-holder, .result-selector-holder {
  border-top: 2px solid #4F4190;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.pagination-holder::before, .result-selector-holder::before, .pagination-holder::after, .result-selector-holder::after {
  content: ' ';
  display: table;
}
.pagination-holder::after, .result-selector-holder::after {
  clear: both;
}

.pagination li {
  border-radius: 0px 0px 0px 0px;
  color: #666666;
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  line-height: 1.4rem;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .pagination li {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .pagination li {
    line-height: 1.51455em;
  }
}

.pagination li a {
  line-height: 1.4rem;
}
.pagination li i {
  margin: 0 .25rem;
}
.with-group-sections .pagination li a:hover {
  background-color: #cccccc;
}
.group-section .pagination li a:hover {
  background-color: #e6e6e6;
}
.pagination li.current {
  padding: 0;
}
.pagination li.current a, .pagination li.current a:hover {
  background-color: #4F4190;
  color: #fff;
}
.pagination li.arrow, .pagination li.action {
  background-color: #e6e6e6;
  color: #525252;
  font-weight: 700;
  margin-bottom: 0;
}
.pagination li.arrow a:hover, .pagination li.action a:hover {
  background-color: #b3b3b3;
  color: #333333;
}
.with-group-sections .pagination li.arrow a, .with-group-sections .pagination li.action a {
  background-color: #cccccc;
}
.group-section .pagination li.arrow a, .group-section .pagination li.action a {
  background-color: #e6e6e6;
}
.pagination li.arrow.left, .pagination li.arrow.left:hover, .pagination li.action.left, .pagination li.action.left:hover {
  border-radius: 0px 0px 0px 6px;
}
.pagination li.arrow.right, .pagination li.arrow.left:hover, .pagination li.action.right, .pagination li.action.left:hover {
  border-radius: 0px 0px 6px 0px;
}
.pagination li.disable a, .pagination li.disable a:hover {
  border-color: #999999;
  background: url("../img/empty_diamond.png") repeat;
  color: gray;
  cursor: not-allowed;
}
.with-group-sections .pagination li.disable a, .with-group-sections .pagination li.disable a:hover {
  background-color: gray;
}
.group-section .pagination li.disable a, .group-section .pagination li.disable a:hover {
  background-color: #999999;
}

.pagination-holder.top, .top.result-selector-holder {
  border-top: 0 none;
  border-bottom: 2px solid #4F4190;
  margin-bottom: 1rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.pagination-holder.top::before, .top.result-selector-holder::before, .pagination-holder.top::after, .top.result-selector-holder::after {
  content: ' ';
  display: table;
}
.pagination-holder.top::after, .top.result-selector-holder::after {
  clear: both;
}
.pagination-holder.top .pagination, .top.result-selector-holder .pagination {
  margin-bottom: 0;
}
.pagination-holder.top .pagination li.arrow.left, .top.result-selector-holder .pagination li.arrow.left {
  border-radius: 6px 0 0 0;
}
.pagination-holder.top .pagination li.arrow.right, .top.result-selector-holder .pagination li.arrow.right {
  border-radius: 0 6px 0 0;
}

@media only screen and (max-width: 1024px) {
  .pagination a > .text {
    display: none;
  }
}
.pagination--compact a > .text {
  display: none;
}

/*  PAGINATION ON CARDS IS in _override.card.pagination.scss */
/**
* Pagination:
* `.pagination-holder .pagination` - Pagination is often used when there is a table or page of results or repeated items. The Container defaultly styles the paginator to be at the bottom of the area of repeated content but render it at the top just add the class '.top' to render the pagination upside down. The paginator has a single modifier to condense the screen size by adding the class `.pagination--compact`.
* 
*   @example
* <div class="pagination-holder top"><ul class="pagination float-right">
*   <li class="arrow disable left"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*   <li class="current"><a href="">1</a></li>
*   <li><a href="">2</a></li>
*   <li><a href="">3</a></li>
*   <li><a href="">4</a></li>
*   <li class="arrow right"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
* </ul></div><br>
*  <div class="page with-group-sections">
*      <div class="page-wrapper">
*          <section class="section group-section">
*              <div class="group-section-pagination-holder top">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*                  <ul class="pagination float-right">
*                      <li class="action"><a href=""><i class="fa fa-plus "></i><span class="text">Add</span></a></li>
*                      <li class="action"><a href=""><i class="fa fa-times "></i><span class="text">Remove</span></a></li>
*                  </ul>
*              </div>
*              <div class="callout">this is some content</div>
*              <div class="pagination-holder">
*                  <ul class="pagination pagination--compact float-right">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*              </div>
*              <div class="group-section-pagination-holder">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*                  <ul class="pagination float-right">
*                      <li class="action"><a href=""><i class="fa fa-plus "></i><span class="text">Add</span></a></li>
*                      <li class="action"><a href=""><i class="fa fa-times "></i><span class="text">Remove</span></a></li>
*                  </ul>
*              </div>
*          </section>
*          <div class="content-padding">
*              <div class="pagination-holder">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*              </div>
*          </div>
*      </div>
*  </div>
*/
.pagination.result-selector li.label, .pagination.result-selector li.value {
  color: #525252;
  font-weight: 700;
}
.pagination.result-selector li.label {
  padding: 0.1875rem 0.625rem;
  background-color: #e6e6e6;
}
.top .pagination.result-selector li.label {
  border-radius: 6px 0px 0px 0px;
}
.bottom .pagination.result-selector li.label {
  border-radius: 0px 0px 0px 6px;
}

/**
* Pagination with Result Selector:
* `.pagination-holder .pagination.result-selector` - used often with a paginator is a ruslt selector. This allows the user to limit the amount of returned items on a single page. Because the Result Selector is bult on the paginator design it can also be used at the top or bottom like a paginator.
* 
*   @example
*	<div class="pagination-holder top">
*		<ul class="pagination result-selector float-left">
*			<li class="label">Show</li>
*			<li class="current"><a href="">10</a></li>
*			<li><a href="">20</a></li>
*			<li><a href="">50</a></li>
*			<li class="value">Results</li>
*		</ul>
*	<ul class="pagination float-right">
*		<li class="arrow unavailable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*		<li class="current"><a href="">1</a></li>
*		<li><a href="">2</a></li>
*		<li><a href="">3</a></li>
*		<li><a href="">4</a></li>
*		<li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*	</ul></div><br>
*	<div class="pagination-holder bottom">
*		<ul class="pagination result-selector float-left">
*			<li class="label">Show</li>
*			<li class="current"><a href="">10</a></li>
*			<li><a href="">20</a></li>
*			<li><a href="">50</a></li>
*			<li class="value">Results</li>
*		</ul>
*	<ul class="pagination float-right">
*		<li class="arrow unavailable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*		<li class="current"><a href="">1</a></li>
*		<li><a href="">2</a></li>
*		<li><a href="">3</a></li>
*		<li><a href="">4</a></li>
*		<li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*	</ul></div>
*
*/
/**
* Modals( Foundation Reveal):
* `.reveal-modal` - Popup, modal, reveal - a design pattern to show a hidden a part of content when you want the user to focus on a single task. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <p><a class="button" data-open="exampleModal1">Click me for a modal</a></p>
*   <div class="reveal" id="exampleModal1" data-reveal>
*   <h1>Awesome. I Have It.</h1>
*   <p class="lead">Your couch. It is mine.</p>
*   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
*   <button class="close-button" data-close aria-label="Close reveal" type="button">
*   <span aria-hidden="true">&times;</span>
*   </button>
*   </div>
*/
div.reveal {
  border-top: 6px solid #4F4190;
}
div.reveal .close-button {
  background-color: #4F4190;
  color: #fff;
  padding: .25em .5em .5em .5em;
  top: 0;
  right: 0;
}

/**
* Slider (Foundation Override):
* `.range-slider .vertical-range` - Sliders are a great peice of UI for mobile and range of numbers <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <div class="slider" data-slider data-initial-start='50' data-end='200'>
*   <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
*   <span class="slider-fill" data-slider-fill></span>
*   <input type="hidden">
*   </div>
*   <div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <span class="slider-fill" data-slider-fill></span>
*    <input type="hidden">
*   </div>
*   <div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <span class="slider-fill" data-slider-fill></span>
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <input type="hidden">
*     <input type="hidden">
*   </div>
*   <a class="link" href="http://foundation.zurb.com/sites/docs/slider.html">Foundation Documentation</a>
*/
.slider {
  position: relative;
  height: 0.5rem;
  margin-top: 1.25rem;
  margin-bottom: 2.25rem;
  background-color: #e6e6e6;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  background-image: url("../img/billie-holiday.png");
  border: 1px solid #686188;
  border-radius: 6px;
  -webkit-box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
}

.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  max-width: 100%;
  height: 0.5rem;
  background-color: #4F4190;
  transition: all 0.2s ease-in-out;
  background-image: url("../img/billie-holiday.png");
  -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.slider-fill.is-dragging {
  transition: all 0s linear;
}

.slider-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  z-index: 1;
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #4F4190;
  transition: all 0.2s ease-in-out;
  touch-action: manipulation;
  border-radius: 0;
  border-radius: 25px;
  border: 1px solid #413a62;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
[data-whatinput='mouse'] .slider-handle {
  outline: 0;
}
.slider-handle:hover {
  background-color: #43377a;
}
.slider-handle.is-dragging {
  transition: all 0s linear;
}

.slider.disabled,
.slider[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.slider.vertical {
  display: inline-block;
  width: 0.5rem;
  height: 12.5rem;
  margin: 0 1.25rem;
  transform: scale(1, -1);
}
.slider.vertical .slider-fill {
  top: 0;
  width: 0.5rem;
  max-height: 100%;
}
.slider.vertical .slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  transform: translateX(-50%);
}

.switch-input-space {
  white-space: nowrap;
  display: table;
  padding-bottom: .5rem;
  padding-top: 0;
}
.switch-input-space .with-underline {
  border-bottom: 1px dotted #d6d6d6;
}
.switch-input-space .switch {
  display: table-cell;
  width: 1%;
}

.switch-value {
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 .5em .75em;
  margin: 0;
  white-space: normal;
  background-color: transparent;
  color: #525252;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .switch-value {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .switch-value {
    line-height: 1.19em;
  }
}

.switch {
  margin-bottom: 1rem;
  outline: 0;
  position: relative;
  user-select: none;
  color: #FFF;
  font-weight: bold;
  font-size: 0.875rem;
  margin-top: .5em;
  vertical-align: top;
}
.switch.large, .question-grid-based.large-switches .switch {
  margin-top: .25em;
}
.switch.small, .question-grid-based.small-switches .switch {
  margin-top: .5em;
}
.switch.tiny, .question-grid-based.tiny-switches .switch {
  margin-top: 1em;
}

.switch-input {
  opacity: 0;
  position: absolute;
}

.switch-paddle {
  background: #b3b3b3;
  cursor: pointer;
  display: block;
  position: relative;
  width: 4rem;
  height: 2rem;
  transition: all 0.25s ease-out;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
  border: 2px solid #b3b3b3;
  background-image: url("../img/billie-holiday.png");
  box-sizing: content-box;
}
input + .switch-paddle {
  margin: 0;
}
.switch-paddle::after {
  background: #FFF;
  content: '';
  display: block;
  position: absolute;
  height: 1.5rem;
  left: 0.25rem;
  top: 0.25rem;
  width: 1.5rem;
  transition: all 0.25s ease-out;
  transform: translate3d(0, 0, 0);
  border-radius: 0;
}
input:checked ~ .switch-paddle {
  background: #4F4190;
}
input:checked ~ .switch-paddle::after {
  left: 2.25rem;
}
[data-whatinput='mouse'] input:focus ~ .switch-paddle {
  outline: 0;
}

.switch-input:focus + .switch-paddle {
  -webkit-box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

.switch-active, .switch-inactive {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.switch-active {
  left: 8%;
  display: none;
  left: 10%;
}
input:checked + label > .switch-active {
  display: block;
}

.switch-inactive {
  right: 15%;
  right: 10%;
}
input:checked + label > .switch-inactive {
  display: none;
}

.switch.tiny .switch-paddle, .question-grid-based.tiny-switches .switch .switch-paddle {
  width: 3rem;
  height: 1.5rem;
  font-size: 0.625rem;
}
.switch.tiny .switch-paddle::after, .question-grid-based.tiny-switches .switch .switch-paddle::after {
  width: 1rem;
  height: 1rem;
}
.switch.tiny input:checked ~ .switch-paddle::after, .question-grid-based.tiny-switches .switch input:checked ~ .switch-paddle::after {
  left: 1.75rem;
}

.switch.small .switch-paddle, .question-grid-based.small-switches .switch .switch-paddle {
  width: 3.5rem;
  height: 1.75rem;
  font-size: 0.75rem;
}
.switch.small .switch-paddle::after, .question-grid-based.small-switches .switch .switch-paddle::after {
  width: 1.25rem;
  height: 1.25rem;
}
.switch.small input:checked ~ .switch-paddle::after, .question-grid-based.small-switches .switch input:checked ~ .switch-paddle::after {
  left: 2rem;
}

.switch.large .switch-paddle, .question-grid-based.large-switches .switch .switch-paddle {
  width: 5rem;
  height: 2.5rem;
  font-size: 1rem;
}
.switch.large .switch-paddle::after, .question-grid-based.large-switches .switch .switch-paddle::after {
  width: 2rem;
  height: 2rem;
}
.switch.large input:checked ~ .switch-paddle::after, .question-grid-based.large-switches .switch input:checked ~ .switch-paddle::after {
  left: 2.75rem;
}

.radio .switch-active i.fa-holder:before {
  content: "\f058";
}
.checkbox .switch-active i.fa-holder:before {
  content: "\f00c";
}

.x-vixible .switch-inactive i.fa-holder:before, .checkbox.x-vixible .switch-inactive i.fa-holder:before {
  content: "\f00d";
}
.radio.x-vixible .switch-inactive i.fa-holder:before {
  content: "\f057";
}

.switch.radius .switch-paddle, .switch.checkbox .switch-paddle {
  border-radius: 6px;
}
.switch.radius .switch-paddle:after, .switch.checkbox .switch-paddle:after {
  border-radius: 4.5px;
}

.switch.round .switch-paddle, .switch.round .switch-paddle:after, .switch.radio .switch-paddle, .switch.radio .switch-paddle:after {
  border-radius: 25px;
}

.switch.disabled .switch-paddle, .switch-input[disabled] ~ .switch-paddle {
  background: #b3b3b3 url("../img/subtlenet2.png") repeat;
  border: 2px solid #e6e6e6;
  box-sizing: content-box;
}

.switch.disabled .switch-paddle, .switch-input[disabled] ~ .switch-paddle {
  color: #b3b3b3;
}

.switch.disabled .switch-paddle:after, .switch-input[disabled] ~ .switch-paddle:after {
  background-color: #e6e6e6;
}

.switch.value-switch .switch-active, .switch-group .switch .switch-active {
  color: #262626;
}
.switch.value-switch .switch-inactive, .switch-group .switch .switch-inactive {
  color: #e6e6e6;
}
.switch.value-switch .switch-active, .switch.value-switch .switch-inactive, .switch-group .switch .switch-active, .switch-group .switch .switch-inactive {
  z-index: 100;
}
.switch.value-switch input + label > .switch-active, .switch-group .switch input + label > .switch-active {
  display: block;
}
.switch.value-switch input:checked + label > .switch-inactive, .switch-group .switch input:checked + label > .switch-inactive {
  color: #262626;
  display: block;
}
.switch.value-switch input:checked + label > .switch-active, .switch-group .switch input:checked + label > .switch-active {
  color: #e6e6e6;
}
.switch.value-switch .switch-paddle, .switch.value-switch input:checked .switch-paddle, .switch-group .switch .switch-paddle, .switch-group .switch input:checked .switch-paddle {
  background-color: #4F4190;
}

.switch.switch-2x .switch-active, .switch.switch-4x .switch-active {
  left: .25em;
}
.switch.switch-2x .switch-inactive, .switch.switch-4x .switch-inactive {
  right: .25em;
}
.switch.switch-2x .switch-paddle {
  width: 7em;
}
.switch.switch-2x .switch-paddle::after {
  width: 3em;
}
.switch.switch-2x input:checked ~ .switch-paddle::after {
  left: 3.75em;
}
.switch.switch-2x .switch-active, .switch.switch-2x .switch-inactive {
  width: 3em;
  text-align: center;
}
.switch.switch-4x .switch-paddle {
  width: 15em;
}
.switch.switch-4x .switch-paddle::after {
  width: 7em;
}
.switch.switch-4x input:checked ~ .switch-paddle::after {
  left: 7.75em;
}
.switch.switch-4x .switch-active, .switch.switch-4x .switch-inactive {
  width: 7em;
  text-align: center;
}

.switch-group {
  background-color: #4F4190;
  border: 2px solid #b3b3b3;
  box-sizing: content-box;
  height: 2rem;
  transition: all 0.25s ease-out;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
  display: block;
  width: auto;
}
.switch-group .switch .switch-active, .switch-group .switch .switch-inactive {
  text-align: center;
  width: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.switch-group > .switch {
  display: inline-block;
  float: left;
  width: auto;
  margin: 0;
}
.switch-group .switch-input {
  opacity: 0;
  position: absolute;
}
.switch-group .switch-paddle {
  width: 4rem;
  border: 0 transparent none;
  background-color: transparent;
}
.switch-group .switch-paddle:after {
  opacity: 0;
  width: 80% !important;
  width: calc(100% - .5rem) !important;
  left: 10% !important;
  left: calc(.25rem + 0px) !important;
  border-radius: 3px;
}
.switch-group .switch.switch-2x .switch-paddle {
  width: 8rem;
}
.switch-group .switch.switch-4x .switch-paddle {
  width: 16rem;
}
.switch-group input:checked + .switch-paddle:after {
  opacity: 1;
  left: 10% !important;
  left: calc(.25rem + 0px) !important;
}
.switch-group .switch-active, .switch-group .switch-inactive {
  z-index: 100;
}

/**
* Switch (Foundation Override): 
* `.switch` - Switches are a more visible and more touchable versions of checkbox and radio buttons. 
*  <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <div class="switch-input-space">
*   <div class="switch">
*   <input class="switch-input" id="yes-no-1" type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="yes-no-1">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-1">Yes or No Question</label>
*   </div>
*/
/**
* Switch (Disabled): 
* `disable` - on the input changes the look and cursor on rollover
* 
*   @example
*   <div class="switch-input-space  row">
*   <div class="switch">
*   <input class="switch-input" id="yes-no-disabled" disabled type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="yes-no-disabled">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-disabled">Yes or No Question</label>
*   </div>
*/
/**
* Switch modifing classes: 
* `.switch` - Switches are remarkably flexable. Radio Buttons should use `.radio` as modifier, and Checkboxes use  `.checkbox`. `.round` and `.radius` are very useful to change the look and feel of buttons.  
* 
*   @example
*   <div class="row group-divide">
*   <h4>Radio Buttons should use `.round` or `.radio` modifier</h4>
*   <p>You can make a radio with eiither placing the `.round` or `.radio`. *   <div class="row collapse">
*   <div class="switch-input-space column small-6">
*   <div class="switch round">
*   <input class="switch-input" id="yes-no-round" type="radio" name="radio-switch">
*   <label class="switch-paddle" for="yes-no-round">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-check-circle-o"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-times-circle"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-round">Radio button made with `.round`</label>
*   </div>
*   <div class="switch-input-space column small-6">
*   <div class="switch radio">
*   <input class="switch-input" id="yes-no-radio" type="radio" name="radio-switch">
*   <label class="switch-paddle" for="yes-no-radio">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-radio">Radio button made with `.radio`</label>
*   </div>
*   </div>
*   </div>
*   <div class="row group-divide">
*   <h4>Checkboxes should use `.radius`, `.checkbox`, no modifiers</h4>
*   <p>If you want control over the positive and negative icons use `.radius`.  Use `.checkbox` to set it to the standard icon in the positive position</p>
*   <div class="row collapse">
*   <div class="switch-input-space column small-6">
*   <div class="switch radius">
*   <input class="switch-input" id="radius-checkbox" type="checkbox" value="true">
*   <label class="switch-paddle" for="radius-checkbox">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-check-circle-o"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-times-circle"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="radius-checkbox">Checkbox button made with `.radius`</label>
*   </div>
*   <div class="switch-input-space column small-6">
*   <div class="switch checkbox">
*   <input class="switch-input" id="checkbox-checkbox"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-checkbox">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="checkbox-checkbox">Checkbox button made with `.checkbox`</label>
*   </div>
*   </div></div>

**/
/**
* Value Switchers: 
* `.value-switch` - Add `.value-switch` to a switch so both inactive and active content of the switcher are visible and stay colored.
* 
*   @example
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch">
*   <input class="switch-input" id="checkbox-value-switch"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-thumbs-up"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-thumbs-down"></i></span>
*   </label>
*   </div>
*   </div>
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch switch-2x radius">
*   <input class="switch-input" id="checkbox-value-switch-radius"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch-radius">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">US</span>
*   <span class="switch-inactive" aria-hidden="true">SI</span>
*   </label>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-radius">You expand the switch area with switch-2x and switch-4x</label>
*   </div>
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch switch-4x round">
*   <input class="switch-input" id="checkbox-value-switch-round"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch-round">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Inches</span>
*   <span class="switch-inactive" aria-hidden="true">Centimeters</span>
*   </label>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-round">You can also apply the `.radius` and `.round` to change the style
*   </label>
*   </div>
*/
/**
* Switch Group: 
* `.switch-group` - Switches can be grouped if you want a multi selected bar of similar items.
* 
*   @example
*   <h4>Switch Groups group normal '.switch' DOM they just stack the active and inactive items </h4>
*   <div class="switch-input-space">
*   <div class="switch-group"><div class="switch">
*   <input class="switch-input" id="switch-group0"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group0">
*   <span class="show-for-sr">Miles True?</span>
*   <span class="switch-active" aria-hidden="true">Miles</span>
*   <span class="switch-inactive" aria-hidden="true">Miles</span>
*   </label></div><div class="switch">
*   <input class="switch-input" id="switch-group1"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group1">
*   <span class="show-for-sr">Knots?</span>
*   <span class="switch-active" aria-hidden="true">Knots</span>
*   <span class="switch-inactive" aria-hidden="true">Knots</span>
*   </label></div><div class="switch switch-2x">
*   <input class="switch-input" id="switch-group2"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group2">
*   <span class="show-for-sr">Kilometers?</span>
*   <span class="switch-active" aria-hidden="true">Kilometers</span>
*   <span class="switch-inactive" aria-hidden="true">Kilometers</span>
*   </label></div>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-round">Show these types of distance
*   </label>
*   </div>
*/
/**
* Switch (States): 
* `.error-active` - Switches can be colored with a class [state]-active and [state]-inactive.
* 
*   @example
*   <h3>Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`</h3>
*   <div class="switch-input-space row">
*   <div class="switch warning-active error-inactive switch-2x">
*   <input class="switch-input" id="active-inactive" type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="active-inactive">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="active-inactive">.switch.error-active.warning-inactive/label>
*   </div>
*/
.tooltip {
  background-color: #413a62;
  z-index: 2000;
}

.tooltip.tip-top > .nub {
  border-color: #413a62 transparent transparent;
}

.close-button {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
}

.callout, .page-message {
  background-image: url(../img/empty_stripe.png);
  background-color: #e6e6e6;
}

/**
* Callout:
* `.callout` - a small part of content that is called out on the page. This type of treatment is great for asides, extra info or alerts. 
* 
*   @example
*	<div class="callout">
*       <h5>This call out is used for showing content on the page that should not be missed.</h5>
*	</div>
*/
/**
* Callout [States]:
* `.callouts + .warning` - Callouts are built to be effected by states so they can reflect there message as Info, Warning, Error for example. 
* 
*   @example
*	<div class="callout warning">
*        <h5>I am a call out that shows a warning about something in this section.</h5>
*	</div>
*/
/**
* Callout with close bar:
* `.callouts & .close-bar` - most callouts are openned and closed by other inputs or section triggers but there are times when a callout should be dismissed.   In these cases adding the `.closebar` DOM is most useful.  
* 
*   @example
*	<div class="callout warning">
*       <a class="close-bar">
*           <span class="close-button"><i class="fa fa-times" aria-hidden="true"></i></span>
*       </a>
*       <h5>I am a call out that is a warnning but can be dismissed.</h5>
*	</div>
*/
.button-group {
  border: 2px solid transparent;
}
.button-group.radius, .button-group.radius-top, .button-group.radius-bottom {
  overflow: hidden;
}
.button-group.expanded.selectable .button:first-child:nth-last-child(2) {
  border-right-width: 0;
  width: 50%;
}
.button-group.expanded.selectable .button:first-child:nth-last-child(3) {
  border-right-width: 0;
  width: 33.3333%;
}
.button-group.expanded.selectable .button:first-child:nth-last-child(4) {
  border-right-width: 0;
  width: 25%;
}
.button-group.expanded.selectable .button:first-child:nth-last-child(5) {
  border-right-width: 0;
  width: 20%;
}
.button-group.selectable {
  margin-right: 0;
}
.button-group.selectable .button {
  background-color: #b3b3b3;
  color: #FFF;
}
.button-group.selectable .button:hover, .button-group.selectable .button:focus {
  background-color: #43377a;
  color: #FFF;
}
.button-group.selectable .button:hover, .button-group.selectable .button:focus {
  background-color: #666666;
  color: #fff;
}
.button-group.selectable i.fa {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
  margin: 0 7px 0 0;
  display: none;
}
.button-group.selectable .selected.button {
  background-color: #4F4190;
  color: #FFF;
}
.button-group.selectable .selected.button:hover, .button-group.selectable .selected.button:focus {
  background-color: #43377a;
  color: #FFF;
}
.button-group.selectable .selected.button:hover, .button-group.selectable .selected.button:focus {
  background-color: #493e7d;
  color: #fff;
}
.button-group.selectable .selected.button i.fa {
  display: inline-block;
}

.error.question .button-group, .warning.question .button-group, .success.question .button-group, .info.question .button-group, .highlighted.question .button-group, .disabled.question .button-group {
  margin-bottom: 0;
}

.error.question .button-group.radius, .warning.question .button-group.radius, .success.question .button-group.radius, .info.question .button-group.radius, .highlighted.question .button-group.radius, .disabled.question .button-group.radius {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/**
* Selectable Button Group:
* `.selectable.button-group` - this is a toggle-able button group that changes colors when items are selected.  Add .selected to the `li`  to change colors and add the check to the button.<h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
* <h4>Basic</h4>
* <div class="question required">  
*   <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group selectable">
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>Modified with an item having the class `.selected`</h4>
* <div class="question required">  
*   <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>Modified with the `.expand`</h4>
* <div class="question">  
* <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group expanded selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>The container `.question` has an error state.<span class="sub-line"> NOTE: if button groups have states it is best for them to have been expanded.</span></h4>
* <div class="question error">  
* <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group expanded selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
*   <div class="message-holder"><small class="error">Error</small></div>
* </div>
*
*/
/**
* Twitter Typeahead:
* `.twitter-typeahead` - Type ahead javascript
* 
*   @example
* <span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;">
*  <input class="typeahead tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input id="StateTypeAhead" class="typeahead tt-input" type="text" placeholder="States of USA" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Open Sans', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">ala</pre>
*  <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: block; right: auto;">
*    <div class="tt-dataset-states">
*      <span class="tt-suggestions" style="display: block;">
*        <div class="tt-suggestion"><p style="white-space: normal;"><strong class="tt-highlight">Al</strong>abama</p></div>
*        <div class="tt-suggestion tt-cursor"><p style="white-space: normal;"><strong class="tt-highlight">Al</strong>aska</p></div>
*        <div class="tt-suggestion"><p style="white-space: normal;">C<strong class="tt-highlight">al</strong>ifornia</p></div>
*      </span>
*      </div>
*    </span>
*  </span><br/><br/><br/><br/><br/><a href="https://twitter.github.io/">Documentation</a>
*
**/
.twitter-typeahead {
  width: 100%;
}

.typeahead,
.tt-query,
.tt-hint {
  height: 30px;
  padding: .25rem .5rem;
  font-size: 1rem;
  line-height: 1;
  border: 2px solid #b3b3b3;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #4F4190;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(102, 102, 102, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999;
}

.tt-dropdown-menu {
  width: inherit;
  margin-top: .25rem;
  padding: .25rem .25rem;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
}
.tt-suggestion strong {
  color: #4F4190;
  font-size: 1.10em;
  margin: 0 2px 0 1px;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
}
.tt-suggestion.tt-cursor {
  color: #edecf4;
  background-color: #4F4190;
}
.tt-suggestion.tt-cursor strong {
  color: #fff;
}
.tt-suggestion p {
  margin: 0;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.ui-widget button {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
  font-size: 1em;
}

.ui-widget-content {
  border: 1px solid #b3b3b3;
  background-image: none;
  background-color: white;
  color: #333333;
}
.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #aaaaaa;
  background-image: none;
  background-color: #cccccc;
  color: #1a1a1a;
  font-weight: bold;
}
.ui-widget-header a {
  color: #1a1a1a;
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid #cccccc;
  background-image: none;
  background: #e6e6e6;
  font-weight: normal;
  color: #4d4d4d;
}

.ui-state-default a {
  color: #4d4d4d;
  text-decoration: none;
}
.ui-state-default a:link, .ui-state-default a:visited {
  color: #4d4d4d;
  text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  border: 1px solid #4F4190;
  background-image: none;
  background: #6959b4;
  font-weight: normal;
  color: #ffffff;
}

.ui-state-hover a {
  color: #ffffff;
  text-decoration: none;
}
.ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-focus a {
  color: #ffffff;
  text-decoration: none;
}
.ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid #4F4190;
  background: #4f4190;
  font-weight: normal;
  color: #fff;
}

.ui-state-active a {
  color: #fff;
  text-decoration: none;
}
.ui-state-active a:link, .ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #c32231;
  background: #fbe7e9;
  color: #c32231;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
  color: #c32231;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  border: 1px solid #c32231;
  background: #fbe7e9;
  color: #c32231;
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
  color: #c32231;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
  opacity: .7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: .35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: none repeat scroll 0 0 transparent;
  text-align: center;
}
.ui-icon :before {
  font-size: 1em;
  margin: .25em .5em;
  display: inline-block;
}

.ui-widget-content .ui-icon, .ui-widget-header .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-default .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-highlight .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

/* Font Awesome Override
------------------------------------------------ */
/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" ui-icon-"] {
  /* Remove the jQuery UI Icon */
  background: none repeat scroll 0 0 transparent;
  /* Remove the jQuery UI Text Indent */
  text-indent: 0;
  /* Bump it up - jQuery UI is -8px */
  margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" ui-icon-"] {
  /* Bump it - jQuery UI is -8px */
  margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
  margin-top: -0.75em;
}

/* positioning */
.ui-icon-carat-1-n:before {
  content: "";
}

.ui-icon-carat-1-ne:before {
  content: "";
}

.ui-icon-carat-1-e:before {
  content: "";
}

.ui-icon-carat-1-se:before {
  content: "";
}

.ui-icon-carat-1-s:before {
  content: "";
}

.ui-icon-carat-1-sw:before {
  content: "";
}

.ui-icon-carat-1-w:before {
  content: "";
}

.ui-icon-carat-1-nw:before {
  content: "";
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n:before {
  content: "";
}

.ui-icon-triangle-1-ne:before {
  content: "";
}

.ui-icon-triangle-1-e:before {
  content: "";
}

.ui-icon-triangle-1-se:before {
  content: "";
}

.ui-icon-triangle-1-s:before {
  content: "";
}

.ui-icon-triangle-1-sw:before {
  content: "";
}

.ui-icon-triangle-1-w:before {
  content: "";
}

.ui-icon-triangle-1-nw:before {
  content: "";
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n:before {
  content: "";
}

.ui-icon-arrow-1-ne:before {
  content: "";
}

.ui-icon-arrow-1-e:before {
  content: "";
}

.ui-icon-arrow-1-se:before {
  content: "";
}

.ui-icon-arrow-1-s:before {
  content: "";
}

.ui-icon-arrow-1-sw:before {
  content: "";
}

.ui-icon-arrow-1-w:before {
  content: "";
}

.ui-icon-arrow-1-nw:before {
  content: "";
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-circle-triangle-e:before {
  content: "";
}

.ui-icon-circle-triangle-s:before {
  content: "";
}

.ui-icon-circle-triangle-w:before {
  content: "";
}

.ui-icon-circle-triangle-n:before {
  content: "";
}

.ui-icon-circle-arrow-e:before {
  content: "";
}

.ui-icon-circle-arrow-s:before {
  content: "";
}

.ui-icon-circle-arrow-w:before {
  content: "";
}

.ui-icon-circle-arrow-n:before {
  content: "";
}

.ui-icon-circle-zoomin:before {
  content: "";
}

.ui-icon-circle-zoomout:before {
  content: "";
}

.ui-icon-circle-check:before {
  content: "";
}

.ui-icon-circlesmall-plus:before, .ui-icon-circle-plus:before {
  content: "";
}

.ui-icon-circlesmall-minus:before, .ui-icon-circle-minus:before {
  content: "";
}

.ui-icon-circlesmall-close:before, .ui-icon-circle-close:before {
  content: "";
}

.ui-icon-squaresmall-plus:before {
  content: "";
}

.ui-icon-squaresmall-minus:before {
  content: "";
}

.ui-icon-squaresmall-close:before {
  content: "";
}

.ui-icon-grip-dotted-vertical:before {
  content: "";
}

.ui-icon-grip-dotted-horizontal:before {
  content: "";
}

.ui-icon-grip-solid-vertical:before {
  content: "";
}

.ui-icon-grip-solid-horizontal:before {
  content: "";
}

.ui-icon-gripsmall-diagonal-se:before {
  content: "";
}

.ui-icon-grip-diagonal-se:before {
  content: "";
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-bottom-right-radius: 0;
}

/* Overlays */
.ui-widget-overlay {
  background: #6a6a6a url("images/ui-bg_flat_0_6a6a6a_40x100.png") 50% 50% repeat-x;
  opacity: .3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
  opacity: .3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
  border-radius: 8px;
}

.ui-spinner {
  border-radius: 0;
}
.ui-spinner .ui-spinner-button {
  border-radius: 0;
}
.ui-spinner .ui-spinner-input {
  padding: .57143rem;
  height: 2.64286rem;
  margin: 0;
}

/* AutoComplete */
.ui-autocomplete {
  max-height: 15em;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  font-size: 1.25rem;
  line-height: 1;
}
.ui-autocomplete span {
  padding: 0 .25rem 0 0;
  font-size: .8em;
}
.ui-autocomplete .headline {
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 700;
  display: block;
  color: #525252;
  font-size: 1em;
}
.ui-autocomplete .description {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #666666;
  font-size: .75em;
}
.ui-autocomplete .ui-state-focus .headline, .ui-autocomplete .ui-state-focus .description {
  color: white;
}

.ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: .1em;
  border-radius: 0;
}
.ui-datepicker-header .ui-datepicker-prev:before, .ui-datepicker-header .ui-datepicker-next:before {
  font-size: 1em;
  margin: .35em .45em;
  display: inline-block;
}
.ui-datepicker-header .ui-datepicker-prev .ui-icon, .ui-datepicker-header .ui-datepicker-next .ui-icon {
  text-indent: -9999px;
}
.ui-datepicker-header .ui-datepicker-prev:before {
  content: "";
}
.ui-datepicker-header .ui-datepicker-next:before {
  content: "";
}

.ui-accordion-override .ui-accordion-header {
  font-size: 1.92857em;
  line-height: 1.45185em;
  margin-top: 0.54444em;
  margin-bottom: 0.18148em;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
  color: #262626;
  padding-left: 2.25em;
  background: none;
  margin-bottom: 0;
  border: 0px none;
  margin-bottom: 0;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .ui-accordion-override .ui-accordion-header {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .ui-accordion-override .ui-accordion-header {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

.ui-accordion-override .ui-accordion-header:hover {
  color: #000;
}
.ui-accordion-override .ui-accordion-header .ui-accordion-header-icon {
  font-size: 1.5em;
  padding: 0;
  height: 1em;
  width: 1em;
  left: .33333333333em;
  top: .33333333333em;
  margin-top: 0;
  display: block;
}
.ui-accordion-override .ui-icon-triangle-1-e:before {
  content: "\f138";
  color: #6959b4;
}
.ui-accordion-override .ui-icon-triangle-1-s:before {
  content: "\f13a";
  color: #4F4190;
}
.ui-accordion-override .ui-accordion-content {
  border: 0;
  border-radius: 0;
}
.ui-accordion-override .ui-accordion-content.ui-accordion-content-active {
  border-top: 2px solid #4F4190;
  border-bottom: 2px solid #666666;
}

.group-section-pagination-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.group-section-pagination-holder::before, .group-section-pagination-holder::after {
  content: ' ';
  display: table;
}
.group-section-pagination-holder::after {
  clear: both;
}

.page .page-wrapper, .content-padding, .content-padding.page-wrapper {
  margin: 0 auto;
}

.page .page-wrapper {
  max-width: 1200px;
}

.page .page-wrapper {
  padding: 1rem .5rem 1.25rem;
}
@media only screen and (min-width: 767px) {
  .page .page-wrapper {
    padding: 1.5rem .75rem 2rem;
  }
}
@media only screen and (min-width: 1024px) {
  .page .page-wrapper {
    padding: 2rem 1rem 3rem;
  }
}

.section-padding, .with-group-sections .page-wrapper, .paper-page .page-wrapper {
  padding: .25rem 0;
}
@media only screen and (min-width: 320px) {
  .section-padding, .with-group-sections .page-wrapper, .paper-page .page-wrapper {
    padding: .5rem 0;
  }
}
@media only screen and (min-width: 767px) {
  .section-padding, .with-group-sections .page-wrapper, .paper-page .page-wrapper {
    padding: .75rem 0;
  }
}
@media only screen and (min-width: 1024px) {
  .section-padding, .with-group-sections .page-wrapper, .paper-page .page-wrapper {
    padding: 1rem 0;
  }
}

.with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
  padding-top: .125rem;
  padding-bottom: .125rem;
}
@media only screen and (min-width: 320px) {
  .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
}
@media only screen and (min-width: 767px) {
  .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.content-padding, .content-padding.page-wrapper, .with-group-sections .page-wrapper > .section, .with-group-sections .page-wrapper > section, .with-group-sections .page-wrapper > .row, .paper-page .page-wrapper > .section, .paper-page .page-wrapper > section, .paper-page .page-wrapper > .row, .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
  padding-left: .5rem;
  padding-right: .5rem;
}
@media only screen and (min-width: 767px) {
  .content-padding, .content-padding.page-wrapper, .with-group-sections .page-wrapper > .section, .with-group-sections .page-wrapper > section, .with-group-sections .page-wrapper > .row, .paper-page .page-wrapper > .section, .paper-page .page-wrapper > section, .paper-page .page-wrapper > .row, .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
    padding-right: .75rem;
    padding-left: .75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .content-padding, .content-padding.page-wrapper, .with-group-sections .page-wrapper > .section, .with-group-sections .page-wrapper > section, .with-group-sections .page-wrapper > .row, .paper-page .page-wrapper > .section, .paper-page .page-wrapper > section, .paper-page .page-wrapper > .row, .with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .colored-paper {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.group-section .colored-paper:first-child, .card .colored-paper:first-child, .group-section-pagination-holder.top {
  margin-top: -.2rem;
  margin-top: calc(-.2rem - 1px);
}
@media only screen and (max-height: 480px) {
  .group-section .colored-paper:first-child, .card .colored-paper:first-child, .group-section-pagination-holder.top {
    margin-top: -.25rem;
    margin-top: calc(-.25rem - 1px);
  }
}
@media only screen and (min-width: 767px) {
  .group-section .colored-paper:first-child, .card .colored-paper:first-child, .group-section-pagination-holder.top {
    margin-top: -.5rem;
    margin-top: calc(-.5rem - 1px);
  }
}
@media only screen and (min-width: 1024px) {
  .group-section .colored-paper:first-child, .card .colored-paper:first-child, .group-section-pagination-holder.top {
    margin-top: -1rem;
    margin-top: calc(-1rem - 1px);
  }
}
@media only screen and (min-width: 1200px) {
  .group-section .colored-paper:first-child, .card .colored-paper:first-child, .group-section-pagination-holder.top {
    margin-top: -1rem;
    margin-top: calc(-1rem - 1px);
  }
}

.colored-paper .tabs, .group-section .colored-paper:last-child, .card .colored-paper:last-child, .group-section-pagination-holder {
  margin-bottom: -.2rem;
  margin-bottom: calc(-.2rem - 2px);
}
@media only screen and (max-height: 480px) {
  .colored-paper .tabs, .group-section .colored-paper:last-child, .card .colored-paper:last-child, .group-section-pagination-holder {
    margin-bottom: -.25rem;
    margin-bottom: calc(-.25rem - 2px);
  }
}
@media only screen and (min-width: 767px) {
  .colored-paper .tabs, .group-section .colored-paper:last-child, .card .colored-paper:last-child, .group-section-pagination-holder {
    margin-bottom: -.5rem;
    margin-bottom: calc(-.5rem - 2px);
  }
}
@media only screen and (min-width: 1024px) {
  .colored-paper .tabs, .group-section .colored-paper:last-child, .card .colored-paper:last-child, .group-section-pagination-holder {
    margin-bottom: -1rem;
    margin-bottom: calc(-1rem - 2px);
  }
}
@media only screen and (min-width: 1200px) {
  .colored-paper .tabs, .group-section .colored-paper:last-child, .card .colored-paper:last-child, .group-section-pagination-holder {
    margin-bottom: -1rem;
    margin-bottom: calc(-1rem - 2px);
  }
}

.colored-paper, .group-section-pagination-holder {
  margin-left: -.5rem;
  margin-right: -.5rem;
  margin-left: calc(-.5rem - 1px);
  margin-right: calc(-.5rem - 1px);
}
@media only screen and (min-width: 767px) {
  .colored-paper, .group-section-pagination-holder {
    margin-left: -.75rem;
    margin-right: -.75rem;
    margin-left: calc(-.75rem - 1px);
    margin-right: calc(-.75rem - 1px);
  }
}
@media only screen and (min-width: 1024px) {
  .colored-paper, .group-section-pagination-holder {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-left: calc(-1rem - 1px);
    margin-right: calc(-1rem - 1px);
  }
}

.page .page-wrapper, .content-padding, .content-padding.page-wrapper, .colored-paper {
  -webkit-transition: padding 1s;
  /* Safari */
  transition: padding 1s;
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
}

.section, section {
  width: 100%;
}

.section-nav.back ~ .page-wrapper {
  padding-top: 0;
}

/**
* page layouts:
* `page-wrapper` - inside all layout divs the page-wrapper is used to make a unified amount of spacing from the content and the vewport edges.
* 
*   @example
*   <div class="page edge" ><div class="page-wrapper outline" ><span class="notation">page-wrapper</span><div class="section outline"><span class="notation">section</span>Hello this is content </div></div>
**/
/**
* page layouts outline:
* `page-wrapper` - inside all layout divs the page-wrapper is used to make a unified amount of spacing from the content and the vewport edges.
* 
*   @example
*	<div class="page-wrapper" style="border:red 1px solid"><div class="section">Hello this is content </div></div>
**/
.with-group-sections, .paper-page {
  background-image: url("../img/billie-holiday-lite.png");
}

.with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card, .lifted {
  -webkit-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
}

.with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card {
  border: 1px solid #d9d9d9;
  background-color: white;
}

.with-group-sections .page-wrapper .group-section.ghost, .with-group-sections .page-wrapper .card.ghost, .paper-page .page-wrapper .group-section.ghost, .paper-page .page-wrapper .card.ghost {
  border: 2px dashed #bfbfbf;
  background-color: transparent;
  background-image: url("../img/empty_stripe_grey@2x.png");
  -webkit-box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
  -moz-box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
  box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
}

.with-group-sections.error, .with-group-sections.error .overlap .tabs .selected, .with-group-sections.error .overlap .tabs .is-active, .paper-page.error, .paper-page.error .overlap .tabs .selected, .paper-page.error .overlap .tabs .is-active {
  background-color: #f5c3c8;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.error .overlap .tabs .selected, .with-group-sections.error .overlap .tabs .is-active, .paper-page.error .overlap .tabs .selected, .paper-page.error .overlap .tabs .is-active {
  background: #c32231;
}
.with-group-sections.error .overlap .tabs .selected a, .with-group-sections.error .overlap .tabs .is-active a, .paper-page.error .overlap .tabs .selected a, .paper-page.error .overlap .tabs .is-active a {
  color: #fff;
}
.with-group-sections.warning, .with-group-sections.warning .overlap .tabs .selected, .with-group-sections.warning .overlap .tabs .is-active, .paper-page.warning, .paper-page.warning .overlap .tabs .selected, .paper-page.warning .overlap .tabs .is-active {
  background-color: #fae1c2;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.warning .overlap .tabs .selected, .with-group-sections.warning .overlap .tabs .is-active, .paper-page.warning .overlap .tabs .selected, .paper-page.warning .overlap .tabs .is-active {
  background: #E08514;
}
.with-group-sections.warning .overlap .tabs .selected a, .with-group-sections.warning .overlap .tabs .is-active a, .paper-page.warning .overlap .tabs .selected a, .paper-page.warning .overlap .tabs .is-active a {
  color: #262626;
}
.with-group-sections.success, .with-group-sections.success .overlap .tabs .selected, .with-group-sections.success .overlap .tabs .is-active, .paper-page.success, .paper-page.success .overlap .tabs .selected, .paper-page.success .overlap .tabs .is-active {
  background-color: #b9f7d3;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.success .overlap .tabs .selected, .with-group-sections.success .overlap .tabs .is-active, .paper-page.success .overlap .tabs .selected, .paper-page.success .overlap .tabs .is-active {
  background: #14B057;
}
.with-group-sections.success .overlap .tabs .selected a, .with-group-sections.success .overlap .tabs .is-active a, .paper-page.success .overlap .tabs .selected a, .paper-page.success .overlap .tabs .is-active a {
  color: #fff;
}
.with-group-sections.info, .with-group-sections.info .overlap .tabs .selected, .with-group-sections.info .overlap .tabs .is-active, .paper-page.info, .paper-page.info .overlap .tabs .selected, .paper-page.info .overlap .tabs .is-active {
  background-color: #e9e9e9;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.info .overlap .tabs .selected, .with-group-sections.info .overlap .tabs .is-active, .paper-page.info .overlap .tabs .selected, .paper-page.info .overlap .tabs .is-active {
  background: #a6a6a6;
}
.with-group-sections.info .overlap .tabs .selected a, .with-group-sections.info .overlap .tabs .is-active a, .paper-page.info .overlap .tabs .selected a, .paper-page.info .overlap .tabs .is-active a {
  color: #262626;
}
.with-group-sections.highlighted, .with-group-sections.highlighted .overlap .tabs .selected, .with-group-sections.highlighted .overlap .tabs .is-active, .paper-page.highlighted, .paper-page.highlighted .overlap .tabs .selected, .paper-page.highlighted .overlap .tabs .is-active {
  background-color: #d0cbe8;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.highlighted .overlap .tabs .selected, .with-group-sections.highlighted .overlap .tabs .is-active, .paper-page.highlighted .overlap .tabs .selected, .paper-page.highlighted .overlap .tabs .is-active {
  background: #4F4190;
}
.with-group-sections.highlighted .overlap .tabs .selected a, .with-group-sections.highlighted .overlap .tabs .is-active a, .paper-page.highlighted .overlap .tabs .selected a, .paper-page.highlighted .overlap .tabs .is-active a {
  color: #fff;
}
.with-group-sections.disabled, .with-group-sections.disabled .overlap .tabs .selected, .with-group-sections.disabled .overlap .tabs .is-active, .paper-page.disabled, .paper-page.disabled .overlap .tabs .selected, .paper-page.disabled .overlap .tabs .is-active {
  background-color: #f2f2f2;
  background-image: url("../img/billie-holiday-speck.png");
}
.with-group-sections.disabled .overlap .tabs .selected, .with-group-sections.disabled .overlap .tabs .is-active, .paper-page.disabled .overlap .tabs .selected, .paper-page.disabled .overlap .tabs .is-active {
  background: #cccccc;
}
.with-group-sections.disabled .overlap .tabs .selected a, .with-group-sections.disabled .overlap .tabs .is-active a, .paper-page.disabled .overlap .tabs .selected a, .paper-page.disabled .overlap .tabs .is-active a {
  color: #262626;
}
.with-group-sections .overlap + .page-wrapper, .paper-page .overlap + .page-wrapper {
  padding-top: .5rem;
}
.with-group-sections .page-wrapper .group-section, .with-group-sections .page-wrapper .card, .paper-page .page-wrapper .group-section, .paper-page .page-wrapper .card {
  width: auto;
  position: relative;
}
.with-group-sections .page-wrapper .group-section.ghost, .with-group-sections .page-wrapper .card.ghost, .paper-page .page-wrapper .group-section.ghost, .paper-page .page-wrapper .card.ghost {
  border-radius: 6px;
}
.with-group-sections .page-wrapper.error .group-section.ghost, .with-group-sections .page-wrapper.error .card.ghost, .paper-page .page-wrapper.error .group-section.ghost, .paper-page .page-wrapper.error .card.ghost {
  background-color: #e7ced1;
}
.with-group-sections .page-wrapper.warning .group-section.ghost, .with-group-sections .page-wrapper.warning .card.ghost, .paper-page .page-wrapper.warning .group-section.ghost, .paper-page .page-wrapper.warning .card.ghost {
  background-color: #eaddce;
}
.with-group-sections .page-wrapper.success .group-section.ghost, .with-group-sections .page-wrapper.success .card.ghost, .paper-page .page-wrapper.success .group-section.ghost, .paper-page .page-wrapper.success .card.ghost {
  background-color: #c9e8d6;
}
.with-group-sections .page-wrapper.info .group-section.ghost, .with-group-sections .page-wrapper.info .card.ghost, .paper-page .page-wrapper.info .group-section.ghost, .paper-page .page-wrapper.info .card.ghost {
  background-color: #e1e1e1;
}
.with-group-sections .page-wrapper.highlighted .group-section.ghost, .with-group-sections .page-wrapper.highlighted .card.ghost, .paper-page .page-wrapper.highlighted .group-section.ghost, .paper-page .page-wrapper.highlighted .card.ghost {
  background-color: #d5d2e1;
}
.with-group-sections .page-wrapper.disabled .group-section.ghost, .with-group-sections .page-wrapper.disabled .card.ghost, .paper-page .page-wrapper.disabled .group-section.ghost, .paper-page .page-wrapper.disabled .card.ghost {
  background-color: #e6e6e6;
}

.colored-paper {
  background-image: url("../img/construction-paper.png");
  background-color: #4F4190;
}
.colored-paper h1, .colored-paper h2, .colored-paper h3, .colored-paper h4, .colored-paper h5, .colored-paper h6, .colored-paper p {
  color: #fff;
}
.colored-paper.secondary h1, .colored-paper.secondary h2, .colored-paper.secondary h3, .colored-paper.secondary h4, .colored-paper.secondary h5, .colored-paper.secondary h6, .colored-paper.secondary p {
  color: #262626;
}
.colored-paper.error {
  background-color: #c32231;
  color: #fff;
}
.colored-paper.error h1, .colored-paper.error h2, .colored-paper.error h3, .colored-paper.error h4, .colored-paper.error h5, .colored-paper.error h6, .colored-paper.error p {
  color: #fff;
}
.colored-paper.warning {
  background-color: #E08514;
  color: #262626;
}
.colored-paper.warning h1, .colored-paper.warning h2, .colored-paper.warning h3, .colored-paper.warning h4, .colored-paper.warning h5, .colored-paper.warning h6, .colored-paper.warning p {
  color: #262626;
}
.colored-paper.success {
  background-color: #14B057;
  color: #fff;
}
.colored-paper.success h1, .colored-paper.success h2, .colored-paper.success h3, .colored-paper.success h4, .colored-paper.success h5, .colored-paper.success h6, .colored-paper.success p {
  color: #fff;
}
.colored-paper.info {
  background-color: #a6a6a6;
  color: #262626;
}
.colored-paper.info h1, .colored-paper.info h2, .colored-paper.info h3, .colored-paper.info h4, .colored-paper.info h5, .colored-paper.info h6, .colored-paper.info p {
  color: #262626;
}
.colored-paper.highlighted {
  background-color: #4F4190;
  color: #fff;
}
.colored-paper.highlighted h1, .colored-paper.highlighted h2, .colored-paper.highlighted h3, .colored-paper.highlighted h4, .colored-paper.highlighted h5, .colored-paper.highlighted h6, .colored-paper.highlighted p {
  color: #fff;
}
.colored-paper.disabled {
  background-color: #cccccc;
  color: #262626;
}
.colored-paper.disabled h1, .colored-paper.disabled h2, .colored-paper.disabled h3, .colored-paper.disabled h4, .colored-paper.disabled h5, .colored-paper.disabled h6, .colored-paper.disabled p {
  color: #262626;
}
.colored-paper.error .tabs li {
  background-color: #f7cfd3;
}
.colored-paper.error .tabs li:hover {
  background-color: #f0abb2;
}
.colored-paper.warning .tabs li {
  background-color: #fbe7ce;
}
.colored-paper.warning .tabs li:hover {
  background-color: #f7d5aa;
}
.colored-paper.success .tabs li {
  background-color: #c7f9dc;
}
.colored-paper.success .tabs li:hover {
  background-color: #9cf4c2;
}
.colored-paper.info .tabs li {
  background-color: #ededed;
}
.colored-paper.info .tabs li:hover {
  background-color: #e0e0e0;
}
.colored-paper.highlighted .tabs li {
  background-color: #dad6ec;
}
.colored-paper.highlighted .tabs li:hover {
  background-color: #bdb6de;
}
.colored-paper.disabled .tabs li {
  background-color: whitesmoke;
}
.colored-paper.disabled .tabs li:hover {
  background-color: #ededed;
}
.card.ghost .colored-paper, .colored-paper .group-section.ghost {
  background-image: url("../img/construction_paper_grey.png");
  border-radius: 7.5px !important;
  margin: 0 !important;
}
.colored-paper .tabs {
  border: 0 none;
  background-color: transparent;
}
.colored-paper .tabs li {
  border-radius: .4em;
  display: inline-block;
  margin: .4em .05em .3em;
  vertical-align: bottom;
  background-color: #dad6ec;
  padding: .2em .3em;
}
.colored-paper .tabs li:hover {
  background-color: #bdb6de;
}
.colored-paper .tabs li.selected, .colored-paper .tabs li:hover.selected {
  border-radius: .5em;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-bottom: 0;
  vertical-align: bottom;
  padding: .4em;
  background-color: #fff;
}

.radius.group-section .colored-paper:first-child, .radius.card .colored-paper:first-child, .radius.group-section .colored-paper:last-child, .radius.card .colored-paper:last-child {
  border-radius: 6px;
}

.radius-bottom.group-section .colored-paper:last-child, .radius-bottom.card .colored-paper:last-child {
  border-radius: 0 0 6px 6px;
}

.radius-top.group-section .colored-paper:first-child, .radius-top.card .colored-paper:first-child {
  border-radius: 6px 6px 0 0;
}

.full-row, .full-col {
  overflow: hidden;
  position: absolute;
}

.full-row {
  left: 0;
  right: 0;
}

.full-col {
  top: 0;
  bottom: 0;
}

.scroll-x {
  overflow-x: auto;
}

.scroll-y {
  overflow-y: auto;
}

.mobile-offcanvas-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}
.mobile-offcanvas-wrapper .split-layout {
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible;
}
.mobile-offcanvas-wrapper .split-layout.navOn {
  -webkit-transform: translateX(83.33333%);
  transform: translateX(83.33333%);
  transform: translate3d(83.33333%, 0, 0);
  -webkit-transform: translate3d(83.33333%, 0, 0);
}
.mobile-offcanvas-wrapper .split-layout .split-sidebar {
  display: block;
  width: 83.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  right: auto;
  position: absolute;
}
@media screen and (min-width: 40em) {
  .mobile-offcanvas-wrapper .split-layout .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.mobile-offcanvas-wrapper .split-layout .split-sidebar:last-child:not(:first-child) {
  float: right;
}
.mobile-offcanvas-wrapper .split-layout.reverse.navOn {
  -webkit-transform: translateX(-83.33333%);
  transform: translateX(-83.33333%);
  transform: translate3d(-83.33333%, 0, 0);
  -webkit-transform: translate3d(-83.33333%, 0, 0);
}
.mobile-offcanvas-wrapper .split-layout.reverse .split-sidebar {
  position: absolute;
  right: -83.33333%;
  left: auto;
}
.mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
@media screen and (min-width: 40em) {
  .mobile-offcanvas-wrapper .split-layout.medium, .mobile-offcanvas-wrapper .split-layout.medium.navOn, .mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media screen and (min-width: 64em) {
  .mobile-offcanvas-wrapper .split-layout.large, .mobile-offcanvas-wrapper .split-layout.large.navOn, .mobile-offcanvas-wrapper .split-layout.medium, .mobile-offcanvas-wrapper .split-layout.medium.navOn, .mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media screen and (min-width: 75em) {
  .mobile-offcanvas-wrapper .split-layout.xlarge, .mobile-offcanvas-wrapper .split-layout.xlarge.navOn, .mobile-offcanvas-wrapper .split-layout.large, .mobile-offcanvas-wrapper .split-layout.large.navOn, .mobile-offcanvas-wrapper .split-layout.medium, .mobile-offcanvas-wrapper .split-layout.medium.navOn, .mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.page-wrapper > .split-layout {
  margin: -1rem -.5rem;
}
@media only screen and (min-width: 767px) {
  .page-wrapper > .split-layout {
    margin: -1.5rem -.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .page-wrapper > .split-layout {
    margin: -2rem -1rem -3rem;
  }
}

.split-layout {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  clear: both;
}
.split-layout::before, .split-layout::after {
  content: ' ';
  display: table;
}
.split-layout::after {
  clear: both;
}
.split-layout .split-sidebar, .split-layout .split-content {
  margin-bottom: -9998px;
  padding-bottom: 9998px;
}
.split-layout.fill-page-height .split-content {
  min-height: 100vh;
  margin-bottom: 0px;
  padding-bottom: 1em;
}
.split-layout .split-sidebar {
  display: none;
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  left: -83.33333%;
  border: #b3b3b3 solid 0;
  border-right-width: 1px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media screen and (min-width: 40em) {
  .split-layout .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.split-layout .split-sidebar:last-child:not(:first-child) {
  float: right;
}
.split-layout .split-content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media screen and (min-width: 40em) {
  .split-layout .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.split-layout .split-content:last-child:not(:first-child) {
  float: right;
}
.split-layout.xlarge.reverse .split-sidebar, .split-layout.xlarge.reverse .split-content, .split-layout.xlarge.reverse.navOn .split-sidebar, .split-layout.xlarge.reverse.navOn .split-content, .split-layout.large.reverse .split-sidebar, .split-layout.large.reverse .split-content, .split-layout.large.reverse.navOn .split-sidebar, .split-layout.large.reverse.navOn .split-content, .split-layout.medium.reverse .split-sidebar, .split-layout.medium.reverse .split-content, .split-layout.medium.reverse.navOn .split-sidebar, .split-layout.medium.reverse.navOn .split-content, .split-layout.small.reverse .split-sidebar, .split-layout.small.reverse .split-content, .split-layout.small.reverse.navOn .split-sidebar, .split-layout.small.reverse.navOn .split-content, .split-layout.reverse .split-sidebar, .split-layout.reverse .split-content, .split-layout.reverse.navOn .split-sidebar, .split-layout.reverse.navOn .split-content {
  float: right !important;
}
.split-layout.xlarge.reverse .split-sidebar, .split-layout.xlarge.reverse.navOn .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.large.reverse.navOn .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.medium.reverse.navOn .split-sidebar, .split-layout.small.reverse .split-sidebar, .split-layout.small.reverse.navOn .split-sidebar, .split-layout.reverse .split-sidebar, .split-layout.reverse.navOn .split-sidebar {
  border-right-width: 0;
  border-left-width: 1px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.split-layout.xlarge.reverse .split-content, .split-layout.xlarge.reverse.navOn .split-content, .split-layout.large.reverse .split-content, .split-layout.large.reverse.navOn .split-content, .split-layout.medium.reverse .split-content, .split-layout.medium.reverse.navOn .split-content, .split-layout.small.reverse .split-content, .split-layout.small.reverse.navOn .split-content, .split-layout.reverse .split-content, .split-layout.reverse.navOn .split-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.split-layout.small .split-sidebar {
  display: block;
  width: 41.66667%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 40em) {
  .split-layout.small .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.split-layout.small .split-sidebar:last-child:not(:first-child) {
  float: right;
}
.split-layout.small .split-content {
  display: block;
  width: 58.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 40em) {
  .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.split-layout.small .split-content:last-child:not(:first-child) {
  float: right;
}
@media screen and (min-width: 40em) {
  .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    position: relative;
    left: 0;
    right: 0;
    display: block;
    width: 33.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 40em) and (min-width: 40em) {
  .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 40em) {
  .split-layout.medium .split-sidebar:last-child:not(:first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(:first-child), .split-layout.small .split-sidebar:last-child:not(:first-child), .split-layout.small.reverse .split-sidebar:last-child:not(:first-child) {
    float: right;
  }
  .split-layout.medium .split-content, .split-layout.small .split-content {
    display: block;
    width: 66.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 40em) and (min-width: 40em) {
  .split-layout.medium .split-content, .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 40em) {
  .split-layout.medium .split-content:last-child:not(:first-child), .split-layout.small .split-content:last-child:not(:first-child) {
    float: right;
  }
}
@media screen and (min-width: 64em) {
  .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    display: block;
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 64em) and (min-width: 40em) {
  .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 64em) {
  .split-layout.large .split-sidebar:last-child:not(:first-child), .split-layout.large.reverse .split-sidebar:last-child:not(:first-child), .split-layout.medium .split-sidebar:last-child:not(:first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(:first-child), .split-layout.small .split-sidebar:last-child:not(:first-child), .split-layout.small.reverse .split-sidebar:last-child:not(:first-child) {
    float: right;
  }
  .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content {
    display: block;
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 64em) and (min-width: 40em) {
  .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 64em) {
  .split-layout.large .split-content:last-child:not(:first-child), .split-layout.medium .split-content:last-child:not(:first-child), .split-layout.small .split-content:last-child:not(:first-child) {
    float: right;
  }
}
@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-sidebar, .split-layout.xlarge.reverse .split-sidebar, .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    display: block;
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 75em) and (min-width: 40em) {
  .split-layout.xlarge .split-sidebar, .split-layout.xlarge.reverse .split-sidebar, .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-sidebar:last-child:not(:first-child), .split-layout.xlarge.reverse .split-sidebar:last-child:not(:first-child), .split-layout.large .split-sidebar:last-child:not(:first-child), .split-layout.large.reverse .split-sidebar:last-child:not(:first-child), .split-layout.medium .split-sidebar:last-child:not(:first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(:first-child), .split-layout.small .split-sidebar:last-child:not(:first-child), .split-layout.small.reverse .split-sidebar:last-child:not(:first-child) {
    float: right;
  }
  .split-layout.xlarge .split-content, .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content {
    display: block;
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 75em) and (min-width: 40em) {
  .split-layout.xlarge .split-content, .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-content:last-child:not(:first-child), .split-layout.large .split-content:last-child:not(:first-child), .split-layout.medium .split-content:last-child:not(:first-child), .split-layout.small .split-content:last-child:not(:first-child) {
    float: right;
  }
}

.with-group-sections .split-sidebar {
  background-color: #fff;
}

/**
* Split Layout:
* `.mobile-offcanvas-wrapper` - This is a structural container for content and sidebar. Change the switch point where the side bar disapears by adding `.large`,`.medium`, or `.small`. 
* 
*   @example
*	<div class="mobile-offcanvas-wrapper">
*	<section class="split-layout medium navOn">
*	<aside class="split-sidebar">
*	<h2>Sidebar</h2>
*	<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
*	</aside>
*	<article class="split-content page with-group-sections">
*	<div class="page-wrapper">
*	<div class="content-padding"><h1>Outside of the Group Section<span class="sub-line">I need to be wrapped by a div.content-padding to line up</span>
*	</h1></div>
*	<div class="card">
*		<div class="colored-paper"><h3>Inside of a "Card" on "Colored Paper"</h3>
*			<p>Some extra content in the content area</p></div>
*			<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
*	</div></div>
*	</article>
*	</section>
*	</div>
*/
/**
* Mobile Header:
* `.header.pagel` - there is a basic layout of short tabbed header of apps
* 
*   @example
*	<div class="row"><header class="header page">
*		<a href="#!/content/calculator/" class="logo">
*			<img  src="assets/img/headerlogo.svg" alt="ACC Statin Intolerance Guidelines">
*		</a>
*		<ul class="nav tabs tabs-primary">
*			<li class="icon tab-title"><a class="home"><i class="fa fa-holder"></i></a></li>
*			<li id="calculator-Tab" class="selected tab-title"><a href="#!/content/calculator/"  class="condensable condensable-word small">Eval<span class="condense">uate</span></a></li>
*			<li id="recommendation-Tab" class=" tab-title"><a href="#!/content/recommendation/prescribinginfo/"  class="condensable condensable-word small">Recommend<span class="condense">ation</span></a></li>
*		</ul>
*	</header></div>
*/
.page.header {
  border-bottom: #00386b 6px solid;
  padding: 0;
  background-color: #fff;
  display: block;
  clear: both;
  width: 100%;
  position: relative;
}
.page.header:after {
  content: "";
  display: table;
  clear: both;
}
.page.header .logo {
  left: 0;
  top: 0;
  display: none;
  text-align: right;
  clear: none;
  float: left;
  vertical-align: middle;
}
@media only screen and (min-width: 767px) {
  .page.header .logo {
    display: inline-block;
  }
}
.page.header .logo img {
  height: 60px;
}
@media only screen and (min-width: 1024px) {
  .page.header .logo img {
    height: 70px;
    margin: 10px 10px 0 0;
  }
}
@media only screen and (min-width: 1200px) {
  .page.header .logo img {
    height: 85px;
    margin: 10px 10px 0 0;
  }
}
.page.header .tabs {
  clear: none;
}
@media only screen and (min-width: 767px) {
  .page.header .tabs {
    float: right;
    width: auto;
    height: 70px;
  }
}
@media only screen and (min-width: 1024px) {
  .page.header .tabs {
    height: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .page.header .tabs {
    height: 95px;
  }
}

/**
* Mobile Footer:
* `.footer.page` - there is a basic layout of short tabbed footer for mobile apps
* 
*   @example
*	<footer class="page footer">
*		<a href="#!/content/home/" class="logo" >
*			<img style="border:none 0; " src="assets/img/footerlogo.svg" alt="ACC Statin Intolerance Guidelines">
*		</a>
*		<ul class="nav tabs tabs-primary reverse swappable small">
*			<li id="guideline-Tab" class="">
*				<a href="#!/content/guideline/home">
*					<span class="short-text">Resources</span>
*					<span class="long-text">Resources</span>
*				</a>
*			</li>
*			<li id="legal-Tab" class="selected">
*				<a href="#!/content/legal">
*				<span class="short-text">Disclaimer</span>
*				<span class="long-text">Disclaimer</span>
*				</a>
*			</li>
*			<li id="about-Tab" class="">
*				<a href="#!/content/about">
*				<span class="short-text">About</span>
*				<span class="long-text">About the App</span>
*				</a>
*			</li>
*		</ul>
*	</footer>
*/
.page.footer {
  border-top: #00386b 4px solid;
  background: url("../img/crossed_stripes.png");
}
.page.footer:after {
  content: "";
  display: table;
  clear: both;
}
.page.footer .tabs {
  float: right;
  width: auto;
}
.page.footer .logo img {
  margin: .25rem 1rem;
  display: none;
}
.page.footer .tabs.primary li.selected {
  border-top-color: #00386b;
}
.page.footer .tabs.primary li.selected a:after {
  border-top-color: #00386b;
}
@media only screen and (max-width: 767px) {
  .page.footer {
    text-align: right;
  }
  .page.footer .logo img {
    display: block;
    width: 320px;
  }
  .page.footer .tabs {
    width: 100%;
    margin: 0;
  }
  .page.footer .logo {
    display: block;
    border-bottom: #00386b 4px solid;
  }
  .page.footer .logo:after {
    content: "";
    display: table;
    clear: both;
  }
  .page.footer .logo img {
    max-width: 95%;
    margin: .25rem 2.5%;
  }
}
@media only screen and (max-width: 1024px) {
  .page.footer .tabs {
    font-weight: 500;
  }
}
@media only screen and (min-width: 1024px) {
  .page.footer {
    text-align: center;
  }
  .page.footer .tabs.tabs-primary.reverse {
    float: none;
    display: inline-block;
  }
  .page.footer .tabs.tabs-primary.reverse li {
    float: none;
    display: inline-block;
  }
  .page.footer .tabs.tabs-primary.reverse, .page.footer .tabs.tabs-primary.reverse li {
    background-color: transparent;
    border: 0;
  }
  .page.footer .tabs.tabs-primary.reverse a, .page.footer .tabs.tabs-primary.reverse li a {
    color: #fff;
  }
  .page.footer .tabs.tabs-primary.reverse a:after, .page.footer .tabs.tabs-primary.reverse li a:after {
    top: auto;
    bottom: -1px;
    border-width: 0px 8px;
    border-bottom: 10px solid #fff;
  }
  .page.footer .tabs.tabs-primary.reverse a:hover, .page.footer .tabs.tabs-primary.reverse li a:hover {
    text-decoration: underline;
  }
}

.page-footer {
  border-top: #666666 4px solid;
  background-color: #b3b3b3;
}
.page-footer .logo-holder {
  width: 100%;
  display: block;
  padding: 1rem 1rem 1rem 1rem;
}
.page-footer .logo {
  height: 60px;
  padding: 5px;
}
.page-footer h3 {
  font-size: 1.57143em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .page-footer h3 {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .page-footer h3 {
    line-height: 1.51455em;
  }
}

.page-footer h4 {
  margin-left: 0;
  font-family: 'Roboto Slab', "Times New Roman",  'Lucida Bright', Georgia, serif;
  font-weight: 400;
}
.page-footer ul {
  margin-left: 0;
  list-style: none;
}
.page-footer * {
  color: #666666;
}
.page-footer .language-picker {
  display: none;
}

.footer-darker {
  background-color: #666666;
  padding: 1rem;
  background: url("../img/crossed_stripes.png");
}
@media only screen and (min-width: 767px) {
  .footer-darker {
    padding: 2rem 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer-darker {
    margin-right: -2rem;
  }
}
.footer-darker * {
  color: #fff;
}
.footer-darker section + section, .footer-darker .section + .section {
  margin-top: 1rem;
}

.address ul {
  display: inline-block;
  width: auto;
  float: left;
  padding-right: 1.67rem;
  margin-bottom: 0;
}
.address li {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .address li {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .address li {
    line-height: 1.19em;
  }
}

.acc-websites .nav-list.small li, .acc-websites .small.panel-selector li {
  border-color: #4d4d4d;
}
.acc-websites .nav-list.small li:hover, .acc-websites .small.panel-selector li:hover {
  background-color: #595959;
}

.icon-only {
  display: inline-block;
  text-decoration: none;
  color: #333333;
}
.icon-only .text {
  display: none;
}

button.twitter, .button.twitter {
  background-color: #00aced;
  color: #FFF;
}
button.twitter:hover, button.twitter:focus, .button.twitter:hover, .button.twitter:focus {
  background-color: #43377a;
  color: #FFF;
}
button.facebook, .button.facebook {
  background-color: #3b5998;
  color: #FFF;
}
button.facebook:hover, button.facebook:focus, .button.facebook:hover, .button.facebook:focus {
  background-color: #43377a;
  color: #FFF;
}
button.linkedin, .button.linkedin {
  background-color: #007bb6;
  color: #FFF;
}
button.linkedin:hover, button.linkedin:focus, .button.linkedin:hover, .button.linkedin:focus {
  background-color: #43377a;
  color: #FFF;
}
button.googleplus, .button.googleplus {
  background-color: #dd4b39;
  color: #FFF;
}
button.googleplus:hover, button.googleplus:focus, .button.googleplus:hover, .button.googleplus:focus {
  background-color: #43377a;
  color: #FFF;
}
button.youtube, .button.youtube {
  background-color: #bb0000;
  color: #FFF;
}
button.youtube:hover, button.youtube:focus, .button.youtube:hover, .button.youtube:focus {
  background-color: #43377a;
  color: #FFF;
}
button.block, .button.block {
  width: 100%;
  text-align: left;
  min-width: 16px;
  min-width: 1rem;
}
button.block i, .button.block i {
  float: right;
}

.social-buttons ul {
  display: block;
  list-style: none;
  width: 100%;
  max-width: 500px;
}
.social-buttons li {
  float: left;
  display: inline-block;
  padding: 0 1% 5px 0;
  width: 20%;
}
.social-buttons a {
  font-size: 1.25rem;
}

.language-picker {
  margin-bottom: 0;
}
.language-picker li {
  display: inline-block;
}
.language-picker label, .language-picker h4 {
  height: 1.3rem;
  font-size: 1rem;
  padding: .15rem;
  margin: 0;
}
.language-picker input {
  margin: 0 .15rem 0 .3rem;
}

cite {
  font-size: 1rem;
  padding: .5rem;
}

@media only screen and (max-width: 767px) {
  .page-footer {
    padding-right: 2rem;
  }
  .page-footer ul {
    width: 100%;
    position: relative;
  }
}
/**
* Website Footer (Lite):
* `footer` - the ACC.org footer is very large and has many moving parts this is the shorter lighter version for applications
* 
*   @example
*   <footer class="page-footer">
*		<div class="row">
*			<a href="/"><img class="logo" src="Assets/img/oma-01.svg" alt="Home"></a>
*		</div>
*		<div class="footer-darker">
*			<div class="row">
*				<div class="columns large-8">
*					<section class="address row">
*						<h3>American College of Cardiology</h3>
*						<address>
*							<!-- http://microformats.org/wiki/hcard -->
*							<h4>Heart House</h4>
*							<ul>
*								<li> <span class="street-address">2400 N. St. NW</span></li>
*								<li> <span class="locality">Washington</span>, <span class="country-name"><abbr title="District of Colombia">DC</abbr></span> <span class="postal-code">20037</span></li>
*								<li> <a href="mailto:resource@acc.org" class="email"><strong>Email:</strong> resource@acc.org</a></li>
*							</ul>
*							<ul>
*								<li><span tel="+12023756000" class="tel"><strong>Phone:</strong> (202) 375-6000, ext. 5603</span></li>
*								<li><span tel="+18002574737" class="tel"><strong>Toll Free:</strong> (800) 253-4636, ext. 5603</span></li>
*								<li> <span fax="+12023757000" class="fax"><strong>Fax:</strong>(202) 375-7000</span></li>
*							</ul>
*						</address>
*					</section>
*					<section class="social-buttons row">
*						<h4>Stay Connected</h4>
*						<ul>
*							<li>
*								<a class="button twitter icon-only block" href="https://twitter.com/accintouch" target="_blank">
*									<i class="fa fa-twitter"></i>
*									<span class="text">Twitter</span>
*								</a>
*							</li>
*							<li>
*								<a class="button facebook icon-only block" href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank">
*									<span class="text">Facebook</span><i class="fa fa-facebook"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button linkedin icon-only block" href="http://www.linkedin.com/groups/American-College-Cardiology-732607?trk=myg_ugrp_ovr" target="_blank">
*									<span class="text">LinkedIn</span><i class="fa fa-linkedin"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button googleplus icon-only block" href="https://plus.google.com/118164094874227618578/about" target="_blank">
*									<span class="text">Google+</span><i class="fa fa-google-plus"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button youtube icon-only block" href="http://www.youtube.com/user/ACCinTouch" target="_blank">
*									<span class="text">Youtube</span><i class="fa fa-youtube-play"></i>
*								</a>
*							</li>
*						</ul>
*					</section>
*				</div>
*				<div class="columns large-4">
*					<section class="acc-websites row ">
*						<h4>Powered By the ACC</h4>
*						<nav class="nav-list small">
*						<ul class="">
*							<li><a target="_blank" class="" href="http://www.acc.org"><span class="text">Acc.org </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://cvquality.acc.org/"><span class="text">ACC Quality Improvement for Institutions</span> <i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://www.ncdr.com"><span class="text">NCDR.com </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://www.cardiosmart.org"><span class="text">CardioSmart.org </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://blog.cardiosource.org"><span class="text">ACCinTouch.com </span><i class="fa fa-external-link-square"></i></a></li>
*						</ul>
*						</nav>
*					</section>
*				</div>
*			</div>
*		</div>
*		<div class="row">
*			<div class="large-4 columns">
*				<h5><cite>&copy; 2015 American College of Cardiology</cite></h5>
*			</div>
*			<div class="large-8 columns">
*			</div>
*		</div>
*	</footer>
**/
.sticky-button-bar {
  position: relative;
}

.stuck-footer .sticky-button-bar.footer, .stuck-header .sticky-button-bar.header {
  width: 100%;
  background: url(../img/billie-holiday-spec.png) #f2f2f2;
  -webkit-box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  padding: .5em 0;
  z-index: 10000;
}
.stuck-footer .sticky-button-bar.footer .button, .stuck-header .sticky-button-bar.header .button {
  margin-bottom: 0;
}

.stuck-footer .sticky-button-bar.footer {
  bottom: 0;
  border-top: 1px solid #a197d0;
}
.stuck-header .sticky-button-bar.header {
  top: 0;
  border-bottom: 1px solid #a197d0;
}

/**
* Sticky Button Bar:
* `body.stuck-footer .footer.sticky-button-bar` -  Sticky button bars are made for moving a collection of buttons  to a fixed bar in the window so it is either always fixed or with 'waypoint.js' you can make it fixed if it is not with in the viewport. Making it sticky moves the bar into a fixed possition out of its normal flow so it can be on seen when it is below the fold.  This ui element need to be combined with waypoint to trigger .footer-stuck or .header-stuck on the body to toggle the sticky effect on and off at appropriate times. 
* 
*   @example
*	<div class="footer sticky-button-bar"><div class="row">
*		<div class="pull-right"><a class="secondary button" href="#">Secondary Button</a><a class="button" href="#">Action Button</a></div>
*	</div></div>
*/
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url(//fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsD86pq2NkPzVgw_9lpT6RGI.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url(//fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsDAdhzWOYhqHvOZMRGaEyPo.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.score-bar .text-bold {
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.score-bar .text-condensed {
  font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.score-bar .text-condensed-bold {
  font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.score-bar .text-light {
  font-family: 'Open Sans',  "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
.score-bar .small-fs-1x {
  font-size: 1em;
  line-height: 1em;
}
.score-bar .small-fs-2x {
  font-size: 1.5em;
  line-height: 1em;
}
.score-bar .small-fs-3x {
  font-size: 2em;
  line-height: 1em;
}
.score-bar .small-fs-4x {
  font-size: 2.5em;
  line-height: 1em;
}
.score-bar .small-fs-5x {
  font-size: 3em;
  line-height: 1em;
}
.score-bar .small-fs-6x {
  font-size: 4em;
  line-height: 1em;
}
@media only screen and (min-width: 767px) {
  .score-bar .medium-fs-1x {
    font-size: 1em;
    line-height: 1em;
  }
  .score-bar .medium-fs-2x {
    font-size: 1.5em;
    line-height: 1em;
  }
  .score-bar .medium-fs-3x {
    font-size: 2em;
    line-height: 1em;
  }
  .score-bar .medium-fs-4x {
    font-size: 2.5em;
    line-height: 1em;
  }
  .score-bar .medium-fs-5x {
    font-size: 3em;
    line-height: 1em;
  }
  .score-bar .medium-fs-6x {
    font-size: 4em;
    line-height: 1em;
  }
}
@media only screen and (min-width: 1024px) {
  .score-bar .large-fs-1x {
    font-size: 1em;
    line-height: 1em;
  }
  .score-bar .large-fs-2x {
    font-size: 1.5em;
    line-height: 1em;
  }
  .score-bar .large-fs-3x {
    font-size: 2em;
    line-height: 1em;
  }
  .score-bar .large-fs-4x {
    font-size: 2.5em;
    line-height: 1em;
  }
  .score-bar .large-fs-5x {
    font-size: 3em;
    line-height: 1em;
  }
  .score-bar .large-fs-6x {
    font-size: 4em;
    line-height: 1em;
  }
}

.sticky-wrapper {
  margin-bottom: -1em;
}

.score-bar-holder {
  width: 100%;
  background-color: #4F4190;
  display: block;
  font-size: 10px;
}
.score-bar-holder .score-bar {
  -moz-transition: padding .5s ease;
  -webkit-transition: padding .5s ease;
  -o-transition: padding .5s ease;
  transition: padding .5s ease;
  -moz-transition: font-size .5s ease;
  -webkit-transition: font-size .5s ease;
  -o-transition: font-size .5s ease;
  transition: font-size .5s ease;
  overflow: hidden;
}
.score-bar-holder .data-container {
  margin: 0;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: -200px;
  padding-bottom: 200px;
}
.score-bar-holder .data-container.primary-color {
  background-color: #4F4190;
  color: #fff;
  border-color: #fff;
}
.score-bar-holder .data-container.secondary-color {
  background-color: #473d74;
  color: #fff;
  border-color: #fff;
}
.shrink.stuck .score-bar-holder {
  font-size: 9px;
}
.shrink.stuck .score-bar-holder .data-container {
  padding-top: 4.5px;
  padding-right: 4.5px;
  padding-left: 4.5px;
}
@media only screen and (min-height: 320px) {
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 6.75px;
    padding-right: 6.75px;
    padding-left: 6.75px;
  }
}
@media only screen and (min-height: 480px) {
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 9px;
    padding-right: 9px;
    padding-left: 9px;
  }
}
@media only screen and (min-width: 767px) {
  .shrink.stuck .score-bar-holder {
    font-size: 9px 0.5;
  }
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 9px 0.5;
    padding-right: 9px 0.5;
    padding-left: 9px 0.5;
  }
}
@media only screen and (min-width: 1024px) {
  .shrink.stuck .score-bar-holder {
    font-size: 10px;
  }
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

.sticky-holder.stuck {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

.data-group {
  padding: .1em .25em .1em;
}
@media only screen and (min-width: 767px) {
  .data-group {
    padding: .25em .5em .5em;
  }
}

.data-group + .data-group, .data-header + .data-group {
  border-style: dotted;
  border-width: 0px;
  border-top-width: 1px;
}
@media only screen and (min-width: 767px) {
  .data-group + .data-group, .data-header + .data-group {
    border-left-width: 0;
    border-top-width: 1px;
  }
  .shrink .data-group + .data-group, .shrink .data-header + .data-group {
    border-left-width: 1px;
    border-top-width: 0px;
  }
}

@media only screen and (min-width: 767px) {
  .shrink .data-group + .data-group {
    padding-left: 1em;
  }

  .shrink .data-header + .data-group {
    border-left-width: 0px;
  }
}
.data {
  padding-bottom: 1em;
}

@media only screen and (min-width: 767px) {
  .data-header {
    max-width: 30em;
  }
}
.shrink .data-header {
  padding-bottom: .25em;
  width: 100%;
}
@media only screen and (min-width: 767px) {
  .shrink .data-header {
    max-width: 26em;
  }
}

.data-group {
  display: table;
}
@media only screen and (min-width: 767px) {
  .data-group {
    max-width: 30em;
  }
}
.data-group .data-value, .data-group .data-label {
  display: table-cell;
}
.data-group .data-value {
  width: 10%;
  vertical-align: top;
}
.data-group .data-label {
  vertical-align: top;
  padding-left: .5rem;
}
@media only screen and (min-width: 767px) {
  .shrink .data-group {
    max-width: 26em;
    width: 50%;
    float: left;
  }
  .shrink .data-group.content-block {
    width: 100%;
    padding-left: 0;
    border-left-width: 0;
    max-width: 48em;
  }
}

@media only screen and (max-width: 767px) {
  .shrink .tabs.tabs-primary li a {
    padding: .1em .5em;
  }
}
/**
* Sticky Headers with Scorebars:
* `.data-display` -
*
*   @example
*   <div class="data-display">
*       <header class="header page">
*           <a href="#!/content/calculator/" class="logo"><img src="assets/img/headerlogo.svg"  alt="ACC Statin Intolerance Guidelines"></a>
*           <ul class="nav tabs tabs-primary condensable condensable-word small">
*               <li class="icon"><a class="home">  <i class="fa fa-holder"></i></a></li>
*               <li id="calculator-Tab" class="selected"><a href="#!/content/calculator/">Eval  <span class="condense">uate</span></a></li>
*               <li id="recommendation-Tab" class=""><a href="#!/content/recommendation/prescribinginfo/" >Recommend  <span class="condense">ation</span></a></li>
*           </ul>
*       </header>
*       <div class="data row">
*           <div class="columns small-6">
*               <strong class="h3">Risk Scores</strong>
*               <strong>CHA2DS2-VASc: <span>3</span></strong>
*               <strong>HAS-BLED: <span>2.1</span></strong>
*           </div>
*           <div class="columns small-6">   
*               <strong class="h3">Renal Status</strong>
*               <strong>Cr: <span>1.2</span>  (CrCL: <span >1.4</span> )</strong>
*               <strong>CKD: <span >6</span></strong>
*           </div>
*       </div>
*   </div>
*  <div class="shrink-waypoint"></div>
**/
.group-section-pagination-holder {
  max-width: none;
  background: #4F4190 url("../img/paper-texture.png");
}
.group-section-pagination-holder .pagination {
  margin-bottom: 0;
}
.group-section-pagination-holder .pagination li {
  margin: 0 .25rem .25rem;
  vertical-align: top;
}
.group-section-pagination-holder .pagination li a {
  color: #fff;
}
.group-section-pagination-holder .pagination li.current a, .group-section-pagination-holder .pagination li.current a:hover {
  background-color: white;
  color: #4F4190;
}
.group-section-pagination-holder .pagination li.arrow, .group-section-pagination-holder .pagination li.action {
  margin: 0;
  padding: .25rem;
  background: #413a62 url("../img/paper-texture.png");
}
.group-section-pagination-holder .pagination li.arrow a, .group-section-pagination-holder .pagination li.action a {
  background: #413a62 url("../img/paper-texture.png");
  color: #fff;
}
.group-section-pagination-holder .pagination li.arrow a:hover, .group-section-pagination-holder .pagination li.action a:hover {
  background-color: #6959b4;
}
.group-section-pagination-holder .pagination li.arrow.disable, .group-section-pagination-holder .pagination li.arrow.disable a, .group-section-pagination-holder .pagination li.arrow.disable a:hover, .group-section-pagination-holder .pagination li.action.disable, .group-section-pagination-holder .pagination li.action.disable a, .group-section-pagination-holder .pagination li.action.disable a:hover {
  background-color: #837f96;
  color: #666666;
}
.group-section-pagination-holder.top {
  margin-bottom: 1rem;
}
.group-section-pagination-holder.top .pagination li {
  margin: .25rem .25rem 0;
  vertical-align: bottom;
}
.group-section-pagination-holder.top .pagination li.arrow, .group-section-pagination-holder.top .pagination li.action {
  margin: 0;
}

/**
* Headline with Counters:
* `.order-marker.` - It is some times useful to add an order-marker to the beginning of headlines. You can modify them by adding `.hollow` or `.inverse` depending on the need.
* 
*   @example
*   <h1><span class="order-marker">1</span>Header 1 Tag</h1>
*   <h2><span class="order-marker">2</span>Header 2 Tag</h2>
*   <h3><span class="order-marker">a</span>Header 3 Tag</h3>
*   <h4 class="with-underline"><span class="order-marker hollow">b</span>Hollow Marker with H4 Tag</h4>
*   <h5 class="colored-paper" style=""><span class="order-marker inverse">c</span>Inversed Marker with H5 Tag</h5>
*/
.order-marker {
  background-color: #4F4190;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-right: 0;
  margin-bottom: 0;
  padding: .75em 0 0 0;
  position: relative;
  top: -.25em;
  margin-right: .5em;
  text-align: center;
  box-sizing: border-box;
  text-transform: capitalize;
  line-height: 0;
  vertical-align: top;
}
.order-marker.hollow {
  background-color: transparent;
  border: 0.1em solid #4F4190;
  color: #4F4190;
}
.order-marker.inverse {
  background-color: #fff;
  color: #4F4190;
}

h1.error, h2.error, h3.error, h4.error, h5.error, h6.error, p.error, a.error, li.error, blockquote.error, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning, p.warning, a.warning, li.warning, blockquote.warning, h1.success, h2.success, h3.success, h4.success, h5.success, h6.success, p.success, a.success, li.success, blockquote.success, h1.info, h2.info, h3.info, h4.info, h5.info, h6.info, p.info, a.info, li.info, blockquote.info, h1.highlighted, h2.highlighted, h3.highlighted, h4.highlighted, h5.highlighted, h6.highlighted, p.highlighted, a.highlighted, li.highlighted, blockquote.highlighted, h1.disabled, h2.disabled, h3.disabled, h4.disabled, h5.disabled, h6.disabled, p.disabled, a.disabled, li.disabled, blockquote.disabled {
  font-weight: 900;
}

/**
* Header Tags and other Typography States:
* `.error, .warning, .etc...` - headers `p` `li` `blockquote` `a` and `p` tags can be fully manipulated to respond to states by adding the modifiying state like `.error`, `.warning`, `.info` etc....
* 
*   @example
*	<h1 class="with-underline info">Header 1 Tag
*	  <small>Info State</small>
*	</h1>
*	<h2 class="with-underline error">Header 2 Tag <small>Error State</small></h2>
*	<h3 class="with-underline warning">Header 3 Tag<small>Warning State</small></h3>
*	<h4 class="with-underline success">Header 4 Tag<span class="sub-line">Success State</span></h4>
*	<h5 class="with-underline highlighted">Header 5 Tag<small>Highlighted State</small></h5>
*  	<p class="highlighted"><strong>Paragraph that is a highlighted State.</strong>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
*/
h1.with-underline {
  border-bottom: #4F4190 2px solid;
}

h2.with-underline {
  border-bottom: #666666 2px solid;
}

h3.with-underline {
  border-bottom: #8f83c7 1px dotted;
}

h4.with-underline {
  border-bottom: #999999 1px solid;
}

h5.with-underline {
  border-bottom: #b3b3b3 1px solid;
}

h6.with-underline {
  border-bottom: #b3b3b3 1px dotted;
}

/**
 * Sub Line in Header Tags:
 * `[Header Tag] > span.sub-line` - basic styling for sub content in headers. 
 * <h5 class="warning group-divide">( Updated in this Version | Depreciated  blockquote usage )</h5>
 *
 *     @example
 *     h1.with-underline Header 1 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h2.with-underline Header 2 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h3.with-underline Header 3 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h4.with-underline Header 4 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h5.with-underline Header 5 Tag 
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h6.with-underline Header 6 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 */
/**
* Super Line in Header Tags:
* `[Header Tag] > span.sub-line` - You can use span.sub-line as super content in headers by just including them at the begining of the tag instead of after text in the tag. 
*
*     @example
*	<h1 class="with-underline"><span class="sub-line">Super line of Content</span>H1 Tag that has some text above it </h1>
*	<h2 class="with-underline"><span class="sub-line">Super line of Content</span>H2 Tag that has some text above it </h2>
*	<h3 class="with-underline"><span class="sub-line">Super line of Content</span>H3 Tag that has some text above it </h3>
*	<h4 class="with-underline"><span class="sub-line">Super line of Content</span>H4 Tag that has some text above it </h4>
*	<h5 class="with-underline"><span class="sub-line">Super line of Content</span>H5 Tag that has some text above it </h5>
*
*/
h1 .sub-line, h2 .sub-line, h3 .sub-line, h4 .sub-line, h5 .sub-line, h6 .sub-line {
  display: block;
  line-height: 1.1;
  font-size: .55em;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  border: 0 none transparent;
  opacity: .8;
}

h1 blockquote, h1 .sub-line {
  font-size: 0.32558em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h1 blockquote, h1 .sub-line {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h1 blockquote, h1 .sub-line {
    line-height: 1.19em;
  }
}

h1.with-underline blockquote, h1.with-underline .sub-line {
  font-size: 0.32558em;
  line-height: 1.4em;
  margin-top: 0.21em;
  margin-bottom: 0.14em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h1.with-underline blockquote, h1.with-underline .sub-line {
    line-height: 1.26em;
    margin-top: 0.189em;
    margin-bottom: 0.126em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h1.with-underline blockquote, h1.with-underline .sub-line {
    line-height: 1.19em;
    margin-top: 0.1575em;
    margin-bottom: 0.105em;
  }
}

h2 blockquote, h2 .sub-line {
  font-size: 0.40741em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h2 blockquote, h2 .sub-line {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h2 blockquote, h2 .sub-line {
    line-height: 1.51455em;
  }
}

h2.with-underline blockquote, h2.with-underline .sub-line {
  font-size: 0.40741em;
  line-height: 1.78182em;
  margin-top: 0.26727em;
  margin-bottom: 0.17818em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h2.with-underline blockquote, h2.with-underline .sub-line {
    line-height: 1.60364em;
    margin-top: 0.24055em;
    margin-bottom: 0.16036em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h2.with-underline blockquote, h2.with-underline .sub-line {
    line-height: 1.51455em;
    margin-top: 0.20045em;
    margin-bottom: 0.13364em;
  }
}

h3 blockquote, h3 .sub-line {
  font-size: 0.63636em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h3 blockquote, h3 .sub-line {
    line-height: 1.26em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h3 blockquote, h3 .sub-line {
    line-height: 1.19em;
  }
}

h3.with-underline blockquote, h3.with-underline .sub-line {
  font-size: 0.63636em;
  line-height: 1.4em;
  margin-top: 0.21em;
  margin-bottom: 0.14em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h3.with-underline blockquote, h3.with-underline .sub-line {
    line-height: 1.26em;
    margin-top: 0.189em;
    margin-bottom: 0.126em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h3.with-underline blockquote, h3.with-underline .sub-line {
    line-height: 1.19em;
    margin-top: 0.1575em;
    margin-bottom: 0.105em;
  }
}

h4 blockquote, h4 .sub-line {
  font-size: 0.61111em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h4 blockquote, h4 .sub-line {
    line-height: 1.60364em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h4 blockquote, h4 .sub-line {
    line-height: 1.51455em;
  }
}

h5 blockquote, h5 .sub-line {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h5 blockquote, h5 .sub-line {
    line-height: 1.96em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h5 blockquote, h5 .sub-line {
    line-height: 1.85111em;
  }
}

h6 blockquote, h6 .sub-line {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
}
@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h6 blockquote, h6 .sub-line {
    line-height: 1.96em;
  }
}
@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h6 blockquote, h6 .sub-line {
    line-height: 1.85111em;
  }
}

.text-highlight-color {
  color: #4F4190 !important;
}

/**
 * Group-divid:
 * `.group-divide` - a line above or below the container elemtent
 *
 *     @example
 *	div.group-divide
 *    	 p this should be a paragraph a line before it. 
 *	div.group-divide-bottom
 *		p this paragraph with line after.
 */
.group-divide {
  border-top: #4F4190 1px dotted;
  margin-top: .5rem;
  padding-top: 1rem;
}

.group-divide-bottom {
  border-bottom: #4F4190 1px dotted;
  margin-bottom: .5rem;
}

.group-divide-auto + .group-divide-auto {
  border-top: #4F4190 1px dotted;
  margin-top: 1rem;
  padding-top: .5rem;
}

/**
*  A tag and .link:
*  `.link` - a tags have a basic style  but links are a styled with `.link`
*
*     @example
*     a 	
* 	  span this is a plain "a" tag
*	br
*	a.link
* 	  span this is an "a" tag with the ".link" class
*		
*/
.link {
  color: #4F4190;
  text-decoration: underline;
}
.link.icon {
  text-decoration: none;
}
.link:hover {
  color: #6959b4;
  text-decoration: underline;
}
.link.reverse {
  color: #fff;
}

/**
*
*  Type Modifiers:
*  `bold, italic or subtle,etc...` - `.bold` - make text bold, `.italic` - make text italic, or `.subtle` - make text subtle
*
*     @example
*     div.bold this has the `.bold` class added to the container which increases font weight and darkens the color.
*     div.emphasis this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold
*     div.loud this has the `.loud` class added to the container which darkens the color.
*     div.quiet this has the `.quiet` class added to the container which lightens the color.
*     div.subtle this has the `.subtle` class added to the container which decreases font weight and lightens the color.
*     div.italic this has the `.italic` class added to the container which makes it lighter and makes it italic.
*     div.text-highlight-color this has the `.text-highlight-color` class added to the container which changes the color to the product color
*
*/
.always-wrap {
  white-space: normal !important;
}

.phone-only {
  display: none;
}
@media only screen and (max-width: 767px) {
  .phone-only {
    display: block;
    display: initial;
  }
}

.desktop-hide {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .desktop-hide {
    display: block;
    display: initial;
  }
}

.desktop-show {
  display: initial;
}
@media only screen and (max-width: 1024px) {
  .desktop-show {
    display: none;
  }
}

.relative-position {
  position: relative;
}

.hide {
  display: none;
}

.absolute-topright {
  position: absolute !important;
  top: 0;
  right: 0;
}

.absolute-topleft {
  position: absolute !important;
  top: 0;
  left: 0;
}

.clearboth:after {
  content: ' ';
  display: table;
  clear: both;
}

.radius {
  border-radius: 6px;
}

.radius-bottom {
  border-radius: 0 0 6px 6px;
}

.radius-top {
  border-radius: 6px 6px 0 0;
}

.white-space-normal {
  white-space: normal !important;
}

.word-break {
  word-break: break-all !important;
}

.no-vertical-margin {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.display-block {
  display: block !important;
}

/**
* HELPER - Condensable (Condense):
* `.condensable.large .condense` - This pattern allows for responsive reduction of content.
*  Content tagged with `.condense` will turn to display:none when it passes the below the break point. On the container element add  '.condensable' and set the break point where you want it  by adding the class `.small`, `.medium`, or `.large`.
*  !! Single word reduction requires adding `condensable-word` see example below.
* 
*   @example
*	<h2>
*		Condensable Sub-line
*		<span class="sub-line condensable large"><span class="condense">The full word is only seen on large screens.</span> It only says Super below on smaller screens</span>
*		<span class="sub-line condensable condensable-word large">Super<span class="condense">califragilisticexpialidocious</span></span>
*	</h2>
*/
/**
* HELPER - Swappable (short-text long-text):
* `.swappable` - This pattern allows for responsive swapping of content from `.short-text` and `.long-text`.
*   On the container element add `.swappable` and set the break point where you want it to switch by adding the class `.small`, `.medium`, or `.large`.
*   The elements with the .short-text and .long-text must be inline elements.
* 
*   @example
*	<h2 class="swappable medium">
*		Swappable Sub-line
*		<span class="sub-line">
*			<span class="short-text">Short Title</span>
*			<span class="long-text">Long TItle Seen on Medium Screens and Up</span>
*		</span>
*	</h2>
*/
.condensable.condensable-word {
  word-spacing: -.35em;
}
.condensable .condense {
  display: inline;
}
@media only screen and (max-width: 320px) {
  .condensable .condense {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .condensable.small .condense {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .condensable.medium .condense {
    display: none;
  }
}
@media only screen and (max-width: 1200px) {
  .condensable.large .condense {
    display: none;
  }
}

.swappable .long-text {
  display: inline;
}
.swappable .short-text {
  display: none;
}
@media only screen and (max-width: 320px) {
  .swappable .short-text {
    display: inline;
  }
  .swappable .long-text {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .swappable.small .short-text {
    display: inline;
  }
  .swappable.small .long-text {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .swappable.medium .short-text {
    display: inline;
  }
  .swappable.medium .long-text {
    display: none;
  }
}
@media only screen and (max-width: 1200px) {
  .swappable.large .short-text {
    display: inline;
  }
  .swappable.large .long-text {
    display: none;
  }
}

.css3columns {
  -webkit-column-count: 1;
  /* Chrome, Safari, Opera */
  -moz-column-count: 1;
  /* Firefox */
  column-count: 1;
}
@media only screen and (min-width: 767px) {
  .css3columns {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .css3columns {
    -webkit-column-count: 3;
    /* Chrome, Safari, Opera */
    -moz-column-count: 3;
    /* Firefox */
    column-count: 3;
  }
}

/**
* Take me to [top](#top):
*/
/*
STATE TRUMPING CODE
*/
.error .order-marker.hollow, .error.order-marker.hollow, .error.question .input-holder input, .error.question .input-holder textarea, .error.question .input-holder select, .error.question .input-holder .postfix, .error.question .input-holder .prefix, .error .close-bar, .error .bar.close, .error.inset .bar.close, .error.question .button-group, .error .order-marker.hollow, .error.order-marker.hollow, h1.with-underline.error, h2.with-underline.error, h3.with-underline.error, h4.with-underline.error, h5.with-underline.error, h6.with-underline.error {
  border-color: #c32231;
}

.error.fa, .error .order-marker.inverse, .error.order-marker.inverse.error .order-marker.hollow, .error.order-marker.hollow, .nav-list.nav-checklist li.error i, .nav-checklist.panel-selector li.error i, .answer.error .required-holder, .question.error .required-holder, .question-inline.error .required-holder, .question-grid-based.error .required-holder, .error.question .label-holder label, .error.question .input-holder .postfix, .error.question .input-holder .prefix, .error.question .input-holder .value, .error .bar.close .action-btn, .collapsable-panel.error h1, .collapsable-panel.error h2, .collapsable-panel.error h3, .collapsable-panel.error h4, .collapsable-panel.error h5, .collapsable-panel.error h6, .error .order-marker.inverse, .error.order-marker.inverse.error .order-marker.hollow, .error.order-marker.hollow, h1.error, h2.error, h3.error, h4.error, h5.error, h6.error, p.error, a.error, li.error, blockquote.error {
  color: #c32231;
}

.nav-list.nav-checklist li.error, .nav-checklist.panel-selector li.error, .error.question .message-holder > .error, .hint .error, .error .close-bar .close-button, .error.inset .bar.close .action-btn, .error-inactive .switch-paddle, .error-active input:checked ~ .switch-paddle, .error.callout, .error.page-message {
  background-color: #de404e;
}

.error .fa-holder-dynamic:before, .error.fa:before, .error > .fa-holder:before, .nav-list.nav-checklist li.error .fa-holder-dynamic:before, .nav-checklist.panel-selector li.error .fa-holder-dynamic:before {
  content: "";
}

.warning .order-marker.hollow, .warning.order-marker.hollow, .warning.question .input-holder input, .warning.question .input-holder textarea, .warning.question .input-holder select, .warning.question .input-holder .postfix, .warning.question .input-holder .prefix, .warning .close-bar, .warning .bar.close, .warning.inset .bar.close, .warning.question .button-group, .warning .order-marker.hollow, .warning.order-marker.hollow, h1.with-underline.warning, h2.with-underline.warning, h3.with-underline.warning, h4.with-underline.warning, h5.with-underline.warning, h6.with-underline.warning {
  border-color: #E08514;
}

.warning.fa, .warning .order-marker.inverse, .warning.order-marker.inverse.warning .order-marker.hollow, .warning.order-marker.hollow, .nav-list.nav-checklist li.warning i, .nav-checklist.panel-selector li.warning i, .answer.warning .required-holder, .question.warning .required-holder, .question-inline.warning .required-holder, .question-grid-based.warning .required-holder, .warning.question .label-holder label, .warning.question .input-holder .postfix, .warning.question .input-holder .prefix, .warning.question .input-holder .value, .warning .bar.close .action-btn, .collapsable-panel.warning h1, .collapsable-panel.warning h2, .collapsable-panel.warning h3, .collapsable-panel.warning h4, .collapsable-panel.warning h5, .collapsable-panel.warning h6, .warning .order-marker.inverse, .warning.order-marker.inverse.warning .order-marker.hollow, .warning.order-marker.hollow, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning, p.warning, a.warning, li.warning, blockquote.warning {
  color: #E08514;
}

.nav-list.nav-checklist li.warning, .nav-checklist.panel-selector li.warning, .warning.question .message-holder > .warning, .hint .warning, .warning .close-bar .close-button, .warning.inset .bar.close .action-btn, .warning-inactive .switch-paddle, .warning-active input:checked ~ .switch-paddle, .warning.callout, .warning.page-message {
  background-color: #ee9e3c;
}

.warning .fa-holder-dynamic:before, .warning.fa:before, .warning > .fa-holder:before, .nav-list.nav-checklist li.warning .fa-holder-dynamic:before, .nav-checklist.panel-selector li.warning .fa-holder-dynamic:before {
  content: "";
}

.success .order-marker.hollow, .success.order-marker.hollow, .success.question .input-holder input, .success.question .input-holder textarea, .success.question .input-holder select, .success.question .input-holder .postfix, .success.question .input-holder .prefix, .success .close-bar, .success .bar.close, .success.inset .bar.close, .success.question .button-group, .success .order-marker.hollow, .success.order-marker.hollow, h1.with-underline.success, h2.with-underline.success, h3.with-underline.success, h4.with-underline.success, h5.with-underline.success, h6.with-underline.success {
  border-color: #14B057;
}

.success.fa, .success .order-marker.inverse, .success.order-marker.inverse.success .order-marker.hollow, .success.order-marker.hollow, .nav-list.nav-checklist li.success i, .nav-checklist.panel-selector li.success i, .answer.success .required-holder, .question.success .required-holder, .question-inline.success .required-holder, .question-grid-based.success .required-holder, .success.question .label-holder label, .success.question .input-holder .postfix, .success.question .input-holder .prefix, .success.question .input-holder .value, .success .bar.close .action-btn, .collapsable-panel.success h1, .collapsable-panel.success h2, .collapsable-panel.success h3, .collapsable-panel.success h4, .collapsable-panel.success h5, .collapsable-panel.success h6, .success .order-marker.inverse, .success.order-marker.inverse.success .order-marker.hollow, .success.order-marker.hollow, h1.success, h2.success, h3.success, h4.success, h5.success, h6.success, p.success, a.success, li.success, blockquote.success {
  color: #14B057;
}

.nav-list.nav-checklist li.success, .nav-checklist.panel-selector li.success, .success.question .message-holder > .success, .hint .success, .success .close-bar .close-button, .success.inset .bar.close .action-btn, .success-inactive .switch-paddle, .success-active input:checked ~ .switch-paddle, .success.callout, .success.page-message {
  background-color: #1de573;
}

.success .fa-holder-dynamic:before, .success.fa:before, .success > .fa-holder:before, .nav-list.nav-checklist li.success .fa-holder-dynamic:before, .nav-checklist.panel-selector li.success .fa-holder-dynamic:before {
  content: "";
}

.info .order-marker.hollow, .info.order-marker.hollow, .info.question .input-holder input, .info.question .input-holder textarea, .info.question .input-holder select, .info.question .input-holder .postfix, .info.question .input-holder .prefix, .info .close-bar, .info .bar.close, .info.inset .bar.close, .info.question .button-group, .info .order-marker.hollow, .info.order-marker.hollow, h1.with-underline.info, h2.with-underline.info, h3.with-underline.info, h4.with-underline.info, h5.with-underline.info, h6.with-underline.info {
  border-color: #a6a6a6;
}

.info.fa, .info .order-marker.inverse, .info.order-marker.inverse.info .order-marker.hollow, .info.order-marker.hollow, .nav-list.nav-checklist li.info i, .nav-checklist.panel-selector li.info i, .answer.info .required-holder, .question.info .required-holder, .question-inline.info .required-holder, .question-grid-based.info .required-holder, .info.question .label-holder label, .info.question .input-holder .postfix, .info.question .input-holder .prefix, .info.question .input-holder .value, .info .bar.close .action-btn, .collapsable-panel.info h1, .collapsable-panel.info h2, .collapsable-panel.info h3, .collapsable-panel.info h4, .collapsable-panel.info h5, .collapsable-panel.info h6, .info .order-marker.inverse, .info.order-marker.inverse.info .order-marker.hollow, .info.order-marker.hollow, h1.info, h2.info, h3.info, h4.info, h5.info, h6.info, p.info, a.info, li.info, blockquote.info {
  color: #a6a6a6;
}

.nav-list.nav-checklist li.info, .nav-checklist.panel-selector li.info, .info.question .message-holder > .info, .hint .info, .info .close-bar .close-button, .info.inset .bar.close .action-btn, .info-inactive .switch-paddle, .info-active input:checked ~ .switch-paddle, .info.callout, .info.page-message {
  background-color: #b8b8b8;
}

.info .fa-holder-dynamic:before, .info.fa:before, .info > .fa-holder:before, .nav-list.nav-checklist li.info .fa-holder-dynamic:before, .nav-checklist.panel-selector li.info .fa-holder-dynamic:before {
  content: "";
}

.highlighted .order-marker.hollow, .highlighted.order-marker.hollow, .highlighted.question .input-holder input, .highlighted.question .input-holder textarea, .highlighted.question .input-holder select, .highlighted.question .input-holder .postfix, .highlighted.question .input-holder .prefix, .highlighted .close-bar, .highlighted .bar.close, .highlighted.inset .bar.close, .highlighted.question .button-group, .highlighted .order-marker.hollow, .highlighted.order-marker.hollow, h1.with-underline.highlighted, h2.with-underline.highlighted, h3.with-underline.highlighted, h4.with-underline.highlighted, h5.with-underline.highlighted, h6.with-underline.highlighted {
  border-color: #4F4190;
}

.highlighted.fa, .highlighted .order-marker.inverse, .highlighted.order-marker.inverse.highlighted .order-marker.hollow, .highlighted.order-marker.hollow, .nav-list.nav-checklist li.highlighted i, .nav-checklist.panel-selector li.highlighted i, .answer.highlighted .required-holder, .question.highlighted .required-holder, .question-inline.highlighted .required-holder, .question-grid-based.highlighted .required-holder, .highlighted.question .label-holder label, .highlighted.question .input-holder .postfix, .highlighted.question .input-holder .prefix, .highlighted.question .input-holder .value, .highlighted .bar.close .action-btn, .collapsable-panel.highlighted h1, .collapsable-panel.highlighted h2, .collapsable-panel.highlighted h3, .collapsable-panel.highlighted h4, .collapsable-panel.highlighted h5, .collapsable-panel.highlighted h6, .highlighted .order-marker.inverse, .highlighted.order-marker.inverse.highlighted .order-marker.hollow, .highlighted.order-marker.hollow, h1.highlighted, h2.highlighted, h3.highlighted, h4.highlighted, h5.highlighted, h6.highlighted, p.highlighted, a.highlighted, li.highlighted, blockquote.highlighted {
  color: #4F4190;
}

.nav-list.nav-checklist li.highlighted, .nav-checklist.panel-selector li.highlighted, .highlighted.question .message-holder > .highlighted, .hint .highlighted, .highlighted .close-bar .close-button, .highlighted.inset .bar.close .action-btn, .highlighted-inactive .switch-paddle, .highlighted-active input:checked ~ .switch-paddle, .highlighted.callout, .highlighted.page-message {
  background-color: #6959b4;
}

.highlighted .fa-holder-dynamic:before, .highlighted.fa:before, .highlighted > .fa-holder:before, .nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before, .nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before {
  content: "";
}

.disabled .order-marker.hollow, .disabled.order-marker.hollow, .disabled.question .input-holder input, .disabled.question .input-holder textarea, .disabled.question .input-holder select, .disabled.question .input-holder .postfix, .disabled.question .input-holder .prefix, .disabled .close-bar, .disabled .bar.close, .disabled.inset .bar.close, .disabled.question .button-group, .disabled .order-marker.hollow, .disabled.order-marker.hollow, h1.with-underline.disabled, h2.with-underline.disabled, h3.with-underline.disabled, h4.with-underline.disabled, h5.with-underline.disabled, h6.with-underline.disabled {
  border-color: #cccccc;
}

.disabled.fa, .disabled .order-marker.inverse, .disabled.order-marker.inverse.disabled .order-marker.hollow, .disabled.order-marker.hollow, .nav-list.nav-checklist li.disabled i, .nav-checklist.panel-selector li.disabled i, .answer.disabled .required-holder, .question.disabled .required-holder, .question-inline.disabled .required-holder, .question-grid-based.disabled .required-holder, .disabled.question .label-holder label, .disabled.question .input-holder .postfix, .disabled.question .input-holder .prefix, .disabled.question .input-holder .value, .disabled .bar.close .action-btn, .collapsable-panel.disabled h1, .collapsable-panel.disabled h2, .collapsable-panel.disabled h3, .collapsable-panel.disabled h4, .collapsable-panel.disabled h5, .collapsable-panel.disabled h6, .disabled .order-marker.inverse, .disabled.order-marker.inverse.disabled .order-marker.hollow, .disabled.order-marker.hollow, h1.disabled, h2.disabled, h3.disabled, h4.disabled, h5.disabled, h6.disabled, p.disabled, a.disabled, li.disabled, blockquote.disabled {
  color: #cccccc;
}

.nav-list.nav-checklist li.disabled, .nav-checklist.panel-selector li.disabled, .disabled.question .message-holder > .disabled, .hint .disabled, .disabled .close-bar .close-button, .disabled.inset .bar.close .action-btn, .disabled-inactive .switch-paddle, .disabled-active input:checked ~ .switch-paddle, .disabled.callout, .disabled.page-message {
  background-color: #d6d6d6;
}

.disabled .fa-holder-dynamic:before, .disabled.fa:before, .disabled > .fa-holder:before, .nav-list.nav-checklist li.disabled .fa-holder-dynamic:before, .nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before {
  content: "";
}

.error .fa-holder-dynamic:before, .error.fa:before, .error > .fa-holder:before, .nav-list.nav-checklist li.error .fa-holder-dynamic:before, .nav-checklist.panel-selector li.error .fa-holder-dynamic:before, .warning .fa-holder-dynamic:before, .warning.fa:before, .warning > .fa-holder:before, .nav-list.nav-checklist li.warning .fa-holder-dynamic:before, .nav-checklist.panel-selector li.warning .fa-holder-dynamic:before, .success .fa-holder-dynamic:before, .success.fa:before, .success > .fa-holder:before, .nav-list.nav-checklist li.success .fa-holder-dynamic:before, .nav-checklist.panel-selector li.success .fa-holder-dynamic:before, .info .fa-holder-dynamic:before, .info.fa:before, .info > .fa-holder:before, .nav-list.nav-checklist li.info .fa-holder-dynamic:before, .nav-checklist.panel-selector li.info .fa-holder-dynamic:before, .highlighted .fa-holder-dynamic:before, .highlighted.fa:before, .highlighted > .fa-holder:before, .nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before, .nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before, .disabled .fa-holder-dynamic:before, .disabled.fa:before, .disabled > .fa-holder:before, .nav-list.nav-checklist li.disabled .fa-holder-dynamic:before, .nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before {
  font-family: FontAwesome;
}

.dark-color-text, .warning .order-marker, .warning.order-marker, .info .order-marker, .info.order-marker, .disabled .order-marker, .disabled.order-marker, .message-holder > .warning, .message-holder > .info, .message-holder > .disabled, .hint .warning, .hint .info, .hint .disabled, .warning .close-bar .close-button .fa, .info .close-bar .close-button .fa, .disabled .close-bar .close-button .fa, .warning .order-marker, .warning.order-marker, .info .order-marker, .info.order-marker, .disabled .order-marker, .disabled.order-marker {
  color: #262626;
}

.light-color-text, .error .order-marker, .error.order-marker, .success .order-marker, .success.order-marker, .highlighted .order-marker, .highlighted.order-marker, .message-holder > .error, .message-holder > .success, .message-holder > .highlighted, .hint .error, .hint .success, .hint .highlighted, .error .close-bar .close-button .fa, .success .close-bar .close-button .fa, .highlighted .close-bar .close-button .fa, .error .order-marker, .error.order-marker, .success .order-marker, .success.order-marker, .highlighted .order-marker, .highlighted.order-marker {
  color: #fff;
}

.row {
  max-width: 100%;
}

/*  Variables  */
footer .tabs {
  max-width: 100% !important;
}

.next-btn {
  margin: 1rem 0 0 0;
}

.page.header .logo {
  cursor: default;
}

.tabs-primary.tabs li a,
.group-section-tab-holder .nav.tabs li a {
  cursor: pointer;
}

.tabs-primary.tabs li.selected,
.tabs-primary.tabs li.selected a,
.group-section-tab-holder .nav.tabs li.selected,
.group-section-tab-holder .nav.tabs li.selected a {
  cursor: default;
}

.tabs-primary.tabs li {
  margin-bottom: -1px;
}

.tabs-primary.tabs li.selected {
  margin-top: -1px;
}

.border, .box-bg-top, .box-bg-bottom, .fa-3 {
  border: 1px solid #b3b3b3;
}

.padding-10, .box-bg-top, .box-bg-bottom {
  padding: 10px;
}

.display_none {
  display: none;
}

.box {
  background-color: #D8F6FF;
  border-bottom: 1px solid #b3b3b3;
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -ms-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  position: relative;
}

.box-bg-top {
  background-color: #FFF1F0;
}

.box-bg-bottom {
  background-color: #E8FCF1;
}

.fa-3 {
  font-size: 4em;
  background-color: red;
  padding: 5px;
  color: #188DAE;
  border-radius: 5px;
}

.fa-info-circle {
  cursor: pointer;
  font-size: 18px;
  color: #B9B9BB;
}

#auc_for_icd .fa-info-circle {
  color: #ffffff;
}

.callout i.fa-info-circle, .page-message i.fa-info-circle {
  cursor: default;
}

.tooltip {
  pointer-events: none;
  margin: auto;
}

.tooltip.top::before {
  border-color: #393259 transparent transparent;
}

.tooltip::before {
  border-color: transparent transparent #393259;
  bottom: 99%;
}

.tooltip.left::before {
  border-color: transparent transparent transparent #393259;
}

.tooltip.right::before {
  border-color: transparent #393259 transparent transparent;
}

.reset {
  margin-top: 70px;
}

.color-green .long-text,
.color-gray .long-text,
.color-green .fa-info-circle {
  top: 9px;
  position: relative;
}

.color-green .fa-info-circle {
  top: 9px;
  display: inline-block;
}

.box.arrow-none:before, .box.arrow-none:after {
  border: none !important;
}

.box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(216, 246, 255, 0);
  border-top-color: #D8F6FF;
  border-width: 15px;
  margin-left: -15px;
}

.box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(179, 179, 179, 0);
  border-top-color: #b3b3b3;
  border-width: 16px;
  margin-left: -16px;
}

.highlighted .order-marker.hollow {
  color: #4F4190;
  margin-top: 0px;
  margin-right: 0px;
}

#auc_for_icd .order-marker.hollow {
  background-color: transparent;
  border: 0.1em solid #fff;
  color: #fff;
  margin-top: 15px;
  padding: .65em 0 0 0;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.margin-top {
  margin-top: 15px;
}

.ans {
  padding-left: 20px;
}

.fa-repeat {
  color: #008AD2;
}

.bg-color-border, .color-orange .bg-color, .color-red .bg-color, .color-green .bg-color, .color-gray .bg-color {
  border-top: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
}

.color-orange .bg-color {
  background-color: #FFF8F0;
}

.color-red .bg-color {
  background-color: #FFEFEF;
}

.color-green .bg-color {
  background-color: #EFFAF4;
}

.color-gray .bg-color {
  background-color: #F7F7F7;
}

.viewMore a, .viewLess a {
  text-decoration: none;
}

.viewMore a:hover, .viewLess a:hover {
  text-decoration: none;
}

#panel1, #panel2, #panel3, #panel4 {
  border-bottom: 1px solid #b3b3b3;
}

blockquote {
  letter-spacing: 0;
  padding: 0px;
  border-left: 0px;
}

.no-box-shadow {
  border: 1px solid #d9d9d9;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

ul.no-bullet ul.no-bullet {
  margin-left: 1.1rem;
}
ul.no-bullet li {
  position: relative;
  padding-left: 13px;
}
ul.no-bullet i {
  position: absolute;
  top: 5px;
  left: 0px;
  color: #188DAE;
  font-size: 8px;
  margin-right: 6px;
}
ul.no-bullet li i.fa-square-o {
  font-size: 9px;
}

.group-section-accordian h4 {
  color: #fff;
  line-height: 25px;
}
.group-section-accordian .section-left {
  background-color: #E99B2F;
  height: 82px;
  padding: 10px 0px 0px 15px;
  position: relative;
  border-radius: 4px 0px 0px 0px;
}
.group-section-accordian .section-right {
  background-color: #FEF1E0;
  height: 82px;
  padding: 20px 30px;
  border-radius: 0px 5px 0px 0px;
}
.group-section-accordian .section-left:after {
  content: "";
  position: absolute;
  left: 99.95%;
  top: 0%;
  border-style: solid;
  border-color: transparent;
  border-width: 41px 0px;
  border-left: 20px solid #E99B2F;
  z-index: 1;
}

.group-section-accordian.color-red .section-left {
  background-color: #F65354;
}
.group-section-accordian.color-red .section-right {
  background-color: #FFDFE0;
}
.group-section-accordian.color-red .section-left:after {
  border-left: 20px solid #F65354;
}

.group-section-accordian.color-green .section-left {
  background-color: #4CBD85;
}
.group-section-accordian.color-green .section-right {
  background-color: #E0F5EC;
}
.group-section-accordian.color-green .section-left:after {
  border-left: 20px solid #4CBD85;
}

.group-section-accordian.color-gray .section-left {
  background-color: #696969;
}
.group-section-accordian.color-gray .section-left:after {
  border-left: 20px solid #696969;
}
.group-section-accordian.color-gray .section-right {
  background-color: #EEEEEE;
}

.box.arrow-none {
  border-bottom: none;
  border-radius: 6px;
}

.button {
  margin: 0 0rem 1rem 0;
}

.page.footer a.logo {
  pointer-events: none;
}

.warning .order-marker.hollow {
  padding: 0.3em 0 0 0 !important;
  border-color: #fff;
}

.warning .order-marker.hollow i {
  font-size: 16px;
}

.warning .switch-paddle {
  border: solid 2px #E08514;
}

.warning .switch-value {
  color: #E08514;
  padding-right: 0.6rem;
  line-height: 1.2em;
}

.warning a {
  text-decoration: underline;
}

.switch-value .required-holder {
  margin-left: 0;
}

.warning.callout, .warning.page-message {
  background-image: url(../img/empty_stripe.png);
}

.callout .close, .page-message .close {
  font-size: 1.57143rem;
  padding: 9px 6px 4px;
  line-height: 0;
  position: absolute;
  top: 50%;
  margin-top: -.78571rem;
  right: .28571rem;
  color: #333;
  opacity: .3;
  background: inherit;
}

.has-tip {
  border-bottom: none;
  cursor: pointer;
  display: inline-block;
}

i.fa.fa-info-circle.has-tip {
  margin-right: -3em;
}

i.fa.fa-info-circle.has-tip + span.required-holder {
  margin-left: 4em;
}

.color-gray.na .bg-color {
  border-radius: 0px 0px 6px 6px;
  border-bottom: none;
}

.underline {
  text-decoration: underline;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
     not supported by any browser */
}

@media only screen and (min-width: 767px) and (max-width: 768px) {
  .page.footer .logo img {
    margin: .25rem 1rem;
    display: none;
  }

  .page.footer .tabs.tabs-primary.reverse,
  .page.footer .tabs.tabs-primary.reverse li {
    background-color: transparent;
    border: 0;
    float: none;
    display: inline-block;
  }

  .page.footer .tabs.tabs-primary.reverse a,
  .page.footer .tabs.tabs-primary.reverse li a {
    color: #fff;
  }

  .page.footer .tabs.tabs-primary.reverse a:after,
  .page.footer .tabs.tabs-primary.reverse li a:after {
    top: auto;
    bottom: -1px;
    border-width: 0px 8px;
    border-bottom: 10px solid #fff;
  }

  .page.footer .tabs.tabs-primary.reverse a:hover,
  .page.footer .tabs.tabs-primary.reverse li a:hover {
    text-decoration: underline;
  }
}
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  .question:nth-child(3n+2) {
    clear: left;
  }
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .question:nth-child(2n+2) {
    clear: left;
  }
}
@media screen and (max-width: 39.9375em) {
  .group-section-accordian .section-left {
    height: 55px;
    padding: 0px 0px 0px 15px;
  }

  #auc_for_icd .order-marker.hollow {
    margin-top: 8px;
  }

  .swappable .short-text {
    display: inline-block;
    padding-top: 3px;
  }

  .swappable .long-text {
    display: none;
  }
}
div#recommendationText > p:nth-child(-n+2) {
  display: none;
}

div#recommendationText ul {
  list-style: none;
}

div#recommendationText ul li {
  position: relative;
}

div#recommendationText ul li:before {
  content: '\f0c8';
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  top: 4px;
  left: -16px;
  color: #188DAE;
  font-size: 8px;
}

@media only screen and (max-width: 767px) {
  #calculator-Tab {
    margin-left: -1px;
  }

  #advice-Tab {
    margin-right: -1px;
  }

  .with-group-sections .page-wrapper .group-section, .page.with-group-sections .page-wrapper .group-section {
    padding: .5rem .5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .with-group-sections .page-wrapper .group-section, .page.with-group-sections .page-wrapper .group-section {
    padding: .5rem 1.5rem 1rem;
  }

  .group-section-accordian .section-left {
    width: 20%;
  }

  .group-section-accordian .section-right {
    width: 80%;
  }
}
@media only screen and (min-width: 1023px) and (max-width: 1224px) {
  .group-section-accordian .section-left {
    width: 23%;
  }

  .group-section-accordian .section-right {
    width: 77%;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1023px) {
  .group-section-accordian .section-left {
    width: 29%;
  }

  .group-section-accordian .section-right {
    width: 71%;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1224px) and (orientation: portrait) {
  .group-section-accordian .section-left {
    width: 29%;
  }

  .group-section-accordian .section-right {
    width: 71%;
  }
}
@media only screen and (min-width: 767px) and (max-width: 946px) and (orientation: portrait) {
  .group-section-accordian .section-left {
    width: 31%;
  }

  .group-section-accordian .section-right {
    width: 69%;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1023px) {
  .page.footer .logo img {
    margin: .25rem 1rem;
    display: none;
  }

  .page.footer .tabs {
    width: 100%;
    text-align: center;
  }

  .page.footer .tabs.tabs-primary.reverse,
  .page.footer .tabs.tabs-primary.reverse li {
    background-color: transparent;
    border: 0;
    float: none;
    display: inline-block;
  }

  .page.footer .tabs.tabs-primary.reverse a,
  .page.footer .tabs.tabs-primary.reverse li a {
    color: #fff;
  }

  .page.footer .tabs.tabs-primary.reverse a:after,
  .page.footer .tabs.tabs-primary.reverse li a:after {
    top: auto;
    bottom: -1px;
    border-width: 0px 8px;
    border-bottom: 10px solid #fff;
  }

  .page.footer .tabs.tabs-primary.reverse a:hover,
  .page.footer .tabs.tabs-primary.reverse li a:hover {
    text-decoration: underline;
  }

  .group-section-accordian .section-right .bold {
    padding: 6px 0 0 0;
  }

  .group-section-accordian .section-right {
    padding: 0 30px;
  }
}
/*@media only screen and (max-width:480px){
    .group-section-accordian .section-left
    {height: 65px;}
    .group-section-accordian .section-right
    {height: 65px;}
    #auc_for_icd .order-marker.hollow{
    margin-top: 5px;
    }
    .group-section-accordian .section-right{
    padding: 20px 20px;
    }
}*/
@media only screen and (min-width: 732px) and (max-width: 1023px) {
  .group-section-accordian .section-right .bold {
    padding: 6px 0 0 0;
  }

  .group-section-accordian .section-right {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 731px) {
  .color-green .has-tip {
    top: 0px;
  }

  .arrow {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 25px;
    z-index: 1;
  }

  .group-section-accordian.color-orange .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #E99B2F;
  }

  .group-section-accordian.color-red .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #F65354;
  }

  .group-section-accordian.color-green .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #4CBD85;
  }

  .group-section-accordian.color-gray .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #696969;
  }

  .group-section-accordian .section-right {
    height: auto;
  }
}
@media only screen and (max-width: 667px) {
  .arrow {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 25px;
    z-index: 1;
  }

  .group-section-accordian.color-orange .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #E99B2F;
  }

  .group-section-accordian.color-red .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #F65354;
  }

  .group-section-accordian.color-green .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #4CBD85;
  }

  .group-section-accordian.color-gray .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #696969;
  }
}
@media only screen and (max-width: 480px) {
  .button {
    font-size: 1rem;
  }

  .arrow-mobile {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 25px;
    z-index: 1;
  }

  .group-section-accordian.color-orange .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 1px 10px;
    z-index: 1;
    border-top: 12px solid #E99B2F;
  }

  .group-section-accordian.color-red .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #F65354;
  }

  .group-section-accordian.color-green .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #4CBD85;
  }

  .group-section-accordian.color-gray .section-left:after {
    content: "";
    position: absolute;
    left: 45%;
    top: 99%;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 10px;
    z-index: 1;
    border-top: 12px solid #696969;
  }

  /*.no-box-shadow .question:not(.active){
  	display:none;
  }*/
  .group-section-accordian .section-right {
    height: auto;
  }
}
@media only screen and (min-width: 64.063em) {
  .column.large-uncentered, .columns.large-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left;
  }
}
@media only screen and (min-width: 45.71429em) {
  .column.large-uncentered, .columns.large-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left;
  }
}

/*# sourceMappingURL=index.css.map */