body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-family: 'Open Sans', sans-serif;
}

.types {
	width: 100%;
	display: flex;
	flex-flow: row;
}

.types a {
	width: 100%;
	flex: 0 0 25%;
}

.types a img {
	width: 100%;
}

.notification-designselv {
	display: none;
}

body > form {
	margin: 0;
	height: 100%;
	width: 100%;
}

.design-selv {
	position: relative;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: #f7f7f7;

	display: grid;
	grid-template-columns: 17.5% 65% 17.5%;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
		'last_opp render pris'
		'type render total'
		'antall render kommentar'
		'storrelse render handle';
}

.design-selv .last-opp-klistremerke {
	z-index: 2;
	text-align: center;
	grid-area: last_opp;
	margin: auto auto;
}

.design-selv .last-opp-klistremerke .last_opp_logo {
	text-align: center;
}

.design-selv .last-opp-klistremerke .last_opp_logo p {
	text-align: center;
	margin: 0px;
	padding: 1rem 2rem;
	background-color: #000;
	color: #fff;
	border-radius: 0;
	font-weight: Bold;
}

.design-selv .last-opp-klistremerke input {
	display: contents;
}

.design-selv .last-opp-klistremerke label span p:hover {
	-webkit-transform: translatey(-2px);
	-ms-transform: translatey(-2px);
	transform: translatey(-2px);
	-webkit-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}

.design-selv .type-klistremerke {
	z-index: 2;
	grid-area: type;
	margin: auto auto;
	width: 100%;
}

.design-selv .reset-settings {
	padding: 1rem 2rem;
	background-color: #000;
	color: #fff;
	font-weight: Bold;
}

.design-selv .type-klistremerke > p {
	font-size: 1.2rem;
	line-height: 2.5rem;
	font-weight: Bold;
	text-align: center;
}

.design-selv .type-klistremerke .colorPicker input {
	padding: 1rem 2rem;
	border: 2px solid #000;
}

.design-selv .antall-klistremerke {
	-ms-grid-row: 4;
	-ms-grid-column: 1;
	z-index: 2;
	grid-area: antall;
	margin: auto auto;
}

.design-selv .antall-klistremerke > p {
	font-size: 1.2rem;
	line-height: 2.5rem;
	font-weight: Bold;
	text-align: center;
}

.design-selv .storrelse-klistremerke {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	z-index: 2;
	grid-area: storrelse;
	margin: auto auto;
}

.design-selv > div > p {
	font-size: 1.2rem;
	line-height: 2.5rem;
	font-weight: Bold;
	text-align: center;
}

.design-selv .storrelse-klistremerke div {
	display: -ms-inline-grid;
	display: inline-grid;
	-ms-grid-rows: auto auto;
	grid-template-rows: auto auto;
	-ms-grid-columns: 2fr;
	grid-template-columns: 2fr;
	grid-template-areas: 'a b' 'c d';
	position: relative;
}

.design-selv .storrelse-klistremerke div:hover:before {
	position: absolute;
	background-color: rgba(51, 51, 51, 0.9);
	max-width: 140px;
	content: attr(data-tooltip);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	border-radius: 4px;
	-webkit-box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
	box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
	color: white;
	padding: 7px;
	margin-top: -75%;
}

.design-selv .storrelse-klistremerke div input[type='number'] {
	border: 0px solid white;
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	color: black;
}

.design-selv .storrelse-klistremerke div .logo-width {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: a;
	width: 70px;
	border-radius: 8px 0px 0px 8px;
}

.design-selv .storrelse-klistremerke div .logo-height {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	grid-area: b;
	width: 70px;
	border-radius: 0px 8px 8px 0px;
}

.design-selv .storrelse-klistremerke div .bred {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: c;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 0px;
}

.design-selv .storrelse-klistremerke div .hoy {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	grid-area: d;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 0px;
}

.design-selv .render-area {
	-ms-grid-row: 1;
	-ms-grid-row-span: 4;
	-ms-grid-column: 2;
	position: relative;
	grid-area: render;
	display: block;
	background-color: #d6d6d6;
	background-image: url(../../assets/pattern.png);
	background-repeat: no-repeat;
	background-size: cover;
}

input[type='button']#cutThickness {
	padding: 4px 8px;
	margin: 0 2px;
}

.design-selv .canvasdraw.hidden {
	display: none;
}

.design-selv .pris-klistremerke {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	z-index: 2;
	grid-area: pris;
	margin: auto auto;
}

.design-selv .tot-klistremerke {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
	z-index: 2;
	grid-area: total;
	margin: auto auto;
}
.design-selv .kom-klistremerke {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
	z-index: 2;
	grid-area: kommentar;
	margin: auto auto;
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

.design-selv .handle-klistremerke {
	-ms-grid-row: 4;
	-ms-grid-column: 3;
	z-index: 2;
	grid-area: handle;
	margin: auto auto;
	color: white;
	text-transform: uppercase;
}

.design-selv .handle-klistremerke label p {
	padding: 1rem 2rem;
	background-color: #000;
	color: #fff;
	font-weight: Bold;
}

.design-selv .handle-klistremerke label p:hover {
	-webkit-transform: translatey(-2px);
	-ms-transform: translatey(-2px);
	transform: translatey(-2px);
	-webkit-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}

.design-selv .handle-klistremerke button {
	display: none;
}

.loading-bar {
	width: 20vw;
	height: 35px;
	background-color: #eeeeee;
	-webkit-box-shadow:
		0px 1px 1px rgba(0, 0, 0, 0.15),
		0px 2px 2px rgba(0, 0, 0, 0.15),
		0px 4px 4px rgba(0, 0, 0, 0.15),
		0px 8px 8px rgba(0, 0, 0, 0.15),
		0px 16px 16px rgba(0, 0, 0, 0.15),
		0px 32px 32px rgba(0, 0, 0, 0.15);
	box-shadow:
		0px 1px 1px rgba(0, 0, 0, 0.15),
		0px 2px 2px rgba(0, 0, 0, 0.15),
		0px 4px 4px rgba(0, 0, 0, 0.15),
		0px 8px 8px rgba(0, 0, 0, 0.15),
		0px 16px 16px rgba(0, 0, 0, 0.15),
		0px 32px 32px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	overflow: hidden;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.loading-bar .progress-bar {
	height: 100%;
	background-color: #000;
	width: 0%;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

@media screen and (max-width: 1600px) {
	.design-selv .type-klistremerke .colorPicker input {
		width: 80%;
	}
	.design-selv .type-klistremerke .colorPicker {
		text-align: center;
	}
}

.button-col {
	display: flex;
	padding: 1em;
	flex-flow: row wrap;
}

.button {
	width: 100%;
	height: 100%;
	padding: 1em;
	margin: 0 0.5em;
	font-weight: bold;
	font-size: 17px;
}

.button-col > input {
	flex: 1 1 0%;
}

.circle {
	position: absolute;
	display: none;
	border: solid 2px red;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1000;
}

a.cutType > div {
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}

a.cutType > div.holo-kunpakant {
	position: relative;
}