@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}

body {
    background-color: #CEDBFF;
    font-family: Trade Gothic LT,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: AvenirRounded,Helvetica,Arial,sans-serif;
}

.coloring-container {
    /*height: 100%;*/
	height:auto;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
    /*position:relative;*/
}
canvas#canvas{margin-top:65px;}
body.dark {
    color: #fff;
    background-color: #222;
}

::-webkit-scrollbar {
    height: 18px;
}

::-moz-scrollbar {
    height: 18px;
}

@media screen and (min-width: 680px){
::-webkit-scrollbar {
    height: 22px;
}

::-moz-scrollbar {
    height: 22px;
}
}

@media screen and (min-width: 680px){
::-webkit-scrollbar-thumb {
    border-width: 7px;
}

::-moz-scrollbar-thumb {
    border-width: 7px;
}
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    padding-bottom: 10px;
    border: 5px solid transparent;
    background-color: hsla(0,0%,100%,.3);
    background-clip: padding-box;
}

::-moz-scrollbar-thumb {
    border-radius: 20px;
    padding-bottom: 10px;
    border: 5px solid transparent;
    background-color: hsla(0,0%,100%,.3);
    background-clip: padding-box;
}

.coloring-container .header-container {
    padding: 12px 8px;
}

@media screen and (min-width: 680px){
.coloring-container .header-container {
    padding-top: 16px;
    padding-bottom: 12px;
}
}

.coloring-container .header-container .header-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media screen and (min-width: 480px){
.coloring-container .utility:not(:last-child) {
    margin-right: 16px;
}
}

.coloring-container .utility:not(.disabled) {
    cursor: pointer;
}

.coloring-container .utility:not(:last-child) {
    margin-right: 8px;
}

.coloring-container .utility {
    display: inline-block;
    position: relative;
    border: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.coloring-container .utility .icon, .coloring-container .utility .util-label {
    transition: opacity .25s;
}

.coloring-container .utility .icon {
    margin: 0 auto;
}

.coloring-container .clear-els .icon, .coloring-container .share-els .icon {
    background-repeat: no-repeat;
    background-image: url(../images/utility/utility_btns.svg);
    width: 30px;
    height: 23px;
}

.coloring-container .clear-els .icon.reset_image, .coloring-container .share-els .icon.reset_image {
    background-position: 33.3333333333% 100%;
}

.coloring-container .clear-els .icon, .coloring-container .share-els .icon {
    background-repeat: no-repeat;
    background-image: url(../images/utility/utility_btns.svg);
    width: 30px;
    height: 23px;
}

.coloring-container .utility .icon {
    margin: 0 auto;
}

.coloring-container .utility .icon, .coloring-container .utility .util-label {
    transition: opacity .25s;
}

@media screen and (min-width: 680px)
.coloring-container .util-label {
    margin-top: 4px;
    max-height: 200px;
    width: auto;
    transition: max-height .25s;
}
}

.coloring-container .util-label {
    font-size: .7em;
    font-weight: 200;
    letter-spacing: .04em;
    width: 0;
    max-height: 0;
    overflow: hidden;
    text-align: center;
    transition: max-height .25s;
}

.coloring-container .utility:not(.disabled) {
    cursor: pointer;
}

@media screen and (min-width: 680px){
.coloring-container .svg-container {
    height: auto;
}
}

.coloring-container .svg-container {
    text-align: center;
}

.svg-container {
    /*position: relative;*/
    border-radius: 6px;
    background-color: hsla(0,0%,100%,.3);
}

.coloring-container .control-ui {
    /*position: fixed;*/
    position:absolute;
    background: #111;
    width:100%;
}
.coloring-container .control-uis{
    width: 80px;
    height: 90%;
    z-index:999;
}

.coloring-container .topIcon a{
    display:inline;
}
@media screen and (min-width: 680px){
.coloring-container .color-container {
    padding-top: 25px;
    padding-bottom: 25px;
}
}

@media screen and (min-width: 680px){
.coloring-container .color-container, .coloring-container .pattern-toggle {
    height: 96px;
}

.coloring-container .color-container {
    text-align: center;
}
}

.coloring-container .color-container {
    width: 100px;
    height: 100%;
    white-space: unset;
    background: #111;
    padding: 5px 0;
    overflow-y: auto;
    box-sizing: border-box;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.coloring-container .color-option {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 30%;
    margin: 1px;
    box-sizing: border-box;
    cursor: pointer;
    /*box-shadow: 0 0 0 4px #fff;*/
    background-size: 100% auto;
    background-position: 50%;
    transition-property: transform,box-shadow,background-image;
    transition-duration: .3s,.25s,.25s;
}

.coloring-container .color-option.active:before {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s,visibility 0ms;
}

.coloring-container .color-option:before {
    content: "";
    width: 41.5%;
    height: 41.5%;
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    transition: opacity .25s,visibility 0ms .25s;
}

.coloring-container .color-option:before, .coloring-container .pattern-toggle .container, svg {
    position: absolute;
    /*top: 45px;*/
    top: 17px;
    right: 0;
    transform: translate(-50%,-50%);
}

.coloring-container .pattern-toggle {
    position: absolute;
    right: 10px;
    /*bottom: 0;*/
    bottom: -25px;
    cursor: pointer;
    width: 60px;
    height: 64px;
    -webkit-tap-highlight-color: transparent;
}

.coloring-container .pattern-toggle .pattern-icon {
    position: relative;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border-radius: 6px;
    border: 3px solid #fff;
    box-sizing: border-box;
    background-size: 100%;
    transition: opacity .25s;
}

.coloring-container .pattern-toggle .pattern-icon:after, .coloring-container .pattern-toggle .pattern-icon:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #fff;
}	

.coloring-container .pattern-toggle .clear-pattern {
    top: -11px;
    right: -11px;
    border: 2px solid #000;
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    background-image: url(../images/utility/close_x.svg);
    background-position: 50%;
    transition: opacity .25s,visibility 0ms .25s;
    background-repeat: no-repeat;
}

@media screen and (min-width: 680px){
.coloring-container .util-label {
    margin-top: 4px;
    max-height: 200px;
    width: auto;
    transition: max-height .25s;
}
}

.coloring-container .control-ui.selector-open .pattern-selector, .coloring-container .control-ui.selector-open .pattern-toggle {
    z-index: 1;
}

.coloring-container .control-ui.selector-open .pattern-selector {
    bottom: 100%;
    opacity: 1;
    visibility: visible;
    transition: bottom .3s cubic-bezier(0,1.2,1,1.2),opacity .25s;
}

@media screen and (min-width: 680px){
.coloring-container .pattern-selector {
    right: 0;
    max-width: 400px;
}
}

.coloring-container .pattern-selector {
    position: absolute;
    top: 50px;
    width: 60px;
    border-radius: 6px;
    background-color: #373a3d;
    box-sizing: border-box;
    /*opacity: 0;
    visibility: hidden;*/
	display:none;
    transition: bottom .5s,opacity .5s,visibility 0ms .5s;
    right:16px !important;
}

.coloring-container .pattern-selector:after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 22px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #373a3d;
}

.coloring-container .pattern-selector .container {
    height: auto;
    overflow: auto;
	padding-bottom: 15px;
}

.coloring-container .pattern-selector .title {
    padding-bottom: 16px;
    font-size: .875em;
    text-transform: uppercase;
    font-weight: 600;
}

.coloring-container .pattern-selector .close {
    bottom: -10px;
    right: -12px;
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    background-image: url(../images/utility/close_x.svg);
    background-position: 50%;
    transition: opacity .25s,visibility 0ms .25s;
    background-repeat: no-repeat;
    margin: 16px;
    opacity: .8;
    visibility: visible;
    cursor: pointer;
	color: #333;
    text-align: center;
    font-size: 13px;
}

.coloring-container .pattern-selector .pattern-tool {
    cursor: pointer;
    padding: 12px 8px;
    border-top: 1px solid hsla(0,0%,100%,.1);
    transition: background-color .25s;
    -webkit-tap-highlight-color: rgba(255,255,255,.15);
}

.coloring-container .pattern-selector .pattern-tool:not(.custom) .icon.airbrush, .coloring-container[data-tool=airbrush] .pattern-toggle .pattern-icon {
    background-image: url(../images/textures/airbrush_sample.jpg);
}

.coloring-container .pattern-selector .pattern-tool .icon {
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    border-radius: 6px;
    box-sizing: border-box;
    background-size: 100%;
}

.coloring-container .pattern-selector .pattern-tool .icon, .coloring-container .pattern-selector .pattern-tool .label {
    display: inline-block;
    vertical-align: middle;
}

#sizeTablet{
	    width: 40px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
}

.itemSize{
		width:40px;
		height:40px;
		border-radius:8px;
		display:inline-block;
		margin:2px;
		background-color:transparent;
	}
	
	.itemSize div{
		background:#fff;
		border-radius:15px;
		margin: 0 auto;
	}
	
	.sizeSelect{
		border:1px dotted #336;
	}
	
	#huge div{
		width: 35px;
		height: 35px;
		margin-top: 2px;
		border-radius: 18px;
	}
	#small div{
		width: 12px;
		height: 12px;
		margin-top: 13px;
	}
	#medium div{
		width: 20px;
		height: 20px;
		margin-top: 9px;
	}
	#least div{
		width: 5px;
		height: 5px;
		margin-top: 17px;
	}
	#large div{
		width: 26px;
		height: 26px;
		margin-top: 6px;
	}
.icon{
	width: 30px !important;
    height: 23px !important;
	margin:0 5px !important;
	border:none !important;
	border-radius:0px !important;
}

.coloring-container .topIcon{
	height:44px !important;
	width:100% !important;
	text-align: center;
	z-index:993;
}

#home{
	background:url('icon/home.png') no-repeat center top;
	background-size:75%;
}

#tags{
	background:url('icon/tags.png') no-repeat center top;
	background-size:80%;
}

#eraser{
	background:url('icon/eraser.png') no-repeat center top;
	background-size:75%;
}

#marker{
	background:url('icon/marker.png') no-repeat center top;
	background-size:70%;
}

#fullscreen{
	background:url('icon/fullscreen.png') no-repeat center top;
	background-size:70%;
}
	
#save, #undo, #clear, #print{
	background:url('https://lumiere-a.akamaihd.net/v1/files/015cbd30-d1f0-11e6-9ac8-06de3600005d/coloring-book-1.0.5/images/utility/utility_btns.svg') no-repeat;
}

#save{
	background-position: 66.6666666667% 100%;
}

#print{
	background-position: 100% 100%;
}

#undo{
	background-position: 0 100%;
}

#clear{
	background-position: 33.3333333333% 100%;
}

.coloring-container .control-ui .util-label{
	margin-top: 23px;
    font-size: .7em;
    font-weight: 200;
    letter-spacing: .04em;
    overflow: hidden;
    text-align: center;
    transition: max-height .25s;
	width: 35px;
    color: #fff;
}

.coloring-container .control-ui a .util-label{
	color:#fff;
	text-decoration:none;
}

#canvasDiv{
		
		margin:0 auto;


	}
.sizeActive{
	    background: #666;;
}

.coloring-container .color-option.toolActive{
	    border: 1px dotted #666 !important;
}

.adsLeft, .adsRight{
    width:160px;
    overflow:hidden;
    display:none;
}

@media screen and (min-width: 1040px){
    .adsLeft, .adsRight{
        display:block !important;
        position: absolute;
        top: 80px;
        
    }
}
@media (max-width: 414px){
	.coloring-container{width:100%;}
	.color-container.desktop-scroll.topIcon{max-width: 95%;font-size: 15px;}
	.coloring-container .control-uis{margin-top: 45px;/* max-width: 63px; */}
    canvas#canvas{margin-left:45px}
    .coloring-container .pattern-toggle{max-width:32px;right: 10px;bottom: -25px;font-size: 13px;}
}
@media (max-width: 375px){
	.coloring-container{width:100%;}
	.color-container.desktop-scroll.topIcon{max-width: 95%;font-size: 15px;}
	.coloring-container .control-uis{margin-top: 45px;/* max-width: 63px; */}
    canvas#canvas{margin-left:45px}
    .coloring-container .pattern-toggle{max-width:32px;right: 10px;bottom: -25px;font-size: 13px;}
    .coloring-container .color-container{width:80px;}
}
@media (max-width: 320px){
	.coloring-container{width:100%;}
	.color-container.desktop-scroll.topIcon{max-width: 95%;font-size: 15px;}
	.coloring-container .control-uis{margin-top: 45px;max-width: 55px;}
    canvas#canvas{margin-left:45px}
    .coloring-container .pattern-toggle{max-width:32px;right: 10px;bottom: -25px;font-size: 13px;}
    .coloring-container .color-container{width: 55px;}
}