:root {
	--color-primary: #fdcc0d;
    color-scheme: light;
    --mobile-nav-height: 68px;
    --bg: #f2f1ef;
    --bg-module: #ecebe8;
    --bg-inner: #ffffff;
    --border: #d3d0d1;
    --text: #151922;
    --muted: #667085;
    --brand: #e53934;
    --brand-strong: #9b1c18;
}

body {
	background: #f4f6f8 !important;
	font-family: Poppins;
}

.inputBox {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	margin-bottom: 1rem;
	gap: 3px;
}

.inputBox:last-child {
	margin-bottom: 0px;
}

.inputBox label {
	font-size: 10pt;
	font-weight: 400;
	color: #343a40;
	position: relative;
}

.inputBox:has(:required) label::after {
	content: ' *';
	font-weight: 300;
	color: red;
}

.inputBox .inputItem {
	height: 50px;
	background: #f6f7f9;
	border-radius: 1.5rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: .5rem;
	overflow: hidden;
	padding: 0px 20px;
}

.inputBox .inputItem input,
.inputBox .inputItem select {
	height: 50px;
	background: transparent;
	border: none;
	outline: none;
	width: 100%;
	padding: 0px;
	font-size: 11pt;
	font-weight: 400;
	color: #343a40;
}

.inputBox .inputItem input::placeholder,
.inputBox .inputItem select::placeholder {
	color: #343a4050;
}

.inputBox button {
	background: var(--color-primary);
	border: none;
	height: 50px;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
}

section.title h1 {
	font-size: 20pt;
	font-weight: 400;
	margin-bottom: .5rem;
	color: #161617;
}

section.title p {
	font-size: 11pt;
	font-weight: 400;
	color: #343a40ac;
	margin-bottom: 1rem;
}

section.buttons {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	gap: .5rem;
}

section.buttons button.fill {
	padding: 0 1.5rem;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	height: 50px;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
	transition: all 400ms;
}

section.buttons button.fill:hover {
	background: #ffc600;
}

section.buttons button.regular {
	padding: 0 1.5rem;
	background: transparent;
	border: 1px solid var(--color-primary);
	height: 50px;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
}

/* == loading */

button.loading {
	position: relative;
	color: transparent !important;
}

button.loading::after {
	content: '';
	position: absolute;
	top: calc(50% - calc(20px / 2));
	left: calc(50% - calc(20px / 2));
	width: 20px;
	height: 20px;
	border-radius: 50px;
	animation: rotation 2s infinite linear !important;
	border-top-color: transparent !important;
	border: 3px solid #343a40;
}

button.loading[data-color="gray"]::after {
	border-color: #B3B3B3 !important;
	border-top-color: transparent !important;
}

button.loading[data-color="red"]::after {
	border-width: 2px;
	border-color: var(--color-primary) !important;
	border-top-color: transparent !important;
}

.module {
	padding: 1.5rem;
	border-radius: 1.5rem;
	background: var(--bg-inner);
}

@keyframes rotation {
	0% {
        transform: rotate(0deg);
	}
	100% {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.toast-red {
	background: #ffedec !important;
	color: #c4353a !important;
	box-shadow: 0 3px 6px -1px rgb(0 0 0 / 0%), 0 10px 36px -4px rgb(232 77 77 / 28%) !important;
}

.toast-yellow {
	background: #fff6e7 !important;
	color: #eba834 !important;
}

@media (max-width: 575px) {
	.inputBox .inputItem input,
	.inputBox .inputItem select {
		font-size: 16px;
	}

	.inputBox button {
		width: 100%;
		font-size: 14px;
	}
}