body.single-pen {
	background-color: #f9f9f9;
}

#configurator-header {
	height: 140px;
}
#configurator-header .configurator-header-top {
	height: 66px;
}
#configurator-header #btn-close-configurator i,
.component-options .close-panel i {
	font-size: 4.6rem;
	line-height: 1.1;
}

.selected-model {
	font-size: 2.1rem;
	opacity: 0.5;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: solid 1px rgb(60 60 60 / 0.5);
	display: block;
}

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

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/

	#configurator-header {
		height: 83px;
		height: 90px;
	}
	#configurator-header .order-first {
		height: 66px;
		display: flex;
		align-items: center;
	}

	#configurator-header #btn-close-configurator i,
	.component-options .close-panel i {
		font-size: 3.5rem;
	}

	.selected-model {
		padding: 0;
		margin: 0;
		border: none;
	}
}

@media only screen and (min-width: 992px) {
	/*lg*/

	#configurator-header {
		height: 66px;
	}
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1200px) {
	/*xl*/

	.selected-model {
		font-size: 2.5rem;
		line-height: 2.9rem;
	}
}

@media only screen and (min-width: 1300px) {
}

@media only screen and (min-width: 1800px) {
}

/* Configuration steps */

#pills-steps-tab.nav-pills {
	font-size: 2.1rem;
	justify-content: space-between;
}
#pills-steps-tab.nav-pills .nav-link {
	border: none;
	color: #3c3c3c;
	border-radius: 0;
	padding: 0;
}

#pills-steps-tab.nav-pills .nav-link.active,
#pills-steps-tab.nav-pills .show > .nav-link {
	color: #3c3c3c;
	opacity: 0.5;
	background-color: transparent;
}

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

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/
}

@media only screen and (min-width: 992px) {
	/*lg*/
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1200px) {
	/*xl*/

	#pills-steps-tab.nav-pills {
		font-size: 2.5rem;
		line-height: 2.9rem;
	}
}

@media only screen and (min-width: 1300px) {
}

@media only screen and (min-width: 1800px) {
}

/* Design tab: carousel + component selectors and panels */

.component-options-backdrop.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(160, 160, 160, 0.6);
	display: none;
	z-index: 500;
}

#pills-design {
	height: calc(100vh - 140px);
}

.config-controls-wrapper {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-top: 20vh;
}

#configuration-carousel {
	width: 100%;
}
#configuration-carousel .carousel-inner {
	height: auto;
}
#configuration-carousel .carousel-inner .item {
	z-index: 10;
}
#configuration-carousel .carousel-inner .item > div > * {
	max-height: 100%;
}

#configuration-carousel .carousel-indicators {
	margin-bottom: 0;
}
#configuration-carousel .carousel-indicators li {
	margin: 5px;
	padding: 0;
	border-radius: 100%;
	text-indent: 0;
	position: relative;

	opacity: 1;
	transition: none;
	width: 15px;
	height: 15px;
	background-color: transparent;
	border: 1px solid rgba(60, 60, 60, 0.3);
}
#configuration-carousel .carousel-indicators .active {
	background-color: #fff;
	border: 1px solid #3c3c3c;
}
#configuration-carousel .carousel-indicators .active::after {
	position: absolute;
	content: "";
	height: 11px;
	width: 11px;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background-color: #3c3c3c;
}

.config-toolbar {
	width: 100%;
}

.shadow {
	box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.2);
}

.shadow-inset {
	box-shadow: inset 0 -10px 10px -5px rgba(0, 0, 0, 0.2);
}

.config-controls {
	position: relative;
	z-index: 501;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: stretch;
	width: 100%;
	height: 100px;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-bottom: none;
}
.config-controls .component-selector {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex-grow: 1;
	opacity: 1;
	height: 100%;
	margin: 0;
	padding: 15px;
	padding-bottom: 30px;
	background-color: #fff;
	border: none;
	border-right: 1px solid #cfcfcf;
	text-align: center;
	outline: 0;
	transition: all 0.2s ease;
}
.config-controls .component-selector:last-child {
	border-right: none;
}

.config-controls .component-selector.disabled,
.config-controls .component-selector.disabled:hover,
.config-controls .component-selector.disabled:focus,
.config-controls .component-selector.disabled:active {
	background-color: #fff;
	opacity: 0.6;
	cursor: default;
}
.config-controls .component-selector.disabled * {
	opacity: 0.4;
}

.config-controls .component-selector span {
	color: #3c3c3c;
	display: block;
	font-size: 2rem;
	text-align: center;
}

.config-controls .component-selector img {
	display: block;
	margin: 0 auto;
	max-width: 75%;
	max-height: 50px;
}

.component-options {
	position: absolute;
	width: 100%;
	min-height: 110px;
	z-index: 500;
	bottom: 0;
	transform: translateY(calc(100% - 100px));
	background: #fff;
	border: 1px solid #cfcfcf;
	transition: all 0.2s ease;
}
.component-options.active {
	bottom: 99px;
	transform: translateY(0);
}

.component-options.with-message {
	padding-bottom: 20px;
}

.component-options a.close-panel {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 201;
}

.component-options .options-content {
	max-height: calc(70vh - 100px);
	padding: 20px;
	overflow-y: auto;
}

.component-options .surface-container {
	margin-bottom: 20px;
}

.component-options p.surface-label,
.component-options p.label {
	margin-bottom: calc(15px - 4px); /* i 4px servono per compensare il padding e il border del sample */
	color: #3c3c3c;
	font-size: 1.95rem;
	line-height: 1;
}

ul.colors-list,
ul.ink-colors-list,
ul.refill-colors-list {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1em;
}

ul.colors-list {
	display: flex;
	flex-wrap: wrap;
}

.surface-container.disabled .colors-list,
.surface-container.disabled .surface-label {
	opacity: 0.3;
	pointer-events: none;
}

ul.colors-list li,
ul.ink-colors-list li,
ul.refill-colors-list li {
	display: inline-block;
	list-style-type: none;
	margin: 0 5px;
}

ul.ink-colors-list li,
ul.refill-colors-list li {
	margin: 0 5px 5px 0;
}

ul.colors-list li {
	margin-left: 0;
	margin-right: 20px;
	margin-right: 5px;
	margin-bottom: 15px;
	width: 80px;
}
ul.colors-list li:hover {
	cursor: pointer;
}

ul.colors-list li img {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto;
	margin-bottom: 6px;
	padding: 3px;
	border: 1px solid transparent;
}

ul.colors-list li.active img,
ul.colors-list li:hover img {
	border-color: #3c3c3c;
	border-radius: 100%;
}

ul.colors-list li label,
ul.ink-colors-list li label,
ul.refill-colors-list li label {
	display: block;
	color: #3c3c3c;
	font-size: 1.25rem;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 0;
}

ul.ink-colors-list li label,
ul.refill-colors-list li label {
	margin-top: 6px;
}

ul.colors-list li.novelty label {
	color: #0000ff;
}

ul.colors-list li span.selection,
ul.ink-colors-list li span.selection,
ul.refill-colors-list li span.selection {
	display: inline-block;
	width: 48px;
	height: 48px;
	padding: 3px;
	border-radius: 50%;
	border: 1px solid transparent;
	line-height: 1em;
	line-height: 1;
}

ul.colors-list li.active span.selection,
ul.ink-colors-list li.active span.selection,
ul.refill-colors-list li.active span.selection {
	border-color: var(--base-color);
	position: relative;
}
/* Il codice seguente serve per mostrare un segno di spunta sul colore selezionato */
/*ul.ink-colors-list li.active span.selection:after,
					ul.refill-colors-list li.active span.selection:after {
						content: "\e940";
						font-family: 'prodir-icons';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
						font-size: 2rem;
					}*/

ul.colors-list li span,
ul.ink-colors-list li span,
ul.refill-colors-list li span {
	display: inline-block;
	/*width: 34px;
				height: 34px;*/
	width: calc(48px - 3px * 2 - 1px * 2);
	height: calc(48px - 3px * 2 - 1px * 2);
	border-radius: 50%;
	border: 1px solid var(--border-color);
	cursor: pointer;
	filter: none;
}

ul.colors-list li .no-option,
ul.ink-colors-list li .no-option,
ul.refill-colors-list li .no-option {
	border: none;
}
ul.colors-list li .no-option i,
ul.ink-colors-list li .no-option i,
ul.refill-colors-list li .no-option i {
	font-size: 2em;
}

ul.colors-list.small li span,
ul.ink-colors-list.small li span,
ul.refill-colors-list.small li span {
	width: 36px;
	height: 36px;
}

ul.colors-list.small li span.selection,
ul.ink-colors-list.small li span.selection,
ul.refill-colors-list.small li span.selection {
	width: 42px;
	height: 42px;
	padding: 2px;
}

.font-color ul.colors-list.small li span.selection {
	margin-bottom: 5px;
}

ul.colors-list.vertical li,
ul.ink-colors-list.vertical li,
ul.refill-colors-list.vertical li {
	display: block;
	margin-bottom: 10px;
}

ul.ink-colors-list {
	margin-bottom: 20px;
}

ul.colors-list li:first-child,
ul.ink-colors-list li:first-child,
ul.refill-colors-list li:first-child {
	margin-left: 0;
}

ul.colors-list li:last-child,
ul.ink-colors-list li:last-child,
ul.refill-colors-list li:last-child {
	margin-right: 0;
}

.writing-system-wrapper {
}
.writing-system-wrapper .writing-system-container {
	margin-bottom: 70px;
}
.writing-system-wrapper .writing-system-container .master {
}
.writing-system-wrapper .writing-system-container .master .refill-image {
	max-width: 100%;
	margin-top: -20px;
	margin-bottom: 15px;
}

.writing-system-wrapper .writing-system-container .slave {
	opacity: 0.3;
	pointer-events: none;

	margin-bottom: 20px;
}

.writing-system-wrapper .writing-system-container .refill-radio {
	margin: 0.25rem 0 20px 0;
}
.writing-system-wrapper .writing-system-container .refill-radio input {
	width: 2.5rem;
	height: 2.5rem;
}

.writing-system-wrapper .writing-system-container .refill-radio label,
.writing-system-wrapper .writing-system-container .ball-diameter-radio label {
	font-size: 1.95rem;
}

.writing-system-wrapper .writing-system-container.active {
}
.writing-system-wrapper .writing-system-container.active .master {
}

.writing-system-wrapper .writing-system-container.active .slave {
	opacity: 1;
	pointer-events: auto;
}

.writing-system-wrapper .writing-system-container .ball-diameter-radio-container .custom-radio.ball-diameter-radio:last-child {
	margin-bottom: 0;
}

.component-options p.label.small {
	font-size: 1.8rem;
}

.component-options .standard-message-container {
	position: absolute;
	right: 20px;
	bottom: 20px;
	text-align: right;
	display: block;
	color: #0000ff;
	font-size: 1.6rem;
}
.component-options .warning-message-container {
	color: #0000ff;
	font-size: 1.6rem;
}

@media only screen and (min-height: 700px) {
	.config-controls-wrapper {
		padding-top: 20vh;
	}
}

@media only screen and (min-height: 800px) {
	.config-controls-wrapper {
		padding-top: 30vh;
	}
}

@media only screen and (min-height: 900px) {
	.config-controls-wrapper {
		padding-top: 30vh;
	}
}

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

@media screen and (max-width: 768px) and (orientation: portrait) {
}

@media screen and (max-width: 767px) {
	body.smartphone article {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}

	body.smartphone #pills-design {
		height: 100%;
	}
	body.smartphone.dealer #pills-design {
		height: calc(100vh - 140px - 120px - 40px);
	} /* header 140px, config-controls 120px, footer 40px */

	body.smartphone .config-controls-wrapper {
		padding-top: 20vh;
	}

	body.smartphone #configuration-carousel {
		margin-bottom: 35vh;
	}

	#pills-design .configuration-carousel {
		height: auto;
	}
	#pills-design .configuration-carousel .pen-preview.horizontal-view .view {
		width: 300px;
		height: 80px;
	}

	.config-toolbar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 501;
	}
	body.smartphone.dealer .config-toolbar {
		bottom: 40px;
	}

	.config-controls {
		bottom: 0;
		position: relative;
		height: 120px;
		z-index: 510;
		overflow-x: auto;
		white-space: nowrap;
	}

	.config-controls .component-selector {
		min-width: 210px;
	}

	.component-options {
		padding-top: 55px;
		z-index: 501;
	}
	.component-options.active {
		bottom: 119px;
	}

	.component-options .options-content {
		padding: 0px 20px 0px 20px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.component-options a.close-panel {
		top: 15px;
	}

	.component-options .options-content > .row {
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.component-options .options-content .row .surface-wrapper {
		width: auto;
		max-width: none;
		flex: none;
		margin-right: 79px;
	}
	.component-options .options-content .row .surface-wrapper.last:last-child {
		margin-right: 0;
	}

	.component-options .colors-list {
		padding-left: 10px;
		padding-left: 0;
		padding-right: 10px;
		flex-wrap: nowrap;
	}

	.component-options ul.colors-list li {
		margin-bottom: 0;
	}

	.component-options .options-content .row .writing-system-wrapper {
		width: auto;
		max-width: none;
		margin-right: 79px;
	}
	.component-options .options-content .row .writing-system-wrapper .writing-system-container {
		margin-bottom: 20px;
	}

	.component-options .options-content .row .writing-system-wrapper.last:last-child {
		margin-right: 0;
	}
}

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/

	.component-options .surface-wrapper.last:last-of-type .surface-container,
	.component-options .writing-system-wrapper.last .writing-system-container {
		margin-bottom: 0;
	}

	ul.colors-list li {
		margin-right: 5px;
		width: 80px;
	}

	ul.colors-list li img {
		width: 50px;
		height: 50px;
	}

	ul.colors-list li span.selection,
	ul.ink-colors-list li span.selection,
	ul.refill-colors-list li span.selection {
		width: 50px;
		height: 50px;
	}

	ul.colors-list li span,
	ul.ink-colors-list li span,
	ul.refill-colors-list li span {
		width: calc(50px - 3px * 2 - 1px * 2);
		height: calc(50px - 3px * 2 - 1px * 2);
	}

	.component-options p.surface-label,
	.component-options p.label {
		font-size: 1.8rem;
	}

	.writing-system-wrapper .writing-system-container .refill-radio label,
	.writing-system-wrapper .writing-system-container .ball-diameter-radio label {
		font-size: 1.8rem;
	}

	ul.colors-list li label,
	ul.ink-colors-list li label,
	ul.refill-colors-list li label {
		font-size: 1.2rem;
		line-height: 1.2;
	}

	ul.ink-colors-list {
		margin-bottom: 0px;
	}
}

@media only screen and (min-width: 992px) {
	/*lg*/

	#pills-design {
		height: calc(100vh - 66px);
	}

	body.dealer #pills-design {
		height: calc(100vh - 66px - 40px);
	}

	.component-options .surface-wrapper.last .surface-container,
	.component-options .writing-system-wrapper.last .writing-system-container {
		margin-bottom: 0;
	}
}

/****** MS :: workaround per browser mobile ******/
@media only screen and (min-width: 767px) and (orientation: portrait), only screen and (max-width: 1024px) and (orientation: landscape) {
	body.tablet article {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}
}

@media only screen and (min-width: 767px) and (orientation: portrait) {
	body.tablet #pills-design {
		height: 100%;
	}
	body.tablet .config-controls-wrapper {
		padding-top: 25vh;
	}

	body.tablet #configuration-carousel {
		margin-bottom: 30vh;
	}
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
	body.tablet #pills-design {
		height: calc(100% - 83px);
	}
	body.tablet.dealer #pills-design {
		height: calc(100% - 83px - 40px);
	}

	body.tablet #configuration-carousel {
		margin-bottom: 25vh;
	}
	body.tablet.dealer #configuration-carousel {
		margin-bottom: 20vh;
	}
}
/****** FINE WORKAROUND ******/

@media only screen and (min-width: 1024px) {
	.config-controls {
		height: 120px;
	}
	.config-controls .component-selector {
		padding-bottom: 45px;
	}

	.config-controls .component-selector span {
		font-size: 2.1rem;
	}

	.component-options {
		transform: translateY(calc(100% - 120px));
	}

	.component-options.active {
		bottom: 119px;
		transform: translateY(0);
	}

	.component-options .options-content {
		max-height: calc(70vh - 120px);
	}
}

@media only screen and (min-width: 1200px) {
	/*xl*/

	.config-controls .component-selector span {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}

	.component-options p.surface-label,
	.component-options p.label {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}

	.component-options .refill-radio label,
	.component-options .ball-diameter-radio label {
		font-size: 1.6rem;
	}

	ul.colors-list li {
		width: 75px;
		margin-right: 5px;
	}

	ul.colors-list li label,
	ul.ink-colors-list li label,
	ul.refill-colors-list li label {
		font-size: 1rem;
		line-height: 1.2;
	}
}

@media only screen and (min-width: 1300px) {
	.config-controls {
		height: 165px;
	}

	.config-controls .component-selector {
		padding-bottom: 45px;
	}

	.component-options {
		transform: translateY(calc(100% - 165px));
	}
	.component-options.active {
		bottom: 164px;
	}

	.component-options .options-content {
		max-height: calc(100vh - 165px - 66px);
	}
	body.dealer .component-options .options-content {
		max-height: calc(100vh - 165px - 66px - 40px);
	}

	/*ul.refill-colors-list li { margin: 0 10px; }*/

	ul.colors-list li img {
		/*width: 52px;
				height: 52px;*/
		width: 60px;
		height: 60px;
	}

	ul.colors-list li span.selection,
	ul.ink-colors-list li span.selection,
	ul.refill-colors-list li span.selection {
		width: 60px;
		height: 60px;
	}

	ul.colors-list li span,
	ul.ink-colors-list li span,
	ul.refill-colors-list li span {
		/*width: 52px;
				height: 52px;*/
		width: calc(60px - 3px * 2 - 1px * 2);
		height: calc(60px - 3px * 2 - 1px * 2);
	}
}

@media only screen and (min-width: 1800px) {
}

/* Imprint tab: print area selector, logo editor & more... */

#pills-imprint {
	margin-top: 0px;
	margin-bottom: 20px;
}

#nav-tabs-printarea-tab.nav-tabs {
	border-bottom: 1px solid #cfcfcf;
	margin-right: 0; /* 10px è il padding delle singole colonne, 3 è il numero di padding da considerare */
}

#nav-tabs-printarea-tab.nav-tabs .nav-item {
	width: 45%;
	width: 33.333%;
	margin-bottom: -1px;
}
#nav-tabs-printarea-tab.nav-tabs .nav-item:not(:first-child) {
	margin-left: -1px;
}
#nav-tabs-printarea-tab.nav-tabs .nav-link {
	padding: 9px 30px;
	padding: 9px 15px;
	color: #3c3c3c;
	border-color: transparent;
	border: 1px solid #cfcfcf;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	font-size: 2.5rem;
	line-height: 2.9rem;
	text-align: center;

	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#nav-tabs-printarea-tab.nav-tabs .nav-item.show .nav-link,
#nav-tabs-printarea-tab.nav-tabs .nav-link.active {
	color: rgba(60, 60, 60, 0.5);
	background: none;
	border-bottom: 1px solid #f9f9f9;
}

#nav-tabs-printarea-tab.nav-tabs .nav-link.qrcode {
	background-color: #0000ff;
	color: #fff;
	/* display: flex;
				flex-direction: row;
				align-items: center; */
	padding: 9px 10px;
}
#nav-tabs-printarea-tab.nav-tabs .nav-link.qrcode.active {
	background-color: rgba(0, 0, 255, 0.5);
}

#nav-tabs-printarea-tabContent.tab-content {
	padding-top: 20px;
}

div.nav-pills-printareas-tab-dropdown {
	margin: 20px 0;
}
div.nav-pills-printareas-tab-dropdown .dropdown-toggle {
	height: 40px;
	border-radius: 20px;
	font-size: 2.25rem;
	line-height: 40px;
	padding: 0 20px;
}

div.nav-pills-printareas-tab-dropdown .dropdown-menu .dropdown-item {
	height: 40px;
	font-size: 2.25rem;
	line-height: 1.7;
	padding: 5px 20px;
}

div.nav-pills-printareas-tab-dropdown .dropdown-menu.show,
div.nav-pills-printareas-tab-dropdown .dropdown-menu.show .inner.show {
	min-height: auto !important;
}

.editor-header,
.editor-body,
.editor-footer {
	font-size: 1.6rem;
}

.editor-header {
	min-height: 130px;
	padding: 20px;
	color: #fff;
	background-color: #636363;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.editor-header .row:not(:last-child) {
	margin-bottom: 10px;
}

.image-selection .editor-header > .row {
	min-height: calc(130px - 40px);
	align-content: space-between;
}

.image-filters .editor-header .filters-controls,
.image-fine-tuning .editor-header .tuning-controls {
	min-height: calc(130px - 40px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.text-editor .editor-header {
	min-height: 180px;
}

.editor-body {
	min-height: 49rem;
	padding: 20px;
	color: #3c3c3c;
	background-color: #e7e7e7;
}
.editor-body .form-control {
	background-color: transparent;
	border: 1px solid #cfcfcf;
	font-size: 2.6rem;
}

.editor-body textarea {
	height: 100% !important;
	resize: none;
}

.editor-header p,
.editor-body p {
	font-size: 1.95rem;
	line-height: 1.4;
}

.tab-pane[id^="text-"] .editor-body p:last-of-type {
	margin-bottom: 20px;
}

.editor-footer {
	color: #fff;
	background-color: #636363;
}

.editor-footer .editor-footer-content {
	padding: 20px;
}

.editor-header .btnTooltip {
	font-size: 2rem;
}

/* Your Logo */
.image-filters .filters-controls,
.image-fine-tuning .tuning-controls {
	position: relative;
}
.image-filters .filters-controls .btn,
.image-fine-tuning .tuning-controls .btn {
	display: inline-block;
	padding: 0;
	margin: 0px;
	margin-right: 8px;
}

.image-filters .filters-controls button.btn:last-child,
.image-fine-tuning .tuning-controls button.btn:last-child {
	margin-right: 0;
}

.image-filters .filters-controls .btn-group.move-area,
.image-fine-tuning .tuning-controls .btn-group.move-area {
	width: auto;
}
.image-filters .filters-controls .btn-group.move-area label.btn span,
.image-fine-tuning .tuning-controls .btn-group.move-area label.btn span {
	padding: 0px;
}

.logos-history {
	position: relative;
	margin-top: 7rem;
}
.logos-grid {
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
}
.logos-grid .item {
	flex-basis: 100%;
	height: 100px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin: 0 10px 10px 0px;
	position: relative;
}

.logos-grid .item.loading {
	position: relative;
}
.logos-grid .item.loading:before {
	content: "";
	height: 50px;
	width: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	border-width: 3px;
	border-style: solid;
	border-color: var(--base-color) #ababab #ababab;
	border-radius: 100%;
	animation: rotation 0.7s infinite linear;
	z-index: 1;
}

.logos-grid .item img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	height: auto;
	z-index: 1;
}

.logos-grid .item .actions {
	z-index: 2;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	opacity: 0;
	transition: opacity 0.5s;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	background-color: rgba(255, 255, 255, 0.8);
}
.logos-grid .item .actions button {
	padding: 0px 7.6px;
	display: inline-block;
	margin: 0;
	margin-right: 10px;
}

.logos-grid .item .actions button:last-child {
	margin-right: 0px;
}

.logos-grid .item.active .actions {
	opacity: 1;
}

.logos-grid .item.active img {
	opacity: 0.3;
}

.canvas-container {
	margin-bottom: 0;
}
canvas {
	border: none;
	background-color: transparent;
	width: 100%;
	height: 330px;
}

canvas.lower-canvas {
	background-color: #e6e6e6;
}

.tuning-container .print-area,
.hires-tuning-container .print-area {
	border: 1px dashed rgba(0, 0, 0, 0.6);
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	box-sizing: content-box;
}

.tuning-container .print-area:after,
.hires-tuning-container .print-area:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px dashed rgb(204, 204, 204);
	pointer-events: none;
}

.dropdown-controls {
	position: absolute;
	left: 0;
	top: calc(5.556rem + 5px);
	padding: 20px;
	border-radius: 2.15rem;
	background-color: #fff;
	z-index: 10;
}

.editor-header .dropdown-controls .btn {
	border-color: #3c3c3c;
}

.editor-header .dropdown-controls .btn:hover {
	color: #fff;
	background-color: #3c3c3c;
	border-color: #3c3c3c;
}

.editor-header .dropdown-controls label {
	color: #3c3c3c;
}

.dropdown-controls .btn-pickcolor {
	margin-top: 4px !important;
}

.dropdown-controls.threshold {
}
.dropdown-controls.threshold .form-group {
	margin-bottom: 0;
}

.dropdown-controls.threshold .color-sample {
	height: 20px;
	width: 40px;
}

.dropdown-controls.threshold .color-sample.defaults {
	border: 1px solid #0000ff;
	background: #ffffff;
	background: -moz-linear-gradient(-65deg, #ffffff 48%, #0000ff 50%, #ffffff 53%);
	background: -webkit-linear-gradient(-65deg, #ffffff 48%, #0000ff 50%, #ffffff 53%);
	background: linear-gradient(155deg, #ffffff 48%, #0000ff 50%, #ffffff 53%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}

.dropdown-controls.threshold .threshold-range-wrapper {
	width: 135px;
}
.dropdown-controls.threshold .rangeslider {
	height: 2px;
	margin-top: 10px;
}
.dropdown-controls.threshold .rangeslider__fill {
	background: #3c3c3c;
	box-shadow: none;
	border-radius: 0;
	height: 2px;
}

.dropdown-controls.threshold .rangeslider__handle {
	top: 50%;
	transform: translateY(-50%);
	background-image: none;
	box-shadow: none;
	width: 1rem;
	height: 1rem;
	border-color: #3c3c3c;
	background: #3c3c3c;
}
.dropdown-controls.threshold .rangeslider__handle:after {
	content: none;
}

.dropdown-controls.blend:after {
	left: 50px;
}

.threshold-range {
	display: inline-block;
	padding-top: 3px;
}

/* Custom input range */

/*Chrome*/
input[type="range"] {
	width: 100%;
	margin: 0;
	background-color: transparent;
	-webkit-appearance: none;
}
input[type="range"]:focus {
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	-webkit-appearance: none;
	background-color: #cfcfcf;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border: 1px solid #3c3c3c;
	border-radius: 5px;
	cursor: pointer;
	background: #3c3c3c;
}

/* FF */
input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border: 1px solid #3c3c3c;
	border-radius: 5px;
	cursor: pointer;
	background: #3c3c3c;
}

input[type="range"]::-moz-range-progress {
	background-color: #3c3c3c;
}
input[type="range"]::-moz-range-track {
	background-color: #cfcfcf;
}

/* IE */
input[type="range"]::-ms-fill-lower {
	background-color: #3c3c3c;
}
input[type="range"]::-ms-fill-upper {
	background-color: #cfcfcf;
}

/* Your Text */
.btn-group.btn-group-vertical .btn {
	margin-bottom: 0px;
}

.dropdown-font-family-container {
	width: 100%;
}
.dropdown.font-family {
	width: 100% !important;
}

.bootstrap-select.font-family .dropdown-menu li a span.text,
.bootstrap-select.font-size .dropdown-menu li a span.text {
	line-height: 1;
}

.dropdown.font-size {
	width: 100% !important;
}

body.smartphone .dropdown-font-family-container {
	flex-basis: 65%;
}

body.smartphone .dropdown-font-size-container {
	flex-basis: 30%;
}

.font-color .colors-list {
	position: absolute;
	z-index: 300;
	top: calc(5.556rem + 5px);
	width: 190px;
	margin-top: 0;
	padding: 10px;
	background: #fff;
	background-color: var(--white);
	border: none;
	border-radius: 2.15rem;
	display: none;
	transition: all 0.2s;
}

.font-color .colors-list.open {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.font-color ul.colors-list li {
	flex-basis: 33%;
	margin: 0;
	margin-bottom: 5px;
	text-align: center;
}
.font-color ul.colors-list li label {
	max-width: 85%;
	margin: 0 auto;
}

.text-editor .editor-body .form-group {
	border: 1px solid #cfcfcf;
}
.text-editor .editor-body textarea.form-control {
	border: none;
}

.print-area-details {
	padding: 0 10px;
}
.print-area-details label,
.print-area-details p {
	font-size: 1.95rem;
	line-height: 1.4;
	margin: 0;
	padding: 15px 0;
}

.print-area-details .row {
	border-bottom: 1px solid #cfcfcf;
	min-height: 4.3rem;
}
.print-area-details label {
	margin-left: -10px;
}

.hide-print-areas {
	margin-top: 20px;
	margin-bottom: 4.3rem;
}
/*.hide-print-areas .custom-control-label { font-size: 1.95rem; }*/

/* Your QR Code */
.qrcode-selection .editor-header,
.qrcode-fine-tuning .editor-header {
	background-color: #0000ff;
}
.qrcode-selection .editor-header h2 {
	font-size: 2.5rem;
	margin-bottom: 20px;
}

.qrcode-selection .editor-header p:last-child {
	margin-top: 20px;
}

/* .qrcode-filters .filters-controls,
.qrcode-fine-tuning .tuning-controls {
	position: relative;
}
	.qrcode-filters .filters-controls .btn,
	.qrcode-fine-tuning .tuning-controls .btn {
		display: inline-block;
		padding: 0;
		margin: 0px;
		margin-right: 8px;
	}

.qrcode-filters .filters-controls button.btn:last-child,
.qrcode-fine-tuning .tuning-controls button.btn:last-child { margin-right: 0; }

	.qrcode-filters .filters-controls .btn-group.move-area,
	.qrcode-fine-tuning .tuning-controls .btn-group.move-area { width: auto; }
		.qrcode-filters .filters-controls .btn-group.move-area label.btn span,
		.qrcode-fine-tuning .tuning-controls .btn-group.move-area label.btn span { padding: 0px; } */

.qrcodes-grid {
	position: relative;
	margin-top: 3.5rem;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.qrcodes-grid .item {
	flex-basis: calc(100% / 2 - 10px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px 20px 0px;
	position: relative;
}
.qrcodes-grid .item img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	height: auto;
	z-index: 1;
}

.qrcodes-grid .item .actions {
	z-index: 2;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	opacity: 0;
	transition: opacity 0.5s;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	background-color: rgba(255, 255, 255, 0.8);
}
.qrcodes-grid .item .actions button {
	padding: 0px 7.6px;
	display: inline-block;
	margin: 0;
	margin-right: 10px;
}

.qrcodes-grid .item .actions button:last-child {
	margin-right: 0px;
}

.qrcodes-grid .item.active .actions {
	opacity: 1;
}

.qrcodes-grid .item.active img {
	opacity: 0.3;
}

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

@media screen and (max-width: 768px) and (orientation: portrait) {
}

@media screen and (max-width: 767px) {
}

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/

	#nav-tabs-printarea-tab.nav-tabs .nav-item {
		width: auto;
	}
	#nav-tabs-printarea-tab.nav-tabs .nav-link {
		padding: 6px 30px;
	}
	#nav-tabs-printarea-tab.nav-tabs .nav-link.qrcode {
		padding: 6px 20px;
	}

	#nav-tabs-printarea-tabContent.tab-content {
		padding-top: 60px;
	}

	.editor-header p,
	.editor-body p {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}

	.logos-grid {
		min-height: 320px; /* 3 * 100px + 2 * 10px */
	}
	.logos-grid .item {
		flex-basis: calc(50% - 5px); /* 5px è il massimo valore possibile prima che l'elemento venga mandato a capo */
	}

	.logos-grid .item:nth-child(2n + 2) {
		margin-right: 0;
	}
	.logos-grid .item:nth-last-child(-n + 2) {
		margin-bottom: 0px;
	}

	.image-filters .filters-controls button.btn,
	.image-fine-tuning .tuning-controls button.btn {
		margin-right: 10px;
	}

	.dropdown-controls {
		top: calc(5rem + 5px);
	}

	.editor-header,
	.text-editor .editor-header {
		min-height: calc(8rem * 2);
	}

	.image-selection .editor-header > .row {
		min-height: unset;
	}

	.editor-header .wp-dropzone > div {
		min-height: calc(8rem * 2 - 40px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.dropdown-font-family-container {
		width: calc(50% + 10px);
	}

	.dropdown.font-size {
		width: 70px !important;
	}

	.dropdown-controls.threshold .threshold-range-wrapper {
		width: 200px;
	}

	.font-color .colors-list {
		top: calc(4.3rem + 5px);
	}

	.print-area-details label,
	.print-area-details p {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}

	.qrcodes-grid .item {
		flex-basis: calc(100% / 4 - 8px);
	}

	.qrcodes-grid .item:nth-child(4n + 4) {
		margin-right: 0;
	}
	/* .qrcodes-grid .item:nth-last-child(-n+2) { margin-bottom: 0px; } */
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
	#nav-tabs-printarea-tab.nav-tabs .nav-link {
		padding: 7px 30px;
	}
	#nav-tabs-printarea-tab.nav-tabs .nav-link.qrcode {
		padding: 7px 20px;
	}

	.dropdown.font-size {
		width: 100px !important;
	}
}

@media only screen and (min-width: 992px) {
	/*lg*/

	#pills-imprint {
		margin-top: 50px;
	}

	#nav-tabs-printarea-tab.nav-tabs {
		border-bottom: 1px solid #cfcfcf;
		margin-right: calc(-100% - 10px * 2); /* 10px è il padding delle singole colonne, 1 è il numero di padding da considerare */
	}

	.logos-grid {
		max-height: 430px; /* 4 * 100px + 3 * 10px */
	}
	.logos-grid .item {
		flex-basis: calc(100% / 3 - 7px); /* 7px è il massimo valore possibile prima che l'elemento venga mandato a capo */
	}

	.logos-grid .item:nth-child(2n + 2) {
		margin-right: 10px;
	}
	.logos-grid .item:nth-last-child(-n + 2) {
		margin-bottom: 10px;
	}

	.logos-grid .item:nth-child(3n + 3) {
		margin-right: 0;
	}
	.logos-grid .item:nth-last-child(-n + 3) {
		margin-bottom: 0px;
	}

	.logos-grid .item:hover .actions {
		opacity: 1;
	}

	.logos-grid .item:hover img {
		opacity: 0.3;
	}

	.dropdown.font-size {
		width: 80px !important;
	}
}

@media only screen and (min-width: 1024px) {
	.dropdown-controls {
		top: calc(4.3rem + 5px);
	}

	.image-selection .editor-header .btn {
		height: 5rem;
		border-radius: calc(5rem / 2);
	}
}

@media only screen and (min-width: 1200px) {
	/*xl*/

	#nav-tabs-printarea-tab.nav-tabs {
		border-bottom: 1px solid #cfcfcf;
		margin-right: calc(-150% - 10px * 3); /* 10px è il padding delle singole colonne, 3 è il numero di padding da considerare */
	}

	.image-selection .editor-header .btn {
		height: 4.3rem;
		/*line-height: 4.3rem;*/
		line-height: 4.2rem;
		border-radius: calc(4.3rem / 2);
	}

	.dropdown.font-size {
		width: 100px !important;
	}
}

@media only screen and (min-width: 1300px) {
	.editor-header,
	.text-editor .editor-header {
		min-height: calc(7.4rem * 2);
	}
	.editor-header .wp-dropzone > div {
		min-height: calc(7.4rem * 2 - 40px);
	}

	#text-format-buttons {
		flex-wrap: nowrap;
	}
}

@media only screen and (min-width: 1800px) {
	.editor-header,
	.text-editor .editor-header {
		min-height: calc(7rem * 2);
	}

	.editor-header .wp-dropzone > div {
		min-height: calc(7rem * 2 - 40px);
	}
}

/* Your pen tab: configuration recap info */

#pills-recap {
	margin-top: 0px;
	margin-bottom: 20px;
}
#pills-recap label,
#pills-recap span,
#pills-recap p {
	margin: 0;
	font-size: 2.2rem;
	line-height: 1.2;
	-ms-word-break: normal;
	word-break: normal;
	word-wrap: normal;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#pills-recap .tech-specs {
	border-top: solid 1px rgba(60, 60, 60, 0.25);
	min-height: 8.89rem;
	padding-top: 10px;
	padding-bottom: 5px;
}

#pills-recap .tech-specs.last {
	margin-bottom: 40px;
	border-bottom: solid 1px rgba(60, 60, 60, 0.25);
}

#pills-recap .tech-specs small {
	font-size: 2rem;
	line-height: 2.5rem;
	display: block;
}

#pills-recap .cross-selling-items {
	margin: 20px -10px 40px -10px;
	padding: 20px 30px 10px;
	background-color: #fff;
	border: solid 1px rgba(60, 60, 60, 0.25);
	border-radius: 20px;

	.pen-item-link {
		display: block;
		border-bottom: solid 1px rgba(60, 60, 60, 0.25);
		margin-top: -10px;
		margin-bottom: 20px;

		&:last-child {
			border-bottom: none;
			margin-bottom: 0;
		}

		.pen-item-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;

			h4.pen-title {
				font-size: 2.5rem;
				line-height: 2.9rem;
			}
			span.pen-price {
				line-height: 2rem;

				span {
					font-size: 2rem;
					line-height: 2.5rem;
					white-space: nowrap;
				}
			}
		}

		.pen-item-preview {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2rem;
			margin: 10px 0;

			img {
				max-width: 90%;
			}
		}
	}
}

.btnDownloadPreview,
.btnLogin,
.btnSave,
.btnLogout,
.btnSupport {
	margin-bottom: 20px;
}

#saved-configurations-container {
	display: none;
}

@media only screen and (max-width: 1023px) {
	#pills-recap .tech-specs label,
	#pills-recap .tech-specs span {
		margin-bottom: 5px;
	}
}

@media only screen and (max-width: 767px) {
	#pills-recap .tech-specs label {
		opacity: 0.5;
	}
}

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/

	#pills-recap label,
	#pills-recap span,
	#pills-recap p {
		font-size: 2.5rem;
		line-height: 2.9rem;
	}

	#pills-recap .tech-specs {
		min-height: 5.626rem;
	}

	#pills-recap .cross-selling-items {
		.pen-item-link {
			margin-top: 0;

			.pen-item-info {
				justify-content: center;
				margin: 10px 0 20px;

				span.pen-price {
					line-height: 2rem;

					span {
						font-size: 1.75rem;
					}
				}
			}

			.pen-item-preview {
				margin: 0;
			}
		}
	}
}

@media only screen and (min-width: 992px) {
	/*lg*/

	#pills-recap {
		/*margin-top: 150px;*/
		margin-top: calc(60px + 10px + 2px + 2.6rem * 1.4 + 50px);
	}

	#pills-recap .cross-selling-items {
		.pen-item-link {
			.pen-item-info {
				display: block;
			}
		}
	}
}

@media only screen and (min-width: 1024px) {
	.btnDownloadPreview,
	.btnLogin,
	.btnSave,
	.btnLogout,
	.btnSupport {
		margin-bottom: 20px;
	}

	#pills-recap .tech-specs {
		min-height: 5.443rem;
	}
}

@media only screen and (min-width: 1200px) {
	/*xl*/
}

@media only screen and (min-width: 1300px) {
}

@media only screen and (min-width: 1800px) {
	#pills-recap .tech-specs {
		min-height: 4.5rem;
	}
}

/* Pen preview: vertical and horizontal */

.pen-preview.imprint {
	margin-top: 0px;
}
/*body.smartphone .pen-preview-imprint-wrapper {
		transform: scale(.5) translateY(-50%);
		margin-bottom: -110%;
	}*/

.pen-preview.recap {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*body.smartphone .pen-preview-recap-wrapper {
		transform: scale(.5) translateY(-50%);
		margin-bottom: calc(-110% + 20px);
	}*/

div.pen-preview {
	position: relative;
}

.vertical-view {
	position: relative;
	transform-origin: left top;
}

.pen-preview {
	height: 760px;
	margin: 0px auto;
}
.pen-preview .view {
	position: relative;
	height: 755px;
	width: 118px;
	margin: 0 auto;
	padding: 0;
}

div.pen-preview.horizontal-view {
	height: auto;
}
.pen-preview.horizontal-view .view {
	position: relative;
	width: 1200px;
	height: 150px;
	margin: 0 auto;
	max-width: 90%;
}

.pen-preview img.pen-picture,
.pen-preview img.refill-picture {
	position: absolute;
	top: 0;
	/* height: 520px; */
	left: 0px;
	z-index: 100;
	max-width: 100%;
}

.pen-preview .print-area {
	position: absolute;
	z-index: 200;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.2);
	background: repeating-linear-gradient(30deg, transparent, transparent 5px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0.2) 10px);
}

.pen-preview .print-area.active {
	border: dashed 1px #0000ff;
}

.pen-preview .print-area.no-marker {
	background-color: transparent;
	background-image: none;
	border: none;
	opacity: 1;
}

.horizontal-view {
	position: relative;
}

.pen-preview .overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 500;
}

#download-modal .modal-body img:hover {
	cursor: pointer !important;
}

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

@media only screen and (max-width: 768px) and (orientation: portrait) {
	/*body.tablet .pen-preview-imprint-wrapper {
		transform: scale(.9) translateY(-5%);
		margin-bottom: -10%;
	}

	body.tablet .pen-preview-recap-wrapper {
		transform: scale(.9) translateY(-5%);
		margin-bottom: calc(-10% + 20px);
	}*/
}

@media only screen and (max-width: 767px) {
	div[class*=" border-"],
	div[class^="border-"] {
		border: none !important;
	}
}

@media only screen and (max-width: 575px) {
	/*xs*/
}

@media only screen and (min-width: 576px) {
	/*sm*/
}

@media only screen and (min-width: 768px) {
	/*md*/

	.pen-preview.horizontal-view .view {
		max-width: 80%;
	}

	/*.pen-preview.imprint { margin-top: 10px; }

	.pen-preview.recap {
		margin-top: 10px;
		margin-bottom: 10px;
	}*/
}

@media only screen and (min-width: 992px) {
	/*lg*/

	.pen-preview.imprint {
		margin-top: calc(40px + 10px + 2px + 2.6rem * 1.4);
		margin-top: calc(60px + 10px + 2px + 2.6rem * 1.4);
	}
	.pen-preview.recap {
		margin-top: calc(-40px - 10px + 2px + 2.6rem * 1.4);
		margin-top: 0;
	}
}

@media only screen and (min-width: 992px) {
	.pen-preview.horizontal-view .view {
		max-width: 65%;
	}
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1200px) {
	/*xl*/
}

@media only screen and (min-width: 1200px) and (min-height: 800px) {
	.pen-preview.horizontal-view .view {
		max-width: 55%;
	}
}

@media only screen and (min-width: 1300px) {
	.pen-preview.horizontal-view .view {
		height: 200px;
	}
}

@media only screen and (min-width: 1600px) {
	.pen-preview.vertical-view {
		min-height: 550px;
	}
}

@media only screen and (min-width: 1800px) {
}