// app global css in SCSS form
@mixin safe-area-inset($prop:padding,$pos:top) {
    @if $pos == top{
        #{$prop}-top: constant(safe-area-inset-top);
        #{$prop}-top: env(safe-area-inset-top);
    }
    @else{
        #{$prop}-bottom: constant(safe-area-inset-bottom);
        #{$prop}-bottom: env(safe-area-inset-bottom);
    }
}
.safe-padding-top{
  @include safe-area-inset();
}
.safe-padding-bottom{
  @include safe-area-inset(padding,bottom);
}
.safe-margin-top{
  @include safe-area-inset(margin);
}
.safe-margin-bottom{
  @include safe-area-inset(margin,bottom);
}

body{
  background-color: #f3f2f2;
}
ul,li{margin:0;padding:0; list-style: none;}
video, audio{outline: none}

a{ text-decoration: none; color:inherit;}
// img{ -webkit-touch-callout: initial;}
// .not-select{
//   -moz-user-select:none; /*火狐*/
//   -webkit-user-select:none; /*webkit浏览器*/
//   -ms-user-select:none; /*IE10*/
//   -khtml-user-select:none; /*早期浏览器*/
//   user-select:none;
// }
// .no-touch {
//   -webkit-touch-callout: none;
//   -webkit-user-select: none;
//   -khtml-user-select: none;
//   -moz-user-select: none;
//   -ms-user-select: none;
//   user-select: none;
// }
.opacity-75{opacity: 75%;}
.line-height-xs{line-height: 1em;}
.line-height-sm{line-height: 1.25em;}
.bordered{ border: 1px solid currentColor; box-sizing: border-box;}
.bordered-grey{
  @extend .bordered;
  border-color: #c0c0c0;
}
.bordered-transparent{
  @extend .bordered;
  border-color: transparent;
}
.bordered-primary{
  @extend .bordered;
  border-color:$primary;
}
.bordered-dashed{ border-style: dashed;}
.rounded-borders-xs{border-radius: 3px !important;}
.rounded-borders{border-radius: 10px !important;}
.rounded-borders-lg{border-radius: 20px !important;}
.rounded-borders-t-lg{border-radius: 20px 20px 0 0 !important;}
.round-borders{border-radius:50% !important;}
.q-toolbar__title{font-size:18px !important;}
.text-caption{letter-spacing: 0 !important;}
.q-card{
  border-radius: 10px;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
}
.glossy {
  // background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.15) 100%) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 80%) !important;
}
.glossy-x {
  // background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.15) 100%) !important;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 80%) !important;
}
.q-btn--fab-mini.q-btn-fab-xs{
  min-width:28px;min-height:28px;
  width:28px; height:28px;padding:2px;
}
.glossy2{
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04)) !important
}
.text-body3{font-size:13px;}
// .q-tab__indicator{width:30px; left: -15px; margin-left:50%;}
.tabs-button{
  z-index: 0;
  .q-tab__indicator{
    height:100%; z-index: -1;
  }
  // .q-focus-helper{display: none !important;}
  @extend .bordered;
  border-color: currentColor;
  @extend .rounded-borders-xs;
}
.no-focus-helper{
  .q-focus-helper{display: none !important;}
}

.q-tab--inactive{opacity: .75;}
.q-tab--active{opacity: 1 !important;}
// .q-dialog__backdrop{
//   background:transparent;
// }
.q-table--dense .q-table {
  th:first-child, td:first-child{
    padding-left:8px;
  }
  th:last-child, td:last-child{
    padding-right:8px;
  }
}
.markup-table.q-table--dense .q-table {
  th, td{
    padding:2px 1px;
  }
  th:first-child, td:first-child{
    padding:2px 1px;
  }
  th:last-child, td:last-child{
    padding:2px 1px;
  }
}
.login-main{

  .q-field .q-field__control{
    &:before,&:after{
      bottom: -1px;
    }
  }
  input{
    &:-webkit-autofill{
      &,&:hover,&:focus,&:active{
        // background: transparent !important;
        // box-shadow: none;
        box-shadow: 0 -1px 0 1000px #fff inset;
        // transition-delay: 99999s !important;
        // transition: color 99999s ease-out,background-color 99999s ease-out 0.5s !important;
        // -webkit-transition-delay: 99999s !important;
        // -webkit-transition: color 99999s ease-out,background-color 99999s ease-out !important;
        // -webkit-text-fill-color:#000 !important;
      }
    }
    // &:-internal-autofill-selected,
    // &:-internal-autofill-previewed {
    //   // background-color: transparent, transparent !important;
    //   -webkit-text-fill-color:#000 !important;
    //   transition: color 99999s ease-out,background-color 99999s ease-out 0.5s !important;
    // }
  }
}
input::-webkit-input-placeholder,
.q-placeholder:-ms-input-placeholder{
  color: $grey!important
}
.break-all{
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}
.fit-width-menu{
  max-width: 100vw !important;
  left: 0px !important;
  width: 100vw;
  right: 0 !important;
}
.header-fit-menu {
  max-width: 100vw !important;
  left: 0px !important;
  width: 100vw;
  right: 0 !important;
  position: fixed;
  top:51px !important;
  border-radius: 0;
  font-size: 15px;
}
.no-icon {
  .q-radio__inner, .q-checkbox__inner {
    display: none;
  }
}

.tabs-mini{
  &.q-tabs--dense .q-tab {
    min-height: 28px;
  }
  .q-tab__content {
    padding: 0;
  }
}

// 用户头衔/等级
.user-rank{
  border-radius: 8px 0 8px 0;
  padding:3px 5px; line-height:1em;
  display: inline-block;
  &.level5000{
    background: linear-gradient(#b0bec5 0,#ddd 100%);
    color:#666;
  }
  &.level20000{
    background: linear-gradient(#90caf9 0,#ddd 100%);
    color:#666;
  }
  &.level50000{
    background: linear-gradient(#80deea 0,#ddd 100%);
    color:#666;
  }
  &.level200000{
    background: linear-gradient(#a5d6a7 0,#ddd 100%);
    color:#666;
  }
  &.level500000{
    background: linear-gradient(#a3f2c4 0,#ddd 100%);
    color:#666;
  }
  &.level1000000{
    background: linear-gradient(#d4ef96 0,#ddd 100%);
    color:#666;
  }
  &.level2000000{
    background: linear-gradient(#f4f496 0,#ddd 100%);
    color:#666;
  }
  &.level5000000{
    background: linear-gradient(#f1d477 0,#ddd 100%);
    color:#666;
  }
  &.level10000000{
    background: linear-gradient(#f8d081 0,#ddd 100%);
    color:#666;
  }
  &.level20000000{
    background: linear-gradient(#fc987f 0,#f3e0e0 100%);
    color:#666;
  }
  // &.level50000000{
  //   background: linear-gradient(#fb4343 0,#fb6f6f 100%);
  //   color:#fff;
  // }
}
.text-body-xs{font-size:11px;}
// .filter-wrap{
// }
.filter-item{ border-bottom: 3px solid transparent;border-top: 3px solid transparent;}
.filter-selected{ border-bottom-color:$primary;color: $primary;}

@media screen and (max-width: 360px){
  body {font-size: 13px}
}
@media screen and (max-width: 320px){
  body{font-size: 12px;}
}

.fixed-table {
  .q-table {
    table-layout: fixed;
  }
}
.bordered-table{
  border-bottom-width: 0;
  .q-table {
    td {
      // padding: 2px !important;
      border-bottom-width: 1px;
    }
  }
  &.border-primary,&.border-primary td{
    border-color: $primary;
  }
}

.menu-mask {
  &:before{
    width:100%; position: fixed; top:0; bottom:0;right:0;left:0;
    background:rgba(0, 0, 0, 0.15);
    content: '';
  }
}
.tip-wrap{
  box-sizing: border-box;
  border-radius: 5px;
  background-color: $red-1;
  color:$red;
  font-size:12px;
  @extend .bordered-primary;
}
.tip-title{
  padding: 4px 24px 4px 16px;
  border-radius: 0 0 40px 0;
  display: inline-block;
  background-color: $red;
  color: white;
}
.bg-gradient{
  background: linear-gradient(115deg,#3cab89,#428886);
  // background: linear-gradient($primary 50px, transparentize($primary, 1) 40%);
}
.bg-glossy{
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.0))
}
.bg-round{
  overflow: hidden;
  &::before{
    content: '';
    background:$primary;
    position: absolute;
    border-radius: 0 0 50% 50%;
    width:160%;height:180px;
    left:-30%;
    border-top:100px solid $primary;
    transform: scaleY(0.5);
    transform-origin: center top;
  }
}
.separator-red{
  display: flex;
  align-items: center;
  justify-content: center;
  em{
    margin:0 4px;
    position: relative;
    &,&:before,&:after{
      width:55px; height:1px;
      // transform: scaleY(50%);
    }
    &:before,&:after{
      content: '';
      position: absolute;
    }
    &::before{
      top:-4px
    }
    &:after{
      bottom:-4px;
    }
    &:first-child{
      &,&:before,&:after{
        background: linear-gradient( to right, white 0%,$red 100%);
        left: -8px;
        // transform-origin: right center;
      }
    }
    &:last-child{
      &,&:before,&:after{
        background: linear-gradient( to left, white 0%,$red 100%);
        left:8px;
        // transform-origin: left center;
      }
    }
  }
}
.q-markup-table.border-white{
  th,td{border-width: 1px !important; border-color:#fff;}
}
.q-px-xxs{
  padding-left: 2px !important;padding-right:1px !important;
}
.q-ma-xxs{
  margin:1px;
}
.shadow-xs{ box-shadow: 0 1px 3px 0px rgba(0,0,0,0.15) !important;}
.number-input-sm{
  &.q-field--dense .q-field__control{height:30px;padding:0 3px;
    min-width:50px;}
  .q-field__native{padding:0;text-align:center;}
}

.scroll-area-no-y{
  .q-scrollarea__container{overflow-y:hidden;}
}

body.q-ios-padding{
  .dialog-full-height{
    .q-dialog__inner{
      // padding:0 !important; bottom:0px;
      //  margin-bottom:0px;
      padding-top:0 !important;
      padding-bottom:0px !important;
      > div {
        max-height: 100vh !important;
      }
    }
    .q-dialog__inner--right{
      align-items: end;
    }
  }
}
.q-input-sm{
  &.q-field--dense .q-field__control, &.q-field--dense .q-field__marginal{
    height:34px;
    padding:0 3px 0 6px;
  }
  .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input{
    padding:3px 0;
  }
}
.lottery-item-table {
   .q-table {
    td {
      padding: 2px !important;
    }
  }
}
.select-btn{
  .q-btn__content{
    overflow: hidden;
    .block{
      flex:1;
      overflow: hidden;
      font-size:12px;
    }
    .q-icon{flex:none;}
  }
}
