/*
Site Name: GCI Usage Estimator
Author: Gere Donovan
Stylesheet: Fixed CSS
*/
.cf:before, .cf:after {
  content: '';
  display: table;
  clear: both; }

/* ==== BASE LAYOUT ============================================= */
.bb-calculator-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
  position: relative;
  margin-bottom: 100px;
  /* Misc visuals
----------------------------------*/
  /* Corner radius */
  /*
 * jQuery UI Slider 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */ }
  .bb-calculator-container .ui-corner-all, .bb-calculator-container .ui-corner-top, .bb-calculator-container .ui-corner-left, .bb-calculator-container .ui-corner-tl {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px; }
  .bb-calculator-container .ui-corner-all, .bb-calculator-container .ui-corner-top, .bb-calculator-container .ui-corner-right, .bb-calculator-container .ui-corner-tr {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px; }
  .bb-calculator-container .ui-corner-all, .bb-calculator-container .ui-corner-bottom, .bb-calculator-container .ui-corner-left, .bb-calculator-container .ui-corner-bl {
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .bb-calculator-container .ui-corner-all, .bb-calculator-container .ui-corner-bottom, .bb-calculator-container .ui-corner-right, .bb-calculator-container .ui-corner-br {
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px; }
  .bb-calculator-container .ui-slider {
    position: relative;
    text-align: left;
    background: #838688;
    border: none;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    display: inline-block;
    *display: inline !important;
    *zoom: 1; }
  .bb-calculator-container .ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 17px;
    height: 21px;
    cursor: default;
    background: url(../images/slider_handles.png) 0 0 no-repeat;
    outline: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none; }
  .bb-calculator-container .ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background: #14a4ff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
  .bb-calculator-container .ui-slider .ui-slider-handle.ui-state-active {
    background-position: -17px 0; }
  .bb-calculator-container .ui-slider-horizontal {
    height: 6px; }
  .bb-calculator-container .ui-slider-horizontal .ui-slider-handle {
    top: -5px;
    margin-left: -.6em; }
  .bb-calculator-container .ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%; }
  .bb-calculator-container .ui-slider-horizontal .ui-slider-range-min {
    left: 0; }
  .bb-calculator-container .ui-slider-horizontal .ui-slider-range-max {
    right: 0; }
  .bb-calculator-container .ui-slider-vertical {
    width: .8em;
    height: 100px; }
  .bb-calculator-container .ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em; }
  .bb-calculator-container .ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%; }
  .bb-calculator-container .ui-slider-vertical .ui-slider-range-min {
    bottom: 0; }
  .bb-calculator-container .ui-slider-vertical .ui-slider-range-max {
    top: 0; }

.bb-calculator-title {
  font-size: 50px;
  text-transform: none;
  font-weight: bold;
  font-style: italic;
  color: inherit; }

.bb-calculator-subtitle {
  text-transform: none;
  font-size: 21px;
  font-weight: normal;
  color: inherit;
  font-style: normal;
  margin-top: 0; }

.bb-calculator {
  margin-top: 30px;
  display: table;
  width: 100%;
  table-layout: fixed; }
  .bb-calculator:before, .bb-calculator:after {
    display: none; }
  .bb-calculator .usage-container,
  .bb-calculator .package-container {
    display: table-cell; }
  .bb-calculator .package-container {
    width: 380px;
    text-align: center;
    padding-bottom: 20px; }
    .bb-calculator .package-container .inner-container > * + * {
      margin-top: 40px; }

.usage-container {
  padding-right: 20px; }
  .usage-container .inner-container {
    padding-right: 170px;
    position: relative; }
  .usage-container .meter-container {
    width: 150px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center; }

/* UI ELEMENTS
------------------------------------------------- */
.usage-container .fine-print {
  margin-top: 40px;
  font-size: 12px;
  line-height: 15px; }

.meter-container {
  height: 100%;
  padding-bottom: 70px; }
  .meter-container .meter-wrapper {
    width: 100%;
    height: 100%; }
  .meter-container .meter {
    overflow: hidden;
    width: 66px;
    border-radius: 33px;
    height: 100%;
    border: 1px solid #e0e0e0;
    margin: auto;
    z-index: 3;
    /* background:$white url(../images/stripes.png);*/
    position: relative;
    /* Fixes overflow:hidden being ignored in IE7 */ }
    .meter-container .meter .fill {
      background-color: var(--wp--preset--color--green);
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1a8da9+0,7fc6d4+100 */
      background: -webkit-linear-gradient(135deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
      background: -moz-linear-gradient(135deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
      background: -o-linear-gradient(135deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
      background: linear-gradient(135deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
      display: block;
      height: 130%;
      position: relative;
      top: 100%;
      margin-top: -30px;
      z-index: 1;
      width: 100%; }
  .meter-container .estimated-usage {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    width: 100%;
    text-align: center; }
    .meter-container .estimated-usage .total-gigs {
      font-weight: bold; }
    .meter-container .estimated-usage .usage-label {
      display: block;
      font-size: 10px;
      line-height: 1.25em; }
  .meter-container.meter-container-fixed {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    padding-bottom: 60px;
    padding-top: 30px;
    width: 80px;
    box-sizing: border-box; }
    .meter-container.meter-container-fixed .meter {
      width: 20px; }
      .meter-container.meter-container-fixed .meter .fill {
        margin-top: -10px; }
    .meter-container.meter-container-fixed .estimated-usage {
      display: block; }

.estimated-usage .label {
  font-size: 22px;
  font-weight: bold;
  color: inherit;
  font-style: italic;
  float: left;
  text-align: left;
  line-height: 26px; }

.estimated-usage .value {
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  float: right;
  padding-left: 10px;
  line-height: 26px; }
  .estimated-usage .value .total-gigs {
    font-size: 30px; }

#resetButton {
  display: block;
  padding-left: 15px;
  padding-right: 15px;
  font-weight: normal;
  cursor: pointer;
  font-size: 15px; }

/* Sliders
--------------------------- */
.slider-item-title {
  padding: 0;
  margin-bottom: 7px;
  position: relative;
  color: inherit;
  text-transform: none;
  padding-right: 55px; }
  .slider-item-title > .item-title {
    font-size: 22px;
    display: inline-block; }
  .slider-item-title > .item-subtitle {
    font-size: 14px;
    display: inline-block; }

.usage-container {
  clear: left; }

.usage-container .slider-item {
  margin-bottom: 30px;
  position: relative;
  padding-right: 85px;
  width: 100%; }
  .usage-container .slider-item:before, .usage-container .slider-item:after {
    content: " ";
    display: table; }
  .usage-container .slider-item:after {
    clear: both; }
  .usage-container .slider-item .slider {
    width: 100%; }

.slider-item .slider-container {
  height: 18px;
  background: none;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding-left: 10px;
  background: #b9bbbd;
  margin-bottom: 7px;
  cursor: pointer;
  overflow: visible; }

.slider-item .ui-slider .ui-slider-handle {
  cursor: pointer;
  top: 0;
  background: #b9bbbd;
  border: 1px solid #909295;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -4px;
  transition: .3s ease background; }

.slider-item .ui-slider .ui-slider-range {
  background: #b9bbbd;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  box-shadow: none;
  transform: translateX(-1px); }

.slider-item .ui-slider .ui-toggle-switch .ui-slider .ui-slider-range {
  background: var(--wp--preset--color--green); }

.slider-item .ui-slider .ui-slider-handle.ui-state-active {
  background-position: 0 !important; }

.slider-item .ui-slider.ui-slider-horizontal {
  height: 16px;
  background: #fff;
  box-shadow: none;
  border: none;
  border-left: 0px solid var(--wp--preset--color--green);
  border-radius: 10px;
  transition: .3s ease all;
  padding-left: 10px; }

.slider-item .ticker {
  background: #b9bbbd;
  display: inline-block;
  padding: 0px 5px 3px;
  transition: .3s ease background-color;
  vertical-align: middle; }
  .slider-item .ticker .inc {
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 0;
    color: #efefef;
    border-radius: 50%;
    border: 1px solid #efefef;
    width: 12px;
    height: 12px;
    line-height: 10px;
    text-align: center;
    background: none; }
    .slider-item .ticker .inc:focus {
      outline: 2px solid var(--wp--preset--color--dark-gray);
      outline-offset: 2px; }
    .slider-item .ticker .inc:hover, .slider-item .ticker .inc:focus {
      background: var(--wp--preset--color--dark-gray);
      color: #fff;
      border-color: var(--wp--preset--color--dark-gray); }
  .slider-item .ticker .calc {
    width: 30px;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    line-height: 14px;
    top: 2px;
    position: relative; }

.slider-item .definition-selector {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 60px;
  margin-right: 85px;
  font-size: 12px; }
  .slider-item .definition-selector > span {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer; }
    .slider-item .definition-selector > span + span {
      border-left: 1px solid #ccc; }
    .slider-item .definition-selector > span.active {
      color: var(--wp--preset--color--green);
      font-weight: bold; }

.slider-item .help-text {
  color: var(--wp--preset--color--green);
  font-style: italic;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  margin-right: 0;
  padding-left: 80px;
  white-space: normal;
  transition: .3s ease all;
  pointer-events: none;
  opacity: 0;
  margin-top: 16px;
  text-align: right;
  line-height: 1.125em;
  transform: translateX(-5px);
  font-size: 12px; }
  .slider-item .help-text .short {
    display: none; }

.slider-item.show-help-text .slider-container {
  border-color: var(--wp--preset--color--green); }

.slider-item.show-help-text .ui-slider .ui-slider-handle {
  background: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green); }

.slider-item.show-help-text .ui-slider.ui-slider-horizontal {
  border-color: var(--wp--preset--color--green); }

.slider-item.show-help-text .help-text {
  opacity: 1;
  transform: translateX(0px); }

.slider-item.show-help-text .ticker {
  background: var(--wp--preset--color--green); }

.slider-item .number-of-devices {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 26px; }
  .slider-item .number-of-devices select {
    position: relative;
    min-width: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: var(--wp--preset--color--dark-green);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7fc6d4+0,1a8da9+100 */
    background: -webkit-linear-gradient(90deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
    background: -moz-linear-gradient(90deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
    background: -o-linear-gradient(90deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
    background: linear-gradient(90deg, var(--wp--preset--color--green), var(--wp--preset--color--dark-green));
    color: #fff;
    width: 100%;
    border: none;
    height: 30px;
    line-height: 30px;
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px; }
    .slider-item .number-of-devices select::-ms-expand {
      display: none; }
    .slider-item .number-of-devices select option {
      color: var(--wp--preset--color--green); }
    .slider-item .number-of-devices select:focus {
      outline: 1px dotted var(--wp--preset--color--gray);
      outline-offset: 2px; }
  .slider-item .number-of-devices:after {
    content: '';
    width: 20px;
    height: 30px;
    background: url(./images/select-arrows.png) center center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none; }

.slider-item.selected .slider-item-title > .item-title,
.slider-item.selected .slider-item-title > .item-subtitle {
  color: #85888c; }

.slider-item.selected .slider-container {
  background-color: var(--wp--preset--color--green); }

.slider-item.selected .ui-slider .ui-slider-range {
  background: var(--wp--preset--color--green); }

.slider-item.selected .ui-slider .ui-slider-handle {
  border: 2px solid var(--wp--preset--color--green); }
  .slider-item.selected .ui-slider .ui-slider-handle.ui-state-focus {
    outline: 1px dotted var(--wp--preset--color--dark-gray);
    outline-offset: 2px; }

.slider-item.selected .ticker {
  background: var(--wp--preset--color--dark-gray); }
  .slider-item.selected .ticker .inc:focus {
    outline: 1px dotted #fff; }
  .slider-item.selected .ticker .inc:hover, .slider-item.selected .ticker .inc:focus {
    background: var(--wp--preset--color--green);
    border-color: var(--wp--preset--color--green);
    color: #fff; }

.slider-item .ui-slider .ui-slider-handle.ui-state-focus {
  outline: 1px dotted var(--wp--preset--color--dark-gray);
  outline-offset: 2px; }

.number-devices-label {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: -2em;
  font-size: 10px;
  color: #666;
  width: 44px;
  text-align: center; }

.suggested-plans {
  padding-left: 0 !important;
  margin-left: 0 !important; }
  .suggested-plans .suggested-plan {
    margin-left: 0 !important;
    background: var(--wp--preset--color--green);
    color: #fff;
    display: none;
    padding: 30px;
    text-align: left; }
    .suggested-plans .suggested-plan:before {
      display: none !important; }
    .suggested-plans .suggested-plan .recommended-heading {
      color: inherit;
      font-size: 22px;
      text-transform: none;
      font-style: normal; }
    .suggested-plans .suggested-plan .plan-title {
      font-style: normal;
      color: inherit;
      text-transform: none;
      margin-top: .25em;
      font-size: 40px; }
    .suggested-plans .suggested-plan .plan-description {
      color: inherit; }
    .suggested-plans .suggested-plan.suggested {
      display: none; }

.legend {
  margin-bottom: 2em;
  overflow: hidden;
  padding: 0;
  text-align: left;
  border: 4px solid #efeff0;
  padding: 30px;
  margin-top: 40px; }
  .legend ul {
    list-style: none;
    padding: 0;
    margin-left: 0; }
    .legend ul > li {
      margin-left: 0; }
      .legend ul > li:before {
        display: none; }
      .legend ul > li + li {
        margin-top: 1em; }
  .legend .legend-item {
    font-size: 13px; }
    .legend .legend-item > .title {
      font-weight: bold;
      font-style: italic; }
    .legend .legend-item > .description:before {
      content: '- '; }
    .legend .legend-item > .size {
      font-weight: bold;
      float: right; }
    .legend .legend-item:after {
      display: table;
      clear: both;
      content: ''; }

/* Misc.
--------------------------- */
.action {
  text-align: center; }

.clickable {
  cursor: pointer; }

@media screen and (max-width: 1080px) {
  .usage-container .inner-container {
    padding-right: 100px; }
  .usage-container .meter-container {
    width: 80px; }
  .meter-container .meter {
    width: 40px;
    border-radius: 20px; }
  .suggested-plans .suggested-plan .recommended-heading {
    font-size: 13px; }
  .suggested-plans .suggested-plan .plan-title {
    font-size: 24px; }
  .bb-calculator .package-container {
    width: 240px; }
  .estimated-usage .label {
    padding-top: 3px;
    font-size: 16px; }
  .estimated-usage .total-gigs {
    font-size: 20px; }
  .estimated-usage .value {
    font-size: 12px; } }

@media screen and (max-width: 860px) {
  .slider-item .slider-item-title {
    padding-right: 0;
    margin-right: -90px; }
  .slider-item .definition-selector {
    margin-bottom: 0; }
  .slider-item .number-of-devices {
    margin-bottom: 14px; }
  .slider-item .help-text {
    font-size: 11px;
    top: 0;
    margin-top: 0;
    line-height: 16px;
    padding-left: 10px;
    padding-right: 10px; } }

@media screen and (max-width: 767px) {
  .bb-calculator .usage-container,
  .bb-calculator .package-container {
    display: block;
    width: auto;
    margin-right: 100px; }
  .bb-calculator .usage-container {
    margin-bottom: 80px;
    padding-right: 0; }
    .bb-calculator .usage-container .inner-container {
      padding-right: 0; }
  .bb-calculator .package-container .estimated-usage {
    display: none; }
  .meter-container.meter-container-static {
    display: none; }
  .meter-container.meter-container-fixed {
    display: block; }
  .mobile-devices-label {
    display: block; }
  h3.result {
    font-size: 18px; } }

@media screen and (max-width: 660px) {
  .usage-container .slider-item {
    padding-right: 70px; }
  #resetButton {
    font-size: 12px; } }

@media screen and (max-width: 630px) {
  .bb-calculator .usage-container .meter-container {
    width: 70px;
    padding-left: 30px; }
  .number-of-devices-label {
    margin-top: -20px; }
  .bb-calculator {
    display: block; } }

@media screen and (max-width: 480px) {
  .slider-item .help-text .short {
    display: inline; }
  .slider-item .help-text .long {
    display: none; }
  .slider-item-title > .item-title {
    font-size: 18px; }
  .slider-item-title > .item-subtitle {
    font-size: 12px; }
  .suggested-plans .suggested-plan .recommended-heading {
    font-size: 12px; }
  .bb-calculator .usage-container,
  .bb-calculator .package-container {
    margin-right: 60px; }
  .meter-container.meter-container-fixed {
    width: 50px; } }

@media screen and (max-width: 400px) {
  .usage-container .slider-item .definition-selector {
    margin-right: 65px; }
  .suggested-plans .suggested-plan,
  .legend {
    padding: 20px 15px; } }