/* Custom Colors */
:root {
	--pink100: #FFF6F3;
	--pink300: #FAE7E1;
	--pink500: #F8C9BF;
	--pink700: #FFB4A4;
	--pink900: #AC4D4D;
	--blue100: #BFD7EA;
	--blue200: #EBF6FF;
	--neonPink: #FF6569;
	--pastelYellow: #F8EBBF;
	--pastelGreen: #D7EEB9;
	--pastelTeal: #CDE9E5;
	--pastelBlue: #BFD6F8;
	--pastelPurple: #EED6EC;
	--lightYellow: #fffae8;
	--lightGreen: #f4fce8;
	--lightTeal: #e9f7f5;
	--lightBlue: #e8f0fc;
	--lightPurple: #f7f0f7;
	--red: #97121F;
	--green: #79A542;
	--primaryText: #333333;
	--subheadingText: rgba(172, 77, 77, 0.8);
	--sky-50: #f0f9ff;
	--sky-100: #e0f2fe;
	--sky-200: #bae6fd;
	--sky-300: #7dd3fc;
	--sky-400: #38bdf8;
	--sky-500: #0ea5e9;
	--sky-600: #2563eb;
	--sky-700: #0369a1;
	--sky-800: #075985;
	--sky-900: #0c4a6e;
	--sky-950: #082f49;
}

/* Base Styles */
body {
	background: var(--pink100);
}
body, p {
	font-family: 'DM Sans', sans-serif;
}

/* Heading Styles */
h1, h2 {
	font-family: 'Hedvig Letters Serif', system-ui;
	color: #333333; /* Primary Text */
	letter-spacing: normal; /* No letter spacing */
}

h3, h4, h5, h6 {
	font-family: 'Hedvig Letters Serif', system-ui;
	color: #333333; /* Primary Text */
	letter-spacing: 0.01rem; /* h3to6 tracking */
}

.font-sans {
	font-family: 'DM Sans', sans-serif;
	letter-spacing: -0.02rem;
}

.font-serif {
	font-family: 'Hedvig Letters Serif', system-ui;
}

/* Subheading Styles */
.subheading {
	color: rgba(172, 77, 77, 0.8); /* Subheading Text */
	text-transform: uppercase;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600; /* Bold weight */
}

/* Heading Specific Styles */
h1 {
	font-size: clamp(1.5rem, 1rem + 5vw, 2.5rem); /* H1 font size */
	line-height: 1.2; /* Leading Tight */
}

h2 {
	font-size: clamp(1.4rem, 0.5rem + 5vw, 2.25rem); /* H2 font size */
	line-height: normal; /* Normal line height */
}

h3 {
	font-size: clamp(1.3rem, 0.2rem + 5vw, 2rem); /* H3 font size */
	line-height: 2.25rem; /* Leading 9 */
}

h4 {
	font-size: clamp(1.2rem, 0.5rem + 2.5vw, 1.5rem); /* H4 font size */
	line-height: 1.5; /* Default line height */
}

h5 {
	font-size: clamp(1.15rem, 0.4rem + 2vw, 1.25rem); /* H5 font size */
	line-height: 1.5; /* Default line height */
}

h6, .btn, a {
	font-size: 1rem; /* H6 font size */
	line-height: 1.5; /* Default line height */
}

/* Reset margins for all text elements */
p,
h1,
h2,
h3,
h4,
h5,
h6,
.subheading {
	margin: 0;
	padding: 0;
}

.text-sm {
	font-size: 0.9rem;
}

.text-faded {
	color: dimgray;
}

.rounded-25 {
	border-radius: 0.25rem;
}

.rounded-50 {
	border-radius: 0.5rem;
}

body {
	overflow-y: scroll;
}

/* Responsive layout for the modal */
/* Add Animation */
@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

.main {
	background-color: #fff6f3;
	display: flex;
	flex-direction: column;
	/* justify-content: center; flex-start makes it start at top of the page because it's a column direction. flex-start makes pages look more consistent between navigation*/
	font-family: 'DM Sans', sans-serif;
	width: 100%;
}

#DesktopNavPublic {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 1.5rem 9rem;
}

.navbar-group {
	max-height: 2.5rem;
}

.login {
	display: flex;
	justify-content: center;
	max-width: 6rem;
	max-height: 2.5rem;
	padding-left: 1.5rem;
}

	.login a {
		text-decoration: none;
		white-space: nowrap;
	}

.nav-bar-mobile {
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: white;
}

.hamburger {
	cursor: pointer;
	margin-bottom: auto;
	padding: 1rem 2rem;
	position: absolute;
	background: none;
	border: 0;
	outline-color: white !important;
}

.menu {
	display: none;
	width: 100%;
	position: sticky;
	top: 80px;
	z-index: 50;
	background-color: white;
}

	.menu .group {
		display: flex;
		flex-direction: column;
		padding: 0.75rem 2rem;
		justify-content: center;
		align-items: flex-start;
		gap: 0.25rem;
		width: 100%;
	}

.group > a {
	margin-left: 1rem;
}

/* //////////////////////////////////// */
/* ///////////// ICONS //////////////// */
/* //////////////////////////////////// */
/* modifiers: icon colors */

/* bootstrap icons are i tags. The default text color is also the same as the default icon color */
i {
	color: #333;
}

.icon-red {
	color: #d63434;
}

.icon-green {
	color: #5eab42;
}

.icon-default {
	color: #333;
}

.icon-primary {
	color: #ffb4a4;
}

/* //////////////////////////////////// */
/* //////////// Logos //////////////// */
/* //////////////////////////////////// */

.villageed-logo {
	width: 127px;
	height: auto;
}
/* modifier: icon size */

/* haven't used, can change to any size */
.icon-small {
	font-size: 1rem;
}

.icon-medium {
	font-size: 2rem;
}

/* //////////////////////////////////// */
/* //////////// COLORS //////////////// */
/* //////////////////////////////////// */

.primary-text-color {
	color: #ac4d4d;
}

/* modifiers: background colors */
.navbar-color {
	background-color: #fff6f3;
}

.white-bkg {
	background-color: #fff;
}

.grey-bkg, .gray-bkg{
	background-color: rgba(0, 0, 0, 0.45);
}

.primary-bkg {
	background-color: var(--primary-bkg,#FFF6F3);
}
.darker-bkg, .primary-darker-bkg {
	background-color: #fae7e1;
}
.orange-bkg {
	background-color: #fbe9d8;
}
.primary-bkg {
	background-color: #FFF6F3;
}
/* //////////////////////////////////// */
/* ////////////// LAYOUT ////////////// */
/* //////////////////////////////////// */
.left-align{
	align-items: flex-start;
}
.center-align{
	align-items: center;
}

.center-svg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.end-align {
	align-items: end;
}
.justify-center {
	justify-content: center;
}
.justify-space-between {
	justify-content: space-between !important;
}
.margin-left-4-to-1rem {
	margin-left: 4rem;
}
.margin-left-4rem-disappear {
	margin-left: 4rem;
}
.margin-top-9-to-4rem {
	margin-top: 9rem;
}
.margin-top-6-to-3rem {
	margin-top: 6rem;
}
.right-align {
	align-items: flex-end;
}
.space-between {
	justify-content: space-between;
}
.margin-top-0-to-3rem {
	margin-top: 0rem;
}
.right-align-margin {
	margin-left: auto;
}

.expand-width {
	width: 100%;
}

/* containers */
.Large-Container, .large-container {
	display: flex;
	flex-direction: column;
	margin: 3rem auto;
	width: 100%;
}

.section-container {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	align-items: stretch;
}

.container-footer {
	display: flex;
	flex-direction: column;
	margin: auto;
}

.container-row {
	display: flex;
	flex-direction: row;
}

.container-xl {
	max-width: 38rem;
	gap: 1.75rem;
}
.container-row-to-column {
	display: flex;
	flex-direction: row;
}
.container-column {
	display: flex;
	flex-direction: column;
}
.container-grid-2-to-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}
.container-grid-3-to-1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem;
}

.container-white {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 2.25rem;
	border-radius: 0.625rem;
	background: var(--white, #fff);
	/* shadow */
	box-shadow: 2px 4px 8px 3px rgba(161, 161, 161, 0.25);
}

.container-white-style-only {
	background-color: #fff;
	padding: 2.25rem 4rem;
	border-radius: 0.625rem;
	background: var(--white, #fff);
	/* shadow */
	box-shadow: 2px 4px 8px 3px rgba(161, 161, 161, 0.25);
}

.container-contact-header {
	max-width: 544px; 
	/* min-height: 38px;  */
	justify-content: flex-start; 
	align-items: flex-start; 
	margin-bottom: 0.5rem;
}

.container-contact {
	max-width: 544px; 
	/* min-height: 304px;  */
	padding: 2.25rem; 
	background: white; 
	box-shadow: 2px 4px 8px 3px rgba(161.50, 161.50, 161.50, 0.25); 
	border-radius: 10px; 
	flex-direction: column; 
	justify-content: flex-start; 
	align-items: flex-start; 
	gap: 1.5rem; 
	display: inline-flex;
}

.chat-container {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 0.625rem;
	background: var(--white, #fff);
	/* shadow */
	box-shadow: 2px 4px 8px 3px rgba(161, 161, 161, 0.25);
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
}

.container-xl-width {
	max-width: 60rem;
}
.container-57-width {
	max-width: 57rem;
}
.container-52-width {
	max-width: 52rem;
}
.container-lrg-width {
	max-width: 44rem;
}
.container-35-width {
	max-width: 35rem;
}

.container-24-width {
	max-width: 24rem;
}
.container-20-width {
	max-width: 20rem;
}

.container-width {
	max-width: 34rem;
	gap: 1.5rem;
}

.container-sm-width {
	max-width: 27rem;
}

.container-x-sm-width {
	max-width: 9rem;
}
.container-xxl{
	max-width: 53rem;
    gap:1.25em;
}

/* //////////////////////////////////// */
/* ///////////// DISPLAY ////////////// */
/* //////////////////////////////////// */

.display-none {
	display:none;
}
.display-block {
	display:flex;
}

/* //////////////////////////////////// */
/* ///////////// SPACING ////////////// */
/* //////////////////////////////////// */

.graphic-list {
	padding: 0;
}

.gap-quarter {
	gap: 0.25rem !important;
}

.gap-half {
	gap: 0.5rem;
}

.gap-1 {
	gap: 1rem !important;
}

.gap-1-half {
	gap: 1.5rem !important;
}

.gap-2 {
	gap: 2rem !important;
}

.gap-3 {
	gap: 3rem !important;
}

.gap-4 {
	gap: 4rem !important;
}

.gap-5 {
	gap: 5rem !important;
}

.padding-0-5rem {
	padding: 0.5rem;
}

.padding-1-5rem {
	padding: 1.5rem;
}

.padding-2rem {
	padding: 2rem;
}

.padding-2-25rem {
	padding: 2.25rem;
}

.padding-6rem {
	padding: 6rem;
}

.padding-9rem {
	padding: 9rem;
}

/* padding TOP */
.padding-top-2-5rem {
	padding-top: 2.5rem;
}

.padding-top-3rem {
	padding-top: 3rem;
}
/* padding LEFT */
.padding-left-5rem {
	padding-left: 5rem;
}

/* padding BOTTOM */
.padding-bottom-3rem {
	padding-bottom: 3rem;
}
.padding-bottom-0-5rem {
	padding-bottom: 0.5rem;
}


/*don't give padding to children of the main content mainlayout div that wraps all the razor component bodies*/
.content-padding > * {
    padding: 0 !important;
}

/* //////////////////////////*/
/* //////// WIDTH ////////// */
/* //////////////////////////*/

.fill {
	align-self: stretch;
}

.fit-content {
	width: fit-content;
}

.flex-wrap {
	flex-wrap: wrap;
}

/* .footer-pages-width {
	min-width: 13rem;
	max-width: 70rem;
} */

.footer-page-section-width {
	width: 12rem;
}

.footer-button-width {
	min-width: 12rem;
}

.side-panel-width {
	width: 20rem;
}

/* //////////////////////////*/
/* //////// HEIGHT ///////// */
/* //////////////////////////*/

.height-dynamic-100vh {
	height: 100vh;
}

/* //////////////////////////*/
/* //////// POSITION /////// */
/* //////////////////////////*/

.p-sticky {
	position:sticky;
}

.p-top-left {
	top:0;
	left:0;
}


/* padding SIDES ONLY */
/* //////////////////////////*/
/* //////// FORMS ////////// */
/* //////////////////////////*/
.container-form {
	padding: 0 !important;
}

.form-label {
	padding: 0px;
	margin: 0px;
	font-size: 0.9rem;
	font-weight: 600;
}

.form-control {
	display: flex;
	padding: 0.5rem 0.75rem;
	justify-content: center;
	align-items: flex-start;
	gap: 0.625rem;
	align-self: stretch;
	border-radius: 0.25rem;
	border: 1px solid silver;
	height: auto;
}

.form-control.error {
	border-color: red;
}

.form-column {
	flex-direction: column;
}

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

.form-control:focus {
	border-color: #ffb4a4;
	outline: 0px;
}

/* select */
option {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 5px;
}

/* dropdown form */
.form-select {
	display: flex;
	width: 100%;
	padding: 1rem 1.5rem;
	-moz-padding-start: none;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #333;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.5rem center;
	background-size: 1.5rem 1rem;
	border: 1px solid #a6a6a6;
	border-radius: 0.625rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

	.form-select:focus {
		border-color: #ffb4a4;
		outline: 0;
		box-shadow: none;
	}

/* colors of radio btn */
.form-check-input {
}
.form-check-input:checked {
	background-color: #ffb4a4;
	border-color: #ffb4a4;
}

.form-check-input:focus {
	border-color: #ffb4a4;
	outline: 0;
	box-shadow: none;
}

input[type="radio"] {
	display: none;
}

	input[type="radio"] + label:before {
		content: "";
		/* create custom radiobutton appearance */
		display: inline-block;
		width: 17px;
		height: 17px;
		padding: 2px;
		margin-right: 8px;
		margin-bottom: -3px;
		/* background-color only for content */
		background-clip: content-box;
		border: 2px solid #a3a3a3;
		background-color: #e5e5e5;
		border-radius: 50%;
	}

	/* appearance for checked radiobutton */
	input[type="radio"]:checked + label:before {
		background-color: var(--neonPink);
		border: 2px solid var(--neonPink);
	}

.ratio-box {
	border-radius: 0.25rem;
	border: 1px solid silver;
	background: white;
	display: flex;
	padding: 0.75rem 1rem;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem;
	align-self: stretch;
}

/* //////////////////////////*/
/* //////// BUTTON ////////// */
/* //////////////////////////*/
.clear {
	background: none;
	border: none;
	padding: 0;
}
.clear:focus {
	outline: none;
}
.btn, #stripeButtonPOST {
	display: flex;
	padding: 0.5rem 1rem;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.25rem;
	width: fit-content;
	font-weight: 600;
	opacity: 1;
	transition: opacity ease 0.3s;
	text-wrap: nowrap;
}
	.btn:hover {
		opacity: 0.8;
	}

#stripeButtonPOST {
	gap: 0px;
}

#navbar-dropdown-1, #navbar-dropdown-2, #navbar-dropdown-3, #navbar-dropdown-4, #navbar-dropdown-5 {
	color: #333333;
	font-weight: 550;
}

.btn-primary, #stripeButtonPOST {
	background-color: #ffb4a4 !important;
	color: #333 !important;
	border-color: #ffb4a4;
	border: 0px !important;
}

.btn-cancel {
	background-color: #525252 !important;
	color: #FFFFFF !important;
}

.btn-delete {
	background-color: var(--pink900) !important;
	color: #FFFFFF !important;
}

.btn-delete2 {
	background-color: white !important;
	color: #333333 !important;
}

.btn-secondary {
	background: var(--blue100) !important;
	color: #333333 !important;
	border: none;
}

.btn-tertiary {
	background: none !important;
	color: #333333 !important;
	border: 1px solid #333333;
	opacity: 1;
	transition: opacity ease 0.3s;
}

.btn-rounded {
	color: white !important;
	border-radius: 100px;
	border: none;
	background: #333333 !important;
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
}


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

.text-align-left {
	text-align: start;
}
.p-16 {
	font-size: 1rem;
}

.p-14 {
	font-size: 0.875rem;
}

.p-12 {
	font-size: 0.75rem;
}

.bold-600, .font-600 {
	font-weight: 600;
}


/* /////////////////////////////*/
/* ///////// Spinner ///////////*/

.spinner {
	width: 23px;
	height: 23px;
	border: 3px solid var(--color-slate-200);
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
/* //////////////////////////// *//* 
/* ///////// Scrollable /////////*/
/* //////////////////////////// */

.scrollable {
	max-height: 50vh;
	overflow: hidden;
	overflow-y: scroll;
}

/* //////////////////////////// */
/* ///////// ACCORDION /////////*/
/* //////////////////////////// */
.accordion {
	max-width: 34rem;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.accordion-item {
	border-radius: 0.625rem !important;
	border: none;
}

		.accordion-button {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 1.4rem 1.25rem;
			font-size: 1.5rem;
			font-family: 'DM Sans', sans-serif;
			color: #333;
			text-align: left;
			background: none;
			border-radius: 0;
			border: 0;
			border-bottom: 1px solid #ffb4a4;
			overflow-anchor: none;
			margin-bottom: 0.5rem;
			transition: background-color 0.15s ease-in-out
		}

			.accordion-button:not(.collapsed) {
				color: #333;
				background-color: #fae7e1;
				box-shadow: none;
				border-radius: 0.625rem !important;
				border: 0;
				transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
			}

		.accordion-button:not(.collapsed)::after {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
			transform: rotate(-180deg);
		}

	.accordion-button::after {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		margin-left: auto;
		content: '';
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-size: 1.25rem;
		transition: transform 0.2s ease-in-out;
	}

.accordion-body {
	padding: 1rem 1.5rem;
	background-color: #fff6f3;
	width: 100%;
}

.accordion-button:focus {
	z-index: 3;
	border-color: none;
	outline: 0;
	box-shadow: none;
}
/* //////////////////////////*/
/* //////// IMAGES ////////// */
/* //////////////////////////*/
.image-width {
	width: 173.834px;
	margin: auto;
}

.m-auto {
	margin: auto;
}

.ml-auto {
	margin-left: auto;
}

.mr-auto {
	margin-right: auto;
}

.icon-32px {
	width: 32px;
	height: auto;
}
.image-70-perc {
	max-width: 70%;
}
.image-style-red {
	border-radius: 0.625rem;
	border: 1px solid var(--primary, #FFB4A4);
}
.image-width-expand-40-to-100-percent {
	max-width: 40% !important;
}

/* /////////////////////////////// */
/* ///////// SCHOOL CARD ///////// */
/* /////////////////////////////// */
.icon-text {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1rem;
}

/* //////////////////////////// */
/* //////////// CARD ///////////*/
/* //////////////////////////// */
.card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	min-width: 0px;
	word-wrap: break-word;
	background-clip: border-box;
	border: none;
	border-radius: 0.5rem;
	padding: 1.5rem;
	/* instead of default card padding, use padding styles */
}

.card-group {
	gap: 1.5rem;
}

.card-group-col {
	flex-direction: column !important;
}

.card-body {
	flex: 1 1 auto;
	padding: 1rem 1rem;
}

.card-title {
	margin-bottom: 0.5rem;
}

.card-text {
	margin-bottom: 0.5rem;
}

.card-height {
	min-height: 20rem;
}

/*Chat bubble card*/
.card-chat {
	padding: 0.5rem 1rem;
	gap: 0.5rem;
	align-items: center;
	background: #E8E8E8;
	word-break: break-word;
}

.chat-sent {
	background: var(--bkg-primary-darker);
}

/* //////////////////////////// */
/* //////////// LINKS ///////////*/
/* //////////////////////////// */
a {
	color: #333;
	text-decoration: none;
	text-underline-offset: 0.1rem;
}

a:hover {
	color: #ac4d4d;
}

/* add no-underline to remove the underline hover effect */
.no-underline:hover {
	text-decoration: none !important;
}

.nav-link {
	color: #333;
}

	.nav-link:focus,
	.nav-link:hover {
		color: #333;
	}

	.nav-link.active,
	a:hover {
		color: #ac4d4d;
		text-decoration: underline;
		text-decoration-color: currentcolor;
		text-decoration-thickness: auto;
		text-decoration-color: #ffb4a4;
		text-underline-offset: 0.3rem;
		text-decoration-thickness: 2px;
	}

.card-link {
	color: #333;
	text-decoration: none;
}

	.card-link:hover {
		color: #333;
		text-decoration: none;
		box-shadow: 3px 5px 12px 3px rgba(161, 161, 161, 0.25), -2px -2px 8px 0px rgba(224, 224, 224, 0.25);
	}

	.card-link + .card-link {
		margin-left: 0px;
	}

.card-is-selected {
	border: 2px solid #ffb4a4;
}

/* ///////////////////////////*/
/* //////// TABS//////////*/
/* ///////////////////////////*/
.tab { 
	align-items: center;
	cursor:pointer; 
	background-color:white; 
	padding:10px; 
	border-radius:10px;
	height:6.5rem; 
	width:7.5rem; 
	border: 4px solid transparent
}

.tab:hover,
.tab.selected:hover {
	border-color: #ffb4a4;
}

/* ///////////////////////////*/
/* //////// DROPDOWN//////////*/
/* ///////////////////////////*/
.btn-dropdown,
.btn-dropdown:hover {
	color: #ac4d4d;
	font-weight: 400;
	background-color: transparent;
	display: flex;
	padding: 0.25rem 1rem;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	row-gap: 0.5rem;
	flex-direction: row;
	border-radius: 0rem;
	border-bottom: 2px solid #ffb4a4;
}

.btn-check:focus + .btn,
.btn:focus {
	box-shadow: none;
	/* box-shadow: 0 0 0 0.25rem #f9d7d0; */
}

.dropdown-menu {
	border: 0px;
	border-radius: 0.5rem;
}

.dropdown-item {
	color: #333;
	text-decoration: none;
	text-underline-offset: 0.1rem;
}

	.dropdown-item:hover,
	.dropdown-item:focus {
		color: #ac4d4d;
		background-color: none !important;
		text-decoration: underline;
	}

/* select from dropdown */
.select-item {
	display: flex;
	padding: 0.5rem 1rem;
	color: #333;
}

/* faq dropown */
.faq-dropdown-item {
	color: #333;
	text-decoration: none;
	padding: 0.5rem 1rem;
}

	.faq-dropdown-item:hover,
	.faq-dropdown-item:focus {
		color: #333;
		background-color: #fff6f3 !important;
		text-decoration: none;
	}

.no-border-bottom, .no-border-bottom:hover {
	border-bottom: 0px;
}
/* //////////////////////////*/
/* //////// ALERT ////////// */
/* //////////////////////////*/
.alert-svg {
	margin-right: 0.5rem;
}

.alert-warning {
	padding: 1rem 1.5rem;
	/*justify-content: space-between;*/
	align-items: center;
	border-radius: var(--spacing-gap-none, 0rem);
	color: #333333;
	border: none;
	display: none;
	width: 100%;
	top: -3rem;
	margin-bottom: 0px;
}

.alert-white {
	background: #FFFFFF;
}

.alert-primary {
	background: #F8C9BF;
}

.alert-black {
	background: #4B4B4B;
	color: #FFFFFF
}

.alert-green {
	background: #D4E7D3
}

.alert-black-btn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 13 14' fill='none'%3E%3Cpath d='M6.5 8.04598L1.27011 13.2759C1.12069 13.4253 0.94636 13.5 0.747126 13.5C0.547893 13.5 0.373563 13.4253 0.224138 13.2759C0.0747126 13.1264 0 12.9521 0 12.7529C0 12.5536 0.0747126 12.3793 0.224138 12.2299L5.45402 7L0.224138 1.77011C0.0747126 1.62069 0 1.44636 0 1.24713C0 1.04789 0.0747126 0.873563 0.224138 0.724138C0.373563 0.574713 0.547893 0.5 0.747126 0.5C0.94636 0.5 1.12069 0.574713 1.27011 0.724138L6.5 5.95402L11.7299 0.724138C11.8793 0.574713 12.0536 0.5 12.2529 0.5C12.4521 0.5 12.6264 0.574713 12.7759 0.724138C12.9253 0.873563 13 1.04789 13 1.24713C13 1.44636 12.9253 1.62069 12.7759 1.77011L7.54598 7L12.7759 12.2299C12.9253 12.3793 13 12.5536 13 12.7529C13 12.9521 12.9253 13.1264 12.7759 13.2759C12.6264 13.4253 12.4521 13.5 12.2529 13.5C12.0536 13.5 11.8793 13.4253 11.7299 13.2759L6.5 8.04598Z' fill='white'/%3E%3C/svg%3E");
}
/* //////////////////////////*/
/* //////// DROPDOWN /////// */
/* //////////////////////////*/
.dropdown-scroll {
	max-height: 150px; /* you can change as you need it */
	overflow: auto; /* to get scroll */
}

.dropdown-shadow {
	border-radius: 0.625rem;
	background: #FFF;
	/* large shadow */
	box-shadow: 3px 5px 12px 3px rgba(161, 161, 161, 0.25), -2px -2px 8px 0px rgba(225, 225, 225, 0.25);
}

.pink-shadow {
	filter: drop-shadow(0px 10px 20px rgba(255, 180, 164, 0.2));
}

/* //////////////////////////*/
/* //////// MODAL ////////// */
/* //////////////////////////*/
.modal-btn-default-flex {
	flex: 0 1 auto;
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	outline: 0;
	border: none;
	border-radius: 0.5rem;
}

.modal-header {
	padding: 1rem;
	border: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}

.modal-body-padding {
	padding: 0 2rem 2rem;
}

.modal-body {
	padding: 0;
}

.modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
	border: none;
	padding: 0;
}

.modal-margin-top{
	align-items: baseline;
	margin-top: 6rem;
}

.modal-btn {
	padding: 0.75rem 1.5rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* //////////////////////////*/
/* //////// TOAST ///////////*/
/* //////////////////////////*/

.e-toast-green {
	color: #333333 !important;
	background: #D4E7D3 !important;
	background-color: #D4E7D3 !important;
}

	.e-toast-green:hover {
		background-color: #D4E7D3 !important;
	}
.e-toast-container.e-toast-full-width .e-toast {
	margin: 0;
	width: 100%;
}

.e-toast-container .e-toast {
	box-shadow: none !important;
	border: none !important;
	background-color: var(--primaryText) !important;
	border-radius: 0;
	margin: 0 !important;
}

.e-toast-green-icon {
	background-image: url("data:image/svg+xml, %3Csvg class='alert-svg' xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C8.00262 1.5 8.94117 1.76782 9.74964 2.2355C9.98867 2.37377 10.2945 2.29209 10.4328 2.05306C10.5711 1.81403 10.4894 1.50816 10.2504 1.36989C9.29379 0.816543 8.1831 0.5 7 0.5C3.41015 0.5 0.5 3.41015 0.5 7C0.5 10.5899 3.41015 13.5 7 13.5C10.5899 13.5 13.5 10.5899 13.5 7C13.5 6.72386 13.2761 6.5 13 6.5C12.7239 6.5 12.5 6.72386 12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7Z' fill='black' /%3E%3Cpath d='M14.3536 2.35355C14.5488 2.15829 14.5488 1.84171 14.3536 1.64645C14.1583 1.45118 13.8417 1.45118 13.6464 1.64645L7 8.29289L4.35355 5.64645C4.15829 5.45118 3.84171 5.45118 3.64645 5.64645C3.45118 5.84171 3.45118 6.15829 3.64645 6.35355L6.64645 9.35355C6.84171 9.54882 7.15829 9.54882 7.35355 9.35355L14.3536 2.35355Z' fill='black' /%3E%3C/svg%3E");
}

.e-toast-container .e-toast .e-toast-icon {
	height: 14px;
	width: 15px;
	position: absolute;
	align-self: center;
	margin-left: 20px;
	margin: 0;
}

.e-toast-content {
	color: white !important;
	padding: 1.25rem !important;
}

.e-toast-content a {
	color: var(--blue100) !important;
}

.e-toast-close-icon {
	color: white !important;
	margin-top: 1.25rem !important;
	margin-right: 1.25rem !important;
}

.trial-time-remaining {
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #3f3f46;
    color: #f5f5f5;
    text-align: center;
    font-size: 0.875rem;
}


/* /////////////////////////////////////////////*/
/* //// School Related Materials Styles ///////*/
/* ///////////////////////////////////////////*/
.usecase-container {
	max-width: 410px;
	height: 650px;
	padding-right:10px;
	
}
.scroll-bar-styles{
	overflow-y:auto;
	max-height:650px;

}
.faqs-container {
	width: 100%;
	cursor: pointer;
	padding: 1rem;
	border-bottom: 1px solid var(--pink500);
}

.faqs-container:hover {
    background-color: var(--pink300);
	border-radius: 0.5rem;
}

.scroll-bar-styles::-webkit-scrollbar {
	width: 6px;
	background-color: var(--pink300);
}

.scroll-bar-styles::-webkit-scrollbar-thumb {
	background-color: var(--pink500);
	border-radius: 10px;
	height:70px;
}
	.scroll-bar-styles ::-webkit-scrollbar-thumb:hover {
		background-color: #a0a0a0;
	}

.document-viewer {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.doc-container{
	position: relative;
}
.document-viewer .doc-container .document-overlay-top{
	top:0;
}
.document-viewer .doc-container .document-overlay-bottom{
    bottom:0;
}
.document-viewer .doc-container .document-overlay-top, .document-viewer .doc-container .document-overlay-bottom {
	position: absolute;
	left: 0;
	right:0;
	width: 100%;
	height: 43%;
	backdrop-filter: blur(5px);
	z-index:200;
	
}
.document-overlay-top,
.document-overlay-bottom {
	pointer-events: none;
}

.document-viewer .document-header
{
	display: flex;
	justify-content: space-between;
}

	.document-viewer button {
		
		z-index: 10;

	}
		.document-viewer button:hover {
			background-color: #f8c9bf;
		}

	.document-viewer iframe {
		width: 100%;
		height: 550px;
		border: none;
		max-width: 600px;
		max-height:550px;
	}
	.document-viewer .btn-full-screen {
		background-color: #f8f9fa;
		color: #333;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 5px 10px;
		cursor: pointer;
		top:20px;
		right:20px;
	}
	.document-viewer .btn-full-screen:hover {
        background-color: #e0e0e0;
    }
	.document-viewer iframe.full-view {
		height: 100%; 
	}
.btn-primary-download {
	background-color: #ffb4a4;
	color: #333;
	border-color: #ffb4a4;
	width: 100px;
	border-radius: 10px;
	padding: 5px;
	bottom: 25px;
	right: 25px;
	align-self:end;
}
	.btn-primary-download :hover {
		background-color: #f8c9bf;
		color: #333;
		border-color: #f8c9bf;
	}

.modal-alert{
	display: block;
	position: fixed;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	max-width:300px;
	height:100%;
	max-height:400px;
	overflow:auto;
	background-color:white;
	
	position: absolute;
	z-index:300;
}
.body-modal {
	position: absolute;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	border-radius: 10px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:300;
}

.close-button {
	background-color: #FFB4A4;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
}
.doc-viewer {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	padding: 20px;
	z-index: 100;
	width: 70%;
	max-width: 650px;
	max-height: 600px;
	height: 100%;
	overflow: auto;
}
	.doc-viewer iframe {
		width: 100%;
		max-width: 600px;
		max-height: 500px;
		height: 100%;
		border: none;
	}
/* /////////////////////////////////////////////*/
/* //// End of School Related Materials Styles/*/
/* ///////////////////////////////////////////*/


/*mobile min 360px max 599 px
tablet min 600 px max 1023 px
laptop min 1024 px
desktop min 1824 px*/
/*for negations (you can chain multiple of these classes)*/
@media screen and (max-width: 599px) {
	.display_none_mobile {
		display: none !important;
	}

	
	.padding_1rem_mobile,
	.padding-1rem-mobile {
		padding: 1rem;
	}

	.padding_4rem_mobile,
	.padding-4rem-mobile {
		padding: 4rem;
		padding-bottom: 1rem;
	}

	.padding-bottom-3rem-mobile {
		padding-bottom: 3rem;
	}

	.Large-Container {
		padding: 1rem;
	}
	.container-row-to-column {
		display: flex;
		flex-direction: column;
	}
	.container-grid-2-to-1 {
		grid-template-columns: 1fr;
	}

	.container-grid-3-to-1 {
		grid-template-columns: 1fr;
	}
	.mobile-padding-1-5rem {
		padding:1.5rem;
	}
	.mobile-gap-1 {
		gap:1rem !important;
	}
	.margin-left-4-to-1rem {
		margin-left: 1rem;
	}
	.margin-left-4rem-disappear {
		margin-left: 0;
	}
	.margin-top-9-to-4rem {
		margin-top: 4rem;
	}
	.margin-top-6-to-3rem {
		margin-top: 3rem;
	}
	.margin-top-0-to-3rem {
		margin-top: 3rem;
	}
	.image-width-expand-40-to-100-percent {
		max-width: 100% !important;
	}
	.mobile-padding-NS-3rem {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.mobile-tablet-text-align-center {
		text-align: center !important;
	}

	.mobile-font-1-rem {
		font-size: 1.25rem;
	}

	.mobile-tablet-padding-top-4rem {
		padding-top: 4rem;
	}

	.content-padding {
		padding-top: 5rem;
		padding-bottom: 1.25rem;
		padding-right: 1.75rem;
		padding-left: 1.75rem;
	}

	.content-padding-left {
		padding-left: 1.75rem;
	}

	.content-padding-right {
		padding-right: 1.75rem;
	}
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
	.display_none_tablet {
		display: none !important;
	}

	.padding_4rem_tablet,
	.padding-4rem-tablet {
		padding: 4rem;
	}

	.padding_2rem_tablet,
	.padding-2rem-tablet {
		padding: 2rem;
	}

	.padding-bottom-3rem-tablet {
		padding-bottom: 3rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}

	.mobile-tablet-padding-top-4rem {
		padding-top: 4rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1823px) {
	.display_none_laptop {
		display: none !important;
	}

	.padding_4rem_laptop,
	padding-4rem-laptop {
		padding: 4rem;
	}

	.padding-bottom-6rem-laptop {
		padding-bottom: 6rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}
}

@media screen and (min-width: 1824px) {
	.display_none_desktop {
		display: none !important;
	}

	.padding_4rem_desktop,
	.padding-4rem-desktop {
		padding: 4rem;
	}

	.padding-bottom-6rem-desktop {
		padding-bottom: 6rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}
}
/*for exclusive elements:*/

@media screen and (max-width: 599px) {
	.tablet_only {
		display: none !important;
	}

	.laptop_only {
		display: none !important;
	}

	.desktop_only {
		display: none !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
	.mobile_only {
		display: none !important;
	}

	.laptop_only {
		display: none !important;
	}

	.desktop_only {
		display: none !important;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1823px) {
	.mobile_only {
		display: none !important;
	}

	.tablet_only {
		display: none !important;
	}

	.desktop_only {
		display: none !important;
	}
}

@media screen and (min-width: 1824px) {
	.mobile_only {
		display: none !important;
	}

	.tablet_only {
		display: none !important;
	}

	.laptop_only {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.modal-content {
		width: 95%; /* Make modal almost full width on small screens */
		margin: 10% auto; /* Decrease the top margin to 10% */
	}
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
	.display_none_tablet {
		display: none !important;
	}

	.padding_4rem_tablet,
	.padding-4rem-tablet {
		padding: 4rem;
	}

	.padding_2rem_tablet,
	.padding-2rem-tablet {
		padding: 2rem;
	}

	.padding-bottom-3rem-tablet {
		padding-bottom: 3rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}

	.mobile-tablet-padding-top-4rem {
		padding-top: 4rem;
	}

	.content-padding {
		padding-top: 5rem;
		padding-bottom: 1.25rem;
		padding-right: 1.75rem;
		padding-left: 1.75rem;
	}

	.content-padding-left {
		padding-left: 1.75rem;
	}

	.content-padding-right {
		padding-right: 1.75rem;
	}

	.icon-group-padding {
		padding-top: 2rem !important;
		padding-right: 1.75rem !important;
	}
}
/*media query for learningmaterial compoent*/

@media(min-wdth: 850px) {
	.card-container {
		grid-template-columns: 1fr 1fr 1fr;
	}
}



/*end of media query for learningmaterial*/
@media screen and (min-width: 1024px) and (max-width: 1823px) {
	.display_none_laptop {
		display: none !important;
	}

	.padding_4rem_laptop,
	padding-4rem-laptop {
		padding: 4rem;
	}

	.padding-bottom-6rem-laptop {
		padding-bottom: 6rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}

	.content-padding {
		padding-top: 6.75rem;
		padding-bottom: 6.75rem;
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.content-padding-left {
		padding-left: 1rem;
	}

	.content-padding-right {
		padding-right: 1rem;
	}

	.icon-group-padding {
		padding-top: 1.5rem !important;
		padding-right: 4.5rem !important;
	}
}

@media screen and (min-width: 1824px) {
	.display_none_desktop {
		display: none !important;
	}

	.padding_4rem_desktop,
	.padding-4rem-desktop {
		padding: 4rem;
	}

	.padding-bottom-6rem-desktop {
		padding-bottom: 6rem;
	}

	.Large-Container {
		padding: min(10vh, 5rem);
	}

	.content-padding {
		padding-top: 3.75rem;
		padding-bottom: 6.75rem;
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.content-padding-left {
		padding-left: 1rem;
	}

	.content-padding-right {
		padding-right: 1rem;
	}

	.icon-group-padding {
		padding-top: 1.5rem !important;
		padding-right: 4.5rem !important;
	}
}