@charset "utf-8";
/*公用样式*/
@import "common.css";
/* ==================
	后台UI
 ==================== */
html,body{
	--bgColor: #fafafa;
	min-width: 320px;
	background-color: var(--bgColor);
	box-sizing: border-box;
}
.layui-card{
	box-shadow: none;
	margin: 0;
}
/*布局*/
.layui-layout-admin .layui-header .layui-layout-left{
	left: 0;
}
.layui-layout-admin .layui-side,
.layui-layout-admin .layui-body{
	top: 50px;
	bottom: 10px;
}
.layui-footer-btn{
	clear: both!important;
	float: none!important;
	width: 100%!important;
	height: 60px!important;
	padding: 0!important;
}
.layui-footer-btn .layui-footer{
	height: 60px;
	padding: 0 15px;
	border-top: 2px solid var(--bgColor);
	background-color: var(--white);
	position: fixed;
	left: 200px;
	right: 0;
	bottom: 10px;
	z-index: 1000;
}
/*遮罩*/
.layadmin-body-shade {
    position: fixed;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 1001;
}
/*外行侧收缩*/
.layadmin-side-shrink .layui-header .layui-icon-shrink-right:before{
	content: "\e66b";
}
/*头部*/
.layui-layout-admin .layui-header{
	background-color: var(--theme);
}
.layui-layout-admin .layui-header .layui-nav,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a{
	color: var(--white);
}
/*侧边菜单*/
.layui-layout-admin .layui-side{
	background-color: var(--bgColor);
}
.layui-layout-admin .layui-side .layui-side-scroll,
.layui-layout-admin .layui-side .layui-nav{
	width: 100%;
	background-color: var(--white);
}
.layui-nav-tree .layui-nav-item:before{
	content: "";
	border-top: 1px solid var(--borderColor);
	position: absolute;
	top: 0;
	left: 10px;
	right: 10px;
	z-index: 1;
}
.layui-nav-tree .layui-nav-item:first-child:before{
	display: none;
}
.layui-nav-tree .layui-nav-item a{
	color: var(--black);
	font-weight: 700;
	padding-top: 5px;
	padding-bottom: 5px;
}
.layui-nav .layui-this a,
.layui-nav .layui-nav-item a:hover{
	color: var(--theme);
}
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-nav-item a:hover{
	background-color: var(--white)!important;
}
/*内容*/
.layui-layout-admin .layui-body{
	overflow: hidden;
	background-color: var(--white);
}
.layui-layout-admin .layui-body .layui-fluid{
	padding: 0;
}
.layui-layout-admin .layui-body .layui-fluid>.layui-card{
	box-shadow: none;
}
.layui-form.block-form .layui-form-item>.layui-icon-table{
	font-size: 20px;
}
iframe,
html,
body{
	width: 100%;
	height: 100%;
	border: none;
}
/*收银台*/
.cashier-box{
	height: auto!important;
	padding: 5px;
}
.layui-card-header.cashier-box~.layui-card-body {
    padding: 5px;
}
.cashier-box .flex .flex-sub,
.cashier-box .flex .barcode{
	flex: 1;
	max-width: 50%;
}
.cashier-box .flex .flex-sub-mipos{
	max-width: 100%;
}
.cashier-box .flex .flex-sub{
	position: relative;
}
.cashier-box .flex .flex-sub .layui-icon{
	width: 38px;
	height: 38px;
	font-size: 20px;
	line-height: 38px;
	text-align: center;
	position: absolute;
	right: 0;
}
.cashier-box .flex .flex-sub,
.cashier-box .flex>.layui-input{
	margin-right: 10px;
}
.cashier-box .flex,
.cashier-box .layui-btn{
	flex: 1;
}
/*条码框*/
.barcode{
	position: relative;
}
.barcode .layui-icon{
	width: 38px;
	text-align: center;
	position: absolute;
}
.barcode .layui-input{
  border: none;
  padding-left: 38px;
}
.barcode .rim-left,
.barcode .rim-right{
  position: absolute;
  top: 0;
  bottom: 0;
}
.barcode .rim-left,
.barcode .rim-left .rim:before,
.barcode .rim-left .rim:after {
  left: 0;
}
.barcode .rim-right,
.barcode .rim-right .rim:before,
.barcode .rim-right .rim:after {
  right: 0;
}
.barcode .rim:before,
.barcode .rim:after {
  content: "";
  position: absolute;
  top: 0;
  border-radius: 99px;
  background-color: var(--theme);
}
.barcode .rim:before {
  width: 15px;
  height: 3px;
}
.barcode .rim:after {
  width: 3px;
  height: 15px;
}
.barcode .rim:last-child:before,
.barcode .rim:last-child:after {
  top: auto;
  bottom: 0;
}
.barcode .fa-barcode {
  left: 0;
  right: auto;
  color: var(--theme);
}
/* 二维码弹窗 */
.qrcode{
	text-align: center;
}
.qrcode img{
	display: block;
	width: 200px;
	margin: 0 auto;
}
.qrcode p{
	font-size: 14px;
	line-height: 20px;
	margin-top: 10px;
}
/* 数字键盘 */
.keyboard.popup{
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
}
.keyboard.popup.show{
	height: 100%;
	display: flex!important;
	flex-direction: column;
}
.keyboard.popup::before{
	content: '';
	display: block;
	flex: 1;
}
.keyboard .title,
.keyboard .content{
	background-color: var(--white);
	position: relative;
	z-index: 1;
}
.keyboard .title{
	text-align: center;
	font-size: 12px;
	line-height: 30px;
	box-shadow: 0 -2px 3px rgba(0,0,0,.3);
}
.keyboard .content{
	display: flex;
	flex-wrap: wrap;
	border-width: 1px 1px 0 0;
	border-color: var(--borderColor);
	border-style: solid;
}
.keyboard.popup .content{
	border: none;
}
.keyboard .content .item{
	font-size: 16px;
	line-height: 20px;
	padding: 10px 0;
	text-align: center;
	position: relative;
	min-width: 25%;
}
.keyboard.popup .content .item:not([class*='btn']){
	font-size: 20px;
	padding: 20px 0;
}
.keyboard .content .btn .layui-icon-down{
	line-height: 40px;
}
.keyboard .content .item:hover{
	transition: all .5s;
	-webkit-transition: all .5s;
	background-color: var(--ghostWhite);
}

.keyboard .title::before,
.keyboard .title::after,
.keyboard .content .item::before,
.keyboard .content .item::after{
	content: '';
	background-color: var(--borderColor);
	position: absolute;
	left: 0;
	bottom: 0;
}
.keyboard .title::before,
.keyboard .content .item::before{
	width: 1px;
	top: 0;
}
.keyboard .title::after,
.keyboard .content .item::after{
	height: 1px;
	right: 0;
}
/*加载动画*/
.cssload-fond{
	position:relative;
	margin: 30% auto 0;
}
.cssload-container-general{
	width:72px;
	height:72px;
	margin: 0 auto;
	animation:cssload-animball_two 1.6s infinite;
	-o-animation:cssload-animball_two 1.6s infinite;
	-ms-animation:cssload-animball_two 1.6s infinite;
	-webkit-animation:cssload-animball_two 1.6s infinite;
	-moz-animation:cssload-animball_two 1.6s infinite;
}
.cssload-internal{
	width:72px;
	height:72px;
	position:absolute;
}
.cssload-ballcolor{
	width: 33px;
	height: 33px;
	border-radius: 50%;
}
.cssload-ball-1,.cssload-ball-2,.cssload-ball-3,.cssload-ball-4{
	position: absolute;
	animation:cssload-animball_one 1.6s infinite ease;
	-o-animation:cssload-animball_one 1.6s infinite ease;
	-ms-animation:cssload-animball_one 1.6s infinite ease;
	-webkit-animation:cssload-animball_one 1.6s infinite ease;
	-moz-animation:cssload-animball_one 1.6s infinite ease;
}
.cssload-ball-1{
	background-color: var(--red);
	top:0;
	left:0;
}
.cssload-ball-2{
	background-color: var(--yellow);
	top:0;
	left:39px;
}
.cssload-ball-3{
	background-color: var(--blue);
	top:39px;
	left:0;
}
.cssload-ball-4{
	background-color: var(--green);
	top:39px;
	left:39px;
}
@keyframes cssload-animball_one{
	0%{ position: absolute;}
	50%{top:20px; left:20px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}
@-o-keyframes cssload-animball_one{
	0%{ position: absolute;}
	50%{top:20px; left:20px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}
@-ms-keyframes cssload-animball_one{
	0%{ position: absolute;}
	50%{top:20px; left:20px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}
@-webkit-keyframes cssload-animball_one{
	0%{ position: absolute;}
	50%{top:20px; left:20px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}
@-moz-keyframes cssload-animball_one{
	0%{ position: absolute;}
	50%{top:20px; left:20px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}
@keyframes cssload-animball_two{
	0%{transform:rotate(0deg) scale(1);}
	50%{transform:rotate(360deg) scale(1.3);}
	100%{transform:rotate(720deg) scale(1);}
}
@-o-keyframes cssload-animball_two{
	0%{-o-transform:rotate(0deg) scale(1);}
	50%{-o-transform:rotate(360deg) scale(1.3);}
	100%{-o-transform:rotate(720deg) scale(1);}
}
@-ms-keyframes cssload-animball_two{
	0%{-ms-transform:rotate(0deg) scale(1);}
	50%{-ms-transform:rotate(360deg) scale(1.3);}
	100%{-ms-transform:rotate(720deg) scale(1);}
}
@-webkit-keyframes cssload-animball_two{
	0%{-webkit-transform:rotate(0deg) scale(1);}
	50%{-webkit-transform:rotate(360deg) scale(1.3);}
	100%{-webkit-transform:rotate(720deg) scale(1);}
}
@-moz-keyframes cssload-animball_two{
	0%{-moz-transform:rotate(0deg) scale(1);}
	50%{-moz-transform:rotate(360deg) scale(1.3);}
	100%{-moz-transform:rotate(720deg) scale(1);}
}
/* ==================
	页面自适应样式
 ==================== */
@media screen and (min-width:681px) {
	/*布局*/
	.layui-layout-admin .layui-side,
	.layui-layout-admin .layui-body{
		top: 70px;
	}
	.layui-layout-admin .layui-body{
		left: 205px;
	}
	.layui-footer-btn .layui-footer{
		left: 0;
	}
	/*外行侧收缩*/
	.layadmin-side-shrink .layui-layout-admin .layui-body,
	.layadmin-side-shrink .layui-footer-btn .layui-footer{
		left: 65px;
	}
	.layadmin-side-shrink .layui-layout-admin .layui-side,
	.layadmin-side-shrink .layui-side-menu .layui-nav{
		width: 60px;
	}
	.layadmin-side-shrink .layui-side-menu .layui-nav-item>a {
		padding-right: 0;
	}
	.layadmin-side-shrink .layui-side-menu .layui-nav-item cite{
		display: none;
	}
}
@media screen and (max-width:680px) {
	/*布局*/
	.layui-layout-admin .layui-header .layui-nav,
	.layui-layout-admin .layui-header .layui-nav .layui-nav-item a{
		padding: 0 10px;
	}
	.layui-layout-admin .layui-side,
	.layui-layout-admin .layui-nav-tree{
		width: 120px;
	}
	.layui-layout-admin .layui-body{
		left: 125px;
	}
	.layui-footer-btn .layui-footer{
		left: 0;
	}
	/*外行侧收缩*/
	.layadmin-side-shrink .layui-layout-admin .layui-side,
	.layadmin-side-shrink .layui-layout-admin .layui-body{
		top: 40px;
		bottom: 0;
	}
	.layadmin-side-shrink .layui-layout-admin .layui-side{
    	transform: translate3d(-125px,0,0);
    	-webkit-transform: translate3d(-125px,0,0);
	}
	.layadmin-side-shrink .layui-layout-admin .layui-body,
	.layadmin-side-shrink .layui-footer-btn .layui-footer{
		left: 0;
		bottom: 0;
	}
	/*头部菜单*/
	.layui-header{
		height: 40px;
	}
	.layui-header .layui-nav .layui-nav-item{
		line-height: 40px;
	}
	.layui-nav-tree .layui-nav-item a{
		padding-top: 0;
		padding-bottom: 0;
	}
	.layui-form-item{
		margin-bottom: 5px;
	}
}
@media screen and (max-width:480px) {
	/*布局*/
	.layui-layout-admin .layui-side{
		left: -120px;
	}
	.layui-layout-admin .layui-body,
	.layui-layout-admin .layadmin-body-shade{
		top: 40px;
	}
	.layui-layout-admin .layui-body,
	.layui-footer-btn .layui-footer{
		left: 0;
		bottom: 0;
	}
	/*外行侧收缩*/
	.layadmin-side-shrink .layui-layout-admin .layui-side{
		bottom: 0!important;
	}
	.layadmin-side-shrink .layui-layout-admin .layui-side,
	.layadmin-side-shrink .layui-layout-admin .layui-body,
	.layadmin-side-shrink .layui-layout-admin .layadmin-body-shade{
    	transform: translate3d(120px,0,0);
    	-webkit-transform: translate3d(120px,0,0);
	}
	.layadmin-side-shrink .layadmin-body-shade{
		display: block;
	}
	/*头部菜单*/
	.layui-header .layui-nav .layui-nav-item cite {
		display: none;
	}
	/*收银台*/
	.cashier-box .layui-tab-item{
		flex-wrap: wrap;
	}
	.cashier-box .layui-tab-item .flex-sub,
	.cashier-box .layui-tab-item>.layui-input{
		margin: 0 0 10px;
	}
	.cashier-box .layui-tab-item>.layui-input,
	.cashier-box .layui-tab-item .flex-sub,
	.cashier-box .layui-tab-item .barcode{
		min-width: 100%;
		max-width: 100%;
	}
}