/* SOURCE: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */


/***********************************
Initial clean up of default styling
*/
input[type=range] {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	width: 100%; /* Specific width is required for Firefox. */
	background: transparent; /* Otherwise white in Chrome */
  }
  
  input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
  }
  
  input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  
  input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
  
	/* Hides the slider so custom styles can be added */
	background: transparent; 
	border-color: transparent;
	color: transparent;
  }

  /****************************************
  Adding style for the thumb
  */

  /* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 1px solid #000000;
	height: 12px;
	width: 12px;
	border-radius: 10px;
	background: #a8a5a5;
	cursor: pointer;
	margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }
  
  /* All the same stuff for Firefox */
  input[type=range]::-moz-range-thumb {
	border: .5px solid #000000;
	height: 12px;
	width: 12px;
	border-radius: 10px;
	background: #a8a5a5;
	cursor: pointer;
  }
  
  /* All the same stuff for IE */
  input[type=range]::-ms-thumb {
	border: 1px solid #000000;
	height: 12px;
	width: 12px;
	border-radius: 10px;
	background: #a8a5a5;
	cursor: pointer;
  }


  /****************************************
  Adding style for the track
  */

  input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: #a8a5a5;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
  }
  
  input[type=range]:focus::-webkit-slider-runnable-track {
	background: #a8a5a5;
  }
  
  input[type=range]::-moz-range-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	background: #a8a5a5;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
  }
  
  input[type=range]::-ms-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
  }
  
  input[type=range]::-ms-fill-lower {
	background: #a8a5a5;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
  }

  input[type=range]:focus::-ms-fill-lower {
	background: #a8a5a5;
  }

  input[type=range]::-ms-fill-upper {
	background: #a8a5a5;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
  }

  input[type=range]:focus::-ms-fill-upper {
	background: #a8a5a5;
  }

  /**********************************
  Style for opacity thumb
  */

    /****************************************
  Adding style for the thumb
  */

  /* Special styling for WebKit/Blink */
input[class="opacity"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 1px solid #000000;
	height: 30px;
	width: 12px;
	border-radius: 50px;
	background: #a8a5a5;
	cursor: pointer;
	margin-top: -11px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }
  
  /* All the same stuff for Firefox */
  input[class="opacity"]::-moz-range-thumb {
	border: .5px solid #000000;
	height: 36px;
	width: 36px;
	border-radius: 50px;
	background: #a8a5a5;
	cursor: pointer;
  }
  
  /* All the same stuff for IE */
  input[class="opacity"]::-ms-thumb {
	border: 1px solid #000000;
	height: 36px;
	width: 36px;
	border-radius: 50px;
	background: #a8a5a5;
	cursor: pointer;
  }


  /************************************
  Style for opacity range
  */

  input[class="opacity"]::-webkit-slider-runnable-track {
	width: 50vh;
	height: 10px;
	cursor: pointer;
	background: #a8a5a5;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
  }
  
  input[class="opacity"]:focus::-webkit-slider-runnable-track {
	background: #a8a5a5;
  }
  
  input[class="opacity"]::-moz-range-track {
	width: 50vh;
	height: 10px;
	cursor: pointer;
	background: #a8a5a5;
	border-radius: 1.3px;
	/* border: 0.2px solid #010101; */
  }
  
  input[class="opacity"]::-ms-track {
	width: 20%;
	height: 10px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
  }
  
  input[class="opacity"]::-ms-fill-lower {
	background: #a8a5a5;
	/* border: 0.2px solid #010101; */
	border-radius: 2.6px;
  }

  input[class="opacity"]:focus::-ms-fill-lower {
	background: #a8a5a5;
  }

  input[class="opacity"]::-ms-fill-upper {
	background: #a8a5a5;
	/* border: 0.2px solid #010101; */
	border-radius: 2.6px;
  }

  input[class="opacity"]:focus::-ms-fill-upper {
	background: #a8a5a5;
  }