#NanoKontrol2 { visibility: hidden; }
    #NanoKontrol2.Enabled { visibility: visible; }
.Slider_Group_Container { display: flex; width: 50%; border: 1px solid #069; padding: 0px;}
.Slider_Container { padding: 5px; position: initial; border: 1px solid #999; text-align: center; }

/* The slider itself */
.slider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ height: 10px; /* Specified height */ background: #d3d3d3; /* Grey background */ outline: none; /* Remove outline */ opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ -webkit-transition: .2s; /* 0.2 seconds transition on hover */ transition: opacity .2s; /*
                       transform: rotate(-90deg); transform-origin:top center;
                      */ }

    /* Mouse-over effects */
    .slider:hover { opacity: 1; /* Fully shown on mouse-over */ }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */ background: #069; /* Green background */ cursor: pointer; /* Cursor on hover */ }

    /*.slider::-moz-range-thumb { width: 25px;*/ /* Set a specific slider handle width */ /*height: 25px;*/ /* Slider handle height */ /*background: #069;*/ /* Green background */ /*cursor: pointer;*/ /* Cursor on hover */ /*}*/

.ValueDisplayButton, .LightToggleButton, .MomentaryButton { width: 50px; height: 30px; border-radius: 5px; color: #fff; text-align: center; line-height: 30px; background-color: #000; display: inline-block; margin-top: 4px; }
.LightToggleButton, .MomentaryButton { cursor: pointer; }
    .LightToggleButton:hover { box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 2px; }
    .LightToggleButton.On, .MomentaryButton.On { background-color: green; color: #fff; }
.MomentaryButton i { pointer-events: none; }

.Block { display: inline-block; background-color: #000; color: #fff; padding: 40px; font-size: 80px; }
    .Block.Solo { font-weight: bold; }
.Lowercase_Text { text-transform: lowercase; }

.Synth_Container { display: flex; border: 1px solid #069; padding: 0px; margin-top: 30px; }
#Synth #Synth_Power_Button { border: 1px solid #069; padding: 5px; }
#Synth .On { background-color: green; color: #fff; }
#Synth .Control_Container { padding: 5px; position: initial; border: 1px solid #999; text-align: center; }
#Synth .Control { width: 50px; height: 30px; border-radius: 5px; color: #fff; text-align: center; line-height: 30px; background-color: #000; margin-top: 4px; }
#Synth .Control_Label { font-size: 10px; }

.FooterBar { z-index: 100; }

.keyboard { display: flex; justify-content: center; align-items: flex-start; width: 1000px; white-space: nowrap; /* margin-top: 20px;*/ }
.key { width: 40px; height: 150px; border: 1px solid black; background-color: white; position: relative; cursor: pointer; }
.white { margin-right: -1px; }
.black { width: 25px; height: 100px; background-color: black; color: white; z-index: 1; margin-left: -12px; margin-right: -12px; top: 0; }
.key:hover, .key.Down { background-color: lightgray; color: black; }
.key[data-note]::after { content: attr(data-note); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 12px; }

#RightPanelContent > div { border-bottom: 1px solid black; /*font-size:14px;*/ /* font-family: "Courier New", Courier, monospace;*/ }
.MIDIError { color: red; }
.MIDIIndicator { display: inline-block; padding: 3px; margin-right: 3px; }
    .MIDIIndicator.Active { background-color: #0c0; }
.MIDIStatusMessage { display:inline-block; }
    .MIDIStatusMessage .Success { color:green }
.MIDIDeviceModel {font-weight:bold;}

.CK_Patch_Table { display: table; width: 100%; border-collapse: collapse; }
.CK_Patch_Row { display: table-row; }
    .CK_Patch_Row.Shaded { background-color: #f5f5f5; /* Adjust the shade color as needed */ }

.CK_Patch_Row_Header { display: table-cell; background-color: #333; color: #fff; text-align: center; border-bottom: 1px solid #fff; border-left: 1px solid #fff; user-select: none; }
.CK_Patch_Row_Header.Clickable:hover { background-color: #0c90b1; color: #fff; cursor: pointer; }


.CK_Part_Buttons_Table { cursor: pointer; user-select: none; }
    .CK_Part_Buttons_Table .CK_Patch_Row .CK_Patch_Row_Header:hover { background-color: #0c90b1; }
.ActivePart { background-color: hsl(210, 100%, 60%) !important; }

.CK_Patch_Cell { display: table-cell; border: 1px solid #ccc; padding: 5px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; user-select: none; line-height: 1; }
    .CK_Patch_Cell:hover { background-color: #0c90b1; color: #fff; }
    .CK_Patch_Cell:active { background-color: #ff8500; color: #fff; }
.CK_Current_Header { background-color: #333; color: #fff; text-align: center; padding-left: 5px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; user-select: none; display: flex; gap: 5px; align-items: center; }
#CK_Patch_Builder_Current_Patch_Row_Content { display: flex; gap: 5px; align-items: center; }
    .CK_Patch_Cell div { padding: 1px; }
.Azure { background-color: hsl(210, 100%, 60%); color: #fff; }
.Blue { background-color:hsl(220, 75%, 50%); color: #fff; }
.Cyan { background-color:#0ff; color: #000; }
.Green { background-color: green; color: #fff; }
.Lime { background-color: lime; color: #000; }
.Magenta { background-color: magenta; color: #fff; }
.Orange { background-color: orange; color: #000; }
.Red { background-color: red; color: #fff; }
.Rose { background-color: #fe6297; color: #fff; }
.Spring { background-color: #00FF7F; color: #000; }
.Violet { background-color:darkviolet; color: #fff; }
.Yellow { background-color: hsl(50, 100%, 50%); color: #000; }
.CK_Patch_Cell .Voice_Off { opacity: 0.4; }
.CK_Patch_Cell .Voice_Onx { background-color: #000; color: #fff; }

.CK_Voice_SubCategory_Cell { border: 1px solid #ccc; padding: 5px; user-select: none; background-color: #069; color: #fff; }
.CK_Voice_Cell { border: 1px solid #ccc; padding: 5px; user-select: none; cursor: pointer; min-width: 190px; }
    .CK_Voice_Cell.Selected { background-color: #0c90b1; color: #fff; }
    .CK_Voice_Cell:hover { background-color: #FFA500; color: #fff; }

.CK_SetActiveDiv {width: 20px;cursor: pointer;margin-right: 5px;background-color: #888;color: #fff; font-size:.8em;}
    .CK_SetActiveDiv:hover { background-color: #FFA500; color: #fff; }
    .CK_SetActiveDiv.Active, #CK_Patch_Builder_Target_LiveSet { background-color: #c00; color: #fff; }
#CK_Patch_Builder_Target_LiveSet { padding: 5px;}

        #Devices_Container, #General_MIDI_Container { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
    .Device_Container { border-bottom: 1px solid #ccc; }
    .Device_Container:last-of-type { border-bottom: none; }

/*Launchpad styles*/
.LaunchpadContainer {
    width: fit-content;
    height: fit-content; /*margin: 0 auto; */
    display: grid;
    grid-template-columns: repeat(9, var(--button-size));
    grid-template-rows: repeat(9, var(--button-size));
    gap: var(--gap-size);
    background-color: #000;
    padding: 10px;
}
.LaunchpadButton { width: var(--button-size); height: var(--button-size); background-color: #333; border-radius: 10%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--button-size) * 0.4); color: #fff; cursor: pointer; transition: background-color 0.2s; }
    .LaunchpadButton:active { background-color: #666; }
.LaunchpadContainer, .LaunchpadButton { user-select: none; touch-action: none; }
/*End Launchpad styles*/

/* Parameter Table styles */
.CCParameterTable { border-collapse: collapse; width: 100%; margin-top: 10px; }
    .CCParameterTable th, .CCParameterTable td { border: 1px solid #888; padding: 6px 10px; text-align: left; }
    .CCParameterTable th { background: #f1f1f1; font-weight: bold; }
    .CCParameterTable tr:nth-child(even) { background: #f9f9f9; }

/*Color grid*/
.ColorPickerButton { background: linear-gradient(90deg, rgb(255, 0, 0), rgb(255, 165, 0), rgb(0, 180, 90), rgb(0, 0, 255)); color: rgb(255, 255, 255);}

.ColorPickerContainer { display: flex; flex-direction: column; align-items: center; border: 6px solid #333; margin-bottom: 1px; }
    .ColorPickerContainer .Header { width: 100%; text-align: center; font-size: 1.4em; }
    .ColorPickerContainer .OverlayLayerCloseButtonContainer { padding: 10px; }
    .ColorGrid { display: grid; grid-template-columns: repeat(14, 48px); gap: 16px; padding: 10px; }
    .ColorGridSwatch { width: 48px; height: 48px; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; text-align: center; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); line-height: 1.2; }
    .ColorGridSwatch.Selected { border: 5px solid #333; }
.ColorGridSwatch:hover { transform: scale(1.1); }
.ColorGridLabel { grid-column: span 2; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; color: #333; }

.PartDetailPartCell {}
    .PartDetailPartCell .ColorPickerContainer {border: 1px solid #888;}
    .PartDetailPartCell .ColorGrid { display: grid; grid-template-columns: repeat(12, 30px); gap: 10px; padding: 10px; }
    .PartDetailPartCell .ColorGridSwatch { width: 34px; height: 34px; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; text-align: center; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); line-height: 1.2; }
    .PartDetailPartCell .ColorGridSwatch.Selected { border: 5px solid #333; }

.MIO_Kanji { font-family: "Segoe UI", "Yu Gothic", "Meiryo", "MS PGothic", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", sans-serif; color: #000; }