/*
black: #10101a
brown: #6f453b // UNUSED
bluegrey: #7f8c8d
darkbluegrey: #6b8b8e
red: #e35935
orange: #f5ac3e
green: #a0eb98
yellowlight: #f4e6c4
greengreylight: #dee8dd
*/
@font-face {
  font-family: g_bold;
  src: url(fonts/Gontserrat-Bold.ttf);
}
@font-face {
  font-family: g_light;
  src: url(fonts/Gontserrat-ExtraLight.ttf);
}
@font-face {
  font-family: g_regular;
  src: url(fonts/Gontserrat-Regular.ttf);
}
body{background-color:#280b03;color:#f4e6c4; font-family:g_light;}
.content_wrapper{border-radius:2.2vw 2vw 0 0;border-top:0.3vw solid #e35935;}
#header_container{border-radius:2vw 1.7vw 0 0;overflow:hidden; background-image:url("../images/bg_header.jpeg");background-position:center;background-size:cover;}
#logo{background-color:#e35935;}

#settings_container{background-color:#10101a;}
.settings_panel{background-color:#7f8c8d; border-radius:0.3vw; /*box-shadow:inset 1vw 2vw 3vw 0vw rgba(255,255,255,0.3), inset -1vw -2vw 3vw 0vw rgba(0,0,0,0.3);*/ background-image:url("../images/bg1.jpeg");background-position:center;background-size:cover;}
.settings_panel_add{background-color:#7f8c8d; border-left:0.2vw solid #10101a; /*box-shadow:inset 1vw 2vw 3vw 0vw rgba(0,0,0,0.5);*/ background-image:url("../images/bg_add1.jpeg");background-position:center;background-size:cover;}
.settings_panel_add2{background-color:#7f8c8d; border-left:0.2vw solid #10101a; /*box-shadow:inset 1.5vw 2.5vw 4vw 1vw rgba(0,0,0,0.5);*/ background-image:url("../images/bg_add.jpeg");background-position:center;background-size:cover;}
/* .settings_panel_text_add2{background-image:url("../images/text_add2.png");background-position:center;background-size:105%;} */
.settings_panel_channel{background-image:url("../images/bg_channels.jpeg");background-position:center;background-size:cover;}
.settings_panel_effects{background-image:url("../images/bg_effects.jpeg");background-position:center;background-size:cover;}
.settings_panel_settings1{background-image:url("../images/bg_settings1.jpeg");background-position:center;background-size:cover;}
.settings_panel_name{color:#f4e6c4; font-family:g_bold; text-shadow:0.1vw 0.1vw 0.1vw rgba(0,0,0,0.6);}
.settings_panel_control_name{text-shadow:0.05vw 0.05vw 0.1vw rgba(0,0,0,0.6);}
.program_info{background-image:url("../images/bg_settings2.jpeg");background-position:top;background-size:cover;background-repeat:no-repeat;}
.program_image{background-image:url("../images/bg_image.jpeg");background-position:top;background-size:cover;background-repeat:no-repeat;}
.settings_panel_meter_display{border-color:#10101a;box-shadow:0.1vw 0.1vw 1vw 0.1vw rgba(0,0,0,0.6);}
.settings_panel_meter_graphicL{background-image:url("../images/meter_displayL.png");background-position:top;background-size:cover;background-repeat:no-repeat;}
.settings_panel_meter_graphicR{background-image:url("../images/meter_displayR.png");background-position:top;background-size:cover;background-repeat:no-repeat;}
.settings_panel_meter_fill{background-color:#a0eb98;box-shadow:0vw 0vw 3vw 0.5vw;color:#a0eb9880;}

#control_bank_pattern_container{box-shadow:inset 0vw 0.5vw 2vw 1vw rgba(0,0,0,0.6); background-image:url("../images/bg_pattern.jpeg");background-position:center;background-size:cover;}
    #pattern_remove_part_btn{color:#f5ac3e;background-color:unset;}
    #pattern_add_part_btn{color:#f5ac3e;background-color:unset;}
    .pattern_wrapper{}
    .pattern_part{font-size:1.4vw;font-family:g_bold;margin-left:0.2vw;border-color:#e35935;color:#f5ac3e;background-color:#10101a;}
    .pattern_part_active{background-color:#e35935;color:#10101a;}

#steps_container{background-color:#10101a;}
.steps_accents{border-radius:0 0 1vw 1vw; box-shadow:inset 0vw 2vw 4vw 1vw rgba(0,0,0,0.7); background-image:url("../images/bg_accents.jpeg");background-position:center;background-size:cover;}
.steps_steps{background-color:#dee8dd; border-radius:0 1vw 1vw 0; box-shadow:inset 0.5vw 1vw 0.5vw 0vw rgba(255,255,255,0.3), inset -1vw -0.5vw 0.5vw 0vw rgba(0,0,0,0.6); background-position:center;background-size:cover;}
  #steps_steps1{background-image:url("../images/bg_steps1.jpeg");}
  #steps_steps2{background-image:url("../images/bg_steps2.jpeg");}
  #steps_steps3{background-image:url("../images/bg_steps3.jpeg");}
  #steps_steps4{background-image:url("../images/bg_steps4.jpeg");}
  #steps_steps5{background-image:url("../images/bg_steps5.jpeg");}
  #steps_steps6{background-image:url("../images/bg_steps6.jpeg");}
  #steps_steps7{background-image:url("../images/bg_steps7.jpeg");}
  #steps_steps8{background-image:url("../images/bg_steps8.jpeg");}
  .steps_name{font-family:g_regular; color:#f4e6c4;background-color:#7f8c8d; text-shadow:0.1vw 0.1vw 0.1vw rgba(0,0,0,0.6);}
.steps_select_btn{border-radius:1vw 0 0 1vw;background-color:#7f8c8d; background-image:url("../images/icon_arrow_right.png");background-position:center;background-size:65%;background-repeat:no-repeat;}
    .steps_select_btn_active{background-color:#e35935;background-image:url("../images/icon_arrow_down.png");}
.steps_mute_btn{font-family:g_bold;font-size:1.4vw;height:2.7vw; border:0.1vw solid #10101a; background-color:#6b8b8e;color:#10101a; box-shadow:inset -0.1vw -0.1vw 0.5vw 0.1vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.5vw 0.1vw rgba(255,255,255,0.6);}
.steps_solo_btn{font-family:g_bold;font-size:1.4vw;height:2.7vw; border:0.1vw solid #10101a; background-color:#6b8b8e;color:#10101a; box-shadow:inset -0.1vw -0.1vw 0.5vw 0.1vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.5vw 0.1vw rgba(255,255,255,0.6);}
#control_bank_control_container{background-color:#10101a;}
.control_current_step{font-family:g_bold;font-size:1.4vw; color:#10101a;background-color:#6b8b8e; border:0.1vw solid #10101a;border-radius:0.2vw 0.2vw 0vw 0vw; box-shadow:inset -0.1vw -0.1vw 0.5vw 0.1vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.5vw 0.1vw rgba(255,255,255,0.6);}
    .control_current_step_active{color:#f4e6c4;background-color:#e35935; box-shadow:inset -0.1vw -0.1vw 0.5vw 0.1vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.5vw 0.1vw rgba(255,255,255,0.6), 0vw 0vw 3vw 0.5vw #e35935; text-shadow:0vw 0vw 2vw #f4e6c4;}
    .control_current_step_selected{background-color:#f5ac3e; border-color:rgba(0,0,0,0.5); box-shadow:inset 0.1vw 0.1vw 0.2vw 0.1vw rgba(0,0,0,0.6), inset -0.1vw -0.1vw 0.5vw 0vw rgba(255,255,255,0.6), 0vw 0vw 3vw 0.5vw #f5ac3e;}
    .control_solo_btn{font-family:g_bold;font-size:1.4vw; border:0.1vw solid #10101a; background-color:#6b8b8e;color:#10101a; box-shadow:inset -0.1vw -0.1vw 0.5vw 0.1vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.5vw 0.1vw rgba(255,255,255,0.6);}
        .mute_btn_active{background-color:#f4e6c4; box-shadow:inset 0.1vw 0.1vw 0.2vw 0.1vw rgba(0,0,0,0.6), inset -0.1vw -0.1vw 0.5vw 0vw rgba(255,255,255,0.6), 0vw 0vw 3vw 0.5vw #f5ac3e;}
        .solo_btn_active{background-color:#f4e6c4; box-shadow:inset 0.1vw 0.1vw 0.2vw 0.1vw rgba(0,0,0,0.6), inset -0.1vw -0.1vw 0.5vw 0vw rgba(255,255,255,0.6), 0vw 0vw 3vw 0.5vw #f5ac3e;}
    .control_copy_btn{font-family:g_regular; background-color:#f5ac3e;color:#10101a;}
    .control_paste_btn{font-family:g_regular; background-color:#f5ac3e;color:#10101a;}

#control_container{border-top:0.5vw solid #10101a;background-image:url("../images/bg_controls.jpeg");background-position:center;background-size:cover; box-shadow:inset 0 2vw 6vw 2vw rgba(0,0,0,0.9);}

/* .knob_handle, .knob_handle_small{background-image:url("../images/knob3.png");background-position:center;background-size:cover;} */
.knob_handle, .knob_handle_small, .knob_handle_big{border:0.1vw solid #10101a;background-color:#f5ac3e; background-position:center;background-size:cover;}
.knob_handle{background-image:url("../images/knob5.png");background-position:center;background-size:cover;}
.knob_handle_small{background-image:url("../images/knob4.png");background-position:center;background-size:cover;}
.knob_handle_big{background-image:url("../images/knob4.png");background-position:center;background-size:cover;}
/* .knob_line{background-color:white;}
.knob_line_small{background-color:white;}
.knob_line_big{background-color:white;} */
.k_d_alt0{background-image:url("../images/k_d_amount.png");background-position:center;background-size:100%;}
.k_d_alt1{background-image:url("../images/k_d_amount_mirror.png");background-position:center;background-size:100%;}
.k_d_alt2{background-image:url("../images/k_d_both.png");background-position:center;background-size:100%;}
.k_d_alt3{background-image:url("../images/k_d_lines.png");background-position:center;background-size:100%;}
.k_d_alt4{background-image:url("../images/k_d_dur.png");background-position:center;background-size:100%;}
.k_d_alt5{background-image:url("../images/k_d_dur_mirror.png");background-position:center;background-size:100%;}
.knob_graphic_layer{border-color:#f5ac3e;background-image:url("../images/knobs_graphic1.png");background-position:center;background-size:cover; }
.knob_graphic_layer_small{border-color:#f5ac3e;background-image:url("../images/knobs_graphic1.png");background-position:center;background-size:cover; box-shadow:inset -0.1vw -0.1vw 0.3vw 0vw rgba(255,255,255,0.5);}
.knob_graphic_layer_big{background-image:url("../images/knobs_graphic1.png");background-position:center;background-size:cover; box-shadow:inset -0.1vw -0.1vw 0.3vw 0vw rgba(255,255,255,0.5);}
.fader_handle{border:0.2vw solid #10101a;background-color:#f5ac3e; }
.fader_graphic_layer{background-image:url("../images/knobs_graphic1.png");background-position:center;background-size:cover;}
.switch_graphic_layer{border-radius:100%;background-image:url("../images/switches_graphic1.png");background-position:center;background-size:cover;}
.switch_handle{border-radius:100%; box-shadow:inset -0.1vw -0.1vw 0.15vw 0.05vw rgba(0,0,0,0.6), inset 0.1vw 0.1vw 0.15vw 0.05vw rgba(255,255,255,0.5);}
.switch_wrapper{}
.switch_container{border:0.1vw solid #10101a; border-radius:100%; box-shadow:0.1vw 0.1vw 0.3vw 0.05vw rgba(0,0,0,0.8);}
.switch_display{background-color:#7f8c8d; border-radius:100%}
.switch_checkmark{background-color:#f5ac3e;box-shadow:0vw 0vw 3vw 0.2vw #f5ac3e, inset -0.1vw -0.1vw 0.15vw 0.05vw rgba(255,255,255,0.5), inset 0.1vw 0.1vw 0.15vw 0.05vw rgba(0,0,0,0.6); border-radius:100%}
.file_wrapper{margin-top:0.5vw;border:0.2vw solid #10101a;border-radius: 1vw;}
.file_display{background-color:#dee8dd;}
.file_start_line{background-color:#f5ac3e;}
.file_end_line{background-color:#e35935;}
.tooltip{font-family:g_bold; color:#f4e6c4;background-color:rgba(0,0,0,0.6);border:0.2vw solid #10101a;border-radius:1vw; box-shadow:0vw 1.5vw 2vw 0.5vw rgba(0,0,0,0.4);}

.btn{font-family:g_regular; background-color:#f5ac3e;color:#10101a;}
    .btn:hover{color:#f4e6c4;background-color:#7f8c8d;}
    .start_btn{font-family:g_regular;}
    .start_btn_active{}
    .start_btn_light{border:0.1vw solid #10101a;box-shadow:inset 0.05vw 0.15vw 0.2vw 0.1vw rgba(255,255,255,0.6), inset -0.05vw -0.05vw 0.15vw 0.1vw rgba(0,0,0,0.6);}
    .start_btn_light_active{background-color:#f5ac3e;box-shadow:0vw 0vw 2vw 0.2vw #f5ac3e, inset 0.05vw 0.15vw 0.2vw 0.1vw rgba(255,255,255,0.6), inset -0.05vw -0.05vw 0.1vw 0.05vw rgba(0,0,0,0.6);}

.menu_btn{font-family:g_regular; color:#e35935; background-image:url("../images/bg_menu1.jpeg"); /*text-shadow:0vw 0vw 2vw rgba(0,0,0,0.5);*/}
.menu_btn_active{background-color:#e35935; color:#f4e6c4; background-image:none;/*box-shadow:0vw 0vw 4vw 1vw rgba(0,0,0,0.6), inset 0vw 0vw 1vw 0vw #f5ac3e2b; text-shadow:0vw 0vw 2vw rgba(255,255,255,0.5);*/}
    /* #menu_instruments_btn{background-image:url("../images/bg_menu1.jpeg");background-position:center;background-size:cover;}
    #menu_effects_btn{background-image:url("../images/bg_menu2.jpeg");background-position:center;background-size:cover;}
    #menu_settings_btn{background-image:url("../images/bg_menu3.jpeg");background-position:center;background-size:cover;} */
    .file_record_btn{}
    .file_record_btn_active{background-color:darkred;color:red;}

#foot_container{border-radius:0 0 2vw 2vw;border-bottom:0.3vw solid #e35935;border-top:0.2vw solid #10101a;color:#f4e6c4; background-image:url("../images/bg_footer.jpeg");background-position:center;background-size:cover;}
#foot_container a{color:#f4e6c4;}
#foot_container a:hover{color:#f5ac3e;}

@media screen and (min-width: 900px)
{
      /* 0.1vw = 1px, 0.5vw = 4.5px, 1vw = 9px, 2vw = 18px, 3vw = 27px, 4vw = 36px */
      .content_wrapper{border-radius:19.8px 18px 0 0;border-top:3px solid #e35935;}
      #header_container{border-radius:18px 15px 0 0;}

    .settings_panel{border-radius:2.7px;/*box-shadow:inset 9px 18px 27px 0 rgba(255,255,255,0.3), inset -9px -18px 27px 0 rgba(0,0,0,0.3);*/}
  .settings_panel_add{border-left:2px solid #10101a; /*box-shadow:inset 9px 18px 27px 0 rgba(0,0,0,0.5);*/}
.settings_panel_add2{border-left:2px solid #10101a; /*box-shadow:inset 13.5px 22.5px 36px 9px rgba(0,0,0,0.5);*/}
      .settings_panel_name{text-shadow:1px 1px 1px rgba(0,0,0,0.6);}
      .settings_panel_control_name{text-shadow:0.5px 0.5px 1px rgba(0,0,0,0.6);}
      .settings_panel_meter_display{box-shadow:1px 1px 9px 1px rgba(0,0,0,0.6);}
      .settings_panel_meter_fill{box-shadow:0 0 27px 4.5px;}

      #control_bank_pattern_container{box-shadow:inset 0 4.5px 18px 9px rgba(0,0,0,0.6);}
          #pattern_remove_part_btn{}
          #pattern_add_part_btn{}
          .pattern_wrapper{}
          .pattern_part{font-size:12.5px;margin-left:2px;}
          .pattern_part_active{}

      .steps_accents{border-radius:0 0 9px 9px;box-shadow:inset 0 18px 36px 9px rgba(0,0,0,0.7);}
      .steps_steps{border-radius:0 9px 9px 0;box-shadow:inset 4.5px 9px 4.5px 0 rgba(255,255,255,0.3), inset -9px -4.5px 4.5px 0 rgba(0,0,0,0.6);}
      .steps_name{text-shadow:1px 1px 1px rgba(0,0,0,0.6);}
      .steps_mute_btn{font-size:12.5px;height:24px; border:1px solid #10101a; box-shadow:inset -1px -1px 4.5px 1px rgba(0,0,0,0.6), inset 1px 1px 4.5px 1px rgba(255,255,255,0.6);}
      .steps_solo_btn{font-size:12.5px;height:24px; border:1px solid #10101a; box-shadow:inset -1px -1px 4.5px 1px rgba(0,0,0,0.6), inset 1px 1px 4.5px 1px rgba(255,255,255,0.6);}
      .control_solo_btn{font-size:12.5px; border:1px solid #10101a; box-shadow:inset -1px -1px 4.5px 1px rgba(0,0,0,0.6), inset 1px 1px 4.5px 1px rgba(255,255,255,0.6);}
          .mute_btn_active{box-shadow:inset 1px 1px 2px 1px rgba(0,0,0,0.6), inset -1px -1px 4.5px 0 rgba(255,255,255,0.6), 0 0 27px 4.5px #f5ac3e;}
          .solo_btn_active{box-shadow:inset 1px 1px 2px 1px rgba(0,0,0,0.6), inset -1px -1px 4.5px 0 rgba(255,255,255,0.6), 0 0 27px 4.5px #f5ac3e;}
      .steps_select_btn{border-radius:9px 0 0 9px;}

      #control_container{border-top:4.5px solid #10101a;box-shadow:inset 0 18px 54px 18px rgba(0,0,0,0.9);}

      .control_current_step{font-size:12.5px;border:1px solid #10101a;border-radius:2px 2px 0 0; box-shadow:inset -1px -1px 4.5px 1px rgba(0,0,0,0.6), inset 1px 1px 4.5px 1px rgba(255,255,255,0.6);}
          .control_current_step_active{box-shadow:inset -1px -1px 4.5px 1px rgba(0,0,0,0.6), inset 1px 1px 4.5px 1px rgba(255,255,255,0.6), 0 0 27px 4.5px #e35935; text-shadow:0 0 18px #f4e6c4;}
          .control_current_step_selected{border-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 2px 0.5px rgba(0,0,0,0.6), inset -1px -1px 4.5px 0 rgba(255,255,255,0.6), 0 0 27px 4.5px #f5ac3e;}

      .knob_handle, .knob_handle_small, .knob_handle_big{border:1px solid #10101a;}
      .fader_handle{border:2px solid #10101a;}
      .switch_graphic_layer{}
      .switch_handle{box-shadow:inset -1px -1px 2px 0.5px rgba(0,0,0,0.6), inset 1px 1px 2px 0.5px rgba(255,255,255,0.5);}
      .switch_wrapper{}
      .switch_container{border:1px solid #10101a;box-shadow:1px 1px 3px 0.5px rgba(0,0,0,0.8);}
      .switch_display{}
      .switch_checkmark{box-shadow:0 0 27px 2px #f5ac3e, inset -1px -1px 2px 0.5px rgba(255,255,255,0.5), inset 1px 1px 2px 0.5px rgba(0,0,0,0.6);}
      .file_wrapper{margin-top:4.5px;border:2px solid #10101a;border-radius: 9px;}
      .tooltip{border:2px solid #10101a;border-radius:9px; box-shadow:0 13.5px 18px 4.5px rgba(0,0,0,0.4);}

      .btn{}
          .btn:hover{}
          /* .start_btn{padding:0 27px;border-radius:9px;} */
          .start_btn_light{border:1px solid #10101a;box-shadow:inset 0.5px 1.5px 2px 1px rgba(255,255,255,0.6), inset -0.5px -0.5px 1.5px 1px rgba(0,0,0,0.6);}
          .start_btn_light_active{box-shadow:0 0 18px 2px #f5ac3e, inset 0.5px 1.5px 2px 1px rgba(255,255,255,0.6), inset -0.5px -0.05vw 1px 0.5px rgba(0,0,0,0.6);}

      .menu_btn{border-right:3.5px solid #10101a; /*box-shadow:inset 0 0 9px 4.5px rgba(0,0,0,0.5); text-shadow:0 0 18px rgba(0,0,0,0.5);*/}
    .menu_btn_active{/*box-shadow:0 0 44px 9px rgba(0,0,0,0.6), inset 0 0 9px 0 #f5ac3e2b; text-shadow:0 0 18px rgba(255,255,255,0.5);*/}

      #foot_container{border-radius:0 0 18px 18px;border-bottom:3px solid #e35935;border-top:2px solid #10101a;}
}