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

.types {
	display: flex;
	flex-flow: row;
}

.types a {
	width: 100%;
    margin: 0 1rem;
}

.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
}

.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;
}

.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
}

.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;
	}
}