/* Global
----------------------------------------------- */

:root {
	--view-width: 480px;
	--view-spacing: 3rem;
}

body {
	font-family: proxima-nova,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	color: #333;
	background: #eee;
	text-align: left
}

*, :after, :before {
	box-sizing: border-box
}

a {
	color: #00abf7;
	transition: all .3s ease-in-out
}

	a, a:hover {
		text-decoration: none
	}

		a:hover {
			color: #016597
		}

button {
	background: none;
	border: none
}

	button:hover {
		cursor: pointer
	}

h1, h2, h3, h4, h5, h6, p {
	font-weight: 400;
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2
}

h1 {
	font-size: 2.5rem
}

h2 {
	font-size: 2rem
}

h2, h3 {
	line-height: 1.2
}

h3 {
	font-size: 1.75rem
}

h4 {
	font-size: 1.5rem
}

h4, h5 {
	line-height: 1.4
}

h5 {
	font-size: 1.25rem
}

h6 {
	font-size: 1rem;
	line-height: 1.4
}

@media screen and (max-width:768px) {
	h1 {
		font-size: 1.75rem
	}

	h2 {
		font-size: 1.5rem
	}

	h4 {
		font-size: 1.125rem
	}

	h5, h6 {
		font-size: 1rem
	}
}

table {
	border-collapse: collapse
}

dl, ol, ul {
	margin-top: 0;
	margin-bottom: 1rem
}

button, input {
	overflow: visible
}

button, input, optgroup, select, textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

	input[type=checkbox], input[type=radio] {
		box-sizing: border-box;
		padding: 0
	}

img {
	max-width: 100%;
	height: auto;
	border-style: none
}

img, svg {
	vertical-align: middle
}

svg {
	overflow: hidden
}

[hidden] {
	display: none !important
}

*, :after, :before {
	box-sizing: border-box;
}

button, input {
	overflow: visible;
}

button, input, optgroup, select, textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Utils
----------------------------------------------- */
.flex {
	display: flex;
}

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

.align-items-center {
	align-items: center;
}

/* Alert
----------------------------------------------- */
.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: 0 .25rem .25rem 0;
	transition: all .3s ease-in-out;
	background: #fff;
	box-shadow: 0 0.25rem 1rem rgba(0,0,0,.1);
	border-left: 2px solid rgba(0,0,0,0);
}

	.alert.success {
		border-color: #56be43;
	}

	.alert.error {
		border-color: #f04437;
		color: #f04437
	}

/* Text
----------------------------------------------- */

/* Forms
----------------------------------------------- */
.input-group {
	margin-bottom: 1rem;
}

.input-text-label {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-size: .9rem;
}

	.input-text-label:after {
		margin-left: 0.25rem;
		content: "*";
		color: #999;
	}

.input-text {
	display: block;
	width: 100%;
	height: 3rem;
	padding: 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(33, 37, 41, 0.15);
	border-radius: 0.25rem;
	transition: all 0.15s ease-in-out;
}

	.input-text:focus {
		color: #495057;
		background-color: #fff;
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 10%);
	}

.input-checkbox {
	font-size: .9rem;
	line-height: 1.3;
	display: grid;
	grid-template-columns: 1em auto;
	gap: 1rem;
}

.input-checkbox-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--form-background);
	margin: 0;
	font: inherit;
	color: #212529;
	width: 1.33rem;
	height: 1.33rem;
	border: 1px solid rgba(33, 37, 41, 0.3);
	border-radius: 0.125rem;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
	transition: all 0.15s ease-in-out;
}

	.input-checkbox-input::before {
		content: "";
		width: 0.65em;
		height: 0.65em;
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		background-color: #fff
	}

	.input-checkbox-input:checked {
		background: #00abf7;
		border-color: #00abf7;
	}

		.input-checkbox-input:checked::before {
			transform: scale(1);
		}

	.input-checkbox-input:focus {
		outline-offset: max(2px, 0.15em);
	}

.input-text.is-invalid {
	border-color: #dc3545;
	padding-right: calc(1.5em + .75rem);
	background-repeat: no-repeat;
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/* Buttons
----------------------------------------------- */
.button[disabled] {
	pointer-events: none;
}

.button {
	width: auto;
	align-items: center;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	color: #fff;
	background-color: #00abf7;
	border-color: #0099de;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-shadow: none;
}

	.button:focus {
		outline: none;
		box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
	}

	.button:hover {
		color: #fff;
		background-color: #0088c4;
		border-color: #0088c4;
	}

	.button.outlined {
		background: transparent;
		color: #00abf7;
		border-color: #00abf7;
	}

		.button.outlined:hover {
			background-color: #00abf7;
			color: #fff;
		}

.outlined-secondary-btn {
	display: inline-block;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border: 2px solid #6c757d; /* Border color */
	color: #6c757d; /* Text color */
	border-radius: 4px;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

	.outlined-secondary-btn:hover {
		color: #fff; /* Text color on hover */
		background-color: #6c757d; /* Background color on hover */
		border-color: #6c757d; /* Border color on hover */
	}



/* Loading
----------------------------------------------- */
.loading {
	display: flex;
	justify-content: center;
	align-items: center;
}

	.loading:after {
		content: '';
		width: 20px;
		height: 20px;
		max-width: 20px;
		max-height: 20px;
		margin: auto 0.5rem;
		border: 2px solid rgba(0, 0, 0, 0.15);
		border-top-color: #fff;
		border-radius: 50%;
		z-index: 90;
		animation: loadingSpin 0.6s linear infinite;
		transition: all 0.6s ease-in-out;
	}

@keyframes loadingSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Layout
----------------------------------------------- */
.buffini-auth-outer-container {
	display: flex;
	align-items: center;
	min-height: 100vh;
	background: #f3f3f3;
}

.buffini-auth-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 2rem auto;
}

.buffini-auth-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.buffini-auth-footer {
	max-width: var(--view-width);
	width: 100%;
	display: flex;
	margin: auto;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	margin-top: 2rem;
	color: #999;
}

	.buffini-auth-footer a {
		color: #999;
	}

.buffini-auth-view {
	background: #fff;
	border-radius: 0 0 0.5rem .5rem;
	width: 100%;
	max-width: var(--view-width);
	margin: auto;
	padding: 32px;
	box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.05), 0 2px 2px hsl(0deg 0% 0% / 0.05), 0 4px 4px hsl(0deg 0% 0% / 0.05), 0 8px 8px hsl(0deg 0% 0% / 0.05), 0 16px 16px hsl(0deg 0% 0% / 0.05), 0 32px 32px hsl(0deg 0% 0% / 0.05);
}

.buffini-auth-email {
	width: 100%;
}

	.buffini-auth-email h5 {
		overflow: hidden;
		text-overflow: ellipsis;
	}

@media all and (max-width: 640px) {
	.buffini-auth-view {
		width: 95%;
		padding: 1rem;
	}
}

/* Login
----------------------------------------------- */
.login-form {
	display: flex;
	flex-direction: column;
}

.login-forgot-password-link {
	border-right: 1px solid rgba(33, 37, 41, 0.15);
	padding-right: 0.5rem;
	margin-right: 0.5rem;
}

.login-remember-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.login-action-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.login-button {
	width: auto;
}

/* Password
----------------------------------------------- */
.password-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.reset-password-txt {
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 1em;
	margin-bottom: 1em;
	font-size: 1.1rem;
}


/* Help
----------------------------------------------- */
.help-actions {
	margin-top: 2rem;
}

/* Utils
----------------------------------------------- */
.text-error {
	color: #dc3545;
}

.text-success {
	color: #56be43;
}