.btn{
	padding:4px 12px;
	white-space: nowrap;
	position: relative;
	text-decoration: none;
	cursor:pointer;
	border-radius:8px;
	border:solid 2px transparent;
	
	transition:0.2s;
	display:inline-flex;
	align-items:center;
	user-select:none;
	justify-content: center;
	box-sizing: border-box;
	font-weight: bold;
	
}
.btn.hollow{
	background-color:var(--input-background);
	border:solid 1px var(--border-color);
	color:var(--text-color);
}
.btn.solid{
	background-color:var(--abstract-color);
	color:var(--background);
}:root {
    --background: #FFF;
    --text-color: #6b7c93;
    --box-shadow: 0 0 0 1px #d8e1ed;
    --btn-text: #FFF;
    --abstract-color:#000;
    --border-color: #e7edf3;
    --input-border-color: #d0dbe5;
    --input-background: #FBFCFD;
    --drop-shadow: rgba(0, 0, 0, .1);
}
body.dark{
    --background:#131418;
    --box-shadow: 0 0 0 1px #24282e;
    --abstract-color:#FFF;
    --text-color: #9fadc0;

    --input-background: #191e23;
    --border-color: #33414f;
}
body{
    background-color:var(--background);
	margin:15px;
    max-width:1000px;
	margin:25px auto;
    line-height:1.4;
}
.body{
	
	box-shadow: var(--box-shadow);
	min-height: 300px;
	border-radius:5px;
	padding:15px 0;
}
.tab{
	cursor:pointer;
	padding:8px 12px;
	box-shadow: var(--box-shadow);
	border-radius:5px;
	border-bottom:solid 2px transparent;
}
.pad{
	padding:8px 12px;
}
.tab.active{
	color:var(--text-color);;
	border-color:var(--text-color);
}

.block{
	max-width:500px;
	margin:10px auto;
    box-sizing: border-box;
    padding: 0 12px;
}

.card{
	border-radius:5px;
	box-shadow:var(--box-shadow);
	position:relative;
	margin-bottom:5px;
	transition:0.2s;
}
.card.click:hover{
	cursor:pointer;
	box-shadow:0 0 0 2px var(--text-color);
    z-index:1;
}

.card-group>.card{
    margin: 1px 0;
    background: var(--background);
    border-radius: 0;
}
.card-group>.card:first-child{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.card-group>.card:last-child{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.heading{
	font-size: 18pt;
	color:var(--abstract-color);
}
.heading.S{
	font-size:12pt;
}
.mapview{
    overflow:hidden;
    position:relative;
    
}
.mapview .button{
    pointer-events:none;
    position:absolute;
}
.mapview .button>div{
    line-height:1;
    font-size:clamp(8pt,2vw,16pt);
    margin-left: -50%;
    background: var(--background);
    font-weight:bold;
    display: inline-block;
    padding:4% 10%;
    border-radius:4px;
    color:var(--text-color);
    pointer-events:auto;
    opacity:0.9;
    transition:0.2s;
}
.mapview .button.available>div{
    cursor:pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    opacity:1;
}
.mapview .button:not(.available)>div:after{
	content:"Nothing Available";
	font-size:8pt;
}
.mapview .button.soldout>div:after{
	content:"SOLD OUT";
	font-size:8pt;
}

.mapview .button.available>div:hover{
    transform:scale(1.05);
}
.or{
    margin: 16px 0;
    -webkit-text-stroke: 14px var(--background);
    position: relative;
    paint-order: stroke fill;
    text-align: center;
}
.or:after{
    content: "";
    border-bottom: solid 1px var(--border-color);
    position: absolute;
    width: 100%;
    left: 0;
    top: 8px;
    z-index:-1;
}
.powered{
    margin:8px;
}
.powered a{
    color:#5B8AFE;
    text-decoration: none;
}