body{
	background: var(--BG01);
}

.fly{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: 30px;
	line-height: 30px;
	border-radius: 15px;
	text-align: center;
	color: white;
	background: var(--IngBgO);
	display: none;
}

.pls{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	color: white;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
	display: none;
}

/*
|--------------------------------------------------------------------------
| 目标图片
|--------------------------------------------------------------------------
*/

.targets{
	position: absolute;
	top: 36px;
	left: 168px;
	width: 600px;
	height: calc(100% - 72px);
	background: white;
	overflow: hidden;
	box-shadow: 6px -6px 6px rgba(0, 0, 0, 0.3);
	border-radius: 0 24px 24px 0;
	z-index: 10;
	width: 0;
	display: none;
}

.targets-title{
	float: left;
	width: 100%;
	min-width: 600px;
	height: 36px;
	background: var(--MsgBg);
	box-shadow: -9px 0 9px rgba(0, 0, 0, 0.3);
	color: #3d485d;
	display: flex;
	align-items: center;
	padding: 0 12px;
	position: relative;
	z-index: 1;
}

.targets-title > b{
	flex-grow: 1;
	letter-spacing: 6px;
}

.targets-title > a{
	color: red;
	font-size: 16px;
}

.targets-title > a:active{
	color: darkred;
}

.targets-body{
	float: left;
	width: 100%;
	height: calc(100% - 36px);
	position: relative;
}

.targets-mark{
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
}

.targets-main{
	float: left;
	width: 100%;
	min-width: 600px;
	height: 100%;
	padding: 20px;
}

.targets-main > img{
	float: left;
	width: 100%;
	height: auto;
}

.targets-item{
	position: absolute;
	border: 2px solid red;
	z-index: 10;
}

.targets-seg{
	position: absolute;
	top: 205px;
	left: 0;
	width: 100%;
	height: calc(100% - 205px);
	background: white;
	box-shadow: 0px -6px 6px rgba(0, 0, 0, 0.3);
	z-index: 10;
	border-radius: 20px;
	overflow: hidden;
	display: none;
}

.targets-seg-head{
	float: left;
	width: 100%;
	height: 36px;
	line-height: 36px;
	color: var(--MsgTx);
	background: var(--MsgBg);
	padding: 0 12px;
	box-shadow: -6px 0 6px rgba(0, 0, 0, 0.3);
	text-align: center;
}

.targets-seg-main{
	float: left;
	width: 100%;
	height: calc(100% - 36px);
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(auto, max-content);
	grid-gap: 6px;
}

.targets-seg-item{
	width: auto;
	height: 69px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 6px 6px 12px 0 rgba(55,99,170,.1), -6px -6px 12px 0 rgba(55,99,170,.1);
}

.targets-seg-item[state="1"]{
	border: 2px solid green;
}

.targets-seg-item > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
|--------------------------------------------------------------------------
| 首页 - 通用框架
|--------------------------------------------------------------------------
*/

.head{
	float: left;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	background: var(--BG02);
	display: flex;
	align-items: center;
	grid-gap: 12px;
	overflow: hidden;
}

/*LOGO*/

.head-logo{
	flex: 0 0 24px;
	height: 24px;
}

.head-logo > img{
	float: left;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	object-fit: cover;
	image-rendering: auto;
}

/*location*/

.head-location{
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.head-location > span:first-child{
	color: var(--StBg);
}

.head-location > span:nth-child(2),
.head-location > span:nth-child(4){
	color: var(--FcBg);
}

/*APPS*/

.head-apps{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: right;
	grid-gap: 6px;
}

/*搜索*/

.head-search{
	flex: 0 0 auto;
	height: 24px;
	border-radius: 12px;
	background: var(--BG01);
	padding-right: 7px;
	transition: .5s;
	margin-right: 3px;
}

.head-search:focus-within{
	color: var(--FcTx);
	background: var(--FcBg);
	input{
		width: 120px;
	}
}

.head-search  > select{
	width: 36px;
	height: inherit;
	text-align: center;
}

.head-search  > input{
	width: 90px;
	height: inherit;
	text-align: center;
	transition: .5s;
}

.head-search  > button{
	color: var(--EdTx);
}

.head-search  > button:active{
	color: var(--StBg);
}

/*导航*/

.head-app{
	height: 20px;
	line-height: 20px;
	display: flex;
	align-items: center;
	grid-gap: 6px;
	padding: 0 6px;
	border-radius: 10px;
	transition: .5s;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.head-app:hover{
	background: var(--BG03);
}

.head-app > i{
	color: var(--HlBg);
}

#filter-size[state="1"]{
	color: black;
	background: yellow;
}

#filter-size[state="1"] > i{
	color: black;
}

/*main*/

.mian{
	float: left;
	width: 100%;
	height: calc(100% - 37px);
	margin-top: 1px;
}

/*
|--------------------------------------------------------------------------
| sidebar
|--------------------------------------------------------------------------
*/

.sidebar{
	float: left;
	width: 168px;
	height: 100%;
	display: flex;
	flex-direction: column;
	grid-gap: 1px;
	position: relative;
}

.sidebar-title{
	width: 100%;
	min-width: 120px;
	flex: 0 0 36px;
	height: 36px;
	background: var(--BG02);
	padding: 0 12px;
	overflow: hidden;
}

.sidebar-title[name="search-image"]{
	display: flex;
	align-items: center;
	position: relative;
}

.sidebar-title > i{
	flex: 0 0 auto;
	color: var(--Icon);
	line-height: 36px;
}

.sidebar-title > b{
	flex-grow: 1;
	margin-left: 6px;
}

.sidebar-title > a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 36px;
	text-align: center;
	color: yellow;
	background: var(--BG02);
	display: none;
}

/*搜索品牌*/

.sidebar-search{
	align-items: center;
}

.sidebar-title > input{
	float: left;
	width: 100%;
	height: 24px;
	margin-top: 6px;
	background: var(--BG01);
	text-align: center;
	border-radius: 12px;
	transition: 1s;
}

.sidebar-title > input:focus{
	color: var(--FcTx);
	background: var(--FcBg);
}

.sidebar-search > i{
	color: var(--EdTx);
	margin-left: -18px;
}

.sidebar-serach-list{
	position: absolute;
	top: 280px;
	left: 1px;
	width: calc(100% - 2px);
	height: auto;
	max-height: 360px;
	border-radius: 10px;
	background: white;
	z-index: 10;
	display: none;
}

.sidebar-serach-list > a{
	float: left;
	width: 100%;
	height: 30px;
	color: #3d3d3f;
	border-top: 1px solid #e1e1e6;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 6px;
}

.sidebar-serach-list > a:first-child{
	border-top: none;
}

.sidebar-serach-list > a > i{
	flex: 0 0 auto;
}

.sidebar-serach-list > a > b{
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-serach-list > a > p{
	flex: 0 0 auto;
	color: white;
	background: #07c;
	padding: 1px 2px;
	border-radius: 5px;
	font-size: 10px;
}

.sidebar-serach-list > a:active{
	color: #07c;
}

/*以图搜图*/

.search-image{
	width: 100%;
	min-height: 0;
	flex: 0 0 168px;
	background: var(--BG02);
	padding: 12px;
	position: relative;
}

.search-image-exit{
	position: absolute;
	top: 22px;
	right: 22px;
	font-size: 16px;
	color: var(--DgBg);
	background: var(--DgTx);
	display: none;
	border-radius: 50px;
}

.search-image-exit:active{
	color: var(--DgTx);
}

.search-image > div{
	border-radius: 20px;
}

.search-image-text{
	float: left;
	width: 100%;
	height: 100%;
	border: 2px dashed var(--BG06);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.search-image-show{
	float: left;
	width: 100%;
	height: 100%;
	margin-left: -100%;
	overflow: hidden;
}

.search-image-show > img{
	float: left;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: none;
}

.search-image-area{
	float: left;
	width: 100%;
	height: 100%;
	margin-left: -100%;
	opacity: 0;
}

/*菜单*/

.sidebar-menu{
	width: 100%;
	flex-grow: 1;
	min-height: 0;
	background: var(--BG02);
	padding: 12px;
	position: relative;
	z-index: 9;
	transition: .5s;
}

.sidebar-menu[name="warehouse"]:hover{
	width: 336px;
}

.sidebar-menu[name="shelving"]:hover .sidebar-menu-child{
	width: 336px;
}

/*子级菜单*/

.sidebar-menu-child{
	position: absolute;
	bottom: 0px;
	left: 169px;
	width: 0;
	height: calc(100% + 74px);
	transition: .5s;
	display: flex;
	flex-direction: column;
	grid-gap: 1px;
	overflow: hidden;
	z-index: 9;
	box-shadow: 3px 0 6px rgba(51, 153, 255, 0.2);
}

.sidebar-menu-list{
	float: left;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.sidebar-menu-item{
	float: left;
	width: 100%;
	min-width: 120px;
	height: 28px;
	display: flex;
	align-items: center;
	padding: 0 6px;
	border-radius: 14px;
	margin-bottom: 1px;
	transition: 0.5s;
	overflow: hidden;
}

.sidebar-menu-item:hover,
.sidebar-menu-item[state="1"]{
	background: var(--BG03);

	i{
		color: var(--StBg);
	}
	p{
		color: var(--StTx);
	}
	span{
		color: var(--StTx);
		background: var(--StBg);
	}
}

.sidebar-menu-item > i{
	flex: 0 0 20px;
	transition: 0.5s;
}

.sidebar-menu-item > p{
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: 0.5s;
}

.sidebar-menu-item > span{
	flex: 0 0 24px;
	padding: 2px 0;
	font-size: 10px;
	background: var(--BG04);
	text-align: center;
	border-radius: 10px;
	transition: 0.5s;
}

/*
|--------------------------------------------------------------------------
| 商品窗口
|--------------------------------------------------------------------------
*/

.goods-show{
	float: left;
	width: calc(100% - 168px);
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.goods-show > div{
	min-height: 0;
}

/*
|--------------------------------------------------------------------------
| 尺码过滤
|--------------------------------------------------------------------------
*/

:root{
	--ScrollbarThumbBackgrounX: #07c;
	--ScrollbarThumbBackgrounHoverX: #07c;
}

.sizebody{
	width: 100%;
	flex: 0 0 auto;
	height: 60px;
	background: white;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
	height: 0;
	opacity: 0;
	padding: 0;
}

.sizelist{
	min-width: 0;
	flex-grow: 1;
	height: 100%;
	display: flex;
	align-items: center;
	overflow-x: auto;
}

.sizelist > div{
	min-width: 0;
	flex: 0 0 auto;
	height: auto;
	display: flex;
	gap: 2px;
	margin-right: 12px;
	padding-top: 8px;
}

.sizelist > div > i{
	min-width: 0;
	flex: 0 0 30px;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	background: #ebebf0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sizelist > div > i:active,
.sizelist > div > i[state="1"]{
	color: white;
	background: limegreen;
}

/*商品容器*/

.goods-body{
	width: 100%;
	flex-grow: 1;
	min-height: 0;
	background: #ebebf0;
	position: relative;
}

.search-temp{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ebebf0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-rows: minmax(auto, max-content);
	align-items: start;
	padding: 6px;
	grid-gap: 4px;
	display: none;
}

.search-temp > .to_bottom{
	display: none;
}

.goods-main{
	float: left;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	padding: 6px;
}

.goods-list{
	float: left;
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-gap: 4px;
}

.goods-list > .to_bottom{
	display: none;
}

.goods-item{
	width: auto;
	height: auto;
	position: relative;
	border: 2px solid transparent;
	transition: .5s;
}

.goods-item:hover{
	border-color: limegreen;
}

.goods-image{
	float: left;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: white;
}

.goods-image > img{
	float: left;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: white;
	overflow: hidden;
}

.goods-image > img:active{
	width: 101%;
	height: 101%;
	margin-top: -0.5%;
	margin-left: -0.5%;
}

.goods-image > i{
	position: absolute;
	top: 0px;
	left: 8px;
	width: 20px;
	height: 60px;
	padding: 2px;
	text-align: center;
	color: white;
	background: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
	display: none;
}

.goods-image > a{
	position: absolute;
	top: 3px;
	right: 3px;
	width: 50px;
	line-height: 18px;
	text-align: center;
	color: limegreen;
	border: 1px solid limegreen;
	border-radius: 30px;
	background: white;
	display: none;
}

.goods-price{
	float: left;
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	cursor: pointer;
	background: linear-gradient(
		135deg,
		#f44250 0%, #f44250 40%,
		#e7313e 40%, #e7313e 42%,
		#f44250 42%, #f44250 44%,
		#e7313e 44%, #e7313e 46%,
		#f44250 46%, #f44250 48%,
		#e7313e 48%, #e7313e 50%,
		#f44250 50%, #f44250 52%,
		#e7313e 42%, #e7313e 100%
	);
}

.goods-price:active *{
	padding-bottom: 2px;
}

.goods-price > i,
.goods-price > p{
	color: white;
	min-width: 0;
}

.goods-price > p{
	flex-grow: 1;
	padding-left: 3px;
}

.goods-price > i{
	flex: 0 0 auto;
	font-variant-numeric: normal;
}

.goods-data{
	float: left;
	width: 100%;
	height: auto;
	padding: 12px;
	background: white;
}

.goods-info{
	float: left;
	width: 100%;
	line-height: 100%;
	font-size: 13px;
}

.goods-name{
	color: #1d1d1f;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 200% !important;
	font-weight: bold;
}

.goods-count{
	color: #808087;
}

/*
|--------------------------------------------------------------------------
| 信息栏
|--------------------------------------------------------------------------
*/

.goods-show-info{
	width: 100%;
	flex: 0 0 36px;
	color: var(--MsgTx);
	background: var(--MsgBg);
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 6px;
	padding: 0 12px;
	position: relative;
	z-index: 5;
}

.goods-show-info > a{
	color: #303039;
	flex: 0 0 auto;
}

.goods-show-info > i{
	color: #b0b0b9;
	flex: 0 0 auto;
}

.goods-show-info > p{
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: right;
}

/*
|--------------------------------------------------------------------------
| CREATE
|--------------------------------------------------------------------------
*/

.create{
	position: absolute;
	z-index: 3;
	right: 6px;
	bottom: 37px;
	width: 778px;
	height: 420px;
	border: 2px solid white;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	box-shadow: 0 0 36px rgba(0,0,60, .6);
	border-radius: 24px 24px 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	display: none;
	bottom: -420px;
}

.create > div{
	width: 100%;
	min-height: 0;
}

/*
|--------------------------------------------------------------------------
| CREATE - HEAD
|--------------------------------------------------------------------------
*/

.public-pocket-head{
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: linear-gradient(
		135deg,
		#f44250 0%, #f44250 40%,
		#e7313e 40%, #e7313e 42%,
		#f44250 42%, #f44250 44%,
		#e7313e 44%, #e7313e 46%,
		#f44250 46%, #f44250 48%,
		#e7313e 48%, #e7313e 50%,
		#f44250 50%, #f44250 52%,
		#e7313e 42%, #e7313e 100%
	);
}

.public-pocket-head * {
	color: white;
}

.public-pocket-head > i{
	flex: 0 0 auto;
	min-width: 0;
}

.public-pocket-head > i[name="seg"]{
	padding: 0 3px;
}

.public-pocket-head > i[name="icon"]{
	flex-grow: 1;
}

.public-pocket-head > i[name="view"],
.public-pocket-head > i[name="exit"],
.public-pocket-head > i[name="share"]{
	cursor: pointer;
}

.public-pocket-head > i[name="view"]:active,
.public-pocket-head > i[name="exit"]:active,
.public-pocket-head > i[name="share"]:active{
	padding-bottom: 2px;
}

/*
|--------------------------------------------------------------------------
| CREATE - MAIN
|--------------------------------------------------------------------------
*/

.create-main{
	width: 100%;
	flex-grow: 1;
	display: flex;
}

.create-main > div{
	min-width: 0;
	height: 100%;
}

/*
|--------------------------------------------------------------------------
| CREATE - INFO
|--------------------------------------------------------------------------
*/

.create-info{
	flex: 0 0 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
}

.create-image{
	width: 220px;
	height: auto;
}

.create-image > img{
	float: left;
	width: 220px;
	height: 220px;
	object-fit: contain;
	border-radius: 24px;
}

.create-image > p{
	float: left;
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: 12px;
	color: #4b5b76;
}

/*
|--------------------------------------------------------------------------
| CREATE - DATA
|--------------------------------------------------------------------------
*/

.create-data{
	flex-grow: 1;
	overflow: auto;
	padding: 12px;
	position: relative;
}

.detail-data-item{
	float: left;
	width: 100%;
	height: auto;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	box-shadow: 0px 2px 4px rgba(55,99,170,.1);
	border: 1px solid white;
	border-radius: 18px;
	margin-bottom: 6px;
	padding: 6px;
}

.detail-data-notes{
	float: left;
	width: 100%;
	height: 24px;
	background: white;
	box-shadow: 3px 3px 6px 0 rgba(55,99,170, .1);
	border-radius: 12px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
}

.detail-data-notes > i{
	flex: 0 0 auto;
	color: #3d485d;
}

.detail-data-notes > p{
	flex-grow: 1;
	color: #3d485d;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-data-notes > b{
	flex: 0 0 auto;
	color: red;
}

.detail-data-size{
	float: left;
	width: 100%;
	height: auto;
}

.detail-data-stock{
	float: left;
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
	gap: 3px;
}

.detail-data-stock > a{
	width: auto;
	aspect-ratio: 1 / 1;
	color: #fff;
	background: #19a000;
	background: linear-gradient(135deg,#19a000, #1ed200, #19a000);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 90px;
}

.detail-data-stock > a:active{
	color: black !important;
	background: grey !important;
}

/*
|--------------------------------------------------------------------------
| POCKET
|--------------------------------------------------------------------------
*/

.pocket{
	position: absolute;
	z-index: 3;
	right: 6px;
	bottom: 37px;
	width: 432px;
	height: 698px;
	border: 2px solid white;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	box-shadow: 0 0 36px rgba(0,0,60, .6);
	border-radius: 24px 24px 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	display: none;
	bottom: -698px;
}

.pocket > div{
	width: 100%;
	min-height: 0;
}

.pocket-name{
	flex: 0 0 42px;
	color: #353537;
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	padding: 18px;
}

.pocket-name > b{
	min-width: 0;
	text-align: center;
}

.pocket-name > b[name="image"]{
	flex: 0 0 60px;
}

.pocket-name > b[name="price"]{
	flex: 0 0 90px;
}

.pocket-name > b[name="size"]{
	flex: 0 0 90px;
}

.pocket-name > b[name="add"],
.pocket-name > b[name="sub"]{
	flex: 0 0 36px;
}

.pocket-name > b[name="count"]{
	flex-grow: 1;
}


.pocket-list{
	flex-grow: 1;
	padding: 12px;
	position: relative;
}

.pocket-item{
	float: left;
	width: 100%;
	height: auto;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	box-shadow: 0px 2px 4px rgba(55,99,170,.1);
	border: 1px solid white;
	border-radius: 18px;
	margin-bottom: 6px;
	padding: 6px;
	display: flex;
	align-items: center;
}

.pocket-item *{
	color: #3d485d;
}

.pocket-item > div{
	min-width: 0;
	text-align: center;
}

.pocket-item > div > img{
	float: left;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 3px 3px 6px 0 rgba(55,99,170,.1), -3px -3px 6px 0 rgba(55,99,170,.05);
}

.pocket-item > div > a{
	float: left;
	width: 100%;
	height: 24px;
	line-height: 24px;
	border-radius: 12px;
	background: white;
	box-shadow: 3px 3px 6px 0 rgba(55,99,170,.1), -3px -3px 6px 0 rgba(55,99,170,.05);
}

.pocket-item > div > a:active{
	background: #ebebf0;
	box-shadow: none;
}

.pocket-item > div[name="image"]{
	flex: 0 0 60px;
	height: 60px;
}

.pocket-item > div[name="price"]{
	flex: 0 0 90px;
	color: #e7313e;
}

.pocket-item > div[name="size"]{
	flex: 0 0 90px;
}

.pocket-item > div[name="count"]{
	flex-grow: 1;
}

.pocket-item > div[name="add"],
.pocket-item > div[name="sub"]{
	flex: 0 0 36px;
}

/*
|--------------------------------------------------------------------------
| POCKET-SHARE
|--------------------------------------------------------------------------
*/

.pocket-share{
	position: absolute;
	z-index: 3;
	right: 6px;
	bottom: 37px;
	width: 432px;
	height: 698px;
	border: 2px solid white;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	box-shadow: 0 0 36px rgba(0,0,60, .6);
	border-radius: 24px 24px 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	display: none;
	bottom: -698px;
}

.pocket-share > div{
	min-height: 0;
}

.pocket-share-head{
	background: linear-gradient(
		135deg,
		green 0%, green 40%,
		limegreen 40%, limegreen 42%,
		green 42%, green 44%,
		limegreen 44%, limegreen 46%,
		green 46%, green 48%,
		limegreen 48%, limegreen 50%,
		green 50%, green 52%,
		limegreen 42%, limegreen 100%
	);
}

.pocket-share-main{
	flex-grow: 1;
}

.orders-main *{
	font-size: 8px;
}

.orders-main{
	float: left;
	width: 100%;
	height: auto;
	border: 2px solid #e7313e;
	background: linear-gradient(0deg,#fff,#f3f5f8);
	border-top: none;
}

.orders-bar{
	float: left;
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
	font-family: inherit;
	grid-gap: 4px;
	padding: 0 8px;
	background: linear-gradient(
		135deg,
		#f44250 0%, #f44250 40%,
		#e7313e 40%, #e7313e 42%,
		#f44250 42%, #f44250 44%,
		#e7313e 44%, #e7313e 46%,
		#f44250 46%, #f44250 48%,
		#e7313e 48%, #e7313e 50%,
		#f44250 50%, #f44250 52%,
		#e7313e 42%, #e7313e 100%
	);
}

.orders-bar > i{
	flex: 0 0 auto;
	color: white;
}

.orders-bar > i[name="text"]{
	flex-grow: 1;
	letter-spacing: 1px;
	font-family: inherit;
}

.orders-bar > i[name="logo"]{
	letter-spacing: 6px;
	font-family: inherit;
	margin-right: -6px;
}

.orders-head,
.orders-info,
.orders-list,
.orders-foot,
.orders-head *,
.orders-info *,
.orders-list *,
.orders-foot *{
	color: #2d3544;;
	font-family: inherit;
}

.orders-head{
	float: left;
	width: 100%;
	height: 80px;
	padding: 0 10px;
	display: flex;
	align-items: center;
}

.orders-head > div{
	min-width: 0;
}

.orders-head > div[name="store"]{
	flex-grow: 1;
}

.orders-head > div[name="qrcode"]{
	flex: 0 0 40px;
}

#orders-qrcode > canvas{
	float: left;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.orders-head > div > b{
	float: left;
	width: 100%;
	height: auto;
	font-size: 12px;
}

.orders-head > div > p{
	float: left;
	width: 100%;
	height: auto;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #4b5b76;
}

.orders-info{
	float: left;
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
    background: linear-gradient(0deg,#f3f6fc, #e9eef6);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 2;
	padding: 0 10px;
}

.orders-info > div{
	flex: 1;
	display: flex;
	align-items: center;
}

.orders-info > div:last-child{
	justify-content: right;
}

.orders-list{
	float: left;
	width: 100%;
	height: auto;
	padding: 6px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
}

.orders-item{
	width: auto;
	height: 54px;
	overflow: hidden;
    background: white;
    box-shadow: 3px 3px 6px 0 rgba(55,99,170,.1),-3px -3px 6px 0 rgba(55,99,170,.05);
    border: 2px solid #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
}

.orders-item:nth-child(even){
	float: right;
}

.orders-item > div{
	min-width: 0;
	height: auto;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.orders-item > div[name="image"]{
	flex: 0 0 50px;
	height: 50px;
	padding: 3px;
	z-index: 2;
}

.orders-item > div[name="price"]{
	flex: 0 0 42px;
	color: #ff4a14;
}

.orders-item > div[name="size"]{
	flex-grow: 1;
}

.orders-item > div > img{
	float: left;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: none;
	border-radius: 10px;
	box-shadow: 3px 3px 6px 0 rgba(55,99,170,.1),-3px -3px 6px 0 rgba(55,99,170,.05);
}

.size-main{
	width: 100%;
	height: auto;
	padding: 0 2px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 2px;
}

.size-item{
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
}

.size-item > p{
	min-width: 0;
	line-height: 100%;
}

.size-item > p:nth-child(1){
	flex: 0 0 50%;
}

.size-item > p:nth-child(2){
	flex: 0 0 20%;
	color: green;
	text-align: center;
}

.size-item > p:nth-child(3){
	flex: 0 0 30%;
	color: green;
}

.orders-foot{
	float: left;
	width: 100%;
	height: auto;
	text-align: right;
	padding: 20px 10px;
	position: relative;
	font-family: inherit;
}

.orders-foot:before{
	content: "PANDASOFT POCKET";
	position: absolute;
	top: 0;
	left: 10px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 3px;
	color: rgba(0, 0, 128, 0.05);
}