/* ------------------------------ v2 CSS changes ------------------------------ */

/* ==========================
   Primitives
   ========================== */
:root {
	--Black-0: #000000;
	--White-0: #FFFFFF;
	--Purple-50: #F0EBFF;
	--Purple-75: #CAB4FD;
	--Purple-100: #E2D6FF;
	--Purple-150: #D3C2FF;
	--Purple-200: #C5ADFF;
	--Purple-250: #B799FF;
	--Purple-300: #A885FF;
	--Purple-350: #9970FF;
	--Purple-400: #885CFF;
	--Purple-450: #7D47FF;
	--Purple-500: #6E33FF;
	--Purple-550: #632EE6;
	--Purple-600: #5829CC;
	--Purple-650: #4D24B3;
	--Purple-700: #421F99;
	--Purple-750: #371A80;
	--Purple-800: #2C1466;
	--Purple-850: #210F4D;
	--Purple-900: #160A33;
	--Purple-950: #0B051A;
	--Grey-50: #F8F8F9;
	--Grey-75: #F1F1F1;
	--Grey-100: #F0F1F2;
	--Grey-150: #E9EAEC;
	--Grey-200: #E1E3E5;
	--Grey-250: #DADCDF;
	--Grey-300: #D3D4D9;
	--Grey-350: #CBCDD2;
	--Grey-400: #C4C6CC;
	--Grey-450: #BCBFC5;
	--Grey-500: #B5B8BF;
	--Grey-550: #A3A6AC;
	--Grey-600: #919399;
	--Grey-650: #7F8186;
	--Grey-700: #6D6E73;
	--Grey-750: #5A5C60;
	--Grey-800: #484A4C;
	--Grey-850: #363739;
	--Grey-900: #242526;
	--Grey-950: #121213;
	--Warm-Grey-50: #F4F4F2;
	--Warm-Grey-100: #E9E9E6;
	--Warm-Grey-150: #DEDFD9;
	--Warm-Grey-200: #D3D4CC;
	--Warm-Grey-250: #C8C9BF;
	--Warm-Grey-300: #BDBEB3;
	--Warm-Grey-350: #B2B3A6;
	--Warm-Grey-400: #A7A999;
	--Warm-Grey-450: #9C9E8D;
	--Warm-Grey-500: #919380;
	--Warm-Grey-550: #828473;
	--Warm-Grey-600: #747666;
	--Warm-Grey-650: #66675A;
	--Warm-Grey-700: #57584D;
	--Warm-Grey-750: #484940;
	--Warm-Grey-800: #3A3B33;
	--Warm-Grey-850: #2C2C26;
	--Warm-Grey-900: #1D1D1A;
	--Warm-Grey-950: #0F0F0D;
	--Pink-50: #FFF1FF;
	--Pink-100: #FFE2FF;
	--Pink-150: #FFD4FF;
	--Pink-200: #FFC5FF;
	--Pink-250: #FFB7FF;
	--Pink-300: #FFA8FF;
	--Pink-350: #FF9AFF;
	--Pink-400: #FF8BFF;
	--Pink-450: #FF7DFF;
	--Pink-500: #FF6EFF;
	--Pink-550: #E663E6;
	--Pink-600: #CC58CC;
	--Pink-650: #B34DB3;
	--Pink-700: #994299;
	--Pink-750: #803780;
	--Pink-800: #662C66;
	--Pink-850: #4D214D;
	--Pink-900: #331633;
	--Pink-950: #190B19;
	--Bright-Yellow-50: #FCFEEC;
	--Bright-Yellow-100: #F9FEDA;
	--Bright-Yellow-150: #F6FDC7;
	--Bright-Yellow-200: #F3FCB5;
	--Bright-Yellow-250: #F0FCA2;
	--Bright-Yellow-300: #EDFB8F;
	--Bright-Yellow-350: #EAFA7D;
	--Bright-Yellow-400: #E7F96A;
	--Bright-Yellow-450: #E4F958;
	--Bright-Yellow-500: #E1F845;
	--Bright-Yellow-550: #CBDF3E;
	--Bright-Yellow-600: #B4C637;
	--Bright-Yellow-650: #9EAE30;
	--Bright-Yellow-700: #879529;
	--Bright-Yellow-750: #717C23;
	--Bright-Yellow-800: #5A631C;
	--Bright-Yellow-850: #444A15;
	--Bright-Yellow-900: #2D320E;
	--Bright-Yellow-950: #161907;
	--Green-50: #EFFBEE;
	--Green-75: #AEF3D0;
	--Green-100: #E0F7DE;
	--Green-150: #D0F2CD;
	--Green-200: #C0EEBC;
	--Green-250: #B0EAAB;
	--Green-300: #A1E69B;
	--Green-350: #91E28A;
	--Green-400: #81DD79;
	--Green-450: #72D969;
	--Green-500: #62D558;
	--Green-550: #58C04F;
	--Green-600: #4EAA46;
	--Green-650: #45953E;
	--Green-700: #3B8035;
	--Green-750: #316A2C;
	--Green-800: #275523;
	--Green-850: #1D401A;
	--Green-900: #142B12;
	--Green-950: #0A1509;
	--Yellow-50: #FFF8E5;
	--Yellow-75: #F9EEAA;
	--Yellow-100: #FFF0CC;
	--Yellow-150: #FFE9B2;
	--Yellow-200: #FFE199;
	--Yellow-250: #FFDA80;
	--Yellow-300: #FFD366;
	--Yellow-350: #FFCB4C;
	--Yellow-400: #FFC433;
	--Yellow-450: #FFBC19;
	--Yellow-500: #FFB500;
	--Yellow-550: #E6A300;
	--Yellow-600: #CC9100;
	--Yellow-650: #B37F00;
	--Yellow-700: #996D00;
	--Yellow-750: #805A00;
	--Yellow-800: #664800;
	--Yellow-850: #4D3600;
	--Yellow-900: #332400;
	--Yellow-950: #1A1200;
	--Orange-50: #FFEFE5;
	--Orange-100: #FFDECC;
	--Orange-150: #FFCEB2;
	--Orange-200: #FFBE99;
	--Orange-250: #FFAE80;
	--Orange-300: #FF9D66;
	--Orange-350: #FF8D4C;
	--Orange-400: #FF7D33;
	--Orange-450: #FF6C19;
	--Orange-500: #FF5C00;
	--Orange-550: #E65300;
	--Orange-600: #CC4A00;
	--Orange-650: #B34000;
	--Orange-700: #993700;
	--Orange-750: #802E00;
	--Orange-800: #662500;
	--Orange-850: #4D1C00;
	--Orange-900: #331200;
	--Orange-950: #1A0900;
	--Red-50: #FFEEEE;
	--Red-75: #FFAABF;
	--Red-100: #FFDCDC;
	--Red-150: #FFCBCB;
	--Red-200: #FFB9B9;
	--Red-250: #FFA8A8;
	--Red-300: #FF9697;
	--Red-350: #FF8585;
	--Red-400: #FF7374;
	--Red-450: #FF6262;
	--Red-500: #FF5051;
	--Red-550: #E64849;
	--Red-600: #CC4041;
	--Red-650: #B33839;
	--Red-700: #993031;
	--Red-750: #802829;
	--Red-800: #662020;
	--Red-850: #4D1818;
	--Red-900: #331010;
	--Red-950: #190808;
	--Blue-75: #AAD4FF;
	--Dark-Blue: #0B2B44;
	--Neutral-1000: #E4E8F3;
	--Black: #0F1427;
	--LightBlueGrey: #E1E8ED;
	--DarkBlueGrey: #657686;
	/* =========================
   Spacing
   ========================= */
	--spacing-01: 0.25rem; /* 4px  */
	--spacing-02: 0.5rem; /* 8px  */
	--spacing-03: 0.75rem; /* 12px */
	--spacing-04: 1rem; /* 16px */
	--spacing-05: 1.25rem; /* 20px */
	--spacing-06: 1.5rem; /* 24px */
	--spacing-07: 1.75rem; /* 28px */
	--spacing-08: 2rem; /* 32px */
	--spacing-09: 2.25rem; /* 36px */
	--spacing-10: 2.5rem; /* 40px */
	--spacing-11: 3rem; /* 48px */
	--spacing-12: 3.5rem; /* 56px */
	--spacing-13: 4rem; /* 64px */
	--spacing-14: 6rem; /* 96px */
}

/* =========================
   Semantics
   ========================= */

:root {
	--background-page: var(--Grey-50);
	--background-draw: var(--White-0);
	--background-footer: var(--Grey-950);
	--os-foundation: #05051E;
	--background-container: var(--White-0);
	--background-input-default: var(--White-0);
	--background-input-disabled: var(--Grey-100);
	--background-input-error: var(--Red-50);
	--background-support-success: var(--Green-100);
	--background-support-warning: var(--Orange-100);
	--background-support-error: var(--Red-100);
	--background-support-messaging: var(--Yellow-100);
	--background-support-information: var(--Purple-100);
	--background-support-dark: var(--Black);
	--background-support-grey: var(--LightBlueGrey);
	--border-bound: var(--Grey-600);
	--border-focus: var(--Purple-500);
	--border-hover: var(--Purple-550);
	--border-pressed: var(--Purple-600);
	--border-disabled: var(--Grey-300);
	--border-divider: var(--Grey-300);
	--input-default: var(--Grey-600);
	--input-pressed: var(--Purple-500);
	--input-disabled: var(--Grey-300);
	--input-error: var(--Red-600);
	--support-success: var(--Green-800);
	--support-warning: var(--Orange-800);
	--support-error: var(--Red-800);
	--support-messaging: var(--Yellow-800);
	--text-interactive: var(--Purple-500);
	--text-active: var(--Purple-400);
	--text-primary: var(--Grey-950);
	--text-secondary: var(--Grey-800);
	--text-helper: var(--Grey-700);
	--text-disabled: var(--Grey-500);
	--text-error: var(--Red-600);
	--text-invert: var(--White-0);
	--text-grey: var(--DarkBlueGrey);
	--text-black: var(--Black);
	--text-white: var(--White-0);
	--button-black-surface-default: var(--Black-0);
	--button-black-surface-hover: var(--Purple-500);
	--button-black-surface-pressed: var(--Purple-600);
	--button-primary-surface-default: var(--Purple-500);
	--button-primary-surface-hover: var(--Purple-550);
	--button-primary-surface-pressed: var(--Purple-600);
	--button-primary-text: var(--text-invert);
	--button-black-text: var(--text-white);
	--button-tertiary-surface-default: var(--Grey-150);
	--button-tertiary-surface-hover: var(--Grey-200);
	--button-tertiary-surface-pressed: var(--Grey-250);
	--button-tertiary-text: var(--text-primary);
	--text-body: #555;
	--text-light: #697D95;
}

:root {
	--border-radius-pill: 50rem;
	--color-info-500: #007FFF;
	--color-error-500: #FF003F;
	--shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.025);
	--shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.09);
	--font-weight-medium: 500;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--line-height-xs: 1rem;
	--line-height-sm: 1.25rem;
	--font-size-m: 1rem;
	--line-height-m: 1.5rem;
}

/*Select Dropdown classes*/
:root {
	--select-input-border-default: #D0D5DD; /* Close to Grey-300 */
	--select-input-border-hover: #98A2B3; /* Close to Grey-550 */
	--select-input-text-secondary: #667085; /* Close to Grey-700 */
	--select-dropdown-shadow-custom: 0px 2px 4px rgba(22, 10, 51, 0.2);
	/* Remaining SelectButton-specific tokens that have no direct equivalents */
	--Borders-dark: #0000001a;
	--Surface-light: #00000006;
	--Icon-Icon-secondary: #00000066;
	--spacing-02-5: 0.625rem; /* 10px */
	--surface-hover:#F6F6F6; /*Disabled background for select items*/
}

/* =========================
   Utility classes
   ========================= */
/* Backgrounds */
.bg-page {
	background-color: var(--background-page);
}

.bg-drawer {
	background-color: var(--background-drawer);
}

.bg-footer {
	background-color: var(--background-footer);
}

.bg-container {
	background-color: var(--background-container);
}

.bg-input-default {
	background-color: var(--background-input-default);
}

.bg-input-disabled {
	background-color: var(--background-input-disabled);
}

.bg-input-error {
	background-color: var(--background-input-error);
}

.bg-support-success {
	background-color: var(--background-support-success);
}

.bg-support-warning {
	background-color: var(--background-support-warning);
}

.bg-support-error {
	background-color: var(--background-support-error);
}

.bg-support-messaging {
	background-color: var(--background-support-messaging);
}

.bg-support-information {
	background-color: var(--background-support-information);
}

.bg-support-success {
	background-color: var(--support-success);
}

.bg-support-warning {
	background-color: var(--support-warning);
}

.bg-support-error {
	background-color: var(--support-error);
}

.bg-support-messaging {
	background-color: var(--support-messaging);
}

/* Borders */

.border-bound {
	border: 1px solid var(--border-bound);
}

.border-focus {
	border: 1px solid var(--border-focus);
}

.border-hover {
	border: 1px solid var(--border-hover);
}

.border-pressed {
	border: 1px solid var(--border-pressed);
}

.border-disabled {
	border: 1px solid var(--border-disabled);
}

.border-divider {
	border-top: 1px solid var(--border-divider);
}

/* Inputs */

.input {
	background: var(--background-input-default);
	color: var(--input-default);
	border: 1px solid var(--border-bound);
}

	.input:focus {
		outline: none;
		border-color: var(--border-focus);
	}

	.input:hover {
		border-color: var(--border-hover);
	}

	.input:active {
		border-color: var(--border-pressed);
	}

	.input[disabled], .input.disabled {
		background: var(--background-input-disabled);
		color: var(--input-disabled);
		border-color: var(--border-disabled);
	}

	.input.error {
		background: var(--background-input-error);
		color: var(--input-error);
		border-color: var(--input-error);
	}

	.form-control:disabled {
		background-color: #F0F1F2!important;
	}
/* Text */
.text-interactive {
	color: var(--text-interactive);
}

.text-active {
	color: var(--text-active);
}

.text-primary {
	color: var(--text-primary) !important;
}

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

.text-helper {
	color: var(--text-helper);
}

.text-disabled {
	color: var(--text-disabled);
}

.text-error {
	color: var(--text-error) !important;
}

.text-invert {
	color: var(--text-invert);
}

/* Buttons */

.btn-black {
	background-color: var(--button-black-surface-default);
	color: var(--button-black-text);
	border: 1px solid transparent;
}

	.btn-black:hover {
		background-color: var(--button-black-surface-hover);
		color: var(--button-black-text);
	}

	.btn-black:active {
		background-color: var(--button-black-surface-pressed);
		color: var(--button-black-text);
	}

.btn-primary {
	background-color: var(--button-primary-surface-default);
	color: var(--button-primary-text);
	border: 1px solid transparent;
}

	.btn-primary:hover {
		background-color: var(--button-primary-surface-hover);
	}

	.btn-primary:active {
		background-color: var(--button-primary-surface-pressed);
	}

.btn-tertiary {
	background-color: var(--button-tertiary-surface-default);
	color: var(--button-tertiary-text);
	border: 1px solid var(--Grey-300);
}

	.btn-tertiary:hover {
		background-color: var(--button-tertiary-surface-hover);
	}

	.btn-tertiary:active {
		background-color: var(--button-tertiary-surface-pressed);
	}

/* Typography */

h1.worka-heading {
	font-size: 2.25rem;
	line-height: 2.75rem;
	letter-spacing: -0.0125rem;
	font-weight: 400;
}

h2.worka-heading {
	font-size: 2rem;
	line-height: 2.5rem;
	letter-spacing: -0.01rem;
	font-weight: 400;
}

h3.worka-heading {
	font-size: 1.75rem;
	line-height: 2.25rem;
	letter-spacing: -0.0125rem;
	font-weight: 350;
}

h4.worka-heading {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: -0.0115rem;
	font-weight: 400;
}

p.worka-subtitle-1 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	letter-spacing: -0.0115rem;
	font-weight: 400;
}

p.worka-subtitle-2 {
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.0115rem;
	font-weight: 700;
}

p.worka-subtitle-3 {
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.0115rem;
	font-weight: 400;
}

.worka-body-1 {
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.005rem;
	font-weight: 400;
}

.worka-body-2 {
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: -0.0025rem;
	font-weight: 400;
}

a.worka-link-1 {
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.005rem;
	font-weight: 400;
}

a.worka-link-2 {
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: -0.005rem;
	font-weight: 500;
}

.worka-caption {
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: -0.0115rem;
	font-weight: 400;
}

.worka-overline {
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.0115rem;
	font-weight: 400;
}

/* ------------------------------ v2 CSS changes ------------------------------ */

:root {
	--title-text-color: #121213;
	--section-bg-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

.card {
	position: relative;
	z-index: 1000;
}

:root {
	--active-badge: #ECFDF5;
	--active-badge-text: #064E3B;
	--invited-badge: #FEFCE8;
	--invited-badge-text: #713F12;
	--invite-expired-badge: #EFF6FF;
	--invite-expired-badge-text: #1E3A8A;
	--locked-badge: #F4F4F4;
	--locked-badge-text: #1E3A8A;
	--header-bg-color: #FCFCFD;
	--header-border-color: #EAECF0;
	--title-text-color: #121213;
	--section-bg-color: #FFFFFF;
	--primary-bg-color: #6E33FF;
	--primary-text-bg-color: #FFFFFF;
	--success-bg-color: #E0F7DE;
	--success-text-bg-color: #036700;
	--danger-bg-color: #FFDCDC;
	--danger-text-bg-color: #802E00;
	--warning-bg-color: #FFDECC;
	--warning-text-bg-color: #662500;
	--info-bg-color: #E2D6FF;
	--info-text-bg-color: #2C1466;
	--messaging-bg-color: #FFF0CC;
	--messaging-text-color: #121213;
	--white-bg-color: #FFFFFF;
	--white-bg-text-color: #121213;
	--worka-purple: #6E33FF;
	--blue-bg-color: #371A80;
	--blue-bg-text-color: #FFFFFF;
}


/* global settings for ALL pages */
body, html {
	font-family: 'Arbeit', sans-serif;
	color: #191C1D;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: -0.012rem;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/*Scrollbars do not affect the positioning of 100vw so this removes the repositioning when a scrollbar is added or removed:*/
body {
	width: 100vw;
	overflow-x: hidden;
}

/* Safari 7.1+ */
_::-webkit-full-page-media, html {
	scroll-behavior: unset !important;
}

body.cursorDefault, body.cursorDefault * {
	cursor: default !important;
}

body.cursorProgress, body.cursorProgress * {
	cursor: progress !important;
}

body.cursorWait, body.cursorWait * {
	cursor: wait !important;
}

/* Worka - Expressive Type Styles - desktop */
.text-expressive {
	font-family: Worka-auth, Worka, sans-serif !important;
}

/* Background colours 
-------------------------------------------------- */

.bg-primary {
	color: var(--primary-text-bg-color) !important;
	background-color: var(--primary-bg-color) !important;
}

.bg-success {
	color: var(--success-text-bg-color) !important;
	background-color: var(--success-bg-color) !important;
}

.bg-danger {
	color: var(--danger-text-bg-color) !important;
	background-color: var(--danger-bg-color) !important;
}

.bg-warning {
	color: var(--warning-text-bg-color) !important;
	background-color: var(--warning-bg-color) !important;
}

.bg-info {
	color: var(--info-text-bg-color) !important;
	background-color: var(--info-bg-color) !important;
}

.bg-white {
	color: var(--white-bg-text-color);
	background-color: var(--white-bg-color);
}

.bg-messaging {
	color: var(--messaging-text-color);
	background-color: var(--messaging-bg-color);
}

.bg-blue {
	color: var(--blue-bg-text-color);
	background-color: var(--blue-bg-color);
}

.faux-main {
	background-color: #F8F8F9;
	flex: 1;
	padding-top: 4rem;
}

.faux-card {
	background-color: #FFF;
	padding: 2rem;
	border-radius: 1rem; /* Figma Home > Workplace Details 16px */
	margin-bottom: 3.5rem;
}

.faux-card-1 {
	background-color: #FFF;
	padding: 1.5rem; /* figma 24px */
	border-radius: 1.25rem; /* Figma Manage Users > Edit Users - PMS Integrations 20px */
}

.faux-card-2 {
	background-color: #FFF;
	padding: 1.5rem; /* 24px */
	border-radius: 1.5rem; /* Figma Billing 24px */
}

.faux-card-3 {
	background-color: #FFF;
	padding: 1.5rem;
	border-radius: 2rem;
}

.shadow {
	/* shadow */
	box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.09);
}


/* obsolete, deprecated, prefer faux-card */
.worka-container {
	background-color: #FFF;
	padding: 4rem;
	border-radius: 2rem;
	margin: 4rem;
}

.fw-lightest {
	font-weight: 400;
}

.align-logo {
	max-height: 74px !important;
	margin: auto 0 !important;
}

/* Additional font sizes */
.fs-6half {
	font-size: 0.875rem !important;
}

.fs-7 {
	font-size: 0.75rem !important;
}

.fs-8 {
	font-size: 0.7rem !important;
}

.fs-9 {
	font-size: 0.65rem !important;
}

.fs-10 {
	font-size: 0.6rem !important;
}

.fs-11 {
	font-size: 0.55rem !important;
}

.fs-12 {
	font-size: 0.5rem !important;
}

.btn-lg .fs-7 {
	font-size: 0.75rem !important;
}

.btn-lg .fs-8 {
	font-size: 0.7rem !important;
}

.card-header .fs-7 {
	font-size: 0.75rem !important;
}

.card-body .fs-8 {
	font-size: 0.7rem !important;
}

.form-control::placeholder {
	font-size: 0.85rem !important;
	color:#a9a9a9;
}

/* additional margins */

.mb-4_5 {
	margin-bottom: 2rem;
}

/* Company Onboarding */
.country-flag {
	width: 20px;
	height: auto;
	margin-right: 8px;
}

.country-flags {
	width: 20px;
	height: 15px;
	margin-right: 5px
}

.custom-rounded-card {
	border-radius: 1.5rem !important;
}

.custom-rounded-card-l {
	border-radius: 2rem !important;
}

.custom-rounded-card-l-left {
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
}

.custom-rounded-card-l-right {
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
}

.custom-rounded-card-s {
	border-radius: 0.7rem !important;
}

.bg-neutral-gray-6 {
	background-color: #F4F4F4 !important
}

.custom-hr {
	border-top: 1px solid #D1D5DB;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.custom-btn-md-rounded-pill {
	padding: 0.5rem 4rem;
	font-size: 0.8rem;
	border-radius: 50rem;
}

.custom-btn-lg-rounded-pill {
	padding: 1rem 6.8rem;
	font-size: 0.8rem;
	border-radius: 50rem;
}

a, .btn-link {
	color: #006bb7;
}

.link-black, .link-black:visited {
	color: black !important;
}

.full-width-hr {
	border-top: 2px solid #D1D5DB;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

.bg-custom-secondary {
	background-color: #F3F4F6 !important;
}

.text-info {
	color: var(--info-text-bg-color) !important;
}

.text-danger {
	color: #CC4041 !important;
}

.text-muted {
	color: #484A4C !important;
}

.text-secondary {
	color: #484A4C !important;
}

.text-color-white {
	color: #fff !important;
}

.bg-custom-tertiary {
	background-color: #CDEECC !important;
}

.text-color-tertiary {
	color: #4D4F53 !important;
}

.validation-error {
	border: 1px solid red !important;
}

.btn-primary {
	color: #fff;
	background-color: #6e33ff;
	border-color: #6e33ff;
}

.btn-white-purple-border {
	color: black !important;
	background-color: #fff !important;
	border-color: #6E33FF !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--Purple-500);
	outline: none;
}

.spinner-border {
	-webkit-animation: 1s linear infinite spinner-border !important;
	animation: 1s linear infinite spinner-border !important;
}

.spinner-border-sm {
	border-width: .15em;
}

.spinner-border-xs {
	width: 0.75rem;
	height: 0.75rem;
	border-width: .1em !important;
}

.content {
	padding-top: 1.1rem;
}

h1:focus {
	outline: none;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

.darker-border-
.form-check-input {
	border-color: #929292;
}

/* Bootstrap Overwrite */

.modal-footer > .btn:not(:first-child) {
	margin-left: 0.75rem !important;
}

.modal-backdrop.show {
	opacity: 0.25 !important;
	z-index:-1 !important;
}

.workplace-modal {
	background-color: rgba(18,18,19,0.75) !important;
}


#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.mt-25 {
	margin-top: .75rem !important
}

.mt-45 {
	margin-top: 2.25rem;
}

a {
	color: var(--Dark-Blue, #0B2B44);
}

.pt-45 {
	padding-top: 2.25rem;
}

.pb-60p {
    padding-bottom: 60px !important;
}
/* Navigation Bar 
-------------------------------------------------- */

div#popup-NavPartnerSelector.rz-dropdown-panel.rz-popup {
	transform: translateY(0px);
	border-radius: 1rem;
}

#popup-NavPartnerSelector .rz-dropdown-item.rz-state-highlight {
	color: black;
	background-color: #E5E7EB !important
}

#popup-NavPartnerSelector .rz-dropdown-item {
	padding: 1.25rem 0.625rem !important
}

/* Operations */
.dropdown-menu-operations {
	min-width: 245px;
}

.navbar-nav a.nav-link {
	position: relative;
	color: black;
	display: inline-block;
}

.partner-select-container {
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.top-nav-settings-cog {
	height: 20px;
	width: auto;
}

a.nav-link:not(.active) {
	color: black !important;
}

.navbar-nav a.nav-link.active {
	color: #6E33FF !important;
}

.dropdown-menu-profile, .dropdown-menu-operations, .dropdown-menu-settings {
	margin-top: 2rem;
}

.menu-container-row {
	border-bottom: 2px solid #D3D4D9;
}

.mobile-menu-container {
	background-color: white;
}

@media (max-width:767px) {
	.dropdown-menu-operations, .dropdown-menu-profile, .dropdown-menu-settings {
		box-shadow: none !important;
		margin: 0 !important;
	}

	#BookingsNavLink, #ProfileNavLink, #LogOutNavLink, #BillingNavLink, #PaymentsNavLink, #ManageUsersNavLink, #IntegrationsNavLink {
		justify-content: center !important;
	}

	.profile-icon {
		width: 50px !important;
		height: 50px !important;
		margin-left: 20px;
	}

	.top-nav-settings-cog {
		height: 50px;
		width: auto;
	}
	
	.nav-item {
		padding: 10px;
		margin: 0 !important;
	}

	.navbar-collapse {
		background-color: white;
		width: 100vw;
		position: absolute;
		top: 80px;
		left: -58px;
		padding: 0 20px 20px 20px;
		overflow: hidden;
		box-shadow: 0px 18px 29px -18px #333;
	}

	a.nav-link.active::after {
		content: '';
		display: none;
	}

	a.nav-link:not(.active)::after {
		content: '';
		display: none;
	}

	a.nav-link.active::after {
		content: '';
		display: none;
	}

	.partner-select-container {
		display: block;
		text-align: center;
		padding: 20px 0;
	}

		.partner-select-container form {
			justify-content: center !important;
		}
}

.container-fluid {
	padding: 0;
}

@media (min-width: 1704px) {
	.container {
		max-width: 1536px;
	}
}

.dropdown-menu[data-bs-popper] {
	margin-top: 1.6rem !important;
}

a.nav-link.active::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: #6E33FF;
	position: absolute;
	bottom: -28px;
	left: 0;
	opacity: 1;
}

a.nav-link:not(.active)::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: #6E33FF;
	position: absolute;
	bottom: -28px;
	left: 0;
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.3s ease-in-out;
}

.nav-link.profile-navlink::after {
	bottom: -26px !important;
}

.nav-link.settings-navlink::after {
	bottom: -32px !important;
}

a.settings-dropdown-link::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: #6E33FF;
	position: absolute;
	bottom: -29px;
	left: 0;
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.3s ease-in-out;
}

a.profile-dropdown-link::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: #6E33FF;
	position: absolute;
	bottom: -23px;
	left: 0;
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.3s ease-in-out;
}

a.nav-link:hover::after {
	opacity: 1;
}

a.dropdown-item {
	background-color: transparent !important;
}

	a.dropdown-item.active {
		background-color: #E9EAEC !important;
	}

.navbar {
	height: 80px;
	display: flex;
	align-items: center;
	z-index: 3;
}

.navbar-brand {
	height: auto;
	padding-top: 0;
	padding-bottom: 0;
	align-items: center;
	display: flex;
}

.navbar-nav .nav-link {
	color: #000;
	line-height: 1.5;
	padding-top: 0;
	padding-bottom: 0;
	align-items: center !important;
	justify-content: center !important;
	display: flex !important;
}

.navbar .dropdown-menu {
	top: 100%;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
	transform: scaleX(1);
}

.navbar--newBadge {
	background-color: #CDEECC;
	border: 1px solid #036700;
	color: #036700 !important;
	margin-left: 0.5rem;
	font-size: 9.857px !important;
	border-radius: 6.571px !important;
	padding: 4.929px 11px !important;
}

/* navbar chevron */
.nav-item.dropdown:hover .fas {
	transform: rotate(180deg);
	transition: transform 0.3s;
}

.nav-link .fas {
	transition: transform 0.3s;
	margin-left: 5px;
}

.dropdown-menu {
	border-radius: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border: none;
}

.dropdown-item {
	color: black;
	padding: 0.75rem 1.5rem;
	background: #FFF;
	display: flex;
	align-items: center;
	height: 100%;
}

.dropdown-toggle::after {
	border-top: none;
}

.dropdown-item:focus, .dropdown-item:hover {
	background-color: #E5E7EB;
}

.partner-switch-control {
	width: 300px;
	height: 55px;
	border-radius: 30px;
	background-color: transparent;
	box-shadow: 0 0 1px #000;
}

@media (min-width: 992px) {
	.partner-select-dropdown {
		width: 300px !important;
	}
}

@media (min-width:768px) and (max-width: 992px) {
	.partner-select-container {
		width: 170px !important;
		display: block;
	}
}

.partner-select-dropdown {
	width: 75%;
	height: 55px !important;
	border-radius: 30px !important;
	background-color: transparent !important;
	box-shadow: 0 0 1px #000 !important;
}

/* Drop shadow for Drop down Panels */
ul.dropdown-menu.dropdown-menu-operations.show {
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.09);
}

ul.dropdown-menu.dropdown-menu-end.show {
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.09);
}

.settings-icon {
	margin-top: 6px;
}

.menu-icon {
	margin-right: 0.5rem;
}

.profile-icon {
	width: 32px;
	height: 32px;
	background-color: #2C1466;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 5px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-top: 4px solid \9;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.dropdown-toggle[aria-expanded="false"] .dropdown-transform {
	transition: transform 0.3s ease;
}

.dropdown-toggle[aria-expanded="true"] .dropdown-transform {
	transition: transform 0.3s ease;
	transform: rotate(180deg);
}

.mb-45 {
	margin-bottom: 2.25rem;
}

/* Tables */
table.worka-table th {
	height: 2.5rem;
	padding: 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem; /* 142.857% */
	letter-spacing: -0.002rem;
	background-color: #FFF;
	border-bottom: none;
}

.col-title-text{
	font-weight:bold;
}

table.worka-table tbody tr:nth-last-child(1 of :not(:empty)) {
	border-bottom: transparent !important;
}

table.worka-table td {
	font-size: 0.875rem;
	line-height: 1.25rem; /* 142.857% */
	letter-spacing: -0.002rem;
	padding: 0.5rem 1.5rem;
	vertical-align: middle;
	border-bottom: none;
}

.workplaces-table thead tr {
	height: 40px !important;
}

.workplaces-table thead th {
	padding: 0.5rem 1.5rem !important;
}

.workplaces-table body tr {
	height: 56px !important;
}

.workplaces-table tbody tr td:first-child {
	width: 30%;
}

.workplaces-table tbody tr td:nth-child(2) {
	width: 60%;
}

.worka-table tr[aria-rowindex] {
	border-top-style: solid;
	border-top-width: 1px;
}

.all-borders {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.worka-table td:empty {
	display: none !important;
}

p.worka-table-page-range {
	font-weight: 400;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.25rem; /* 142.857% */
	letter-spacing: -0.002rem;
}

.worka-table :is(th, td) {
	vertical-align: middle;
}

.worka-table td.select-col {
	padding: 0 !important;
	width: 48px;
}

.worka-table .select-col-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
}

.worka-table .select-col-wrap .form-check-input {
	margin: 0;
}

.worka-table tbody tr:has(.row-select:checked),
.worka-table tbody tr:has(.row-select:checked) > td {
	background-color: rgba(0, 127, 255, 0.3) !important;
}

.worka-table.table-hover tbody tr:has(.row-select:checked):hover > * {
	background-color: rgba(0, 127, 255, 0.3) !important;
}

.worka-table tbody tr:not(:has(.row-select:checked)):hover > * {
	background-color: rgba(0, 127, 255, 0.10) !important;
}

.worka-table tbody tr:has(.row-select:checked) > *,
.worka-table tbody tr:has(.row-select:checked):hover > * {
	background-color: rgba(0, 127, 255, 0.30) !important;
}

.avatar-group {
	display: flex;
	align-items: center;
}

	.avatar-group .avatar {
		width: 24px;
		height: 24px;
		border: 2px solid #fff;
		margin-left: -10px;
		z-index: 1;
		object-fit: cover;
	}

		.avatar-group .avatar:first-child {
			margin-left: 0;
		}

/* Badges */
.badge {
	padding: 0.6rem;
	font-weight: 500;
}

	.badge.bg-active {
		background-color: var(--active-badge);
		color: var(--active-badge-text);
	}

	.badge.bg-invited {
		background-color: var(--invited-badge);
		color: var(--invited-badge-text);
	}

	.badge.bg-invited-expired {
		background-color: var(--invite-expired-badge);
		color: var(--invite-expired-badge-text);
	}

	.badge.bg-locked {
		background-color: var(--locked-badge);
		color: var(--locked-badge-text);
	}

/* Worka Page Elements */

div.worka-page-section {
	background-color: var(--section-bg-color);
	border-radius: 1.5rem;
	padding: 1.5rem;
}

.worka-page-section h2.worka-title {
	color: var(--title-text-color);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: -0.017rem;
}

.worka-page-section p.worka-sub-title {
	color: var(--title-text-color);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: -0.005rem;
}

/* wizard grid */
.WizardPageTemplate {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"content"
		"footer";
	min-height: 100vh;
	min-width: 0;
	max-height: 100vh;
	width: 100%;
}

.WizardFormFooter {
	grid-area: footer;
	padding: 1.5rem 5.25rem;
	vertical-align: middle;
	background-color: white;
	color: black;
	min-height: 0;
	min-width: 0;
}

.wizard-form-footer-container {
	border-top: 1px solid #D3D4D9;
}

.wizard-form-footer-content {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	background-color: white;
	color: black;
	min-height: 0;
	min-width: 0;
}

.WizardFormHeader {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: header;
	padding: 1.5rem 5.25rem;
	vertical-align: middle;
	background-color: white;
	color: black;
	min-height: 0;
	min-width: 0;
}

.wizard-form-header-content {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	background-color: white;
	color: black;
	min-height: 0;
	min-width: 0;
}

.WizardFormHeaderContent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 0;
	min-width: 0;
}

.EditWorkspaceContent {
	grid-area: content;
	overflow-y: auto;
	padding: 3.5rem 5.25rem; /* figma 56px 84px */
	background-color: #F8F8F9; /* figma background: var(--Semantics-Backgrounds-background-surface, #F8F8F9); */
	color: black;
	min-height: 0;
	min-width: 0;
}

.required::after {
	content: "*";
	color: #FF5051;
}

.make-live-toggle {
	height: 2rem !important;
	width: 3rem !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.bg-grey {
	background-color: #F8F8F9;
}

.textbox-label {
	font-size: 0.875rem !important;
}

.text-input {
	height: 3rem !important;
	border-radius: 8px !important;
}

hr.form-divider {
	margin: 2.5rem 0;
}

hr {
	color: #D3D4D9;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
	cursor: not-allowed;
}

#components-reconnect-modal, #blazor-error-ui {
	z-index: 9999999999999 !important;
}

.speech-bubble {
	position: relative;
	background: #FFF;
	color: #333;
	border-radius: 8px;
	padding: 10px 20px;
	width: 75%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
	font-weight: 700;
	transform: translateX(-50%);
	left: 50%;
}

.bubble-tail {
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #FFF transparent transparent transparent;
}

.bullet-points {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.bullet-points li {
		position: relative;
		padding-left: 36px;
		margin-bottom: 10px;
	}

.tick-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background-image: url('../img//check-icon-purple.svg');
	background-size: cover;
}

@media (max-width: 100px) {
	.bullet-points li {
		padding-left: 0;
		margin: 0;
		text-indent: 36px;
	}
}

a.popover_link {
	color: white !important;
}

div.separator {
	border-bottom: 1px solid #D3D4D9;
	margin: 2.5rem 0.2rem;
}

.justify-child-content-end > fieldset > div, .justify-child-content-end > div {
	justify-content: flex-end !important;
}

.dropdown-item.item-round:hover {
	background-color: #E9EAEC !important;
	border-radius: 1rem;
}

.right-bg-worka {
	border-radius: 12px;
	background: url('../img/partner-portal-login-image.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}


body.modal-open > div.page-container > div.primary-sidebar {
	z-index:auto;
}

.modal h5 {
	margin-bottom: 0.75rem;
}

@media (max-width: 1080px) 
{
	.left-hand-content {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.right-hand-content {
		display: none !important;
	}
}

@keyframes slide {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.logos {
	overflow: hidden;
	padding: 10px 0;
	background: none;
	white-space: nowrap;
	padding-bottom: 84px;
	position: absolute;
	bottom: 0;
	width: 90%;
}

	.logos:before,
	.logos:after {
		position: absolute;
		top: 0;
		width: 250px;
		height: 100%;
		content: "";
		z-index: 2;
	}


	.logos:hover .logos-slide {
		animation-play-state: paused;
	}

.logos-slide {
	display: inline-block;
	animation: 35s slide infinite linear;
}

	.logos-slide img {
		height: 50px;
		margin: 0 40px;
	}

input.form-control,
input.form-control::placeholder, 
textarea.form-control,
textarea.form-control::placeholder,
.textinput-wrapper,
button.leading-btn,
button.trailing-btn {
	font-size: var(--font-size-sm);
}

input.form-control,
input.form-control::placeholder {
	min-height:var(--spacing-10);
}