/*!

HPWHulatorSite
https://ecosizer.ecotope.com/sizer/
Published: Tuesday, May 20th, 2025

Paul Kintner
Quantative Analyst, Programming
Web: https://ecotope.com/our-team/paul-kintner/
Location: Seattle, WA, USA

Scott Benish
Creative Direction, Information Architecture, Interface Design
Web: https://www.benishdesign.com/
Twitter: https://twitter.com/benish
Location: Portland, OR, USA

Jeremiah Deasey
Front-End, Programming
Web: https://www.upheavaldesign.com
Location: Portland, OR, USA


*/
@import url("https://fonts.googleapis.com/css2?family=Cousine:wght@700&display=fallback");
/* font weights */
/* custom breakpoints */
/* example of use */
body.calbem {
  color: #252525;
  background-color: #F5F5F5; }

.calbem .symbol.close:after, .calbem .symbol.close:before {
  background-color: #3073D6; }

.calbem svg {
  fill: #686868; }
  .calbem svg.fill-blue {
    fill: #3073D6; }
  .calbem svg.fill-white {
    fill: #fff; }

.calbem .help-panel .help-error p {
  color: #950213; }

.calbem .help-panel .help-warning p {
  color: #CC7600; }

.calbem .help-panel .help-info {
  background-color: #F5F5F5; }

.calbem .help-panel header {
  color: #52575A;
  border-color: rgba(140, 140, 140, 0.5); }
  .calbem .help-panel header h6 {
    color: #27486D; }

.calbem .help-panel p {
  color: #52575A; }

.calbem .icon-loading figure i:before, .calbem .icon-loading figure i:after {
  border-color: #20B67A; }

.calbem .icon-loading figure span {
  color: #20B67A; }

.calbem input[type="text"],
.calbem input[type="tel"],
.calbem input[type="number"],
.calbem input[type="email"],
.calbem textarea,
.calbem select {
  color: #52575A;
  border-color: #CCCCCC;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }
  .calbem input[type="text"]:focus, .calbem input[type="text"]:active,
  .calbem input[type="tel"]:focus,
  .calbem input[type="tel"]:active,
  .calbem input[type="number"]:focus,
  .calbem input[type="number"]:active,
  .calbem input[type="email"]:focus,
  .calbem input[type="email"]:active,
  .calbem textarea:focus,
  .calbem textarea:active,
  .calbem select:focus,
  .calbem select:active {
    color: #27486D;
    border-color: #3073D6; }
    .calbem input[type="text"]:focus ~ label, .calbem input[type="text"]:active ~ label,
    .calbem input[type="tel"]:focus ~ label,
    .calbem input[type="tel"]:active ~ label,
    .calbem input[type="number"]:focus ~ label,
    .calbem input[type="number"]:active ~ label,
    .calbem input[type="email"]:focus ~ label,
    .calbem input[type="email"]:active ~ label,
    .calbem textarea:focus ~ label,
    .calbem textarea:active ~ label,
    .calbem select:focus ~ label,
    .calbem select:active ~ label {
      color: #3073D6; }
  .calbem input[type="text"][readonly],
  .calbem input[type="tel"][readonly],
  .calbem input[type="number"][readonly],
  .calbem input[type="email"][readonly],
  .calbem textarea[readonly],
  .calbem select[readonly] {
    /* for locked fields */
    color: #fff;
    background-color: #8C8C8C; }
    .calbem input[type="text"][readonly]:focus, .calbem input[type="text"][readonly]:active,
    .calbem input[type="tel"][readonly]:focus,
    .calbem input[type="tel"][readonly]:active,
    .calbem input[type="number"][readonly]:focus,
    .calbem input[type="number"][readonly]:active,
    .calbem input[type="email"][readonly]:focus,
    .calbem input[type="email"][readonly]:active,
    .calbem textarea[readonly]:focus,
    .calbem textarea[readonly]:active,
    .calbem select[readonly]:focus,
    .calbem select[readonly]:active {
      color: #fff;
      border-color: #CCCCCC;
      -webkit-box-shadow: 0 0 0 0 1px 4px rgba(0, 0, 0, 0.4) ;
      -moz-box-shadow: 0 0 0 0 1px 4px rgba(0, 0, 0, 0.4) ;
      box-shadow: 0 0 0 0 1px 4px rgba(0, 0, 0, 0.4) ; }

.calbem select {
  color: #3073D6; }
  .calbem select:disabled {
    color: #8C8C8C; }

.calbem input:-webkit-autofill,
.calbem input:-webkit-autofill:hover,
.calbem input:-webkit-autofill:focus,
.calbem textarea:-webkit-autofill,
.calbem textarea:-webkit-autofill:hover,
.calbem textarea:-webkit-autofill:focus,
.calbem select:-webkit-autofill,
.calbem select:-webkit-autofill:hover,
.calbem select:-webkit-autofill:focus {
  border-color: #3073D6;
  -webkit-text-fill-color: #8C8C8C; }

.calbem ::placeholder {
  color: #8C8C8C; }

.calbem label {
  font-family: "Cousine", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #3073D6; }
  .calbem label.labelfocus {
    color: #27486D; }

.calbem fieldset {
  border-color: #CCCCCC; }

.calbem fieldset#fs-CAspec {
  border-color: transparent;
  background-color: #fff; }

.calbem fieldset#fs-inputmethod {
  background-color: #F5F5F5;
  border-top: 6px solid #252525; }
  .calbem fieldset#fs-inputmethod .btn-group {
    top: -116px; }

.calbem .fieldset-title.hasHover:hover .heading {
  color: #27486D; }

.calbem .fieldset-title.hasHover:hover .icon svg {
  fill: #27486D; }

.calbem .field-wrap .field-unit input {
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px; }

.calbem .field-wrap .field-unit .icon {
  color: #8C8C8C;
  border-color: #CCCCCC;
  background-color: #F5F5F5;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0; }

.calbem .field-wrap.focused:not(.locked) label {
  color: #27486D; }

.calbem .field-wrap.focused:not(.locked) .icon {
  color: #27486D;
  border-color: #3073D6; }
  .calbem .field-wrap.focused:not(.locked) .icon svg {
    fill: #27486D; }

.calbem .field-wrap.locked label {
  color: #686868; }

.calbem .field-wrap.locked input {
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) ;
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) ;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) ; }

.calbem .field-wrap.warning label {
  color: #CC7600; }

.calbem .field-wrap.warning input,
.calbem .field-wrap.warning textarea {
  border-color: #FF9402;
  -webkit-box-shadow: 0px 0px 8px rgba(255, 148, 2, 0.2) ;
  -moz-box-shadow: 0px 0px 8px rgba(255, 148, 2, 0.2) ;
  box-shadow: 0px 0px 8px rgba(255, 148, 2, 0.2) ; }

.calbem .field-wrap.warning .field-unit .icon {
  border-color: #CC7600; }

.calbem .field-wrap.warning p.label-warning {
  color: #CC7600; }

.calbem .field-wrap.warning .noUi-tooltip {
  /* sliders */
  color: #CC7600; }

.calbem .field-wrap.warning .noUi-connect {
  background: #CC7600; }

.calbem .field-wrap.error label, .calbem .field-wrap.js-error label {
  color: #950213 !important; }

.calbem .field-wrap.error input,
.calbem .field-wrap.error textarea, .calbem .field-wrap.js-error input,
.calbem .field-wrap.js-error textarea {
  border-color: #C7061E !important;
  -webkit-box-shadow: 0px 0px 8px rgba(199, 6, 30, 0.2) ;
  -moz-box-shadow: 0px 0px 8px rgba(199, 6, 30, 0.2) ;
  box-shadow: 0px 0px 8px rgba(199, 6, 30, 0.2) ; }

.calbem .field-wrap.error .field-unit .icon, .calbem .field-wrap.js-error .field-unit .icon {
  border-color: #950213; }

.calbem .field-wrap.error p.label-error {
  /* show error label for django errors */
  color: #950213; }

.calbem .field-wrap.js-error p.js-errors {
  color: #950213; }

.calbem form .suffix-wrap p.locked {
  color: #353535; }

.calbem form .suffix-wrap:hover p.js-errors, .calbem form .suffix-wrap:hover p.label-error, .calbem form .suffix-wrap:focus p.js-errors, .calbem form .suffix-wrap:focus p.label-error {
  color: #65010D !important; }

.calbem form .suffix-wrap:hover p.label-warning, .calbem form .suffix-wrap:focus p.label-warning {
  color: #8F5200 !important; }

.calbem .advanced-options {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }
  .calbem .advanced-options.expanded {
    border-color: #EDEEED;
    background-color: #F5F5F5; }
  .calbem .advanced-options button.js-adv-options {
    top: -26px; }

.calbem .meta-loadshift .meta-period .range {
  color: #27486D; }

.calbem #calculated-gpdpp {
  /* appears in CA Spec mode to display a calculated sum from backend */ }
  .calbem #calculated-gpdpp .gpdpp-block {
    border: 1px solid #CCCCCC;
    background-color: #EDEEED;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px; }
  .calbem #calculated-gpdpp .sum {
    color: #52575A; }
  .calbem #calculated-gpdpp .description {
    color: #52575A; }

.calbem .noUi-target {
  color: #657F90;
  background: #CCD5DB; }

.calbem .noUi-connect {
  background: #27486D; }

.calbem .noUi-draggable {
  /* Handles and cursors;  */
  cursor: ew-resize; }

.calbem .noUi-handle:hover:before {
  background: #3073D6; }

.calbem .noUi-handle:before,
.calbem .noUi-handle:after {
  /* Handle stripes;  */
  background: #3073D6;
  background: #7CAAEE;
  /* Old browsers */
  background: -moz-linear-gradient(180deg, #7CAAEE 0%, #3073D6 100%);
  /* FF3.6+ */
  background: -webkit-linear-gradient(180deg, #7CAAEE 0%, #3073D6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(180deg, #7CAAEE 0%, #3073D6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(180deg, #7CAAEE 0%, #3073D6 100%);
  /* IE10+ */
  background: linear-gradient(180deg, #7CAAEE 0%, #3073D6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$start, endColorstr=$end, GradientType=0);
  /* IE6-9 */ }

.calbem .noUi-handle:after {
  background: #3073D6; }

.calbem .noUi-handle:focus:before {
  background: #3073D6; }

.calbem .noUi-active.noUi-handle:before {
  background: #3073D6; }

.calbem .noUi-tooltip {
  /* Markings; */
  color: #27486D; }

.calbem .slider-water {
  /* create transparent element for hover */ }
  .calbem .slider-water .presets .preset {
    color: #3073D6; }
    .calbem .slider-water .presets .preset:after {
      background: #3073D6; }
    .calbem .slider-water .presets .preset:hover {
      color: #27486D; }
      .calbem .slider-water .presets .preset:hover:after {
        background: #27486D; }

/* Custom Button Styles
================================================== */
.calbem a {
  color: #3073D6; }
  .calbem a:hover, .calbem a:focus {
    color: #27486D; }

.calbem .btn {
  font-size: 14px;
  color: #3073D6; }
  .calbem .btn .symbol.circle {
    background-color: #3073D6; }
    .calbem .btn .symbol.circle svg {
      fill: #fff; }
  .calbem .btn .symbol svg {
    fill: #3073D6; }
  .calbem .btn.btn-box {
    font-weight: 700;
    color: #3073D6;
    border-color: #DCDCDC;
    background-color: #F5F5F5;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px; }
    .calbem .btn.btn-box .close:before, .calbem .btn.btn-box .close:after {
      background-color: #3073D6; }
    .calbem .btn.btn-box:hover, .calbem .btn.btn-box:focus {
      color: #fff;
      border-color: #1E5099;
      background-color: #3073D6; }
      .calbem .btn.btn-box:hover .symbol.circle, .calbem .btn.btn-box:focus .symbol.circle {
        background-color: #fff; }
        .calbem .btn.btn-box:hover .symbol.circle svg, .calbem .btn.btn-box:focus .symbol.circle svg {
          fill: #3073D6; }
  .calbem .btn.btn-pill {
    padding: 9px 16px 7px;
    font-size: 13px;
    font-family: "Cousine", Arial, sans-serif;
    text-transform: none;
    color: #fff;
    background-color: rgba(63, 122, 141, 0.9);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px; }
    .calbem .btn.btn-pill:hover, .calbem .btn.btn-pill:focus {
      color: #fff;
      background-color: #2F5C6A; }
  .calbem .btn:hover, .calbem .btn:focus {
    color: #1E5099; }
    .calbem .btn:hover .symbol.close:before, .calbem .btn:hover .symbol.close:after, .calbem .btn:focus .symbol.close:before, .calbem .btn:focus .symbol.close:after {
      background-color: #fff; }
    .calbem .btn:hover .symbol.circle, .calbem .btn:focus .symbol.circle {
      background-color: #1E5099; }

.calbem .btn-gradient {
  background: #3073D6; }
  .calbem .btn-gradient:after {
    content: none; }

.calbem button[type=submit].btn-box {
  /* single out the Save PDF button in Results page */
  color: #fff;
  background: #3073D6;
  border: none; }
  .calbem button[type=submit].btn-box:hover, .calbem button[type=submit].btn-box:focus {
    color: #fff;
    background-color: #27486D; }

.calbem .btn-submit.btn-gradient {
  /* the large submit form button */
  padding: 23px 40px 20px;
  font-size: 24px;
  font-family: "Cousine", Arial, sans-serif;
  color: #fff;
  background: #20B67A;
  border: none; }
  .calbem .btn-submit.btn-gradient:hover, .calbem .btn-submit.btn-gradient:focus {
    color: #fff;
    background-color: #188B5D; }

.calbem button.btn-close:hover i:after, .calbem button.btn-close:hover i:before,
.calbem button.btn-close:focus i:after,
.calbem button.btn-close:focus i:before {
  background-color: #27486D; }

.calbem .btn-group .js-btn-option {
  font-weight: 600;
  text-transform: capitalize;
  background: #fff;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }
  .calbem .btn-group .js-btn-option.toggled {
    color: #fff;
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    text-shadow: none;
    background: #252525; }
  .calbem .btn-group .js-btn-option:disabled {
    color: #8C8C8C;
    background: transparent; }

.calbem .js-btn-toggle:hover .label, .calbem .js-btn-toggle:focus .label, .calbem .js-btn-toggle:active .label {
  color: #27486D; }

.calbem .js-btn-toggle:hover .toggle-knob, .calbem .js-btn-toggle:focus .toggle-knob, .calbem .js-btn-toggle:active .toggle-knob {
  border-color: #27486D; }
  .calbem .js-btn-toggle:hover .toggle-knob:before, .calbem .js-btn-toggle:focus .toggle-knob:before, .calbem .js-btn-toggle:active .toggle-knob:before {
    border-color: #27486D;
    background-color: #27486D; }

.calbem .js-btn-toggle .label {
  font-size: 14px;
  color: #3073D6; }

.calbem .js-btn-toggle .toggle-knob {
  border: 2px solid #3073D6; }
  .calbem .js-btn-toggle .toggle-knob:before {
    border: 2px solid #3073D6; }

.calbem .js-btn-toggle.toggled .toggle-knob {
  border-color: #1E5099;
  background-color: #3073D6; }
  .calbem .js-btn-toggle.toggled .toggle-knob:before {
    border-color: #fff;
    background-color: #fff; }

.calbem .js-btn-toggle.toggled:hover .toggle-knob, .calbem .js-btn-toggle.toggled:focus .toggle-knob, .calbem .js-btn-toggle.toggled:active .toggle-knob {
  border-color: #35476E; }
  .calbem .js-btn-toggle.toggled:hover .toggle-knob:before, .calbem .js-btn-toggle.toggled:focus .toggle-knob:before, .calbem .js-btn-toggle.toggled:active .toggle-knob:before {
    border-color: #fff;
    background-color: #1E5099; }

.calbem .js-schematic-btn {
  border-color: #DCDCDC;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }
  .calbem .js-schematic-btn .filter-blend:before {
    background: #7CAAEE; }
  .calbem .js-schematic-btn .btn {
    border-top: 1px solid #DCDCDC; }
  .calbem .js-schematic-btn.toggled .filter-blend:before {
    background: transparent; }
  .calbem .js-schematic-btn.toggled .btn {
    color: #fff;
    background: #252525; }
  .calbem .js-schematic-btn:hover, .calbem .js-schematic-btn:focus {
    color: #fff; }
    .calbem .js-schematic-btn:hover .btn, .calbem .js-schematic-btn:focus .btn {
      color: #fff;
      border-color: #7CAAEE;
      background-color: #3073D6; }

.calbem [data-help] {
  color: #3073D6; }
  .calbem [data-help]:hover {
    color: #27486D; }

.calbem h1,
.calbem h2,
.calbem h3,
.calbem h4,
.calbem h5,
.calbem h6 {
  font-family: "Cousine", Arial, sans-serif;
  font-weight: 700;
  color: #353535; }

.calbem h1 {
  font-size: 32px;
  color: #20B67A; }

.calbem h2 {
  font-size: 32px; }

.calbem h3 {
  font-size: 30px; }

.calbem h4 {
  font-size: 20px; }

.calbem h5, .calbem h6 {
  font-size: 16px; }

.calbem ::selection {
  color: #F5F5F5;
  background: #353535; }

.calbem ::-moz-selection {
  color: #F5F5F5;
  background: #353535; }

.calbem #masthead {
  height: auto;
  background-color: #71ACBF; }

.calbem .branding {
  height: 108px; }
  .calbem .branding .calbem-bear {
    position: relative;
    display: flex;
    align-items: center; }
    .calbem .branding .calbem-bear img {
      width: 140px;
      height: 109px; }
    .calbem .branding .calbem-bear:after {
      content: "";
      z-index: 0;
      position: absolute;
      top: -138px;
      left: -210px;
      margin: auto;
      width: 476px;
      height: 370px;
      background-image: url("/static/build/gfx/svg/logo-calbem-bear.svg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      -webkit-opacity: 0.14;
      -moz-opacity: 0.14;
      opacity: 0.14; }

.calbem .navbar {
  width: 100%;
  height: 64px; }

.calbem .primary-nav {
  padding: 0;
  padding-left: 16px; }
  .calbem .primary-nav li a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: #686868;
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    text-shadow: none;
    background: none; }
    .calbem .primary-nav li a span {
      padding: 0;
      /* remove underline */ }
      .calbem .primary-nav li a span:after {
        content: none; }
    .calbem .primary-nav li a:hover, .calbem .primary-nav li a:focus {
      color: #252525;
      background-color: #EDEEED; }
    .calbem .primary-nav li a.current {
      pointer-events: none;
      color: #33373C;
      background-color: #E5E5E5; }
      .calbem .primary-nav li a.current span:after {
        content: none; }

.calbem .logo-ecotope-powered {
  display: flex;
  align-items: center; }
  .calbem .logo-ecotope-powered svg,
  .calbem .logo-ecotope-powered img,
  .calbem .logo-ecotope-powered object {
    width: 145px;
    height: 48px; }

.calbem footer#bottom {
  background-color: #3F7A8D; }
  .calbem footer#bottom .calbem-bear {
    display: flex;
    align-items: center; }
    .calbem footer#bottom .calbem-bear img {
      width: auto;
      height: 42px; }
    .calbem footer#bottom .calbem-bear .title {
      margin-left: 16px;
      font-size: 21px;
      font-family: "Cousine", Arial, sans-serif;
      color: #fff; }
  .calbem footer#bottom nav a {
    color: #fff; }
    .calbem footer#bottom nav a:hover, .calbem footer#bottom nav a:focus {
      color: rgba(255, 255, 255, 0.7); }
  .calbem footer#bottom .copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7); }

.calbem .ecosizer-intro h1 {
  font-size: 30px; }

.calbem .ecosizer-intro h6 {
  font-size: 16px; }

.calbem .page-content {
  max-width: calc(1266px + 100px);
  background-color: #fff; }
  .calbem .page-content h4 {
    color: #686868; }

.calbem ul.errors li {
  color: #950213; }

.calbem ul.errors p {
  color: #65010D; }

.calbem ul.errors a {
  color: #950213; }
  .calbem ul.errors a:hover, .calbem ul.errors a:focus {
    color: inherit; }

.calbem .disclaimer p,
.calbem .disclaimer ul li {
  color: #686868; }

.calbem .section-expandable:not(.collapsed) {
  border-top: 1px solid #EDEEED;
  border-bottom: none; }

.calbem .sidebar .system-specs h4,
.calbem .sidebar .system-specs h5 {
  color: #CC7600; }

.calbem .system-specs li {
  color: #686868; }

.calbem .system-specs h4 {
  color: #20B67A; }

.calbem .plotly .gtitle {
  /* the graph title */
  color: #353535 !important; }

.calbem .plotly .ytitle {
  /* the y-axis text on left */
  color: !important; }

.calbem .plotly .xtitle {
  /* x-axis label below graph */
  color: #8C8C8C !important; }

.calbem .plotly .ytick text,
.calbem .plotly .xtick text {
  /* graph values */
  fill: #8C8C8C !important; }

.calbem .plotly .slider-label {
  color: #27486D !important; }

.calbem .plotly .trace .points .point {
  fill: #3073D6 !important;
  stroke: #fff !important; }

.calbem .plotly .slider-grip-rect {
  fill: #3073D6 !important;
  stroke: #fff !important; }

.calbem .plotly .slider-rail-rect {
  fill: #CCD5DB !important; }

.calbem .color-blue {
  color: #3073D6; }

.calbem .color-blue-dark {
  color: #27486D; }

.calbem .color-blue-darker {
  color: #35476E; }

.calbem .color-green {
  color: #20B67A; }

.calbem .color-grey {
  color: #8C8C8C; }

.calbem .color-warning {
  color: #CC7600; }

.calbem .color-error {
  color: #950213; }

.calbem .bg-grey {
  background-color: #8C8C8C; }

.calbem .bg-grey-light {
  background-color: #EDEEED; }

/*# sourceMappingURL=styles-calbem.css.map */