/* Theme definition */

:root {
	--indigo: #3849aa;
	--indigo-light: #606dbb;
	--indigo-dark: #273377;

	--aqua: #64e5a6;
	--aqua-light: #83eab8;
	--aqua-dark: #50b785;

	--opal: #e85f5c;
	--opal-light: #ff7f7d;
	--opal-dark: #c24341;

	--web: #e9ebf8;

	--header-height: 6rem;
	--footer-height: 17rem;
	--body-min-height: calc(100vh - var(--footer-height));
	--menu-width: 20rem;

	--shadow: 0 2px 5px 0 #0002;
	--shadow-aqua: 0 0 7px 0 #64e5a6;

	--transition: all 300ms ease-in-out;

	--gradient-indigo: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%);
}

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

.text-indigo-light {
	color: var(--indigo-light);
}

.text-indigo-dark {
	color: var(--indigo-dark);
}

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

.text-aqua-light {
	color: var(--aqua-light);
}

.text-aqua-dark {
	color: var(--aqua-dark);
}

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

.text-opal-light {
	color: var(--opal-light);
}

.text-opal-dark {
	color: var(--opal-dark);
}

/* No Scrollbars */

* {
	-ms-overflow-style: none;
	scrollbar-width: none;
	/* To check readability */
	/* filter: grayscale(1); */
}

::-webkit-scrollbar {
	display: none;
}

/* styling for php <pre> element */
pre {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #0008;
	color: white;
	border: 2px solid #fff8;
	padding: 1rem;
	font-weight: bold;
	border-radius: 0.5rem;
	z-index: 10000;
	max-height: 100vh;
	margin: 0;
	overflow-y: scroll;
}

code {
	background: #0009;
	color: white;
	font-weight: bold;
	padding: 1rem;
	margin: 0;
	z-index: 1000;
}

body {
	font-family: sofia-pro;
	color: #444;
}

main {
	padding-top: var(--header-height);
	/* padding-top: 9rem; */
	min-height: var(--body-min-height);
}

button,
input[type="file"] {
	outline: none !important;
}

a {
	color: var(--indigo);
}

a:hover {
	color: var(--indigo-light);
	text-decoration: none;
}

.form-container {
	/* background: #555; */
	background: var(--indigo-dark);
}

/* steps css */

.steps {
	/* margin: 2rem 0; */
	margin: 0;
	display: flex;
	flex-direction: column;
	/* color: #ffdbb0; */
	text-transform: uppercase;
	font-weight: 500;
	list-style: none;
}

.steps > li {
	position: relative;
	color: var(--indigo);
	opacity: 0.5;
}

.steps > li.active {
	/* color: #ef8300; */
	opacity: 1 !important;
}

.steps > li::before {
	content: url(/src/assets/images/steps/square-regular.svg);
	display: inline-block;
	position: absolute;
	width: 1rem;
	top: 0.25rem;
	left: -2rem;
}

.steps > li.active::before {
	content: url(/src/assets/images/steps/square-regular-active.svg);
}

.steps > li.done::before {
	content: url(/src/assets/images/steps/check-square-regular.svg);
}

.steps > li.active.done::before {
	content: url(/src/assets/images/steps/check-square-regular-active.svg);
}

.steps > li:last-of-type::before {
	content: url(/src/assets/images/steps/infinity-solid.svg);
	top: 0.4rem;
}

.steps > li.active:last-of-type::before {
	content: url(/src/assets/images/steps/infinity-solid-active.svg);
}

.fa-bone {
	transform: rotate(70deg) !important;
}

.alert-php-container {
	z-index: 1000;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	display: flex;
	justify-content: center;
}

fieldset {
	border: 1px solid white;
	border-radius: 0.25rem;
	width: 100%;
	max-width: 40rem;
}

fieldset > legend {
	width: initial;
	padding: 0 0.5rem;
}

fieldset > div {
	display: flex;
	padding: 2rem;
}

fieldset > div > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

/*  CUSTOM CSS. Organize this: */

.coach-signup-1 {
	max-width: 250px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.coach-signup-2 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.mobile-p-5 {
	padding: 3rem !important;
}

.mobile-spacing-1 {
	padding-bottom: unset;
}

.mobile-spacing-2 {
	padding-top: unset;
	padding-bottom: unset;
	border-top: unset;
}

.mobile-spacing-3 {
	padding-top: 1rem;
	padding-bottom: unset;
	border-top: unset;
}

.supportModal {
	height: 400px;
	width: 100%;
}

.supportModalBody {
	padding: 0px;
	height: 400px;
}

@media only screen and (max-width: 600px) {
	.mobile-p-5 {
		padding: 1rem !important;
	}

	.mobile-spacing-1 {
		padding-bottom: 1rem;
	}

	.mobile-spacing-2 {
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 1px solid white;
	}

	.mobile-spacing-3 {
		padding-top: 1rem;
		padding-bottom: 0rem;
		border-top: 1px solid white;
	}

	.supportModal {
		height: 200px;
		width: 100%;
	}

	.supportModalBody {
		padding: 0px;
		height: 200px;
	}
}

@media (min-width: 768px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 960px;
	}
}

@media (min-width: 992px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 1140px;
	}
}

.jumbo-words {
	font-size: 2.5rem;
}

@media (min-width: 768px) {
	.jumbo-words {
		font-size: 4rem;
	}
}