$inputWidth: 200;

@function getProgress($inputWidth, $color) {
 $val: -5px 0 0 -10px $color;
    @for $i from 6 through $inputWidth {
      $val: #{$val}, -#{$i}px 0 0 -10px #{$color}
    }
  @return $val
}

body {
  font-family: Comic Sans, sans-serif;
  font-size: 12px;
  line-height: 1.3;
}

/* div>.container{
    width: 400px; 
    height: 300px;
    background-color: rgb(172, 197, 197);
    margin-top: 10em ;
    padding-right: 0px;
    padding-left: 0px;
} */

.ul .li {
  font-size: 8px !important;
}


.language {
  font-family: Comic Sans, sans-serif;
  text-decoration: none !important;
  color: black !important;
  font-weight: bold !important;
  font-size: 16px;
}

.list-group-item {
  padding: 5px 0;
  border: none;
}

.list-group-item > a:hover {
  padding: 5px 0;
  border: none;
  color: black !important;
}

/* volume */
 input[type=range] {
    -webkit-appearance: none;
    margin: 18px 0;
    width: 20%;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 20%;
    height: 1px;
    cursor: pointer;
    /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    background: #9b9b9b;
    border-radius: 1.3px;
    border:none;
    
  }
  input[type=range]::-webkit-slider-thumb {
    /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    border: 1px solid #000000;
    height: 14px;
    width: 7px;
    border-radius: 3px;
    background: #dddcdc;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #9b9b9b;
  }
  input[type=range]::-moz-range-track {
    width: 20%;
    height: 1px;
    cursor: pointer;
     /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    background: #9b9b9b;
    border-radius: 1.3px;
    border:none;
  }
  input[type=range]::-moz-range-thumb {
     /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    border: 1px solid #000000;
    height: 14px;
    width: 7px;
    border-radius: 3px;
    background: #dddcdc;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 20%;
    height: 13px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #221f1f;
    border:none;
    border-radius: 2.6px;
     /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
  }
  input[type=range]::-ms-fill-upper {
    background: #9b9b9b;
    border:none;
    border-radius: 2.6px;
     /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
  }
  input[type=range]::-ms-thumb {
     /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    border: 1px solid #000000;
    height: 14px;
    width: 7px;
    border-radius: 3px;
    background: #dddcdc;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #9b9b9b;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #9b9b9b;
  }

  .popover{
    width: 65px;
    height: 35px;
    text-align: center;
    font-size: 13px;
    -webkit-transform: scale(0.65);
 }