/*
|
|
| Color values
|
|
*/
:root{

	/* Colors */
	--color-grey-50: 				#f9fafb;
	--color-grey-100: 				#f8f9fa;
	--color-grey-200: 				#e9ecef;
	--color-grey-300: 				#dee2e6;
	--color-grey-400: 				#ced4da;
	--color-grey-500: 				#adb5bd;
	--color-grey-600: 				#6c757d;
	--color-grey-700: 				#495057;
	--color-grey-800: 				#343a40;
	--color-grey-900: 				#212529;


	--color-red-50: 				#fef2f2;
	--color-red-100: 				#fee2e2;
	--color-red-200: 				#fecaca;
	--color-red-300: 				#fca5a5;
	--color-red-400: 				#f87171;
	--color-red-500: 				#ef4444;
	--color-red-600: 				#dc2626;
	--color-red-700: 				#b91c1c;
	--color-red-800: 				#991b1b;
	--color-red-900: 				#7f1d1d;


	--color-orange-50: 				#fff7ed;
	--color-orange-100: 			#ffedd5;
	--color-orange-200: 			#fed7aa;
	--color-orange-300: 			#fdba74;
	--color-orange-400: 			#fb923c;
	--color-orange-500: 			#f97316;
	--color-orange-600: 			#ea580c;
	--color-orange-700: 			#c2410c;
	--color-orange-800: 			#9a3412;
	--color-orange-900: 			#7c2d12;


	--color-yellow-50: 				#fefce8;
	--color-yellow-100: 			#fef9c3;
	--color-yellow-200: 			#fef08a;
	--color-yellow-300: 			#fde047;
	--color-yellow-400: 			#facc15;
	--color-yellow-500: 			#eab308;
	--color-yellow-600: 			#ca8a04;
	--color-yellow-700: 			#a16207;
	--color-yellow-800: 			#854d0e;
	--color-yellow-900: 			#713f12;


	--color-green-50: 				#f0fdf4;
	--color-green-100: 				#dcfce7;
	--color-green-200: 				#bbf7d0;
	--color-green-300: 				#86efac;
	--color-green-400: 				#4ade80;
	--color-green-500: 				#22c55e;
	--color-green-600: 				#16a34a;
	--color-green-700: 				#15803d;
	--color-green-800: 				#166534;
	--color-green-900: 				#14532d;


	--color-teal-50: 				#f0fdfa;
	--color-teal-100: 				#ccfbf1;
	--color-teal-200: 				#99f6e4;
	--color-teal-300: 				#5eead4;
	--color-teal-400: 				#2dd4bf;
	--color-teal-500: 				#14b8a6;
	--color-teal-600: 				#0d9488;
	--color-teal-700: 				#0f766e;
	--color-teal-800: 				#115e59;
	--color-teal-900: 				#134e4a;


	--color-blue-50: 				#eff6ff;
	--color-blue-100: 				#dbeafe;
	--color-blue-200: 				#bfdbfe;
	--color-blue-300: 				#93c5fd;
	--color-blue-400: 				#60a5fa;
	--color-blue-500: 				#3b82f6;
	--color-blue-600: 				#2563eb;
	--color-blue-700: 				#1d4ed8;
	--color-blue-800: 				#1e40af;
	--color-blue-900: 				#1e3a8a;


	--color-indigo-50: 				#eef2ff;
	--color-indigo-100: 			#e0e7ff;
	--color-indigo-200: 			#c7d2fe;
	--color-indigo-300: 			#a5b4fc;
	--color-indigo-400: 			#818cf8;
	--color-indigo-500: 			#6366f1;
	--color-indigo-600: 			#4f46e5;
	--color-indigo-700: 			#4338ca;
	--color-indigo-800: 			#3730a3;
	--color-indigo-900: 			#312e81;


	--color-purple-50: 				#faf5ff;
	--color-purple-100: 			#f3e8ff;
	--color-purple-200: 			#e9d5ff;
	--color-purple-300: 			#d8b4fe;
	--color-purple-400: 			#c084fc;
	--color-purple-500: 			#a855f7;
	--color-purple-600: 			#9333ea;
	--color-purple-700: 			#7e22ce;
	--color-purple-800: 			#6b21a8;
	--color-purple-900: 			#581c87;


	--color-pink-50: 				#fdf2f8;
	--color-pink-100: 				#fce7f3;
	--color-pink-200: 				#fbcfe8;
	--color-pink-300: 				#f9a8d4;
	--color-pink-400: 				#f472b6;
	--color-pink-500: 				#ec4899;
	--color-pink-600: 				#db2777;
	--color-pink-700: 				#be185d;
	--color-pink-800: 				#9d174d;
	--color-pink-900: 				#831843;


	--color-rose-50: 				#fff1f2;
	--color-rose-100: 				#ffe4e6;
	--color-rose-200: 				#fecdd3;
	--color-rose-300: 				#fda4af;
	--color-rose-400: 				#fb7185;
	--color-rose-500: 				#f43f5e;
	--color-rose-600: 				#e11d48;
	--color-rose-700: 				#be123c;
	--color-rose-800: 				#9f1239;
	--color-rose-900: 				#881337;


	/* Brand */
	--color-brand: 					#3D4961;
	
	--color-white: 					#ffffff;
	--color-black: 					#000000;


	/* Primary */
	--color-primary:              	#1A6AE2;
	--color-primary-dark:          	#1255B9;
	--color-primary-light:         	#4885E0;

	--color-secondary:            	#F1B823;
	--color-secondary-dark:        	#E4A503;
	--color-secondary-light:       	#FFCC49;


	/* Other */
	--color-success: 				#4DD192;
	--color-danger: 				#D16666;
	--color-warning: 				#F3CF73;
	--color-info:	 				var(--color-grey-300);


	/* Text */
	--color-primary-text:          	var(--color-grey-900);
	--color-secondary-text:        	var(--color-grey-600);
	--color-text-icons:            	#ffffff;


	/* Borders */
	--color-border:              	var(--color-grey-400);
	--color-border-light:          	var(--color-grey-300);

	--color-divider:              	var(--color-grey-200);
	--color-divider-light:           var(--color-grey-100);
	
}

/*
|
|
| Size values
|
|
*/
:root{

	--screen-size-xs: 		0px;
	--screen-size-sm: 		576px;
	--screen-size-md: 		768px;
	--screen-size-lg: 		992px;
	--screen-size-xl: 		1200px;
	--screen-size-xxl: 		1400px;
	
}

/*
|
|
| Spacing values
|
|
*/
:root{

	--spacing-xxxs: 	2px;
	--spacing-xxs: 		4px;
	--spacing-xs: 		8px;
	--spacing-sm: 		12px;
	--spacing-md: 		16px;
	--spacing-lg: 		20px;
	--spacing-xl: 		28px;
	--spacing-xxl: 		36px;
	--spacing-xxxl:	 	48px;
	--spacing-xxxxl: 	72px;
	
}

/*
|
|
| Style values
|
|
*/
:root{

	/* Drop shadows */
	--style-box-shadow-1: 			rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
	--style-box-shadow-2: 			rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	--style-box-shadow-3:			rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	--style-box-shadow-4:			rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	--style-box-shadow-5:			rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	
}

/*
|
|
| Transition values
|
|
*/
:root{

	--transition-x-slow: 	1000ms;
	--transition-slow: 		500ms;
	--transition-medium: 	250ms;
	--transition-fast: 		150ms;
	--transition-x-fast: 	50ms;
	
}

/*
|
|
| Type values
|
|
*/
:root{

	--font-serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font-sans-serif: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

	--heading-size-xl:	48px;
	--heading-size-lg:	40px;
	--heading-size-md:	32px;
	--heading-size-sm:	24px;
	--heading-size-xs:	20px;
	--heading-size-xxs:	16px;


	--body-size-xl: 	24px;
	--body-size-lg: 	18px;
	--body-size-md: 	16px;
	--body-size-sm: 	14px;
	--body-size-xs: 	12px;
	--body-size-xxs: 	10px;

}

/*!
 * Bootstrap Icons (https://icons.getbootstrap.com/)
 * Copyright 2019-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE.md)
 */

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2?1fa40e8900654d2863d011707b9fb6f2") format("woff2"),
       url("../fonts/bootstrap-icons.woff?1fa40e8900654d2863d011707b9fb6f2") format("woff");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-123::before { content: "\f67f"; }
.bi-alarm-fill::before { content: "\f101"; }
.bi-alarm::before { content: "\f102"; }
.bi-align-bottom::before { content: "\f103"; }
.bi-align-center::before { content: "\f104"; }
.bi-align-end::before { content: "\f105"; }
.bi-align-middle::before { content: "\f106"; }
.bi-align-start::before { content: "\f107"; }
.bi-align-top::before { content: "\f108"; }
.bi-alt::before { content: "\f109"; }
.bi-app-indicator::before { content: "\f10a"; }
.bi-app::before { content: "\f10b"; }
.bi-archive-fill::before { content: "\f10c"; }
.bi-archive::before { content: "\f10d"; }
.bi-arrow-90deg-down::before { content: "\f10e"; }
.bi-arrow-90deg-left::before { content: "\f10f"; }
.bi-arrow-90deg-right::before { content: "\f110"; }
.bi-arrow-90deg-up::before { content: "\f111"; }
.bi-arrow-bar-down::before { content: "\f112"; }
.bi-arrow-bar-left::before { content: "\f113"; }
.bi-arrow-bar-right::before { content: "\f114"; }
.bi-arrow-bar-up::before { content: "\f115"; }
.bi-arrow-clockwise::before { content: "\f116"; }
.bi-arrow-counterclockwise::before { content: "\f117"; }
.bi-arrow-down-circle-fill::before { content: "\f118"; }
.bi-arrow-down-circle::before { content: "\f119"; }
.bi-arrow-down-left-circle-fill::before { content: "\f11a"; }
.bi-arrow-down-left-circle::before { content: "\f11b"; }
.bi-arrow-down-left-square-fill::before { content: "\f11c"; }
.bi-arrow-down-left-square::before { content: "\f11d"; }
.bi-arrow-down-left::before { content: "\f11e"; }
.bi-arrow-down-right-circle-fill::before { content: "\f11f"; }
.bi-arrow-down-right-circle::before { content: "\f120"; }
.bi-arrow-down-right-square-fill::before { content: "\f121"; }
.bi-arrow-down-right-square::before { content: "\f122"; }
.bi-arrow-down-right::before { content: "\f123"; }
.bi-arrow-down-short::before { content: "\f124"; }
.bi-arrow-down-square-fill::before { content: "\f125"; }
.bi-arrow-down-square::before { content: "\f126"; }
.bi-arrow-down-up::before { content: "\f127"; }
.bi-arrow-down::before { content: "\f128"; }
.bi-arrow-left-circle-fill::before { content: "\f129"; }
.bi-arrow-left-circle::before { content: "\f12a"; }
.bi-arrow-left-right::before { content: "\f12b"; }
.bi-arrow-left-short::before { content: "\f12c"; }
.bi-arrow-left-square-fill::before { content: "\f12d"; }
.bi-arrow-left-square::before { content: "\f12e"; }
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-arrow-return-left::before { content: "\f131"; }
.bi-arrow-return-right::before { content: "\f132"; }
.bi-arrow-right-circle-fill::before { content: "\f133"; }
.bi-arrow-right-circle::before { content: "\f134"; }
.bi-arrow-right-short::before { content: "\f135"; }
.bi-arrow-right-square-fill::before { content: "\f136"; }
.bi-arrow-right-square::before { content: "\f137"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-arrow-up-circle-fill::before { content: "\f139"; }
.bi-arrow-up-circle::before { content: "\f13a"; }
.bi-arrow-up-left-circle-fill::before { content: "\f13b"; }
.bi-arrow-up-left-circle::before { content: "\f13c"; }
.bi-arrow-up-left-square-fill::before { content: "\f13d"; }
.bi-arrow-up-left-square::before { content: "\f13e"; }
.bi-arrow-up-left::before { content: "\f13f"; }
.bi-arrow-up-right-circle-fill::before { content: "\f140"; }
.bi-arrow-up-right-circle::before { content: "\f141"; }
.bi-arrow-up-right-square-fill::before { content: "\f142"; }
.bi-arrow-up-right-square::before { content: "\f143"; }
.bi-arrow-up-right::before { content: "\f144"; }
.bi-arrow-up-short::before { content: "\f145"; }
.bi-arrow-up-square-fill::before { content: "\f146"; }
.bi-arrow-up-square::before { content: "\f147"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-arrows-angle-contract::before { content: "\f149"; }
.bi-arrows-angle-expand::before { content: "\f14a"; }
.bi-arrows-collapse::before { content: "\f14b"; }
.bi-arrows-expand::before { content: "\f14c"; }
.bi-arrows-fullscreen::before { content: "\f14d"; }
.bi-arrows-move::before { content: "\f14e"; }
.bi-aspect-ratio-fill::before { content: "\f14f"; }
.bi-aspect-ratio::before { content: "\f150"; }
.bi-asterisk::before { content: "\f151"; }
.bi-at::before { content: "\f152"; }
.bi-award-fill::before { content: "\f153"; }
.bi-award::before { content: "\f154"; }
.bi-back::before { content: "\f155"; }
.bi-backspace-fill::before { content: "\f156"; }
.bi-backspace-reverse-fill::before { content: "\f157"; }
.bi-backspace-reverse::before { content: "\f158"; }
.bi-backspace::before { content: "\f159"; }
.bi-badge-3d-fill::before { content: "\f15a"; }
.bi-badge-3d::before { content: "\f15b"; }
.bi-badge-4k-fill::before { content: "\f15c"; }
.bi-badge-4k::before { content: "\f15d"; }
.bi-badge-8k-fill::before { content: "\f15e"; }
.bi-badge-8k::before { content: "\f15f"; }
.bi-badge-ad-fill::before { content: "\f160"; }
.bi-badge-ad::before { content: "\f161"; }
.bi-badge-ar-fill::before { content: "\f162"; }
.bi-badge-ar::before { content: "\f163"; }
.bi-badge-cc-fill::before { content: "\f164"; }
.bi-badge-cc::before { content: "\f165"; }
.bi-badge-hd-fill::before { content: "\f166"; }
.bi-badge-hd::before { content: "\f167"; }
.bi-badge-tm-fill::before { content: "\f168"; }
.bi-badge-tm::before { content: "\f169"; }
.bi-badge-vo-fill::before { content: "\f16a"; }
.bi-badge-vo::before { content: "\f16b"; }
.bi-badge-vr-fill::before { content: "\f16c"; }
.bi-badge-vr::before { content: "\f16d"; }
.bi-badge-wc-fill::before { content: "\f16e"; }
.bi-badge-wc::before { content: "\f16f"; }
.bi-bag-check-fill::before { content: "\f170"; }
.bi-bag-check::before { content: "\f171"; }
.bi-bag-dash-fill::before { content: "\f172"; }
.bi-bag-dash::before { content: "\f173"; }
.bi-bag-fill::before { content: "\f174"; }
.bi-bag-plus-fill::before { content: "\f175"; }
.bi-bag-plus::before { content: "\f176"; }
.bi-bag-x-fill::before { content: "\f177"; }
.bi-bag-x::before { content: "\f178"; }
.bi-bag::before { content: "\f179"; }
.bi-bar-chart-fill::before { content: "\f17a"; }
.bi-bar-chart-line-fill::before { content: "\f17b"; }
.bi-bar-chart-line::before { content: "\f17c"; }
.bi-bar-chart-steps::before { content: "\f17d"; }
.bi-bar-chart::before { content: "\f17e"; }
.bi-basket-fill::before { content: "\f17f"; }
.bi-basket::before { content: "\f180"; }
.bi-basket2-fill::before { content: "\f181"; }
.bi-basket2::before { content: "\f182"; }
.bi-basket3-fill::before { content: "\f183"; }
.bi-basket3::before { content: "\f184"; }
.bi-battery-charging::before { content: "\f185"; }
.bi-battery-full::before { content: "\f186"; }
.bi-battery-half::before { content: "\f187"; }
.bi-battery::before { content: "\f188"; }
.bi-bell-fill::before { content: "\f189"; }
.bi-bell::before { content: "\f18a"; }
.bi-bezier::before { content: "\f18b"; }
.bi-bezier2::before { content: "\f18c"; }
.bi-bicycle::before { content: "\f18d"; }
.bi-binoculars-fill::before { content: "\f18e"; }
.bi-binoculars::before { content: "\f18f"; }
.bi-blockquote-left::before { content: "\f190"; }
.bi-blockquote-right::before { content: "\f191"; }
.bi-book-fill::before { content: "\f192"; }
.bi-book-half::before { content: "\f193"; }
.bi-book::before { content: "\f194"; }
.bi-bookmark-check-fill::before { content: "\f195"; }
.bi-bookmark-check::before { content: "\f196"; }
.bi-bookmark-dash-fill::before { content: "\f197"; }
.bi-bookmark-dash::before { content: "\f198"; }
.bi-bookmark-fill::before { content: "\f199"; }
.bi-bookmark-heart-fill::before { content: "\f19a"; }
.bi-bookmark-heart::before { content: "\f19b"; }
.bi-bookmark-plus-fill::before { content: "\f19c"; }
.bi-bookmark-plus::before { content: "\f19d"; }
.bi-bookmark-star-fill::before { content: "\f19e"; }
.bi-bookmark-star::before { content: "\f19f"; }
.bi-bookmark-x-fill::before { content: "\f1a0"; }
.bi-bookmark-x::before { content: "\f1a1"; }
.bi-bookmark::before { content: "\f1a2"; }
.bi-bookmarks-fill::before { content: "\f1a3"; }
.bi-bookmarks::before { content: "\f1a4"; }
.bi-bookshelf::before { content: "\f1a5"; }
.bi-bootstrap-fill::before { content: "\f1a6"; }
.bi-bootstrap-reboot::before { content: "\f1a7"; }
.bi-bootstrap::before { content: "\f1a8"; }
.bi-border-all::before { content: "\f1a9"; }
.bi-border-bottom::before { content: "\f1aa"; }
.bi-border-center::before { content: "\f1ab"; }
.bi-border-inner::before { content: "\f1ac"; }
.bi-border-left::before { content: "\f1ad"; }
.bi-border-middle::before { content: "\f1ae"; }
.bi-border-outer::before { content: "\f1af"; }
.bi-border-right::before { content: "\f1b0"; }
.bi-border-style::before { content: "\f1b1"; }
.bi-border-top::before { content: "\f1b2"; }
.bi-border-width::before { content: "\f1b3"; }
.bi-border::before { content: "\f1b4"; }
.bi-bounding-box-circles::before { content: "\f1b5"; }
.bi-bounding-box::before { content: "\f1b6"; }
.bi-box-arrow-down-left::before { content: "\f1b7"; }
.bi-box-arrow-down-right::before { content: "\f1b8"; }
.bi-box-arrow-down::before { content: "\f1b9"; }
.bi-box-arrow-in-down-left::before { content: "\f1ba"; }
.bi-box-arrow-in-down-right::before { content: "\f1bb"; }
.bi-box-arrow-in-down::before { content: "\f1bc"; }
.bi-box-arrow-in-left::before { content: "\f1bd"; }
.bi-box-arrow-in-right::before { content: "\f1be"; }
.bi-box-arrow-in-up-left::before { content: "\f1bf"; }
.bi-box-arrow-in-up-right::before { content: "\f1c0"; }
.bi-box-arrow-in-up::before { content: "\f1c1"; }
.bi-box-arrow-left::before { content: "\f1c2"; }
.bi-box-arrow-right::before { content: "\f1c3"; }
.bi-box-arrow-up-left::before { content: "\f1c4"; }
.bi-box-arrow-up-right::before { content: "\f1c5"; }
.bi-box-arrow-up::before { content: "\f1c6"; }
.bi-box-seam::before { content: "\f1c7"; }
.bi-box::before { content: "\f1c8"; }
.bi-braces::before { content: "\f1c9"; }
.bi-bricks::before { content: "\f1ca"; }
.bi-briefcase-fill::before { content: "\f1cb"; }
.bi-briefcase::before { content: "\f1cc"; }
.bi-brightness-alt-high-fill::before { content: "\f1cd"; }
.bi-brightness-alt-high::before { content: "\f1ce"; }
.bi-brightness-alt-low-fill::before { content: "\f1cf"; }
.bi-brightness-alt-low::before { content: "\f1d0"; }
.bi-brightness-high-fill::before { content: "\f1d1"; }
.bi-brightness-high::before { content: "\f1d2"; }
.bi-brightness-low-fill::before { content: "\f1d3"; }
.bi-brightness-low::before { content: "\f1d4"; }
.bi-broadcast-pin::before { content: "\f1d5"; }
.bi-broadcast::before { content: "\f1d6"; }
.bi-brush-fill::before { content: "\f1d7"; }
.bi-brush::before { content: "\f1d8"; }
.bi-bucket-fill::before { content: "\f1d9"; }
.bi-bucket::before { content: "\f1da"; }
.bi-bug-fill::before { content: "\f1db"; }
.bi-bug::before { content: "\f1dc"; }
.bi-building::before { content: "\f1dd"; }
.bi-bullseye::before { content: "\f1de"; }
.bi-calculator-fill::before { content: "\f1df"; }
.bi-calculator::before { content: "\f1e0"; }
.bi-calendar-check-fill::before { content: "\f1e1"; }
.bi-calendar-check::before { content: "\f1e2"; }
.bi-calendar-date-fill::before { content: "\f1e3"; }
.bi-calendar-date::before { content: "\f1e4"; }
.bi-calendar-day-fill::before { content: "\f1e5"; }
.bi-calendar-day::before { content: "\f1e6"; }
.bi-calendar-event-fill::before { content: "\f1e7"; }
.bi-calendar-event::before { content: "\f1e8"; }
.bi-calendar-fill::before { content: "\f1e9"; }
.bi-calendar-minus-fill::before { content: "\f1ea"; }
.bi-calendar-minus::before { content: "\f1eb"; }
.bi-calendar-month-fill::before { content: "\f1ec"; }
.bi-calendar-month::before { content: "\f1ed"; }
.bi-calendar-plus-fill::before { content: "\f1ee"; }
.bi-calendar-plus::before { content: "\f1ef"; }
.bi-calendar-range-fill::before { content: "\f1f0"; }
.bi-calendar-range::before { content: "\f1f1"; }
.bi-calendar-week-fill::before { content: "\f1f2"; }
.bi-calendar-week::before { content: "\f1f3"; }
.bi-calendar-x-fill::before { content: "\f1f4"; }
.bi-calendar-x::before { content: "\f1f5"; }
.bi-calendar::before { content: "\f1f6"; }
.bi-calendar2-check-fill::before { content: "\f1f7"; }
.bi-calendar2-check::before { content: "\f1f8"; }
.bi-calendar2-date-fill::before { content: "\f1f9"; }
.bi-calendar2-date::before { content: "\f1fa"; }
.bi-calendar2-day-fill::before { content: "\f1fb"; }
.bi-calendar2-day::before { content: "\f1fc"; }
.bi-calendar2-event-fill::before { content: "\f1fd"; }
.bi-calendar2-event::before { content: "\f1fe"; }
.bi-calendar2-fill::before { content: "\f1ff"; }
.bi-calendar2-minus-fill::before { content: "\f200"; }
.bi-calendar2-minus::before { content: "\f201"; }
.bi-calendar2-month-fill::before { content: "\f202"; }
.bi-calendar2-month::before { content: "\f203"; }
.bi-calendar2-plus-fill::before { content: "\f204"; }
.bi-calendar2-plus::before { content: "\f205"; }
.bi-calendar2-range-fill::before { content: "\f206"; }
.bi-calendar2-range::before { content: "\f207"; }
.bi-calendar2-week-fill::before { content: "\f208"; }
.bi-calendar2-week::before { content: "\f209"; }
.bi-calendar2-x-fill::before { content: "\f20a"; }
.bi-calendar2-x::before { content: "\f20b"; }
.bi-calendar2::before { content: "\f20c"; }
.bi-calendar3-event-fill::before { content: "\f20d"; }
.bi-calendar3-event::before { content: "\f20e"; }
.bi-calendar3-fill::before { content: "\f20f"; }
.bi-calendar3-range-fill::before { content: "\f210"; }
.bi-calendar3-range::before { content: "\f211"; }
.bi-calendar3-week-fill::before { content: "\f212"; }
.bi-calendar3-week::before { content: "\f213"; }
.bi-calendar3::before { content: "\f214"; }
.bi-calendar4-event::before { content: "\f215"; }
.bi-calendar4-range::before { content: "\f216"; }
.bi-calendar4-week::before { content: "\f217"; }
.bi-calendar4::before { content: "\f218"; }
.bi-camera-fill::before { content: "\f219"; }
.bi-camera-reels-fill::before { content: "\f21a"; }
.bi-camera-reels::before { content: "\f21b"; }
.bi-camera-video-fill::before { content: "\f21c"; }
.bi-camera-video-off-fill::before { content: "\f21d"; }
.bi-camera-video-off::before { content: "\f21e"; }
.bi-camera-video::before { content: "\f21f"; }
.bi-camera::before { content: "\f220"; }
.bi-camera2::before { content: "\f221"; }
.bi-capslock-fill::before { content: "\f222"; }
.bi-capslock::before { content: "\f223"; }
.bi-card-checklist::before { content: "\f224"; }
.bi-card-heading::before { content: "\f225"; }
.bi-card-image::before { content: "\f226"; }
.bi-card-list::before { content: "\f227"; }
.bi-card-text::before { content: "\f228"; }
.bi-caret-down-fill::before { content: "\f229"; }
.bi-caret-down-square-fill::before { content: "\f22a"; }
.bi-caret-down-square::before { content: "\f22b"; }
.bi-caret-down::before { content: "\f22c"; }
.bi-caret-left-fill::before { content: "\f22d"; }
.bi-caret-left-square-fill::before { content: "\f22e"; }
.bi-caret-left-square::before { content: "\f22f"; }
.bi-caret-left::before { content: "\f230"; }
.bi-caret-right-fill::before { content: "\f231"; }
.bi-caret-right-square-fill::before { content: "\f232"; }
.bi-caret-right-square::before { content: "\f233"; }
.bi-caret-right::before { content: "\f234"; }
.bi-caret-up-fill::before { content: "\f235"; }
.bi-caret-up-square-fill::before { content: "\f236"; }
.bi-caret-up-square::before { content: "\f237"; }
.bi-caret-up::before { content: "\f238"; }
.bi-cart-check-fill::before { content: "\f239"; }
.bi-cart-check::before { content: "\f23a"; }
.bi-cart-dash-fill::before { content: "\f23b"; }
.bi-cart-dash::before { content: "\f23c"; }
.bi-cart-fill::before { content: "\f23d"; }
.bi-cart-plus-fill::before { content: "\f23e"; }
.bi-cart-plus::before { content: "\f23f"; }
.bi-cart-x-fill::before { content: "\f240"; }
.bi-cart-x::before { content: "\f241"; }
.bi-cart::before { content: "\f242"; }
.bi-cart2::before { content: "\f243"; }
.bi-cart3::before { content: "\f244"; }
.bi-cart4::before { content: "\f245"; }
.bi-cash-stack::before { content: "\f246"; }
.bi-cash::before { content: "\f247"; }
.bi-cast::before { content: "\f248"; }
.bi-chat-dots-fill::before { content: "\f249"; }
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat-fill::before { content: "\f24b"; }
.bi-chat-left-dots-fill::before { content: "\f24c"; }
.bi-chat-left-dots::before { content: "\f24d"; }
.bi-chat-left-fill::before { content: "\f24e"; }
.bi-chat-left-quote-fill::before { content: "\f24f"; }
.bi-chat-left-quote::before { content: "\f250"; }
.bi-chat-left-text-fill::before { content: "\f251"; }
.bi-chat-left-text::before { content: "\f252"; }
.bi-chat-left::before { content: "\f253"; }
.bi-chat-quote-fill::before { content: "\f254"; }
.bi-chat-quote::before { content: "\f255"; }
.bi-chat-right-dots-fill::before { content: "\f256"; }
.bi-chat-right-dots::before { content: "\f257"; }
.bi-chat-right-fill::before { content: "\f258"; }
.bi-chat-right-quote-fill::before { content: "\f259"; }
.bi-chat-right-quote::before { content: "\f25a"; }
.bi-chat-right-text-fill::before { content: "\f25b"; }
.bi-chat-right-text::before { content: "\f25c"; }
.bi-chat-right::before { content: "\f25d"; }
.bi-chat-square-dots-fill::before { content: "\f25e"; }
.bi-chat-square-dots::before { content: "\f25f"; }
.bi-chat-square-fill::before { content: "\f260"; }
.bi-chat-square-quote-fill::before { content: "\f261"; }
.bi-chat-square-quote::before { content: "\f262"; }
.bi-chat-square-text-fill::before { content: "\f263"; }
.bi-chat-square-text::before { content: "\f264"; }
.bi-chat-square::before { content: "\f265"; }
.bi-chat-text-fill::before { content: "\f266"; }
.bi-chat-text::before { content: "\f267"; }
.bi-chat::before { content: "\f268"; }
.bi-check-all::before { content: "\f269"; }
.bi-check-circle-fill::before { content: "\f26a"; }
.bi-check-circle::before { content: "\f26b"; }
.bi-check-square-fill::before { content: "\f26c"; }
.bi-check-square::before { content: "\f26d"; }
.bi-check::before { content: "\f26e"; }
.bi-check2-all::before { content: "\f26f"; }
.bi-check2-circle::before { content: "\f270"; }
.bi-check2-square::before { content: "\f271"; }
.bi-check2::before { content: "\f272"; }
.bi-chevron-bar-contract::before { content: "\f273"; }
.bi-chevron-bar-down::before { content: "\f274"; }
.bi-chevron-bar-expand::before { content: "\f275"; }
.bi-chevron-bar-left::before { content: "\f276"; }
.bi-chevron-bar-right::before { content: "\f277"; }
.bi-chevron-bar-up::before { content: "\f278"; }
.bi-chevron-compact-down::before { content: "\f279"; }
.bi-chevron-compact-left::before { content: "\f27a"; }
.bi-chevron-compact-right::before { content: "\f27b"; }
.bi-chevron-compact-up::before { content: "\f27c"; }
.bi-chevron-contract::before { content: "\f27d"; }
.bi-chevron-double-down::before { content: "\f27e"; }
.bi-chevron-double-left::before { content: "\f27f"; }
.bi-chevron-double-right::before { content: "\f280"; }
.bi-chevron-double-up::before { content: "\f281"; }
.bi-chevron-down::before { content: "\f282"; }
.bi-chevron-expand::before { content: "\f283"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-chevron-up::before { content: "\f286"; }
.bi-circle-fill::before { content: "\f287"; }
.bi-circle-half::before { content: "\f288"; }
.bi-circle-square::before { content: "\f289"; }
.bi-circle::before { content: "\f28a"; }
.bi-clipboard-check::before { content: "\f28b"; }
.bi-clipboard-data::before { content: "\f28c"; }
.bi-clipboard-minus::before { content: "\f28d"; }
.bi-clipboard-plus::before { content: "\f28e"; }
.bi-clipboard-x::before { content: "\f28f"; }
.bi-clipboard::before { content: "\f290"; }
.bi-clock-fill::before { content: "\f291"; }
.bi-clock-history::before { content: "\f292"; }
.bi-clock::before { content: "\f293"; }
.bi-cloud-arrow-down-fill::before { content: "\f294"; }
.bi-cloud-arrow-down::before { content: "\f295"; }
.bi-cloud-arrow-up-fill::before { content: "\f296"; }
.bi-cloud-arrow-up::before { content: "\f297"; }
.bi-cloud-check-fill::before { content: "\f298"; }
.bi-cloud-check::before { content: "\f299"; }
.bi-cloud-download-fill::before { content: "\f29a"; }
.bi-cloud-download::before { content: "\f29b"; }
.bi-cloud-drizzle-fill::before { content: "\f29c"; }
.bi-cloud-drizzle::before { content: "\f29d"; }
.bi-cloud-fill::before { content: "\f29e"; }
.bi-cloud-fog-fill::before { content: "\f29f"; }
.bi-cloud-fog::before { content: "\f2a0"; }
.bi-cloud-fog2-fill::before { content: "\f2a1"; }
.bi-cloud-fog2::before { content: "\f2a2"; }
.bi-cloud-hail-fill::before { content: "\f2a3"; }
.bi-cloud-hail::before { content: "\f2a4"; }
.bi-cloud-haze-fill::before { content: "\f2a6"; }
.bi-cloud-haze::before { content: "\f2a7"; }
.bi-cloud-haze2-fill::before { content: "\f2a8"; }
.bi-cloud-lightning-fill::before { content: "\f2a9"; }
.bi-cloud-lightning-rain-fill::before { content: "\f2aa"; }
.bi-cloud-lightning-rain::before { content: "\f2ab"; }
.bi-cloud-lightning::before { content: "\f2ac"; }
.bi-cloud-minus-fill::before { content: "\f2ad"; }
.bi-cloud-minus::before { content: "\f2ae"; }
.bi-cloud-moon-fill::before { content: "\f2af"; }
.bi-cloud-moon::before { content: "\f2b0"; }
.bi-cloud-plus-fill::before { content: "\f2b1"; }
.bi-cloud-plus::before { content: "\f2b2"; }
.bi-cloud-rain-fill::before { content: "\f2b3"; }
.bi-cloud-rain-heavy-fill::before { content: "\f2b4"; }
.bi-cloud-rain-heavy::before { content: "\f2b5"; }
.bi-cloud-rain::before { content: "\f2b6"; }
.bi-cloud-slash-fill::before { content: "\f2b7"; }
.bi-cloud-slash::before { content: "\f2b8"; }
.bi-cloud-sleet-fill::before { content: "\f2b9"; }
.bi-cloud-sleet::before { content: "\f2ba"; }
.bi-cloud-snow-fill::before { content: "\f2bb"; }
.bi-cloud-snow::before { content: "\f2bc"; }
.bi-cloud-sun-fill::before { content: "\f2bd"; }
.bi-cloud-sun::before { content: "\f2be"; }
.bi-cloud-upload-fill::before { content: "\f2bf"; }
.bi-cloud-upload::before { content: "\f2c0"; }
.bi-cloud::before { content: "\f2c1"; }
.bi-clouds-fill::before { content: "\f2c2"; }
.bi-clouds::before { content: "\f2c3"; }
.bi-cloudy-fill::before { content: "\f2c4"; }
.bi-cloudy::before { content: "\f2c5"; }
.bi-code-slash::before { content: "\f2c6"; }
.bi-code-square::before { content: "\f2c7"; }
.bi-code::before { content: "\f2c8"; }
.bi-collection-fill::before { content: "\f2c9"; }
.bi-collection-play-fill::before { content: "\f2ca"; }
.bi-collection-play::before { content: "\f2cb"; }
.bi-collection::before { content: "\f2cc"; }
.bi-columns-gap::before { content: "\f2cd"; }
.bi-columns::before { content: "\f2ce"; }
.bi-command::before { content: "\f2cf"; }
.bi-compass-fill::before { content: "\f2d0"; }
.bi-compass::before { content: "\f2d1"; }
.bi-cone-striped::before { content: "\f2d2"; }
.bi-cone::before { content: "\f2d3"; }
.bi-controller::before { content: "\f2d4"; }
.bi-cpu-fill::before { content: "\f2d5"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-credit-card-2-back-fill::before { content: "\f2d7"; }
.bi-credit-card-2-back::before { content: "\f2d8"; }
.bi-credit-card-2-front-fill::before { content: "\f2d9"; }
.bi-credit-card-2-front::before { content: "\f2da"; }
.bi-credit-card-fill::before { content: "\f2db"; }
.bi-credit-card::before { content: "\f2dc"; }
.bi-crop::before { content: "\f2dd"; }
.bi-cup-fill::before { content: "\f2de"; }
.bi-cup-straw::before { content: "\f2df"; }
.bi-cup::before { content: "\f2e0"; }
.bi-cursor-fill::before { content: "\f2e1"; }
.bi-cursor-text::before { content: "\f2e2"; }
.bi-cursor::before { content: "\f2e3"; }
.bi-dash-circle-dotted::before { content: "\f2e4"; }
.bi-dash-circle-fill::before { content: "\f2e5"; }
.bi-dash-circle::before { content: "\f2e6"; }
.bi-dash-square-dotted::before { content: "\f2e7"; }
.bi-dash-square-fill::before { content: "\f2e8"; }
.bi-dash-square::before { content: "\f2e9"; }
.bi-dash::before { content: "\f2ea"; }
.bi-diagram-2-fill::before { content: "\f2eb"; }
.bi-diagram-2::before { content: "\f2ec"; }
.bi-diagram-3-fill::before { content: "\f2ed"; }
.bi-diagram-3::before { content: "\f2ee"; }
.bi-diamond-fill::before { content: "\f2ef"; }
.bi-diamond-half::before { content: "\f2f0"; }
.bi-diamond::before { content: "\f2f1"; }
.bi-dice-1-fill::before { content: "\f2f2"; }
.bi-dice-1::before { content: "\f2f3"; }
.bi-dice-2-fill::before { content: "\f2f4"; }
.bi-dice-2::before { content: "\f2f5"; }
.bi-dice-3-fill::before { content: "\f2f6"; }
.bi-dice-3::before { content: "\f2f7"; }
.bi-dice-4-fill::before { content: "\f2f8"; }
.bi-dice-4::before { content: "\f2f9"; }
.bi-dice-5-fill::before { content: "\f2fa"; }
.bi-dice-5::before { content: "\f2fb"; }
.bi-dice-6-fill::before { content: "\f2fc"; }
.bi-dice-6::before { content: "\f2fd"; }
.bi-disc-fill::before { content: "\f2fe"; }
.bi-disc::before { content: "\f2ff"; }
.bi-discord::before { content: "\f300"; }
.bi-display-fill::before { content: "\f301"; }
.bi-display::before { content: "\f302"; }
.bi-distribute-horizontal::before { content: "\f303"; }
.bi-distribute-vertical::before { content: "\f304"; }
.bi-door-closed-fill::before { content: "\f305"; }
.bi-door-closed::before { content: "\f306"; }
.bi-door-open-fill::before { content: "\f307"; }
.bi-door-open::before { content: "\f308"; }
.bi-dot::before { content: "\f309"; }
.bi-download::before { content: "\f30a"; }
.bi-droplet-fill::before { content: "\f30b"; }
.bi-droplet-half::before { content: "\f30c"; }
.bi-droplet::before { content: "\f30d"; }
.bi-earbuds::before { content: "\f30e"; }
.bi-easel-fill::before { content: "\f30f"; }
.bi-easel::before { content: "\f310"; }
.bi-egg-fill::before { content: "\f311"; }
.bi-egg-fried::before { content: "\f312"; }
.bi-egg::before { content: "\f313"; }
.bi-eject-fill::before { content: "\f314"; }
.bi-eject::before { content: "\f315"; }
.bi-emoji-angry-fill::before { content: "\f316"; }
.bi-emoji-angry::before { content: "\f317"; }
.bi-emoji-dizzy-fill::before { content: "\f318"; }
.bi-emoji-dizzy::before { content: "\f319"; }
.bi-emoji-expressionless-fill::before { content: "\f31a"; }
.bi-emoji-expressionless::before { content: "\f31b"; }
.bi-emoji-frown-fill::before { content: "\f31c"; }
.bi-emoji-frown::before { content: "\f31d"; }
.bi-emoji-heart-eyes-fill::before { content: "\f31e"; }
.bi-emoji-heart-eyes::before { content: "\f31f"; }
.bi-emoji-laughing-fill::before { content: "\f320"; }
.bi-emoji-laughing::before { content: "\f321"; }
.bi-emoji-neutral-fill::before { content: "\f322"; }
.bi-emoji-neutral::before { content: "\f323"; }
.bi-emoji-smile-fill::before { content: "\f324"; }
.bi-emoji-smile-upside-down-fill::before { content: "\f325"; }
.bi-emoji-smile-upside-down::before { content: "\f326"; }
.bi-emoji-smile::before { content: "\f327"; }
.bi-emoji-sunglasses-fill::before { content: "\f328"; }
.bi-emoji-sunglasses::before { content: "\f329"; }
.bi-emoji-wink-fill::before { content: "\f32a"; }
.bi-emoji-wink::before { content: "\f32b"; }
.bi-envelope-fill::before { content: "\f32c"; }
.bi-envelope-open-fill::before { content: "\f32d"; }
.bi-envelope-open::before { content: "\f32e"; }
.bi-envelope::before { content: "\f32f"; }
.bi-eraser-fill::before { content: "\f330"; }
.bi-eraser::before { content: "\f331"; }
.bi-exclamation-circle-fill::before { content: "\f332"; }
.bi-exclamation-circle::before { content: "\f333"; }
.bi-exclamation-diamond-fill::before { content: "\f334"; }
.bi-exclamation-diamond::before { content: "\f335"; }
.bi-exclamation-octagon-fill::before { content: "\f336"; }
.bi-exclamation-octagon::before { content: "\f337"; }
.bi-exclamation-square-fill::before { content: "\f338"; }
.bi-exclamation-square::before { content: "\f339"; }
.bi-exclamation-triangle-fill::before { content: "\f33a"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-exclamation::before { content: "\f33c"; }
.bi-exclude::before { content: "\f33d"; }
.bi-eye-fill::before { content: "\f33e"; }
.bi-eye-slash-fill::before { content: "\f33f"; }
.bi-eye-slash::before { content: "\f340"; }
.bi-eye::before { content: "\f341"; }
.bi-eyedropper::before { content: "\f342"; }
.bi-eyeglasses::before { content: "\f343"; }
.bi-facebook::before { content: "\f344"; }
.bi-file-arrow-down-fill::before { content: "\f345"; }
.bi-file-arrow-down::before { content: "\f346"; }
.bi-file-arrow-up-fill::before { content: "\f347"; }
.bi-file-arrow-up::before { content: "\f348"; }
.bi-file-bar-graph-fill::before { content: "\f349"; }
.bi-file-bar-graph::before { content: "\f34a"; }
.bi-file-binary-fill::before { content: "\f34b"; }
.bi-file-binary::before { content: "\f34c"; }
.bi-file-break-fill::before { content: "\f34d"; }
.bi-file-break::before { content: "\f34e"; }
.bi-file-check-fill::before { content: "\f34f"; }
.bi-file-check::before { content: "\f350"; }
.bi-file-code-fill::before { content: "\f351"; }
.bi-file-code::before { content: "\f352"; }
.bi-file-diff-fill::before { content: "\f353"; }
.bi-file-diff::before { content: "\f354"; }
.bi-file-earmark-arrow-down-fill::before { content: "\f355"; }
.bi-file-earmark-arrow-down::before { content: "\f356"; }
.bi-file-earmark-arrow-up-fill::before { content: "\f357"; }
.bi-file-earmark-arrow-up::before { content: "\f358"; }
.bi-file-earmark-bar-graph-fill::before { content: "\f359"; }
.bi-file-earmark-bar-graph::before { content: "\f35a"; }
.bi-file-earmark-binary-fill::before { content: "\f35b"; }
.bi-file-earmark-binary::before { content: "\f35c"; }
.bi-file-earmark-break-fill::before { content: "\f35d"; }
.bi-file-earmark-break::before { content: "\f35e"; }
.bi-file-earmark-check-fill::before { content: "\f35f"; }
.bi-file-earmark-check::before { content: "\f360"; }
.bi-file-earmark-code-fill::before { content: "\f361"; }
.bi-file-earmark-code::before { content: "\f362"; }
.bi-file-earmark-diff-fill::before { content: "\f363"; }
.bi-file-earmark-diff::before { content: "\f364"; }
.bi-file-earmark-easel-fill::before { content: "\f365"; }
.bi-file-earmark-easel::before { content: "\f366"; }
.bi-file-earmark-excel-fill::before { content: "\f367"; }
.bi-file-earmark-excel::before { content: "\f368"; }
.bi-file-earmark-fill::before { content: "\f369"; }
.bi-file-earmark-font-fill::before { content: "\f36a"; }
.bi-file-earmark-font::before { content: "\f36b"; }
.bi-file-earmark-image-fill::before { content: "\f36c"; }
.bi-file-earmark-image::before { content: "\f36d"; }
.bi-file-earmark-lock-fill::before { content: "\f36e"; }
.bi-file-earmark-lock::before { content: "\f36f"; }
.bi-file-earmark-lock2-fill::before { content: "\f370"; }
.bi-file-earmark-lock2::before { content: "\f371"; }
.bi-file-earmark-medical-fill::before { content: "\f372"; }
.bi-file-earmark-medical::before { content: "\f373"; }
.bi-file-earmark-minus-fill::before { content: "\f374"; }
.bi-file-earmark-minus::before { content: "\f375"; }
.bi-file-earmark-music-fill::before { content: "\f376"; }
.bi-file-earmark-music::before { content: "\f377"; }
.bi-file-earmark-person-fill::before { content: "\f378"; }
.bi-file-earmark-person::before { content: "\f379"; }
.bi-file-earmark-play-fill::before { content: "\f37a"; }
.bi-file-earmark-play::before { content: "\f37b"; }
.bi-file-earmark-plus-fill::before { content: "\f37c"; }
.bi-file-earmark-plus::before { content: "\f37d"; }
.bi-file-earmark-post-fill::before { content: "\f37e"; }
.bi-file-earmark-post::before { content: "\f37f"; }
.bi-file-earmark-ppt-fill::before { content: "\f380"; }
.bi-file-earmark-ppt::before { content: "\f381"; }
.bi-file-earmark-richtext-fill::before { content: "\f382"; }
.bi-file-earmark-richtext::before { content: "\f383"; }
.bi-file-earmark-ruled-fill::before { content: "\f384"; }
.bi-file-earmark-ruled::before { content: "\f385"; }
.bi-file-earmark-slides-fill::before { content: "\f386"; }
.bi-file-earmark-slides::before { content: "\f387"; }
.bi-file-earmark-spreadsheet-fill::before { content: "\f388"; }
.bi-file-earmark-spreadsheet::before { content: "\f389"; }
.bi-file-earmark-text-fill::before { content: "\f38a"; }
.bi-file-earmark-text::before { content: "\f38b"; }
.bi-file-earmark-word-fill::before { content: "\f38c"; }
.bi-file-earmark-word::before { content: "\f38d"; }
.bi-file-earmark-x-fill::before { content: "\f38e"; }
.bi-file-earmark-x::before { content: "\f38f"; }
.bi-file-earmark-zip-fill::before { content: "\f390"; }
.bi-file-earmark-zip::before { content: "\f391"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-file-easel-fill::before { content: "\f393"; }
.bi-file-easel::before { content: "\f394"; }
.bi-file-excel-fill::before { content: "\f395"; }
.bi-file-excel::before { content: "\f396"; }
.bi-file-fill::before { content: "\f397"; }
.bi-file-font-fill::before { content: "\f398"; }
.bi-file-font::before { content: "\f399"; }
.bi-file-image-fill::before { content: "\f39a"; }
.bi-file-image::before { content: "\f39b"; }
.bi-file-lock-fill::before { content: "\f39c"; }
.bi-file-lock::before { content: "\f39d"; }
.bi-file-lock2-fill::before { content: "\f39e"; }
.bi-file-lock2::before { content: "\f39f"; }
.bi-file-medical-fill::before { content: "\f3a0"; }
.bi-file-medical::before { content: "\f3a1"; }
.bi-file-minus-fill::before { content: "\f3a2"; }
.bi-file-minus::before { content: "\f3a3"; }
.bi-file-music-fill::before { content: "\f3a4"; }
.bi-file-music::before { content: "\f3a5"; }
.bi-file-person-fill::before { content: "\f3a6"; }
.bi-file-person::before { content: "\f3a7"; }
.bi-file-play-fill::before { content: "\f3a8"; }
.bi-file-play::before { content: "\f3a9"; }
.bi-file-plus-fill::before { content: "\f3aa"; }
.bi-file-plus::before { content: "\f3ab"; }
.bi-file-post-fill::before { content: "\f3ac"; }
.bi-file-post::before { content: "\f3ad"; }
.bi-file-ppt-fill::before { content: "\f3ae"; }
.bi-file-ppt::before { content: "\f3af"; }
.bi-file-richtext-fill::before { content: "\f3b0"; }
.bi-file-richtext::before { content: "\f3b1"; }
.bi-file-ruled-fill::before { content: "\f3b2"; }
.bi-file-ruled::before { content: "\f3b3"; }
.bi-file-slides-fill::before { content: "\f3b4"; }
.bi-file-slides::before { content: "\f3b5"; }
.bi-file-spreadsheet-fill::before { content: "\f3b6"; }
.bi-file-spreadsheet::before { content: "\f3b7"; }
.bi-file-text-fill::before { content: "\f3b8"; }
.bi-file-text::before { content: "\f3b9"; }
.bi-file-word-fill::before { content: "\f3ba"; }
.bi-file-word::before { content: "\f3bb"; }
.bi-file-x-fill::before { content: "\f3bc"; }
.bi-file-x::before { content: "\f3bd"; }
.bi-file-zip-fill::before { content: "\f3be"; }
.bi-file-zip::before { content: "\f3bf"; }
.bi-file::before { content: "\f3c0"; }
.bi-files-alt::before { content: "\f3c1"; }
.bi-files::before { content: "\f3c2"; }
.bi-film::before { content: "\f3c3"; }
.bi-filter-circle-fill::before { content: "\f3c4"; }
.bi-filter-circle::before { content: "\f3c5"; }
.bi-filter-left::before { content: "\f3c6"; }
.bi-filter-right::before { content: "\f3c7"; }
.bi-filter-square-fill::before { content: "\f3c8"; }
.bi-filter-square::before { content: "\f3c9"; }
.bi-filter::before { content: "\f3ca"; }
.bi-flag-fill::before { content: "\f3cb"; }
.bi-flag::before { content: "\f3cc"; }
.bi-flower1::before { content: "\f3cd"; }
.bi-flower2::before { content: "\f3ce"; }
.bi-flower3::before { content: "\f3cf"; }
.bi-folder-check::before { content: "\f3d0"; }
.bi-folder-fill::before { content: "\f3d1"; }
.bi-folder-minus::before { content: "\f3d2"; }
.bi-folder-plus::before { content: "\f3d3"; }
.bi-folder-symlink-fill::before { content: "\f3d4"; }
.bi-folder-symlink::before { content: "\f3d5"; }
.bi-folder-x::before { content: "\f3d6"; }
.bi-folder::before { content: "\f3d7"; }
.bi-folder2-open::before { content: "\f3d8"; }
.bi-folder2::before { content: "\f3d9"; }
.bi-fonts::before { content: "\f3da"; }
.bi-forward-fill::before { content: "\f3db"; }
.bi-forward::before { content: "\f3dc"; }
.bi-front::before { content: "\f3dd"; }
.bi-fullscreen-exit::before { content: "\f3de"; }
.bi-fullscreen::before { content: "\f3df"; }
.bi-funnel-fill::before { content: "\f3e0"; }
.bi-funnel::before { content: "\f3e1"; }
.bi-gear-fill::before { content: "\f3e2"; }
.bi-gear-wide-connected::before { content: "\f3e3"; }
.bi-gear-wide::before { content: "\f3e4"; }
.bi-gear::before { content: "\f3e5"; }
.bi-gem::before { content: "\f3e6"; }
.bi-geo-alt-fill::before { content: "\f3e7"; }
.bi-geo-alt::before { content: "\f3e8"; }
.bi-geo-fill::before { content: "\f3e9"; }
.bi-geo::before { content: "\f3ea"; }
.bi-gift-fill::before { content: "\f3eb"; }
.bi-gift::before { content: "\f3ec"; }
.bi-github::before { content: "\f3ed"; }
.bi-globe::before { content: "\f3ee"; }
.bi-globe2::before { content: "\f3ef"; }
.bi-google::before { content: "\f3f0"; }
.bi-graph-down::before { content: "\f3f1"; }
.bi-graph-up::before { content: "\f3f2"; }
.bi-grid-1x2-fill::before { content: "\f3f3"; }
.bi-grid-1x2::before { content: "\f3f4"; }
.bi-grid-3x2-gap-fill::before { content: "\f3f5"; }
.bi-grid-3x2-gap::before { content: "\f3f6"; }
.bi-grid-3x2::before { content: "\f3f7"; }
.bi-grid-3x3-gap-fill::before { content: "\f3f8"; }
.bi-grid-3x3-gap::before { content: "\f3f9"; }
.bi-grid-3x3::before { content: "\f3fa"; }
.bi-grid-fill::before { content: "\f3fb"; }
.bi-grid::before { content: "\f3fc"; }
.bi-grip-horizontal::before { content: "\f3fd"; }
.bi-grip-vertical::before { content: "\f3fe"; }
.bi-hammer::before { content: "\f3ff"; }
.bi-hand-index-fill::before { content: "\f400"; }
.bi-hand-index-thumb-fill::before { content: "\f401"; }
.bi-hand-index-thumb::before { content: "\f402"; }
.bi-hand-index::before { content: "\f403"; }
.bi-hand-thumbs-down-fill::before { content: "\f404"; }
.bi-hand-thumbs-down::before { content: "\f405"; }
.bi-hand-thumbs-up-fill::before { content: "\f406"; }
.bi-hand-thumbs-up::before { content: "\f407"; }
.bi-handbag-fill::before { content: "\f408"; }
.bi-handbag::before { content: "\f409"; }
.bi-hash::before { content: "\f40a"; }
.bi-hdd-fill::before { content: "\f40b"; }
.bi-hdd-network-fill::before { content: "\f40c"; }
.bi-hdd-network::before { content: "\f40d"; }
.bi-hdd-rack-fill::before { content: "\f40e"; }
.bi-hdd-rack::before { content: "\f40f"; }
.bi-hdd-stack-fill::before { content: "\f410"; }
.bi-hdd-stack::before { content: "\f411"; }
.bi-hdd::before { content: "\f412"; }
.bi-headphones::before { content: "\f413"; }
.bi-headset::before { content: "\f414"; }
.bi-heart-fill::before { content: "\f415"; }
.bi-heart-half::before { content: "\f416"; }
.bi-heart::before { content: "\f417"; }
.bi-heptagon-fill::before { content: "\f418"; }
.bi-heptagon-half::before { content: "\f419"; }
.bi-heptagon::before { content: "\f41a"; }
.bi-hexagon-fill::before { content: "\f41b"; }
.bi-hexagon-half::before { content: "\f41c"; }
.bi-hexagon::before { content: "\f41d"; }
.bi-hourglass-bottom::before { content: "\f41e"; }
.bi-hourglass-split::before { content: "\f41f"; }
.bi-hourglass-top::before { content: "\f420"; }
.bi-hourglass::before { content: "\f421"; }
.bi-house-door-fill::before { content: "\f422"; }
.bi-house-door::before { content: "\f423"; }
.bi-house-fill::before { content: "\f424"; }
.bi-house::before { content: "\f425"; }
.bi-hr::before { content: "\f426"; }
.bi-hurricane::before { content: "\f427"; }
.bi-image-alt::before { content: "\f428"; }
.bi-image-fill::before { content: "\f429"; }
.bi-image::before { content: "\f42a"; }
.bi-images::before { content: "\f42b"; }
.bi-inbox-fill::before { content: "\f42c"; }
.bi-inbox::before { content: "\f42d"; }
.bi-inboxes-fill::before { content: "\f42e"; }
.bi-inboxes::before { content: "\f42f"; }
.bi-info-circle-fill::before { content: "\f430"; }
.bi-info-circle::before { content: "\f431"; }
.bi-info-square-fill::before { content: "\f432"; }
.bi-info-square::before { content: "\f433"; }
.bi-info::before { content: "\f434"; }
.bi-input-cursor-text::before { content: "\f435"; }
.bi-input-cursor::before { content: "\f436"; }
.bi-instagram::before { content: "\f437"; }
.bi-intersect::before { content: "\f438"; }
.bi-journal-album::before { content: "\f439"; }
.bi-journal-arrow-down::before { content: "\f43a"; }
.bi-journal-arrow-up::before { content: "\f43b"; }
.bi-journal-bookmark-fill::before { content: "\f43c"; }
.bi-journal-bookmark::before { content: "\f43d"; }
.bi-journal-check::before { content: "\f43e"; }
.bi-journal-code::before { content: "\f43f"; }
.bi-journal-medical::before { content: "\f440"; }
.bi-journal-minus::before { content: "\f441"; }
.bi-journal-plus::before { content: "\f442"; }
.bi-journal-richtext::before { content: "\f443"; }
.bi-journal-text::before { content: "\f444"; }
.bi-journal-x::before { content: "\f445"; }
.bi-journal::before { content: "\f446"; }
.bi-journals::before { content: "\f447"; }
.bi-joystick::before { content: "\f448"; }
.bi-justify-left::before { content: "\f449"; }
.bi-justify-right::before { content: "\f44a"; }
.bi-justify::before { content: "\f44b"; }
.bi-kanban-fill::before { content: "\f44c"; }
.bi-kanban::before { content: "\f44d"; }
.bi-key-fill::before { content: "\f44e"; }
.bi-key::before { content: "\f44f"; }
.bi-keyboard-fill::before { content: "\f450"; }
.bi-keyboard::before { content: "\f451"; }
.bi-ladder::before { content: "\f452"; }
.bi-lamp-fill::before { content: "\f453"; }
.bi-lamp::before { content: "\f454"; }
.bi-laptop-fill::before { content: "\f455"; }
.bi-laptop::before { content: "\f456"; }
.bi-layer-backward::before { content: "\f457"; }
.bi-layer-forward::before { content: "\f458"; }
.bi-layers-fill::before { content: "\f459"; }
.bi-layers-half::before { content: "\f45a"; }
.bi-layers::before { content: "\f45b"; }
.bi-layout-sidebar-inset-reverse::before { content: "\f45c"; }
.bi-layout-sidebar-inset::before { content: "\f45d"; }
.bi-layout-sidebar-reverse::before { content: "\f45e"; }
.bi-layout-sidebar::before { content: "\f45f"; }
.bi-layout-split::before { content: "\f460"; }
.bi-layout-text-sidebar-reverse::before { content: "\f461"; }
.bi-layout-text-sidebar::before { content: "\f462"; }
.bi-layout-text-window-reverse::before { content: "\f463"; }
.bi-layout-text-window::before { content: "\f464"; }
.bi-layout-three-columns::before { content: "\f465"; }
.bi-layout-wtf::before { content: "\f466"; }
.bi-life-preserver::before { content: "\f467"; }
.bi-lightbulb-fill::before { content: "\f468"; }
.bi-lightbulb-off-fill::before { content: "\f469"; }
.bi-lightbulb-off::before { content: "\f46a"; }
.bi-lightbulb::before { content: "\f46b"; }
.bi-lightning-charge-fill::before { content: "\f46c"; }
.bi-lightning-charge::before { content: "\f46d"; }
.bi-lightning-fill::before { content: "\f46e"; }
.bi-lightning::before { content: "\f46f"; }
.bi-link-45deg::before { content: "\f470"; }
.bi-link::before { content: "\f471"; }
.bi-linkedin::before { content: "\f472"; }
.bi-list-check::before { content: "\f473"; }
.bi-list-nested::before { content: "\f474"; }
.bi-list-ol::before { content: "\f475"; }
.bi-list-stars::before { content: "\f476"; }
.bi-list-task::before { content: "\f477"; }
.bi-list-ul::before { content: "\f478"; }
.bi-list::before { content: "\f479"; }
.bi-lock-fill::before { content: "\f47a"; }
.bi-lock::before { content: "\f47b"; }
.bi-mailbox::before { content: "\f47c"; }
.bi-mailbox2::before { content: "\f47d"; }
.bi-map-fill::before { content: "\f47e"; }
.bi-map::before { content: "\f47f"; }
.bi-markdown-fill::before { content: "\f480"; }
.bi-markdown::before { content: "\f481"; }
.bi-mask::before { content: "\f482"; }
.bi-megaphone-fill::before { content: "\f483"; }
.bi-megaphone::before { content: "\f484"; }
.bi-menu-app-fill::before { content: "\f485"; }
.bi-menu-app::before { content: "\f486"; }
.bi-menu-button-fill::before { content: "\f487"; }
.bi-menu-button-wide-fill::before { content: "\f488"; }
.bi-menu-button-wide::before { content: "\f489"; }
.bi-menu-button::before { content: "\f48a"; }
.bi-menu-down::before { content: "\f48b"; }
.bi-menu-up::before { content: "\f48c"; }
.bi-mic-fill::before { content: "\f48d"; }
.bi-mic-mute-fill::before { content: "\f48e"; }
.bi-mic-mute::before { content: "\f48f"; }
.bi-mic::before { content: "\f490"; }
.bi-minecart-loaded::before { content: "\f491"; }
.bi-minecart::before { content: "\f492"; }
.bi-moisture::before { content: "\f493"; }
.bi-moon-fill::before { content: "\f494"; }
.bi-moon-stars-fill::before { content: "\f495"; }
.bi-moon-stars::before { content: "\f496"; }
.bi-moon::before { content: "\f497"; }
.bi-mouse-fill::before { content: "\f498"; }
.bi-mouse::before { content: "\f499"; }
.bi-mouse2-fill::before { content: "\f49a"; }
.bi-mouse2::before { content: "\f49b"; }
.bi-mouse3-fill::before { content: "\f49c"; }
.bi-mouse3::before { content: "\f49d"; }
.bi-music-note-beamed::before { content: "\f49e"; }
.bi-music-note-list::before { content: "\f49f"; }
.bi-music-note::before { content: "\f4a0"; }
.bi-music-player-fill::before { content: "\f4a1"; }
.bi-music-player::before { content: "\f4a2"; }
.bi-newspaper::before { content: "\f4a3"; }
.bi-node-minus-fill::before { content: "\f4a4"; }
.bi-node-minus::before { content: "\f4a5"; }
.bi-node-plus-fill::before { content: "\f4a6"; }
.bi-node-plus::before { content: "\f4a7"; }
.bi-nut-fill::before { content: "\f4a8"; }
.bi-nut::before { content: "\f4a9"; }
.bi-octagon-fill::before { content: "\f4aa"; }
.bi-octagon-half::before { content: "\f4ab"; }
.bi-octagon::before { content: "\f4ac"; }
.bi-option::before { content: "\f4ad"; }
.bi-outlet::before { content: "\f4ae"; }
.bi-paint-bucket::before { content: "\f4af"; }
.bi-palette-fill::before { content: "\f4b0"; }
.bi-palette::before { content: "\f4b1"; }
.bi-palette2::before { content: "\f4b2"; }
.bi-paperclip::before { content: "\f4b3"; }
.bi-paragraph::before { content: "\f4b4"; }
.bi-patch-check-fill::before { content: "\f4b5"; }
.bi-patch-check::before { content: "\f4b6"; }
.bi-patch-exclamation-fill::before { content: "\f4b7"; }
.bi-patch-exclamation::before { content: "\f4b8"; }
.bi-patch-minus-fill::before { content: "\f4b9"; }
.bi-patch-minus::before { content: "\f4ba"; }
.bi-patch-plus-fill::before { content: "\f4bb"; }
.bi-patch-plus::before { content: "\f4bc"; }
.bi-patch-question-fill::before { content: "\f4bd"; }
.bi-patch-question::before { content: "\f4be"; }
.bi-pause-btn-fill::before { content: "\f4bf"; }
.bi-pause-btn::before { content: "\f4c0"; }
.bi-pause-circle-fill::before { content: "\f4c1"; }
.bi-pause-circle::before { content: "\f4c2"; }
.bi-pause-fill::before { content: "\f4c3"; }
.bi-pause::before { content: "\f4c4"; }
.bi-peace-fill::before { content: "\f4c5"; }
.bi-peace::before { content: "\f4c6"; }
.bi-pen-fill::before { content: "\f4c7"; }
.bi-pen::before { content: "\f4c8"; }
.bi-pencil-fill::before { content: "\f4c9"; }
.bi-pencil-square::before { content: "\f4ca"; }
.bi-pencil::before { content: "\f4cb"; }
.bi-pentagon-fill::before { content: "\f4cc"; }
.bi-pentagon-half::before { content: "\f4cd"; }
.bi-pentagon::before { content: "\f4ce"; }
.bi-people-fill::before { content: "\f4cf"; }
.bi-people::before { content: "\f4d0"; }
.bi-percent::before { content: "\f4d1"; }
.bi-person-badge-fill::before { content: "\f4d2"; }
.bi-person-badge::before { content: "\f4d3"; }
.bi-person-bounding-box::before { content: "\f4d4"; }
.bi-person-check-fill::before { content: "\f4d5"; }
.bi-person-check::before { content: "\f4d6"; }
.bi-person-circle::before { content: "\f4d7"; }
.bi-person-dash-fill::before { content: "\f4d8"; }
.bi-person-dash::before { content: "\f4d9"; }
.bi-person-fill::before { content: "\f4da"; }
.bi-person-lines-fill::before { content: "\f4db"; }
.bi-person-plus-fill::before { content: "\f4dc"; }
.bi-person-plus::before { content: "\f4dd"; }
.bi-person-square::before { content: "\f4de"; }
.bi-person-x-fill::before { content: "\f4df"; }
.bi-person-x::before { content: "\f4e0"; }
.bi-person::before { content: "\f4e1"; }
.bi-phone-fill::before { content: "\f4e2"; }
.bi-phone-landscape-fill::before { content: "\f4e3"; }
.bi-phone-landscape::before { content: "\f4e4"; }
.bi-phone-vibrate-fill::before { content: "\f4e5"; }
.bi-phone-vibrate::before { content: "\f4e6"; }
.bi-phone::before { content: "\f4e7"; }
.bi-pie-chart-fill::before { content: "\f4e8"; }
.bi-pie-chart::before { content: "\f4e9"; }
.bi-pin-angle-fill::before { content: "\f4ea"; }
.bi-pin-angle::before { content: "\f4eb"; }
.bi-pin-fill::before { content: "\f4ec"; }
.bi-pin::before { content: "\f4ed"; }
.bi-pip-fill::before { content: "\f4ee"; }
.bi-pip::before { content: "\f4ef"; }
.bi-play-btn-fill::before { content: "\f4f0"; }
.bi-play-btn::before { content: "\f4f1"; }
.bi-play-circle-fill::before { content: "\f4f2"; }
.bi-play-circle::before { content: "\f4f3"; }
.bi-play-fill::before { content: "\f4f4"; }
.bi-play::before { content: "\f4f5"; }
.bi-plug-fill::before { content: "\f4f6"; }
.bi-plug::before { content: "\f4f7"; }
.bi-plus-circle-dotted::before { content: "\f4f8"; }
.bi-plus-circle-fill::before { content: "\f4f9"; }
.bi-plus-circle::before { content: "\f4fa"; }
.bi-plus-square-dotted::before { content: "\f4fb"; }
.bi-plus-square-fill::before { content: "\f4fc"; }
.bi-plus-square::before { content: "\f4fd"; }
.bi-plus::before { content: "\f4fe"; }
.bi-power::before { content: "\f4ff"; }
.bi-printer-fill::before { content: "\f500"; }
.bi-printer::before { content: "\f501"; }
.bi-puzzle-fill::before { content: "\f502"; }
.bi-puzzle::before { content: "\f503"; }
.bi-question-circle-fill::before { content: "\f504"; }
.bi-question-circle::before { content: "\f505"; }
.bi-question-diamond-fill::before { content: "\f506"; }
.bi-question-diamond::before { content: "\f507"; }
.bi-question-octagon-fill::before { content: "\f508"; }
.bi-question-octagon::before { content: "\f509"; }
.bi-question-square-fill::before { content: "\f50a"; }
.bi-question-square::before { content: "\f50b"; }
.bi-question::before { content: "\f50c"; }
.bi-rainbow::before { content: "\f50d"; }
.bi-receipt-cutoff::before { content: "\f50e"; }
.bi-receipt::before { content: "\f50f"; }
.bi-reception-0::before { content: "\f510"; }
.bi-reception-1::before { content: "\f511"; }
.bi-reception-2::before { content: "\f512"; }
.bi-reception-3::before { content: "\f513"; }
.bi-reception-4::before { content: "\f514"; }
.bi-record-btn-fill::before { content: "\f515"; }
.bi-record-btn::before { content: "\f516"; }
.bi-record-circle-fill::before { content: "\f517"; }
.bi-record-circle::before { content: "\f518"; }
.bi-record-fill::before { content: "\f519"; }
.bi-record::before { content: "\f51a"; }
.bi-record2-fill::before { content: "\f51b"; }
.bi-record2::before { content: "\f51c"; }
.bi-reply-all-fill::before { content: "\f51d"; }
.bi-reply-all::before { content: "\f51e"; }
.bi-reply-fill::before { content: "\f51f"; }
.bi-reply::before { content: "\f520"; }
.bi-rss-fill::before { content: "\f521"; }
.bi-rss::before { content: "\f522"; }
.bi-rulers::before { content: "\f523"; }
.bi-save-fill::before { content: "\f524"; }
.bi-save::before { content: "\f525"; }
.bi-save2-fill::before { content: "\f526"; }
.bi-save2::before { content: "\f527"; }
.bi-scissors::before { content: "\f528"; }
.bi-screwdriver::before { content: "\f529"; }
.bi-search::before { content: "\f52a"; }
.bi-segmented-nav::before { content: "\f52b"; }
.bi-server::before { content: "\f52c"; }
.bi-share-fill::before { content: "\f52d"; }
.bi-share::before { content: "\f52e"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-exclamation::before { content: "\f530"; }
.bi-shield-fill-check::before { content: "\f531"; }
.bi-shield-fill-exclamation::before { content: "\f532"; }
.bi-shield-fill-minus::before { content: "\f533"; }
.bi-shield-fill-plus::before { content: "\f534"; }
.bi-shield-fill-x::before { content: "\f535"; }
.bi-shield-fill::before { content: "\f536"; }
.bi-shield-lock-fill::before { content: "\f537"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-shield-minus::before { content: "\f539"; }
.bi-shield-plus::before { content: "\f53a"; }
.bi-shield-shaded::before { content: "\f53b"; }
.bi-shield-slash-fill::before { content: "\f53c"; }
.bi-shield-slash::before { content: "\f53d"; }
.bi-shield-x::before { content: "\f53e"; }
.bi-shield::before { content: "\f53f"; }
.bi-shift-fill::before { content: "\f540"; }
.bi-shift::before { content: "\f541"; }
.bi-shop-window::before { content: "\f542"; }
.bi-shop::before { content: "\f543"; }
.bi-shuffle::before { content: "\f544"; }
.bi-signpost-2-fill::before { content: "\f545"; }
.bi-signpost-2::before { content: "\f546"; }
.bi-signpost-fill::before { content: "\f547"; }
.bi-signpost-split-fill::before { content: "\f548"; }
.bi-signpost-split::before { content: "\f549"; }
.bi-signpost::before { content: "\f54a"; }
.bi-sim-fill::before { content: "\f54b"; }
.bi-sim::before { content: "\f54c"; }
.bi-skip-backward-btn-fill::before { content: "\f54d"; }
.bi-skip-backward-btn::before { content: "\f54e"; }
.bi-skip-backward-circle-fill::before { content: "\f54f"; }
.bi-skip-backward-circle::before { content: "\f550"; }
.bi-skip-backward-fill::before { content: "\f551"; }
.bi-skip-backward::before { content: "\f552"; }
.bi-skip-end-btn-fill::before { content: "\f553"; }
.bi-skip-end-btn::before { content: "\f554"; }
.bi-skip-end-circle-fill::before { content: "\f555"; }
.bi-skip-end-circle::before { content: "\f556"; }
.bi-skip-end-fill::before { content: "\f557"; }
.bi-skip-end::before { content: "\f558"; }
.bi-skip-forward-btn-fill::before { content: "\f559"; }
.bi-skip-forward-btn::before { content: "\f55a"; }
.bi-skip-forward-circle-fill::before { content: "\f55b"; }
.bi-skip-forward-circle::before { content: "\f55c"; }
.bi-skip-forward-fill::before { content: "\f55d"; }
.bi-skip-forward::before { content: "\f55e"; }
.bi-skip-start-btn-fill::before { content: "\f55f"; }
.bi-skip-start-btn::before { content: "\f560"; }
.bi-skip-start-circle-fill::before { content: "\f561"; }
.bi-skip-start-circle::before { content: "\f562"; }
.bi-skip-start-fill::before { content: "\f563"; }
.bi-skip-start::before { content: "\f564"; }
.bi-slack::before { content: "\f565"; }
.bi-slash-circle-fill::before { content: "\f566"; }
.bi-slash-circle::before { content: "\f567"; }
.bi-slash-square-fill::before { content: "\f568"; }
.bi-slash-square::before { content: "\f569"; }
.bi-slash::before { content: "\f56a"; }
.bi-sliders::before { content: "\f56b"; }
.bi-smartwatch::before { content: "\f56c"; }
.bi-snow::before { content: "\f56d"; }
.bi-snow2::before { content: "\f56e"; }
.bi-snow3::before { content: "\f56f"; }
.bi-sort-alpha-down-alt::before { content: "\f570"; }
.bi-sort-alpha-down::before { content: "\f571"; }
.bi-sort-alpha-up-alt::before { content: "\f572"; }
.bi-sort-alpha-up::before { content: "\f573"; }
.bi-sort-down-alt::before { content: "\f574"; }
.bi-sort-down::before { content: "\f575"; }
.bi-sort-numeric-down-alt::before { content: "\f576"; }
.bi-sort-numeric-down::before { content: "\f577"; }
.bi-sort-numeric-up-alt::before { content: "\f578"; }
.bi-sort-numeric-up::before { content: "\f579"; }
.bi-sort-up-alt::before { content: "\f57a"; }
.bi-sort-up::before { content: "\f57b"; }
.bi-soundwave::before { content: "\f57c"; }
.bi-speaker-fill::before { content: "\f57d"; }
.bi-speaker::before { content: "\f57e"; }
.bi-speedometer::before { content: "\f57f"; }
.bi-speedometer2::before { content: "\f580"; }
.bi-spellcheck::before { content: "\f581"; }
.bi-square-fill::before { content: "\f582"; }
.bi-square-half::before { content: "\f583"; }
.bi-square::before { content: "\f584"; }
.bi-stack::before { content: "\f585"; }
.bi-star-fill::before { content: "\f586"; }
.bi-star-half::before { content: "\f587"; }
.bi-star::before { content: "\f588"; }
.bi-stars::before { content: "\f589"; }
.bi-stickies-fill::before { content: "\f58a"; }
.bi-stickies::before { content: "\f58b"; }
.bi-sticky-fill::before { content: "\f58c"; }
.bi-sticky::before { content: "\f58d"; }
.bi-stop-btn-fill::before { content: "\f58e"; }
.bi-stop-btn::before { content: "\f58f"; }
.bi-stop-circle-fill::before { content: "\f590"; }
.bi-stop-circle::before { content: "\f591"; }
.bi-stop-fill::before { content: "\f592"; }
.bi-stop::before { content: "\f593"; }
.bi-stoplights-fill::before { content: "\f594"; }
.bi-stoplights::before { content: "\f595"; }
.bi-stopwatch-fill::before { content: "\f596"; }
.bi-stopwatch::before { content: "\f597"; }
.bi-subtract::before { content: "\f598"; }
.bi-suit-club-fill::before { content: "\f599"; }
.bi-suit-club::before { content: "\f59a"; }
.bi-suit-diamond-fill::before { content: "\f59b"; }
.bi-suit-diamond::before { content: "\f59c"; }
.bi-suit-heart-fill::before { content: "\f59d"; }
.bi-suit-heart::before { content: "\f59e"; }
.bi-suit-spade-fill::before { content: "\f59f"; }
.bi-suit-spade::before { content: "\f5a0"; }
.bi-sun-fill::before { content: "\f5a1"; }
.bi-sun::before { content: "\f5a2"; }
.bi-sunglasses::before { content: "\f5a3"; }
.bi-sunrise-fill::before { content: "\f5a4"; }
.bi-sunrise::before { content: "\f5a5"; }
.bi-sunset-fill::before { content: "\f5a6"; }
.bi-sunset::before { content: "\f5a7"; }
.bi-symmetry-horizontal::before { content: "\f5a8"; }
.bi-symmetry-vertical::before { content: "\f5a9"; }
.bi-table::before { content: "\f5aa"; }
.bi-tablet-fill::before { content: "\f5ab"; }
.bi-tablet-landscape-fill::before { content: "\f5ac"; }
.bi-tablet-landscape::before { content: "\f5ad"; }
.bi-tablet::before { content: "\f5ae"; }
.bi-tag-fill::before { content: "\f5af"; }
.bi-tag::before { content: "\f5b0"; }
.bi-tags-fill::before { content: "\f5b1"; }
.bi-tags::before { content: "\f5b2"; }
.bi-telegram::before { content: "\f5b3"; }
.bi-telephone-fill::before { content: "\f5b4"; }
.bi-telephone-forward-fill::before { content: "\f5b5"; }
.bi-telephone-forward::before { content: "\f5b6"; }
.bi-telephone-inbound-fill::before { content: "\f5b7"; }
.bi-telephone-inbound::before { content: "\f5b8"; }
.bi-telephone-minus-fill::before { content: "\f5b9"; }
.bi-telephone-minus::before { content: "\f5ba"; }
.bi-telephone-outbound-fill::before { content: "\f5bb"; }
.bi-telephone-outbound::before { content: "\f5bc"; }
.bi-telephone-plus-fill::before { content: "\f5bd"; }
.bi-telephone-plus::before { content: "\f5be"; }
.bi-telephone-x-fill::before { content: "\f5bf"; }
.bi-telephone-x::before { content: "\f5c0"; }
.bi-telephone::before { content: "\f5c1"; }
.bi-terminal-fill::before { content: "\f5c2"; }
.bi-terminal::before { content: "\f5c3"; }
.bi-text-center::before { content: "\f5c4"; }
.bi-text-indent-left::before { content: "\f5c5"; }
.bi-text-indent-right::before { content: "\f5c6"; }
.bi-text-left::before { content: "\f5c7"; }
.bi-text-paragraph::before { content: "\f5c8"; }
.bi-text-right::before { content: "\f5c9"; }
.bi-textarea-resize::before { content: "\f5ca"; }
.bi-textarea-t::before { content: "\f5cb"; }
.bi-textarea::before { content: "\f5cc"; }
.bi-thermometer-half::before { content: "\f5cd"; }
.bi-thermometer-high::before { content: "\f5ce"; }
.bi-thermometer-low::before { content: "\f5cf"; }
.bi-thermometer-snow::before { content: "\f5d0"; }
.bi-thermometer-sun::before { content: "\f5d1"; }
.bi-thermometer::before { content: "\f5d2"; }
.bi-three-dots-vertical::before { content: "\f5d3"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-toggle-off::before { content: "\f5d5"; }
.bi-toggle-on::before { content: "\f5d6"; }
.bi-toggle2-off::before { content: "\f5d7"; }
.bi-toggle2-on::before { content: "\f5d8"; }
.bi-toggles::before { content: "\f5d9"; }
.bi-toggles2::before { content: "\f5da"; }
.bi-tools::before { content: "\f5db"; }
.bi-tornado::before { content: "\f5dc"; }
.bi-trash-fill::before { content: "\f5dd"; }
.bi-trash::before { content: "\f5de"; }
.bi-trash2-fill::before { content: "\f5df"; }
.bi-trash2::before { content: "\f5e0"; }
.bi-tree-fill::before { content: "\f5e1"; }
.bi-tree::before { content: "\f5e2"; }
.bi-triangle-fill::before { content: "\f5e3"; }
.bi-triangle-half::before { content: "\f5e4"; }
.bi-triangle::before { content: "\f5e5"; }
.bi-trophy-fill::before { content: "\f5e6"; }
.bi-trophy::before { content: "\f5e7"; }
.bi-tropical-storm::before { content: "\f5e8"; }
.bi-truck-flatbed::before { content: "\f5e9"; }
.bi-truck::before { content: "\f5ea"; }
.bi-tsunami::before { content: "\f5eb"; }
.bi-tv-fill::before { content: "\f5ec"; }
.bi-tv::before { content: "\f5ed"; }
.bi-twitch::before { content: "\f5ee"; }
.bi-twitter::before { content: "\f5ef"; }
.bi-type-bold::before { content: "\f5f0"; }
.bi-type-h1::before { content: "\f5f1"; }
.bi-type-h2::before { content: "\f5f2"; }
.bi-type-h3::before { content: "\f5f3"; }
.bi-type-italic::before { content: "\f5f4"; }
.bi-type-strikethrough::before { content: "\f5f5"; }
.bi-type-underline::before { content: "\f5f6"; }
.bi-type::before { content: "\f5f7"; }
.bi-ui-checks-grid::before { content: "\f5f8"; }
.bi-ui-checks::before { content: "\f5f9"; }
.bi-ui-radios-grid::before { content: "\f5fa"; }
.bi-ui-radios::before { content: "\f5fb"; }
.bi-umbrella-fill::before { content: "\f5fc"; }
.bi-umbrella::before { content: "\f5fd"; }
.bi-union::before { content: "\f5fe"; }
.bi-unlock-fill::before { content: "\f5ff"; }
.bi-unlock::before { content: "\f600"; }
.bi-upc-scan::before { content: "\f601"; }
.bi-upc::before { content: "\f602"; }
.bi-upload::before { content: "\f603"; }
.bi-vector-pen::before { content: "\f604"; }
.bi-view-list::before { content: "\f605"; }
.bi-view-stacked::before { content: "\f606"; }
.bi-vinyl-fill::before { content: "\f607"; }
.bi-vinyl::before { content: "\f608"; }
.bi-voicemail::before { content: "\f609"; }
.bi-volume-down-fill::before { content: "\f60a"; }
.bi-volume-down::before { content: "\f60b"; }
.bi-volume-mute-fill::before { content: "\f60c"; }
.bi-volume-mute::before { content: "\f60d"; }
.bi-volume-off-fill::before { content: "\f60e"; }
.bi-volume-off::before { content: "\f60f"; }
.bi-volume-up-fill::before { content: "\f610"; }
.bi-volume-up::before { content: "\f611"; }
.bi-vr::before { content: "\f612"; }
.bi-wallet-fill::before { content: "\f613"; }
.bi-wallet::before { content: "\f614"; }
.bi-wallet2::before { content: "\f615"; }
.bi-watch::before { content: "\f616"; }
.bi-water::before { content: "\f617"; }
.bi-whatsapp::before { content: "\f618"; }
.bi-wifi-1::before { content: "\f619"; }
.bi-wifi-2::before { content: "\f61a"; }
.bi-wifi-off::before { content: "\f61b"; }
.bi-wifi::before { content: "\f61c"; }
.bi-wind::before { content: "\f61d"; }
.bi-window-dock::before { content: "\f61e"; }
.bi-window-sidebar::before { content: "\f61f"; }
.bi-window::before { content: "\f620"; }
.bi-wrench::before { content: "\f621"; }
.bi-x-circle-fill::before { content: "\f622"; }
.bi-x-circle::before { content: "\f623"; }
.bi-x-diamond-fill::before { content: "\f624"; }
.bi-x-diamond::before { content: "\f625"; }
.bi-x-octagon-fill::before { content: "\f626"; }
.bi-x-octagon::before { content: "\f627"; }
.bi-x-square-fill::before { content: "\f628"; }
.bi-x-square::before { content: "\f629"; }
.bi-x::before { content: "\f62a"; }
.bi-youtube::before { content: "\f62b"; }
.bi-zoom-in::before { content: "\f62c"; }
.bi-zoom-out::before { content: "\f62d"; }
.bi-bank::before { content: "\f62e"; }
.bi-bank2::before { content: "\f62f"; }
.bi-bell-slash-fill::before { content: "\f630"; }
.bi-bell-slash::before { content: "\f631"; }
.bi-cash-coin::before { content: "\f632"; }
.bi-check-lg::before { content: "\f633"; }
.bi-coin::before { content: "\f634"; }
.bi-currency-bitcoin::before { content: "\f635"; }
.bi-currency-dollar::before { content: "\f636"; }
.bi-currency-euro::before { content: "\f637"; }
.bi-currency-exchange::before { content: "\f638"; }
.bi-currency-pound::before { content: "\f639"; }
.bi-currency-yen::before { content: "\f63a"; }
.bi-dash-lg::before { content: "\f63b"; }
.bi-exclamation-lg::before { content: "\f63c"; }
.bi-file-earmark-pdf-fill::before { content: "\f63d"; }
.bi-file-earmark-pdf::before { content: "\f63e"; }
.bi-file-pdf-fill::before { content: "\f63f"; }
.bi-file-pdf::before { content: "\f640"; }
.bi-gender-ambiguous::before { content: "\f641"; }
.bi-gender-female::before { content: "\f642"; }
.bi-gender-male::before { content: "\f643"; }
.bi-gender-trans::before { content: "\f644"; }
.bi-headset-vr::before { content: "\f645"; }
.bi-info-lg::before { content: "\f646"; }
.bi-mastodon::before { content: "\f647"; }
.bi-messenger::before { content: "\f648"; }
.bi-piggy-bank-fill::before { content: "\f649"; }
.bi-piggy-bank::before { content: "\f64a"; }
.bi-pin-map-fill::before { content: "\f64b"; }
.bi-pin-map::before { content: "\f64c"; }
.bi-plus-lg::before { content: "\f64d"; }
.bi-question-lg::before { content: "\f64e"; }
.bi-recycle::before { content: "\f64f"; }
.bi-reddit::before { content: "\f650"; }
.bi-safe-fill::before { content: "\f651"; }
.bi-safe2-fill::before { content: "\f652"; }
.bi-safe2::before { content: "\f653"; }
.bi-sd-card-fill::before { content: "\f654"; }
.bi-sd-card::before { content: "\f655"; }
.bi-skype::before { content: "\f656"; }
.bi-slash-lg::before { content: "\f657"; }
.bi-translate::before { content: "\f658"; }
.bi-x-lg::before { content: "\f659"; }
.bi-safe::before { content: "\f65a"; }
.bi-apple::before { content: "\f65b"; }
.bi-microsoft::before { content: "\f65d"; }
.bi-windows::before { content: "\f65e"; }
.bi-behance::before { content: "\f65c"; }
.bi-dribbble::before { content: "\f65f"; }
.bi-line::before { content: "\f660"; }
.bi-medium::before { content: "\f661"; }
.bi-paypal::before { content: "\f662"; }
.bi-pinterest::before { content: "\f663"; }
.bi-signal::before { content: "\f664"; }
.bi-snapchat::before { content: "\f665"; }
.bi-spotify::before { content: "\f666"; }
.bi-stack-overflow::before { content: "\f667"; }
.bi-strava::before { content: "\f668"; }
.bi-wordpress::before { content: "\f669"; }
.bi-vimeo::before { content: "\f66a"; }
.bi-activity::before { content: "\f66b"; }
.bi-easel2-fill::before { content: "\f66c"; }
.bi-easel2::before { content: "\f66d"; }
.bi-easel3-fill::before { content: "\f66e"; }
.bi-easel3::before { content: "\f66f"; }
.bi-fan::before { content: "\f670"; }
.bi-fingerprint::before { content: "\f671"; }
.bi-graph-down-arrow::before { content: "\f672"; }
.bi-graph-up-arrow::before { content: "\f673"; }
.bi-hypnotize::before { content: "\f674"; }
.bi-magic::before { content: "\f675"; }
.bi-person-rolodex::before { content: "\f676"; }
.bi-person-video::before { content: "\f677"; }
.bi-person-video2::before { content: "\f678"; }
.bi-person-video3::before { content: "\f679"; }
.bi-person-workspace::before { content: "\f67a"; }
.bi-radioactive::before { content: "\f67b"; }
.bi-webcam-fill::before { content: "\f67c"; }
.bi-webcam::before { content: "\f67d"; }
.bi-yin-yang::before { content: "\f67e"; }
.bi-bandaid-fill::before { content: "\f680"; }
.bi-bandaid::before { content: "\f681"; }
.bi-bluetooth::before { content: "\f682"; }
.bi-body-text::before { content: "\f683"; }
.bi-boombox::before { content: "\f684"; }
.bi-boxes::before { content: "\f685"; }
.bi-dpad-fill::before { content: "\f686"; }
.bi-dpad::before { content: "\f687"; }
.bi-ear-fill::before { content: "\f688"; }
.bi-ear::before { content: "\f689"; }
.bi-envelope-check-fill::before { content: "\f68b"; }
.bi-envelope-check::before { content: "\f68c"; }
.bi-envelope-dash-fill::before { content: "\f68e"; }
.bi-envelope-dash::before { content: "\f68f"; }
.bi-envelope-exclamation-fill::before { content: "\f691"; }
.bi-envelope-exclamation::before { content: "\f692"; }
.bi-envelope-plus-fill::before { content: "\f693"; }
.bi-envelope-plus::before { content: "\f694"; }
.bi-envelope-slash-fill::before { content: "\f696"; }
.bi-envelope-slash::before { content: "\f697"; }
.bi-envelope-x-fill::before { content: "\f699"; }
.bi-envelope-x::before { content: "\f69a"; }
.bi-explicit-fill::before { content: "\f69b"; }
.bi-explicit::before { content: "\f69c"; }
.bi-git::before { content: "\f69d"; }
.bi-infinity::before { content: "\f69e"; }
.bi-list-columns-reverse::before { content: "\f69f"; }
.bi-list-columns::before { content: "\f6a0"; }
.bi-meta::before { content: "\f6a1"; }
.bi-nintendo-switch::before { content: "\f6a4"; }
.bi-pc-display-horizontal::before { content: "\f6a5"; }
.bi-pc-display::before { content: "\f6a6"; }
.bi-pc-horizontal::before { content: "\f6a7"; }
.bi-pc::before { content: "\f6a8"; }
.bi-playstation::before { content: "\f6a9"; }
.bi-plus-slash-minus::before { content: "\f6aa"; }
.bi-projector-fill::before { content: "\f6ab"; }
.bi-projector::before { content: "\f6ac"; }
.bi-qr-code-scan::before { content: "\f6ad"; }
.bi-qr-code::before { content: "\f6ae"; }
.bi-quora::before { content: "\f6af"; }
.bi-quote::before { content: "\f6b0"; }
.bi-robot::before { content: "\f6b1"; }
.bi-send-check-fill::before { content: "\f6b2"; }
.bi-send-check::before { content: "\f6b3"; }
.bi-send-dash-fill::before { content: "\f6b4"; }
.bi-send-dash::before { content: "\f6b5"; }
.bi-send-exclamation-fill::before { content: "\f6b7"; }
.bi-send-exclamation::before { content: "\f6b8"; }
.bi-send-fill::before { content: "\f6b9"; }
.bi-send-plus-fill::before { content: "\f6ba"; }
.bi-send-plus::before { content: "\f6bb"; }
.bi-send-slash-fill::before { content: "\f6bc"; }
.bi-send-slash::before { content: "\f6bd"; }
.bi-send-x-fill::before { content: "\f6be"; }
.bi-send-x::before { content: "\f6bf"; }
.bi-send::before { content: "\f6c0"; }
.bi-steam::before { content: "\f6c1"; }
.bi-terminal-dash::before { content: "\f6c3"; }
.bi-terminal-plus::before { content: "\f6c4"; }
.bi-terminal-split::before { content: "\f6c5"; }
.bi-ticket-detailed-fill::before { content: "\f6c6"; }
.bi-ticket-detailed::before { content: "\f6c7"; }
.bi-ticket-fill::before { content: "\f6c8"; }
.bi-ticket-perforated-fill::before { content: "\f6c9"; }
.bi-ticket-perforated::before { content: "\f6ca"; }
.bi-ticket::before { content: "\f6cb"; }
.bi-tiktok::before { content: "\f6cc"; }
.bi-window-dash::before { content: "\f6cd"; }
.bi-window-desktop::before { content: "\f6ce"; }
.bi-window-fullscreen::before { content: "\f6cf"; }
.bi-window-plus::before { content: "\f6d0"; }
.bi-window-split::before { content: "\f6d1"; }
.bi-window-stack::before { content: "\f6d2"; }
.bi-window-x::before { content: "\f6d3"; }
.bi-xbox::before { content: "\f6d4"; }
.bi-ethernet::before { content: "\f6d5"; }
.bi-hdmi-fill::before { content: "\f6d6"; }
.bi-hdmi::before { content: "\f6d7"; }
.bi-usb-c-fill::before { content: "\f6d8"; }
.bi-usb-c::before { content: "\f6d9"; }
.bi-usb-fill::before { content: "\f6da"; }
.bi-usb-plug-fill::before { content: "\f6db"; }
.bi-usb-plug::before { content: "\f6dc"; }
.bi-usb-symbol::before { content: "\f6dd"; }
.bi-usb::before { content: "\f6de"; }
.bi-boombox-fill::before { content: "\f6df"; }
.bi-displayport::before { content: "\f6e1"; }
.bi-gpu-card::before { content: "\f6e2"; }
.bi-memory::before { content: "\f6e3"; }
.bi-modem-fill::before { content: "\f6e4"; }
.bi-modem::before { content: "\f6e5"; }
.bi-motherboard-fill::before { content: "\f6e6"; }
.bi-motherboard::before { content: "\f6e7"; }
.bi-optical-audio-fill::before { content: "\f6e8"; }
.bi-optical-audio::before { content: "\f6e9"; }
.bi-pci-card::before { content: "\f6ea"; }
.bi-router-fill::before { content: "\f6eb"; }
.bi-router::before { content: "\f6ec"; }
.bi-thunderbolt-fill::before { content: "\f6ef"; }
.bi-thunderbolt::before { content: "\f6f0"; }
.bi-usb-drive-fill::before { content: "\f6f1"; }
.bi-usb-drive::before { content: "\f6f2"; }
.bi-usb-micro-fill::before { content: "\f6f3"; }
.bi-usb-micro::before { content: "\f6f4"; }
.bi-usb-mini-fill::before { content: "\f6f5"; }
.bi-usb-mini::before { content: "\f6f6"; }
.bi-cloud-haze2::before { content: "\f6f7"; }
.bi-device-hdd-fill::before { content: "\f6f8"; }
.bi-device-hdd::before { content: "\f6f9"; }
.bi-device-ssd-fill::before { content: "\f6fa"; }
.bi-device-ssd::before { content: "\f6fb"; }
.bi-displayport-fill::before { content: "\f6fc"; }
.bi-mortarboard-fill::before { content: "\f6fd"; }
.bi-mortarboard::before { content: "\f6fe"; }
.bi-terminal-x::before { content: "\f6ff"; }
.bi-arrow-through-heart-fill::before { content: "\f700"; }
.bi-arrow-through-heart::before { content: "\f701"; }
.bi-badge-sd-fill::before { content: "\f702"; }
.bi-badge-sd::before { content: "\f703"; }
.bi-bag-heart-fill::before { content: "\f704"; }
.bi-bag-heart::before { content: "\f705"; }
.bi-balloon-fill::before { content: "\f706"; }
.bi-balloon-heart-fill::before { content: "\f707"; }
.bi-balloon-heart::before { content: "\f708"; }
.bi-balloon::before { content: "\f709"; }
.bi-box2-fill::before { content: "\f70a"; }
.bi-box2-heart-fill::before { content: "\f70b"; }
.bi-box2-heart::before { content: "\f70c"; }
.bi-box2::before { content: "\f70d"; }
.bi-braces-asterisk::before { content: "\f70e"; }
.bi-calendar-heart-fill::before { content: "\f70f"; }
.bi-calendar-heart::before { content: "\f710"; }
.bi-calendar2-heart-fill::before { content: "\f711"; }
.bi-calendar2-heart::before { content: "\f712"; }
.bi-chat-heart-fill::before { content: "\f713"; }
.bi-chat-heart::before { content: "\f714"; }
.bi-chat-left-heart-fill::before { content: "\f715"; }
.bi-chat-left-heart::before { content: "\f716"; }
.bi-chat-right-heart-fill::before { content: "\f717"; }
.bi-chat-right-heart::before { content: "\f718"; }
.bi-chat-square-heart-fill::before { content: "\f719"; }
.bi-chat-square-heart::before { content: "\f71a"; }
.bi-clipboard-check-fill::before { content: "\f71b"; }
.bi-clipboard-data-fill::before { content: "\f71c"; }
.bi-clipboard-fill::before { content: "\f71d"; }
.bi-clipboard-heart-fill::before { content: "\f71e"; }
.bi-clipboard-heart::before { content: "\f71f"; }
.bi-clipboard-minus-fill::before { content: "\f720"; }
.bi-clipboard-plus-fill::before { content: "\f721"; }
.bi-clipboard-pulse::before { content: "\f722"; }
.bi-clipboard-x-fill::before { content: "\f723"; }
.bi-clipboard2-check-fill::before { content: "\f724"; }
.bi-clipboard2-check::before { content: "\f725"; }
.bi-clipboard2-data-fill::before { content: "\f726"; }
.bi-clipboard2-data::before { content: "\f727"; }
.bi-clipboard2-fill::before { content: "\f728"; }
.bi-clipboard2-heart-fill::before { content: "\f729"; }
.bi-clipboard2-heart::before { content: "\f72a"; }
.bi-clipboard2-minus-fill::before { content: "\f72b"; }
.bi-clipboard2-minus::before { content: "\f72c"; }
.bi-clipboard2-plus-fill::before { content: "\f72d"; }
.bi-clipboard2-plus::before { content: "\f72e"; }
.bi-clipboard2-pulse-fill::before { content: "\f72f"; }
.bi-clipboard2-pulse::before { content: "\f730"; }
.bi-clipboard2-x-fill::before { content: "\f731"; }
.bi-clipboard2-x::before { content: "\f732"; }
.bi-clipboard2::before { content: "\f733"; }
.bi-emoji-kiss-fill::before { content: "\f734"; }
.bi-emoji-kiss::before { content: "\f735"; }
.bi-envelope-heart-fill::before { content: "\f736"; }
.bi-envelope-heart::before { content: "\f737"; }
.bi-envelope-open-heart-fill::before { content: "\f738"; }
.bi-envelope-open-heart::before { content: "\f739"; }
.bi-envelope-paper-fill::before { content: "\f73a"; }
.bi-envelope-paper-heart-fill::before { content: "\f73b"; }
.bi-envelope-paper-heart::before { content: "\f73c"; }
.bi-envelope-paper::before { content: "\f73d"; }
.bi-filetype-aac::before { content: "\f73e"; }
.bi-filetype-ai::before { content: "\f73f"; }
.bi-filetype-bmp::before { content: "\f740"; }
.bi-filetype-cs::before { content: "\f741"; }
.bi-filetype-css::before { content: "\f742"; }
.bi-filetype-csv::before { content: "\f743"; }
.bi-filetype-doc::before { content: "\f744"; }
.bi-filetype-docx::before { content: "\f745"; }
.bi-filetype-exe::before { content: "\f746"; }
.bi-filetype-gif::before { content: "\f747"; }
.bi-filetype-heic::before { content: "\f748"; }
.bi-filetype-html::before { content: "\f749"; }
.bi-filetype-java::before { content: "\f74a"; }
.bi-filetype-jpg::before { content: "\f74b"; }
.bi-filetype-js::before { content: "\f74c"; }
.bi-filetype-jsx::before { content: "\f74d"; }
.bi-filetype-key::before { content: "\f74e"; }
.bi-filetype-m4p::before { content: "\f74f"; }
.bi-filetype-md::before { content: "\f750"; }
.bi-filetype-mdx::before { content: "\f751"; }
.bi-filetype-mov::before { content: "\f752"; }
.bi-filetype-mp3::before { content: "\f753"; }
.bi-filetype-mp4::before { content: "\f754"; }
.bi-filetype-otf::before { content: "\f755"; }
.bi-filetype-pdf::before { content: "\f756"; }
.bi-filetype-php::before { content: "\f757"; }
.bi-filetype-png::before { content: "\f758"; }
.bi-filetype-ppt::before { content: "\f75a"; }
.bi-filetype-psd::before { content: "\f75b"; }
.bi-filetype-py::before { content: "\f75c"; }
.bi-filetype-raw::before { content: "\f75d"; }
.bi-filetype-rb::before { content: "\f75e"; }
.bi-filetype-sass::before { content: "\f75f"; }
.bi-filetype-scss::before { content: "\f760"; }
.bi-filetype-sh::before { content: "\f761"; }
.bi-filetype-svg::before { content: "\f762"; }
.bi-filetype-tiff::before { content: "\f763"; }
.bi-filetype-tsx::before { content: "\f764"; }
.bi-filetype-ttf::before { content: "\f765"; }
.bi-filetype-txt::before { content: "\f766"; }
.bi-filetype-wav::before { content: "\f767"; }
.bi-filetype-woff::before { content: "\f768"; }
.bi-filetype-xls::before { content: "\f76a"; }
.bi-filetype-xml::before { content: "\f76b"; }
.bi-filetype-yml::before { content: "\f76c"; }
.bi-heart-arrow::before { content: "\f76d"; }
.bi-heart-pulse-fill::before { content: "\f76e"; }
.bi-heart-pulse::before { content: "\f76f"; }
.bi-heartbreak-fill::before { content: "\f770"; }
.bi-heartbreak::before { content: "\f771"; }
.bi-hearts::before { content: "\f772"; }
.bi-hospital-fill::before { content: "\f773"; }
.bi-hospital::before { content: "\f774"; }
.bi-house-heart-fill::before { content: "\f775"; }
.bi-house-heart::before { content: "\f776"; }
.bi-incognito::before { content: "\f777"; }
.bi-magnet-fill::before { content: "\f778"; }
.bi-magnet::before { content: "\f779"; }
.bi-person-heart::before { content: "\f77a"; }
.bi-person-hearts::before { content: "\f77b"; }
.bi-phone-flip::before { content: "\f77c"; }
.bi-plugin::before { content: "\f77d"; }
.bi-postage-fill::before { content: "\f77e"; }
.bi-postage-heart-fill::before { content: "\f77f"; }
.bi-postage-heart::before { content: "\f780"; }
.bi-postage::before { content: "\f781"; }
.bi-postcard-fill::before { content: "\f782"; }
.bi-postcard-heart-fill::before { content: "\f783"; }
.bi-postcard-heart::before { content: "\f784"; }
.bi-postcard::before { content: "\f785"; }
.bi-search-heart-fill::before { content: "\f786"; }
.bi-search-heart::before { content: "\f787"; }
.bi-sliders2-vertical::before { content: "\f788"; }
.bi-sliders2::before { content: "\f789"; }
.bi-trash3-fill::before { content: "\f78a"; }
.bi-trash3::before { content: "\f78b"; }
.bi-valentine::before { content: "\f78c"; }
.bi-valentine2::before { content: "\f78d"; }
.bi-wrench-adjustable-circle-fill::before { content: "\f78e"; }
.bi-wrench-adjustable-circle::before { content: "\f78f"; }
.bi-wrench-adjustable::before { content: "\f790"; }
.bi-filetype-json::before { content: "\f791"; }
.bi-filetype-pptx::before { content: "\f792"; }
.bi-filetype-xlsx::before { content: "\f793"; }
.bi-1-circle-fill::before { content: "\f796"; }
.bi-1-circle::before { content: "\f797"; }
.bi-1-square-fill::before { content: "\f798"; }
.bi-1-square::before { content: "\f799"; }
.bi-2-circle-fill::before { content: "\f79c"; }
.bi-2-circle::before { content: "\f79d"; }
.bi-2-square-fill::before { content: "\f79e"; }
.bi-2-square::before { content: "\f79f"; }
.bi-3-circle-fill::before { content: "\f7a2"; }
.bi-3-circle::before { content: "\f7a3"; }
.bi-3-square-fill::before { content: "\f7a4"; }
.bi-3-square::before { content: "\f7a5"; }
.bi-4-circle-fill::before { content: "\f7a8"; }
.bi-4-circle::before { content: "\f7a9"; }
.bi-4-square-fill::before { content: "\f7aa"; }
.bi-4-square::before { content: "\f7ab"; }
.bi-5-circle-fill::before { content: "\f7ae"; }
.bi-5-circle::before { content: "\f7af"; }
.bi-5-square-fill::before { content: "\f7b0"; }
.bi-5-square::before { content: "\f7b1"; }
.bi-6-circle-fill::before { content: "\f7b4"; }
.bi-6-circle::before { content: "\f7b5"; }
.bi-6-square-fill::before { content: "\f7b6"; }
.bi-6-square::before { content: "\f7b7"; }
.bi-7-circle-fill::before { content: "\f7ba"; }
.bi-7-circle::before { content: "\f7bb"; }
.bi-7-square-fill::before { content: "\f7bc"; }
.bi-7-square::before { content: "\f7bd"; }
.bi-8-circle-fill::before { content: "\f7c0"; }
.bi-8-circle::before { content: "\f7c1"; }
.bi-8-square-fill::before { content: "\f7c2"; }
.bi-8-square::before { content: "\f7c3"; }
.bi-9-circle-fill::before { content: "\f7c6"; }
.bi-9-circle::before { content: "\f7c7"; }
.bi-9-square-fill::before { content: "\f7c8"; }
.bi-9-square::before { content: "\f7c9"; }
.bi-airplane-engines-fill::before { content: "\f7ca"; }
.bi-airplane-engines::before { content: "\f7cb"; }
.bi-airplane-fill::before { content: "\f7cc"; }
.bi-airplane::before { content: "\f7cd"; }
.bi-alexa::before { content: "\f7ce"; }
.bi-alipay::before { content: "\f7cf"; }
.bi-android::before { content: "\f7d0"; }
.bi-android2::before { content: "\f7d1"; }
.bi-box-fill::before { content: "\f7d2"; }
.bi-box-seam-fill::before { content: "\f7d3"; }
.bi-browser-chrome::before { content: "\f7d4"; }
.bi-browser-edge::before { content: "\f7d5"; }
.bi-browser-firefox::before { content: "\f7d6"; }
.bi-browser-safari::before { content: "\f7d7"; }
.bi-c-circle-fill::before { content: "\f7da"; }
.bi-c-circle::before { content: "\f7db"; }
.bi-c-square-fill::before { content: "\f7dc"; }
.bi-c-square::before { content: "\f7dd"; }
.bi-capsule-pill::before { content: "\f7de"; }
.bi-capsule::before { content: "\f7df"; }
.bi-car-front-fill::before { content: "\f7e0"; }
.bi-car-front::before { content: "\f7e1"; }
.bi-cassette-fill::before { content: "\f7e2"; }
.bi-cassette::before { content: "\f7e3"; }
.bi-cc-circle-fill::before { content: "\f7e6"; }
.bi-cc-circle::before { content: "\f7e7"; }
.bi-cc-square-fill::before { content: "\f7e8"; }
.bi-cc-square::before { content: "\f7e9"; }
.bi-cup-hot-fill::before { content: "\f7ea"; }
.bi-cup-hot::before { content: "\f7eb"; }
.bi-currency-rupee::before { content: "\f7ec"; }
.bi-dropbox::before { content: "\f7ed"; }
.bi-escape::before { content: "\f7ee"; }
.bi-fast-forward-btn-fill::before { content: "\f7ef"; }
.bi-fast-forward-btn::before { content: "\f7f0"; }
.bi-fast-forward-circle-fill::before { content: "\f7f1"; }
.bi-fast-forward-circle::before { content: "\f7f2"; }
.bi-fast-forward-fill::before { content: "\f7f3"; }
.bi-fast-forward::before { content: "\f7f4"; }
.bi-filetype-sql::before { content: "\f7f5"; }
.bi-fire::before { content: "\f7f6"; }
.bi-google-play::before { content: "\f7f7"; }
.bi-h-circle-fill::before { content: "\f7fa"; }
.bi-h-circle::before { content: "\f7fb"; }
.bi-h-square-fill::before { content: "\f7fc"; }
.bi-h-square::before { content: "\f7fd"; }
.bi-indent::before { content: "\f7fe"; }
.bi-lungs-fill::before { content: "\f7ff"; }
.bi-lungs::before { content: "\f800"; }
.bi-microsoft-teams::before { content: "\f801"; }
.bi-p-circle-fill::before { content: "\f804"; }
.bi-p-circle::before { content: "\f805"; }
.bi-p-square-fill::before { content: "\f806"; }
.bi-p-square::before { content: "\f807"; }
.bi-pass-fill::before { content: "\f808"; }
.bi-pass::before { content: "\f809"; }
.bi-prescription::before { content: "\f80a"; }
.bi-prescription2::before { content: "\f80b"; }
.bi-r-circle-fill::before { content: "\f80e"; }
.bi-r-circle::before { content: "\f80f"; }
.bi-r-square-fill::before { content: "\f810"; }
.bi-r-square::before { content: "\f811"; }
.bi-repeat-1::before { content: "\f812"; }
.bi-repeat::before { content: "\f813"; }
.bi-rewind-btn-fill::before { content: "\f814"; }
.bi-rewind-btn::before { content: "\f815"; }
.bi-rewind-circle-fill::before { content: "\f816"; }
.bi-rewind-circle::before { content: "\f817"; }
.bi-rewind-fill::before { content: "\f818"; }
.bi-rewind::before { content: "\f819"; }
.bi-train-freight-front-fill::before { content: "\f81a"; }
.bi-train-freight-front::before { content: "\f81b"; }
.bi-train-front-fill::before { content: "\f81c"; }
.bi-train-front::before { content: "\f81d"; }
.bi-train-lightrail-front-fill::before { content: "\f81e"; }
.bi-train-lightrail-front::before { content: "\f81f"; }
.bi-truck-front-fill::before { content: "\f820"; }
.bi-truck-front::before { content: "\f821"; }
.bi-ubuntu::before { content: "\f822"; }
.bi-unindent::before { content: "\f823"; }
.bi-unity::before { content: "\f824"; }
.bi-universal-access-circle::before { content: "\f825"; }
.bi-universal-access::before { content: "\f826"; }
.bi-virus::before { content: "\f827"; }
.bi-virus2::before { content: "\f828"; }
.bi-wechat::before { content: "\f829"; }
.bi-yelp::before { content: "\f82a"; }
.bi-sign-stop-fill::before { content: "\f82b"; }
.bi-sign-stop-lights-fill::before { content: "\f82c"; }
.bi-sign-stop-lights::before { content: "\f82d"; }
.bi-sign-stop::before { content: "\f82e"; }
.bi-sign-turn-left-fill::before { content: "\f82f"; }
.bi-sign-turn-left::before { content: "\f830"; }
.bi-sign-turn-right-fill::before { content: "\f831"; }
.bi-sign-turn-right::before { content: "\f832"; }
.bi-sign-turn-slight-left-fill::before { content: "\f833"; }
.bi-sign-turn-slight-left::before { content: "\f834"; }
.bi-sign-turn-slight-right-fill::before { content: "\f835"; }
.bi-sign-turn-slight-right::before { content: "\f836"; }
.bi-sign-yield-fill::before { content: "\f837"; }
.bi-sign-yield::before { content: "\f838"; }
.bi-ev-station-fill::before { content: "\f839"; }
.bi-ev-station::before { content: "\f83a"; }
.bi-fuel-pump-diesel-fill::before { content: "\f83b"; }
.bi-fuel-pump-diesel::before { content: "\f83c"; }
.bi-fuel-pump-fill::before { content: "\f83d"; }
.bi-fuel-pump::before { content: "\f83e"; }
.bi-0-circle-fill::before { content: "\f83f"; }
.bi-0-circle::before { content: "\f840"; }
.bi-0-square-fill::before { content: "\f841"; }
.bi-0-square::before { content: "\f842"; }
.bi-rocket-fill::before { content: "\f843"; }
.bi-rocket-takeoff-fill::before { content: "\f844"; }
.bi-rocket-takeoff::before { content: "\f845"; }
.bi-rocket::before { content: "\f846"; }
.bi-stripe::before { content: "\f847"; }
.bi-subscript::before { content: "\f848"; }
.bi-superscript::before { content: "\f849"; }
.bi-trello::before { content: "\f84a"; }
.bi-envelope-at-fill::before { content: "\f84b"; }
.bi-envelope-at::before { content: "\f84c"; }
.bi-regex::before { content: "\f84d"; }
.bi-text-wrap::before { content: "\f84e"; }
.bi-sign-dead-end-fill::before { content: "\f84f"; }
.bi-sign-dead-end::before { content: "\f850"; }
.bi-sign-do-not-enter-fill::before { content: "\f851"; }
.bi-sign-do-not-enter::before { content: "\f852"; }
.bi-sign-intersection-fill::before { content: "\f853"; }
.bi-sign-intersection-side-fill::before { content: "\f854"; }
.bi-sign-intersection-side::before { content: "\f855"; }
.bi-sign-intersection-t-fill::before { content: "\f856"; }
.bi-sign-intersection-t::before { content: "\f857"; }
.bi-sign-intersection-y-fill::before { content: "\f858"; }
.bi-sign-intersection-y::before { content: "\f859"; }
.bi-sign-intersection::before { content: "\f85a"; }
.bi-sign-merge-left-fill::before { content: "\f85b"; }
.bi-sign-merge-left::before { content: "\f85c"; }
.bi-sign-merge-right-fill::before { content: "\f85d"; }
.bi-sign-merge-right::before { content: "\f85e"; }
.bi-sign-no-left-turn-fill::before { content: "\f85f"; }
.bi-sign-no-left-turn::before { content: "\f860"; }
.bi-sign-no-parking-fill::before { content: "\f861"; }
.bi-sign-no-parking::before { content: "\f862"; }
.bi-sign-no-right-turn-fill::before { content: "\f863"; }
.bi-sign-no-right-turn::before { content: "\f864"; }
.bi-sign-railroad-fill::before { content: "\f865"; }
.bi-sign-railroad::before { content: "\f866"; }
.bi-building-add::before { content: "\f867"; }
.bi-building-check::before { content: "\f868"; }
.bi-building-dash::before { content: "\f869"; }
.bi-building-down::before { content: "\f86a"; }
.bi-building-exclamation::before { content: "\f86b"; }
.bi-building-fill-add::before { content: "\f86c"; }
.bi-building-fill-check::before { content: "\f86d"; }
.bi-building-fill-dash::before { content: "\f86e"; }
.bi-building-fill-down::before { content: "\f86f"; }
.bi-building-fill-exclamation::before { content: "\f870"; }
.bi-building-fill-gear::before { content: "\f871"; }
.bi-building-fill-lock::before { content: "\f872"; }
.bi-building-fill-slash::before { content: "\f873"; }
.bi-building-fill-up::before { content: "\f874"; }
.bi-building-fill-x::before { content: "\f875"; }
.bi-building-fill::before { content: "\f876"; }
.bi-building-gear::before { content: "\f877"; }
.bi-building-lock::before { content: "\f878"; }
.bi-building-slash::before { content: "\f879"; }
.bi-building-up::before { content: "\f87a"; }
.bi-building-x::before { content: "\f87b"; }
.bi-buildings-fill::before { content: "\f87c"; }
.bi-buildings::before { content: "\f87d"; }
.bi-bus-front-fill::before { content: "\f87e"; }
.bi-bus-front::before { content: "\f87f"; }
.bi-ev-front-fill::before { content: "\f880"; }
.bi-ev-front::before { content: "\f881"; }
.bi-globe-americas::before { content: "\f882"; }
.bi-globe-asia-australia::before { content: "\f883"; }
.bi-globe-central-south-asia::before { content: "\f884"; }
.bi-globe-europe-africa::before { content: "\f885"; }
.bi-house-add-fill::before { content: "\f886"; }
.bi-house-add::before { content: "\f887"; }
.bi-house-check-fill::before { content: "\f888"; }
.bi-house-check::before { content: "\f889"; }
.bi-house-dash-fill::before { content: "\f88a"; }
.bi-house-dash::before { content: "\f88b"; }
.bi-house-down-fill::before { content: "\f88c"; }
.bi-house-down::before { content: "\f88d"; }
.bi-house-exclamation-fill::before { content: "\f88e"; }
.bi-house-exclamation::before { content: "\f88f"; }
.bi-house-gear-fill::before { content: "\f890"; }
.bi-house-gear::before { content: "\f891"; }
.bi-house-lock-fill::before { content: "\f892"; }
.bi-house-lock::before { content: "\f893"; }
.bi-house-slash-fill::before { content: "\f894"; }
.bi-house-slash::before { content: "\f895"; }
.bi-house-up-fill::before { content: "\f896"; }
.bi-house-up::before { content: "\f897"; }
.bi-house-x-fill::before { content: "\f898"; }
.bi-house-x::before { content: "\f899"; }
.bi-person-add::before { content: "\f89a"; }
.bi-person-down::before { content: "\f89b"; }
.bi-person-exclamation::before { content: "\f89c"; }
.bi-person-fill-add::before { content: "\f89d"; }
.bi-person-fill-check::before { content: "\f89e"; }
.bi-person-fill-dash::before { content: "\f89f"; }
.bi-person-fill-down::before { content: "\f8a0"; }
.bi-person-fill-exclamation::before { content: "\f8a1"; }
.bi-person-fill-gear::before { content: "\f8a2"; }
.bi-person-fill-lock::before { content: "\f8a3"; }
.bi-person-fill-slash::before { content: "\f8a4"; }
.bi-person-fill-up::before { content: "\f8a5"; }
.bi-person-fill-x::before { content: "\f8a6"; }
.bi-person-gear::before { content: "\f8a7"; }
.bi-person-lock::before { content: "\f8a8"; }
.bi-person-slash::before { content: "\f8a9"; }
.bi-person-up::before { content: "\f8aa"; }
.bi-scooter::before { content: "\f8ab"; }
.bi-taxi-front-fill::before { content: "\f8ac"; }
.bi-taxi-front::before { content: "\f8ad"; }
.bi-amd::before { content: "\f8ae"; }
.bi-database-add::before { content: "\f8af"; }
.bi-database-check::before { content: "\f8b0"; }
.bi-database-dash::before { content: "\f8b1"; }
.bi-database-down::before { content: "\f8b2"; }
.bi-database-exclamation::before { content: "\f8b3"; }
.bi-database-fill-add::before { content: "\f8b4"; }
.bi-database-fill-check::before { content: "\f8b5"; }
.bi-database-fill-dash::before { content: "\f8b6"; }
.bi-database-fill-down::before { content: "\f8b7"; }
.bi-database-fill-exclamation::before { content: "\f8b8"; }
.bi-database-fill-gear::before { content: "\f8b9"; }
.bi-database-fill-lock::before { content: "\f8ba"; }
.bi-database-fill-slash::before { content: "\f8bb"; }
.bi-database-fill-up::before { content: "\f8bc"; }
.bi-database-fill-x::before { content: "\f8bd"; }
.bi-database-fill::before { content: "\f8be"; }
.bi-database-gear::before { content: "\f8bf"; }
.bi-database-lock::before { content: "\f8c0"; }
.bi-database-slash::before { content: "\f8c1"; }
.bi-database-up::before { content: "\f8c2"; }
.bi-database-x::before { content: "\f8c3"; }
.bi-database::before { content: "\f8c4"; }
.bi-houses-fill::before { content: "\f8c5"; }
.bi-houses::before { content: "\f8c6"; }
.bi-nvidia::before { content: "\f8c7"; }
.bi-person-vcard-fill::before { content: "\f8c8"; }
.bi-person-vcard::before { content: "\f8c9"; }
.bi-sina-weibo::before { content: "\f8ca"; }
.bi-tencent-qq::before { content: "\f8cb"; }
.bi-wikipedia::before { content: "\f8cc"; }

/**
 * @license
 *
 * Font Family: Public Sans
 * Designed by: Pablo Impallari, Rodrigo Fuenzalida, Dan Williams, USWDS
 * URL: https://www.fontshare.com/fonts/public-sans
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Public Sans Variable(Variable font)
 * Public Sans Variable Italic(Variable font)
 * Public Sans Thin
 * Public Sans Thin Italic
 * Public Sans Extra Light
 * Public Sans Extra Light Italic
 * Public Sans Light
 * Public Sans Light Italic
 * Public Sans Regular
 * Public Sans Italic
 * Public Sans Medium
 * Public Sans Medium Italic
 * Public Sans Semi Bold
 * Public Sans Semi Bold Italic
 * Public Sans Bold
 * Public Sans Bold Italic
 * Public Sans Extra Bold
 * Public Sans Extra Bold Italic
 * Public Sans Black
 * Public Sans Black Italic
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 100.0;
*
* available axes:

* 'wght' (range from 100.0 to 900.0)

*/

@font-face {
  font-family: 'PublicSans-Variable';
  src: url('../fonts/public_sans/PublicSans-Variable.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Variable.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Variable.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 100.0;
*
* available axes:

* 'wght' (range from 100.0 to 900.0)

*/

@font-face {
  font-family: 'PublicSans-VariableItalic';
  src: url('../fonts/public_sans/PublicSans-VariableItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-VariableItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-VariableItalic.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Thin';
  src: url('../fonts/public_sans/PublicSans-Thin.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Thin.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Thin.ttf') format('truetype');
       font-weight: 100;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-ThinItalic';
  src: url('../fonts/public_sans/PublicSans-ThinItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-ThinItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-ThinItalic.ttf') format('truetype');
       font-weight: 100;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-ExtraLight';
  src: url('../fonts/public_sans/PublicSans-ExtraLight.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-ExtraLight.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-ExtraLight.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-ExtraLightItalic';
  src: url('../fonts/public_sans/PublicSans-ExtraLightItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-ExtraLightItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-ExtraLightItalic.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Light';
  src: url('../fonts/public_sans/PublicSans-Light.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Light.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-LightItalic';
  src: url('../fonts/public_sans/PublicSans-LightItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-LightItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-LightItalic.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Regular';
  src: url('../fonts/public_sans/PublicSans-Regular.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Regular.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-Italic';
  src: url('../fonts/public_sans/PublicSans-Italic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Italic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Italic.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Medium';
  src: url('../fonts/public_sans/PublicSans-Medium.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Medium.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-MediumItalic';
  src: url('../fonts/public_sans/PublicSans-MediumItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-MediumItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-MediumItalic.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-SemiBold';
  src: url('../fonts/public_sans/PublicSans-SemiBold.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-SemiBold.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-SemiBold.ttf') format('truetype');
       font-weight: 600;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-SemiBoldItalic';
  src: url('../fonts/public_sans/PublicSans-SemiBoldItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-SemiBoldItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-SemiBoldItalic.ttf') format('truetype');
       font-weight: 600;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Bold';
  src: url('../fonts/public_sans/PublicSans-Bold.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Bold.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-BoldItalic';
  src: url('../fonts/public_sans/PublicSans-BoldItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-BoldItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-BoldItalic.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-ExtraBold';
  src: url('../fonts/public_sans/PublicSans-ExtraBold.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-ExtraBold.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-ExtraBold.ttf') format('truetype');
       font-weight: 800;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-ExtraBoldItalic';
  src: url('../fonts/public_sans/PublicSans-ExtraBoldItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-ExtraBoldItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-ExtraBoldItalic.ttf') format('truetype');
       font-weight: 800;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'PublicSans-Black';
  src: url('../fonts/public_sans/PublicSans-Black.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-Black.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-Black.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'PublicSans-BlackItalic';
  src: url('../fonts/public_sans/PublicSans-BlackItalic.woff2') format('woff2'),
       url('../fonts/public_sans/PublicSans-BlackItalic.woff') format('woff'),
       url('../fonts/public_sans/PublicSans-BlackItalic.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: italic;
}



.view--animating{
	box-shadow: var(--style-box-shadow-4);
}


.view--animating,
.view--animating .page-transition-target{
 	animation-duration: .4s;
 	pointer-events: none;
}


.view--animating,
.view--animating .page-transition-target--scroll{
	overflow: hidden;
	min-height: 100vh;
}




/* 
	If there is a "page-transition-target" inside the view, we must animate that
	so that fixed elements remain fixed relative to the view port and not the 
	transitioning view due to fixed children now being fixed to the parent
	when it has the translate applied
*/


/* >>> */
.view__in-back,
.view__in-back .page-transition-target{
	animation-name: viewInBack;
}

.view__in-back:has(.page-transition-target){
	animation: none;
}


/* <<< */
.view__out-back,
.view__out-back .page-transition-target{
	position: fixed;
	inset: 0;
	animation-name: viewOutBack;
	z-index: 1;
}

.view__out-back:has(.page-transition-target){
	animation: none;
}


/* >>> */
.view__in-forward,
.view__in-forward .page-transition-target{
	animation-name: viewInForward;
}

.view__in-forward:has(.page-transition-target){
	animation: none;
}


/* <<< */
.view__out-forward{
	inset: 0;
	position: fixed;
}

.view__out-forward,
.view__out-forward .page-transition-target{
	animation-name: viewOutForward;
}

.view__out-forward:has(.page-transition-target){
	animation: none;
}




@keyframes viewInBack {
  0% { transform: translateX(-48px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes viewOutBack {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(48px); opacity: 0; }
}


@keyframes viewInForward {
  0% { transform: translateX(48px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1;}
}

@keyframes viewOutForward {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-48px); opacity: 0; }
}


@media (max-width: 768px) {
	.view--animating{
		background-color: var(--color-grey-200);
	}

  @keyframes viewInBack {
	  0% { transform: translateX(-50%); opacity: 0; }
	  100% { transform: translateX(0); opacity: 1; }
	}

	@keyframes viewOutBack {
	  0% { transform: translateX(0); opacity: 1; }
	  100% { transform: translateX(100%); opacity: 1; }
	}


	@keyframes viewInForward {
	  0% { transform: translateX(100%); }
	  100% { transform: translateX(0); }
	}

	@keyframes viewOutForward {
	  0% { transform: translateX(0); opacity: 1; }
	  100% { transform: translateX(-50%); opacity: 0; }
	}
}

.avatar-group{
	display: flex;
}

.avatar-group l-avatar + l-avatar{
	margin-left: -4px;
	border-radius: 50%;
	outline: solid 2px var(--color-white);
}

.avatar-group l-avatar[size="sm"] + l-avatar[size="sm"]{
	margin-left: -2px;
}

.avatar-group l-avatar[size="xs"] + l-avatar[size="xs"]{
	margin-left: -4px;
	outline: solid 1px var(--color-white);
}
.badge{
	display: inline-block;
	padding: 2px 4px;
	border-radius: 4px;

	color: #fff;
	font-size: 12px;
	line-height: 14px;
	font-weight: normal;

	color: var(--color-primary-text);
	background-color: var(--color-grey-300);
}

.badge--wide{
	padding: 2px 6px;
}

.badge--purple{
	background-color: var(--color-purple-200);	
}

a{
  text-decoration: none;
}

a.button,
button {
  position: relative;
  padding: 8px 16px;
  backface-visibility: hidden;
  background: var(--color-blue-600);
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;

  font-size:  16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  
  transition: padding 150ms;

  user-select: none;
  touch-action: manipulation;
}





/* Sizes */
a.button.sm,
button.sm{
  padding: 2px 12px;
  font-size: 14px;
  font-weight: normal;
}

button.no-style{
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-primary-text);
}

button.circle{
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;

  line-height: 40px;
  text-align: center;
}

button.outline{
  color: var(--color-grey-700);
  background: none;
  border: solid 1px var(--color-grey-300);
  border: 1px solid var(--color-border);
}

button.outline:hover{
  color: var(--color-grey-700);
  background-color: var(--color-grey-100);
  border: solid 1px var(--color-grey-400);
}

button.full-width{
  width: 100%;
}

button:disabled {
  
}

button:not(:disabled):hover {
  
}



/* Hovers */
a.button:not(.no-style, .circle, .outline):hover,
button:not(.no-style, .circle, .outline):hover {
  background-color: var(--color-blue-700);
}


a.button.secondary,
button.secondary{
  color: var(--color-grey-700);
  background-color: var(--color-grey-200);
}

a.button.secondary:hover,
button.secondary:hover{
  background-color: var(--color-grey-300); 
}

a.button.danger,
button.danger{
  color: var(--color-rose-700);
  background-color: var(--color-rose-200);
}

a.button.danger:hover,
button.danger:hover{
  background-color: var(--color-rose-300); 
}



a.button.primary-light,
button.primary-light{
  color: var(--color-blue-800);
  background-color: var(--color-blue-100);
}

a.button.primary-light:hover,
button.primary-light:hover{
  color: var(--color-blue-800);
  background-color: var(--color-blue-200);
}




button.option{
  display: block;
  min-width: 120px;
  padding: 8px;
  background: none;
  border: none;
  
  text-align: left;
  color: var(--color-primary-text);
}


button.option:hover{
  background: var(--color-grey-100);
}


/* Loading */
button.loading{
  position: relative;
  padding-right: 40px;
}

button.loading:after{
  content: '';
  position: absolute;
  box-sizing: border-box;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: solid 2px rgba(255,255,255,.4);
  border-top: solid 2px #fff;

  animation: button-loading-spin 500ms infinite linear;
}

button.secondary.loading:after{
  border: solid 2px var(--color-grey-300);
  border-top: solid 2px var(--color-grey-500);
}

button.primary-light.loading:after{
  border: solid 2px var(--color-blue-300);
  border-top: solid 2px var(--color-blue-500);
}

a.button.sm.loading,
button.sm.loading{
  padding-right: 32px;
}

a.button.sm.loading:after,
button.sm.loading:after{
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}

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



/* Button icon */
button:has(.button__icon-round){
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.button__icon-round{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(0,0,0,.05);
}


/* Floating */
.button.floating-cta{
  position: fixed;
  padding: 0;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  
  line-height: 48px;
  text-align: center;
  border-radius: 24px;
}


a.button .button__count,
button .button__count{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  
  background-color: var(--color-indigo-500);
  border-radius: 9px;

  font-size: 10px;
  text-align: center;
  line-height: 18px;
  color: var(--color-white);
}

.button-group{
	display: flex;
	padding: 4px;
	border-radius: 12px;
	background-color: var(--color-grey-200);
}

.button-group button{
	flex: 1;
}

.button-group button + button{
	border-left: solid 1px var(--color-grey-200);
}

.button-group button:first-of-type{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0
}

.button-group button:last-of-type{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0
}

.button-group button:not(:last-of-type,:first-of-type){
	border-radius: 0;
}

.button-group button.selected{
	background-color: var(--color-primary-dark);
}

.button-group button.secondary.selected{
	color: var(--color-primary-text);
	background-color: var(--color-white);
}


.popover__button-group button{
	width: 100%;
}


@media(max-width: 576px){
	.popover__button-group{
		background-color: var(--color-white);
	}

	.popover__button-group + .popover__button-group{
		border-top: solid 1px var(--color-grey-200);
	}

	.popover__button-group button{
		width: 100%;
		border-radius: 0;
		line-height: 34px;
	}

	.popover__button-group button:first-of-type{
		border-radius: 4px 4px 0 0;
	}

	.popover__button-group button:last-of-type{
		border-radius: 0 0 4px 4px;
	}

	.popover__button-group a{
		display: block;
	}

	.popover__button-group a + a,
	.popover__button-group button + button{
		border-top: solid 1px var(--color-grey-200);
	}
}

.card{
	padding: 16px;
	background-color: var(--color-white);
	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
}

.card--no-padding{
	padding: 0;
}



.confirm__body{

}

.confirm__footer{
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.confirm__footer button{
	padding-left: 24px;
	padding-right: 24px;
}


@media(max-width: 576px){

}

.donut {
  --deg: calc(var(--percent) * 3.6deg);
  
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 3px var(--color);
  box-sizing: border-box;
  mask-image: conic-gradient(black var(--deg), rgba(0,0,0,.3) var(--deg) 360deg);
}


/*
|
|
| Jigsoar form styles
|
|
*/
.form-line + .form-line{
  margin-top: 16px;
}

.form-line + .form-heading{
  margin-top: 16px;
}

.form-heading + .form-line{
  margin-top:  8px;
}

.form-line--right{
  text-align: right;
}

.form-line--flex{
  display: flex;
  gap: 8px;
}

.form-line__col{
  flex: 1;
}

.form-line--row{
  display: flex;
}

.form-line.form-line--row > label{
  font-size:  14px;
  width: 132px;
  flex-shrink: 0;
  line-height: 40px;
}

.form-line.form-line--row > .form-row{
  flex: 1;
}


/* Mobile */
@media(max-width: 540px){
  .form-line--row{
    display: block;
  }
}


.form-heading{
  font-weight: bold;
}


.form-line-break{
  border-top: solid 1px #000;
  padding-top: 16px;
  margin-top: 8px;
}

.form-row{
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-row > div{
  flex: 1;
}

.form-row > input{
  flex: 1;
}

.form-line label{
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 400;
}

.form-line input:where([type="email"],[type="number"],[type="search"],[type="text"],[type="tel"],[type="url"],[type="password"],[type="date"],[type="time"]),
.form-line select,
.form-line textarea{
  width: 100%;
}

input[type="file"]{
  cursor: pointer;
}

textarea.description{
  padding: 4px 8px;
  background-color: var(--color-yellow-50);
  border: solid 1px var(--color-yellow-200);
  box-sizing: border-box;
}

textarea.description:focus{
  outline: none;
  border: solid 1px var(--color-yellow-400);
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  height: 40px;
  padding: 4px 8px;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  /* font-family: 'publicsans-variable', sans-serif; */
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  line-height: 24px;
}

input.sm{
  height: 30px;
  line-height: 24px;
  border-radius: 8px;
}

input:focus{
  outline: none;
  box-shadow: inset 0 2px 4px var(--color-grey-200);
  border-color: var(--color-blue-300);
}

input.title-field{
  height: auto;
  border: none;
  padding: 8px;
  font-size:  24px;
  font-weight: bold;
  border-radius: 8;
  border: solid 1px var(--color-grey-400);
  background-color: var(--color-grey-50);
}

input.title-field:focus{
  border-color: var(--color-blue-400);
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  cursor: pointer;
}

textarea {
  min-height: 80px;
  resize: none;
}


/* Radio option */
.form__radio-option{
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

.form__radio-option input{
  margin: 0;
}

.form__radio-option label{
  margin: 0;
  font-size: 16px;
  cursor: pointer;
}


/* Input group*/
.input-group{
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.input-group__text{
  padding: 0 8px;
  line-height: 40px;
  text-align: center;

  border-right: solid 1px var(--color-border);
  border-radius: 4px 0 0 4px;
  background-color: var(--color-grey-200);
}

.input-group input{
  border: none;
}

.input-group .input-group__text + input{
  flex: 1;
  border-radius: 0 4px 4px 0;
}


.label{
	padding: 4px 8px;
	border-radius: 4px;
	font-size:  14px;
	line-height: 12px;
	background-color: var(--color-grey-400);
}

.label > .label{
	margin-left: 8px;
}

.label--red{
	color: #fff;
	background-color: #F67979;
}

:root {
    line-height: 1.4;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

html{
	background-color: #F3F3F3;
	background-color: var(--color-grey-200);
}

body{
	padding: 0;
	margin: 0;
	font-family: var(--font-sans-serif);
	background-color: var(--color-grey-200);
	overflow-y: scroll;
	transition: background 300ms;
}

#app:has(.view--animating){
	overflow: hidden;
}

.app--show{
	display: block;
}

.app--slide-in{
	animation-name: app-slide-in;
	animation-duration: 1s;
}

@keyframes app-slide-in{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}




/* Page */
.page__head{
	padding: 24px;
	padding-left: 96px;
	background-color: var(--color-grey-100);
	box-shadow: var(--style-box-shadow-1);
}

.page__body{
	padding: 24px;
	padding-left: 96px;
}

.page__section{
	margin-bottom: 48px;
}

.page__container{
	max-width: 960px;
	margin: 0 auto;
}

.page__col-1{ flex: 1; }
.page__col-2{ flex: 2; }
.page__col-3{ flex: 3; }
.page__col-4{ flex: 4; }
.page__col-5{ flex: 5; }
.page__col-6{ flex: 6; }
.page__col-7{ flex: 7; }
.page__col-8{ flex: 8; }
.page__col-9{ flex: 9; }
.page__col-10{ flex: 10; }
.page__col-11{ flex: 11; }
.page__col-12{ flex: 12; }



.page__section h2 i{
	color: var(--color-grey-600);
}

@media(max-width: 768px){
	.page__head{
		padding: 16px;
	}

	.page__head h1{
		font-size: var(--heading-size-md);
		text-align: center;
	}

	.page__body{
		padding: 16px 16px 80px 16px;
	}
}

@media(max-width: 576px){
	.page__head h1{
		font-size: var(--heading-size-sm);
	}
}
.logo{
	display: flex;
	align-items: center;
	font-weight: bold;
}

.logo-back{
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 6px;
	background-color: var(--color-grey-800);
}

.logo-back:hover{
	background-size: 150%;
}

.logo-front{
	width: 36px;
	height: 36px;
	margin: 2px;
	background-image: url('../images/logo_front.png');
	background-size: cover;
}



.logo--lg .logo-back{
	width: 80px;
	height: 80px;
	border-radius: 12px;
}

.logo--lg .logo-front{
	width: 72px;
	height: 72px;
	margin: 4px;
}

/* Document */

/* Mobile */
@media(max-width: 540px){
	body.has-modal{
		overflow: hidden;
	}
}



/* Modal */
.modal{
	display: none;
	box-shadow: var(--style-box-shadow-5);
	background-color: #fff;
	border-radius: 16px;
	border: solid 1px rgba(0, 0, 0, .1);
	max-height: 90dvh;

	overflow: auto;
	overscroll-behavior-block: contain;
  z-index: 1;

  animation-duration: 300ms;
}

.modal::-webkit-scrollbar {
  width: 8px;
}
 
.modal::-webkit-scrollbar-track {
  background: none;
}
 
.modal::-webkit-scrollbar-thumb {
  background-color: var(--color-grey-500);
  border-radius: 4px;
}


.modal__head{
	padding: 24px 16px;
}

.modal__head--light{
	background-color: var(--color-grey-50);
	border-bottom: solid 1px var(--color-grey-200);
}

.modal__head-primary{
	font-weight: bold;
}

.modal__head-secondary{
	margin-top: 4px;
	color: var(--color-secondary-text);
	font-size: var(--body-size-xs);
}



.modal__body{
	min-width: 360px;
	padding: 16px;
}


.modal__body--sm{
	max-width: 360px;
}




.modal__footer{
	padding:  16px;
	text-align: right;
}



.modal__container{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 16px 0;
	inset: 0;

	z-index: 100;
}

.modal__container:has(.panel) {
	overflow: hidden;
}

.modal__background{
	display: none;
	position: absolute;
	inset: 0;
	margin-top: -64px;
	background-color: rgba(255, 255, 255, .6);
  animation-duration: 300ms;
		
	background-color: rgba(220, 220, 220, .3);
}

@media(min-width: 540px){
	.modal__background{
		backdrop-filter: blur(4px); 
		-webkit-backdrop-filter: blur(4px);
	}
}


/* Animation trigger states */
.modal__container--open .modal{
	display: block;
	animation-name: modal_open;
}

.modal__container--open .modal__background{
	display: block;
	animation-name: modal_background_open;
}


.modal__container--closing .modal{
	animation-name: modal_close;
}

.modal__container--closing .modal__background{
	opacity: 0;
	animation-name: modal_background_close;
}




/* Panel variant - Only styled differently on large screens */
@media(min-width: 540px){
	.modal.panel{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		max-height: none;

		border: none;
		border-left: solid 1px var(--color-grey-400);
		border-radius: 0;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 25px -5px, rgba(0, 0, 0, 0.07) 0px 0px 10px -5px;
	}

	.modal__container--open .modal.panel{
		animation-name: panel_open;
	}

	.modal__container--closing .modal.panel{
		animation-name: panel_close;
	}

	.modal__container:has(.panel) .modal__background{
		
	}
}



/* Mobile */
@media(max-width: 540px){
	.modal__container{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		padding: 0;

		width: 100dvw;
		height: 100dvh;
		z-index: 110;
		overflow: hidden;
	}

	.modal{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 90dvh;

		border: none;
		border-radius: 16px 16px 0 0;
  	animation-duration: 400ms;
	}

	.modal__body{
		min-width: none;
	}

	.modal__body--sm{
		max-width: none;
	}

	.modal__background{
		background-color: rgba(0, 0, 0, .3);
	}

	.modal__container--standalone .modal{
		padding-bottom: 32px;
	}
}


/* Open/close modal animations */
@keyframes modal_open{
	from{
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
	to{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes panel_open{
	from{
		transform: translate3d(100%, 0, 0);
	}
	to{
		transform: translate3d(0, 0, 0);
	}
}

@keyframes modal_close{
	from{
		opacity: 1;
		transform: translate3d(0, 0, 0);	
	}
	to{
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
}

@keyframes panel_close{
	from{
		transform: translate3d(0, 0, 0);	
	}
	to{
		transform: translate3d(100%, 0, 0);
	}
}


@media(max-width: 576px){
	@keyframes modal_open{
		from{
			transform: translate3d(0, 100%, 0);
		}
		to{
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes modal_close{
		from{
			transform: translate3d(0, 0, 0);	
		}
		to{
			transform: translate3d(0, 100%, 0);
		}
	}

}


/* Open/close modal background animations */
@keyframes modal_background_open{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes modal_background_close{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}



/* Confirm */
.modal__confirm-text{
	min-width: 240px;
	max-width: 420px;
	line-height: 32px;
	text-align: center;
}





/* Secondary nav lists */
.secondary-nav__item{
	display: flex;
	gap: 8px;
	align-items: center;
}


.secondary-nav__icon{
	flex: 0 0;
}


.secondary-nav__text{
	flex: 1;
}


@media(max-width: 540px){
	.secondary-nav__item{
		text-align: center;
		flex-direction: column;
		gap: 0;
	}

	.secondary-nav__text{
		font-size: var(--body-size-xxs);
		line-height: 12px;
	}

	.secondary-nav__item .badge{
		position: absolute;
		top: 2px;
		right: 2px;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		padding: 0;
		line-height: 16px;
		text-align: center;
		font-size: var(--body-size-xxs);
	}
}






.logo{
	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: #f1b480;

	font-size: var(--heading-size-sm);
}

.side-nav{
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 16px;

	top: 0;
	left: 0;
	bottom: 0;
	width: 40px;
	padding: 16px;
	
	border-right: solid 1px var(--color-grey-400);
	box-shadow: var(--style-box-shadow-5);
	background-color: rgba(255, 255, 255, .3);

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	z-index: 10;
}

.side-nav__spacer{
	flex: 1;
}

.side-nav__link,
.side-nav button{
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 40px;
	height: 40px;

	color: var(--color-grey-800);
	text-align: center;
	line-height: 40px;

	border-radius: 8px;
}

.side-nav a.active{
	color: var(--color-white);
	background-color: var(--color-grey-800);
}



/* Mobile */
.mobile-nav{
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: var(--color-grey-900);
	z-index: 100;
}

.mobile-nav__items{
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav__items a{
	width: 56px;
	height: 56px;

	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 8px;
}

.mobile-nav__items a.active{
	color: var(--color-white);
	background-color: var(--color-grey-900);
}


/* Feeds */
.mobile-nav__feeds{
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 8px 0;

	border-bottom: solid 1px var(--color-grey-900);
}

.mobile-nav__feeds a{
	color: var(--color-white);
}

.mobile-nav__feeds a.active{
	color: var(--color-indigo-300);
	font-weight: 700;
	text-shadow: 0 0 4px var(--color-indigo-600);
}


/* Mobile header */
.mobile-header{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

button.mobile-header__back{
	padding: 0;
	width: 40px;
	height: 40px;

	font-size: 28px;
	text-align: center;
	line-height: 40px;
}


/* Show hide */
@media (max-width: 768px) {
	.side-nav{
		display: none;
	}

	.mobile-nav{
		display: block;
		position: fixed;
	}

	.mobile-header{
		display: block;
	}
}

.mobile-show{
	display: none;
}

@media(max-width: 540px){
	.mobile-hide{
		display: none;
	}

	.mobile-show{
		display: block;
	}
}
body *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
 
body *::-webkit-scrollbar-track {
  background: none;
}
 
body *::-webkit-scrollbar-thumb {
  background-color: var(--color-grey-500);
  border-radius: 4px;
}

.tooltip{
	position: fixed;
	padding: 8px 12px;
	max-width: 240px;
	white-space: pre;
	border-radius: 8px;

	color: var(--color-white);
	font-size: var(--body-size-sm);
	background-color: var(--color-grey-700);
	z-index: 100;

	box-shadow: var(--style-box-shadow-4);

	animation-name: tooltip_open;
	animation-duration: 160ms;
}

.tooltip--closing{
	animation-name: tooltip_close;
}

@keyframes tooltip_open{
	from{
		opacity: 0;
		transform: translate3d(0, 3px, 0);
	}
	to{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes tooltip_close{
	from{
		opacity: 1;
		transform: translate3d(0, 0, 0);	
	}
	to{
		opacity: 0;
		transform: translate3d(0, 3px, 0);
	}
}


a{
	color: var(--color-primary);
	cursor: pointer;
}


span.secondary{
	color: var(--color-secondary-text);
}


h1{
	font-size: var(--heading-size-xl);
}

h2{
	font-size: var(--heading-size-lg);
}

h3{
	font-size: var(--heading-size-md);
}

h4{
	font-size: var(--heading-size-sm);
}

h5{
	font-size: var(--heading-size-xs);
}

h6{
	font-size: var(--heading-size-xxs);
}

.user{
	display: flex;
	align-items: center;
	gap: 8px;

	text-align: left;
}

.user__name{
	min-width: 240px;
}

.account__layout{
	display: flex;
	gap: 32px;
	max-width: 720px;
	margin: 0 auto;
}

.account__left-col{
	flex: 0 0 240px;
}

.account__right-col{
	flex: 1;
}

button.account__sign-out{
	margin-top: 16px;
	padding-left: 20px;
}

button.account__sign-out--mobile{
	margin-top: 16px;
	width: 100%;
	text-align: center;
	display: none;
}


@media(max-width: 576px){
	.account__layout{
		gap: 16px;
		flex-direction: column;
	}

	.account__right-col{
		padding-bottom: 64px;
	}

	.account__left-col{
		flex: 0;
	}

	.account__left-col button.account__sign-out{
		display: none;
	}

	button.account__sign-out--mobile{
		display: block;
	}
}


/* Account buttons -- maybe card buttons? */
.account__buttons{
	border-radius: 8px;
	overflow: hidden;
}

.account__buttons button{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	line-height: 34px;
	width: 100%;
	border-radius: 0;
}

.account__buttons button:hover{
	background-color: var(--color-grey-50);
}

.account__buttons button + button{
	border-top: solid 1px var(--color-grey-200);
}


/* Avatar */
.account__avatar-section{
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}

.account__avatar-wrap{
	flex: 1;
}



/* Sessions*/
.account__sessions{

}

.account__session,
.account__linked-account{
	display: flex;
	align-items: center;
	gap: 16px;
}

.account__session + .account__session,
.account__linked-account + .account__linked-account{
	margin-top: 16px;
}

.account__session-icon,
.account__linked-account-icon{
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--color-grey-50);
	
	font-size: 24px;
	text-align: center;
	line-height: 40px;
}

.account__linked-account-icon{
	color: var(--color-white);
	background-color: var(--color-grey-600);
}

.account__session-details,
.account__linked-account-details{
	flex: 1;
}

.account__session-description{

}

.account__linked-account-name{
	text-transform: capitalize;
}

.account__session-activity,
.account__linked-account-activity{
	color: var(--color-secondary-text);
	font-size: var(--body-size-xs);
}


/* Link modal */
.account__add-link-alert{
	max-width: 320px;
}

.account__add-link-button-wrap{
	width: 320px;
	height: 40px;
	margin: 16px 0 0 0;
	background-color: var(--color-grey-50);
	border-radius: 4px;
}



/* Update password modal */
.account__update-password{
	width: 420px;
}

@media(max-width: 576px){
	.account__update-password{
		width: auto;
	}
}
.calendar{
	
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
#
# Side column / fixed
#
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.calendar__side{
	position: fixed;
	top: 8px;
	left: 80px;
	bottom: 8px;
	width: 280px;

	background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

	box-shadow: var(--style-box-shadow-2);
	border-radius: 8px;
}

.calendar__side-section{
	padding: 16px;
}

.calendar__side-header{
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin: 0 0 8px 0;
	padding: 0 0 8px 0;

	border-bottom: solid 1px var(--color-grey-300);
}

.calendar__side-header h3{
	font-size: var(--heading-size-xs);
	font-weight: bold;
	margin: 0;
}

.calendar__category{
	display: block;
	font-weight: normal;
}



@media(max-width: 770px){
	.calendar__side{
		left: 8px;
	}
}

@media(max-width: 640px){
	.calendar__side{
		display: none;
	}
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
#
# Main column
#
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.calendar__main{
	flex: 1;
	margin-left: 360px;
	padding: 0 20px 20px 20px;
	min-width: 0;
}

.calendar__head{
	position: fixed;
	top: 0;
	left: 368px;
	right: 8px;

	display: flex;
	justify-content: space-between;
	align-items: center;
	
	max-width: 800px;
	margin: 0 auto;
	padding: 16px;
	border-bottom: solid 1px var(--color-grey-400);
	background-color: var(--color-grey-200);
	z-index: 10;
}

.calendar__current-month{
	font-size: var(--heading-size-xs);
	font-weight: 600;
}

.calendar__today{
	font-size: var(--body-size-md);
}

.calendar__today a{
	color: var(--color-grey-600);
}


.calendar__timeline{
	position: relative;
	max-width: 720px;
	margin: 80px auto 0 auto;
	background-color: var(--color-grey-50);
	height: calc(var(--days-count) * 33px);

	box-shadow: var(--style-box-shadow-4);
	border-radius: 8px;
	border: solid 1px var(--color-grey-400);

	overflow: hidden;
}

.calendar__timeline .calendar__day{
	background-color: transparent;
	scroll-margin: 120px 0 0 0;
}



@media(max-width: 770px){
	.calendar__main{
		margin-left: 288px;
		padding: 0 8px 80px 8px;
	}

	.calendar__head{
		left: 296px;
	}
}

@media(max-width: 640px){
	.calendar__head{
		top: 0;
		right: 0;
		left: 0;

		margin-top: -64px;
		padding-top: 68px;
		background: none;
		border: none;
	}

	.calendar__head > *{
		position: relative;
		z-index: 1;
		color: var(--color-white);
	}

	.calendar__head .calendar__today a{
		color: var(--color-white);
		font-weight: 600;
	}

	.calendar__head::before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 240px;
		pointer-events: none;
		
		background: rgba(0,0,0,.8);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		mask-image: linear-gradient(white 0%, transparent 80%);
	}

	.calendar__current-month{
		font-size: var(--heading-size-md);
	}

	.calendar__main{
		margin-left: 0;
		padding: 0 0 80px 0;
	}

	.calendar__timeline{
		border-radius: 0;
		margin: 0;
	}
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
#
# Days
#
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.calendar__day{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 8px;
	border-bottom: solid 1px var(--color-grey-300);
	background-color: var(--color-grey-100);
	cursor: pointer;
}

.calendar__day:has(.calendar__event-media) {
	z-index: 1;
}

.calendar__day *{
	min-width: 0;
}

.calendar__day--off{
	background: linear-gradient(90deg, var(--color-grey-200), transparent);
	background-color: var(--color-grey-100);
}

.calendar__day--today::before{
	content: '';
	position: absolute;
	top: 7px;
	left: 0;

	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--color-grey-900);
}

.calendar__day--selected{
	background-color: var(--color-indigo-50);
}



/* Initial and day number */
.calendar__day-labels{
	display: flex;
	align-items: center;

	color: var(--color-secondary-text);
	font-size: var(--body-size-sm);
}

.calendar__day-initial{
	width: 24px;
	text-align: center;
}

.calendar__day-number{
	width: 24px;
	text-align: center;
}

.calendar__day--off .calendar__day-labels,
.calendar__day--today .calendar__day-labels{
	font-weight: bold;
}


/* Items container */
.calendar__day-side{
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	width: 64px;
}

.calendar__day-side-line{
	flex: 1;
	height: 1px;
	background-color: var(--color-grey-300);
}

.calendar__day-side-slot{
	height: 32px;
	width: 16px;
	padding: 0 4px;
}

.calendar__day-side-event{
	position: relative;
	width: 8px;
	height: 8px;
	margin: 12px 4px;
	
	border-radius: 8px;
	background-color: var(--bg_hex);
}



/* Events container */
.calendar__day-events{
	--offset: calc(32px * var(--slots-count));

	display: flex;
	height: 32px;
	
	margin-right: var(--offset);
	transform: translateX(var(--offset));
	transition: transform 350ms;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
#
# Events
#
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.calendar__event{
	--bg-hex: var(--color-grey-400);
	--left: calc(136px + (var(--slot) * 32px));
	--top: calc(33px * var(--day));

	display: flex;
	flex-direction: column;
	align-items: center;

	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: calc(var(--days) * 33px);

	transform: translateX(var(--left)) translateY(var(--top));
	transition: height 350ms, transform 350ms;

	cursor: pointer;
	z-index: 2;
}

.calendar__event:hover .calendar__event-ball{
	transform: scale(1.2);
}

.calendar__event-ball{
	width: 16px;
	height: 16px;
	margin: 8px 8px 2px 8px;
	border-radius: 12px;
	background-color: var(--bg-hex);

	transition: transform 100ms;
}

.calendar__event-line{
	width: 4px;
	flex: 1;
	border-radius: 4px;
	background-color: var(--bg-hex);
}

.calendar__event-end{
	width: 12px;
	height: 12px;
	margin: 2px 6px 10px 6px;
	border-radius: 6px;
	background-color: var(--bg-hex);
}

.calendar__event-ball.donut{
	background: transparent;
}


/* Labels */
.calendar__event-labels{
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: var(--body-size-xs);
}

.calendar__event-name{
	min-width: 0;
	position: relative;
	line-height: 32px;
}

.calendar__event-name span{
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}


/* Media */
.calendar__event-media{
	position: absolute;
	top: 32px;
	left: 0px;
	z-index: 10;
}

.calendar__event-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	background-size: cover;
	background-position: 50% 50%;
	box-shadow: var(--style-box-shadow-2);
	transition: transform 100ms;
}

.calendar__event-image::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, .3);
}

.calendar__event-image:nth-of-type(2){
	transform: rotate(8deg);
}

.calendar__event-image:nth-of-type(3){
	transform: rotate(-8deg);
}


.calendar__event-media:hover .calendar__event-image:nth-of-type(2){
	transform: translate3d(8px, 4px, 0) rotate(12deg);
}

.calendar__event-media:hover .calendar__event-image:nth-of-type(3){
	transform: translate3d(-8px, -4px, 0) rotate(-12deg);
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
- 
- 
-	Dashboard base
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.dashboard{
	padding: 0 16px 16px 88px;
	background-color: var(--bg_color);
	transition: background 500ms;
	min-height: 100vh;
}

@media (max-width: 768px) {
	.dashboard{
		padding: 8px 8px 80px 8px;
	}
}

.dashboard__head{
	position: relative;
	gap: 4px;
	display: flex;
	flex-direction: column;
	
	margin-bottom: 24px;
	padding: 40px 0;

	max-width: 960px;
	margin: 0 auto;
}

.dashboard__head::after{
	background: linear-gradient(-40deg, var(--bg_color), rgba(255, 255, 255, 0));
	filter: hue-rotate(30deg);
}

.dashboard__head::before{
	background: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	z-index: 1;

}

.dashboard__head-name{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 56px;
	z-index: 2;
}

.dashboard__head h3{
	margin: 0;
	font-size: var(--heading-size-lg);
}

.dashboard__head h3 i{
	font-size: var(--heading-size-xs);
}

input.dashboard__name-input{
	padding: 0;
	border: none;
	background: none;
	font-size: var(--heading-size-lg);
	font-weight: bold;
	height: 56px;
	width: 30%;
	flex: 1;
}




.dashboard__list{
	position: relative;
	display: flex;
	gap: 8px;
	z-index: 1;
}

.dashboard__list--disabled{
	pointer-events: none;
}

button.dashboard-item{
	display: block;
	padding: 0;
	width: 20px;
	height: 20px;
	border-radius: 100px;
	background-color: var(--color-white);
	box-shadow: var(--style-box-shadow-1);
	transform: scale(.8);
	transition: transform 250ms;
}

button.dashboard-item--selected{
	transform: scale(1.2);
}




.dashboard__body{
	display: grid;
	gap: 16px;
	
	max-width: 960px;
	margin: 0 auto;

/*	view-transition-name: grid-layout;*/
}

.dashboard__body--editing > div{
	position: relative;
	min-height: 160px;
}

.dashboard__area-widgets{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dashboard__area-add-widget{
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	margin-top: 8px;
	border-radius: 16px;
	background-color: rgba(0,0,0,.02);
}

.dashboard__area-add-widget button{
	margin: 8px;
}


@layer dashboard.transitions {
	::view-transition {
	    pointer-events: none;
	}

	:root {
		view-transition-name: none;
	}

	::view-transition-group(*) {
		animation-duration: .4s;
	}

	::view-transition-old(*),
	::view-transition-new(*) {
		height: 100%;
		width: 100%;
	}

	::view-transition-group(static-dropdown),
	::view-transition-old(static-dropdown),
	::view-transition-new(static-dropdown) {
	  animation: none !important;
	}
}


.dashboard__area-add{
	display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 150ms;
}

.dashboard__area-add--show{
	grid-template-rows: 1fr;
}



.dashboard__area-add-widget--overlay{
	position: absolute;
	inset: 0;

	border-radius: 16px;
	box-shadow: inset var(--style-box-shadow-1);
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
- 
- 
-	Editing control
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.dashboard__editing-panel{
	display: flex;
	gap: 8px;
}

.dashboard__editing-pill{
	margin-top: 4px;
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 100px;
	background-color: var(--color-grey-800);
	box-shadow: var(--style-box-shadow-4);
}

.dashboard__editing-panel button{
	display: block;
	padding: 0 12px;
	min-width: 24px;
	overflow: hidden;

	font-weight: normal;
	text-align: center;
	color: var(--color-white);
}

.dashboard__editing-panel button.round{
	padding: 0;
	aspect-ratio: 1/1;
	border-radius: 50px;
	height: 24px;
	background-color: var(--color-grey-300);
}













/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
- 
- 
-	Add widget
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.add-widget__options{
	display: grid;
	max-width: 720px;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
}

button.add-widget__option{
	display: flex;
	gap: 8px;

	text-align: left;
	border: solid 1px var(--color-grey-400);
}

button.add-widget__option:hover{
	background-color: var(--color-grey-50);
}

.add-widget__icon{
	width: 80px;
	height: 80px;
	flex-shrink: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

.add-widget__details{

}

.add-widget__description{
	color: var(--color-secondary-text);
	font-size: var(--body-size-xs);
	line-height: 1.4;
	font-weight: normal;
}


.add-widget__option{
	border: solid 1px var(--color-grey-300);
}







/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
- 
- 
-	Layout picker
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.dashboard__layouts{
	display: grid;
	width: 320px;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);
}


button.dashboard__layout{
	padding: 8px;
	display: flex;
	gap: 4px;

	text-align: left;
	border: solid 1px var(--color-grey-400);
}

button.dashboard__layout:hover{
	background-color: var(--color-grey-50);
}

.dashboard__layout-container{
	display: grid;
	gap: 4px;
	aspect-ratio: 1/1;
	width: 100%;
}

.dashboard__layout-container > div{
	background-color: var(--color-grey-400);
	border-radius: 4px;
	min-height: 32px;
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
- 
- 
-	Layouts
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.dashboard__area-head{ 
	grid-area: head; 
	view-transition-name: dashboard-head; 
}

.dashboard__area-side{ 
	grid-area: side; 
	display:none; 
	view-transition-name: dashboard-side; 
}

.dashboard__area-col1{ 
	grid-area: col1; 
	view-transition-name: dashboard-col1; 
}

.dashboard__area-col2{ 
	grid-area: col2; 
	view-transition-name: dashboard-col2; 
}

.dashboard__area-col3{ 
	grid-area: col3; 
	display:none; 
	view-transition-name: dashboard-col3; 
}


.dashboard__layout--h-2-1{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"head head head"
		"col1 col1 col2";
}

.dashboard__layout--h-1-2{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"head head head"
		"col1 col2 col2";
}

.dashboard__layout--h-1-1-1{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"head head head"
		"col1 col2 col3";
}

.dashboard__layout--h-1-1-1 .dashboard__area-col3{
	display: block;
}

.dashboard__layout--h-1-1{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"head head"
		"col1 col2";
}

.dashboard__layout--h-s-1-1{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"head head side"
		"col1 col2 side";
}

.dashboard__layout--h-s-1-1 .dashboard__area-side{
	display: block;
}


@media (max-width: 768px) {
	.dashboard__body{
		gap: 8px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"side"
			"col1"
			"col2"
			"col3";
	}
}

.event-cards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.event-form .event-cards:has(.event-card){
	margin-top: 16px;
}


.event-card{
	display: block;
	padding: 0;
	position: relative;
	aspect-ratio: 1/1;
	border: solid 1px var(--color-grey-200);
	border-radius: 8px;
	overflow: hidden;

	line-height: 1.2;
	color: var(--color-grey-700);
  	background: none;
  	background: linear-gradient(var(--color-grey-50), var(--color-grey-200));
}

.event-card > *{
	align-self: start;
}

.event-card:hover{
	border: solid 1px var(--color-grey-300);
	box-shadow: var(--style-box-shadow-3);
	background: linear-gradient(var(--color-grey-100), var(--color-grey-300));
}

.event-card--add{
	width: 100%;
}


.event-card__title{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;

	font-weight: 600;
	line-height: 1.2;
	padding: 16px 8px 8px 8px;
	text-align: right;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	z-index: 1;

	border-radius: 0 0 8px 8px;
	background-color: rgba(255, 255, 255, .2);
	backdrop-filter: blur(2px);
	mask: linear-gradient(transparent 0%, white 50%);
}


.event-card__icon{
	position: absolute;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 4px;
	left: 4px;
	border-radius: 100px;
	pointer-events: none;

	color: var(--color-yellow-500);
	background-color: var(--color-yellow-100);
	box-shadow: 0 4px 16px var(--color-yellow-200);
	z-index: 2;
}

.event-card__icon--tags{
	color: var(--color-purple-500);
	background-color: var(--color-purple-100);
	box-shadow: 0 4px 16px var(--color-purple-200);
}

.event-card__icon--media{
	color: var(--color-blue-500);
	background-color: var(--color-blue-100);
	box-shadow: 0 4px 16px var(--color-blue-200);
}

.event-card__icon--location{
	color: var(--color-green-500);
	background-color: var(--color-green-100);
	box-shadow: 0 4px 16px var(--color-green-200);
}

.event-card__icon--invites{
	color: var(--color-pink-500);
	background-color: var(--color-pink-100);
	box-shadow: 0 4px 16px var(--color-pink-200);
}



/* Attendees - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card__attendees{
	padding: 8px;
	height: 100%;
}



/* Description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card--description{
	padding: 8px;
	text-align: left;
	font-size: var(--body-size-xxs);
	font-weight: normal;
	line-height: 12px;
	color: var(--color-yellow-800);

	background: 
		repeating-linear-gradient(0deg, transparent, transparent 11px, #F1E7AD 11px, #F1E7AD 12px),
		linear-gradient(var(--color-yellow-100), var(--color-yellow-200));
		

  	border-color: #DCC99C;
}

.event-card--description:hover{
	background: 
		repeating-linear-gradient(0deg, transparent, transparent 11px, #F1E7AD 11px, #F1E7AD 12px),
		linear-gradient(var(--color-yellow-100), var(--color-yellow-200));
}


/* Tasks - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card--tasks{
	padding: 8px;
	cursor: pointer;

}

.event-card__tasks{
	display: grid;
	gap: 4px;
	overflow: hidden;
}

.event-card__task{
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}

.event-card__task-checkbox{
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-color: var(--color-white);
	border: solid 1px var(--color-grey-500);
	border-radius: 4px;
}

.event-card__task-checkbox--completed{
	background-color: var(--color-green-300);
	border: solid 1px var(--color-green-600);
}

.event-card__task-description{
	font-size: var(--body-size-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* Map - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card--map{
	position: relative;
	overflow: hidden;
	background-color: var(--color-grey-100);
	border: none;
}

.event-card--map::before{
	content: '';
	position: absolute;
	inset: 0;

	border-radius: 8px;
	border: solid 1px rgba(0, 0, 0, .1);
	z-index: 1;
}

.event-card--map:hover{
	border: none;
}




/* Media - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card--media{
	position: relative;
	overflow: visible;
}

.event-card__thumb{
	position: absolute;
	inset: 0;

	aspect-ratio: 1/1;
	border-radius: 8px;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--color-grey-400);
	cursor: pointer;
	transition: transform 100ms;
}

.event-card__thumb::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, .3);	
}

.event-card__thumb:nth-of-type(2){
	transform: rotate(5deg);
}

.event-card__thumb:nth-of-type(3){
	transform: rotate(-4deg);
}

.event-card--media:hover .event-card__thumb:nth-of-type(2){
	transform: translate3d(8px, 6px, 0) rotate(8deg);
}

.event-card--media:hover .event-card__thumb:nth-of-type(3){
	transform: translate3d(-12px, -4px, 0) rotate(-8deg);
}



/* Tags - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.event-card.event-card--tags{
	cursor: pointer;
}

.event-card__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px;
}

.event-card__tag{
	padding: 2px 4px;
	border-radius: 4px;
	background-color: var(--tag-bg-color);
}

.event-card__tag-name{
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;

	font-size: 6px;
	color: transparent;
	background-color: var(--tag-color);
	position: relative;
	z-index: 1;
	border-radius: 20px;
	opacity: .5;
}


.page--event{
  background-color: var(--bg);
  min-height: 100dvh;

  /*background: linear-gradient(-40deg, var(--bg), rgba(255, 255, 255, 0));
  filter: hue-rotate(30deg);*/
}


/* Head */
.event-page__head{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  text-align: center;
  background: none;
  box-shadow: none;
}

.event-page__category-pill{
  position: relative;
  z-index: 1;

  padding: 0 16px;
  line-height: 32px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, .4);
}

.event-page__head h1{
  position: relative;
  margin: 32px 0 0 0;
  z-index: 1;
}

.event-page__head h3{
  margin: 8px 0;
  font-size: var(--heading-size-sm);
}

.event-page__head-dates{
  display: flex;
  align-items: center;
  gap: 24px;
}



/* Layout */
.event-page__body{
  
}

@media(max-width: 768px){
  .page__head h1{
    font-size: var(--heading-size-md);
  }

  .event-page__body{
    padding: 16px;
  }
}

.event__details{
  max-width: 720px;
  margin: 0 auto;
}

.event-page__left{
  position: relative;
  width: 100%;
  max-width: 290px;
}

.event-page__head-back{
  position: absolute;
  left: 84px;
  top: 16px;
}

.event-page__head-back button{
  font-size: var(--heading-size-md);
}

@media (max-width: 768px) {
  .event__details{
    gap: 16px;
  }
  .event-page__head-back{
    display: none;
  }
}

.event-page__right{
  flex: 1;
}

.event-page__right .card,
.event-page__right .event__images{
  
}

.event__row{
  justify-content: center;
  margin-bottom: 32px;
}

.event__row > .card{
  padding: 24px;
}

.event__row .event__simultaneous-events{
  max-width: 628px;
  margin: 0 auto;
}

.event__row .event__simultaneous-events .event__tasks,
.event__row .event__simultaneous-events .event__media,
.event__row .event__simultaneous-events .event__actions{
  display: none;
}


.event-page__card button{
  width: 100%;
}


/* Split the cards */
.event__row-title{
  margin: 16px 0 8px 0;
  text-align: center;
  font-weight: bold;
}





/* Basic details row */
.event__details h3{
  font-size: var(--heading-size-xs);
  margin: 0 0 16px 0;
}


@media (max-width: 768px) {
  .event__details{
    flex-direction: column;
  }

  .event-page__left{
    max-width: none;
  }
}



.event__line + .event__line{
  margin: 16px 0 0 0;
}

.event__line-label{
  margin: 0 0 8px 0;
}





.event__attendees{
  position: absolute;
  top: 16px;
  right: 16px;

  text-align: left;
}

.event__attendees-title{
  margin-bottom: 8px;
  padding: 0 0 8px;
  border-bottom: solid 1px var(--color-grey-200);
}



/* Map */
.event__row .event__map-card{
  position: relative;
  padding: 8px;
  overflow: hidden;
  border: solid 1px var(--color-grey-200);
}

.event__map-location-name{
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 8px;

  font-weight: bold;
  line-height: 24px;

  background-color: rgba(255, 255, 255, .7);
  border-radius: 4px;
  box-shadow: var(--style-box-shadow-1);
  backdrop-filter: blur(4px);
}




/* Invite images */
.event__images{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 8px;
  row-gap: 8px;
}

.event__images-more{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.event__images--1{
  grid-template-columns: repeat(1, 1fr);
}

.event__images--1 .event__image{
  aspect-ratio: 16/9;
}

.event__images--2{
  grid-template-columns: repeat(2, 1fr);
}

.event__images--3{
  grid-template-columns: repeat(3, 1fr);
}

.event__images--5{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b c"
    "a a d e";
}

.event__images--5 .event__image:nth-of-type(1){ grid-area: a; }
.event__images--5 .event__image:nth-of-type(2){ grid-area: b; }
.event__images--5 .event__image:nth-of-type(3){ grid-area: c; }
.event__images--5 .event__image:nth-of-type(4){ grid-area: d; }
.event__images--5 .event__image:nth-of-type(5){ grid-area: e; }


.event__images--5 .event__image{ 
  display:none; 
}
.event__images--5 .event__image:nth-of-type(-n + 5){
  display: block;
}

.event__images--all .event__image{
  display: block;
}

.event__image{
  position: relative;
  aspect-ratio: 1/1;
  background-color: #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--style-box-shadow-3);
}

.event__image-inner{
  position: absolute;
  inset: 0;
  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  transition: transform 150ms;
  cursor: pointer;
  box-shadow: inset var(--style-box-shadow-1);
}

.event__image-inner:hover{
  transform: scale(1.02);
}


.event-page__description{
  font-size: var(--body-size-lg);
}


/* Options row */
.event__options{
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.event__options-sender{
  display: flex;
  gap: 16px;
  align-items: center;
}

.event__options-buttons{
  display: flex;
  gap: 8px;
}



/* Tags */
.event-page__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-page__tag{
  padding: 8px 12px;
  background-color: var(--bg-hex);
  border-radius: 8px;
  
  text-wrap: nowrap;
  color: var(--color-hex);
  box-shadow: var(--style-box-shadow-1);
}
.event__feed-title h3{
	margin: 32px 0 8px 0;
	color: var(--color-grey-700);
	font-weight: 600;
	font-size: var(--heading-size-xxs);
}


/* Event */
.event{
	flex: 1;
	position: relative;
	margin-bottom: 16px;
}

.event.card{
	padding: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}

.event__category-line{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--body-size-xxs);
}

.event__category-pill{
	--tag-bg-color: var(--color-grey-200);

	padding: 5px 8px;
	background-color: var(--tag-bg-color);
	border-radius: 10px;
	
	color: var(--tag-color);
	line-height: 12px;
}

.event__start-date{
	color: var(--color-secondary-text);
}


.event--all-day .event__name{
	margin-right: 16px;
}

.event a{
	color: var(--color-primary-text);
	text-decoration: none;
	cursor: pointer;
}

.event a.event__link-section{
	position: relative;
	display: block;
	padding: 16px;
}

a.event__link-section .avatar-group{
	position: absolute;
	top: 12px;
	right: 48px;
}

.event .event-cards:has(.event-card){
	padding: 16px;
}

.event .event__tasks{
	padding: 0 16px 16px 16px;
}

.event .event__tags{
	padding: 0 16px 16px 16px;
}

.event:hover{
	box-shadow: var(--style-box-shadow-2);	
}

.event .event__edit{
	position: absolute;
	top: 8px;
	right: 8px;

	display: flex;
	align-items: center;
	gap: 8px;
}

.event .event__complete-status{
	font-size: var(--body-size-sm);
	padding: 4px 12px;
	background-color: var(--color-grey-100);
	border-radius: 999px;
}

.event__color-bar{
	position: absolute;
	top:  6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
}



.event__name{

}

.event__name h3{
	margin: 8px 16px 0 0;
	font-size: var(--heading-size-sm);
	font-weight: bold;	
}

.event__name h4{
	margin: 8px 16px 0 0;
	font-size: var(--heading-size-xxs);
}

.event__starts{
	margin-top:  4px;
	font-size: 16px;
}

.event__details-line{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top:  8px;

	color: var(--color-secondary-text);
	font-size:  14px;
}


/* Ongoing version */
.event__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 12px;
	cursor: pointer;
}

.event__tag{
	padding: 2px 8px;
	border-radius: 40px;
	background-color: var(--bg-hex);
}

.event__tag-name{
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;

	font-size: var(--body-size-xxs);
	color: var(--text-hex);
	position: relative;
	z-index: 1;
	border-radius: 20px;
}



/* Small version */
.event.event--sm{
	margin: 0;
	padding: 8px;
	background-color: var(--color-white);
	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
}

.event.event--sm:hover{
	box-shadow: var(--style-box-shadow-2);
}

.event.event--sm .event__name{
	margin-top: 8px;
	color: var(--color-primary-text);
	font-size: var(--body-size-xs);
}

.event.event--sm .event__category-pill{
	display: inline;
	padding: 3px 6px;
	border-radius: 10px;
	line-height: 12px;
	font-size: var(--body-size-xxs);
}


/* Completion bar */
.event__completion-status{
	padding: 16px;
}


/* Invite bar */
.event__invite{
	display: flex;
	align-items: center;
	margin: 16px 0 0 0;
	padding: 12px 16px 12px 24px;

	border-top: solid 1px var(--color-grey-200);
	background-color: var(--color-grey-50);
	border-radius: 0 0 8px 8px;
}

.event__invite l-avatar{
	margin-right: 8px;
}

.event__invite-who{
	flex: 1;
}

.event__invite-status{
	padding: 8px 16px;
	border-radius: 4px;

	font-size: var(--body-size-sm);
	text-transform: capitalize;
}

.event__invite-status i{
	margin-left: 8px;
}

.event__invite-status--maybe{
	border: solid 1px var(--color-yellow-200);
	background-color: var(--color-yellow-50);
}
.event__invite-status--maybe i{
	color: var(--color-yellow-700);
}

.event__invite-status--going{
	border: solid 1px var(--color-green-200);;
	background-color: var(--color-green-50);
}
.event__invite-status--going i{
	color: var(--color-green-700);
}



/* Variant */
.event--ongoing_minimal div:is(.event__name, .event__actions, .event__media, .event__details-line){
	display: none;
}


/* Show more */
.event-feed__show-more{
	display: flex;
	justify-content: center;
	margin: 32px 0 16px 0;
}

@media (max-width: 768px) {
	.event__name h3{
		font-size: var(--heading-size-xxs);
	}

	.event-feed__show-more{
		margin-bottom: 120px;
	}
}
/* Filters */
.filters{
	
}

.filters input{
	width: 100%;
	background: none;
	padding: 24px 16px;
	font-size: var(--body-size-lg);

	border: solid 2px transparent;
	border-radius: 8px;
	border: solid 2px var(--color-grey-200);
	background-color: var(--color-grey-50);
}

.filters input:focus{
	background-color: var(--color-white);
	border: solid 2px var(--color-blue-300);
}

.filters__menu{
	position: absolute;
	top: 0px;
	right: 0px;
}

.filters__title{
	font-weight: bold;
}

.filters__selected{
	align-items: center;
	margin: 8px 0 16px 0;
}

.filters__section{
	box-sizing: border-box;
	padding: 8px 0;
	max-width: 564px;
}

.filters__section-name{
	margin-bottom: 8px;
	font-size: var(--body-size-xs);
}

.filters__section + .filters__section{
	margin-top: 16px;
}


/* Categories */
.filters__categories{
	display: grid;
}

.filters__category{
	position: relative;
	font-size: var(--body-size-sm);
	box-sizing: border-box;
	border-radius: 4px;
	
	user-select: none;
	cursor: pointer;
	transition: transform 150ms;
}

.filters__category:hover{
	background-color: var(--color-grey-200);
}

.filters__category--selected{
	font-weight: bold;
}


.filters__category-inner{
	display: flex;
	align-items: center;
	padding: 0 8px;
	gap: 8px;
	height: 32px;
}

.filters__category-inner .spacer{
	flex: 1;
}

.filters__category-count{
	width: 32px;
	padding: 4px 0;
	border-radius: 8px;
	background-color: var(--color-grey-100);

	text-align: center;
	color: var(--color-grey-600);
	font-size: var(--body-size-xs);
}

.filters__category-color{
	width: 8px;
	height: 8px;
	border-radius: 4px;
}

l-autocomplete-item[highlighted=true] .filters__category{
	border-color: var(--color-blue-300);
	background-color: var(--color-blue-50);
	transform: translate3d(0, -2px, 0);
	box-shadow: var(--style-box-shadow-3);
}


/* Tags */
.filters__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filters__tag{
	position: relative;
	height: 32px;
	margin: 1px;
	padding: 0 8px 0 24px;
	border-radius: 8px;
	line-height: 32px;
	
	font-size: var(--body-size-sm);
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: var(--style-box-shadow-1);
	
	
	user-select: none;
	cursor: pointer;
	transition: transform 150ms;
}

.filters__tag--selected{
	font-weight: bold;
}

.filters__tag::after{
	position: absolute;
	content: '';
	top: 11px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	box-sizing: border-box;

	border: solid 1px rgba(0,0,0,.2);
	background-color: #fff;
	box-shadow: inset var(--style-box-shadow-1);
}

l-autocomplete-item[highlighted=true] .filters__tag{
	margin: 0;
	border: solid 1px;
	background-color: var(--color-blue-50);
	transform: translate3d(0, -2px, 0);
	box-shadow: var(--style-box-shadow-3);
}


/* Strings */
.filters__strings{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filters__string{
	font-size: var(--body-size-sm);
	box-sizing: border-box;
	border-radius: 4px;
	border: solid 1px var(--color-grey-300);
	background-color: #fff;
	box-shadow: var(--style-box-shadow-1);

	height: 34px;
	line-height: 34px;
	padding: 0 8px;
	
	user-select: none;
	cursor: pointer;
	transition: transform 150ms;
}


/* Friends */
.filters__friends{

}

.filters__friend{
	display: flex;
	margin: 4px 0;
	border-radius: 4px;
	align-items: center;
	cursor: pointer;
	border: solid 1px transparent;
}

.filters__friend--selected{
	font-weight: bold;
}

.filters__friend l-avatar{
	margin-right: 8px;
}


l-autocomplete-item[highlighted=true] .filters__friend{
	border-color: var(--color-blue-300);
	background-color: var(--color-blue-50);
}



/* Selected items */
.filters__selected{
	display: flex;
	gap: 8px;
	row-gap: 8px;
}

.filters__selected-item{
	position: relative;
	padding: 4px 12px;
	line-height: 24px;

	border: solid 1px var(--color-border);
	background-color: var(--color-white);
	border-radius: 4px;
	box-shadow: var(--style-box-shadow-1);

	cursor: pointer;
}


.filters__selected-item--friend{
	display: flex;
	gap: 8px;
	padding-left: 4px;
}

.filters__selected-item--category{
	padding-left: 16px;
}





.event-form{
	position: relative;
}

.event-form l-autocomplete{
	width: 100%;
}

.event-form__head{
	display: flex;
	align-items: center;

	border-bottom: solid 1px var(--color-divider);
	margin-bottom: 16px;
	padding-bottom: 16px;
}

.event-form__head button{
	padding: 0;
	width: 36px;
	height: 36px;

	border-radius: 100px;
	background-color: var(--color-grey-200);

	text-align: center;
	line-height: 36px;
}

.event-form__head button:hover{
	background-color: var(--color-grey-300);
}

.event-form__head-titles{
	margin-right: 36px;
	text-align: center;
	flex: 1;
}

.event-form__head-titles div:first-of-type{
	font-weight: bold;
	text-transform: capitalize;
	font-size: var(--heading-size-xxs);
}

.event-form__head-titles div:last-of-type{
	font-size: var(--body-size-xs);
}



.event-form__body{
	width: 420px;
}

.event-form__add-row{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;

	margin-top: 16px;
	padding-top: 16px;
	border-top: solid 1px var(--color-grey-200);
}

.event-form__add-row .spacer{
	flex: 1;
}


.event-form__submit-row{
	margin-top: 16px;
}

.event-form__row{
	display: flex;
	margin: 0 -16px;
}

.event-form__row + .event-form__row{
	margin-top:  16px;
}

.event-form__col{
	flex: 1;
	margin: 0 16px;
}


.event-form__warning{
	position: absolute;
	inset: -16px;
	display: flex;
	align-items: center;
	justify-content: center;

	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background-color: rgba(255, 255, 255, .8);
	z-index: 10;
}

.event-form__error{
	margin-bottom: 16px;
}



/* Date time - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__dates{
	justify-content: space-between;
	gap: 16px;
}

.event-form__dates l-date-picker{
	flex: 1;
}

.event-form__date-time{
	text-align: left;
	flex: 1;
	padding: 8px;
	border-radius: 8px;
	color: var(--color-text-primary);
	border: solid 1px var(--color-grey-200);
	background-color: var(--color-grey-50);
}

.event-form__date-time:hover{
	border: solid 1px var(--color-grey-400);
	background-color: var(--color-grey-100);
}

.event-form__date{
	text-align: left;
	font-size: var(--body-size-md);
	margin: 0 0 4px 0;
}

.event-form__time{
	text-align: left;
	font-size: var(--body-size-md);
	color: var(--color-secondary-text);
}

.event-form__time--all-day{
	text-align: left;
	font-size: var(--body-size-md);
	color: var(--color-secondary-text);
}


.event-form__checkboxes-row{
	overflow: hidden;
}

.event-form__checkboxes-row .form__radio-option{
	overflow: hidden;
	padding: 0;
	line-height: 30px;
}

.event-form__checkboxes-row .form__radio-option:first-of-type{
	flex-shrink: 0;
}

.event-form__checkboxes-row button{
	overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.event-form__checkboxes-row label{
	white-space: nowrap;
}


/* Categories - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__title-wrap{
	display: flex;
	flex-direction: column;
	gap: 8px;

	position: relative;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--color-grey-50);
	border: solid 1px var(--color-grey-200);
}

.event-form__title-wrap:focus-within{
	border: solid 1px var(--color-grey-400);
}

.event-form__title-wrap input,
.event-form__title-wrap button.no-style{
	padding: 0;
	background-color: transparent;
	border-color: transparent;
}

.event-form__title-wrap input:focus{
	outline: none;
	border-color: transparent;
	box-shadow: none;
}

.event-form__title-wrap button:hover{
	background-color: transparent;
	border-color: transparent;
}

.event-form__categories-field button.outline{
	border-color: rgba(0, 0, 0, .1);
}

.event-form__categories{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.event-form__categories button{
	text-align: left;
}



/* Location predictions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__location-prediction{}

.event-form__location-prediction-main-text{
	font-size: var(--body-size-sm);
}
.event-form__location-prediction-secondary-text{
	color: var(--color-secondary-text);
	font-size: var(--body-size-xs);
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* Location card */
.event-form__location-card{
	flex: 1;
	position: relative;
}	

.event-form__location-thumb{
	width: 100%;
	margin: 8px 0;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: var(--color-grey-100);
	overflow: hidden;
}

.event-form__location-name{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--body-size-md);
}

.event-form__location-address{
	margin-top: 4px;
	font-size: var(--body-size-xs);
}

button.event-form__location-remove{
	position: absolute;
	
	top: 4px;
	right: 4px;
	width: 30px;
	height: 30px;
	padding: 0;

	font-size: var(--body-size-md);
	text-align: center;
	line-height: 30px;

	border-radius: 16px;
	border: solid 1px var(--color-border);
	box-shadow: var(--style-box-shadow-2);
	background-color: var(--color-white);
}



/* Mobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media(max-width: 540px){
	.event-form{
		flex-direction: column;
	}

	.event-form__menu{
		width: auto;
		padding: 0 0 8px 0;
	}

	.event-form__menu button{
		padding: 8px 0;
	}

	.event-form__body{
		width: auto;
		padding: 0;
	}
}



/* Description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form textarea.description{
	height: 376px;
	overflow: auto;
	resize: vertical;
	min-height: 376px;
	max-height: 70vh;
}



/* Media/uploads - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__media-items{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 8px;
	grid-row-gap: 8px;
}

.event-form__media{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	position: relative;
	border-radius: 8px;
	aspect-ratio: 1/1;

	background-color: #eee;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.event-form__media--upload{
	
}

.event-form__media--upload i{
	font-size: 48px;
}

.event-form__media-options{
	position: absolute;
	top: 4px;
	right: 4px;

	border-radius: 4px;
	background-color: #fff;
	box-shadow: var(--style-box-shadow-1);
}

.event-form__media-progress-bar{
	position: absolute;
	bottom: 4px;
	left: 4px;
	right: 4px;

	height: 8px;
	padding: 2px;
	box-sizing: border-box;
	border-radius: 4px;

	background-color: rgba(0, 0, 0, .3);
}

.event-form__media-progress-bar-bar{
	width: 0%;
	height: 4px;
	border-radius: 2px;
	background-color: #fff;
	transition: width 30ms;
}

.event-form__media-uploading-overlay{
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .1);
}



/* Upload complete */
.event-form__media--upload-complete .event-form__media-progress-bar{
	animation: event_form_media_upload_complete_fade_shift 800ms ease-in-out;
	opacity: 0;
}

.event-form__media--upload-complete .event-form__media-uploading-overlay{
	animation: event_form_media_upload_complete_fade 800ms ease-in-out;
	opacity: 0;
}

@keyframes event_form_media_upload_complete_fade {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes event_form_media_upload_complete_fade_shift {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}



/* Recurring - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__recurs-weekdays{
	display: flex;
	justify-content: space-between;
}

.event-form__recurs-weekdays button.sm{
	position: relative;
	padding: 2px;
	border-radius: 14px;
	width: 42px;
	font-size: var(--body-size-xs);
	border: solid 1px var(--color-grey-400);
	transition: background 150ms, color 150ms;
}

.event-form__recurs-weekdays button::after{
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -2px;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--color-blue-500);
	
	opacity: 0;
	transition: top 150ms, opacity 150ms;
}

.event-form__recurs-weekdays button.event-form__recurs-weekday--today{
	color: var(--color-blue-500);
	font-weight: bold;
}

.event-form__recurs-weekdays button.event-form__recurs-weekday--today,
.event-form__recurs-weekdays button.event-form__recurs-weekday--active{
	background-color: var(--color-blue-100);
	border-color: var(--color-blue-300);
}

.event-form__recurs-weekdays button.event-form__recurs-weekday--today::after{
	bottom: 2px;
	opacity: 1;
}



.event-form__recurs-until-date-formated{
	margin-top: 8px;
	text-align: center;
	font-size: var(--body-size-sm);
}



button.event-form__recurs-occurence-button{
	padding: 8px 0px;
	width: 100%;
}

.event-form__recurs-popover{
	width: 274px;
}

.event-form__recurs-popover .form-row + .form-row{
	margin-top: 16px;
}



/* Tags - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.event-form__tag-inner{
	padding: 0 24px 0 0;
}

.event-form__tag-inner button.no-style{
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	text-align: center;
}

.event-form__tag-measurables{
	display: grid;
	gap: 8px;
	padding: 8px;
}

.event-form__tag-measurable{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.event-form__tag-measurable-name{
	margin-right: 24px;
	font-size: var(--body-size-md);
}

.event-form__tag .input-group{
	
}

.event-form__tag .input-group .input-group__text{

}

.event-form__tag .input-group input{
	max-width: 80px;
}



/* Tasks - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__add-task{
	display: flex;
	align-items: center;
}

.event-form__add-task button{
	margin-left: 8px;
}


.event-form__task{
	display: flex;
	align-items: center;
	padding: 8px 0;
	border-radius: 4px;
}

.event-form__task button{
	padding: 0 16px;
	align-self: flex-end;
}

.event-form__task-description{
	flex: 1;
	line-height: 24px;
	margin-left: 8px;
}



/* Sharing - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.event-form__share-header{
	margin-bottom: 16px;
}

.event-form__share-friends{

}

.event-form__share-friends-section{
	margin-top: 16px;
}

.event-form__share-friend{
	padding: 8px;
}

.event-form__share-friend-name{
	display: flex;
	align-items: center;
	flex: 1;
}

.event-form__share-friend-status{
	padding: 4px 8px;
	margin: 0 0 0 16px;
	line-height: 16px;
	border-radius: 12px;
	background-color: var(--color-grey-100);

	font-size: var(--body-size-xs);
	text-transform: capitalize;
}

.event-form__share-friend-status--maybe{
	border: solid 1px var(--color-yellow-200);
	background-color: var(--color-yellow-50);
}
.event-form__share-friend-status--maybe i{
	color: var(--color-yellow-700);
}

.event-form__share-friend-status--going{
	border: solid 1px var(--color-green-200);;
	background-color: var(--color-green-50);
}
.event-form__share-friend-status--going i{
	color: var(--color-green-700);
}


.event-form__share-friend,
.event-form__share-search-friend{
	display: flex;
	align-items: center;
}

.event-form__share-friend  l-avatar,
.event-form__share-search-friend l-avatar{
	margin-right: 8px;
}

.page--invite .page__head,
.page--invite .page__body{
	padding-left: 24px;
}

.event-invite__head{
	margin: 0 0 48px 0;
	background-color: var(--color-white);
	padding-top: 80px;
	padding-bottom: 16px;
	border-radius: 0 0 24px 24px;
	box-shadow: 0 1px 0 var(--color-grey-200), 0 0 32px rgba(0, 0, 0, .05);
	overflow: hidden;
}


.event-invite__head-titles{
	text-align: center;
}

.event-invite__head-titles{
	text-align: center;
}

.event-invite__head-titles p{
	color: var(--color-grey-500);
}

.event-invite__head-titles h1{
	font-weight: 200;
}

.feeds{
	display: flex;
	gap: 16px;
	justify-content: center;
	padding-left: 72px;
}

@media (max-width: 768px) {
	.feeds{
		padding-left: 0;
	}
}



/* Nav */
.feeds__nav{
	width: 240px;
}

.feeds__nav-box{
	position: sticky;
	top: 16px;
	opacity: 1;
	margin-top: 16px;

	animation: feeds-nav-show 800ms;
	padding: 8px;
	border-radius: 16px;
	z-index: 10;
}

.feeds__nav-box-section + .feeds__nav-box-section{
	margin-top: 8px;
}

.feeds__nav-title{
	display: flex;
	justify-content: space-between;
	line-height: 32px;
	border-bottom: solid 1px var(--color-grey-400);
}

.feeds__nav-title strong{
	display: flex;
	gap: 4px;
	align-items: center;
}

.feeds__nav a,
.feeds__nav button.no-style{
	display: block;
	padding: 0;

	color: var(--color-primary-text);
	line-height: 32px;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	
	transition: transform 150ms;
}

.feeds__nav a.active,
.feeds__nav button.active{
	font-weight: bold;
	transform: translateX(8px);
}

@media (max-width: 540px) {
	.feeds__nav{
		display: none;
	}
}


/* Nav drawers */
.feeds__nav-options-drawer{
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms;
}

.feeds__nav-options{
	overflow: hidden;
}

.feeds__nav a.active + .feeds__nav-options-drawer{
	grid-template-rows: 1fr;
}


/* Timeline options box */
.feeds__timeline-options{
	margin: 8px 0 16px 0;
	padding-left: 20px;
}

.feeds__timeline-options button{
	display: block;
	text-align: left;
}





/* Body */
.feeds__body{
	width: 100%;
	max-width: 600px;
	min-width: 0;
}


@media (max-width: 768px) {
	.feeds__body{
		padding-left: 0;
		width: 100dvw;
		height: 100dvh;
		overflow: auto;

		scroll-snap-type: x mandatory;
	}

	.feeds__body-inner{
		display: flex;
		width: 300dvw;
	}

	.feeds__feed{
		flex: 1;
		flex-shrink: 0;
		width: 100dvw;
		height: calc(100dvh - 10px);
		overflow: auto;
		scroll-snap-align: start;
	}

	.feeds__feed-inner{
		padding: 16px;
	}
}



@keyframes feeds-nav-show {
	0%{
		opacity: 0;
		transform: translateY(-8px);
	}
	50%{
		opacity: 0;
		transform: translateY(-8px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

body.view__friends{
	
}


.friends__no-friends{
	max-width: 640px;
	margin: 0 auto;
}


.friends{

}

.friend{
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.friend a{
	color: var(--color-primary-text);
}

.friend__name{
	font-size: var(--body-size-lg);
	font-weight: bold;
}

.friend__stats{
	display: flex;
	gap: 32px;
	margin-top: 8px;
	line-height: 22px;
}

.friend__label{
	display: inline;
	margin: 0 0 2px 0;

    font-size: var(--body-size-xs);
    line-height: 12px;
    color: var(--color-secondary-text);
}


@media(max-width: 576px){
	.friend__name{
		margin-bottom: 8px;
	}
	.friend__stats{
		gap: 4px;
		flex-direction: column;
		align-items: flex-start;
	}	
}


.gallery{
	position: fixed;
	inset: 0;
	z-index: 100;

	display: flex;
	align-items: center;
	justify-content: center;
}



.gallery__overlay{
	position: absolute;
	inset: 0;
	background-color: rgba(0,0,0,.85);
}

button.gallery__close{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;

	color: var(--color-white);
	text-align: center;
	line-height: 40px;
	z-index: 1;
}



.gallery__main{
	position: absolute;
	top: 64px;
	right: 0px;
	bottom: 64px;
	left: 0px;
	overflow: hidden;

	display: flex;
	scroll-snap-type: x mandatory;
}

.gallery__item{
	flex: 1 0 100%;
	height: 100%;
	scroll-snap-align: start;

	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
}

.gallery__item-full{
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	overflow: hidden;
}

.gallery__item img{
	opacity: 0;
	width: 100%;
	height: 100%;
}



button.gallery__prev, button.gallery__next{
	position: absolute;
	top: 50%;
	margin-top: -30px;

	padding: 0;
	width: 40px;
	height: 60px;
	line-height: 60px;

	color: var(--color-white);
	background-color: rgba(0,0,0,.5);
	
	z-index: 1;
	cursor: pointer;
}

button.gallery__prev{
	border-radius: 0 8px 8px 0;
	left: 0;
}

button.gallery__next{
	border-radius: 8px 0 0 8px;
	right: 0;
}

@media(max-width: 768px){
	.gallery__main{
		overflow: auto;
	}

	button.gallery__prev, button.gallery__next{
		display: none;
	}
}

.page__log-in{
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-top: 96px;
	
	align-items: center;
	justify-content: center;
}



body.view__notifications{
	background-color: var(--color-white);
}


.page__body .notifications{
	width: auto;
	max-height: none;
	padding: 16px 0;
}


.notifications{
	width: 400px;
	max-height: 400px;
	overflow: auto;
	overscroll-behavior-block: contain;
}


.notification{
	display: flex;
	padding: 16px;
	border-radius: 8px;
	cursor: pointer;
	color: var(--color-primary-text);
	background-color: var(--color-purple-50);
}

.notification--seen{
	background: none;
}

.notification:hover{
	background-color: var(--color-grey-50);
}


.notification__avatar-wrap{
	position: relative;
}

.notification__icon{
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 12px;

	color: #fff;
	text-align: center;
	line-height: 24px;
	background-color: var(--color-blue-500);
}

.notification__details{
	margin-left: 16px;
}

.notification__main-line{

}

.notification__time-ago{
	font-size: 12px;
	color: var(--color-secondary-text);
}

.notification__actions{
	display: flex;
	margin-top: 8px;
}

.notification__actions button{
	margin: 0;
}

.notification__actions button + button{
	margin-left: 8px;
}

.notification__actions button + .button{
	margin-left: 8px;
}

.ps__category{
	display: flex;
	align-items: center;
	gap: 8px;
	
	padding: 4px;
	line-height: 24px;
	cursor: pointer;
	border: solid 1px transparent;
	border-radius: 8px;
}

.ps__category:hover{
	background-color: var(--color-grey-100);
	border: solid 1px var(--color-grey-200);
}

.ps__category--selected{
	background-color: var(--color-grey-100);
	border: solid 1px var(--color-grey-200);
}

.modal__body--transactions{
	padding: 0;
}

.transactions{

}

.transactions h3{
	display: flex;
	justify-content: space-between;
}




/* Transaction itself */
.transaction{
	display: flex;
	gap: 8px;
	padding: 8px 8px 8px 16px;
	border-bottom: solid 1px var(--color-grey-200);

	font-size: var(--body-size-xs);
}

.transaction button.no-style{
	padding-top: 0;
}

.transaction__inner{
	flex: 1;
}


.transaction__details{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.transaction__day{
	font-size: var(--body-size-xxs);
	color: var(--color-secondary-text);
}


/* Categories breakdown */
.transactions__categories{
	display: grid;
	gap: 8px;
	margin: 0 0 32px 0;
}

.transactions__category{
	padding: 4px 8px;
	border: solid 1px var(--color-grey-200);
	border-radius: 8px;
	cursor: pointer;
}

.transactions__category:hover{
	background-color: var(--color-grey-100);
	border: solid 1px var(--color-grey-300);
}

.transactions__category-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.transactions__category-transactions{
	margin-top: 8px;
}

.transactions__total{
	display: flex;
	justify-content: flex-end;

	margin: 8px 0 0 0;
	padding: 8px 0 0 0;
	border-top: solid 1px var(--color-grey-300);

	font-weight: 600;
}

.transactions__category-details{
	display: flex;
	align-items: center;
	gap: 8px;
}

.transactions__category-color-ball{
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background-color: var(--color-grey-200);
}

.transactions__category-name{

}

.transactions__category-count{
	padding: 4px 8px;
	background-color: var(--color-grey-100);
	border-radius: 8px;
	font-size: var(--body-size-sm);
}




/* Days section */
.transactions__days{
	display: flex;
	gap: 4px;
	overflow: auto;
}

.transactions__day{
	flex: 1;
	max-width: 20%;
}

.transactions__day-title{
	margin-top: 4px;
	font-size: var(--body-size-xs);
	text-align: center;
	line-height: 20px;
	text-align: center;
}

.transactions__day-bar{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 auto;
	height: 180px;
	min-width: 8px;
	border-radius: 6px;
	overflow: hidden;
}

.transactions__day-segment{
	min-width: 8px;
	background-color: var(--color-grey-200);
}

.transactions__day-segment:first-of-type{
	border-radius: 6px 6px 0 0;
}

/* Layout */
.setup__section{
	display: flex;
	max-width: 960px;
	margin: 40px auto 80px auto;
}

.setup__section-title{
	flex: 4;
	padding-right: 32px;
}

.setup__section-title h2{
	margin-top: 0;
	font-size: var(--heading-size-sm);
}

.setup__section-title p{
	font-size: 14px;
	line-height: 22px;
	color: var(--color-secondary-text);
}

.setup__section-body{
	flex: 8;
}

@media(max-width: 768px){
	.setup__section-title h2{
		font-size: var(--heading-size-xs);
	}
}

@media(max-width: 576px){
  .setup__section{
  	flex-direction: column;
  }
}


/* Users */
.setup__user{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.setup__user-details{
	flex: 1;
}

.setup__user-name{
	font-weight: bold;
}

.setup__user-role{
	text-transform: capitalize;
	font-size: var(--body-size-sm);
}

button.setup__user-role{
	padding: 0;
	font-weight: normal;
}

button.setup__user-role i{
	font-size: var(--body-size-xs);	
}








/* Event types */
.event-type-form__available-fields-list{
	display: grid;
	gap: 4px;
}

.event-type-form__available-fields-list button{
	text-align: left;
}

.event-type-form__fields{
	
}

.event-type-form__field{
	margin: 0 0 4px 0;
	padding: 0 8px;
	border-radius: 4px;
	border: solid 1px var(--color-grey-200);
}



.event-type-form__field-name-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.event-type-form__field-name{
	line-height: 40px;
}


.event-type-form__field-default-row{
	font-size: var(--body-size-sm);
	padding-bottom: 8px;
}





/* Types */
.setup__type{
	display: flex;
	align-items: center;
	padding: 8px;
	margin-bottom: 8px;

	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
	background-color: #fff;

	line-height: 24px;
}

.setup__type button{
	padding: 0;
}

.setup__type-color{
	width: 8px;
	height: 8px;
	border-radius: 4px;
	margin: 0 8px 0 0;
	transition: background-color 500ms;
}

.setup__type-name{
	flex: 1;
}

.setup__type-actions button{
	margin-left: 8px;
}






/* Categories */
.setup__category{
	display: flex;
	align-items: center;
	padding: 8px;
	margin-bottom: 8px;

	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
	background-color: #fff;

	line-height: 24px;
}

.setup__category button{
	padding: 0;
}

.setup__category-color{
	width: 8px;
	height: 8px;
	border-radius: 4px;
	margin: 0 8px 0 0;
	transition: background-color 500ms;
}

.setup__category-name{
	flex: 1;
}

.setup__category-actions button{
	margin-left: 8px;
}

.setup__category-grip{
	width: 40px;
	text-align: center;
	cursor: grab;
}




/* Measurables */
.setup__measurable{
	display: flex;
	align-items: center;
	padding: 8px;
	margin-bottom: 8px;

	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
	background-color: #fff;

	line-height: 24px;
}

.setup__measurable button{
	padding: 0;
}

.setup__measurable-name{
	margin-left: 16px;
}

.setup__measurable-unit{
	padding: 0 8px;
	border-radius: 4px;
	min-width: 40px;
	background-color: var(--color-grey-200);
	text-align: center;
}

.setup__measurable-value{
	margin-left: 8px;
}

.setup__measurable-spacer{
	flex: 1;
}

.setup__measurable-actions button{
	margin-left: 8px;
}




/* Tags */
.setup__tags{
	display: flex;
	gap: 8px;
	row-gap: 8px;
	flex-wrap: wrap;
}

.setup__tag{
	position: relative;
	padding: 8px 8px 8px 24px;
	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
	
	background-color: #fff;
	transition: background-color 500ms;

	line-height: 24px;
}

.setup__tag-name{
	margin-right: 16px;
}

.setup__tag-top-row{
	display: flex;
}

.setup__tag-top-row button{
	padding: 0;
}

.setup__tag-ring{
	position: absolute;
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	box-sizing: border-box;

	border: solid 1px rgba(0,0,0,.1);
	background-color: var(--color-grey-100);
	box-shadow: inset var(--style-box-shadow-1);
}


/* Add/edit tag modal */
.add-tag__measurable{
	display: flex;
	align-items: center;
	gap: 8px;

	background-color: var(--color-grey-100);
	padding:  8px;
	border-radius: 8px;
	line-height: 24px;
	border: solid 1px var(--color-border);
}

.add-tag__measurable-name{
	flex: 1;	
	font-weight: bold;
}

.add-tag__measurable button{
	padding: 0;
}

.add-tag__measurable input{
	max-width: 80px;
	text-align: center;
}

.add-tag__measurable + .add-tag__measurable{
	margin-top: 8px;
}

.add-tag__add-measurable{
	margin-top: 8px;
}

.add-tag__measurables-list{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.add-tag__measurables-list button{
	text-align: left;
}



.add-tag__formulas{
	margin-top: 8px;
}

.add-tag__formula{
	display: flex;
	align-items: center;
	gap: 8px;

	background-color: var(--color-grey-100);
	padding:  8px;
	border-radius: 8px;
	line-height: 24px;
	border: solid 1px var(--color-border);
}

.add-tag__formula + .add-tag__formula{
	margin-top: 8px;
}

.add-tag__formula input:first-of-type{
	flex: 1;
}

.add-tag__formula input:last-of-type{
	flex: 2;
}

.add-tag__formula button{
	padding: 0;
}

.add-tag__add-formula{
	margin-top: 8px;
}



/* Days off */
.setup__days-off{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	row-gap: 8px;
}

.setup__day-off{
	display: flex;
	align-items: center;
	padding: 8px;
	border-radius: 8px;
	box-shadow: var(--style-box-shadow-1);
	background-color: #fff;

	line-height: 24px;
}

.setup__day-off-details{
	margin-right: 16px;
}

.setup__day-off-name{

}

.setup__day-off-occurs{
	text-transform: capitalize;
	font-size: 12px;
}


.tags{
	display: grid;
	gap: 8px;
}

.tag{
	position: relative;
	padding: 8px;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--bg-hex), var(--color-grey-100));
	border: solid 1px var(--color-grey-400);
}

button.tag__remove{
	display: none;
	position: absolute;
	top: -16px;
	right: -16px;

	padding: 0;
	width: 24px;
	height: 24px;
	border-radius: 16px;
	background-color: var(--text-hex);

	color: var(--color-white);
	text-align: center;
	line-height: 24px;
}

button.tag__remove i{
	pointer-events: none;
}

.tag__main{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tag__name{
	display: flex;
	align-items: center;
	gap: 8px;
}

.tag__checkbox input{
	accent-color: var(--text-hex);
}

.tag__measurables{
	display: flex;
	align-items: center;
	gap: 12px;
}

.tag__measurable-name{
	font-size: var(--body-size-xs);
}

.tag__measurable-value{
	text-align: center;
}




.tag__extra{
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms;
}

.tag__extra-overflow{
	overflow: hidden;
}




.tag__extra-measurables{
	display: grid;
	gap: 8px;
	padding-top: 8px;
}

.tag__extra-measurable{
	display: flex;
	justify-content: space-between;
	align-items: center;
}




.tag.tag--editing .tag__extra{
	grid-template-rows: 1fr;
}

.tag.tag--editing button.tag__remove{
	display: block;
}

.tasks{
	display: grid;
	gap: 8px;
}

.task{
	display: flex;
	align-items: center;
}

.task__checkbox{
	flex-shrink: 0;
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0 4px 0 0;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
}

.task__description{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.task__checkbox input{
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	cursor: pointer;
	opacity: 0;
	z-index: 1;
}

.task__checkbox-check{
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: solid 2px var(--color-grey-400);
	border-radius: 4px;

	line-height: 20px;
	text-align: center;

	color: #fff;
	transition: background 200ms;
}

.task__checkbox input:checked + .task__checkbox-check{
	background-color: var(--color-success);
}

.timeline-day{
	display: flex;
	flex-direction: column;

	min-width: 613px;	
	max-width: 613px;
	height: 100dvh;
}

@media(max-width: 613px){
	.timeline-day__event-start{
		display: none;
	}

	.timeline-day{
		min-width: 0;
	}
}

@media(max-width: 540px){
	.timeline-day{
		height: 90dvh;
	}
}


.panel:has(.timeline-day){
	background-color: var(--color-grey-200);
}


/* Head */
.timeline-day__head{
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 16px;
	font-weight: bold;
	color: var(--color-grey-900);

	background-color: var(--color-grey-100);
}

.timeline-day__day-name{
	font-size: var(--heading-size-md);
	user-select: none;
}

.timeline-day__date{
	font-size: var(--body-size-lg);
	user-select: none;
}


/* Week */
.timeline-day__week{
	display: flex;
	padding: 0 16px 8px 16px;
	align-items: center;

	background-color: var(--color-grey-100);
	border-bottom: solid 1px var(--color-grey-400);
}




/* Body */
.timeline-day__body{
	flex: 1;
	padding: 16px;
	overflow: auto;
	overscroll-behavior-block: contain;
}

.timeline-day__event-row{
	display: flex;
}

.timeline-day__event-start{
	width: 80px;
}

.timeline-day__event-item{
	flex: 1;
	width: 500px;
}

@keyframes showTimelineDayCard {
  0%{
    transform: translateX(100%);
  }

  100% {
    transform: translateY(0);
  }
}


/* Ongoing events */
.timeline-day__ongoing{
	padding: 16px;
	background-color: var(--color-grey-300);
	border-radius: 16px;
	margin-bottom: 16px;
}

.timeline-day__ongoing-events{
	display: grid;
	gap: 8px;
}

.timeline-day__ongoing-event{
	display: flex;
	align-items: center;
	justify-content: space-between;
}



@media(max-width: 540px){
	.timeline-day__body{
		padding: 0;
		scroll-snap-type: x mandatory;
	}

	.timeline-day__cols{
		width: 300vw;
		height: 100%;
		display: flex;
	}

	.timeline-day__col{
		width: 100vw;
		padding: 16px;
		box-sizing: border-box;
		overflow: auto;
		scroll-snap-align: start;
	}
}

.page.week-layout {
	margin-left: 73px;

	
	height: 100dvh;
	display: grid;
	align-items: center;
}


.week__fixed{
	/*position: fixed;
	top: 0;
	right: 0;
	left: 73px;*/
}

.week__title{
	position: sticky;
	top: 0;
	padding: 32px 16px;

	background-color: var(--color-grey-200);
	z-index: 1;
}

.week__title-primary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
}

.week__title-primary h3{
	margin: 0;
}



.week__title-secondary{
	display: flex;
	align-items: center;
	justify-content: space-between;
}



/* week spent vs earning */
.week__spending-chart{
	width: 320px;
	height: 8px;
	overflow: hidden;

	border-radius: 4px;
	background-color: var(--color-grey-300);
}

.week__spending-progress{
	height: 8px;
	width: calc(var(--percent) * 1%);

	transition: width 150ms;
	background-color: var(--color-rose-400);
}



.week__nav{
	display: flex;
	gap: 4px;
}

.week__nav a{
	display: block;
	padding: 8px 12px;
	border: solid 1px var(--color-grey-300);
	border-radius: 100px;
	background-color: var(--color-grey-100);

	line-height: 24px;
	color: var(--color-text-primary);
	font-size: 18px;
	font-weight: normal;
}



.week{
	display: flex;
	gap: 8px;
	padding: 0 16px 32px 48px;
}

.week__day{
	flex: 1;
}

.week__header{
	position: sticky;
	top: 200px;
	padding: 16px 0;

	background-color: var(--color-grey-200);
	z-index: 1;
}

.week__header::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 8px;
	border-radius: 8px 8px 0 0;
	background-color: var(--color-grey-100);
}

.week__header--date{
	display: flex;
	align-items: center;
	justify-content: space-between;	
}

.week__header--numbers{
	font-size: 14px;
}

.week__day--today .week__header {
	color: var(--color-blue-700);
}

.week__timeline{
	background-color: var(--color-grey-100);
	border-radius: 0 0 8px 8px;
}



/* week categories spent */
.week__categories{
	margin-top: 8px;
	padding-top: 8px;
	border-top: solid 1px var(--color-grey-300);
	display: flex;
	gap: 12px;

	background-color: var(--color-grey-200);
	min-height: 52px;
}

.week__categories--loading .week__category{
	background-color: var(--color-grey-300);
	opacity: 0.5;
}

.week__categories--loading .week__category > *,
.week__categories--loading .week__category::before{
	opacity: 0;
}

.week__category{
	position: relative;
	gap: 8px;
	
	padding: 8px;
	border: solid 1px var(--color-grey-300);
	border-radius: 8px;
	background-color: var(--color-grey-100);

	font-size: 12px;
	cursor: pointer;

	transition: opacity 300ms;
}

.week__category::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background-color: var(--color);
	opacity: 0.1;
	z-index: 1;
}

.week__category:hover::before{
	opacity: 0.15;
}

.week__category > *{
	position: relative;
	z-index: 2;
}

.week__category-count{
	position: absolute;
	top: -6px;
	right: -6px;
	width: 16px;
	height: 16px;

	border-radius: 8px;
	background-color: var(--color-grey-600);
	color: var(--color-white);

	line-height: 16px;
	text-align: center;
	font-size: 11px;
}


/* week day component */
.week-day{
	position: relative;
}

.week-day__events{
	position: relative;
	--height: calc(var(--hour-height) * 1px);
	height: calc(var(--height) * 24);

	background: repeating-linear-gradient(
	    to bottom,
	    var(--color-grey-200) 0px,
	    var(--color-grey-200) 1px,
	    transparent 1px,
	    transparent var(--height)
	);
}

.week-day__event{
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	right: 0;

	padding: 4px;
	margin: 0 4px;
	height: calc(var(--duration-hours) * var(--hour-height) * 1px);
	transform: translateY(calc(var(--start-hours) * var(--hour-height) * 1px));
	transition: transform 300ms, height 300ms;

	background-color: var(--color);
	border: solid 1px var(--color-grey-200);
	border-radius: 8px;
	cursor: pointer;
}

.week-day__marker{
	pointer-events: none;
	position: relative;
	height: calc(var(--hour-height) * 1px);
	font-size: 12px;
}

.week-day__marker span{
	position: absolute;
	padding: 0 2px;
	top: -6px;
	left: -40px;
	color: var(--color-grey-600);
	line-height: 12px;
}

.week-day__hover-marker{
	position: absolute;
	pointer-events: none;
	top: 500px;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-blue-200);
	opacity: 0;
	transition: opacity 200ms;
}

.week-day__hover-marker span{
	position: absolute;
	padding: 0 2px;
	top: -6px;
	left: 2px;
	

	font-size: 11px;
	line-height: 12px;
	color: var(--color-blue-400);

	background-color: var(--color-grey-100);
}

.week-day__events:hover .week-day__hover-marker{
	opacity: 1;
}

.week-day--all-day{
	display: block;
	height: 42px;
	transform: translateY(0);
}

.week-day__event:hover {
	box-shadow: var(--style-box-shadow-2);
}

.week-day__event-name{
	font-weight: bold;
	font-size: 14px;
}

.week-day__event-time{
	font-size: 12px;
}


.widget{
	position: relative;
}

.widget__inner{
	overflow: hidden;
}

.widget__overlay{
	display: none;
	position: absolute;
	inset: 0;
	cursor: pointer;
}


/* Editing shows the overlay and disables clicks */
.widget--editing .widget__inner{
	pointer-events: none;
}

.widget--editing .widget__overlay{
	display: block;
}

.widget--editing .widget__inner .card{
	position: relative;
}


/* 
	Add bordered overlay on top of all cards which
	could be multiple depending on the widget
*/
.widget--editing .widget__inner .card::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;

	overflow: hidden;
	border: solid 1px var(--color-grey-400);
	
	opacity: 0;
	z-index: 10;
	transition: opacity 300ms;
}

.widget--editing .widget__inner .card::before{
	content: '';
	position: absolute;
	inset: 0;
	
	border-radius: 8px;
	background-color: var(--color-grey-900);
	
	opacity: 0;
	z-index: 1;
	transition: opacity 300ms;
}

.widget__overlay:hover + .widget__inner .card::after{
	opacity: 1;
}

.widget__overlay:hover + .widget__inner .card::before{
	opacity: .05;
}

.widget__controls{
	display: none;
	position: absolute;
	top: -8px;
	right: -8px;
	border-radius: 8px;
	z-index: 20;
}

.widget__controls button{
	width: 40px;
	text-align: center;
	background-color: var(--color-white);
	box-shadow: var(--style-box-shadow-1);
	border-radius: 100px;
}

.widget--editing .widget__controls{
	display: block;
}


/* Chart */
.bar-chart__relative{
	position: relative;
}

.bar-chart{
	height: var(--height);
	position: relative;
}

.bar-chart__horizontal-lines{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--height) - 28px);
}

.bar-chart__horizontal-line{
	position: absolute;
	left: 0;
	right: 0;
	border-top: dotted 1px var(--color_hex);
}

.bar-chart__horizontal-line-value{
	position: absolute;
	top: -10px;
	left: 0;
	line-height: 12px;
	padding: 4px;

	color: var(--color_hex);
	font-size: var(--body-size-xs);

	background-color: var(--color-white);
}

.bar-chart-cols{
	position: absolute;
	inset: 0;
	left: 40px;
	display: flex;
	gap: 8px;
	overflow: hidden;
}

.bar-chart__col{
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bar-chart__col-bars{
	position: relative;
	display: flex;
	gap: 2px;
	justify-content: center;
	height: calc(var(--height) - 28px);
	background: linear-gradient(transparent, rgba(0, 0, 0, .02) 50%);

	border-radius: 4px;
}

.bar-chart__col--highlight .bar-chart__col-bars{
	background: linear-gradient(transparent, rgba(0, 0, 0, .04) 50%);
}

.bar-chart__col-label{
	color: var(--text_hex);
	font-size: 10px;
	text-align: center;
}

.bar-chart__col--highlight .bar-chart__col-label{
	font-weight: bold;
}

.bar-chart__bar{
	position: relative;
	width: 100%;
	max-width: 8px;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	gap: 1px;

	height: calc(var(--height) - 28px);
	border-radius: 40px;
}

.bar-chart__bar-inner{
	position: relative;
	width: 100%;
	background-color: var(--color_hex);
	border-radius: 40px;
	height: var(--percent);
}



/* Bubble */
.bar-chart__bubble{
	pointer-events: none;
	position: absolute;
	padding: 8px;
	border-radius: 8px;
	box-shadow: var(--style-box-shadow-4);
	background-color: var(--color-white);

	font-size: var(--body-size-sm);
	white-space: nowrap;
	z-index: 1;

	opacity: 0;
	transform: translateX(var(--left)) translateY(var(--top));
	transition: opacity 200ms, transform 100ms;
}

.bar-chart__bubble--visible{
	opacity: 1;
}

.bar-chart__bubble::before{
	content: '';
	position: absolute;
	top: calc(100% - 12px);
	left: 50%;
	margin-left: -8px;

	width: 16px;
	height: 16px;
	background-color: var(--color-white);
	border-radius: 3px;
	transform: rotate(45deg);
}

.bar-chart__bubble-item + .bar-chart__bubble-item{
	margin-top: 8px;
	border-top: solid 1px var(--color-grey-200);
	padding-top: 8px;
}



.bar-chart__bubble > div{
	position: relative;
	z-index: 1;
}

.bar-chart__bubble-value-row{
	display: flex;
	justify-content: center;
	gap: 8px;

	font-size: var(--body-size-md);
	font-weight: bold;
}

.bar-chart__bubble-unit{
	font-weight: normal;
	color: var(--color-secondary-text);
}

.bar-chart__bubble-value{

}

.bar-chart__bubble-value-row + .bar-chart__bubble-info-row{
	margin-top: 8px;
}

.bar-chart__bubble-info-row{
	font-size: var(--body-size-xs);
	text-align: center;
}

.event-feed-widget__tabs{
	display: flex;
	padding-bottom: 16px;
}

.event-feed-widget__show-more{
	margin-top: 8px;
	text-align: center;
}
.heatmap-widget{
	container: heatmap / inline-size;
}


.heatmap-widget__scroller{
	overflow: auto;
}

.heatmap-widget__chart{
	min-width: 800px;
}


/* Grid */
.heatmap-widget__grid-labels{
	display: grid;
	grid-template-columns: repeat(53, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}

.heatmap-widget__grid-label{
	color: var(--color-grey-700);
	font-size: var(--body-size-xs);
}

.heatmap-widget__grid{
	display: grid;
	grid-template-columns: repeat(53, 1fr);
	grid-template-rows: repeat(7, 1fr);
	grid-auto-flow: column;
	gap: 4px;
}

.heatmap-widget__day{
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 2px;
	background-color: var(--color-grey-200);
	box-shadow: inner var(--style-box-shadow-1);
}

.heatmap-widget__day--today::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 2px;
	border: solid 1px rgba(0, 0, 0, .1);
}

.heatmap-widget__day:hover{
	box-shadow: var(--style-box-shadow-2);
}

.heatmap-widget__day:hover::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.1);
}

.heatmap-widget__filler{
	aspect-ratio: 1/1;
}


@media (pointer: coarse) {
	.headmap-widget__day{
		pointer-events: none;
	}
}


/* Numbers below the grid */
.heatmap-widget__numbers{
	display: flex;
	gap: 24px;
	margin-top: 16px;
}

@container heatmap (max-width: 600px) {
  .heatmap-widget__numbers{
  	display: grid;
  	gap: 12px;
  	grid-template-columns: repeat(2, 1fr);
  	grid-template-rows: repeat(2, 1fr);
  }
}

.heatmap-widget__number{
	
}

.heatmap-widget__label{
	color: var(--color-grey-500);
	font-size: var(--body-size-sm);
	white-space: nowrap;
}

.heatmap-widget__value{
	color: var(--color-grey-900);
	font-size: var(--body-size-xl);
	font-weight: bold;
	line-height: 32px;
}

.heatmap-widget__top-tags{
	display: flex;
	gap: 8px;
	height: 32px;
	align-items: center;
}

.heatmap-widget__tag{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 20px;
	padding: 4px 8px 4px 8px;
	border-radius: 8px;
	background-color: var(--bg);

	font-size: var(--body-size-sm);
	line-height: 20px;
/*	box-shadow: var(--style-box-shadow-1);*/
}

@container heatmap (max-width: 600px) {
	.heatmap-widget__tag{
		padding: 2px 4px;
		font-size: var(--body-size-xxs);
	}
}

.heatmap-widget__tag-name{
	white-space: nowrap;
}

.heatmap-widget__tag-count{
	display: none;
	position: absolute;
	top: -8px;
	right: -8px;

	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: var(--text);
	
	color: #fff;
	text-align: center;
	line-height: 16px;
	font-size: var(--body-size-xxs);
}



/* Hover card */
.heatmap-widget__hover-card-positioner{
	position: fixed;
	margin-left: -120px;
}

.heatmap-widget__hover-card{
	position: absolute;
	bottom: 8px;
	width: 240px;
	border-radius: 16px;

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	background-color: rgba(255, 255, 255, .5);
	box-shadow: var(--style-box-shadow-3);

	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity .2s, transform .2s;
}

.heatmap-widget__hover-card--show{
	opacity: 1;
	transform: translateY(0);
}

.heatmap-widget__hover-card-head{
	padding: 12px;
	color: var(--color-grey-600);
	font-weight: 600;
}

.heatmap-widget__hover-card-body{
	padding: 0 12px 12px 12px;
}






/* Hover card events */
.heatmap-widget__hover-card-event-line{
	display: flex;
	gap: 8px;
}

.heatmap-widget__hover-card-event-line + .heatmap-widget__hover-card-event-line{
	margin-top: 8px;
}

.heatmap-widget__hover-card-event-start{
	width: 48px;
	font-size: var(--body-size-xs);
}



.photos-widget{
	container: gallery / inline-size;
}

.photos-widget__grid{
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(6, 1fr);
}

/* Less than 600 */
@container gallery (max-width: 600px) {
  .photos-widget__grid{
		grid-template-columns: repeat(4, 1fr);
	}
}

@container gallery (max-width: 320px) {
  .photos-widget__grid{
		grid-template-columns: repeat(3, 1fr);
	}
}

.photos-widget__photo{
	 border-radius: 8px;
	 aspect-ratio: 1/1;
	 background-color: var(--color-grey-300);
	 background-size: cover;
	 background-position: 50% 50%;
}

.photos-widget__show-more{
	margin-top: 8px;
	text-align: center;
}

.tag-widget{
	padding: 16px 16px 24px 16px;
	container: tagwidget / inline-size;
}

.tag-widget__head{
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: var(--body-size-md);
	margin-bottom: 16px;
}

.tag-widget__head button{
	text-wrap: nowrap;
}

.tag-widget__head strong{
	  font-size: var(--body-size-xl);
}

.tag-widget__head-spacer{
	flex: 1;
}



@container tagwidget (max-width: 600px) {
	.tag-widget__head{
		flex-direction: column;
	}

	.tag-widget__head-spacer{
		display: none;
	}
}


.tag-widget__month-control{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--color-grey-200);
	border-radius: 16px;
}

.tag-widget__month-control div{
	min-width: 86px;
	text-align: center;
}


.tag-widget__tags{
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tasks-widget{

}



.tasks-widget__tabs{
	display: flex;
	padding-bottom: 16px;
}

.tasks-widget__events{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tasks-widget__show-more{
	margin-top: 8px;
	text-align: center;
}



.tasks-widget__event{

}



.tasks-widget__event-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tasks-widget__event-name div:first-of-type{
	font-weight: bold;
}

.tasks-widget__event-name div:last-of-type{
	color: var(--color-grey-600);
	font-size: var(--body-size-xs);
}

.tasks-widget__event-tasks{
	padding-left: 16px;
	margin-top: 4px;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
|
|
|	Main page layout
|
|
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.landing-page{
	color: var(--color-primary-text);
	font-family: var(--font-sans-serif);
}

.landing-page h1, 
.landing-page h2, 
.landing-page h3{
	font-family: var(--font-serif);
}

.landing-page__container{
	max-width: 960px;
	margin: 0 auto;
}

.landing-page__section{

}

.landing-page__section h2{
	font-weight: normal;
	font-size: 28px;
	margin: 16px 0;
}

.landing-page__section p{
	font-size: var(--body-size-md);
	font-weight: 200;
	line-height: 24px;
}


/* Basic two col */
.landing-page__section-cols{
	display: flex;
	gap: 96px;
}

.landing-page__section-col{
	flex: 1;
	position: relative;
}



/* Logo */
.landing-page__logo{
	position: relative;
	width: 120px;
	height: 120px;
	z-index: 1;
}

.landing-page__logo::before{
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	width: 80px;
	height: 80px;
	border: solid 1px green;

	box-shadow: 0 40px 70px rgba(248, 80, 80, .5);
}

.landing-page__logo::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background-color: #F85050;
	background-image: url('../images/app_icon.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	border: solid 2px #E33838;
}




/* Pill */
.heading-pill{
	display: inline-block;
	padding: 0 16px;

	font-size: 14px;
	line-height: 28px;
	border-radius: 16px;
}

.heading-pill__inner{
	display: flex;
	gap: 8px;
	align-items: center;
}


/* Slide out effect */
.landing-page--slide-out{
	position: fixed;
	inset: 0;

	opacity: 0;
	pointer-events: none;
	animation-name: landing-page-slide-out;
	animation-duration: 500ms;
}

@keyframes landing-page-slide-out{
	from{
		transform: scale(1);
		opacity: 1;
	}
	to{
		transform: scale(.9);
		opacity: 0;
	}
}


@media(max-width: 768px){
	.landing-page__section h2{
		margin-top: 20px;
		font-size: var(--heading-size-lg);
	}

	.landing-page__section-cols{
		flex-direction: column;
		gap: 32px;
	}
}


@media(max-width: 1200px){
	.landing-page__container{
		margin: 0 16px;
	}
}
.landing-page__section--banner{
	background-color: var(--color-orange-200);
	background: linear-gradient(90deg, var(--color-orange-100), var(--color-orange-200));
	padding: 80px 0;
}

.landing-page__section--banner h2{
	font-size: var(--heading-size-xl);
}

.landing-page__section--banner p{
	font-size: var(--body-size-lg);
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

	DESKTOP

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.landing-page__desktop{
	position: relative;
	margin: 0 auto;

	width: 100%;
	max-width: 880px;
	aspect-ratio: 1/.6;


	box-sizing: border-box;
	border-radius: 16px;
	border: solid 8px var(--color-grey-900);
	background-image: url('../images/landing_page/desktop_screen_02.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;

	box-shadow: 6px 8px 40px rgba(0,0,0,.4);
}

.landing-page__desktop .landing-page__phone{
	position: absolute;
	right: -80px;
	bottom: -60px;
}

.landing-page__desktop--measurable{
	background-image: url('../images/landing_page/desktop_screen_measurable_01.jpg');
}

.landing-page__desktop--tag{
	background-image: url('../images/landing_page/desktop_screen_tag_01.jpg');
}

.landing-page__desktop--dashboard{
	background-image: url('../images/landing_page/desktop_screen_dashboard_01.jpg');
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

	PHONE

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.landing-page__phone{
	position: relative;
	flex-shrink: 0;
	border-radius: 28px;
	border: solid 6px var(--color-grey-900);
	background: #fff;
	width: 280px;
	aspect-ratio: 1/2.2;

	background-image: url('../images/landing_page/mobile_screen_03.jpg');
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: cover;

	box-shadow: 6px 8px 24px rgba(0,0,0,.4);
	overflow: hidden;
}

.landing-page__phone::before{
	content: '';
	position: absolute;
	top: 0px;
	left: 30%;
	right: 30%;

	height: 4%;
	border-radius: 0 0 8px 8px;
	background-color: var(--color-grey-900);
}

.landing-page__phone--event{
	background-image: url('../images/landing_page/mobile_screen_event_01.jpg');
}

.landing-page__phone--day{
	background-image: url('../images/landing_page/mobile_screen_day_01.jpg');
}

.landing-page__phone-list{
	list-style: none;
	padding: 0;
	margin: 8px;
}

.landing-page__phone-list li{
	display: block;
	padding: 0 8px;
	border-bottom: solid 1px var(--color-grey-200);

	line-height: 32px;
	font-size: var(--body-size-sm);
	font-weight: 600;
}

.landing-page__phone-list li:last-of-type{
	border-bottom: none;
}





/* Panels */
.landing-page__phone-panel{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	transform: translateY(100%);
	border-radius: 8px;
	box-shadow: 0 0 80px rgba(0, 0, 0, .3);
	background-color: var(--color-white);
	transition: transform 500ms;
}

.landing-page__phone-panel--add{
	height: 53%;
	background-image: url('../images/landing_page/mobile_edit_01.jpg');
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Panels opening */
.landing-page__phone--active .landing-page__phone-panel{
	transform: translateY(0);
	/*transform: translateY(0);
	animation-name: landingPageMobileAddPanel;
	animation-duration: 500ms;*/
}

@keyframes landingPageMobilePanelOpen {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

	SECTION

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.landing-page__section--devices{
	text-align: center;
	padding: 80px 16px;
	background-color: var(--color-grey-400);
}


.landing-page__section--devices .landing-page__logo{
	margin: 0 auto;
}

.landing-page__section.landing-page__section--devices p{
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	font-size: var(--body-size-lg);
	z-index: 1;
}





@media(max-width: 768px){
	.landing-page__desktop{
		border-radius: 12px;
		border: solid 4px var(--color-grey-900);
	}

	.landing-page__desktop .landing-page__phone{
		right: 8px;
		bottom: -54px;
		border-radius: 12px;
		border: solid 4px var(--color-grey-900);
		right: 8px;
		width: 33%;
	}
}


.landing-page__section{
	overflow: hidden;
}


.landing-page__call-out{
	padding: 40px;
	background: linear-gradient(var(--color-grey-100), var(--color-grey-200));
	border-radius: 20px;
	border: solid 1px var(--color-grey-400);
}

.landing-page__call-out p{
	font-size: var(--body-size-lg);
}



.landing-page__section--key-features{
	position: relative;

	padding: 40px 16px 72px 16px;
	box-shadow: -32px 0 64px rgba(0,0,0,.1);
	z-index: 10;
	background-color: var(--color-grey-100);
}

.landing-page__section--key-features .heading-pill{
	border: solid 1px var(--color-grey-400);
}

.landing-page__section--key-features h2{
	font-size: var(--heading-size-lg);
	text-wrap: balance;
	line-height: 1.2;
}

.landing-page__section--key-features p{
	font-size: 18px;
	font-weight: 300;
}



.landing-page__section--key-features .landing-page__section-col{
	padding: 32px;
	background-color: var(--color-grey-200);
	border-radius: 24px;
}

.landing-page__section--key-features .landing-page__section-cols{
	gap: 32px;
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 0 0 0;
}

.landing-page__section--key-features .landing-page__section-cols img{
	max-width: 340px;
}

.landing-page__section--key-features .landing-page__phone{
	margin: 32px auto 0 auto;
}



.landing-page__section--pre-footer{
	padding: 120px 0;
	text-align: center;

	color: var(--color-white);
	background-color: var(--color-grey-800);
}

.landing-page__section--pre-footer .landing-page__logo{
	margin: 0 auto;
}

.landing-page__section--pre-footer h2{
	margin-top: 24px;
	font-size: var(--heading-size-xl);
}


.landing-page__section--footer{
	color: var(--color--white);
	min-height: 0;
	padding: 40px 0;
	background-color: var(--color-grey-800);
}

.landing-page__section--footer a{
	color: var(--color-rose-200);
}

.footer__container{
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}


.landing-page__section--footer .lineyear-about-line{
	color: var(--color-white);
}

.landing-page__section--footer .lineyear-about-line i{
	color: var(--color-rose-400);
}

.landing-page__section--hero{
	position: relative;
	background-image: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-grey-100) 100%);
	background-image: linear-gradient(135deg, var(--color-grey-100) 0%, var(--color-blue-50) 100%);
	background-image: linear-gradient(135deg, var(--color-grey-100) 0%, var(--color-orange-100) 100%);
}

.landing-page__section--hero .landing-page__container{
	flex: 1;
	position: relative;
	z-index: 10;
}


.landing-page__hero-layer{
	position: absolute;
	inset: 0;
}


/* Shadows */
.landing-page__hero-layer--shadows{
	background-image: url("../images/landing_page/shadows.png");
	background-size: cover;
	background-position: 50% 50%;
	filter: blur(45px);
	background-blend-mode: darken;
  	mix-blend-mode: darken;
  	pointer-events: none;
  	max-height: 100vh;
  	opacity: .3;
}



/* Content layer */
.landing-page__hero-layer--content{
	position: relative;
	padding: 60px 0 140px 0;
	box-sizing: border-box;
	z-index: 10;
}

.landing-page__hero-content{
	margin: 0 auto;
	padding: 0 20px;
	align-items: center;
}

.landing-page__hero-text{
	text-align: center;
	margin: 0 auto;
	padding: 80px 24px;
}

.landing-page__hero-text h1{
	display: block;
	margin: 0;
	font-size: 60px;
	line-height: 1.1;
	font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	font-weight: 300;
	text-wrap: balance;
}

.landing-page__hero-text p{
	font-size: 18px;
	line-height: 1.4;
	font-weight: 400;
	max-width: 600px;
	margin: 16px auto 32px auto;
	text-wrap: balance;
}

button.landing-page__cta{
	font-weight: 400;
	padding: 12px 56px;
	border-radius: 8px;
	background-color: var(--color-grey-900);
	transition: box-shadow 200ms, background 200ms;
}

button.landing-page__cta:hover{
	background-color: var(--color-black);
	box-shadow: var(--style-box-shadow-3);
}





@media(max-width: 768px){
	.landing-page__hero-text br{
		display: none;
	}

	.landing-page__hero-layer--content{
		padding: 140px 0 80px 0;
	}
}



/* Breakpoints */
@media(max-width: 576px){
	.landing-page__hero-text{
		padding: 0;
	}

	.landing-page__hero-text h1{
		font-size: 40px;
	}

	.landing-page__screen-border{
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: 0px;
	}
}

@media(max-width: 768px){
	.landing-page__tagline{
		text-align: center;
	}

	.landing-page__tagline h1{
		font-size: 40px;
	}
}


/* ALL */
.landing-page__hero-items-container div[class^="landing-page__hero-item"]{
	position: absolute;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}


/* PINS */
.landing-page__hero-pin{
	position: absolute;
	top: -4px;
	left: 50%;
	margin-left: -8px;
	width: 16px;
	aspect-ratio: 1/1;	
}

.landing-page__hero-pin::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	aspect-ratio: 1/1;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('../images/landing_page/pin_red.png');
}

.landing-page__hero-pin::before{
	content: '';
	position: absolute;
	aspect-ratio: 1.66/1;
	width: 38px;

	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('../images/landing_page/pin_shadow.png');

}

.landing-page__hero-pin[data-color="blue"]::after{
	background-image: url('../images/landing_page/pin_blue.png');
}

.landing-page__hero-pin[data-color="green"]::after{
	background-image: url('../images/landing_page/pin_green.png');
}



/* MOON AND STARS */
.landing-page__hero-item--moon{
	top: 40px;
	left: 60%;
	width: 100px;
	height: 100px;
	background-image: url('../images/landing_page/item_moon.png');
}

.landing-page__hero-item--star{
	width: 30px;
	aspect-ratio: 1/1;
	background-image: url('../images/landing_page/item_star.png');
}



/* SKETCH */
.landing-page__hero-item--sketch{
	top: 110px;
	right: -50px;
	width: 200px;
	height: 200px;
	background-image: url('../images/landing_page/item_sketch.png');
}

.landing-page__hero-item--sketch .landing-page__hero-pin{
	top: 8px;
}



/* OTHER STICKERS */
.landing-page__hero-item--rocket{
	top: 150px;
	left: 40%;
	width: 140px;
	height: 140px;
	background-image: url('../images/landing_page/item_rocket.png');
}

.landing-page__hero-item--bear{
	top: 720px;
	left: 45%;
	width: 130px;
	height: 200px;
	background-image: url('../images/landing_page/item_bear.png');
}

.landing-page__hero-item--badge{
	top: 830px;
	left: 45px;
	width: 86px;
	height: 95px;
	background-image: url('../images/landing_page/item_badge.png');
}

.landing-page__hero-item--burger{
	top: 720px;
	right: 140px;
	width: 100px;
	height: 100px;
	transform: rotate(-20deg);
	background-image: url('../images/landing_page/item_burger.png');
}

.landing-page__hero-item--heart-nz{
	top: 560px;
	left: 10px;
	width: 120px;
	height: 126px;
	transform: rotate(-3deg);
	background-image: url('../images/landing_page/item_heart_nz.png');
}

.landing-page__hero-item--eiffel{
	bottom: 420px;
	right: -10px;
	width: 120px;
	height: 120px;
	transform: rotate(-16deg);
	background-image: url('../images/landing_page/item_eiffel.png');
}



/* COLOR SWATCHES */
.landing-page__hero-item--swatch-pink{
	top: 720px;
	left: -80px;
	width: 80px;
	height: 320px;
	
	transform: rotate(5deg);
	background-image: url('../images/landing_page/item_swatch_pink.png');
}

.landing-page__hero-item--swatch-pink .landing-page__hero-pin{
	top: 10px;
	left: 16px;
}

.landing-page__hero-item--swatch-rose{
	top: 720px;
	left: -60px;
	width: 80px;
	height: 320px;
	
	transform: rotate(-2deg);
	background-image: url('../images/landing_page/item_swatch_rose.png');
}




/* PHOTOS */
.landing-page__hero-item--photo{
	width: 220px;
	aspect-ratio: 1.48/1;
	background-color: var(--color-grey-50);
	border-radius: 2px;
	box-shadow: 1px 3px 4px rgba(0,0,0,.5);
}

.landing-page__hero-item--photo[data-pic="rose_01"]{
	top: 40px;
	left: 80px;
	transform: rotate(-3deg);
	background-image: url('../images/landing_page/item_photo_01.jpg');
	z-index: 1;
}

.landing-page__hero-item--photo[data-pic="rose_02"]{
	top: 30px;
	left: 250px;
	transform: rotate(2deg);
	background-image: url('../images/landing_page/item_photo_02.jpg');
}




/* POLAROIDS */
.landing-page__hero-item--polaroid{
	width: 170px;
	height: 200px;
	background-color: var(--color-grey-50);
	border-radius: 4px;
	box-shadow: 1px 3px 4px rgba(0,0,0,.5);
}

.landing-page__hero-item--polaroid::after{
	content: '';
	display: block;
	aspect-ratio: 1/1;
	margin: 4px;
	border-radius: 2px;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.1);
	background-color: #ddd;
	background-size: 50% 50%;
	background-size: cover;
}

.landing-page__hero-item--polaroid[data-pic="cat"]{ top: -100px; right: 100px; transform: rotate(15deg); }
.landing-page__hero-item--polaroid[data-pic="cat"]::after{ 
	background-image: url('../images/landing_page/item_polaroid_cat.jpg');
}

.landing-page__hero-item--polaroid[data-pic="melbourne_01"]{ top: 35%; left: 0px; transform: rotate(7deg); }
.landing-page__hero-item--polaroid[data-pic="melbourne_01"]::after{ 
	background-image: url('../images/landing_page/item_polaroid_melbourne_01.jpg');
}

.landing-page__hero-item--polaroid[data-pic="melbourne_02"]{ top: 650px; left: 180px; transform: rotate(-5deg); }
.landing-page__hero-item--polaroid[data-pic="melbourne_02"]::after{ 
	background-image: url('../images/landing_page/item_polaroid_melbourne_02.jpg');
}




/* DOTS */
.landing-page__hero-item--dot{
	position: relative;
	overflow: hidden;
	width: 40px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: var(--color-green-400);
	box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

.landing-page__hero-item--dot[data-color="blue"]{
	background: var(--color-blue-400);
}

.landing-page__hero-item--dot:after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #00000040, #00000060);
}

.nav{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 60px;
	z-index: 100;

	transition: background 300ms;
}

body.scrolled .nav{
	border-bottom: solid 1px var(--color-grey-200);
	background-color: rgba(240, 240, 240, .8);
	backdrop-filter: blur(2px);
}

.nav__container{
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 60px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}



.nav__logo{
	width: 100px;
	height: 44px;
	background-image: url('../images/logo_02.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
}


.nav__account{
	display: flex;
	gap: 24px;
}

.nav__account a{
	color: var(--color-grey-900);
}

.nav__account a:hover{
	text-decoration: underline;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
|
|
|	SIGN IN BOX 
|
|
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sign-in{
	padding: 32px;
	width: 100%;
	max-width: 300px;
	
	color: var(--color-primary-text);
	background-color: #fff;
	border-radius: 16px;
	box-shadow: var(--style-box-shadow-3);
}

.sign-in h2{
	margin: 0 0 32px 0;
	text-align: center;
	font-size: var(--heading-size-md);
}

.sign-in__social-options{

}

.sign-in__social-options .form-line{
	display: flex;
	justify-content: center;
}

.sign-in__fb{
	height: 40px;
}

.sign-in__google{
	height: 40px;
	overflow: hidden;
}

.landing-page__other-options{
	margin: 16px 8px 8px 8px;
	text-align: center;
}

.landing-page__other-options div + div{
	margin-top: 8px;
}

.sign-in l-alert{
	display: block;
	margin-bottom: 16px;
}

.or{
	display: flex;
	margin:  16px 0;
	align-items: center;
}

.or hr{
	flex: 1;
}

.or div{
	padding: 0 16px;
}


@media(max-width: 380px){
	.sign-in{
		padding: 24px 16px;
	}
}


.landing-page__stack{
	position: relative;
}

.landing-page__stack-item{
	
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
|
|
|	Tags
|
|
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.landing-page__tag{
	min-width: 240px;
	border-radius: 8px;
	border: solid 4px rgba(255, 255, 255, .4);
	overflow: hidden;
	box-shadow: var(--style-box-shadow-5);
}

.landing-page__tag-head{
	padding: 8px;
	font-weight: bold;
}

.landing-page__tag-body{
	color: var(--color-primary-text);
	background-color: var(--color-white);
}

.landing-page__tag-measurable{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
}

.landing-page__tag-value{
	display: flex;
	align-items: center;
	gap: 6px;

	padding: 4px 8px;
	border-radius: 4px;
	background-color: var(--color-grey-50);
}

.landing-page__tag-value div + div{
	padding-left: 6px;
	border-left: solid 1px var(--color-grey-300);
}


.landing-page__tag--fish .landing-page__tag-head{
	background-color: var(--color-purple-50);
	color: var(--color-purple-700);
}

.landing-page__tag--run .landing-page__tag-head{
	background-color: var(--color-blue-50);
	color: var(--color-blue-700);
}

.landing-page__tag--marathon .landing-page__tag-head{
	background-color: var(--color-orange-50);
	color: var(--color-orange-700);
}

.landing-page__tag--homework .landing-page__tag-head{
	background-color: var(--color-green-50);
	color: var(--color-green-700);	
}

.landing-page__tag--practice .landing-page__tag-head{
	background-color: var(--color-red-50);
	color: var(--color-red-700);		
}




.landing-page__timeline{
	max-width: 380px;
}

.landing-page__timeline-day{
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 16px;
	height: 24px;
	border-bottom: solid 1px var(--color-indigo-200);
}

.landing-page__timeline-day--weekend{
	background-color: var(--color-indigo-50);
}



/* Details */
.landing-page__timeline-day::before{
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-indigo-400);
}

.landing-page__timeline-day--weekend::before{
	width: 6px;
	height: 6px;
	margin-left: -1px;
}

.landing-page__timeline-event{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	text-shadow: -1px -1px 0 var(--color-white), 1px -1px 0 var(--color-white), -1px 1px 0 var(--color-white), 1px 1px 0 var(--color-white);
}

.landing-page__timeline-event::before{
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 10px;
}

.landing-page__timeline-event[data-color="pink"]{
	color: var(--color-pink-600);
}
.landing-page__timeline-event[data-color="green"]{
	color: var(--color-green-600);
}
.landing-page__timeline-event[data-color="yellow"]{
	color: var(--color-yellow-600);
}

.landing-page__timeline-event[data-color="pink"]::before{
	background: linear-gradient(120deg, var(--color-pink-500), var(--color-pink-600));
}
.landing-page__timeline-event[data-color="green"]::before{
	background: linear-gradient(120deg, var(--color-green-500), var(--color-green-600));
}
.landing-page__timeline-event[data-color="yellow"]::before{
	background: linear-gradient(120deg, var(--color-yellow-500), var(--color-yellow-600));
}


/* Fade in and out */
.landing-page__timeline-day:nth-of-type(1){
	opacity: .25;
}
.landing-page__timeline-day:nth-of-type(2){
	opacity: .5;
}
.landing-page__timeline-day:nth-of-type(3){
	opacity: .75;
}

.landing-page__timeline-day:nth-of-type(10){
	opacity: .75;
}
.landing-page__timeline-day:nth-of-type(11){
	opacity: .5;
}
.landing-page__timeline-day:nth-of-type(12){
	opacity: .25;
}



/* Hover card */
.landing-page__timeline-card{
	position: absolute;
	top: 28px;
	right: -32px;

	width: 240px;
	border-radius: 16px;

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	background-color: rgba(255, 255, 255, .5);
	box-shadow: var(--style-box-shadow-3);
	z-index: 5;
}

.landing-page__timeline-card .landing-page__event{
	flex: 1;
}



.landing-page__timeline-card-head{
	padding: 12px;
	color: var(--color-grey-600);
	font-weight: 600;
}

.landing-page__timeline-card-event-line{
	display: flex;
	gap: 8px;
}

.landing-page__timeline-card-event-line + .landing-page__timeline-card-event-line{
	margin-top: 8px;
}

.landing-page__timeline-card-event-start{
	width: 48px;
	font-size: var(--body-size-xs);
}

.landing-page__timeline-card-body{
	padding: 0 12px 12px 12px;
}

.landing-page__timeline-card-footer{
	padding: 0 12px 12px 12px;
}

.landing-page__timeline-card--locked{
	pointer-events: all;
	opacity: 1;
	transform: translateX(0);
}