*{cursor:pointer;}
body{position:fixed; display:flex;align-items:center;justify-content:center; margin:0; width:100vw;width:100dvw;height:100vh;height:100dvh; font-family:monospace;font-size:1.6vw;text-transform:uppercase; color:#111111;background-color:#f2f2f2;}
.content_wrapper{position:relative; margin-top:-13vw;width:90vw;height:64vw;max-width:900px;max-height:600px;}

.container{position:relative; display:flex;align-items:center;justify-content:space-between;}

#header_container{height:4%; background-color:lightgrey; }
    #menu_container{width:60%;height:100%; display:flex;align-items:center;justify-content:space-around;}
    #file_control_container{width:auto; display:flex;align-items:center;justify-content:space-around;}
    .file_record_btn_active{background-color:darkred;color:red;}
    #logo{width:10%;height:100%; display:block; background-color:red;}

#settings_container{height:45%; border-radius:0 0 0.5vw 0.5vw; background-color:grey;}
    .screen{display:none; align-items:center;justify-content:center; height:100%;width:99.5%;}
        .screen_active{display:flex;}
        .settings_panel{position:relative;height:90%;width:50%;margin:0 0 0 0.5%;padding:1% 0; display:flex;flex-direction:column;align-items:center;justify-content:center; background-color:lightgrey;}
            .settings_sub_panel{width:90%; display:flex; flex-direction:row;align-items:center;justify-content:space-around;}
            .settings_panel_more_margin_bottom{margin-bottom:1vw;}
            .settings_panel_small_margin_top{margin-top:1vw;}
            .settings_panel_more_margin_top{margin-top:2vw;}
            .settings_panel_add{height:90%;width:60%;margin:0;padding:1% 0; display:none;flex-direction:column;align-items:center;justify-content:center; background-color:lightblue;}
            .settings_panel_add2{position:relative;height:90%;width:100%;margin:0;padding:1% 0; display:none;flex-direction:column;align-items:center;justify-content:center; background-color:lightblue;}
            .settings_panel_text_add2{position:absolute;height:100%;width:100%;margin:0;padding:0; display:block;flex-direction:column;align-items:center;justify-content:center;}
                .settings_panel_add_active{display:flex;}
                .synth_wrapper{height:140px;width:100%;margin-left:10%; display:none;}
            .settings_panel_name{position:absolute;top:1%;z-index:2; width:100%; text-align:center; margin:0;padding: 0 1%; font-size:1.4vw;font-family:monospace;text-transform:uppercase;text-align:center; background:none; border:none;outline:none;}
            .settings_panel_control{width:100%; margin-bottom:0.3vw; display:flex;justify-content:center;align-items:center;flex-direction:column; pointer-events:none;}
                .settings_panel_control_start{align-items:flex-start;}
                .settings_panel_control_name{position:relative;z-index:1;margin-top:0.6vw;margin-bottom:0.3vw; text-align:center; font-size:1.0vw;}
            .settings_panel_meter{width:100%; margin-bottom:1vw; display:flex;justify-content:center;align-items:center;flex-direction:column;}
                .settings_panel_meter_container{position:relative;top:0.5vw; width:6vw;height:10.5vw; display:flex;align-items:center;justify-content:flex-end;}
                .settings_panel_meter_display{position:relative; width:1.5vw;height:100%;margin:0 0.25vw; border:0.2vw solid black;border-radius:0.3vw; display:block; background-color:black;}
                    .settings_panel_meter_fill{position:absolute;bottom:0; width:100%;height:0%; background-color:lightgreen;}
                    .settings_panel_meter_graphicL{position:absolute;bottom:0; width:100%;height:100%;}
                    .settings_panel_meter_graphicR{position:absolute;bottom:0; width:100%;height:100%;}
        .program_image{width:150%; background-color:red;}
        .program_info{width:200%;}

#control_bank_pattern_container{display:block; border-radius:0.5vw 0.5vw 0 0;border-top:0.5vw solid black;border-bottom:0.5vw solid black;margin-top:0.5vw;}
    #pattern_remove_part_btn{width:3vw; display:flex;align-items:center;justify-content:center; background-color:darkgrey;}
    #pattern_add_part_btn{width:3vw; display:flex;align-items:center;justify-content:center; background-color:darkgrey;}
    .pattern_wrapper{width:100%; display:flex;}
    .pattern_part{width:3vw; border:0.1vw solid black; display:none;align-items:center;justify-content:center; background-color:lightgrey;}
    .pattern_part_visible{display:flex;}
    .pattern_part_active{background-color:lightgreen;}

#steps_container{height:calc(44% + 3vw); display:flex;flex-direction:column; background-color:grey;}
    .steps_wrapper{width:100%; display:flex;flex-direction:column;}
    .steps_select_btn{position:absolute;width:3vw;height:3vw; background-color:lightblue;}
    .steps_mute_btn{position:absolute;left:calc(12% + 3vw);width:2.8vw;height:2.8vw; padding:0.1vw; display:flex;align-items:center;justify-content:center; background-color:orange;}
        .mute_btn_active{padding:0.2vw 0vw 0vw 0.2vw;}
    .steps_solo_btn{position:absolute;left:calc(12% + 6vw);width:2.8vw;height:2.8vw; padding:0.1vw; display:flex;align-items:center;justify-content:center; background-color:yellow;}
    .steps_name{position:absolute;left:3vw;width:10%;height:3vw; margin:0;padding:0 1%; font-size:1.4vw;font-family:monospace;text-transform:uppercase;text-align:center; background-color:lightgrey; border:none;outline:none;}
    .steps_steps{margin-left:calc(12% + 9vw);width:calc(88% - 9vw); display:flex;align-items:center;justify-content:space-around; background-color:lightgrey;}
        .steps_step{width:5vw;height:3vw; display:flex;align-items:center;justify-content:center;}
        .step_btn{}
    .steps_accents{padding-left:calc(12% + 9vw);width:calc(88% - 9vw);padding-top:0.4vw;height:3.6vw; display:none;align-items:center;justify-content:space-evenly; background-color:lightblue;}
        .steps_accents_active{display:flex;}
        .steps_accent{width:5vw;height:100%; display:flex;align-items:center;justify-content:center;}
            .accent_control{width:100%;height:3.5vw; display:flex;align-items:center;justify-content:center;}

#control_container{width:100%;height:8vw; display:flex;flex-direction:row;align-items:center;justify-content:center; background-color:darkgrey;}
    #control_bank_control_container{position:relative;display:flex;align-items:center;justify-content:flex-end;}
    .current_steps{width:calc(88% - 9vw);display:flex;align-items:center;justify-content:space-around;}
    .control_current_step{height:2.3vw;width:4.8vw; margin:0;padding:0.1vw 0.1vw 0.1vw 0.1vw; display:flex;align-items:center;justify-content:center; background-color:darkgrey;}
        .control_current_step_active{background-color:red;}
        .control_current_step_selected{background-color:white;padding:0.2vw 0vw 0vw 0.2vw;}
    .control_copy_btn{position:absolute;left:0.2vw;top:0.5vw;width:6vw;height:1.5vw; font-size:1.1vw; display:flex;align-items:center;justify-content:center; background-color:yellow;}
    .control_paste_btn{position:absolute;left:6.5vw;top:0.5vw;width:6vw;height:1.5vw; font-size:1.1vw; display:flex;align-items:center;justify-content:center; background-color:yellow;}
    .control_solo_btn{position:absolute;left:calc(12% + 4vw);width:4vw;height:2.3vw; padding:0.1vw; display:flex;align-items:center;justify-content:center; background-color:yellow;}
        .solo_btn_active{padding:0.2vw 0vw 0vw 0.2vw;}

#foot_container{height:2%;background-color:lightgrey; font-size:0.8vw;text-transform:uppercase; display:flex;align-items:center;justify-content:center;}
#foot_container a{padding:0 0.2vw;color:black;text-decoration:none;}
#foot_container a:hover{color:grey;}

/* /////// */
.menu_btn{position:relative;width:33%;height:100%; font-size:1.4vw; display:flex;align-items:center;justify-content:center; background-color:darkgrey; }
    /* .menu_btn:hover{background-color:grey;} */
    .menu_btn_active{z-index:2;color:white;background-color:grey;}
.btn{background-color:grey;width:6vw;margin:0 0.2vw;height:1.5vw; font-size:1.1vw; display:flex;align-items:center;justify-content:center; background-color:yellow;}
    /* .btn:hover{color:white;background-color:black;} */
        .start_btn{position:relative;height:4vw;width:4vw;margin:0 0.5vw;padding:1vw; font-size:1vw; background-color:grey; display:flex;align-items:flex-end;justify-content:center; border-radius:0.5vw;border:0.1vw solid black; box-shadow:0.1vw 0.1vw 0.3vw 0vw rgba(0,0,0,0.5), inset -0.2vw -0.2vw 0.2vw 0vw rgba(0,0,0,0.3);}
        .start_btn_light{position:absolute;width:1.5vw;height:0.5vw;top:1vw; background-color:darkgrey; border-radius:0.2vw;}
        .start_btn_active{padding:1.2vw 0.8vw 0.8vw 1.2vw;box-shadow:0.1vw 0.1vw 0.3vw 0vw rgba(0,0,0,0.5), inset 0.2vw 0.2vw 0.1vw 0vw rgba(0,0,0,0.3);}
        .start_btn_light_active{top:1.2vw;background-color:yellow;}
    .mute_btn_active{background-color:yellow;}
    .solo_btn_active{background-color:white;}
    .disabled{background-color:lightgrey;color:grey;pointer-events:none;}

*{-webkit-user-select:none; -ms-user-select:none; user-select:none;}

/* BIG SCREEN : FIXED SIZES */
@media screen and (min-width: 900px)
{
      /* 0.1vw = 1px, 0.5vw = 4.5px, 1vw = 9px, 2vw = 18px, 3vw = 27px, 3vw = 36px */
      body{font-size:14px;}
      .content_wrapper{margin-top:-110px;width:804px;height:600px;}

      #settings_container{border-radius:0 0 4.5px 4.5px; height:258px;}
        .screen{height:258px;width:800px;}
            .settings_panel{height:232px;width:50%;margin:0 0 0 0.5%;padding:1% 0;}
                .settings_sub_panel{width:90%;}
                .settings_panel_more_margin_bottom{margin-bottom:9px;}
                .settings_panel_small_margin_top{margin-top:9px;}
                .settings_panel_more_margin_top{margin-top:18px;}
                .settings_panel_add{height:90%;width:60%;margin:0;padding:1% 0;}
                .settings_panel_add2{height:90%;width:100%;margin:0;padding:1% 0;}
        .settings_panel_name{height:14.5px; font-size:12.5px;}
        .settings_panel_control{margin-bottom:2.6px;}
          .settings_panel_control_name{margin-top:5.5px;margin-bottom:3px;font-size:9px;}
          .settings_panel_meter{margin-bottom:9px;}
            .settings_panel_meter_container{top:4.5px; width:54px;height:94px;}
            .settings_panel_meter_display{width:13.5px;margin:0 2.25px; border:2px solid black;border-radius:3.5px;}
            .program_image{width:150%;}
            .program_info{width:200%;}

      #control_bank_pattern_container{border-radius:4.5px 4.5px 0 0; border-top:4.5px solid black;border-bottom:4.5px solid black;margin-top:4.5px;}
          #pattern_remove_part_btn{width:27px;}
          #pattern_add_part_btn{width:27px;}
          .pattern_wrapper{}
          .pattern_part{width:27px; border:1px solid black;}
          .pattern_part_visible{}

      #steps_container{height:280px;}
          .steps_select_btn{width:27px;height:27px;}
          .steps_mute_btn{left:123px;width:25px;height:25px;padding:1px;}
          .steps_solo_btn{left:150px;width:25px;height:25px;padding:1px;}
          .steps_name{left:27px;width:80px;height:27px;padding:0 8px; font-size:12.5px;}
          .steps_steps{margin-left:177px;width:627px;}
              .steps_step{width:41px;height:27px;}
          .steps_accents{padding-left:177px;width:627px;height:32px;padding-top:3.5px;}
              .steps_accent{width:39px;height:36px;}
                  .accent_control{width:37.5px;height:31.5px;margin:0 1px;}

      #control_container{width:804px;height:71px;}
          #control_bank_control_container{}
          .current_steps{width:627px;}
          .control_current_step{height:20px;width:36px;padding:1px;}
            .control_current_step_selected{padding:1.7px 0 0 1.7px;}
          .control_solo_btn{left:133px;width:35px;height:20.5px;padding:1px;}
          .control_copy_btn{top:4.5px;left:1.8px;width:54px;height:13.5px; font-size:10px;}
          .control_paste_btn{top:4.5px;left:58px;width:54px;height:13.5px; font-size:10px;}

          .mute_btn_active{padding:2px 0 0 2px;}
          .solo_btn_active{padding:2px 0 0 2px;}

      #foot_container{height:12px;font-size:7px;}
      #foot_container a{padding:0 1.8px;}

      .menu_btn{font-size:12px;}
      .btn{font-size:10px;}
      .btn{background-color:grey;width:54px;margin:0 2px;height:13.5px; font-size:10px;}
          .start_btn{position:relative;height:36px;width:36px;padding:9px;margin:0 4.5px; font-size:9px; display:flex;align-items:flex-end;justify-content:center; border-radius:4.5px;border:0.5px solid black; box-shadow:1px 1px 3px 0 rgba(0,0,0,0.5), inset -2px -2px 2px 0 rgba(0,0,0,0.3);}
          .start_btn_light{position:absolute;width:14px;height:4.5px;top:9px; background-color:darkgrey; border-radius:2px;}
          .start_btn_active{padding:11px 7px 7px 11px;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.5), inset 2px 2px 1px 0 rgba(0,0,0,0.3);}
          .start_btn_light_active{top:11px;background-color:yellow;}
}