:root {
	--base: #e4e9ec;
	--base-dark: #323232;
	--base-darker: #202020;
	--base-darkest: black;
	--base-lightest: white;
	/*
	--primary: #b7dae3;
	--primary-dark: #89b9c6;
	*/
	--primary: #4d5391;
	--primary-light: #afb6ff;
	--primary-dark: #282c50;
	--primary-dark-offset: #30355f;
	--accent: #56e781;
	--accent-dark: #28ac86;
	--alert: #c30909;

	--primary: #075062;
	--primary-light: #8fb8c3;
	--primary-lighter: #cbd9dd;
	--primary-lightest: #e5f9ff;
	--primary-dark: #033e4e;	
	--primary-darker: #023646;
}
@font-face {
	font-family: "Source Sans 3";
	src:
		local("Source Sans 3"),
		url("/static/Source_Sans_3/static/SourceSans3-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Source Sans 3 Bold";
	src:
		local("Source Sans 3 Bold"),
		url("/static/Source_Sans_3/static/SourceSans3-Bold.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}
html {
  scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: "Source Sans 3", sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main {
	position: relative;
	margin-top: 65px;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
nav a,
footer a {
	text-decoration: none;
	color: var(--base-darkest);
}
a {
	color: var(--primary-dark-offset);
    color: var(--primary);
	text-decoration: none;
}
h3 {
	margin: 0;
}
form.user-form {
	max-width: 500px;
}
.form-field {
	margin-bottom: 20px;
	position: relative;
}
.form-field label {
	display: block;
}
.form-field textarea {
	resize: vertical;
}
form input {
	padding: 0 7px;
	width: 100%;
	height: 30px;
	font-size: 1rem;
	box-sizing: border-box;
}
form button,
a.button,
button.dark,
button.light {
	padding: 10px 30px;
	background-color: #151515;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
a.button {
	display: inline-block;
    text-decoration: none;
}
button.light {
	background-color: white;
	color: #151515;
}
form label[required]:after,
form label.required:after {
	content: " *";
	color: var(--alert);
}
select {
	padding: 5px;
}
form .error {
	color: var(--alert);
}
form {
	position: relative;
}
form.failed, .shake {
	animation: shake .1s linear;
	animation-iteration-count: 3;
}
code {
	background: #f2f2f2;
	padding: 3px 5px;
	border-radius: 3px;
}
pre code {
	display: block;
	line-height: 1.1rem;
}
@keyframes shake {
	0% { left: -5px; }
	100% { right: -5px; }
}
.form-field-message.empty {
	opacity: 0;
}
.toast {
	display: flex;
    padding: 10px;
    border-radius: 5px;
}
.toast-message {
	flex-grow: 1;
}
.toast-close {
	background: none;
	border: none;
}
.toast.success {
	background-color: #b5f8c3;
}
.toast.info {
	background-color: #b1e7f5;
}
.toast.warning {
	background-color: #f9e7c6;
}
.toast.error {
	background-color: #ffb7b8;
}
.checkout #toaster {
	margin-top: 20px;
}
.checkout .plugin .content h3 {
	font-weight: 100;
}
.dashboard-item a {
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
	white-space: nowrap;
}
.dashboard-item a.active {
	background: #e9e9e9;
    border-radius: 5px;
}