/* Color scheme */
:root{
	--primary:#CAF0F8;
	--primaryDark:#90E0EF;
	--secondary:#00B4D8;
	--secondaryDark:#0077B6;
	--accent:#F5B7B1;
	--accentDark:#E54738;
	--c: #FE0000;
	--db: #FA6C21;
	--d: #F6920A;
	--eb: #FFC000;
	--e: #FFFD03;
	--f: #92D14F;
	--gb: #00AF50;
	--g: #0FA191;
	--ab: #0229E4;
	--a: #7900F1;
	--bb: #AE5CFD;
	--b: #CB00CD;
}

/* layout */
body{
	/* position */
	display: flex;
	flex-direction: column;
	justify-content: center;

	/* style */
	background-color: var(--primary);
	font: tahoma;
	color: var(--eb);
	line-height: 30px;
	font-size: 20px;
}
.headerbar {
	/* position */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-left: 10%;
	margin-right: 10%;
	
	/* style */
	padding-left: 10px;
	padding-right: 10px;
}
.main {
	/* position */
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-grow: 1;
	margin-left: 10%;
	margin-right: 10%;
}
.group{
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	flex-grow: 1;

	/* style */
	margin: 10px 10px 0px 10px;
}
.module{
	/* position */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	max-width: 100%;
	flex-grow: 1;
	flex-shrink: 1;

	/* style */
	margin: 10px 10px 0px 10px;
}
.spacer{
	height: 10px;
}
.title{
	/* position */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-shrink: 1;

	/* style */
	background-color: var(--secondaryDark);
	padding: 5px;
	border-radius: 5px 5px 0px 0px;
	box-shadow: 5px 5px var(--primaryDark);
}
.titleSecondary{
	/* position */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-shrink: 1;

	/* style */
	background-color: var(--secondaryDark);
	padding: 5px;
	box-shadow: 5px 5px var(--primaryDark);
}
.settings{
	/* position */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	flex-grow: 1;
	flex-shrink: 1;

	/* style */
	background-color: var(--secondary);
	padding: 5px;
	box-shadow: 5px 5px var(--primaryDark);
}
.settingsSecondary{
	/* position */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	flex-grow: 1;
	flex-shrink: 1;

	/* style */
	background-color: var(--secondary);
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 5px 5px var(--primaryDark);
}
.settingsSequencer{
	/* position */
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 10px;
	place-content: stretch stretch;
	
	flex-grow: 1;
	flex-shrink: 3;

	/* style */
	background-color: var(--secondary);
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 5px 5px var(--primaryDark);
}
.settingsLong{
	/* position */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-grow:0;
	flex-shrink: 3;

	/* style */
	background-color: var(--secondary);
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 5px 5px var(--primaryDark);
}
.settingsLane{
	/* position */
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
	flex-grow: 1;
	flex-shrink: 1;
	
}


/* Button Styling */
.button{
	width: 50px;
	height: 50px;
	background-color: var(--accent);
	margin: 5px;
	border-radius: 5px;
	transition: background-color 250ms;
	border: 1px solid var(--accentDark);
	flex-grow: 0;
}
.button:hover{
	background-color: var(--accentDark);
}
.fauxButton{
	width: 50px;
	height: 50px;
	margin: 5px;
	flex-grow: 0;
}
.buttonOn{
	width: 50px;
	height: 50px;
	background-color: var(--accentDark);
	margin: 5px;
	border-radius: 5px;
	transition: background-color 250ms;
	border: 1px solid var(--accent);
	flex-grow: 0;
}
.buttonOn:hover{
	background-color: var(--accent);
}
.buttonSmall{
	width: 25px;
	height: 25px;
	background-color: var(--accent);
	margin: 5px;
	border-radius: 5px;
	transition: background-color 250ms;
	position: relative;
	float: right;
	border: 1px solid var(--accentDark);
}
.buttonSmall:hover{
	background-color: var(--accentDark);
}
.buttonOnSmall{
	width: 25px;
	height: 25px;
	background-color: var(--accentDark);
	margin: 5px;
	border-radius: 5px;
	transition: background-color 250ms;
	position: relative;
	float: right;
	border: 1px solid var(--accent);
}
.buttonOnSmall:hover{
	background-color: var(--accent);
}

/* Button Image Styling */
.iconImage{
	width: 40px;
	height: 40px;
	margin: 5px;
}

/* Selector Styling */
.selector{
	display: flex;
	flex-direction: row;
	flex-shrink: 1;

	background-color: var(--primary);
	border: 1px solid var(--secondaryDark);
	border-radius: 5px;
	transition: background-color 250ms;
}
.selector:hover{
	background-color: var(--primaryDark);
}
.icon{
	width: 50px;
	height: 50px;
	border: 1px solid transparent;
	
}
.icon:hover{
	background-color: var(--accent);
	border: 1px solid var(--accentDark);
	border-radius: 5px;
	transition: background-color 250ms;
}
.iconSelected{
	width: 50px;
	height: 50px;
	background-color: var(--accentDark);
	border: 1px solid var(--accent);
	border-radius: 5px;
	transition: background-color 250ms;
}

/* Range Slider Styling */
input{
	-webkit-appearance: none;
	appearance: none;
	background: var(--primary);
	border-radius: 5px;
	transition: background-color 250ms;
	margin: 5px;
	border: 1px solid var(--secondaryDark);
}
input:hover{
	background: var(--primaryDark);
}
input::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	background: var(--accent);
	border-radius: 5px;
	transition: background-color 250ms;
	border: 1px solid var(--accentDark);
}
input::-webkit-slider-thumb:hover{
	background: var(--accentDark);
}
input::-moz-range-thumb{
	-webkit-appearance: none;
	appearance: none;
	background: var(--accent);
	border-radius: 5px;
	transition: background-color 250ms;
	border: 1px solid var(--accentDark);
}
input::-moz-range-thumb:hover{
	background: var(--accentDark);
}
.rangeVertical{
	width: 50px;
	min-height: 100px;
	writing-mode: vertical-lr;
	direction: rtl;
	flex-grow: 0;
	flex-shrink: 1;
}
.rangeVertical::-webkit-slider-thumb{
	width: 50px;
	height: 20px;
	writing-mode: vertical-lr;
	direction: rtl;
}
.rangeVertical::-moz-range-thumb{
	width: 50px;
	height: 20px;
	writing-mode: vertical-lr;
	direction: rtl;
}
.rangeHorizontal{
	height: 50px;
	min-width: 100px;
	writing-mode: horizontal-lr;
	direction: ltr;
	flex-grow: 1;
	flex-shrink: 1;
}
.rangeHorizontal::-webkit-slider-thumb{
	width: 20px;
	height: 50px;
	writing-mode: horizontal-lr;
	direction: ltr;
}
.rangeHorizontal::-moz-range-thumb{
	width: 20px;
	height: 50px;
	writing-mode: horizontal-lr;
	direction: ltr;
}


/* Range slider Tri state styling */
/* Octave styler */
.rangeOct{
	-webkit-appearance: none;
	appearance: none;
	background: var(--primaryDark);
	background-image: url('icons/octaves.png');
	background-size: 140px 40px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	width: 150px;
	height: 50px;
	border-radius: 5px;
		writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms;
	margin: 5px;
}
.rangeOct:hover{
	background: var(--primaryDark);
	background-image: url('icons/octaves.png');
	background-size: 140px 40px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}
.rangeOct::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 50px;
	background: var(--accent);
	opacity: 0.95;
	border-radius: 5px;
	writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms opacity 250mx;
	border: 1px solid var(--accentDark);
}
.rangeOct::-webkit-slider-thumb:hover{
	background: var(--accentDark);
	opacity: 0.85;
}
.rangeOct::-moz-range-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 50px;
	background: var(--accent);
	opacity: 0.95;
	border-radius: 5px;
	writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms opacity 250mx;
	border: 1px solid var(--accentDark);
}
.rangeOct::-moz-range-thumb:hover{
	background: var(--accentDark);
	opacity: 0.85;
}
.rangeWave{
	-webkit-appearance: none;
	appearance: none;
	background: var(--primaryDark);
	background-image: url('icons/waves.png');
	background-size: 140px 40px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	width: 150px;
	height: 50px;
	border-radius: 5px;
	writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms;
	margin: 5px;
}
.rangeWave:hover{
	background: var(--primaryDark);
	background-image: url('icons/waves.png');
	background-size: 140px 40px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}
.rangeWave::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 50px;
	background: var(--accent);
	opacity: 0.95;
	border-radius: 5px;
	writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms opacity 250mx;
	border: 1px solid var(--accentDark);
}
.rangeWave::-webkit-slider-thumb:hover{
	background: var(--accentDark);
	opacity: 0.85;
}
.rangeWave::-moz-range-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 50px;
	background: var(--accent);
	opacity: 0.95;
	border-radius: 5px;
	writing-mode: horizontal-lr;
	direction: ltr;
	transition: background-color 250ms opacity 250mx;
	border: 1px solid var(--accentDark);
}
.rangeWave::-moz-range-thumb:hover{
	background: var(--accentDark);
	opacity: 0.85;
}

/* Sequencer layout */
.stepb{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--b);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepb:hover{
	opacity: 0.5;
}
.stepbb{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--bb);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepbb:hover{
	opacity: 0.5;
}
.stepa{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--a);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepa:hover{
	opacity: 0.5;
}
.stepab{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--ab);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepa:hover{
	opacity: 0.5;
}
.stepg{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--g);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepg:hover{
	opacity: 0.5;
}
.stepgb{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--gb);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepgb:hover{
	opacity: 0.5;
}
.stepf{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--f);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepf:hover{
	opacity: 0.5;
}
.stepe{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--e);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepe:hover{
	opacity: 0.5;
}
.stepeb{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--eb);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepeb:hover{
	opacity: 0.5;
}
.stepd{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--d);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepd:hover{
	opacity: 0.5;
}
.stepdb{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--db);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepdb:hover{
	opacity: 0.5;
}
.stepc{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--c);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepc:hover{
	opacity: 0.3;
}
.stepOn{
	/* Positioning */
	height: 25px
;
	min-width: 25px;

	/* Style */
	background-color: var(--accent);
	border-radius: 5px;
	transition: background-color 100ms;
}

.step{
	/* Positioning */
	height: 25px;
	min-width: 25px;

	/* Style */
	background-color: var(--primary);
	border-radius: 5px;
	transition: background-color 100ms;
}
.step:hover{
	background-color: var(--primaryDark);
}

.stepper{
	/* Positioning */
	height: 12px;
	min-width: 25px;

	/* Style */
	background-color: var(--accent);
	border-radius: 5px;
	transition: background-color 100ms;
}
.stepper:hover{
	background-color: var(--accentDark);
}
.stepperOn{
	/* Positioning */
	height: 12px;
	min-width: 25px;

	/* Style */
	background-color: var(--accentDark);
	border-radius: 5px;
	transition: background-color 100ms;
}


/* Canvas Layout */
canvas{
	/* Positioning */
	flex-grow: 1;
	flex-shrink: 2;
	margin: 5px;
	min-width: 10px;
	min-height: 10px;

	/* Style */
	border-radius: 5px;
	background-color: var(--primaryDark);
	border: 1px solid var(--secondaryDark);
}

#Meter{
	max-width: 30%;
	height: 50px;
	flex-shrink: 1;
}


/* Sidebar settings */
#sidebarSet{
	float:right;
	position:fixed;
	right: 0px;
	width: 200px;
	background-color: white;
}