.wcpfmc-button
{
	margin-top: 17px !important;
}
.wcpfmc-clearfix 
{
  overflow: auto;
}
.wcpfmc-clearfix::after 
{
  content: "";
  clear: both;
  display: table;
}
.wcpfmc-option-row
{
	margin-bottom: 25px;
	display: block;
	clear:both;
}
/* Color Swatch */
#wcpfmc-upload-popup-color-swatches
{
	/* float: left; */
	text-align: center;
	margin-top: 15px;
}
.wcpfmc-color-swatch
{
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 5px;
	cursor: pointer;
	border: 2px dashed transparent;
}
.wcpfmc-swatch-selected 
{
	border: 2px solid #2ea3f2;
	padding: 1px;
}
/* Print Color Selection */
#wcpfmc-print-color-selector-title
{
	margin-top: 10px;
}
#wcpfmc-unitcolor-js-color-selector-container
{
	display: inline-block;
	margin-left: 10px;
}

/* Toggle element */
.wcpfmc-toggle-title
{
	display: block;
} 
.wcpfmc-toggle-element
{
	display: inline-block;
	margin-right: 35px;
	margin-bottom: 20px;
} 
.wcpfmc-toggle-element-disabled:hover::after {
  content: attr(data-hover);   /* the hover text */
  position: absolute;
  bottom: 100%;        /* place above the element */
  left: 0;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  transform: translateY(-5px);
}

.wcpfmc-blur
{
  opacity: 0.6;
  filter: blur(3px);
  pointer-events: none !important;
  pointer: default !important;
}
.wcpfmc-icon-help
{
	color: #2ea3f2;
	font-size: 27px;
}

#wcpfmc-clear-button
{
	
}
#main-header
{
	z-index: 10 !important; /* Forces the menu to be under the overlay of the micromodal*/
}
/* Progress bar */
#wcpfmc-upload-popup-loading-container, .wcpfmc-to-hide-during-upload
{
	display:none;
	margin-bottom: 25px;
}
#wcpfmc-upload-popup-progressbar-percent 
{
	font-weight: bold;
	word-wrap: normal;
	white-space: nowrap;
}
#wcpfmc-upload-popup-progressbar
{
	background:#B5E550; /* Blue: 2ea3f2 */
	height: 30px;
	padding-left: 15px;
	padding-top: 3px;
}
/* End progress bar*/
#wcpfmc-ratio-text
{
	display:inline-block;
	margin-right: 10px;
	vertical-align: middle;
	margin-top: 15px;
	font-size: 16px;
}
input.wcpfmc-disabled {
	background-color: #01b2e8 !important;
}
/* Overlay spinner loader */
#wcpfmc-ratio-analyzer-content-spinner {
  width: 100px;
  height: 100px;
  margin-top: 5%;
}
#wcpfmc-ratio-analyzer-content-spinner-text {
	width: 500px;
	height: 100px;
	text-align: center;
	font-weight: bold;
}

#wcpfmc-ratio-analyzer-content-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.0); /*0.6 translucent backdrop */
  visibility: hidden; /* hidden by default */
  flex-direction: column;
}

/* Ratio analyzer modal */
.modal__container 
{
	max-width: 50%;
}
.wcpfmc-img-container
{
	display: inline-block;
	margin-right: 30px;
	max-width: 200px !important;
	vertical-align: middle;
}
#wcpfmc-upload-popup-img-selector
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  margin-top: 25px;
}
.wcpfmc-image-selector-description 
{
	display: block;
	width: 100%;
	margin-top: 15px;
	white-space: nowrap;
}
@media (max-width: 1400px) 
{
    .modal__container  
	{
        max-width: 90%; 
    }
	
	.wcpfmc-upload-popup-preview-img-container
	{
		display: flex;
		flex-wrap: nowrap;      /* prevent wrapping */
		justify-content: center;
		align-items: center;
		gap: 10px;              /* optional spacing */
	}

	.wcpfmc-img-container 
	{
		flex: 1 1 0;            		/* allow shrinking */
		max-width: 23% !important;      /* each image takes 1/3 of the row */
		height: auto;          			/* keep proportions */
		object-fit: contain;    		/* avoid distortion */
		margin-right: 10px;
	}
	.wcpfmc-image-selector-description, .wcpfmc-wo-bck-iso-img-txt 
	{
		white-space: wrap !important;
	}

}

.wcpfmc-img-container img.selected 
{
  border: 3px solid #2ea3f2;
}
.wcpfmc-img-container img 
{
  cursor: pointer;
  border: 3px solid transparent;
  /* background-color: rgb(231, 9, 130); */ /* Magenta */
}
.checkboard-backgroud 
{
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%), 
      linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(135deg, transparent 75%, #ccc 75%) !important;
    background-size:25px 25px !important; /* Must be a square */
    background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px !important; /* Must be half of one side of the square */
}
.wcpfmc-image-selector-description
{
	display: block;
	font-style: italic;
	text-align: center;
}
.wcpfmc-image-selector-title
{
	flex-basis: 100%;       /* full row */
	display: flex;
	justify-content: center; /* center its content */
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 10px;
}