/* ---------------------------- Defaults --------------------------- */
body {
	margin: 0;
}

:root {
	--indigo-50: #f1f4fd;
	--indigo-100: #e0e7f9;
	--indigo-200: #c8d6f5;
	--indigo-300: #a3bced;
	--indigo-400: #7798e3;
	--indigo-500: #5776da;
	--indigo-600: #435acd;
	--indigo-700: #3a4abf; /* logo color */
	--indigo-800: #343e99;
	--indigo-900: #2e377a;

	/* blue gray */
	--gray-50: hsl(220, 20%, 97%);
	--gray-100: hsl(220, 19%, 94%);
	--gray-200: hsl(217, 18%, 86%);
	--gray-300: hsl(220, 20%, 74%);
	--gray-400: hsl(219, 19%, 60%);
	--gray-500: hsl(219, 18%, 48%);
	--gray-600: hsl(221, 20%, 37%);
	--gray-700: hsl(221, 20%, 32%);
	--gray-800: hsl(222, 19%, 27%);
	--gray-900: hsl(222, 16%, 24%);

	--red-50: #fcf4f4;
	--red-100: #fae6e6;
	--red-200: #f7d1d1;
	--red-300: #f0b1b1;
	--red-400: #e68383;
	--red-500: #d85b5b;
	--red-600: #bf3b3b;
	--red-700: #a43131;
	--red-800: #882c2c;
	--red-900: #722a2a;
}

* {
	box-sizing: border-box;
}

/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
	:root {
		--font-size-sm: clamp(0.89rem, 0.09vw + 0.87rem, 0.94rem);
		--font-size-base: clamp(1rem, 0.23vw + 0.94rem, 1.13rem);
		--font-size-md: clamp(1.13rem, 0.41vw + 1.02rem, 1.35rem);
		--font-size-lg: clamp(1.27rem, 0.64vw + 1.1rem, 1.62rem);
		--font-size-xl: clamp(1.42rem, 0.95vw + 1.19rem, 1.94rem);
		--font-size-xxl: clamp(1.6rem, 1.33vw + 1.27rem, 2.33rem);
		--font-size-xxxl: clamp(1.8rem, 1.81vw + 1.35rem, 2.8rem);
	}
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
	:root {
		--font-size-sm: 0.89rem;
		--font-size-base: 1rem;
		--font-size-md: 1.13rem;
		--font-size-lg: 1.27rem;
		--font-size-xl: 1.42rem;
		--font-size-xxl: 1.6rem;
		--font-size-xxxl: 1.8rem;
	}
	@media screen and (min-width: 1280px) {
		:root {
			--font-size-sm: 0.94rem;
			--font-size-base: 1.13rem;
			--font-size-md: 1.35rem;
			--font-size-lg: 1.62rem;
			--font-size-xl: 1.94rem;
			--font-size-xxl: 2.33rem;
			--font-size-xxxl: 2.8rem;
		}
	}
}

/* Fluid padding variables, for browsers that support clamp */
@supports (padding: clamp(1rem, 1vw, 1rem)) {
	:root {
		--sm: clamp(0.67rem, 0.19vw + 0.62rem, 0.77rem);
		--base: clamp(1rem, 0.45vw + 0.89rem, 1.25rem);
		--md: clamp(1.5rem, 0.95vw + 1.26rem, 2.02rem);
		--lg: clamp(2.25rem, 1.86vw + 1.79rem, 3.27rem);
		--xl: clamp(3.38rem, 3.49vw + 2.5rem, 5.29rem);
		--xxl: clamp(5.06rem, 6.37vw + 3.47rem, 8.57rem);
		--xxxl: clamp(7.59rem, 11.4vw + 4.74rem, 13.86rem);
	}
}
/* Fallback variables for browsers that don't support clamp */
@supports not (padding: clamp(1rem, 1vw, 1rem)) {
	:root {
		--sm: 0.67rem;
		--base: 1rem;
		--md: 1.5rem;
		--lg: 2.25rem;
		--xl: 3.38rem;
		--xxl: 5.06rem;
		--xxxl: 7.59rem;
	}
	@media screen and (min-width: 1280px) {
		:root {
			--sm: 0.77rem;
			--base: 1.25rem;
			--md: 2.02rem;
			--lg: 3.27rem;
			--xl: 5.29rem;
			--xxl: 8.57rem;
			--xxxl: 13.86rem;
		}
	}
}

/* ----------------------------- Element styling ---------------------------- */

/* Typography */
h2 {
	margin-top: 0;
}

/* Buttons */

.button-success,
.button-error,
.button-warning,
.button-connect,
.button-upgrade {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
	/* changed for contrast */
	background: #106723;
	/* background: rgb(28, 184, 65); */
	/* this is a green */
}

.button-error {
	background: rgb(202, 60, 60);
	/* this is a maroon */
}

.button-warning {
	background: rgb(223, 117, 20);
	/* this is an orange */
}

.button-connect {
	background: var(--indigo-800);
}

.button-upgrade {
	/* changed for contrast */
	background: #106723;
	/* background: rgb(28, 184, 65); */
	margin-bottom: 3px;
	font-size: 80%;
}

.button-org-filter {
	border-radius: 10px;
	font-size: 70%;
	margin-top: 7px;
}

.button-xsmall {
	font-size: 70%;
}

.button-small {
	font-size: 85%;
}

/* Summary */

.metric {
	border-radius: 25px;
	border: 2px solid var(--indigo-800);
	padding: 0.8rem;
	width: 9.4rem;
	height: 7.2rem;
	text-align: center;
	/* display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around; */
	box-sizing: content-box;
}

.kpiLabel {
	font-size: 1.3rem;
}

.kpiValue {
	font-size: 2.3rem;
	padding-top: 0.8rem;
}

.kpiTrend {
	font-size: 0.9rem;
	/* padding-top: 0.8rem; */
	/* vertical-align: text-top; */
	display: flex;
	align-items: center;
	/* justify-content: center; */
	margin: 0.5em auto 0;
	gap: 0.5rem;
	border: 1.25px solid;
	border-radius: 15px;
	height: fit-content;
	width: fit-content;
	padding: 0.2rem 1rem;
}

.kpiTrend.up {
	color: #006600;
	background-color: #f2fff2;
}

.kpiTrend.down {
	color: hsl(0, 100%, 40%);
	background-color: hsla(0, 100%, 50%, 0.05);
}

/* ---------------------------- Sections styling ---------------------------- */

/* Org name */

.org-name {
	margin-top: 0px;
	color: var(--indigo-800);
	margin-bottom: 8px;
}

.salesforce-link {
	color: var(--gray-800);
	text-decoration: none;
}
.salesforce-link:hover {
	color: var(--gray-800);
	text-decoration: underline;
}

.org-details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-items: center;
	gap: 0.3rem;
}
@media screen and (min-width: 48em) {
	.org-details:last-of-type {
		justify-content: flex-end;
	}
}

.org-settings {
	top: 0;
	right: 0;
	position: absolute;
	text-align: right;
}

.clear-button {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

/* Tabs  */

.tab-badge {
	border-radius: 50%;
	font-size: 70%;
	vertical-align: text-top;
}

.tab-reminder {
	font-size: 0.9rem;
	text-align: right;
	color: var(--gray-600);
}

/* At md breakpoint (> 768px), tab reminder is not right aligned */
@media screen and (max-width: 48em) {
	.tab-reminder {
		text-align: left;
	}
}

/* Workspace */

.summary-table {
	max-width: 1200px;
	margin: 1rem auto;
	display: grid;
	/* gap: 32px 0;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); */

	/* grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(10.6rem, 1fr));
	grid-gap: 1rem;
	align-items: center;
	justify-items: center;
}

@media (max-width: 35.5rem) {
	.summary-table {
		margin: 1rem auto;
	}
}

@media (min-width: 87.5rem) {
	.summary-table {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* --------------------------------- SIDEBAR -------------------------------- */
/* Navigation */

#org_nav {
	margin: 1rem 0.5rem 0.5rem 0.5rem;
	/* padding: 0.25rem; */
	/* border: 0.1rem solid #ccc; */
	/* margin-left: .6rem; */
	/* border-radius: 0.4rem; */
}

.org-buttons {
	margin-bottom: 1rem;
	text-align: center;
}

.org-nav {
	position: relative;
	border-radius: 0.3rem;
	cursor: pointer;

	margin: 0;
	padding: 0.75rem 0.5rem;

	/* another style */
	/* top right bottom left */
	/* margin: 0.5rem -1rem 0.5rem -1rem;
	padding: 0.5rem 0.5rem 0.5rem 0.75rem; */
}
.org-nav:hover {
	background: var(--gray-100);
}

.org-selected {
	background: var(--gray-200);
	/* border: 0.1rem solid var(--gray-300); */

	/* another style */
	/* background: var(--gray-100);
	border-radius: 0;
	border-left: 0.25rem solid var(--indigo-500); */
}

.org-nav.error {
	/* border-left: 0.25rem solid var(--red-500); */
	/* color: var(--red-800); */
}

.org-nav.error::before {
	content: "";
	border-left: 0.25rem solid var(--red-500);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.hovertext {
	position: relative;
	border-bottom: 0.1rem dotted black;
}

.hovertext:before {
	content: attr(data-hover);
	visibility: hidden;
	opacity: 0;
	width: 8.8rem;
	background-color: var(--gray-500);
	color: #fff;
	text-align: center;
	border-radius: 0.3rem;
	padding: 0.3rem 0;
	transition: opacity 1s ease-in-out;

	position: absolute;
	z-index: 1;
	left: 0;
	top: 110%;
}

.hovertext:hover:before {
	opacity: 1;
	visibility: visible;
}

/* --------------------------- RESPONSIVE SIDEBAR --------------------------- */

/* The sidebar menu */
:root {
	--sidebar-width: 272px;
}

.sidebar {
	height: fit-content;
	/* 100% Full-height */
	top: 3rem;
	width: var(--sidebar-width); /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 2; /* Stay on top */
	left: -var(--sidebar-width);
	background-color: white;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 1rem;
	/* Place content 3.8rem from the top */
	/* transition: all 0.5s; */
	/* 0.5 second transition effect to slide in the sidebar */

	border: none;
	border-radius: 0.3rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);

	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#mySidebar {
	padding-bottom: 0px;
}

.sidebar-logo {
	padding: 0 1rem 0 1rem;
	height: 5rem;
	display: none;
	margin-top: auto;
	margin-bottom: 5rem;
}
.sidebar-logo-chat {
	background-color: var(--indigo-200);
	height: 4rem;
	border-radius: 1rem 1rem 1rem 0;
	padding: 0.5rem;
	align-items: center;
	box-sizing: border-box;
	margin-left: 0.5rem;
	font-size: 0.9rem;
}
.sidebar-logo-chat strong {
	color: var(--indigo-700);
}

/* The sidebar links */
.sidebar a {
	padding: 0.5rem 0.5rem 0.5rem 2rem;
	text-decoration: none;
	font-size: 1.6rem;
	color: var(--gray-600);
	display: block;
	/* transition: 0.3s; */
}

/* When you mouse over the navigation links, change their color */
.sidebar .pure-menu a:hover {
	background-color: var(--gray-200);
	/* color: #f1f1f1; */
}

/* Style page content - use this if you want to push the page content to the left when you open the side navigation */
/* MAIN FOR INDEX.HTML */
#main {
	position: relative;
	margin-top: var(--xl);
	margin-left: 0;
	transition: all 0.2s;
	/* If you want a transition effect */
	padding: 1rem;
	overflow-x: hidden;
	background-color: white;
}
/* MAIN FOR OTHER PAGES */
#main-other {
	margin: var(--xxl) auto 0;
	max-width: 1200px;
	padding: 1.5rem;
}

/* On screens smaller than 1024px, sidebar is always shown */
@media screen and (min-width: 1024px) {
	.sidebar {
		left: 0;
		height: 100%;
		background-color: var(--gray-50);
		box-shadow: none;
	}
	.sidebar-logo {
		display: flex;
		align-items: center;
		align-self: flex-end;
	}

	#main {
		margin-left: var(--sidebar-width);
		transition: all 0.5s;
		/* If you want a transition effect */
		padding: 1rem;
	}
}

/* On smaller screens, where height is less than ___, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 800px) {
	.sidebar {
		padding-bottom: 32px;
	}
	.sidebar a {
		font-size: 1.1rem;
	}
}

/* ---------------------------------- TABS ---------------------------------- */

.tab-container {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	border-bottom: 1.6px solid var(--gray-200);
}
.settings {
	margin-bottom: 0.5rem;
}

/* Style the tab */
.tab {
	overflow: hidden;
	/* border: 1.6px solid #ccc;
	border-radius: 9.6px 9.6px 0 0;
	background-color: #f1f1f1; */
	/* overflow-x: scroll; */
	box-sizing: border-box;
	/* border-bottom: 1.6px solid var(--gray-200); */
}
/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 0.8rem 0.9rem;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	/* letter-spacing: 0.3px; */
}
.tab button:not(:first-child):not(:last-child) {
	border-left: 0.8px solid var(--gray-200);
	border-right: 0.8px solid var(--gray-200);
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: var(--indigo-100);
}
/* Create an active/current tablink class */
.tab button.active {
	background-color: var(--indigo-200);
	/* font-weight: bold;
	letter-spacing: 0; */
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 1.5rem 0;
	/* border: 1.6px solid #ddd; */
	border-radius: 0 0 9.6px 9.6px;
	/* border-top: none; */
}

.header {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Below 640px, hide these tabs */
.sm-show {
	display: none !important;
}
@media (min-width: 640px) {
	.sm-show {
		display: flex !important;
	}
}

/* SCOPED TABS */

/* .scopedtab {
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	background-color: #fafaf9;
	border: 1px solid #c9c9c9;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
} */
/* .scopedtab button {
	position: relative;
	margin-bottom: -1px;
} */

/* Style the tab */
.scopedtab {
	overflow: hidden;
	border: 1px solid var(--gray-300);
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: var(--gray-50);
	box-sizing: border-box;
}
/* Style the buttons that are used to open the tab content */
.scopedtab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 0.8rem 0.9rem;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	/* letter-spacing: 0.3px; */
}

/* Change background color of buttons on hover */
.scopedtab button:hover {
	border-left: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
}
/* Create an active/current tablink class */
.scopedtab button.active {
	background-color: white;
	border-right: 1px solid var(--gray-200);
	position: relative;
	/* font-weight: bold;
	letter-spacing: 0; */
}

/* Style the tab content */
.scopedtabcontent {
	display: none;
	padding: 1.5rem 0;
	border: 1px solid var(--gray-200);
	border-radius: 0 0 0.25rem 0.25rem;
	/* border-top: none; */
}

/* -------------------------------------------------------------------------- */
/*                                  WAITLIST                                  */
/* -------------------------------------------------------------------------- */
#body-waitlist {
}
#waitlist-navbar {
	width: 100%;
	margin: 0 auto 0;
	max-width: 1400px;
}

.waitlist-container {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
}
@media (min-width: 768px) {
	.waitlist-container {
		text-align: center;
	}
}
.waitlist-container h1 {
	font-size: var(--font-size-xxxl);
	color: var(--indigo-800);
}

.waitlist-container strong {
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	color: var(--indigo-900);
	letter-spacing: 1px;
}
.waitlist-container p {
	font-size: var(--font-size-xl);
	color: var(--gray-500);
}

#main-waitlist {
	/* min-height: 100vh; */
	margin: 0 auto;
	max-width: 1300px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

.waitlist-logo {
	height: 75px;
}

.graph-container {
	position: relative;
	display: block;
	overflow: hidden;
	height: 100%;
}
.graph-container:before {
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	-moz-box-shadow: inset 0px 0px 50px 50px rgba(255, 255, 255, 1);
	-webkit-box-shadow: inset 0px 0px 50px 50px rgba(255, 255, 255, 1);
	box-shadow: inset 0px 0px 50px 50px rgba(255, 255, 255, 1);
}
.graph-container p {
	font-size: var(--font-size-md);
	background-color: rgba(255, 255, 255, 0.8);
	display: inline-block;
	padding: 0.5rem;
	border-radius: 4px;
}
.graph-text-container{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 2rem;
	text-align: center;
}
@media screen and (min-height: 700px){
	#main-waitlist{
	height: 100vh;
	}
}
@media screen and (min-width: 576px) {
.graph-text-container{
	position: static;
	display: block;
	margin-top: 0;
}

	.graph-container p {
		position: absolute;
	}

	.graph-container p:nth-child(1) {
		top: 10%;
		left: 36%;
	}
	.graph-container p:nth-child(2) {
		top: 20%;
		left: 5%;
	}
	.graph-container p:nth-child(3) {
		top: 30%;
		left: 64%;
	}
	.graph-container p:nth-child(4) {
		top: 40%;
		left: 16%;
	}
	.graph-container p:nth-child(5) {
		top: 50%;
		left: 50%;
	}
	.graph-container p:nth-child(6) {
		top: 60%;
		left: 32%;
	}
}
.graph-container p:hover {
	box-shadow: 0 0 0 1em transparent;
	animation: pulsewhite 0.5s;
}

.form-group {
	max-width: 30rem;
	width: 100%;
}

.form-group form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
}

@media (min-width: 640px) {
	.form-group form {
		display: flex;
		flex-direction: row;
	}
}
.input-email {
	flex: 1 1 0%;
	width: 100%;
	display: block;
	border: 2px solid var(--gray-300);
	border-radius: 4px;
	outline: none;
	padding: 8px;
	box-sizing: border-box;
	transition: 0.3s;
	background-color: white;
}
.input-email:focus {
	border-color: var(--indigo-500);
	box-shadow: 0 0 8px 0 var(--indigo-500);
}

.input-submit,
.input-submit *,
.input-submit :after,
.input-submit :before,
.input-submit:after,
.input-submit:before {
	border: 0 solid;
	box-sizing: border-box;
}
.input-submit {
	display: block;
	-webkit-tap-highlight-color: transparent;
	background-color: var(--indigo-800);
	background-image: none;
	color: #fff;
	cursor: pointer;
	font-size: 100%;
	margin: 0;
	padding: 0;
}
.input-submit:disabled {
	cursor: default;
}
.input-submit:-moz-focusring {
	outline: auto;
}
.input-submit {
	border-radius: 4px;
	box-sizing: border-box;
	display: block;
	padding: 0.5rem 1rem;
	position: relative;
}
.input-submit:hover {
	-webkit-animation: pulse 0.5s;
	animation: pulse 0.5s;
	box-shadow: 0 0 0 1em transparent;
	background-color: var(--indigo-600);
}
@-webkit-keyframes pulse {
	0% {
		box-shadow: 0 0 8px 0 var(--indigo-200);
	}
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 8px 0 var(--indigo-300);
	}
}
@-webkit-keyframes pulsewhite {
	0% {
		box-shadow: 0 0 8px 0 white;
	}
}
@keyframes pulsewhite {
	0% {
		box-shadow: 0 0 8px 0 white;
	}
}

/* -------------------------------------------------------------------------- */
/*                                  UTILITIES                                 */
/* -------------------------------------------------------------------------- */
.center {
	text-align: center;
}
.max-w-prose {
	max-width: 65ch;
}
.hidden {
	display: none;
}
.text-sm {
	font-size: var(--sm);
}

/* -------------------------------- TABLE ------------------------------- */
.table-responsive {
	width: 100%;
	overflow-y: hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	/* border: 1px solid #ddd; */
	margin-top: 3rem;
}

.table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}
.table-header-main {
	background-color: hsla(0, 0%, 10%, 0.05);
}
.table-hover > tbody > tr:hover {
	background-color: hsla(0, 0%, 10%, 0.02);
}
.table tr {
	border-bottom: 1px solid hsla(0, 0%, 10%, 0.1);
}
.table td,
.table th {
	padding: 14px;
	vertical-align: baseline;
}