@charset "UTF-8";

html { scroll-behavior: smooth; }
* { box-sizing:border-box; }


/* {{{ Tags */
body {
	color: #ffffff;
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

* { box-sizing:border-box; }

img {
  width:100%;
	border: 0;
	padding: 0px;
	display:block;
}

h1, h2, h3, h4, h5, h6 {  font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 32px; line-height: 42px; margin:0 0 0.6em; }
h2 { font-size: 28px; line-height: 38px; margin:0 0 0.5em; }
h3 { font-size: 22px; line-height: 27px; margin:1.5em 0 0.5em;  }
h4 { font-size: 18px; line-height: 34px; margin-bottom: 4px; }
h5 { font-size: 16px; line-height: 28px; }
h6 { font-size: 14px; line-height: 25px; }

a, a:visited { color:var(--gray-base); text-decoration:underline; }
a:hover, a:focus { color:var(--brand-primary); }
p a, p a:visited { line-height: inherit; }
/* }}} */

/* {{{ Snap Points */
.content {
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
@media screen and (max-width: 1200px) {
  .content { max-width:880px; padding:0 10px;}
}

@media screen and (max-width: 880px) {
  .content { max-width:600px;}
}
/* }}} Snap Points */

/* {{{ Bootstrap Overrides */

/*
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
}
.row { margin-right:0; margin-left:0; }
*/

.form-horizontal .control-label { padding-right:5px; }
.form-control { border-radius: 0;padding: 0.5em 8px; }

.radio label, .checkbox label {
    padding-left: 0px;
}

.radio-inline, .checkbox-inline {
    margin-left: 10px;
    margin-right: 10px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #efefef;
}

.btn-back, .btn-back:visited { color:white; }
.btn-back { color:gray; }

.tpl-alert {
  width:100%;
  max-width:1200px;
  margin:0 auto;
	margin-bottom:30px;
}
/* }}} */

/*{{{ Header */
header {
	padding: 10px;
}
header div.content { width:100%;display:flex;align-items:center;justify-content:space-between; }
@media screen and (max-width: 1200px) {
  header { padding: 10px; }
}
#header-logo {
  width:20%;
  min-width:200px;
  padding: 20px 0;
}

#appLogin { margin:0 0 0 20px;}
#appLogin a.btn  { color:var(--menu-text); font-size:16px; line-height:16px;padding: 7px 15px; text-decoration:none;}
#appLogin span { vertical-align:top; line-height:16px;font-size:18px; font-weight:400;}

/* {{{ Small menu. */
nav#main-menu.toggled ul {
  display: block;
  position:absolute;
  right:0;
  top:65px;
  z-index:3;
}
nav#main-menu.toggled li {
  display:block;
  float:none;
}
nav#main-menu.toggled li a, nav#main-menu.toggled  li a:visited {
  padding:10px;
  margin:0;
  border-bottom:1px solid;
}
nav#main-menu.toggled li:last-child a { border-bottom:none; }
/* }}} Small menu. */


/* {{{ Menu Toggle. */
.menu-toggle {
  display: none;
  background:transparent;
  border:none;
  /* margin:40px 20px 0 0; */
  padding:0;
  /* width:50px; */
  float: right;
  color: var(--menu-text);
}
.menu-toggle span {
  transform: scale(1.2,1.0);
  font-size: 50px;
}
/* }}} Menu Toggle. */


/* {{{ Navigation */
#main-menu {
  width:70%;
  text-align:right;
}
#main-menu ul {
  width:100%;
  margin: 0 auto;
  padding:0;
  list-style-type: none;
  z-index:10;
}
/*Create a horizontal list with spacing*/
nav#main-menu li { display:inline-block; margin: 0 3px;}

/*Style for menu links*/
nav#main-menu li a {
  color:var(--menu-text);
	text-decoration: none;
	display:inline-block;
	padding:15px 10px;
	border-bottom:2px solid var(--background);
}

nav#main-menu li a:visited { color:var(--menu-text); }
nav#main-menu li a:hover { color: var(--menu-text-hover); border-bottom: 2px solid var(--menu-text); }
#appLogin .btn:hover { color: var(--menu-text-hover); }
nav#main-menu li a.active { border-bottom-color:var(--menu-text-hover); }
nav#main-menu li span { font-size:80%; margin-left:5px;}
nav#main-menu-button { display:none; background:transparent; margin:0;padding:0;border:0; }

/* {{{ Flyout */
nav#main-menu li ul {
  border: 1px solid var(--background);
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out;
  position: absolute;
  width: 180px;
  background-color: var(--background);
  z-index: 2;
}
nav#main-menu li:hover ul { visibility: visible; opacity:1;z-index: 3;}
nav#main-menu li li { display: block; margin:0; text-align:left;}
nav#main-menu li li a { display:block; }
nav#main-menu li li a:hover {border-top-color:white; }
/* }}} Flyout */


@media only screen and (max-width: 880px) {
	.menu-toggle { display: block; }

  nav#main-menu-button { display:block;}
  nav#main-menu-button span { font-size:2.5em;}

  #main-menu { margin:10px 10px;text-align:center; position:relative;order:3; }

  #appLogin {
    order:2;
    margin:0;
    width:100%;
    text-align: center;
  }
  nav#main-menu ul {
    border:1px solid black;
    display:none;
    margin:0;
    width: 65vw;
    background-color:white;
    position: absolute;
    top: 65px;
    right: 0;
    z-index: 1;
  }

  nav#main-menu li { display:block;border-bottom:1px solid black; }
  nav#main-menu li ul { width:100%; display:block; visibility: visible; opacity:1; transition:none;}
  nav#main-menu li:hover ul { visibility: visible; opacity:1;z-index: 3;}

  nav#main-menu.toggled li ul {
  display:block;
  float:none;
  position:relative;
  top:0;

}
  nav#main-menu li:last-child { border-bottom:none; }
  nav#main-menu li a { padding:10px 10px;width:100%; color: var(--menu-text); font-weight:700}
  nav#main-menu li li a { font-weight:400; padding-left:20px;text-align:center; }
  nav#main-menu li a:hover { color: var(--menu-text); text-decoration:underline; border-bottom:0;}
  nav#main-menu li a.active { color:var(--menu-text); text-decoration:underline;}
  nav#main-menu li li a:hover, nav#main-menu li li a.active { color: var(--brand-primary); }
}

/* }}} Navigation */

/* }}} Header */

main {
	color: var(--bootstrap-black);
	background-color: #ffffff;
	padding: 30px 0;
}
@media (max-width: 880px) {
  main {
    padding: 30px 15px;
  }
}



/* {{{ Footer */
footer {
	padding: 30px 10px 30px;
  text-align: center;
}
footer .hst {
  width: 30%;
  max-width: 200px;
}

.footlinks {
  display:flex;
  justify-content: space-between;
}
@media (max-width: 880px) {
  .footlinks {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }
footer .hst { width: 50%; }
}
/* }}} Footer */

/* {{{ Form */
.form-group  { display:flex; }
.form-group > label.control-label{ width:200px; }
.form-group > div.formField{ width: 60%; position: relative;}
.form-group textarea{ height: 200px; }

.toggle-password {
  position: absolute;
  top: 7px;
  right: 23px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .toggle-password {margin-top: 31px;}

  .form-group  {   flex-direction: column; }
  .form-group > label.control-label,
  .form-group > div.formField { width: 100%; }
}


/* }}} Form */

/* {{{ Admin tables */
  .upper-buttons {
    padding:0;
  }
  .upper-buttons .btn-group {
    display:flex;
    gap:10px;
  }
/* }}} */

/* {{{ Admin tables */
  .table-container {
    width:100%;

  }

  #btnFilter { position:absolute; top:47px; left:7px; }
  .filter-row { height: 60px; }
  .admin-table.table a  { color:#000 }
  .admin-table.table td { padding-top:.5em;padding-bottom:.5em; vertical-align: middle;}

  .admin-table.table th { color:#000;background-color:#dedede; }
  .material-icons { vertical-align: middle;}
  .admin-table { font-size:14px; }
  .dtCompleted {color:#277b2f;}

  .ui-widget.ui-autocomplete .ui-menu-item-wrapper { font-size: 13px; }
  .ui-widget.ui-autocomplete a { display:block;text-decoration: none; }
  .ui-widget.ui-autocomplete li:nth-child(odd) a { background:#eeeeee; }



  @media (max-width: 880px) {
    .table-container {
      width:100%;
      overflow-x:scroll;
    }
  }
/* }}} */

/* {{{ User - Sortable List */
.number-column { width:38px;float:left; }
.number-column ul {list-style-type: none; margin: 0; padding: 0; }
.number-column ul li { background-color:black;color:white;padding:2px 8px; font-size: 1.2em; height: 1.7em;margin: 0 5px 5px 5px;vertical-align:middle; }
.sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.7em; }
html>body .sortable li { height: 1.7em; line-height: 1.2em; }
.ui-state-highlight { height: 1.7em; line-height: 1.2em; }
.sortable .checkbox { float:right;margin-top:-3px; }
/* }}} */

/* {{{ Company Products */
#companyProducts {
  width:100%;
  display:flex;
  flex-wrap: wrap;
  gap: 15px;
}

#companyProducts .option {
  align-items: baseline;
  padding:10px;
  border:1px solid var(--bootstrap-black);
}

#companyProducts .option input { margin-right:10px; }

@media screen and (min-width: 1201px) {
  #companyProducts .option { width:calc(33.333% - 10px); }
  #companyProducts .option:nth-child(6n+3),
  #companyProducts .option:nth-child(6n+2),
  #companyProducts .option:nth-child(6n+1) { background:#ebebeb;}
}
@media screen and (max-width: 1200px) and (min-width: 881px){
  #companyProducts .option { width:calc(50% - 10px); }
  #companyProducts .option:nth-child(4n+2),
  #companyProducts .option:nth-child(4n+1) { background:#ebebeb;}
}

@media screen and (max-width: 880px) {
  #companyProducts .option { width:calc(100% - 10px); }
  #companyProducts .option:nth-child(2n+1  ) { background:#ebebeb;}
}

/* }}} */

/* {{{ Home Page */
#homeHeader {
  margin-top:-30px;
  background: url("/site/home-banner.webp") no-repeat center 75%;
  background-size: auto;
  background-size: 100%;
  min-height: 300px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  display:flex;
  justify-content: center;
  align-items: center;
}
#homeHeader h1 { font-size:50px; color:white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

#homeIntro {
  font-size: 18px;
  line-height: 30px;
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  #homeHeader { min-height: 300px; }
}

@media screen and (max-width: 880px) {
  #homeHeader { height: clamp(100px, 25vh, 150px);min-height: 100px}
  #homeIntro { width: 100%; }
}

/* }}} Home Page */

/* {{{ SiteDisplay Widgets */

  /* {{{ Info Line Widget */
  .info { padding:8px 6px;display: flex;flex-direction: row;align-items: flex-start;}
  .info:nth-child(2n) { background-color:#f8f8f8; }
  .info div {display:block;width: 100%;max-width: 415px; overflow-wrap: break-word;}
  .info div.field-label { font-weight:700; color:#4c4c4c; width:160px; text-align:right; padding-right:10px;vertical-align:top; }
  /* }}} Info Line Widget */

  .activity { padding:8px 6px; font-size:14px;clear:both;position:relative;}
  .activity:nth-child(2n) { background-color:#f8f8f8; }
  .activity div {display:block;}
  .activity div.activity-label { float:left;width:35%; font-weight:700; color:#4c4c4c; text-align:right; padding-right:10px;vertical-align:top; word-break: break-all;}
  .activity div.activity-text { float:left;width:65%;}
  .activity div.activity-date { font-weight:400; }
  .activity.json div.activity-json { padding-right:10px }

  .activity-json pre {outline: 1px solid #ccc; padding: 5px;max-height: 350px;}
  .activity-json .string { color: green; }
  .activity-json .number { color: darkorange; }
  .activity-json .boolean { color: blue; }
  .activity-json .null { color: magenta; }
  .activity-json .key { color: red; }
  .activity .count {
    position: absolute;
    top: 15px;
    right: 5px;
    background: #4d6396;
    padding: 5px;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    width: 30px; height: 30px;
    display: flex; justify-content: center; align-items: center;
  }

  /* {{{ Snap Points */
  @media screen and (max-width: 880px) {
    .activity div.activity-label,
    .activity div.activity-text { width:50%; }
    .activity.json div.activity-json { width:100%;clear:both; }
  }
  /* }}} Snap Points */


/* }}}  SiteDisplay Widgets */



/* {{{ State Pricing Options */
#priceUp {
  display: flex;
  gap: 10px;
  align-items: center;
}

#productOptions { display:flex; flex-wrap: wrap; gap: 15px; }
#productOptions .option {
  display:grid;
  grid-template-columns: 190px calc(100% - 190px);
  align-items: baseline;
  padding:10px;
  border:1px solid var(--bootstrap-black)
}
#productOptions input[type=checkbox] { margin-right:10px;}
#productOptions label { grid-column: 1 / span 2; }
#productOptions .source-info {grid-column-start: 2; text-align: right; padding-right: 10px; }
#productOptions .calc-info {grid-column: 1 / span 2;text-align: right; padding-right: 10px; }
calc-price { font-weight: bold; }
#productOptions input[type=number] {width:100px;}

@media screen and (min-width: 1201px) {
  #productOptions .option { width:calc(33.333% - 10px); }
  #productOptions .option:nth-child(6n+3),
  #productOptions .option:nth-child(6n+2),
  #productOptions .option:nth-child(6n+1) { background:#ebebeb;}
}
@media screen and (max-width: 1200px) and (min-width: 881px){
  #productOptions .option { width:calc(50% - 10px); }
  #productOptions .option:nth-child(4n+2),
  #productOptions .option:nth-child(4n+1) { background:#ebebeb;}
}

@media screen and (max-width: 880px) {
  #productOptions .option { width:calc(1000% - 10px); }
  #productOptions .option:nth-child(2n+1  ) { background:#ebebeb;}
}
/* }}} */

/* {{{ Export Options */
.select-row {
  border-left:1px solid black;
  border-right:1px solid black;
  margin:0;
  width:100%;
  max-width:500px;
  padding:5px 10px;
}
.select-row.name { padding:0 10px 0 80px;font-style:italic;}
.select-row.name + .select-row.business,
.select-row.name + .select-row.division { padding-top:10px;}
.select-row.name:last-of-type  { padding-bottom:10px;}

.select-row:first-child {border-top:1px solid black;}
.select-row:last-child {border-bottom:1px solid black;margin-bottom:20px;}
.select-row input { margin-top: 8px; }
.select-row label { display:inline-block; vertical-align:middle; width: calc(100% - 26px); padding: 0px 10px; cursor: pointer; font-weight:700; margin: 0 0 0 10px;}
.select-row label span { font-weight:400; }

.select-row:hover label { background:#f4f4f4;}
/* }}} */

/* {{{ Products */


.productListIntro {
  padding: 20px;
  background-color: #e8ecef;
  border-radius: 8px;
  text-align: center;
}

.productList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}

.prodFeature {
  /* width: calc(50% - 20px); */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--bootstrap-primary);
  text-decoration: none;
  transition: all 0.4s;
  background-color: var(--background);
  color: black;
  padding: 0 15px 0px;
}
.prodFeature .header {
  display: flex;
  justify-content: space-between;
}

.prodFeature .btnWrap {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  margin-top: 10px;
}
.prodFeature .btnWrap .btn {
  margin-top: 8px;
}
.prodFeature a.btn[href=""] { display: none; }
.prodFeatureList {
  display: flex;
  justify-content: start;
  gap: 3em;
}

.prodFeature .price { font-weight: 700; font-size: 22px; color: var(--dark-blue); }

@media screen and (max-width: 1200px) {
  .prodFeatureList {
    gap: 1.5em;
  }
}
@media (max-width: 880px) {
  .productList {
    display: flex;
    flex-wrap: wrap;
    gap:0
  }

  .prodFeature {
    width: 100%;
    margin-bottom:20px;
  }


  .prodFeatureList {
    flex-wrap: wrap;
  }
  .prodFeatureList div {
    width:100%;
  }

  .prodFeature h2 {
    font-size: 20px;
    line-height: 30px;
    margin: 0 0 0.5em;
  }
}


#addressPt2 { max-height: 0; overflow:hidden; transition: all 0.4s ease-in-out;}
#addressPt2.active { max-height: 9999px; overflow: initial; }
.autocomplete-list:empty { display: none; }
.autocomplete-list {
  border: 1px solid #ccc;
  max-height: 300px;
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
  width: 100%;
  margin: -10px 0 0;
  color: #808080;
  background-color: white;
}

input[name="sAddressFull"].js-auto-add + .autocomplete-list {
  margin: 0 0 0;
  max-width: 250px;
}

.autocomplete-item {
  padding: 8px;
  cursor: pointer;
  border-top: 1px solid black;
  background-color: #fff;
  font-size: 14px;
}
.autocomplete-item:first-child { border-top: none; }
.autocomplete-item:nth-child(odd) { background-color: #f6f6f6; }

.autocomplete-item.active,
.autocomplete-item:hover {
  background-color: #e9e9e9;
}

.embedGoogleMap {
  display: block;
  border: 0;
  width: 100%;
  max-width:600px;
  height: 325px;
}
/* }}} Products */

.btn-no-padding { padding:0 2px 2px 2px; }
.btn-no-padding i { font-size:13px;line-height:13px; }

.btn-input-pattern { padding:3px; }
.btn-input-pattern i { font-size:18px;line-height:18px; }

.btn.btn-sm i { font-size:18px; }
.btn.btn-xs i { font-size:15px; }
.btn.btn-sm span, .btn.btn-xs span { display:inline-block;vertical-align:middle; }

/*--------------------------------------------------------------
# Misc
--------------------------------------------------------------*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

fieldset { margin-bottom: 2em; }

.thin-border { border:1px solid black; padding:3px;}

div.note { padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid black; }
div.note span:first-of-type { color:#585858;font-size:85%; }

/* {{{ CSS Spinner */
.lds-ring, .lds-ring div { box-sizing: border-box; }
.lds-ring {
  color: var(--bootstrap-primary);
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 15px auto;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* }}} CSS Spinner */

.TODO { color:#f0f!important; }

.right-align-costs div.info div:nth-child(2) {
  text-align: right;
  width: 100px;
}