/**
 * JQuery-ConfigurateurVisuel CSS File 
 *
 * @author : Configurateur Visuel
 * @copyright : 2014-2015 Configurateur Visuel
 * @license : Configurateur Visuel
 */


/**
 * General Classes
 */
.clearLeft {
	clear:left;	
}

.clearboth {
	clear:both;
}

body {
	min-width: 360px;
}

#cvjqueryext {
	margin: auto;
	/*width: 82%;*/
	width: 100%;
}

.page-product-box {
	/*display: none;*/
}

.cv-h1 {
	text-align: center;
	padding-bottom: 20px;
}

.cv-description-content {
	text-align: center;
}

.cv-hidden {
	display: none;
}

.ui-tooltip {/* opacity : 1 !important*/}

/**
 * Text
 */
.cv-title {
	font-weight: bold;
	font-size: 15px;
}

.cv-text, .cv-highlight, #cvjqueryext label {
	font-weight: normal;
}

.cv-highlight  {
	font-weight: 600 !important;
	font-size: 15.7px;
}

.column-header{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	/*color:#929292;*/
	color:#b52c00;
}

/**
 * Borders
 */
.ui-corner-all {
	border-radius: 0px;
}




/**
 * Navigation 
 */
#cv-navigationControl {
	width:100%;
	height:80px;
		
}
#cv-navigationControl ul {
	padding: 0;
	margin: 0;
	position: relative;
}

#cv-navigationControl ul li {
	padding: 5px;
	margin: 0;
	list-style-type: none;
	float:left;
}
#cv-navigationControl ul li img {
	border:1px solid #fff;
}

#cv-navigationControl ul li a:hover img {
	border:1px solid #bbb;
}


/**
 * Viewport
 */
#cv-viewportPanel {
	clear:both;
	/*width:100%;*/
}

#cv-viewport {
	/*height:235px;*/
	overflow: auto;	
	position:relative;	
	background-color: white;
}



/**
* Image designer
*/
.cv-image-designer #cv-viewport {
	overflow-y:hidden;
}

.cv-image-designer #cv-viewportPanel {
	width: 430px !important;
}

.cv-image-designer #cv-patternLibrary {
	width: 554px !important;
}




/**
 * Edition Tools Panel
 */
#cv-editionToolsPanel {
	position:absolute;
	background:#ddd;
	z-index:1;
	top:40px;	
	padding:10px;
	margin-left:5px;
	opacity:0.4;
  	filter:alpha(opacity=40); /* For IE8 and earlier */ 	
}


/**
 * Customize Controls 
 */
#cv-customizeControlsPanel {
	width:100%;	
	float:left;
	/*float:left;*/
	/*height: 202px;*/
	padding-top: 20px;
	padding-left: 10px;*/
}
#cv-customizeControls {
	/*height:200px;*/
}


/**
 * Text Manager
 */	
.text-font-container{
 	float: left;
 	margin-right: 10px;
 }		
.textmanager-font-family-selector {
	float : left;			
}	
.selectMenuOverflow {
	height: 300px;
}


.textmanager-text-style-selector {
	float : left;
	clear:left;
}

.add-line-btn {
	/*text-align: center;*/
	font-weight: bold;

	/*width: 30%;*/
	/*margin: 0 auto;*/

	padding-top: 10px;
	padding-left: 30px;
	padding-bottom: 15px;
}

.upload-font {
	display: inline-block;
	margin-left: 228px;
	display: none;
}

.upload-font label {
    cursor: pointer;
    background-color: #218e53;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;

}
.upload-font label:hover {
    
    background-color: #249a5a;

}

#font-upload {
	width: 1px;
}
.upload-font-info {
	background-color: #218e53;
    border-radius: 50px;
    color: white;
    width: 18px;   
    height: 18px;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
}

.fontupload-tooltip {
	border: 1px solid white;
	background-color:#4C4847 !important;
	color: white;
	font-style:italic;
	font-size: 11px;
}


.font-preview {
	font-size: 12px;
}

#cv_add_line .ui-button-text {
	padding: 6px 12px;
	user-select: none;
}

.cv-alt-button {
	background:#A8A698 !important;
	border-color : #75756E !important;
	color:white !important;
}
.cv-alt-button:hover {
	background:#B5B3A4 !important;
}

.hidden-line {
	display: none;
}

.textmanager-text-alignment-selector {
	float : left;
	/*padding-top: 10px;*/
}

.text-alignment-selector {
	text-align: center;
	font-weight: bold;

	width: 30%;
	margin: 0 auto;

	/*padding-top: 10px;*/
	padding-bottom: 10px;

	 display: none;
}

.text-alignment-selector input {
	 position: absolute;
	  opacity: 0;
	  width: 0;
	  height: 0;
}

.text-alignment-selector i {
	cursor: pointer;
}

.text-alignment-selector [type=radio]:checked + i {
  color:#5e8c31;
}

.text-alignment-selector label {
	font-size: 16px;
}



.textmanager-text-rotation-selector {
	float : left;
}	
.textmanager-text-color-selector {
	float : none;
	padding-left: 30px;
}
.textmanager-text-content-texatarea {
	clear:both;
	width:100%;
}	
.textmanager-text-content-texatarea-noresize {
	clear:both;
	width:92%;
	resize:none;
	height: 15px;
}

.text-size-selector, .text-linespace-selector {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	float : left;
	width: 19%;
}

.text-size-selector{

	padding-right: 10px;

}

.text-delete-icon {
	float: left;
	
}
.text-delete-icon img{
	width: 15px;
    height: auto;
    margin-top: 3px;
}

.font-size-spinner, .font-linespace-spinner{
	width: 70px;
	display: none;
}

.spinner-value {
	float: left;
	background-color: white;
	border-color: #D3D3D3;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	width: 22px;
	text-align: center;
	color: #b5b5b5;
	margin-left: -3px;
	font-size: 12px;
	font-weight: bold;
    height: 18px;
    line-height: 18px;
    vertical-align: baseline;
    background-color: #f0f0f0;
}

#cv-widthScaleContainer .icon-rotate-left {
	opacity: 0.5;
	font-size: 14px;
	position: relative;
    left: -2px;

}

.slider-font {
	float: left;
	width: 85%;
}

#cv-widthScaleContainer .slider-font, #cv-widthScaleContainer .spinner-value  {
	float:none;
}

#cv-widthScaleContainer .spinner-value  {
	position: relative;
	left: -3px;
	padding-left: 5px;
	padding-right: 5px;
}


.submit-add-text {
	clear:both;	
}	


/**
 * Input Text Manager
 */
.cv-textManager-inputs {
	/*height: 220px;*/
	padding-left: 5px;
}	
.ui-selectmenu-text {
	font-size: 1.1em;
	line-height: 0.9 !important;
	font-weight: normal !important;
	border: 1px solid #ffffff;
	border-radius: 5px;
}


.ui-menu-item{
	font-size: 1.2em;
}
.text-content-input {
	/*margin-top: 15px;*/
	margin-bottom: 5px;
	/*padding:3px;*/

	padding:5px; 
	border:1px solid #ccc; 
	-webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    height:45px;
    width:85%;

   /* line-height:60px;*/
}



.text-content-input:focus {border-color:#4CA109; }

.text-content-input-container{
	clear: both;
	float:left;
	width:35%;
	/*margin-top:25px;*/
}

.text-content-input-container label {
	width:25px;
	text-align: right;
	padding-right: 3px;
	margin-bottom: 0px;
}

/* hide IE clear */
.text-content-input-container input::-ms-clear {
	display: none;
}

.text-content-span{
	font-size: 12px;
	font-weight:bold;
}



/* Image Library */
#cv-imageLibrary {
	height:200px;
}
.imageLibrary-collection {
	margin-top:20px;
}
.imageLibrary-thumb {
	width:45px;
	height:45px;
}
.imageLibrary-tooltip {
	border: 1px solid white;
	background: rgba(20, 20, 20, 1);
	color: white;
	font-style:italic;
}

/* Pattern Library */
#cv-patternLibrary {
	/*float:right;*/
	clear: both;
	width:100%;
	/*padding: 5px 5px 0;*/
	/*height:202px;*/
	text-align: center;
}

#cv-patternLibrary .ui-selectmenu-text {
	font-weight: bold !important;
}

.patternLibrary-options {
    padding-top: 10px;
    padding-left: 20px;
   
}
.patternLibrary-text {
    font-weight: bold;
    float: left;
    height: 1px;
    line-height: 35px;
    padding-right: 5px;
}
.patternLibrary-collection-container {
	clear: both;
	/*height:125px;*/
	overflow: auto;
	padding-left: 20px;
	padding-bottom: 20px;
}

.patternLibrary-collection {
	margin-top:20px;
}

.cv-image-designer .patternLibrary-collection {
	text-align: left;
}

.patternLibrary-collection img {
	border-radius: 3px;
}

.patternLibrary-thumb {
	width:100px;
	height:100px;
}

.cv-image-designer .patternLibrary-thumb-swatch {
	width: 50px;
	height: 50px;
	margin: 2px;
}

.patternLibrary-tooltip {
	border: 1px solid white;
	background: rgba(20, 20, 20, 1);
	color: white;
	font-style:italic;
}



/* Color Library */


.cv-textColors-set li {
	float: left;
	padding-right: 5px;
	padding-bottom: 5px;
}

.cv-colorLibrary {
	padding: 5px;
}

.cv-colorLibrary-thumb, .cv-textureLibrary-thumb {
	width: 30px;
	height: 30px;
	border-radius: 0px;
	cursor: pointer;
	margin: -3px;

	/*-moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.75);
	-webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.75);
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.75);*/ /*top internal highlight*/

	-moz-box-shadow: #BBBDBC 2px 2px 2px;
	-webkit-box-shadow: #BBBDBC 2px 2px 2px;
	box-shadow: #BBBDBC 2px 2px 2px;

}

.cv-textureLibrary-thumb {
	background-size: 30px 30px;
}

/**color tooltip*/
.cv-colorLibrary-thumb:hover:after, .cv-textureLibrary-thumb:hover:after{
	border: 1px solid #75756e;
	color:white;
	border-radius: 3px;
	padding: 3px 6px;
	background: #a8a698;
	content: attr(data-name);
	position: absolute;
	top:-25px;
	right: 5px;
	
}


.cv-color-name {
	text-align: center;
	color:#929292;
	font-size: 11px;

	display: none;
}

/* Scene Colorizer */
#cv-colorLibrary ul {
 	padding: 0;
	
	width:100%;
	position: relative;
	text-align: center;
}

#cv-colorLibrary ul li {
	padding: 5px;
	margin: 0;
	list-style-type: none;
	display: inline-block;
	
}

#cv-colorLibrary ul li a:hover div {
	/*border:1px solid rgba(255,255,255,0.75);*/
	-moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.45);
	-webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.45);
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.45); /*top internal highlight*/
}

#cv-colorLibrary ul li a:focus {
	outline:0; /*removes the dotted border*/
}






/* Scene Colorizer */
#cv-sceneColorizer ul {
 	padding: 0;
	margin: 0;
	position: relative;
}

#cv-sceneColorizer ul li {
	padding: 5px;
	margin: 0;
	list-style-type: none;
	float:left;
}

#cv-sceneColorizer ul li a:hover div {
	border:2px solid #fff;
}

#cv-sceneColorizer ul li a:focus {
	outline:0; /*removes the dotted border*/
}


.colorSwatch-color {
	width:35px;
	height:35px;
	border:1px solid #fff;
}	

		
				

/**
 * Options Panel
 */
#cv-optionsPanel {
	/*width:64%;
	float:left;
	display: none;*/
	clear: both;
	margin-bottom: 30px;
}

.option-content {
	margin-bottom: 20px;
}

.cv-attribute-main-title {
	display: none;
}

.cv-attribute {
    display: inline;
    margin-right: 25px;
}

.cv-attribute label {
	text-align: center;
}

/**
 * Save Button Panel
 */
#cv-saveCompositionPanel {
	padding:0;
	/*padding-top:5px;*/
	/*height:180px;*/
	margin-bottom: 50px;
}
#cv-saveCompositionControls {
	margin: 1em 2.2em;
	/*padding-left:20px;*/
}

#cv-quantityContainer {
	
	clear:both;
	/*height:50px;
	line-height:50px;*/
	float:left;
}

#cv-quantitySelector {
	clear:both;	
	width:20px;
}

#cv-quantityContainer .ui-spinner {
	border-radius: 5px;
}



#cv-autocollantContainer, #cv-invertContainer, #cv-pochoirContainer {

	float:left;
	padding-right: 20px;
}
#cv-autocollantSelector {
	clear:both;	
	width:20px;
}
.cv-autocollantSelector, .cv-invertSelector{

}


#cv-invertCheckbox {
	position: relative;
	top:2px;
}

#cv-showRulersContainer{
	text-align: right;
	/*position: relative;
	top: -119px;
	right: 5px;*/
	font-size: 12px;

	
	/*position: inherit;*/
	margin-right: 4px;


}


#cv-showRulers {
	position: relative;
    top: 3px;
}

#text-bgcolor-selector {
    float: right;
    line-height: 30px;
    margin-left: 20px;
    margin-right: 10px;
    position: relative;
    top: -35px;
}

.sp-preview, .sp-preview-inner, .sp-thumb-inner, .sp-thumb-inner, .sp-thumb-el {
	border-radius: 5px;
}

#text-bgcolor {
	float: right;
}

.bgColorTitle{
	margin-right: 10px;
	float:left;
	font-weight: normal;
}

.sp-replacer {
	border: 1px;
	background: #fbdb05;
	padding: 5px;
	position: relative;
    top: -2px;
    left: -6px;
}

.sp-container {
	border: 1px solid #dfd9c3;
	background-color: white;
}


#cv-priceContainer {
	font-size: 22px; 
	font-weight:bold;
	color: #5e8c31;
	
	margin-left:25px;
	height:50px;
	
	float:left;

	position: relative;
	top: 3px;

}

#cv-saveCompositionButtonContainer{
 	float:left;
 	width:30%;
	margin-left:25px;
	  top: -15px;
  position: relative;
}

#cv-saveCompositionButton {
	font-size: 16px; 
    height:50px;
 }

#cv-clientInfo{
	float: right;
    font-weight: bold;
    position: relative;
    right: 10px;
    text-align: right;
    top: -10px;

    display: none;
}

#cv-clientInfo > a > p {
   color: #5e8c31;
    margin: 0 0 4px;
    padding-bottom: 0;

}
#cv-clientInfo > a:hover  {
    outline: none;
    text-decoration: none;
}

.ui-tooltip {
	background-color: transparent;
	background: none;
	border: none ;
	box-shadow: none;
}

.tooltipImg {
	max-width: none;
}

span.cv-textSize{
	margin-right: 3px;
}

#cv-textSizeContainer{
	padding-top: 10px;
	padding-bottom: 20px;
	float:left;
}

.cv-textSizeContainer-Height{
	margin-right: 10px;
}

.cv-image-designer #cv-textSizeContainer{
	padding-bottom: 45px;
}

.cv-inputTextSize {
	padding:5px; border:2px solid #ccc; 
	-webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    width: 52px;
   /* float:left;*/
}
.cv-inputTextSize:focus {border-color:#4CA109; }

#textHeightInput{
	font-size: 1.5em;
	width:80px;
	border: none;
}
#textWidthInput{
	font-size: 1.5em;
	width:110px;
}

#cv-textSizeContainer .ui-spinner.ui-widget.ui-widget-content.ui-corner-all {
    border-radius:6px;
     
}

/* hide arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type='number'] {
    -moz-appearance:textfield;
}

#cv-widthScaleContainer {
	float:right;
	/*width:50%;*/
	padding-top: 20px;
	/*padding-left: 25px;*/
	
}

#cv-widthScale {
	display: inline-block;
	width:205px;
	z-index: 1;
	top:4px;
}

#cv-widthScale .ui-slider-range {
	background-color: #459e00;
}

#cv-widthScale .ui-slider-handle {
	width: 46px;
	height: 20px;
	text-align: center;
}

.slider-tooltip {
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -27px;
	padding: 5px;
	left: -4px;
	text-align: center;
	width: 40px;
}
.slider-tooltip strong {
	display: block;
	padding: 2px;
}




/**
 * Splash Screen
 */
#cv-splashScreen {
	padding:10px;	
}

/**
 * TD
 */
.ui-tabs .ui-tabs-panel, .ui-tabs, .ui-tabs-nav, .ui-tabs .ui-tabs-nav{
	padding:0 0;
}

.ui-tabs-anchor {
	font-size: 15px;
}

/**
* Preloader
*/
body {
	overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/** le-herisson */

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    display: none;
}

.ui-widget-header {
    background: none;
    border: 0;
    color: #433f38;
    font-weight: bold;
}


/* ******************************************
				 RESPONSIVE CANVAS
******************************************* */

.canvas-container, .lower-canvas, .upper-canvas {
	/*max-width: 100%;*/
	/*border:solid 1px black;*/
}

/* center */

.canvas-container {
	transform: translateX(-50%);
    left: 50%;
}

.canvas-container-not-responsive {
	transform: none;
	left: 0px;
}

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

	.cv-text {
		font-size: 13px;
	}

	#cv-right-column {
		float:none;
		width:100%;
		clear: both;
		height: inherit !important;
		position: inherit !important;
	}

	#cv-viewportPanel {
		width:100%;
		padding: 0px;
	}

	.editionTools-text{
		display: none;
	}

	#cv-viewport-superWrapper {
		height:100%;
	}


	.column-header  {
		font-size:10px;
		margin-bottom: 0px;
	}

	.text-content-input-container label {
	    font-size: 10px;
	    width: 10px;
	}

	.cv-textManager-inputs {
		margin-bottom: 15px;
	}

	.text-content-input-container {
	    clear: both;
	    float: none;
	    width: 100%;
	    margin-top: 0px; 
	}

	.text-font-container {
		width: 100%;
	}

	.ui-selectmenu-text {
		font-size: 0.8em;
	}

	.textmanager-font-family-selector{
		width: 100%;
	}

	.text-size-selector, .text-linespace-selector {
		width: 47%
	}



	.add-line-btn {
	    text-align: center;
	    padding-left: 00px;	    
	}

	.text-delete-icon img{
	    margin-top: 5px;
	}

	.text-alignment-selector {
	    width: 100%;
	    padding-top: 10px; 
	    padding-bottom: 5px;


	}


	#cv-widthScaleContainer {
	    float: none; 
	   
	    padding-top: 10px;
	   
	    clear: both;
	}

	#cv-autocollantContainer, #cv-invertContainer, #cv-pochoirContainer {
	    float: none; 
	    padding-right: 20px;
	    margin-top: 10px;
	}



	#cv-showRulersContainer {
	    text-align: left;
	    position: static;
	    margin-top: 10px;
	     margin-top: 10px;
	}

	#text-bgcolor-selector {
	    float: none; 
	    line-height: 30px;
	    margin-left: 0;
	    margin-right: 00px;
	    position: static;
	    margin-top: 10px;
	    

	    margin-bottom: 25px;
	}

	#cv-optionsPanel {
		margin-bottom: 0px;
	}

	#cv-quantityContainer, #cv-priceContainer {
		float: none;
		text-align: center;
		margin-bottom: 10px;
		width: 45%;
		display: inline-block;
	}

	#cv-quantityContainer {
		text-align: right;
	}

	#cv-priceContainer {
		height: auto;
		text-align: left;
		margin-left: 10px;
		position: relative;
   		top: 3px;
		
	}

	#cv-saveCompositionButtonContainer {
	    float: none;
	    width: 100%;
	    margin-left: 0px;
	    margin-bottom: 10px;
	    position: static;

	    text-align: center;
	}

	#cv-clientInfo {
	     float: none; 
	    position: static; 
	    text-align: center;
	    display: none;
	}


	#cv-showRulers {
	    top: 2px;
	}

		

}


@media screen and (max-width: 534px) { 
	.cv-textSizeContainer-Height, .cv-textSizeContainer-Width {
		display: inline-block;
	}

	#cv-saveCompositionControls {
	    padding-left: 10px;
	}

	#cv-textSizeContainer {
		float: none;
		clear: both;

		padding-top: 00px; 
    	padding-bottom: 00px;
	}

	.cv-textSizeContainer-Height {
		margin-bottom: 5px;
	}

	#cv-widthScale {
		width:135px;
	}
}