html {
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.center {
	text-align: center;
}



@font-face {
	font-family: "Gotham";
	src: url("../fonts/Gotham-Black.otf");
}


.LogoTextLight {
	font-family: "Gotham" !important;
	color: #ffffff !important;
	user-select: none;
}

.LogoTextLight a {
	color: rgba(255, 255, 255, 0.53) !important;
}

.LogoTextDark {
	font-family: "Gotham" !important;
	color: #092f56 !important;
	user-select: none;
}

	.LogoTextDark a {
		color: #9c7a42 !important;
	}


.logoHolder {
	display: grid;
	grid-row-gap: 0;
	grid-template-columns: auto auto;
	text-align: center;
	margin: auto;
}

	.logoHolder p {
		text-align: left;
		display: inline;
		margin-top: auto;
		margin-bottom: auto;
	}

	.logoHolder img {
		text-align: right;
		display: inline;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		margin-left: auto;
	}


.footer {
	text-align: center;
	user-select: none;
}

.footerFixed {
	position: fixed;
	bottom: 5px;
}

.footer img {
	width: 75px;
}

.footer p {
	font-size: small;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 20px;
	color: rgba(59, 68, 99, 0.75);
}

.animatedLogo:hover {
	cursor: pointer;
}

.animatedLogo:hover > img {
	animation: zoom-in-zoom-out 2s linear infinite;
}

@keyframes zoom-in-zoom-out {
	0% {
		transform: scale(1, 1);
	}

	50% {
		transform: scale(1.25, 1.25);
	}

	100% {
		transform: scale(1, 1);
	}
}

.loadingAnimation {
	max-height: 200px;
	max-width: 200px;
	margin-top: 100px;
	transform-origin: 50% 50%;
	animation: 1.25s linear 0s infinite normal forwards running zoom-in-zoom-out;
}


@keyframes bounce {
	0% {
		animation-timing-function: cubic-bezier(0.1361,0.2514,0.2175,0.8786);
		transform: translate(0,0px) scaleY(1);
	}

	37% {
		animation-timing-function: cubic-bezier(0.7674,0.1844,0.8382,0.7157);
		transform: translate(0,-80px) scaleY(1);
	}


	72% {
		animation-timing-function: cubic-bezier(0.1118,0.2149,0.2172,0.941);
		transform: translate(0,0px) scaleY(1);
	}

	87% {
		animation-timing-function: cubic-bezier(0.7494,0.2259,0.8209,0.6963);
		transform: translate(0,40px) scaleY(0.602);
	}

	100% {
		transform: translate(0,0px) scaleY(1);
	}
}



.userOrderDetail {
	padding: 5px 10px;
	display: grid;
	grid-template-columns: 50px auto 50px;
	border-radius: 8px;
	row-gap: 10px;
	border: 1px solid rgba(0, 0, 0, 0);
	cursor: pointer;
	transition: .2s;
}


.userOrderDetail:hover {
	background-color: rgba(102, 106, 108, 0.1);
	border: 1px solid #e21a21;
	border-radius: 8px;
}

.userOrderDetail img {
	text-align: center;
	max-width: 40px;
	margin: auto;
}

.userOrderDetail h2 {
	margin: auto;
	margin-left: 10px;
	color: #e21a21;
}
.userDetail {
	margin-top: auto;
	margin-bottom: auto;
}

.fileDetail {
	width: 50px;
	height: 50px;
	background-image: url(/img/file.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.fileDetail p{
	margin: auto;
	margin-bottom: 5px;
	color: #e21a21;
	font-weight: bold;
	font-size: 13px;
}

.fileDetailLarge {
	width: 500px;
	height: 500px;
	background-image: url(/img/file.png);
	background-repeat: no-repeat;
	background-size: 500px 500px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: auto;
}

.fileDetailLarge p {
	margin: auto;
	margin-bottom: 125px;
	color: #e21a21;
	font-weight: bold;
	font-size: 1em;
	max-width: 300px;
}

.userDetail h2 {
	text-align: left;
	margin: 0;
	padding: 0;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 2px;
}

.userDetail p {
	text-align: left;
	margin: 0;
	padding: 0;
	padding-left: 20px;
	font-size: 14px;
	color: #97A0AF;
}


.searchGrid {
	display: grid;
	grid-row-gap: 0px;
	grid-template-columns: auto 100px;
}

.searchGrid {
	display: grid;
	grid-row-gap: 0px;
	grid-template-columns: auto 100px;
}

.searchGrid2 {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: 47% 47% calc(6% - 20px);
}

.searchGrid3 {
	display: grid;
	grid-column-gap: 5px;
	grid-template-columns: calc(19% - 5px) calc(19% - 5px) calc(19% - 5px) calc(19% - 5px) calc(19% - 5px) 5%;
}

.searchInput {
	border: 1px solid transparent;
	padding: 5px;
	margin: 5px;
	width: calc(100% - 10px);
	height: 40px;
	background-color: rgba(232, 232, 232, 0.52);
	outline: none;
}

	.searchInput:focus {
		box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.5);
	}

.primaryButton {
	padding: 10px 15px;
	border-radius: 5px;
	background-color: var(--modal-button-color);
	color: var(--modal-button-text-color);
	cursor: pointer;
	outline: none;
	border: solid 1px var(--modal-button-color);
	min-height: 40px;
	font-size: 16px;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	margin: 0 5px;
}

.primaryButton:hover {
	opacity: .8;
}


	.primaryButton:disabled {
		opacity: .3;
		cursor: not-allowed;
	}


.sectionDiv {
	padding: 10px 0;
	word-wrap: break-word;
	text-align: left;
	background-color: white;
	border: 1px solid #ddd;
	text-align: center;
}

.searchPane {
	margin-left: 15px;
	display: none;
	width: 800px;
	z-index: 500;
	position: absolute;
	padding-right: 5px;
	box-shadow: 0 10px 20px 2px rgba(187, 185, 185, 0.35);
	background-color: var(--website-bg-color);
}

.imageButton {
	padding: 10px 15px;
	border-radius: 5px;
	background-color: transparent;
	color: var(--modal-button-color);
	cursor: pointer;
	outline: none;
	border: solid 1px var(--modal-button-color);
	min-height: 40px;
	font-size: 16px;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	margin: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.imageButton img {
	margin: auto;
    max-height: 25px;
}

.imageButton:not(:disabled):hover {
	background-color: rgba(137, 0, 0, .05);
}

.imageButton:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.tableCheckbox {
	margin: auto;
	background-color: transparent;
	transform: scale(1.5);
	outline: none;
}