html {
	height: 100%;
}

body {
	min-height: 100%;
	background-color: var(--clrGrayLight50);
}

/* Footer */
.subfloor {
	background-color: var(--clrGrayLight);
	grid-area: footer / footer;
	padding: 2em;
	margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1em;
}

@media (max-width: 660px) {
	.subfloor {
		padding: 2em 1em;
	}
}

/* Package block */
.package_item {
	display: grid;
	grid-template-columns: 60px auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
}

.package_item content {
	grid-area: auto;
}

.package_item data {
  display: none;
}

.package_item_bgicon,
.package_item_bgicon_disable {
	grid-row: span 2;
	height: 60px;
	--mask: url("data:image/svg+xml, %3Csvg  width='200' height='200' viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 100 C 0, 0 0, 0 100, 0 S 200, 0 200, 100 200, 200 100, 200 0, 200 0, 100' transform='rotate( 0, 100, 100 ) translate( 0 0 )'%3E%3C/path%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	position: relative;
	display: flex;
	z-index: 0;
	transition: all 0.1s ease-out;
}

.package_item_bgicon {
	background: var(--clrRed);
}

.package_item_bgicon_disable {
	background: var(--clrGrayLight);
}


.package_item_bgicon:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(DeepPink, transparent), linear-gradient(to top left, lime, transparent);
    background-blend-mode: lighten;
    border-radius: 3px;
	top: 0;
	left: 0;
	opacity: 0.15;
	z-index: -1;
}
.package_item_icon {
	background-image: url(/images/play-loading.svg);
	background-size: contain;
	width: 30px;
	height: 30px;
	margin: auto;
	
}

/* Sub info */
.package_name {
	margin: 0;
	font-weight: 400;
	color: var(--clrBlack);
}

.package_item_bgicon:hover {
	background: var(--clrBlack);
}

.package_type_wh .package_item_bgicon {
	background: var(--clrPurple);
}

.package_type_wh .package_item_bgicon:hover {
	background: var(--clrBlack);
}

/* Sub info */
.package_info_group {
	display: flex;
}

.package_info {
	color: var(--clrGray);
	display:inline-block;
}

.package_info:not(:last-child):after {
    color: var(--clrGraySlate);
    content: "•";
    margin: 0 5px;
}

.package_info:before {
	font: normal normal 400 18px/1 Eva-Icons;
	vertical-align: sub;
}

.package_code:before {
	content: "\eaa0\ ";
}

.package_qty:before  {
	content: "\eaa4\ ";
}

.package_table {
	grid-column: span 2;
}

/* Dots load */
#list_load_process:after {
	content: ' .';
animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
	0%, 20% {
		color: rgba(0,0,0,0);
		text-shadow:
		.25em 0 0 rgba(0,0,0,0),
	.5em 0 0 rgba(0,0,0,0);}
	40% {
		color: white;
		text-shadow:
		.25em 0 0 rgba(0,0,0,0),
	.5em 0 0 rgba(0,0,0,0);}
	60% {
		text-shadow:
		.25em 0 0 var(--clrBlack),
	.5em 0 0 rgba(0,0,0,0);}
	80%, 100% {
		text-shadow:
		.25em 0 0 var(--clrBlack),
	.5em 0 0 var(--clrBlack);}
}

/* Small fix */
#orderApi_uuid {
	word-break: break-word;
}

.fancybox__slide {
    padding: 1em !important;
}