:root {
	--bg-dark: #2f2f2f;
	--defaultFamily: "Assistant", sans-serif;
	--bg-logo: #ff7024;
	--bg-blue: #3f5d99;
	--bg-grey: #dedede;
	--bg-extra-dark: #1e1e1e;
	--text-white: #fff;
	--text-dark: #4d4d4d;
}

* {
	font-family: var(--defaultFamily);
}

body {
	margin: unset;
	color: var(--text-dark);
}

img {
	display: block;
}

svg #plain {
	fill: var(--bg-extra-dark);
	stroke: var(--bg-extra-dark);
}

svg #empha {
	fill: var(--bg-logo);
}

.container {
	width: clamp(910px, 80vw, 1400px);
	display: flex;
	margin: auto;
	padding: 2rem;
}

.container-s {
	width: clamp(300px, 50vw, 600px);
	display: flex;
	margin: auto;
	padding: 2rem;
}

.container-m {
	width: clamp(500px, 70vw, 1200px);
	display: flex;
	margin: auto;
	padding: 2rem;
}

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

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

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

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

/* shared logic */
section {
	isolation: isolate;
}

toast {
	width: clamp(300px, 50vw, 1000px);
	padding: 1rem 1.5rem;
	position: fixed;
	top: 0;
	transform: translateY(-100px);
	left: 0;
	right: 0;
	margin: auto;
	transition: 800ms;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 1px 1px 5px #515151;
	z-index: 5;
	opacity: 0;
}

toast.success {
	transform: translateY(0);
	background: #d8ffd8;
	color: green;
	opacity: 1;
}

toast.failed {
	transform: translateY(0);
	background: #ffd8d8;
	color: rgb(194, 23, 23);
	opacity: 1;
}

toast.info {
	transform: translateY(0);
	background: #fff0ad;
	color: rgb(255, 200, 47);
	opacity: 1;
}

.close-toast {
	float: right;
	margin-right: 1rem;
	cursor: pointer;
}

.img-container {
	position: relative;
}

.img-container img {
	max-width: 100%;
	/* width: 100%;
	height: 100%; */
	max-height: 100%;
}

button {
	color: var(--bg-logo);
	border-radius: 25px;
	border: 1px solid var(--bg-logo);
	font-weight: 600;
	padding: 0.5rem 1rem;
	background-color: transparent;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.btn-alt {
	color: var(--text-white);
	border: 1px solid var(--text-white);
	background-color: var(--bg-extra-dark);
}

button:hover {
	color: var(--text-white);
	background-color: var(--bg-logo);
}

label {
	width: fit-content;
}

select,
input {
	padding: 5px 3px;
	box-sizing: border-box;
}

.anchor-color {
	color: var(--bg-logo);
}

.disclaimer {
	font-size: 0.8rem;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

/* Lottie */
.lottie {
	position: fixed;
	z-index: 4;
	width: clamp(300px, 30vw, 500px);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	isolation: isolate;
	display: none;
}

.lottie.overlay {
	display: block;
}

.lottie.overlay::after {
	z-index: -1;
	content: "";
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: var(--bg-dark);
	opacity: 0.8;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}

/* flex */

.flex-col {
	display: flex;
	flex-direction: column;
}

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

/* grid */

.grid {
	display: grid;
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* shared settings */
a {
	text-decoration: none;
	color: unset;
}

p {
	margin: 0;
}

li {
	list-style: none;
	padding: unset;
	margin: unset;
}

/* h3{
	color:#000000;
}

h4{
	color: #000000;
}

p{
	color: #000000;
} */

.margin-s {
	margin: 1rem;
}

.margin-unset-lr {
	margin-left: unset;
	margin-right: unset;
}

.margin-m {
	margin: 2rem;
}
.margin-l {
	margin: 3rem;
}

.padding-s {
	padding: 1rem;
}

.padding-m {
	padding: 2rem;
}

.padding-l {
	padding: 3rem;
}

.gap-s {
	gap: 1rem;
}

.gap-m {
	gap: 2rem;
}

.gap-l {
	gap: 3rem;
}

.jcc {
	justify-content: center;
}

.jsb {
	justify-content: space-between;
}

.jse {
	justify-content: space-evenly;
}

form .wrapper {
	margin: 1rem 0;
}

/* Unique (Not shared / Not Reusable for other project) */
.text-center {
	text-align: center;
}

#map {
	min-height: 40vh;
}

h1.underline,
h2.underline {
	position: relative;
	display: inline-block;
	width: fit-content;
	padding-bottom: 1rem;
	margin: 1rem auto;
	text-align: center;
	margin-bottom: 2rem;
}

.bg-dark h2.underline {
	color: var(--bg-logo);
}

h1.underline::after,
h2.underline::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	background-color: var(--bg-logo);
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.overlay-para {
	position: absolute;
	bottom: 10%;
	left: 3%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 1rem;
}

form.setting-1 {
	padding: 2rem;
	margin: auto;
	width: 70%;
	text-align: center;
}
.card-tall {
	width: clamp(250px, 20vw, 400px);
	background-color: var(--bg-grey);
	text-align: center;
}

.card-tall h3 {
	color: var(--bg-logo);
	margin: unset;
}

.card-tall .img-container + .flex-col {
	padding: 2rem;
}

.card-tall .margin-m {
	margin-top: auto;
}

.card-small .img-container {
	width: clamp(100px, 10vw, 300px);
}

li.header {
	font-weight: 600;
	color: var(--bg-logo);
}

.setting-1 .grid-2 {
	grid-template-columns: 1fr 2fr;
	column-gap: 2rem;
	text-align: left;
	width: fit-content;
}

.setting-1 .wrapper {
	gap: 0.5rem;
	justify-content: space-between;
	flex-direction: column;
}

.wrapper.narrow select,
.wrapper.narrow input:not([type="checkbox"]) {
	width: clamp(150px, 10vw, 300px);
}

.setting-1 input:not([type="checkbox"]) {
	width: clamp(200px, 15vw, 400px);
}

.badge svg {
	height: auto;
}

@media only screen and (min-width: 350px) and (max-width: 910px) {
	.container {
		width: clamp(300px, 90vw, 600px);
		padding: unset;
	}

	.container-s {
		width: unset;
		padding: unset;
	}

	.badge > .flex-row {
		overflow-x: scroll;
		justify-content: left;
	}

	.badge svg {
		flex-basis: 30vw;
		flex-shrink: 0;
	}

	.grid-2 {
		grid-template-columns: repeat(1, 1fr);
	}

	form.setting-1 {
		padding: unset;
		width: 90vw;
	}

	.setting-1 .grid-2 {
		grid-template-columns: 1fr;
		column-gap: 2rem;
		text-align: left;
	}

	section.setting-2 {
		padding: 2rem 0;
	}

	.setting-2 .grid-3 {
		grid-template-columns: 1fr;
		column-gap: 2rem;
		text-align: left;
	}

	.setting-3.grid-2:first-child {
		order: 1;
	}

	.card-tall {
		width: unset;
	}

	.overlay-para {
		position: absolute;
		width: 80%;
		height: fit-content;
		top: 5%;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 1rem;
	}

	.wrapper.narrow select,
	.wrapper input:not([type="checkbox"]),
	.wrapper.narrow input:not([type="checkbox"]) {
		width: clamp(250px, 80vw, 320px);
	}
}