@import url('https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300');

/* flat-ui ported to bootstrap 5 */

:root {
	--flat-blue: #3498db;
	--flat-indigo: #2980b9;
	--flat-purple: #9b59b6;
	--flat-pink: #8e44ad;
	--flat-red: #e74c3c;
	--flat-orange: #f39c12;
	--flat-yellow: #f1c40f;
	--flat-green: #2ecc71;
	--flat-teal: #1abc9c;
	--flat-primary: #177960;

	--flat-black: #000;
	--flat-white: #fff;
	--flat-gray: #95a5a6;
	--flat-gray-dark: #34495e;
	--flat-gray-100: #ecf0f1;
	--flat-gray-200: #ebedee;
	--flat-gray-300: #e7e9ec;
	--flat-gray-400: #bdc3c7;
	--flat-gray-500: #95a5a6;
	--flat-gray-600: #7f8c8d;
	--flat-gray-700: #34495e;
	--flat-gray-800: #2c3e50;
	--flat-gray-900: #2c3e50;

	--flat-font-sans-serif: 'Lato', helvetica, arial, sans-serif;
	--flat-font-monospace: monaco, menlo, consolas, 'Courier New', monospace;
	--flat-body-font-size: 1.125rem;
	--flat-body-font-weight: 400;
	--flat-body-line-height: 1.6;
	--flat-body-color: var(--flat-gray-dark);
	--flat-body-bg: var(--flat-white);
	--flat-body-color-rgb: 52, 73, 94;
	--flat-body-bg-rgb: 255, 255, 255;
	--flat-border-width: 2px;
	--flat-border-color: var(--flat-gray-300);
	--flat-border-color-translucent: rgb(52 73 94 / 17.5%);
	--flat-border-radius: 6px;
	--flat-border-radius-sm: 3px;
	--flat-border-radius-xl: 7px;
	--flat-border-radius-pill: 30px;
	--flat-link-color: var(--flat-primary);
	--flat-link-hover-color: #0b4f42;
	--flat-code-color: #c7254e;
	--flat-highlight-bg: #fcf8e3;

	--flat-primary-rgb: 23, 121, 96;
	--flat-secondary-rgb: 189, 195, 199;
	--flat-success-rgb: 46, 204, 113;
	--flat-info-rgb: 52, 152, 219;
	--flat-warning-rgb: 241, 196, 15;
	--flat-danger-rgb: 231, 76, 60;
	--flat-light-rgb: 236, 240, 241;
	--flat-dark-rgb: 52, 73, 94;
	--flat-white-rgb: 255, 255, 255;
	--flat-black-rgb: 0, 0, 0;

	--flat-btn-color: var(--flat-white);
	--flat-btn-active-color: rgb(255 255 255 / 75%);
	--flat-btn-disabled-color: rgb(255 255 255 / 75%);
	--flat-btn-primary-bg: var(--flat-primary);
	--flat-btn-primary-hover-bg: #1c9375;
	--flat-btn-primary-focus-shadow-rgb: 28, 147, 117;
	--flat-btn-primary-active-bg: #16a085;

	--flat-btn-info-bg: var(--flat-blue);
	--flat-btn-info-hover-bg: #5dade2;
	--flat-btn-info-focus-shadow-rgb: 93, 173, 226;
	--flat-btn-info-active-bg: #2c81ba;

	--flat-btn-danger-bg: var(--flat-red);
	--flat-btn-danger-hover-bg: #ec7063;
	--flat-btn-danger-focus-shadow-rgb: 236, 112, 99;
	--flat-btn-danger-active-bg: #c44133;

	--flat-btn-success-bg: var(--flat-green);
	--flat-btn-success-hover-bg: #58d68d;
	--flat-btn-success-focus-shadow-rgb: 88, 214, 141;
	--flat-btn-success-active-bg: #27ad60;

	--flat-btn-warning-bg: var(--flat-yellow);
	--flat-btn-warning-hover-bg: #f5d313;
	--flat-btn-warning-focus-shadow-rgb: 245, 211, 19;
	--flat-btn-warning-active-bg: #cda70d;

	--flat-btn-inverse-bg: var(--flat-gray-dark);
	--flat-btn-inverse-hover-bg: #415b76;
	--flat-btn-inverse-focus-shadow-rgb: 65, 91, 118;
	--flat-btn-inverse-active-bg: var(--flat-gray-800);

	--flat-h1-font-weight: 900;
	--flat-h2-font-weight: 700;
	--flat-h3-font-weight: 700;
	--flat-h4-font-weight: 500;
	--flat-h5-font-weight: 500;
	--flat-h6-font-weight: 500;

	/* apply Flat UI to Tailwind 5 */

	--bs-blue: var(--flat-blue);
	--bs-indigo: var(--flat-indigo);
	--bs-purple: var(--flat-purple);
	--bs-pink: var(--flat-pink);
	--bs-red: var(--flat-red);
	--bs-orange: var(--flat-orange);
	--bs-yellow: var(--flat-yellow);
	--bs-green: var(--flat-green);
	--bs-teal: var(--flat-teal);
	--bs-cyan: var(--flat-blue);

	--bs-black: var(--flat-black);
	--bs-white: var(--flat-white);
	--bs-gray: var(--flat-gray);
	--bs-gray-dark: var(--flat-gray-dark);
	--bs-gray-100: var(--flat-gray-100);
	--bs-gray-200: var(--flat-gray-200);
	--bs-gray-300: var(--flat-gray-300);
	--bs-gray-400: var(--flat-gray-400);
	--bs-gray-500: var(--flat-gray-500);
	--bs-gray-600: var(--flat-gray-600);
	--bs-gray-700: var(--flat-gray-700);
	--bs-gray-800: var(--flat-gray-800);
	--bs-gray-900: var(--flat-gray-900);

	--bs-primary: var(--flat-primary);
	--bs-secondary: var(--flat-gray-400);
	--bs-success: var(--flat-green);
	--bs-info: var(--flat-blue);
	--bs-warning: var(--flat-yellow);
	--bs-danger: var(--flat-red);
	--bs-light: var(--flat-gray-100);
	--bs-dark: var(--flat-gray-dark);

	--bs-primary-rgb: var(--flat-primary-rgb);
	--bs-secondary-rgb: var(--flat-secondary-rgb);
	--bs-success-rgb: var(--flat-success-rgb);
	--bs-info-rgb: var(--flat-info-rgb);
	--bs-warning-rgb: var(--flat-warning-rgb);
	--bs-danger-rgb: var(--flat-danger-rgb);
	--bs-light-rgb: var(--flat-light-rgb);
	--bs-dark-rgb: var(--flat-dark-rgb);
	--bs-white-rgb: var(--flat-white-rgb);
	--bs-black-rgb: var(--flat-black-rgb);
	--bs-body-color-rgb: var(--flat-body-color-rgb);
	--bs-body-bg-rgb: var(--flat-body-bg-rgb);

	--bs-font-sans-serif: var(--flat-font-sans-serif);
	--bs-font-monospace: var(--flat-font-monospace);
	--bs-gradient: none;

	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: var(--flat-body-font-size);
	--bs-body-font-weight: var(--flat-body-font-weight);
	--bs-body-line-height: var(--flat-body-line-height);
	--bs-body-color: var(--flat-body-color);
	--bs-body-bg: var(--flat-body-bg);

	--bs-border-width: var(--flat-border-width);
	--bs-border-style: solid;
	--bs-border-color: var(--flat-border-color);
	--bs-border-color-translucent: var(--flat-border-color-translucent);
	--bs-border-radius: var(--flat-border-radius);
	--bs-border-radius-sm: var(--flat-border-radius-sm);
	--bs-border-radius-lg: var(--flat-border-radius);
	--bs-border-radius-xl: var(--flat-border-radius-xl);
	--bs-border-radius-2xl: var(--flat-border-radius-xl);
	--bs-border-radius-pill: var(--flat-border-radius-pill);

	--bs-link-color: var(--flat-link-color);
	--bs-link-hover-color: var(--flat-link-hover-color);
	--bs-code-color: var(--flat-code-color);
	--bs-highlight-bg: var(--flat-highlight-bg);
}

.btn,
.card,
.navbar,
.dropdown-menu {
	box-shadow: none !important;
	border: none;
}

input,
button,
select,
textarea {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
}

a {
	color: var(--bs-link-color);
	font-weight: 700;
	text-decoration: underline;
	transition: 0.25s;
	backface-visibility: hidden;
}

a:hover {
	color: var(--bs-link-hover-color);
	text-decoration: none;
}

.btn {
	color: var(--bs-white);
	border-radius: var(--bs-border-radius);
	text-shadow: none;
	text-decoration: none;
}

.btn-primary {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-primary-bg);
	--bs-btn-border-color: var(--flat-btn-primary-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-primary-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-primary-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-primary-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-primary-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-primary-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-primary-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-primary-bg);
}

.btn-info {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-info-bg);
	--bs-btn-border-color: var(--flat-btn-info-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-info-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-info-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-info-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-info-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-info-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-info-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-info-bg);
}

.btn-danger {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-danger-bg);
	--bs-btn-border-color: var(--flat-btn-danger-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-danger-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-danger-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-danger-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-danger-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-danger-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-danger-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-danger-bg);
}

.btn-success {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-success-bg);
	--bs-btn-border-color: var(--flat-btn-success-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-success-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-success-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-success-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-success-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-success-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-success-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-success-bg);
}

.btn-warning {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-warning-bg);
	--bs-btn-border-color: var(--flat-btn-warning-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-warning-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-warning-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-warning-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-warning-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-warning-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-warning-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-warning-bg);
}

.btn-inverse {
	--bs-btn-color: var(--flat-btn-color);
	--bs-btn-bg: var(--flat-btn-inverse-bg);
	--bs-btn-border-color: var(--flat-btn-inverse-bg);
	--bs-btn-hover-color: var(--flat-btn-color);
	--bs-btn-hover-bg: var(--flat-btn-inverse-hover-bg);
	--bs-btn-hover-border-color: var(--flat-btn-inverse-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--flat-btn-inverse-focus-shadow-rgb);
	--bs-btn-active-color: var(--flat-btn-active-color);
	--bs-btn-active-bg: var(--flat-btn-inverse-active-bg);
	--bs-btn-active-border-color: var(--flat-btn-inverse-active-bg);
	--bs-btn-disabled-color: var(--flat-btn-disabled-color);
	--bs-btn-disabled-bg: var(--flat-btn-inverse-bg);
	--bs-btn-disabled-border-color: var(--flat-btn-inverse-bg);
}

h1 {
	font-weight: var(--flat-h1-font-weight);
}

h2 {
	font-weight: var(--flat-h2-font-weight);
}

h3 {
	font-weight: var(--flat-h3-font-weight);
}

h4 {
	font-weight: var(--flat-h4-font-weight);
}

h5 {
	font-weight: var(--flat-h5-font-weight);
	text-transform: uppercase;
}

h6 {
	font-weight: var(--flat-h6-font-weight);
	text-transform: uppercase;
}

/* Flat UI elements still used */

.demo-headline {
	padding: 4.5rem 0 6.875rem;
	text-align: center;
}

.demo-logo {
	font-size: 5.625rem;
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 6.25rem;
}

/* Bootstrap 3 styles that were removed */

blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid var(--bs-gray-300);
}

h1 small,
h2 small,
h3 small,
h4 small {
	font-weight: normal;
}

code,
a code {
	padding: 0.125rem 0.25rem;
	color: var(--bs-red);
	white-space: nowrap;
	background-color: var(--bs-gray-200);
	border: 1px solid var(--bs-gray-100);
	border-radius: 2px;
	text-decoration: none;
}