@font-face{font-family: marion_bold; src: url('fonts/Marion/MarionBold.ttf'); font-display:swap;}
@font-face{font-family: marion_regular; src: url('fonts/Marion/MarionRegular.ttf'); font-display:swap;}
@font-face{font-family: marion_italic; src: url('fonts/Marion/MarionItalic.ttf'); font-display:swap;}

*{font-size:14px;font-family:marion_regular, serif; cursor:pointer; -webkit-user-select: none;-ms-user-select:none;user-select:none;}
body{margin:0;position:fixed; display:flex;justify-content:center; color:#efd3f0; width:100vw;width:100dvw;height:100vh;height:100dvh; background-color:#09142d;}

#loading{position:fixed;z-index:100; top:0; width:100dvw;height:calc(100dvh - 20px);max-width:800px; display:flex;align-items:center;justify-content:center;flex-direction:column; background-color:#0c2759;background-image:url("images/bg.jpeg");background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;}
.loading_logo{display:block;width:335px;height:50px; background-image:url("images/logo_white.png");background-size:contain;background-position:center;background-repeat:no-repeat;}
#loading_text{display:block;}
#loading_start{display:block; padding:3px 10px;}
.loading_start_button{background-color:#0c2759;border-radius:5px;border:1px solid #e16fba;}
.loading_start_button:hover{background-color:#632250;border-color:#87c0e8;}

a{color:#642c68;}
header{width:100%;height:30px;padding:0 1%;max-width:800px; display:flex;align-items:center;justify-content:center; border-bottom:2px solid #f29078;box-sizing:border-box; background-color:#632250;}
  #logo{display:block;width:100%;height:37px; background-image:url("images/logo_orange.png");background-size:contain;background-position:-1% 50%;background-repeat:no-repeat;}
  #settings_btn, #load_btn, #save_btn, #saveMIDI_btn, #record_btn, #input_btn, #knob_btn{width:30px;height:30px; margin-left:10px;margin-top:-1px; background-position:center;background-size:90%;background-repeat:no-repeat;}
  #settings_close_btn{width:30px;height:30px;position:absolute;top:1%;right:2%; background-image:url("icons/close_icon_orange.png");background-position:center;background-size:70%;background-repeat:no-repeat;}
    #knob_btn{background-image:url("icons/knob_icon_orange.png");}
      .binding{animation: blink 0.5s infinite;}
    #record_btn{background-image:url("icons/record_icon_orange.png");}
      .recording{animation: blink 0.5s infinite;}
    #input_btn{background-image:url("icons/input_icon_orange.png");}
      .activeInput{background-image:url("icons/inputActive_icon_orange.png") !important;}
    #save_btn{background-image:url("icons/save_icon_orange.png");}
    #saveMIDI_btn{background-image:url("icons/saveMIDI_icon_orange.png");}
    #load_btn{background-image:url("icons/load_icon_orange.png");}
    #settings_btn{background-image:url("icons/setting_icon_orange.png");}
    #knob_btn:hover{background-image:url("icons/knob_icon_pink.png");}
    #input_btn:hover{background-image:url("icons/input_icon_pink.png");}
      .activeInput:hover{background-image:url("icons/inputActive_icon_pink.png") !important;}
    #record_btn:hover{background-image:url("icons/record_icon_pink.png");}
    #save_btn:hover{background-image:url("icons/save_icon_pink.png");}
    #saveMIDI_btn:hover{background-image:url("icons/saveMIDI_icon_pink.png");}
    #load_btn:hover{background-image:url("icons/load_icon_pink.png");}
    #settings_btn:hover{background-image:url("icons/setting_icon_pink.png");}
    #settings_close_btn:hover{background-image:url("icons/close_icon_pink.png");}
#settings{position:fixed;top:0;z-index:10; display:none;flex-direction:column;align-items:flex-start;justify-content:center; width:100%;height:100%;max-width:800px; overflow-y:auto; background-color:rgba(0,0,0,0.8);}
  .settings_panel{margin:5px 3%; box-sizing:border-box;}
    .settings_panel a{color:#efd3f0;}
    .settings_panel a:hover{color:#f29078;}
  .settings_btn{padding:1px 5px; line-height:20px; border-radius:4px; background-color:#af5653;}
  .settings_btn:hover{background-color:#87444c;}
  .settings_slct{padding:1px 5px; margin:1px 0; border:none; border-radius:4px; background-color:#af5653;}
  .settings_slct:hover{background-color:#87444c;}
  /* #settings *{font-family:sans-serif;} */
#content{position:fixed;top:30px;z-index:1; display:block; width:100%;height:calc(80% - 80px);max-width:800px; overflow-y:scroll; border-left:7px solid #071a44;box-sizing:border-box;  background-image:url("images/bg.jpeg");background-position:right;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;}
footer{position:fixed;bottom:0; width:100%;height:20px;padding:0 1%;max-width:800px; font-size:8px; text-align:center;text-transform:uppercase; display:flex;align-items:center;justify-content:center; border-top:2px solid #f29078;box-sizing:border-box; color:#af5653;background-color:#071a44;}
footer span{font-size:8px; color:#af5653;}
footer a{font-size:8px; color:#af5653;}
footer a:hover{color:#f29078;}

/* AudioElement */
.element{display:block; border-top:1px solid #071a44;}
.element_title{display:flex;align-items:center;justify-content:flex-start; background-color:#0c2759;color:#e16fba; padding:0.2% 1.5% 0.2% 1.5%; font-size:18px;text-align:left; font-family:marion_bold, serif; border-bottom:1px solid #e16fba;}
  .collapsible:hover{background-color:#071a44;}
.element_content{display:block; background-image:linear-gradient(to bottom, #0c2759 50%, rgba(0,0,0,0));}

/* Parameter */
.parameter{width:45%;min-height:22px;display:inline-flex;align-items:center;justify-content:center; padding:2px 2%;margin:2px 0.5%; background-color:#7f488f; border-radius:5px;}
  .parameter_title{display:inline-block; width:26%;padding:0.5% 2%; background-color:#0c2759;color:#87c0e8; overflow:hidden; border-radius:5px;}
  .parameter_value{display:inline-block; width:23%;padding:0 2% 0 0; text-align:right;text-transform:capitalize; overflow:hidden;}
  .file_value{width:48%;}
  .targeting{font-style:italic;font-weight:bold;}

/* Sequencer step */
.sequencer{width:100%; height:auto;display:flex;flex-wrap:wrap;}
.step_container{width:calc(100% - (5.55% * 2));height:auto;display:flex;flex-wrap:wrap;}
.step_button_container{display:flex; width:5.55%;height:120px; flex-direction:column;justify-content:center; border:1px solid #87c0e8;box-sizing:border-box; background-color:#0c2759;}
  .step{position:relative;width:6.25%;height:30px;padding:2px 1%; display:flex;align-items:flex-end;justify-content:flex-start; border:1px solid #f29078;box-sizing:border-box; background-color:#632250;color:#efd3f0; font-family: marion_bold, serif;font-size:16px;}
  .step_inner{display:block;position:absolute;top:-1px;right:-1px;z-index:1; width:12px;height:8px;padding:1px 0px 3px 0px; text-align:center;font-family:marion_bold,serif;text-align:center; font-size:10px;line-height:10px; border:1px solid #0c2759;border-radius:100%; background-color:#f29078;color:#071a44;}
  .step_inner_accent{display:block;position:absolute;top:-1px;left:-1px;z-index:1; width:10px;height:8px;padding:1px 0px 3px 0px; text-align:center;font-family:marion_bold,serif;text-align:center; font-size:10px;line-height:10px;}
  .step_select{width:100%;height:25%;padding:2px 1%; display:flex;align-items:center;justify-content:center; border-top:1px solid #071a44;border-bottom:1px solid #071a44;box-sizing:border-box; font-family:marion_bold, serif; background-color:#0c2759;color:#87c0e8;}
  .step_button{width:100%;height:25%;padding:2px 1%; display:flex;align-items:center;justify-content:center; border-top:1px solid #071a44;border-bottom:1px solid #071a44;box-sizing:border-box; font-size:24px; background-color:#0c2759;color:#87c0e8;}
    .step_select:hover, .step_button:hover{background-color:#87c0e8;color:#071a44;}
    .step_select_active{color:#071a44;background-color:#87c0e8;}

  .step:hover{background-color:#7f488f;}
  .step_quarter{background-color:#7e2965;}
  .selected, .selected:hover{color:#0c2759;background-color:#f29078;}
  .selected_bank{border-color:#87c0e8;}
  .current{background-color:#7f488f !important;}

/* Input */
.slider{width:45%;}
.button{width:45%;height:20px;}
button, input[type="button"], label{box-sizing:border-box;border:1px solid #632250;outline:none; border-radius:5px; color:#0c2759;background-color:#f29078; text-transform:uppercase;font-family:Helvetica,sans-serif;font-size:12px;}
  #step_accent_button{position:absolute; left:37%;width:10%;}
  #step_clear_button{position:absolute; left:48%;width:10%;}
  #bank_clear_button{position:absolute; left:2%;width:10%;background-color:#87c0e8;color:#071a44;}
  #bank_copy_button{position:absolute; left:13%;width:10%;background-color:#87c0e8;color:#071a44;}
  #bank_paste_button{position:absolute; left:24%;width:10%;background-color:#87c0e8;color:#071a44;}
  #step_accent_button, #step_clear_button, #bank_clear_button, #bank_copy_button, #bank_paste_button{pointer-events:all;}
  button:hover, input[type="button"]:hover, #step_accent_button:hover, #step_clear_button:hover, #bank_clear_button:hover, #bank_copy_button:hover, #bank_paste_button:hover{background-color:#b35ab9;}
select{outline:none;color:#efd3f0;}
input[type="file"]{display:none;}
.file_label{width:20%;height:20px; display:flex;align-items:center;justify-content:center; box-sizing:border-box;border:1px solid #632250;outline:none; border-radius:5px; color:#0c2759;background-color:#f29078;}
  .file_label:hover{background-color:#b35ab9;}
  .fileAlternative{display:none;}
.button_disabled{background:grey !important;pointer-events:none !important;}
.button_invisible{display:none !important;pointer-events:none !important;}


/* SLIDERS */
/*Chrome*/
input[type='range']{overflow:hidden;width:45%;height:18px;-webkit-appearance:none;background-color:#af5653; border:1px solid #632250;border-radius:5px;}
input[type='range']::-webkit-slider-runnable-track {height:18px;-webkit-appearance:none;color:#f29078;margin-top:-4px;}
input[type='range']::-webkit-slider-thumb {width:20px;-webkit-appearance:none;height:20px;background:#0c2759;box-shadow:-200px 0 0 200px #f29078;}
input[type='range']::-webkit-slider-thumb:hover{background:#b35ab9;}
/** FF*/
input[type="range"]::-moz-range-progress{background-color:#f29078; }
input[type="range"]::-moz-range-track{background-color:#af5653;}
input[type="range"]::-moz-range-thumb{width:20px;appearance:none;height:20px;background:#0c2759;box-shadow:-200px 0 0 200px #f29078;border:none;border-radius:0;}
input[type="range"]::-moz-range-thumb:hover{background:#b35ab9;}
input[type="range"]::-moz-range-thumb:active{background:#b35ab9;}
/* IE*/
input[type="range"]::-ms-fill-lower{background-color:#f29078;}
input[type="range"]::-ms-fill-upper{background-color:#af5653;}


/* Step setting & fingerboard */
#step_setting{position:absolute;bottom:calc(20% + 20px); display:flex;align-items:center; width:100%;height:26px;max-width:800px; background-color:#0c2759; border-top:4px solid #203f78;}
#octave_display{position:absolute; right:24%;width:9%; text-align:center; }
#octave_down_button{position:absolute; right:33%; width:7%;}
#octave_up_button{position:absolute; right:17%; width:7%;}
  .mute_button{position:absolute; right:2%; width:12%;}
  .fingerboard_mute_active{background-color:#b35ab9;}

/* Fingerboard */
#fingerboard{position:absolute;bottom:20px; display:flex;justify-content:center;align-items:center; width:100%;height:20%;max-width:800px; background-color:#632250;}
.key{margin:0;padding:0; display:inline-flex;justify-content:center;align-items:flex-end;position:relative; border:2px solid #071a44;border-radius:0; font-family:marion_bold, serif;font-size:14px; box-sizing:border-box;}
  .key_white{width:7.1%;height:89.5%; bottom:0%;z-index:1; margin-left:-2.5%; padding-bottom:0.5%; background-color:#efd3f0;color:#0c2759;}
  .key_black{width:5%;height:59.5%; bottom:15%;z-index:2; margin-left:-2.5%; padding-bottom:0.5%; background-color:#071a44;color:#87c0e8;}
  .key_no_margin{margin-left:0;}
    .key_white:hover{background-color:#87c0e8;}
    .key_black:hover{background-color:#87c0e8;color:#0c2759;}
.keyboard_key_display{position:absolute;font-size:9px; width:12px;height:12px; display:flex;align-items:center;justify-content:center; background-color:#efd3f0;color:#071a44; box-sizing:border-box;border:1px solid black;border-radius:100%;}
  .key_white .keyboard_key_display{bottom:16%;}
  .key_black .keyboard_key_display{bottom:23%;}
  .playing{background-color:#e16fba;}

/* Visualizer */
.visualizer_canvas{display:block; position:absolute; width:128px;height:15px; margin:0 0.5%; border-bottom:1px solid #7f488f;border-top:1px solid #7f488f; overflow:hidden;}

/* Scrollbr */
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:#071a44;}
::-webkit-scrollbar-thumb{background:#203f78;}
::-webkit-scrollbar-thumb:hover{background:#7f488f;}
#content{scrollbar-width:thin;scrollbar-color:#203f78 #071a44;}

/* Console */
#debug_btn{}
#console{position:fixed; right:0;top:0;z-index:99; height:100dvh;width:320px;max-width:100dvw; color:#e3e3e3;background-color:#252525;border-left:2px solid #5e5e5e; transition:all 0.3s ease;}
.console_hidden{display:none;}
.console_shrinked{margin-right:-300px;}
.console_header{position:absolute;top:0;left:0; width:100%;height:25px; display:flex;align-items:center;justify-content:flex-end; background-color:#3b3b3b;}
  .console_button{height:100%;min-width:20px;padding:0 10px; display:flex;align-items:center;justify-content:center; font-family:sans-serif;font-size:12px;text-transform:capitalize;}
  .console_button_expand{position:absolute;left:0; height:100%;width:15px;padding:0; display:flex;align-items:center;justify-content:center; font-family:sans-serif;font-size:12px;text-transform:capitalize;font-weight:bold;}
  .console_button:hover{background-color:#5e5e5e;}
.console_content{display:flex;flex-direction:column;align-items:center; position:absolute;top:25px;left:0; width:99.5%;height:calc(100% - 25px);padding:0 2px; box-sizing:border-box; cursor:text;-webkit-user-select:auto;-ms-user-select:auto;user-select:text;}

.message{display:inline-block; width:100%;padding:5px 10px;margin:2px 0; box-sizing:border-box; font-size:10px;font-family:monospace;word-break:break-word;white-space:pre-line; border-radius:5px; cursor:text;-webkit-user-select:auto;-ms-user-select:auto;user-select:text;}
.log{color:#e3e3e3; border-bottom:1px solid #5e5e5e; border-radius:0;}
.info{color:#9ebbec;background-color:#253145;}
.debug{color:#b8b8b8; border-bottom:1px solid #5e5e5e; border-radius:0;}
.warn{color:#f8eea7;background-color:#3f3a25;}
.error{color:#c6c5c5;background-color:#4e3434;}

/* Animations */
@keyframes blink
{
    0%    {opacity:1.0;}
    50%   {opacity:0.2;}
    100%  {opacity:1.0;}
}

@media only screen and (max-height: 500px) and (orientation: landscape)
{
    .keyboard_key_display{display:none;}
}
@media only screen and (max-width: 500px) and (orientation: portrait)
{
    *{font-size:11px;}
    #loading{height:calc(100dvh - 10px)}
    .loading_logo{width:230px;height:40px;}
    header{height:15px;}
      #logo{height:17px;}
      #settings_btn, #save_btn, #saveMIDI_btn, #load_btn, #record_btn, #input_btn, #knob_btn{width:15px;height:15px; margin-left:10px;}
      #settings_close_btn{width:15px;height:15px;}
    #content{top:15px;height:calc(80% - 55px);}
    .settings_btn{line-height:16px;}
    footer{height:10px;font-size:6px;}
    footer a{font-size:6px; color:#af5653;}

    .element_title{font-size:14px;}

    button, input[type="button"], label{font-size:10px;}
    .parameter_value{width:25%;padding:0; text-align:center;}
    .file_label{width:23%;}

    .step_button_container{height:80px;}
    .step, .step_select{height:20px; padding:1px 0.5%; font-size:14px;}
    .step_button{height:20px;padding:1px 0.5%; font-size:20px;}
    .step_inner{width:10px;height:6px; font-size:8px;line-height:8px;}
    .step_inner_accent{width:9px;height:6px; font-size:8px;line-height:8px;}

    #step_setting{bottom:calc(20% + 10px);}

    #fingerboard{bottom:10px;}
    .key{font-size:2vw;border-width:1px;}
    .keyboard_key_display{display:none;}

    .visualizer_canvas{width:64px;height:7px; border-radius:3px;}
}
@media only screen and (max-width: 450px) and (orientation: portrait)
{
    *{font-size:10px;}
    button, input[type="button"], label{font-size:9px;}
    .loading_logo{width:215px;height:35px;}
    .step, .step_select{font-size:12px;}
    .step_button{font-size:18px;}
    .step_inner{width:8px;padding: 0px 0px 2px 0px;}
    .step_inner_accent{width:8px;padding: 0px 0px 2px 0px;}
    .settings_btn{line-height:15px;}
}
@media only screen and (max-width: 400px) and (orientation: portrait)
{
    *{font-size:9px;}
    button, input[type="button"], label{font-size:8px;}
    .step, .step_select{font-size:11px;}
    .step_button{font-size:16px;}
    .loading_logo{width:200px;height:30px;}
    .settings_btn{line-height:14px;}
}
@media only screen and (max-width: 350px) and (orientation: portrait)
{
    *{font-size:8px;}
    button, input[type="button"], label{font-size:7px;}
    .step, .step_select{font-size:11px;}
    .step_button{font-size:15px;}
    .loading_logo{width:180px;height:30px;}
    .settings_btn{line-height:13px;}
}
@media only screen and (max-width: 330px) and (orientation: portrait)
{
    *{font-size:7px;}
    button, input[type="button"], label{font-size:6px;}
    .step, .step_select{font-size:10px;}
    .step_button{font-size:14px;}
    .loading_logo{width:160px;height:30px;}
    .settings_btn{line-height:12px;}
}

/* COLORS
dark blue: #071a44
  dark blue alt: #09142d (bg)
mid blue: #0c2759
  mid blue alt: #203f78
light blue: #87c0e8

dark pink: #632250
  dark pink alt: #7e2965
mid pink: #7f488f
light pink: #e16fba

dark orange: #87444c
mid orange: #af5653
light orange: #f29078

main light: #efd3f0
*/