.visually-hidden
{
	margin: -1px;
	padding: 0;

	height: 1px;
	width: 1px;

	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);

	position: absolute;
	overflow: hidden;
}

.hidden
{
	display: none;
}

button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

[tabindex="0"]:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

.form-control:focus-visible
{
	box-shadow: none;
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

/* Image upload */
.input-file-wrap
{
}

.input-file-wrap label
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 254px;
	height: 74px;
	margin: 10px auto;

	font-size: 1.2em;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	color: #000;
	cursor: pointer;

	background-color: #f7f7f7;

	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	border-radius: 10px;
	box-shadow:
	/* 1. Inner shadow: white, only on top */
	inset 0 15px 10px -10px white,

	/* 2. Outer shadow: around the element */
	0 0 8px rgba(0, 0, 0, 0.2);
}

.input-file-wrap label::before
{
	display: block;
	content: '';
	width: 48px;
	height: 48px;
	margin-right: 10px;

	background: url(../../img/svg/upload.svg) no-repeat;
}

.input-file-wrap label:hover
{
	background-color: #e5e5e5;
}

.input-file-wrap label:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: -4px;
}

.input-file-wrap input[type=file]
{
}

.button-close
{
	border: 0;
	padding: 0;
}

.button-close:hover
{
	background-color: #f7e401;
}

/* Image tools */
.image-tools-background
{
	height: 121px;
	margin-top: 14px;
	padding: 9px 0 10px 0;

	background: url(../../img/p2_interface_bg.png); /*shadow*/
}

.image-tools-container
{
	box-sizing: border-box;
	height: 102px;

	position: relative;
	overflow: hidden;

	border-top: solid 1px #bbbbbb;
	border-bottom: solid 1px #bbbbbb;
}

.image-tools-panel
{
	height: 100px;

	/* Positioning the content within the container */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	transform: translateY(0);
	transition: transform 0.5s ease-in-out;
	will-change: transform;
}

.image-tools-panel.slide-up
{
	transform: translateY(-100%);
}

.image-tools
{
	height: 100%;
	display: flex;
}

.image-tool:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: -4px;
}

.image-tool
{
	flex: 1;
	padding: 0;

	border: 0;
	background-color: #f7f7f7;

	text-align: center;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;

	border-right: solid 1px #bbb;
	box-shadow: inset 0 14px 10px -10px white;

	cursor: pointer;
}

.image-tool.last
{
	border-right: 0;
}

.image-tool:hover
{
	background-color: #f7e401;
}

.image-tool::before
{
	content: '';
	display: block;
	margin: 0 auto 10px auto;
}

.image-tool.format::before
{
	/* 138/70 */
	width: 80px;
	height: 40px;

	background: url(../../img/svg/format.svg) no-repeat;
}

.image-tool.rotate::before
{
	/* 68/68 */
	width: 40px;
	height: 40px;

	background: url(../../img/svg/rotate.svg) no-repeat;
}

.image-tool.zoom::before
{
	/* 68/68 */
	width: 40px;
	height: 40px;

	background: url(../../img/svg/zoom.svg) no-repeat;
}

.image-tool.text::before
{
	/* 56/68 */
	width: 33px;
	height: 40px;

	background: url(../../img/svg/text.svg) no-repeat;
}

.image-tool.margin-color::before
{
	/* 68/68 */
	width: 40px;
	height: 40px;

	background: url(../../img/svg/margin-color.svg) no-repeat;
}

.image-tool.frame::before
{
	/* 68/68 */
	width: 40px;
	height: 40px;

	background: url(../../img/svg/frame.svg) no-repeat;
}

.image-tool-options-container
{
	height: 100%;

	background-color: #f7f7f7;
}

.image-tool-options
{
	display: none;
	height: 100%;

	position: relative;
}

.image-tool-options.visible
{
	display: flex;
}

.image-tool-options-panel
{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.image-tool-options-panel.zoom
{
	display: flex;
	margin: 0 20px;
}

/* Text */
.image-tool-options-panel.text
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20px;
}

.image-tool-options-panel.text .form
{
	margin: 0 20px;

	text-align: left;
}

.image-tool-options-panel.text.mix .form
{
	flex-basis: 100px;
	flex-shrink: 0;
}

.image-tool-options-panel.text .form-element-radio input
{
	margin: 4px 0;
}

.image-tool-options-panel.text .form-element-radio label
{
	margin: 4px 0;
}

.image-tool-options-panel.text .form-element:has(input[type=radio]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

.image-tool-options-panel.text .price
{
	padding-left: 20px;
	margin: 0 20px 0 0;

	border-left: solid 1px #d1d1d1;
	text-align: left;
}

.image-tool-options-panel.text.mix .price.stamp-value
{
	flex-basis: 200px;
	flex-shrink: 0;
}

.image-tool-options-panel.text .price-input
{
	display: flex;
	align-items: center;
}

.image-tool-options-panel.text.mix .price.settings-apply .price-input
{
	align-items: flex-start;
}

.image-tool-options-panel.text.mix .price.settings-apply label
{
	margin-left: 5px;
}

.image-tool-options-panel.text .price-input h2
{
	margin: 0 15px 0 0;

	text-align: left;
	font-size: 16px;
	line-height: 20px;
}

.image-tool-options-panel.text .price-input .form-control
{
	margin: 0;
	width: 60px;

	text-align: center;
	color: #525252;
}

.image-tool-options-panel.text .price-detail
{
	margin: 5px 0;
}

/* Margin color */
.image-tool-options-panel.margin-color .form
{
	flex-shrink: 0;
	margin: 0 0 0 20px;
	padding: 0 20px 0 0;

	border-right: 1px solid #d1d1d1;
	text-align: left;
}

.image-tool-options-panel.margin-color .form-element-radio input
{
	margin: 4px 0;
}

.image-tool-options-panel.margin-color .form-element-radio label
{
	margin: 4px 0;
}

.image-tool-options-panel.margin-color .form-element:has(input[type=radio]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

.image-tool-options-panel.margin-color .color-set
{
	margin: 0 0 0 20px;
}

.image-tool-options-panel.margin-color .color
{
	padding: 0;
	border: 0;
}

.image-tool-options-panel.margin-color .color:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: 2px;

	position: relative;
	z-index: 1; /* above siblings */
}

/* Frame */
.image-tool-options-panel.frame
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-tool-options-panel.frame .frame-image
{
	margin-right: 10px;
	width: 90px;
	height: 75px;
	padding: 0;

	border: 0;

	background-size: 100% auto;
	background-repeat: no-repeat;
}

.image-tool-options-panel.frame .frame-image.standard
{
	background-image: url(../../img/frames/frame-standard.png);
}

.image-tool-options-panel.frame .frame-image.rounded
{
	background-image: url(../../img/frames/frame-rounded.png);
}

.image-tool-options-panel.frame .frame-image.grunge
{
	background-image: url(../../img/frames/frame-grunge.png);
}

.image-tool-options-panel.frame .frame-image.vintage
{
	background-image: url(../../img/frames/frame-vintage.png);
}

.image-tool-options-panel.frame .frame-image.moms
{
	background-image: url(../../img/frames/frame-moms.png);
}

.image-tool-options-panel.frame .frame-image.floral
{
	background-image: url(../../img/frames/frame-floral.png);
}

.image-tool-options-panel.frame .frame-image.last
{
	margin-right: 0;
}

.image-tool-options-panel.frame .frame-image:hover
{
	background-color: #f4e24b;
}

.image-tool-close
{
	align-self: center;

	display: block;
	width: 120px;
	margin: 0 20px 0 0;
	padding: 5px 15px;
}

/** Zoom */
.zoom-control
{
	margin: 0 20px;
	padding: 0;
	border: 0;
}

.zoom-control.zoom-in
{
	/* 68/68 */
	width: 32px;
	height: 32px;

	background: url(../../img/svg/zoom-in.svg) no-repeat;
}

.zoom-control.zoom-out
{
	/* 68/68 */
	width: 32px;
	height: 32px;

	background: url(../../img/svg/zoom-out.svg) no-repeat;
}

.zoom-slider
{
	flex-grow: 1;
	height: 30px;

	position: relative;
}

.zoom-range-indicator
{
	width: 0;
	height: 2px;

	position: absolute;
	top: 14px;
	left: 0;
	right: 0;

	background-color: #990000;
}

.zoom-range-warning
{
	display: none;

	font-size: 13px;
	line-height: 16px;
	color: #990000;
}

.zoom-range-warning.visible
{
	display: block;
}

/* Reset */
.zoom-range
{
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;

	cursor: pointer;
}

.zoom-range:focus-visible
{
	outline: none;
	/*
	outline: 4px solid #f47425;
	outline-offset: 2px;
	*/
}

/* Track styling for WebKit and Firefox */
.zoom-range::-webkit-slider-runnable-track
{
	background-image: url(../../img/svg/zoom-range.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 100%;
}

.zoom-range::-moz-range-track
{
	background-image: url(../../img/svg/zoom-range.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 100%;
}

/* Thumb styling for WebKit */
.zoom-range::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;

	width: 0;
	height: 0;

	background-color: transparent;
	border-left: 10px solid transparent; /* Half of the width */
	border-right: 10px solid transparent; /* Half of the width */
	border-bottom: 13px solid black; /* The height and color */
	border-radius: 0;

	transform: translateY(2px);
}

/* Thumb styling for Firefox */
.zoom-range::-moz-range-thumb
{
	border: none;

	width: 0;
	height: 0;

	background-color: transparent;
	border-left: 10px solid transparent; /* Half of the width */
	border-right: 10px solid transparent; /* Half of the width */
	border-bottom: 13px solid black; /* The height and color */
	border-radius: 0;

	transform: translateY(-7px);
}

/* Focus styles */
.zoom-range:focus::-webkit-slider-thumb
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

.zoom-range:focus::-moz-range-thumb
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

/* Replace image button */
.image-new
{
	box-sizing: border-box;
	padding: 35px 10px 5px 10px;
	width: 68px;
	height: 58px;

	position: absolute;
	top: 227px; /*+7 for H*  282/289 223*/
	left: 344px;
	z-index: 1000;
	cursor: pointer;

	border: 0;
	background-color: #f7f7f7;
	background-image: url(../../img/svg/plus.svg);
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: center 5px;

	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;

	opacity: 0.8;
	box-shadow:
	/* 1. Inner shadow: white, only on top */
	inset 0 15px 10px -10px white,

	/* 2. Outer shadow: around the element */
	0 8px 8px rgba(0, 0, 0, 0.2);
}

.image-new.hover
{
	opacity: 1;
}

/* Price calculator */
.label-nominal
{
	font-size: 14px;
	line-height: 1;
	font-family: Post Sans Bold, PostSans-Bold, Arial, sans-serif;
	font-weight: 900;

	float: left;
}

.label-count
{
	font-size: 14px;
	line-height: 1;
}

/* Overrides */
.btn-primary
{
	transition: background-color, border-color, color .25s cubic-bezier(.19,1,.22,1);
}

/* Sheet type & options */
.sheet-type .form-element-radio,
.sheet-options .form-element-radio
{
	display: flex;
	align-items: center;
}

.sheet-type .form-element-radio input,
.sheet-options .form-element-radio input
{
	margin: 5px 5px 5px 0;
}

.sheet-type .form-element:has(input[type=radio]:focus-visible),
.sheet-options .form-element:has(input[type=radio]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

/* Format type */
.format-type .form-element-radio
{
	display: flex;
	align-items: center;
}

.format-type .form-element-radio input
{
	margin: 5px 5px 5px 0;
}

.format-type .form-element:has(input[type=radio]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

/* Delivery type */
.delivery-type
{
	margin-left: 10px;
}

.delivery-type .form-element-radio
{
	display: flex;
	align-items: center;
}

.delivery-type .form-element-radio input
{
	margin: 5px 5px 5px 0;
}

.delivery-type .form-element:has(input[type=radio]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

.delivery-type .form-element-radio .help
{
	margin-left: auto;
}

/* PDF download */
.pdf-download
{
	padding: 0;

	color: #0078c8;
	border: 0;
}

/* Footer */
.tool-footer
{
	display: flow-root;
}

/* Stamp placeholder selection */
.stamp-placeholder-selection
{
	padding: 0;
	border: 0;
}

.stamp-placeholder-selection:focus-visible
{
	outline: 4px solid #f47425;
	outline-offset: 2px;

	position: relative;
	z-index: 1; /* above siblings */
}

/* Footer form */
.footer-form .form-element-checkbox
{
	display: flex;
	align-items: flex-start;
}

.footer-form .form-element-checkbox:has(input[type=checkbox]:focus-visible)
{
	outline: 4px solid #f47425;
	outline-offset: 2px;
}

/* Warning box */
.warning-box button[type=button]
{
}