html,
body,
.loading_splash{
    background : var(--background-base);
}

@media (max-height : 920px), (max-width : 105.625em){
    html{
        font-size : 14px;
    }
}

@media (max-height : 53.125em), (max-width : 94.125em){
    html{
        font-size : 13px;
    }
}

@media (max-height : 810px), (max-width : 90em){
    html{
        font-size : 12px;
    }
}

@media (max-height : 673px), (max-width : 81.625em){
    html{
        font-size : 11px;
    }
}

@media (max-height : 610px), (max-width : 71.75em){
    html{
        font-size : 10px;
    }
}

@media (max-height : 562px), (max-width : 66.25em){
    html{
        font-size : 8px;
    }
}

@media (max-height : 450px), (max-width : 56.875em){
    html{
        font-size : 7px;
    }
}

@media (max-height : 396px), (max-width : 48.25em){
    html{
        font-size : 6px;
    }
}

@media (max-height : 344px), (max-width : 39.375em){
    html{
        font-size : 5px;
    }
}

@media (max-height : 293px), (max-width : 32.9375em){
    html{
        font-size : 4px;
    }
}

@media (max-width : 26.9375em){
    html{
        font-size : 3px;
    }
}

.text{
    color : var(--text);
    font-family: poster-gothic-excond-atf;
    text-align: center;
    user-select : none;
    display : flex;
    flex-direction : column;
    justify-content : center;
    overflow : hidden;
    text-overflow : ellipsis;
    text-shadow : .03125em .03125em .0625em #16161C;
}

.button{
    height : 100%;
    width : 100%;
    background : var(--button-base);
    box-sizing : border-box;
    cursor: pointer;
    overflow : hidden;
    user-select : none;
    display : flex;
    flex-direction : column;
    justify-content : center;
    transition : background .05s;
}

.button:hover,
.header_option:hover{
    background : var(--button-hover);
}

.label{
    background : var(--label-base);
    height : 100%;
    width : 100%;
    box-sizing : border-box;
    overflow : hidden;
    position: relative;
    user-select : none;
    display : flex;
    flex-direction : column;
    justify-content : space-evenly;
}

.outset{
    background : var(--layer-base);
    transition : background .05s;
}

.inset{
    background : var(--inner-base);
    position : relative;
}

.img{
    margin : auto;
}

input[type=text]:hover{
    background : var(--entry-hover);
}

input[type=text]:focus{
    background : var(--entry-focus);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]{
  -moz-appearance: textfield;
}

input[type=range] {
    background: transparent;
   -webkit-appearance: none;
   -moz-appearance : none;
   width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    width: 100%;
}

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    background: var(--button-base);
    width : .275em;
    height : .55em;
    margin-top : -.25em;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb:hover{
    background: var(--button-hover);
}

input[type=range]:disabled::-webkit-slider-thumb{
    background: var(--off-U);
    opacity : .425;
    cursor: default;
}

input[type=range]:disabled::-webkit-slider-runnable-track{
    cursor: default;
}

input[type=range]:disabled::-moz-range-track{
    cursor: default;
}

input[type=range]::-moz-range-thumb{
    -webkit-appearance: none;
    background: var(--button-base);
    width : .275em;
    height : .55em;
    margin-top : -.25em;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    cursor: pointer;
    border : unset;
}

input[type=range]::-moz-range-thumb:hover{
    background: var(--button-hover);
}

input[type=range]:disabled::-moz-range-thumb{
    background: var(--off-U);
    opacity : .425;
    cursor: default;
}

input[type=range]::-ms-thumb{
    -webkit-appearance: none;
    background: var(--button-base);
    width : .275em;
    height : .55em;
    margin-top : -.25em;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    cursor: pointer;
}

input[type=range]::-ms-thumb:hover{
    background: var(--button-hover);
}

input[type=range]::-webkit-slider-runnable-track{
    background: var(--background-base);
    border-radius: 1em;
    cursor: pointer;
    height: .1em;
    width: 100%;
}

input[type=range]::-moz-range-track{
    background: var(--background-base);
    border-radius: 1em;
    cursor: pointer;
    height: .1em;
    width: 100%;
}

input[type=range]::-ms-track{
    background: var(--background-base);
    border-radius: 1em;
    cursor: pointer;
    height: .1em;
    width: 100%;
}

input[type=range]:focus::-webkit-slider-runnable-track{
    background: var(--label-base);
}

input[type=range]:focus::-moz-range-track{
    background: var(--label-base);
}

input[type=range]:focus::-ms-trackr{
    background: var(--label-base);
}

input[type=range]:focus::-ms-fill-lower{
    background: var(--off-D);
}

input[type=range]:focus::-ms-fill-upper{
    background: var(--off-D);
}

input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border-radius: calc(2.6vw/19.2);
    box-shadow: 0 0 .04em .04em var(--box-shadow);
}

input[type=range]::-ms-fill-upper {
    background: var(--off-D);
    border-radius: calc(2.6vw/19.2);
    box-shadow: 0 0 .04em .04em var(--box-shadow);
}

input[type=number]{
    -moz-appearance: textfield;
}

::-webkit-scrollbar-track{
    background: var(--inner-base);
    height : .5rem;
}

::-webkit-scrollbar-thumb{
    height : .5rem !important;
    background : var(--button-base);
    border-radius : .25rem;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--button-hover);
}

::-webkit-scrollbar{
    width: .25em;
}

::-webkit-scrollbar:horizontal{
    height: .2125em;
}

#DAW{
    display : flex;
    width : 100%;
    height : 100vh;
    margin : auto;
    flex-direction : column;
    position : relative;
}

#header{
    height : 1em;
    min-height : 20px;
    display : flex;
    font-size: min(4.5vw, 8vh);
}

.navigation_container{
    width : 30%;
    background : #16161A;
    padding : .0625em .5em;
    display : flex;
    height : .9em;
}

#account_logo{
    width : 100%;
    justify-content : center;
}

#account_logo .img{
    content : url("../../Images/Credit.webp");
    height : .675em;
    margin-left: 0.125em;
}

#set{
    position:relative;
    z-index : 1;
}

.settings_dropdown{
    width : 3.5em;
    position : absolute;
    top: -400%;
    right : -.03125em;
    transition : top .15s, opacity .15s;
    transition-timing-function : ease-out;
    z-index : 2;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    opacity : 0;
}

.settings_dropdown_in{
    top : 100%;
    opacity : 1;
}

.settings_option{
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    background : var(--button-base);
    border : .0625em solid #16161A !important;
    height : 2em;
    font-size : .5em;
}

.logo_container{
    display : flex;
    margin : auto;
    height : 100%;
    z-index : 5;
    width: 100%;
    justify-content: center;
}

.logo_container a{
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.logo_container a:link{
    text-decoration : none;
}

.logo{
    content : url("../../Images/SODA_Logo.png");
    height : .75em;
}

.logo_text,
.credit_text{
    font-size : .525em;
    margin-left : .25em;
}

.credit_text{
    margin : unset;
    font-size : .5em;
    white-space : nowrap;
}

.account_logo{
    content : url("../../Images/Account.png");
    height : .75em;
    padding : .0625em;
    transition : border-radius .25s, background .25s;
    margin-left : .5em;
}

.account_logo:hover{
    background : #3F2680;
    border-radius : 4em;
}

.tab_navigation_container{
    width : 100%;
    display : flex;
}

.header_option{
    background : var(--button-base);
    border : .03125em solid #16161A !important;
    height : .9em;
    z-index : 3;
    cursor : pointer;
    padding : 0 .25em;
    display : flex;
    flex-direction : column;
    justify-content  : center;
}

.header_option .img{
    height : .675em;
}

.tab_navigation_container *{
    display : flex;
    flex-direction : column;
    justify-content : space-evenly;
}

.tab_navigation_container .text{
    font-size : .45em;
}

.tab_navigation_container .header_option{
    width : 50% !important;
}

#nav_new .img{
    content : url("../../Images/New_Project.png");
}

#nav_load .img{
    content : url("../../Images/Load_Project.png");
}

#nav_save .img{
    content : url("../../Images/Save_Project.png");
}

#nav_gen .img{
    content : url("../../Images/Generate_Project.png");
}

#navbar_playback .img{
    content : url("../../Images/Right.png");
}

#navbar_metronome .img{
    content : url("../../Images/Metronome.png");
}

#nav_manual .img{
    content : url("../../Images/Manual.png");
}

#set .img{
    content : url("../../Images/Settings.png");
}

.fly_in{
    position : absolute;
    right : -3em;
    height : 2em;
    border-radius : 12em 0 0 12em;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    z-index : 99;
    top : .125em;
    padding : .125em;
    transition : right .2s;
    display:flex;
    justify-content : space-between;
}

.fly_in .inset:first-of-type{
    height : 100%;
    border-radius : 11.875em;
    overflow: hidden;
}

.fly_in .inset:last-of-type{
    height : .625em;
    width : .625em;
    border-radius : 16em;
    padding : .0625em;
}

.fly_in .button{
    border-radius : 16em;
    font-size : .375em;
    background : var(--warning);
}

.fly_in .button:hover{
    background : var(--warning-hover);
}

.fly_In_Idle{
    right : 0;
}

.flyin_image{
    height : 100%;
    margin : auto;
}

#save_flyin .flyin_image{
    content : url("../../Images/Saving.gif");
}

#audio_flyin .flyin_image{
    content : url("../../Images/Audio_Loading.gif");
}

.tool_panel,
.attribute_panel{
    position : absolute;
    height : 100%;
    width : 100%;
    padding : .175em;
    left : -125%;
    z-index : 0;
    transition : left .2s;
    top : 0;
    box-shadow: 0 0 .04em .04em var(--box-shadow);
}

#DAW_Container{
    display : flex;
    height : 100%;
    width : 100%;
    padding-top : .1em;
    position : relative;
    overflow : hidden;
    font-size: min(4.5vw, 8vh);
}

.daw-col-A{
    display : flex;
    flex-direction : column;
    width : 13%;
    overflow:hidden;
}

.attribute_container{
    height : 25%;
    padding : .125em;
    position : relative;
}

.attribute_outer_container{
    height : 100%;
    padding : .125em;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.attribute_inner_container{
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    height : 100%;
    padding : .125em;
    border-radius : .375em;
}

.attribute_row{
    height : 100%;
    display : flex;
    justify-content : space-between;
    margin : .03125em 0;
}

.attribute_row:first-of-type{
    margin : 0 0 .03125em 0;
}

.attribute_row:last-of-type{
    margin : .03125em 0 0 0;
}

.attribute_row:last-of-type .button{
    width : 100%;
    border-radius : calc(1em/1.3);
}

.attribute_element{
    width : 45%;
    font-size : .325em;
    border-radius : calc(1em/1.3) 0 0 calc(1em/1.3);
    margin-right : 1.5%;
}

.attribute_element:last-of-type{
    width : 55%;
    border-radius : 0 calc(1em/1.3) calc(1em/1.3) 0;
    margin : unset;
}

.attribute_pop_up_container{
    position : absolute;
    height: 45%;
    width: 25%;
    top : 0;
    padding : .125em;
    max-width : 32em;
    z-index : 1;
}

.attribute_panel{
    left : 0%;
    top : -350%;
    transition : top .2s;
    border-radius : .25em;
}

.attribute_panel .tool_panel_control_container{
    border-radius : .125em;
}

.attribute_pop_up_container .button{
    font-size : .525em;
    margin : 0 .25%;
}

.attribute_pop_up_container .button:first-of-type{
    border-radius : .0625em 0 0 .0625em;
    margin : 0 .25% 0 0;
}

.attribute_pop_up_container .button:last-of-type{
    border-radius : 0 .0625em .0625em 0;
    margin : 0 0 0 .25%;
}

#tempo{
    height : 2.75em;
    width : 100%;
    max-width : min(45vh, 22vw);
}

#tempo .tempo_slider_container .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .35em;
}

#tempo .tempo_slider_container .slider::-moz-range-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .35em;
}

@keyframes attrib_fly_in{
    from{top : -125%;}
    to{top : 0%;}
}

.attrib_in{
    z-index : 1;
    top : 0%;
    animation : attrib_fly_in .25s;
}

#tempo .tool_panel_control_container{
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.tempo_input_container,
.bar_input_container{
    width : 100%;
    display : flex;
    margin-left : 4%;
    justify-content : center;
}

.tempo_input_container .text,
.bar_input_container .text{
    width : 38.5%;
    font-size : .875em;
}

.tempo_number{
    background : var(--inner-base);
    transition : background .2s;
    border-width : 0;
}

.tempo_number:hover{
    background : var(--inner-hover);
}

.tempo_number:focus{
    background : var(--inner-base);
}

.tempo_slider_container{
    height : 40%;
    width : 90%;
    margin : auto;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.tempo_slider_container .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .425em;
}

.tempo_slider_container .slider::-moz-range-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .425em;
}

#root,
#scale{
    width : 10em;
    height : 1.625em;
}

#root{
    width : 8em;
}

#root .tool_panel_control_container,
#scale .tool_panel_control_container{
    flex-direction : row;
}

#reverb_attrib{
    height : 5em;
    width : 100%;
    max-width : min(50vh, 40vw);
}

#reverb_attrib ::-webkit-scrollbar-track{
    margin: .125em 0;
}

#reverb_attrib ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

#reverb_attrib .tool_panel_control_container{
    overflow-x : hidden;
    overflow-y : auto;
    display : block;
}

#reverb_attrib .tool_panel_control_container .button{
    height : unset;
    margin : .125em 0;
    border-radius : calc(1em/8.4);
}

#reverb_attrib .tool_panel_control_container .button:last-of-type{
    margin : .125em 0 0 0;
}

#reverb_attrib .tool_panel_control_container .button:first-of-type{
    margin : 0 0 .125em 0;
}

.element_container{
    height : 75%;
}

.seq_element_container,
.arr_element_container{
    height : 100%;
    padding : .125em;
    display : flex;
    flex-direction : column;
}

.arr_element_container{
    padding : .125em 0 .125em .125em;
}

.seq_element_outer_container{
    height : 100%;
    padding : .125em;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.seq_element_inner_container{
    height : 100%;
    display : flex;
    justify-content : space-between;
    flex-direction : column;
    border-radius : .375em;
    padding : .125em;
}

.seq_element_option_container{
    height : 23.5%;
    display : flex;
    justify-content : space-between;
    flex-direction : column;
}

.seq_element_option{
    height : 67.5%;
    border-radius : calc(1em/2.7) calc(1em/2.7) 0 0;
    font-size : .675em;
    margin-bottom : 1.25%;
}

.seq_element_mod_container,
.arr_element_mod_container{
    display : flex;
    justify-content : space-between;
    height : 32.5%;
    width : 100%;
}

.seq_element_modifier,
.arr_element_modifier{
    border-radius : 0 0 0 calc(1em/2.3);
    font-size : .575em;
}

.seq_element_modifier .img{
    height : .75em;
    content : url("../../Images/Tandem.png");
}

.arr_element_modifier .img{
    height : .625em;
}

.arr_element_modifier:nth-of-type(even) .img{
    content : url("../../Images/Solo.png");
}

.arr_element_modifier:nth-of-type(odd) .img{
    content : url("../../Images/Tandem.png");
}

.seq_element_modifier:last-of-type{
    border-radius : 0 0 calc(1em/2.3) 0;
    margin-left : 1.25%;
}

.seq_element_modifier:last-of-type .img{
    content : url("../../Images/Onion_Skin.png");
}

.arr_element_outer_container{
    height : 100%;
    padding : .25em 0 .25em .25em;
    border-radius : .5em 0 0 .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.arr_element_inner_container{
    height : 100%;
    display : flex;
    flex-direction : column;
    padding : .125em;
    border-radius : .25em;
}

.arr_element_column{
    display : flex;
    flex-direction : column;
    height : 100%;
    justify-content : space-between;
}

.arr_element_option_container{
    height : 23.5%;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

.arr_element_option{
    height : 67.5%;
    border-radius : calc(1em/5.4) calc(1em/5.4) 0 0;
    font-size : .675em;
    margin-bottom : 1.25%;
}

.arr_element_modifier{
    border-radius : 0 0 0 calc(1em/4.6);
}

.arr_element_modifier:last-of-type{
    border-radius : 0 0 calc(1em/4.6) 0;
    margin-left : 1.25%;
}

.daw-col-B{
    width : 100%;
    max-width : 87vw;
    overflow:hidden;
}

.seq_workstation,
.arr_workstation{
    height : 100%;
    padding : .125em;
    display : flex;
    flex-direction : column;
}

.arr_workstation{
    padding : 0;
}

.seq_sequence_list_container{
    display : flex;
    height : 10%;
}

.seq_sequence_option,
.seq_add_sequence{
    width : 12.5%;
    border-radius : .25em .25em 0 0;
    transition : height .2s, width .2s;
    padding : .125em;
    display : flex;
    overflow : hidden;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
    margin : 0 .25% .25% 0;
}

.seq_sequence_option:last-of-type{
    margin : 0 0 .25% 0;
}

.seq_add_sequence{
    width : 4.5%;
    margin-right : .125em;
    height : unset;
}

.seq_add_sequence .img{
    height : .625em;
    content : url("../../Images/Add.png");
}

.sequence_name_entry_container{
    width : 100%;
    transition : width .2s;
}

.sequence_name_entry{
    height : 100%;
    width : 100%;
    font-size : .425em;
    padding : 0 .25em;
    text-overflow : ellipsis;
    border-width : 0em;
    border-radius : calc(1em/3.4);
    cursor : pointer;
    transition : background .2s;
    outline : 0;
}

.sequence_name_entry:read-only{
    outline : 0 !important;
}

.sequence_name_entry:read-only:hover{
    background : var(--entry-hover);
}

.sequence_name_entry:focus{
    outline-style : solid;
    outline-width : .125em;
    outline-color : var(--text);
}

.seq_sequence_tab_function_container{
    width : 0%;
    font-size : .425em;
    transition : width .2s;
    display : none;
    padding : .125em;
    justify-content : space-between;
    border-radius : calc(1em/3.4);
    margin-left : .275em;
}

.seq_sequence_option:hover{
    width : 50%;
}

.seq_sequence_option:hover .seq_sequence_tab_function_container{
    width : 30%;
    display : flex;
}

.sequence_tab_function_option{
    width : 47.5%;
    border-radius : calc(1em/6.8);
}

.seq_sequence_tab_function_container .button{
    padding : .125em;
}

.seq_sequence_tab_function_container .img{
    height : 1.05em;
}

.sequence_tab_function_option:nth-of-type(even){
    background : var(--warning);
}

.sequence_tab_function_option:nth-of-type(even):hover{
    background : var(--warning-hover);
}

.sequence_tab_function_option:nth-of-type(odd) .img{
    content : url("../../Images/Copy.png");
}

.sequence_tab_function_option:nth-of-type(even) .img{
    content : url("../../Images/Trash.png");
}

.seq_sound_design_container{
    display : flex;
    width : 100%;
    height : 13%;
    padding : .25em .25em 0 .25em;
    justify-content : space-between;
    border-radius : unset;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.sound_library_container{
    width : 20%;
    padding : .125em;
    border-radius : .25em;
}

.sound_library{
    border-radius : calc(1em/4.2);
    font-size : .525em;
}

.seq_sound_design{
    width : 80%;
    display : flex;
    justify-content : space-evenly;
    margin-left : .25em;
}

.seq_reverb_container,
.seq_design_container{
    width : 60%;
    display : flex;
    padding : .125em;
    border-radius : .25em;
}

.seq_reverb_container{
    margin-right : .25em;
}

.seq_sound_design .sound_design_label{
    font-size : .525em;
    margin-right : .25%;
}

.sound_design_label{
    max-width : 4em;
    border-radius : calc(1em/4.2) 0 0 calc(1em/4.2);
}

.sound_design_option_container{
    width : 100%;
    display : flex;
    font-size : .525em;
}

.sound_design_option{
    margin : 0 .25%;
}

.sound_design_option:last-of-type{
   border-radius : 0 .25em .25em 0;
   margin : 0 0 0 .25%;
}

.seq_building_container{
    display : flex;
    height : 77%;
    padding : .25em;
    border-radius : 0 0 .5em .5em;
    box-shadow : -.04em .04em .04em 0.01em var(--box-shadow), .04em .04em .04em .01em var(--box-shadow);
}

.seq_toolbox_container{
    width : 1.25em;
    display : flex;
    justify-content : end;
    flex-direction : column;
    margin : auto .25em 0 0;
    padding : .125em;
    border-radius : .25em;
    height : 95%;
}

.quick_entry_container{
    height : 100%;
    display : flex;
    flex-direction : column;
}

.seq_quick_entry{
    height : 12.5%;
    margin : 1.75% 0;
}

.seq_quick_entry:first-of-type{
    border-radius : .125em .125em 0 0;
    margin : unset;
    margin-bottom : 1.75%;
}

.seq_quick_entry:last-of-type{
    border-radius : 0 0 .125em .125em;
    margin : unset;
    margin-top : 1.75%;
}

.seq_quick_entry .img{
    height : .575em;
}

.seq_quick_entry:nth-of-type(1) .img{
    content : url("../../Images/FX1.webp");
}

.seq_quick_entry:nth-of-type(2) .img{
    content : url("../../Images/FX2.webp");
}

.seq_quick_entry:nth-of-type(3) .img{
    content : url("../../Images/Open_Hat.png");
}

.seq_quick_entry:nth-of-type(4) .img{
    content : url("../../Images/Closed_Hat.png");
}

.seq_quick_entry:nth-of-type(5) .img{
    content : url("../../Images/Percussion.png");
}

.seq_quick_entry:nth-of-type(6) .img{
    content : url("../../Images/Clap.png");
}

.seq_quick_entry:nth-of-type(7) .img{
    content : url("../../Images/Snare.png");
}

.seq_quick_entry:nth-of-type(8) .img{
    content : url("../../Images/Kick.png");
}

.seq_tool_container{
    height : 100%;
    display : flex;
    flex-direction : column;
}

.seq_tool_toggle{
    border-radius : .125em;
    margin-bottom : .5em;
    padding : .0625em;
    height : 70%;
}

.seq_tool_container .img{
    height : .625em;
}

.seq_tool_toggle .img{
    content : url("../../Images/Single_Note.png");
}

#step_toggle .img{
    content : url("../../Images/Stepper.png");
}

#jump_toggle .img{
    content : url("../../Images/Jumper.webp");
}

#nudge_toggle .img{
    content : url("../../Images/Nudge.png");
}

#filter_toggle .img{
    content : url("../../Images/Filter.png");
}

.seq_tool_option{
    border-radius : .125em;
    padding : .0625em;
    margin : 2% 0;
}

.seq_staff_container{
    width : 100%;
    display : flex;
    padding : .125em;
    border-radius : .125em;
    overflow : hidden;
}

.seq_tool_panel_container,
.seq_quick_entry_panel_container,
.arr_quick_entry_panel_container{
    position : absolute;
    height : 100%;
    top : 0;
    left : 0;
    padding : .25em .125em;
}

.seq_tool_panel_container{
    width : 25%;
}

.seq_quick_entry_panel_container,
.arr_quick_entry_panel_container{
    width : 40%;
    max-width : 70vh;
}

.arr_quick_entry_panel_container{
    padding : .25em .125em 0 .125em;
    height : 95%;
}

.quick_entry_main_option_container{
    height : 100%;
    margin-bottom : .25em;
    overflow-y : auto;
}

.quick_entry_option_container{
    display : flex;
    margin-bottom : 1%;
}

.quick_entry_option{
    border-radius : calc(1em/14.4) 0 0 calc(1em/14.4);
    font-size : .45em;
    margin-right : 1%;
}

.quick_entry_bar_count{
    width : 100%;
    max-width : 4.5em;
    border-radius : 0 calc(1em/14.4) calc(1em/14.4) 0;
    font-size : .45em;
}

.arr_quick_entry_panel_container .quick_entry_bar_count{
    max-width : 6.5em;
}

.quick_entry_aux_option_container{
    display : flex;
    justify-content : space-between;
    flex-direction: column-reverse;
}

.quick_entry_aux_option_container .button{
    border-radius : calc(1em/14.4);
    font-size : .45em;
    width : 100%;
}

.seq_quick_entry_panel_container .quick_entry_aux_option_container .button:last-of-type{
    margin : 0 0 .25em 0;
    background : var(--warning);
}

.seq_quick_entry_panel_container .quick_entry_aux_option_container .button:last-of-type:hover{
    background : var(--warning-hover);
}

.arr_quick_entry_panel_container .quick_entry_aux_option_container .button:first-of-type{
    width : 100%;
}

.tool_transition_container,
.seq_tool_transition_container{
    position : relative;
    display : flex;
    flex-direction : column;
    justify-content : center;
    height : 100%;
}

@keyframes tool_fly_in{
    from{left : -125%;}
    to{left : 0%;}
}

.tool_in{
    z-index : 1;
    left : 0%;
    animation : tool_fly_in .25s;
}

#seq_quick_entry,
#arr_quick_entry{
    border-radius : .125em;
}

.tool_panel_content_container,
.modal_content_container{
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

.tool_panel .panel_heading_container{
    padding : .125em;
    border-radius : .0625em;
}

.tool_panel .panel_heading{
    border-radius : calc(1em/18.4);
    font-size : .575em;
}

.tool_panel_control_container{
    height : 100%;
    border-radius : .0625em;
    display : flex;
    justify-content : space-between;
    flex-direction : column;
    padding : .125em;
}

#seq_quick_entry .tool_panel_control_container,
#arr_quick_entry .tool_panel_control_container,
.seq_tool_panel_container .tool_panel_control_container{
    height : calc(100% - 1.25em);
}

#seq_quick_entry .tool_panel_control_container{
    padding : unset;
}

#seq_quick_entry .quick_entry_main_option_container{
    padding : .125em .125em 0 .125em;
}

#seq_quick_entry .quick_entry_aux_option_container{
    padding : 0 .125em .125em .125em
}

#seq_quick_entry ::-webkit-scrollbar-track{
    margin-top : .15em;
}

#seq_quick_entry ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

.tool_panel_control_container ::-webkit-scrollbar-track{
    margin : 0 0 0 1.5rem;
}

.tool_panel_control_container ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

.tool_control_container{
    height : 25%;
    display : flex;
    flex-wrap : wrap;
}

.tool_control_name{
    height : 40%;
    border-radius : calc(1em/14.4) calc(1em/14.4) 0 0;
    font-size : .425em;
    margin-bottom : .75%;
}

.tool_control_container_inner{
    display : flex;
    justify-content : space-between;
    height : 60%;
    width : 100%;
}

.tool_control_container_inner .tool_control_increment:first-of-type .img{
    content : url("../../Images/Remove.png");
    height : .875em;
}

.tool_control_container_inner .tool_control_increment:last-of-type .img{
    content : url("../../Images/Add.png");
    height : .875em;
}

.tool_control_value{
    width : 50%;
    font-size : .5em;
    margin : 0 1%;
}

.tool_control_increment{
    width : 25%;
    border-radius : 0 0 0 calc(1em/14.4);
    font-size : .45em;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.tool_control_increment:last-of-type{
    border-radius : 0 0 calc(1em/14.4) 0;
}

.tool_panel_control_container .tool_info{
    font-size : .45em;
    border-radius : calc(1em/14.4);
    height : unset;
}

.jumper_grid_container{
    height : 55%;
    width : 80%;
    display : flex;
    margin : 0 auto;
}

.jumper_column{
    width : 100%;
    display : flex;
    flex-direction : column;
    margin : 0 .5%;
}

.jumper_button{
    border-radius : .0625em;
    margin : 1.5% 0;
}

#stepper,
#jumper,
#nudge{
    border-radius : .125em;
}

#nudge{
    height : 55%;
    top : unset;
    bottom : 0;
}

.nudge_container{
    height : 60%;
    display : flex;
    font-size : .3em;
}

.nudge_horizontal{
    width : 25%;
    border-radius : calc(1em/9.6) 0 0 calc(1em/9.6);
}

.nudge_horizontal .img{
    content : url("../../Images/Left.png");
    height : 1.5em;
}

.nudge_horizontal:last-of-type{
    border-radius : 0 calc(1em/9.6) calc(1em/9.6) 0;
}

.nudge_horizontal:last-of-type .img{
    content : url("../../Images/Right.png");
}

.nudge_vertical_container{
    width : 50%;
    display : flex;
    flex-direction : column;
    margin : 0 1%;
}

.nudge_vertical{
    height : 50%;
}

.nudge_vertical .img{
    content : url("../../Images/Up.png");
    height : 1.5em;
}

.nudge_vertical:last-of-type{
    margin-top : 2%;
}

.nudge_vertical:last-of-type .img{
    content : url("../../Images/Down.png");
}

.seq_bar_container{
    width : 100%;
    display: flex;
}

.seq_bar_column{
    width : 100%;
    display : flex;
    flex-direction : column;
}

.seq_playback{
    height : 5%;
    border-radius : .0625em;
    width : 97.5%;
    margin : 0 auto;
}

.seq_note_outer_container{
    height : 100%;
    display : flex;
    flex-direction : column;
}

.seq_note_container{
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.seq_note{
    margin : auto;
    border-radius : .0625em;
    height : 97.5%;
    width : 97.5%;
}

.seq_note_animation{
    animation: note_button_press .25s;
}

@keyframes note_button_press{
    0% {margin : 0; height : 97.5%; width : 97.5%;}
    30% {margin : 10%; width : 80%; height : 80%;}
    100% {margin : 0; height : 97.5%; width : 97.5%;}
}

.seq_undo_redo_container{
    height : 27.5%;
    display:flex;
    flex-direction:column;
    justify-content : space-between;
}

.seq_arcc_container{
    height : 67.5%;
    display : flex;
    flex-direction : column;
}

.seq_arcc_container .arcc_option:nth-of-type(1) *,
.arr_arcc_container .button:nth-of-type(1) *{
    content : url("../../Images/Add.png");
}

.seq_arcc_container .arcc_option:nth-of-type(2) *,
.arr_arcc_container .button:nth-of-type(2) *{
    content : url("../../Images/Remove.png");
}

.seq_arcc_container .arcc_option:nth-of-type(3) *{
    content : url("../../Images/Copy.png");
}

.seq_arcc_container .arcc_option:last-of-type,
.arr_arcc_container .arcc_option:last-of-type{
    margin-top : .5em;
    border-radius : .125em;
    background : var(--warning);
}

.seq_arcc_container .arcc_option:last-of-type:hover,
.arr_arcc_container .arcc_option:last-of-type:hover{
    background : var(--warning-hover);
}

.seq_arcc_container .arcc_option:last-of-type *,
.arr_arcc_container .arcc_option:last-of-type *{
    content : url("../../Images/Trash.png");
}

.arr_modifiers_container{
    display : flex;
    justify-content : space-between;
    height : 25%;
    padding : .125em;
}

.arr_sound_design_container{
    width : 85%;
    display : flex;
    justify-content : space-between;
    padding : .125em;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.arr_sound_design_radio_container{
    width : 27.5%;
    padding : .125em;
    border-radius : .375em;
    margin-right : .125em;
}

.arr_sound_design_radio_content{
    height : 100%;
    display : flex;
    flex-direction:column;
    justify-content : space-between;
}

.arr_sound_design_column_mod_container{
    display: flex;
    justify-content : space-between;
    height : 50%;
    margin-bottom : 1%;
}

.arr_sound_design_radio_content .arr_sound_design_radio_option{
    padding : .125em 0 0 0;
    font-size : .5em;
    border-radius : .5em .5em 0 0;
}

.arr_sound_design_radio_content:first-of-type .arr_sound_design_radio_option:last-of-type{
    padding : 0 0 .125em 0;
    border-radius : 0 0 .5em .5em;
    margin-top : 1%;
}

.arr_sound_design_radio_content:last-of-type .arr_sound_design_radio_option{
    padding : .125em 0 0 0;
    font-size : .5em;
    border-radius : 0 .5em 0 0;
}

.arr_sound_design_radio_content:last-of-type .arr_sound_design_radio_option:first-of-type{
    padding : .125em 0 0 0;
    border-radius : .5em 0 0 0;
    margin-right : 1%;
}

.arr_sound_design_radio_content:last-of-type .arr_sound_design_radio_option:last-of-type{
    height : 50%;
    padding : 0 0 .125em 0;
    border-radius : 0 0 .5em .5em;
}

.arr_sound_design_column_mod_container .arr_sound_design_radio_option:last-of-type{
    height : 100% !important;
    border-radius : 0 .5em 0 0 !important;
    padding : .125em 0 0 0 !important;
}

.arr_sound_design_design_container{
    height : 100%;
    width : 72.5%;
    display : flex;
}

.arr_sound_design_design_outer_container{
    height : 100%;
    width : 200%;
    display : flex;
    justify-content : space-around;
    flex-direction : column;
}

.arr_reverb_container,
.arr_design_container{
    height : 50%;
    display : flex;
    padding : .125em;
    border-radius : .375em;
}

.arr_reverb_container{
    margin-bottom : .125em;
}

.arr_sound_design_design_outer_container .sound_design_label{
    max-width : 4.5em;
    border-radius : calc(1em/1.8) 0 0 calc(1em/1.8);
    font-size : .45em;
}

.arr_sound_design_design_outer_container .sound_design_option{
    font-size : .875em;
}

.arr_reverb_container .sound_design_option:last-of-type,
.arr_design_container .sound_design_option:last-of-type{
   border-radius : 0 calc(1em/1.8375) calc(1em/1.8375) 0;
}

.arr_sound_design_sequence_container{
    width : 100%;
    padding : .125em;
    border-radius : .375em;
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;
    align-content: space-between;
}

.arr_sound_design_sequence_container .button{
    height : 30%;
    width : 32.75%;
    border-radius : calc(2em/3);
    font-size : .375em;
    padding : 0 .5em;
}

.arr_sound_design_sequence_container .button:last-of-type{
    background : var(--warning);
}

.arr_sound_design_sequence_container .button:last-of-type:hover{
    background : var(--warning-hover);
}

.arr_sound_design_sequence_container .button .text{
    display : unset;
    white-space: nowrap;
}

.arr_sound_design_bars_container{
    width : 100%;
    border-radius : .375em;
    display : flex;
    flex-direction : column;
    justify-content : center;
    padding : .125em;
    margin-left : .125em;
}

.bar_input_container{
    margin : unset;
}

.bar_input_container .text{
    font-size : .75em;
    width : 100%;
}

.bar_slider_container{
    width : 82.5%;
    margin : 0 auto;
    display : flex;
    height : .625em;
}

.bar_slider_container .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .35em;
}

.bar_slider_container .slider::-moz-range-thumb{
    width : .75em;
    height : 1.75em;
    margin-top : -.775em;
    border-radius : .165em;
    font-size : .35em;
}

.arr_generate_container{
    width : 30%;
    padding : .125em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
    margin-left : .25em;
}

.arr_generate_button_container,
.arr_generate_time_container{
    padding : .125em;
    margin-bottom : .125em;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.arr_generate_button_container{
    border-radius : .375em;
    height : 100%;
}

.arr_generate_button_container .button{
    border-radius : .25em;
    padding : .125em;
}

.arr_generate_button_container .button_content{
    display : flex;
    justify-content : center;
}

.arr_generate_button_image{
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.arr_generate_button_image .img{
    content : url("../../Images/Generate_Project.png");
    height : .875em;
}

.arr_generate_button_container .text{
    font-size : .525em;
    width : 75%;
}

.arr_generate_time_container{
    margin : auto;
    font-size : .425em;
    width : 95%;
    border-radius : calc(15em/17);
}

.arr_building_container{
    height : 75%;
    padding : .125em .125em .125em 0;
}

.arr_workspace_outer{
    height : 100%;
    padding : .25em;
    border-radius : 0 .5em .5em 0;
    display : flex;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.arr_workspace_outer ::-webkit-scrollbar-track{
    margin : 0 .1675em;
}

.arr_workspace_outer  ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

.arr_workspace_inner{
    width : 100%;
    border-radius : .125em;
    overflow-x : hidden;
    padding-bottom: 0.1em;
}

.arr_column_container{
    display : flex;
    height : 100%;
    overflow-x : auto;
    padding : .125em;
    scrollbar-color : var(--button-base) var(--inner-base);
}

.arr_column{
    width : 100%;
    min-width : 12%;
    display : flex;
    flex-direction : column;
    margin : 0 .04em;
}

.arr_playback{
    height : 8.5%;
    font-size : .4em;
    border-radius : calc(1em/6.4);
    margin : 0 auto .1em auto;
}

.arr_element_inner_container > .button:first-of-type{
    font-size : .4em;
    margin-bottom : .375em;
    height : 10%;
    border-radius : .3125em;
}

.arr_element_inner_container > .button.disabled{
    font-size : .35em;
    border-radius : calc(.3125em / .875);
}

.arr_block_outer_container,
.arr_block_container{
    height : 100%;
    display : flex;
    flex-direction : column;
}

.arr_block_container{
    justify-content : center;
}

.arr_block{
    border-radius : calc(1em/6.4);
    font-size : .4em;
    margin : 0 auto;
    padding : 0 .25em;
    height : 97.5%;
}

.arr_block .text{
    display : unset;
    white-space : nowrap;
}

.arr_block_animation{
    animation: arr_block_press .25s;
}

@keyframes arr_block_press{
    0% {height : 97.5%; width : 97.5%;}
    30% {width : 82.5%; height : 82.5%;}
    100% {height : 97.5%; width : 97.5%;}
}

.seq_workspace_manipulation_container,
.arr_workspace_manipulation_container{
    width : 1.25em;
    margin-left : .25em;
    border-radius : .25em;
    display : flex;
    justify-content : space-between;
    flex-direction : column;
    padding : .125em;
}

.arr_workspace_manipulation_container{
    width : 1.175em;
}

.arr_undo_redo_container{
    height : 30%;
    width : 100%;
}

.undo_redo_option{
    height : 50%;
    border-radius : .125em .125em 0 0;
}

.undo_redo_option:last-of-type{
    border-radius : 0 0 .125em .125em;
    margin-top : 5%;
}

.undo_redo_option .img{
    height : .575em;
}

.arr_building_container .undo_redo_option .img{
    height : .575em;
}

.undo_redo_option:nth-of-type(odd) .img{
    content : url("../../Images/Undo.png");
}

.undo_redo_option:nth-of-type(even) .img{
    content : url("../../Images/Redo.png");
}

.arr_arcc_container{
    height : 60%;
    width : 100%;
    display : flex;
    flex-direction : column;
}

.arcc_option{
    transition : opacity .2s;
}

.arcc_option:first-of-type{
    border-radius : .125em .125em 0 0;
    margin-bottom : 5%;
}

.seq_arcc_container .arcc_option:nth-of-type(3){
    margin-top : 5%;
}

.seq_arcc_container .arcc_option:nth-of-type(3),
.arr_arcc_container .arcc_option:nth-of-type(2){
    border-radius : 0 0 .125em .125em;
}

.arcc_option .img{
    height : .575em;
}

.arr_building_container .arcc_option .img{
    height : .575em;
}

.panel_heading{
    border-radius : .5em;
}

.modal_out{
    top : -100%;
}

.modal_collection,
.loading_splash,
.portrait_container{
    position : absolute;
    z-index : 5;
    height : 100%;
    width : 100%;
    top : 0;
}

.portrait_container{
    z-index : 90;
    display : none;
    flex-direction : column;
    justify-content : center;
    font-size : max(4.5vw, 6vh);
    background : rgba(22,22,26,.275);
}

.portrait_container .outset{
    width : 90%;
    margin : 0 auto;
    padding : .25em;
    border-radius : .5em;
    display : flex;
    flex-direction : column;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
    font-size: min(11.5vw, 7vh);
}

.portrait_container .panel_heading_container{
    padding : .125em;
    border-radius : .25em;
    margin-bottom : .25em;
}

.portrait_container .label{
    border-radius : .125em;
}

.portrait_notice_container{
    padding : .25em;
    border-radius : .25em;
    display : flex;
    flex-direction : column;
}

.portrait_notice{
    margin-bottom : .25em;
    font-size : .625em;
}

.portrait_notice_container .button{
    width : 70%;
    margin : 0 auto;
    border-radius : .25em;
    font-size : .525em;
    height : unset;
}

.loading_splash{
    z-index : 100;
    transition : opacity .75s;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.splash_container{
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    font-size : min(5.5vw, 8vh);
}

.splash_gif{
    content : url("../../Images/Loading.gif");
    width : 35%;
    max-width : 45vh;
    margin : .25em auto;
}

.splash_container .text{
    font-size : 1.125em;
    text-shadow : 0.0625em 0.0625em 0.03125em #16161c;
}

.splash_container .text:last-of-type{
    border-top : .0625em solid var(--text);
    margin : .25em auto 0 auto;
    padding : 0 2em;
    font-size: 1.125em;
}

.modal_panel_container{
    position : absolute;
    height : 100%;
    width : 100%;
    top : 0;
    display : flex;
    flex-direction : column;
    justify-content : center;
    margin : auto;
    background : rgba(22,22,26, .5);
    padding : 4.5rem 0 0 0;
    overflow : hidden;
    //animation : modals .25s;
}

@keyframes modals{
    from{ opacity : 0;}
    to{ opacity : 1; }
}

.modal_panel_horizontal_container{
    position : relative;
    display : flex;
    justify-content : center;
}

@keyframes modal_in{
    from{ top: -150%; opacity:0;}
    to{ top: 0%; opacity:1; }
}

.modal_panel{
    position : absolute;
    animation: modal_in .30s;
    height : 100%;
    border-radius : .5em;
    padding : .25em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
    top : 0%;
    opacity : 1;
}

.modal_collection .panel_heading_container{
    padding : .125em;
    border-radius : .25em;
    margin-bottom : .25em;
}

.modal_collection .panel_heading{
    border-radius : .125em;
}

.warning_panel .panel_heading{
    background : var(--warning);
}

.warning_notice_container{
    border-radius : .25em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    padding : .25em;
    height : 100%;
}

.warning_notice{
    font-size : .625em;
    height : 100%;
}

.warning_notice span{
    margin : .5em 0;
}

.warning_button_container{
    display : flex;
    justify-content : space-between;
    width : 95%;
    margin : 0 auto;
}

.warning_button_container .button{
    border-radius : .25em;
    font-size : .5em;
    padding : 0 .5em;
    margin-right : 1em;
}

.warning_button_container .button:last-of-type{
    background : var(--warning);
    margin-right : unset;
}

.warning_button_container .button:last-of-type:hover{
    background : var(--warning-hover);
}

.warning_panel{
    width : 55%;
    max-width : 160vh;
    font-size : min(4.5vw, 8vh);
}

#general_warning .modal_panel_horizontal_container{
    height : 80%;
    max-height : 45vw;
}

#new_project_options .modal_panel_horizontal_container{
    height : 60%;
    max-height : 30vw;
}

#new_project_options .modal_panel{
    width : 50%;
    font-size : min(4.5vw, 8vh);
    max-width : 130vh;
}

#new_project_options .inset{
    height : 100%;
    border-radius : .25em;
    display : flex;
    padding : .175em;
}

.new_procedural_option_container{
    width : 42.5%;
    margin-right : .25em;
}

#new_project_options .button{
    border-radius : calc(3em/35);
    font-size : .875em;
}

.new_project_option_container{
    width : 57.5%;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

.new_project_button_container{
    height : 100%;
    margin-bottom : .75em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

.new_project_button_container .button{
    height : 30%;
    font-size: .7em !important;
    border-radius : calc(3em/28) !important;
}

.new_project_option_aux{
    width : 100%;
}

.new_project_option_aux .button{
    font-size : .625em !important;
    background : var(--warning);
    border-radius : .12em !important;
}

.new_project_option_aux .button:hover{
    background : var(--warning-hover);
}

.procedural_root_container,
.procedural_scale_container{
    height : 100%;
    display : flex;
    padding : .125em;
    border-radius : .25em;
}

#manual .modal_panel_horizontal_container{
    height : 96.5%;
    max-height : 60vw;
}

#manual .modal_panel{
    width : 85%;
    display : flex;
    font-size: min(4.5vw, 8vh);
    max-width : 160vh;
}

.manual_navigation_content_container,
.manual_details_container{
    width : 100%;
    display : flex;
    flex-direction : column;
}

.manual_navigation_content_container ::-webkit-scrollbar-track{
    margin : .25em 0;
}

.manual_navigation_content_container  ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

.manual_details_container ::-webkit-scrollbar-track{
    margin : .25em 0;
}

.manual_details_container  ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
}

.manual_navigation_content_container{
    max-width : 6.5em;
    margin-right : .25em;
}

.manual_table_of_contents_container{
    border-radius : .25em;
    padding : .125em;
    overflow-y : auto;
    scrollbar-color : var(--button-base) var(--inner-base);
}

.manual_category_container{
    font-size : .9em;
}

.manual_category_header{
    border-radius : calc(1em/3.6);
    font-size : .5em;
    height : 2em;
    margin-bottom : 1%;
}

.manual_category_header_content{
    display : flex;
    flex-direction : row;
    justify-content : space-between;
    padding : 0 .25em 0 .5em;
}

.manual_category_reveal{
    width : 2em;
    padding : .125em;
    border-radius : calc(1em/7.2);
}

.manual_category_reveal .button{
    border-radius : calc(1em/14.4);
}

.manual_category_reveal .img{
    content : url("../../Images/Dropdown.png");
    height : .875em;
}

.manual_category_content_container{
    display : none;
    flex-direction : column;
}

.manual_open{
    display : flex;
}

.manual_category_option{
    width : 87.5%;
    border-radius : calc(1em/3.6);
    font-size : .45em;
    margin : 0 0 1% 12.5%;
    text-align : right;
    padding : 0 1.25em 0 .25em;
}

.manual_image_container{
    border-radius : .25em;
    height : 100%;
    overflow : hidden;
}

.manual_image_container .img{
    height : 100%;
    width : 100%;
    object-fit : contain;
}

.manual_description_container{
    height : 90%;
    overflow-y : auto;
    padding : .25em;
    margin : .25em 0;
    border-radius : .25em;
    scrollbar-color : var(--button-base) var(--inner-base);
}

.manual_description_container .text{
    font-size : .525em;
    text-align : left;
    line-height : 1.35;
}

.manual_cycle_container{
    height : 2.75em;
    display : flex;
}

.manual_cycle_options{
    padding : .125em;
    border-radius : .25em;
    display : flex;
    width : 100%;
}

.manual_cycle_options .button,
.manual_return .button{
    border-radius : .125em;
}

.manual_cycle_options .button{
    max-width : 1.25em;
}

.manual_cycle_options .img{
    content : url("../../Images/Left.png");
    height : .675em;
}

.manual_cycle_options .button:last-of-type .img{
    content : url("../../Images/Right.png");
}

.manual_cycle_options .text{
    margin : 0 .25em;
    width : 100%;
    font-size : .45em;
}

.manual_return{
    width : 2.5em;
    padding : .125em;
    margin-left : .25em;
    border-radius : .25em;
}

.manual_return .button{
    font-size : .45em;
    border-radius : calc(1em/3.6);
    background : var(--warning);
}

.manual_return .button:hover{
    background : var(--warning-hover);
}

#procedural .modal_panel_horizontal_container{
    height : 98%;
    max-height : 47.5vw;
}

#procedural .modal_panel{
    width : 97.5%;
    display : flex;
    padding : unset;
    overflow : hidden;
    font-size: min(4vw, 8vh);
    max-width : 200vh;
}

.procedural_details_container{
    width : 100%;
    max-width : 9em;
    margin-right : .25em;
    padding : .25em 0 .25em .25em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

.procedural_help_panel{
    height: 100%;
    border-radius : .25em;
    padding : .25em;
    display : flex;
    flex-direction : column;
}

.procedural_manual{
    height : 85%;
}

.procedural_manual_heading{
    font-size : .575em;
    text-align : center;
}

.procedural_manual_content{
    text-align : left !important;
    font-size : .4325em;
}

.procedural_help_panel .button{
    font-size : .4em;
    border-radius : calc(1em/3.2);
    width : 60%;
    margin : auto;
    height : unset;
}

.procedural_naming_container,
.procedural_confirm_panel,
.procedural_random_container{
    border-radius : .25em;
    margin : .25em 0;
    display : flex;
    padding : .125em;
}

.procedural_name_entry{
    width : 100%;
    background : var(--entry-background);
    font-size : .45em;
    border-width : 0;
    cursor : pointer;
    border-radius : calc(1em/3.6);
    transition : background .2s;
    overflow : hidden;
    text-overflow : ellipsis;
    padding : 0 .25em;
}

.procedural_random_container{
    margin-top : unset;
}

.procedural_random_container .button{
    border-radius : calc(1em/3.2);
    font-size : .4em;
    line-height : 1.75;
    padding : 0 .25em;
}

.procedural_random_container .button:first-of-type{
    margin-right : .3em;
}

.procedural_random_container .button:last-of-type{
    margin-left : .3em;
    width : 6em;
}

.procedural_random_container .img{
    content : url("../../Images/Right.png");
    height : 1.2em;
}

.procedural_confirm_panel{
    margin : unset;
    display : flex;
}

.procedural_confirm_panel .button{
    font-size : .45em;
    border-radius : calc(1em/3.6);
}

.procedural_confirm_panel .button:last-of-type{
    max-width : 5.5em;
    margin-left : .3em;
    background : var(--warning);
}

.procedural_confirm_panel .button:last-of-type:hover{
    background : var(--warning-hover);
}

.procedural_controls_container{
    width : 100%;
    display : flex;
    flex-direction : column;
}

.procedural_controls_container .slider{
    margin : 0 .0625em;
}

.procedural_element_container{
    height : 20%;
    border-radius : unset;
    padding : .125em .25em .125em .125em;
    display : flex;
}

.procedural_element_container .img{
    content : url("../../Images/Tandem.png");
    height : 1.1em;
}

.element_heading_container{
    width : 3.5em;
    margin-right : .25em;
    display : flex;
    padding : .125em;
    border-radius : .25em;
    flex-direction: column;
    justify-content: space-between;
}

.element_heading{
    border-radius : calc(1em/4.4) calc(1em/4.4) 0 0;
    font-size : .55em;
    margin-bottom : 1.5%;
}

.element_heading_controls{
    font-size : .4125em;
    display : flex;
    justify-content : space-between;
    height : 60%;
}

.element_heading_controls .button:first-of-type{
    border-radius : 0 0 0 calc(1em/3.3);
    margin-right : 1.5%;
    line-height : 1.1;
    width : 140%;
}

.element_heading_controls .button:last-of-type{
    border-radius : 0 0 calc(1em/3.3) 0;
}

.slider_control{
    width : 100%;
    display : flex;
}

.slider_control .label{
    font-size : .35em;
    border-radius : calc(1em/1.4) calc(1em/5.6) calc(1em/5.6) calc(1em/1.4);
}

.slider_control .label:last-of-type{
    border-radius :  calc(1em/5.6) calc(1em/1.4) calc(1em/1.4) calc(1em/5.6);
}

#procedural_drums,
#procedural_mid{
    height : 22.5%;
}

#procedural_global{
    height : 16%;
    background : var(--procedural-global);
}

#procedural_global .element_heading{
    width : 100%;
    border-radius : calc(1em/4.4);
    margin : unset;
}

.element_control_container{
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : space-around;
}

.element_control_container .button,
.element_control_container .label{
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.global_tempo_container,
.global_signature_container{
    height : 38.5%;
    display : flex;
    justify-content : space-between;
}

#procedural_global .slider_control .label{
    max-width : 6em;
}

#procedural_global .slider{
    width : 100%;
}

#procedural_global .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_global .slider::-moz-range-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

.global_signature_container .label{
    width : 4em;
    border-radius : calc(1em/1.4) 0 0 calc(1em/1.4);
    margin-right : .03125em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.global_signature_container .button{
    margin : 0 .03125em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

.global_signature_container .button:last-of-type{
    border-radius : 0 calc(1em/1.4) calc(1em/1.4) 0;
    margin : 0 0 0 .03125em;
}

.procedural_root_container,
.procedural_scale_container{
    font-size : .35em;
    padding : unset;
    border-radius : 2em;
    width : 60%;
}

.global_signature_container .sound_design_option_container{
    font-size : 1em;
}

.procedural_root_container{
    margin-right : .5em;
    width : 40%;
}

#procedural_drums{
    background : var(--procedural-drums);
}

#procedural_drums .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_drums .slider::-moz-range-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_drums .element_control_container{
    justify-content : space-between;
}

.drum_control_row,
.mid_control_row{
    display : flex;
    height : 27.5%;
}

.drum_control_row .button{
    width : 9.5em;
    margin-right : .5em;
    font-size : .35em;
    border-radius : calc(1em/1.4);
}

.drum_control_row .slider_control .label{
    width : 5.5em;
}

.drum_control_row .slider{
    width : 65%;
}

#procedural_bass{
    background : var(--procedural-bass);
}

#procedural_bass .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.9em;
    margin-top : -.8em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_bass .slider::-moz-range-thumb{
    width : .75em;
    height : 1.9em;
    margin-top : -.8em;
    border-radius : .165em;
    font-size : .35em;
}

.bass_attack_container,
.bass_modifier_container,
.high_modifier_container,
.high_attack_container{
    display : flex;
    height : 33.5%;
}

.bass_attack_container .label{
    width : 7em;
}

.bass_attack_container .slider{
    width : 65%;
}

.bass_modifier_container .slider{
    width : 55%;
}

.bass_modifier_container .slider_control:first-of-type{
    margin-right : .25em;
}

.bass_modifier_container .slider_control .label:first-of-type{
    width : 6.5em;
}

.bass_modifier_container .slider_control .label:last-of-type{
    width : 5.5em;
}

#procedural_mid{
    background : var(--procedural-mid);
}

#procedural_mid .element_control_container{
    justify-content : space-between;
}

#procedural_mid .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_mid .slider::-moz-range-thumb{
    width : .75em;
    height : 1.775em;
    margin-top : -.75em;
    border-radius : .165em;
    font-size : .35em;
}

.mid_control_row:first-of-type{
    font-size : .35em;
}

.mid_control_row:first-of-type .label{
    max-width : 20em;
    border-radius : calc(1em/1.4) 0 0 calc(1em/1.4);
    margin-right : .03125em;
}

.mid_control_row:first-of-type .button{
    margin : 0 .03125em;
}

.mid_control_row:first-of-type .button:last-of-type{
    border-radius :  0 calc(1em/1.4) calc(1em/1.4) 0;
    margin-left : .03125em;
}

.mid_control_row:last-of-type .label{
    width : 10em;
}

.mid_scrambles{
    display : flex;
    width : 100%;
}

.mid_variation .button{
    border-radius : calc(1em/1.4);
    font-size : .35em;
}

.mid_variation .button:first-of-type{
    margin-right : .5em;
}

.mid_variation .slider_control{
    margin-left : .25em;
}

.mid_variation .slider{
    width : 50%;
}

.mid_variation .slider_control .label:first-of-type{
    width : 6em;
}

.mid_variation .slider_control .label:last-of-type{
    width : 5em;
}

#procedural_high{
    background : var(--procedural-high);
}

#procedural_high .slider::-webkit-slider-thumb{
    width : .75em;
    height : 1.9em;
    margin-top : -.8em;
    border-radius : .165em;
    font-size : .35em;
}

#procedural_high .slider::-moz-range-thumb{
    width : .75em;
    height : 1.9em;
    margin-top : -.8em;
    border-radius : .165em;
    font-size : .35em;
}

.high_modifier_container .button{
    font-size : .35em;
    border-radius : calc(1em/1.4);
}

.high_modifier_container .button:first-of-type{
    margin-right : .5em;
}

.high_attack_container .label{
    width : 10em;
}

#notices_panel .modal_panel_horizontal_container{
    height : 90%;
    max-height : 50vw;
}

#notices_panel .modal_panel{
    width : 60%;
    font-size: min(4.5vw, 8vh);
    max-width : 140vh;
}

#notices_panel .button{
    width : 50%;
    margin : 0 auto;
}

.notice_container{
    border-radius : .25em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    padding : .25em;
    height : 100%;
}

.notice{
    font-size : .625em;
    height : 100%;
    line-height: 1.2;
}

.tooltip{
    animation: toolTip .2s;
    background : var(--tooltip-base);
    border : .125em solid var(--tooltip-border);
    box-shadow: 0 0 .04em .04em var(--box-shadow);
    border-radius : .625em;
    left : 0;
    opacity : 1;
    padding : .5em 1em;
    position : absolute;
    top : 0;
    width : 15em;
    z-index : 20;
    color : #F2F2F2 !important;
    font-size : .4em;
    line-height : 1.2;
    font-weight : 400;
    text-shadow : unset;
}

@keyframes toolTip{
    from{opacity:0;}
    to{opacity:1; }
}

.bar_downbeat{

}

.bar_downbeat .off{
    background-color: var(--off-BD);
}

.bar_downbeat .off:hover{
    background : var(--off-BDB);
}

.bar_downbeat .filtered{
    background-color: var(--filter-BD);
}

.bar_downbeat .filtered:hover{
    background : var(--filter-BDB);
}

.bar_downbeat .os{
    background-color: var(--OS-BD);
}

.bar_downbeat .os:hover{
    background : var(--OS-BDB);
}

.bar_downbeat .on{
    background-color: var(--on-BD);
}

.bar_downbeat .on:hover{
    background : var(--on-BDB);
}

.downbeat .off,
.arr_unassigned_0{
    background-color: var(--off-D);
}

.downbeat .off:hover,
.arr_unassigned_0:hover{
    background : var(--off-DB);
}

.downbeat .filtered{
    background-color: var(--filter-D);
}

.downbeat .filtered:hover{
    background : var(--filter-DB);
}

.downbeat .os{
    background-color: var(--OS-D);
}

.downbeat .os:hover{
    background : var(--OS-DB);
}

.downbeat .on,
.arr_assigned_0{
    background-color: var(--on-D);
}

.downbeat .on:hover,
.arr_assigned_0:hover{
    background : var(--on-DB);
}

.upbeat .off,
.arr_unassigned_1,
.jumper_button.off{
    background-color: var(--off-U);
}

.upbeat .off:hover,
.arr_unassigned_1:hover,
.jumper_button.off:hover{
    background : var(--off-UB);
}

.upbeat .filtered,
#filter_toggle.on{
    background-color: var(--filter-U);
}

.upbeat .filtered:hover,
#filter_toggle.on:hover{
    background : var(--filter-UB);
}

.upbeat .os{
    background-color: var(--OS-U);
}

.upbeat .os:hover{
    background : var(--OS-UB);
}

.upbeat .on,
.arr_assigned_1,
.jumper_button.on{
    background-color: var(--on-U);
}

.upbeat .on:hover,
.arr_assigned_1:hover,
.jumper_button.on:hover{
    background : var(--on-UB);
}

.midbeat .off{
    background-color: var(--off-M);
}

.midbeat .off:hover{
    background : var(--off-MB);
}

.midbeat .filtered{
    background-color: var(--filter-M);
}

.midbeat .filtered:hover{
    background : var(--filter-MB);
}

.midbeat .os{
    background-color: var(--OS-M);
}

.midbeat .os:hover{
    background : var(--OS-MB);
}

.midbeat .on{
    background-color: var(--on-M);
}

.midbeat .on:hover{
    background : var(--on-MB);
}

.disabled, .disabled:hover, .disabled:active{
    background : var(--off-U) !important;
    cursor : default;
    opacity : .425;
}

.hL{
    background: var(--highlight-base) /*!important*/;
}

.hL:hover{
    background : var(--highlight-hover);
}

.invalid{
    background : #661F2F;
    border-color : #80263B;
}

.invalid .form_entry{
    background : #661F2F;
}

.invalid .form_entry:hover{
    background : #80263B;
}

@media screen and (orientation : portrait){
    .portrait_container{
        display : flex;
    }

    #new_project_options .modal_panel_horizontal_container{
        height: 60%;
        max-height: 55vw;
    }

    #new_project_options .modal_panel{
        width: 85%;
        font-size: min(8vw, 7vh);
    }
    
    .splash_container{
        font-size : min(8.5vw, 7vh) !important
    }
    
    .splash_gif{
        width : 50%;
        max-width : 45vh;
    }
}

.hidden{
    display : none;
    opacity : 0;
}

.invisible{
    opacity : 0;
}