/*
Theme Name: Biomethane, LLC
Theme URI: https://vexingmedia.com
Version: 1.0
Description: Website theme designed by Vexing Media for Biomethane, LLC
Author: Vexing Media
Author URI: https://vexingmedia.com
template: bb-theme
*/

.slidecontainer {
    width: 100%;
    color: #00140d;
    text-align: center;
    font-size: medium
  
  }
  
  .slider {
    -webkit-appearance: button;
    width: 50%;
    height: 10px;
    background: #959595;
    outline:#023824;
    opacity: 0.66;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 15px;
    background: #91aaa1;
    cursor: pointer;
    }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #9fb49a;
    cursor: pointer;
  }
  .enMoney::before {
      content:"$";
  }
  
  .Num1 {
      position: relative;
      left: 0px;
  }
  .txt1 {
      position: relative;
      left: 100px;
  }
  .Num2 {
      position: relative;
      left: 200px;
  }
  .txt2 {
      position: relative;
      left: 250px;
  }
  .tab2 {
      display: inline-block;
      margin-left: 40px;
  }

  p{
    /*background-color: #56796c36;
    font-family: sans-serif;*/
  }

  .text{
    text-align: center;
    font-family: sans-serif;
    font-size: medium;
  }

  .outputs{
    text-align: center;
    font-family: sans-serif;
    font-size: medium;
    margin-bottom: 10%;
    margin-top: 8%;
    line-height: 190%;
    }

    #annual-savings, #payback-period{
        margin-top: 5%;
        margin-bottom: 5%;
        padding:2rem;
        background-color: #3f7e9f;
        color:#fff !important;
        border-radius: 1rem;
    }

#annual-savings h3, #payback-period h3{
	font-size:2.3rem;
	color:#fff;
}

    #annual-savings .value-text{
        font-size:2rem;
    }

    #payback-period .value-text{
        font-size:1.5rem;
    }

    .value-text{
        min-height:100px;
    }


/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 15rem;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: #da8f3f;
    height: 2rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: #da8f3f;
    height: 2rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }