* {
	box-sizing: border-box;
	outline: 0;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	width: 100%;
	color: #111;
	background-color: #f0eef6;
	font-family: "Poppins", sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#__next {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.App {
	height: 100%;
	width: 1280px;
	padding: 10px;
	display: flex;
	justify-content: center;
	animation: fadein 250ms both;
}

a {
	width: fit-content;
	color: #3f88c5;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	transition: 0.15s;

	&:hover,
	&:focus {
		color: #3d7bab;
		border-bottom: 1px solid #3d7bab;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #3f88c5;
}

ul,
li {
	list-style: none;
}

/* width */
::-webkit-scrollbar {
	width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #3f88c5;
	border-radius: 2px;

	&:hover {
		background: #1e5c8f;
	}
}

button:not(.reset) {
	cursor: pointer;
	width: 100%;
	color: #fff;
	background: #3f88c5;
	padding: 10px;
	border: 1px solid #3f88c5;
	border-radius: 3px;
	transition: 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}

	&:not(:disabled):hover {
		box-shadow: #105b97 0 0 3px 1px;
		background: #105b97;
		color: #fff;
	}
}
button.red-btn {
	cursor: pointer;
	width: 100%;
	color: #fff;
	background: red;
	padding: 10px;
	border: 1px solid red;
	border-radius: 3px;
	transition: 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}

	&:not(:disabled):hover {
		box-shadow: red 0 0 3px 1px;
		background: red;
		border: 1px solid #ffbabab9;
		color: #fff;
	}
}

input:not(.nostyle) {
	color: #333;
	background: #fff;
	padding: 10px;
	border: 1px solid #dadce0;
	border-bottom: 3px solid #dadce0;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid #3f88c5;
	}
}

input::placeholder {
	font-style: italic;
	color: #dadce0;
}

.input-field {
	& label,
	& input,
	& select {
		width: 100%;
	}
}

.checkbox-field {
	display: flex;
	align-items: center;
	gap: 5px;
}

select:not(.nostyle) {
	color: #333;
	background: #fff;
	padding: 10px;
	border: 1px solid #dadce0;
	border-bottom: 3px solid #dadce0;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid #3f88c5;
	}
}

.reset {
	background-color: inherit;
	color: inherit;
	padding: 0;
	margin: 0;
	border: 0;
}

@media (max-width: 1280px) {
	.App {
		width: 100%;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}