.pembungkus_frange{
/*        border: 1px solid white;*/
        margin-top: 15px;

      }
      .grup_frange{
        text-align: left;
        margin-top: 15px;
      }
      .grup_frange span{
        font-size: 12px;
        background: white;
        border-radius: 5px;
        padding: 5px;
        margin: 10px;
      }
      .slider{
        text-align: left;
        background: white;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      }
      .output,.Oxygenoutput,.Tempoutput,.Turboutput {
        position: relative;
        width: 30px;
        height: 30px;
        padding-top: 10px;
        margin-left: 0%;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        line-height: 7px;
        color: rgb(179 31 47);
        text-align: center;
        background: #F5F9FF;
        border: 2px solid rgb(179 31 47);
        border-radius: 50% 50% 50% 0%;
        -webkit-transition: opacity 0.3s ease-in-out 0s;
        transition: opacity 0.3s ease-in-out 0s;
      }

      #range,#Oxygenrange,#Temprange,#Turbrange {
        --active: #009688;
        --value: #2a2a2a;
        --line: #b31f2f;
        touch-action: none;
        -webkit-appearance: none;
        appearance: none;
        user-select: none;
        width: 320px;
        height: 7px;
        border-radius: 5px;
        background: var(--line);
        position: relative;
      }
      #range::-webkit-slider-thumb,
      #Oxygenrange::-webkit-slider-thumb,
      #Temprange::-webkit-slider-thumb,
      #Turbrange::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: #F5F9FF;
        border: 2px solid rgb(179 31 47);
        cursor: pointer;
        border-radius: 18px;
        transition: 0.5s ease;
      }
      #range::-webkit-slider-thumb:focus, 
      #range::-webkit-slider-thumb:active {
        padding: 8px;
      }
      #range:focus, #range:active {
        outline: none;
      }


      .pembungkus_tabfrange{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  width: 100%;
  overflow: hidden;
}
.tabs{
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  float: none;
  overflow: hidden;
  overflow-x: auto;
}
.tab{
  width: 100px;
  font-size: 12px;
  cursor: pointer;
  padding:10px 15px;
  margin:0px 2px;
  background:rgb(179 31 47);
  display:inline-block;
  color:#fff;
  border-radius:3px 3px 0px 0px;
/*  box-shadow: 0 0.5rem 0.8rem #00000080;*/
}
.panels{
  background:#fffffff6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  min-height:200px;
  /*width:100%;
  max-width:400px;*/
  border-radius:3px;
  overflow:hidden;
  padding:20px;  
}
.panel{
  display:none;
  animation: fadein .8s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.panel-title{
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
}
.radio{
  display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel,
#five:checked ~ .panels #five-panel{
  display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab,
#four:checked ~ .tabs #four-tab,
#five:checked ~ .tabs #five-tab{
  background: #fffffff6;
  color: rgb(179 31 47);
  border-top: 3px solid rgb(179 31 47);
}
.list_riwayat{
  list-style-type: none;
}
.list_riwayat li{
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
  padding: 12px 0px;
}
.list_riwayat li .panel_datariwayat {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.list_riwayat li .panel_datariwayat strong{
  font-weight: bold;
}