/*
COLOR1 = "#0b101c"; // darkblue
COLOR2 = "#bf413f"; // red
COLOR3 = "#76a1c7"; // lightblue // alt 3f719e
COLOR4 = "#fd8755"; // lightred
COLOR5 = "#1c2e57"; // midblue // alt 14203b
COLOR6 = "#702625"; // midred
COLOR7 = "#894a49"; // midred alternative
COLOR8 = "#fbcdbc"; // white
*/
#loading_screen{z-index:100;position:fixed;width:100vw;width:100dvw;height:100vh;height:100dvh;background-color:#0b101c;display:flex;align-items:center;justify-content:center;}
#popup_screen{z-index:100;position:fixed;width:100vw;width:100dvw;height:100vh;height:100dvh;background-color:rgba(0,0,0,0.5); display:none;align-items:center;justify-content:center;}
#popup_box{width:450px;height:300px; background-color:#0b101c; border:1px solid #702625;border-radius:20px; display:flex;align-items:center;justify-content:center;}
@font-face {
  font-family: sono_regular;
  src: url('fonts/Sono-Regular.woff2');
}
@font-face {
  font-family: sono_light;
  src: url('fonts/Sono-ExtraLight.woff2');
}
@font-face {
  font-family: sono_bold;
  src: url('fonts/Sono-Bold.woff2');
}
@font-face {
  font-family: fake_serif;
  src: url('fonts/Fake-Serif.otf');
}
@font-face {
  font-family: e1234;
  src: url('fonts/E1234.ttf');
}
@font-face {
  font-family: IBM;
  src: url('fonts/IBM_BIOS_plus-2y.woff');
}
*{font-family:sono_light, monospace;text-align:center; cursor:default;}
body{position:relative; font-size:11px; margin:0;width:100vw;height:100vh;width:100dvw;height:100dvh; display:flex;align-items:center;justify-content:center; background-color:#0b101c; color:#fbcdbc;}
.content_wrapper{width:540px;max-width:100%;height:auto;max-height:100%;padding-bottom:0; display:block; background-color:#1c2e57; border:3px solid #0b101c;border-radius:20px; box-shadow:0px 0px 35px black;}
#header_container{position:relative; width:100%;max-width:100%;height:30px;margin-bottom:7px; text-align:center; display:flex;flex-direction:row;align-items:center; border-bottom:2px solid #0b101c;border-radius:15px 15px 0 0; background-color:#bf413f; box-shadow:0px 5px 8px 3px rgba(0,0,0,0.5);}
#logo_display{position:relative;top:3px;left:3px; display:block; width:74px;height:27px; border-radius:15px 0 0 0;border-right:1px solid #0b101c;border-bottom:2px solid #0b101c; /*box-shadow:inset 1px 3px 5px 1px rgba(0,0,0,0.7);*/}
  #logo_text{position:absolute;left:92px;top:5.5px; display:block; width:80px;height:26px;}
  #midi_control_container{display:block;position:absolute; right:25px;top:7px; font-size:7px;}
    /* .midi_control_display{position:relative;}
    .midi_activity_display{position:relative;} */
    .midi_activity_light, .ram_activity_light{position:relative;top:1px;left:3px; display:inline-block; width:4px;height:4px; border:1px solid #0b101c;border-radius:100%;  background-color:#0b101c; border:1px solid #702625;border-radius:100%; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.9), inset -1px -1px 1px 0px rgba(255,255,255,0.3); transition: all 0.05s ease-out;}
  #ram_control_container{display:block;position:absolute; right:25px;top:17px; font-size:7px;}
    /* .ram_control_display{position:relative;}
    .ram_activity_display{position:relative;} */
    /* .ram_activity_light{position:relative;} */
  #file_control_container{position:absolute;right:282px; width:83px;height:24px; display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;}
    #file_btn_save{color:#fbcdbc;text-decoration:none;}
    #file_btn_load{}
    #file_btn_record{}
    #file_record_light{position:absolute;bottom:1px;left:44px; display:inline-block; width:7px;height:7px; border:1px solid #0b101c;border-radius:100%;  background-color:#0b101c; border:1px solid #702625;border-radius:100%; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.9), inset -1px -1px 1px 0px rgba(255,255,255,0.3); transition: all 0.05s;}
    .file_btn{display:block; min-width:35px;padding:1px 2px; font-size:7px;font-family:sono_regular,monospace;text-transform:uppercase; border:1px solid #702625;border-radius:2px; background-color:#702625; box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.4), inset -1px -1px 2px 1px rgba(0,0,0,0.7);}
      .f_b_small{min-width:21px;}
    .file_btn:active{padding:2px 2px 0px 2px; box-shadow:inset -1px -1px 1px 0px rgba(255,255,255,0.3), inset 1px 1px 1px 0px rgba(0,0,0,0.6);}

#visualizer_container{position:absolute;top:2.5px;left:3px; display:block;}
  .oscilloscope_display{width:75px;height:28px; display:flex;flex-direction:column;align-items:center;justify-content:center; border-radius:15px 0 0 0; box-shadow:inset 1px 4px 7px 2px rgba(0,0,0,0.7); background-color:rgba(0,0,0,0.3);}
#visualizer_canvas{width:75px;height:27px; border-radius:15px 0 0 0;background-color:rgba(0,0,0,0.4); /*box-shadow:inset 0px 0px 15px 5px rgba(0,0,0,0.5);*/}
  .oscilloscope_controls_text{position:absolute;top:12px;right:-9px; font-size:5px;letter-spacing:-0.5px; white-space:pre-wrap;}
#loudness_container{position:absolute;right:100px;margin-top:-8px; padding:2px 5px;font-size:7px;width:58px; background-color:#1c2e57; border:1px solid #0b101c;border-radius:4px; box-shadow:inset 2px 2px 5px 1px rgba(0,0,0,0.7);}
  .loudness_display{position:relative;bottom:-0.5px;width:100%;display:flex;flex-direction:column;align-items:center;}
  .meter_wrapper{width:100%;height:6px;display:flex;align-items:center;justify-content:space-between;}
    .m_w_disabled{width:110%;background-color:rgba(0,0,0,0.6);}
  .loudness_meter{}
  .meter_controls{width:67px;position:absolute;left:-5px;bottom:-11px; display:flex;align-items:center;}
  .meter_controls_text{position:relative;top:0.5px;left:2px; font-size:5px;letter-spacing:-0.5px; white-space:pre-wrap;}
  .loudness_text{margin-top:0.5px;font-size:6px;font-family:sono_regular,monospace;}
  .loudness_meter_scale{position:absolute;top:1px;left:0; display:block;width:35px;height:4px;margin-bottom:0px; background-image:url("images/meter_scale.png");background-position:center;background-size:35px;background-repeat:no-repeat; box-shadow:inset 0.5px 0.5px 1px 0px rgba(255,255,255,0.4);}

.synthesizer_container{position:relative;display:flex;flex-direction:column;}
.module_wrapper{position:relative;display:flex;margin:0 auto;}
.module_heading{font-family:sono_regular,monospace; text-shadow:0.5px 0.5px 1px black;}
.module_graphical_heading{position:absolute; color:#bf413f;font-family:fake_serif,sono_bold,monospace;font-size:60px; top:-13px;right:-1px; opacity:0.6; pointer-events:none;}
.m_g_h_big{font-size:165px; top:-48px;left:3px; opacity:0.4;}
.m_g_h_lfo{font-size:63px;letter-spacing:-4px; top:14px;left:-3px; opacity:0.4;}
#oscillator_container{display:flex;flex-wrap:wrap; justify-content:center;}
  .oscillator_display{position:relative; width:calc(88px - 24px);max-width:calc(50% - 2px);height:85px;margin:2px 1px;padding:2.5px 0; display:flex;flex-direction:column;align-items:center;justify-content:center; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:10px; box-shadow:inset 2px 1px 5px rgba(0,0,0,0.7);}
  .oscillator_wrapper{position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .type_controls_text{position:relative;margin-top:-2px; font-size:5px;letter-spacing:-0.5px; white-space:pre-wrap;}

#mixer_container{display:flex;flex-wrap:wrap; justify-content:center;}
.mixer_display{}
.channel_display{position:relative; width:calc(69px - 24px);max-width:calc(50% - 2px);height:85px;margin:2px;padding:2.5px 0; display:flex;flex-direction:column;align-items:center;justify-content:center; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:10px; box-shadow:inset 1px 2px 5px rgba(0,0,0,0.7);}

#effects_top_container{position:absolute;right:176px; width:95px;height:25px;padding:0 2px; display:flex;align-items:center;justify-content:space-around; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:4px; box-shadow:inset 1px 2px 5px 1px rgba(0,0,0,0.6);}
  .effect_top_display{position:relative; width:30px;height:25px; margin:2px;padding:0; display:flex;flex-direction:column;align-items:center;justify-content:center;}
#effects_container{display:inline-flex;flex-wrap:wrap; justify-content:center;}
  .effect_display{position:relative; width:calc(123px - 24px);max-width:calc(50% - 2px);/*height:90px;*/min-height:127px; margin:2px;padding:5px 0; display:flex;flex-direction:column;align-items:center;justify-content:center; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:10px; box-shadow:inset 1px 2px 7px rgba(0,0,0,0.7);}
  .envelope_heading{margin-top:-35px;}
  .envelope_display_container{position:absolute;bottom:-5px; display:block; margin-top:5px;width:100px;height:50px;padding:6px; transform:scale(50%); border:1px solid #702625;border-radius:8px; background-color:rgba(0,0,0,0.3);box-shadow:inset 2px 4px 5px 1px rgba(0,0,0,0.4);}
  .envelope_display{width:100px;height:50px;overflow:hidden; }
  .env_d_text{fill:white;font-size:8px;}
  #env_d_atk_p{stroke:#bf413f;stroke-width:2;fill:none;}
  #env_d_dec_p{stroke:#bf413f;stroke-width:2;fill:none;}
  #env_d_rel_p{stroke:#bf413f;stroke-width:2;fill:none;}
  #env_d_dur_t{position:absolute;bottom:-14px;right:-12px;letter-spacing:-1.5px; font-size:12px; /*font-family:sono_bold, monospace;*/ color:#bf413f; color:#fbcdbc;}

.settings_container{position:relative; width:calc(115px - 24px);max-width:calc(50% - 2px);/*height:90px;*/min-height:127px; margin:2px;padding:5px 5px; text-align:left;}
  .settings_display{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start; margin-top:3px;padding:3px; background-color:black;color:#fd8755;border:1px solid #0b101c;border-radius:4px; box-shadow:inset 2px 3px 12px 0px rgba(255,255,255,0.3), 1px 1px 2px 0px rgba(0,0,0,0.3);}
  .settings_display .parameter_display{font-family:IBM,monospace;font-size:7px; text-shadow:0px 0px 3px #fbcdbc88; text-transform:uppercase;}
  /* .midi_learn_btn{position:absolute;top:30px;right:10px; font-family:IBM,monospace;font-size:6px;padding:1px 2px; box-shadow:0px 0px 3px #fbcdbc88; text-transform:uppercase; color:#0b101c;background-color:#fd8755; border-radius:3px;}
  .midi_learn_btn:hover{background-color:#fbcdbc;} */

  .midi_display, #midi_write_btn, #midi_read_btn, .midi_learn_btn{position:absolute;width:18px;display:block; font-family:IBM,monospace;font-size:6px;padding:1px 2px; box-shadow:0px 0px 3px #fbcdbc88; text-transform:uppercase; color:#0b101c;background-color:#fd8755; border-radius:3px;}
  .midi_learn_btn:hover, #midi_write_btn:hover, #midi_read_btn:hover{background-color:#fbcdbc;}
  .midi_display{top:12px;right:7px; padding:0;box-shadow:none;color:#fd8755;background:none;}
  #midi_write_btn{top:19px;right:9px; text-decoration:none;}
  #midi_read_btn{top:29px;right:9px;}
  .midi_learn_btn{top:39px;right:9px;}

  .shell_display{position:relative; display:block; width:calc(100% - 8px);height:67px;margin-top:2px;padding:3px; overflow:hidden; background-color:black;color:#fd8755; }
  .shell_display{background-color:rgba(0,0,0,0.8);border:1px solid #0b101c;border-radius:4px; text-shadow:0px 0px 3px #fbcdbc88; box-shadow:inset 2px 3px 12px 0px rgba(255,255,255,0.3), 1px 1px 2px 0px rgba(0,0,0,0.3);}
  #shell_input{position:relative; display:block; margin:0;padding:0; width:100%;height:8px; font-family:IBM,monospace;font-size:7px;text-align:left;text-transform:uppercase; background:none;color:#fd8755; text-shadow:0px 0px 3px #fbcdbc88; border:none;outline:none;border-top:1px solid #fd875533;}
  #shell_output{position:relative; display:block; margin:0;padding:0; width:100%;height:calc(100% - 9px); overflow-y:scroll;overflow-x:hidden; font-family:IBM,monospace;font-size:7px;text-align:left;text-transform:uppercase;}

#control_container{margin:0 auto; display:flex;align-items:center;justify-content:center; }
.control_display{position:relative; min-width:calc(150px - 4px);min-height:30px; margin:2px;padding:7px 5px 5px 5px; display:flex;flex-direction:row;align-items:center;justify-content:space-around; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:10px; box-shadow:inset 1px 2px 5px rgba(0,0,0,0.7);}
.bank_display{position:relative; min-width:calc(150px - 24px);min-height:30px; margin:2px;padding:7px 15px 5px 15px; display:flex;flex-direction:row;align-items:center;justify-content:space-around;flex-wrap:wrap; background-color:rgba(0,0,0,0.4);border:1px solid #702625;border-radius:10px; box-shadow:inset 1px 2px 5px rgba(0,0,0,0.7);}
.bank_controls_wrapper{display:flex;align-items:center;justify-content:center;flex-direction:row;flex-wrap:wrap;}
.bank_controls_display{width:45px;height:20px;display:flex;align-items:center;justify-content:space-between;margin:0 5px;}

.bank_btn{display:block; min-width:35px;padding:1px 3px;margin:1px 0; font-size:8px;font-family:sono_regular,monospace;color:#fbcdbc; border:1px solid #702625;border-radius:3px; background-color:#702625; box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.4), inset -1px -1px 2px 1px rgba(0,0,0,0.7);}
.bank_btn:active{padding:2px 3px 0px 3px; box-shadow:inset -1px -1px 1px 0px rgba(255,255,255,0.3), inset 1px 1px 1px 0px rgba(0,0,0,0.6);}
/* .bank_btn:hover{background-color:#894a49;} */
/* .bank_btn:hover{background-color:rgba(255,255,255,0.2);} */
/* #control_display{width:60px;} */
/* .control_container .parameter_slider{width:70px;} */

.controls_container{display:flex;align-items:center;justify-content:center;}
.control_btn{display:block; min-width:55px;padding:3px 8px;margin:1px 0;margin-left:5px; font-size:11px;font-family:sono_regular,monospace;color:#fbcdbc; border:1px solid #702625;border-radius:3px; background-color:#702625; box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.4), inset -1px -1px 2px 1px rgba(0,0,0,0.7);}
.control_btn:active{padding:2px 3px 0px 3px; box-shadow:inset -1px -1px 1px 0px rgba(255,255,255,0.3), inset 1px 1px 1px 0px rgba(0,0,0,0.6);}
/* .control_btn:hover{background-color:#894a49;} */
/* .control_btn:active{background-color:#bf413f; box-shadow:inset 1px 1px 1px 1px black, inset -1px -1px 1px 1px rgba(255,255,255,0.4);} */
/* .control_btn:hover{background-color:rgba(255,255,255,0.2);} */
.control_display{min-width:calc(216px - 5px);}

#steps_container{width:100%;margin:5px 0;padding:7px 0 20px 0; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; background-color:#702625; border-bottom:1px solid #0b101c; border-top:1px solid rgba(255,255,255,0.3);border-radius:3px; box-shadow:inset 2px 4px 5px 0px rgba(255,255,255,0.3), inset -1px -2px 10px 2px black;}
.step_display{position:relative; width:23px;height:11px;margin:0 4px; display:inline-flex;align-items:center;justify-content:center; border:1px solid #0b101c;border-radius:6px; box-shadow:inset 0px 1px 5px 1px black; }
.step_tooltip_container{display:block;position:absolute;width:20px;height:12px;}
.step_tooltip{display:none;align-items:center;justify-content:center;flex-direction:column; position:absolute;bottom:12px;left:-45px;z-index:2; width:100px;height:auto;padding:5px 2px; background-color:rgba(0,0,0,0.6); border:1px solid #bf413f;border-radius:8px; font-size:9px; box-shadow:0px -2px 12px 2px rgba(0,0,0,0.6);}
.step_tooltip_container:hover .step_tooltip{display:flex;}
  .step_note_display{display:block;position:absolute;top:1px;width:20px;height:10px;font-size:10px; pointer-events:none;}
  .tooltip_display{width:100%;display:flex;  justify-content:space-around;}
  .p_d_tooltip{min-width:30px;text-align:right;font-size:7px;}
  .parameter_tooltip_indicator{font-size:7px; min-width:30%;}
/* .active_step{background-color:#bf413f;} */

#footer_container{position:relative;margin-top:12px; height:10px;padding:0 18%; display:flex;align-items:center;justify-content:space-between; text-align:center;font-size:5px;text-transform:uppercase; color:#fbcdbc;background-color:#1c2e57; border-top:1px solid #1c2e57;border-radius:0 0 20px 20px; box-shadow:inset 3px -2px 6px 3px rgba(0,0,0,0.7);}
/* #footer_container span{ } */
#footer_container a{color:#fbcdbc; text-decoration:none;}
#footer_container a:hover{color:#76a1c7;}
#osc_count_display{position:absolute;left:10px;top:0px; width:32px;height:8px;padding:0 5px; font-family:IBM, monospace;font-size:5px;color:#fd8755; display:flex;align-items:center;justify-content:flex-start; background-color:rgba(0,0,0,0.8);border:1px solid #0b101c;border-radius:4px; text-shadow:0px 0px 3px #fbcdbc88; box-shadow:inset 1px 2px 3px 0px rgba(255,255,255,0.3), 1px 1px 2px 0px rgba(0,0,0,0.3);}
#osc_count_display span{color:white;}
#version_display{position:absolute;right:10px; display:block; font-size:5px; color:#fbcdbc;}
#links_display{position:absolute;left:65px;}

/* .slider{display:block;max-width:100px;} */
.parameter_display{position:relative;z-index:1; display:block;max-width:100%;font-size:8px; text-transform:capitalize;}
  .parameter_display_top{position:relative;z-index:1;top:0.5px; font-size:6px;}
  .waveform_display{width:37px;height:10px;background-image:url('images/waveforms.png');background-position:center;background-size:contain;background-repeat:no-repeat;}
  .w_d_5{width:49px;background-image:url('images/waveforms_5.png');}
  .filterform_display{width:37px;height:10px;background-image:url('images/filterforms.png');background-position:center;background-size:contain;background-repeat:no-repeat;}
  /* .octave_display{width:35px;height:7px;padding:0px 2.5px;margin:0px 0 1px 0; text-align:left;font-size:10.5px;letter-spacing:-2.5px;line-height:8px;color:#fd8755;-webkit-text-stroke: 0.5px #bf413f; background-color:#14203b;border:1px solid #0b101c;border-radius:3px;box-shadow:inset 0px 1px 2px 1px rgba(255,255,255,0.3), 1px 2px 3px 1px rgba(0,0,0,0.5); text-shadow:-0.5px -0.5px 1px black} */
  .octave_display{position:relative;z-index:0; width:35px;height:7px;padding:9px 2.5px 0px 2.5px;margin:-9px 0 0px 0; background-color:rgba(0,0,0,0.35);box-shadow:inset 2px 3px 8px 2px rgba(0,0,0,0.55); border-top:1px solid #0b101c;border-left:1px solid #0b101c;border-right:1px solid #0b101c; border-radius:4px 4px 0 0; text-align:left;font-size:10.5px;letter-spacing:-2.5px;line-height:8px;color:#fd8755;-webkit-text-stroke: 0.5px #bf413f; text-shadow:-0.5px -0.5px 1px black, 0px 0px 4px #fd8755, 0px 0px 2px #fd8755;}
  .sample_input{display:none;}
  .sample_display{top:8px;width:100%;height:9px; white-space:nowrap;overflow:hidden;}
  .sample_tooltip{display:none; position:absolute; top:28px;z-index:4; width:auto;min-width:100px;padding:5px 2px; pointer-events:none; font-size:8px; background-color:rgba(0,0,0,0.6);border:1px solid #bf413f;border-radius:8px; box-shadow:0px 0px 10px black; }
    .sample_display:hover ~ .sample_tooltip{display:block;}
  .name_display{overflow:hidden;white-space:nowrap;max-width:63px;}

.parameter_knob_wrapper{position:relative;; width:80%;margin:3px auto 2.5px auto; display:flex;flex-direction:row;align-items:center;justify-content:space-around; text-transform:capitalize;}
  .p_k_w_big{position:relative;width:80%;margin:0px auto 2px auto; justify-content:space-between; align-items:flex-start;}
  .p_k_w_txt{position:relative;width:85%;margin:1px auto -2px auto; font-size:8px; white-space:pre-wrap;}
  .p_k_w_vertical{flex-direction:column;}
  .p_k_w_small{position:absolute;left:7px;top:54px;width:71px;justify-content:space-between;}
  .p_k_w_small2{position:relative;width:100%;justify-content:center;padding:0;margin:0 0 6px 0;}
  .parameter_eq_wrapper{position:relative; width:100%; display:flex;justify-content:center;}
  .p_k_w_eq{position:relative;margin:1px auto -2px auto; font-size:8px; white-space:pre-wrap;}
.parameter_knob_container{position:relative; display:flex;align-items:center;justify-content:center; width:23px;height:23px;}
.parameter_knob_display{position:absolute;z-index:2; display:block;width:23px;height:23px;border-radius:100%; background-color:#702625; border:1px solid #14203b; rotate:-150deg; box-shadow:-6px -4px 6px 1px rgba(0,0,0,0.4); /*background-image:conic-gradient(#bf413f 0deg, #bf413f 100deg, #702625 100deg, #702625 360deg);*/}
.parameter_knob_line{position:absolute; display:block;width:2px;height:10px;top:-1px; border-radius:1px; background-color:#76a1c7; background-image:linear-gradient(to bottom, rgba(255,255,255,0.1) 0% , rgba(255,255,255,0.4) 20%);}
.parameter_knob{position:absolute;z-index:2; display:flex;align-items:flex-start;justify-content:center;width:20px;height:20px;border-radius:100%; background-color:#1c2e57; box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.5); border:1px solid #0b101c; rotate:0deg;}
  .parameter_knob{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.parameter_knob_tooltip{display:none;position:absolute;top:25px;z-index:4; width:auto;min-width:35px;max-width:50px;padding:5px 2px; pointer-events:none; font-size:8px; background-color:rgba(0,0,0,0.6);border:1px solid #bf413f;border-radius:8px; box-shadow:0px 0px 10px black;}


.k_c_big{width:44px;height:44px;}
.k_d_big{width:44px;height:44px;box-shadow:-9px -6px 6px 2px rgba(0,0,0,0.4);}
.k_l_big{width:2.5px;height:20px;border-radius:1px;}
.k_big{width:40px;height:40px; box-shadow:inset 0px 0px 2px 2px rgba(0,0,0,0.5);}
.k_t_big{top:46px;}

.k_c_top{width:16px;height:16px;margin-top:2px;}
.k_d_top{width:13px;height:13px;box-shadow:-6px -3px 6px 1px rgba(0,0,0,0.5);}
.k_l_top{width:1.5px;height:6px;top:0.5px;border-radius:1px;background-color:#bf413f;}
.k_top{width:16px;height:16px; border:1px solid #0b101c;background-color:#702625;box-shadow:inset 0px 0px 1px 0.5px rgba(0,0,0,0.7), inset 0px 0px 6px 0.5px rgba(255,255,255,0.3);}
.k_t_top{top:19px;}

.k_c_top2{width:16px;height:16px;margin-top:2px;}
.k_d_top2{width:16px;height:16px;box-shadow:-6px -3px 6px 1px rgba(0,0,0,0.5);}
.k_l_top2{width:1.5px;height:6.5px;top:0px;border-radius:1px;}
.k_top2{width:14px;height:14px; background-color:#1c2e57;box-shadow:inset 0px 0px 1px 0.5px rgba(0,0,0,0.7), inset 0px 0px 4px 0px rgba(255,255,255,0.2);}
.k_t_top2{top:19px;}

.k_c_small{width:10px;height:10px;margin-right:3px;}
.k_d_small{width:8px;height:8px;box-shadow:-4px -2px 5px 1px rgba(0,0,0,0.5);}
.k_l_small{width:1.5px;height:2px;top:0px;border-radius:1px;}
.k_small{width:10px;height:10px; background-color:#1c2e57;box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.7), inset 0px 0px 6px 0px rgba(255,255,255,0.4);}
.k_t_small{top:17px;}

/* SLIDER */
.parameter_fader_wrapper{position:relative;rotate:-90deg;height:70px;width:65px;top:-5px;left:-4px; display:flex;flex-direction:column;align-items:center;justify-content:center; background-image:url('images/fader_bg_h.png');background-position:center;background-size:43px;background-repeat:repeat-y; }
.parameter_fader_scale{position:absolute;right:2.5px;top:3.5px; display:block;height:auto; font-size:6px;line-height:10.8px;letter-spacing:-0.5px;text-align:center; color:#fbcdbc;}
.parameter_fader{position:relative;z-index:2; margin:0 auto 9px auto; max-width:50px;height:4px; display:block; box-shadow:inset -1px 1px 2px 0px black;}
.parameter_slider_wrapper{width:85%;margin-bottom:1px 0 2px 0; display:flex;flex-direction:row;align-items:center;}
.parameter_slider{position:relative;z-index:2; margin:0px auto 4px auto; max-width:80%;height:3px; display:block;}
.tooltip_slider{margin:0px auto; max-width:50px;height:8px; display:block; box-shadow:inset 1px 1px 2px 1px black;}
.p_s_small{max-width:40px;min-width:40px;height:9px; box-shadow:inset 1px 1px 2px 1px black;}
.p_s_5{max-width:52px;min-width:52px;height:9px; box-shadow:inset 1px 1px 2px 1px black;}
.p_s_meter{max-width:14px;height:6px; box-shadow:inset 1px 1px 2px 1px black;}
.p_s_type{max-width:20px;height:6px; margin:0.5px auto 7px auto; box-shadow:inset 1px 1px 2px 1px black;}
input[type=range]{transition:all 0.3s ease;}
input[type=range]{-webkit-appearance:none;width:80%;background:transparent; background-color:#702625;border:1px solid #14203b;border-radius:0px;}
input[type=range]:focus{outline:none;}
/* input[type=range]:hover{box-shadow:0px 0px 3px 0px #fd8755;} */
input[type=range]::-ms-track{width:80%;/*cursor:pointer;*/background:transparent;border-color:transparent;color:transparent; background-color:#702625;border:1px solid #14203b;border-radius:0px;}
/* WebKit/Blink */ input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:10px;width:6px; border:none;border-left:1px solid #0b101c;border-right:1px solid #0b101c; border-radius:0px; background-color:#76a1c7;/*cursor:pointer;*/}
/* Firefox */ input[type=range]::-moz-range-thumb{height:10px;width:6px; border:none;border-left:1px solid #0b101c;border-right:1px solid #0b101c; border-radius:0px; background-color:#76a1c7;/*cursor:pointer;*/}
/* IE */ input[type=range]::-ms-thumb{height:10px;width:6px; border:none;border-left:1px solid #0b101c;border-right:1px solid #0b101c; border-radius:0px; background-color:#76a1c7;/*cursor:pointer;*/}
.parameter_fader[type=range]{background-color:#8b3c3a;}
.parameter_fader[type=range]::-webkit-slider-thumb{ height:10px;width:8px;box-shadow:-2px 0px 4px black; border-radius:2px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%); }
.parameter_fader[type=range]::-moz-range-thumb{     height:10px;width:8px;box-shadow:-2px 0px 4px black; border-radius:2px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%); }
.parameter_fader[type=range]::-ms-thumb{            height:10px;width:8px;box-shadow:-2px 0px 4px black; border-radius:2px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%); }

.p_s_small[type=range]{background-color:#8b3c3a;margin-top:0;margin-bottom:1px;}
.p_s_small[type=range]::-webkit-slider-thumb{ height:9px;width:12px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_small[type=range]::-moz-range-thumb{     height:9px;width:12px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_small[type=range]::-ms-thumb{            height:9px;width:12px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }

.p_s_meter[type=range]{background-color:#8b3c3a;margin:0; border-radius:3px;}
.p_s_meter[type=range]::-webkit-slider-thumb{ height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_meter[type=range]::-moz-range-thumb{     height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_meter[type=range]::-ms-thumb{            height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }

.p_s_type[type=range]{background-color:#8b3c3a; border-radius:3px;}
.p_s_type[type=range]::-webkit-slider-thumb{ height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_type[type=range]::-moz-range-thumb{     height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.p_s_type[type=range]::-ms-thumb{            height:4px;width:6px;box-shadow:1px 2px 3px black; border-radius:30%; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }

.tooltip_slider[type=range]{background-color:#8b3c3a;}
.tooltip_slider[type=range]::-webkit-slider-thumb{ height:6px;width:14px;box-shadow:1px 2px 3px black; border-radius:4px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.tooltip_slider[type=range]::-moz-range-thumb{     height:6px;width:14px;box-shadow:1px 2px 3px black; border-radius:4px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }
.tooltip_slider[type=range]::-ms-thumb{            height:6px;width:14px;box-shadow:1px 2px 3px black; border-radius:4px; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0% , rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%); }

/* CHECKBOX / RADIO */
.parameter_toggle_label input, .parameter_select_label input{position:absolute;opacity:0;height:0;height:0;width:0;margin:0;}
.parameter_toggle_label, .parameter_select_label{display:inline-block;position:relative;}
.parameter_toggle_label input:focus, .parameter_select_label input:focus{outline:none;}
  .parameter_toggle_label input{position:absolute;opacity:0;height:0;height:0;width:0;margin:0;}
.parameter_toggle_checkmark{position:relative;display:inline-block;left:0;height:13px;width:13px;;background-color:#702625;border:1px solid #702625;border-radius:2px; box-shadow:inset -1px -1px 1px 0px rgba(0,0,0,0.9), inset 1px 1px 1px 0px rgba(255,255,255,0.4), 1px 2px 2px 1px rgba(0,0,0,0.4);}
.parameter_toggle_label input:checked ~ .parameter_toggle_checkmark{background-color:#fd8755;border:1px solid #702625; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.3), inset -1px -1px 1px 0px rgba(255,255,255,0.3), 0px 0px 5px 0px #fd8755, 1px 1px 2px 1px rgba(0,0,0,0.4);}
  .parameter_toggle_light{position:relative; top:-1px; display:inline-block;width:7px;height:7px;background-color:#0b101c; border:1px solid #702625;border-radius:100%; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.9), inset -1px -1px 1px 0px rgba(255,255,255,0.3); transition: all 0.05s;}
  .parameter_toggle_checkmark:active{background-color:#894a49; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.5), inset -1px -1px 1px 0px rgba(255,255,255,0.1), 1px 1px 2px 1px rgba(0,0,0,0.4);}

  .step_toggle_label{position:absolute;bottom:-17px; border-radius:5px;}
  .step_toggle_checkmark{height:10px;width:10px; border-radius:5px;}
  .step_toggle_label input:checked ~ .step_toggle_checkmark{}
  .step_toggle{}

.parameter_select_checkmark{position:relative;display:inline-block;top:-1px;left:0;height:11px;width:11px;padding:1px 1px 1px 1px;  border:1px solid #702625;border-radius:2px; text-shadow:none; background-color:#1c2e57;color:#76a1c7; box-shadow:inset -1px -1px 1px 0px rgba(0,0,0,0.9), inset 1px 1px 1px 0px rgba(255,255,255,0.4), 1px 2px 2px 1px rgba(0,0,0,0.4);}
.parameter_select_label input:checked ~ .parameter_select_checkmark{padding:1.5px 1px 0.5px 1px; border:1px solid #702625;border-radius:2px; background-color:#1c2e57;color:#fd8755; text-shadow:0px 0px 3px #fd8755, 0px 0px 5px #fd8755; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.9), inset -1px -1px 1px 0px rgba(255,255,255,0.3), 1px 1px 2px 1px rgba(0,0,0,0.4);}
  .parameter_select_checkmark:active{background-color:#14203b; padding:1.5px 1px 0.5px 1px; text-shadow:none; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.5), inset -1px -1px 1px 0px rgba(255,255,255,0.1), 1px 1px 2px 1px rgba(0,0,0,0.4);}

.p_t_l_top{position:absolute;top:0;right:5px;margin-top:0;}
.p_t_c_top{position:relative;display:inline-block;left:0;height:4px;width:13px; /*border:1px solid #0b101c;border-radius:2px; box-shadow:inset 1px 2px 2px rgba(0,0,0,0.6);*/}

/* .p_t_l_top input:checked ~ .p_t_c_top{} */
.p_t_top{}

  .p_t_l_small{position:absolute;top:-1px;right:-15px;}
.p_t_c_small{position:relative;display:inline-block;left:0;height:7px;width:7px; /*border:1px solid #0b101c;border-radius:2px; box-shadow:inset 1px 2px 2px rgba(0,0,0,0.6);*/}

.p_t_l_meter{position:absolute;right:0;top:-0.5px;margin-top:0;}
.p_t_l_oscilloscope{position:absolute;right:-11px;top:17px;margin-top:0;}

.parameter_sync_display{position:absolute;z-index:1;top:8px;right:0px; width:25px; font-size:7px; display:inline-block;max-width:100%; transition:all 0.3s ease; text-transform:capitalize;}
.parameter_toggle_display{position:relative;z-index:1;top:5px; font-size:7px;transition:all 0.3s ease; text-transform:capitalize;}
.parameter_toggle_display_top{position:relative;z-index:1;top:-2px; font-size:6px;transition:all 0.3s ease; text-transform:capitalize;}
.parameter_toggle_display_mid{position:relative;z-index:1;top:0; font-size:5px;transition:all 0.3s ease; text-transform:capitalize;}

.p_t_l_mid{width:7px;height:7px;}
.p_t_c_mid{width:7px;height:7px;}
.p_t_mid{width:7px;height:7px;}

.button_wrapper{margin-left:5px; display:flex;align-items:center;justify-content:center;flex-direction:column;}
  .b_w_horizontal{margin:2px 0 0 -2px;width:80%; display:flex;align-items:center;justify-content:space-between;flex-direction:row;}
  .b_w_mid{margin:0;}

.disabled{color:#b0b0b0;background-color:#444444; pointer-events:none;}

/* SCROLLBAR */
/* Hide scrollbar */
*::-webkit-scrollbar{display:none;}
*{-ms-overflow-style:none;scrollbar-width:none;}
*{-webkit-user-select:none;} /* Safari */
*{-ms-user-select:none;} /* IE 10 and IE 11 */
*{user-select:none;} /* Standard syntax */


/* METER */
meter {
  --background: #0b101c; --optimum: #76a1c7; --sub-optimum: #fd8755; --sub-sub-optimum: #bf413f;
  /* The gray background in Firefox */
  background: var(--background);display:block;margin-bottom:0;width:35px;height:4px;
}
/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {background: var(--background);}
/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {background: var(--optimum);}
/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {background: var(--optimum);}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {background: var(--sub-optimum);}
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {background: var(--sub-optimum);}
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {background: var(--sub-sub-optimum);}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {background: var(--sub-sub-optimum);}


/* IMAGES */
/* body{background-image:none;background-color:white;} */
body{background-image:url('images/body_bg2.jpeg');background-position:center;background-size:200px;background-repeat:repeat;}
.content_wrapper{background-image:url('images/bg1.jpeg');background-position:center 0px;background-size:cover;background-repeat:no-repeat;}
/* .content_wrapper{background-color:white;} */
#header_container{background-image:url('images/header1.jpeg');background-position:center 0px;background-size:cover;background-repeat:no-repeat;}
#steps_container{background-image:url('images/steps_bg.jpeg');background-position:center 0px;background-size:cover;background-repeat:no-repeat;}
.parameter_knob{background-image:url('images/knob_bg3.jpeg');background-position:center 0px;background-size:50px;background-repeat:no-repeat;}
.k_small{background-image:none;}
.k_top{background-image:none;}
/* #visualizer_canvas{background-image:url('images/display1.png');background-position:center 0px;background-size:cover;background-repeat:no-repeat;} */
#osc_count_display, .shell_display, .settings_display{background-image:url('images/display1.png');background-position:center 0px;background-size:60px;background-repeat:repeat;}
#logo_text{background-image:url('images/logo3.png');background-position:center;background-size:cover;background-repeat:no-repeat;}
#logo_display{background-image:url('images/bg2.jpeg');background-position:center;background-size:cover;background-repeat:no-repeat;}

.oscillator_display, .channel_display, .effect_display, .bank_display, .control_display{background-image:url('images/module_bg.png');background-position:top;background-size:cover;background-repeat:no-repeat;}
.step_tooltip{background-image:url('images/module_bg.png');background-position:bottom;background-size:cover;background-repeat:no-repeat;}


@media screen and (orientation:landscape) and (max-height: 450px)
{

}
@media screen and (orientation:portrait) and (max-width: 450px)
{
    #logo_display{display:none;}
    #logo_text{display:none;}
    #visualizer_container{display:none;}
    .control_display{min-width:calc(190px - 5px);}
    #steps_container{min-height:66px;}
    .settings_container{display:none;}
}