.inpBox .errText{
width: 100% !important;
font-size: 12px;
color: #F00;
display: none;
margin-top: 4px;
}

.inpBoxErr input{
border-color: #F00 !important;
}

.inpBoxErr .selectize-control.single .selectize-input{
border-color: #F00 !important;
}

#messages{
margin-top: 10px;
}

.shipBox{
width: 100%;
padding: 30px;
box-sizing: border-box;
background-color: #FAFAFA;
border-radius: 10px;
}

.metLists{
width: 100%;
margin-top: 36px;
}

.metList{
width: 100%;
background-color: #fff;
border: 1px solid #DDDFE7;
color: #333;
border-radius: 4px;
padding: 15px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
cursor: pointer;
}

.metList:nth-child(1){
margin-top: 0;
}

.metList-active{
border-color: #FA6E05;
}

.metList .tit{
width: 100%;
font-size: 14px;
font-weight: 700;
}

.metList .des{
width: 100%;
font-size: 14px;
color: #666;
margin-top: 6px;
}

/* .metList-active .des{
color: #FA6D07;
} */

.metList .pic{
font-size: 18px;
}


/* 下方选择支付方式 */
.payLists{
width: 100%;
}

.payList{
width: 100%;
min-height: 70px;
padding: 12px 30px;
background-color: #fff;
border: 1px solid #DDDFE7;
border-radius: 4px;
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
margin-top: 10px;
}

.payList:nth-child(1){
margin-top: 0;
}

.payList:hover{
border-color: #FA6E07;
}

.payList-active{
min-height: 256px;
border-color: #FA6E07;
cursor: default;
}

.payList .rio{
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1px solid #D0D6D9;
border-radius: 50%;
box-sizing: border-box;
margin-right: 20px;
}

.payList-active .rio{
border: 5px solid #FA6E07;
}

.payList .text{
font-size: 16px;
color: #666666;
}

.payList-active .text{
color: #FA6D07;
}

.payList .reBox{
flex: 1;
}

.payList .reBox .titBox{
width: 100%;
}

.payList .reBox .conBox{
width: 100%;
display: none;
}

.payList-active .reBox .conBox{
display: block;
}

.payList .payBut{
width: 100%;
height: 40px;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s linear;
}

.payList .payBut:hover{
box-shadow: 0px 0px 6px 0px rgba(64, 28, 0, 0.50);
}

.payList .creImg{
width: 286px;
display: flex;
}

.payList .payImg{
width: 120px;
display: flex;
}

.payList .payButImg{
width: 80px;
display: flex;
}

.payList .klaImg{
width: 84px;
display: flex;
}

.payList .aftImg{
width: 100px;
display: flex;
flex-shrink: 0;
}

.payList .creImg img,.payList .payImg img,.payList .payButImg img,.payList .klaImg img,.payList .aftImg img{
width: 90%;
height: auto;
}



/* 右方商品列表价格盒子 */
.shipListBox{
width: 400px;
margin-left: 30px;
border: 1px solid #ECECEC;
padding: 30px;
box-sizing: border-box;
border-radius: 10px;
}

/* 购物车商品列表 */
.cartListBox{
width: 100%;
max-height: 320px;
padding: 15px;
box-sizing: border-box;
background-color: #FAFAFA;
border: 1px solid #D0D6D9;
border-radius: 4px;
overflow: auto;
}


/* 购物车列表 */
.cartLists {
width: 100%;
}

.cartList {
width: 100%;
border-radius: 10px;
margin-top: 10px;
box-sizing: border-box;
padding-bottom: 10px;
border-bottom: 1px solid #EDF1F2;
}

.cartList .cartTit {
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
}

.cartList .cartPic {
font-size: 18px;
color: #FA6E07;
}


.cartList .goodsBox {
width: 100%;
margin-top: 10px;
display: flex;
}

.cartList .goodsBox:nth-child(1) {
margin-top: 0;
}

.cartList .goodsBox .goodsImgBox {
width: 48%;
max-width: 320px;
margin-right: 15px;
flex-shrink: 0;
display: flex;
align-items: center;
}

.cartList .goodsBox .goodsImg {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
position: relative;
}

.cartList .goodsBox .goodsImg img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

.cartList .goodsBox .conTion span{
word-break: break-all;
}

.cartList .goodsBox .conTion span:nth-child(2){
margin-left: 8px;
white-space: nowrap;
}

/* 光学镜处方部分 */
.vimo {
color: #FA6E05;
display: flex;
align-items: center;
cursor: pointer;
margin-top: 10px;
}

.vimo .jtBox {
width: 10px;
display: flex;
margin-left: 2px;
}

.vimo .jtBox svg {
width: 100%;
height: auto;
}

.vimo-active .jtBox {
transform: rotate(180deg);
}

.vimoBox {
width: 100%;
display: none;
}

.preBox {
width: 100%;
border: 1px solid #E6E6E6;
background-color: #fff;
border-radius: 2px;
box-sizing: border-box;
display: flex;
font-size: 12px;
color: #333;
margin-top: 4px;
}

.preBox .pre-bg {
background-color:#F4F4F4 ;
}

.preBox .pre-b {
font-weight: 700;
}

.preBox .presc {
flex: 1;
display: flex;
flex-wrap: wrap;
}

.preBox .prism {
width: 100%;
box-sizing: border-box;
/* border-left: 1px solid #E6E6E6; */
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
}


.preBox .preTr {
width: 100%;
display: flex;
border-top: 1px solid #E6E6E6;
box-sizing: border-box;
}

.preBox .preTr:nth-child(1) {
border-top: none;
}

.preBox .preTd {
flex: 1;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
border-left: 1px solid #E6E6E6;
}

.preBox .preTd:nth-child(1){
border-left: none;
}

.preBox .preTdChd{
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #E6E6E6;
text-align: center;
box-sizing: border-box;
}

.preBox .preTdChd:nth-child(1){
border-top: none;
}

.preBox .pre-item{
cursor: pointer;
position: relative;
}

.preBox .pre-item-active{
color: #0862E4;
text-decoration: underline;
}

.preBox .pre-item .xlkBox{
width: 62px;
max-height: 175px;
overflow: auto;
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
border-radius: 2px;
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
display: none;
background-color: #fff;
z-index: 2;
}

.preBox .pre-item .xlkBox-active{
display: block;
}

.preBox .pre-item .xlkBox li{
width: 100%;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 500;
font-size: 14px;
color: #666666;
cursor: pointer;
}

.preBox .pre-item .xlkBox li:hover{
background-color: #E4EFFF;
}

.preBox .pre-item .xlkBox .active{
background-color: #E4EFFF;
}


/* 填写备注 */
.shipListBox .memos{
width: 100%;
height: 100px;
padding: 10px 12px;
border: 1px solid #D0D6D9;
border-radius: 4px;
box-sizing: border-box;
overflow-y:auto ;
}

.shipListBox .memos textarea{
width: 100%;
min-height: 100%;
font-size: 14px;
color: #333;
border: none;
display: flex;
}

.shipListBox .memos textarea::placeholder{
color: #C1C1C1;
flex: 1;
}


.shipListBox .disBox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
/* padding: 15px 0;
border-bottom: 1px solid #EDF1F2; */
padding: 6px 0;
border-bottom: 1px solid #ccc;
}

.shipListBox .supExpBox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border: 1px solid #EFEFEF;
border-left: none;
border-right: none;
}

.shipListBox .supExp {
display: flex;
align-items: center;
font-size: 12px;
color: #666;
}

.shipListBox .supExp .icoBox {
width: 22px;
display: flex;
margin-right: 6px;
flex-shrink: 0;
}

.shipListBox .supExp .icoBox img,
.shipListBox .supExp .icoBox svg {
width: 100%;
height: auto;
}

.shipListBox .supExpBox .xian {
width: 1px;
height: 20px;
max-height: 100%;
background-color: #CBCBCB;
margin: 0 10px;
}


/* 返回用户地址信息按钮 */
.stepUserBut{
width: auto;
height: 32px;
padding: 0px 15px;
display: flex;
align-items: center;
box-sizing: border-box;
font-size: 13px;
color: #333;
border: 1px solid #DDDFE7;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
margin-left: 80px;
}

.stepUserBut:hover{
border-color: #FA6E05;
color: #FA6E05;
background-color: #FFFCF9;
}




/* 苹果支付弹窗 */
.altApple{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999;
}

.altApple .chaBox{
width: 40px;
height: 40px;
padding: 11px;
box-sizing: border-box;
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
display: flex;
}

.altApple .chaBox svg{
width: 100%;
height: auto;
}

.altApple form {
width: 30vw;
min-width: 500px;
align-self: center;
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
border-radius: 7px;
padding: 40px;
padding-top: 50px;
margin-top: auto;
margin-bottom: auto;
background-color: #fff;
position: relative;
min-height: 300px;
display: flex;
flex-direction: column;
}


#payment-element{
margin-bottom: auto;
}

@media only screen and (max-width: 600px) {
.altApple form,.altApple #payment-status {
width: 80vw;
min-width: initial;
padding: 30px;
padding-top: 50px;
}
}

.altApple #submitApp{
height: 48px;
margin-top: 25px;
border: none;
}

.spinner {
color: #ffffff;
font-size: 22px;
text-indent: -99999px;
margin: 0px auto;
position: relative;
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 2px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}

.hidden{
display: none;
}


.spinner, .spinner:before, .spinner:after {
border-radius: 50%;
}

.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}

.spinner:before {
width: 10.4px;
height: 20.4px;
background: #FA6E07;
border-radius: 20.4px 0 0 20.4px;
top: -0.2px;
left: -0.2px;
-webkit-transform-origin: 10.4px 10.2px;
transform-origin: 10.4px 10.2px;
-webkit-animation: loading 2s infinite ease 1.5s;
animation: loading 2s infinite ease 1.5s;
  }
  .spinner:after {
width: 10.4px;
height: 10.2px;
background: #FA6E07;
border-radius: 0 10.2px 10.2px 0;
top: -0.1px;
left: 10.2px;
-webkit-transform-origin: 0px 10.2px;
transform-origin: 0px 10.2px;
-webkit-animation: loading 2s infinite ease;
animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
  }
  @keyframes loading {
0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
}

#payment-message {
color: rgb(105, 115, 134);
font-size: 16px;
line-height: 20px;
padding-top: 12px;
text-align: center;
}

/* .Tab--selected:focus {
border-color: #FA6E07 !important;
box-shadow: hsl(33.97deg 96% 45% / 25%), 0 0 0 1px #FA6E07 !important;
}

.Tab--selected {
border-color: #FA6E07 !important;
color: var(--colorPrimary);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 1px #FA6E07 !important;
}

.Input:focus, .p-Input--focused {
border-color: #FA6E07 !important;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsl(33.97deg 96% 45% / 25%), 0 1px 1px 0 rgba(0, 0, 0, 0.08) !important;
} */