body {
	font-family: Arial, sans-serif;
	font-size: 13px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}


div {
	-webkit-touch-callout: auto;
	-webkit-user-select: auto;
	-khtml-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	-o-user-select: auto;


	/*   
	"unselectable='on' onselectstart="return false;"
	onmousedown="return false; 
	*/
}

a {
	text-decoration: none;
	/* text-decoration: underline; */
}

img {
	pointer-events: none;
}

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

.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #B0B0B0;
}

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

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

.btn {
	cursor: pointer;
	border: 1px solid #bbb;
	border-radius: 8px;
	background-color: #FFF;
	color: black;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	display: inline-block;
	font-size: 16px;
	margin: 5px 5px;
	width: 300px;
	height: 50px;

	&:not :disabled:hover {
		/* apply hover effect here */
		background-color: #F0F0F0;
	}
}

.btn:hover:enabled {
	background-color: #F0F0F0;
}

.submitBtn {
	border: none;
	padding: 0px;
	background-color: #FFF;
}

.submitBtn:disabled .btn {
	opacity: 0.4;
}

.code {
	font-size: 30px;
	text-align: center;
	margin: 5px;
	padding: 0px 5px;
	width: 35px;
	border: 1px solid black;
	border-radius: 8px;
	height: 50px;
}

.code:disabled {
	opacity: 0.4;
}

.password {
	font-size: 16px;
	margin: 5px;
	padding: 0px 10px;
	width: 300px;
	border: 1px solid #0085f2;
	border-radius: 8px;
	height: 50px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	margin: 0 auto;
}

.upload_container {
	text-align: center;
	width: 400px;
}

.drop_area {
	border: 2px dashed #007bff;
	padding: 50px;
	background-color: #fff;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.drop_area.dragover {
	background-color: #e9f7fe;
}

.drop_area p {
	font-size: 12px;
	color: #666;
}

.drop_area span {
	color: #007bff;
	cursor: pointer;
}

.preview_container {
	display: none;
	/* margin-top: 20px; */
	text-align: center;
}

.preview_container img {
	max-width: 100%;
	border-radius: 10px;
	padding: 5px;
	/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px; */
}

.preview_container button {
	padding: 5px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.btn_upload {
	background-color: #28a745;
	color: #fff;
}

.btn_cancel {
	background-color: #dc3545;
	color: #fff;
}

.thumb {
	/* margin: 5px; */
	display: block;
	border: 1px solid #ccc;
	border-radius: 10px;
	cursor: pointer;

}

.thumb img {
	object-fit: scale-down;
	width: 90px;
	height: 90px;
}

.thumb:hover {
	margin: 3px;
	border: 3px solid #999;
}

.selected {
	margin: 3px;
	border: 3px solid #999;
}

/* #gallery {
	div {-ms-overflow-style: none; scrollbar-width: none;}
    div::-webkit-scrollbar {display: none;}
}
*/

#gallery_image {
	aspect-ratio: 6 / 4;
	width: 100%;
	background-image: url('img/photos-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

#img {
	aspect-ratio: 6 / 4;
	width: 100%;
	background-image: url('img/photos-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

#dialog_image {
	aspect-ratio: 6 / 4;
	width: 100%;
	background-image: url('img/photos-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

.item_image {
	aspect-ratio: 6 / 4;
	width: 100%;
	background-image: url('img/photos-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

#notification {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 100%;
	text-align: center;
	transform: translateX(-50%);
	background-color: #ff0000;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	display: none;
	/* Hide the notification initially */
}

.counter {
	display: flex;
	overflow: hidden;
	cursor: pointer;
	line-height: 35px;
}

.counter .cntbtn {
	width: 38px;
	height: 38px;
	line-height: 35px;
	text-align: center;
	font-size: 18px;
	border: 1px solid #aaa;
	color: #aaa;
	transition: background-color 0.2s;

	&:not(.notallow):hover {
		color: #000;
	}

}

.counter input {
	width: 60px;
	height: 38px;
	line-height: 35px;
	text-align: center;
	font-size: 18px;
	border: 1px solid #aaa;
	outline: none;
}

/* Hide the number input spin buttons */
.counter input::-webkit-inner-spin-button,
.counter input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.counter input[type="number"] {
	-moz-appearance: textfield;
}

.notallow {
	background-color: #efefef;
	cursor: not-allowed;
	color: #ccc;
}

*:disabled {
	background-color: dimgrey;
	color: linen;
	opacity: 1;
	cursor: not-allowed;
}


.hoverEffct {
	/* width: 38px;
	height: 38px;
	line-height: 35px;
	text-align: center;
	font-size: 18px;
	padding: 5px;
	border: 1px solid #000; */
	/* color: #000; */
	cursor: pointer;
	transition: background-color 0.2s;
	opacity: 1;

	&:not(.notallow):hover {
		cursor: pointer;
		opacity: 0.6;
	}
}

.hoverDarker {
	cursor: pointer;
	transition: background-color 0.2s;
	opacity: 0;
	background-color: #000000;

	&:not(.notallow):hover {
		cursor: pointer;
		opacity: 0.1;
	}
}

.smallbtn {
	text-align: center;
	font-size: 18px;
	padding: 5px;
	border: 1px solid #000;
	color: #000;
	transition: background-color 0.2s;
	opacity: 0.5;

	&:not(.notallow):hover {
		opacity: 1;
	}
}

.button {
	cursor: pointer;
	border: 1px solid black;
	border-radius: 5px;
	background-color: #ff0000;
	color: rgb(255, 255, 255);
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	margin: 0 5px;
	padding: 0 5px;
	height: 40px;
	opacity: 1;

	&:not(.notallow, :disabled):hover {
		opacity: 0.8;
	}


}

.button:disabled {
	background-color: #ccc;
	border: 1px solid #ccc;
}


.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px;
	background-color: #fefefe;
	border: 1px solid #888;
	width: 80%;
}

.dialog {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 99;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	text-align: center;
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

.dialog-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fefefe;
	border: 1px solid #888;
	padding: 10px;
	max-width: 100%;
}

table,
th,
td {
	/* border-bottom: 1px solid #EEEEEE; */
	border-collapse: collapse;
}

.bubble {
	display: table;
	position: relative;
	max-width: 200px;

	margin-top: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);

}

.bubble::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	left: 20px;
	border: .55rem solid transparent;
	border-top: none;

	border-bottom-color: #fff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}


/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: #fff;
	color: #000;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: 150%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;

	border-radius: 5px;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;

}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}


/* Absolute Center Spinner */
.loading {
	position: fixed;
	z-index: 999;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 50px;
}

/* Transparent Overlay */
.loading:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.4);
	/* Black w/ opacity */
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
	/* hide "loading..." text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}

.loading:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 50px;
	height: 50px;
	margin-top: -0.5em;

	border: 5px solid orange;
	border-radius: 100%;
	border-bottom-color: transparent;
	-webkit-animation: spinner 1s linear 0s infinite;
	animation: spinner 1s linear 0s infinite;
}

/* Animation */


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

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

.checked {
	color: orange;
}

.line-middle {
	display: flex;
	flex-direction: row;
}

.line-middle:before,
.line-middle:after {
	content: "";
	flex: 1 1;
	border-bottom: 2px solid #000;
	margin: auto;
}

.paginate {
	text-align: center;
	/* margin: 0 200px; */
	padding-top: 15px;
}

.pagenation {
	display: inline-block;
	font-size: 12px;
	padding-left: 10px;
}

.pagenationbar {
	display: inline-block;
	content: "";
	width: 1px;
	height: 11px;
	background: #cccccc;
	vertical-align: middle;
	margin: 0 0 2px 10px;
}

.pagenation.page-on {
	color: #ff6600;
	font-weight: bold;
}


@media print {
	@page {
		page-break-inside: avoid;
		visibility: visible;

	}

	.header {
		visibility: hidden;
	}
}

.collapsible {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}

.active,
.collapsible:hover {
	background-color: #555;
}

.collapsible:after {
	content: '\002B';
	color: white;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

.active:after {
	content: "\2212";
}

.content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
}

.shipfrom {
	border-radius: 5px;
	border: 2px solid #000;
	color: #000;
	background-color: #fff;
	cursor: pointer;
}

.shipfrom:hover {
	text-decoration: underline;
}

.shipfromselected {
	border-radius: 5px;
	border: 2px solid #0085f2;
	color: #0085f2;
	background-color: #fff;
	cursor: pointer;
}

.shipfromselected:hover {
	opacity: 0.5;
	transition: opacity 0.3s;
}

.outlineButton {
	border-radius: 5px;
	border: 2px solid #0085f2;
	color: #0085f2;
	background-color: #fff;
	padding: 5px;
	margin: 5px;
	cursor: pointer;
	text-align: center;
}

.outlineButton:hover {
	background-color: #ddd;
}

.coloronhover:hover {
	color: #0085f2;
	cursor: pointer;
}

.link {
	color: #0051c3;
	cursor: pointer;
}

.link:hover {
	opacity: 0.5;
	transition: opacity 0.3s;
}

.flex-box {
	display: flex;
	flex-direction: row;
}

.flex-container {
	display: flex;
	flex-direction: row;
}

.flex-item-left {
	padding: 10px;
	flex: 100%;
}

.flex-item-right {
	padding: 10px;
	flex: 100%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
	.flex-container {
		flex-direction: column;
	}
}