/* COLORIZE CSS */
#colorizediv, #colorizediv #canvas {
	width: 100%;	
}

#colorizediv {
	position: relative;
	margin-bottom: 20px;
}

.product-cover {
	display: none;
}

.cv-hidden {
	display: none;
}


/* *****************************
		MOBILE IMAGES MODAL 
********************************/

.colorize-image-container{
	width: 100%;
}

.colorize-close {
	float: right;
}

.no-titlebar  {
   border-radius: 0px !important;

}

.no-titlebar .ui-dialog-titlebar {
   display: none;
}

.no-ui-widget-header .ui-widget-header {
	border:none;
	background: none;
}

.no-ui-widget-header .ui-button-text {
	outline: none;
}

/* ********************
		BACKGROUND 
***********************/

#color-picker {
	display: inline-block;
}

#colorizeBg{
	background-image: url(../img/PaintBrushColorize30.png);

	width: 30px;
    height: 30px;
    border: none;
    outline: none;
    background-size: cover;
   

    display: inline-block;
    margin:0;

    user-select: none;
    cursor: pointer;
}

.sd-label {
	margin:0;
	font-size: 0.7em;
	mix-blend-mode: difference;
	color:grey;

	vertical-align: middle;
    line-height: 1px;
    height: 20px;

	display: inline-block;

	user-select: none;
}

.sp-palette-container {
    max-width: 201px;
}

.bgpanel {
	/*background-color:rgba(255,250,250,0.25);*/
	color:white;

	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 91%, rgba(255,255,255,0.52) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(91%, rgba(246,246,246,0.47)), color-stop(100%, rgba(255,255,255,0.52)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 91%, rgba(255,255,255,0.52) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 91%, rgba(255,255,255,0.52) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 91%, rgba(255,255,255,0.52) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 91%, rgba(255,255,255,0.52) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

#bgColorsHtmlContainer {
	margin-top: 0px;
	padding: 0px 2%;
	/*text-align: center;*/
	font-size: 15px;
	font-weight: bold;
	/*text-shadow: 1px 1px 5px #333333;*/

	width:100%;
	position: absolute;
	bottom: 0px;
	/*float: left;*/
}

#bgColorsHtml {
	margin-bottom: 0px;
}



.sdfs-bg-color {
	display: inline;
	list-style-type:none;
	padding-right:0px;
}

.pantone .sdfs-bg-pick {
	width:15px; 
	height:15px; 
	border:none;
	
	display: inline-block;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
	-o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
}

.square .sdfs-bg-pick {
	width:15px; 
	height:15px;
	border-radius: 100px;

	border:none;	
	display: inline-block;
}

.sdfs-bg-pick.color {
	margin: 2px 0.5px;
}


/* *******************************
		BACKGROUND PANTONE
*********************************/

.pantone-panel {
	width:90%;
}

.pantone {
	/*position: relative;*/
	height: 136px;
}

#pantoneIE {
	position: relative;
	left:50%;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	.pantone {
		position: relative;
		left:50%;
	}
}

.pantone li {
	position: absolute;
	/*left: 150px;*/
	/*top: -178px;*/
}

.pantone .sdfs-bg-pick {
	width:30px; 
	height:76px; 
	border:none;
	
	display: inline-block;
	border-radius: 5px;

	outline: 1px solid transparent;

	-moz-box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.25);
	-o-box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.25);
	box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.25);

	z-index: 999999;
}


/* Big color pickers */
/*
.input-color {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 2.25rem;
    width: 2.25rem;
}

.input-container .color {
    height: 2.25rem;
    width: 2.25rem;
 }
 */