#bg_Online a{text-decoration:none; color:#63772C}
#bg_Online{background:transparent;width:100%;margin:20px auto 20px;padding:0}
#coloringOnline{width:100%;max-width:1100px;margin:0 auto;padding:0}
#coloringOnline h2{margin-bottom:5px;}
.onlineBox{-js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;}
.onlineLeft{
	max-width: 12%;
    -ms-flex-preferred-size: 12%;
    flex-basis: 12%;
}
.onlineLeft > div{height:fit-content;position:sticky;top:10px;left:0;width:100%}
.onlineCenter{
	max-width: 67%;
    -ms-flex-preferred-size: 67%;
    flex-basis: 67%;
	background: #04585a;border-radius: 0.8em;
}

.onlineRight{
	max-width: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
	background: #067d81;
    z-index: 1;
    border-radius: 0.8em;
	position:relative;
}

.right-inner{
	height:fit-content;
	position:sticky;
	top:10px;
	left:0;
	margin-top:10px;
}
.right-inner > div{width:100%;text-align:center}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 150px;
  height:15px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 16px;
  display:inline-block;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

input[type="range"]::-moz-range-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #3bf5e5;
  box-shadow: -407px 0 0 400px #3bf5e5;
}

input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #3bf5e5;
  box-shadow: -407px 0 0 400px #3bf5e5;
}
.colors{text-align:center;margin-top: -20px;}
.color-item{    width: calc(50% - 30px);
    height: 85px;
    box-shadow: 1px 2px 2px rgba(0,0,0,.53);
    display: inline-block;
    margin: 8px;
    border-radius: 0.8em;
	cursor:pointer;}

	
#overTop{position:absolute;
top:0px;left: calc(50% - 30px);cursor:pointer}
#overTop img{transform: rotate(180deg);}
#overBottom{position:absolute;bottom:0px;left: calc(50% - 30px);cursor:pointer}

.control-button{
	font: 13px v2;
    color: #63772C;
    width: 86px;
    height: 85px;
    display: block;
    margin: 0 auto 16px;
    border: 0;
    border-radius: 0.8em;
	text-align:center;
    -webkit-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    -moz-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    background: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1f561',endColorstr='#c1e35a',GradientType=0);
	transition:0.5s;
	cursor:pointer;
}
.online-box{max-height:780px;}
.bottom-button{
	font: 13px v2;
    color: #FFF;
    float: right;
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 0 0 7px;
    border: 0;
    border-radius: 0.8em;
    -webkit-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    -moz-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.53);
    background: #9adfd8;
    background: -moz-linear-gradient(top,#9adfd8 0%,#83bdb5 45%,#6e9d95 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#9adfd8),color-stop(45%,#83bdb5),color-stop(100%,#6e9d95));
    background: -webkit-linear-gradient(top,#9adfd8 0%,#83bdb5 45%,#6e9d95 100%);
    background: -o-linear-gradient(top,#9adfd8 0%,#83bdb5 45%,#6e9d95 100%);
    background: -ms-linear-gradient(top,#9adfd8 0%,#83bdb5 45%,#6e9d95 100%);
    background: linear-gradient(to bottom,#9adfd8 0%,#83bdb5 45%,#6e9d95 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9adfd8',endColorstr='#6e9d95',GradientType=0);
	text-align:center;
	cursor:pointer;
}

.control-button img,.bottom-button img{
	vertical-align: middle;
	margin:10px auto;
	height:60px;
	width:60px;
	display:inline-block;
}
.control-bottom{background:#4a6d69;border-radius: 0.8em;width:fit-content;padding:0 20px;height:80px}
/**COLOR**/
.onlineLeft{
	padding: 20px 0;
    background: #067d81;
    border: 1px solid #0aa9ae;
    border-radius: 0.8em;
    z-index: 1;
}
.svgC{padding:16px;}
.control-button:hover, .toolActive {
    background: #04585a;
    color: #fff;
}
#canvasDiv{background: #fff;width: 100%;text-align: center;}
input[type=range] {
    background-color: #4A6D69;
    padding: 0!important;
    outline: 0!important;
}
.control-top > div{width:45%;display:inline-block;vertical-align: middle;margin-top: 5px;text-align: center;color: #b1c5c3;font-size:14px;}

#color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://coloringpagesonly.com/wp-content/themes/default1/icon/bgg.png) no-repeat;
    background-size: 100px;
	width: 105px;
    height: 120px;
	padding: 30px;
    padding-top: 58px;    margin-top: 5px;
  border: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}
.select span{display:none}
#color-picker::-webkit-color-swatch {
  border-radius: 15px;
  border: none;
}
#color-picker::-moz-color-swatch {
  border-radius: 15px;
  border: none;
}

@media screen and (max-width: 750px){
	.onlineCenter{
		max-width: 87%;
		-ms-flex-preferred-size: 87%;
		flex-basis: 87%;
	}
	.onlineRight{display:none;}
	.control-button{width:100%}
}


@media screen and (max-width: 650px){
	.onlineBox{display: flex;width:100%;flex-direction: column;}
	.online-box{display:inline-block;max-height: 810px;}
	.onlineRight{
    width: 100%;
    height: 40px;
    display: block;
    max-width: 100%;order: -1;border-radius: 0.8em 0.8em 0 0;}
	.right-inner {margin-top:0}
	.colors{display:none !important}
	.right-inner > div{width: 40%;
    display: inline-block;
    vertical-align: top;}
	#color-picker {    background: transparent;
    width: 80px;
    height: 40px;
    padding: 0;
    margin: 0;}
	.svgC{padding:8px;}
	.onlineLeft{
		width: 100%;
		max-width: 100%;
		margin: 0 auto 0;
		padding: 0;
		border-radius:0;
	}

	.control-button{
		display: inline-block;
		width: 15%;
		padding: 0;
		margin: 0;
		height: auto;
		font-size: 0;
		background: transparent !important;
		box-shadow: none;
		vertical-align: top;
		text-align: center;
	}

	.control-button img{
		height:60px;margin: 10px auto;
		width: 52px;
		padding: 0;
		display: block;
	}

	.onlineCenter{
		border-radius: 0 0 0.8em 0.8em;
		width:100%;
		max-width:100%;
	}
	.control-top > div{font-size:0}
	.control-button:hover img, .toolActive img{
        background: #758c33;
        border-radius: 10px;
    }
}

@media screen and (max-width: 950px){
}