input[type='submit'],
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.25rem;
	cursor: pointer;
	padding: 10px 15px;
	color: var(--color-1-reverse);
	background: var(--color-1);
	border-radius: var(--button-radius);
	border: none;
	text-decoration: none;
	font: 500 .9rem/.9rem var(--font-sans-serif);
}

	input[type='submit']:hover,
	.button:hover {
		opacity: .9;
	}

	.button.reverse {
		color: var(--color-1);
		background: var(--color-1-reverse);
	}

	.button.button-alt {
		background: var(--color-2);
		color: var(--color-2-reverse);
		border: none;
		font-weight: 500;
	}

		.button.button-alt.reverse {
			background: var(--color-2-reverse);
			color: var(--color-2);
		}

	.button.button-cta {
		background: var(--color-success);
		color: var(--color-success-reverse);
		border: none;
		font-weight: 500;
	}

		.button.button-cta.reverse {
			background: var(--color-success-reverse);
			color: var(--color-success);
		}

			.button.button-cta.reverse.outline {
				background: var(--color-success-reverse);
				color: var(--color-success);
				border: 2px solid var(--color-success);
			}

	.button.button-red {
		background: var(--color-error);
		color: var(--color-error-reverse);
		border: none;
		font-weight: 500;
	}

		.button.button-red.reverse,
		.button.button-red:hover {
			background: var(--color-error-reverse);
			color: var(--color-error);
		}

			.button.button-red.reverse:hover {
				background: var(--color-error);
				color: var(--color-error-reverse);
			}

	.button.button-soft {
		background: rgba(0,0,0,.08);
		color: var(--color-dark);
		border: var(--border-color);
		font-weight: 500;
	}

	.button.button-big {
		font-size: 1.1rem !important;
		line-height: 1.1rem !important;
		padding: 10px 20px !important;
	}

	input[type='submit'].loading,
	.button.loading {
		cursor: wait;
		opacity: .6;
	}

		input[type='submit'].loading::before,
		.button.loading::before {
			display: inline-block;
			font-family: var(--font-icon);
			font-weight: 500;
			content: "\f3f4";
			margin-right: 5px;
			animation: spin 1s infinite linear;
		}

	input[type='submit'].loading i,
	.button.loading i {
		display: none;
	}

	.button.button-more::after {
		font-family: var(--font-icon);
		font-size: .8rem;
		line-height: .8rem;
		content: "\f178";
		opacity: 1;
		margin: 2px -5px 0 5px;
	}

.tabs {
	display: flex;
	align-items: center;
}

.tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.25rem;
	cursor: pointer;
	padding: 10px 15px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color) !important;
	color: var(--sub-text-color);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	font: var(--button-font-weight) .9rem/.9rem var(--font-sans-serif);
}

.tab:hover {
	color: var(--text-color);
}

	.tab.active {
		background-color: var(--color-lightest);
		color: var(--text-color);
		font-weight: 800;
		border-bottom: none !important;
	}