body {
	background: #242424;
	font-family: 'Josefin Sans', sans-serif;
	color: #fff;
	background-color: #242424;
	background: repeating-linear-gradient( 45deg, #121212, #121212 10px, #181818 10px, #181818 18px );
	background-image: url(../img/hexagons_2_8L.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
	display: flex;
    flex-wrap: wrap;
    place-content: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	min-height: 100vh;
	max-width: 100vw;
}

#content-wrap {
	padding: 1em;
	margin-top: 30vh;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
	background: rgba(0,0,0,0.25);
	backdrop-filter: blur(4px);
	border-radius: 0.5em;
	border: 1px solid rgba(15, 210, 255, 0.2);
	max-width: 80vw;
}

h1, h2, h3, h4, h5 {
	font-family: 'Josefin Sans', sans-serif;
}

.hidden {
	display: none;
}

a {
	color: rgba(199,153,66,1);
	text-decoration: none;
}

a:visited {
	color: rgba(199,153,66,1);
}

.logged-in-user {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	color: rgba(255,255,255,0.3);
}

.logged-in-user .logout-user {
	color: rgba(208, 82, 94, 0.5);
	padding: 0.25em;
	background: rgba(208,82,94,0.2);
	border-radius: 0.25em;
	cursor: pointer;
}

.admin-form > input[type=submit] {
	border: 1px solid #e0c980;
	border-radius: 0.5em;
	padding: 1em;
	background: #242424;
	color: #e0c980;
}

.update {
	padding: 0.5em;
	width: calc(100% - 1em);
	display: block;
	text-align: center;
	background: rgba(45,105,25,0.85);
	color: #fff;
	border-radius: 0.5em;
}

#splash-screen {
	width: 100%;
}

header {
	width: 80%;
	text-align: center;
	padding-top: 2vh;
	font-size: 4em;
	font-weight: 800;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

header > img {
	width: 9em;
	max-width: 90%;
}

header > h1 {
	color: rgba(199, 153, 66, 1);
	padding: 2vh 0;
	font-size: 1em;
}

header > h2 {
	font-size: 16pt;
	letter-spacing: 6pt;
}

header > svg {
	
}

#content-wrap > section {
   display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
	padding: 1em 0;
	max-width: 100%;
}

.section-header {
	font-size: 2em;
	color: rgb(199 153 66);
	margin-bottom: 0.5em;
	text-align: center;
}

#tech {
	
}

#tech > #tech-box {
	max-width: 100%;
	min-width: 14em;
	margin-bottom: 1em;
	font-size: 1em;
	padding: 1em;
	border: 1px solid rgba(199,153,66,0.3);
	border-radius: 0.25em;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
	text-align: left;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(5px);
	color: rgb(112 153 112);
}

#tech-box > .tech-print	 {
	display: block;
	color: rgb(112 153 112);
}

#tech-box > span.tech-strong {
	font-weight: 800;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#tech-box > span > .tech-yellow {
	color: rgb(199 153 66);
}

#tech-box > span.tech-strong > .tech-yellow {
	text-shadow: 0 0 0px, 0 0 2px, 0 0 12px;
}

#info {
	text-align: center;
	font-size: 2vh;
	display: flex;
	flex-direction: column;
	margin-bottom: 2em;
}

#current-event, #next-event {
	padding: 1em 5%;
	width: 90%;
	text-align: center;
	background: rgba(0,0,0,0.75);
	margin-bottom: 2em;
	border-radius: 0.5em;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.75);
	backdrop-filter: blur(5px) contrast(0.75);
}

.event-name {
	display: block;
	margin-bottom: 1em;
	font-size: 1em;
	padding: 1em;
	border: 1px solid rgba(224,201,128,1);
	border-radius: 0.5em;
}

#next-event > #countdown-time-timer {
	display: block;
	color: #ccc;
	font-weight: bold;
}

#countdown-time-timer > .countdown-numbers {
	color: #e0c980;
	text-shadow: 0 0 5px rgba(224,201,128,1);
}

#program {
}

#time-table {
	width: 100%;
	font-size: 1em;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(15, 210, 255, 0.3);
	border-radius: 0.5em;
	padding: 1em;
}

.time-table-item {
	width: 100%;
	padding-bottom: 0.5em;
}

.time-table-item-time {
	display: inline-block;
	width: 5em;
	font-weight: 700;
	vertical-align: top;
	color: #e0c980;
}

.time-table-item-time > i {
	margin-right: 1em;
	width: 1em;
}

.time-table-item-desc {
	display: inline-block;
	padding-left: 5%;
	width: calc(90% - 5em);
	font-size: 0.9em;
}

.time-table-item-divider {
	position: relative;
	width: 96%;
	border-bottom: 2px solid rgba(15, 210, 255, 0.1);
	margin-top: 0.5em;
	box-shadow: 0 3px rgba(0,0,0,0.5);
}

.time-table-item:last-of-type {
	padding-bottom: 0;
}

.time-table-item:last-of-type > .time-table-item-divider {
	border: 0;
}

.event-event > div {
	color: rgb(159, 145, 89);
}

.drink-event > div {
	color: rgb(67, 137, 149);
}

.food-event > div {
	color: rgb(112 153 112);
}

.gaming-event > div {
	color: rgb(172, 82, 87);
}

.logistics-event > div {
	color: rgb(155, 96, 157);
}

.past-event {
	opacity: 0.5;
}

.past-event .time-table-item-time {
	text-decoration: line-through;
}

.current-event {
	opacity: 1;
	text-shadow: 0 0 3px, 0 0 7px, 0 0 15px;
}

.next-event {
	opacity: 1;
	text-shadow: 0 0 7px, 0 0 15px;
}

.future-event {
	
}

#login-wrap {
	width: 100%;
	height: 1em;
	padding: 1em 0;
	text-align: center;
	color: rgba(255,255,255,0.15);
}

#login-wrap > #login-text {
	cursor: pointer;
}

#login-form-wrap {
	position: sticky;
	padding: 2em 2em;
	background: rgba(0,0,0,0.8);
	box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
	border: 1px solid #d4bf81;
	margin-top: -13em;
	bottom: 30em;
	display: none;
}

#login-form-close {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	cursor: pointer;
}

.login-form {
	display: flex;
	flex-direction: column;
}

.login-form > input {
	padding: 1em;
}

/* ======================
			NFT
   ====================== */

#nft #content-wrap {
	margin-top: 1em;
}

#nft header h1 {
	font-size: 20pt;
	padding: 0;
}

#nft header h2 {
	font-size: 14pt;
	letter-spacing: 3pt;
	color: rgba(199, 153, 66, 0.5);
}

#nft .login-form {
	
}

#nft .login-form .input-wrap {
	display: flex;
	justify-content: space-between;
}

#nft .submit-wrap {
	display: flex;
	justify-content: center;
}

#nft .login-form .input-wrap label {
	margin-right: 0.5em;
	line-height: 2.5em;
	color: rgba(255,255,255,0.5);
}

#tech #button_refresh,
#tech .user-number-form input,
#tech .user-generate-new input,
ul.nft-navigation li,
#nft .login-form .input-wrap select,
#nft .login-form .input-wrap input,
#nft #user-character-form input[type=submit]
 {
	background: rgba(0,0,0,0.65);
	border: 1px solid rgba(15, 210, 255, 0.2);
	border-radius: 0.5em;
	padding: 0.5em 1em;
	color: rgba(255,255,255,0.65);
	cursor: pointer;
	margin: 0.25em 0;
}

#nft .login-form .input-wrap input[type=submit]
{
	border: 1px solid rgba(15, 210, 255, 0.5);
}

#nft #user-character-form .trait-group {
	min-width: 13em;
	display: flex;
	margin-bottom: 0.5em;
}

#nft #user-character-form .trait-group label {
	min-width: 6em;
	color: rgba(255,255,255,0.5);
	line-height: 2em;
	text-align: right;
	margin-right: 0.5em;
}

#nft #user-character-form .trait-group input {
	min-width: 10em;
	padding: 0.5em;
	border: 0;
	background: rgba(255,255,255,0.2);
	border-radius: 0.25em;
	color: #fff;
}

#nft #user-character-form .trait-group input:focus-visible {
	outline: none;
}

ul.nft-navigation {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

ul.nft-navigation li {
	width: 1em;
	text-align: center;
	padding: 0.5em;
}

ul.nft-navigation li i {
	color: rgba(112,153,112,0.75);
}

ul.nft-navigation li.prev-step {
	border: 1px solid rgba(112,122,153,0.25);
	background: rgba(112, 122, 153, 0.15);
}

ul.nft-navigation li.prev-step i {
	color: rgba(112, 122, 153, 0.75);
}

ul.nft-navigation li.next-step {
	border: 1px solid rgba(112,153,112,0.25);
	background: rgba(112,153,112,0.15);
}

ul.nft-navigation li.disabled i {
	color: rgba(255,255,255,0.1);
}

ul.nft-navigation li.disabled {
	border: 1px solid rgba(15, 210, 255, 0.05);
	background: rgba(0,0,0,0);
	cursor: default;
}

/* ======================
	  NFT-inställningar
   ====================== */

#nft.settings #content-wrap {
	border: 1px solid rgba(199, 153, 66, 0.5);
}

#nft.settings header h1 {
	font-size: 14pt;
}

#nft.settings h2 {
	font-size: 14pt;
	margin-top: 1em;
	padding-bottom: 0.5em;
}

#nft.settings .settings-form {
	
}

#nft.settings .settings-form .year-group,
#nft.settings .settings-form .job-group
{
	min-width: 13em;
	display: flex;
	margin-bottom: 0.5em;
}

#nft.settings .settings-form .year-group input,
#nft.settings .settings-form .job-group input
{
	padding: 0.5em;
	border: 0;
	background: rgba(255,255,255,0.2);
	border-radius: 0.25em;
	color: #fff;
}

#nft.settings .settings-form .year-group .year-input {
	width: 4em;
	margin-right: 0.25em;
}

#nft.settings .settings-form .year-group .era-input {
	min-width: 8em;
}

#nft.settings .settings-form .form-header span {
	display: inline-block;
}

#nft.settings .settings-form .job-group .job-input,
#nft.settings .settings-form .header-job
{
	width: 8em;
	margin-right: 0.25em;
}

#nft.settings .settings-form .job-group .minyear-input,
#nft.settings .settings-form .header-minyear
{
	width: 4em;
	margin-right: 0.25em;
}

#nft.settings .settings-form .job-group .maxyear-input,
#nft.settings .settings-form .header-maxyear
{
	width: 4em;
}

#nft.settings .settings-form .year-group .delete-setting-row,
#nft.settings .settings-form .job-group .delete-setting-row
{
	height: 1em;
	padding-left: 0.5em;
	padding-top: 0.5em;
	color: rgba(208, 82, 94, 0.5);
}

/* ======================
	     QR-kodsleken
   ====================== */
   
#nft.qr h1 {
	padding-bottom: 0.5em;
	font-size: 1.25em;
}

#nft.qr h2 {
	padding-bottom: 0.5em;
	font-size: 2em;
}

#nft.qr p {
	padding-bottom: 1em;
}

body#nft.qr.user-ken {
	background: #8e366c; /* rosa */
}

body#nft.qr.user-dj {
	background: #009fff; /* blå */
}

body#nft.qr.user-db {
	background: #ff1800; /* röd */
}

body#nft.qr.user-maku {
	background: #ffef00; /* gul */
}

#nft.qr  i.qr-object {
	font-size: 140px;
	color: rgba(255,255,255,0.5);
}

body#nft.qr .qr-verb {
	font-size: 1.5em;
}