/**
 * @author Josh Theriault 0315799
 * @description Main external style sheet for UPEI CS-2060 assignment 3 website
 * @updated 12/2/2021
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root
{
	--color-white: #ffffff;
	--color-white-glass: rgba(255, 255, 255, 0.33);
	--color-black: #000000;

	--color-light: #f5f6f7;
	--color-dark: #0b0c10;

	--color-lightergray: #d9d9d9;
	--color-lightgray: #8d8d8d;
	--color-altgray: #5a5a5a;
	--color-gray: #444444;
	--color-darkgray: #1a1c20;
	--color-darkergray: #16181c;

	--color-stone: #1c1d20;
	--color-graphite: #111316;

	--color-primary: #1548d9;
	--color-primary-lighter: #275df3;
	--color-primary-darker: #0d36a7;
	--color-primary-glass: rgba(21, 72, 217, 0.33);

	--color-positive: #02a741;
	--color-positive-lighter: #12cc59;
	--color-positive-darker: #038334;
	--color-positive-glass: rgba(2, 167, 65, 0.33);

	--color-negative: #e22e3d;
	--color-negative-lighter: #ff5353;
	--color-negative-darker: #b6202d;
	--color-negative-glass: rgba(226, 46, 61, 0.33);

	--color-neutral: #777777;
	--color-neutral-lighter: #999999;
	--color-neutral-darker: #666666;
	--color-neutral-glass: rgba(119, 119, 119, 0.33);

	--color-board-gray-light: #bbbbbb;
	--color-board-gray-dark: #4e4e4e;
	--color-board-blue-light: #8cc5ff;
	--color-board-blue-dark: #3a6b9d;
	--color-board-red-light: #ff8c8c;
	--color-board-red-dark: #9d3a3a;
	--color-board-purple-light: #cb8cff;
	--color-board-purple-dark: #603a9d;
	--color-board-green-light: #8cff92;
	--color-board-green-dark: #3a9d4f;

	--gradient-cloud-light: linear-gradient(0.25turn, rgb(59 83 255), rgb(66 176 255));
	--gradient-cloud-dark: linear-gradient(0.25turn, rgb(6,17,48), rgb(9,44,70));

	--size-top-nav: calc(20px + 2rem);
	--size-side-nav: 250px;
}

.text-light { color: var(--color-white); }
.text-dark { color: var(--color-black); }
.text-primary { color: var(--color-primary); }
.text-positive { color: var(--color-positive); }
.text-negative { color: var(--color-negative); }
.text-neutral { color: var(--color-neutral); }

.bg-light { background-color: var(--color-white); }
.bg-dark { background-color: var(--color-black); }
.bg-primary { background-color: var(--color-primary); }
.bg-positive { background-color: var(--color-positive); }
.bg-negative { background-color: var(--color-negative); }
.bg-neutral { background-color: var(--color-neutral); }

.light-theme
{
	background-color: var(--color-light);
	color: var(--color-graphite);
}

.dark-theme
{
	background-color: var(--color-stone);
	color: var(--color-white);
}

body
{
	font-family: 'Source Sans Pro', sans-serif;
	padding-top: var(--size-top-nav);
}

#page_landing
{
	padding-top: 0;
}

#page_join > main, #page_login > main
{
	height: 100%;
}

h1
{
	font-size: 3rem;
}

h2
{
	font-size: 3rem;
	font-weight: 200;
}

h3
{
	font-size: 2.25rem;
	margin: 0.75em 0;
}

h4
{
	font-size: 2.25rem;
	font-weight: 400;
	margin: 0.75em 0;
}

h5
{
	font-size: 1.5rem;
	margin: 1em 0;
}

h6
{
	font-size: 1.5rem;
	font-weight: 400;
	margin: 1em 0;
}

@media only screen and (max-width: 768px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2.5rem; }
	h3 { font-size: 2rem; }
	h4 { font-size: 2rem; }
	h5 { font-size: 1.4rem; }
	h6 { font-size: 1.4rem; }
}

@media only screen and (max-width: 480px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.8rem; }
	h4 { font-size: 1.8rem; }
	h5 { font-size: 1.2rem; }
	h6 { font-size: 1.2rem; }
}

p
{
	font-size: 1.2rem;
}

@media only screen and (max-width: 768px) {
	p { font-size: 1.1rem; }
}

@media only screen and (max-width: 480px) {
	p { font-size: 1rem; }
}

:any-link
{
	text-decoration: none;
	color: var(--color-primary);
}

:any-link:hover
{
	text-decoration: underline;
}

input, button
{
	font-family: 'Source Sans Pro', sans-serif;
}

.text
{
	font-size: 1.2rem;
	display: block;
}

/**
 * Hero Container
 */

.hero-container
{
	display: flex;
	position: relative;
	top: 0;
	z-index: 20;
	flex-flow: column wrap;
	align-items: center;
	justify-content: space-evenly;
	height: 500px;
}

.hero-title
{
	margin: 0;
	font-size: 4rem;
}

.hero-tagline
{
	font-size: 1.5rem;
}

@media only screen and (max-width: 768px) {
	.hero-title
	{
		font-size: 3.5rem;
	}
	.hero-tagline
	{
		font-size: 1.33rem;
	}
}

@media only screen and (max-width: 480px) {
	.hero-title
	{
		font-size: 3rem;
	}
	.hero-tagline
	{
		font-size: 1.2rem;
	}
}

.cloud-gradient
{
	background-image: var(--gradient-cloud-light);
	color: var(--color-white);
}

.dark-theme .cloud-gradient
{
	background-image: var(--gradient-cloud-dark);
	color: var(--color-white);
}

/**
 * Topbar Navigation
 */

#topnav
{
	position: fixed;
	top: 0;
	z-index: 22;
	width: 100%;
	padding: 10px 15px;
	color: var(--color-white);
}

#topnav::after
{
	content: "";
	display: block;
	clear: both;
}

#topnav-left
{
	float: left;
}

#topnav-right
{
	float: right;
	font-size: 1.2rem;
	/* padding-top: 4px; */
}

.logged-in #topnav-right
{
	padding-top: 4px;
}

#topnav-backdrop
{
	display: block;
	position: fixed;
	top: 0;
	z-index: 20;
	background-image: var(--gradient-cloud-light);
	width: 100%;
	height: var(--size-top-nav);
}

@media only screen and (max-width: 768px) {
	#topnav-backdrop
	{
		z-index: 21;
	}
}

.dark-theme #topnav-backdrop
{
	background-image: var(--gradient-cloud-dark);
}

.brand-logo
{
	color: var(--color-white);
	font-size: 1.5rem;
	font-weight: 600;
	user-select: none;
}

.brand-logo:hover
{
	text-decoration: none;
}

/**
 * Sidebar Navigation
 */

#sidenav
{
	position: fixed;
	top: var(--size-top-nav);
	left: 0;
	height: calc(100% - var(--size-top-nav));
	min-width: var(--size-side-nav);
	max-width: 100%;
	z-index: 2;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	/* justify-content: space-between; */
	padding: 10px 0;
	font-size: 1.2rem;
	font-weight: 600;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
	transition: left 0.1s ease-out, min-width 0.1s ease-out;
	color: var(--color-altgray);
	background-color: var(--color-white);
}

@media only screen and (max-width: 480px) {
	#sidenav
	{
		min-width: 100%;
		height: auto;
	}
}

#sidenav[data-opened]
{
	/* visibility: visible !important; */
	left: 0 !important;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25) !important;
}

.dark-theme #sidenav
{
	color: var(--color-lightergray);
	background-color: var(--color-graphite);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.66);
}

.dark-theme #sidenav[data-opened]
{
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.66) !important;
}

#sidenav ol, #sidenav ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	width: 100%;
}

#sidenav li
{
	flex: 1 1 auto;
	padding: 0;
	user-select: none;
}

#sidenav li *
{
	display: block;
	padding: 10px 0 10px 15px;
	color: var(--color-altgray);
}

.dark-theme #sidenav li *
{
	color: var(--color-lightergray);
}

#sidenav li:hover
{
	background-color: var(--color-light);
	border-right: 3px solid var(--color-black) !important;
}

.dark-theme #sidenav li:hover
{
	background-color: var(--color-stone);
	border-right: 3px solid var(--color-white) !important;
}

#sidenav :any-link:hover
{
	color: var(--color-black);
	text-decoration: none;
}

.dark-theme #sidenav :any-link:hover
{
	color: var(--color-white);
}

#sidenav-toggle /* hamburger */
{
	/* border: 2px solid var(--color-white);
	border-radius: 4px; */
	margin-right: 6px;
	/* padding: 5px 6px 0 6px; */
	display: none;
	position: relative;
	top: 2px;
}

#sidenav-toggle:hover
{
	cursor: pointer;
}

#sidenav-toggle::before
{
	content: "≡";
	font-size: 1.5rem;
	line-height: 0;
}

#content-overlay
{
	position: fixed;
	top: var(--size-top-nav);
	/* left: var(--size-side-nav); */
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.75);
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease-out;
}

.dark-theme #content-overlay
{
	background-color: rgba(0, 0, 0, 0.8);
}

/**
 * Containers
 */

#main-container
{
	margin: 0 auto;
}

.split-container
{
	display: flex;
	flex-flow: row wrap;
	justify-content: stretch;
	gap: 20px;
}

.split-container > *
{
	flex: 1 1 auto;
}

.content
{
	max-width: 1200px;
	min-width: 280px;
	margin: 0 auto;
	padding: 0 40px 40px 40px;
}

.content-sm
{
	max-width: 600px;
}

@media only screen and (max-width: 1780px) {
	#main-container
	{
		margin: 0 auto 0 calc(var(--size-side-nav));
	}
}

@media only screen and (max-width: 1024px) {
	#main-container
	{
		margin: 0 auto;
	}
	#sidenav
	{
		left: calc(-1 * var(--size-side-nav));
		box-shadow: none !important;
	}
	.logged-in #sidenav-toggle
	{
		display: inline;
	}
	#sidenav[data-opened] ~ #content-overlay
	{
		opacity: 1;
		pointer-events: initial;
	}
}

@media only screen and (max-width: 480px) {
	#sidenav
	{
		left: -100%;
	}
}

.fullscreen
{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	height: 100%;
	padding: 0 15px;
}

/**
 * Dropdowns
 */

.dropdown
{
	text-align: right;
}

.dropdown-title
{
	user-select: none;
	/* font-weight: 600; */
}

.dropdown-title:hover
{
	cursor: pointer;
}

.dropdown-title::after
{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	/* border-bottom: 5px solid transparent; */
	border-top: 6px solid var(--color-white);
	position: relative;
	top: -2px;
	margin-left: 4px;
}

.dropdown-list
{
	list-style-type: none;
	margin: 0;
	padding: 5px 0 5px 0;
	position: relative;
	top: 12px;
	right: 0;
	display: none;
	text-align: left;
	border-radius: 5px;
	box-shadow: 0 0 4px -1px var(--color-dark);
	color: var(--color-black);
	background-color: var(--color-white);
	user-select: none;
}

.dark-theme .dropdown-list
{
	color: var(--color-white);
	background-color: var(--color-graphite);
}

.dropdown[data-selected] > .dropdown-list
{
	display: block;
}

.dropdown-list > li
{
	padding: 0;
	font-size: 1rem;
}

.dropdown-list > li > *
{
	padding: 5px 10px 5px 10px;
	display: block;
}

.dropdown-list > li:hover
{
	background-color: var(--color-light);
}

.dark-theme .dropdown-list > li:hover
{
	background-color: var(--color-stone);
}

.dropdown-list > li a:hover
{
	text-decoration: none;
	cursor: pointer;
}

/**
 * Cards
 */

.card
{
	border-radius: 6px;
	background-color: var(--color-white);
	box-shadow: 0 0 4px -1px var(--color-dark);
	color: var(--color-dark);
}

.dark-theme .card
{
	background-color: var(--color-dark);
	box-shadow: 0 0 4px -1px var(--color-dark);
	color: var(--color-white);
}

.card-title
{
	margin: 0;
	padding: 20px 20px 0 20px;
	font-size: 2rem;
	text-align: center;
}

.card-body
{
	padding: 20px;
}

.card-footer
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 0 20px 20px 20px
}

/**
 * Boards
 */

.boards
{
	/* display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: stretch;
	gap: 15px; */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
	grid-auto-rows: 100px;
	gap: 15px;
}

.boards > *
{
	max-width: 100%;
}

.board-card
{
	flex: 1 1 0;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	border-radius: 6px;
	background-color: var(--color-white);
	/* box-shadow: 0 0 4px -1px var(--color-dark); */
	color: var(--color-dark);
	/* border: 1px solid var(--color-altgray); */
	font-size: 1.1em;
	padding: 10px;
	user-select: none;
	outline-color: var(--color-black);
	outline-style: solid;
	outline-width: 0;
	transition: outline-width 33ms ease-out;
}

.dark-theme .board-card
{
	/* border: 1px solid var(--color-dark); */
	background-color: var(--color-graphite);
	color: var(--color-white);
	outline-color: var(--color-white);
}

.board-card[data-color="Gray"] { background-color: var(--color-board-gray-light); }
.dark-theme .board-card[data-color="Gray"] { background-color: var(--color-board-gray-dark); }

.board-card[data-color="Blue"] { background-color: var(--color-board-blue-light); }
.dark-theme .board-card[data-color="Blue"] { background-color: var(--color-board-blue-dark); }

.board-card[data-color="Red"] { background-color: var(--color-board-red-light); }
.dark-theme .board-card[data-color="Red"] { background-color: var(--color-board-red-dark); }

.board-card[data-color="Purple"] { background-color: var(--color-board-purple-light); }
.dark-theme .board-card[data-color="Purple"] { background-color: var(--color-board-purple-dark); }

.board-card[data-color="Green"] { background-color: var(--color-board-green-light); }
.dark-theme .board-card[data-color="Green"] { background-color: var(--color-board-green-dark); }

.board-card:hover
{
	text-decoration: none;
	outline-width: 2px;
}

.action-card
{
	flex: 1 1 0;
	text-align: center;
	border-radius: 6px;
	background-color: transparent;
	border: 2px dashed var(--color-primary);
	color: var(--color-primary);
	font-size: 1.1em;
	font-weight: 600;
	padding: 8px;
	user-select: none;
	outline-color: transparent;
	outline-style: solid;
	outline-width: 0;
	outline-offset: -2px;
	transition: outline-width 33ms ease-out, outline-color 100ms ease-out;
}

.action-card > span
{
	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
}

.dark-theme .action-card
{
	border: 2px dashed var(--color-white);
	color: var(--color-white);
}

.action-card:hover
{
	text-decoration: none;
	outline-width: 2px;
	outline-color: var(--color-primary);
	box-shadow: 0 0 4px -1px var(--color-primary);
	cursor: pointer;
}

.dark-theme .action-card:hover
{
	outline-color: var(--color-white);
	box-shadow: 0 0 4px -1px var(--color-white);
}

.board-title
{
	display: block;
	font-weight: 800;
	font-size: 1.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba(0, 0, 0, 0.9);
}
.dark-theme .board-title
{
	color: rgba(255, 255, 255, 1);
}

.board-footer
{
	display: block;
	font-weight: 800;
	font-size: 0.9rem;
	color: rgba(0, 0, 0, 0.6);
}
.dark-theme .board-footer
{
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
}

.board-heading
{
	display: inline-block;
	padding: 0 10px 5px 10px;
	border-radius: 6px;
	font-weight: 400;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 1.4em 0 5px 0;
}

.board-name
{
	display: inline-block;
	padding: 0 5px 2px 5px;
	margin: 0;
	border-radius: 6px;
	font-weight: 600;
}

.board-color_Gray .board-heading,
.board-color_Gray .board-name
{
	background-color: var(--color-board-gray-light);
}
.dark-theme.board-color_Gray .board-heading,
.dark-theme.board-color_Gray .board-name
{
	background-color: var(--color-board-gray-dark);
}

.board-color_Blue .board-heading,
.board-color_Blue .board-name
{
	background-color: var(--color-board-blue-light);
}
.dark-theme.board-color_Blue .board-heading,
.dark-theme.board-color_Blue .board-name
{
	background-color: var(--color-board-blue-dark);
}

.board-color_Red .board-heading,
.board-color_Red .board-name
{
	background-color: var(--color-board-red-light);
}
.dark-theme.board-color_Red .board-heading,
.dark-theme.board-color_Red .board-name
{
	background-color: var(--color-board-red-dark);
}

.board-color_Purple .board-heading,
.board-color_Purple .board-name
{
	background-color: var(--color-board-purple-light);
}
.dark-theme.board-color_Purple .board-heading,
.dark-theme.board-color_Purple .board-name
{
	background-color: var(--color-board-purple-dark);
}

.board-color_Green .board-heading,
.board-color_Green .board-name
{
	background-color: var(--color-board-green-light);
}
.dark-theme.board-color_Green .board-heading,
.dark-theme.board-color_Green .board-name
{
	background-color: var(--color-board-green-dark);
}

/**
 * Board Sections
 */

#sections
{
	display: flex;
	flex-flow: column nowrap;
	gap: 20px;
}

.section-title
{
	margin-top: 10px;
	border-radius: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: box-shadow 75ms ease-out, padding 125ms ease-out;
}

.section-title[data-clickable]:hover
{
	cursor: pointer;
	box-shadow: inset 0 0 4px -1px var(--color-dark);
	padding: 0 10px;
}

.section-title[data-clickable]:hover > button
{
	display: unset;
}

.dark-theme .section-title[data-clickable]:hover
{
	box-shadow: inset 0 0 4px -1px var(--color-white);
}

.section-body
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
	gap: 15px;
}

@media only screen and (max-width: 768px) {
	.section-body { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media only screen and (max-width: 480px) {
	.section-body { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.section-item
{
	padding: 15px;
	background-color: var(--color-white);
	border-radius: 6px;
	box-shadow: 0 0 4px -1px var(--color-dark);
}

.dark-theme .section-item
{
	background-color: var(--color-graphite);
	box-shadow: none;
}

.section-list
{
	list-style-type: none;
	margin: 0;
	display: flex;
	flex-flow: column nowrap;
	gap: 5px;
}

.section-list > li
{
	flex-flow: row nowrap;
	gap: 6px;
	max-width: 100%;
}

.section-list > li input[type="text"]
{
	font-size: 1.2rem;
}

.list-item
{
	display: flex;
	align-items: center;
}

.list-item > span
{
	flex: 1 1 auto;
	border-radius: 4px;
	transition: box-shadow 75ms ease-out, padding 125ms ease-out;
}

.list-item > span[data-clickable]:hover
{
	cursor: pointer;
	box-shadow: inset 0 0 4px -1px var(--color-dark);
	padding: 0 5px;
}

.dark-theme .list-item > span[data-clickable]:hover
{
	box-shadow: inset 0 0 4px -1px var(--color-white);
}

.list-item input[type="checkbox"]
{
	flex: 0 0 auto;
	opacity: 1 !important;
}

.item-title
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: none !important;
	margin: 0 !important;
	font-size: 1.1rem;
}

.create-item-input
{
	display: none;
	margin-top: 10px;
	margin-bottom: 4px;
}

.create-item-input > form
{
	display: none;
}

.section-list input[type="checkbox"]:checked + span
{
	text-decoration: line-through;
}

.list-title
{
	margin-bottom: 5px;
	border-radius: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.5rem;
	font-weight: 600;
	transition: box-shadow 75ms ease-out, padding 125ms ease-out;
}

.list-title[data-clickable]:hover
{
	cursor: pointer;
	box-shadow: inset 0 0 4px -1px var(--color-dark);
	padding: 0 7px;
}

.dark-theme .list-title[data-clickable]:hover
{
	box-shadow: inset 0 0 4px -1px var(--color-white);
}

.create-item
{
	flex: 0 1 auto;
	margin-top: 10px;
}

#sections .action-card
{
	appearance: none;
	font-weight: 600;
}

.create-list
{
	min-height: 100px;
}

#create-section
{
	min-height: 150px;
	font-size: 1.2rem;
	margin-top: 10px;
}

/**
 * Form Control
 */

.form-control
{
	font-family: inherit;
	font-size: 1.1rem;
	border: 1px solid var(--color-neutral);
	border-radius: 5px;
	padding: 6px 8px;
	transition: outline-width 0.075s ease-out, box-shadow 0.1s ease-out;
	background-color: var(--color-white);
	color: var(--color-black);
}

.dark-theme .form-control
{
	border-color: var(--color-gray);
	background-color: var(--color-graphite);
	color: var(--color-white);
}

.form-control::placeholder
{
	color: var(--color-neutral);
}

.dark-theme .form-control::placeholder
{
	color: var(--color-altgray);
}

.form-control:hover
{
	border-color: var(--color-black);
}

.dark-theme .form-control:hover
{
	border-color: var(--color-altgray);
}

.form-control:focus, .dark-theme .form-control:focus
{
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 0;
	outline-color: var(--color-primary-glass);
	box-shadow: 0 0 5px 2px var(--color-primary-glass);
	border-color: var(--color-primary);
}

.form-control[type="checkbox"], .form-control[type="radio"]
{
	appearance: none;
	margin: 0;
	padding: 0;
	color: currentColor;
	width: 1.25em;
	height: 1.25em;
}
.form-control[type="checkbox"]
{
	border-radius: 0.25em;
}
.form-control[type="radio"]
{
	border-radius: 100%;
}

.form-control[type="checkbox"]:hover, .form-control[type="radio"]:hover
{
	border-color: var(--color-black);
	cursor: pointer;
}
.dark-theme .form-control[type="checkbox"]:hover:not(.form-control[type="checkbox"]:focus),
.dark-theme .form-control[type="radio"]:hover:not(.form-control[type="radio"]:focus)
{
	border-color: var(--color-altgray);
}

.form-control[type="checkbox"]:focus, .form-control[type="radio"]:focus
{
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 0;
	outline-color: var(--color-primary-glass);
	box-shadow: none;
	border-color: var(--color-primary);
}

.form-control[type="checkbox"]:checked:focus
{
	outline-color: var(--color-positive-glass);
}
.form-control[type="radio"]:checked:focus
{
	outline-color: var(--color-primary-glass);
}

.form-control[type="checkbox"]:checked
{
	border-color: var(--color-positive);
}
.form-control[type="radio"]:checked
{
	border-color: var(--color-primary);
}

.form-control[type="checkbox"]:checked:not(.form-control[type="checkbox"]:focus):hover,
.form-control[type="radio"]:checked:not(.form-control[type="radio"]:focus):hover
{
	border-color: var(--color-black);
}
.dark-theme .form-control[type="checkbox"]:checked:not(.form-control[type="checkbox"]:focus):hover,
.dark-theme .form-control[type="radio"]:checked:not(.form-control[type="radio"]:focus):hover
{
	border-color: var(--color-altgray);
}

.form-control[type="checkbox"]::before, .form-control[type="radio"]::before
{
	content: "";
	display: block;
	position: relative;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transition: transform 50ms ease-out;
	transform: scale(0);
}
.form-control[type="checkbox"]::before
{
	background-color: var(--color-positive);
	clip-path: polygon(74% 13%, 91% 30%, 51% 89%, 13% 68%, 20% 49%, 46% 65%);
}
.form-control[type="radio"]::before
{
	background-color: var(--color-primary);
	clip-path: circle(50% at 50% 50%);
}

.form-control[type="checkbox"]:checked::before
{
	transform: scale(0.9);
}
.form-control[type="radio"]:checked::before
{
	transform: scale(0.66);
}

.form-control[type="checkbox"] + label, .form-control[type="radio"] + label
{
	display: inline-block;
	transform: translateY(-20%);
	font-size: 1.2rem;
	margin: 0 0.5em;
	line-height: 1;
}

.form-control:disabled
{
	opacity: 0.5;
	cursor: default !important;
	border-color: var(--color-neutral) !important;
}

.dark-theme .form-control:disabled
{
	opacity: 0.5;
	cursor: default !important;
	border-color: var(--color-gray) !important;
}

select.form-control:invalid
{
	color: var(--color-neutral);
}
.dark-theme select.form-control:invalid
{
	color: var(--color-altgray);
}

select.form-control [value=""]:disabled:first-of-type
{
	display: none;
}

select.form-control :not(:disabled)
{
	color: var(--color-dark);
}
.dark-theme select.form-control :not(:disabled)
{
	color: var(--color-white);
}

.form-message
{
	display: block;
	font-weight: 600;
	text-align: center;
}

.form-message[data-status="error"]
{
	color: var(--color-negative);
}

.form-message[data-status="success"]
{
	color: var(--color-positive);
}

/**
 * Buttons
 */

.btn
{
	appearance: none;
	display: inline-block;
	padding: 6px;
	margin: 0;
	text-decoration: none;
	text-align: center;
	font-size: 1.15rem;
	border: none;
	border-radius: 6px;
	user-select: none;
	transition: background-color 0.1s ease-out, outline-width 0.075s ease-out, box-shadow 0.1s ease-out;
}

.btn:hover
{
	cursor: pointer;
	text-decoration: none;
}

.btn:focus-visible
{
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 0;
}

.btn a:hover
{
	text-decoration: none;
}

.btn-sm
{
	font-size: 0.75rem;
}

.btn-lg
{
	font-size: 1.6rem;
}

.btn-primary
{
	background-color: var(--color-primary);
	color: var(--color-white);
}
.btn-primary:hover
{
	background-color: var(--color-primary-lighter);
}
.btn-primary:active
{
	background-color: var(--color-primary-darker);
}
.btn-primary:focus-visible
{
	outline-color: var(--color-primary-glass);
	box-shadow: 0 0 5px 2px var(--color-primary-glass);
}

.btn-positive
{
	background-color: var(--color-positive);
	color: var(--color-white);
}
.btn-positive:hover
{
	background-color: var(--color-positive-lighter);
}
.btn-positive:active
{
	background-color: var(--color-positive-darker);
}
.btn-positive:focus-visible
{
	outline-color: var(--color-positive-glass);
	box-shadow: 0 0 5px 2px var(--color-positive-glass);
}

.btn-negative
{
	background-color: var(--color-negative);
	color: var(--color-white);
}
.btn-negative:hover
{
	background-color: var(--color-negative-lighter);
}
.btn-negative:active
{
	background-color: var(--color-negative-darker);
}
.btn-negative:focus-visible
{
	outline-color: var(--color-negative-glass);
	box-shadow: 0 0 5px 2px var(--color-negative-glass);
}

.btn-neutral
{
	background-color: var(--color-neutral);
	color: var(--color-white);
}
.btn-neutral:hover
{
	background-color: var(--color-neutral-lighter);
}
.btn-neutral:active
{
	background-color: var(--color-neutral-darker);
}
.btn-neutral:focus-visible
{
	outline-color: var(--color-neutral-glass);
	box-shadow: 0 0 5px 2px var(--color-neutral-glass);
}

.btn-outline
{
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	filter: color 0.1s ease-out;
}
.btn-outline:hover
{
	background-color: var(--color-white);
	color: var(--color-black);
}
.btn-outline:active
{
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
}

/**
 * Modals
 */

.modal
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.8);
	visibility: hidden;
}

.modal > *
{
	display: inline-block;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 95%;
}

.modal > div
{
	background-color: var(--color-white);
	padding: 10px;
	border-radius: 6px;
	min-width: 200px;
}

.dark-theme .modal > div
{
	background-color: var(--color-stone);
}

.modal-title
{
	font-size: 2rem;
}

.modal-body
{
	margin-top: 10px;
}

.modal-footer
{
	margin-top: 15px;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.modal-footer[data-count="1"]
{
	justify-content: flex-end;
}

.modal-footer > *
{
	flex: 0 1 auto;
}