:root {
  color-scheme: 					light dark;

  --font-mono: 						"jb", ui-monospace, monospace;
  --font-icon:							"Font Awesome 6 Pro";

  --font-weight:						380;
  --font-weight-light:		310;
  --font-weight-h:				460;
  --font-weight-bold:			510;

  --time:										0.2s;
  --drop:										drop-shadow(0 2px 2px hsla(140, 5%, 15%, .2));

  --breakpoint-sm: 				40rem;
  --breakpoint: 						42rem;

  --leading-xs:						1;
  --leading-sm:						1.4;
  --leading:								1.6;

  --font-size-xxs:				0.75rem;
  --font-size-xs:					0.8rem;
  --font-size-sm:					0.875rem;
  --font-size-alt:					0.925rem;
  --font-size: 							1.05rem;
  --font-size-lg:					1.125rem;
  --font-size-h4:					1.375rem;
  --font-size-h3:					1.875rem;
  --font-size-h2:					2.125rem;
  --font-size-h1:					3rem;

  --space-xs:							0.025rem;
  --space-sm-alt:					0.125rem;
  --space-sm:							0.25rem;
  --space:									0.5rem;
  --space-md: 						0.675rem;
  --space-lg:							1rem;
  --space-xl:							1.5rem;
  --space-2x:							3rem;
  --space-3x:							4rem;
  --space-4x:							6rem;
  --space-5x:							10rem;

  --border-sm:						1px;
  --border:									1px;
  --border-md:						2px;
  --border-lg:							4px;

  --border-rad-sm:				0.3rem;
  --border-rad:						0.5rem;
  --border-rad-full:				100rem;

  --rapper-xs:							20rem;
  --rapper-sm:						32rem;
  --rapper-alt:							42rem;
  --rapper-md:						48rem;
  --rapper-setting:				58rem;
  --rapper:									68rem;
  --rapper-lg:							82rem;
  --rapper-full:						100%;

  --grid-gap-sm: 					var(--space-md);
  --grid-gap:								var(--space-xl);
  --grid-gap-md:					var(--space-3x);
  --grid-gap-lg: 					var(--space-4x);

  --opacity-10:						0.1;
  --opacity-15:						0.15;
  --opacity-20:						0.2;
  --opacity-40:						0.4;
  --opacity-60:						0.6;
  --opacity-80:						0.8;
  --opacity-90:						0.96;
  --opacity-100:						1;

  --col:											12ch;
  --col-s:									8ch;
  --col-compare:					16ch;

  --gray-0:									hsla(0, 0%, 100%, 1);
  --gray-1:									hsla(140, 8%, 97%, 1);
  --gray-2:									hsla(140, 6%, 94%, 1);
  --gray-3:									hsla(140, 6%, 90%, 1);
  --gray-4:									hsla(140, 6%, 82%, 1);
  --gray-5:									hsla(140, 3%, 70%, 1);
  --gray-6:									hsla(140, 3%, 55%, 1);
  --gray-7:									hsla(140, 3%, 40%, 1);
  --gray-8:									hsla(140, 6%, 20%, 1);
  --gray-9:									hsla(140, 6%, 15%, 1);
  --gray-10:								hsla(140, 6%, 10%, 1);
  --gray-11:								hsla(140, 10%, 5%, 1);

  --purple-2:								hsla(249, 100%, 96%, 1);
  --purple-3:								hsla(250, 100%, 92%, 1);
  --purple-4:								hsla(250, 100%, 87%, 1);
  --purple-5:								hsla(250, 100%, 82%, 1);
  --purple:									hsla(250, 100%, 75%, 1);
  --purple-7:								hsla(250, 100%, 71%, 1);
  --purple-8:								hsla(250, 100%, 65%, 1);
  --purple-9:								hsla(250, 70%, 50%, 1);
  --purple-10:							hsla(250, 70%, 35%, 1);
  --purple-fade:						hsla(250, 100%, 75%, .2);

  --yellow:									hsla(44, 100%, 60%, 1);
  --yellow-fade:						hsla(44, 100%, 60%, .25);

  --green:									hsla(140, 60%, 50%, 1);
  --green-fade:						hsla(140, 60%, 50%, .2);

  --blue:										hsla(210, 80%, 50%, 1);
  --blue-fade:							hsla(210, 80%, 50%, .3);
  --blue-dark:							hsla(210, 70%, 20%, 1);

  --teal:										hsla(180, 70%, 50%, 1);
  --teal-fade:							hsla(180, 70%, 50%, .2);

  --orange:									hsla(10, 90%, 60%, 1);
  --orange-fade:					hsla(10, 90%, 60%, .2);

  --pink:										hsla(330, 80%, 65%, 1);
  --pink-fade:							hsla(330, 80%, 65%, .2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gray-11:								hsla(0, 0%, 100%, 1);
    --gray-10:								hsla(140, 8%, 97%, 1);
    --gray-9:									hsla(140, 6%, 94%, 1);
    --gray-8:									hsla(140, 6%, 90%, 1);
    --gray-7:									hsla(140, 6%, 82%, 1);
    --gray-6:									hsla(140, 3%, 70%, 1);
    --gray-5:									hsla(140, 3%, 55%, 1);
    --gray-4:									hsla(140, 3%, 40%, 1);
    --gray-3:									hsla(140, 6%, 20%, 1);
    --gray-2:									hsla(140, 6%, 15%, 1);
    --gray-1:									hsla(140, 6%, 10%, 1);
    --gray-0:									hsla(140, 10%, 5%, 1);

    --purple-10:							hsla(249, 100%, 96%, 1);
    --purple-9:								hsla(250, 100%, 92%, 1);
    --purple-8:								hsla(250, 100%, 87%, 1);
    --purple-7:								hsla(250, 100%, 82%, 1);
    --purple-5:								hsla(250, 100%, 71%, 1);
    --purple-4:								hsla(250, 100%, 65%, 1);
    --purple-3:								hsla(250, 70%, 50%, 1);
    --purple-2:								hsla(250, 70%, 35%, 1);
  }
}

:root.force-dark {
  --gray-11:								hsla(0, 0%, 100%, 1);
  --gray-10:								hsla(140, 8%, 97%, 1);
  --gray-9:									hsla(140, 6%, 94%, 1);
  --gray-8:									hsla(140, 6%, 90%, 1);
  --gray-7:									hsla(140, 6%, 82%, 1);
  --gray-6:									hsla(140, 3%, 70%, 1);
  --gray-5:									hsla(140, 3%, 55%, 1);
  --gray-4:									hsla(140, 3%, 40%, 1);
  --gray-3:									hsla(140, 6%, 20%, 1);
  --gray-2:									hsla(140, 6%, 15%, 1);
  --gray-1:									hsla(140, 6%, 10%, 1);
  --gray-0:									hsla(140, 10%, 5%, 1);

  --purple-10:							hsla(249, 100%, 96%, 1);
  --purple-9:								hsla(250, 100%, 92%, 1);
  --purple-8:								hsla(250, 100%, 87%, 1);
  --purple-7:								hsla(250, 100%, 82%, 1);
  --purple-5:								hsla(250, 100%, 71%, 1);
  --purple-4:								hsla(250, 100%, 65%, 1);
  --purple-3:								hsla(250, 70%, 50%, 1);
  --purple-2:								hsla(250, 70%, 35%, 1);
}

:root.force-light {
  --gray-0:									hsla(0, 0%, 100%, 1);
  --gray-1:									hsla(140, 8%, 97%, 1);
  --gray-2:									hsla(140, 6%, 94%, 1);
  --gray-3:									hsla(140, 6%, 90%, 1);
  --gray-4:									hsla(140, 6%, 82%, 1);
  --gray-5:									hsla(140, 3%, 70%, 1);
  --gray-6:									hsla(140, 3%, 55%, 1);
  --gray-7:									hsla(140, 3%, 40%, 1);
  --gray-8:									hsla(140, 6%, 20%, 1);
  --gray-9:									hsla(140, 6%, 15%, 1);
  --gray-10:								hsla(140, 6%, 10%, 1);
  --gray-11:								hsla(140, 10%, 5%, 1);

  --purple-2:								hsla(249, 100%, 96%, 1);
  --purple-3:								hsla(250, 100%, 92%, 1);
  --purple-4:								hsla(250, 100%, 87%, 1);
  --purple-5:								hsla(250, 100%, 82%, 1);
  --purple-7:								hsla(250, 100%, 71%, 1);
  --purple-8:								hsla(250, 100%, 65%, 1);
  --purple-9:								hsla(250, 70%, 50%, 1);
  --purple-10:							hsla(250, 70%, 35%, 1);
}

@font-face {
  font-family: "jb";
  src: url("/assets/fonts/jb.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  src: url("/assets/fonts/fa-l.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

.fa, .fa-regular, .fa-light {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300 !important;
  font-display: swap;
  font-style: normal;
}

a .fa, a .fa-regular, a .fa-light, a i {
  text-decoration: none !important;
}

.fa-sm {
  font-size: 0.8rem !important;
}

.fa-1x {
  font-size: var(--font-size) !important;
}

.fa-2x {
  font-size: 1.3rem !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0!important
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){
  position: absolute !important;
}


*, ::after, ::before { background: none; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-style: normal; font-size: unset; /*font-weight: var(--font-weight);*/ }

.space-xs 		{ margin: var(--space-xs); }
.space-sm 		{ margin: var(--space-sm); }
.space 				{ margin: var(--space); }
.space-md 		{ margin: var(--space-md); }
.space-lg 		{ margin: var(--space-lg); }
.space-xl 		{ margin: var(--space-xl); }
.space-2x 		{ margin: var(--space-2x); }
.space-3x 		{ margin: var(--space-3x); }
.space-4x 		{ margin: var(--space-4x); }
.space-5x 		{ margin: var(--space-5x); }

.v-space-xs 		{ margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.v-space-sm 		{ margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.v-space 				{ margin-top: var(--space); margin-bottom: var(--space); }
.v-space-md 		{ margin-top: var(--space-md); margin-bottom: var(--space-md); }
.v-space-lg 		{ margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.v-space-xl 		{ margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.v-space-2x 		{ margin-top: var(--space-2x); margin-bottom: var(--space-2x); }
.v-space-3x 		{ margin-top: var(--space-3x); margin-bottom: var(--space-3x); }
.v-space-4x 		{ margin-top: var(--space-4x); margin-bottom: var(--space-4x); }
.v-space-5x 		{ margin-top: var(--space-5x); margin-bottom: var(--space-5x); }
.v-space-none 	{ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

.t-space-xs 		{ margin-top: var(--space-xs); }
.t-space-sm 		{ margin-top: var(--space-sm); }
.t-space 				{ margin-top: var(--space); }
.t-space-md 		{ margin-top: var(--space-md); }
.t-space-lg 		{ margin-top: var(--space-lg); }
.t-space-xl 		{ margin-top: var(--space-xl); }
.t-space-2x 		{ margin-top: var(--space-2x); }
.t-space-3x 		{ margin-top: var(--space-3x); }
.t-space-4x 		{ margin-top: var(--space-4x); }
.t-space-5x 		{ margin-top: var(--space-5x); }
.t-space-none 	{ margin-top: 0 !important; padding-top: 0 !important; }

.pt-space-xs 		{ padding-top: var(--space-xs); }
.pt-space-sm 		{ padding-top: var(--space-sm); }
.pt-space 			{ padding-top: var(--space); }
.pt-space-md 		{ padding-top: var(--space-md); }
.pt-space-lg 		{ padding-top: var(--space-lg); }
.pt-space-xl 		{ padding-top: var(--space-xl); }
.pt-space-2x 		{ padding-top: var(--space-2x); }
.pt-space-3x 		{ padding-top: var(--space-3x); }
.pt-space-4x 		{ padding-top: var(--space-4x); }
.pt-space-5x 		{ padding-top: var(--space-5x); }

.b-space-xs 		{ margin-bottom: var(--space-xs); }
.b-space-sm 		{ margin-bottom: var(--space-sm); }
.b-space 				{ margin-bottom: var(--space); }
.b-space-md 		{ margin-bottom: var(--space-md); }
.b-space-lg 		{ margin-bottom: var(--space-lg); }
.b-space-xl 		{ margin-bottom: var(--space-xl); }
.b-space-2x 		{ margin-bottom: var(--space-2x); }
.b-space-3x 		{ margin-bottom: var(--space-3x); }
.b-space-4x 		{ margin-bottom: var(--space-4x); }
.b-space-5x 		{ margin-bottom: var(--space-5x); }
.b-space-none 	{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

.pb-space-xs 		{ padding-bottom: var(--space-xs); }
.pb-space-sm 		{ padding-bottom: var(--space-sm); }
.pb-space 			{ padding-bottom: var(--space); }
.pb-space-md 		{ padding-bottom: var(--space-md); }
.pb-space-lg 		{ padding-bottom: var(--space-lg); }
.pb-space-xl 		{ padding-bottom: var(--space-xl); }
.pb-space-2x 		{ padding-bottom: var(--space-2x); }
.pb-space-3x 		{ padding-bottom: var(--space-3x); }
.pb-space-4x 		{ padding-bottom: var(--space-4x); }
.pb-space-5x 		{ padding-bottom: var(--space-5x); }

.p-space-xs 		{ padding: var(--space-xs); }
.p-space-sm 		{ padding: var(--space-sm); }
.p-space 				{ padding: var(--space); }
.p-space-md 		{ padding: var(--space-md); }
.p-space-lg 		{ padding: var(--space-lg); }
.p-space-xl 		{ padding: var(--space-xl); }
.p-space-2x 		{ padding: var(--space-2x); }
.p-space-3x 		{ padding: var(--space-3x); }
.p-space-4x 		{ padding: var(--space-4x); }
.p-space-5x 		{ padding: var(--space-5x); }

.h-space-xs 		{ margin-left: var(--space-xs); margin-right: var(--space-xs); }
.h-space-sm 		{ margin-left: var(--space-sm); margin-right: var(--space-sm); }
.h-space 				{ margin-left: var(--space); margin-right: var(--space); }
.h-space-md 		{ margin-left: var(--space-md); margin-right: var(--space-md); }
.h-space-lg 		{ margin-left: var(--space-lg); margin-right: var(--space-lg); }
.h-space-xl 		{ margin-left: var(--space-xl); margin-right: var(--space-xl); }
.h-space-2x 		{ margin-left: var(--space-2x); margin-right: var(--space-2x); }
.h-space-3x 		{ margin-left: var(--space-3x); margin-right: var(--space-3x); }
.h-space-4x 		{ margin-left: var(--space-4x); margin-right: var(--space-4x); }
.h-space-5x 		{ margin-left: var(--space-5x); margin-right: var(--space-5x); }
.h-space-none 	{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

.l-space-xs			{ margin-left: var(--space-xs); }
.l-space-sm 		{ margin-left: var(--space-sm); }
.l-space 				{ margin-left: var(--space); }
.l-space-md 		{ margin-left: var(--space-md); }
.l-space-lg 		{ margin-left: var(--space-lg); }
.l-space-xl 		{ margin-left: var(--space-xl); }
.l-space-2x 		{ margin-left: var(--space-2x); }
.l-space-3x 		{ margin-left: var(--space-3x); }
.l-space-4x 		{ margin-left: var(--space-4x); }
.l-space-5x 		{ margin-left: var(--space-5x); }
.l-space-none 	{ margin-left: 0 !important; }

.pl-space-xs		{ padding-left: var(--space-xs); }
.pl-space-sm 		{ padding-left: var(--space-sm); }
.pl-space 			{ padding-left: var(--space); }
.pl-space-md 		{ padding-left: var(--space-md); }
.pl-space-lg 		{ padding-left: var(--space-lg); }
.pl-space-xl 		{ padding-left: var(--space-xl); }
.pl-space-2x 		{ padding-left: var(--space-2x); }
.pl-space-3x 		{ padding-left: var(--space-3x); }
.pl-space-4x 		{ padding-left: var(--space-4x); }
.pl-space-5x 		{ padding-left: var(--space-5x); }
.pl-space-none	{ padding-left: 0 !important; background: red;}

.r-space-xs 		{ margin-right: var(--space-xs); }
.r-space-sm 		{ margin-right: var(--space-sm); }
.r-space 				{ margin-right: var(--space); }
.r-space-md			{ margin-right: var(--space-md); }
.r-space-lg 		{ margin-right: var(--space-lg); }
.r-space-xl 		{ margin-right: var(--space-xl); }
.r-space-2x 		{ margin-right: var(--space-2x); }
.r-space-3x 		{ margin-right: var(--space-3x); }
.r-space-4x 		{ margin-right: var(--space-4x); }
.r-space-5x 		{ margin-right: var(--space-5x); }
.r-space-none 	{ margin-right: 0 !important; padding-right: 0 !important; }

.pr-space-xs 		{ padding-right: var(--space-xs); }
.pr-space-sm 		{ padding-right: var(--space-sm); }
.pr-space 			{ padding-right: var(--space); }
.pr-space-md		{ padding-right: var(--space-md); }
.pr-space-lg 		{ padding-right: var(--space-lg); }
.pr-space-xl 		{ padding-right: var(--space-xl); }
.pr-space-2x 		{ padding-right: var(--space-2x); }
.pr-space-3x 		{ padding-right: var(--space-3x); }
.pr-space-4x 		{ padding-right: var(--space-4x); }
.pr-space-5x 		{ padding-right: var(--space-5x); }
.pr-space-none	{ padding-right: 0 !important; }

.b-white 				{ background: var(--gray-0); }
.b-light-gray 	{ background: var(--gray-2); }
.force-light .b-gray, .b-gray 				{ background: var(--gray-9); color: var(--gray-1); }
.b-purple 			{ background: var(--purple-2); }
.b-pink 				{ background: var(--pink-fade); }
.b-blue 				{ background: var(--blue-fade); }
.b-yellow 			{ background: var(--yellow-fade); }
.b-green 				{ background: var(--green-fade); }
.b-purple-full 	{ background: var(--purple); }
.b-pink-full 		{ background: var(--pink); }
.b-blue-full 		{ background: var(--blue); }
.b-yellow-full 	{ background: var(--yellow); }
.b-green-full 	{ background: var(--green); }

.border-light-gray { border: var(--border-sm) solid var(--gray-3); }

@media (prefers-color-scheme: dark) {
  .b-gray 				{ background: var(--gray-3); color: var(--gray-10); }
}

.force-dark .b-gray 				{ background: var(--gray-3); color: var(--gray-10); }

.t-white			 	{ color: var(--gray-0) !important; transition: color var(--time); }
.t-light-gray 	{ color: var(--gray-6) !important; transition: color var(--time); }
.t-gray 				{ color: var(--gray-10) !important; transition: color var(--time); }
.t-gray-dark 		{ color: var(--gray-7) !important; transition: color var(--time); }
.t-purple 			{ color: var(--purple) !important; transition: color var(--time); }
.t-purple-dark	{ color: var(--purple-8) !important; transition: color var(--time); }
.t-purple-light	{ color: var(--purple-4) !important; transition: color var(--time); }
.t-pink 				{ color: var(--pink) !important; transition: color var(--time); }
.t-blue 				{ color: var(--blue) !important; transition: color var(--time); }
.t-yellow 			{ color: var(--yellow) !important; transition: color var(--time); }
.t-green	 			{ color: var(--green) !important; transition: color var(--time); }

.t-gray:hover, .t-light-gray:hover, .t-gray-dark:hover {
  color: var(--purple);
}

.t-purple:hover, .t-purple-light:hover, .t-purple-dark:hover {
  color: var(--gray-9);
}

.t-white a, a.t-white							{ color: var(--gray-0); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--gray-0); text-decoration-style: solid; }
.t-light-gray a, a.t-light-gray 	{ color: var(--gray-6); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--gray-6); text-decoration-style: solid; }
.t-gray a, a.t-gray								{ color: var(--gray-10); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--gray-10); text-decoration-style: solid; }
.t-purple a, a.t-purple 					{ color: var(--purple); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--purple); text-decoration-style: solid; }
.t-pink a, a.t-pink 							{ color: var(--pink); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--pink); text-decoration-style: solid; }
.t-blue a, a.t-blue 							{ color: var(--blue); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--blue); text-decoration-style: solid; }
.t-yellow a, a.t-yellow						{ color: var(--yellow); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--yellow); text-decoration-style: solid; }
.t-green a, a.t-green	 						{ color: var(--green); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--green); text-decoration-style: solid; }
.t-purple-dark a, a.t-purple-dark	{ color: var(--purple-8); transition: color var(--time); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--purple-8); text-decoration-style: solid; }
.t-purple-light a, a.t-purple-light	{ color: var(--purple-4); transition: color var(--time); text-decoration: underline; text-decoration-thickness: var(--border); text-decoration-color: var(--purple-4); text-decoration-style: solid; }


.col1 		{ grid-column: span 1; }
.col2 		{ grid-column: span 2; }
.col3 		{ grid-column: span 3; }
.col4 		{ grid-column: span 4; }
.col5 		{ grid-column: span 5; }
.col6 		{ grid-column: span 6; }
.col7 		{ grid-column: span 7; }
.col8 		{ grid-column: span 8; }
.col9 		{ grid-column: span 9; }
.col10 		{ grid-column: span 10; }
.col11 		{ grid-column: span 11; }
.col12 		{ grid-column: span 12; }

.grow1		{ flex-grow: 1; }
.grow2		{ flex-grow: 2; }
.grow3		{ flex-grow: 3; }
.grow4		{ flex-grow: 4; }

.rounded {
  border-radius: var(--border-rad);
  display: block;
}

.overflow {
  overflow: hidden;
}

.rounded.sm {
  border-radius: var(--border-rad-sm);
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
  tab-size: 2;
  line-height: var(--leading);
  background: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  color: var(--gray-10);
  -webkit-tap-highlight-color: transparent;
}

body.api {
  overflow-x: scroll;
  height: auto;
}

.body {
  padding: var(--space-lg) var(--space-lg) 0 var(--space-lg);
}

.site header, .site footer {
  padding: var(--space-3x) 0 var(--space-4x) 0;
}



article {
  position: relative;
  font-size: var(--font-size);
}

fa-rapper, .rapper {
  margin: auto;
  display: block;
  position: relative;
  width: 100%;
  max-width: var(--rapper);
}

.rap-xs {
  max-width: var(--rapper-xs);
}

.rap-sm {
  max-width: var(--rapper-sm);
}

.rap-alt {
  max-width: var(--rapper-alt);
}

.rap-md {
  max-width: var(--rapper-md);
}

.rap-lg {
  max-width: var(--rapper-lg);
}

.rap-full {
  width: var(--rapper-full);
  max-width: 92rem;
}

.rap-centered {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh);
  align-items: center;
  overflow: hidden;
}

.rap-centered .rapper {
  margin: var(--space-lg) auto;
}

.full-height {
  min-height: 100vh;
}


fa-flex, .flex {
  display: flex;
  align-items: center;
}

.start {
  align-items: flex-start;
}

.column {
  flex-direction: column;
}

.space-between {
  justify-content: space-between;
}

.row-reverse {
  flex-direction: row-reverse;
}

.grow {
  display: block;
  width: 100%;
}

fa-flex .auto {
  flex: auto;
  flex-grow: 1;
}


fa-grid, .grid {
  display: grid;
  --gap: var(--grid-gap);
  gap: var(--gap);
  --grid-cols: repeat(12, minmax(0, 1fr));
  grid-template-columns: var(--grid-cols);
}

.grid-centered {
  align-items: center;
}

.grid-end {
  align-items: end;
}

.grid-one {
  --grid-cols: minmax(0, 1fr);
}

.grid-two {
  --grid-cols: repeat(2, minmax(0, 1fr));
}

.grid-content {
  --grid-cols: minmax(0, var(--breakpoint)) minmax(0, 1fr);
}

.grid-three {
  --grid-cols: repeat(3, minmax(0, 1fr));
}

.grid-four {
  --grid-cols: repeat(4, minmax(0, 1fr));
}

.grid-five {
  --grid-cols: repeat(5, minmax(0, 1fr));
}

.grid-six {
  --grid-cols: repeat(6, minmax(0, 1fr));
}

.grid-seven {
  --grid-cols: repeat(7, minmax(0, 1fr));
}

.grid-min-left {
  --grid-cols: min-content minmax(0, 1fr);
  --gap: var(--space-lg);
}

.grid-min-right {
  --grid-cols: minmax(0, 1fr) min-content;
  --gap: var(--space-lg);
}

.grid-min-middle {
  --grid-cols: min-content minmax(0, 1fr) min-content;
  --gap: var(--grid-gap-sm);
}

fa-cell, .cell {
  display: block;
}

fa-cell.line, .cell.line {
  border-bottom: var(--border) solid var(--gray-3);
}

.gap-none {
  gap: 0;
}

.gap-xs {
  gap: var(--space-sm);
}

.gap-sm {
  --gap: var(--space);
}

.gap-smd {
  --gap: var(--space-xl);
}

.gap-md {
  --gap: var(--grid-gap-md);
  row-gap: var(--space-xl);
}

.gap-lg {
  --gap: var(--grid-gap-lg);
  row-gap: var(--space-lg);
}

.gap-xl {
  --gap: var(--space-4x);
  row-gap: var(--space-4x);
}

fa-flex.gap-lg {
  gap: var(--space-xl);
}

fa-flex.gap-xl {
  gap: var(--space-2x);
}

.right {
  text-align: right !important;
}

.left {
  text-align: left !important;
}

.center, .centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

fa-cell.center, fa-cell.centre, .cell.center, .cell.centre {
  margin: initial;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
  top: var(--space-xl);
}

.scroll {
  overflow-y: auto;
  height: 100vh;
}

.fixed {
  position: fixed;
}

.fade {
  transition: opacity var(--time);
  opacity: 1;
}

.fade:not(.show) {
  opacity: 0;
  transition: opacity var(--time);
}

.collapse:not(.show) {
  display: none;
  transition: height var(--time);
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height var(--time);
}

.nowrap {
  white-space: nowrap;
}

.mobile-show, .tablet-show, .hide {
  display: none !important;
}

:not(table).unhide {
  display: inline-block;
}

table.unhide {
  display: table !important;
  width: 100% !important;
}

.mobile-hide, .tablet-hide {
  display: block;
}

.inline {
  display: inline-block;
}

.mobile-hide.inline, .tablet-hide.inline {
  display: inline-block;
}

.no-content-width {
  max-width: 100% !important;
}

@media screen and (max-width: 80rem) {
  .api .grid-seven {
    --grid-cols: repeat(4, minmax(0, 1fr));
  }

  .api .grid-seven .col6 {
    grid-column: span 3 !important;
  }

  .api .grid-seven .grid-two {
    display: block;
  }

  .api .content-space fa-cell {
    margin-bottom: var(--space-2x);
  }
}

@media screen and (max-width: 62rem) {
  .tablet-show {
    display: block !important;
  }

  .tablet-hide {
    display: none !important;
  }

  .full-height {
    min-height: none;
  }

  .tablet-block {
    display: block !important;
  }
}

@media screen and (max-width: 42rem) {
  .site header {
    padding: var(--space) 0 var(--space-3x) 0;
  }

  fa-rapper.centered, .rapper.centered {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    align-items: start;
    overflow: auto;
  }

  fa-rapper.centered fa-rapper, .rapper.centered .rapper {
    margin: var(--space-lg) auto;
  }

  fa-grid, .grid, fa-cell, .cell, fa-flex, .flex {
    display: block;
  }

  fa-flex.keep-flex, .flex.keep-flex {
    display: flex;
  }

  .mobile-space fa-cell, .mobile-space .cell, .mobile-space .box {
    margin-bottom: var(--space-sm);
  }

  .content-space fa-cell, .content-space .cell {
    margin-bottom: var(--space-2x);
  }

  .keep-grid, .grid-min-left, .grid-min-right {
    display: grid !important;
  }

  .break-grid {
    display: block !important;
  }

  .break-grid button {
    display: block;
    width: 100%;
  }

  .mobile-show {
    display: block !important;
  }

  .mobile-hide {
    display: none !important;
  }

  .right {
    text-align: left !important;
  }

  .keep-grid .right, .mobile-right {
    text-align: right !important;
  }

  .full-height .t-space-xl, .full-height .t-space-2x {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .full-height .l-space {
    margin-bottom: var(--space-lg) !important;
  }

  .mobile-menu-icon {
    font-size: 1.5rem;
    vertical-align: middle;
  }
}













:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-h);
}

:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5).light {
  font-weight: var(--font-weight-light) !important;
}

article:not(.no-content-width) :where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
  margin-bottom: var(--space-xl);
  max-width: var(--breakpoint-sm);
}

article :is(h3, .h3, h4, .h4, h5, .h5) {
  margin-bottom: var(--space);
}

article .sm :is(h4, .h4) {
  margin-bottom: var(--space-sm);
}

article :where(h1, h2, h3, h4, .h1, .h2, .h3, .h4):not(:first-child, .no-space) {
  margin-top: var(--space-3x);
}

:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) span.block, span.block {
  display: block;
}

:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) span.inline, span.inline {
  display: inline;
  color: var(--gray-6);
}

h1, .h1 {
  font-size: var(--font-size-h1);
  letter-spacing: -0.1rem;
  line-height: 0.9;
}

h1.lg, .h1.lg {
  font-size: 4rem;
  letter-spacing: -0.2rem;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  letter-spacing: -0.0825rem;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  letter-spacing: -0.0625rem;
}

.sm h3, .sm .h3 {
  font-size: var(--font-size-h4);
  letter-spacing: -0.0225rem;
}

h4, .h4, .accordion-button, .accordion-false-button, legend, .legend {
  font-size: var(--font-size-h4);
  letter-spacing: -0.018rem;
  text-align: left;
  line-height: var(--leading-sm);
}

h5, .h5, h4.sm, .h4.sm, .sm h4 {
  font-size: var(--font-size-lg);
  letter-spacing: -0.014rem;
}

h2.normal {
  font-weight: var(--font-weight) !important;
  letter-spacing: 0 !important;
  line-height: var(--leading) !important;
}

h4.xs, .h4.xs, .xs h4, h5.sm, .h5.sm {
  font-size: var(--font-size-alt);
  letter-spacing: 0;
  color: var(--gray-5);
}

@media screen and (max-width: 62rem) {
  h1, .h1, h1.lg {
    font-size: var(--font-size-h2);
    letter-spacing: -0.0825rem;
  }

  h2, .h2 {
    font-size: var(--font-size-h3);
    letter-spacing: -0.0625rem;
  }

  h3, .h3 {
    font-size: var(--font-size-h4);
    letter-spacing: -0.0225rem;
  }

  h4, .h4, legend, .legend {
    font-size: var(--font-size-h4);
    letter-spacing: -0.0225rem;
  }
}

.anchor, .anchor:hover {
  color: inherit !important;
  transition: color var(--time);
}

.anchor, .anchor a {
  text-decoration: none !important;
}

.anchor::after {
  content: "#";
  color: var(--gray-3);
  font-size: var(--font-size);
  transition: color var(--time);
  margin-left: var(--space);
  vertical-align: middle;

}

.anchor:hover::after {
  color: var(--purple);
}

article :where(p, ul:not(.pagi, .tabs), ol, small, .note, iframe) {
  margin-bottom: var(--space-xl);
}

article:not(.no-content-width) :where(p, iframe, ul, ol, dl, small, table, blockquote, form, pre), .content-width {
  max-width: var(--breakpoint);
}

:where(p, li, table).lg, p.lg, .note.lg, div.lg, article.lg :where(p, li, table) {
  font-size: var(--font-size-lg);
}

:where(p, li, table).normal, p.normal, .note.normal, div.normal, article.normal :where(p, li, table) {
  font-size: var(--font-size);
}

:where(p, blockquote, li, table, ul, ol).sm, p.sm, .note.sm, span.sm, div.sm, article.sm :where(p, li, table) , fa-cell.sm :where(p, li, table), fa-cell.sm, .sm :where(p, li, table, ul, ol) {
  font-size: var(--font-size-sm);
}

:where(p, li, table, ul, ol).xs, p.xs, .note.xs, span.xs, div.xs, article.xs :where(p, li, table), fa-cell.xs :where(p, li, table), .xs :where(p, li, table, ul, ol) {
  font-size: var(--font-size-xs);
}

:where(li, table, ul, ol).xs, article.xs :where(li, table), fa-cell.xs :where(li, table) {
  line-height: var(--leading-sm);
}

small, .small, cite, .helper, footer li {
  display: block;
  line-height: var(--leading-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-7);
  letter-spacing: 0 !important;
}

small.xs, .small.xs {
  font-size: var(--font-size-xs);
}

.cite-grid {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: center;
}

article .cite-grid img {
  margin-bottom: 0;
}

blockquote {
  margin: var(--space-2x) 0;
  font-size: var(--font-size-lg);
}

blockquote.line {
  padding-left: var(--space-xl);
  border-left: var(--border) solid var(--gray-3);
  margin-left: var(--space-lg);
}

cite img, img.avatar {
  width: 3rem;
  border-radius: var(--border-rad-full);
  /* filter: saturate(0.8); */
  transition: all ease var(--time);
}

blockquote:hover cite img {
  /* filter: saturate(0.4); */
  transform: scale(1.2);
}






fa-cell blockquote, .cell blockquote, blockquote.no-space {
    margin: 0;
}

pre {
  overflow-x: auto;
  border-radius: var(--border-rad);
  margin: var(--space-2x) 0;
}

code, pre, .code, .mono {
  font-family: var(--font-mono);
  letter-spacing: -0.025rem !important;
}

code.sm, .code.sm, pre.sm, .mono.sm {
  font-size: var(--font-size-sm);
  letter-spacing: -0.025rem !important;
}

code.xs, .code.xs, pre.xs, i.xs, nav .child, .mono.xs {
  font-size: 0.75rem !important;
  letter-spacing: -0.015rem !important;
}

article :where(p, li, blockquote, small) code {
  border-radius: var(--border-rad-sm);
  background: var(--gray-3);
  padding: 0.125rem var(--space-sm);
  font-size: var(--font-size-sm);
  letter-spacing: -0.025rem !important;
  margin: 0 var(--space-sm) 0 0;
  white-space: nowrap;
}

article :where(p, li, blockquote, small).sm code, article .sm code, .api-parameters code {
  padding: 0.125rem var(--space-sm);
}

pre code.torchlight {
  display: block;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
  letter-spacing: -0.025rem !important;
}

pre code.torchlight .line {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

pre code.torchlight .line-number, pre code.torchlight .summary-caret {
    margin-right: var(--space-lg);
}

.torchlight.has-focus-lines .line:not(.line-focus) {
    transition: filter var(--time), opacity var(--time);
    filter: blur(.095rem);
    opacity: .6;
}

.torchlight.has-focus-lines:hover .line:not(.line-focus) {
    filter: blur(0);
    opacity: 1;
}

.word-wrap {
  display: inline;
  white-space: initial;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-all;
}

strong, .strong {
  font-weight: var(--font-weight-bold);
}

strong.md, .strong.md {
  font-weight: var(--font-weight-h);
}

em, .em {
  font-family: var(--font-sans-italic);
  font-style: italic;
}

s, del, .del {
  text-decoration: line-through;
  text-decoration-thickness: var(--border-md);
}

u, ins, .underline {
  text-decoration: underline;
  color: inherit;
  text-decoration-style: dotted;
  text-decoration-thickness: var(--border-sm);
  text-underline-offset: var(--border-md);
  text-decoration-color: inherit;
  font-weight: inherit;
}

.no-underline {
  text-decoration: none !important;
}

.capitalize {
  text-transform: capitalize;
}

hr {
  border: none;
  margin: var(--space-3x) 0 var(--space-2x) 0;
}

hr.sm {
  border: none;
  margin: var(--space-xl) 0 calc(var(--space-lg) + .3rem) 0;
}

hr.xs {
  border: none;
  margin: var(--space-lg) 0 calc(var(--space) + .3rem) 0;
}

hr::after {
  content: "";
  background: var(--gray-3);
  width: var(--font-size-h3);
  height: var(--border);
  display: block;
  border-radius: var(--border-rad-full);
}

hr.sm::after, hr.xs::after {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  table-layout: auto;
  display: table;
  line-height: var(--leading-sm);
}

article table {
  margin: var(--space-2x) 0;
  border-top: var(--border) solid var(--gray-3);
}

.modal-content article table, article table.no-space {
  margin: var(--space-lg) 0;
}

table th, table td {
  padding: var(--space-md) var(--space);
  border-bottom: var(--border) solid var(--gray-3);
}

.cell-border {
  border-top: var(--border) solid var(--gray-3);
  grid-column: 1/-1;
  margin: var(--space-sm) 0;
}

table.table-space-lg th, table.table-space-lg td {
  padding: var(--space-lg);
}

table th {
  color: var(--gray-7);
  text-align: left;
  font-weight: var(--font-weight-h);
}

table :where(td, th):first-child {
  padding-left: 0 !important;
}

table :where(td, th):last-child {
  padding-right: 0 !important;
}

table:not(.left-table) :where(td, th):last-child {
  text-align: left;
}

table.first-left :where(td, th) {
  text-align: left;
}

table.first-left :where(td, th):first-child {
  text-align: left;
}

table.first-left :where(td, th):not(:first-child) {
  text-align: right;
}

table.last-right :where(td, th):last-child {
  text-align: right;
}

@media screen and (max-width: 40rem) {
  article table.break-table thead {
    display: none;
  }

  article table.break-table td {
    display: flex;
    padding: var(--space-sm) 0;
  }

  table.break-table th, table.break-table td {
  }

  table.break-table {
    border-bottom: var(--border-sm) solid var(--gray-3);
  }

  table.break-table td {
    border: none;
    align-items: center;
  }

  table.break-table tr {
    border-top: var(--border-sm) solid var(--gray-3);
  }

  table.break-table td::before {
    content: attr(data-label) ": ";
    min-width: 12ch;
    color: var(--gray-6);
  }

  table.last-right :where(td, th):last-child {
    text-align: left;
  }

  table.first-left :where(td, th):not(:first-child) {
    text-align: left;
  }

  fa-cell.cell-border {
    padding-bottom: var(--space-lg);
    margin-top: var(--space-lg) !important;
  }
}

article :where(ul, ol):not(.navi, .pagi, .dropdown-menu, .command-menu, .api-parameters, .tabs) {
  padding-left: var(--space-xl);
}

li {
  position: relative;
}

article :where:not(.navi, .pagi, .dropdown-menu, .command-menu, .api-parameters, .tabs) li {
  list-style: outside;
  padding-left: var(--space-sm);
  margin-bottom: var(--space-sm);
}

article .sm li {
  line-height: var(--leading-sm);
}

article li:last-child {
  margin-bottom: 0;
}

article ol li {
  list-style-type: decimal !important;
}

article ul li {
  list-style: circle;
}

article ol ol li {
  list-style-type: lower-alpha !important;
}

article :where(ul ul, ol ol, ol ul, ul ol) {
  margin: var(--space-sm) 0 var(--space) 0;
}

article .checks li {
  list-style-type: none;
  padding-bottom: var(--space-sm);
}

article .api-parameters li {
  font-size: var(--font-size-sm);
  border-top: var(--border-sm) solid var(--gray-3);
  padding-top: var(--space-xl);
  margin-top: var(--space);
}

article .dropdown-menu li, article .command-menu li, .api-parameters li, article .api-parameters li {
  list-style: none;
  list-style-type: none;
}

.checks li::before {
  content: "\f00c";
  position: absolute;
  font-size: var(--font-size-sm);
  font-family: var(--font-icon);
  font-weight: 300 !important;
  left: -1.4rem; top: 0.125rem;
  color: var(--purple);
}

.navi li, .nav-link {
  display: inline-block;
}

.navi:not(.block) li:not(:last-child), .nav-link:not(:last-child, .block) {
  margin-right: var(--space);
}

nav {
  margin-bottom: var(--space-xl);
}

nav .parent {
  color: var(--gray-9);
  margin-bottom: var(--space);
  font-size: var(--font-size-sm);
}

nav .child {
  color: var(--gray-6);
}

nav .active {
  color: var(--purple);
  text-decoration: underline;
}

.navi.block li, .nav-link.block, nav a {
  display: block;
  line-height: var(--leading-sm);
  margin-bottom: var(--space-sm);
}

.navi li a {
  color: var(--gray-6);
  text-decoration: none;
  display: block;
  padding: var(--space-sm) var(--space);
  border-radius: var(--border-rad-sm);
  transition: color var(--time);
}

.navi.block.icons li a {
  display: flex;
  gap: var(--space);
  align-items: center;
  padding: var(--space);
}

.navi.block.icons .dropdown-menu li a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--space);
  align-items: center;
  border-radius: var(--border-rad-sm);
}

.navi li a:hover {
  color: var(--gray-9);
}

.navi li a.h4:hover {
  color: var(--purple) !important;
}

.navi li li a:hover {
  color: var(--gray-9) !important;
}

.nav-link {
  color: var(--gray-10);
  text-decoration: none;
  padding: var(--space-sm) var(--space);
  border-radius: var(--border-rad-sm) !important;
}

.navi li.active a, .nav-link.active {
  background: var(--purple-2);
  color: var(--purple-8);
}

.navi.subnav li.active a {
  background: none;
  font-weight: var(--font-weight-h);
}

.navi.block li.active a, .navi li:is(.activeparent) a, .navi li.nav-item a.active {
  color: var(--purple-8);
}

.navi li:not(.activeparent) ul {
  display: none;
}

.navi li:is(.activeparent) ul a {
  color: var(--gray-6);
}

.navi li.inactive a, .nav-link.inactive {
  background: none;
  color: var(--gray-5);
}

.navi.subnav.block li, .navi.subnav.block li a {
  padding-left: 0;
}

.navi.subnav.block li ul {
  padding-left: var(--space-md) !important;
}

.pagi {
  margin: var(--space) 0;
}

.pagi li {
  font-size: var(--font-size-sm);
  color: var(--gray-5);
  letter-spacing: 0 !important;
  display: inline-block;
}

.pagi li a, .table-search a {
  display: inline-block;
  color: var(--gray-6);
  text-decoration: none;
  padding: var(--space-sm) var(--space);
  border-radius: var(--border-rad-sm);
  transition: color var(--time);
}

.pagi li a:hover, .table-search a:hover {
  color: var(--purple);
}

.pagi li span {
  padding: var(--space-sm) var(--space);
}

.pagi li.active a {
  background: var(--gray-2);
  color: var(--gray-10);
}

:is(.pagi, .navi):not(.block) li:first-child a, .pagi li:first-child span, .nav-link:first-child {
  margin-left: calc(-1 * var(--space));
}

:is(.pagi, .navi):not(.block) li:last-child a, .pagi li:last-child span, .nav-link:last-child, .table-search a:last-child {
  margin-right: calc(-1 * var(--space));
}

ul.breadcrumbs li:not(:last-child) a::after {
  content: "\f105";
  font-family: var(--font-icon);
  font-weight: 300 !important;
  padding-left: var(--space-lg);
}








article a, .ahref, .popover a, .banner a, .article a {
  text-decoration: underline;
  color: inherit;
  text-decoration-thickness: var(--border);
  text-underline-offset: auto;
  transition: color var(--time), text-decoration-color var(--time);
  cursor: pointer;
}

article :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, small, .small) a, .article :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, small, .small) a, .article a, small a {
  color: inherit;
  font-weight: var(--font-weight-h);
}

:is(article, .article) :where(p, ul:not(.pagi, .navi, .dropdown-menu, .command-menu, .dropdown-scroll) li, ol li, td, label) :not(.button) a, .popover a, .note a, .ahrefmain {
  color: var(--purple-7);
  text-decoration-color: var(--purple);
  font-weight: var(--font-weight-h);
}

article .ahref:hover, :where(.pagi, .navi) :not(.button) a:hover, article :where(.pagi, .navi) a:hover, .article a:hover, footer li a:hover, small a:hover {
  color: var(--purple-8);
}

article :where(p, ol li, ul:not(.pagi, .navi) li, td, label):not(.buttons) a:not(.button):hover, .popover a:hover, .ahrefmain:hover, .banner a:hover {
  color: var(--purple-8);
  text-decoration-color: var(--purple-8);
}

article a.marker, article .marker-wrap a {
  background: linear-gradient(to right, var(--purple-3) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background var(--time), text-decoration var(--time);
  overflow: hidden;
  border-radius: var(--border-rad-sm);
  padding: var(--space-sm);
}

article a.marker:hover, article .marker-wrap a:hover {
  background-position: left bottom;
  transition: background var(--time);
  text-decoration: none !important;
  color: var(--gray-10) !important;
}

@media (prefers-color-scheme: dark) {
  article a.marker:hover, article .marker-wrap a:hover {
    color: var(--gray-10);
  }
}


footer li a {
  padding: var(--space-sm) 0;
  display: block;
  color: var(--gray-10);
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

.img-hover img {
  transition: filter var(--time);
}

.icon, .icon a {
  text-decoration: none !important;
}

svg.icon {
  width: auto;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: var(--space-sm);
  color: inherit;
}

svg.icon path {
  fill: var(--gray-9);
}

article img, article picture {
  max-width: 100%;
  height: auto;
  line-height: 1;
}

article img.right {
  display: inline;
}

img.w90, picture.w90, source.w90, .width90 		{ max-width: 90%; }
img.w80, picture.w80, source.w80, .width80 		{ max-width: 80%; }
img.w70, picture.w70, source.w70, .width70 		{ max-width: 70%; }
img.w60, picture.w60, source.w60, .width60 		{ max-width: 60%; }
img.w50, picture.w50, source.w50, .width50 		{ max-width: 50%; }
img.w40, picture.w40, source.w40, .width40 		{ max-width: 40%; }
img.w30, picture.w30, source.w30, .width30 		{ max-width: 30%; }
img.w20, picture.w20, source.w20, .width20 		{ max-width: 20%; }
img.w10, picture.w10, source.w10, .width10 		{ max-width: 10%; }

img[data-action="zoom"] {
  cursor: zoom-in;
}

.zoom-img, .zoom-img-wrap {
  position: relative;
  z-index: 666;
  transition: all var(--time);
}

img.zoom-img {
  cursor: zoom-out;
}

.zoom-overlay {
  cursor: zoom-out;
  z-index: 420;
  background: var(--gray-10);
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity var(--time);
}

.zoom-overlay-open .zoom-overlay {
  opacity: .80;
}

.fathom-cat {
  display: block;
  width: 3.625rem;
  margin: 0;
  transition: transform var(--time);
}

.fathom-cat-container {
  height: 5.5rem;
  width: 3.625rem;
}

.blog-cat {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(.4rem, .8rem) rotate(4deg);
}

.pixel-cat {
  position: absolute;
  width: 1.44rem;
  max-width: none !important;
  margin-bottom: var(--space);
}

.pixel-cat-float {
  width: 3.6rem;
  max-width: none !important;
  margin: 0 auto;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: bounce;
  animation-timing-function: linear;
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(.5rem); }
    100% { transform: translateY(0); }
}

.sidebar-cat {
  transform: translate(-1.4rem, -1.8rem) rotate(-4deg);
}

.callout-cat {
  bottom: 0; left: 0;
  transform: translate(-0.6rem, 1.2rem) rotate(-4deg);
}

.integrations-cat {
  bottom: 0; right: 0;
  transform: translate(0.7rem, 1rem) rotate(4deg);
}

.started-cat {
  top: 0; right: 0;
  transform: translate(0.7rem, -.6rem) rotate(-4deg);
}

.hover-cat:hover {
  transform: rotate(4deg) scale(1.1);
}

.footer-cat {
  position: absolute;
  left: 50%; bottom: -64px;
  transform: translateX(-50%) rotate(-3deg);
  transition: 1s;
  margin: 0 !important;
}

fa-rapper:hover .footer-cat {
  bottom: -30px;
  transform: translateX(-50%) rotate(2deg);
}

@media screen and (max-width: 52rem) {
  .footer-cat {
    display: none;
  }

  fa-rapper:hover .footer-cat {
    bottom: 0;
  }
}

.fathom-logo img, .fathom-logo source {
  width: 6rem;
  height: auto;
  display: block;
}

.fathom-logo-sm, .fathom-logo-sm img, .fathom-logo-sm source {
  width: 1.85rem;
  height: auto;
  display: block;
}

.customer-logos {
  margin-bottom: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}

.customer-logo-container {
  width: 100%;
  height: 37.5%;
}

.customer-logos.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.customer-logos.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.customer-logos.content-width {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

article .customer-logos img {
  margin: 0;
}

.customer-logos img {
  border-radius: var(--border-rad);
  padding: var(--space-lg) var(--space-xl);
}

.customer-logos.plain img {
  border-radius: var(--border-rad);
  padding: 0;
}

.customer-logos:not(.plain) img {
  background: var(--gray-2);
}

@media screen and (max-width: 44rem) {
  .customer-logos, .customer-logos.content-width {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-logos img {
    background: transparent;
    padding: var(--space) var(--space-md);
  }
}

@media screen and (max-width: 28rem) {
  .customer-logos, .customer-logos.content-width {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}




mark, .highlight, kbd {
  background: var(--gray-2);
  padding: var(--space-sm);
  border-radius: var(--border-rad-sm);
  margin: 0 var(--space-xs);
  color: var(--gray-10) !important;
}

mark.sm, .highlight.sm, kbd.sm {
  font-size: var(--font-size-sm);
  letter-spacing: 0 !important;
  font-weight: var(--font-weight-h) !important;
}

mark.xs, .highlight.xs, kbd.xs, .xs mark, .xs .highlight {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
}

.callout {
  padding: var(--space-2x);
  border-radius: var(--border-rad);
  position: relative;
}

.callout.sm {
  padding: var(--space-xl);
}

@media screen and (max-width: 42rem) {
  .callout {
    padding: var(--space-xl);
  }
}

.note {
  background: var(--gray-2);
  padding: var(--space-lg);
  border-radius: var(--border-rad);
  border: var(--border-sm) solid var(--gray-4);
}

.note.sm, .note.xs {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-rad-sm);
}

.banner {
  background: var(--gray-2);
  padding: var(--space);
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: var(--font-size-sm);
}

.notification {
  background: var(--gray-3);
  color: var(--gray-6);
  padding: .08rem var(--space);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-xs);
  transition: background var(--time);
}

:not(.active) .notification:hover, li a:not(.active):hover .notification {
  background: var(--gray-4);
  color: var(--gray-7);
}

.active .notification {
  background: var(--purple);
  color: var(--gray-0);
}

.badge-button {
  display: inline-block;
  letter-spacing: 0 !important;
  border-radius: var(--border-rad-full);
  padding: var(--space-sm) var(--space-lg);
  background: var(--gray-2);
  color: var(--gray-10);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--time), color var(--time);
  margin-bottom: var(--space-sm);
}

.badge-button:hover {
  background: var(--gray-3);
  color: var(--gray-8);
}

.badge-button:not(:last-child) {
  margin-right: var(--space);
}

.badge-button.alt {
  background: var(--purple-2);
  color: var(--purple-7) !important;
}

.badge-button.danger {
  background: var(--pink-fade);
  color: var(--pink);
}

.badge-button.warn {
  background: var(--yellow) !important;
  color: var(--gray-10);
}

@media (prefers-color-scheme: dark) {
  .badge-button.warn {
    color: var(--gray-0);
  }
}

.badge-button.warn:hover {
  background: var(--yellow-fade) !important;
  color: var(--gray-10);
}

.badge-button.plain {
  background: transparent;
  color: var(--gray-6);
}

.badge {
  display: inline-block !important;
  font-size: var(--font-size-xs) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  padding: 0.125rem 0.4rem !important;
  margin-left: var(--space-md);
  text-decoration: none !important;
  background: var(--gray-3);
  border-radius: var(--border-rad-full);
  color: var(--gray-10) !important;
  transition: background var(--time);
}

.badge.lg {
  padding: .4rem var(--space) !important;
}

.badge.vert, .badge-button.vert {
  vertical-align: middle;
}

.note.secondary, mark.secondary, .highlight.secondary, .badge.secondary, .banner.secondary {
  background: var(--purple-7);
  color: var(--gray-0) !important;
}

*.secondary:hover {
  background: var(--purple);
}

.note.alt, mark.alt, .highlight.alt, .badge.alt, .banner.alt {
  background: var(--purple-2);
}

.note.alt {
  border: var(--border-sm) solid var(--purple-5);
}

.note.alt .outline {
  border: var(--border-sm) solid var(--purple-5);
  color: var(--purple-7);
}

.note.light, mark.light, .highlight.light, .badge.light, .banner.light {
  background: var(--gray-0);
  border-color: var(--gray-3);
}

.note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark, kbd, .force-light :is(.note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark, kbd) {
  background: var(--gray-9);
  color: var(--gray-2);
  border-width: 0;
}

@media (prefers-color-scheme: light) {
  .note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark, kbd, .force-light :is(.note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark, kbd) {
    color: var(--gray-0) !important;
  }
}

.force-dark :is(.note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark, kbd) {
  background: var(--gray-2);
  color: var(--gray-10);
  border: var(--border-sm) solid var(--gray-5);
}

.note.warn, mark.warn, .highlight.warn, .badge.warn, .banner.warn, .badge-button.warn {
  background: var(--yellow-fade);
}

.note.warn {
  border: var(--border-sm) solid var(--yellow);
}

.note.update, mark.update, .highlight.update, .badge.update, .banner.update {
  background: var(--green-fade);
}

.note.identified, mark.identified, .highlight.identified, .badge.identified, .banner.identified {
  background: var(--blue-fade);
}

.note.danger, mark.danger, .highlight.danger, .badge.danger, .banner.danger {
  background: var(--pink-fade);
}

.note.danger {
  border: var(--border-sm) solid var(--pink);
}

.note.danger .outline {
  border: var(--border-sm) solid var(--pink);
  color: var(--pink);
}

.note.danger input.element {
  border-color: var(--pink);
}

.note.danger .helper {
  color: var(--pink);
}

.note.outline, mark.outline, .highlight.outline {
  background: none;
  border: var(--border-sm) solid var(--gray-3);
}

/* article :where(.note, mark, .highlight, .badge):not(.dark) a {
  color: var(--gray-9);
  text-decoration-color: inherit;
} */

.note a:hover {
  color: var(--gray-7);
}


/* article :where(.note.dark, mark.dark, .highlight.dark, .badge.dark) a {
  color: var(--gray-0);
} */

.note.dark a:hover {
  color: var(--gray-2);
}

@media (prefers-color-scheme: dark) {
  .note.dark a:hover {
    color: var(--purple-9) !important;
  }
}

.force-dark .note.dark a:hover {
    color: var(--purple-9) !important;
}

article .note :is(ul, ol, p, blockquote, small):last-child {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  .note.dark, mark.dark, .highlight.dark, .badge.dark, .banner.dark {
    background: var(--gray-2);
    color: var(--gray-10);
    border: var(--border-sm) solid var(--gray-5);
  }

  .note.danger, mark.danger, .highlight.danger, .badge.danger, .banner.danger {
    background: var(--pink-fade);
    color: var(--gray-10) !important;
  }
}













form, .form {
  position: relative;
  text-align: left;
}

fieldset, .fieldset {
  border: none;
  position: relative;
  margin: var(--space-2x) 0;
}

:where(fieldset, .fieldset):first-child {
  margin-top: 0;
}


:where(fieldset, .fieldset):last-child {
  margin-bottom: 0;
}

legend, .legend, legend a {
  display: block;
  width: 100%;
  margin-bottom: var(--space);
  font-weight: var(--font-weight-h) !important;
}

legend a, .legend a {
  text-decoration: none !important;
  display: inline;
}

label, .label {
  display: block;
  margin-bottom: var(--space-lg);
  position: relative;
}

article label small {
  margin: 0;
}

label.no-space, .label.no-space, label.search, .no-space label, .no-space .label {
  margin-bottom: 0;
}

label.space, .label.space, .space label, .space .label {
  margin-bottom: var(--space-lg) !important;
}

label.label-icon input {
  padding-right: var(--space-2x);
}

label.label-icon::after {
  font-family: var(--font-icon);
  font-size: var(--font-size);
  font-weight: 300 !important;
  color: var(--gray-6);
  position: absolute;
  top: 1.4rem; right: var(--space-lg);
  transform: translateY(-50%);
}

label.error.label-icon::after {
  color: var(--pink);
}

label.label-email::after {
  content: "\e1b8";
}

label.label-password::after {
  content: "\f30d";
}

label.label-twofa::after {
  content: "\2a";
}

.helper {
  margin: var(--space) 0;
}

.error .helper {
  color: var(--pink);
}

label::selection {
  background: none;
}

label > :where(input, select, textarea) {
  margin-top: var(--space-sm);
}

input, select, textarea, button, .like-input {
  border: none;
  outline: none;
  cursor: pointer;
  font-size: var(--font-size);
  caret-color: var(--purple);
  font-family: var(--font-sans);
  background-image: none;
  color: var(--gray-10);
  transition: opacity var(--time);
  line-height: var(--leading) !important;
}

textarea {
  resize: vertical;
  overflow: auto;
  height: 6rem;
}

input.sm, .input.sm, button.sm, .button.sm, select.sm, textarea.sm {
  font-size: var(--font-size-sm);
}

input::placeholder {
  color: var(--gray-5);
  opacity: var(--opacity-80);
}

.error input::placeholder {
  color: var(--pink);
}

input:disabled {
  color: var(--gray-9);
  opacity: 1;
}

input.block, .input.block {
  display: block;
  width: 100%;
}

.search {
  white-space: nowrap;
}
.search input {
  font-size: var(--font-size-sm);
}

.select {
  position: relative;
  display: block;
}

.select.inline {
  position: relative;
  display: inline-block;
  width: auto;
}

.select select {
  padding-right: var(--space-lg) !important;
}

.select.sm select {
  padding-right: calc(var(--space-xl) + var(--border-lg)) !important;
}

.select::after {
  font-family: var(--font-icon);
  font-weight: 300 !important;
  content: "\f078";
  position: absolute;
  right: var(--space); top: 50%;
  transform: translate(0,-45%);
  color: var(--gray-5);
  font-size: var(--font-size-xs);
}

.select.sm::after {
  right: var(--space); top: 50%;
  transform: translate(0,-60%);
  color: var(--gray-5);
}

[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: .5rem;
  width: .5rem;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: .5rem .5rem;
}

@media (prefers-color-scheme: dark) {
  [type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: .5rem;
    width: .5rem;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIgZmlsbD0iI2ZmZiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
    background-size: .5rem .5rem;
  }
}

.force-dark [type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: .5rem;
  width: .5rem;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIgZmlsbD0iI2ZmZiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: .5rem .5rem;
}

input[type="checkbox"], input[type="radio"] {
  border: none;
  width: 0; height: 0;
  display: inline;
  line-height: 0;
  position: absolute;
}

input[type="checkbox"].block + label, input[type="radio"].block + label, .button.block, button.block {
  display: block;
  width: 100%;
}

input[type="radio"] + label::before, input[type="checkbox"] + label::before {
  font-family: var(--font-icon);
  font-weight: 300 !important;
  display: inline-block;
  position: absolute;
  top: .26rem; left: 0;
}

input[type="checkbox"] + label::before {
  content: "\f0c8";
}

input[type="checkbox"]:disabled + label::before {
  content: "\e269";
}

input[type="checkbox"]:checked + label::before {
  content: "\f14a";
  color: var(--purple);
}

input[type="checkbox"]:indeterminate + label::before {
  content: "\f146";
}

input[type="radio"] + label::before {
  content: "\f111";
}

input[type="radio"]:disabled + label::before {
  content: "\e105";
}

input[type="radio"]:checked + label::before {
  content: "\f058";
  color: var(--purple);
}

input[type="checkbox"] + label, input[type="radio"] + label {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  padding: var(--space-sm);
  transition: color var(--time);
  padding-left: 1.4rem;
  position: relative;
}

.error input[type="checkbox"] + label, .error input[type="radio"] + label {
  color: var(--pink);
  transition: none;
}

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
  color: var(--purple);
}

input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label, input:disabled + label small {
  color: var(--gray-5);
}

input[type="checkbox"] + label:not(:last-child) {
  margin-right: var(--space-lg);
}

input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
  outline: var(--border-sm) dotted var(--gray-3);
}

input[type="checkbox"]:active, input[type="radio"]:active, input[type="checkbox"]:active + label, input[type="radio"]:active + label {
  filter: opacity(80%);
}

.toggles input[type="checkbox"] + label {
  display: block;
  padding: var(--space) 2.4rem var(--space) 0;
  border-bottom: var(--border-sm) solid var(--gray-3);
  font-size: var(--font-size-sm);
}

.label.toggles {
  margin-bottom: 0;
}

.toggles input[type="checkbox"] + label::before {
  content: "\e5b0";
  top: .6rem;
  left: auto; right: 0;
}

.toggles input[type="checkbox"]:checked + label::before {
  content: "\e5b1";
}

.pricing :is(input[type="radio"], input[type="checkbox"]) + label::before {
  content: "";
  color: var(--purple);
}

.pricing :is(input[type="radio"], input[type="checkbox"]) + label::before {
  margin-right: 0;
}

.pricing :is(input[type="radio"], input[type="checkbox"]) + label {
  padding: var(--space-lg);
  border-radius: var(--border-rad);
  border: var(--border) solid var(--gray-3);
  margin-bottom: var(--space);
  display: block;
  position: relative;
  color: var(--gray-7);
}

.pricing :is(input[type="radio"], input[type="checkbox"]):checked + label {
  background: var(--gray-0);
  border: var(--border) solid transparent;
  color: var(--gray-9);
  box-shadow: 0 0 0 var(--border-md) var(--purple-7);
}

.pricing :is(input[type="radio"], input[type="checkbox"]):not(:disabled, :checked):hover + label {
  border: var(--border) solid var(--gray-3);
}

.pricing :is(input[type="radio"], input[type="checkbox"]):checked + label small {
  color: var(--purple);
}

.tags {
  background: var(--gray-2);
  padding: var(--space-sm);
  border-radius: var(--border-rad-full);
  display: inline-block;
}

.tags input[type="radio"] {
  margin-right: 0;
}

.tags input[type="radio"] + label::before {
  content: "";
  margin: 0;
}

.tags input[type="radio"] + label {
  background: transparent;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-rad-full);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-6);
  border: var(--border-sm) solid transparent;
}

.tags input[type="radio"]:not(:checked) + label:hover {
  border-color: var(--gray-4);
}

.tags input[type="radio"]:checked + label {
  background: var(--gray-0);
  color: var(--purple);
  border: var(--border-sm) solid var(--purple);
}

.tags input[type="radio"] + label:not(:last-child) {
  margin-right: var(--space);
}




.tags-alt input[type="radio"] + label {
  background: transparent;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-8);
  border: var(--border-sm) solid var(--gray-4);
  transition: border var(--time);
}

.tags-alt.lg input[type="radio"] + label {
  padding: var(--space) var(--space-md);
  font-size: var(--font-size);
}

.tags-alt.sm input[type="radio"] + label {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  border: none;
  background: var(--gray-2);
}

.tags-alt input[type="radio"].loading + label {
  background: var(--gray-3);
  color: var(--gray-6);
  border-color: var(--gray-3);
  cursor: wait;
}

.tags-alt input[type="radio"]:disabled + label {
  background: transparent;
  color: var(--gray-6);
  border: var(--border-sm) solid var(--gray-3);
  cursor: wait;
}

.tags-alt input[type="radio"]:not(.loading):checked + label {
  color: var(--gray-0);
  background: var(--purple-7);
  border: var(--border-sm) solid var(--purple-7) !important;
}

.tags-alt.sm input[type="radio"]:not(.loading):checked + label {
  color: var(--gray-0);
  background: var(--gray-8);
  border: none !important;
}

.tags-alt input[type="radio"]:not(.loading, :disabled):hover + label {
  border-color: var(--gray-8);
}

.tags-alt input[type="radio"] + label:not(:last-child) {
  margin-right: var(--space-sm);
}

.tags-alt input[type="radio"] + label::before {
  content: "";
}

.tags-alt input[type="radio"]:checked + label::after {
  content: "\f058";
  color: var(--gray-0);
  font-family: var(--font-icon);
  font-weight: 300 !important;
  margin-left: var(--space);
}

.tags-alt.sm input[type="radio"]:checked + label::after {
  content: "";
  margin-left: 0;
}

@media screen and (max-width: 42rem) {
  .tags-alt  input[type="radio"]:checked + label::after {
    float: right;
  }
}

.tags-alt  input[type="radio"].loading + label::after {
  content: "\f3f4";
  color: var(--gray-6);
  font-family: var(--font-icon);
  font-weight: 300 !important;
  margin-left: var(--space);
  display: inline-block;
  animation-name:fa-spin;
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,linear);
}

@media screen and (max-width: 32rem) {
  input[type="checkbox"] + label, input[type="radio"] + label {
    display: block;
    width: 100%;
    margin-left: 0 !important;
  }

  .tags {
    border-radius: var(--border-rad);
    width: 100%;
  }

  .tags input[type="radio"] + label {
    border-radius: var(--border-rad);
  }

  .tags input[type="radio"] + label {
    display: block;
    margin: 0 !important;
  }

  .tags-alt input[type="radio"] + label {
    margin-bottom: var(--space-sm);
  }
}

button:not(:only-child, :last-child), .button:not(:only-child, :last-child) {
  margin-right: var(--space-sm);
}

button.icon, .button.icon {
  padding: var(--space);
  display: inline-block;
  border-radius: var(--border-rad);
  line-height: 1;
}

button.icon:focus, .button.icon:focus {
  box-shadow: 0 0 0 var(--border-md) var(--gray-3);
}

button.icon:hover, .button.icon:hover {
  color: var(--purple);
}

input.element, select.element, textarea.element, div.element {
  background: var(--gray-0);
}

.element, button.element, .button, .choices__inner {
  padding: var(--space) var(--space-lg);
  border-radius: var(--border-rad-sm);
  text-decoration: none !important;
  display: inline-block;
}

.element:not(button.element, .element.button), .choices__inner {
  display: block;
  width: 100%;
  border: var(--border) solid var(--gray-6);
  transition: border var(--time), box-shadow var(--time);
}

.error .element {
  border-color: var(--pink) !important;
  color: var(--pink);
}

.element.inline {
  display: inline;
  width: auto;
  min-width: 12rem;
}

.element:not(button.element, .button.element):disabled {
  border-color: var(--gray-3);
}

.element:not(:disabled, button, .button):focus {
  background: var(--gray-0);
  border-color: var(--purple);
  box-shadow: 0 0 0 var(--border-lg) var(--gray-3);
}

.error .element:not(:disabled):focus {
  box-shadow: 0 0 0 var(--border-lg) var(--pink-fade);
}

button, .button {
  text-decoration: none !important;
  white-space: nowrap;
  font-weight: var(--font-weight) !important;
  cursor: pointer;
  margin-bottom: var(--space-sm);
}

button.no-space, .button.no-space {
  margin-bottom: 0;
}

button.element, .button {
  border: var(--border) solid transparent;
  background: var(--purple-7);
  color: var(--gray-1);
  transition: background var(--time);
  border-radius: var(--border-rad-sm);
}

button.block, .button.block {
  /* text-align: center; */
}

button.element:not(:disabled, .loading, .alt, .warn, .outline, .danger):hover, .button:not(.disabled, .loading, .alt, .warn, .outline, .danger):hover {
  background: var(--purple-8);
  color: var(--gray-0);
}

button.element:focus {
  box-shadow: inset 0 0 0 var(--border) var(--purple-4);
}

button.element.plain:focus {
  box-shadow: none;
  color: var(--purple-5);
}

button.element.plain:hover {
  background: none !important;
}

button.element.md, .button.md, input.md, select.md, .textarea.md {
  padding: var(--space) var(--space-md);
  font-size: var(--font-size-sm);
}

button.element.sm, .button.sm, .element.sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
}

button.element.lg, .button.lg, .element.lg {
  font-size: var(--font-size-lg);
}

@media screen and (max-width: 42rem) {
  button.plain.sm, .plain.sm {
    padding: var(--space-sm);
  }
}

button.element.xs, .button.xs, .element.xs {
  padding: var(--space-xs) var(--space);
  font-size: var(--font-size-xs);
}

button:disabled, .button.disabled, button.loading, .button.loading {
  background: var(--gray-3) !important;
  color: var(--gray-6) !important;
  border: var(--border-sm) solid transparent !important;
  cursor: not-allowed;
}


button.loading, .button.loading {
  padding-left: 2.4rem;
  position: relative;
}

button.loading::before, .button.loading::before {
  content: "\f3f4";
  font-family: var(--font-icon);
  font-weight: 300 !important;
  animation: 1.5s linear infinite spinner;
  position: absolute;
  top: 1.3rem; left: 1.3rem;
}

button.sm.loading::before, .button.sm.loading::before {
  top: .8rem; left: 1.25rem;
}

@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

button.alt, .button.alt {
  background: var(--gray-9);
  transition: background var(--time);
}

button.alt:focus {
  box-shadow: inset 0 0 0 var(--border) var(--gray-6);
}

button.alt:hover, .button.alt:hover {
  background: var(--gray-7);
  color: var(--gray-0);
}

button.warn, .button.warn, input.warn {
  border: var(--border) solid transparent;
  background: var(--gray-2);
  color: var(--gray-7);
  transition: background var(--time);
}

button.warn:hover, .button.warn:hover {
  background: var(--gray-3);
}

button.warn:focus {
  box-shadow: inset 0 0 0 var(--border) var(--gray-3);
}

button.outline, .button.outline {
  border: var(--border-sm) solid var(--gray-4);
  background: transparent;
  color: var(--gray-8);
  transition: color var(--time), border-color var(--time);
}

button.outline.danger, .button.outline.danger {
  border: var(--border-sm) solid var(--pink);
  background: transparent;
  color: var(--pink);
  transition: color var(--time), border-color var(--time);
}

.warn .button.outline, .warn button.outline {
  border-color: var(--gray-9);
  color: var(--gray-9);
}

button.element.outline:hover, .button.outline:hover {
  border-color: var(--gray-6);
  color: var(--gray-9);
  background: transparent;
}

button.element.outline.danger:hover, .button.outline.danger:hover {
  border-color: var(--gray-3);
  color: var(--gray-5);
  background: transparent;
}

button.outline:focus {
  box-shadow: inset 0 0 0 var(--border) var(--gray-2);
}

button.outline-light, .button.outline-light {
  border: var(--border-sm) solid var(--gray-0);
  background: transparent;
  color: var(--gray-0);
  transition: color var(--time), border-color var(--time);
}

button.element.outline-light:hover, .button.outline-light:hover {
  border-color: var(--gray-9);
  color: var(--gray-9);
  background: transparent;
}

button.outline-light:focus {
  box-shadow: inset 0 0 0 var(--border) var(--gray-2);
}

button.bold, .button.bold {
  border: var(--border) solid var(--gray-10);
  background: transparent;
  color: var(--gray-10);
  transition: color var(--time), border-color var(--time);
}

button.bold:hover, .button.bold:hover {
  border-color: var(--gray-5);
  color: var(--gray-6) !important;
  background: transparent !important;
}

button.bold:focus {
  box-shadow: inset 0 0 0 var(--border) var(--gray-3);
}

button.danger, .button.danger {
  border-color: transparent;
  background: var(--pink);
  color: var(--gray-0);
  transition: border-color var(--time);
}

button.danger:hover, .button.danger:hover {
  color: var(--pink);
  background: var(--pink-fade);
  border-color: transparent;
}

button.danger:focus {
  box-shadow: inset 0 0 0 var(--border) var(--pink-fade);
}

button.plain, .button.plain, a.plain {
  border-color: transparent;
  background: transparent;
  color: var(--gray-7);
  transition: color var(--time);
}


button.no-space-left, .button.no-space-left {
  padding-left: 0 !important;
}


button.no-space-right, .button.no-space-right {
  padding-right: 0 !important;
}

button.plain:hover, .button.plain:hover, a.plain:hover {
  border-color: none;
  background: none !important;
  color: var(--purple) !important;
}

button.no-cursor, .button.no-cursor {
  cursor: auto;
  color: var(--gray-6) !important;
}

button.no-cursor:hover, .button.no-cursor:hover {
  color: var(--gray-6) !important;
}

.button-space {
  margin-right: var(--space-xl);
}

.button-icon i {
  margin-right: var(--space);
}

.button-icon span {
  display: inline;
}


@media screen and (max-width: 42rem) {
  .mobile-button {
    margin-bottom: var(--space);
    text-align: center;
  }

  .button-padding a {
    padding: var(--space-sm)
  }

  .button-space {
    margin-right: var(--space-sm);
  }

  .button-icon i {
    margin-right: 0;
  }

  .button-icon span {
    display: none;
  }
}






























.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity var(--time);
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: .8rem;
  height: .4rem;
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-auto[data-popper-placement^=top], .bs-tooltip-top {
  padding: .4rem 0;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
  bottom: 0;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
  top: -1px;
  border-width: .4rem .4rem 0;
  border-top-color: var(--gray-11);
}

.bs-tooltip-auto[data-popper-placement^=right], .bs-tooltip-end {
  padding: 0 .4rem;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
  left: 0;
  width: .4rem;
  height: .8rem;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
  right: -1px;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: var(--gray-11);
}

.bs-tooltip-auto[data-popper-placement^=bottom], .bs-tooltip-bottom {
  padding: .4rem 0;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
  top: 0;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 .4rem .4rem;
  border-bottom-color: var(--gray-11);
}

.bs-tooltip-auto[data-popper-placement^=left], .bs-tooltip-start {
  padding: 0 .4rem;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
  right: 0;
  width: .4rem;
  height: .8rem;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
  left: -1px;
  border-width: .4rem 0 .4rem .4rem;
  border-left-color: var(--gray-11);
}

.tooltip-inner {
  max-width: 14rem;
  padding: var(--space-sm) var(--space);
  color: var(--gray-0);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight);
  background-color: var(--gray-11);
  border-radius: var(--border-rad-sm);
  line-height: var(--leading-sm);
}


.popover, .force-light .popover {
  position: absolute;
  top: 0; left: 0;
  z-index: 1070;
  display: block;
  max-width: 24rem;
  text-align: left;
  text-align: start;
  border-radius: var(--border-rad);
  border: var(--border-sm) solid var(--gray-3);
  background: var(--gray-0);
  filter: var(--drop);
  padding: var(--space-lg);
}

.popover .popover-arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: .5rem;
}

.popover .popover-arrow::after, .popover .popover-arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow, .bs-popover-top > .popover-arrow {
  bottom:calc(-.5rem - 1px)
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::before {
  bottom: 0;
  border-width: .5rem .5rem 0;
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {
  bottom: 1px;
  border-width: .5rem .5rem 0;
  border-top-color: var(--gray-0);
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow, .bs-popover-end > .popover-arrow {
  left: calc(-.5rem - 1px);
  width: .5rem;
  height:1rem
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::before {
  left: 0;
  border-width: .5rem .5rem .5rem 0;
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {
  left: 1px;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: var(--gray-0);
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow, .bs-popover-bottom > .popover-arrow {
  top:calc(-.5rem - 1px)
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
  top: 0;
  border-width: 0 .5rem .5rem .5rem;
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::after {
  top: 1px;
  border-width: 0 .5rem .5rem .5rem;
  border-bottom-color: var(--gray-0);
}

.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -.5rem;
  content: "";
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow, .bs-popover-start > .popover-arrow {
  right: calc(-.5rem - 1px);
  width: .5rem;
  height:1rem
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::before {
  right: 0;
  border-width: .5rem 0 .5rem .5rem;
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .bs-popover-start > .popover-arrow::after {
  right: 1px;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: var(--gray-0);
}


.popover-header {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: var(--border) solid var(--gray-3);
  font-size: var(--font-size);
  font-weight: var(--font-weight-h);
  letter-spacing: 0 !important;
}

@media (prefers-color-scheme: dark) {
  .popover {
    background-color: var(--gray-2);
    border: var(--border-sm) solid var(--gray-3);
    filter: none;
  }

  .popover-header {
    border-bottom: var(--border-sm) solid var(--gray-3);
  }

  .popover.onboarding {
    border-color: transparent !important;
  }

  .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {
    border-top-color: var(--gray-3);
  }

  .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {
    border-right-color: var(--gray-3);
  }

  .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--gray-3);
  }
  .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .bs-popover-start > .popover-arrow::after {
    border-left-color: var(--gray-3);
  }
} /* dark */


.force-dark .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .force-dark .bs-popover-top > .popover-arrow::after {
  border-top-color: var(--gray-3);
}

.force-dark .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .force-dark .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--gray-3);
}

.force-dark .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .force-dark .bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--gray-3);
}
.force-dark .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .force-dark .bs-popover-start > .popover-arrow::after {
  border-left-color: var(--gray-3);
}

.popover-header:empty {
  display:none
}

.popover-body {
  font-size: var(--font-size-sm);
}

*[data-bs-toggle^=modal] {
  outline: 0;
}

*[data-bs-toggle^=tooltip], *[data-bs-toggle^=popover] {
  cursor: pointer;
}

*[data-bs-ticon^=true] {
  white-space: nowrap;
}
*[data-bs-ticon^=true]::after {
  content: "\f05a";
  font-family: var(--font-icon);
  font-weight: 300 !important;
  margin-left: var(--space);
  font-size: var(--font-size) !important;
}

*[data-bs-picon^=true], *[data-bs-ticon^=true] {
  cursor: pointer;
}

*[data-bs-picon^=true]::after {
  content: "\f30f";
  font-family: var(--font-icon);
  font-weight: 300 !important;
  margin-left: var(--space);
  font-size: var(--font-size) !important;
}

legend *[data-bs-picon^=true]::after {
  font-size: var(--font-size) !important;
}

.tab-content > .tab-pane.active {
  display: block;
}
.tab-content > .tab-pane {
  display: none;
}

.carousel {
  position: relative;
}

.carousel img, article .carousel img {
  margin-bottom: 0;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  text-align: left;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform var(--time);
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-indicators.centre {
  text-align: center;
}

.carousel-indicators.centre button {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-h) !important;
  margin: 0 var(--space);
  padding: var(--space-xs) var(--space);
  transition: transform var(--time);
}

.carousel-indicators .active {
  color: var(--purple);
}

.carousel-caption p {
  color: var(--gray-6);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: var(--space) auto;
  filter: var(--drop);
  pointer-events: none;
}

.modal-dialog.lg, .modal-left .modal-dialog, .modal-right .modal-dialog {
  max-width: 42rem;
}

.modal-dialog.md {
  max-width: 20rem;
}

.modal-dialog.sm {
  max-width: 16rem;
}

.modal-dialog.video {
  max-width: 90%;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--space) * 2)
}

.modal.fade .modal-dialog {
  transition: transform var(--time);
  transform: translate(0, -1rem);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: var(--gray-10);
}

.force-dark .modal-backdrop {
  background-color: var(--gray-1);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity:var(--opacity-90);
}

.modal-content, .force-light .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  width: 100%;
  background-color: var(--gray-0);
  border-radius: var(--border-rad);
  border-width: 0;
  outline: 0;
}

.modal-content article {
  padding: var(--space-xl);
}


.modal-content article p:last-child {
  margin-bottom: 0; padding-bottom: 0;
}

.modal-header {
  padding: calc(var(--space-lg) + var(--space-sm)) var(--space-xl) var(--space-lg) var(--space-xl);
  border-bottom: var(--border-sm) solid var(--gray-3);
  font-size: var(--font-size);
  color: var(--gray-6);
}

.modal-footer {
  padding: var(--space-lg) var(--space-xl);
  background: var(--gray-2);
  border-bottom-right-radius: var(--border-rad);
  border-bottom-left-radius: var(--border-rad);
}

@media screen and (max-width: 32rem) {
  .modal-content {
    border-radius: 0;
    margin: var(--space-xl) auto;
  }

  .modal-dialog-centered {
    display: block;
    align-items: first;
    min-height: auto;
  }

  :is(.modal-left, .modal-right) .modal-content {
    margin: 0 auto;
  }

  .modal-footer {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}



.sm .modal-content article {
  padding: var(--space-lg);
}

.modal-right article, .modal-left article {
  min-height: 100vh;
  padding-bottom: var(--space-2x);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--space-xl));
}

.modal-dialog-scrollable-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
  height: calc(100% - var(--space-xl));
}

.modal-dialog-scrollable .modal-content, .modal-dialog-scrollable-centered .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable article, .modal-dialog-scrollable-centered article, .modal-dialog-scrollable .scroll, .modal-dialog-scrollable-centered .scroll {
  overflow-y: auto;
}

.modal-right.show .modal-dialog, .modal-left.show .modal-dialog {
  transform: none !important;
}

.modal-right .modal-dialog, .modal-left .modal-dialog {
  margin: 0;
  position: fixed;
  height: 100%;
  background: var(--gray-0);
}

.modal-right .modal-dialog {
  right: 0;
}

.modal-left .modal-dialog {
  left: 0;
}

.modal-right.fade .modal-dialog {
  transform: translateX(100%);
}
.modal-left.fade .modal-dialog  {
  transform: translateX(-100%);
}

.modal-right.modal-static .modal-dialog, .modal-left.modal-static .modal-dialog {
  transform:scale(1.02) !important;
}

.modal-right .modal-content, .modal-left .modal-content {
  border-radius: 0;
  top: 0;
}

@media (prefers-color-scheme: dark) {
  .modal-backdrop {
    background-color: var(--gray-1);
  }

  .modal-backdrop.show {
    opacity: var(--opacity-90);
  }

  .modal-content {
    border: var(--border-sm) solid var(--gray-3);
  }

  .modal-right .modal-content, .modal-left .modal-content {
    border: none;
  }

  .modal-left .modal-dialog, .offcanvas-start {
    border-right: var(--border-sm) solid var(--gray-3);
  }

  .modal-right .modal-dialog, .offcanvas-end {
    border-left: var(--border-sm) solid var(--gray-3);
  }

  .modal-footer {
    background: var(--gray-2);
  }

}

.force-dark .modal-content {
  border: var(--border-sm) solid var(--gray-3);
}

.force-dark .modal-right .modal-content, .force-dark .modal-left .modal-content {
  border: none;
}

.force-dark .modal-left .modal-dialog, .offcanvas-start {
  border-right: var(--border-sm) solid var(--gray-3);
}

.force-dark .modal-right .modal-dialog, .offcanvas-end {
  border-left: var(--border-sm) solid var(--gray-3);
}