html{touch-action: manipulation;}

/*
电脑屏幕分辨率
屏幕比例4:3          屏幕比例16:10         屏幕比例16:9        屏幕比例5:4
VGA(640x480)        WVGA(800x480)       qHD(960 x 540)     SXGA (1280x1024)
SVGA(800x600)       WSVGA(1024x600)     720p(1280x720)  
XGA(1024x768)       WXGA(1280x800)      WXGA(1366x768)  
SXGA+(1400x1050)    WXGA+(1440x900)     1080p(1920x1080)    
UXGA(1600x1200)     WSXGA+(1680x1050)   QHD(2560 x 1440)    
QXGA(2048x1536)     WUXGA(1920x1200)        
WQXGA(2560x1600)

ipad分辨率
1024 * 768
1112 * 834
1133 * 744
1180 * 820
1194 * 834
1366 * 1024
*/  

/* 
手机型号    屏幕尺寸    屏幕密度    开发尺寸    像素尺寸    倍图
4/4s    3.5英寸   326ppi  320*480pt   640*960px   @2x
5/5s/5c/SE/SE2  4英寸 326ppi  320*568pt   640*1136px  @2x
6/6s/7/8    4.7英寸   326ppi  375*667pt   750*1334px  @2x
6/6s/7/8 Plus   5.5英寸   401ppi  414*736pt   1242*2208px @3x
X/XS    5.8英寸   458ppi  375*812pt   1125*2436px @3x
XR  6.1 英寸  326ppi  414*896pt   828*1792px  @2x
XS Max  6.5英寸   458ppi  414*896pt   1242*2688px @3x
11  6.1英寸   326ppi  414*896pt   828*1792px  @2x
11 Pro  5.8英寸   458ppi  375*812pt   1125*2436px @3x
11 Pro Max  6.5英寸   458ppi  414*896pt   1242*2688px @3x
12 mini 5.4英寸   476ppi  360*780pt   1080*2340px @3x
12  6.1英寸   460ppi  390*844pt   1170*2532px @3x
12 Pro  6.1英寸   460ppi  390*844pt   1170*2532px @3x
12 Pro Max  6.7英寸   458ppi  428*926pt   1284*2778px @3x 
*/

/* define bootstrap 5 columns */
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5, .col-xl-1-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-1-5 {
    flex: 0 0 20%;
    max-width: 20%;
}

/* define bootstrap 8 columns */
.col-xs-1-8, .col-sm-1-8, .col-md-1-8, .col-lg-1-8, .col-xl-1-8 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-1-8 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

/* 为了支持所有安卓和苹果手机的开发尺寸 */
@media (min-width: 300px){
    html{
        font-size:0.85rem;
    }
    .col-2-24 {
        flex: 0 0 4%;
        max-width: 4%;
    }
    .col-11-24 {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

/* 为了支持640x480分辨率的IOS平板 */
@media (min-width: 576px){
	html{
        font-size:0.8rem;
    }
    .container {
        max-width: 540px;
    }
    .col-sm-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-sm-1-8 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .col-sm-7-16 {
        flex: 0 0 43.75%;
        max-width: 43.75%;
    }
}

/* 为了支持800x600分辨率的IOS平板 */
@media (min-width: 720px){
	html{
        font-size:0.95rem;
    }
    .container {
        max-width: 720px;
    }
    .col-md-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-md-1-8 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}

/* 为了支持1024*768分辨率的IOS平板 */
@media (min-width: 960px){
	html{
        font-size:0.95rem;
    }
    .container {
        max-width: 960px;
    }
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-lg-1-8 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
	    max-width: 800px;
	}
}

/* 为了支持1112*834 1133*744分辨率的IOS平板 */
@media (min-width: 1050px){
	html{
        font-size:1rem;
    }
    .container {
        max-width: 1080px;
    }
}

/* 为了支持1180*820 1194*834分辨率的IOS平板 */
@media (min-width: 1150px){
	html{
        font-size:1.125rem;
    }
    .container {
        max-width: 1140px;
    }
}

/* 为了支持其他分辨率显示器 1280x800 */
@media (min-width: 1200px){
	html{
        font-size:1.125rem;
    }
    .container {
        max-width: 1140px;
    }
    .col-xl-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-xl-1-8 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
        max-width: 900px;
    }
}

/* 为了支持1366*1024分辨率的IOS平板 */
@media (min-width: 1300px){
	html{
        font-size:1.25rem;
    }
    .container {
        max-width: 1320px;
    }
    .modal-dialog {
        max-width: 650px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
        max-width: 950px;
    }
}

/* 为了支持其他分辨率显示器 1440×900 */
@media (min-width: 1400px){
	html{
        font-size:1.25rem;
    }
    .container {
        max-width: 1380px;
    }
    .modal-dialog {
        max-width: 700px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
        max-width: 1050px;
    }
}

/* 为了支持其他分辨率显示器 1680×1050 */
@media (min-width: 1600px){
	html{
        font-size:1.375rem;
    }
    .container {
        max-width: 1600px;
    }
    .modal-dialog {
        max-width: 750px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
        max-width: 1200px;
    }
}

/* 为了支持1920*1080分辨率的非平板安卓设备 */
@media (min-width: 1900px){
	html{
        font-size:1.375rem;
    }
    .container {
        max-width: 1850px;
    }
    .modal-dialog {
        max-width: 750px;
        margin: 1.75rem auto;
    }
    .modal-lg, .modal-xl {
        max-width: 1300px;
    }
}

*{
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
/* 	-webkit-appearance: none; */
}

*:not(input,textarea) { 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

::-webkit-scrollbar {
     width: 0px;
}

input::-webkit-search-cancel-button {
	display: none;
}

.pointer-events-none{
    pointer-events: none;
}

.font-weight-100{font-weight:100!important;}
.font-weight-200{font-weight:200!important;}
.font-weight-300{font-weight:300!important;}
.font-weight-400{font-weight:400!important;}
.font-weight-500{font-weight:500!important;}
.font-weight-600{font-weight:600!important;}
.font-weight-700{font-weight:700!important;}
.font-weight-800{font-weight:800!important;}
.font-weight-900{font-weight:900!important;}

.font-size-20{font-size:2.0rem!important;}
.font-size-19{font-size:1.9rem!important;}
.font-size-18{font-size:1.8rem!important;}
.font-size-17{font-size:1.7rem!important;}
.font-size-16{font-size:1.6rem!important;}
.font-size-15{font-size:1.5rem!important;}
.font-size-14{font-size:1.4rem!important;}
.font-size-13{font-size:1.3rem!important;}
.font-size-12{font-size:1.2rem!important;}
.font-size-11{font-size:1.1rem!important;}
.font-size-10{font-size:1rem!important;}
.font-size-9{font-size:0.9rem!important;}
.font-size-8{font-size:0.8rem!important;}
.font-size-7{font-size:0.7rem!important;}
.font-size-6{font-size:0.6rem!important;}
.font-size-5{font-size:0.5rem!important;}

.line-height-1{line-height:0.5!important;}
.line-height-2{line-height:1!important;}
.line-height-3{line-height:1.5!important;}
.line-height-4{line-height:2!important;}
.line-height-5{line-height:2.5!important;}

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

.w-20{
    width:20%!important;
}

.w-30{
    width:30%!important;
}

.w-40{
    width:40%!important;
}

.w-50{
    width:50%!important;
}

.w-60{
    width:50%!important;
}

.h-10{
    height:10%!important;
}

.h-20{
    height:20%!important;
}

.h-30{
    height:30%!important;
}

.h-40{
    height:40%!important;
}

.h-50{
    height:50%!important;
}

.h-60{
    height:60%!important;
}

.h-70{
    height:70%!important;
}

.mw-10{
    max-width:10%!important;
}

.mw-20{
    max-width:20%!important;
}

.mw-30{
    max-width:30%!important;
}

.mw-40{
    max-width:40%!important;
}

.mw-50{
	max-width:50%!important;
}

.mh-10{
    max-height:10%!important;
}

.mh-20{
    max-height:20%!important;
}

.mh-30{
    max-height:30%!important;
}

.mh-40{
    max-height:40%!important;
}

.mh-50{
    max-height:50%!important;
}

.mh-60{
    max-height:60%!important;
}

.mh-70{
    max-height:70%!important;
}

.mh-80{
    max-height:80%!important;
}

.lh-0{
    line-height: 0;
}

.lh-15{
    line-height: 1.5;
}

.lh-18{
    line-height: 1.8;
}

.lh-20{
    line-height: 2;
}

.b-20{
    bottom:20% !important;
}

.adoluna-width-equal{
    font-family: 'Courier New', Courier, monospace!important;
}

.adoluna-language a{
    text-decoration: none;
}

.adoluna-none{
	display:none;
}

.adoluna-font-90{
	font-size: 0.9rem!important;
}

.adoluna-weight-500{
    font-weight: 500!important;
}

.adoluna-weight-600{
    font-weight: 600!important;
}

.adoluna-flex{
	display: flex;
	flex: 1;
}

.adoluna-flex-not{
	display: block !important;
	flex: unset !important;
}

.adoluna-bg-none{
    background:none !important;
}

.adoluna-overflow-auto{
    overflow:auto!important;
}

.adoluna-overflow-x{
    overflow-x:overlay!important;
    overflow-y:hidden!important;
}

.adoluna-overflow-y{
    overflow-x:hidden!important;
    overflow-y:auto!important;
}

.adoluna-overflow-hidden{
    overflow:hidden!important;
}

.adoluna-container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.adoluna-container-top{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 2.5rem;
    left: 0;
    overflow: hidden;
}

.adoluna-container-bottom{
    position: absolute;
    height: 2.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.adoluna-tabPanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.adoluna-pagePanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.adoluna-page {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
/*     max-width: 1400px; */
    /* margin: auto; */
}

.adoluna-nopage {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display:none;
}

.adoluna-body{
    position: relative;
    display:flex;
    flex-grow: 1;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.adoluna-body-revert{
    position: relative;
    display:flex;
    flex-grow: 1;
    flex-direction: revert;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.adoluna-content{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
}

.adoluna-header{
    position:relative;
    display:flex;
}

.adoluna-width-over{
    width: calc(100% + 20px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.adoluna-width-just{
    width: 100vw;
    height: 100%;
}

.adoluna-height-over{
    width: 100%;
    height: calc(100% + 20px);
    overflow-x: auto;
    overflow-y: hidden;
}

.adoluna-height-just{
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-align: left;
    font-size: 0;
    letter-spacing: -3px;
    overflow: auto;
}

.header-item {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #383c40;
    padding: .5rem 0.8rem;
    border: 0
}

.header-item:hover {
    color: #383c40
}

.header-profile-user {
    height: 1.5rem;
    width: 1.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3px;
    border: 1px solid #EEE;
}

.unlock-profile-user {
    height: 88px;
    width: 88px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3px;
    border: 1px solid #EEE;
}

.adoluna-body-nogrow{
	flex-grow:unset !important;
}

.adoluna-body-top{
	position: absolute;
	display:flex;
    flex:1;
	left: 0;
    right: 0;
    top: 0;
    height: 3.5rem;
    overflow: auto;
}

.adoluna-body-top.vertical{
    height: 5rem;
}

.adoluna-body-mid{
	position: absolute;
	left: 0;
    right: 0;
    bottom: 0;
    top: 3.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.adoluna-body-mid.vertical{
    top: 5rem;
}

.adoluna-footer{
	position: relative;
}

.adoluna-footer-max{
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
}

.adoluna-start{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    z-index: 1;
}

.adoluna-tabbar{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex: 1;
    position: relative;
}

.adoluna-tabbar:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.adoluna-tabbar a{
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.adoluna-tabbar-item{
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 8px 0;
    padding-bottom: calc(8px + constant(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    font-size: 0;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.adoluna-tabbar-item:first-child {
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
}

.adoluna-tabbar-item:last-child {
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

.adoluna-tabbar-icon {
    display: inline-block;
    margin-bottom: 2px;
}

.adoluna-tabbar-badge {
    display: inline-block;
    padding: .15em .4em;
    min-width: 8px;
    border-radius: 18px;
    background-color: #FA5151;
    color: #FFFFFF;
    line-height: 1.2;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
}

.adoluna-tabbar-label {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom:0;
    text-align: center;
}

.adoluna-tabbar-item.adoluna-tabbar-item-on .adoluna-tabbar-icon, 
.adoluna-tabbar-item.adoluna-tabbar-item-on .adoluna-tabbar-icon > i, 
.adoluna-tabbar-item.adoluna-tabbar-item-on .adoluna-tabbar-label{
    fill: var(--primary);
    color: var(--primary);
}

.adoluna-radius{
    border-radius:15px !important;
    overflow: hidden;
}

.adoluna-top-radius{
    border-radius:15px 15px 0 0;
}

.adoluna-bottom-radius{
    border-radius:0 0 15px 15px;
}

.adoluna-loading{
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.adoluna-loading-bg{
    background-color: #F5F5F5;
}

.adoluna-loading-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.adoluna-loading-mask{
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background-color: #CCC;
    opacity: 0.05; */
    background-color: #EEE;
    opacity: 0.05;
}

.adoluna-loading-content{
	position: absolute;
    width: 2rem;
    height: 2rem;
    top: calc(50% - 1rem);
    left: calc(50% - 1rem);
    /* transform: translate(-50%, -50%);
    padding: 0.1rem;*/
}

.adoluna-toast{
    position: absolute;
    left: 50%;
    bottom: 3rem;
    transform: translate(-50%, 0);
    min-width: 8rem;
    text-align: center;
    border-radius: 2rem;
    background-color: #EEE;
    color: #000;
    opacity: 0.7;
    z-index: 100;
}

.adoluna-alert{
    position: absolute;
    left: 0;
	top : 0;
	right: 0;
	border-radius: 0;
	z-index:1;
}

.adoluna-spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}

.adoluna-tooltip .tooltip-inner{
    max-width:300px;
    font-size: 0.9rem;
    text-align: left;
}

.btn-lg .adoluna-spinner-border {
    width: 1.4rem;
    height: 1.4rem;
    border-width: .2em;
}

.adoluna-img-50{
    height: 0;
    padding-bottom: 50%;
    background-color: #F5F5F5;
}

.adoluna-border-2 {
    box-sizing: border-box !important;
    border-width: 2px !important;
    border-style: solid;
}

.adoluna-border-bottom-2 {
    box-sizing: border-box !important;
    border-bottom-width: 2px !important;
    border-bottom-style: solid;
}

.adoluna-border-bottom-3 {
    box-sizing: border-box !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid;
}

.adoluna-pwd-invisible{
	position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    fill: #999999;
}

.adoluna-pwd-visible{
	fill:var(--primary);
}

.adoluna-position-center{
	position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.adoluna-feature-img{
    height:0;
    padding-bottom:100%;
    background-color: #F5F5F5;
}


.adoluna-image-error::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "NO IMAGE";
    color: #CCC;
    font-weight: 500;
    font-size: 1rem;
}

.adoluna-custom-right{
    width:100%;	
}

.adoluna-custom-right::before,.adoluna-custom-right::after{
	right:0;
	left: unset;
}

.adoluna-custom-left{
	display: inline-block;
    width:100%;	
    text-indent: calc(1rem + 15px);
}

.adoluna-custom-left::before,.adoluna-custom-left::after{
	left: 0;
	top:0.2rem;
}

.adoluna-custom-padding{
	padding-left: calc(1rem + 30px);
}

.adoluna-custom-label{
	position: relative;
    width: 100%;
    height: 2.5rem;
    margin-bottom: 0;
}

.adoluna-custom-label::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2.5rem;
    border-radius: 3rem;
    text-align: center;
    line-height: 2.3rem;
    pointer-events: none;
    content: "";
    font-size: 90%;
    font-weight: 600;
    background-color: #fff;
    color: #999;
    border: #BBB solid 2px;
/*     border: #adb5bd solid 2px; */
}

.adoluna-login-input{
	text-indent : 2rem;
	outline:medium;
}

.adoluna-login-input:focus{
	outline: medium;
    box-shadow: none;
}

.adoluna-login-input::-webkit-input-placeholder {  	/* WebKit browsers */
    color: #BBB;
    font-weight:300;
}

.adoluna-login-icon{
    position: absolute;
    top: 0.75rem;
    left: 0.5rem;
    width:1.5rem;
    height:1.5rem;
}

.adoluna-icon-edit {
    height: 1.5rem;
    line-height: 1.5rem;
}

.adoluna-icon-close {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 0;
}

.adoluna-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
}

.adoluna-icon-tag {
    width: 1.1rem;
    height: 1.1rem;
    line-height: 0;
    margin: 0;
}

.adoluna-border-left {
    border-left: 1px solid #DDD;
}

.adoluna-border-right {
    border-right: 1px solid #DDD;
}

.adoluna-border-bottom {
    border-bottom: 1px solid #DDD;
}

.adoluna-border-top {
    border-top: 1px solid #DDD;
}

.adoluna-border-input {
	border: 1px solid #ced4da;
}

.adoluna-bg-gray1 {
    background-color: #CCC;
}

.adoluna-bg-gray2 {
	background-color: #DDD;
}

.adoluna-bg-gray3 {
    background-color: #EEE;
}

.adoluna-bg-gray4 {
	background-color: #F1F1F1;
}

.adoluna-bg-gray5 {
    background-color: #FAFAFA;
}

.adoluna-lineclamp-2{
	display: -webkit-box;
	width:100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.adoluna-lineclamp-3{
	display: -webkit-box;
	width:100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.adoluna-lineclamp-4{
	display: -webkit-box;
	width:100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.adoluna-line-delete {
    text-decoration: line-through 1px #666;
    color: #6c757d;
}

.adoluna-icon-scan{
    position: absolute;
    right: 0.75rem;
    font-size: 1.75rem;
    line-height: 1.75rem;
}

.adoluna-icon-waitlistAdd{
    position: absolute;
    right: 0.75rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

.adoluna-icon-waitlistSms{
    position: absolute;
    left: 0.75rem;
    line-height: 1.5rem;
    padding: 0.5rem 0;
    font-weight: 500;
}

.adoluna-icon-box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.5rem;
}

.adoluna-icon-box.adoluna-icon-customer{
	top: 2rem;
}

.adoluna-icon-box .adoluna-icon-item{
    position: absolute;
    top: calc(50% - 0.625rem);
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 0;
}

.adoluna-radio-large::before, .adoluna-radio-large::after{
    width:1.5rem !important;
    height:1.5rem !important;
    top:0 !important;
}

.original_html{
	display:none;
}

.adoluna-noImage{
    background: url(../../images/20250524080411/kiosk/default_noImage.png) no-repeat;
    background-size: 50%;
    background-position: 50% 50%;
}

.adoluna-background-none {
	background: none!important;
}

.adoluna-z-unset{
	z-index: unset !important;
}

.adoluna-modal-mask{
	position: absolute !important;
	top: 0;
	bottom:0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.adoluna-modal-custom{
	/* position: absolute !important;
	width: 100%;
    height: 100%; */
    z-index: unset !important;
    background-color: rgb(0,0,0,0.5);
}

.adoluna-spinner-custom{
	width: 1.25rem !important;
    height: 1.25rem !important;
    border: 0.2em solid currentColor !important;
    border-right-color: transparent !important;
}

.adoluna-payment-img {
    position:relative;
    width:100%;
    height: 0;
    padding-bottom: 60%;
}

.adoluna-payment-img label:first-child{
    margin-top: calc(38% - 1.5rem);
    height: 3rem;
    color: #444;
}

.adoluna-operate-right {
    position: absolute;
    right: 3.5rem;
}

.adoluna-element-size{
    position: absolute;
    right: 0;
    width: 2rem;
    height: 2rem;
    z-index: 1;
}

/* pos 样式 */
.pos-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
    overflow: hidden;
}

.pos-header-icon {
	width:1.5rem;
	height:1.5rem;
	margin:0;
}

.pos-body-down {
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.pos-body-up {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 4.5rem;
    overflow: hidden;
}

.pos-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    overflow: hidden;
}

.pos-left {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 33.333333%;
    right: 0;
    overflow: hidden;
}

.pos-right {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 66.666666%;
    overflow: hidden;
}

.pos-detailLeft {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 39%;
    overflow: hidden;
}

.pos-detailLeft.detailAll{
	left:0;
}

.pos-detailRight {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 61%;
    left: 0;
    overflow: hidden;
}

.pos-detailRight.detailAll{
	right:100%;
}

.pos-filterLeft, .pos-reportLeft {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 25%;
    overflow: hidden;
}

.pos-reportLeft{
	right:33%;
}

.pos-filterRight, .pos-reportRight {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 75%;
    right: 0;
    overflow: hidden;
}

.pos-reportRight {
    left:67%;	
}

.pos-report-content {
	font-family: Courier;
    font-weight: 500;
    font-size: 0.8rem;
    text-align: center;
    top: 1px;
    padding: 0.5rem 0;
}

@media (min-width : 576px) {
	.pos-modal-sm{
	   max-width: 350px!important;
	}
	
	.pos-modal-md{
       max-width: 550px!important;
    }
}

@media (max-width : 768px) {
    .pos-left, .pos-right, 
    .pos-detailLeft, .pos-detailRight, 
    .pos-reportLeft, .pos-reportRight, 
    .pos-filterLeft, .pos-filterRight{
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }
    .pos-right, .pos-detailRight, .pos-filterRight, .pos-reportRight {
        display:none;
    }
    
    .pos-content {
        min-height: 300px;
    }
    
    .adoluna-d-block {
        display: block!important;
    }
    
    .adoluna-d-inline-block {
        display: inline-block!important;
    }
    
    .adoluna-d-block {
        display: block!important;
    }
    
    .adoluna-d-none {
        display: none!important;
    }
}

@media (min-width: 960px) {
    .pos-modal-md {
        max-width: 600px!important;
    }
    .pos-modal-lg, .pos-modal-xl {
        max-width: 900px!important;
    }
}

@media (min-width: 1200px) {
	.pos-modal-md {
        max-width: 650px!important;
    }
    .pos-modal-lg, .pos-modal-xl {
        max-width: 1000px !important;
    }
}

/* 为了支持1366*1024分辨率的IOS平板 */
@media (min-width: 1300px){
    .pos-modal-md {
        max-width: 700px!important;
    }
    .pos-modal-lg, .pos-modal-xl {
        max-width: 1050px !important;
    }
}

/* 为了支持其他分辨率显示器 1440×900 */
@media (min-width: 1400px){
    .pos-modal-md {
        max-width: 750px!important;
    }
    .pos-modal-lg, .pos-modal-xl {
        max-width: 1100px !important;
    }
}

/* 为了支持其他分辨率显示器 1680×1050 */
@media (min-width: 1600px){
    .pos-modal-md {
        max-width: 800px!important;
    }
    .pos-modal-lg, .pos-modal-xl {
        max-width: 1300px !important;
    }
}

/* 为了支持1920*1080分辨率的非平板安卓设备 */
@media (min-width: 1900px){
	.pos-modal-md {
	    max-width: 850px!important;
	}
    .pos-modal-lg, .pos-modal-xl {
        max-width: 1400px !important;
    }
}

.pos-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,0,0,0.2);
}

.pos-radius {
    border-radius: 15px !important;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 10%)!important;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 10%);
}

.pos-nav-close {
	width: 1.75rem;
	height: 1.75rem;
}

.pos-nav-icon {
	width:3.25rem;
	height:3.25rem;
	padding:0.75rem;
	border-color: var(--primary)!important;
    fill: var(--primary);
}

.pos-nav-tips {
	display:none;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--primary);
    border-radius: 100%;
    color: #FFF;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.5rem;
}

.pos-batch-tips {
    position: absolute;
    right: 1.75rem;
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--primary);
    border-radius: 100%;
    color: #FFF;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.5rem;
    text-align: center;
}

.pos-pwd-input {
    margin: 0 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #eee;
    border-radius: 3rem;
    background-color: transparent;
    color: transparent;
    padding-left: 0;
    outline: medium;
}

.pos-pwd-input.active {
	background-color: #f9f9f9;
    opacity: 0.8;
}

.pos-pwd-button{
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #FFF;
    border-radius: 50rem!important;
    padding: 0.5rem;
    text-align: center;
    user-select: none;
    background-color: transparent;
    line-height: 1.5;
    color: #FFF;
    font-size: 1.2rem;
    outline: medium;
    font-weight: 500;
}

.pos-pwd-button.active {
	background-color: #f9f9f9;
    opacity: 0.8;
    color: #666;
}

.pos-pwd-button:focus {
	outline:medium!important;
}

.pos-keypad-button {
	padding: 0.6rem!important;
}

.pos-button{
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #DDD;
    border-radius: 50rem;
    padding: 0.375rem;
    text-align: center;
    user-select: none;
    background-color: var(--light);
    color: var(--dark);
    font-weight: 600;
    outline: medium;
}

.pos-button-bg{
    background-color: #DDD;
}

.pos-button.active{
    background-color: #DDD;
}

.pos-button.primaryActive {
	border: 1px solid var(--primary);
    background-color: var(--primary);
    color: #FFF;
}

.pos-button:focus {
    outline:medium!important;
}

.pos-input-range {
    border: 1px solid #CCC !important;
}

.pos-keypad-input.active, .pos-input-readonly.active, .pos-input-range.active {
    color: #495057;
    background-color: #fff !important;
    border-color: #ff7a6c !important;
    outline: 0;
}

.pos-keypad-input:focus, .pos-input-readonly.focus, .pos-input-range.focus {
    color: #495057;
    background-color: #fff !important;
    border-color: #ff7a6c !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(235 23 0 / 25%);
}

.pos-keypad-input[readonly], .pos-input-readonly[readonly] {
	color: #495057 !important;
    background-color:white !important;
}

.pos-keypad-input[disabled], .pos-input-readonly[disabled] {
	color: #495057 !important;
    background-color:white !important;
}

.pos-menu {
    position: relative;
    display: flex;
    border: none;
    border-radius: 50rem;
    padding: 0.75rem;
    color: var(--dark);
    background-color: #EEE;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.pos-menu.active {
    color: #FFF;
    background-color: var(--primary);
}

.pos-category {
	position: relative;
	display: flex;
    height: 4.5rem;
    border: none;
    border-radius: 4px;
    line-height: 1.25rem;
    padding: 0.25rem;
    color: var(--dark);
    background-color: #EEE;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.pos-category.active {
	color: #FFF;
    background-color: var(--primary);
}

.pos-item {
	position: relative;
    display: flex;
    height: 4.5rem;
    border-radius: 4px;
    line-height: 1rem;
    padding: 0.25rem;
    color: #333;
    background-color: #FFF;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: 600;
    border: 1px solid #DDD;
    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 5%);
    text-overflow: ellipsis;
    overflow: hidden;
}

.pos-item-cashbox{
	height: 10rem;
	border-radius: 15px !important;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 10%)!important;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 10%);
}

.pos-item.active {
    color: #FFF;
    background-color: var(--primary);
    fill: #FFF;
}

.pos-item.detail {
    height: 7rem;
}

.pos-item.disabled {
    color: #DDD;
    border: none!important;
}

.pos-item .disabled {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0,0,0,0.1);
    border: none !important;
    display: flex;
    border-radius: 4px;
    color: #666;
    justify-content: center;
    align-items: center;
}

.pos-padding {
	padding-right: 1px !important;
	padding-bottom: 1px !important;
}

.pos-popover {
	width: calc(100% - 15px);
	max-width: calc(100% - 15px);
	z-index: unset;
	background-color: #EEE;
}

.pos-popover .arrow::after {
	border-bottom-color: #F5F5F5 !important;
	border-top-color: #F5F5F5 !important;
}

.pos-order-head {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #EEE;
    border: 1px solid #DDD;
    box-sizing: border-box;
    color: var(--dark);
}

.pos-order-head.active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.pos-order-head.active p{
	color: #fff !important;
}

.pos-order-head .operate{
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pos-people-select {
    background-color: #FAFAFA !important;
}

.pos-seat-select {
    background-color: #DDD;
    color: #333 !important;
}

.pos-item-select {
	background-color: #DDD;
	color: #333 !important;
}

.pos-item-status{
    position: absolute;
    top: calc(50% - 0.5rem);
    right: 0.1rem;
    width: 0.25rem;
    height: 1rem;
    border-radius: 1.25rem;
}

.pos-item-save {
	width:100%;
	height:100%;
	border-radius: inherit;
    background-color: var(--primary);
}

.pos-item-sending {
	width:100%;
    height:100%;
    border-radius: inherit;
    background-color: var(--yellow);
}

.pos-item-sended {
	width:100%;
    height:100%;
    border-radius: inherit;
	background-color: var(--green);
}

.pos-order-operate{
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    line-height: 1.25rem;
    font-size: 0.85rem;
    z-index: unset !important;
}

.pos-modifier-operate{
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    z-index: unset !important;
}

.pos-tip {
    position: absolute;
    top: 0.3rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.75rem;
    background-color: var(--green);
    color: #FFF;
    text-align: center;
}

.pos-icon {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    font-size:0.75rem;
}

.pos-credit{
    position: absolute;
    bottom: 0.5rem;
    right: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.pos-line{
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--danger);
    top: 49%;
}

.pos-cash {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 0.5rem;
    height: 1rem;
}

.pos-percent {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 0.5rem;
    height: 1rem;
}

.pos-list.active {
	border: 1px solid var(--primary)!important;
	background-color: var(--primary)!important;
    color: var(--white)!important;
    fill: var(--white)!important;
}

.pos-list p:last-child{
	color:var(--primary);
}

.pos-list.active p:last-child{
    color:#FFF;
}

.pos-list.active .text-primary{
    color: var(--dark)!important;
}

.pos-list.active .pos-nav-icon{
	border-color: #FFF!important;
    fill: #FFF;
}

.pos-list.active .pos-credit{
    color: var(--white)!important;
}

.pos-select{
	background-color: #e9ecef;
}

.pos-break{
	word-break: break-all!important;
    overflow-wrap: break-all!important;
}

.pos-underline{
    text-decoration: underline dashed var(--primary);
    text-underline-offset: 2px;
}

.pos-none{
	display:none;
}

.pos-wait{
	width: 4rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 4rem;
    background-color: #aaa;
    color: #FFF;
    font-weight: 600;
}

.pos-filterIcon {
    transition: all 0.2s ease-out;
    position: absolute;
    right: 1rem;
    top: calc(50% - 0.45rem);
    display: inline-block;
    margin: 0px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    width: 0.6rem;
    height: 0.6rem;
    transform: rotate(45deg);
    cursor: pointer;
}

.pos-filterIcon.rotate {
    transform: rotate(-45deg);
    top: calc(50% - 0.3rem);
}

.pos-deleteIcon {
	position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    right: -0.675rem;
    top: -0.675rem;
    background-color: #eee;
    border: 1px solid #DDD;
    border-radius: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35rem;
    color: #666;
    text-shadow: 0 1px 0 #fff;
}

.pos-order-void {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.1;
    text-align:center;
    color:#FFF;
}

.pos-order-signature{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 85%;
    max-height: 85%;
}

.pos-table-content {
	top: 15px;
    left:15px;
    right:15px;
    bottom:15px;
}

.pos-table-free {
    background-color: var(--light);
    border: 1px solid #DDD;
}

.pos-table-free.active {
	background-color: var(--primary);
    border: 1px solid var(--primary);
    color:#FFF;
}

.pos-table-use {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: #FFF;
}

.pos-table-clear {
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
    color: #FFF;
}

.pos-auto-complete {
	position:relative;
}

.pos-auto-complete .auto-complete-input{
	border: 1px solid #ff7a6c;
	border-bottom: 1px solid #ddd;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

.pos-auto-complete .auto-complete-list {
	position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: auto;
    line-height: 1.5;
    font-size: 1rem;
    border: 1px solid #ff7a6c;
    border-top: 1px solid #ddd;
    /* background-color: #F5F5F5; */
    background-color: #FFF;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    z-index: 1;
}

.pos-auto-complete .auto-complete-item {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #ddd;
    color: var(--gray);
    font-size: 1rem;
}

.pos-auto-complete .auto-complete-item.active {
	background-color: #EEE;
}

.pos-auto-complete .auto-complete-item:last-child {
	border-bottom: 0;
}

.pos-mobiscroll {
	font-size:1rem;
}

.pos-mobiscroll .mbsc-popup-body {
    border-radius: 15px;
}

.pos-mobiscroll .mbsc-scroller-wheel-group {
    padding: 1rem;
}

.pos-mobiscroll .mbsc-popup-buttons {
    padding: 0 0 1rem 0!important;
}

.pos-mobiscroll .pos-time-button {
	width: calc(50% - 1.5rem);
    border: 1px solid #DDD;
    border-radius: 50rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.5;
    text-transform: capitalize;
    text-align: center;
    user-select: none;
    outline: medium;
}

.pos-mobiscroll .pos-button-cancel {
	color: #212529!important;
    background-color: #eee!important;
    border-color: #eee!important;
    margin-left: 1rem!important;
    margin-right: 0.5rem!important;
}

.pos-mobiscroll .pos-button-set {
    color: #fff!important;;
    background-color: var(--primary)!important;
    border-color: var(--primary)!important;
    margin-left: 0.5rem!important;
    margin-right: 1rem!important;
}

.pos-rotate{
    -webkit-animation: rotate 1s linear infinite;
    -moz-animation: rotate 1s linear infinite;
    -o-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

.pos-caller-content{
    position: fixed;
    right: calc(50% - 2.5rem);
    top: 4rem;
    width: 5rem;
    height: 5rem;
    text-align: center;
}

.pos-caller-close{
    position: absolute;
    right: -1.25rem;
    top: -1.25rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
    line-height: 0;
    border-radius: 2rem;
    cursor: pointer;
}

.pos-caller-close svg{
    fill: rgba(0, 0, 0, 0.2);
}

.pos-caller-phone{
    width: 5rem;
    height: 5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4rem;
    animation: rotateShake 0.5s linear infinite;
    cursor: pointer;
}

.pos-caller-phone .pos-caller-icon{
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
    animation: scaleShake 1s linear infinite;
}

/*scale 和 rotate 不能共用*/
@keyframes rotateShake {
  0% {
    transform: rotate(-5deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes scaleShake {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shadowShake {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
  }
}

/* 非样式设置class */
.underline{
    /* text-decoration: underline dashed var(--primary);
    text-underline-offset: 2px; */
    border-bottom:2px dashed var(--primary);
}

/* kiosk 样式 */
.kiosk-nav {
	min-height:6rem;
}

.kiosk-logo {
	display: table;
	padding: 1rem 0;
}

.kiosk-logo-img {
	display: table-cell;
	height: 4rem;
}

.kiosk-logo-label {
    display: table-cell;
    height: calc(4rem - 2px);
    line-height: calc(4rem - 2px);
}

.kiosk-icon-box{
	display: inline-block;
	width:1.625rem;
	height:1.625rem;
}

.kiosk-icon-amount{
    display: inline-block;
    height:1.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
}

.kiosk-icon{
	width:100%;
	height:100%;
}

.kiosk-adoluna-img {
	display: table-cell;
	width:100%;
	max-height: 5.6rem !important;
}

.kiosk-ad-img {
	position:relative;
	width:100%;
	height:100%;
/* 	padding-bottom: 39%; */
	background-color: #F5F5F5;
}

.kiosk-adFooter-img {
	position:relative;
	width:100%;
	height: 0;
	padding-bottom: 10%;
	background-color: #F5F5F5;
}

.kiosk-adContent-start {
    position: absolute;
    width: 100%;
    bottom: 2rem;
    z-index: 1;
}

.kiosk-logo-text, .kiosk-logo-small {
	display: table-cell;
	margin-left: 1rem;
}

.kiosk-logo-text {
	font-size: 2.5rem;
}

.kiosk-logo-small {
	font-size: 1rem;
}

.kiosk-icon-control{
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: 20px;
    background-color: rgba(235,23,0,0.3) !important;
}

.kiosk-icon-tip{
	position: absolute;
    top: 0.4rem;
    right: 50%;
    width: 1rem;
    height: 1rem;
    background-color: var(--primary);
    border-radius: 1rem;
    color: #FFF;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.1rem;
    transform: translate(120%,0%);
}

.kiosk-menu-middle {
    display: grid;
    place-items: center;
}

.kiosk-item-img {
	position:relative;
	width:100%;
	height: 0;
	padding-bottom: 66.67%;
	background-color: #F5F5F5;
	border-radius: 0.25rem;
	overflow: hidden;
}

.scan-item-img {
    position:relative;
    width:100%;
    height: 0;
    padding-bottom: 100%;
    background-color: #F5F5F5;
    border-radius: 0.25rem;
    overflow: hidden;
}

.adoluna-group-img {
    position:relative;
    width:100%;
    height: 0;
    padding-bottom: 100%;
    background-color: #F5F5F5;
    border-radius: 0.25rem;
    overflow: hidden;
}

.kiosk-modifier-operate{
	width: 1.5rem;
    height: 1.5rem;
    line-height: 0;
    padding: 0;
    z-index: unset !important;
}

.kiosk-time-container{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    width: inherit;
    height: inherit;
    color: #ffffff;
}

.kiosk-time-count{
	display: flex;
    flex-direction: row;
    flex-wrap: inherit;
    justify-content: center;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 5px solid var(--primary);
    width: 80px;
    height: 80px;
    border-radius: 100%;
    color: #000;
    font-size: 1.5rem;
}

.kiosk-time-svg{
    position: absolute;
    width: 80px;
    height: 80px;
}
.scan-settle-space{
    margin-bottom: 10rem;
}
.scan-settle-fixed{
    position: fixed;
    bottom: 2rem;
    background-color: #FFF;
}
.kiosk-settle-space{
    margin-bottom: 29rem;
}
.kiosk-settle-fixed{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2rem;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #FFF;
}

.kiosk-time-cls{
    fill:none;
    stroke:var(--primary);
/*     stroke-linecap: round; */
    stroke-miterlimit:10;
    stroke-width:6px;
    stroke-dasharray: 236;
    stroke-dashoffset: 236;
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}

.kiosk-time-run{
    -webkit-animation-name: dash;
    -moz-animation-name: dash;
    -o-animation-name: dash;
    animation-name: dash;
    animation-duration: 120s;
    animation-play-state: running;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes dash{
    0%{
        stroke: #eee;
        stroke-dashoffset: 236;
    }
    100%{
        stroke: #eee;
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash{
    0%{
        stroke: #eee;
        stroke-dashoffset: 236;
    }
    100%{
        stroke: #eee;
        stroke-dashoffset: 0;
    }
}

.kiosk-marquee-promotion{
	position: relative;
	height: 2rem;
    margin: 0;
    overflow: hidden;
    line-height: 2rem;
}

.kiosk-marquee-promotion li{
	list-style : none;
}

.kiosk-marquee-promotion .animate {
	transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
}

.kiosk-group-up{
	position: absolute;
    right: 2rem;
    top: 0.625rem;
    width:1.5rem;
    height:1.5rem;
}

.kiosk-group-down{
	position: absolute;
    right: 0.25rem;
    top: 0.625rem;
    width:1.5rem;
    height:1.5rem;
}

.kiosk-btn-sm{
	width:2rem;
}

.kiosk-btn{
	width:3rem;
}

.kiosk-swiper-action{
	border:1px solid var(--primary);
	background-color:#EEE;
}

.kiosk-complete-time{
	position: absolute;
    bottom: 2rem;
    left: 50%;
    width: 4rem;
    margin-left: -2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
}

.kiosk-item-promotion{
    position: absolute;
    top: -1.5rem;
    left: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.25rem;
    border-radius: 2rem;
    padding: 0 0.5rem;
    opacity: 0.7;
}

.scan-item-promotion{
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 2rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.5rem;
}


/* screen样式 */
.screen-body-mid{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.screen-ad-img {
    position:relative;
    width:100%;
    height: 100%;
    background-color: #F5F5F5;
}

.screen-end-run{
    -webkit-animation-name: dash;
    -moz-animation-name: dash;
    -o-animation-name: dash;
    animation-name: dash;
    animation-duration: 5s;
    animation-play-state: running;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.receipt-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F5F5F5;
    overflow: auto;
}

@media (min-width: 600px){
    .receipt-container{
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.receipt-content{
    max-width: 600px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F5F5F5;
}

.receipt-signature{
    max-height: 8rem;
}

.btn-disabled {
    color: #bbb;
    background-color: #e9ecef;
    border-color: #e9ecef;
}

/*Waitlist 样式*/
.waitlist-complete-time{
    position: absolute;
    bottom: 5rem;
    left: 50%;
    width: 4rem;
    margin-left: -2rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
}

/*Qrcode Scan Begin*/
.qr-scanner {
    width: 15rem;
    height: 15rem;
    position: relative;
    background-color: #FFF;
    border: 0.2rem solid #FFF;
}

.qr-scanner:focus {
    border: 0.2rem solid rgba(0, 255, 51, 0.2)
}

.qr-scanner .image {
    position: absolute;
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
}

.qr-scanner .box {
    width: 15rem;
    height: 15rem;
    max-height: 15rem;
    max-width: 15rem;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.qr-scanner .line {
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
    border-bottom: 3px solid #00ff33;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
    content: '';
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;
    border: 0.3rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
    top: 0;
    border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
    bottom: 0;
    border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
    left: 0;
    border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
    right: 0;
    border-right-color: #00ff33;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}
/*Qrcode Scan End*/

/* bootstarp 样式代替 */
.form-control.is-invalid~.invalid-feedback~.adoluna-pwd-invisible{
    display:none;
}

.table td, .table th{
	padding:0.5rem!important;
}

.table th{
    font-weight: 600!important;
}

button.close{
    outline:0;
}

.btn-sm{
	font-size:.75rem;
}

.btn-light {
    background-color: #F1F1F1 !important;
    border-color: #F1F1F1 !important;
}

.bg-light {
    background-color: #F1F1F1 !important;
    border-color: #F1F1F1 !important;
}

.fill-primary{
    fill: var(--primary);
}

.fill-success{
    fill: var(--success);
}

.fill-gray{
    fill: var(--gray);
}

.text-orange{
	color: var(--orange);
}

input:focus, select:focus{
    box-shadow:none!important;	
}

.btn-outline-radio {
    color: #adb5bd;
    border-color: #adb5bd;
}

.input-group-text.active{
    color: #FFF;
    background-color: var(--primary);
    border-color: var(--primary);
}