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

.clearboth {
	clear:both;
}

/* Absolutely necessary*/
.pb-center-column {
	clear:both;
}

.cv-hidden, li[aria-controls=cv-frameLibrary], #cv-arcText, .text-content-counter, #cv-translation, #cv-help, #cv-help-button {
	display: none;
}

#cv-fontLoader {
	visibility: hidden;
	height: 0px;
}

.ui-widget {
	font-family: inherit;
}

/* ************************************************************************************************
									  NAVIGATION 
************************************************************************************************ */

 #cv-navigationPanel {
 
 }
#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 {
	float:left;
	width:66%;
	clear:left; /* from #cv-navigationControl ul li */
}
#cv-viewport {
	height:800px;
	overflow: hidden;
	position:relative;
	background-color:white !important;
}

#cv-viewport-superWrapper {
	height:800px;
	background-color:white;
}


/**
 * 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 */
  	text-align: center;
}




/* ************************************************************************************************
									  CV RIGHT COLUMN 
************************************************************************************************ */

#cv-right-column {
	width:34%;
	float: right;
}

#cv-right-column h1 {
	padding: 6px;
}

/* ************************************************************************************************
									  CUSTOMIZE CONTROL 
************************************************************************************************ */
#cv-customizeControlsPanel {
	/*prestashop 1.5
	float: left;
	width: 335px;*/
	
}

#cv-customizeControls,.ui-tabs .ui-tabs-panel {
	padding: 0;
}

.cv-customizeControls-container {
    min-height: 50px;
}


/**
 * Text Manager
 */
.textmanager-font-family-selector {
	float : left;
}
.selectMenuOverflow {
	height: 300px;
}
.selectMenuSmallOverflow {
	height: 50px;
}
.text-font-span{
	float: left;
	height: 35px;
	line-height: 35px;
	padding-right: 5px;
}
.textmanager-text-style-selector {
	float : left;
	/*clear:left;*/
}
.textmanager-text-alignment-selector {
	float : left;
}
.textmanager-text-color-selector {
	float : left;
	clear: left;
	margin-right: 15px;
}
.textmanager-text-content-texatarea {
	clear:both;
	width:100%;
}
#text-content {
	padding-bottom: 5px;
}
.submit-add-text {
	clear:both;
}

.text-content-container {
	clear: both;

}

.text-content-container label {
	display: block;
}

.cv-scene-inputs-name {
	color:#a2a2a2;
	font-style: italic;
	margin-top: 10px;
	text-align: right;
}
.cv-scene-inputs-name p {	
	margin-bottom: 0px;
}

.cv-scene-inputs-container {
	border-top: dashed 1px lightgrey;
	border-right: dashed 1px lightgrey;
	padding: 3px 10px 10px 10px;
	padding-bottom: 3px;
	margin-bottom: 10px;
}

.cv-odd-bg{
    background: #F2F2F2;
}



.cv-info {
	font-style: italic;
	color:grey;
	margin-top: 15px;
}



/* File Upload */
#cv-fileUploader {
	max-height:400px;
	overflow: auto;
}

#cv-fileUploader.ui-accordion-content {
	padding:5px;
}
#cv-fileUploader .cv-container {
	border:1px solid #ddd;
	margin:1px;
	padding:2px;
	float:left;
	width: inherit;
}
#cv-fileUploader .cv-image-container {
	width:70px;
	height:70px;
	margin:auto;
	margin-bottom:2px;
}
.fileUploader-tooltip {
	border: 1px solid white;
	background: rgba(20, 20, 20, 1);
	color: white;
	font-style:italic;
}





/* Image Library */
#cv-imageLibrary {		
	max-height:400px;
	overflow: auto;
}
.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;
}




/* Scene Colorizer */	
#cv-sceneColorizer {		

}

#cv-sceneColorizer ul {
 	padding: 0;
	margin: 0;
	position: relative;
	max-height:400px;
	overflow: auto;
}		
#cv-sceneColorizer ul li {
	padding: 2px;
	margin: 0;
	list-style-type: none;
	float:left;
}		
#cv-sceneColorizer ul li a:hover div {
	//*border:2px solid #ccc;*/
}
.colorSwatch-color {
	width:20px;
	height:20px;
	/*border:2px solid #ccc;*/
}	

/* ImageLibrayry Colorizer */	
#cv-imageLibrary-colors ul, #cv-text-gradient-colors ul {
 	padding: 0;
	margin: 0;
	position: relative;
}		
#cv-imageLibrary-colors ul li, #cv-text-gradient-colors ul li  {
	padding: 2px;
	margin: 0;
	list-style-type: none;
	float:left;
}		
#cv-imageLibrary-colors ul li a:hover div, #cv-text-gradient-colors ul li a:hover div  {
	border:2px solid #eee;
}
.cv-libraryColors-set, .cv-textColors-set{
	float: left;
	padding-bottom: 10px;
}


/* Image library color picker */
.cv-libraryColors-set .sp-container{
	background: none;
	border:none;
}

.sp-palette .sp-thumb-el {
	width:26px;
	height:26px;
}
		
				

/**
 * Options Panel
 */
#cv-optionsPanel {
	width:64%;	
	/*float:left;*/
}

#cv-options {
	background-color:white !important;
}

#cv-colorSelectLabel, .colorOptionSelector {
	display: none;
}

.ui-dialog .ui-dialog-buttonpane {
	border-width: 0px 0 0 0;
}

.attribute_label {
	margin-top:10px;
}

.option-content {
	text-align: center;
	margin-bottom: 30px;
	
}

.option-content ul {
	list-style: none;
}

.option-content li {
	margin-bottom: 15px;
	display:inline-block;

}

.option-content li label {
	cursor:pointer;
}


img.attribute_image {
	display: block;
	width: 150px;
	vertical-align: middle;
	margin-right: 5px;
	margin-left: 5px;
}

#cv-optionsPanel #cv-saveCompositionPanel {
	text-align: center;
}

#cv-optionsPanel #cv-priceContainer {
	
	
}

.cv-option-dialog .cv-option-cancel {
	margin: .5em 1em .5em 0 !important;
}



/* ************************************************************************************************
									PRODUCT IMAGE  
************************************************************************************************ */


/* Mise en colonnes */
#cv-customizeControls .cv-mid-row{
	clear: both;
  display: flex;
  align-items: flex-start;
  gap: 16px;            /* espace entre colonnes */
}

/* Colonnes (gauche > droite) */
#cv-customizeControls #cv-mid-container{
  flex: 1 1 60%;
  
  float: none;          /* au cas où des floats existaient */
  box-sizing: border-box;
}

#cv-customizeControls #cv-mid-container-picture{
  flex: 0 1 40%;
  float: none;
  box-sizing: border-box;
  padding-left: 12px;   /* petit espace visuel */
}

/* Image responsive */
#cv-mid-container-picture img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile : empilement */
@media (max-width: 992px){
  #cv-customizeControls .cv-mid-row{
    display: block;
  }
  #cv-customizeControls #cv-mid-container,
  #cv-customizeControls #cv-mid-container-picture{
    width: 100%;
    padding-left: 0;
  }
}

#cv-mid-container-picture {
	text-align: center;
	height: auto;
}

#cv-mid-container-picture img {
	width:100%;
	max-width: 300px;

}
.cv-cover-picture-txt {
 
}


/* ************************************************************************************************
									  SAVE COMPOSITION  
************************************************************************************************ */
#cv-saveCompositionPanel, #cv-optionsButtonPanel {
	margin: 10px 15px 3px 10px;
	background-color:white !important;
}

#cv-quantity label{
	height: 14px;
	vertical-align: middle;
	font-weight: bold;
    font-size: 15px;
}

#cv-quantitySelector {
	clear:both;	
	width:44px;
}
span.cv-quantitySelector{
	font-size: 12px; 
	font-weight:bold;
}
#cv-priceContainer {
	font-size: 29px;
	color: #333333;
	line-height: 32px;
	/*font-weight:bold;*/
	margin-top:10px;
	margin-bottom:10px;
}
#cv-saveCompositionButton, #cv-optionsButton {
	font-size: 16px; 
	height:50px;
	width:100%;
	border:none;

}

/**
* User Save Button
*/
#cv-userSaveCompositionPanel {
	padding:0px 10px;
	border:none;
}

#cv-userSaveCompositionButton {
	width: 49%;
}

#cv-userLoadCompositionButton {
	width: 49%;
}

.fm-savetocart-btn {
	background-color: #999999;
    color: white;
    border: none;
    font-weight: bold;
    padding: 10px;
}

#cv-login, #cv-login a {
	text-align: center;
	font-weight: normal;
	color: #999;
}

#cv-login a:hover {
	color: #777;
}

 #cv-login i {
	color: #AE0E0E;
}

#cv-login-frame #header {
	display: none;
}

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


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(254,254,254,0.95); /* change if the mask should have another color then white */
    z-index:9999; /* 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 */
}

.cv-addtocart-loader-text {
	text-align: center;
}

.cv-waiting {
	background-image:url(img/loading.svg);
	display: inline-block;
    width: 33px;
    height: 33px;
    border:none !important;
    vertical-align: middle;

    display: none;
}

.cv-cart-waiting {
	vertical-align: middle;
    text-transform: none;
    font-size: 18px;
    font-weight: normal;
    line-height: 32px;
    height: 33px;
    display: inline-block;
    margin-left: 10px;

    display: none;
}

/* Mobile info */
#mobile-info {
	display: none;
}

@media screen and (max-width: 400px) {
	#mobile-info-off {
		display:inline;
		position:fixed;
	    top:0;
	    left:0;
	    right:0;
	    bottom:0;
	    background-color:rgba(0,0,0,0.9); /* change if the mask should have another color then white */
	    z-index:9999; /* makes sure it stays on top */
	}
	#message-off {
	    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/rotate_screen_icon.gif); /* path to your loading animation */
	    background-repeat:no-repeat;
	    background-position:center 50px;
	    margin:-100px 0 0 -100px; /* is width and height divided by two */
	   
	}

	#message-off{
		 color:white;
		
	}
}


/* ************************************************************************************************
									  JQUERY UI 
************************************************************************************************ */

/* ******************************************
				 GLOBAL 
******************************************* */

 #cvjqueryext .ui-widget-header {
	background: none;
	/*border:none;*/
}
 #cvjqueryext .ui-widget-content {
	background: none;
	border:none;
	/*font-size: 16px;*/
	/*font-weight: bold;*/
	/*color: #999999*/
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-left, .ui-corner-bottom  {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
 #cvjqueryext .ui-state-default {
    border:none !important;
}

 #cvjqueryext .ui-widget button{
	/*font-family: Arial, Helvetica, sans-serif;*/
}

.ui-widget  {
	font-family: inherit !important;
}

/* ******************************************
				 TABS 
******************************************* */

/* hide tabs header */
 #cvjqueryext .ui-tabs-nav {
	/*display: none;*/
}

/* tabs header */
.ui-widget-header {
	border:none !important;
	border-bottom: 1px solid #E9E9E9;
}

.ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
} 
/*
.ui-tabs-nav .ui-state-active { 
    background: transparent  no-repeat bottom center; 
    border: none; 
} 
.ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
} 
.ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
}
*/

/* ******************************************
				 ACCORDION
******************************************* */

/* hide accordion header */
 #cvjqueryext .ui-accordion-header {
    background:none;
    background-color:#999999;
    height:49px;
    margin-top: 10px;
}

/* accordion default font/icon style*/
 #cvjqueryext .ui-accordion .ui-accordion-header, .ui-accordion-header-icon{
    font-size: 16px;
    line-height: 33px;
    font-weight: bold;
    color: white;
}

/* accordion active font/bg style*/
 #cvjqueryext .ui-state-active  {
	 color: #999999 !important;
	 background: #F0E6D9;
}

/* accordion active icon style*/
#cvjqueryext .ui-state-active > .ui-accordion-header-icon {
	 color: #999999 !important;
}

/* custom icon */
#cvjqueryext .ui-accordion-header > img {
    padding-right: 15px;
}

/* accordion bg and border*/
#cvjqueryext .ui-accordion .ui-widget-content {
	background: white;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
}
#cvjqueryext .ui-accordion-header-active{
	border-left: 1px solid #999999 !important;
	border-right: 1px solid #999999 !important;
	border-top: 1px solid #999999 !important;
}

 #cvjqueryext .ui-accordion-content {
    padding: 0.5em 1em !important;
}

 #cvjqueryext .ui-accordion-nav {
    background: #F0E6D9;
    border-width: 0px 0px 1px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
 #cvjqueryext .ui-accordion-panel {
    margin: 0em 0.2em 0.2em 0.2em;
    background: white;
    /*border:1px solid #999999;*/
}


/* ******************************************
				 SELECTMENU
******************************************* */
 #font-family-menu {
 	background-color: white !important;
 	font-weight: normal;
 }


/* ******************************************
				 SPECTRUM
******************************************* */
 .sp-replacer {
    /*padding: 3px;*/
    border: none;
    margin-top: 5px;
}


/* ******************************************
				 SLIDER
******************************************* */
.fxSlider .ui-widget-header {
	border: 0;
	background-image: none;
	background-color: #EEA200;
}
.fxSlider .ui-slider{
	border: 0;
	background-image: none;
	background-color: #E3E3E3;
}


/* ******************************************
				 VISUAL FX
******************************************* */
#cv-imageEffects {
	display: none;
}

#fx-remove-white-group {
	margin-top: 25px;
}


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

.canvas-container, .lower-canvas, .upper-canvas {
	max-width: 100%;
}

@media screen and (max-width: 992px) { 
	#cv-right-column {
		float:none;
		width:100%;
		clear: both;
		height: inherit !important;
		position: inherit !important;
	}

	#cv-viewportPanel {
		width:100%;
	}

	.editionTools-text{
		display: none;
	}

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

/* viewport.js disableScroll*/
.touch-canvas {
	touch-action:none;
	
}


/* ******************************************
				 NUMERIC STEPPER
******************************************* */

.cv-buttonstepper {
  margin: 0 0 0 5px;
  text-indent: -9999px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  float: left;
  text-align: center;
  background: url(img/icons/buttons-tr-20x40.png) no-repeat;

   padding: 20px 0 0 20px;
}

.cv-dec {
  background-position: 0 -20px;
  margin: 0px 5px 0 0px;
}


.numbers-row label {
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	/*float: left;*/
	text-align: center;
	padding: 5px 10px 0 0;
	/*width: 140px;*/
}


.cv-numeric-input {
  float: left;
  width: 30px;
  /*font-size: 0.5em;*/
  padding: 0px 0 0 0;
  text-align: center;
  /*border-radius: 5px;*/
}


.numbers-row form div {
  overflow: hidden;
  margin: 0 0 5px 0;
}