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

html,
body {
	min-width: 320px !important;
	width: auto !important;
	height: auto !important;
}

html {
	box-sizing: content-box !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100vh !important;
	background: rgb(235, 235, 235) !important;
	font-size: 16px !important;
	font-family: "Myriad Pro Semi Bold", Verdana, Tahoma, sans-serif !important;
	line-height: 1.2 !important;
	overflow: visible !important;
	overflow-y: scroll !important;
}

@media (max-width : 480px) {
	html {
		font-size: 12px !important;
	}
}

@media (max-width : 360px) {
	html {
		font-size: 11px !important;
	}
}

@media (max-width : 320px) {
	html {
		font-size: 10px !important;
	}
}

body {
	max-width: 800px !important;
	min-height: calc(100vh - 1rem) !important;
	margin: auto !important;
	padding-bottom: 1rem !important;
	background: rgb(255, 255, 255) !important;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1) !important;
}

.focus-button,
/* :not for export buttons prevents the data table css being overridden by this rule when data-export attribute is used */
form button:not(.ui):not(.button):not(.dataTable-csvButton):not(.dataTable-printButton) {
	position: relative;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	background: rgb(170, 170, 170);
	box-shadow: 2px 2px 1px rgba(255, 255, 255, 0.2) inset,
				-2px -2px 1px rgba(0, 0, 0, 0.2) inset;
	color: rgb(255, 255, 255);
	cursor: pointer;
}

@media (hover) {
	.focus-button:hover:before,
	form button:not(.ui):not(.button):hover:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.1);
	}

	.focus-button:active:before,
	form button:not(.ui):not(.button):active:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
	}
}

form.loading .focus-button,
form.loading button:not(.ui):not(.button) {
	color: transparent !important;
	cursor: progress !important;
}

form.loading .focus-button img,
form.loading button:not(.ui):not(.button) img {
	visibility: hidden;
}

form.loading .focus-button:after,
form.loading button:not(.ui):not(.button):after {
	content: '';
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	height: 1.5rem;
	border: 0.3rem solid rgba(0, 0, 0, 0.4);
	border-top-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	animation: loading 0.6s infinite linear;
}

main input[type="text"],
main input[type="password"],
main input[type="email"],
main input[type="date"],
main input[type="number"],
main input:not([type]),
main select {
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: rgb(255, 255, 255);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1) inset;
	padding: 0.25rem 0.5rem;
	font-size: 1rem;
	width: 200px;
}

.sr-only {
	position: absolute;
	top: -99999px;
	left: -99999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@keyframes loading {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}