@font-face {
	font-family: FontAwesome;
	src: url(/fonts/FontAwesome.otf);
}

code {
	display:none;
}

/* ── Compact .btn override for design editor — smaller than the global CTA size ── */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-green-light);
	border: 1px solid var(--color-green-light-border);
	color: var(--color-white);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	text-align: center;
	padding: var(--space-1) var(--space-4);
	height: 28px;
	box-sizing: border-box;
}
.btn:hover {
	background-color: var(--color-green-hover);
}
.btn > p {
	margin: 0;
	font-weight: bold;
	color: var(--color-white);
	line-height: 1;
}
.btn > .icon {
	position: absolute;
	top: 6px;
	right: 8px;
	font-family: "FontAwesome";
	font-size: 13px;
	color: var(--color-white);
}

/* ── How-it-works steps (intro page) ────────────────────────── */
.how_it_works {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--color-gray-divider);
	max-width: 720px;
}

.how_it_works .number {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-light);
	color: var(--color-gray-border);
	line-height: 1;
}

.how_it_works .image {
	width: 100%;
	height: 200px;
	background-color: var(--color-gray-page);
	background-size: cover;
	background-position: center;
}

/* ── Setup howto selector grid ──────────────────────────────── */
.howto {
	float: left;
	clear: none;
	width: 100%;
	margin: 2px;
	max-width: var(--max-width);
}
.howto>.boxes_bar>.matcat {
	float:left;
	clear:left;
	width:800px;
	margin: 2px;
}

.howto h2 {
	font-weight: 900;
	font-size: 30px;
	line-height:30px;
	color: var(--color-green-light);
	text-align:left;
	text-shadow: 1px 1px var(--color-black);
	margin:4px 0 2px 0;
}

.howto .boxes_bar .box>h4 {
	float:left;
	clear:left;
	line-height:12px;
	font-size: 12px;
	font-weight:bold;
	margin:0;
	color:var(--color-gray-subtle);
}
.howto .boxes_bar .box>h5 {
	float:left;
	clear:left;
	line-height:10px;
	font-size: 10px;
	font-weight:normal;
	margin:0;
	color:var(--color-gray-subtle);
}


.howto.pulls {
	width:800px;
}
.howto .boxes_bar#pulls {
	width:100%;
}


.howto .boxes_bar .box {
	width: calc(17% - 2px);
	padding:10px;
	background-color:var(--color-gray-page);
	border: 1px solid var(--color-gray-page);
	height:100%;
	cursor: pointer;
	margin:2px;
}
.howto .boxes_bar .box.material {
	min-height: 100px;
}
.howto .boxes_bar .box.pull {
	height:110px;
}
.howto .boxes_bar .box.hidden {
	display:none;
}
.howto .boxes_bar .box.edge {
	width: calc(33% - 30px);
	/* height:140px; */
}
.howto .boxes_bar .box.edge>.swatch {
	width:100%;
	height:110px;
	background-size: cover;
	background-position: center bottom;
}

.howto .boxes_bar#ikea_line .box {
	width:366px;
	padding:10px;
	background-color:var(--color-gray-page);
	border: 1px solid var(--color-gray-page);
	height:190px;
	cursor: pointer;
	margin:2px;
	z-index: 1;
}

.howto .boxes_bar#ikea_line .box>.swatch {
	width:368px;
	height:120px;
}
.howto .boxes_bar#ikea_line .box:hover, 
.howto .boxes_bar#ikea_line .box.current {
	background-color: var(--color-green-light);
}


.howto .boxes_bar .box:hover,
.howto .boxes_bar .box.current {
	background-color: var(--color-green-light);
	border: 1px solid var(--color-green-light);
}
.howto .boxes_bar .box.current {
	z-index: 20;
	border: 1px solid white;
}
.howto .boxes_bar .box>.swatch {
	width:100%;
	height:50px;
}

.options_wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	background-color: var(--color-green-light);
	padding: var(--space-5);
	display:none;
	z-index: 5;
}

.howto .boxes_bar .box.color {
	/* width:74px;
	height:76px; */
	min-height:90px;
	text-align:left;
}
.howto .boxes_bar .box.color>.swatch {
	/* width:74px;
	height:50px; */
	font-size:40px;
	font-weight: bold;
	color:var(--color-gray-subtle);
	line-height: 50px;
	text-align:center;
	margin: 8px auto;
}

.options_wrap h3 {
	margin: 0;
	color: var(--color-white);
}

.howto .boxes_bar .box.pull {
	/* width:90px;
	height:80px; */
}
.howto .boxes_bar .box.pull>.swatch {
	width:75px;
	height:25px;
	background-color:var(--color-gray-subtle);
	border-radius:4px;
}
.howto .boxes_bar .box.pull p {
	font-size:10px;
	line-height:12px;
	color:var(--color-gray-placeholder);
	font-weight:bold;
}

.howto .boxes_bar h3.material_category_header {
	float:left;
	clear:both;
	width: 100%;
	margin: 12px 0 0 0;
}


.boxes_bar .btn, .btn.right_side {
	float:right;
	clear:both;
	margin-right:10px;
}

#order_info>.btn,.checkout_popup .btn {
	width:150px;
	height: 30px;
	float:right;
	clear:none;
	margin:2px 10px 2px 24px;
	padding: 4px 6px;
}


#order_info>.btn>p,.checkout_popup .btn>p {
	margin:2px;
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	text-align:left;
}

.cabinet_preview_wrap {
	position:fixed;
	top: 180px;
	left: calc(50% + 310px);
	width:210px;
	height:284px;
	background-color: var(--color-gray-page);
	border-radius: 4px;
	margin-top:60px;
	
}
.cabinet_preview_wrap>h4 {
	margin:2px;
	text-align: center;
}
.cabinet_preview_wrap>.btn {
	width:150px;
}
.cabinet_preview_wrap>.btn>p {
	margin:4px 2px;
	font-size: 14px;
	line-height: 14px;
}

.cabinet_preview {
	margin:14px;
	width:180px;
	height:184px;
}

.cab_inner {
	position:relative;
	float:left;
	clear:none;
	font: normal 10px/11px Arial;
	background-color:var(--color-gray-disabled-bg);
}
.elevation .cab_inner {
	background-color:var(--color-gray-subtle);
}
.cab_inner.light {
	background-color:var(--color-gray-disabled-bg);
}
.cab_inner.dark {
	background-color:#333;
}



.cab_inner>.cabinet_icon {
	position:relative;
	float:left;
	clear:none;
	margin:0;
	font: normal 10px/11px Arial;
	overflow: hidden;
}
.cab_inner>.cabinet_icon>.panel,
.cab_inner>.cabinet_icon>.front {
	background-color:var(--color-white);
	position:relative;
	float:left;
	clear:none;
	width:100%;
	margin-bottom:1px;
}
.cab_inner>.cabinet_icon>.front.left {
	margin-right:1px;	
}
.cabinet_popup .right>.cabinet>.front.right,
.cab_inner>.cabinet_icon>.front.right {
	float:right;
	margin-right:0px;	
}


.order_summary {
	background-color: var(--color-green-light);
	padding: 10px;
	width: calc(100% - 20px);
	height: 100%;
}

.order_summary>p {
	margin: 0;
	font-size: 13px;
}
.order_summary>.white_button {
	padding: 2px 12px;
	background-color:var(--color-white);
	color: var(--color-green-light);
	width: auto;
	position: relative;
	float: right;
	clear: none;
	z-index: 10;
	border-radius: 6px;
	box-shadow: 2px 2px 4px var(--color-gray-placeholder);
	cursor: pointer;
	font-weight: bold;
}
.order_summary>.white_button:hover {
	background-color:var(--color-green-light);
	color: var(--color-white);
}
.order_summary>.cabinet_preview {
	position:relative;
	float:left;
	clear:none;
	margin:0;
	width: 90px;
	height: 90px;
	margin-right: 10px;
}




.front>.hinge {
	position:absolute;
	top:30%;
	text-align:center;
	padding:2px;
	font: normal 9px/9px Arial;
	color:var(--color-black);
	width:34px;
	height:10px;
	-moz-transform: rotate(90deg);  /* FF3.5+ */
	-o-transform: rotate(90deg);  /* Opera 10.5 */
	-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
	border-radius:2px;
	z-index:11;
    -moz-box-shadow:    inset 0 0 4px var(--color-gray-placeholder);
    -webkit-box-shadow: inset 0 0 4px var(--color-gray-placeholder);
    box-shadow:         inset 0 0 4px var(--color-gray-placeholder);
	cursor: pointer;    
}
.front>.hinge.left {
	left:-10px;
}
.front>.hinge.right {
	right:-10px;
}
.front>.hinge.top {
	position:absolute;
	top:0px;
	left: 50%;
	text-align:center;
	padding:2px;
	font: normal 9px/9px Arial;
	color:var(--color-black);
	height:10px;
	width:34px;
	margin-left:-17px;
	-moz-transform: rotate(0deg);  /* FF3.5+ */
	-o-transform: rotate(0deg);  /* Opera 10.5 */
	-webkit-transform: rotate(0deg);  /* Saf3.1+, Chrome */
	border-radius:2px;
	z-index:11;
    -moz-box-shadow:    inset 0 0 4px var(--color-gray-placeholder);
    -webkit-box-shadow: inset 0 0 4px var(--color-gray-placeholder);
    box-shadow:         inset 0 0 4px var(--color-gray-placeholder);
}
.front>.hinge.light {
	color:var(--color-white);
    -moz-box-shadow:    inset 0 0 4px var(--color-white);
    -webkit-box-shadow: inset 0 0 4px var(--color-white);
    box-shadow:         inset 0 0 4px var(--color-white);
}
.front>.hinge.dark {
	color:var(--color-black);
    -moz-box-shadow:    inset 0 0 4px var(--color-black);
    -webkit-box-shadow: inset 0 0 4px var(--color-black);
    box-shadow:         inset 0 0 4px var(--color-black);
}



.cab_inner>.cabinet_icon>.void {
	background-color:var(--color-gray-subtle);
	position:relative;
	float:left;
	clear:none;
	width:100%;
	margin-bottom:1px;
}

.elevation .cab_outter {
	position:absolute;
	font: normal 10px/11px Arial;
	padding:1px;
	cursor:move;
	z-index:10;
}
.elevation  .cab_outter:hover, .cab_outter.touched {
	z-index:100;
}

.elevation .cab_outter.base_cabinet,.elevation .cab_outter.high_cabinet, .elevation .cab_outter.pax_cabinet, .elevation .cab_outter.godmorgon_cabinet, .elevation .cab_outter.SIDE.B, .elevation .cab_outter.SIDE.H {
	bottom:12px;
	cursor:ew-resize;
}

.elevation .cab_outter.SIDE {
/* 	overflow:hidden; */
}

.elevation .cab_outter.kick_cabinet {
	bottom:0;
	cursor:ew-resize;
}

.cab_info_window {
	position:absolute;
	top:-6px;
	left:20px;
	width:170px;
	padding:6px;
	background-color:white;
	box-shadow: 2px 2px 4px var(--color-black);
	font: normal 10px/11px Arial;
	display:none;
	z-index:100;
}



.elevation .cab_outter.kick_cabinet .cab_info_window {
	top: auto;
	bottom: 0;	
}


.cab_info_window>p.actions {
	position:relative;
	float:left;
	clear:left;
	font-size:11px;	
	font-weight: bold;
	margin: 9px 0 0 0;
	color: var(--color-green-light);
	cursor:pointer;
}


.inner_drawer_wrapper {
	position:relative;
	float:left;
	clear:none;
	width: calc(33% - 10px);
	margin-right: 10px;
}
.cabinet>.inner_drawer_wrapper {
	width: calc(100% - 4px);
	margin-left: 1px;
}
.inner_drawer_wrapper>.inner_drawer_front {
	position:relative;
	float:left;
	clear:none;
	width: calc(100% - 2px);
	margin: 1px;
	border: 1px solid black;
}
.inner_drawer_wrapper>.inner_drawer_description {
	position:relative;
	float:left;
	clear:none;
	width: 100%;
	text-align: center;
	font-size: 12px;
}
.inner_drawer_wrapper .add_button_wrap {
	position:absolute;
	top:-6px;
	right:-6px;
	width:24px;
	height:24px;
	z-index:2;
}
.inner_drawer_wrapper .add_button_wrap>.add_button {
	position:absolute;
	top:0;
	right:0;
	width:24px;
	height:24px;
	cursor:pointer;
}
.inner_drawer_wrapper .subtract_button_wrap {
	position:absolute;
	top:-6px;
	right:-6px;
	width:16px;
	height:16px;
	z-index:2;
	display: none;
}
.inner_drawer_wrapper:hover .subtract_button_wrap {
	display: block;
}

.inner_drawer_wrapper .subtract_button_wrap>.subtract_button {
	position:absolute;
	top:0;
	right:0;
	width:16px;
	height:16px;
	cursor:pointer;
}



.cab_info_window p.actions .icon {
	float:left;
	clear:left;
	margin:2px 6px 0 0;
	color: var(--color-green-light);
	width: 14px;
}

.cab_info_window p.actions:hover,
.cab_info_window p.actions:hover .icon {
	color: var(--color-gray-placeholder);
}

.cab_info_window .alignment {
	border: 1px solid black;
	float:left; 
	clear:none;
	padding: 4px;
	border-radius: 2px;
	margin-left: 10px;
}
.cab_info_window>.alignment:hover {
	background-color: #f7fbc7;
}
.cab_info_window>.alignment.selected {
	background-color:#4a77ae;
	color:var(--color-white);
}

.accepted {
	position:relative;
	float:left;
	clear:none;
	margin-top:10px;
	font-weight:bold;	
}
.accepted_line {
	position:relative;
	float:left;
	clear:none;
	width: 500px;
	height:30px;
	border-bottom: 1px solid black;
}
.date {
	position:relative;
	float:left;
	clear:none;
	margin-top:10px;
	font-weight:bold;	
	margin-left: 100px;
}
.date_line {
	position:relative;
	float:left;
	clear:none;
	width: 200px;
	height:30px;
	border-bottom: 1px solid black;
}


.pull {
	position: absolute;
	top:0px;
	width:75px;
	height:24px;
	background-color: var(--color-white);	
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
	z-index:10;
}
.pull_top {
	position: absolute;
	height:10px;
	width:75px;
	border-bottom-right-radius:2px;
	border-bottom-left-radius:2px;
	z-index:11;
    opacity:.7; 
    -moz-box-shadow:    inset 0 0 10px var(--color-black);
    -webkit-box-shadow: inset 0 0 10px var(--color-black);
    box-shadow:         inset 0 0 10px var(--color-black);
}
.pull_top.light {
    -moz-box-shadow:    inset 0 0 10px var(--color-white);
    -webkit-box-shadow: inset 0 0 10px var(--color-white);
    box-shadow:         inset 0 0 10px var(--color-white);
}
.pull_top.dark {
    -moz-box-shadow:    inset 0 0 10px var(--color-black);
    -webkit-box-shadow: inset 0 0 10px var(--color-black);
    box-shadow:         inset 0 0 10px var(--color-black);
}
.pull_top.metal,
.pull_top.light.metal,
.pull_top.dark.metal {
    -moz-box-shadow:    inset 0 0 10px #AAA;
    -webkit-box-shadow: inset 0 0 10px #AAA;
    box-shadow:         inset 0 0 10px #AAA;
	background-color: var(--color-white);
}
.pull_top.round {
	border-radius: 50%;
}



.pulls_notice {
	display:none;
	text-align:center;
	color:#933;
	font-weight:bold;
}

.how_it_works {
	width:940px;
	min-height:135px;
	margin:6px 0 0 70px;
	position:relative;
	float:left;
	clear:none;
	background-color:var(--color-gray-page);
	border-radius:6px;
	padding:12px;
}
.how_it_works>.image {
	float:right;
	clear:none;
	width:400px;
	height:130px;
	background-color:var(--color-gray-placeholder);
	border-radius: 4px;
	margin-left:12px;
	background-repeat: no-repeat;
	border: 2px solid var(--color-gray-subtle);
}
.how_it_works>.image#image1 {
	background-image: url('/images/how_it_works/image1@1x.jpg');
}
.how_it_works>.image#image2 {
	background-image: url('/images/how_it_works/image2@1x.jpg');
}
.how_it_works>.image#image3 {
	background-image: url('/images/how_it_works/image3@1x.jpg');
}
.how_it_works>.image#image3 {
	background-image: url('/images/how_it_works/image4@1x.jpg');
}
.how_it_works>.number {
	position:absolute;
	top:20px;
	left:-70px;
	font-size:80px;
	font-weight: 700;
	color: var(--color-green-light);
	text-shadow: 1px 1px var(--color-black);
}

.how_it_works>H4 {
	font-size:18px;
	margin:0 0 0 0;
}
.how_it_works>p {
	font-size:14px;
	margin:4px 0 0 0;
}

#custom_color_choice {
	width: 500px;
	float:left;
	clear:none;
	background-color: var(--color-white);
	margin: 2px;
	padding: 6px;
}
#custom_color_choice p {
	font-size: 12px;
}



ul.custom_color_list {
	position:relative;
	float:left;
	clear:left;
	width:400px;
	padding:0;
	margin:10px 0;
}
ul.custom_color_list#my_colors {
	margin-bottom:20px;
}


ul.custom_color_list>li {
	position: relative;
	float: left;
	clear: left;
	border: 1px solid var(--color-gray-border);
	width: 372px;
	margin: 1px;
	padding: 3px;
	list-style: none;
	cursor: pointer;
	background-color: var(--color-white);
}
ul.custom_color_list>li:hover {
	background-color:var(--color-green-light);
}

ul.custom_color_list>li>.delete_custom_color {
	position:absolute;
	top:6px;
	right:-20px;
	width:16px;
	height:16px;
	background-image:url(/images/trash.gif);
	cursor: pointer;
	opacity:.5;
}


ul.custom_color_list>li>.swatch {
	float:left;
	clear:left;
	margin-right:6px;
	height:20px;
	width:40px;
}


input#custom_color_name {
	position:relative;
	float:left;
	clear:left;
	margin: 0;
	width:300px;
	height:24px;
	font-size:13px
}
.search_button {
	position:relative;
	float:left;
	clear:none;
	margin: 0 0 0 6px;
	padding: 0 0 0 0;
	width:30px;
	height:28px;
	background-color:var(--color-gray-page);
	background-image: url('/images/search@1x.png');
	background-position: center center;
	background-repeat: no-repeat;
}

.color_picker {
	position:relative;
	float:right;
	clear:right;
	height:200px;
	width:194px;
	padding:6px;
	background-color:var(--color-white);
	border-radius:4px;
	border: 3px solid white;
	box-shadow: 2px 2px 4px var(--color-gray-placeholder);
	margin-right: 5px;
}
.color_picker>.minicolors {
	position:relative;
	float:left;
	clear:left;
	margin:6px;
	padding:0;
	font-size:10px;
}

.info_request_popup {
	position:absolute;
	top:50%;
	left:50%;
	width:400px;
	height:100px;
	margin-top:-50px;
	margin-left:-200px;
	background-color:var(--color-white);
	border-radius:6px;
	padding:6px;
	border: 3px solid white;
	box-shadow: 2px 2px 4px var(--color-gray-placeholder);
	display:none;
	z-index:100;
}
.info_request_popup>H4 {
	margin:2px;
}
.info_request_popup>P {
	margin:2px;
}

.scrim {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--color-black);
	opacity:.5;
	z-index:99;
	display:none;
}

#custom_color_form>#custom_color_name {
	width:200px;
}

#custom_color_form>input {
	font-size:16px;
	line-height:16px;
}

.metawrap {
	float:right;
	clear:none;
}
.metawrap>.options>ul,
.metawrap>.options>ul>li {
	float:left;
	clear:none;
	list-style-type: none;
}
.metawrap>.options>ul>li {
	margin:0 20px;
	font: bold 22px/22px Arial;
}

.metawrap>.options>ul>li>.color_list {
	width:50px;
	z-index: 30;
}
.metawrap>.options>ul>li>.color_list >li {
	width:50px;
	height:50px;
	z-index: 30;
}


dl.options {
	position: relative;
	float:left;
	clear:none;
	width: 540px;
	z-index:20;
	margin:0;
}
.kick dl.options {
	width: 290px;
}
dl.options>dt {
	position: relative;
	float:left;
	clear:none;
	margin:8px 20px 0 4px;
	width:auto;
	font: bold 18px/18px Arial;
	text-align:left;
	z-index:30;
}
dl.options>dt>p {
	margin: 1px 0;
	font: bold 12px/12px Arial;
}

dl.options>dd {
	position: relative;
	float:left;
	clear:none;
	margin:3px;
	height:24px;
	width:42px;
	font: bold 22px/22px Arial;
	border: 1px solid white;
	border-radius:4px;
	cursor:pointer;
	z-index:30;
}

dl.options>dd ul.material_list {
	position:absolute;
	top:0px;
	left:170px;
	width:100%;
	margin:0;
	padding:0;
	list-style: none;
	display:none;
	box-shadow: 2px 2px 5px var(--color-gray-placeholder);
	z-index:30;
}
dl.options>dd.matcolor>ul {
	top:25px;
}

dl.options>dd ul.color_list,
dl.options>dd ul.material_color_list,
dl.options>dd ul#melamine_color_list {
	position:relative;
	float:left;
	clear:left;
	top:0px;
	left:20px;
	width:250px;
	margin:0;
	padding:0;
	list-style: none;
}

dl.options>dd ul>li {
	position: relative;
	float:left;
	clear:left;
	margin:0;
	padding:0;
	width:100%;
	cursor:pointer;
	list-style: none;
	background-color:var(--color-gray-page);
	z-index:30;
}
dl.options>dd ul>li>.swatch {
	position: relative;
	float:left;
	clear:none;
	margin:5px;
	height:24px;
	width:42px;
	border-radius:4px;
	border: 1px solid var(--color-gray-subtle);
}
dl.options>dd ul>li>.title {
	position: relative;
	float:left;
	clear:none;
	margin:1px;
	min-height:20px;
	width: calc(100% - 60px);
}
dl.options>dd.pull_list ul>li>.title {
	width: calc(100% - 100px);
}
dl.options>dd ul>li>.title>p {
	font: bold 12px/14px Arial;
	margin:6px 0 0 6px;
	color:var(--color-black);
}
dl.options>dd ul>li p.small{
	font: normal 10px/11px Arial;
	margin:0 0 6px 6px;
	color:var(--color-black);
}
dl.options>dd ul>li .custom_color_window {
	position: relative;
	float:left;
	clear:none;
	margin:1px 0 10px 0;
	height:114px;
	width:220px;
	display:none;
}

dl.options>dd ul>li .custom_color_window #custom_color>.custom_color_window  {
	position: relative;
	float:left;
	clear:none;
	margin:1px 0 10px 0;
	height:50px;
	width:220px;
	display:none;
}
dl.options>dd ul>li .custom_color_window #custom_color>.custom_color_window p.small {
	font: normal 10px/11px Arial;
	margin:0 0 6px 6px;
	color:var(--color-black);
}


div#custom_color>.custom_color_window  {
	position: relative;
	float:left;
	clear:none;
	margin:1px 0 10px 0;
	height:92px;
	width:400px;
	display:none;
	overflow:hidden;
}
div#custom_color>.custom_color_window p.small {
	font: normal 10px/11px Arial;
	margin:0 0 6px 6px;
	color:var(--color-white);
}

div.customize_warning {
	position:relative;
	float:left;
	clear:left;
	width:250px;
}


dl.options>dd ul>li:hover {
	background-color: var(--color-gray-page);
}
dl.options>dd.pull_list {
	width:75px;
	z-index:2;
}
dl.options>dd>ul#pull_list {
	display:none;
	width:330px;
	z-index:50;
}
dl.options>dd>ul#pull_list>li {
	width:330px;
}
dl.options>dd>ul#pull_list .swatch {
	width:75px;
	background-color: var(--color-gray-disabled-border);	
}
dl.options>dd>.pullswatch {
	position: absolute;
	top:10px;
	left:0;
	margin:0;
	height:24px;
	width:75px;
	border-radius:4px;
	border: 1px solid var(--color-gray-subtle);
	background-color:var(--color-gray-placeholder);
	overflow: hidden;
}
#pull_title {
	z-index:1;
}

dl.options>dt#material_title {
	width:150px;
	z-index:20;
}
dl.options>dt#pull_warning {
	font: bold 14px/16px Arial;
	display:none;
	z-index: 2;
	z-index:1;
}

dl.options>dd.matcolor {
	border: 1px solid var(--color-gray-subtle);
	top:12px;
}


div.elevation {
	position:relative;
	float:left;
	width:1050px;
	height:300px;
	margin:80px 0 50px 0;
	/* margin:30px 0 50px 0; */
	padding:0;
	background-image: -moz-linear-gradient(top, #EEE, #BBB);
	background-image: -ms-linear-gradient(top, #EEE, #BBB);
	background-image: -webkit-linear-gradient(top, #EEE, #BBB);
	background-image: -o-linear-gradient(top, #EEE, #BBB);
	background-image: linear-gradient(top, #EEE, #BBB);
	border-radius: 6px;
	z-index:10;
}

div.elevation>.elevation_top {
	position:absolute;
	top:-31px;
	left:0;
	margin:0;
	padding:4px;
	width:1040px;
	height:21px;
}

div.elevation>.elevation_top>div {
	font-size: 14px;
	margin-right: 4px;
	float:left;
	clear:none;
}
div.elevation>.elevation_top>div.icon {
	margin-top:4px;
	cursor: pointer;
}
div.elevation>.elevation_top>.title {
	font-weight: bold;
}
div.elevation>.elevation_top>.data {
	width: 260px;
	margin-right: 10px;
}


div.elevation>.elevation_top>h4 {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:4px;
	width:400px;
	height:24px;
}

input.elevation_title {
	font-size:14px;
	font-weight:bold;
	width:390px;
	margin-top:-2px;
	margin-left:-2px;
}

.elevation>.add_button_wrap {
	position:absolute;
	top:-6px;
	right:-6px;
	width:92px;
	height:48px;
	z-index:2;
}

.elevation>.add_button_wrap>.add_button {
	position:absolute;
	top:0;
	right:0;
	width:34px;
	height:34px;
	cursor:pointer;
}
.elevation>.add_button_wrap>.add_button_title { 
	position:absolute;
	top:16px;
	right:58px;
	border:1px solid black;
	width:100%;
	background-color:var(--color-white);
	text-align:center;
	font-size:12px;
	display:none;
}
.elevation>.cabinet_icon_list {
	position:absolute;
	top:0;
	left:0;
	width:1050px;
	height:300px;
}

.elevation>.cabinet_icon_list>.cab_outter.new {
	display:none;
}
.elevation>h4 {
	position: absolute;
	top: -30px;	
}



.small_button {
	position: absolute;
	top:4px;
	width:20px;
	height:20px;
	display:none;
	cursor:pointer;
	z-index:20;
}
.small_button.edit {
/* 	background-image: url('/images/edit2.gif'); */
	right:28px;
}
.small_button.delete {
/* 	background-image: url('/images/delete2.gif'); */
	right:4px;
}
.small_button.gears {
/* 	background-image: url('/images/gears-icon@1x.png'); */
	right:6px;
	z-index:101;
	text-shadow: 1px 1px 1px var(--color-white);
}
.small_button.flip {
	right:26px;
	z-index:101;
	text-shadow: 1px 1px 1px var(--color-white);
}
.small_button.light>.icon {
	color:var(--color-white);	
	text-shadow: 1px 1px 1px var(--color-black);
}
.small_button.dark>.icon {
	color:var(--color-black);	
	text-shadow: 1px 1px 1px var(--color-white);
}
.inner_drawer_indicator {
	position: absolute;
	bottom: 4px;
	right: 6px;
	padding: 2px 4px;
	z-index: 101;
	color: var(--color-white);
	background-color: #690707;
	border-radius: 4px;
	cursor: pointer;
	font-size: 9px;
}
.inner_drawer_indicator>.message {
	display: none;
	position:absolute;
	top:20px;
	left:-40px;
	width: 80px;
	padding: 4px 6px;
	z-index:101;
	color: var(--color-white);
	background-color: var(--color-white);
	color: var(--color-black);
	border: 1px solid black;
	text-align:center;
	cursor: pointer;
}
.inner_drawer_indicator:hover>.message {
	display:block;
}



.icon {
	font-family: "FontAwesome";
	font-size: 14px;
	margin:6px;
	color:var(--color-black);
	cursor: pointer;
}
/*
.small_button:hover>.icon {
	color:#333;
}
*/

form#update_elevation_wall_name {
	width:300px;
}
form#update_elevation_wall_name>input {
	float:left;
	clear:none;
}
form#update_elevation_wall_name>input[type=text],
form#update_elevation_height>input[type=text] {
	width:150px;
	font-size: 12px;
}
form#update_elevation_wall_name>input[type=submit],
form#update_elevation_height>input[type=submit] {
	border-radius:4px;
	background-color:#4a77ae;
	border:none;
	color:var(--color-white);
	font-size: 11px;
	font-weight: bold;
}

.icon.trash {
	cursor: pointer;
}

.cab_outter.touched {
	z-index:100;
}


.cabinet_popup>.content {
	width:880px;
	position:relative;
	margin-top:30px;
	margin-left:20px;
	margin-bottom:20px;
}
.cabinet_popup#guided_order>.content {
	margin-top:50px;
}

.cabinet_popup>.content>.left {
	position:relative;
	float:left;
	clear:left;
	margin-top:14px;
	margin-left:0px;
	width:500px;
	z-index:10;
	min-height: 526px;
}
.cabinet_popup>.content>.left>.pane>p {
	margin:2px 0;
}


.cabinet_popup>.content>.left.kick {
	width:850px;
	height:50px;
	min-height:50px;
}

.cabinet_popup>.content>.right {
	position:relative;
	float:right;
	clear:none;
	margin-top: 16px;
	margin-right:50px;
	margin-bottom:10px;
	width:300px;
	min-height: 506px;
	z-index:9;
	padding:10px;
	background-color: var(--color-gray-border);
	border-radius: 3px;
}

/*
.sektion .cabinet_popup>.content>.right {
	margin-top: -30px;	
	height: 530px;
}
*/

.cabinet_popup>.content>.right.kick {
	position:relative;
	float:left;
	clear:left;
	margin-top:10px;
	margin-right:20px;
	width:850px;
	z-index:9;
	height:200px;
	min-height:200px;
}

.cabinet_popup>.orders_list>.left {
	position:relative;
	float:left;
	clear:left;
	margin-top:46px;
	margin-left:6px;
	width:570px;
}

.cabinet_popup .right>.info {
	position:relative;
	float:left;
	clear:none;
	width:100%;
	height:60px;
}

.cabinet_popup .right>.info>.ikea_id {
	position:relative;
	float:left;
	height:14px;
	font: bold 14px/14px Arial;
	margin: 4px;
}

.cabinet_popup .right>.info>.dimensions {
	position:relative;
	float:right;
	clear:none;
	height:14px;
	font: bold 11px/11px Arial;
	text-align:right;
	margin: 4px;
}
.cabinet_popup .right>.info>.description {
	position:relative;
	float:left;
	clear:left;
	height:14px;
	font: normal 11px/11px Arial;
	margin: 4px;
}

.cabinet_popup .right>.cabinet {
	position:absolute;
	top:50%;
	left:50%;
	height:150px;
	width:230px;
	background-color: var(--color-gray-text);
}
.cabinet_popup .right>.cabinet.outside {
	z-index: 10;
}
.cabinet_popup .right>.cabinet.inside {
	z-index: 9;
}


.cabinet_popup .right>.cabinet.corner>.front {
	width: 40%;
	float:left;
}

.cabinet_popup .right>.cabinet>.panel,
.cabinet_popup .right>.cabinet>.front {
	background-color:var(--color-white);
	position:relative;
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1px;
	margin-right:1px;
}


.cabinet_popup .right>.cabinet.corner>.panel {
	clear:none;
	width:21px;
	margin-left: 1px;
	margin-bottom:1px;
}


.cab_outter.corner-left>.cab_inner>.cabinet_icon>.front,
.cab_outter.corner-left>.cab_inner>.cabinet_icon>.panel {
	float:left;
}
.cab_outter.corner-right>.cab_inner>.cabinet_icon>.front,
.cab_outter.corner-right>.cab_inner>.cabinet_icon>.panel {
	float:right;
}

.cabinet_popup .right>.cabinet>.void {
	background-color:var(--color-gray-subtle);
	position:relative;
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1px;
}

.hidden_conf {
	display:none;
	
}

.cabinet_popup {
	position:absolute;
	left:50%;
	margin-left:-454px;
	width:908px;
	height:620px;
	background-color:var(--color-white);
	border-radius:10px;
	border: 3px solid white;
	box-shadow: 2px 2px 5px var(--color-gray-placeholder);
	z-index:101;
	display:none;
}

.remove_customization_button {
	background-image: url('/images/remove_customization_button@1x.png');
	background-position: top left;
	width:188px;
	height:21px;	
	position:absolute;
	top:-10px;
	right:116px;
	cursor:pointer;
	display:none;
}
.remove_customization_button:hover {
	background-position: bottom left;
}

.cabinet_popup>.title {
	font: bold 20px/20px Arial;
	width:calc(100% - 80px);
	height:30px;	
	position:absolute;
	top:8px;
	left:20px;
}

.cabinet_popup>.title>div {
	position: relative;
	float: left;
	clear: none;
}
.cabinet_popup>.title>div.subtitle {
	float: right;
	margin-left: 10px;
	font-size: 12px;
	color: var(--color-green-light);
	font-weight:bold;
	cursor: pointer;
}
.cabinet_popup>.title>div.subtitle.current {
	color: var(--color-black);
}
.cabinet_popup>.title>div.subtitle:hover {
	color: var(--color-gray-placeholder);
}


.cabinet_popup>ul.add_menu {
	position:absolute;
	top:32px;
	left:20px;
	margin:0;
	padding:0;
	list-style: none;
	display: none;
}
.cabinet_popup>ul.add_menu>li {
	float:left;
	clear:none;
	margin-right:16px;
	list-style: none;
	font: bold 12px/12px Arial;
}
.cabinet_popup>ul.add_menu>li.current {
	color: var(--color-green-light);
}

.customize_content {
	position:relative;
	float:left;
	clear:left;
	width:400px;
	margin:4px;	
}
.customize_content.add {
	width:200px;
	clear:none;
}
.customize_content.height {
	clear:none;
	width:200px;
	margin:4px;	
}
.customize_content.width {
	clear:none;
	width:200px;
	margin:4px;	
}


.custom_measurement_box {
	position:relative;
	float:left;
	clear:none;
	margin:2px;
	background-color:var(--color-green-light);
	width:58px;
	height:54px;
	border-radius: 6px;
}

.custom_measurement_box>select {
	font-size: 18px;
	width: 52px;
	margin-top: 20px;
	margin-left: 4px;
}

.custom_measurement_box#label {
	width: 70px;
}
.custom_measurement_box#label>.big_number {
	margin-top:16px;
}
.custom_measurement_box>.arrow {
	position:relative;
	float:left;
	clear:left;
	height:8px;
	width:100%;
	background-repeat: no-repeat;
	background-position: top center;
	cursor:pointer;
	margin:3px 0;
}
.custom_measurement_box>.arrow:hover {
	background-position: bottom center;
}
.custom_measurement_box>.arrow.up {
	background-image: url(/images/arrow_up@1x.png);
}
.custom_measurement_box>.arrow.down {
	background-image: url(/images/arrow_down@1x.png);
}
.custom_measurement_box>.big_number {
	position:relative;
	float:left;
	clear:left;
	font-size:16px;
	font-weight:bold;
	width:100%;
	height:24px;
	margin:0;
	text-align:center;
	overflow: hidden;
}

.custom_measurement_box>.big_number>.big_number_inner {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:10000;
}
.custom_measurement_box>.big_number>.big_number_inner>.number {
	position:relative;
	float:left;
	clear:left;
	width:100%;
	height:26px;
}


.bar.content>.cabinet_wrap>.metawrap>.order_info>.button_holder {
	position: absolute;
	right:0;
	top:3px;
	width:150px;
}

.bar.content>.cabinet_wrap>.metawrap>.order_info>.button_holder>.button,
.content>.left .button {
	position: relative;
	float:left;
	clear:none;
	border-radius: 6px;
	padding:4px;
	margin:3px;
	background-color: var(--color-gray-disabled-bg);
	color:var(--color-black);
	font: bold 10px/10px Arial;
	cursor:pointer;
}
.content>.left .btn.done,
.content>.left .btn.clear_customization,
.content>.left .btn.reset_inner_drawer_color {
	width: auto;
	height: auto;
	position: relative;
	float: left;
	clear: none;
	z-index: 10;
	margin: 20px 10px 0 0;
}

.content>.left .btn.reset_inner_drawer_color {
	display: none;
}

.content>.left .btn.done {
	clear:both;
}

.content>.left .btn.clear_customization {
	clear:none;
}

div.scroller {
	position:relative;
	float:left;
	clear:left;
	width:500px;
	height:505px;
	overflow-x:hidden;
	overflow-y: auto;
	margin:0;
	padding:0;
	list-style: none;
	margin-bottom:20px;
}

.tall ul.scroller {
	height:300px;
}

ul.scroller>li {
	position:relative;
	float:left;
	clear:left;
	width:450px;
	overflow:visible;
	margin-bottom:1px;
	padding:3px;
	list-style: none;
	color:var(--color-gray-subtle);
	cursor: pointer;
	font-weight:bold;
	font-size:14px;
}

ul.scroller_inner {
	position:relative;
	float:left;
	clear:left;
	width:450px;
	overflow:visible;
	margin:0 0 100px 0;
	padding:0;
	list-style: none;
	z-index:0;
}
ul.scroller_inner>li {
	position:relative;
	float:left;
	clear:left;
	width:450px;
	background-color:var(--color-gray-page);
	color:var(--color-gray-subtle);
	margin:0 0 1px 0;
	padding: 3px;
	cursor: pointer;
	overflow: visible;
	font: normal 11px/12px Arial;
	display:none;
}
ul.scroller_inner>li.TB {
	background-color: #d5d5ee;
}

ul.scroller_inner>li:hover,
ul.scroller_inner>li.current {
	background-color:#dfe3bd;
	color:#333;
}
ul.scroller_inner>li>.ikea_code {
	float:left;
	clear:left;
	width:78px;
}
ul.scroller_inner>li>.description {
	float:left;
	clear:none;
	width:370px;
}

ul.scroller_inner>li>ul.dimensions {
	display:none;
	position:absolute;
	top:0;
	left:280px;
	width:180px;
	z-index:10;
	margin:0;
	padding:0;
	list-style: none;
	border-radius:3px;
	box-shadow: 1px 1px 3px black;
	overflow: hidden;
}
ul.scroller_inner>li>ul.dimensions>li {
	position:relative;
	float:left;
	clear:left;
	width:180px;
	background-color:var(--color-gray-border);
	color:var(--color-gray-subtle);
	margin:0;
	border-bottom: 1px solid var(--color-gray-subtle);
	padding: 4px;
	cursor: pointer;
	overflow: visible;
	font: normal 11px/12px Arial;
}
ul.scroller_inner>li>ul.dimensions>li:hover {
	background-color: #c8d08b;
}




ul.dimensions2 {
	position:relative;
	float:left;
	clear:left;
	width:400px;
	overflow:visible;
	margin:0;
	padding:0;
	list-style: none;
	z-index:0;
}
ul.dimensions2>li {
	position:relative;
	float:left;
	clear:left;
	width:400px;
	background-color:var(--color-gray-page);
	color:var(--color-gray-subtle);
	margin:0 0 1px 6px;
	padding: 3px;
	cursor: pointer;
	overflow: visible;
	font: normal 11px/12px Arial;
}

ul.dimensions2>li:hover {
	background-color: #c8d08b;
}

a.category_choice {
	margin: 0 6px;
	cursor: pointer;
}
a.category_choice.current {
	color:var(--color-gray-subtle);
	font-weight:bold;
}



table.dark {
	position:relative;
	float:left;
	clear:all;
	width:100%;
	margin-top:10px;
}
table.dark td {
	background-color:var(--color-gray-page);
	padding:0px 3px;
	margin:1px;	
	font-size:11px;
}
table.dark th {
	background-color:var(--color-gray-border);
	text-align:left;
	font-weight:bold;
	padding:0px 3px;
	margin:1px;	
	font-size:12px;
}
#create_new {
	position:relative;
	float:right;
	clear:none;
	text-align:center;
	padding:7px;
	background-color: var(--color-gray-border);
	color: #333;
	border-radius: 5px;
	margin-top:10px;
	margin-right:10px;
	font-size: 16px;
	cursor: pointer;
}
#create_new:hover {
	background-color:var(--color-gray-page);
	color:#333;
}

p.help_text {
	font-size:12px;
	margin: 0 0 0 4px;
}


#build_top {
	position:relative;
	width:100%;
	float:left;
	clear:left;
	/* border:1px solid var(--color-gray-placeholder); */
	height:40px;
	margin-top: 20px;
	z-index:11;
}
#build_top>.build_top_pane {
	position:absolute;
	width:100%;
	top:0;
	left:0;	
	display:none;
}
#build_top>.build_top_pane>p {
	font-size:12px;
}

#build_top>.build_top_pane#order_info {
	margin-top:0px;
}


#build_top>.build_top_pane#order_info>p {
	margin:6px;
	font-weight: bold;
	width:600px;
}

#order_info>p>span {
	margin-right:20px;
	font-weight: normal;
}


.message_box {
	position:absolute;
	left:50%;
	top:100px;
	margin-left:-150px;
	width:300px;
	min-height:100px;
	z-index:101;
	border-radius: 10px;
	background-color:var(--color-gray-page);	
	border: 3px solid white;
	box-shadow: 2px 2px 8px var(--color-black);
	padding:10px;
}
.message_box>p {
	color:var(--color-black);
	font-size:14px;
	line-height:16px;
}
.message_box>h2 {
	text-shadow: none;
}

.message_box>.button {
	position: relative;
	float:right;
	clear:none;
	border-radius: 6px;
	padding:4px;
	margin:8px;
	background-color: var(--color-gray-disabled-bg);
	color:var(--color-black);
	font: bold 10px/10px Arial;
	cursor:pointer;
}

.message_box>.button {
	position:relative;
	float:left;
	clear:none;
	z-index:10;	
	margin:8px 0 0 12px;
	border-radius:4px;
	border: 3px solid white;
	box-shadow: 2px 2px 4px var(--color-gray-placeholder);
	color: white;
	cursor: pointer;
	width:auto;
	padding: 4px 12px;
}
.message_box>.button.green {
	background-color:var(--color-green-light);
}
.message_box>.button.red {
	clear:left;
	margin:8px 0 0 64px;
	background-color:#9e0a0a;
}

.ui-draggable-dragging {
	z-index:200;
}


/* checkout stuff. */

.checkout_popup {
	position:absolute;
	left:50%;
	margin-left:-450px;
	width:900px;
	top:-1000px;
	min-height:100px;
	z-index:100;
	border-radius: 10px;
	padding:16px;
	background-image: -moz-linear-gradient(top, #EEE, #FFF);
	background-image: -ms-linear-gradient(top, #EEE, #FFF);
	background-image: -webkit-linear-gradient(top,  #EEE, #FFF);
	background-image: -o-linear-gradient(top,  #EEE, #FFF);
	background-image: linear-gradient(top,  #EEE, #FFF);
	background-repeat: no-repeat;
	box-shadow: 2px 2px 8px var(--color-gray-placeholder);
}


.checkout_popup>.checkout_list {
	position:relative;
	float:left;
	clear:left;
	margin:20px 0;
	width: 100%;
}

table.checkout_page {
	width:1062px;
	color:var(--color-black);
	-webkit-border-horizontal-spacing:0;
	-webkit-border-vertical-spacing:0;
	border-top: 1px solid var(--color-gray-placeholder);
	border-left: 1px solid var(--color-gray-placeholder);
}
table.checkout_page.noborder, table.checkout_page.noborder td {
	border: none;
}

table.checkout_summary {
	width:1062px;
	color:var(--color-black);
}
table.checkout_summary tr td {
	font-size: 16px;
}




.checkout_list table.checkout_page,.print-invoice table.checkout_page,.cc-invoice table.checkout_page,
.print-quote table.checkout_page,.print-invoice table.checkout_page,.cc-invoice table.checkout_page {
	width:900px;
	margin-left:0;
}
.checkout_popup table.checkout_page {
	width:860px;
	margin-left:20px;
	margin-bottom:0;
}

.admin_home table.checkout_page {
	margin-left: 0px;
	width:100%;
}



.checkout_popup table {
	width:900px;
	margin-left:0px;
	margin-bottom:20px;
	color:var(--color-black);
}

.checkout_popup table tr {
	margin:0;
	padding:0;
}

.checkout_popup table th {
	font-weight: bold;
	font-size:12px;
	line-height:12px;
	text-align:left;
	padding:5px;
	margin:0;
	background-color:var(--color-gray-disabled-bg);
	vertical-align: bottom;
}
.checkout_popup table td {
	font-size:11px;
	line-height:12px;
	font-weight: normal;
	text-align:left;
	padding:2px 5px;
	background-color:var(--color-gray-border);
	margin:0;
}
.checkout_popup table td.checkbox {
	background-color:transparent;
	width:20px;
}


.checkout_popup table .text {
	width:700px;
	text-align:right;
}
.checkout_popup table .amount {
	width:60px;
	text-align:right;
}

.checkout_popup table td .small_button {
	display:block;
	position:relative;
	float:left;
	clear:left;
	top:0;
	left:0;
	opacity:.5;
}
.comment_popup>h2 {
	width:50%;
}


.comment_wrap, .response_box {
	width:870px;
	float:left;
	clear:left;
	padding:10px;
}
.comment_wrap>p {
	float:left;
	clear:left;
	width: 200px;
	margin:0;
	text-align:left;
}
.comment_wrap>p.user_name {
	font-size: 14px;
	font-weight:300;
	color: var(--color-green-light);
}
.comment_wrap>p.date {
	font-size: 11px;
	font-weight:700;
	color: var(--color-black);
}
.comment_wrap>.comment_text {
	width: 640px;
	float:right;
	clear:none;
	padding: 0px;
	background-color:var(--color-white);
	min-height:90px;
}
.comment_wrap>.comment_text>p {
	margin:6px;
}



.checkout_button {
	background-image: url('/images/checkout_button.png');
	background-position: top left;
	width:97px;
	height:21px;	
	margin: 0px 6px;
	position:relative;
	float:right;
	cursor:pointer;
}
.checkout_button:hover {
	background-position: bottom center;
}
.cancel_button {
	background-image: url('/images/cancel_button.png');
	background-position: top left;
	width:72px;
	height:21px;	
	margin: 0px 6px;
	position:relative;
	float:right;
	cursor:pointer;
}
.cancel_button:hover {
	background-position: bottom left;
}
.delete_order_button,.save_order_button,.get_quote_button {
	background-position: top left;
	width:122px;
	height:21px;	
	margin: 0px 6px;
	position:relative;
	float:right;
	cursor:pointer;
}
.delete_order_button:hover,.save_order_button:hover,.get_quote_button:hover {
	background-position: bottom left;
}
.delete_order_button {
	background-image: url('/images/delete_order_button1x.png');
}
.save_order_button {
	background-image: url('/images/save_order_button1x.png');
}
.get_quote_button {
	background-image: url('/images/get_quote1x.png');
}

.complete_button {
	background-image: url('/images/complete_button.png');
	background-position: top left;
	width:97px;
	height:21px;	
	position:relative;
	float:left;
	clear:left;
	cursor:pointer;
	margin-top:28px;
	margin-left:180px;
}
.complete_button:hover {
	background-position: bottom left;
}


table.checkout_page tr {
	margin:0;
	padding:0;
	vertical-align:top;
}

table.checkout_page th {
	font-weight: bold;
	font-size:12px;
	line-height:12px;
	text-align:left;
	vertical-align: bottom;
	padding:4px;
	margin:0;
	background-color:var(--color-gray-border);
	border-bottom: 1px solid var(--color-gray-placeholder);
	border-right: 1px solid var(--color-gray-placeholder);
}
table.checkout_page td {
	font-weight: normal;
	text-align:left;
	font-size:11px;
	line-height:12px;
	margin:0;
	padding:4px;
	border-top: 1px solid var(--color-gray-placeholder);
	border-right: 1px solid var(--color-gray-placeholder);
	background-color:var(--color-white);
}
table.checkout_page tr.no_top_border td {
	border-top: 1px solid var(--color-white);
}

table.checkout_page tr:last-child td {
	border-bottom: 1px solid var(--color-gray-placeholder);
}


table.checkout_page td.amount {
	min-width:44px;
	text-align:right;
}


table.checkout_page td>p,table.checkout_page td>h2{
	margin: 2px 0;
}


table.checkout_page td p.small{
	font: normal 11px/13px Arial;
	color:var(--color-black);
}


.add_elevation {
	float:left;
	clear:left;
	margin-top:6px;
	font-size:14px;
	font-weight: bold;
	color: var(--color-green-light);
	cursor:pointer;
	width:auto;
}
.add_elevation:hover {
	color: var(--color-gray-placeholder);
}

.elevation>.btn#delete_wall {
	position:absolute;
	top:-38px;
	left:400px;
	width:auto;
	height:auto;
}
.elevation>.btn#delete_wall>p {
	font-size: 10px;
	font-weight: bold;
	line-height:11px;
	margin:0;
	padding:4px 10px;
}

#custom_color_popup {
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	height:500px;
	margin-top:-250px;
	margin-left:-250px;
	background-color:var(--color-white);
	border-radius:6px;
	padding:6px;
	border: 3px solid white;
	box-shadow: 2px 2px 4px var(--color-gray-placeholder);
	display:none;
	z-index:110;
}

#custom_color_popup h3 {
	margin: 20px 0 0 0;
}
#custom_color_popup p {
	margin: 6px 0;
}
p.color_identifier {
	margin:0;
	display:block;
}


.order_functions_box {
	position: relative;
	float:left;
	clear:left;
	width:50%;
	z-index:10;
	margin: 10px 0;
}
.order_functions_box.right {
	position: relative;
	float:right;
	clear:none;
	width: 220px;
}

.order_function {
	position: relative;
	float:left;
	clear:none;
	margin-right:4px;
	border-radius:2px;
	background-color:#4a77ae;
	border:none;
	color:var(--color-white);
	font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    width:34px;
    height:26px;
	/* padding: 6px 4px; */
}
.order_function>.warning {
	position:relative;
	float:left;
	clear:left;
	margin: 4px 10px;
	width:180px;
}
.order_function>.warning>p {
	font-weight: bold;
	font-size: 10px;
	color:var(--color-white);
	margin: 2px;
}
.order_function>.warning>.warning_button {
	float:left;
	clear:none;
	margin: 6px 0 0 70px;
	padding:6px;
	border-radius:8px;
	background-color:var(--color-gray-text);
	color:var(--color-white);
	font-weight: bold;
	font-size: 11px;
}

.order_function#pay_by_check {
	min-width:200px;
	width: auto;
	height: auto;
	padding: 2px;
}
.order_function#pay_by_credit_card {
	min-width:200px;
	width: auto;
	height: auto;
	padding: 2px;
}
.order_function#pay_by_check .text,
.order_function#pay_by_credit_card .text {
	width: 160px;
	font-size: 15px;
}




.order_functions_box.checkout {
	margin-top: 30px;
	position: relative;
	float:left;
	clear:left;
	min-width: 70%;
	margin-left: 18%;
}


.order_functions_box.checkout>.order_function {
	position: relative;
	float:left;
	clear:none;
	margin-right:4px;
	border-radius:2px;
	background-color:#4a77ae;
	color:var(--color-white);
	border:none;
	color:var(--color-white);
	font-weight: bold;
    cursor: pointer;
	width: 300px;
	height: 44px;
	
}

.order_functions_box.checkout>.order_function:hover {
	background-color:var(--color-gray-subtle);
}

.order_functions_box.checkout>.order_function>.icon {
	float:left;
	clear:none;
	font-family: "FontAwesome";
	font-size: 12px;
	font-weight: normal;
	color:var(--color-white);
	margin:6px 2px 6px 6px;
}
.order_functions_box.checkout>.order_function>.icon {
	font-size:16px;
	margin:12px 4px 12px 12px;
}
.order_functions_box.checkout>.order_function>.text {
	float:left;
	clear:none;
	font-family: "Open Sans";
	font-weight: bold;
	font-size: 10px;
	color:var(--color-white);
	margin:4px 8px 4px 2px;
	min-width: 200px;
	line-height:1;
}
.order_functions_box.checkout>.order_function>.text {
	font-size:20px;
	margin:6px 16px 8px 4px;
}






blockquote,
blockquote>p {
	position: relative;
	float:left;	
}



blockquote>p>input[type=checkbox] {
	position:absolute;
	top:0;
	left: -20px;
}


.order_function:hover {
	background-color:var(--color-gray-subtle);
}

.order_functions_box.right>.order_function {
	position: relative;
	float:right;
	clear:none;
}

.order_function>.icon {
	float:left;
	clear:none;
	font-family: "FontAwesome";
	font-size: 14px;
	font-weight: normal;
	color:var(--color-white);
	margin:6px 8px;
    text-align:center;
    width:18px;
	line-height: 1;
}
.order_function>.text {
	width:140px;
	position:absolute;
	left: 36px;
	/* padding: 6px 0; */
	font-weight: bold;
	font-size: 10px;
	color:var(--color-white);
}
.order_function>.text>p,
.order_function>.text>p>a {
	margin:6px 0 6px 0;
	font-size: 11px;
	line-height: 11px;
	color:var(--color-white);
	font-weight: bold;
}
.order_function>.text>p>span {
	color:var(--color-white);
}



textarea#user_comment {
	float:left;
	clear:both;
	width:866px;
	min-height:300px;
	font-size: 16px;
	line-height: 1.7;
}

.comment {
	border: 1px solid black;
	margin:4px;
	padding: 12px;
}
.comment>p {
	margin:2px;
	font-size:12px;
	line-height: 1.5;
}
.comment>p.name {
	font-size:14px;
	font-weight: bold;
}


.comment_count {
	position: absolute;
	top:2px;
	right:10px;
	padding: 2px 6px;
	font-size:11px;
	font-weight: bold;
	color:var(--color-white);
	background-color: var(--color-green-hover);
	border-radius: 10px;
	border: 2px solid white;
	margin:0;
}

.menu_bar {
	float:left;
	clear:none;
	margin-left:20px;
	margin-top:10px;
	border-radius:3px;
	background-color: var(--color-gray-placeholder);
	overflow: hidden;
}
.menu_bar#boxes {
	float:right;
	margin-right:30px;
}
.menu_bar#front_design {
	margin-top:6px;
	clear:both;
}

.catalog .menu_bar {
	margin-left:0px;
	margin-right:10px;
	margin-top:6px;
	margin-bottom:10px;
}
.howto>.boxes_bar>.menu_bar {
	margin-left:0px;
	width: 100%;
	background-color: var(--color-white);
	margin-bottom: 10px;
}

.sektion .menu_bar#front_design {
	display:none;	
}
.sektion .menu_bar#boxes {
	float:right;
	margin-right:24px;
}

.menu_bar>.menubar_title {
	background-image: -moz-linear-gradient(top, #3b3b3b, var(--color-gray-subtle));
	background-image: -ms-linear-gradient(top, #3b3b3b, var(--color-gray-subtle));
	background-image: -webkit-linear-gradient(top,  #3b3b3b, var(--color-gray-subtle));
	background-image: -o-linear-gradient(top,  #3b3b3b, var(--color-gray-subtle));
	background-image: linear-gradient(top,  #3b3b3b, var(--color-gray-subtle));
	color:var(--color-white);
	font-size: 13px;
	font-weight: bold;
	padding:6px 10px;
	float:left;
	clear:none;
}
.menu_bar>.category_choice {
	font-family: Open Sans;
	float:left;
	clear:none;
	color:var(--color-white);
	font-size: 11px;
	font-weight: normal;
	padding:6px 8px;
	background-image: -moz-linear-gradient(top, #939393, var(--color-gray-disabled-border));
	background-image: -ms-linear-gradient(top, #939393, var(--color-gray-disabled-border));
	background-image: -webkit-linear-gradient(top,  #939393, var(--color-gray-disabled-border));
	background-image: -o-linear-gradient(top,  #939393, var(--color-gray-disabled-border));
	background-image: linear-gradient(top,  #939393, var(--color-gray-disabled-border));
	cursor:pointer;
}
.menu_bar>.category_choice:hover {
	background-image: -moz-linear-gradient(top, var(--color-green-light), var(--color-green-light));
	background-image: -ms-linear-gradient(top, var(--color-green-light), var(--color-green-light));
	background-image: -webkit-linear-gradient(top,  var(--color-green-light), var(--color-green-light));
	background-image: -o-linear-gradient(top,  var(--color-green-light), var(--color-green-light));
	background-image: linear-gradient(top,  var(--color-green-light), var(--color-green-light));
}
.menu_bar>.category_choice.current {
	background-image: -moz-linear-gradient(top, var(--color-green-light), var(--color-green-light));
	background-image: -ms-linear-gradient(top, var(--color-green-light), var(--color-green-light));
	background-image: -webkit-linear-gradient(top,  var(--color-green-light), var(--color-green-light));
	background-image: -o-linear-gradient(top,  var(--color-green-light), var(--color-green-light));
	background-image: linear-gradient(top,  var(--color-green-light), var(--color-green-light));
}

.loader {
	position:absolute;
	top:0;
	left:0;
	background-color:#333;
	width:100%;
	height:100%;
	opacity: .8;
	background-image: url(/images/ajax-loader.gif);
	background-position: center center;
	background-repeat: no-repeat;
	z-index:100;
	margin:0;
	padding:0;
	min-height: 40px;
}

.messages_bubble {
	position:absolute;
	top:1px;
	left:25px;
	color: #FF0000;
	min-height: 12px;
	font-size: 10px;
	font-weight: bold;
	color:var(--color-white);
}


#matcat_list {
	display:none;
	position:relative;
	float:left; 
	clear:none;
	width: 260px;
	background-color:var(--color-gray-page);
	margin-left: 40px;
}

#matcat_list>.matcats {
	position:relative;
	float:left; 
	clear:none;
	width: 260px;
	width: 100%;
}
#matcat_list>.matcats>.matcat {
	position: relative;
	float: left;
	clear: none;
	width: 248px;
	color: var(--color-black);
	font-size: 14px;
	font-weight: bold;
	line-height: 15px;
	border: 1px solid white;
	padding: 6px;
}
#matcat_list>.matcats>.matcat:hover {
	background-color:var(--color-white);
}




dl.summary_page {
	margin-top:0px;
	margin-left:20px;	
	width:270px;
}

dl.summary_page>dt {
	width:80px;
	margin-top:2px;
}
dl.summary_page>dd {
	margin-top: 2px;
	width:176px;
	margin-top: 0px;
	line-height: 18px;
}


.terms_pane>.terms_window {
	margin:12px;
}
.terms_pane>.terms_window>.terms_text_window {
	position:relative;
	float:left;
	clear:none;
	width:800px;
	height:300px;
	overflow:scroll;
	background-color:var(--color-gray-page);
	padding:12px;
}
.terms_pane>.terms_window>.terms_text_window>p {
	font-size: 11px;
	line-height: 13px;
}
.terms_pane>.terms_window>form {
	position:relative;
	float:left;
	clear:left;
	margin-left:150px;
	margin-top:10px;
}



@media only screen and (-webkit-min-device-pixel-ratio: 1) {
	.how_it_works>.image#image1 {
		background-image: url('/images/how_it_works/image1@2x.jpg');
       -webkit-background-size: 400px 200px; 
	}
	.how_it_works>.image#image2 {
		background-image: url('/images/how_it_works/image2@2x.jpg');
       -webkit-background-size: 400px 200px; 
	}
	.how_it_works>.image#image3 {
		background-image: url('/images/how_it_works/image3@2x.jpg');
       -webkit-background-size: 400px 130px; 
	}
	.how_it_works>.image#image4 {
		background-image: url('/images/how_it_works/image4@2x.jpg');
       -webkit-background-size: 400px 130px; 
	}
	.small_button.edit {
/*
		background-image: url('/images/edit2@2x.gif');
       -webkit-background-size: 18px 18px; 
*/
	}
	.small_button.delete {
/*
		background-image: url('/images/delete2@2x.gif');
       -webkit-background-size: 18px 18px; 
*/
	}
	.small_button.gears {
/*
		background-image: url('/images/gears-icon@2x.png');
       -webkit-background-size: 20px 20px;
*/
	}
}

/* .cab_info_window — replaces tablet.css / desktop.css UA-detected stylesheets */

.cab_info_window > p {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	font-weight: normal;
	margin: 0 2px;
	padding: 0;
}
.cab_info_window > p.cab_line        { font-weight: bold; }
.cab_info_window > p.cab_size        { font-size: var(--font-size-sm); }
.cab_info_window > p.cab_description { font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.cab_info_window > p.actions         { text-align: left; font-size: var(--font-size-base); margin-bottom: var(--space-2); margin-left: var(--space-2); }

@media screen and (min-width: 992px) {
	.cab_info_window > p           { font-size: var(--font-size-xs); line-height: 11px; }
	.cab_info_window > p.cab_size  { font-size: var(--font-size-xs); }
	.cab_info_window > p.cab_description { font-size: var(--font-size-xs); margin-bottom: var(--space-2); }
	.cab_info_window > p.actions   { font-size: var(--font-size-base); margin-bottom: var(--space-2); }
}


/* ═══════════════════════════════════════════════════════════════
   SETUP PAGE  (/start-designing/setup)
   Scoped to .panewrap.setup — does not affect the editor page
   ═══════════════════════════════════════════════════════════════ */

/* Two-column layout: selectors left, preview sidebar right */
.panewrap.setup {
	display: grid;
	grid-template-columns: 1fr 220px;
	column-gap: var(--space-12);
	align-items: start;
}

/* Sidebar: spans all content rows via a large row-span */
.panewrap.setup .cabinet_preview_wrap {
	position: sticky;
	top: var(--space-10);
	grid-column: 2;
	grid-row: 1 / 100;
	align-self: start;
	width: auto;
	height: auto;
	background-color: var(--color-gray-page);
	border: 1px solid var(--color-gray-border);
	margin: 0;
	margin-top: 0;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	border-radius: 0;
}

.panewrap.setup .cabinet_preview_wrap > h4 {
	margin: 0;
	text-align: center;
	font-size: var(--font-size-sm);
	letter-spacing: var(--tracking-md);
	text-transform: uppercase;
	color: var(--color-black);
}

.panewrap.setup .cabinet_preview_wrap > .cabinet_preview {
	width: 180px;
	height: 184px;
	margin: 0;
}

.panewrap.setup .cabinet_preview_wrap > .green_button {
	position: static;
	float: none;
	width: 100%;
	height: auto;
	background-color: var(--color-green-light);
	border: 1px solid var(--color-green-light-border);
	color: var(--color-white);
	cursor: pointer;
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	border-radius: 0;
	margin: 0;
	text-decoration: none;
}
.panewrap.setup .cabinet_preview_wrap > .green_button:hover {
	background-color: var(--color-green-hover);
}
.panewrap.setup .cabinet_preview_wrap > .green_button > p {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-md);
	text-transform: uppercase;
	color: var(--color-white);
	line-height: 1;
}
.panewrap.setup .cabinet_preview_wrap > .green_button > .icon {
	position: static;
	top: auto;
	right: auto;
	font-family: "FontAwesome";
	font-size: 16px;
	color: var(--color-white);
	margin: 0;
}

/* Intro paragraph */
.panewrap.setup > p {
	grid-column: 1;
	font-size: var(--font-size-base);
	color: var(--color-gray-text);
	line-height: var(--line-height-base);
	margin: 0 0 var(--space-6) 0;
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-gray-divider);
}

/* Howto step sections */
.panewrap.setup .howto {
	float: none;
	clear: none;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--space-10) 0;
	grid-column: 1;
}

.panewrap.setup .howto h2 {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-md);
	text-transform: uppercase;
	color: var(--color-black);
	text-shadow: none;
	line-height: 1;
	margin: 0 0 var(--space-5) 0;
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gray-divider);
}

/* IKEA cabinet line cards */
.panewrap.setup .howto .boxes_bar#ikea_line {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.panewrap.setup .howto .boxes_bar#ikea_line .box {
	flex: 1 1 240px;
	width: auto;
	max-width: none;
	height: auto;
	min-height: 0;
	padding: 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-border);
	margin: 0;
	cursor: pointer;
	box-sizing: border-box;
	overflow: hidden;
}

.panewrap.setup .howto .boxes_bar#ikea_line .box > .swatch {
	width: 100%;
	height: 180px;
	background-size: cover;
	background-position: center;
	margin-bottom: 0;
	border: none;
	display: block;
}

.panewrap.setup .howto .boxes_bar#ikea_line .box > h4 {
	float: none;
	clear: none;
	line-height: 1;
	padding: var(--space-4) var(--space-5) var(--space-1);
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-sm);
	color: var(--color-black);
	text-transform: uppercase;
}

.panewrap.setup .howto .boxes_bar#ikea_line .box > p {
	float: none;
	clear: none;
	padding: var(--space-2) var(--space-5) var(--space-5);
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-gray-text);
}

.panewrap.setup .howto .boxes_bar#ikea_line .box:hover {
	border-color: var(--color-gray-disabled-border);
	background-color: var(--color-white);
}

.panewrap.setup .howto .boxes_bar#ikea_line .box.current {
	border: 2px solid var(--color-green-light);
	background-color: var(--color-white);
}

/* Material swatch grid */
.panewrap.setup .howto .boxes_bar#materials {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-3);
	position: relative;
}

.panewrap.setup .howto .boxes_bar .box.material {
	position: static;
	flex: 0 0 calc(20% - 10px);
	min-width: 110px;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-border);
	margin: 0;
	cursor: pointer;
	box-sizing: border-box;
}

.panewrap.setup .howto .boxes_bar .box.material > .swatch {
	width: 100%;
	height: 80px;
	background-size: cover;
	background-position: center;
	margin-bottom: 0;
	border: none;
	display: block;
}

.panewrap.setup .howto .boxes_bar .box.material > h4 {
	float: none;
	clear: none;
	padding: var(--space-2) var(--space-2) 0;
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-sm);
	line-height: 1.3;
	color: var(--color-black);
	text-transform: uppercase;
}

.panewrap.setup .howto .boxes_bar .box.material > h5 {
	float: none;
	clear: none;
	padding: var(--space-1) var(--space-2) var(--space-2);
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-normal);
	line-height: 1.3;
	color: var(--color-gray-text);
	text-transform: none;
}

.panewrap.setup .howto .boxes_bar .box.material > p.color_name {
	float: none;
	clear: none;
	padding: var(--space-1) var(--space-2) var(--space-2);
	margin: 0;
	font-size: var(--font-size-xs);
	line-height: 1.3;
	color: var(--color-gray-text);
}

.panewrap.setup .howto .boxes_bar .box.material:hover {
	border-color: var(--color-gray-disabled-border);
	background-color: var(--color-white);
}

.panewrap.setup .howto .boxes_bar .box.material.current {
	border: 2px solid var(--color-green-light);
	background-color: var(--color-white);
}

/* Category headers between material groups */
.panewrap.setup .howto .boxes_bar h3.material_category_header {
	float: none;
	clear: none;
	width: 100%;
	margin: var(--space-6) 0 var(--space-1) 0;
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-md);
	text-transform: uppercase;
	color: var(--color-gray-placeholder);
	font-weight: var(--font-weight-bold);
	border-top: 1px solid var(--color-gray-divider);
	padding-top: var(--space-4);
}

/* Responsive */
@media screen and (max-width: 991px) {
	.panewrap.setup {
		grid-template-columns: 1fr;
	}
	.panewrap.setup .cabinet_preview_wrap {
		grid-column: 1;
		grid-row: auto;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.panewrap.setup .howto .boxes_bar .box.material {
		flex: 0 0 calc(25% - var(--space-3));
	}
}

@media screen and (max-width: 767px) {
	.panewrap.setup .howto .boxes_bar#ikea_line {
		flex-direction: column;
	}
	.panewrap.setup .howto .boxes_bar .box.material {
		flex: 0 0 calc(33.333% - var(--space-2));
	}
}

/* Design tool requires drag-and-drop and precise layout that doesn't work on small screens */
.mobile-only-message {
	display: none;
}

@media screen and (max-width: 767px) {
	.mobile-only-message {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60vh;
		padding: var(--space-6) var(--space-4);
		text-align: center;
	}
	.mobile-only-message_inner h2 {
		font-family: var(--font-family);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-bold);
		color: var(--color-black);
	}
	.start-designing-desktop-only {
		display: none;
	}
}