:root {
  font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	accent-color: var(--blue-6);
  --text-size-micro: clamp(0.61rem, calc(0.61rem + 0.00vw), 0.61rem);
  --text-size-small: clamp(0.73rem, calc(0.73rem + 0.00vw), 0.73rem);
  --text-size-base: clamp(0.88rem, calc(0.88rem + 0.00vw), 0.88rem);
  --text-size-h4: clamp(1.05rem, calc(1.05rem + 0.00vw), 1.05rem);
  --text-size-h3: clamp(1.26rem, calc(1.26rem + 0.00vw), 1.26rem);
  --text-size-h2: clamp(1.51rem, calc(1.51rem + 0.00vw), 1.51rem);
  --text-size-h1: clamp(1.81rem, calc(1.81rem + 0.00vw), 1.81rem);
  --text-size-d3: clamp(2.18rem, calc(2.18rem + 0.00vw), 2.18rem);
  --text-size-d2: clamp(2.61rem, calc(2.61rem + 0.00vw), 2.61rem);
  --text-size-d1: clamp(3.14rem, calc(3.14rem + 0.00vw), 3.14rem);

  --font-weight-light: 300;
  --font-weight-reg: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height--2: 1; --line-height-reset: var(--line-height--2);
	--line-height--1: 1.2; --line-height-tight: var(--line-height--1);
	--line-height-bootstrap: 1.42857;
	--line-height-0: 1.5; --line-height-base: var(--line-height-0);
	--line-height-1: 1.75; --line-height-loose: var(--line-height-1); 
	--line-height-2: 2;

	/********************
	COLORS - HSL 
	Use --*-hsl when needing to adjust the transparency of the color like:
		background-color: hsl(var(--gray-10-hsl) / 40%);
	This will set the background to be gray-10 at 40% opacity.
	********************/

	--white-hsl: 0 0% 100%;
	--gray-0-hsl: 213 20% 97%;
	--gray-1-hsl: 213 20% 95%;
	--gray-2-hsl: 213 22% 87%;
	--gray-3-hsl: 213 26% 76%;
	--gray-4-hsl: 213 20% 65%;
	--gray-5-hsl: 213 12% 55%;
	--gray-6-hsl: 213 9% 44%;
	--gray-7-hsl: 213 9% 38%;
	--gray-8-hsl: 213 8% 29%;
	--gray-9-hsl: 213 7% 22%;
	--gray-10-hsl: 213 7% 11%;
	--blue-0-hsl: 213 85% 97%;
	--blue-1-hsl: 213 89% 93%;
	--blue-2-hsl: 213 82% 87%;
	--blue-3-hsl: 213 81% 79%;
	--blue-4-hsl: 214 83% 68%;
	--blue-5-hsl: 214 82% 58%;
	--blue-6-hsl: 213 100% 45%;
	--blue-7-hsl: 214 100% 38%;
	--blue-8-hsl: 214 100% 29%;
	--blue-9-hsl: 213 100% 23%;
	--blue-10-hsl: 214 100% 12%;
	--orange-0-hsl: 25 75% 97%;
	--orange-1-hsl: 24 77% 95%;
	--orange-2-hsl: 22 84% 80%;
	--orange-3-hsl: 22 87% 73%;
	--orange-4-hsl: 22 91% 60%;
	--orange-5-hsl: 22 80% 48%;
	--orange-6-hsl: 21 80% 39%;
	--orange-7-hsl: 21 80% 31%;
	--orange-8-hsl: 21 79% 23%;
	--orange-9-hsl: 22 78% 16%;
	--orange-10-hsl: 24 62% 10%;
	--red-0-hsl: 355 100% 98%;
	--red-1-hsl: 357 100% 96%;
	--red-2-hsl: 356 88% 87%;
	--red-3-hsl: 356 93% 84%;
	--red-4-hsl: 355 96% 71%;
	--red-5-hsl: 355 96% 67%;
	--red-6-hsl: 351 84% 47%;
	--red-7-hsl: 351 84% 42%;
	--red-8-hsl: 351 87% 33%;
	--red-9-hsl: 351 90% 24%;
	--red-10-hsl: 357 81% 17%;
	--green-0-hsl: 148 79% 96%;
	--green-1-hsl: 151 88% 87%;
	--green-2-hsl: 156 94% 73%;
	--green-3-hsl: 157 72% 55%;
	--green-4-hsl: 158 65% 46%;
	--green-5-hsl: 158 67% 39%;
	--green-6-hsl: 158 70% 31%;
	--green-7-hsl: 158 70% 26%;
	--green-8-hsl: 158 75% 20%;
	--green-9-hsl: 157 74% 12%;
	--green-10-hsl: 155 72% 10%;
	--yellow-0-hsl: 50 100% 95%;
	--yellow-1-hsl: 51 95% 83%;
	--yellow-2-hsl: 51 96% 56%;
	--yellow-3-hsl: 52 92% 45%;
	--yellow-4-hsl: 52 93% 37%;
	--yellow-5-hsl: 52 92% 31%;
	--yellow-6-hsl: 52 94% 25%;
	--yellow-7-hsl: 52 94% 19%;
	--yellow-8-hsl: 51 92% 15%;
	--yellow-9-hsl: 50 93% 11%;
	--yellow-10-hsl: 52 89% 7%;
	--teal-0-hsl: 186 91% 95%;
	--teal-1-hsl: 187 92% 90%;
	--teal-2-hsl: 190 96% 72%;
	--teal-3-hsl: 188 94% 56%;
	--teal-4-hsl: 187 96% 44%;
	--teal-5-hsl: 187 99% 37%;
	--teal-6-hsl: 187 100% 31%;
	--teal-7-hsl: 187 100% 25%;
	--teal-8-hsl: 187 100% 20%;
	--teal-9-hsl: 188 100% 15%;
	--teal-10-hsl: 188 81% 10%;
	--indigo-0-hsl: 253 100% 98.5%;
	--indigo-1-hsl: 253 100% 97%;
	--indigo-2-hsl: 253 100% 92%;
	--indigo-3-hsl: 253 100% 86%;
	--indigo-4-hsl: 253 100% 79%;
	--indigo-5-hsl: 253 100% 72%;
	--indigo-6-hsl: 253 100% 65%;
	--indigo-7-hsl: 253 82% 56%;
	--indigo-8-hsl: 253 66% 44%;
	--indigo-9-hsl: 253 65% 34%;
	--indigo-10-hsl: 253 64% 19%;
	--purple-0-hsl: 267 100% 98%;
	--purple-1-hsl: 267 100% 96%;
	--purple-2-hsl: 270 89% 89%;
	--purple-3-hsl: 270 94% 86%;
	--purple-4-hsl: 269 100% 80%;
	--purple-5-hsl: 267 100% 74%;
	--purple-6-hsl: 266 100% 67%;
	--purple-7-hsl: 265 95% 59%;
	--purple-8-hsl: 267 95% 45%;
	--purple-9-hsl: 266 100% 34%;
	--purple-10-hsl: 265 100% 23%;
	--pink-0-hsl: 359 100% 98%;
	--pink-1-hsl: 343 77% 97%;
	--pink-2-hsl: 349 100% 91%;
	--pink-3-hsl: 348 100% 82%;
	--pink-4-hsl: 347 99% 74%;
	--pink-5-hsl: 345 84% 63%;
	--pink-6-hsl: 341 66% 48%;
	--pink-7-hsl: 338 87% 37%;
	--pink-8-hsl: 337 100% 29%;
	--pink-9-hsl: 338 100% 23%;
	--pink-10-hsl: 339 100% 14%;

	--white: #fff;
	--gray-0: #f6f7f9;
	--gray-1: #f0f2f5;
	--gray-2: #d7dde5;
	--gray-3: #b2c0d2;
	--gray-4: #94a4b8;
	--gray-5: #7e8b9a;
	--gray-6: #666f7a;
	--gray-7: #58606a;
	--gray-8: #444950;
	--gray-9: #34383c;
	--gray-10: #1a1c1e;
	--blue-0: #f1f7fe;
	--blue-1: #ddecfd;
	--blue-2: #c3dbf9;
	--blue-3: #9ec5f5;
	--blue-4: #6aa4f1;
	--blue-5: #3c88ec;
	--blue-6: #0067e6;
	--blue-7: #0054c2;
	--blue-8: #004094;
	--blue-9: #003575;
	--blue-10: #001b3d;
	--orange-0: #fdf6f2;
	--orange-1: #fcf0e8;
	--orange-2: #f7c1a1;
	--orange-3: #f6aa7e;
	--orange-4: #f6803c;
	--orange-5: #dc6018;
	--orange-6: #b34c14;
	--orange-7: #8e3c10;
	--orange-8: #692d0c;
	--orange-9: #492009;
	--orange-10: #29160a;
	--red-0: #fff5f6;
	--red-1: #ffebec;
	--red-2: #fbc1c5;
	--red-3: #fcb0b5;
	--red-4: #fc6e7a;
	--red-5: #fc5a68;
	--red-6: #dd1331;
	--red-7: #c5112c;
	--red-8: #9d0b21;
	--red-9: #740617;
	--red-10: #4e080c;
	--green-0: #edfdf4;
	--green-1: #c1fbdf;
	--green-2: #79fbc7;
	--green-3: #3adfa0;
	--green-4: #29c28a;
	--green-5: #21a675;
	--green-6: #18865e;
	--green-7: #14714f;
	--green-8: #0d593d;
	--green-9: #083524;
	--green-10: #072c1d;
	--yellow-0: #fffbe6;
	--yellow-1: #fdf0aa;
	--yellow-2: #fbda23;
	--yellow-3: #dcc009;
	--yellow-4: #b69f07;
	--yellow-5: #988406;
	--yellow-6: #7c6c04;
	--yellow-7: #5e5203;
	--yellow-8: #493f03;
	--yellow-9: #362d02;
	--yellow-10: #221e02;
	--teal-0: #e7fcfe;
	--teal-1: #cef7fd;
	--teal-2: #73e5fc;
	--teal-3: #25dcf8;
	--teal-4: #04c3dc;
	--teal-5: #01a6bc;
	--teal-6: #008c9e;
	--teal-7: #007180;
	--teal-8: #005a66;
	--teal-9: #00424d;
	--teal-10: #05292e;
	--indigo-0: #f9f7ff;
	--indigo-1: #f3f0ff;
	--indigo-2: #dfd6ff;
	--indigo-3: #c7b8ff;
	--indigo-4: #ab94ff;
	--indigo-5: #8f70ff;
	--indigo-6: #734dff;
	--indigo-7: #5b33eb;
	--indigo-8: #4626ba;
	--indigo-9: #371e8f;
	--indigo-10: #1f114f;
	--purple-0: #f9f5ff;
	--purple-1: #f4ebff;
	--purple-2: #e3cafc;
	--purple-3: #dbbafd;
	--purple-4: #ca99ff;
	--purple-5: #b67aff;
	--purple-6: #a057ff;
	--purple-7: #8633fa;
	--purple-8: #6806e0;
	--purple-9: #4b00ad;
	--purple-10: #310075;
	--pink-0: #fff5f5;
	--pink-1: #fdf1f5;
	--pink-2: #ffd1da;
	--pink-3: #ffa3b6;
	--pink-4: #fe7b98;
	--pink-5: #f05179;
	--pink-6: #cb2a5d;
	--pink-7: #b00c48;
	--pink-8: #940039;
	--pink-9: #75002b;
	--pink-10: #470019;

	/* Shadows */
	--shadow-color: 0 0% 0%;
	--shadow-strength: 1%;
	--shadow-none: none;
	--shadow-xs: 0 1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
		0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
	--shadow-sm: 0 4px 6px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
		0 2px 4px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
	--shadow-md: 0 10px 15px -3px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
		0 4px 6px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%));
	--shadow-lg: 0 20px 25px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
		0 10px 10px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%));
	--shadow-xl: 0 25px 50px -10px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 29%));

	--input-height: 34px;
	--color-input-background: var(--white);
	--color-input-background-disabled: var(--gray-1);
	--color-input-outline: var(--gray-8);
	--color-input-focus-shadow: var(--blue-3);
	--color-input-border: var(--gray-3);
	--color-input-border-focus: var(--blue-5);
	--color-input-border-error: var(--color-semantic-danger);

	/* Semantic color palettes */
	--color-semantic-info: var(--blue-6);
	--color-semantic-info-light-1: var(--blue-3);
	--color-semantic-info-light-2: var(--blue-0);
	--color-semantic-info-dark-1: var(--blue-7);
	--color-semantic-info-dark-2: var(--blue-8);

	--color-semantic-warning: var(--yellow-2);
	--color-semantic-warning-light-1: var(--yellow-1);
	--color-semantic-warning-light-2: var(--yellow-0);
	--color-semantic-warning-dark-1: var(--yellow-7);
	--color-semantic-warning-dark-2: var(--yellow-8);

	--color-semantic-danger: var(--red-6);
	--color-semantic-danger-light-1: var(--red-3);
	--color-semantic-danger-light-2: var(--red-0);
	--color-semantic-danger-dark-1: var(--red-7);
	--color-semantic-danger-dark-2: var(--red-8);

	--color-semantic-success: var(--green-6);
	--color-semantic-success-light-1: var(--green-3);
	--color-semantic-success-light-2: var(--green-0);
	--color-semantic-success-dark-1: var(--green-7);
	--color-semantic-success-dark-2: var(--green-8);

	--color-semantic-neutral: var(--gray-6);
	--color-semantic-neutral-light-1: var(--gray-3);
	--color-semantic-neutral-light-2: var(--gray-1);
	--color-semantic-neutral-dark-1: var(--gray-7);
	--color-semantic-neutral-dark-2: var(--gray-8);
	

	--color-semantic-action-primary: var(--color-semantic-info);
	--color-semantic-action-negative: var(--color-semantic-danger);

  /* Sequential color palettes */
	--color-datavis-seq-a1: var(--teal-2);
	--color-datavis-seq-a1-text: var(--gray-10);
	--color-datavis-seq-a2: var(--teal-4);
	--color-datavis-seq-a2-text: var(--gray-10);
	--color-datavis-seq-a3: var(--teal-6);
	--color-datavis-seq-a3-text: var(--white);
	--color-datavis-seq-a4: var(--teal-8);
	--color-datavis-seq-a4-text: var(--white);
	--color-datavis-seq-a5: var(--teal-10);
	--color-datavis-seq-a5-text: var(--white);
	--color-datavis-seq-b1: var(--purple-2);
	--color-datavis-seq-b1-text: var(--gray-10);
	--color-datavis-seq-b2: var(--purple-4);
	--color-datavis-seq-b2-text: var(--gray-10);
	--color-datavis-seq-b3: var(--purple-6);
	--color-datavis-seq-b3-text: var(--white);
	--color-datavis-seq-b4: var(--purple-8);
	--color-datavis-seq-b4-text: var(--white);
	--color-datavis-seq-b5: var(--purple-10);
	--color-datavis-seq-b5-text: var(--white);
	--color-datavis-seq-c1: #ffe600;
	--color-datavis-seq-c1-text: var(--gray-10);
	--color-datavis-seq-c2: #b2e000;
	--color-datavis-seq-c2-text: var(--gray-10);
	--color-datavis-seq-c3: #53d439;
	--color-datavis-seq-c3-text: var(--gray-10);
	--color-datavis-seq-c4: #00bf6a;
	--color-datavis-seq-c4-text: var(--gray-10);
	--color-datavis-seq-c5: #00a883;
	--color-datavis-seq-c5-text: var(--gray-10);
	--color-datavis-seq-c6: #008f8f;
	--color-datavis-seq-c6-text: #000;
	--color-datavis-seq-c7: #007591;
	--color-datavis-seq-c7-text: var(--white);
	--color-datavis-seq-c8: #2c5b91;
	--color-datavis-seq-c8-text: var(--white);
	--color-datavis-seq-c9: #443c88;
	--color-datavis-seq-c9-text: var(--white);
	--color-datavis-seq-c10: #4e1872;
	--color-datavis-seq-c10-text: var(--gray-10);
	
	/* Heatmap color palette */
	--color-datavis-heatmap-1: #fff;
  --color-datavis-heatmap-2: var(--blue-1);
  --color-datavis-heatmap-3: var(--blue-2);
  --color-datavis-heatmap-4: var(--blue-3);
  --color-datavis-heatmap-5: var(--blue-4);
  --color-datavis-heatmap-6: var(--blue-5);
  --color-datavis-heatmap-7: var(--blue-6);
  --color-datavis-heatmap-8: var(--blue-7);
  --color-datavis-heatmap-9: var(--blue-8);
  --color-datavis-heatmap-10: var(--blue-9);
	
	/* Qualitative color palette */
	--color-datavis-qual-1: var(--teal-5);
	--color-datavis-qual-2: #6625c4;
	--color-datavis-qual-3: #FF1A6C;
	--color-datavis-qual-4: #fc9446;
	--color-datavis-qual-5: #809afd;
	--color-datavis-qual-6: #ffa3b5;
	--color-datavis-qual-7: #f1c21b;
	--color-datavis-qual-8: var(--gray-8);

	/* Diverging color palette */
	--color-datavis-div-1: var(--purple-10);
	--color-datavis-div-2: var(--purple-8);
	--color-datavis-div-3: var(--purple-6);
	--color-datavis-div-4: var(--purple-4);
	--color-datavis-div-5: var(--purple-2);
	--color-datavis-div-6: var(--teal-2);
	--color-datavis-div-7: var(--teal-4);
	--color-datavis-div-8: var(--teal-6);
	--color-datavis-div-9: var(--teal-8);
	--color-datavis-div-10: var(--teal-10);
	--color-datavis-div-midpoint: var(--gray-1);

	/* Favorability/Sentiment color palette */
	--color-datavis-average: var(--gray-4);
	--color-datavis-favorable: var(--blue-6);
	--color-datavis-neutral: var(--gray-3);
	--color-datavis-unfavorable: var(--red-6);
	--color-datavis-sentiment-mixed: #cecece;
	--color-datavis-sentiment-neg: #a71e1e;
	--color-datavis-sentiment-pos: #2074ae;

	/*COLORS - Features*/
	--color-feature-1on1s: var(--blue-5);
	--color-feature-recognition: var(--yellow-4);
	--color-feature-goals: var(--red-4);
	--color-feature-goals-org: #ffab00;
	--color-feature-goals-dept: var(--green-4);
	--color-feature-goals-personal: var(--blue-5);
	--color-feature-goals-observed: var(--gray-7);
	--color-feature-survey: var(--orange-6);
	--color-feature-feedback: var(--green-4);
	--color-feature-talent: var(--purple-4);
	--color-feature-turnover: var(--blue-7);

	/* COLORS - Status */
	--color-avatar-status-neutral: var(--color-semantic-neutral);
		--color-avatar-status-optOut: var(--color-semantic-neutral);
		--color-avatar-status-started: var(--color-semantic-neutral-dark-2);

	--color-avatar-status-danger: var(--color-semantic-danger);
		--color-avatar-status-notStarted: var(--color-semantic-danger);
	
	--color-avatar-status-info: var(--color-semantic-info);
		--color-avatar-status-shared: var(--color-semantic-info);
		--color-avatar-status-finalized: var(--color-semantic-info);
		--color-avatar-status-selected: var(--color-semantic-info);

	/* COLORS - Theme */
	--color-text-base: var(--gray-8);
	--color-text-light-1: var(--gray-6);
	--color-text-dark-1: var(--gray-10);
	--color-text-danger: var(--red-6);

	--color-link: var(--blue-6);
	--color-link-hover: var(--blue-8);

	--color-link-danger: var(--red-6);
	--color-link-danger-hover: var(--red-8);

	--color-background: var(--gray-1);
	--surface-0: var(--gray-1);

	--color-surface: var(--white);
	--surface-1: var(--white);

	--color-surface-raised: var(--gray-0);
	--surface-2: var(--gray-2);

	--color-surface-overlay: hsl(var(--gray-10-hsl) / 40%);
		
	--color-border-base: var(--gray-2);
	--color-border-danger: var(--color-semantic-danger);
	--color-focus-ring: var(--blue-5);

	--border-radius-sm: 2px;
	--border-radius-base: 4px;
	--border-radius-lg: 8px;
	--border-radius-xl: 16px;
	--border-radius-circle: 10e6em;

	--spacer-fluid-3xs: clamp(0.25rem, 0.2315rem + 0.0926vw, 0.3125rem);
	--spacer-fluid-2xs: clamp(0.5rem, 0.463rem + 0.1852vw, 0.625rem);
	--spacer-fluid-xs: clamp(0.75rem, 0.6944rem + 0.2778vw, 0.9375rem);
	--spacer-fluid-s: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
	--spacer-fluid-m: clamp(1.5rem, 1.3889rem + 0.5556vw, 1.875rem);
	--spacer-fluid-l: clamp(2rem, 1.8519rem + 0.7407vw, 2.5rem);
	--spacer-fluid-xl: clamp(3rem, 2.7778rem + 1.1111vw, 3.75rem);
	--spacer-fluid-2xl: clamp(4rem, 3.7037rem + 1.4815vw, 5rem);
	--spacer-fluid-3xl: clamp(6rem, 5.5556rem + 2.2222vw, 7.5rem);

	--spacer-xs: 2px;
  --spacer-1: 4px;
  --spacer-2: 8px;
  --spacer-3: 16px;
  --spacer-4: 24px;
  --spacer-5: 40px;

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem;  /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
  --scrollbar-ff-width: thin;  /* FF-only accepts auto, thin, none */
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);
  --scrollbar-color-hover: rgba(0,0,0,.3);
  --scrollbar-color-active: rgb(0,0,0);
}

voy-tooltip:not(:defined) {
	visibility: hidden;
}
voy-alert * {
	margin: 0;
}

voy-alert *+* {
	margin-block-start: var(--spacer-sm, .5rem);
}

voy-alert[appearance="bold"] a {
	color: inherit;
}
.button {
  --color-button-outline: var(--color-link);
  display: inline-block;
  margin-block-end: 0;
  padding-block: var(--button-padding-block, 6px);
  padding-inline: var(--button-padding-inline, 12px);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-color: var(--color-button-background, var(--white));
  background-image: none;
  border: 1px solid var(--color-button-border, var(--gray-3));
  color: var(--color-button-text);
  font-size: var(--button-font-size, var(--text-size-base));
  font-weight: var(--font-weight-reg);
  line-height: var(--line-height-bootstrap);
  border-radius: var( --button-border-radius, var(--border-radius-base));
}

.button:is(:focus, .focus, :active:focus, .active:focus, .active.focus) {
  outline: 2px solid var(--color-button-outline, var(--color-link));
  outline-offset: 1px;
}

.button:hover,
.button:focus,
.button.focus {
  text-decoration: none;
}

.button:active,
.button.active {
  background-image: none;
}

.button[disabled],
.button.disabled,
.button[disabled]:hover
.button.disabled:hover {
  cursor: not-allowed;
  background-color: var(--gray-2);
  border-color: transparent;
  color: var(--gray-6);
  box-shadow: none;
}

.button[data-size=sm] {
  --button-padding-block: 4px;
  --button-padding-inline: 8px;
  --button-font-size: var(--text-size-small);
  --button-border-radius: var(--border-radius-sm);
}

.button[data-size=lg] {
  --button-padding-block: 8px;
  --button-padding-inline: 16px;
  --button-font-size: var(--text-size-h4);
}

.button[data-type=filter] {
  --button-border-radius: var(--border-radius-circle);
}

.button {
  --color-button-text: var(--color-text-base);
  --color-button-background: #fff;
  --color-button-border: var(--gray-3);
}

.button:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--gray-0);
  --color-button-border: var(--gray-4);
  --color-button-text: var(--color-text-base);
}

.button[data-type=filter] {
  --button-border-radius: var(--border-radius-circle);
}

.button[data-type=primary] {
  --color-button-text: var(--white);
  --color-button-background: var(--color-semantic-info);
  --color-button-border: transparent;
}

.button[data-type=primary]:hover,
.button[data-type=primary]:focus {
  --color-button-background: var(--color-semantic-info-dark-1);
  --color-button-text: var(--white);
}

.button[data-type=primary]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--color-semantic-info-dark-1);
}

.button[data-type=warning] {
  --color-button-text: var(--gray-9);
  --color-button-background: var(--color-semantic-warning);
  --color-button-border: transparent;
}

.button[data-type=warning]:hover,
.button[data-type=warning]:focus {
  --color-button-background: var(--yellow-3);
  --color-button-text: var(--gray-9);
}

.button[data-type=warning]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--yellow-4);
}

.button[data-type=danger] {
  --color-button-text: var(--white);
  --color-button-background: var(--color-semantic-danger);
  --color-button-border: transparent;
}

.button[data-type=danger]:hover,
.button[data-type=danger]:focus {
  --color-button-background: var(--color-semantic-danger-dark-1);
  --color-button-text: var(--white);
}

.button[data-type=danger]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--color-semantic-danger-dark-2);
}

.button[data-type=success] {
  --color-button-text: var(--white);
  --color-button-background: var(--color-semantic-success);
  --color-button-border: transparent;
}

.button[data-type=success]:hover,
.button[data-type=success]:focus {
  --color-button-background: var(--color-semantic-success-dark-1);
  --color-button-text: var(--white);
}

.button[data-type=success]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--color-semantic-success-dark-2);
}

.button[data-type=dark] {
  --color-button-text: var(--white) ;
  --color-button-background: hsl(var(--gray-8-hsl) / .6);
  --color-button-border: transparent;
}

.button[data-type=dark]:hover,
.button[data-type=dark]:focus {
  --color-button-background: hsl(var(--gray-8-hsl) / .7);
  --color-button-text: var(--white);
}

.button[data-type=dark]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: hsl(var(--gray-8-hsl) / .8);
}

.button[data-type="link-padded"] {
  --color-button-text: var(--color-link) ;
  --color-button-background: transparent;
  --color-button-border: transparent;  
}
.button[data-type="link-padded"]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  text-decoration: underline;
  --color-button-text: var(--color-link-hover);
  --color-button-background: transparent;
  --color-button-border: transparent;
}

.button[data-type=primary-flat]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--gray-1);
  --color-button-text: var(--color-link-hover);
}

.button[data-type=danger-flat] {
  --color-button-text: var(--color-semantic-danger) ;
  --color-button-background: transparent;
  --color-button-border: transparent;
}

.button[data-type=danger-flat]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--color-semantic-danger-light-2);
  --color-button-text: var(--color-semantic-danger-dark-1);
}

.button[data-type=link] {
  --color-button-text: var(--color-link) ;
  --color-button-background: transparent;
  --color-button-border: transparent;
  --button-padding-block: 0;
  --button-padding-inline: 0;
}

.button[data-type=link]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  text-decoration: underline;
  --color-button-text: var(--color-link-hover);
  --color-button-background: transparent;
  --color-button-border: transparent;
}

.button[data-type=link-padded][disabled],
.button[data-type=link][disabled] {
  background-color: transparent;
  border-color: transparent;
  color: var(--gray-6);

  &:hover {
    text-decoration: none;
  }
}

.button[data-type=primary-outline] {
  --color-button-text: var(--color-semantic-info) ;
  --color-button-background: var(--white);
  --color-button-border: var(--color-semantic-info);
}

.button[data-type=primary-outline]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--gray-1);
}

.button[data-type=danger-outline] {
  --color-button-text: var(--color-semantic-danger) ;
  --color-button-background: var(--white);
  --color-button-border: var(--color-semantic-danger);
}

.button[data-type=danger-outline]:is(:hover,:focus,:active,.active,:active:focus,:active.focus,.active:hover,.active:focus,.active.focus) {
  --color-button-background: var(--red-0);
}

.button[data-variant=icon] {
  --button-icon-size: 32px;
  height: var(--button-icon-size);
  width: var(--button-icon-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-circle);
  padding: 0;
  transition: all .2s;
  font-size: calc(var(--button-icon-size) / 2);
}

.button[data-variant=icon][data-size=sm] {
  --button-icon-size: 24px;
}

.button[data-variant=icon][data-size=lg] {
  --button-icon-size: 40px;
}

.button[data-variant=icon][data-type=modal] {
  border-color: transparent;
}
:root {
	--accent-color: var(--color-link);
}

body:has(dialog[open]) {
	overflow: hidden;
}

dialog {
	border: 0;
	color: var(--color-text-base);
	padding: 0;
}



dialog::backdrop {
	background-color: rgba(0,0,0,.5);
}

dialog[data-variant=modal] {
	--modal-max-size: 400px;
	width: min(var(--modal-max-size),100% - 20px);
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-md);
}

dialog[data-variant=modal][data-size=sm] {
	--modal-max-size: 400px;
}

dialog[data-variant=modal][data-size=md] {
	--modal-max-size: 600px;
}

dialog[data-variant=modal][data-size=lg] {
	--modal-max-size: 800px;
}

dialog[data-variant=modal][data-size=xl] {
	--modal-max-size: 1200px;
}

.voy-modal-header:not([data-variant=hero]),
.voy-modal-body,
.voy-modal-footer {
	padding: var(--spacer-3);
}

.voy-modal-header:not([data-variant=hero]) {
	display:grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.voy-modal-header {
	background-color: var(--white);
}

.voy-modal-title {
	font-size: var(--text-size-h4);
	color: var(--color-modal-title);
}

dialog:not([data-variant=hero])[data-type=danger] {
	--color-modal-title: var(--color-semantic-danger);
}

dialog:not([data-variant=hero])[data-type=warning] {
	--color-modal-title: var(--yellow-5);
}

dialog:not([data-variant=hero])[data-type=success] {
	--color-modal-title: var(--color-semantic-success);
}

dialog:not([data-variant=hero])[data-type=info] {
	--color-modal-title: var(--color-semantic-info);
}

@media (min-height: 450px) {
	dialog:not([data-scrollmodal]) {
		
		&	.voy-modal-header {
			position: sticky;
			top: 0;
		}
		
		& .voy-modal-footer {
			position: sticky;
			bottom: 0;
		}

	} 
}

.voy-modal-header {
	border-block-end: 1px solid var(--gray-1);
}

.voy-modal-body {
	overflow: auto;
}

.voy-modal-footer {
	border-block-start: 1px solid var(--gray-1);
}

.voy-modal-footer {
	background-color: var(--white);
	text-align: end;
}


/* Hero modal styles */
[data-variant=hero] {
	--color-hero-modal-bg: var(--gray-5);
	--color-hero-modal-gradient: radial-gradient(at bottom, var(--gray-5) 40%, var(--gray-9));
}

dialog[data-type=info] [data-variant=hero] {
	--color-hero-modal-bg: var(--blue-5);
	--color-hero-modal-gradient: radial-gradient(at bottom, var(--blue-5) 40%, var(--blue-9));
}

dialog[data-type=danger] [data-variant=hero]{
	--color-hero-modal-bg: var(--color-semantic-danger);
	--color-hero-modal-gradient: radial-gradient(at bottom, var(--red-5) 40%, var(--red-9));
}

dialog[data-type=success] [data-variant=hero]{
	--color-hero-modal-bg: var(--color-semantic-success);
	--color-hero-modal-gradient: radial-gradient(at bottom, var(--green-5) 40%, var(--green-9));
}

dialog[data-type=warning] [data-variant=hero]{
	--color-hero-modal-bg: var(--color-semantic-warning);
	--color-hero-modal-gradient: radial-gradient(at bottom, var(--yellow-2) 40%, var(--yellow-5));
}

.voy-modal-header[data-variant=hero] {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-2);
	align-items: center;
	justify-content: center;
	padding: var(--spacer-3);
	text-align: center;

	&:before {
		content: '';
		display: block;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		height: 150px;
		margin: 0;
		background-color: var(--color-hero-modal-bg, var(--color-semantic-info));
		background-image: var(--color-hero-modal-gradient);
		clip-path: polygon(0 0, 100% 0, 100% 60px, 0 100px);
	}
}

.voy-modal-header-icon {
	display: grid;
	place-items: center;
	height: 72px;
	width: 72px;
	margin-block-start: var(--spacer-2);
	padding: var(--spacer-2);
	font-size: var(--text-size-d2);
	background-color: var(--color-hero-modal-bg);
	color: #fff;
	border: .25rem solid var(--white, #fff);
	border-radius: var(--border-radius-circle);
	box-shadow: var(--shadow-xs);
}

.voy-modal-header button {
	color: var(--color-text-light-1);
}

:is([data-variant=hero], [data-variant=analytics]) .button[data-variant=icon][data-type=modal] {
	position: absolute;
	inset-inline-end: var(--spacer-3);
	inset-block-start: var(--spacer-3);
	color: var(--color-hero-modal-button, hsl(var(--gray-0-hsl) / 80%));
	background-color: transparent;

	&:hover {
		background-color: hsl(var(--gray-0-hsl) / 10%);
	}
}

.voy-modal-header[data-variant=hero] > * {
	z-index: 1;
}
.voy-input {
	--input-padding: 6px 12px;
	width: 100%;
	padding: var(--input-padding);
	font-size: var(--text-size-base);
	line-height: var(--line-height-bootstrap);
	background-color: var(--color-input-background);
	color: var(--color-text-base);
	background-image: none;
	border: 1px solid var(--color-input-border);
	border-radius: var(--border-radius-base);
	box-shadow: inset 0 1px 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6.5%));
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

	&:is([type=text], [type=password], [type=email], [type=number], select) {
		height: var(--input-height);
	}

	&:focus {
		--shadow-color: green;
		border-color: var(--color-input-border-focus);
		outline: 2px solid var(--color-input-border-focus);
		outline-offset: 1px;
		box-shadow: inset var(--shadow-xs), var(--shadow-sm);
	}

	&:is(::placeholder) {
		color: var(--gray-4);
	}

	&:is([disabled], [readonly]) {
		background-color: var(--color-input-background-disabled);
		cursor: not-allowed;
	}

	&:is(textarea) {
		resize: vertical;
	}
}

.voy-input[data-size=sm] {
	font-size: var(--text-size-small);
	--input-padding: 6px 8px;
	--input-height: 26px;
}

.voy-input[data-size=lg] {
	font-size: var(--text-size-h4);
	--input-height: 41px;
}

fieldset[disabled] .voy-input {
	background-color: var(--color-input-background-disabled);
	cursor: not-allowed;
}

.voy-input-label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: var(--spacer-1);
	font-weight: var(--font-weight-bold);
}

.form-group:has(input[required]) .voy-input-label:after {
	content: '*';
	font-weight: var(--font-weight-reg);
	margin-inline-start: var(--spacer-1);
	color: var(--orange-5);
}
voy-leader {
	display: flex;
	gap: var(--spacer-fluid-3xs);
	align-items: flex-end;
	width: 100%; /* ensures the container fills its parent */
}

voy-leader > *:not(.spacer) {
	max-width: var(--leader-max-width, 75%);
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

voy-leader > .spacer {
	min-width: 1ch;
	flex-grow: 1;
	height: .5em;
	margin-block-end: .125em;
	background-image: radial-gradient(ellipse, var(--gray-4) 0px, var(--gray-4) 1px, transparent 1px);
	background-size: 5px 5px;
	background-position: 0px 100%;
	background-repeat: repeat-x;
}