:root {
	--darkgrey:#1A191C;
	--lgrey:#eaeaea;
	--orange:#DA604F;
	--brightorange:#FF5C4B;
	--paleorange:#FC9C71;
	--yellow:#E8DD3A;
	--red:#C71B00;
	--lgreen:#B8E31D;
	--brightgreen:#2ECE56;
	--nav_width:180px;
	--main_padding:3rem;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:1rem;
}

.wrap {
  position:relative;
  width:calc(1300px - 2rem);
  padding:0 1rem;
  max-width:100%;
  margin:0 auto;
  clear:both;
}

#burger,
#mobnav {
  display:none;
}

body {
	background-color:var(--lgrey);
	color:#333;
	font-family: "Assistant", sans-serif;
  	font-optical-sizing: auto;
}

header {
	float:left;
	clear:left;
    width:100%;
}

    nav {
		position:fixed;
		left:0;
		top:0;
		height:100vh;
		width:var(--nav_width);
		background-color:var(--darkgrey);
		padding:var(--main_padding) 1rem;
		display:grid;
		grid-template-rows: 50px 1fr max-content;
		grid-gap:2rem;
    }

		nav > h2 {
			font-size:2rem;
			font-weight:bold;
			color:var(--orange);
			text-align: right;
		}
		
		nav ul {
			list-style: none;
			width:100%;
		}
		
			nav li {
				float:left;
				width:100%;
			}
			
				nav a {
					width:100%;
					float:left;
					text-decoration: none;
					padding-block:0.25rem;
					font-size:0.8rem;
					text-transform: uppercase;
					text-align: right;
					color:#fff;
				}
				
					nav a:hover,
					.active{
						color:var(--orange);
					}

    #logo {
		font-size: 2rem;
		font-weight: bold;
		color: var(--orange);
		text-align: right;
		text-transform: capitalize;
		letter-spacing: -0.06em;
		margin:0;
		line-height:1;
    }

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	font-size:3rem;
	margin-bottom:1rem;
	letter-spacing: -0.06em;
}

h1 {
	font-size:4rem;
	line-height:1;
}

h2 {
	font-size:2rem;
}

h3 {
	font-size:1.8rem;
}

h4 {
	font-size:1.6rem;
}

h5 {
	font-size:1.4rem;
}

h6 {
	font-size:1.2rem;
}

main {
	float:right;
	width:calc(100vw - var(--nav_width)); 
	padding:var(--main_padding);
}

main p,
main li {
	font-size:1rem;
	line-height:1.6;
	margin-bottom:1rem;
	clear:left;
}

main ul,
main ol {
	margin-block:2rem;
}

  main li {
    padding-left:1rem;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5rem 1rem 1rem 0;
}

img.align_right {
  margin:0.5rem 0 1rem 1rem;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.whitebox {
	position:relative;
	background-color:#fff;
	padding:1rem;
	border-radius:0.5rem;
}

.shadow {
	box-shadow:0 0.5rem 0.5rem #0001;
}

.dot {
	width:100%;
	aspect-ratio:1;
	border-radius:100%;
}

	.dot.green {
		background-color:green;
	}

	.dot.orange {
		background-color:var(--paleorange);
	}

	.dot.yellow {
		background-color:var(--yellow);
	}

	.dot.red {
		background-color:var(--red);
	}

	.dot.white {
		background-color:#fff;
	}

.overflow-x {
	width:100%;
	overflow-x:auto;
}

.faded {
	opacity: 0.4;
}

.spin {
	animation: spin 3s linear infinite;
}

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

.orange-btn {
	border:none;
	outline:none;
	background-color:var(--orange);
	padding:0.5rem 2rem;
	color:var(--darkgrey);
	text-align:center;
	border-radius:0.25rem;
	font-size:1rem;
	cursor: pointer;
}

	.orange-btn:hover {
		background-color:var(--brightorange);
	}

.loading-btn .loading-img {
	height:1rem;
	margin-inline:auto;
	display:none;
}

	.loading-btn.loading .loading-img {
		display:block;
	}

	.loading-btn.loading p {
		display:none;
	}

	.loading-btn p {
		margin:0;
	}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1rem;
}

label {
	margin-bottom:0.25rem;
}

input,
textarea {
	background-color:#eee;
	border-radius:0.25rem;
	padding:0.5rem;
	font-size:1rem;
	border:none;
	outline:none;
}

input[type="submit"],
.submit-btn {
	float:left;
	clear:left;
	text-decoration: none;
	cursor: pointer;
	border:none;
	outline:none;
}

.errortext {
	color:red;
	font-weight:bold;
}

.small {
    margin:0;
    line-height:1;
    font-size:1.2rem;
}

.large-num {
	margin:0;
	font-size:2rem;
	font-weight:bold;
	color:var(--orange);
	line-height:1;
	letter-spacing: -0.06em;
}

.rounded {
	border-radius:0.25rem;
	padding:0.25rem;
	margin:0;
}

.vbad,
.large-num.vbad {
	color:var(--red);
}
.bad,
.large-num.bad {
	color:var(--orange);
}
.okay,
.large-num.okay {
	color:var(--yellow);
}
.good,
.large-num.good {
	color:var(--lgreen);
}
.vgood,
.large-num.vgood {
	color:var(--brightgreen);
}

.grid12 {
	display:grid;
	grid-template-columns: repeat(12,1fr);
	grid-gap:0.5rem;
}

.span2 {
	grid-column:span 2;
}
.span3 {
	grid-column:span 3;
}
.span4 {
	grid-column:span 4;
}
.span5 {
	grid-column:span 5;
}
.span6 {
	grid-column:span 6;
}
.span7 {
	grid-column:span 7;
}
.span8 {
	grid-column:span 8;
}
.span9 {
	grid-column:span 9;
}
.span10 {
	grid-column:span 10;
}
.span11 {
	grid-column:span 11;
}
.span12 {
	grid-column:span 12;
}

.popup {
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	z-index:100;
	background-color:#0005;
	padding:5vw;
	display:none;
}

	.popup .inner {
		position:absolute;
		width:min(800px,90%);
		max-height:90vh;
		padding:2rem;
		background-color:#fff;
		border-radius:0.5rem;
		left:50%;
		top:50%;
		transform:translate(-50%, -50%);
		display:grid;
		grid-template-columns: 1fr 100px;
		grid-gap:0.5rem;
	}

.edit-btn,
.new-btn {
	position:absolute;
	right:1rem;
	top:0.9rem;
	width:1.5rem;
	height:1.5rem;
	isolation: isolate;
	padding: 0 0.25rem 0.25rem;
	background-color:#f5f5f5;
	border-radius:100%;
	aspect-ratio: 1;
}

	.edit-btn input,
	.new-btn input {
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		opacity: 0;
		cursor:pointer;
		z-index:1;
		margin:0;
	}

	.edit-btn img,
	.new-btn img {
		position:relative;
		z-index:-1;
	}

	.new-btn {
		text-align: center;
	}

	.edit-form {
		position:absolute;
		right:calc(2.5rem);
		top:1rem;
		border:1px solid #ddd;
		padding:1rem;
		background-color:#fff;
		border-radius:0.5rem;
		z-index:5;
		display:grid;
		grid-template-columns: 1fr 5rem;
		grid-gap:0.25rem;
		display:none;
	}

		.edit-form fieldset {
			border:none;
			outline:0;
			max-height:270px;
			overflow-y:auto;
			display:grid;
        	grid-gap:0.1rem;
		}

		.edit-form p.edit-label {
			grid-column: 1/-1;
			font-weight:bold;
			font-size:0.7rem;
		}

		.radio-btn {
			position:relative;
			display:grid;
			grid-template-columns: 1fr 1.25rem;
			grid-gap:0.25rem;
			align-items: center;
			padding:0.5rem;
		}

			.radio-btn input {
				position:absolute;
				inset:0;
				width:100%;
				height:100%;
				cursor: pointer;
				opacity:0;
			}

			.radio-btn p {
				text-align:center;
				min-width:200px;
			}

			.radio-btn .checkdot {
				width:100%;
				aspect-ratio: 1;
				border-radius:100%;
				background-color:#fff;
				border:4px solid #fff;
			}

			.radio-btn:has(input:checked) .checkdot {
				background-color:#333;
			}

	:is(.edit-btn,.new-btn):has(input:checked) + .edit-form {
		display:grid;
	} 

	.edit-form .btns {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap:0.1rem;
	}

	.edit-form button {
		width:2.3rem;
		height:2.3rem;
		border:none;
		outline:none;
		text-align: center;
		border-radius:0.25rem;
		cursor: pointer;
	}
	
	.edit-form input {
		margin-bottom:0;
	}

	.edit-form textarea {
		width:min(400px,90vw);
		padding:0.75rem;
	}

	:is(.save,.delete) .loading-img {
		display:none;
	}

	:is(.save,.delete).loading .loading-img {
		display:block;
		height:1rem;
		margin-inline:auto;
	}

	:is(.save,.delete).loading span {
		display:none;
	}

	.delete span img {
		height:1rem;
	}

.edit-logs {
	display:grid;
	grid-template-columns: 1fr;
	grid-gap:0.2rem 0.5rem;
	grid-template-columns:max-content max-content max-content max-content max-content 1fr;
}

	.log {
		width:100%;
		grid-column: 1/-1;
		background-color:#eee;
		padding:0.25rem;
		border-radius:0.25rem;
		display:grid;
		grid-template-columns: subgrid;
	}

		.edit-name {
			font-weight:bold;
			text-transform: capitalize;
		}
		.edit-label {
			font-weight:bold;
		}

		.log p {
			font-size:0.8rem;
			margin:0;
		}

		.log p.rounded {
			width:fit-content;
			font-size:0.6rem;
		}

footer {
  clear:both;
}

@media screen and (max-width:899px) {
	nav :is(ul,li,a) {
		float:left;
		clear:left;
		width:100%;
		text-align: left;
		padding-inline:0;
	}

	nav {
		position:fixed;
		width:var(--nav_width);
		max-width:100vw;
		left:calc(-1 * var(--nav_width));
		height:100%;
		top:0;
		background-color:#000;
		padding:3rem;
		z-index:5;
		transition:left 0.25s ease-out;
		overflow-y:auto;
	}

	#burger:has(input:checked) ~ nav {
		left:0;
	}

	#burger {
		position:relative;
		display:block;
		float:right;
		width:40px;
		filter:drop-shadow(0 0 5px #0005);
		z-index: 6;
	}

		#burger input {
			position:absolute;
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
		}
}