.roi-calc-section
  background-color: #F8F8F8
  input[type=range] 
    height: 25px 
    -webkit-appearance: none 
    margin: 10px 0 
    width: 100% 
    background-color: transparent 
  input[type=range]:focus 
    outline: none 
    &::-webkit-slider-runnable-track 
      background: #64a944 
  input[type=range]::-webkit-slider-runnable-track 
    width: 100% 
    height: 3px 
    cursor: pointer 
    animate: 0.2s 
    box-shadow: 0px 0px 0px #000000 
    background: #64a944 
    border-radius: 1px 
    border: 0px solid #000000 
  input[type=range]::-webkit-slider-thumb 
    box-shadow: 0px 4px 15px rgba(0,0,0,.6) 
    border: 1px solid #64a944 
    height: 20px 
    width: 20px 
    border-radius: 50% 
    background: #64a944 
    cursor: pointer 
    -webkit-appearance: none 
    margin-top: -9px 
  input[type=range]::-moz-range-track 
    width: 100% 
    height: 4px 
    cursor: pointer 
    animate: 0.2s 
    box-shadow: 0px 0px 0px #000000 
    background: #DEDEDE 
    border-radius: 1px 
    border: 0px solid #000000 
  input[type=range]::-moz-range-thumb 
    box-shadow: 0px 0px 0px #000000 
    border: 1px solid #64a944 
    height: 30px 
    width: 30px 
    border-radius: 25px 
    background: #64a944 
    cursor: pointer 
  input[type=range]::-ms-track 
    width: 100% 
    height: 5px 
    cursor: pointer 
    animate: 0.2s 
    background: #DEDEDE 
    border-color: transparent 
    color: transparent 
  input[type=range]::-ms-thumb 
    margin-top: 1px 
    box-shadow: 0px 0px 0px #000000 
    border: 1px solid #64a944 
    height: 18px 
    width: 18px 
    border-radius: 25px 
    background: #64a944 
    cursor: pointer 
  input[type="range"]::-moz-range-progress 
    background-color: green 
  input[type="range"]::-ms-fill-lower 
    background-color: green 
  input[type="range"]::-ms-fill-upper 
    background-color: green 
  .ro_wrap 
    display: table 
  .ro_left 
    background-color: #f7f7f7!important 
    overflow-x: hidden 
    display: table-cell 
    padding: 40px 60px 
    & > .row 
      margin-bottom: 30px 
    #slidedata 
      padding: 5px 2px 0px 
      border-bottom: 3px solid #64a944 
      font-size: 13px 
      display: inline-block 
      width: 100% 
      outline: none 
      margin-top: -10px 
      color: #000000 
  .ro_right 
    background-color: #5f636a 
    display: table-cell 
    padding: 25px 
    color: #EFEFF0 
    .header_data 
      padding: 20px 15px 
      background: hsla(0,0%,100%,.1) 
      border-radius: 6px 
      border-bottom: none 
      font-weight: 600 
      border-radius: 5px 
    .header_subdata 
      font-weight: 600 
      font-size: 22px 
      margin-top: 30px 
    .row 
      margin-bottom: 15px 
      padding-left: 15px 
    div 
      font-size: 18px 
    .col-4 
      text-align: right 
    small 
      font-size: 12px 
      display: block 
      line-height: 1.1 
  .ro_right_footer 
    text-align: center 
    margin-top: 30px 
    a 
      border: none 
      font-size: 14px 
      text-align: center 
      padding: 12px 55px 
      background-color: #fff 
      color: #000000 !important 
      margin-top: 20px 
      display: inline-block 
      border-radius: 5px 
  .RO_input 
    background-color: transparent !important 
    padding: 8px 2px 
    border: none 
    border-bottom: 2px solid #64a944 
    outline: none 
    width: 100% 
    color: #000000 
  .custom_scrollbar 
    float: left 
    max-height: calc(100vh - 250px) 
    width: 100% 
    overflow-y: auto 
    margin-bottom: 25px 
    overflow-x: hidden 
  .force-overflow 
    min-height: 450px 
    padding-right: 20px 
  #style-2 
    &::-webkit-scrollbar-track 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) 
      background-color: #F5F5F5 
    &::-webkit-scrollbar 
      width: 6px 
      background-color: #F5F5F5 
    &::-webkit-scrollbar-thumb 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) 
      background-color: #64a944 
  #messageData 
    font-size: 10px 
    color: #D62929 
  .w-90 
    width: 70% 

.price-brackets
  margin: 30px auto 40px auto
  border-radius: 4px
  position: relative
  
  @include phone
    width: 250px
    
  @include tablet
    width: 752px
    border: 1px solid #e5e5e5

.price-bracket-most-popular
  position: absolute
  top: -17px
  width: 252px
  border: 1px solid #D5D5D5
  left: 249px
  background: #fff
  text-align: center
  border-top-left-radius: 4px
  border-top-right-radius: 4px
  text-transform: uppercase
  font-family: $mont-light
  padding: 5px 0
  z-index: 2
  
  @include phone
    display: none
    
  @include tablet
    display: block

.price-bracket-support
  padding-left: 15px
  margin-bottom: 15px
  font-family: $mont-light

.price-bracket
  width: 250px
  
  @include phone
    margin: 0 auto
    float: none
    margin-bottom: 30px
    border: 1px solid #e5e5e5
    
  @include tablet
    float: left
    margin-bottom: 0
    border: 1px solid transparent
  
  &.price-bracket-popular
    box-shadow: 0 0 30px rgba(0,0,0,0.25)
    position: relative
    z-index: 1
    
  ul
    padding: 0 15px
      
    li
      padding: 6px 0
      border-bottom: 1px solid #e5e5e5
      position: relative
      font-family: $mont-light

      &.strike
        text-decoration: line-through
        color: #999
        font-weight: 300

        span
          display: none

      &.active

        span
          display: inline

  h5.text-light
    margin-bottom: 0  
        
  span
    color: #47a447
    font-weight: bold

  .price-bracket-heading
    padding: 20px
    background: #f9fafa
    text-align: center
    border-bottom: 1px solid #e5e5e5
    min-height: 170px

    h3
      color: #999
      margin-top: 15px

    h4
      font-size: 2em
      margin-top: 0
      margin-bottom: 25px
      font-weight: bold

      em, 
      span
        color: #999
        font-size: 14px
        display: block  
        
      em
        margin-bottom: 20px



