/*******************************
*		Layout & grid
********************************/

.lamino-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	column-gap: 0;
	background-image: linear-gradient(#ccc, #ccc);
	background-size: 1px 100%;
	background-position: 50%;
	background-repeat: no-repeat;
}

.lamino-col-a {
	grid-column: 1;
	padding-right: 33px;
}

.lamino-col-b {
	grid-column: 2;
	padding-left: 33px;
}

.lamino-hidden {
	display: none !important;
}

@media (max-width:850px) {
	.lamino-grid{
		grid-template-columns: 1fr;
		background-image: none;
	}
	.lamino-col-a {
		grid-column: 1;
		padding-right: 0;
	}
	.lamino-col-b {
		grid-column: 1;
		padding-left: 0;
	}
}

/*******************************
*		Preview Container
********************************/
#svg-sticky{
	position: sticky;
	top: 0;
	z-index: 10;
}

.lamino_preview_container {
	height: 175px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	width: 100%;
	overflow: hidden;
}

.lamino_preview_container table {
	margin-block-end: 0;
	position: relative;
	top: 10px;
	width: auto;
}

.lamino_preview_container table td {
	border: 0;
	padding: 0;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
	color: #1a313a;
	font-weight: 700;
	font-style: italic;
}

.lamino_preview_container table tr:first-child td:first-child {
	padding-right: 5px;
	width: 20px;
	position: relative;
}

.lamino_preview_container table tr:last-child td:last-child {
	padding-top: 5px;
	height: 20px;
	position: relative;
}

.lamino_preview_container .vertical_ruler {
	border-right: 2px solid #1a313a;
	position: absolute;
	right: 7.5px;
	top: 0;
	height: 100%;
}

.lamino_preview_container .bottom_line,
.lamino_preview_container .top_line {
	position: absolute;
	width: 8px;
}

.lamino_preview_container .top_line {
	border-top: 2px solid #1a313a;
	top: 0;
	right: 5px;
}

.lamino_preview_container .bottom_line {
	border-bottom: 2px solid #1a313a;
	bottom: 0;
	right: 5px;
}

.lamino_preview_container .horizontal_ruler {
	border-top: 2px solid #1a313a;
	float: left;
	width: calc(100% - 4px);
	position: relative;
	top: 3px;
}

.lamino_preview_container .left_line,
.lamino_preview_container .right_line {
	height: 8px;
	float: left;
}

.lamino_preview_container .left_line {
	border-left: 2px solid #1a313a;
}

.lamino_preview_container .right_line {
	border-right: 2px solid #1a313a;
}

.lamino_preview_container table tbody tr:hover > td,
.lamino_preview_container table tbody tr > td {
	background-color: transparent;
}
.lamino_checkered_background{
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGMWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTZhNjM5NiwgMjAyNC8wMy8xMi0wNzo0ODoyMyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjkgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wMy0xMlQyMzozMDoxNyswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDMtMTJUMjM6MzM6NDMrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDMtMTJUMjM6MzM6NDMrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmFkNDU1MzMyLWVlNDUtMWM0OS05NDEwLTQwY2I1NjA3ZTJkYSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmVjYzk0ZmYzLWJmOTctYzc0MS05M2VlLTZjZTNiMmM2YTA1ZSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjZjZjkxMmMyLTA2MTctN2E0ZS1hMmU1LTQ3Y2M0NmUwMWM3NCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NmNmOTEyYzItMDYxNy03YTRlLWEyZTUtNDdjYzQ2ZTAxYzc0IiBzdEV2dDp3aGVuPSIyMDI1LTAzLTEyVDIzOjMwOjE3KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YWQ0NTUzMzItZWU0NS0xYzQ5LTk0MTAtNDBjYjU2MDdlMmRhIiBzdEV2dDp3aGVuPSIyMDI1LTAzLTEyVDIzOjMzOjQzKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+oyvd0gAAAC9JREFUOI1jXLR4BQNuoKKigkeWCY8cQTCqeWRoZlFWVsIjfefOHVrZPKp5ZGgGAFHTBX/iduC9AAAAAElFTkSuQmCC");
}

#lamino_height_label {
	position: relative;
	left: -10px;
}

@media (max-width:767px) {
	.lamino_preview_container{
		height: 175px;
		padding: 15px;
	}
}

/*******************************
*			inputs
********************************/
.lamino_option:not(.asset) {
	margin-bottom: 2rem;
}
.lamino_option.asset {
	margin-bottom: 12px;
}
.lamino_option input[type="text"] {
	margin-bottom: 15px;
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	padding: 0.4em 1em;
	width: 96%;
	padding-top: 6px !important;
	width: 100%;
}

.lamino_option_label {
	margin-bottom: 7px;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 20px;
}


/*******************************
*			Size
********************************/

.fa-left-right:before {
	content: "\F337";
}

.fa-up-down:before {
	content: "\F338";
}

.fa-sync:before {
	content: "\F021";
}

.size_select_group.width small {
	display: none;
	line-height: 1.1em;
}
.fa-info-circle:before{
	content: "\F05A";
}

.stickersize label {
	margin-left: 5px;
}

#stickerHeightMillimeters_inputContainer,
#stickerWidthMillimeters_inputContainer {
	position: relative;
}

#stickerHeightMillimeters_input,
#stickerHeightMillimeters_select,
#stickerWidthMillimeters_input,
#stickerWidthMillimeters_select {
	height: 38px;
}

.lamino-size-unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 13px;
	color: #888;
	margin-left: 4px;
}

.lamino-size-custom-toggle {
	color: #4e626a;
	font-size: 13px;
	cursor: pointer;
}
.lamino-size-custom-toggle input{
	margin-right: 5px;
}

.lamino-size-toggle-row {
	display: grid;
	grid-template-columns: 1fr 52px 1fr;
	gap: 0;
}

.lamino-size-panel {
	display: grid;
	grid-template-rows: 26px 48px auto;
	gap: 6px;
}

.lamino-size-panel-label {
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #4e626a;
}

.lamino-size-panel.active .lamino-size-panel-label,
.lamino-size-panel.active .lamino-size-custom-toggle{
	color: var(--e-global-color-text);
}

.lamino-size-select, .lamino-size-number {
	width: 100%;
	height: 48px;
	padding: 0 36px 0 14px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 8px !important;
	cursor: pointer;
	box-sizing: border-box;
	-moz-appearance: textfield;
}

.lamino-size-number::-webkit-inner-spin-button,
.lamino-size-number::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.lamino-size-toggle-row .lamino-size-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: #f5f5f5 !important;
	border: 1.5px solid #ccc;
	border-radius: 8px;
	cursor: pointer;
	color: #4e626a !important;
	padding: 0 !important;
	transition: background 0.15s, border-color 0.15s, transform 0.3s;
	margin: 33px 8px 0;
	align-self: start;
	margin-top: 33px;
}

.lamino-size-toggle-btn:hover {
	background: #e8f0f2 !important;
	border-color: #4e626a !important;
}

.lamino-size-toggle-btn:active {
	transform: rotate(180deg);
}

.lamino-size-toggle-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

#lamino-size-panel-height input[type="number"],
#lamino-size-panel-height select,
#lamino-size-panel-width input[type="number"],
#lamino-size-panel-width select {
	transition: opacity 0.15s, background 0.15s;
}

#lamino-size-panel-height.active input[type="number"],
#lamino-size-panel-height.active select,
#lamino-size-panel-width.active input[type="number"],
#lamino-size-panel-width.active select {
	background: #f5f5f5 !important;
	color: #0f2027 !important;
	opacity: 1;
	pointer-events: auto;
}

#lamino-size-panel-height.inactive input[type="number"],
#lamino-size-panel-height.inactive select,
#lamino-size-panel-width.inactive input[type="number"],
#lamino-size-panel-width.inactive select {
	background: #4e626a !important;
	color: #f5f5f5 !important;
	opacity: 0.5;
	cursor: not-allowed;
}

/*******************************
*			Buttons
********************************/
.lamino-buttons button {
	padding: 14px 10px;
	border: none;
	border-radius: 8px;
	background: #4e626a;
	color: #f5f5f5;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: 0.15s;
}

.lamino-font-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 6px 0;
}

.lamino-variation-buttons button {
	height: 36px;
	padding: 0 10px;
}

.lamino-buttons button:hover {
	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.3);
	background: #eea400;
}

.lamino-buttons button.selected {
	background: #f5f5f5;
	color: #0f2027;
}


/*******************************
*			TomSelect
********************************/

.ts-dropdown .lamino-flag-option img {
	width: 28px;
	height: auto;
	flex-shrink: 0;
}

.ts-control .lamino-flag-option img {
	width: 22px;
	height: auto;
	flex-shrink: 0;
}

/*******************************
*		   Variation
********************************/

.lamino_option.variation {
	display: flex;
	flex-direction: column;
}

.lamino-flag-option {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lamino-variation-buttons {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, 1fr);
}

/*******************************
*				 Color dots
********************************/

.lamino_option.colorpicker .lamino-color-dot {
	width: 33px;
	height: 33px;
	border-radius: 50%;
	padding: 0;
	border: 2.5px solid transparent;
	cursor: pointer;
	outline: none;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s, box-shadow 0.15s;
}

.lamino_option.colorpicker .lamino-color-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	padding: 6px 0;
}

.lamino_option.colorpicker .lamino-color-dot:hover {
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.15);
}

.lamino_option.colorpicker .lamino-color-dot.selected {
	border-color: #222;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222;
}