.statContentContainer{flex:1;overflow-x:scroll;margin-top:2.5em;scroll-behavior:auto;scroll-snap-type:none;display:flex;justify-content:safe center;align-items:safe start}.statContent{display:flex;flex-shrink:0;width:max-content;content:safe center}.stats{min-width:15em}.graph{box-sizing:border-box;height:fit-content;border:1px solid #ECDFCC;min-width:15em;padding-top:.5em;border-radius:10px;padding-left:1em;padding-right:1em;max-width:35em;overflow-x:scroll;overflow-y:hidden}.statsScreen{overflow:auto}.statsScreen{position:absolute;top:2em;left:50%;width:50vw;height:60vh;min-height:200px;border-radius:15px;border:3px solid #ECDFCC;background-color:var(--site_secondary);transform:translate(-50%);z-index:1;color:var(--site_primary);display:flex;flex-direction:column}.graph_container p{text-align:center}.stats_title{bottom:10%;left:50%;transform:translate(-50%);position:absolute}.graphControls{gap:.5em;display:flex;justify-content:safe center;align-items:safe center}.graphControls button{text-decoration:none;background-color:#ecdfcc;border:1px solid transparent;display:flex;align-items:safe center;padding:.25em;border-radius:10px}.graphControls button:hover{color:#ecdfcc;background-color:#ecdfcc54;border:1px solid #ECDFCC}.graphControls button:disabled{background-color:#ecdfcc91}svg{display:flex}.questionContainer:hover{border-radius:10px;background-color:var(--site_secondary_dim)}.questionTooltip{z-index:100;padding:.5em;border-radius:10px;position:fixed;background-color:var(--site_secondary);border:1px solid var(--site_primary);transform:translate(-45%)}.questionTooltip p{max-width:10em;text-align:center}#run_controls{padding:.25em .5em;background-color:var(--site_primary);border-top-right-radius:10px;border-bottom-right-radius:10px;transition:transform .5s ease;display:flex}#run_controls.active{transform:translate(-5em)}#button_container{gap:.25em;display:flex;flex-direction:column}#button_container input{max-width:1.5em}#button_container button{padding:.25em;border-radius:5px;text-decoration:none;background-color:gray;color:#131b23;background-color:#131b2352;box-sizing:border-box;border:1px solid #131B23;cursor:pointer}#button_container button.selected{background-color:#ff910088}#button_container button:hover{color:#ecdfccd5;background-color:#131b23e5}#expand_button.selected{top:.25em;right:-5.5em;position:absolute;transform-origin:center;rotate:180deg;background-color:var(--site_primary)!important}#expand_button.selected:hover{border:1px solid #ecdfccd5!important;color:#ecdfccd5!important;background-color:#131b23e5!important}.bottom_buttons{gap:.25em;display:flex;flex-direction:column;margin-top:auto}.middle_buttons{gap:.25em;display:flex;margin-top:1.5em;flex-direction:column}.save_pattern,.add_lane_button,#open_workspace_load_button{position:relative}.lane_editing.activated{left:-25px;position:relative;transition:left .65s ease-in-out;margin-right:-25px;opacity:1;pointer-events:all}@media (max-width: 900px){.lane_editing.activated{transition:left 0s}}.scroll_container{display:flex;flex-direction:column;justify-content:center;gap:1em;color:#ecdfcc}.lane_editing{pointer-events:none;height:100vh;border-radius:12.5px;background-color:#ecdfcc69;padding:5em 20px 5% 45px;left:-100%;position:absolute;opacity:0;z-index:1;overflow:auto}.lane_editing input,.lane_editing select{background-color:#fff;color:#131b23;border:none;border-radius:5px;text-align:center}.lane_editing select.decorated option:hover,button:hover{background-color:#131b23;color:#ece5da}.lane_editing .delete_button:hover{background-color:maroon;color:#ece5da}button{background-color:#ecdfcc;color:#131b23;border:none;border-radius:10px}button:disabled{color:var(--site_secondary_very_dim);background-color:var(--site_primary_very_dim)}button svg{display:flex}.tooltips{gap:.25em;display:flex;align-items:safe center;justify-content:safe center}.editingToolTip{text-align:center;width:200px}.save_lane,.load_lane{position:relative}.edit_mode_container{gap:.25em;display:flex;padding-bottom:.5em;justify-content:safe center;border-bottom:1px solid var(--site_primary_dim)}.metronome_button,.autoplay_button{padding:.25em}.metronome_button.selected,.autoplay_button.selected{background-color:#131b23;color:#ece5da}.metronome_container{display:flex;align-items:center;gap:.25em}.edit_mode_button{border:none;padding:.25em;border-radius:10px;position:relative}.edit_mode_button.selected{background-color:#131b23;color:#ecdfcc}#edit_mode_button{position:relative}.bpm_container,.measure_count_container,.precision_container,.metronome_sound_container,.lane_sound_container,.wrong_notes_container{display:flex;gap:.25em;align-items:center}.bpm_input,.measure_count_input{max-width:3em}.pattern_loading_container{display:none;flex-direction:column;gap:.25em;margin-top:.25em}.lane_loading_container{margin-top:.25em;display:flex;flex-direction:column;gap:.25em}.load_lane_buttons{display:flex;justify-content:space-around;gap:.25em}.load_lane_buttons button{padding:.15em .25em}.pattern_loading_container.visible{display:flex}.new_pattern_measures_container{display:flex;gap:.5em}.new_pattern_measures,.loaded_pattern_measures{max-width:4em}.precision_select{width:5em}.lane_sound_select{width:7em}.time_signature_select{width:4em}.tootltip{text-align:center}.metronome_select{width:7em}.load_pattern{padding:.15em}.load_pattern[disabled]{background-color:#ecdfcc5e}.load_pattern[disabled]:hover{background-color:#ecdfcc5e;color:#131b23}.pattern_creation_container{display:none;margin-top:.25em}.pattern_creation_container.visible{gap:.25em;display:flex;flex-direction:column}.wrong_notes_input{max-width:3em}.noFail_button{padding:.25em}.wrong_notes_input:disabled{background-color:var(--site_secondary_very_dim)}.repeat_button{border:none;padding:.25em;border-radius:10px}.repeat_button[disabled]{background-color:#ecdfcc5e}.repeat_button[disabled]:hover{background-color:#ecdfcc5e;color:#131b23}.repeat_button.selected,.noFail_button.selected{background-color:#131b23;color:#ecdfcc}.subdivision_container{display:flex;gap:.25em}.key_alias_container{gap:.25em;display:flex;flex-direction:column}.key_alias_button_container{display:flex;gap:.25em}.key_alias_button_container button{gap:.25em;padding:.15em .25em}.key_alias_input{max-width:10em}.lane_loading_container,.patternEditingPanel{margin-top:1.5em}.savedPatternContainer{border:1px solid var(--site_secondary);background-color:var(--site_secondary_very_dim);max-height:30vh;min-height:5vh;overflow-y:auto;padding:1em;border-radius:10px;display:flex;flex-direction:column;gap:.5em}.listed_pattern:hover{border:1px solid #131B23;background-color:#ecdfcc;color:#131b23}.listed_pattern:active{cursor:grabbing!important}.listed_pattern{border:1px solid #ECDFCC;background-color:#131b23;min-height:3em;display:flex;align-items:center;justify-content:space-evenly;border-radius:15px;cursor:grab}.patternMeasureCount{max-width:3em}.patternEditButton{padding-left:.5em;padding-right:.5em}.pattern_name_container{width:5em;padding-top:.75em;padding-bottom:.75em;overflow-x:auto;border-right:1px solid var(--site_primary_dim)}.dropped_pattern,.individual_note_section{color:#ecdfcc;background-color:#131b2386;background-color:#131b23;border:3px solid #131B23;border-radius:15px;width:65%;min-width:300px;min-height:100px;display:flex;justify-content:center;align-items:center;position:relative;flex-direction:column}.section_inner_container{display:flex;gap:.5em;align-items:safe center;border-top:1px solid #ECDFCC}.section_inner_container button{border-radius:0 0 5px 5px;padding:.25em}.section_inner_container button{border:1px solid #ECDFCC}.section_p_container{padding:.25em;overflow-x:auto}.section_p_container p{width:15em;text-align:center}.spacer_container{position:absolute;bottom:-1.5em;display:flex;flex-direction:column;gap:.2em}.spacer{border-radius:15px;width:.25em;height:.25em;background-color:#000}.droppedOccuranceInput{border-radius:5px;max-width:3em}.lane_pattern_display{border-top-left-radius:15px;border-top-right-radius:15px;z-index:5;position:absolute;top:0;background-color:#ecdfcc;border-bottom:2px solid black;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow-y:auto;gap:1em}.lane_pattern_display.visible{display:inherit}.lane_pattern_display{display:none}.dropZoneContainer{width:100%;display:flex;flex-direction:column;align-items:center;overflow:auto;gap:2em;padding-bottom:5em;padding-top:5em}.pattern_drop_zone.draggedOver{background-color:#0b7433}.pattern_drop_zone.invalid{background-color:#740b0b}.pattern_drop_zone{color:#ecdfcc;background-color:#131b237c;border:4px dashed #131B23;border-radius:15px;min-width:300px;padding:1.25em;font-weight:700;display:flex;justify-content:center;align-items:center}.pattern_drop_zone p{pointer-events:none}.bpm_container button{padding:.15em .25em}.change_lane_key,.edit_lane_button{gap:.25em;z-index:2;bottom:1.5em;display:flex;position:absolute}.change_lane_key{left:1.25em}.edit_lane_button{right:1.25em}.change_lane_key button,.edit_lane_button button{border:1px solid transparent;padding:.25em;border-radius:5px;text-decoration:none;color:#ecdfcc;background-color:#131b23}.change_lane_key button:hover,.edit_lane_button button:hover{cursor:pointer;color:#131b23e5;background-color:#ecdfccd5;border:1px solid #131b23e5}.change_lane_key button:focus{color:#131b23e5;border:1px solid #131b23e5;background-color:#ff910088}.session_load_screen,.session_save_screen,.profile_screen,.notifications_screen,.settings_screen{position:absolute;top:2em;left:50%;width:50vw;height:60vh;min-height:200px;border-radius:15px;border:3px solid #ECDFCC;background-color:var(--site_secondary);transform:translate(-50%);z-index:1;color:var(--site_primary);display:flex;flex-direction:column;overflow:auto}.save_content,.load_content,.notifications_content,.profile_content{border-radius:10px;display:flex;align-items:center;gap:.25em;padding:2.25em}.tabs{flex-shrink:1}#notifications_button{position:relative}.notifications_indicator{width:1.25em;height:1.25em;position:absolute;color:#fff;border-radius:15px;background-color:red;display:flex;align-items:center;justify-content:center;top:-.3em;right:-.55em}.notifications_content{overflow-y:auto;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.5em}.friend_request{padding:.5em;border-radius:10px;border:1px solid #ECDFCC;display:flex;gap:.25em;align-items:safe center}.friend_request button{box-sizing:border-box;background-color:#ecdfcc;color:#131b23;border:none;border-radius:5px;padding:.25em;border:1px solid #131B23}.friend_request .accept:hover{background-color:#2a5a29}.friend_request .decline:hover{color:#ece5da;background-color:#5a3029}.friend_request button:hover{color:#ece5da;border:1px solid #ece2cc}.loaded_session_info{padding:.25em;border-radius:5px;border:1px solid #ECDFCC;display:flex;position:relative;gap:.25em;flex-direction:column}.loaded_session_info.nofolders{width:100%}.loaded_session_info button{max-width:5em}.loaded_session_info:hover{background-color:#ecdfcc56;color:#ecdfcc}.drop_down:hover{background-color:#ecdfcc;color:#131b23}.drop_down{background-color:#131b23;cursor:pointer;border-bottom:1px solid #ECDFCC;padding:.25em;width:100%;border:1px solid #ecdfcc2f;border-top-left-radius:10px;border-top-right-radius:10px}.drop_down_container{border-top-left-radius:12px;border-top-right-radius:12px;width:100%;background-color:#ecdfcc2d}.load_content{border-radius:0 0 10px 10px;display:flex;flex-direction:column;align-items:safe center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:auto}.hoveredInfo{display:flex;gap:2em}#save_session_button{padding:.25em}.settings_content{padding:1.5em}.volume_container{display:flex;gap:.25em;align-items:safe center}.tabs{gap:.5em;display:flex;padding-top:2em;padding-left:1em;-webkit-user-select:none;user-select:none;align-items:center;border-bottom:1px solid var(--site_primary)}.tab{min-width:3em;text-align:center;padding:0 .25em;border-top-left-radius:3px;border-top-right-radius:12px;color:var(--site_secondary);background-color:var(--site_primary_dim)}.tab.disabled{color:var(--site_primary_dim);background-color:var(--site_primary_very_dim)}.tab.selected,.tab:not(.disabled):hover{cursor:pointer;color:var(--site_secondary);background-color:var(--site_primary)}.session_load_screen .tab{padding:0 .25em}.closeContainer:hover{background-color:red}.closeContainer{padding:.25em;border-radius:15px;color:var(--site_primary);top:.5em;right:.5em;display:flex;position:absolute}.profile_screen button{border:none;padding:.25em;font-size:1em;text-decoration:none;color:var(--site_secondary);background-color:var(--site_primary_dim);border-radius:5px;border:1px solid transparent}.profile_screen button:hover{cursor:pointer}.profile_screen button:hover,.button_container .selected{color:var(--site_secondary);background-color:var(--site_primary)}.session_info{gap:.5em;display:flex;align-items:safe center}.authentication_form_container{padding:.5em;border-radius:15px;border:1px solid var(--site_primary)}.button_container{gap:.5em;display:flex;justify-content:center;border-bottom:1px solid var(--site_primary)}.button_container button{border-top-left-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0}.auth-form-label,.auth-form-input{color:var(--site_primary)!important}.auth-form-button{font-size:1em!important;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif!important;color:var(--site_secondary)!important;background-color:var(--site_primary)!important;border:2px solid transparent!important}.auth-form-button:hover{color:var(--site_primary)!important;background-color:var(--site_primary_very_dim)!important;border:2px solid var(--site_primary)!important}.friends_tab{display:flex;flex-direction:column;gap:.25em}.request_form_container{margin-bottom:1em;padding-bottom:1em;border-bottom:1px solid var(--site_primary)}.request_form_container form{display:flex;flex-direction:column;gap:.25em}.form_submit{display:flex;gap:.25em}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}*{margin:0;padding:0;box-sizing:border-box;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}body{overflow-y:hidden;background-color:var(--site_secondary)}#content{width:100vw;height:100vh;display:flex}.logo{top:45%;left:50%;position:fixed;transform:translate(-50%,-50%) scale(.65)}.lane_canvas{z-index:2;border-radius:15px;background-color:var(--site_primary)}#lane_container{width:100%;height:100%;gap:3em;display:flex;justify-content:center}.canvas_container{z-index:0;height:100vh;padding:0 1em;border:1px dashed #eccccc00;transition:border .1s linear,background-color .5s ease;display:flex;position:relative}.canvas_container.background{display:none}#lane_container.editing .canvas_container:hover{border-radius:5px;border-left:1px dashed var(--site_primary);border-right:1px dashed var(--site_primary);background-color:#ecdfcc33}.tooltip{top:50%;left:200%;position:absolute;pointer-events:none;transform:translateY(-50%);color:#ecdfcc;background:#333;border:1px solid #ECDFCC;z-index:100;font-size:14px;padding:8px 12px;border-radius:6px;white-space:nowrap}.tooltip-arrow{position:absolute;left:-15px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid #ECDFCC}.input_key_tooltip{left:-290%}.lane_edit_tooltip{left:-300%;top:-500%}.input_key_tooltip .tooltip-arrow,.lane_edit_tooltip .tooltip-arrow{left:auto;right:-15px;border-right:none;border-top:5px solid transparent;border-left:15px solid #ECDFCC;border-bottom:5px solid transparent}::-webkit-scrollbar{width:10px;height:5px}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#aaa}.confirmation_popup{background-color:#2ecc71;animation:riseAndFade 1.5s ease-out forwards}.error_popup{background-color:#cc2e2e;animation:shakeFade 1.5s ease-out forwards}.confirmation_popup,.error_popup{top:-30px;left:50%;padding:6px 12px;position:absolute;transform:translate(-50%);opacity:0;z-index:10;color:#fff;font-size:.85rem;border-radius:10px;pointer-events:none}@keyframes riseAndFade{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,-30px);opacity:0}}@keyframes shakeFade{0%{transform:translate(-50%) translate(0);opacity:1}5%{transform:translate(-50%) translate(-5px)}10%{transform:translate(-50%) translate(5px)}15%{transform:translate(-50%) translate(-5px)}20%{transform:translate(-50%) translate(5px)}25%{transform:translate(-50%) translate(-3px)}30%{transform:translate(-50%) translate(3px)}35%{transform:translate(-50%) translate(0)}50%{opacity:1}to{opacity:0}}.input_key_error{width:fit-content;top:-60px}:root{--site_primary: #ECDFCC;--site_primary_dim: #ecdfcc7e;--site_primary_very_dim: #ecdfcc21;--site_secondary: #131B23;--site_secondary_dim: #131b237c;--site_secondary_very_dim: #23171331}