@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
@import 'https://cdn.bulmaworld.com/fonts/stylesheet.css?v=20241111111211';

*{box-sizing:border-box}
a{color:inherit}

body{background:var(--color-1);color:var(--color-3);font-family: 'Basier Circle';font-size:1rem}
#header{width:35vmin;height:100vh;position:fixed;left:0;top:0;background:var(--color-2);padding:2.5vmin;padding-left:7.5vmin;display:flex;justify-content:space-between;flex-flow:column;z-index:10}
#header nav{margin:3vmin 0}
#header nav ul{list-style-type:none;margin:0;padding:0}
#header nav ul li{margin:.75vmin 0;font-weight:500;color:var(--color-5);font-size:120%}
#header nav ul li > ul{margin-left:1vmin;}
#header nav ul li > ul li{font-size:100%;font-weight:400}
#header nav ul li > ul li:before{display:inline-block}
#header a {text-decoration:none}
#header a:hover{color:var(--color-3)}
#header .selected{color:var(--color-3)}
#header > nav:last-of-type{margin:0}
#navs{height:100%;overflow-y:auto;margin:3vmin 0}
#navs > nav:first-child{margin-top:0}#navs > nav:last-child{margin-bottom:0}
#navs > nav:first-child > ul > li:first-child{margin-top:0}
#navs::-webkit-scrollbar {
	width: 10px;
}

#navs::-webkit-scrollbar-track {
	background: var(--color-3); 
}
 
#navs::-webkit-scrollbar-thumb {
	background: var(--color-222)
}

#navs::-webkit-scrollbar-thumb:hover {
	background: var(--color-danger)
}

body.rsvp-mode #header{background:var(--color-5)}
body.rsvp-mode #header nav ul li{color:var(--color-2)}

.warn{background:yellow;color:var(--color-1)}
#logo{width:60%;max-width:150px;display:block;margin-bottom:4vmin}
.logo-print{max-width:150px;display:block}

.shake-horizontal{animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both}
@keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}}
.rotate-in-center{animation:rotate-in-center .6s cubic-bezier(.25,.46,.45,.94) both}
@keyframes rotate-in-center{0%{transform:rotate(-360deg);opacity:0}100%{transform:rotate(0);opacity:1}}

#header-in{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5vmin}
#header-in button{margin-bottom:0}

#dashboard-dates{display:grid;gap:2.5vmin;grid-template-columns:1fr 1fr}
#dashboard-dates .field {margin-bottom:0}

h1,h4{margin:0}
h4{color:var(--color-222)}
hr{border:0;border-bottom:.25vmin solid var(--color-222);height:0}
button{border:0;background:var(--color-4);color:var(--color-3);border-radius:var(--radius);padding:.5vmin 1vmin;margin-left:1vmin;margin-bottom:1vmin}
button:first-child{margin-left:0}
button:disabled{opacity:.5}

#container,#loading{width:calc(100% - 35vmin);margin-left:35vmin;padding:2.5vmin 0;padding-right:10vmin;padding-left:5vmin}

.table-container{overflow-x:auto}
.table{min-height:100vh}
table{width:100%;border-collapse:collapse}
th,td{padding:.75vmin 1.5vmin;border-bottom:.25vmin solid var(--color-222);text-align:left}
th,label{vertical-align:top;color:var(--color-222);font-weight:500}
thead{position:sticky;top:0;background:var(--color-1)}
tfoot{font-weight:bold}tfoot td {border-bottom:0}
tr > td:first-of-type{padding-left:0}tr > th:first-of-type{padding-left:0}
tr > td:last-of-type{padding-right:0}tr > th:last-of-type{padding-right:0}
.sub-total th{border-top:.375vmin dotted var(--color-222)}
.half-table{width:50%}

.field-group {display:grid;grid-template-columns:repeat(2, 1fr);gap:5vmin}
.field-group-2 {display:grid;grid-template-columns:repeat(4, 1fr);gap:5vmin}

.field {
	margin-bottom: 5vmin
}

.field input, .field textarea {
	width: 100%
}

.field label {
	width: 30%;
	margin-right: 1vmin;
	margin-bottom: 1vmin
}

input, textarea, select {
	background: none;
	padding: 0;
	color: inherit;
	border: none;
	outline: 0;
	border-bottom: .25vmin solid;
	padding-bottom: .25vmin;
	font: inherit
}

input::placeholder {
	font: inherit;
	color: #FFF
}

input:focus, textarea:focus {
	color: var(--color-222)
}

input[type="checkbox"]{accent-color:var(--color-3)}

select{width:100%;font:inherit;color:var(--color-1);padding-left:0;padding-right:0}
select{background:var(--color-3);color: var(--color-1)}

.charts{width:100%}
.charts canvas{width:100%;height:100%}
.charts > div{min-height:100vh;display:flex;align-items:flex-start;justify-content:center}

#rsvp-in-icon {
	width: 15%;
	display: block;
	margin: 0 auto
}

#rsvp-in-message {
	text-align: center
}

body.loading #loading {
	display: flex
}

body.loading #container {
	display: none
}

#loading {
	display: none;
	align-items: center;
	justify-content: center;
	height: 100vh
}

#spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25vh;
	height: 25vh;
	position: relative
}

#spinner img{
	position: absolute;
	width: 50%;
	animation: rotate-scale-down .65s cubic-bezier(.68,-.55,.265,1.55) infinite both
}

@keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}}

.spin {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	border: .25vmin solid var(--color-3);
	border-radius: 100%;
	animation: spin 0.75s infinite linear;
}

.spin::before,
.spin::after {
	left: -2px;
	top: -2px;
	display: none;
	position: absolute;
	content: '';
	width: inherit;
	height: inherit;
	border: inherit;
	border-radius: inherit;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.spinner,
.spinner::before,
.spinner::after {
	display: inline-block;
	border-color: transparent;
	border-top-color: var(--color-3);
	animation-duration: 1.2s;
}

.spinner::before {
	transform: rotate(120deg);
}

.spinner::after {
	transform: rotate(240deg);
}

#reader-cont {
	max-width: 300px;
	display: block;
	margin: 0 auto;
}

@media screen and (max-width: 980px) {
	body{grid-template-rows:1fr 1fr;grid-template-columns:1fr;font-size:.75rem}
	section{align-items:flex-start}
	
	#header{width:100%;height:auto;padding:5vmin;position:static}
	#navs{display:grid;grid-template-columns:1fr 1.5fr;align-items:flex-start}
	#navs > nav{margin:0}
	
	#header-in{margin-bottom:10vmin}
	#header-in.mobile-block{display:block}
	#header-in > div:nth-child(2) {margin-top:2vmin;display:flex;justify-content:flex-end}
	
	#header > a:first-child,#EventId {grid-column:1/3}
	#loading{height:auto}
	
	#table-rsvps {overflow-x:scroll}
	
	#container,#loading{width:100%;margin-left:0;padding:5vmin}
	.half-table{width:100%}
	
	#navs{height:auto}
}

@media print {
	@page {
		background: var(--color-1);
		margin: .5cm;
	}
	
	html, body {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
		background: var(--color-1);
	}
	
	a{text-decoration:none}
	
	#header{display:none}
	#container{width:100%;margin-left:0;padding:.5cm}
	h1 {margin-top:0}
	
	#charts hr{page-break-after: always;height:2cm}
}