.asterisk {
	font-size: 0.5rem;
	vertical-align: super;
}

.pe-cursor {
	cursor: pointer;
}

* {
	box-sizing: border-box;
}

/* readonly=true, then opacity to 0.9 */
input[readonly] {
	background-color: var(--bs-secondary-bg) !important;
	border-color: var(--bs-border-color) !important;
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none !important;
}

@media screen and (max-width: 768px) {
	/* MOBILE */
	#mainDiv {
		flex-direction: column;
	}
	#mainDiv a {
		width: 100%;
	}

	/* Nav links */

	#navbar .navbar-nav {
		gap: 1rem !important;
		font-size: 1.2rem;
	}

	#navbar .navbar-nav li.nav-item {
		padding-top: 0.5rem;
		border-top: 1px solid var(--bs-border-color);
	}

	/* Dropdowns */

	#navbar .navbar-nav .dropdown-menu.show {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	#navbar .navbar-nav ul li:first-of-type .dropdown-item {
		border-top: none;
	}

	#navbar .navbar-nav .dropdown-item {
		font-size: 1.2rem;
		border-top: 1px solid var(--bs-border-color);
		padding-top: 0.5rem;
	}
}

@media screen and (min-width: 768px) {
	/* DESKTOP */
	#mainDiv {
		justify-content: center;
		gap: 5vh !important;
	}

	#mainDiv a {
		flex: 1 0 20%;
		height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 4vh !important;
	}

	.border-md-none {
		border-top: none !important;
		border-right: none !important;
		border-left: none !important;
		border-bottom: none !important;
		border: none !important;
	}
}

.flashingSuccessBorder {
	animation: flashingBorder 1s;
}

.flash {
	animation: flash 0.5s alternate infinite;
}

@keyframes flash {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.6;
	}
}

@keyframes flashingBorder {
	0% {
		border-color: #86b7fe;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	}
	50% {
		border-color: greenyellow;
		box-shadow: 0 0 0 0.25rem rgba(13, 253, 17, 0.5);
	}
	100% {
		border-color: #86b7fe;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	}
}

/* Fix border radius for buttons in input-groups */
.input-group button.btn {
	border-top-right-radius: var(--bs-border-radius) !important;
	border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Fix for border color not being shown because we added border-primary to input (to mark as required)  */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid {
	border-color: var(--bs-form-invalid-border-color) !important;
}

.form-select.is-valid,
.was-validated .form-select:valid {
	border-color: var(--bs-form-valid-border-color) !important;
}

/* Logo CSS */
html[data-bs-theme="dark"] .logo {
	filter: invert(1);
}

.sizeElement {
	width: calc(100% / 4 - 1rem);
}

.bgDangerHover:hover {
	background-color: #dc3545 !important;
}

.bgDangerHover {
	transition: 0.2s;
}

.uploadImgContainer {
	position: relative;
	width: 25%;
}

.uploadImgContainer button {
	position: absolute;
	top: 2%;
	right: 2%;
}

#barcodeVideo {
	text-align: center;
}

#barcodeVideo video {
	width: 40%;
}

#barcodeVideo .drawingBuffer {
	display: none;
}

.table tbody .img-thumbnail {
	max-width: 300px;
}

@media screen and (max-width: 768px) {
	#barcodeVideo video {
		width: 100%;
	}

	.sizeElement {
		width: calc(100% / 2 - 0.5rem);
	}
}

/* .list-group > div:nth-of-type(even)::before { */
.depth::before {
	/* Lighten every second element so its easier to track hierarchy */
	opacity: 0.1;
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	left: 0px;
	top: 0px;
	border: inherit;
	border-radius: inherit;
}

.depth-1::before {
	background-color: #fff;
}

.depth-2::before {
	background-color: #a0a0a0;
}

#categories .list-group-item a,
#categories .list-group-item button {
	position: relative;
	z-index: 5;
}

@media screen and (max-width: 768px) {
	table#orders th {
		min-width: 25vw !important;
	}
}

#printContainer *,
.printTable,
.printTable * {
	color: black !important;
	border-color: black !important;
}

#printContainer table#printProductWholesaleTable thead,
.printTable thead {
	font-size: 0.7rem !important;
}

#printContainer table#printProductWholesaleTable tbody,
.printTable tbody {
	font-size: 0.8rem !important;
}

#printContainer table#customerInfoTable tr td:nth-child(1),
#printContainer table#companyInfoTable tr td:nth-child(1) {
	padding-left: 0.5rem;
	width: 30%;
}

/* screen less than 1024 */
@media screen and (max-width: 1024px) {
	#printContainer table#customerInfoTable tr td:nth-child(1),
	#printContainer table#companyInfoTable tr td:nth-child(1) {
		width: auto;
	}
}