* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
}

	/* HexKeyboard.php Classes */
	/* Icon Menus Generic + Display Type Classes */
.IconsMenu {
position:absolute;
left:0;
top:0;
width:130pt;
height:88pt;
}

.Displayed {
display:inline;
opacity:1;
}

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

	/* Icons Generic + Positions Classes */
.Icon {
position:absolute;
width:60pt;
cursor:pointer;
}

.Top {
top:4.5pt;
}

.Left {
left:4.5pt;
}

.Center {
left:46px;
}

.Right {
left:93px;
}

.Bottom {
top:62px;
}


	/* Options Div's Classes */
.OptionsDiv {
display:none;
position:absolute;
z-index:2;
left:179px;
top:6px;
width:605px;
height:133px;
border-width:3px;
border-style:solid;
border-radius:9px;
font-size:37px;
font-weight:bold;
}

.SemiOpaqueBlackBG {
position:absolute;
z-index:0;
left:0;
top:0;
width:100%;
height:100%;
opacity:0.6;
}





	/* Form Fields & Buttons Classes */
	/* Form Fields & Buttons Classes */
.BlueGradientOrangeText{
height:43px;
border-left:2px solid #FF740B;
border-top:2px solid #FF740B;
border-right:3px solid #FF994F;
border-bottom:3px solid #FFB880;
background-image:linear-gradient(#00A6ED, #0007FE);
vertical-align:middle;
font-size:32px;
font-weight:bold;
color:#FF740B;
cursor:pointer;
}

.OrangeGradientBlueText {
height:43px;
border-left:2px solid #0006F8;
border-top:2px solid #0006F8;
border-right:3px solid #0070F3;
border-bottom:3px solid #00A4ED;
padding-left:6.75pt;
background-image:linear-gradient(#FFB67D, #FF6100);
text-align:center;
vertical-align:middle;
font-size:32px;
font-weight:bold;
color:#004DF5;
cursor:pointer;
}

.PurpleGradientYellowText {
height:43px;
border-left:2px solid #FEE82C;
border-top:2px solid #FEE82C;
border-right:3px solid #FED22C;
border-bottom:3px solid #FEC92C;
background-image:linear-gradient(#C554E2, #5C00B0);
text-align:center;
vertical-align:middle;
font-size:28pt;
font-weight:bold;
color:#FEE82C;
cursor:pointer;
}

.YellowGradientPurpleText {
width:80pt;
height:43px;
border-left:2px solid #5C07B2;
border-top:2px solid #5C07B2;
border-right:3px solid #7D25C2;
border-bottom:3px solid #963CCD;
padding-left:5.25pt;
background-image:linear-gradient(#FEF46E, #FEC52C);
vertical-align:middle;
font-size:28pt;
font-weight:bold;
color:#963CCD;
cursor:pointer;
}

.GreenGradientRedText {
height:43px;
border-left:2px solid #F02720;
border-top:2px solid #F02720;
border-right:3px solid #FF4E4C;
border-bottom:3px solid #F8787E;
background-image:linear-gradient(#66FA2C,#0B5B07);
text-align:center;
vertical-align:middle;
color:#F02720;
cursor:pointer;
}

.RedGradientGreenText {
height:43px;
border-left:2px solid #238611;
border-top:2px solid #238611;
border-right:3px solid #3AAD19;
border-bottom:3px solid #64F62B;
background-image:linear-gradient(#FF9AA5,#E20F00);
text-align:center;
vertical-align:middle;
color:#64F62B;
cursor:pointer;
}

.Ride {
position:absolute;
top:60px;
width:31px;
cursor:pointer
}

.Snare {
position:absolute;
top:85px;
width:31px;
cursor:pointer;
}

.Kick {
position:absolute;
top:118px;
width:31px;
cursor:pointer
}

.PresetsSelect {
position:absolute;
left:12px;
width:394.75pt;
text-align:left;
padding-left:6.75pt;
font-size:32px;
}

.PresetsInput {
position:absolute;
left:12px;
width:384pt;
text-align:left;
padding-left:6.75pt;
font-size:32px;
}

.PresetsIcon {
position:absolute;
left:408.25pt;
width:48px;
cursor:pointer
}

.PresetsMenuCheckBox {
display:none;
position:absolute;
left:412.75pt;
top:270pt;
}


	/* Number <input>s Style */
input[type="number"] {
-webkit-appearance:textfield;
-moz-appearance:textfield;
appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}





	/* <select> <option>s Classes */
	/* <select> <option>s Classes */
.MidBlueBG {
background: #0056F5;
background-color: #0056F5;
}

.MidOrangeBG {
background: #FF893C;
background-color: #FF893C;
}

.MidPurpleBG {
background: #8E28C8;
background-color: #8E28C8;
}

.MidYellowBG {
background: #FEDC4D;
background-color: #FEDC4D;
}

.MidGreenBG {
background: #329F16;
background-color: #329F16;
}

.MidRedBG {
background: #EF4E4B;
background-color: #EF4E4B;
}





		/* Range input styles  */
		/* Range input styles  */
	/* GENERAL */
input[type="range"] {
appearance: none;
background: transparent;
cursor: pointer;
}

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

	/***** Chrome, Safari, Opera and Edge Chromium styles *****/
input[type="range"]::-webkit-slider-runnable-track {
background: var(--cthumb);
background-color: var(--cthumb);
margin-top: 9.5pt;
height: 3.5pt;
border-radius: 1.75pt;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -1.5pt;
background-color: var(--ctrack);
height: 8.9pt;
width: 8.9pt;
border-radius: 4.5pt;
}

input[type="range"]:focus::-webkit-slider-thumb {
border: 1.5pt solid var(--cthumb);
outline: 1.5pt solid var(--cthumb);
outline-offset: 1.5pt;
}

	/******** Firefox styles ********/
input[type="range"]::-moz-range-track {
background: var(--cthumb);
background-color: var(--cthumb);
height: 3.5pt;
border-radius: 1.75pt;
}

input[type="range"]::-moz-range-thumb {
border: none;
background-color: var(--ctrack);
height: 8.9pt;
width: 8.9pt;
border-radius: 4.5pt;
}

input[type="range"]:focus::-moz-range-thumb {
border: 1.5pt solid var(--cthumb);
outline: 1.5pt solid var(--cthumb);
outline-offset: 1.5pt;
}

::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: var(--cthumb);
border-radius: 1.3px;
border: 0.2px solid #010101;
}

.PurpleThumbYellowTrack {
--cthumb:#7500B3;
--ctrack:#FEE82C;
}

.BlueThumbOrangeTrack {
--cthumb:#00A4ED;
--ctrack:#FF8739;
}





		/* Custom Checkboxes Classes */
		/* Custom Checkboxes Classes */
	/* Customize the label (the CheckBoxContainer) */
.CheckBoxContainer {
display: var(--Display);
padding-left:31px;
padding-top:8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

	/* Hide the browser's default checkbox */
.CheckBoxContainer input {
display:none;
}

	/* Create a custom checkbox */
.CheckMark {
position: absolute;
left: 0;
top:13px;
width: 25px;
height: 25px;
background-color: var(--DefaultBG);
cursor: pointer;
}

	/* Deeper Orange bg onMouseOver */
.CheckMark:hover {
background-color: var(--CheckColor);
}

	/* Blue bg when Checkbox is checked */
.CheckBoxContainer input:checked ~ .CheckMark {
background-color: var(--BoxChecked);
}

	/* Create the CheckMark (hidden when not checked) */
.CheckMark:after {
content: "";
position: absolute;
display: none;
}

	/* Show the CheckMark when checked */
.CheckBoxContainer input:checked ~ .CheckMark:after {
display: block;
}

	/* Style the CheckMark */
.CheckBoxContainer .CheckMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--CheckColor);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.RedGreenCheckBox {
--Display:none;
--DefaultBG:#FF98A3;
--CheckColor:#E21102;
--BoxChecked:#64F62B;
}

.OrangeBlueCheckBox {
--Display:block;
--DefaultBG:#FFB57C;
--CheckColor:#FF740B;
--BoxChecked:#00A4ED;
}

.YellowPurpleCheckBox  {
--Display:block;
--DefaultBG:#FEF46E;
--CheckColor:#FEC52C;
--BoxChecked:#7500B3;
}



		/* KeyRack.php Classes */
		/* KeyRack.php Classes */
	/* HexKeys Elements Classes */
.HexKeyDiv {
display:inline;
position:absolute;
z-index:-1;
width:56.1pt;
height:63.25pt;
border-radius:50%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.HexKeyImage {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
border-radius:50%;
opacity:0.67;
}

.HexKeyWhiteCover {
position:absolute;
z-index:0;
left:0;
top:0;
width:100%;
height:100%;
border-radius:50%;
opacity:0;
}

.HexKeyBlackCover {
position:absolute;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
border-radius:50%;
opacity:0;
}

.NoteRankTable {
position:absolute;
z-index:2;
left:0;
top:0;
width:100%;
height:63.25pt;
border-radius:50%;
}

.NoteRankCell {
display:table-cell;
z-index:2;
width:100%;
height:63.25pt;
text-align:center;
vertical-align:middle;
line-height:1;
}

.HexKeyControl {
position:absolute;
z-index:3;
left:0;
top:0;
width:100%;
height:100%;
border-radius:50%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.KeyRack {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.StillHand {
cursor:url(../../Graphs/HexKeyboard/HandCursor.png),auto;
}

.MovingHand {
cursor: url(../../Graphs/HexKeyboard/HandPlaying1.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
animation: MovingHand 1s linear infinite;
}

@keyframes MovingHand{
    0% {
    cursor: url(../../Graphs/HexKeyboard/HandPlaying1.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
    }
	9% {
    cursor: url(../../Graphs/HexKeyboard/HandPlaying2.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
    }
    18% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying3.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
    }
	27% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying4.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	36% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying5.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	45% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying6.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	56% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying7.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	63% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying8.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	72% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying9.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	81% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying10.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	90% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying11.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
	100% {
	cursor: url(../../Graphs/HexKeyboard/HandPlaying1.png), url(../../Graphs/HexKeyboard/HandCursor.png), auto;
	}
}