[data-theme="dark"] {
	--primary-surface: #0e1719;
	--secondary-surface: #242c2e;
	--surface-border: none;
	--primary-color: #14909a;
	--secondary-color: #cbd5e1;
	--hover-color: #545b5c4d;
	--green: #1cac78;
	--red: #eb3939;
	--yellow: #d79b1e;
	--grey: #545b5c;
	--orange: #ed8300;
	--blue: #082567;
	--inputs-color: #3c4344;
	--inputs-border: none;
	--inputs-border-radius: 10px;
	--required-field-outline: 1px solid #ff4343;
	--card-shadow: none;
	--card-radius: 10px;
	--card-padding: 10px;
	--card-margin: 5px;
	--overlay-shadow: 0px 2px 10px 0px rgb(26 26 26);
	--card-surface: #242c2e;
	--grid-border: 1px solid #545b5c;
	--disabled-color: #4e4e4e;
	--font-color: white;
	--icon-color: white;
}
[data-theme="light"] {
	--primary-surface: #ffffff;
	--secondary-surface: #d3d3d3;
	--surface-border: 1px solid #d3d3d3;
	--primary-color: #14909a;
	--secondary-color: #4d4d4d;
	--hover-color: #545b5c4d;
	--green: #1cac78;
	--red: #eb3939;
	--yellow: #d79b1e;
	--grey: #545b5c;
	--orange: #ed8300;
	--blue: #1e8dbd;
	--inputs-color: #f0f0f0;
	--inputs-border: none;
	--inputs-border-radius: 10px;
	--required-field-outline: 1px solid #ff4343;
	--card-shadow: none;
	--card-radius: 10px;
	--card-padding: 10px;
	--card-margin: 5px;
	--overlay-shadow: 0px 2px 10px 0px rgb(172 172 172);
	--card-surface: #d3d3d3;
	--grid-border: 1px solid #ffffff;
	--disabled-color: #747474;
	--font-color: black;
	--icon-color: black;
}
:root {
	--primary-surface: #0e1719;
	--secondary-surface: #242c2e;
	--surface-border: none;
	--primary-color: #14909a;
	--secondary-color: #cbd5e1;
	--hover-color: #545b5c4d;
	--green: #1cac78;
	--red: #eb3939;
	--yellow: #d79b1e;
	--grey: #545b5c;
	--orange: #ed8300;
	--blue: #082567;
	--inputs-color: #3c4344;
	--inputs-border: none;
	--inputs-border-radius: 10px;
	--required-field-outline: 1px solid #ff4343;
	--card-shadow: none;
	--card-radius: 10px;
	--card-padding: 10px;
	--card-margin: 5px;
	--overlay-shadow: 0px 2px 10px 0px rgb(26 26 26);
	--card-surface: #242c2e;
	--grid-border: 1px solid #545b5c;
	--disabled-color: #4e4e4e;
	--font-color: white;
	--icon-color: white;
}
.logo {
	width: 200px;
	margin-bottom: 40px;
}
body {
	font-family: Poppins, sans-serif;
	height: 100%;
	margin: 0;
	background-color: var(--primary-surface);
	background-size: cover;
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	gap: 15px;
}
.content {
	border: var(--surface-border);
	border-radius: var(--card-radius);
	padding: 25px;
	box-shadow: var(--box-shadow);
	background-color: var(--secondary-surface);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	max-width: 600px;
	min-width: 400px;
	color: var(--font-color);
}
.field-content {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.feature-content {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: stretch;
	padding: 10px;
	width: 100%;
}
.feature-hdr {
	margin: 0;
	color: var(--font-color);
}
.feature-txt {
	margin: 0;
	font-size: 14px;
	color: var(--font-color);
}
.feature-carousel {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--secondary-color);
	border-radius: var(--card-radius);
	overflow: hidden;
	padding: 10px;
}
.feature-slide {
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	transition: opacity 0.5s ease-in-out;
}
.feature-slide.active {
	gap: 5px;
	display: flex;
	flex-direction: column;
	opacity: 1;
	visibility: visible;
	position: relative;
	transition: opacity 0.5s ease-in-out;
}
.indicators {
	display: flex;
	justify-content: center;
	bottom: 10px;
	width: 100%;
}
.indicator {
	width: 10px;
	height: 10px;
	background-color: #333;
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
	transition: background-color 0.5s ease-in-out;
}
.indicator.active {
	background-color: #ccc;
}
.feature-img {
	border-radius: var(--card-radius);
}
.fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.icon-field {
	position: relative;
	display: flex;
	align-items: center;
}
.show-pass-icon {
	color: var(--primary-color);
	position: absolute;
	right: 5px;
	cursor: pointer;
}
label {
	font-size: 14px;
}
.field-caption-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.p-button {
	padding: 10px;
	border-radius: var(--card-radius);
	cursor: pointer;
	font-weight: 400;
	font-family: Poppins, sans-serif;
	text-align: center;
	text-decoration: none;
	color: var(--font-color);
	font-size: 14px;
	background-color: var(--primary-color);
	border: none;
}
.s-button {
	padding: 10px;
	border-radius: var(--card-radius);
	cursor: pointer;
	font-weight: 400;
	font-family: Poppins, sans-serif;
	text-align: center;
	text-decoration: none;
	color: #000;
	font-size: 14px;
	background-color: var(--secondary-color);
	border: none;
}
.pg-hdr {
	margin: 0;
	font-size: 25px;
}
.input-fields {
	padding: 10px;
	border-radius: var(--card-radius);
	width: 100%;
	border: var(--surface-border);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	background-color: var(--inputs-color);
	color: var(--font-color);
}
.input-fields:focus {
	outline: 0 none;
	outline-offset: 0;
	box-shadow: 0 0 0 0.2rem #07b6d559;
	border-color: var(--primary-color);
}
.input-fields:hover {
	border-color: var(--primary-color);
}
.sub-link {
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	color: var(--primary-color);
	text-align: center;
}
.subtext {
	font-size: 14px;
	margin: 0;
	font-weight: 400;
	color: var(--secondary-color);
}
.created-by {
	font-size: 10px;
	text-align: center;
	font-weight: 400;
	margin: 0;
	color: var(--secondary-color);
	margin-top: 8px;
}
.w {
	color: var(--font-color);
}
.hidden {
	display: none !important;
}
.enquire {
	font-size: 11px;
	text-align: center;
	color: var(--font-color);
	margin: 0;
}
.enquire a {
	color: var(--primary-color);
	text-decoration: underline;
}
.required {
	color: red;
}
.textarea {
	min-height: 50px;
	max-height: 200px;
	resize: vertical;
}
.login-message {
	color: var(--font-color);
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: var(--surface-border);
	border-radius: var(--card-radius);
	padding: 10px;
	box-shadow: var(--box-shadow);
	background-color: var(--secondary-surface);
	outline: 1px solid #ff4343;
	font-size: 0.8rem;
}
.toast-container {
	pointer-events: none;
}
.modern-toast {
	pointer-events: auto;
	font-family: Rubik, sans-serif;
}
.modern-toast-success {
	border-left: 4px solid var(--green);
}
.modern-toast-error {
	border-left: 4px solid var(--red);
}
.modern-toast-warning {
	border-left: 4px solid var(--yellow);
}
.modern-toast-info {
	border-left: 4px solid var(--primary-color);
}
.modern-toast {
	background-color: var(--secondary-surface);
	color: var(--font-color);
}