* {
	box-sizing: border-box;
}
body,html {
	height:100%;
	width:100%;
	margin:0;
	font-family:verdana,sans-serif;
}
body.moving {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;

}
h1,p{
	margin:0;
}
h1 {

	font-size:1.25em;
}

a {
	color:#0aa376;
	font-weight: bold;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

input {
    display: inline-block;
    vertical-align: middle;
}

header,
footer {
	background-color:#0aa376;
}
header a,
footer a {
	color:white;
}
footer div,
h1 {
	color:white;
	padding: 0.75rem 1rem;
	line-height:1rem;
}

h1,
footer div,
.colorwheel2 {
	position:relative;
	
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.colorwheel2 {
	min-height: calc(100vh - 5rem);
}
.colorwheel2:after {
	display:table;
	content:'';
	clear:both;
}
.wheel-row {
	/* max-width:400px; */
	/* height: 0; */
	position:relative;
	/* padding-bottom: 33.3333333%; */
	width: 66.666666%;
	display: -webkit-flex;
	/* display: flex; */
}
.wheel {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* z-index: 2; */
}
.wheel-half-top,
.wheel-half-bottom {
	height: 50%;
	width: 100%;
	position:absolute;
	top:0;
	left:0;
}
.wheel-half-bottom {
	bottom: 0;
	top: initial;
}
.wheel-saturation {
	background-image:linear-gradient(to right,rgba(128,128,128,1),rgba(128,128,128,0))
}
.wheel-half-top .wheel-lightness {
	background-image:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
.wheel-half-bottom .wheel-lightness {
	background-image:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}
.wheel-color {
	background-color:rgb(255,0,0);
}
.wheel-hue {
	/*position: relative;*/
	position:absolute;
	top:200px;
	height: 25px;
	width: 200px;
	background-image: linear-gradient(to right, rgb(255,0,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255), rgb(255,0,255), rgb(255,0,0))
}
.wheel-colorpick {
	/* left:200px; */
	height: 0;
	/*border-radius:0;
	transition:border-radius .5s;
	cursor:pointer;*/
	position: relative;
	right: 0;
	left: initial;
	padding-bottom: 50%;
	/* z-index: 1; */
}
/*.wheel-colorpick:hover {
	border-radius:20px;
	transition:border-radius .5s;
}*/
.wheel-info {
	/*left:200px;*/
	text-align:right;
	/*width:200px;*/
	/*box-sizing:border-box;*/
	padding:10px;
	font-size:.9em;
}
.wheel-overlay {
	cursor:crosshair;

	touch-action: none;
}
.wheel-indicator {
	position: absolute;
}
.wheel-hue-indicator {
	bottom: -1em;
	left: -4px;
}
.wheel-satlig-indicator {
	top: -5px;
	left: -5px;
	width:10px;
	height:10px;
	border:1px solid black;
	border-radius:100%;
	box-shadow:1px 1px white;
}

.wheel-canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}





.sliders {
	/*position:absolute;
	top:200px;
	left:0;*/
	max-width:400px;
	position:relative;
}
.slider {
	height: 1.6rem;
}
.slider-input {
	width:50px;
}
.slider-range {
	width: 100%;
	height: 100%;
	/*-webkit-appearance:none;*/
	margin:0;
	padding:0;
	border-width:0;
	touch-action: none;
}
.slidera,
.slidein {
	float:left;
	height:100%;
}
.slidera {
	width: 50%;
}
.slidein {
	/*display:none;*/
}
.slidera input {
	position:relative;
	width:100%;
	height:2em;
	top:50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.slidein input,
.slidein label {
	width:50%;
	height:100%;
	float:left;
	height: 1.6rem;
	border-width:0;
	padding:0 .5em;
	line-height: 1.6rem;
}
.slidein input {
	width:5rem;
	vertical-align: baseline;
}
.slidein label {
	font-size: 0.8em;
    width: calc(100% - 5rem);
    /* font-family: "arial narrow",arial,sans-serif; */
}




.swatch-box {
	position:absolute;
	left:400px;
	top:0;
	width:200px;
    height: 100%;
}
.swatch-box h2 {
	font-size: 1em;
	margin: 0;
	padding: 0.2em 0.5em;
    line-height: 1.2em;
}
.swatches {
    height: calc(100% - 1em - 0.6em);
    overflow: auto;
}
.swatch {
	padding:.2em;
	border-radius:12px;
	/* height: 1.5em; */
	position:relative;
	line-height:1rem;
    font-family: "Lucida Console","Lucida Sans Typewriter",monospace;
    font-size: 1rem;
}
.swatch-button {
	border-width:0;
	margin:0;
	padding:0;
	background-color:transparent;
	/* font-family:courier; */
	/*font-size:12px;*/
	/*line-height:18px;*/
	color:inherit;
	/* font-size:inherit; */
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
	border-radius:1em;
	text-align:center;
	box-sizing:border-box;
}
.swatch-box .button-newswatch,
.button-close,
.button-move {
	width:1rem;
	height:1rem;
}
.button-close {
	/*right:3px;
	top:3px;*/
}
.button-move {
	/*top:3px;
	left:3px;*/
}
.button-hex .swatch-button {
    padding: 0 .5rem;
    display: inline-block;
    line-height: 1rem;
    margin: 0 2px;
    vertical-align: middle;
    font-size: 0.7em;
}
.wheel-row .button-newswatch {
	right:10px;
	bottom:10px;
	/*width:1.5em;*/
	height:1.5em;
	line-height:1.5em;
	padding-left:0.5em;
	padding-right:0.5em;
	font-family:inherit;
	font-size:.9em;
	position:absolute;
}
.swatch.active .button-move,
.swatch-button:hover {
	background-color:rgba(255,255,255,0.5);
	box-shadow:0 2px 0 rgba(0,0,0,0.1);
}






.flex-parent {
	display:-webkit-flex;
	display:flex;
}
.flex-child {
	-webkit-flex:1 1 auto;
	flex:1 1 auto;
}
.flex-none {
	-webkit-flex:none;
	flex:none;
}





.wheel-colorpick,
.slidein {
	width: 50%;
}







@media (max-width:599px) {
	h1,
	footer div {
		/*padding:0 1em;
		line-height:3rem;*/
	}

	.colorwheel2 {
		/*min-height:calc(100vh - 4rem);*/
		padding-left:3px;
		padding-right:3px;
	}
	.sliders,
	.wheel-row {
		max-width: 400px;
		width: 100%;
		/* padding-bottom: 50%; */
	}
	.sliders {
		padding-bottom: initial;
	}
	.swatch-box {
		position:relative;
		height:initial;
		width:initial;
		left:initial;
		top:initial;
	}
	.swatches {
		height:initial;
	}
	.swatch-box:after {
		clear:both;
		content:'';
		display:table;
	}
	.swatch {
	    width: 50%;
	    /*display: inline-block;*/
	    float:left;
	    vertical-align: middle;
	}
	.slidein label {
		font-size:.6em;
	}
}

.wheel-box {
    width: 50%;
    position: relative;
    padding-bottom: 50%;
    height: 0;
    z-index: 3;
}