
input[type=range] {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 300px; /* Full-width */
    height: 5px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: 3px;
  }
  
  /* Mouse-over effects */
  input[type=range]:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 10px;
  }
  
  input[type=range]::-moz-range-thumb {
    width: 15px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 10px;
  }
  
  div{
    font: bold 13px arial, helvetica, sans-serif;
  }
  
  select {
    /* position: relative; */
    /* float: left; */
    text-align-last: center;
    min-width: 20px;
    width: 300px;
    min-height: 20px;
    /* font-family: 'Roboto'; */
    /* color: #777; */
    font: bold 13px arial, helvetica, sans-serif;
    /* font-weight: 300; */
    background-color: #fff;
    box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.3);
    border-radius: 3px;
    transition: all 375ms ease-in-out;
  }

  button{
      display: inline-block;
      *display: inline;
      zoom: 1;
      padding: 6px 20px;
      margin: 0;
      cursor: pointer;
      border: 1px solid #bbb;
      overflow: visible;
      font: bold 13px arial, helvetica, sans-serif;
      text-decoration: none;
      white-space: nowrap;
      color: #555;
      
      background-color: #ddd;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
      background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      
      -webkit-transition: background-color .2s ease-out;
      -moz-transition: background-color .2s ease-out;
      -ms-transition: background-color .2s ease-out;
      -o-transition: background-color .2s ease-out;
      transition: background-color .2s ease-out;
      background-clip: padding-box; /* Fix bleeding */
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      text-shadow: 0 1px 0 rgba(255,255,255, .9);
      
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    button:hover{
      background-color: #eee;
      color: #555;
    }
    
    button:active{
      background: #e9e9e9;
      position: relative;
      top: 1px;
      text-shadow: none;
      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
    }
    
    button[disabled], .button[disabled]:hover, .button[disabled]:active{
      border-color: #eaeaea;
      background: #fafafa;
      cursor: default;
      position: static;
      color: #999;
      /* Usually, !important should be avoided but here it's really needed :) */
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    input{
      display: inline-block;
      *display: inline;
      zoom: 1;
      padding: 6px 20px;
      margin: 0;
      cursor: pointer;
      border: 1px solid #bbb;
      overflow: visible;
      font: bold 13px arial, helvetica, sans-serif;
      text-decoration: none;
      white-space: nowrap;
      color: #555;
      
      background-color: #ddd;
      /* background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
      background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); */
      
      -webkit-transition: background-color .2s ease-out;
      -moz-transition: background-color .2s ease-out;
      -ms-transition: background-color .2s ease-out;
      -o-transition: background-color .2s ease-out;
      transition: background-color .2s ease-out;
      background-clip: padding-box; /* Fix bleeding */
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
      text-shadow: 0 1px 0 rgba(255,255,255, .9);
      
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
  