/* 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;
		}

	/* 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;
		}

	}

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

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


			
	}