/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/roboto-light.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Light"), local("Roboto-Light"), url("/fonts/roboto-light.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-light.woff2") format("woff2"), url("/fonts/roboto-light.woff") format("woff"), url("/fonts/roboto-light.ttf") format("truetype"), url("/fonts/roboto-light.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto.eot");
  /* IE9 Compat Modes */
  src: local("Roboto"), local("Roboto-Regular"), url("/fonts/roboto.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto.woff2") format("woff2"), url("/fonts/roboto.woff") format("woff"), url("/fonts/roboto.ttf") format("truetype"), url("/fonts/roboto.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/roboto-bold.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Bold"), local("Roboto-Bold"), url("/fonts/roboto-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-bold.woff2") format("woff2"), url("/fonts/roboto-bold.woff") format("woff"), url("/fonts/roboto-bold.ttf") format("truetype"), url("/fonts/roboto-bold.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/*
    importer.scss

    This file will be compiled into css and included on every html page.
    Include all universal styles here
*/
/*
    _mixins.scss

    scss variables to be used across the site.
    Any may be overridden by variables in styles/scss/clients if a client is set in config/local.js
*/
/*

@font-face {
  font-family: 'CaviarDreams';
  src: url('/fonts/CaviarDreams-webfont.eot');
  src: local('CaviarDreams'),
       url('/fonts/CaviarDreams-webfont.woff2') format('woff2'),
       url('/fonts/CaviarDreams-webfont.woff') format('woff'),
       url('/fonts/CaviarDreams-webfont.ttf') format('truetype'),
       url('/fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/CaviarDreams-webfont.svg#CaviarDreams') format('svg');
  font-weight: normal;
  font-style: normal;
}
$caviar : 'CaviarDreams', 'AvenirLTStd-Book', sans-serif;

*/
/*
    Include in html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    $roboto : 'Roboto', 'Verdana', 'Helvetica', sans-serif;
*/
.sweet-alert {
  border-radius: 0;
  border: 1px solid #999999;
  z-index: 3010; }
  .sweet-alert p {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #3d5264;
    margin: 6px 0px; }
  .sweet-alert h2 {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #00264d;
    margin: 0px; }
  .sweet-alert button {
    background-color: #004990 !important;
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #004990;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 5px 15px;
    text-align: center;
    min-width: 85px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    box-shadow: none;
    outline: none; }
    .sweet-alert button:hover, .sweet-alert button:focus, .sweet-alert button:active {
      background-color: #2aac48 !important;
      border-color: #2aac48; }
  .sweet-alert button.cancel {
    background-color: white !important;
    color: #004990; }
    .sweet-alert button.cancel:hover {
      background-color: #004990 !important;
      color: white;
      border-color: #004990; }
  .sweet-alert input {
    border: 1px solid #999999;
    color: #3d5264;
    box-shadow: none; }
    .sweet-alert input:focus {
      border: 1px solid #777777;
      box-shadow: 0px 0px 2px #004990; }
  .sweet-alert .sa-error-container {
    display: none; }

.sweet-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 3000; }

/*
    _globals.scss

    global styles and defaults. Included on all pages
*/
html, body {
  width: 100%;
  overflow-x: hidden; }

body {
  color: #3d5264;
  font-family: "Roboto", Helvetica, Arial, sans-serif; }

.clearfix {
  clear: both; }

.d-none {
  display: none !important; }

.bg-dark {
  background-color: #00264d;
  color: white; }

.bg-light {
  background-color: #fafafa;
  color: #3d5264; }

.bg-primary {
  background-color: #004990;
  color: white; }

.color-primary {
  color: #004990; }

#main-content .top-banner {
  background-color: #fafafa;
  border-bottom: 2px solid #fafafa;
  padding: 20px 0px 15px 0px;
  text-align: center; }
  #main-content .top-banner h1 {
    margin-top: 0px; }
  #main-content .top-banner .subtitle {
    margin-top: -5px; }
  #main-content .top-banner p {
    margin-bottom: 0px; }
#main-content .control-banner, #main-content .dark-banner {
  background-color: #004990;
  color: white;
  padding: 10px 0px; }
  #main-content .control-banner p.small-links, #main-content .dark-banner p.small-links {
    margin: -8px 0 -10px 0; }
    #main-content .control-banner p.small-links a, #main-content .dark-banner p.small-links a {
      display: inline-block;
      font-size: 12px; }
#main-content .dark-banner {
  background-color: #00264d; }

.paging {
  position: relative;
  text-align: center; }

.right-absolute {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px; }

.vertical-center {
  position: relative;
  top: 50%;
  margin-top: 0px;
  margin-bottom: 0px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }
  .vertical-center.no-overflow {
    max-height: 100%;
    overflow-y: auto; }

.result {
  background-color: #fafafa;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  border: 1px solid #eeeeee;
  padding: 7px 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 16px;
  position: relative; }
  .result:hover {
    border-color: #999999; }
  .result h4 {
    margin: 0px; }
  .result .subtitle {
    font-size: 12px; }
  .result .half {
    display: inline-block;
    vertical-align: top; }
    @media (min-width: 768px) {
      .result .half {
        width: 49%;
        padding-right: 5px; } }
    @media (min-width: 992px) {
      .result .half {
        width: 99%; } }
    @media (min-width: 1200px) {
      .result .half {
        width: 49%; } }
  .result .line {
    display: inline-block;
    margin-right: 15px;
    padding-left: 20px;
    text-indent: -20px;
    word-wrap: break-word; }
    @media (min-width: 768px) {
      .result .line {
        display: block;
        margin-right: 0px; } }
  .result a.more {
    position: absolute;
    right: 10px;
    bottom: -8px;
    padding: 0px 5px;
    z-index: 2; }
    .result a.more::before {
      content: " ";
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 6px;
      background-color: #fafafa;
      z-index: -1; }
  .result .complaint-description {
    display: block;
    max-height: 50px;
    overflow: hidden; }

.result.reinspection-result {
  font-size: 15px; }
  .result.reinspection-result .form-subtitle, .result.reinspection-result .subtitle {
    vertical-align: baseline; }
  .result.reinspection-result .reinspection-controls {
    margin-bottom: 0px;
    font-size: 12px; }
    .result.reinspection-result .reinspection-controls a {
      display: inline-block;
      margin-right: 5px; }

.result.payable-result label.radio-container {
  padding: 0px 0px 0px 23px;
  text-indent: -23px;
  font-size: 14px; }
  .result.payable-result label.radio-container .check-wrap {
    margin-top: 0px; }
.result.payable-result .feeItems {
  padding-left: 23px; }
.result.payable-result .feeItem {
  display: inline-block; }

.result.unpaid-invoice-result h5, .result.paid-invoice-result h5 {
  margin: 0px 0px 10px 0px; }

.member-data-section {
  margin-bottom: 40px; }

.hoverable-rows .row:hover {
  background: #fafafa; }

.hoverable-rows .row.noHover:hover {
  background: initial; }

.selectable-row {
  cursor: pointer; }
  .selectable-row.selected {
    background: #fafafa; }

.action-line {
  margin: 10px 0px;
  overflow: hidden; }
  .action-line button {
    float: left;
    margin-right: 10px; }
  .action-line .action-text {
    float: left;
    padding-top: 3px; }

.page-loading {
  text-align: center;
  margin: 30px 0px;
  font-size: 18px;
  opacity: 0;
  -webkit-animation: fadein 1s ease;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-fill-mode: both;
  animation: fadein 1s ease;
  animation-fill-mode: both;
  animation-delay: 0.5s; }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.history-application, .history-registration, .history-expiry {
  font-size: 12px;
  line-height: 16px;
  padding-left: 10px; }
  .history-application h4, .history-registration h4, .history-expiry h4 {
    margin: 10px 0px 0px -10px;
    font-size: 15px;
    line-height: 20px; }
  .history-application .button-xs, .history-registration .button-xs, .history-expiry .button-xs {
    margin-top: 0px;
    font-size: 10px; }

.history-order-controls {
  font-size: 12px;
  line-height: 15px;
  display: inline-block;
  padding-bottom: 10px; }
  .history-order-controls a {
    display: inline-block;
    margin-left: 5px; }

/*
    Icon definitions. Included on all pages
    Icon sheet created from site: https://iconmonstr.com

    General strategy: all icons drawn from the same image with positioned background
    image is 500x500px, sized to 250x250 in css. Thus, icons are placed at twice
    intended size on the image. For now, set default icon size to 20x20 (40 on the image)

    in each icon type, just need to set the background position. Other additions optional.
*/
.sp {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url("/images/peiicons.png");
  background-size: 200px 400px;
  vertical-align: middle; }
  .sp.double {
    height: 40px;
    width: 40px;
    background-size: 400px 800px; }
  .sp.triple {
    height: 60px;
    width: 60px;
    background-size: 600px 1200px; }
  .sp.small {
    height: 15px;
    width: 15px;
    background-size: 150px 300px; }
  .sp.bigger {
    height: 30px;
    width: 30px;
    background-size: 300px 600px; }

.sp-search {
  background-position: 24.8% 19.7%; }

.sp-check {
  background-position: 10.4% 0.3%; }

.sp-check-straight {
  background-position: 65.3% 19.1%; }

.sp-ex {
  background-position: 37.6% 19.55%; }

.sp-edit {
  background-position: 45.8% 0.4%;
  cursor: pointer; }

.sp-delete {
  background-position: 34.1% 0.3%;
  cursor: pointer; }

.sp-corp {
  background-position: 22.9% 0.4%; }

.sp-school {
  background-position: 12.7% 19.4%; }

.sp-facility {
  background-position: 58.2% 0.4%; }

.sp-facility2 {
  background-position: 71% 0.4%; }

.sp-shield {
  background-position: 82.65% 0.3%; }

.sp-bag {
  background-position: 94.2% 0.4%; }

.sp-info {
  background-position: 1.7% 9.95%; }

.sp-logout {
  background-position: 13.7% 9.9%; }

.sp-member {
  background-position: 26.8% 10.1%; }

.sp-members {
  background-position: 40.4% 9.9%; }

.sp-newReport {
  background-position: 52.9% 10.2%; }

.sp-report {
  background-position: 0.8% 19.5%; }

.sp-reports {
  background-position: 2% 28.8%; }

.sp-arrow-right {
  background-position: 65.7% 10.05%;
  cursor: pointer; }

.sp-arrow-left {
  background-position: 78.2% 10.1%;
  cursor: pointer; }

.sp-pay {
  background-position: 90.7% 10.1%; }

.sp-plus {
  background-position: 51.58% 19.6%; }

.sp-gear {
  background-position: 77.95% 19.4%; }

.sp-bell {
  background-position: 14% 29%; }

.sp-loading {
  background-image: none;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: #fafafa;
  border-top-color: #004990;
  -webkit-animation: spin 1s linear infinite;
  /* Safari */
  animation: spin 1s linear infinite; }
  .sp-loading.double {
    border-width: 4px; }
  .sp-loading.triple {
    border-width: 6px; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*
    Styles for typography. Included on all pages
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 400; }

.font-serif {
  font-family: Georgia, "Times New Roman", Times, serif; }

.validation-error, .alert-color {
  color: red; }

.small-caps {
  color: #999999;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 20px;
  padding-top: 5px; }

.subtitle {
  color: #999999; }

.status-subtitle {
  font-size: 14px;
  color: #999999; }

.inset-left {
  padding-left: 20px; }

h1 {
  font-size: 28px; }
  @media (min-width: 768px) {
    h1 {
      font-size: 36px; } }

h2 {
  font-size: 24px; }
  @media (min-width: 768px) {
    h2 {
      font-size: 30px; } }

h3 {
  font-size: 18px; }
  @media (min-width: 768px) {
    h3 {
      font-size: 24px; } }

h4 {
  font-size: 16px; }
  @media (min-width: 768px) {
    h4 {
      font-size: 18px; } }

p {
  margin: 10px 0px; }

.floating-tag {
  display: inline-block;
  margin: 0px 10px 5px 0px;
  background-color: #fafafa;
  vertical-align: top;
  padding: 3px 10px;
  height: 26px;
  font-size: 14px;
  border-radius: 13px;
  border: 1px solid #cccccc;
  white-space: nowrap; }
  .floating-tag .floating-tag-close {
    font-weight: 700;
    opacity: 0.7;
    cursor: pointer; }
    .floating-tag .floating-tag-close:hover {
      opacity: 1; }

h3.member-section-heading {
  cursor: pointer;
  border-bottom-width: 1px;
  border-bottom-style: solid; }

.allowLineBreak {
  white-space: pre-line; }

/*
    Styles for buttons and anchor tags. Included on all pages
*/
a {
  cursor: pointer;
  color: #0066cc;
  text-decoration: none; }
  a:hover {
    color: #0080ff;
    text-decoration: none; }

a.linkonly, a.linkonly:hover {
  color: inherit;
  text-decoration: inherit; }

a.subtle {
  color: #999999; }
  a.subtle:hover {
    color: #777777; }

a.light {
  color: white; }
  a.light:hover {
    color: white; }

a.underline {
  text-decoration: underline; }

a.underline:hover, a.underline-hover:hover {
  text-decoration: underline; }

[data-scrollto] {
  cursor: pointer; }

[data-scrollto]:hover {
  text-decoration: underline; }

button.button {
  background-color: #004990;
  color: white;
  font-size: 11px;
  line-height: normal;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #004990;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding: 5px 15px;
  text-align: center;
  min-width: 85px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  box-shadow: none;
  outline: none; }
  button.button:hover, button.button:focus {
    background-color: #2aac48;
    border-color: #2aac48; }
  button.button:disabled, button.button.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.5; }
  button.button.button-xs {
    padding: 1px 5px;
    font-size: 9px;
    line-height: 1.5; }

button.button-outline {
  background-color: white;
  color: #004990; }
  button.button-outline:hover, button.button-outline:focus {
    background-color: #004990;
    color: white;
    border-color: #004990; }

button.button-plain {
  background-color: #fafafa;
  color: #3d5264;
  border-color: #3d5264; }
  button.button-plain:hover, button.button-plain:focus {
    background-color: #004990;
    color: white;
    border-color: #004990; }

button.menu-button {
  background-color: transparent;
  color: #00264d;
  border: 1px solid #00264d;
  min-width: 0px;
  padding: 9px 8px; }
  button.menu-button:hover, button.menu-button:focus {
    background-color: white;
    border-color: #00264d; }
  button.menu-button .icon-bar {
    display: block;
    background-color: #00264d;
    width: 22px;
    height: 2px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px; }
  button.menu-button .icon-bar + .icon-bar {
    margin-top: 4px; }

button.close {
  min-width: 0px;
  background-color: transparent;
  padding: 0px;
  border: none; }
  button.close:hover, button.close:focus {
    background-color: transparent;
    border-color: transparent; }

/*
    Styles for forms, inputs and field/value displays. Included on all pages
*/
.input-group {
  margin: 10px 0px; }
  @media (min-width: 480px) {
    .input-group .input-group-addon {
      min-width: 100px; } }
  @media (min-width: 480px) {
    .input-group .input-group-addon:last-child {
      min-width: 0px; } }

.input-group-submit {
  margin: 20px 0px 30px 0px; }

.input-group-addon {
  background-color: #fafafa;
  color: #999999;
  border-color: #999999; }

.form-control {
  box-shadow: none;
  color: #3d5264;
  border-color: #999999; }
  .form-control:focus, .form-control.error:focus {
    border-color: #777777;
    box-shadow: 0px 0px 2px #004990; }
  .form-control.error {
    box-shadow: 0px 0px 2px 1px red; }

[data-reqprop].error {
  box-shadow: 0px 0px 2px 1px red;
  position: relative;
  z-index: 2; }

.input-group .input-left {
  float: left;
  width: 100px;
  padding: 6px 10px;
  text-align: left;
  line-height: 18px;
  color: #999999;
  font-weight: 700; }
.input-group .input-right {
  padding: 6px 12px 6px 112px; }

.input-group.search .form-control {
  padding-right: 21px; }
.input-group.search .sp-search {
  position: absolute;
  right: 1px;
  top: 3px;
  z-index: 4; }

.control-banner .input-group .input-group-addon {
  background-color: transparent;
  color: white;
  border-color: transparent;
  text-align: right;
  padding-top: 0px;
  padding-bottom: 0px;
  text-transform: uppercase;
  font-weight: 700; }
  @media (min-width: 480px) {
    .control-banner .input-group .input-group-addon {
      min-width: 80px; } }
.control-banner .input-group .form-control {
  height: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-color: white; }
  .control-banner .input-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }

.smaller-inputs .input-group .form-control {
  height: 24px;
  padding-top: 0px;
  padding-bottom: 0px; }
.smaller-inputs .input-group .input-group-addon {
  padding-top: 0px;
  padding-bottom: 0px; }

/*
    Checkboxes and Radio Buttons
    Heavy use of buttons inside labels to expand the clickable area
    Each checkbox element must have an empty span immediately after, and both wrapped in
    a span.check-wrap or span.radio-wrap for the intended styles to work. The wrap class
    may be positioned as the input otherwise would. Ex:

    <span class="check-wrap">
        <input type="checkboxe" />
        <span></span>
    </span>
*/
input[type='radio'], input[type='checkbox'], span.check-ui {
  width: 15px;
  height: 15px; }

span.check-wrap, span.radio-wrap {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px; }
  span.check-wrap input, span.radio-wrap input {
    z-index: 1;
    opacity: 0;
    margin: 1px;
    width: 13px;
    height: 13px; }
    span.check-wrap input:disabled, span.check-wrap input.disabled, span.radio-wrap input:disabled, span.radio-wrap input.disabled {
      pointer-events: none; }
  span.check-wrap span, span.radio-wrap span {
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    span.check-wrap span::before, span.radio-wrap span::before {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border: 1px solid #999999;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      background: #fafafa;
      background-image: moz-linear-gradient(#fafafa, #dddddd);
      background-image: ms-linear-gradient(#fafafa, #dddddd);
      background-image: o-linear-gradient(#fafafa, #dddddd);
      background-image: webkit-linear-gradient(#fafafa, #dddddd);
      background-image: linear-gradient(#fafafa, #dddddd); }
  span.check-wrap input:checked + span::after, span.radio-wrap input:checked + span::after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("/images/peiicons.png");
    background-size: 150px 300px;
    background-position: 65.3% 19.1%; }
  span.check-wrap input:disabled + span, span.radio-wrap input:disabled + span {
    opacity: 0.4;
    cursor: default !important; }

span.radio-wrap span::before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%; }

span.radio-wrap input:checked + span::after {
  content: " ";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-image: none;
  background-color: #004990; }

.check-wrap input:focus + span::before,
.radio-wrap input:focus + span::before,
label:hover .radio-wrap span::before,
label:hover .check-wrap span::before,
.radio-wrap:hover span::before,
.check-wrap:hover span::before {
  border-color: #777777; }

.check-wrap input:disabled:focus + span::before,
.radio-wrap input:disabled:focus + span::before,
label:hover .radio-wrap input:disabled + span::before,
label:hover .check-wrap input:disabled + span::before,
.radio-wrap:hover input:disabled + span::before,
.check-wrap:hover input:disabled + span::before {
  border-color: #999999; }

label.radio-container {
  font-weight: 400;
  padding: 5px 20px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px; }
  label.radio-container .radio-wrap, label.radio-container .check-wrap {
    margin: 2px 4px 0px 0px;
    vertical-align: top; }
  label.radio-container.hoverable:hover, label.radio-container.hoverable:focus-within {
    background-color: #fafafa; }
  label.radio-container.error {
    box-shadow: 0px 0px 2px 1px red; }

/***********************************************************
    The .form-label, .form-field and .form-control
    classes are made to display form lines with label/field
    on left/right, whose baselines align for both text
    and input controls, and whose heights are consistent
    for single line labels and fields. the resulting rows
    are 41px high with spacing in between.
***********************************************************/
label.form-label {
  margin: 10px -15px 10px 0px;
  color: #999999;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 17px;
  padding-top: 3px; }
  label.form-label .sp {
    margin-top: -2px;
    margin-bottom: -1px;
    vertical-align: top; }
  label.form-label .form-subtitle, label.form-label .form-subtitle + br {
    font-size: 11.25px;
    vertical-align: top;
    line-height: 1;
    font-weight: 400;
    text-transform: none; }
    label.form-label .form-subtitle a, label.form-label .form-subtitle span, label.form-label .form-subtitle + br a, label.form-label .form-subtitle + br span {
      vertical-align: top; }
  label.form-label .form-subtitle.multiline, label.form-label .form-subtitle.multiline + br {
    line-height: 15px;
    display: inline-block;
    padding-top: 5px; }

h4.form-field, div.form-field {
  margin: 11px 0px 10px 0px;
  font-size: 15px;
  line-height: 20px;
  word-break: break-word; }
  h4.form-field .form-control, div.form-field .form-control {
    margin-top: 4px; }
    h4.form-field .form-control:first-child, div.form-field .form-control:first-child {
      margin-top: -6px; }
    h4.form-field .form-control:last-child, div.form-field .form-control:last-child {
      margin-bottom: -8px; }
  h4.form-field button, div.form-field button {
    display: inline-block;
    margin-top: 4px; }
    h4.form-field button:first-child, div.form-field button:first-child {
      margin-top: -6px; }
    h4.form-field button:last-child, div.form-field button:last-child {
      margin-bottom: -8px; }
  h4.form-field a button, h4.form-field a button:first-child, h4.form-field a button:last-child, div.form-field a button, div.form-field a button:first-child, div.form-field a button:last-child {
    margin-top: 4px;
    margin-bottom: 0px; }
  h4.form-field a:first-child button, div.form-field a:first-child button {
    margin-top: -6px; }
  h4.form-field a:last-child button, div.form-field a:last-child button {
    margin-bottom: -8px; }
  h4.form-field .sp, div.form-field .sp {
    vertical-align: top; }
  h4.form-field .form-subtitle, h4.form-field .form-subtitle + br, div.form-field .form-subtitle, div.form-field .form-subtitle + br {
    font-size: 75%;
    color: #999999;
    vertical-align: top;
    line-height: 0.75; }
    h4.form-field .form-subtitle a, h4.form-field .form-subtitle span, h4.form-field .form-subtitle + br a, h4.form-field .form-subtitle + br span, div.form-field .form-subtitle a, div.form-field .form-subtitle span, div.form-field .form-subtitle + br a, div.form-field .form-subtitle + br span {
      vertical-align: top; }
  h4.form-field .form-subtitle.multiline, h4.form-field .form-subtitle.multiline + br, div.form-field .form-subtitle.multiline, div.form-field .form-subtitle.multiline + br {
    line-height: 15px;
    display: inline-block;
    padding-top: 5px; }

.form-subtitle.absolute {
  position: absolute; }

.form-submit {
  margin-top: 10px; }

div.uploaded-file {
  padding: 2px 8px 0px 8px;
  background-color: #fafafa;
  border: 1px solid #999999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 4px;
  word-wrap: break-word; }
  div.uploaded-file:last-of-type {
    margin-bottom: 0px; }
  div.uploaded-file span.small {
    display: block;
    margin-top: -1px;
    margin-bottom: -3px;
    font-size: 11px;
    color: #999999; }
  div.uploaded-file a {
    font-size: 14px; }

.dp, .dp-below {
  padding-top: 0px;
  z-index: 2000; }
  .dp::before, .dp-below::before {
    height: 0px; }

/*
    table styles
*/
table.tbl {
  border-collapse: collapse;
  width: 100%; }
  table.tbl tr {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent; }
  table.tbl tr:hover td {
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999; }
  table.tbl tr:nth-child(even) {
    background-color: #fafafa; }
  table.tbl th {
    background-color: #f5faff;
    color: #00264d;
    padding: 5px;
    font-weight: 700; }
  table.tbl td {
    padding: 5px; }
  table.tbl td.nowrap, table.tbl th.nowrap {
    white-space: nowrap; }
  table.tbl td.control-column > *, table.tbl th.control-column > * {
    display: inline-block;
    margin: 0px 5px;
    white-space: nowrap; }
  @media (min-width: 768px) {
    table.tbl td.control-column, table.tbl th.control-column {
      white-space: nowrap; } }
  table.tbl td.input {
    padding: 0px; }
    table.tbl td.input input, table.tbl td.input select {
      display: block;
      width: 100%;
      height: 31px;
      padding: 5px 12px;
      font-size: 14px;
      border: 1px solid #cccccc; }
      table.tbl td.input input.error, table.tbl td.input select.error {
        box-shadow: 0px 0px 2px red; }
    table.tbl td.input input[type='checkbox'] {
      height: 15px;
      width: 15px;
      display: inline-block; }
    table.tbl td.input label.table-checkbox-container {
      height: 31px;
      padding-top: 7px;
      margin: 0px;
      width: 100%;
      text-align: center; }
      table.tbl td.input label.table-checkbox-container.error {
        box-shadow: 0px 0px 2px red; }
  table.tbl td.date-input, table.tbl th.date-input {
    width: 120px; }
  table.tbl td.hours-input, table.tbl th.hours-input {
    width: 80px; }
  table.tbl td.checkbox-input, table.tbl th.checkbox-input {
    width: 45px; }

table.tbl.tbl-compressed {
  font-size: 12px;
  line-height: 16px; }
  table.tbl.tbl-compressed tr {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999; }
  table.tbl.tbl-compressed tr:hover td {
    border-bottom: 1px solid #3d5264;
    border-top: 1px solid #3d5264; }
  table.tbl.tbl-compressed th, table.tbl.tbl-compressed td {
    padding: 2px;
    text-align: center; }

table.tbl.tbl-row-exes th:last-of-type, table.tbl.tbl-row-exes td:last-of-type {
  background-color: white;
  width: 1%;
  border: 0; }
  table.tbl.tbl-row-exes th:last-of-type .sp-ex, table.tbl.tbl-row-exes td:last-of-type .sp-ex {
    cursor: pointer; }

.tbl-container-350 {
  max-height: 350px;
  overflow-y: auto; }

.tbl-fixed-header-350 tbody {
  display: block;
  max-height: 350px;
  overflow-y: auto;
  width: 100%; }

table.tbl.feeTable tr.fee-row td {
  opacity: 0.5; }
table.tbl.feeTable tr.fee-row.highlight td {
  opacity: 1;
  font-weight: 700; }
table.tbl.feeTable td span.subtitle {
  font-size: 75%;
  vertical-align: top;
  line-height: 0.75; }

table.master-table th, table.master-table td {
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee; }
table.master-table th {
  border: 1px solid #eeeeee; }

ul.report-filters, ul.report-orders {
  list-style: none;
  padding-left: 0px; }
  ul.report-filters li > div, ul.report-orders li > div {
    display: inline-block;
    padding: 10px 20px; }
    ul.report-filters li > div:hover, ul.report-orders li > div:hover {
      background-color: #fafafa; }
  ul.report-filters .form-control, ul.report-orders .form-control {
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
    display: inline-block;
    background-color: #fafafa; }
  ul.report-filters select.form-control, ul.report-orders select.form-control {
    text-align: center;
    text-align-last: center; }
  ul.report-filters label.radio-container, ul.report-orders label.radio-container {
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #999999; }

.ce-report-filter > label, .ce-report-filter > input {
  display: inline-block; }

.ce-report-filter .form-control {
  width: auto;
  height: 24px;
  padding-top: 0px;
  padding-bottom: 0px; }

.ce-report-filter label.radio-container {
  padding: 5px 5px; }

/*
    Styles for declarations, as found on the member page and application page
*/
ol.declarations {
  font-weight: 700;
  padding-left: 20px; }
  ol.declarations li > * {
    font-weight: 400; }
  ol.declarations li {
    padding-left: 5px; }
    ol.declarations li label.radio-container {
      cursor: default;
      vertical-align: top;
      position: relative; }
      ol.declarations li label.radio-container.hoverable {
        cursor: pointer; }
      ol.declarations li label.radio-container.hoverable:hover {
        color: black; }
  ol.declarations label.radio-container.profActivity-other-label {
    text-align: left; }
    ol.declarations label.radio-container.profActivity-other-label.hoverable:focus-within {
      color: black; }
  ol.declarations #profActivity-other-text {
    font-weight: 400;
    margin-left: 22px;
    width: auto; }

ul.user-notes {
  list-style: none;
  max-height: 300px;
  overflow-y: auto; }
  ul.user-notes li {
    padding: 3px 10px 3px 25px;
    overflow: hidden; }
    ul.user-notes li:hover {
      background-color: #fafafa; }
  ul.user-notes .user-notes-heading {
    float: left;
    margin-right: 10px;
    margin-left: -15px;
    margin-top: 2px; }
    ul.user-notes .user-notes-heading h4 {
      margin: 0px;
      font-size: 14px;
      font-weight: 700; }
    ul.user-notes .user-notes-heading p {
      margin: 0px;
      font-size: 11px;
      color: #999999; }

.dark-banner ul.user-notes {
  padding: 10px;
  background-color: white;
  border: 1px dashed #999999;
  color: #3d5264; }

/*
    Styles for modals and popups. Included on all pages. Sweetalert style overrides in their own file
*/
.sp-info.trigger {
  cursor: pointer;
  position: relative;
  overflow: visible;
  z-index: auto; }

.info-wrapper {
  z-index: 2000;
  min-width: 600px;
  position: absolute;
  top: 28px;
  left: -10px;
  cursor: auto; }
  .info-wrapper.right {
    left: auto;
    right: -10px; }
    .info-wrapper.right .info-main-body {
      float: right; }

.info-main-body {
  float: left;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  background-color: white;
  font-weight: 400;
  text-transform: none;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #3d5264;
  text-align: left;
  max-width: 500px;
  overflow: hidden;
  opacity: 0;
  margin-top: -20px; }
  .info-main-body .sp-info {
    float: left;
    margin-right: 10px; }
  .info-main-body .info-message {
    line-height: 22px;
    white-space: normal; }
  .info-main-body button.close {
    margin-left: 12px;
    height: 18px; }

.info-main-body .sp-info, label.form-label .info-main-body .sp.sp-info {
  margin-top: 1px; }

/*
    Note, the next two blocks are a hack to vertically center the modals.
    If there are multiple modal containers (.modal) present, then this hack can cause the backdrop
    of nonopen modals to cover the intended modal. This is solved by adding an inline style - display: none
    to each .modal container.
*/
body.modal-open .modal {
  display: flex;
  align-items: center;
  padding: 20px 0px; }

.modal.fade .modal-dialog {
  margin: auto; }
  @media (min-width: 768px) {
    .modal.fade .modal-dialog {
      margin: auto; } }

.modal-header .close {
  margin-top: 0px; }

.modal-footer button {
  margin-left: 10px; }

.phone-modal .input-group {
  margin: 2px 0px; }
.phone-modal a.phone-modal-remove {
  display: inline-block;
  margin-bottom: 10px; }

.invoice-container {
  margin: 15px;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #004990; }

#certModalContainer {
  overflow-x: auto; }

#certFacilityInspectionModalContainer {
  overflow-x: auto; }

.modal-dialog.notification-modal-dialog {
  position: fixed;
  right: 0px;
  top: 54px;
  bottom: 10px;
  margin: 0px;
  max-width: 100%;
  width: 375px; }
  .modal-dialog.notification-modal-dialog #archived-notification-container .notification:first-child {
    border-top: 1px solid #ababab; }
  .modal-dialog.notification-modal-dialog .notification {
    position: relative;
    padding: 22px 10px 10px 28px;
    border-bottom: 1px solid #dddddd;
    background-color: #fafafa; }
  .modal-dialog.notification-modal-dialog .notification:hover {
    background-color: white; }
  .modal-dialog.notification-modal-dialog .unread-notification-dot {
    display: none; }
  .modal-dialog.notification-modal-dialog .notification.unread .unread-notification-dot {
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 26px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #428bca; }
  .modal-dialog.notification-modal-dialog .notification[data-link] {
    cursor: pointer; }
  .modal-dialog.notification-modal-dialog .notification-top-controls {
    position: absolute;
    top: 3px;
    right: 15px;
    font-size: 12px;
    line-height: 15px; }
  .modal-dialog.notification-modal-dialog .notification-top-controls a {
    display: inline-block;
    margin-left: 8px; }
  .modal-dialog.notification-modal-dialog .notification-top-date {
    position: absolute;
    top: 3px;
    left: 10px;
    font-size: 12px;
    line-height: 15px;
    color: #999999; }
  .modal-dialog.notification-modal-dialog .notification .read-notification {
    display: none; }
  .modal-dialog.notification-modal-dialog .notification.unread .read-notification {
    display: inline-block; }
  .modal-dialog.notification-modal-dialog .notification.unread .unread-notification {
    display: none; }
  .modal-dialog.notification-modal-dialog a.subtle.read-notification:hover, .modal-dialog.notification-modal-dialog a.subtle.unread-notification:hover {
    color: #0080ff; }

.modal-dialog.notification-modal-dialog .modal-content {
  max-height: 100%;
  overflow-y: auto; }

.modal.fade .modal-dialog.notification-modal-dialog {
  webkit-transform: translate(50px, 0px);
  transform: translate(50px, 0px); }

.modal.fade.in .modal-dialog.notification-modal-dialog {
  webkit-transform: none;
  transform: none; }

/*
    Styles navbar and footer. Included on all pages. Includes layout blocking for two navs and main content
*/
.client-logo {
  min-width: 120px;
  min-height: 48px;
  background-image: url("/images/svmalogo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

.client-logo-icon {
  min-width: 120px;
  min-height: 48px;
  background-image: url("/images/demoIcon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

nav.top-nav {
  background-color: #f5faff;
  border-bottom: 2px solid #00264d;
  color: #00264d;
  height: 54px;
  padding: 0px 10px;
  position: fixed;
  width: 100%;
  z-index: 50;
  white-space: nowrap; }
  @media (min-width: 768px) {
    nav.top-nav {
      padding: 0px 30px; } }
  nav.top-nav button.menu-button {
    margin-top: 9px;
    margin-right: 10px; }
  nav.top-nav a.nav-brand {
    color: inherit;
    text-decoration: inherit;
    font-weight: 300;
    display: inline-block;
    vertical-align: top;
    height: 50px;
    overflow: hidden; }
    nav.top-nav a.nav-brand:hover {
      color: inherit;
      text-decoration: inherit; }
    nav.top-nav a.nav-brand span {
      display: inline-block; }
    nav.top-nav a.nav-brand span.nav-brand-logo {
      vertical-align: top;
      display: inline-block;
      height: 48px;
      margin-top: 2px;
      width: 120px;
      background-image: url("/images/svmalogo.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
    nav.top-nav a.nav-brand span.nav-brand-title {
      display: none; }
      @media (min-width: 480px) {
        nav.top-nav a.nav-brand span.nav-brand-title {
          display: inline-block;
          white-space: normal;
          vertical-align: middle;
          margin-left: 20px;
          font-size: 14px;
          line-height: 20px;
          position: relative;
          top: 53%;
          max-width: 180px;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%); } }
      @media (min-width: 992px) {
        nav.top-nav a.nav-brand span.nav-brand-title {
          vertical-align: top;
          font-size: 16px;
          line-height: 16px;
          margin-top: 18px;
          white-space: nowrap;
          position: static;
          top: auto;
          max-width: 100%;
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          transform: none; } }
  nav.top-nav .top-nav-item,
  nav.top-nav span.dropdown-toggle {
    display: inline-block;
    float: right;
    margin-top: 16px;
    color: #0066cc; }
    nav.top-nav .top-nav-item:hover,
    nav.top-nav span.dropdown-toggle:hover {
      color: #0080ff; }
  nav.top-nav ul.dropdown-menu {
    left: auto;
    right: 0px; }
  nav.top-nav .top-nav-item.notification-toggle {
    position: relative; }
    nav.top-nav .top-nav-item.notification-toggle .notification-dot {
      position: absolute;
      width: 20px;
      height: 20px;
      left: -10px;
      top: -8px;
      border-radius: 10px;
      background-color: #004990;
      color: white;
      font-size: 11px;
      line-height: 16.5px;
      font-weight: bold;
      text-align: center;
      padding-top: 3px;
      padding-right: 1px; }
      nav.top-nav .top-nav-item.notification-toggle .notification-dot.over-nine {
        font-size: 10px;
        line-height: 15px;
        font-weight: normal;
        padding-top: 2px; }
  nav.top-nav .top-nav-item.notification-toggle:hover .sp-bell {
    opacity: 0.8; }
  nav.top-nav .top-nav-item.notification-toggle:hover .notification-dot {
    background-color: #2aac48; }

nav.side-nav {
  background-color: #f5faff;
  position: fixed;
  top: 54px;
  left: auto;
  right: 101%;
  bottom: 0px;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
  -webkit-transition: right 0.7s ease;
  -moz-transition: right 0.7s ease;
  -ms-transition: right 0.7s ease;
  -o-transition: right 0.7s ease;
  transition: right 0.7s ease; }
  @media (min-width: 992px) {
    nav.side-nav {
      left: 0px !important;
      right: auto !important;
      width: 300px !important; } }
  nav.side-nav .side-nav-inner {
    padding: 30px 20px 20px 30px;
    width: 300px;
    margin: 0px auto; }
    @media (min-width: 992px) {
      nav.side-nav .side-nav-inner {
        padding-bottom: 50px; } }
  nav.side-nav p.nav-title {
    font-weight: 700;
    text-transform: uppercase;
    color: #004990; }
  nav.side-nav ul.nav-list {
    list-style: none;
    padding-left: 25px;
    line-height: 26px;
    margin-bottom: 30px; }
    nav.side-nav ul.nav-list li {
      margin-bottom: 5px; }
  nav.side-nav a {
    -webkit-transition: padding-left 0.3s ease;
    -moz-transition: padding-left 0.3s ease;
    -ms-transition: padding-left 0.3s ease;
    -o-transition: padding-left 0.3s ease;
    transition: padding-left 0.3s ease;
    color: #0066cc;
    display: inline-block;
    line-height: 18px;
    padding-top: 4px;
    word-wrap: break-word; }
    nav.side-nav a:hover {
      padding-left: 4px;
      color: #0080ff; }

html, body, .page-content-container {
  height: 100%; }

#main-content {
  position: relative;
  padding-top: 54px;
  min-height: 100%;
  padding-bottom: 110px; }
  @media (min-width: 992px) {
    #main-content {
      margin-left: 300px; } }

footer.footer {
  background-color: #00264d;
  padding: 15px 10px 30px 10px;
  color: #999999;
  text-align: center;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 80px;
  z-index: 30;
  overflow: hidden; }
  @media (min-width: 480px) {
    footer.footer {
      padding-top: 30px; } }
  @media (min-width: 992px) {
    footer.footer {
      left: -300px;
      z-index: 50; } }
  footer.footer a {
    color: #999999; }
    footer.footer a:hover {
      color: white;
      text-decoration: underline; }

@media (min-width: 992px) {
  #homepage-content #main-content, #passwordreset-content #main-content {
    margin-left: 0px; } }
@media (min-width: 992px) {
  #homepage-content #main-content footer.footer, #passwordreset-content #main-content footer.footer {
    left: 0px; } }

button.button {
  background-color: #23923c;
  border-color: #23923c; }

button.button-outline {
  color: #23923c;
  border-color: #23923c;
  background-color: white; }
  button.button-outline:hover, button.button-outline:focus {
    background-color: #23923c;
    border-color: #23923c; }

button.button-plain {
  background-color: #fafafa;
  border-color: #3d5264; }

button.menu-button, button.close {
  background-color: transparent; }

nav.top-nav a.nav-brand span.nav-brand-logo {
  width: 60px; }

@media (min-width: 768px) {
  nav.top-nav a.nav-brand span.nav-brand-title {
    display: inline-block;
    max-width: 250px; } }
@media (min-width: 992px) {
  nav.top-nav a.nav-brand span.nav-brand-title {
    max-width: 100%; } }

nav.top-nav .top-nav-item.notification-toggle .notification-dot {
  background-color: #23923c; }

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