/* Generales */
	.designerForm{
		padding-bottom: 0px!important;		
	}

	.designerForm .margin-bottom-2{
		margin-bottom: 2rem!important;
	}

	.designerForm .background-white{
		background-color: #fafafa;
		padding-top: 1rem!important;
		padding-bottom: 1rem!important;
		position: relative;
	}

	/* fin generales */
				
	.designerForm .top-bar{
		background-color: rgb(51, 51, 51);
		 
	}

		.designerForm .top-bar h3{
			padding: 4px 7px;
		}

		.designerForm .top-bar p{
			color: #ffffff!important;
			padding: 12px;
			text-align: right;
		}

	/* Botones de control */
	.designerForm .control-buttons {
		list-style: none; 
		padding: 0;
		margin: 0;
		display: flex; 		
		gap: 12px; 
	}

		.designerForm .control-buttons li{
			padding: 6px 0px;
			cursor: pointer;
		}

		.designerForm .control-buttons img{
			height: 24px;
		}

	/* Posiciones de estampación */	
	.designerForm .control-stampingPositions{
		list-style: none; 
		padding: 0;
		margin: 0;
	}

		.designerForm .control-stampingPositions li{
			padding: 6px 0px;
			cursor: pointer;
		}

		


	/* Área de diseño */
	.designerForm .design-area{
		background-color: #ffffff;
		padding: 12px 0px!important;
		text-align: center;
		position: relative;
		overflow: hidden;

	}

		.designerForm .design-area canvas{			
			width: 100%!important;			
			touch-action: none;
    		user-select: none;
		}

		.designerForm .content-area{
			text-align: center;
			
		}

		

	/* Warnings */
	.designerForm .warning{
		text-align: center;
		padding: 10px;
		background-color: #FFF59D;
	}
			
	
	/* Tabs */
	.designerForm .tabsDesign{
		list-style: none; 
		padding: 0;
		margin: 0;
		display: flex; 		
		gap: 16px; 
		justify-content: flex-end;	
		
	}

		.designerForm .tabsDesign li{
			padding: 0px 6px;
			cursor: pointer;
		}

		.designerForm .tab-active{
			border-bottom: 5px solid #03a9f5;
		}

		.designerForm .tabsDesign img{
			height: 32px;
			display: block;
			margin: 0 auto;
		}

		.designerForm .content-tab{
			padding-top: 2.5rem!important;
			padding-left: 5rem!important;
			
		}

			.designerForm .content-tab p{
				font-size: 14px;
			}

		.designerForm .label-check{
			text-align: center;
			color: initial!important;
			font-size: 14px;
		}

			.designerForm .label-check a{
				text-decoration: underline;
				color: initial!important;
				
			}

			.designerForm input[type="checkbox"]:checked + label{
				background-color: transparent;
				color: initial!important;
			}

			.designerForm .blueButton{
				display: flex!important;
				align-items: center;
				justify-content: center;
				width: 100%;
			    margin-top: 15px;
			    cursor: pointer;			   
			    background-color: rgb(3, 169, 245);
			    display: inline-block;
			    text-align: center;
			    color: rgb(255, 255, 255) !important;
			    border-width: initial;
			    border-style: none;
			    border-color: initial;
			    border-image: initial;
			    padding: 8px;
				font-size: 14px;
				margin-bottom: 1.5rem!important;
			}

			.designerForm .blueButton .icono{
				margin-right: 1.5rem;
				filter: invert(1); /* Invierte los colores de la imagen */
				width: 24px;
				height: auto!important;
			}


		.designerForm .file-tips{
			margin-left: 1.5rem;
		}

			.designerForm .file-tips li{
				list-style-type: disc;			
				font-size: 14px;
			}



	.designerForm .resp-block{
		display: none;
	}

	.designerForm .bottom-row{
		display: flex;
		align-items: center;
		height: 134px;
	}

		.designerForm .bottom-row .button-cart{
			height: 100%;
			align-items: center;
			display: flex;
			justify-content: center;
			background-color: #14c336;
			cursor: pointer;
		}

		.designerForm .bottom-row .button-cart p{
			text-align: center;
			text-transform: uppercase;
			color: #ffffff;
			font-size: 1.5rem!important;
		}

	.designerForm .detail-colors ul{
		margin: 0px;
	}
		.designerForm .detail-colors li{
			display: inline-block;
		}

	/* Texto */
		
		.designerForm .relative-pos{
			position: relative;
		}

		.designerForm .select-option-value{
			margin-bottom: 2rem;
		}


		.designerForm .right-elements {
		    display: flex;
		    gap: 10px; 
		    align-items: center;
		}

		.designerForm .select-option-text{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 4px 14px;
			border: 1px solid #e0e0e0;
			border-radius: 12px;
			font-family: sans-serif;
			background: white;	
			cursor: pointer;
		}

		.designerForm .arrow {
		  width: 8px;
		  height: 8px;
		  border-right: 2px solid #444;
		  border-bottom: 2px solid #444;
		  transform: rotate(45deg);
		  margin-left: 4px;		  
		}


		.designerForm .dropdown {			  
		  background: white;
		  border: 1px solid #e0e0e0;
		  border-radius: 12px;
		  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
		  /*display: none;*/
		  z-index: 20;
		  overflow: hidden;
		  position: absolute;
		  width: 95%;
		}

		.designerForm .dropdown-item {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  gap: 4px;
		  padding: 3;
		  cursor: pointer;
		  transition: background 0.15s ease;
		}

		.designerForm .item-color{
			display: inline-flex!important;
		}

			.designerForm .item-font span{
				font-size: 1.25rem;
			}

			.designerForm .item-font p{
				text-align: center;
			}

			.designerForm .item-font{
				/*display: inline-block;
				width: 50%;	*/			
				padding: 3px;
				/*min-height: 5.75rem;*/		
			}

			.designerForm .font-selected{
				font-size: 16px!important;
			}

		.designerForm .dropdown-item:hover {
		  background: #f3f3f3;
		}

		.designerForm .color-circle {
		  	height: 30px;
			width: 30px;
			background-color: rgb(255, 255, 255);
			display: inline-block;
			cursor: pointer;
			border-radius: 50%;
			margin: 4px 4px 4px;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(0, 0, 0, 0.2);
			border-image: initial;
		}

		.designerForm .dropdown-optional{
			display: block;
			border-top: 1px solid #e0e0e0;
			margin-top: 10px;			
			padding: 10px 10px 10px 10px;

		}

			.designerForm .dropdown-optional input{
				margin-bottom: 10px;
			}

	/* Responsive */
	@media only screen and (max-width: 640px) {

		.designerForm .control-stampingPositions{
			display: flex; 
			gap: 12px; 
			justify-content: flex-end;
		}

			.designerForm .control-stampingPositions .icon-pos, .tabsDesign img{
				height: 24px!important;
			}


		.designerForm .resp-none{
			display: none;
		}

		.designerForm .resp-block{
			display: block;
		}

		.designerForm .bottom-row{
			display: block;
			height: auto;
		}

		.designerForm .bottom-row .button-cart{
			margin-top: 10px;
    		height: 6rem;
		}

		.designerForm .content-tab{
			padding: 2.5rem 1rem 0 0rem!important;
		}

		.tabs-design{
			padding-top: 1.25rem!important;
		}

	}

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

		/* Texto */
		.designerForm .item-font{
				display: block;
				width: 100%;						
		}


	}


	/* Escritorio */
	@media only screen and (min-width: 640px) {

		.designerForm .control-stampingPositions{
			position: absolute;
			bottom: 0;
			padding-bottom: 1.5rem;
		}


			
	}