/* KNOB: NORMAL SIZE */
.knob_container{position:relative; width:100%;height:auto; display:flex;justify-content:center;align-items:center; text-align:center; pointer-events:none;}
.knob_wrapper{position:relative; width:100%;height:3.5vw; display:flex;align-items:center;justify-content:center; pointer-events:none;}
.knob_display{position:absolute; margin-top:-0.1vw;width:4.4vw;height:4.4vw; border-radius:100%; opacity:0.8;}
.knob_handle{position:absolute;z-index:8; width:3vw;height:3vw; border-radius:100%; background-color:darkgrey; pointer-events:all;}
.knob_line{position:absolute;z-index:10; width:3vw;height:3vw; border-radius:100%; pointer-events:none; background-image:url("../images/knob_line.png");background-position:center;background-size:contain;background-repeat:no-repeat;}
.knob_graphic_layer{position:absolute;z-index:9; width:2.1vw;height:2.1vw; border-radius:100%; pointer-events:none; border:0.05vw solid black; box-shadow:inset 0.05vw 0.05vw 0.1vw rgba(0,0,0,0.5), 0vw 0vw 0.3vw 0.1vw rgba(0,0,0,0.7);}
.knob_graphic_shadow{position:absolute;z-index:7; width:3vw;height:3vw; border-radius:100%; pointer-events:none; box-shadow:0.5vw 0.7vw 0.8vw 0.3vw rgba(0,0,0,0.6);}
.knob_tooltip{position:absolute;bottom:-3.5vw; z-index:100; min-width:9vw; padding:0.5vw 1vw; display:none;align-items:center;justify-content:center; background-color:darkgrey; font-size:1.2vw; pointer-events:none;}
/* .knob_wrapper:hover ~ .knob_tooltip{display:flex;} */

/* KNOB: BIG SIZE */
.knob_container_big{position:relative; width:100%;height:auto; display:flex;justify-content:center;align-items:center; text-align:center; pointer-events:none;}
.knob_wrapper_big{position:relative; width:100%;height:7.5vw; display:flex;align-items:center;justify-content:center; pointer-events:none;}
.knob_display_big{position:absolute; width:7vw;height:7vw; border-radius:100%; background-color:rgba(255,0,0,0.01);}
.knob_handle_big{position:absolute;z-index:8; width:7vw;height:7vw; border-radius:100%; background-color:darkgrey; pointer-events:all;}
.knob_line_big{position:absolute;z-index:10; width:7vw;height:7vw; border-radius:100%; pointer-events:none; background-image:url("../images/knob_line.png");background-position:center;background-size:contain;background-repeat:no-repeat;}
.knob_graphic_layer_big{position:absolute;z-index:9; width:7vw;height:7vw; border-radius:100%; pointer-events:none;}
.knob_graphic_shadow_big{position:absolute;z-index:7; width:7vw;height:7vw; border-radius:100%; pointer-events:none; box-shadow:0.6vw 0.9vw 1.1vw 0.4vw rgba(0,0,0,0.6);}
.knob_tooltip_big{position:absolute;bottom:-3.5vw; z-index:100; min-width:9vw; padding:0.5vw 1vw; display:none;align-items:center;justify-content:center; background-color:darkgrey; font-size:1.2vw; pointer-events:none;}
/* .knob_wrapper_big:hover ~ .knob_tooltip_big{display:flex;} */

/* KNOB: SMALL SIZE */
.knob_container_small{position:relative; width:100%;height:auto; display:flex;justify-content:center;align-items:center; text-align:center; pointer-events:none;}
.knob_wrapper_small{position:relative; width:100%;height:2.8vw; display:flex;align-items:center;justify-content:center;pointer-events:none;}
.knob_display_small{position:absolute; width:3.6vw;height:3.6vw; border-radius:100%; opacity:0.8;}
.knob_handle_small{position:absolute;z-index:8; width:2.4vw;height:2.4vw; border-radius:100%; background-color:darkgrey; pointer-events:all; box-shadow:inset 0vw 0vw 0.5vw 0.1vw rgba(0,0,0,0.5);}
.knob_line_small{position:absolute;z-index:10; width:2.4vw;height:2.4vw; border-radius:100%; pointer-events:none; background-image:url("../images/knob_line_small.png");background-position:center;background-size:contain;background-repeat:no-repeat;}
.knob_graphic_layer_small{position:absolute;z-index:9; width:2vw;height:2vw; border-radius:100%; pointer-events:none; border:0.05vw solid black; box-shadow:inset 0.05vw 0.05vw 0.1vw rgba(0,0,0,0.5), 0vw 0vw 0.3vw 0.1vw rgba(0,0,0,0.7);}
.knob_graphic_shadow_small{position:absolute;z-index:7; width:2.4vw;height:2.4vw; border-radius:100%; pointer-events:none; box-shadow:0.35vw 0.5vw 0.8vw 0.2vw rgba(0,0,0,0.6);}
.knob_tooltip_small{position:absolute;bottom:-3.5vw; z-index:100; min-width:9vw; padding:0.5vw 1vw; display:none;align-items:center;justify-content:center; background-color:darkgrey; font-size:1.2vw; pointer-events:none;}
/* .knob_wrapper_small:hover ~ .knob_tooltip_small{display:flex;} */

/* FADER: NORMAL SIZE */
.fader_container{position:relative; width:auto;height:auto; display:block; text-align:center; pointer-events:none;}
.fader_wrapper{position:relative; width:5vw;height:10vw; display:flex;align-items:center;justify-content:center; pointer-events:none;}
.fader_display{position:relative; top:0.5vw; width:4vw;height:10.5vw; background-image:url("../images/scale2.png");background-position:center;background-size:cover;}
.fader_handle{position:absolute;top:100%; width:2.5vw;height:3.5vw; border-radius:0.5vw; background-color:darkgrey; pointer-events:all; box-shadow:0.5vw 0.7vw 0.8vw 0.3vw rgba(0,0,0,0.6);}
.fader_graphic_layer{position:absolute;left:0; width:2.5vw;height:3.5vw; border-radius:0.5vw; pointer-events:none;}
/* .fader_line{position:absolute; width:0.25vw;height:1.2vw; background-color:grey;} */

/* .fader_tooltip{position:absolute; z-index:100; margin-top:0.5vw; min-width:100%; display:none;align-items:center;justify-content:center; background-color:pink;}
.fader_wrapper:hover ~ .fader_tooltip{display:flex;} */

/* SWITCH: NORMAL SIZE */
.switch_container{position:relative; width:2vw;height:2vw; display:flex;align-items:center; }
.switch_wrapper{position:relative; width:2vw;height:2vw; display:flex;align-items:center;justify-content:center;}
.switch_display{position:relative; width:2vw;height:2vw; background-color:grey;}
.switch_handle{position:absolute; width:1.9vw;height:1.9vw; pointer-events:all;}
.switch_checkmark{position:absolute;z-index:8; width:1.9vw;height:1.9vw; display:none; background-color:lightgreen; pointer-events:none;}
.switch_graphic_layer{position:absolute;z-index:10; width:1.8vw;height:1.8vw; border-radius:0; pointer-events:none;}

/* FILE: NORMAL SIZE */
.file_container{position:relative; width:100%;height:4vw; display:flex;align-items:center;justify-content:center; }
.file_wrapper{position:relative; width:8vw;height:4vw; display:flex;align-items:center;justify-content:center; overflow:hidden;}
.file_display{position:absolute; width:8vw;height:4vw; background-color:lightgrey;}
.file_input{position:absolute;display:none;}
.file_handle{position:absolute; width:7vw;height:4vw; pointer-events:all;}

.file_start_line{position:absolute;top:0;left:0%; width:0.15vw;height:100%; display:block; background-color:grey;}
.file_end_line{position:absolute;top:0;left:100%; width:0.15vw;height:100%; display:block; background-color:darkgrey;}

.file_tooltip{position:absolute;bottom:-3.5vw; z-index:100; min-width:9vw; padding:0.5vw 1vw; display:none;align-items:center;justify-content:center; background-color:darkgrey; font-size:1.2vw; pointer-events:none;}
/* .file_wrapper:hover ~ .file_tooltip{display:flex;} */
.tooltip{font-size:1.1vw;}


@media screen and (min-width: 900px)
{

  /* KNOB: NORMAL SIZE */
  .knob_container{width:100%;height:auto;}
  .knob_wrapper{width:100%;height:31px;}
  .knob_display{margin-top:-1px;width:39.5px;height:39.5px;}
  .knob_handle{width:27px;height:27px;}
  .knob_line{width:27px;height:27px;}
  .knob_graphic_layer{width:17px;height:17px;}
  .knob_graphic_shadow{width:27px;height:27px;box-shadow:4.5px 6px 7px 2.5px rgba(0,0,0,0.6);}
  .knob_tooltip{bottom:-31px;min-width:80px; padding:4.5px 9px;font-size:10px;}
  /* .knob_wrapper:hover ~ .knob_tooltip{display:flex;} */

  /* KNOB: BIG SIZE */
  .knob_container_big{width:100%;height:auto;}
  .knob_wrapper_big{width:100%;height:67px;}
  .knob_display_big{width:63px;height:63px; border-radius:100%;}
  .knob_handle_big{width:63px;height:63px; border-radius:100%;}
  .knob_line_big{width:63px;height:63px;}
  .knob_graphic_layer_big{width:63px;height:63px;}
  .knob_graphic_shadow_big{width:63px;height:63px;box-shadow:5.4px 8px 10px 3.6px rgba(0,0,0,0.6);}
  .knob_tooltip_big{bottom:-31px;min-width:80px; padding:4.5px 9px;font-size:10px;}

  /* KNOB: SMALL SIZE */
  .knob_container_small{width:100%;height:auto;}
  .knob_wrapper_small{width:100%;height:25px;}
  .knob_display_small{width:32px;height:32px;}
  .knob_handle_small{width:21.5px;height:21.5px;}
  .knob_line_small{width:21.5px;height:21.5px;}
  .knob_graphic_layer_small{width:18px;height:18px;}
  .knob_graphic_shadow_small{width:21.5px;height:21.5px;box-shadow:3.1px 4.5px 6.4px 2px rgba(0,0,0,0.6);}
  .knob_tooltip_small{bottom:-31px; z-index:100; min-width:80px; padding:4.5px 9px;font-size:10px;}

  /* FADER: NORMAL SIZE */
  .fader_container{width:auto;height:auto;}
  .fader_wrapper{width:45px;height:90px;}
  .fader_display{top:4.5px; width:36px;height:94px;}
  .fader_handle{top:100%; width:22.5px;height:31px; border-radius:4.5px;box-shadow:4.5px 6px 7px 2.5px rgba(0,0,0,0.6);}
  .fader_graphic_layer{width:22.5px;height:31px; border-radius:4.5px;}

  /* SWITCH: NORMAL SIZE */
  .switch_container{width:18px;height:18px;}
  .switch_wrapper{width:18px;height:18px;}
  .switch_display{width:18px;height:18px;}
  .switch_handle{width:18px;height:18px;}
  .switch_checkmark{width:18px;height:18px;}
  .switch_graphic_layer{width:18px;height:18px;}

  /* FILE: NORMAL SIZE */
  .file_container{width:100%;height:36px;}
  .file_wrapper{width:72px;height:36px;}
  .file_display{width:72px;height:36px;}
  .file_handle{width:63px;height:36px;}
  .file_start_line{top:0;left:0%; width:1.3px;height:100%;}
  .file_end_line{top:0;left:100%; width:1.3px;height:100%;}
  .file_tooltip{bottom:-31px;min-width:80px; padding:4.5px 9px;font-size:10px;}
  .tooltip{font-size:10px;}

}