:root
{
	--scblue:#246df8;
	--scbluebg:#3073bc20;
	--scorange:#000;
}

@font-face {
	font-family:'Gilroy';
	font-weight:normal;
	src:url('/fonts/Gilroy-Regular.woff') format('woff');
}
@font-face {
	font-family:'Gilroy';
	font-weight:bold;
	src:url('/fonts/Gilroy-SemiBold.woff') format('woff');
}



html,
body
{
	height:100%;
	font-family:'Gilroy', sans-serif;
}


body
{
	background-color:#f6f8f9;
	color:#000;
	margin:0px;
	font-size:12px;
}
body>svg
{
	display:none;
}

body.login
{
	background-color:#8fa7c0;
	background-image:url('/images/scbg.jpg');
	background-size:100%;
	background-position:center center;
	overflow:hidden;
}

body.login form
{
	margin:100px auto 0px auto;
	width:362px;
	display:block;
	background-color:#fff;
	color:#77787c;
	border-radius:30px;
	padding:6px;
	text-align:center;
	box-shadow:0px 10px 20px 5px rgba(0, 0, 0, .2);
}
body.login form>img
{
	width:150px;
	margin-top:35px;
}
body.login h2,
section#main h2
{
	margin:0px;
	font-size:14px;
	font-weight:bold;
	color:var(--scorange);
	margin-bottom:4px;
}

body.login form .flashmessage
{
	position:static;
	border-radius:8px;
	margin-bottom:30px;
	padding:16px;
	width:288px;
}

body.login form>div
{
	border:1px solid #f00;
	border-radius:26px;
	background-color:#fafbfd;
	border:1px solid #f2f3f7;
	margin-top:16px;
	padding-left:20px;
	padding-top:30px;
	text-align:left;
	color:#000;
	padding-bottom:20px;
}

body.login form input[type=text],
body.login form input[type=password]
{
	border-radius:8px;
	border:1px solid #dbdfe2;
	width:304px;
	box-shadow:0px 2px 3px 0px rgba(0, 0, 0, .05);
	height:33px;
	line-height:33px;
	padding-top:0px;
	padding-bottom:0px;
}
body.login form .left
{
	float:left;
	width:45%;
	height:66px;
	line-height:33px;
	padding:0px 3px;
}

body.login form .button
{
	float:left;
	border-radius:8px;
	width:320px;
	height:33px;
	line-height:33px;
	padding:0px;
	margin-bottom:19px;
	text-align:center;
}

body.login form hr
{
	border:0px;
	border-top:2px solid #eff0f2;
	width:320px;
	margin:0px;
	margin-top:33px;
	margin-bottom:20px;
}

body.login form center
{
	width:320px;
	color:#75767a;
}

body.login form center small
{
	color:#b9b9b9;
	font-size:10px;
}

nav
{
	position:fixed;
	top:0px;
	width:75px;
	height:100%;
	background-color:#fff;
	border-right:1px solid #f0f3f7;
}

nav .openclose
{
	display:block;
	margin-bottom:50px;
	border-radius:12px;
	width:37px;
	height:35px;
	margin-left:18px;
	margin-top:22px;
	margin-bottom:35px;
	background-color:transparent;
	cursor:pointer;
	border:1px solid transparent;
}
nav .openclose:hover
{
	background-color:#f6f8f9;
	border:1px solid #f0f3f7;
}
nav .openclose svg
{
	width:18px;
	height:7px;
	margin-left:9px;
	margin-top:14px;
}


nav a
{
	position:relative;
	display:block;
	margin-bottom:10px;
	text-decoration:none;
	font-size:16px;
	width:37px;
	height:35px;
	border-radius:12px;
	margin-left:18px;
	background-color:transparent;
	text-align:left;
}

nav a svg
{
	fill:#000;
	width:13px;
	height:13px;
	margin-top:11px;
}

nav a.logout
{
	position:absolute;
	bottom:0px;
	background-color:#f6f8f9;
	border:1px solid #f0f3f7;
}
nav a.logout svg
{
	fill:#4a4343;
}
nav a.logout:hover svg
{
	fill:#fff;
}

nav a.dashboard svg
{

}

nav a span:first-child
{

}
nav a span:last-child
{
	display:none;
	position:absolute;
	font-size:11px;
	color:#000;
	left:37px;
	top:12px;
}
nav a span:first-child img
{
	width:46px;
	margin-left:2px;
	margin-top:6px;
}
nav a.active,
nav a:hover
{
	background-color:var(--scblue);
}
nav a.active span:last-child,
nav a:hover span:last-child
{
	color:#fff;
}


nav a.active svg,
nav a:hover svg
{
	fill:#fff;
}

nav a.logout:hover
{
	border:1px solid transparent;
}

nav a.dashboard svg
{
	margin-left:12px;
}
nav a.boxes svg,
nav a.logout svg,
nav a.campsitefeatures svg
{
	width:15px;
	height:15px;
	margin-left:11px;
	margin-top:10px;
}

nav a.tenants svg,
nav a.tenantgroups svg,
nav a.keypads svg,
nav a.keypadtexts svg,
nav a.log svg,
nav a.camperpark svg,
nav a.boxtulators svg,
nav a.reservations svg,
nav a.reports svg,
nav a.calendar svg,
nav a.barrier svg
{
	width:19px;
	height:19px;
	margin-left:9px;
	margin-top:8px;
}
nav a.camperpark svg
{
	stroke:#000;
}
nav a.camperpark:hover svg,
nav a.camperpark.active svg
{
	stroke:#fff;
}

nav a.barrier svg
{
	width:23px;
	height:15px;
	margin-left:7px;
	fill:none;
	stroke:#000;
	margin-top:10px;
}

nav a.barrier:hover svg,
nav a.barrier.active svg
{
	stroke:#fff;
}

nav a.log svg
{
	fill:none;
	stroke:#000;
}
nav a.log:hover svg,
nav a.log.active svg
{
	stroke:#fff;
}

nav.open
{
	width:210px;
}
nav.open a
{
	width:172px;
}
nav.open a span:last-child
{
	display:block;
}

section#main
{
	position:absolute;
	left:75px;
	top:0px;
	padding-left:18px;
	width:calc(100% - 93px);
}

section#main.menuopen
{
	left:210px;
	width:calc(100% - 228px);
}

section#main header
{
	position:relative;
	display:block;
	height:75px;
	background-color:#fff;
	padding-left:50px;
	margin-left:-17px;
	margin-bottom:18px;
}

section#main header .logo
{
	margin-left:calc(50% - 50px);
}
section#main header .logo img
{
	margin-top:18px;
	height:35px;
}


section#main header .user
{
	position:absolute;
	top:0px;
	right:0px;
	color:#000;
	font-size:13px;
	font-weight:bold;
	cursor:pointer;
	width:300px;
	height:75px;
}
section#main header .user div.image
{
	float:left;
	width:38px;
	height:38px;
	margin-top:18px;
	margin-right:10px;
	border-radius:12px;
	background-color:#ccc;
}
section#main header .user div.image img
{
	width:60px;
	height:60px;
	margin-left:-11px;
	margin-top:-6px;
}
section#main header .user div.image svg
{
	width:38px;
	height:38px;
	stroke:#f00;
}
section#main header .user>div.name
{
	float:left;
	text-align:left;
	width:250px;
	height:75px;
	line-height:16px;
	padding-top:22px;
}
section#main header .user span
{
	font-weight:normal;
	display:block;
	color:#8e9aac;
}
section#main header .user:hover
{
	color:var(--scorange);
}
section#main header .user .incognito
{
	float:right;
	width:50px;
	height:50px;
	background-color:#f00;
	margin-top:20px;
	margin-right:40px;
	margin-left:-30px;
	border-radius:100%;
	padding:0px;
	margin-top:30px;
}
section#main header .user .incognito svg
{
	width:40px;
	height:40px;
	fill:#fff;
	margin:5px;
}

section#main .columnright
{
	position:absolute;
	right:0px;
	top:154px;
	width:50%;
	border-left:1px solid #fff;
	padding-left:50px;
}

section#main #content
{
	background-color:#fff;
	margin-right:18px;
	border:1px solid #f0f3f8;
	border-radius:23px;
	overflow:hidden;
	padding:13px 17px 26px 17px;

}
section#main #content h2
{
	margin-left:14px;
	margin-top:10px;
}

section#main #content h4
{
	margin:0px;
	margin-left:14px;
	color:#6f6e74;
	font-weight:normal;
}

section#main #content #tabcontents h2,
section#main #content #tabcontents h4
{
	margin:0px;
}




table th
{
	text-align:left;
	color:var(--scorange);
	cursor:pointer;

	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
table th.nosort
{
	cursor:default;
}
table td,
table th
{
	height:54px;
	padding:0px 7px;
}
table th.groupname
{
	width:80px;
}
table
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
}
table td
{
	border-bottom:1px solid #0001;
}
table tr[data-id]:hover
{
	cursor:pointer;
	color:#fff;
	border-radius:11px;
	box-shadow:1px 1px 20px 1px rgba(0, 0, 0, .3);
}
table tr[data-id]:hover td
{
	background-color:#246df8;
}
table tr td:first-child,
table tr th:first-child
{
	padding-left:14px;
}
table tr[data-id]:hover td:first-child
{
	border-top-left-radius:11px;
	border-bottom-left-radius:11px;
}
table tr[data-id]:hover td:last-child
{
	border-top-right-radius:11px;
	border-bottom-right-radius:11px;
}

table td.noclick
{
	padding-top:0px;
	padding-bottom:0px;
}
table td.noclick a
{
	text-decoration:none;
	background-color:var(--scblue);
	color:#fff;
	font-weight:bold;
	padding:6px 12px;
	border-radius:11px;
	font-size:12px;
}
table td.noclick a:hover
{
	background-color:var(--scorange);
}
table td.noclick a svg
{
	width:12px;
	height:12px;
	fill:#fff;
	margin-bottom:-2px;
}

table tr:hover td.noclick a
{
	background-color:#fff;
	color:#246df8;
}

table tr:hover td.noclick a svg
{
	fill:var(--scblue);
}
table tr:hover td.noclick a:hover svg
{
	fill:#000;
}


table svg.delete
{
	width:24px;
	height:24px;
	fill:#ff7171;
}
table svg.delete:hover
{
	
}

table svg.delete.disabled
{
	fill:rgba(0, 0, 0, .3);
}

table td span.active
{
	display:inline-block;
	background-color:#1eb96b;
	border:1px solid #1eb96b;
	color:#fff;
	font-weight:bold;
	border-radius:9px;
	font-size:12px;
	height:24px;
	width:62px;
	line-height:24px;
	text-align:center;
}
table td span.active.inactive
{
	background-color:#f7f8fa;
	border:1px solid #f0f4f7;
	color:#717171;
}

table td span.armed
{
	width:auto;
	padding:0px 15px;
}
table td span.armed:hover
{
	background-color:#14994b;
}
table td span.inactive.armed:hover
{
	background-color:#ccc;
	color:#000;
}

table td span.unlock,
table td span.reboot
{
	background-color:var(--scblue);
	color:#fff;
	font-weight:bold;
	padding:4px 8px;
	border-radius:3px;
	font-size:12px;
}
table td span.unlock.disabled,
table td span.reboot.disabled
{
	background-color:#888;
}

table td span.unlock:not(.disabled):hover,
table td span.reboot:hover
{
	background-color:var(--scorange);
}

table td.bool
{
	padding-bottom:0px;
	padding-top:6px;
}
table td.bool svg
{
	fill:#999;
}
table td.bool.no svg
{
	transform:rotate(45deg);
}
table td.bool.yes svg
{
	fill:#2a2;
}
table svg
{
	width:20px;
	height:20px;
}

table td span.state
{
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:10px;
	margin-right:6px;
	border:2px solid #fff;
	margin-bottom:-2px;
}
table td span.state.pending
{
	background-color:#888;
}
table td span.state.online,
table td span.state.hub
{
	background-color:#109640;
	box-shadow:0px 0px 3px 0px #109640;
}
table td span.state.offline
{
	background-color:#b32424;
	box-shadow:0px 0px 3px 0px #b32424;
}

table td.selectedgroup svg
{
	width:18px;
	height:18px;
	fill:var(--scorange);
}

table td span.rgbool
{
	display:inline-block;
	width:100%;
	height:20px;
	margin:-5px 0px;
}
table td span.rgbool.red
{
	background-color:#f00;
}
table td span.rgbool.green
{
	background-color:#0f0;
}

table.nostyle td
{
	padding:0px 10px 0px 0px;
	border:0px;
}
table.nostyle tr td:first-child
{
	padding:0px;
}


table.logtable th
{
	padding:0px;
	text-align:left;
	background-color:rgba(255, 255, 255, .8);
	backdrop-filter:blur(1.5px);
}

table td svg.mail
{
	width:26px;
	height:26px;
	fill:#555;
	margin-top:3px;
	cursor:pointer;
}
table td svg.mail:hover
{
	fill:#109640;
}
table td svg.cantmail
{
	width:24px;
	height:24px;
	fill:#fc0;
	margin-top:0px;
	filter:drop-shadow(1px 1px 2px rgba(0, 0, 0, .4));
}

div.dashboardpart table td,
div.dashboardpart table th
{
	height:28px;
}

#mailalert
{
	position:absolute;
	height:30px;
	line-height:30px;
	color:#fff;
	font-weight:bold;
	background-color:#b32424;
	border-radius:4px;
	padding:0px 20px;
}
#mailalert:after
{
	content:"";
	position:absolute;
	top:6px;
	left:-3px;
	width:18px;
	height:18px;
	background-color:#b32424;
	transform:rotate(45deg);
}

#content form
{

}
#content form .inner
{
	padding:27px;
	background-color:#fafbfd;
	border-radius:20px;
	border:1px solid #f2f3f7;
	margin-top:25px;
}

#content form hr
{
	border:0px;
	border-top:1px solid #dbdee3;
	margin:20px 7px;
}

form input[type=text],
form input[type=number],
form input[type=password],
input[type=date],
textarea,
#filter
{
	padding:12px;
	border:1px solid #dadee7;
	width:250px;
	margin-top:4px;
	border-radius:8px;
	outline:none;
	box-shadow:0px 2px 5px 0px rgba(0, 0, 0, .1);
}
form input[type=text]:focus,
form input[type=number]:focus,
form input[type=password]:focus,
form input[type=date]:focus,
textarea:focus
{
	border:1px solid var(--scblue);
}

textarea
{
	width:552px;
	height:200px;
}


form input.small
{
	width:190px;
}
form input.xsmall
{
	width:90px;
}
form input.inline
{
	width:90px;
	display:inline-block;
}

#content form input[type=submit]
{
	height:35px;
	border-radius:12px;
	padding:0px 30px;
	background-color:var(--scblue);
	border:1px solid var(--scblue);
	cursor:pointer;
	color:#fff;
	font-weight:bold;
	font-family:Gilroy, sans-serif;
}
#content form input[type=button].cancel
{
	border:1px solid #dadee7;
	background-color:#fff;
	color:#000;
	height:35px;
	border-radius:12px;
	padding:0px 30px;
	cursor:pointer;
	font-family:Gilroy, sans-serif;
}
#content form input[type=button].cancel:hover
{
	border:1px solid var(--scblue);
}


form select,
.styledselect
{
	padding:12px;
	border:1px solid #dadee7;
	background-color:#fff;
	width:250px;
	margin-top:4px;
	border-radius:8px;
	box-sizing:content-box;
	box-shadow:0px 2px 5px 0px rgba(0, 0, 0, .1)
}
form select:focus
{
	border:1px solid var(--scblue);
}

form fieldset
{
	background-color:#fff;
	border:1px solid #ccc;
	margin-bottom:20px;
	margin-right:50px;
	padding:25px;
	border-radius:12px;
}

.filternotfound
{
	display:none;
}

td.alert
{
	background-color:#fcc;
	color:#800;
}

.button
{
	display:inline-block;
	background-color:var(--scblue);
	padding:6px 35px;
	height:30px;
	line-height:30px;
	border-radius:15px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	cursor:pointer;
}
.button:hover,
.button.selected
{
	background-color:var(--scorange);
}
.button:hover span
{
	background-color:#d04a00;
}
.button span
{
	float:left;
	display:inline-block;
	width:20px;
	height:20px;
	background-color:#fff;
	border-radius:10px;
	margin:5px;
	margin-right:7px;
}
.button span svg
{
	width:12px;
	height:12px;
	fill:var(--scblue);
	margin:4px 0px 3px 4px;
}

.button.small
{
	background-color:var(--scblue);
	border:1px solid var(--scblue);
	color:#fff;
	font-weight:bold;
	padding:6px 12px;
	border-radius:11px;
	font-size:12px;
	display:inline;
}
.button.small span
{
	display:none;
	width:15px;
	height:15px;
	margin-right:8px;
}
.button.small span svg
{
	width:12px;
	height:12px;
	margin-bottom:-3px;
	margin-left:1.5px;
	margin-top:2px;
}

tr:hover .button.small
{
	background-color:#f7f8fa;
	border:1px solid #f0f4f7;
	color:#717171;
}


.button.right
{
	float:right;
}

.button.small.on
{
	background-color:#109640;
}
.button.small.off
{
	background-color:#b32424;
}

.button.small.on:hover,
.button.small.off:hover
{
	opacity:.7;
}

.button.multiple
{
	min-width:40px;
	text-align:center;
	margin-right:10px;
	margin-bottom:10px;
	padding-right:10px;
}

.button.xsmall
{
	padding:2px 10px 2px 8px;
	border-radius:4px;
	font-size:11px;
}

.button.add
{

}
.button.delete
{
	background-color:#c00;
}
.button.delete span
{
	background-color:rgba(0, 0, 0, .2);
}
.button.submit span
{
	display:none;
}
.button.submit span svg
{
	width:20px;
	height:20px;
	margin-left:5px;
	margin-top:5px;
	margin-bottom:-4px;
}
.button.delete span svg
{
	width:30px;
	height:30px;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:-9px;
}
.button.login
{
	float:right;
}
.button.login span svg
{
	width:16px;
	height:16px;
	margin-left:7px;
	margin-top:7px;
	margin-bottom:-3px;
}

.button.disabled
{
	background-color:#aaa;
	cursor:default;
}
.button.disabled span
{
	opacity:.5;
	filter:grayscale(1);
}

.button.next
{
	float:right;
	margin-right:50px;
}

.button.next span svg,
.button.prev span svg,
.button.resendmail span svg
{
	width:16px;
	height:16px;
	margin-left:7px;
	margin-top:7px;
	margin-bottom:-3px;
}
.button.next span svg
{
	transform:rotate(180deg);
}

.button.resendmail.mailsent
{
	background-color:#0c0;
}
.button.resendmail.mailsent span
{
	background-color:#0a0;
}

.button.grey
{
	background-color:#fafbfd;
	border:1px solid #dadee7;
	color:#000;
	padding:5px 15px;
}

.button.grey.next span,
.button.grey.prev span
{
	background-color:transparent;
	width:24px;
	height:24px;
	border-radius:0px;
	margin:0px;
}

.button.grey.next span svg,
.button.grey.prev span svg
{
	margin-top:3px;
	margin-left:-11px;
	width:24px;
	height:24px;
}

#availablepitchselector .button.multiple
{
	padding:6px 10px;
}

#tabs,
#tabcontents .subtabs
{
	height:56px;
	border-bottom:1px solid #ebecee;
	margin-left:-17px;
	width:calc(100% + 34px);
	padding-top:19px;
}
#tabs>div,
#tabcontents .subtabs>div
{
	float:left;
	background-color:#fff;
	border:1px solid #dadee7;
	padding:0px 17px;
	height:35px;
	line-height:35px;
	border-radius:10px;
	color:#000;
	text-decoration:none;
	font-weight:bold;
	cursor:pointer;
	margin-right:8px;
}
#tabs>div.active,
#tabs>div:not(.active):hover
{
	background-color:var(--scblue);
	border:1px solid var(--scblue);
	color:#fff;
}
#tabs>div .count
{
	display:inline-block;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	border-radius:30px;
	background-color:#fff4;
	margin-left:15px;
	margin-right:-10px;
}

#tabs>div:first-child
{
	margin-left:28px;
}

#tabs>div svg
{
	width:17px;
	height:17px;
	fill:#000;
	margin-left:-5px;
	margin-right:7px;
	margin-bottom:-5px;
}
#tabs>div.active svg,
#tabs>div:hover svg
{
	fill:#fff;
}

#tabs>div[data-tab=barriers] svg
{
	fill:none;
	stroke:#000;
}
#tabs>div.active[data-tab=barriers] svg,
#tabs>div[data-tab=barriers]:hover svg
{
	stroke:#fff;
}


#tabcontents
{

}
#tabcontents>div
{
	display:none;
	background-color:#fafbfd;
	padding:25px;
	border:1px solid #f0f4f7;
	margin-top:25px;
	border-radius:20px;
}
#tabcontents>div:first-child
{
	display:block;
}

#tabcontents>div.nobox
{
	border:0px;
	background-color:#fff;
	padding:0px;
}








.contentblock
{
	float:left;
	background-color:#fafbfd;
	padding:25px;
	border:1px solid #f0f4f7;
	margin-top:25px;
	border-radius:20px;
}

.contentblock.email1
{
	width:605px;
	height:480px;
	margin-right:25px;
}

.contentblock.email2
{
	width:25%;
	height:480px;

}
.contentblock.companycolor
{
	width:25%;
	margin-right:25px;
}

.contentblock.iframe
{
	width:605px;
}


#pricedetail
{
	font-family:Courier,monospace;
}

#hint
{
	position:absolute;
	z-index:3000;
	background-color:#000;
	color:#fff;
	padding:10px 15px;
	border-radius:20px;
}
#hint:before
{
	position:absolute;
	top:28px;
	left:calc(50% - 6px);
	content:"";
	width:10px;
	height:10px;
	background-color:#000;
	transform:rotate(45deg);
	z-index:2999;
}


#tabcontents>div h3
{
	margin:0px;
}
#tabcontents>div small
{
	color:#6f6e74;
}

#tabcontents>div.hassubtabs
{
	padding-top:1px;
	background-color:#fff;
	padding:12px;
	border:0px;
	border-radius:0px;

}

#tabcontents .subtabs
{
	border-bottom:0px;
	margin-left:0px;
	padding-top:0px;
	margin-top:-15px;
}
#tabcontents .subtabs>div
{
	border:0px;
	border:1px solid #fff;
}
#tabcontents .subtabs>div.active,
#tabcontents .subtabs>div:hover
{
	border:1px solid #ccc;
	color:var(--scblue);
	box-shadow:0px 2px 3px 0px rgba(0, 0, 0, .1);

}

#tabcontents .subtabcontents
{
/*knopje naar onder verplaatsen, onder streepje

*/

}
#tabcontents .subtabcontents>div
{
	display:none;
	margin-left:-12px;
	background-color:#fafbfd;
	border-radius:20px;
	border:1px solid #f2f3f7;
	padding:20px;
}
#tabcontents .subtabcontents>div:first-child
{
	display:block;
}

#tabcontents .subtabcontents>div.nostyle,
#tabcontents>div.nostyle
{
	background-color:transparent;
	border-radius:0px;
	border:0px;
	padding:0px;
}

.floatingtuultje
{
	float:left;
	background-color:#fafbfd;
	border-radius:20px;
	border:1px solid #f2f3f7;
	padding:20px;
	margin-right:25px;
	margin-bottom:25px;
}

.uploadedlogo
{
	float:right;
	border:1px solid #f2f3f7;
	background-color:#fff;
	border-radius:8px;
	width:200px;
	height:150px;
	padding:20px;
}
.uploadedlogo img
{
	max-width:200px;
	
}

.flashmessage
{
	position:absolute;
	top:122px;
	right:50px;
	padding:16px 50px;
	color:#fff;
	font-weight:bold;
	border-radius:7px;
}
.flashmessage.success
{
	background-color:#109640;
}
.flashmessage.error
{
	background-color:#b32424;
}


#darkener
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(143, 167, 192, .95);
	z-index:10;
}
#darkener #popin
{
	position:absolute;
	background-color:#fff;
	border-radius:15px;
}

#darkener #popin .title
{
	height:75px;
	line-height:75px;
	background-color:var(--scblue);
	color:#fff;
	padding-left:30px;
	font-size:18px;
	font-weight:bold;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}

#darkener #popin .content
{
	padding:30px;
	height:calc(100% - 110px);
	overflow:hidden;
}

#popin .close
{
	position:absolute;
	top:18px;
	right:30px;
	width:40px;
	height:40px;
	background-color:#055bb2;
	border-radius:7px;
}
#popin .close:hover
{
	background-color:#d04a00;
}
#popin .close svg
{
	margin-top:5px;
	margin-left:5px;
	width:30px;
	height:30px;
	fill:#ccc;
	transform:rotate(45deg);
	cursor:pointer;
}

#darkener.light
{
	background-color:rgba(193, 217, 242, .95);
}

.cardlist
{
	width:100%;
	border:1px solid var(--scblue);
}
.cardlist input
{
	width:calc(100% - 10px);
	border:0px;
	padding:0px;
	background-color:#ddd;
	height:35px;
	padding-left:10px;
}
.cardlist span
{
	display:block;
	padding-left:10px;
	height:25px;
	line-height:25px;
	cursor:pointer;
}
.cardlist span:hover
{
	background-color:#eee;
}


.dashboardpart
{
	float:left;
	position:relative;
	width:450px;
	height:300px;
	padding:25px;
	margin-right:50px;
	margin-bottom:50px;
	background-color:#fff;
	overflow:hidden;
	border-radius:12px;
}
.dashboardpart:nth-child(3n+1)
{
	/*margin-right:0px;*/
}
.dashboardpart h3
{
	padding:0px;
	margin:0px;
	color:var(--scorange);
	font-size:16px;
	font-weight:bold;
}
.dashboardpart .halfpiechart
{
	position:relative;
	width:369px;
	height:184px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
.dashboardpart .halfpiechart .bgmask,
.dashboardpart .halfpiechart .bgmask>div,
.dashboardpart .halfpiechart .colormask,
.dashboardpart .halfpiechart .colormask>div
{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	width:369px;
	height:369px;
	border-top-left-radius:100%;
	border-top-right-radius:100%;
}
.dashboardpart .halfpiechart .colormask,
.dashboardpart .halfpiechart .bgmask
{
	z-index:2;
	background-color:transparent;
	border-radius:0px;
	height:184px;
	overflow:hidden;
	transform-origin:184px 184px;
}
.dashboardpart .halfpiechart .colormask
{
	transform:rotate(0deg);
}
.dashboardpart .halfpiechart .bgmask
{
	transform:rotate(180deg);
}

.dashboardpart .halfpiechart .colormask>div
{
	background-color:var(--scblue);
}
.dashboardpart .halfpiechart .bgmask>div
{
	background-color:var(--scorange);
}

.dashboardpart .piechartlegend
{
	position:absolute;
	top:285px;
	left:66px;
	width:370px;
	font-weight:bold;
	color:var(--scorange);
}
.dashboardpart .piechartlegend>div:last-child
{
	position:absolute;
	top:0px;
	right:0px;
	width:185px;
	text-align:right;
	color:var(--scblue);
}


.dashboardpart .halfpiechart .inner
{
	position:absolute;
	top:102px;
	left:102px;
	z-index:3;
	width:164px;
	height:164px;
	background-color:#fff;
	border-radius:100%;
}

.dashboardpart.horbarchart h3
{
	margin-bottom:50px;
}
.dashboardpart.horbarchart>div
{
	width:100%;
	margin-bottom:10px;
	height:18px;
}
.dashboardpart.horbarchart>div>div
{
	position:relative;
	float:right;
	background-color:var(--scblue);
	width:50%;
	height:10px;
	margin-top:4px;
	border-radius:4px;
}
.dashboardpart.horbarchart>div>div div
{
	width:0px;
	height:10px;
	background-color:var(--scorange);
	border-radius:4px;
}
.dashboardpart.horbarchart>div>div span
{
	display:block;
	position:absolute;
	top:-2px;
	left:-25px;
	width:20px;
	color:var(--scorange);
	font-size:11px;
	text-align:right;
}

.dashboardpart.keypadlog
{

}
.dashboardpart.keypadlog .log
{
	width:450px;
	height:265px;
	margin-top:15px;
	font-size:12px;
}
.dashboardpart.keypadlog .log table td
{
	padding:2px 5px 2px 0px;
}
.dashboardpart.keypadlog .log table td:last-child
{
	padding-right:0px;
}

.dashboardpart.appcode
{
	text-align:center;
	line-height:4px;
}
.dashboardpart.appcode h1
{
	font-size:64px;
	line-height:0px;
}

.dashboardpart.appcode .googlestore,
.dashboardpart.appcode .appleplay
{
	position:absolute;
	top:130px;
	left:75px;
	width:150px;
}
.dashboardpart.appcode .appleplay
{
	left:275px;
}

.dashboardpart.appcode .googlestore svg.qr,
.dashboardpart.appcode .appleplay svg.qr
{
	width:150px;
	height:150px;
}

.dashboardpart.appcode .googlestore svg.qrbutton,
.dashboardpart.appcode .appleplay svg.qrbutton
{
	margin-top:8px;
	width:136px;
}
.dashboardpart.appcode .googlestore svg.qrbutton
{
	margin-top:11px;
}

.dashboardpart.newkeypad
{
	background-image:url('/images/cloudkeypad-back.jpg');
	background-size:120%;
	background-position:center center;
	cursor:pointer;
}
.dashboardpart.newkeypad:hover
{
	transition:all 1s ease-in-out;
	background-size:150%;
}

.dashboardpart.newkeypad>div
{
	width:500px;
	margin-left:-25px;
	margin-top:200px;
	height:80px;
	background-color:#fffa;
	backdrop-filter:blur(1.5px);
	text-align:center;
}
.dashboardpart.newkeypad>div h1
{
	line-height:60px;
	font-weight:bold;
	color:var(--scblue);
	font-size:36px;	
	padding:0px;
	margin:0px;
	margin-bottom:-10px;
}
.dashboardpart.newkeypad>div small
{
	font-size:11px;
	color:#222;
	line-height:0px;
	font-weight:normal;
}

.dashboardpart.servermanagement
{
	position:relative;
}
.dashboardpart.servermanagement div.door
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image:url('/images/dangerdoor.png');
	background-size:100%;
	background-position:0px -80px;
	cursor:pointer;
}

.dashboardpart.servermanagement div.content
{
	position:absolute;
	top:0px;
	left:0px;
	width:calc(100% - 40px);
	height:100%;
	padding:20px;
	text-align:center;
	font-size:17px;
}
.dashboardpart.servermanagement div.content .button
{
	background-color:#e00;
}
.dashboardpart.servermanagement div.content span
{
	display:block;
	font-size:48px;
	font-weight:bold;
	color:#e00;
}
.dashboardpart.servermanagement div.content.static
{
	background-image:url('/images/static.gif');
	background-size:100%;
}


.customscroll
{
	overflow:hidden;
}

.scrollbar
{
	position:absolute;
	top:0px;
	right:0px;
	width:20px;
	background-color:rgba(0, 0, 0, .05);
	border-radius:12px;
}

.scrollbar .handle
{
	position:absolute;
	top:0px;
	left:0px;
	width:20px;
	cursor:pointer;
}
.scrollbar .handle:after
{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:14px;
	height:calc(100% - 6px);
	background-color:rgba(0, 0, 0, .3);
	border-radius:7px;
}

.keypadtext
{
	float:left;
	position:relative;
	width:405px;
	height:230px;
	margin-right:40px;
	border:1px solid #dadee7;
	background-color:#f7f8fa;
	padding:23px;
	margin-right:30px;
	margin-bottom:30px;
	border-radius:25px;
}

.keypadtext canvas,
#charselector
{
	background-color:#27f;
	width:376px;
	height:125px;
	margin-top:6px;
	/*image-rendering:pixelated;*/
	cursor:pointer;
	border-radius:16px;
	border:15px solid #27f;
	margin-top:15px;
}

#charselector
{
	width:339px;
	height:456px;
	background-color:#fff;
	border:0px;
	margin:0px;
}

.keypadtext .delete,
.keypadtext .undo,
.keypadtext .specialchars
{
	position:absolute;
	left:23px;
	top:220px;
	width:36px;
	height:36px;
	padding:0px;
}
.keypadtext .delete svg,
.keypadtext .undo svg,
.keypadtext .specialchars svg
{
	width:36px;
	height:36px;
}

.keypadtext .undo
{
	
}
.keypadtext .specialchars
{
	left:69px;
}
.keypadtext .delete
{
	left:115px;
}


.texticon
{
	position:relative;
	width:900px;
	height:200px;
}
.texticon textarea
{
	margin-top:0px;
}
.texticon>div.icon
{
	position:absolute;
	right:0px;
	top:0px;
	width:160px;
	height:160px;
	border:1px solid #000;
}

.app-preview1,
.app-preview2
{
	position:absolute;
	left:300px;
	top:20px;
	width:300px;
	height:396px;
	background-color:#f00;
	background-image:url('/images/app-login.png');
	background-size:100%;
	border:1px solid #000;
}
.app-preview2
{
	left:650px;
	height:256px;
	background-image:url('/images/app-main.png');
}
.app-preview1 .companyname
{
	position:absolute;
	top:115px;
	left:94px;
	width:200px;
	color:#000;
	font-size:12px;
}
.app-preview1 .logo
{
	position:absolute;
	top:105px;
	left:28px;
	width:44px;
	height:50px;
}
.app-preview1 .logo img
{
	width:100%;
}
.app-preview2 .logo
{
	position:absolute;
	top:37px;
	left:125px;
	width:50px;
	height:50px;
}
.app-preview2 .logo img
{
	width:100%;
}

#seasonstable .color
{
	width:20px;
	height:20px;
	border:1px solid #000;
}

#seasondisplay
{
	position:relative;
	width:730px;
	height:42px;
}

#seasondisplay .months
{
	height:20px;
	width:730px;
	margin-left:1px;
}

#seasondisplay .months div
{
	float:left;
	width:62px;
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:11px;
	color:#555;
	background-color:#fffe;
}

#seasondisplay .months div:nth-child(odd)
{
	background-color:#fff5;
}

#seasondisplay .months div:nth-child(2)
{
	width:56px;
}
#seasondisplay .months div:nth-child(4),
#seasondisplay .months div:nth-child(6),
#seasondisplay .months div:nth-child(9),
#seasondisplay .months div:nth-child(11)
{
	width:60px;
}

#seasondisplay .display
{
	position:absolute;
	left:0px;
	bottom:0px;
	width:730px;
	height:20px;
	border:1px solid #aaa;
	overflow:hidden;
}

#seasondisplay .display div
{
	position:absolute;
	height:20px;
}

#pitchpool
{
	border:1px solid var(--scblue);
	background-color:var(--scbluebg);
	padding:15px;
	width:800px;
	border-radius:6px;	

}
#pitchpool>div
{
	float:left;
	border-radius:4px;
	background-color:#fff;
	border:1px solid var(--scblue);
	color:var(--scblue);
	padding:5px 12px;
	margin-right:10px;
	cursor:pointer;
}
#pitchpool>div:hover
{
	color:var(--scorange);
	border:1px solid var(--scorange);
}

#dropphoto
{
	border:2px dashed var(--scblue);
	padding:15px;
	width:800px;
	height:400px;
}

#uploadedphotos
{
	position:relative;
	height:300px;
	margin-bottom:25px;
}
#uploadedphotos .mainphoto,
#uploadedphotos .map
{
	position:relative;
	width:300px;
	height:200px;
	line-height:95px;
	border:1px dashed #aaa;
	cursor:pointer;
	text-align:center;
	padding:3px;
	border-radius:25px;
}
#uploadedphotos .photo
{
	position:relative;
	float:left;
	width:200px;
	height:133px;
	border:1px dashed #aaa;
	cursor:pointer;
	line-height:133px;
	text-align:center;
	padding:3px;
	border-radius:20px;
	margin-right:10px;
	margin-bottom:10px;
}
#uploadedphotos .photo>div
{
	width:200px;
	height:133px;
	border-radius:19px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:200px;
}

#uploadedphotos .photo svg,
#uploadedphotos .mainphoto svg,
#uploadedphotos .map svg
{
	display:block;
	fill:#000;
	width:18px;
	margin-left:auto;
	margin-right:auto;
	opacity:.6;
	margin-top:-14px;
}
#uploadedphotos .mainphoto svg,
#uploadedphotos .map svg
{
	margin-top:9%;
}

#uploadedphotos .photo svg.delete,
#uploadedphotos .mainphoto svg.delete,
#uploadedphotos .map svg.delete
{
	position:absolute;
	width:30px;
	height:30px;
	opacity:1;
	margin:0px;
	right:10px;
	top:10px;
	border-radius:13px;
}

#uploadedphotos .mainphoto>div,
#uploadedphotos .map>div
{
	width:300px;
	height:200px;
	border-radius:23px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:300px;
}

#hibbemfileform
{
	display:none;
}

#seasonstable .pitches
{
	padding:2px;
	border-radius:6px;
}

#seasonstable .pitches>div
{
	margin-right:5px;
	display:inline-block;
	padding:5px 10px;
	border-radius:4px;
	border:1px solid var(--scblue);
}


#seasonstable .pitches.allowdrag
{
	border:2px dashed var(--scblue);

}

#seasonstable .pitches.drophere
{
	border:2px dashed var(--scorange);

}

#seasonstable .pitches .dragplaceholder
{
	display:none;
	padding:5px;
	border-radius:4px;
	border:1px solid var(--scorange);
}

.calendarmonth
{
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	width:259px;
	border:1px solid #dadfe5;
	border-radius:13px;
	padding:3px;
	background-color:#fff;
	box-shadow:0px 2px 3px 0px rgba(0, 0, 0, .12);
}
.calendarmonth .head,
.calendarmonth .daynames
{
	height:35px;
	background-color:#f2f6f9;
	text-align:center;
	font-weight:bold;
	line-height:35px;
	font-size:15px;
}
.calendarmonth .daynames
{
	height:30px;
	margin-bottom:3px;
	font-size:13px;
}
.calendarmonth .head
{
	border-top-left-radius:11px;
	border-top-right-radius:11px;
}

.calendarmonth .daynames div
{
	float:left;
	width:35px;
	height:25px;
	line-height:15px;
	margin:1px;
	margin-bottom:0px;
	color:#58575c;
	font-size:13px;
}
.calendarmonth .day
{
	float:left;
	width:35px;
	height:30px;
	text-align:center;
	line-height:30px;
	margin:1px;
	cursor:pointer;
	border-radius:11px;
}
.calendarmonth .day.prev
{
	opacity:.4;
	cursor:default;
}
.calendarmonth .day.next
{
	opacity:.4;
	cursor:default;
}
.calendarmonth .day.busy
{
	background-color:#ff7170;
	cursor:default;
}
.calendarmonth .day.maintenance
{
	background-color:#e4ecff;
}

.legend
{
	height:27px;
	margin-bottom:15px;

}
.legend .day,
.legend .busy,
.legend .maintenance
{
	position:relative;
	display:inline-block;
	width:19px;
	height:19px;
	border:1px solid #dadfe5;
	background-color:#fff;
	margin-bottom:-7px;
	margin-right:5px;
	border-radius:7px;
	margin-left:25px;
}
.legend .day
{
	margin-left:0px;
}
.legend .busy::after,
.legend .maintenance::after
{
	position:absolute;
	left:2px;
	top:2px;
	content:"";
	width:15px;
	height:15px;
	background-color:#ff7170;
	border-radius:5px;
}
.legend .maintenance::after
{
	background-color:#e4ecff;
}

.occupation .header
{
	background-color:#fff;
	border:1px solid #dadfe5;
	padding:15px;
	height:40px;
	line-height:40px;
	border-radius:15px;
	text-align:center;
	font-weight:bold;
	font-size:16px;
}

.occupation .prev
{
	float:left;
}

.occupation .header .button
{
	font-size:12px;
	margin:0px;
}

.occupation .dayhead
{
	color:#949dac;
	text-align:center;
}
.occupation .dayhead span
{
	display:inline-block;
	color:#000;
	border:1px solid #dadee7;
	padding:5px;
	border-radius:10px;
	margin-top:5px;
	width:32px;
	height:28px;
	line-height:28px;
	margin-bottom:15px;
}

.occupation table
{
	width:auto;
	border:0px;
	margin-top:30px;
}

.occupation table td
{
	height:24px;
}

.occupation table tr td
{
	border-bottom:1px dashed #dadee7;
	border-right:1px solid #dadee7;
}
.occupation table tr:last-child td
{
	border-bottom:1px solid #dadee7;
}
.occupation table tr td:last-child
{
	border-right:1px solid #dadee7;
}
.occupation table tr:first-child td:last-child
{
	border-right:0px;
}

.occupation table tr:first-child td:first-child
{
	border:0px;
}
.occupation table tr:first-child td:not(:first-child)
{
	border-bottom:1px solid #dadee7;
	border-right:0px;
}

.occupation table tr td:first-child
{
	border-bottom:0px;
	border-right:1px solid #dadee7;
}

.occupation table tr td:first-child span
{
	display:inline-block;
	color:#000;
	border:1px solid #dadee7;
	padding:5px;
	border-radius:10px;
	margin-top:5px;
	width:32px;
	height:28px;
	line-height:28px;
	text-align:center;
}


.occupation table tr:nth-child(1) td
{
	font-weight:bold;
	font-size:16px;
}
.occupation table tr:nth-child(2) td
{

}
.occupation table tr td:first-child
{
	font-weight:bold;
	font-size:13px;
	text-align:right;
	padding-right:10px;
}

.occupation table th
{
	padding:7px 0px;
	text-align:center;
}

.occupation table span
{
	display:block;
	width:30px;
	height:20px;
}

.occupation table td
{
	position:relative;
	padding:3px 3px;
	font-size:10px;
	overflow:hidden;
	white-space:nowrap;
}
.occupation table td.occupied
{

}
.occupation table td.occupied:hover
{

}
.occupation table td.available
{
}

.occupation table td.occupied svg
{
	width:16px;
	height:16px;
}

.occupation table td.available span,
.occupation table td.occupied span,
.occupation .legend span
{
	display:inline-block;
	width:calc(100% - 5px);
	height:38px;
	border-radius:10px;
	text-align:left;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	border:2px solid #fff;
	box-shadow:0px 1px 3px 0px rgba(0, 0, 0, .15);
	line-height:12px;
	color:#fff;
	font-weight:bold;
	cursor:pointer;
}
.occupation table td span svg,
.occupation .legend span svg
{
	fill:#fff;
	margin:4px 0px 0px 5px;
}
.occupation .legend span svg
{
	margin:9px 0px -5px 5px;
}
.occupation table td.occupied.web span,
.occupation .legend span.web
{
	background-color:#ff7170;
}
.occupation table td.occupied.kiosk span,
.occupation .legend span.kiosk
{
	background-color:#ffba1e;
}
.occupation table td.occupied.admin span,
.occupation .legend span.admin
{
	background-color:#246df8;
}
.occupation table td.occupied span:hover
{
	opacity:.7;
}
.occupation table td.pending
{
	opacity:.4;
}

.occupation .legend
{
	
}
.occupation .legend span
{
	width:auto;
	padding-left:5px;
	padding-right:10px;
	margin-bottom:-18px;
	margin-left:6px;
	cursor:default;
}
.occupation .legend svg
{
	width:20px;
	height:20px;
	margin-bottom:-4px;
	margin-top:4px;
}

.actionpayload
{
	display:none;
}

.optional_api
{
	display:none;
}

.csv .selectedfields
{
	float:left;
	width:310px;
	border:1px solid #dadee7;
	min-height:600px;
	margin-right:20px;
	padding:10px;
	border-radius:15px;
	background-color:#fff;
	position:relative;
	z-index:2;
}
.csv .availablefields
{
	float:left;
	width:310px;
	border:1px solid #dadee7;
	min-height:400px;
	padding:10px;
	border-radius:15px;
	background-color:#fff;
}
.csv .selectedfields div,
.csv .availablefields div
{
	user-select:none;
	padding:10px;
	width:288px;
	border:1px solid #f0f4f7;
	background-color:#f7f8fa;
	margin-bottom:5px;
	cursor:pointer;
	position:relative;
	border-radius:10px;
}
.csv .selectedfields div.placeholder
{
	border:1px dashed #ff7170;
	background-color:#ff717033;
	opacity:.5;
}
.csv .selectedfields div.dragging
{
	position:absolute;
	z-index: 2000;
	box-shadow:0px 1px 10px 2px rgba(0, 0, 0, .2);
}

.csv .availablefields div:hover
{
	background-color:#ddd;
}

.csv .selectedfields div span
{
	position:absolute;
	top:7px;
	right:10px;
	width:20px;
	height:20px;
	display:block;
}
.csv .selectedfields div span svg
{
	fill:#ff7170;
}
.csv .selectedfields div span:hover svg
{
	fill:#e43736;
}


.csv .selectedfields div>svg
{
	width:5px;
	height:8px;
	margin-right:10px;
	margin-left:5px;
}

.csv .selectedfields div span.delete svg
{
	width:24px;
	height:24px;
	margin-top:-2px;
	margin-left:-2px;
}

#reservationform select.blinkchange
{
	border:2px #50f solid;
	background-color:#50f1;
	animation:blink 1s;
}

@keyframes blink {
	0%,25%,51%,75% { border-color:#50f; }
	26%,50%,76%,100% { border-color:#dadee7; }
}



.progress
{
	width:100%;
	height:30px;
	line-height:30px;
	font-size:14px;
}
.progress>div
{
	float:left;
	height:30px;
	color:#000;
	margin-right:25px;
	cursor:pointer;
}
.progress>div>div
{
	float:left;
	width:30px;
	height:30px;
	background-color:var(--scblue);
	border-radius:100%;
	color:#fff;
	text-align:center;
	font-size:22px;
	margin-right:15px;
}
.progress>div.past
{
	opacity:.5;
}
.progress>div.past>div
{
	background-color:#888;
}
.progress>div.active
{

}
.progress>div.future
{
	opacity:.3;
	cursor:default;
}
.progress>div.future>div
{

}

div.option
{
	
}


#triggers,
#availabletriggers
{
	background-color:#fff;
	padding:15px;
	border-radius:10px;
	border:1px solid #eee;
	margin-top:10px;
}

#availabletriggers
{


}

#availabletriggers .trigger
{
	display:inline-block;
	width:150px;
	height:66px;
	background-color:#7f7;
	border-radius:15px;
	font-weight:bold;
	cursor:pointer;
}

#availabletriggers .trigger.input
{
	background-color:#77f;
}
#availabletriggers .trigger.stop
{
	background-color:#f77;
}

#availabletriggers .trigger:hover
{
	opacity:.6;
}

#availabletriggers .trigger .icon
{
	float:left;
	width:50px;
	height:50px;
	margin:8px 8px 0px 8px;
	background-color:#fffc;
	border-radius:9px;
}
#availabletriggers .trigger .icon svg
{
	width:40px;
	height:38px;
	stroke:#000;
	margin:5px;
}

#triggers>div
{
	width:300px;
	float:left;
	margin-right:15px;
}

#triggers .trigger
{
	display:block;
	border-radius:10px;
	padding:8px 12px;
	position:relative;
}
#triggers .trigger.input
{
	background-color:#77f;
	border:1px solid #44e;
	color:#fff;
}
#triggers .trigger.input:after
{
	content:"";
	position:absolute;
	bottom:-9px;
	left:20px;
	background-color:#77f;
	width:14px;
	height:14px;
	transform:rotate(45deg);
	border-right:1px solid #447;
	border-bottom:1px solid #447;
}

#triggers .condition
{
	display:block;
	border-radius:10px;
	padding:8px 12px;
	position:relative;
}
#triggers .condition.barrier
{
	background-color:#7f7;
	border:1px solid #4c4;
}
#triggers .condition.barrier:after
{
	content:"";
	position:absolute;
	bottom:-9px;
	left:20px;
	background-color:#7f7;
	width:14px;
	height:14px;
	transform:rotate(45deg);
	border-right:1px solid #4c4;
	border-bottom:1px solid #4c4;
}

#triggers .command
{
	background-color:#ffe;
	border:1px solid #eec;
	border-radius:10px;
	padding:8px 12px;
	position:relative;
}
#triggers .command:not(.last):after
{
	content:"";
	position:absolute;
	bottom:-9px;
	left:20px;
	background-color:#ffe;
	width:14px;
	height:14px;
	transform:rotate(45deg);
	border-right:1px solid #eec;
	border-bottom:1px solid #eec;
}


#boxestable .door
{
	float:left;
	width:10px;
	height:10px;
	background-color:#888;
	border-radius:10px;
	border:2px solid #fff;
	box-shadow:1px 1px 2px 1px #0003;
	margin-right:5px;
}
#boxestable .door.open
{
	background-color:#f00;
	box-shadow:1px 1px 2px 1px #f003;
}
#boxestable .door.closed
{
	background-color:#0c0;
	box-shadow:1px 1px 2px 1px #0c03;
}

.clear
{
	clear:both;
}