@font-face {
  font-family: 'open_sansregular';
  src: url("../fonts/opensans-regular-webfont.svg#open_sansregular") format("svg");
  src: url("../fonts/opensans-regular-webfont.eot");
  src: url("../fonts/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-regular-webfont.woff2") format("woff2"), url("../fonts/opensans-regular-webfont.woff") format("woff"), url("../fonts/opensans-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'open_sanslight';
  src: url("../fonts/opensans-light-webfont.svg#open_sanslight") format("svg");
  src: url("../fonts/opensans-light-webfont.eot");
  src: url("../fonts/opensans-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-light-webfont.woff2") format("woff2"), url("../fonts/opensans-light-webfont.woff") format("woff"), url("../fonts/opensans-light-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
/* Tank Utility Color Palette */
/* Font variables */
/* Base overrides */
html {
  overflow-y: -moz-scrollbars-vertical;
  overflow: scroll; }

body {
  background: #fff;
  padding-bottom: 20px;
  padding-top: 60px;
  font-family: open_sanslight, "helvetica nueue", helvetica, sans-serif; }

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important; }

.svg {
  width: 100%;
  height: 100%; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: open_sansregular, "helvetica nueue", helvetica, sans-serif; }

/* Space out content a bit */
.tu-primary, a {
  color: #1c97c2; }

/* typography */
.title-sub {
  color: #666;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold; }

#message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }

#inner-message {
  margin: 0 auto; }

sup {
  color: #1c97c2;
  font-size: .5em; }

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.navbar,
.footer {
  padding-left: 15px;
  padding-right: 15px; }

.table {
  width: 100%; }

form[editable-form] > div {
  margin: 0px 0;
  height: 100%; }

.editable-wrap {
  display: block;
  width: 100%;
  height: 100%; }

.editable-controls input {
  width: 100%;
  height: 100%; }

.editable-controls form-group {
  height: 100%; }

/* Make inline editables take the full width of their parents */
.editable-container.editable-inline,
.editable-container.editable-inline .control-group.form-group,
.editable-container.editable-inline .control-group.form-group .editable-input,
.editable-container.editable-inline .control-group.form-group .editable-input textarea {
  width: 100%;
  height: 100%; }

.container-narrow > hr {
  margin: 30px 0; }

/* ----- HELPER CLASSES ----- */
.top-border {
  border-top: 1px solid #ccc;
  margin-top: .5em;
  padding-top: .5em; }

.defined-list dt {
  font-weight: bold;
  color: #999; }
.defined-list dd {
  margin: 0 0 1em;
  color: #333; }

.outline-box {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 1em;
  margin: 1em;
  overflow: hidden; }
  @media (max-width: 767px) {
    .outline-box {
      margin: 1em 0; } }
  .outline-box h2 {
    margin-top: 0;
    color: #1c97c2;
    font-size: 1.6em; }

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5; }

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px; }

/* Supporting marketing content */
.marketing {
  margin: 40px 0; }

.marketing p + h4 {
  margin-top: 28px; }

.tool-tip, .tooltip {
  color: #666; }

.white-on .btn.btn-default.active {
  background-color: #1c97c2;
  color: #fff; }

/* Custom form styles */
form .stacked-label {
  margin: 1em 0;
  display: block; }
  form .stacked-label .label-text {
    display: block; }
  form .stacked-label input {
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 2em;
    color: #1c97c2;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    width: 80%; }
    form .stacked-label input.has-error {
      border-color: #a94442; }
    form .stacked-label input:focus {
      -webkit-box-shadow: none;
      box-shadow: none; }
  form .stacked-label select {
    font-size: 1.2em;
    border-color: #ccc;
    color: #1c97c2; }
  form .stacked-label .has-error:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none; }
form ::-webkit-input-placeholder {
  color: #ccc; }
form :-moz-placeholder {
  /* Firefox 18- */
  color: #ccc; }
form ::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc; }
form :-ms-input-placeholder {
  color: #ccc; }

.form-group .input-group.address input.form-control {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px; }

/* Custom button colors, extend the .btn class from bootstrap
==================================================*/
.button-main {
  color: #ffffff;
  background: #1c97c2; }

.button-main:hover {
  background: #1c97c2;
  color: #ffffff;
  background-image: -webkit-linear-gradient(top, #1c97c2, #1b8db3);
  background-image: -moz-linear-gradient(top, #1c97c2, #1b8db3);
  background-image: -ms-linear-gradient(top, #1c97c2, #1b8db3);
  background-image: -o-linear-gradient(top, #1c97c2, #1b8db3);
  background-image: linear-gradient(to bottom, #1c97c2, #1b8db3);
  text-decoration: none; }

.button-main.active, .button-main:active {
  background: #0f5871;
  color: #ffffff; }

.button-hilite {
  background: rgba(29, 233, 182, 0.48);
  border: solid #00debd 1px;
  white-space: nowrap; }

.button-hilite:hover {
  background: #1de9b6;
  background-image: -webkit-linear-gradient(top, rgba(29, 233, 182, 0.48), rgba(0, 191, 165, 0.48));
  background-image: -moz-linear-gradient(top, rgba(29, 233, 182, 0.48), rgba(0, 191, 165, 0.48));
  background-image: -ms-linear-gradient(top, rgba(29, 233, 182, 0.48), rgba(0, 191, 165, 0.48));
  background-image: -o-linear-gradient(top, rgba(29, 233, 182, 0.48), rgba(0, 191, 165, 0.48));
  background-image: linear-gradient(to bottom, rgba(29, 233, 182, 0.48), rgba(0, 191, 165, 0.48));
  text-decoration: none; }

.device-page .device-nav {
  padding: 0; }
  .device-page .device-nav.btn-group-justified > .btn-group .btn {
    width: 95%; }
  .device-page .device-nav .btn {
    margin: 0 5px; }

.close-button button {
  border: none;
  background: transparent; }

/* UI Switch ------------------------*/
.switch.checked {
  background: rgba(29, 233, 182, 0.99);
  border-color: rgba(29, 233, 182, 0.99); }

/* Alerts ------------------------*/
.alert-absolute {
  position: fixed;
  bottom: 0px;
  left: 5vw;
  width: 90vw;
  z-index: 500000; }

/* Logo styles */
.logo {
  display: block;
  text-indent: -2000em;
  margin: 0 auto;
  padding: 0;
  height: 120px;
  width: 329px;
  background: url(../images/generac-logo-light-large.png) no-repeat 0 0;
  background-image: url(../images/generac-logo-light-large.png), none;
  background-size: 350px auto;
  background-position: 0 0; }

@media only screen and (max-width: 600px) {
  .logo {
    width: 300px;
    background-size: 300px auto; } }
/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5; }

/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px; }

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5; }

/* NAV BAR------------------------------------------------------------------------------------------------------------- */
.nav-pic {
  margin: -2px 5px 0 0;
  max-height: 20px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px; }

/* drop down*/
select.my_dropdown {
  width: 10px; }

/* Bootstrap Pills Element overrides ---------------------- */
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
  color: #fff;
  background-color: #1c97c2; }

/* bootstrap tablet breakpoint */
@media (max-width: 767px) {
  .nav-justified > li {
    float: left; }
    .nav-justified > li a {
      padding: 5px 10px; }
      .nav-justified > li a h4 {
        font-size: 12px; } }
/* Dots navigation element */
.status-buttons {
  margin: 0 auto;
  padding: 0; }
  .status-buttons li {
    list-style: none;
    display: inline-block; }
    .status-buttons li span {
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: inline-block;
      background: #eee;
      text-indent: -2000em;
      margin: 0 .3em; }
    .status-buttons li.active span {
      background: #1c97c2; }

/* DEVICE VIEW --------------------------------------------------------------------------------------------------------*/
.device-page .error.glyphicon {
  color: #d9534f;
  margin-left: .2em; }

.device {
  background: #f4f4f4;
  padding: 15px 0;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.device-title {
  font-family: open_sansregular, "helvetica nueue", helvetica, sans-serif; }

#deviceview-panel-heading {
  cursor: default; }

.device-tank {
  text-align: center; }
  .device-tank .device-link {
    position: relative;
    display: block; }
    .device-tank .device-link:hover {
      text-decoration: none; }
  .device-tank .img-responsive {
    display: inline-block; }
  .device-tank .sub-text {
    color: #666;
    font-size: 11px;
    line-height: 12px;
    padding: 1em;
    text-align: center;
    display: block; }
    .device-tank .sub-text i {
      display: block;
      margin-bottom: 5px;
      font-size: 16px; }

.consumption-group {
  padding-top: 10px; }

.device-percent {
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 1%;
  display: block;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  display: block;
  width: 100%; }

.panel-group .panel-heading {
  cursor: pointer; }
  .panel-group .panel-heading:hover {
    background: rgba(28, 151, 194, 0.1); }

.panel-body {
  padding: 5px; }

.info {
  font-weight: bolder;
  font-size: 16px; }
  .info .url {
    font-weight: normal;
    color: #999;
    font-size: 13px;
    margin-left: 5px; }

.readings-table {
  border-collapse: collapse;
  padding: 5px; }
  .readings-table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px; }
  .readings-table tr:nth-child(odd) {
    background-color: #7CB5EC; }
  .readings-table tr:nth-child(even) {
    background-color: #ffffff; }

/* order propane tab - device.scss */
.summary-section {
  background: #fff;
  position: relative;
  padding: 0;
  margin: 0 0 2em;
  text-align: center;
  /* creates zig-zag bottom border, parent needs padding and position:relative

  &:after {
    background: linear-gradient(-45deg, #ffffff 8px, transparent 0), linear-gradient(45deg, #ffffff 8px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 16px 16px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 16px;
  }*/ }
  @media (max-width: 450px) {
    .summary-section {
      margin: 0 -20px 1em; } }

.detail-section {
  padding: .5em 0;
  background: #f7f7f7;
  margin: 1em 0; }

.block-header {
  display: block;
  padding: .5em 0;
  text-transform: uppercase;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
  color: #1c97c2;
  margin: .5em 0;
  text-align: left; }

.primary-header {
  color: #1c97c2;
  font-size: 18px; }

.icon-circle {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  padding: .2em .3em;
  display: block;
  margin: 0 auto;
  background: #02bcb5;
  color: #fff;
  line-height: 40px;
  font-size: 30px; }

.supplier-info {
  text-align: center; }
  .supplier-info .supplier-logo {
    max-width: 200px;
    margin: 0 auto; }
  .supplier-info .supplier-phone {
    display: block; }

.order-section {
  border-bottom: 1px solid #f5f5f5; }
  .order-section label {
    font-size: 1.1em;
    font-weight: normal; }

.fees-section {
  color: #777;
  font-size: .9em;
  border-bottom: 1px solid #f5f5f5; }

.total-section .col-xs-7:nth-child(1) {
  line-height: 35px;
  font-size: 1.1em; }
.total-section .text-large {
  font-size: 21px; }
  @media (max-width: 450px) {
    .total-section .text-large {
      font-size: 18px; } }

.order-form.disabled {
  color: #999 !important;
  opacity: .6; }
@media (min-width: 450px) {
  .order-form {
    max-width: 80%;
    margin: 0 auto; } }
.order-form .row {
  padding: .5em 0;
  vertical-align: center; }
.order-form .right-col {
  text-align: right; }
.order-form .help-block {
  clear: both;
  color: #a94442;
  font-size: .9em; }
.order-form .inline-input {
  text-align: right;
  max-width: 100px;
  float: right;
  padding-right: 0; }
.order-form .button-main {
  margin: 1em auto;
  float: left; }
  @media (max-width: 450px) {
    .order-form .button-main {
      display: block;
      width: 50%;
      float: none; } }
.order-form a.text-link {
  line-height: 34px;
  margin: 1em 0;
  float: right; }
  @media (max-width: 450px) {
    .order-form a.text-link {
      display: block;
      width: 100%;
      text-align: center;
      margin: 0 auto;
      float: none;
      font-size: .9em; } }

/* move these styles to more generic location */
.flex-container {
  /*display: -webkit-flex;
  display: flex;
  align-items: stretch;*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  .flex-container .flex-box {
    margin: 1em 1em 1em 0;
    flex: 1; }
  @media (max-width: 767px) {
    .flex-container {
      display: block; } }

.group-list {
  margin: 1em 0;
  background: #f2f2f2;
  border-radius: .2em;
  padding: .5em; }
  .group-list .labels {
    color: #999; }
  .group-list h4 {
    font-size: 1em;
    color: #999;
    font-style: italic; }
  .group-list .supplier-logo {
    max-width: 75px; }
    @media (max-width: 767px) {
      .group-list .supplier-logo {
        max-width: 50px; } }
  .group-list .link {
    color: #1c97c2;
    cursor: pointer;
    line-height: 50px; }
    .group-list .link .glyphicon {
      font-size: .9em;
      margin-right: .2em; }
      @media (min-width: 768px) {
        .group-list .link .glyphicon {
          position: relative;
          top: 50%; } }
    @media (max-width: 767px) {
      .group-list .link {
        margin-top: 1em;
        line-height: 20px; } }
  .group-list .accordion {
    /* animated visibility */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    height: 0px; }
    .group-list .accordion .accordion-container {
      display: none; }
    .group-list .accordion.visible {
      display: block;
      visibility: visible;
      opacity: 1;
      height: auto; }
      .group-list .accordion.visible .accordion-container {
        margin: 1em;
        padding: .5em;
        background: #f9f9f9;
        display: block; }
    @media (max-width: 767px) {
      .group-list .accordion.visible .accordion-container {
        margin: 1em .2em; }
      .group-list .accordion .row.total {
        margin: -1px; }
        .group-list .accordion .row.total .col-xs-6 {
          padding-left: 0;
          padding-right: 0; } }
    .group-list .accordion .block-header {
      border-color: #ccc;
      text-align: center; }
    .group-list .accordion .right-col {
      text-align: right; }
    .group-list .accordion .sub-text {
      font-style: italic;
      text-align: center;
      color: #999; }

.header-box {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 3px; }
  .header-box h2 {
    display: block;
    background: #f9f9f9;
    color: #999;
    font-size: 1em;
    margin: -10px -10px 10px;
    padding: .5em;
    text-align: left;
    text-transform: uppercase; }
    .header-box h2 i {
      color: #02bcb5;
      margin: 0 0 .5em; }

.img-circle {
  width: 150px;
  height: 150px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  background-repeat: no-repeat;
  background-size: 140px;
  border: 1px solid #eee;
  background-position: center;
  margin: 0 auto; }

/* PROFILE PAGE */
.profile-view .flex-container:nth-child(1) .flex-box {
  flex-basis: 33%; }
.profile-view .flex-container:nth-child(2) .flex-box {
  flex-basis: 100%; }
.profile-view label {
  color: #999; }
.profile-view .supplier-info {
  text-align: left; }
  .profile-view .supplier-info .supplier-logo {
    max-width: 100px;
    display: block;
    margin: 0 auto 1em; }
  .profile-view .supplier-info .glyphicon {
    color: #999;
    margin-right: .2em; }
  .profile-view .supplier-info h2 .glyphicon {
    color: #02bcb5; }
.profile-view .supplier-name {
  margin: 0; }

.nav-tabs {
  margin-top: 30px; }

.auth-forms {
  max-width: 450px;
  margin: 0 auto;
  background: #fff; }

.cmt-form {
  margin-top: 30px; }

.cmt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ccc; }

.cmt .author {
  font-size: 11px;
  color: #bbb; }

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 992px) {
  .container {
    max-width: 730px; }

  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0; }

  /* Space out the masthead */
  .header {
    margin-bottom: 30px; }

  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0; }

  .device-percent {
    left: 2%;
    font-size: 10px; } }
/* Responsive: landscape mobile and below; */
@media (max-width: 450px) {
  body {
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  .auth-forms .logo-full {
    display: block;
    margin: 0 auto;
    width: 90%; }

  /* hide some items for mobile */ }
/* SETUP FLOW --------------------------------------------------------------------------------------------------------*/
.setup-wrapper.modal {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4); }
.setup-wrapper .setup-modal {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #eee;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); }
.setup-wrapper .setup-content {
  padding: 1em;
  overflow: hidden; }
.setup-wrapper img {
  display: block;
  max-width: 100%;
  margin: 1em auto; }
.setup-wrapper .close-button {
  position: absolute;
  top: .2em;
  right: 0em;
  font-size: 1.3em;
  color: #666; }
.setup-wrapper .button-hilite {
  clear: both;
  display: block;
  float: right; }
  .setup-wrapper .button-hilite:after {
    content: "";
    display: table;
    clear: both; }
.setup-wrapper .help-block {
  font-style: italic;
  font-size: .9em; }
.setup-wrapper .fuel-type .btn.btn-default.active {
  background-color: #1c97c2;
  color: #fff; }
.setup-wrapper .orientation {
  margin: 1em 0; }
  .setup-wrapper .orientation label {
    display: inline-block;
    width: 238px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    vertical-align: bottom;
    margin: 0 2em 0 0;
    background: url(../images/tank-horz.png) no-repeat center;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.6;
    color: #333; }
    .setup-wrapper .orientation label.vertical {
      width: 82px;
      height: 150px;
      line-height: 150px;
      background: url(../images/tank-vert.png) no-repeat center; }
    .setup-wrapper .orientation label.active {
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
      opacity: 1;
      color: #fff; }
    @media (max-width: 767px) {
      .setup-wrapper .orientation label {
        width: 150px;
        height: 70px;
        line-height: 70px;
        background-size: 150px auto;
        font-size: .9em; }
        .setup-wrapper .orientation label.vertical {
          width: 50px;
          height: 100px;
          line-height: 100px;
          background-size: 50px auto; } }
@media only screen and (max-width: 667px) {
  .setup-wrapper .setup-modal {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none; }
  .setup-wrapper .close-button {
    right: .4em; } }

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