@import "../fonts/icomoon/style.css";
@import "theme.css";

@import "image_lightbox.css";
@import "input_styling.css";
@import "loader.css";
@import "list_group_animate.css";
@import "rgb.css";
@import "search_select.css";
@import "slide_animate.css";
@import "switch.css";
@import "tooltip.css";

:root {
	--font-regular: "Roboto", sans-serif;
	--header-height: 55px;
}

* {
	font-family: var(--font-regular);
}

html {
	scroll-behavior: smooth;
}

[name="result-list"] {
	overflow: overlay;
}

.header {
	color: #c2c7d0;
	padding: 0.5rem 1rem;
	font-weight: 300;
}

.main-header {
	height: calc(3.5rem - 1px);
}

.content-wrapper {
	margin-top: calc(3.5rem - 1px) !important;
	padding-bottom: calc(3.5rem - 1px) !important;
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1037;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #fff;
	padding: 0.5rem 1rem;
	border-top: 1px solid #dee2e6;
	height: calc(3.5rem - 1px);
}

.comment-input-wrapper {
	padding: 0.375rem 0.5rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-top: 0;
	position: relative;
}

.comment-input-wrapper.fancy {
	padding: 0.375rem;
	margin-top: 0.4rem;
	border: none;
}

.comment-input-wrapper textarea {
	width: 100%;
	resize: none;
	line-height: 1em;
	padding: 0.375rem 0.5rem;
	padding-right: 2rem;
	border: 1px solid #dee2e6;
	border-radius: 0.9em;
	height: 1.8rem;
	overflow-y: hidden;
}

.comment-input-wrapper button {
	position: absolute;
	right: 1rem;
	bottom: 0.6rem;
	font-size: 120%;
	color: var(--primary);
	border: none;
	background-color: transparent;
	transition: filter 200ms;
	padding: 0;
}

.comment-input-wrapper button:hover i {
	filter: opacity(80%);
}

.comment-input-wrapper button:active i {
	font-size: 1.1rem;
}

/* width */
:is(
		[name="result-list"],
		.scrollable,
		.select-items,
		.comment-section,
		.product-data,
		.product-card-row,
		.chip-container,
		.ebay-stores-container,
		.file-list,
		.image-list,
		.warning-list,
		.procedures,
		.lightbox .lightbox-content .row,
		.scrollbar,
		.scrollbar .select__value-container,
		.scrollbar .select__menu-list
	)::-webkit-scrollbar {
	margin-right: 2px;
	margin-left: -5px;
	width: 1em;
}

/* Background */
:is(
		[name="result-list"],
		.scrollable,
		.select-items,
		.comment-section,
		.product-data,
		.product-card-row,
		.chip-container,
		.ebay-stores-container,
		.file-list,
		.image-list,
		.warning-list,
		.procedures,
		.lightbox .lightbox-content .row,
		.scrollbar,
		.scrollbar .select__value-container .scrollbar .select__menu-list
	)::-webkit-scrollbar-track {
	background: transparent;
}

.scrollable.dropdown-menu {
	background: white;
}

/* Handle */
:is(
		[name="result-list"],
		.scrollable,
		.select-items,
		.comment-section,
		.product-data,
		.product-card-row,
		.chip-container,
		.ebay-stores-container,
		.file-list,
		.image-list,
		.warning-list,
		.procedures,
		.lightbox .lightbox-content .row,
		.scrollbar,
		.scrollbar .select__value-container,
		.scrollbar .select__menu-list
	)::-webkit-scrollbar-thumb {
	background: var(--secondary);
	border-radius: 5em;
	border: solid 0.25em transparent;
	background-clip: padding-box;
}

.col10-1 {
	flex: 0 0 10%;
	max-width: 10%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-2 {
	flex: 0 0 20%;
	max-width: 20%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-3 {
	flex: 0 0 30%;
	max-width: 30%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-4 {
	flex: 0 0 40%;
	max-width: 40%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-5 {
	flex: 0 0 50%;
	max-width: 50%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-6 {
	flex: 0 0 60%;
	max-width: 60%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-7 {
	flex: 0 0 70%;
	max-width: 70%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-8 {
	flex: 0 0 80%;
	max-width: 80%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-9 {
	flex: 0 0 90%;
	max-width: 90%;
	padding-left: 15px;
	padding-right: 15px;
}

.col10-10 {
	flex: 0 0 100%;
	max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

.form-control.flat:disabled {
	border: 0;
	box-shadow: none;
}

.grabbable {
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.grabbable:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.manager-image {
	max-height: 10em;
}

.popover {
	max-width: 100%;
}

.img-box,
.product-img-box {
	opacity: 0.4;
	max-height: 10em;
	transition: transform 0.3s ease;
}

.img-box-selected,
.product-img-box-selected {
	opacity: 1;
	border: 1px solid;
	transform: scale(1.05);
}

.order-dashboard .nav-link {
	color: black;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link {
	color: var(--secondary);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: var(--active);
}

.sidebar-mini .main-sidebar .nav-link {
	width: calc(250px - 0.5rem);
}

.sidebar-mini .main-sidebar .nav-treeview .nav-link {
	width: calc(250px - 0.5rem * 2);
	margin-left: 0.5rem;
}

.card-primary.card-outline-tabs > .card-header a.active {
	border-top: 3px solid var(--active);
}

button.btn.btn-sm.btn-default.active {
	background-color: var(--active);
	color: white;
	border-color: var(--active);
}

.fa-1-4x {
	font-size: 1.4em;
}

.strike-through-text {
	text-decoration-line: line-through;
}

select option:disabled {
	color: LightGray;
}

.required-label::after {
	content: " *";
	color: red;
}

.not-valid {
	border: #c75043 1px solid !important;
}

.not-invalid {
	border: #3c9660 1px solid !important;
}

.sticky-table-head {
	position: sticky;
	top: 0;
	z-index: 80;
}

.badge-processing {
	color: black;
	background-color: #e6e63a;
}

.order-dashboard .table {
	font-size: 0.9rem;
}

.order-dashboard .table th,
.order-dashboard .table td {
	padding: 0.5rem;
}

.order-dashboard .same-order td {
	border-top: none;
}

.table tbody > tr > td:first-of-type {
	padding-left: 0.5rem;
}

.row-hoverable:hover {
	background-color: rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.h-200px {
	max-height: 200px;
}

.modal {
	overflow-y: auto;
}

.comment-section {
	overflow-y: auto;
	min-height: 34px;
	word-break: break-word;
}

.comment-section:not(.fancy) {
	max-height: 20vh;
}

.tab-constant {
	display: flex;
}

.tab-constant > .tab-pane {
	display: block !important; /* undo "display: none;" */
	visibility: hidden;
	margin-right: -100%;
	width: 100%;
}

.tab-constant > .active {
	visibility: visible;
}

.shake {
	animation: shake 0.3s;
}

.autocomplete {
	/*the container must be positioned relative:*/
	position: relative;
	display: inline-block;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
	/*when hovering an item:*/
	background-color: #e9e9e9;
}

.autocomplete-active {
	/*when navigating through the items using the arrow keys:*/
	background-color: DodgerBlue !important;
	color: #ffffff;
}

fieldset.image-display {
	display: none;
}

fieldset.active {
	display: block;
}

.pic0 {
	width: 85%;
	margin-left: 15%;
	margin-right: auto;
	display: block;
}

.product-pic {
	width: 100%;
	margin: 2px 2px 2px 8px;
}

.thumbnails {
	position: absolute;
	width: 15%;
	height: auto;
}

.fit-image {
	width: 100%;
	object-fit: cover;
}

.tb {
	border: 1px solid grey;
	margin: 2px;
	opacity: 0.4;
	cursor: pointer;
}

.tb-active {
	opacity: 1;
}

.thumbnail-img {
	width: 100%;
	height: auto;
}

.bg-muted {
	align-items: center;
	padding: 0.375rem 0.75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	color: #495057;
	text-align: center;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
}

.customer-card {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
	transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow,
		0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
	cursor: pointer;
}

.customer-card:hover {
	transform: scale(1.005);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.clickable:hover {
	background-color: var(--light-gray);
	cursor: pointer;
}

.clickable:active {
	background-color: #e9ecef;
}

.hovered {
	background-color: var(--light-gray);
}

a.nostyle:link {
	text-decoration: inherit;
	color: inherit;
	cursor: auto;
}

a.nostyle:visited {
	text-decoration: inherit;
	color: inherit;
	cursor: auto;
}

.scrollable {
	max-height: 27rem;
	overflow-x: hidden;
	overflow-y: auto;
	overflow: overlay;
}

.scrollable > .scrollable-header {
	position: sticky;
	z-index: 80;
	top: 0px;
}

.cbutton {
	position: relative;
	z-index: 2;
}

.duplicate-warning {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 80%;
	color: #ffc107;
}

.form-control[readonly] {
	background-color: #ffffff;
}

.square {
	aspect-ratio: 1;
	height: 100%;
}

.diagram-crop {
	object-fit: cover;
	aspect-ratio: 1;
}

.product-image-crop {
	object-fit: contain;
	aspect-ratio: 1;
}

.ui-state-highlight {
	height: 6em;
	background-color: grey;
	line-height: 1.2em;
}

img.wide {
	width: auto;
	height: 100%;
}

img.tall {
	width: 100%;
	height: auto;
}

.cursor-pointer,
.cursor-pointer:hover {
	cursor: pointer;
}

.cursor-not-allowed,
.cursor-not-allowed:hover {
	cursor: not-allowed;
}

.bg-light-red-50 {
	background-image: linear-gradient(right, #ff9d9d, #ff9d9d 5%, #f7f7f7 5%, #f7f7f7 100%);
	background-image: -webkit-linear-gradient(right, #ff9d9d, #ff9d9d 5%, #f7f7f7 5%, #f7f7f7 100%);
}

.input-group-select {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-color: #282f36;
	border-right: 1px solid #282f36;
}

.select-append-group > .form-control {
	border-color: #282f36;
}

.page-header {
	font-size: 3vmin;
}

.search-container {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: white;
	border: 1px solid #bac0ca;
	padding: 0.5rem 0.75rem;
}

.search-container .react-search {
	width: 100%;
	border: none;
	margin-left: 0.5rem;
}

.search-container .react-search::placeholder {
	color: var(--secondary);
}

.tab-title {
	background-color: #eaf0fb;
	display: inline-block;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.admin-card {
	background-image: linear-gradient(right, #b2c9df, #b2c9df 5%, #f7f7f7 5%, #f7f7f7 100%);
	background-image: -webkit-linear-gradient(right, #b2c9df, #b2c9df 5%, #f7f7f7 5%, #f7f7f7 100%);
}

.tech-card {
	background-image: linear-gradient(right, #f2edd0, #f2edd0 5%, #f7f7f7 5%, #f7f7f7 100%);
	background-image: -webkit-linear-gradient(right, #f2edd0, #f2edd0 5%, #f7f7f7 5%, #f7f7f7 100%);
}

.complete-card {
	background-image: linear-gradient(right, #d0e8db, #d0e8db 5%, #f7f7f7 5%, #f7f7f7 100%);
	background-image: -webkit-linear-gradient(right, #d0e8db, #d0e8db 5%, #f7f7f7 5%, #f7f7f7 100%);
}

.admin-card-border {
	border-color: #007bff;
}

.tech-card-border {
	border-color: #ffc107;
}

.complete-card-border {
	border-color: #28a745;
}

.big-checkbox {
	width: 30px;
	height: 30px;
}

.border-dashed {
	border-style: dashed !important;
}

.text-break-all {
	word-break: break-all;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
	background-color: rgba(255, 255, 255, 0.3);
}

.file-window {
	aspect-ratio: 16/9;
	overflow-x: hidden;
	overflow-y: auto;
}

.animate-search-wrap {
	position: absolute;
	right: 0.5rem;
	padding: 0;
}

.animate-input-text {
	height: 2.2rem;
	font-size: 1.1rem;
	display: inline-block;
	font-family: inherit;
	font-weight: 100;
	border: none;
	outline: none;
	color: #555;
	padding: 3px;
	padding-right: 2rem;
	width: 0px;
	position: absolute;
	top: 0;
	right: 0;
	background-clip: content-box;
	z-index: 3;
	transition: width 0.4s cubic-bezier(0, 0.795, 0, 1);
	cursor: pointer;
}

.animate-input-text:focus:hover {
	border-bottom: 1px solid #bbb;
}

.animate-input-text:focus {
	width: 15rem;
	z-index: 1;
	border-bottom: 1px solid #bbb;
	cursor: text;
}
.animate-submit {
	height: 2rem;
	width: 2rem;
	display: inline-block;
	color: #73718e;
	background: transparent;
	border: none;
	position: relative;
	top: 0;
	right: 0;
	z-index: 2;
	cursor: pointer;
	opacity: 1;
	cursor: pointer;
	transition: opacity 0.4s ease;
}

.animate-submit i {
	position: relative;
	right: 0;
}

.animate-submit:hover {
	opacity: 1;
}

/* Primary search */
.animate-search-wrap.primary-search {
	margin-top: -0.9rem;
}

.primary-search > .animate-input-text {
	height: 2rem;
	font-size: 1rem;
	color: black;
	padding-left: 1rem;
}

.primary-search > .animate-input-text:focus:hover {
	border: 1px solid #ced4da;
	border-radius: 2rem;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.primary-search > .animate-input-text:focus {
	width: 18rem;
	z-index: 1;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 2rem;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	cursor: text;
}

.primary-search > .animate-submit {
	height: 2rem;
	width: 2rem;
	color: black;
}

.primary-search > .animate-input-text:focus ~ button i {
	font-size: 1em;
	transition: font-size 0.2s ease;
}

.primary-search > button {
	padding: 0;
}

.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.no-spinner[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.rotate-180 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.rotate-180.down {
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.accordion:has(.show) a i.accordion-btn,
.accordion:has(.collapsing) a i.accordion-btn,
.accordion:has(.show) button i.accordion-btn,
.accordion:has(.collapsing) button i.accordion-btn,
.accordion:has(.show) .card-header i.accordion-btn,
.accordion:has(.collapsing) .card-header i.accordion-btn {
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dropdown-menu li {
	position: relative;
}

.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

.search-bar {
	-webkit-border-radius: 1.2rem !important;
	-moz-border-radius: 1.2rem !important;
	border-radius: 1.2rem !important;
}

.search-btn {
	margin-top: 0.45rem;
	margin-left: -1.8rem;
	z-index: 3;
}

.product-data {
	aspect-ratio: 1.8;
	overflow-y: auto;
	overflow-x: hidden;
}

.high-risk-check {
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}

.add-row-btn {
	position: relative;
}

.add-row-plus {
	position: absolute;
	bottom: -1.6rem;
	left: -2.4rem;
}

.add-row-btn:hover .fa-circle-plus,
.add-row-btn .fa-circle {
	cursor: pointer;
	display: inline;
}

.add-row-btn:hover .fa-circle,
.add-row-btn .fa-circle-plus {
	cursor: pointer;
	display: none;
}

.add-row-btn .fa-circle-plus {
	color: var(--primary);
}

.add-row-btn .fa-circle {
	color: var(--secondary);
	margin-left: 0.4rem;
	font-size: 0.3em;
	line-height: 0.1em;
	vertical-align: 0.8em;
}

.range-data {
	transition: all 500ms ease-in-out 0;
}

.range-data:has(input):nth-of-type(2) .min,
.range-data:has(input):last-of-type .max {
	display: none;
}

.remove-data {
	display: none;
}

li:has(.add-row-btn:hover) {
	border-bottom: 2px solid var(--primary) !important;
}

.fa-small {
	font-size: 0.8rem;
}

/* Lock button -- Start */
.btn-lock {
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	display: inline-block;
	background: #f71f1e;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 0.29rem 0 0 0.4rem;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
	fill: none;
	transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 3;
	stroke-dashoffset: 15;
	transition: all 0.3s ease;
}

.btn-lock svg .lock {
	stroke: #fff;
	stroke-width: 4;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 36;
	transition: all 0.4s ease;
}

.btn-lock svg .lockb {
	fill: #fff;
	fill-rule: evenodd;
	clip-rule: evenodd;
	transform: rotate(8deg);
	transform-origin: 14px 20px;
	transition: all 0.2s ease;
}

.inpLock {
	display: none;
}

.inpLock:checked + label {
	background: #39b26d;
}

.inpLock:checked + label svg {
	opacity: 1;
}

.inpLock:checked + label svg .bling {
	animation: bling 0.3s linear forwards;
	animation-delay: 0.2s;
}

.inpLock:checked + label svg .lock {
	stroke-dasharray: 48;
	animation: locked 0.3s linear forwards;
}

.inpLock:checked + label svg .lockb {
	transform: rotate(0);
	transform-origin: 14px 22px;
}

.page-selector {
	display: flex;
	position: relative;
	align-items: center;
}

.page-selector .page-selector-text {
	min-width: 10rem;
	text-align: center;
	padding: 0.36rem 0.5rem;
	border: 1px solid #ced4da;
	border-left: 0;
	border-right: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
	color: #6c757d;
}

.page-selector .page-selector-btn {
	color: #3c76e0;
	background-color: #deeeff;
	border: 1px solid #3c76e0;
}

.page-selector .page-selector-btn:disabled {
	color: var(--secondary);
	background-color: var(--light-gray);
	border-color: var(--secondary);
}

@-moz-keyframes bling {
	50% {
		stroke-dasharray: 3;
		stroke-dashoffset: 12;
	}
	100% {
		stroke-dasharray: 3;
		stroke-dashoffset: 9;
	}
}

@-webkit-keyframes bling {
	50% {
		stroke-dasharray: 3;
		stroke-dashoffset: 12;
	}
	100% {
		stroke-dasharray: 3;
		stroke-dashoffset: 9;
	}
}

@-o-keyframes bling {
	50% {
		stroke-dasharray: 3;
		stroke-dashoffset: 12;
	}
	100% {
		stroke-dasharray: 3;
		stroke-dashoffset: 9;
	}
}

@keyframes bling {
	50% {
		stroke-dasharray: 3;
		stroke-dashoffset: 12;
	}
	100% {
		stroke-dasharray: 3;
		stroke-dashoffset: 9;
	}
}

@-moz-keyframes locked {
	50% {
		transform: translateY(1px);
	}
}

@-webkit-keyframes locked {
	50% {
		transform: translateY(1px);
	}
}

@-o-keyframes locked {
	50% {
		transform: translateY(1px);
	}
}

@keyframes locked {
	50% {
		transform: translateY(1px);
	}
}

/* Lock Button -- End */

/* 3-way toggle start */

.tw-toggle {
	/* background: #95A5A6; */
	display: inline-block;
	padding: 2px 3px;
	border-radius: 20px;
	position: relative;
	border: 2px solid #95a5a6;
}

.tw-toggle label {
	text-align: center;
	font-family: sans-serif;
	display: inline-block;
	color: #95a5a6;
	position: relative;
	z-index: 2;
	margin: 0;
	text-align: center;
	padding: 2px 3px;
	font-size: 15px;
	/* cursor: pointer; */
}

.tw-toggle input {
	/* display: none; */
	position: absolute;
	z-index: 3;
	opacity: 0;
	cursor: pointer;
}

.tw-toggle span {
	height: 21px;
	width: 21px;
	line-height: 21px;
	border-radius: 50%;
	background: #fff;
	display: block;
	position: absolute;
	left: 22px;
	top: 2px;
	transition: all 0.3s ease-in-out;
}

.tw-toggle input[value="false"]:checked ~ span {
	background: #e74c3c;
	left: 2px;
	color: #fff;
}

.tw-toggle input[value="true"]:checked ~ span {
	background: #27ae60;
	left: 46px;
}
.tw-toggle input[value="-1"]:checked ~ span {
	background: #95a5a6;
	left: 23px;
}

.tw-toggle input[value="false"]:checked + label,
.tw-toggle input[value="true"]:checked + label {
	color: #fff;
}
.tw-toggle input[value="-1"]:checked + label {
	color: #fff;
}

/* 3-way toggle end */

tr.va-mid td {
	vertical-align: middle;
}

.font-size-smaller {
	font-size: smaller;
}

.font-size-small {
	font-size: small;
}

.font-size-x-small {
	font-size: x-small;
}

.font-size-regular {
	font-size: medium;
}

.transit-check {
	position: absolute;
	top: 50%;
	left: -0.6rem;
	-webkit-transform: translateY(-60%);
	-ms-transform: translateY(-60%);
	transform: translateY(-60%);
	z-index: 3;
}

.bg-light-gray {
	color: #6f747c;
}

.btn-filter {
	color: var(--primary);
	background-color: #ffffff;
	border: none;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.btn-filter svg {
	fill: var(--primary);
}

.btn-filter:hover svg {
	fill: #ffffff;
}

.btn-filter:hover {
	color: #ffffff;
	background-color: var(--primary);
}

button.plain-btn {
	background: transparent;
	border: none;
	color: var(--dark);
}

button.plain-btn:hover {
	scale: 1.01;
	color: var(--secondary);
}

button.plain-btn:active {
	scale: 1.05;
}

.card:has(.product-card-graphic) {
	border-radius: 5px;
}

small.select-label {
	position: absolute;
	z-index: 3;
	background: linear-gradient(
		0deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(251, 252, 252, 1) 41%,
		rgba(247, 248, 249, 0) 100%
	);
	top: -0.65rem;
	left: 1rem;
	padding: 0 0.3rem;
	color: #555;
	user-select: none;
}

.product-card-row {
	overflow-x: scroll;
}

.product-card-row .product-card-col {
	padding-right: 15px;
	padding-left: 15px;
	flex: 0 0 19%;
}

.product-card-row .product-card-col:first-child {
	margin-left: -15px;
}

.product-card-graphic {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	align-items: center;
	width: 95px;
	height: 95px;
	border-radius: 25px;
	background-color: var(--light-blue);
}

.asset-card .upload {
	grid-area: upload;
	/* margin: 1.5rem; */
}

.asset-card ul.files li {
	background-color: var(--light-gray);
}

.asset-card ul.files a {
	color: var(--dark);
	text-decoration: underline;
}

.large-file-input input[type="file"],
.small-file-input input[type="file"] {
	display: none;
}

.large-file-input label {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	height: 10rem;
	background-color: var(--light-gray);
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23BBC0C9FF' stroke-width='4' stroke-dasharray='7%2c 15' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e");
	color: var(--primary);
	/* border: 2px dashed var(--secondary); */
	cursor: pointer;
}

.large-file-input div {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	align-items: center;
	width: auto;
	justify-content: center;
	font-weight: bold;
	padding: 0.35rem;
	background-color: var(--light-gray);
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23BBC0C9FF' stroke-width='4' stroke-dasharray='7%2c 15' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e");
	color: var(--primary);
	cursor: pointer;
}

.small-file-input label {
	display: flex;
	flex-direction: column;
	row-gap: 0.6rem;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	height: 100%;
	background-color: var(--light-gray);
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23BBC0C9FF' stroke-width='4' stroke-dasharray='7%2c 15' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e");
	color: var(--primary);
	/* border: 2px dashed var(--secondary); */
	cursor: pointer;
}

.large-file-input label.drag-active,
.small-file-input label.drag-active {
	background-color: var(--light-blue);
}

.large-file-input .drag-file-overlay,
.small-file-input .drag-file-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.repair-add-file {
	display: none;
}

.repair-add-file ~ label {
	margin: 0.5rem 0.75rem;
	padding: 0.2rem 0.75rem;
	content: "Choose File";
	background-color: #dcdfe4;
	color: #6f747c;
	cursor: pointer;
}

.add-file {
	background-color: var(--light-gray);
	padding: 0.5rem 0.75rem;
}

.add-file div:has(small) {
	margin-bottom: 0.5rem;
}

.add-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.file-list {
	max-height: 15rem;
	overflow-y: overlay;
}

.asset-card .upload .image-list {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	overflow-x: auto;
	margin-bottom: 0.7rem;
}

.image-list div {
	position: relative;
	min-width: 7rem;
	max-width: 7rem;
}

.warning-list .row,
.image-preview {
	position: relative;
}

.image-preview img {
	max-height: 10rem;
}

:is(.image-list, .warning-image, .step-image, .image-preview, .consignment-image) button {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
}

.image-list i,
.image-preview i,
.consignment-image i {
	background-color: white;
	outline: 2px solid white;
	border-radius: 10rem;
	font-size: 1.4em;
}

.consignment-image i {
	font-size: 1em;
}

.warning-list .row > button i,
.step-image i {
	background-color: white;
	outline: 2px solid white;
	border-radius: 10rem;
}

.warning-list .row > button {
	position: absolute;
	top: -0.4rem;
	left: 23%;
}

.warning-list .row {
	margin: auto;
}

.warning-list .warning-input .warning-text {
	width: 100%;
	padding-top: 0.4rem;
	padding-left: 0.7rem;
	border: 1px solid #9ba1aa;
	height: 100%;
}

.warning-list .warning-input .warning-text.is-invalid {
	color: var(--danger);
	border-color: var(--danger);
}

.warning-list .warning-input .warning-text.is-invalid textarea::placeholder {
	color: var(--danger);
	opacity: 0.9;
}

.warning-list .warning-input textarea {
	width: 100%;
	padding-right: 1.5rem;
	border: none;
	font-size: 0.95rem;
	height: 100%;
	resize: none;
}

.warning-list .warning-input > button {
	position: absolute;
	top: 0.7rem;
	right: 0.5rem;
}

.warning-list .warning-input > .flex-column {
	position: absolute;
	justify-content: space-between;
	top: 0.7rem;
	right: 0.5rem;
	height: 100%;
	padding-bottom: 1.25rem;
}

.asset-card .filters {
	grid-area: filters;
}

.asset-card .part-filters {
	grid-area: part-filters;
}

.asset-card .asset-header {
	border-bottom: 1px solid #bbc0c9;
	margin-bottom: 1.5rem;
}

.asset-card .part-numbers {
	grid-area: part-numbers;
	padding-top: 2rem;
	border-top: 1px solid #bbc0c9;
}

.asset-card .asset-rule {
	border: 1px solid var(--secondary);
	padding: 0.5rem 1rem;
	display: grid;
	grid-template:
		"title edit"
		"small edit"
		/ auto 3rem;
}

.asset-card .asset-rule small {
	grid-area: small;
	color: var(--secondary);
}

.asset-card .asset-rule small span:not(:last-child)::after {
	content: ", ";
}

.asset-card .asset-rule title {
	grid-area: title;
}

.asset-card .asset-rule .dropright {
	grid-area: edit;
	justify-self: end;
}

.asset-card .asset-rule .dropdown-menu {
	width: max-content;
}

.asset-card .chip-container {
	max-height: 18rem;
	overflow-y: scroll;
}

.procedure-step,
.procedure-needed {
	white-space: pre-wrap;
}

/* Custom range slider */
.custom-range-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
}

.custom-range-input:focus {
	outline: none;
}

/* Webkit */
.custom-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 0.8rem;
	width: 0.8rem;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	margin-top: -5px;
}

.custom-range-input::-webkit-slider-runnable-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background: #474747;
}

.custom-range-input:focus::-webkit-slider-runnable-track {
	background: #474747;
}

/* Moz */
.custom-range-input::-moz-range-thumb {
	height: 0.8rem;
	width: 0.8rem;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
}

.custom-range-input::-moz-range-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background: #474747;
}

/* IE */
.custom-range-input::-ms-thumb {
	height: 0.8rem;
	width: 0.8rem;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
}

.custom-range-input::-ms-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

.custom-range-input::-ms-fill-lower,
.custom-range-input::-ms-fill-upper,
.custom-range-input:focus::-ms-fill-lower,
.custom-range-input:focus::-ms-fill-upper {
	background: #474747;
}

/**
*	styling to mimic a join of a minified table
*	and a list-group from bootstrap
*/
ul.min-table {
	padding: 0;
}

.min-table li {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #dddfe3;
}

.min-thead {
	font-weight: bold;
	background-color: #f7f8f9;
	padding: 0.65rem 0.25rem;
}

.min-trow {
	border-left: 1px solid #dddfe3;
	border-right: 1px solid #dddfe3;
}

.min-trow:nth-child(odd) {
	background-color: #f7f8f9;
}

.min-trow div[class|="col"]:not(:last-child) {
	border-right: 1px solid #dddfe3;
	word-wrap: break-word;
}

.min-trow div[class|="col"] {
	padding: 1rem 0;
	word-wrap: break-word;
}

.max-purchase-price {
	position: absolute;
	top: 3.7rem;
	right: 0.6rem;
}

.product-card-info-btn {
	position: absolute;
	top: 0.8rem;
	right: 0.6rem;
}

.input-counter {
	position: absolute;
	right: 2rem;
	color: rgba(180, 180, 180, 0.95);
}

.input-counter.invalid {
	color: #dc3545;
}

.page-alert {
	margin-left: -1rem;
	margin-right: -1rem;
	border-radius: unset;
}

.header-dropdown {
	position: absolute;
	z-index: 1060;
	top: calc(1rem + 1px);
	right: 1.8rem;
	max-height: 21.5rem;
	width: 16.4rem;
}

.header-dropdown ul a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.search-results {
	position: absolute;
	z-index: 1060;
	top: 100%;
}

/* Breadcrumbs */
/* Style the list */
ul.crumb {
	padding: 0.5rem;
	list-style: none;
	margin-bottom: 0;
}

/* Display list items side by side */
ul.crumb li {
	display: inline;
	font-size: 1em;
	color: #637280;
}

/* Add a slash symbol (/) before/behind each list item */
ul.crumb li + li:before {
	padding: 8px;
	color: #637280;
	content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.crumb li a {
	color: #0275d8;
	text-decoration: none;
}

/* Add a color on mouse-over */
ul.crumb li a:hover {
	color: #01447e;
	text-decoration: underline;
}

.border-inherit {
	border-color: inherit;
	border: solid 1px;
}

.no-transition {
	transition: none;
}

.repair-btn-wrapper {
	position: absolute;
	top: 4rem;
	left: 0;
	right: 0;
	text-align: center;
}

.btn-link-mod {
	color: var(--primary);
	font-weight: bold;
	width: 100%;
	outline: none !important;
	text-align: left;
	padding-left: 0;
}

.btn-link-mod:active,
.btn-link-mod:visited,
.btn-link-mod:hover {
	color: var(--primary);
}

.btn-link-mod i {
	position: absolute;
	right: 1rem;
}

.obj-fit-fill {
	object-fit: fill;
}

.obj-fit-contain {
	object-fit: contain;
}

.obj-fit-cover {
	object-fit: cover;
}

.obj-fit-none {
	object-fit: none;
}

.obj-fit-scale-down {
	object-fit: scale-down;
}

.fa-spin-fast,
.gecko-loader {
	animation: spin-fast 0.8s infinite linear;
}

.gecko-loader {
	content: url("../img/icons/Gecko.svg");
}

.gecko-walker {
	display: flex;
	content: url("../img/icons/Gecko-V2.svg");
	animation: gecko-walker 0.5s cubic-bezier(0, 0, 0, 3) infinite;
}

.text-nowrap {
	text-wrap: nowrap;
}

@supports (position: sticky) {
	.sticky-up {
		position: sticky;
		top: var(--header-height);
		z-index: 1020;
	}
}

.sliding-component {
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: translateY(100%);
	/* Initially off-screen */
	opacity: 0;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.slide-up {
	transform: translateY(0);
	/* Slide up into view */
	opacity: 1;
}

.slide-down {
	transform: translateY(100%);
	/* Slide down out of view */
	opacity: 0;
}

@keyframes gecko-walker {
	0% {
		content: url("../img/icons/Gecko-V2.svg");
	}
	50% {
		content: url("../img/icons/Gecko-V2-flipped.svg");
	}
}

@keyframes spin-fast {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

/* For screens that are less than 768 px (Mobile)  */
@media (max-width: 768px) {
	.text-scale {
		flex-wrap: nowrap;
		text-overflow: ellipsis;
	}

	.order-dashboard .table th,
	.order-dashboard .table td {
		padding: 0.3rem;
	}

	.order-dashboard .table {
		font-size: 0.85rem;
	}

	.search-result {
		padding: 1rem 1rem 0 1rem !important;
	}

	.asset-card .card-body {
		display: grid;
		grid-template:
			"upload"
			"filters"
			"part-filters"
			"part-numbers";
	}
}

/* For screens that are less than 992px (tablet and mobile)  */

@media (max-width: 992px) {
	/* Default font size */
	body {
		font-size: initial;
	}

	.nav-opt-title {
		padding-top: 109px;
		margin-top: -52px;
		position: relative;
		z-index: 1;
	}

	#fake-body {
		margin-top: 52px;
	}

	#customer-edit-details {
		padding-top: 10px;
	}

	#navBar {
		margin-top: 53px;
	}

	#active-alert {
		padding-top: 110px;
		margin-top: -52px;
	}

	.bg-light-red-50 {
		background-image: linear-gradient(bottom, #ff9d9d, #ff9d9d 7%, #f7f7f7 7%, #f7f7f7 100%);
		background-image: -webkit-linear-gradient(bottom, #ff9d9d, #ff9d9d 7%, #f7f7f7 7%, #f7f7f7 100%);
	}

	.admin-card {
		background-image: linear-gradient(bottom, #b2c9df, #b2c9df 7%, #f7f7f7 7%, #f7f7f7 100%);
		background-image: -webkit-linear-gradient(bottom, #b2c9df, #b2c9df 7%, #f7f7f7 7%, #f7f7f7 100%);
	}

	.tech-card {
		background-image: linear-gradient(bottom, #f2edd0, #f2edd0 7%, #f7f7f7 7%, #f7f7f7 100%);
		background-image: -webkit-linear-gradient(bottom, #f2edd0, #f2edd0 7%, #f7f7f7 7%, #f7f7f7 100%);
	}

	.complete-card {
		background-image: linear-gradient(bottom, #d0e8db, #d0e8db 7%, #f7f7f7 7%, #f7f7f7 100%);
		background-image: -webkit-linear-gradient(bottom, #d0e8db, #d0e8db 7%, #f7f7f7 7%, #f7f7f7 100%);
	}

	.scrolling-images {
		height: 4rem;
	}

	.scrolling-div {
		height: 4.4rem;
	}

	.transit-check {
		top: 1rem;
		right: 1rem;
		left: auto;
		transform: translateY(0);
	}
}

.min-h-10 {
	min-height: 10px;
}

/* For screens that are larger than 768 px (Not Mobile)  */
@media (min-width: 768px) {
	.col10-sm-1 {
		flex: 0 0 10%;
		max-width: 10%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-2 {
		flex: 0 0 20%;
		max-width: 20%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-3 {
		flex: 0 0 30%;
		max-width: 30%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-4 {
		flex: 0 0 40%;
		max-width: 40%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-5 {
		flex: 0 0 50%;
		max-width: 50%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-6 {
		flex: 0 0 60%;
		max-width: 60%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-7 {
		flex: 0 0 70%;
		max-width: 70%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-8 {
		flex: 0 0 80%;
		max-width: 80%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-9 {
		flex: 0 0 90%;
		max-width: 90%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col10-sm-10 {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.neg-mt-3 {
		margin-top: -2rem !important;
	}

	.h-md-100 {
		height: 100%;
	}

	.h-md-75 {
		height: 75%;
	}

	.h-md-50 {
		height: 50%;
	}

	.h-md-25 {
		height: 25%;
	}

	.w-md-100 {
		width: 100%;
	}

	.w-md-75 {
		width: 75%;
	}

	.w-md-50 {
		width: 50%;
	}

	.w-md-25 {
		width: 25%;
	}

	.search-result .card-footer .btn-text-primary:not(:disabled):active {
		transform: none;
	}

	.footer-bar {
		transition: margin-left 0.3s ease-in-out;
		margin-left: 250px;
	}

	.asset-card .card-body {
		display: grid;
		grid-template:
			"upload upload"
			"filters part-filters"
			"part-numbers part-numbers"
			/ 50% 50%;
	}
}

/* For screens that are larger than 992px (Not Tablet or Mobile)  */

@media (min-width: 992px) {
	.h-lg-100 {
		height: 100%;
	}

	.h-lg-75 {
		height: 75%;
	}

	.h-lg-50 {
		height: 50%;
	}

	.h-lg-25 {
		height: 25%;
	}

	.w-lg-100 {
		width: 100%;
	}

	.w-lg-75 {
		width: 75%;
	}

	.w-lg-50 {
		width: 50%;
	}

	.w-lg-25 {
		width: 25%;
	}

	.w-lg-10 {
		width: 10% !important;
	}

	.asset-card .card-body {
		display: grid;
		grid-template:
			"upload filters part-filters"
			"part-numbers part-numbers part-numbers"
			/ 33% 33% 34%;
	}
}

.card-dark-border {
	border-top-color: rgba(0, 0, 0, 0.25);
	border-top-style: solid;
	border-top-width: 2px;
	border-right-color: rgba(0, 0, 0, 0.25);
	border-right-style: solid;
	border-right-width: 2px;
	border-bottom-color: rgba(0, 0, 0, 0.25);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-left-color: rgba(0, 0, 0, 0.25);
	border-left-style: solid;
	border-left-width: 2px;
}

.rounded-1 {
	border-radius: 1px;
}

.rounded-2 {
	border-radius: 2px;
}

.rounded-3 {
	border-radius: 3px;
}

.rounded-4 {
	border-radius: 4px;
}

.rounded-5 {
	border-radius: 5px;
}

.rounded-20 {
	border-radius: 20px;
}

.scraper-header {
	background-color: var(--gray-dark);
	color: white;
	padding: 0.75rem;
	font-family: var(--font-regular);
}

.dark-checkbox {
	cursor: pointer;
	accent-color: var(--gray-dark);
	padding-left: 0.3rem;
	font-family: var(--font-regular);
}

input.checkbox-13 {
	cursor: pointer;
	width: 13px;
	height: 13px;
}

.ebay-stores-container {
	height: 200px;
	overflow-y: scroll;
	overflow-x: hidden;
	border-bottom: 1px solid black;
}

.ebay-store-input {
	padding: 0.3rem;
	border-bottom: 1px solid black;
	background-color: white;
}

.ebay-store-row {
	padding: 0.5rem;
}

.ebay-store-row:has(button:hover) {
	background-color: #e54f3b3f;
}

.ebay-store-col {
	display: flex;
	align-items: center;
}

.ebay-store-col-2 {
	display: flex;
	justify-content: space-around;
}

.store-btn {
	height: 38px;
	width: 60px;
}

.list-group-close-btn {
	background-color: transparent;
	border: 0;
	position: absolute;
	top: 1px;
	right: 4px;
}
.ebay-shopping-list-card {
	display: flex;
	flex-direction: column;
	background-color: white;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 6px 0px, rgba(14, 30, 37, 0.32) 0px 2px 6px 0px;
	padding: 2rem;
}

.light-grey-background {
	background-color: #f7f8f9;
}

.btn3d {
	position: relative;
	top: -3px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 1px;
	margin-right: 1px;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	outline-style: none;
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	top: 1px;
}

.btn3d.btn-primary {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 4px 0 0 #4d5bbe,
		0 4px 4px 1px rgba(0, 0, 0, 0.5);
	background-color: #4274d7;
}

.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #4274d7;
}

.btn3d.btn-white {
	color: #666666;
	box-shadow: 0 0 0 1px #d5d5d5 inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 4px 0 0 #e3e3e3,
		0 4px 4px 1px rgb(0 0 0 / 40%);
	background-color: #fff;
}

.btn3d.btn-white:active,
.btn3d.btn-white.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 4px 1px rgba(0, 0, 0, 0.1);
	background-color: #fff;
}

.btn3d.btn-default {
	color: #666666;
	box-shadow: 0 0 0 1px #b6b6b6 inset, 0 0 0 2px rgba(255, 255, 255, 0.1) inset, 0 4px 0 0 #bebebe,
		0 4px 4px 1px rgba(0, 0, 0, 0.2);
	background-color: #cccccc;
}

.btn3d.btn-default:active,
.btn3d.btn-default.active {
	color: #666666;
	box-shadow: 0 0 0 1px #b6b6b6 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.1);
	background-color: #bebebe;
}

.btn3d.btn-success {
	box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 4px 0 0 #5eb924,
		0 4px 4px 1px rgba(0, 0, 0, 0.5);
	background-color: #78d739;
}

.btn3d.btn-success:active,
.btn3d.btn-success.active {
	box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #78d739;
}

.btn3d.btn-info {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 4px 0 0 #348fd2,
		0 4px 4px 1px rgba(0, 0, 0, 0.5);
	background-color: #39b3d7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #39b3d7;
}

.btn3d.btn-warning {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 4px 0 0 #d79a34,
		0 4px 4px 1px rgba(0, 0, 0, 0.5);
	background-color: #feaf20;
}

.btn3d.btn-warning:active,
.btn3d.btn-warning.active {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #feaf20;
}

.btn3d.btn-danger {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 4px 0 0 #aa0000,
		0 4px 4px 1px rgba(0, 0, 0, 0.5);
	background-color: #d73814;
}

.btn3d.btn-danger:active,
.btn3d.btn-danger.active {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #d73814;
}

.separator {
	display: flex;
	align-items: center;
	text-align: center;
}

.separator::before,
.separator::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--secondary);
}

.separator:not(:empty)::before {
	margin-right: 0.5em;
}

.separator:not(:empty)::after {
	margin-left: 0.5em;
}

.skeleton {
	animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
	0% {
		background-color: hsl(200, 20%, 80%);
	}
	100% {
		background-color: hsl(200, 20%, 95%);
	}
}

.grayscale {
	filter: grayscale(100%);
}

.close-flex {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #ffffff;
	opacity: 0.5;
}
.close-flex:hover {
	color: #000;
	text-decoration: none;
}
.close-flex:not(:disabled):not(.disabled):hover,
.close-flex:not(:disabled):not(.disabled):focus {
	opacity: 0.75;
}