@charset "UTF-8";

.mat-badge-content {
  font-weight: 600;
  font-size: 12px;
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-badge-small .mat-badge-content {
  font-size: 9px
}

.mat-badge-large .mat-badge-content {
  font-size: 24px
}

.mat-h1,
.mat-headline,
.mat-typography h1 {
  font: 400 24px/32px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px
}

.mat-h2,
.mat-title,
.mat-typography h2 {
  font: 500 20px/32px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px
}

.mat-h3,
.mat-subheading-2,
.mat-typography h3 {
  font: 400 16px/28px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px
}

.mat-h4,
.mat-subheading-1,
.mat-typography h4 {
  font: 400 15px/24px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px
}

.mat-h5,
.mat-typography h5 {
  font: 400 calc(14px * .83)/20px Roboto, Helvetica Neue, sans-serif;
  margin: 0 0 12px
}

.mat-h6,
.mat-typography h6 {
  font: 400 calc(14px * .67)/20px Roboto, Helvetica Neue, sans-serif;
  margin: 0 0 12px
}

.mat-body-2,
.mat-body-strong {
  font: 500 14px/24px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-body,
.mat-body-1,
.mat-typography {
  font: 400 14px/20px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-body-1 p,
.mat-body p,
.mat-typography p {
  margin: 0 0 12px
}

.mat-caption,
.mat-small {
  font: 400 12px/20px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-display-4,
.mat-typography .mat-display-4 {
  font: 300 112px/112px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: -.05em;
  margin: 0 0 56px
}

.mat-display-3,
.mat-typography .mat-display-3 {
  font: 400 56px/56px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: -.02em;
  margin: 0 0 64px
}

.mat-display-2,
.mat-typography .mat-display-2 {
  font: 400 45px/48px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: -.005em;
  margin: 0 0 64px
}

.mat-display-1,
.mat-typography .mat-display-1 {
  font: 400 34px/40px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0 0 64px
}

.mat-bottom-sheet-container {
  font: 400 14px/20px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-button,
.mat-fab,
.mat-flat-button,
.mat-icon-button,
.mat-mini-fab,
.mat-raised-button,
.mat-stroked-button {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 14px;
  font-weight: 500
}

.mat-button-toggle,
.mat-card {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-card-title {
  font-size: 24px;
  font-weight: 500
}

.mat-card-header .mat-card-title {
  font-size: 20px
}

.mat-card-content,
.mat-card-subtitle {
  font-size: 14px
}

.mat-checkbox {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-checkbox-layout .mat-checkbox-label {
  line-height: 24px
}

.mat-chip {
  font-size: 14px;
  font-weight: 500
}

.mat-chip .mat-chip-remove.mat-icon,
.mat-chip .mat-chip-trailing-icon.mat-icon {
  font-size: 18px
}

.mat-table {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-header-cell {
  font-size: 12px;
  font-weight: 500
}

.mat-cell,
.mat-footer-cell {
  font-size: 14px
}

.mat-calendar {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-calendar-body {
  font-size: 13px
}

.mat-calendar-body-label,
.mat-calendar-period-button {
  font-size: 14px;
  font-weight: 500
}

.mat-calendar-table-header th {
  font-size: 11px;
  font-weight: 400
}

.mat-dialog-title {
  font: 500 20px/32px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-expansion-panel-header {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 15px;
  font-weight: 400
}

.mat-expansion-panel-content {
  font: 400 14px/20px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-form-field {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.125;
  font-family: Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-form-field-wrapper {
  padding-bottom: 1.34375em
}

.mat-form-field-prefix .mat-icon,
.mat-form-field-suffix .mat-icon {
  font-size: 150%;
  line-height: 1.125
}

.mat-form-field-prefix .mat-icon-button,
.mat-form-field-suffix .mat-icon-button {
  height: 1.5em;
  width: 1.5em
}

.mat-form-field-prefix .mat-icon-button .mat-icon,
.mat-form-field-suffix .mat-icon-button .mat-icon {
  height: 1.125em;
  line-height: 1.125
}

.mat-form-field-infix {
  padding: .5em 0;
  border-top: .84375em solid transparent
}

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.34375em) scale(.75);
  width: 133.3333333333%
}

.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.34374em) scale(.75);
  width: 133.3333433333%
}

.mat-form-field-label-wrapper {
  top: -.84375em;
  padding-top: .84375em
}

.mat-form-field-label {
  top: 1.34375em
}

.mat-form-field-underline {
  bottom: 1.34375em
}

.mat-form-field-subscript-wrapper {
  font-size: 75%;
  margin-top: .6666666667em;
  top: calc(100% - 1.7916666667em)
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
  padding-bottom: 1.25em
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
  padding: .4375em 0
}

.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);
  -ms-transform: translateY(-1.28125em) scale(.75);
  width: 133.3333333333%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);
  -ms-transform: translateY(-1.28124em) scale(.75);
  width: 133.3333433333%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);
  -ms-transform: translateY(-1.28123em) scale(.75);
  width: 133.3333533333%
}

.mat-form-field-appearance-legacy .mat-form-field-label {
  top: 1.28125em
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
  bottom: 1.25em
}

.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
  margin-top: .5416666667em;
  top: calc(100% - 1.6666666667em)
}

@media print {

  .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.28122em) scale(.75)
  }

  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.28121em) scale(.75)
  }

  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.2812em) scale(.75)
  }
}

.mat-form-field-appearance-fill .mat-form-field-infix {
  padding: .25em 0 .75em
}

.mat-form-field-appearance-fill .mat-form-field-label {
  top: 1.09375em;
  margin-top: -.5em
}

.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-.59375em) scale(.75);
  width: 133.3333333333%
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-.59374em) scale(.75);
  width: 133.3333433333%
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 1em 0
}

.mat-form-field-appearance-outline .mat-form-field-label {
  top: 1.84375em;
  margin-top: -.25em
}

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.59375em) scale(.75);
  width: 133.3333333333%
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.59374em) scale(.75);
  width: 133.3333433333%
}

.mat-grid-tile-footer,
.mat-grid-tile-header {
  font-size: 14px
}

.mat-grid-tile-footer .mat-line,
.mat-grid-tile-header .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box
}

.mat-grid-tile-footer .mat-line:nth-child(n+2),
.mat-grid-tile-header .mat-line:nth-child(n+2) {
  font-size: 12px
}

input.mat-input-element {
  margin-top: -.0625em
}

.mat-menu-item {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 14px;
  font-weight: 400
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 12px
}

.mat-radio-button,
.mat-select {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-select-trigger {
  height: 1.125em
}

.mat-slide-toggle-content,
.mat-slider-thumb-label-text {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-slider-thumb-label-text {
  font-size: 12px;
  font-weight: 500
}

.mat-stepper-horizontal,
.mat-stepper-vertical {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-step-label {
  font-size: 14px;
  font-weight: 400
}

.mat-step-sub-label-error {
  font-weight: 400
}

.mat-step-label-error {
  font-size: 14px
}

.mat-step-label-selected {
  font-size: 14px;
  font-weight: 500
}

.mat-tab-group,
.mat-tab-label,
.mat-tab-link {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-tab-label,
.mat-tab-link {
  font-size: 14px;
  font-weight: 500
}

.mat-toolbar,
.mat-toolbar h1,
.mat-toolbar h2,
.mat-toolbar h3,
.mat-toolbar h4,
.mat-toolbar h5,
.mat-toolbar h6 {
  font: 500 20px/32px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal;
  margin: 0
}

.mat-tooltip {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 10px;
  padding-top: 6px;
  padding-bottom: 6px
}

.mat-tooltip-handset {
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px
}

.mat-list-item,
.mat-list-option {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-list-base .mat-list-item {
  font-size: 16px
}

.mat-list-base .mat-list-item .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box
}

.mat-list-base .mat-list-item .mat-line:nth-child(n+2) {
  font-size: 14px
}

.mat-list-base .mat-list-option {
  font-size: 16px
}

.mat-list-base .mat-list-option .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box
}

.mat-list-base .mat-list-option .mat-line:nth-child(n+2) {
  font-size: 14px
}

.mat-list-base .mat-subheader {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 14px;
  font-weight: 500
}

.mat-list-base[dense] .mat-list-item {
  font-size: 12px
}

.mat-list-base[dense] .mat-list-item .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box
}

.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2),
.mat-list-base[dense] .mat-list-option {
  font-size: 12px
}

.mat-list-base[dense] .mat-list-option .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box
}

.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2) {
  font-size: 12px
}

.mat-list-base[dense] .mat-subheader {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 12px;
  font-weight: 500
}

.mat-option {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 16px
}

.mat-optgroup-label {
  font: 500 14px/24px Roboto, Helvetica Neue, sans-serif;
  letter-spacing: normal
}

.mat-simple-snackbar {
  font-family: Roboto, Helvetica Neue, sans-serif;
  font-size: 14px
}

.mat-simple-snackbar-action {
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500
}

.mat-tree {
  font-family: Roboto, Helvetica Neue, sans-serif
}

.mat-nested-tree-node,
.mat-tree-node {
  font-weight: 400;
  font-size: 14px
}

.mat-ripple {
  overflow: hidden;
  position: relative
}

.mat-ripple:not(:empty) {
  transform: translateZ(0)
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
  transform: scale(0)
}

.cdk-high-contrast-active .mat-ripple-element {
  display: none
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none
}

.cdk-global-overlay-wrapper,
.cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000
}

.cdk-overlay-container:empty {
  display: none
}

.cdk-global-overlay-wrapper,
.cdk-overlay-pane {
  display: flex;
  position: absolute;
  z-index: 1000
}

.cdk-overlay-pane {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
  opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1
}

@media screen and (-ms-high-contrast:active) {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: .6
  }
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, .32)
}

.cdk-overlay-transparent-backdrop,
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll
}

@keyframes cdk-text-field-autofill-start {
  /*!*/
}

@keyframes cdk-text-field-autofill-end {
  /*!*/
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms
}

textarea.cdk-textarea-autosize {
  resize: none
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: initial !important;
  height: auto !important;
  overflow: hidden !important
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: initial !important;
  height: 0 !important
}

.mat-focus-indicator,
.mat-mdc-focus-indicator {
  position: relative
}

.mat-ripple-element {
  background-color: rgba(0, 0, 0, .1)
}

.mat-option {
  color: rgba(0, 0, 0, .87)
}

.mat-option.mat-active,
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled),
.mat-option:hover:not(.mat-option-disabled) {
  background: rgba(0, 0, 0, .04)
}

.mat-option.mat-active {
  color: rgba(0, 0, 0, .87)
}

.mat-option.mat-option-disabled {
  color: rgba(0, 0, 0, .38)
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #3f51b5
}

.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #ff4081
}

.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #f44336
}

.mat-optgroup-label {
  color: rgba(0, 0, 0, .54)
}

.mat-optgroup-disabled .mat-optgroup-label {
  color: rgba(0, 0, 0, .38)
}

.mat-pseudo-checkbox {
  color: rgba(0, 0, 0, .54)
}

.mat-pseudo-checkbox:after {
  color: #fafafa
}

.mat-pseudo-checkbox-disabled {
  color: #b0b0b0
}

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
  background: #3f51b5
}

.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
  background: #ff4081
}

.mat-warn .mat-pseudo-checkbox-checked,
.mat-warn .mat-pseudo-checkbox-indeterminate {
  background: #f44336
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
  background: #b0b0b0
}

.mat-app-background {
  background-color: #fafafa;
  color: rgba(0, 0, 0, .87)
}

.mat-elevation-z0 {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z1 {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z2 {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z3 {
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z4 {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z5 {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z6 {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z7 {
  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12)
}

.mat-elevation-z8 {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z9 {
  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z10 {
  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z11 {
  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z12 {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z13 {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z14 {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z15 {
  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z16 {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z17 {
  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z18 {
  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z19 {
  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z20 {
  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z21 {
  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z22 {
  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z23 {
  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12)
}

.mat-elevation-z24 {
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)
}

.mat-theme-loaded-marker {
  display: none
}

.mat-autocomplete-panel {
  background: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
  background: #fff
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
  color: rgba(0, 0, 0, .87)
}

.mat-badge-content {
  color: #fff;
  background: #3f51b5
}

.cdk-high-contrast-active .mat-badge-content {
  outline: 1px solid;
  border-radius: 0
}

.mat-badge-accent .mat-badge-content {
  background: #ff4081;
  color: #fff
}

.mat-badge-warn .mat-badge-content {
  color: #fff;
  background: #f44336
}

.mat-badge {
  position: relative
}

.mat-badge-hidden .mat-badge-content {
  display: none
}

.mat-badge-disabled .mat-badge-content {
  background: #b9b9b9;
  color: rgba(0, 0, 0, .38)
}

.mat-badge-content {
  position: absolute;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  transition: transform .2s ease-in-out;
  transform: scale(.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none
}

.mat-badge-content._mat-animation-noopable,
.ng-animate-disabled .mat-badge-content {
  transition: none
}

.mat-badge-content.mat-badge-active {
  transform: none
}

.mat-badge-small .mat-badge-content {
  width: 16px;
  height: 16px;
  line-height: 16px
}

.mat-badge-small.mat-badge-above .mat-badge-content {
  top: -8px
}

.mat-badge-small.mat-badge-below .mat-badge-content {
  bottom: -8px
}

.mat-badge-small.mat-badge-before .mat-badge-content {
  left: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
  left: auto;
  right: -16px
}

.mat-badge-small.mat-badge-after .mat-badge-content {
  right: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
  right: auto;
  left: -16px
}

.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -8px
}

.mat-badge-medium .mat-badge-content {
  width: 22px;
  height: 22px;
  line-height: 22px
}

.mat-badge-medium.mat-badge-above .mat-badge-content {
  top: -11px
}

.mat-badge-medium.mat-badge-below .mat-badge-content {
  bottom: -11px
}

.mat-badge-medium.mat-badge-before .mat-badge-content {
  left: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
  left: auto;
  right: -22px
}

.mat-badge-medium.mat-badge-after .mat-badge-content {
  right: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
  right: auto;
  left: -22px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -11px
}

.mat-badge-large .mat-badge-content {
  width: 28px;
  height: 28px;
  line-height: 28px
}

.mat-badge-large.mat-badge-above .mat-badge-content {
  top: -14px
}

.mat-badge-large.mat-badge-below .mat-badge-content {
  bottom: -14px
}

.mat-badge-large.mat-badge-before .mat-badge-content {
  left: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
  left: auto;
  right: -28px
}

.mat-badge-large.mat-badge-after .mat-badge-content {
  right: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
  right: auto;
  left: -28px
}

.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -14px
}

.mat-bottom-sheet-container {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
  background: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-button,
.mat-icon-button,
.mat-stroked-button {
  color: inherit;
  background: transparent
}

.mat-button.mat-primary,
.mat-icon-button.mat-primary,
.mat-stroked-button.mat-primary {
  color: #3f51b5
}

.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
  color: #ff4081
}

.mat-button.mat-warn,
.mat-icon-button.mat-warn,
.mat-stroked-button.mat-warn {
  color: #f44336
}

.mat-button.mat-accent.mat-button-disabled,
.mat-button.mat-button-disabled.mat-button-disabled,
.mat-button.mat-primary.mat-button-disabled,
.mat-button.mat-warn.mat-button-disabled,
.mat-icon-button.mat-accent.mat-button-disabled,
.mat-icon-button.mat-button-disabled.mat-button-disabled,
.mat-icon-button.mat-primary.mat-button-disabled,
.mat-icon-button.mat-warn.mat-button-disabled,
.mat-stroked-button.mat-accent.mat-button-disabled,
.mat-stroked-button.mat-button-disabled.mat-button-disabled,
.mat-stroked-button.mat-primary.mat-button-disabled,
.mat-stroked-button.mat-warn.mat-button-disabled {
  color: rgba(0, 0, 0, .26)
}

.mat-button.mat-primary .mat-button-focus-overlay,
.mat-icon-button.mat-primary .mat-button-focus-overlay,
.mat-stroked-button.mat-primary .mat-button-focus-overlay {
  background-color: #3f51b5
}

.mat-button.mat-accent .mat-button-focus-overlay,
.mat-icon-button.mat-accent .mat-button-focus-overlay,
.mat-stroked-button.mat-accent .mat-button-focus-overlay {
  background-color: #ff4081
}

.mat-button.mat-warn .mat-button-focus-overlay,
.mat-icon-button.mat-warn .mat-button-focus-overlay,
.mat-stroked-button.mat-warn .mat-button-focus-overlay {
  background-color: #f44336
}

.mat-button.mat-button-disabled .mat-button-focus-overlay,
.mat-icon-button.mat-button-disabled .mat-button-focus-overlay,
.mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {
  background-color: initial
}

.mat-button .mat-ripple-element,
.mat-icon-button .mat-ripple-element,
.mat-stroked-button .mat-ripple-element {
  opacity: .1;
  background-color: currentColor
}

.mat-button-focus-overlay {
  background: #000
}

.mat-stroked-button:not(.mat-button-disabled) {
  border-color: rgba(0, 0, 0, .12)
}

.mat-fab,
.mat-flat-button,
.mat-mini-fab,
.mat-raised-button {
  color: rgba(0, 0, 0, .87);
  background-color: #fff
}

.mat-fab.mat-accent,
.mat-fab.mat-primary,
.mat-fab.mat-warn,
.mat-flat-button.mat-accent,
.mat-flat-button.mat-primary,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-accent,
.mat-mini-fab.mat-primary,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-accent,
.mat-raised-button.mat-primary,
.mat-raised-button.mat-warn {
  color: #fff
}

.mat-fab.mat-accent.mat-button-disabled,
.mat-fab.mat-button-disabled.mat-button-disabled,
.mat-fab.mat-primary.mat-button-disabled,
.mat-fab.mat-warn.mat-button-disabled,
.mat-flat-button.mat-accent.mat-button-disabled,
.mat-flat-button.mat-button-disabled.mat-button-disabled,
.mat-flat-button.mat-primary.mat-button-disabled,
.mat-flat-button.mat-warn.mat-button-disabled,
.mat-mini-fab.mat-accent.mat-button-disabled,
.mat-mini-fab.mat-button-disabled.mat-button-disabled,
.mat-mini-fab.mat-primary.mat-button-disabled,
.mat-mini-fab.mat-warn.mat-button-disabled,
.mat-raised-button.mat-accent.mat-button-disabled,
.mat-raised-button.mat-button-disabled.mat-button-disabled,
.mat-raised-button.mat-primary.mat-button-disabled,
.mat-raised-button.mat-warn.mat-button-disabled {
  color: rgba(0, 0, 0, .26)
}

.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
  background-color: #3f51b5
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
  background-color: #ff4081
}

.mat-fab.mat-warn,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-warn {
  background-color: #f44336
}

.mat-fab.mat-accent.mat-button-disabled,
.mat-fab.mat-button-disabled.mat-button-disabled,
.mat-fab.mat-primary.mat-button-disabled,
.mat-fab.mat-warn.mat-button-disabled,
.mat-flat-button.mat-accent.mat-button-disabled,
.mat-flat-button.mat-button-disabled.mat-button-disabled,
.mat-flat-button.mat-primary.mat-button-disabled,
.mat-flat-button.mat-warn.mat-button-disabled,
.mat-mini-fab.mat-accent.mat-button-disabled,
.mat-mini-fab.mat-button-disabled.mat-button-disabled,
.mat-mini-fab.mat-primary.mat-button-disabled,
.mat-mini-fab.mat-warn.mat-button-disabled,
.mat-raised-button.mat-accent.mat-button-disabled,
.mat-raised-button.mat-button-disabled.mat-button-disabled,
.mat-raised-button.mat-primary.mat-button-disabled,
.mat-raised-button.mat-warn.mat-button-disabled {
  background-color: rgba(0, 0, 0, .12)
}

.mat-fab.mat-accent .mat-ripple-element,
.mat-fab.mat-primary .mat-ripple-element,
.mat-fab.mat-warn .mat-ripple-element,
.mat-flat-button.mat-accent .mat-ripple-element,
.mat-flat-button.mat-primary .mat-ripple-element,
.mat-flat-button.mat-warn .mat-ripple-element,
.mat-mini-fab.mat-accent .mat-ripple-element,
.mat-mini-fab.mat-primary .mat-ripple-element,
.mat-mini-fab.mat-warn .mat-ripple-element,
.mat-raised-button.mat-accent .mat-ripple-element,
.mat-raised-button.mat-primary .mat-ripple-element,
.mat-raised-button.mat-warn .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .1)
}

.mat-flat-button:not([class*=mat-elevation-z]),
.mat-stroked-button:not([class*=mat-elevation-z]) {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-raised-button:not([class*=mat-elevation-z]) {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-fab:not([class*=mat-elevation-z]),
.mat-mini-fab:not([class*=mat-elevation-z]) {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]),
.mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.mat-fab.mat-button-disabled:not([class*=mat-elevation-z]),
.mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-button-toggle-group,
.mat-button-toggle-standalone {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-button-toggle-group-appearance-standard,
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
  box-shadow: none
}

.mat-button-toggle {
  color: rgba(0, 0, 0, .38)
}

.mat-button-toggle .mat-button-toggle-focus-overlay {
  background-color: rgba(0, 0, 0, .12)
}

.mat-button-toggle-appearance-standard {
  color: rgba(0, 0, 0, .87);
  background: #fff
}

.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
  background-color: #000
}

.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
  border-left: 1px solid rgba(0, 0, 0, .12)
}

[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
  border-left: none;
  border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle+.mat-button-toggle {
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle-checked {
  background-color: #e0e0e0;
  color: rgba(0, 0, 0, .54)
}

.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
  color: rgba(0, 0, 0, .87)
}

.mat-button-toggle-disabled {
  color: rgba(0, 0, 0, .26);
  background-color: #eee
}

.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
  background: #fff
}

.mat-button-toggle-disabled.mat-button-toggle-checked {
  background-color: #bdbdbd
}

.mat-button-toggle-group-appearance-standard,
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
  border: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
  line-height: 48px
}

.mat-card {
  background: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-card:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.mat-card.mat-card-flat:not([class*=mat-elevation-z]) {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-card-subtitle {
  color: rgba(0, 0, 0, .54)
}

.mat-checkbox-frame {
  border-color: rgba(0, 0, 0, .54)
}

.mat-checkbox-checkmark {
  fill: #fafafa
}

.mat-checkbox-checkmark-path {
  stroke: #fafafa !important
}

.mat-checkbox-mixedmark {
  background-color: #fafafa
}

.mat-checkbox-checked.mat-primary .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background {
  background-color: #3f51b5
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #ff4081
}

.mat-checkbox-checked.mat-warn .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background {
  background-color: #f44336
}

.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #b0b0b0
}

.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
  border-color: #b0b0b0
}

.mat-checkbox-disabled .mat-checkbox-label {
  color: rgba(0, 0, 0, .54)
}

.mat-checkbox .mat-ripple-element {
  background-color: #000
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
  background: #3f51b5
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
  background: #ff4081
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {
  background: #f44336
}

.mat-chip.mat-standard-chip {
  background-color: #e0e0e0;
  color: rgba(0, 0, 0, .87)
}

.mat-chip.mat-standard-chip .mat-chip-remove {
  color: rgba(0, 0, 0, .87);
  opacity: .4
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {
  opacity: .54
}

.mat-chip.mat-standard-chip.mat-chip-disabled {
  opacity: .4
}

.mat-chip.mat-standard-chip:after {
  background: #000
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
  background-color: #3f51b5;
  color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
  color: #fff;
  opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .1)
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
  background-color: #f44336;
  color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {
  color: #fff;
  opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .1)
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
  background-color: #ff4081;
  color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {
  color: #fff;
  opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .1)
}

.mat-table {
  background: #fff
}

.mat-table-sticky,
.mat-table tbody,
.mat-table tfoot,
.mat-table thead,
[mat-footer-row],
[mat-header-row],
[mat-row],
mat-footer-row,
mat-header-row,
mat-row {
  background: inherit
}

mat-footer-row,
mat-header-row,
mat-row,
td.mat-cell,
td.mat-footer-cell,
th.mat-header-cell {
  border-bottom-color: rgba(0, 0, 0, .12)
}

.mat-header-cell {
  color: rgba(0, 0, 0, .54)
}

.mat-cell,
.mat-footer-cell {
  color: rgba(0, 0, 0, .87)
}

.mat-calendar-arrow {
  border-top-color: rgba(0, 0, 0, .54)
}

.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button,
.mat-datepicker-toggle {
  color: rgba(0, 0, 0, .54)
}

.mat-calendar-table-header {
  color: rgba(0, 0, 0, .38)
}

.mat-calendar-table-header-divider:after {
  background: rgba(0, 0, 0, .12)
}

.mat-calendar-body-label {
  color: rgba(0, 0, 0, .54)
}

.mat-calendar-body-cell-content,
.mat-date-range-input-separator {
  color: rgba(0, 0, 0, .87);
  border-color: transparent
}

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mat-form-field-disabled .mat-date-range-input-separator {
  color: rgba(0, 0, 0, .38)
}

.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: rgba(0, 0, 0, .04)
}

.mat-calendar-body-in-preview {
  color: rgba(0, 0, 0, .24)
}

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  border-color: rgba(0, 0, 0, .38)
}

.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  border-color: rgba(0, 0, 0, .18)
}

.mat-calendar-body-in-range:before {
  background: rgba(63, 81, 181, .2)
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range:before {
  background: rgba(249, 171, 0, .2)
}

.mat-calendar-body-comparison-bridge-start:before,
[dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
  background: linear-gradient(90deg, rgba(63, 81, 181, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-calendar-body-comparison-bridge-end:before,
[dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
  background: linear-gradient(270deg, rgba(63, 81, 181, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after,
.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical {
  background: #a8dab5
}

.mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
  background: #46a35e
}

.mat-calendar-body-selected {
  background-color: #3f51b5;
  color: #fff
}

.mat-calendar-body-disabled>.mat-calendar-body-selected {
  background-color: rgba(63, 81, 181, .4)
}

.mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
  background-color: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before {
  background: rgba(255, 64, 129, .2)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range:before {
  background: rgba(249, 171, 0, .2)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start:before,
.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
  background: linear-gradient(90deg, rgba(255, 64, 129, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end:before,
.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
  background: linear-gradient(270deg, rgba(255, 64, 129, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical {
  background: #a8dab5
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
  background: #46a35e
}

.mat-datepicker-content.mat-accent .mat-calendar-body-selected {
  background-color: #ff4081;
  color: #fff
}

.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected {
  background-color: rgba(255, 64, 129, .4)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-range:before {
  background: rgba(244, 67, 54, .2)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range:before {
  background: rgba(249, 171, 0, .2)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start:before,
.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
  background: linear-gradient(90deg, rgba(244, 67, 54, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end:before,
.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
  background: linear-gradient(270deg, rgba(244, 67, 54, .2) 50%, rgba(249, 171, 0, .2) 0)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical {
  background: #a8dab5
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
  background: #46a35e
}

.mat-datepicker-content.mat-warn .mat-calendar-body-selected {
  background-color: #f44336;
  color: #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected {
  background-color: rgba(244, 67, 54, .4)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content-touch {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-datepicker-toggle-active {
  color: #3f51b5
}

.mat-datepicker-toggle-active.mat-accent {
  color: #ff4081
}

.mat-datepicker-toggle-active.mat-warn {
  color: #f44336
}

.mat-date-range-input-inner[disabled] {
  color: rgba(0, 0, 0, .38)
}

.mat-dialog-container {
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
  background: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-divider {
  border-top-color: rgba(0, 0, 0, .12)
}

.mat-divider-vertical {
  border-right-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel {
  background: #fff;
  color: rgba(0, 0, 0, .87)
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-action-row {
  border-top-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]),
.mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]),
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
  background: rgba(0, 0, 0, .04)
}

@media (hover:none) {
  .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
    background: #fff
  }
}

.mat-expansion-panel-header-title {
  color: rgba(0, 0, 0, .87)
}

.mat-expansion-indicator:after,
.mat-expansion-panel-header-description {
  color: rgba(0, 0, 0, .54)
}

.mat-expansion-panel-header[aria-disabled=true] {
  color: rgba(0, 0, 0, .26)
}

.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description,
.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title {
  color: inherit
}

.mat-expansion-panel-header {
  height: 48px
}

.mat-expansion-panel-header.mat-expanded {
  height: 64px
}

.mat-form-field-label,
.mat-hint {
  color: rgba(0, 0, 0, .6)
}

.mat-form-field.mat-focused .mat-form-field-label {
  color: #3f51b5
}

.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
  color: #ff4081
}

.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
  color: #f44336
}

.mat-focused .mat-form-field-required-marker {
  color: #ff4081
}

.mat-form-field-ripple {
  background-color: rgba(0, 0, 0, .87)
}

.mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: #3f51b5
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
  background-color: #ff4081
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
  background-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix:after {
  color: #3f51b5
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix:after {
  color: #ff4081
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix:after,
.mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
  color: #f44336
}

.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
  background-color: #f44336
}

.mat-error {
  color: #f44336
}

.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-form-field-appearance-legacy .mat-hint {
  color: rgba(0, 0, 0, .54)
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
  background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
  background-size: 4px 100%;
  background-repeat: repeat-x
}

.mat-form-field-appearance-standard .mat-form-field-underline {
  background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
  background-size: 4px 100%;
  background-repeat: repeat-x
}

.mat-form-field-appearance-fill .mat-form-field-flex {
  background-color: rgba(0, 0, 0, .04)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
  background-color: rgba(0, 0, 0, .02)
}

.mat-form-field-appearance-fill .mat-form-field-underline:before {
  background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
  color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline:before {
  background-color: initial
}

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: rgba(0, 0, 0, .12)
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba(0, 0, 0, .87)
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: #3f51b5
}

.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
  color: #ff4081
}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick,
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
  color: #f44336
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
  color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
  color: rgba(0, 0, 0, .06)
}

.mat-icon.mat-primary {
  color: #3f51b5
}

.mat-icon.mat-accent {
  color: #ff4081
}

.mat-icon.mat-warn {
  color: #f44336
}

.mat-form-field-type-mat-native-select .mat-form-field-infix:after {
  color: rgba(0, 0, 0, .54)
}

.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix:after,
.mat-input-element:disabled {
  color: rgba(0, 0, 0, .38)
}

.mat-input-element {
  caret-color: #3f51b5
}

.mat-input-element::placeholder {
  color: rgba(0, 0, 0, .42)
}

.mat-input-element::-moz-placeholder {
  color: rgba(0, 0, 0, .42)
}

.mat-input-element::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .42)
}

.mat-input-element:-ms-input-placeholder {
  color: rgba(0, 0, 0, .42)
}

.mat-form-field.mat-accent .mat-input-element {
  caret-color: #ff4081
}

.mat-form-field-invalid .mat-input-element,
.mat-form-field.mat-warn .mat-input-element {
  caret-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix:after {
  color: #f44336
}

.mat-list-base .mat-list-item,
.mat-list-base .mat-list-option {
  color: rgba(0, 0, 0, .87)
}

.mat-list-base .mat-subheader {
  color: rgba(0, 0, 0, .54)
}

.mat-list-item-disabled {
  background-color: #eee
}

.mat-action-list .mat-list-item:focus,
.mat-action-list .mat-list-item:hover,
.mat-list-option:focus,
.mat-list-option:hover,
.mat-nav-list .mat-list-item:focus,
.mat-nav-list .mat-list-item:hover {
  background: rgba(0, 0, 0, .04)
}

.mat-list-single-selected-option,
.mat-list-single-selected-option:focus,
.mat-list-single-selected-option:hover {
  background: rgba(0, 0, 0, .12)
}

.mat-menu-panel {
  background: #fff
}

.mat-menu-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-menu-item {
  background: transparent;
  color: rgba(0, 0, 0, .87)
}

.mat-menu-item[disabled],
.mat-menu-item[disabled]:after {
  color: rgba(0, 0, 0, .38)
}

.mat-menu-item-submenu-trigger:after,
.mat-menu-item .mat-icon-no-color {
  color: rgba(0, 0, 0, .54)
}

.mat-menu-item-highlighted:not([disabled]),
.mat-menu-item.cdk-keyboard-focused:not([disabled]),
.mat-menu-item.cdk-program-focused:not([disabled]),
.mat-menu-item:hover:not([disabled]) {
  background: rgba(0, 0, 0, .04)
}

.mat-paginator {
  background: #fff
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
  color: rgba(0, 0, 0, .54)
}

.mat-paginator-decrement,
.mat-paginator-increment {
  border-top: 2px solid rgba(0, 0, 0, .54);
  border-right: 2px solid rgba(0, 0, 0, .54)
}

.mat-paginator-first,
.mat-paginator-last {
  border-top: 2px solid rgba(0, 0, 0, .54)
}

.mat-icon-button[disabled] .mat-paginator-decrement,
.mat-icon-button[disabled] .mat-paginator-first,
.mat-icon-button[disabled] .mat-paginator-increment,
.mat-icon-button[disabled] .mat-paginator-last {
  border-color: rgba(0, 0, 0, .38)
}

.mat-paginator-container {
  min-height: 56px
}

.mat-progress-bar-background {
  fill: #c5cae9
}

.mat-progress-bar-buffer {
  background-color: #c5cae9
}

.mat-progress-bar-fill:after {
  background-color: #3f51b5
}

.mat-progress-bar.mat-accent .mat-progress-bar-background {
  fill: #ff80ab
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
  background-color: #ff80ab
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill:after {
  background-color: #ff4081
}

.mat-progress-bar.mat-warn .mat-progress-bar-background {
  fill: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
  background-color: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill:after {
  background-color: #f44336
}

.mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #3f51b5
}

.mat-progress-spinner.mat-accent circle,
.mat-spinner.mat-accent circle {
  stroke: #ff4081
}

.mat-progress-spinner.mat-warn circle,
.mat-spinner.mat-warn circle {
  stroke: #f44336
}

.mat-radio-outer-circle {
  border-color: rgba(0, 0, 0, .54)
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
  border-color: #3f51b5
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-primary .mat-radio-inner-circle,
.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
  background-color: #3f51b5
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: #ff4081
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
  background-color: #ff4081
}

.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
  border-color: #f44336
}

.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-warn .mat-radio-inner-circle,
.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {
  background-color: #f44336
}

.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,
.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
  border-color: rgba(0, 0, 0, .38)
}

.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle,
.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element {
  background-color: rgba(0, 0, 0, .38)
}

.mat-radio-button.mat-radio-disabled .mat-radio-label-content {
  color: rgba(0, 0, 0, .38)
}

.mat-radio-button .mat-ripple-element {
  background-color: #000
}

.mat-select-value {
  color: rgba(0, 0, 0, .87)
}

.mat-select-placeholder {
  color: rgba(0, 0, 0, .42)
}

.mat-select-disabled .mat-select-value {
  color: rgba(0, 0, 0, .38)
}

.mat-select-arrow {
  color: rgba(0, 0, 0, .54)
}

.mat-select-panel {
  background: #fff
}

.mat-select-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
  background: rgba(0, 0, 0, .12)
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
  color: #3f51b5
}

.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
  color: #ff4081
}

.mat-form-field.mat-focused.mat-warn .mat-select-arrow,
.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
  color: #f44336
}

.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
  color: rgba(0, 0, 0, .38)
}

.mat-drawer-container {
  background-color: #fafafa;
  color: rgba(0, 0, 0, .87)
}

.mat-drawer {
  color: rgba(0, 0, 0, .87)
}

.mat-drawer,
.mat-drawer.mat-drawer-push {
  background-color: #fff
}

.mat-drawer:not(.mat-drawer-side) {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.mat-drawer-side {
  border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-drawer-side.mat-drawer-end,
[dir=rtl] .mat-drawer-side {
  border-left: 1px solid rgba(0, 0, 0, .12);
  border-right: none
}

[dir=rtl] .mat-drawer-side.mat-drawer-end {
  border-left: none;
  border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-drawer-backdrop.mat-drawer-shown {
  background-color: rgba(0, 0, 0, .6)
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: #ff4081
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(255, 64, 129, .54)
}

.mat-slide-toggle.mat-checked .mat-ripple-element {
  background-color: #ff4081
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
  background-color: #3f51b5
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(63, 81, 181, .54)
}

.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
  background-color: #3f51b5
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
  background-color: #f44336
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(244, 67, 54, .54)
}

.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {
  background-color: #f44336
}

.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
  background-color: #000
}

.mat-slide-toggle-thumb {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  background-color: #fafafa
}

.mat-slide-toggle-bar {
  background-color: rgba(0, 0, 0, .38)
}

.mat-slider-track-background {
  background-color: rgba(0, 0, 0, .26)
}

.mat-primary .mat-slider-thumb,
.mat-primary .mat-slider-thumb-label,
.mat-primary .mat-slider-track-fill {
  background-color: #3f51b5
}

.mat-primary .mat-slider-thumb-label-text {
  color: #fff
}

.mat-primary .mat-slider-focus-ring {
  background-color: rgba(63, 81, 181, .2)
}

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill {
  background-color: #ff4081
}

.mat-accent .mat-slider-thumb-label-text {
  color: #fff
}

.mat-accent .mat-slider-focus-ring {
  background-color: rgba(255, 64, 129, .2)
}

.mat-warn .mat-slider-thumb,
.mat-warn .mat-slider-thumb-label,
.mat-warn .mat-slider-track-fill {
  background-color: #f44336
}

.mat-warn .mat-slider-thumb-label-text {
  color: #fff
}

.mat-warn .mat-slider-focus-ring {
  background-color: rgba(244, 67, 54, .2)
}

.cdk-focused .mat-slider-track-background,
.mat-slider:hover .mat-slider-track-background {
  background-color: rgba(0, 0, 0, .38)
}

.mat-slider-disabled .mat-slider-thumb,
.mat-slider-disabled .mat-slider-track-background,
.mat-slider-disabled .mat-slider-track-fill,
.mat-slider-disabled:hover .mat-slider-track-background {
  background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value .mat-slider-focus-ring {
  background-color: rgba(0, 0, 0, .12)
}

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
  background-color: rgba(0, 0, 0, .87)
}

.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
  background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  border-color: rgba(0, 0, 0, .26);
  background-color: initial
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb {
  border-color: rgba(0, 0, 0, .38)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb {
  border-color: rgba(0, 0, 0, .26)
}

.mat-slider-has-ticks .mat-slider-wrapper:after {
  border-color: rgba(0, 0, 0, .7)
}

.mat-slider-horizontal .mat-slider-ticks {
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent);
  background-image: -moz-repeating-linear-gradient(.0001deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-slider-vertical .mat-slider-ticks {
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-step-header.cdk-keyboard-focused,
.mat-step-header.cdk-program-focused,
.mat-step-header:hover {
  background-color: rgba(0, 0, 0, .04)
}

@media (hover:none) {
  .mat-step-header:hover {
    background: none
  }
}

.mat-step-header .mat-step-label,
.mat-step-header .mat-step-optional {
  color: rgba(0, 0, 0, .54)
}

.mat-step-header .mat-step-icon {
  background-color: rgba(0, 0, 0, .54);
  color: #fff
}

.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
  background-color: #3f51b5;
  color: #fff
}

.mat-step-header .mat-step-icon-state-error {
  background-color: initial;
  color: #f44336
}

.mat-step-header .mat-step-label.mat-step-label-active {
  color: rgba(0, 0, 0, .87)
}

.mat-step-header .mat-step-label.mat-step-label-error {
  color: #f44336
}

.mat-stepper-horizontal,
.mat-stepper-vertical {
  background-color: #fff
}

.mat-stepper-vertical-line:before {
  border-left-color: rgba(0, 0, 0, .12)
}

.mat-horizontal-stepper-header:after,
.mat-horizontal-stepper-header:before,
.mat-stepper-horizontal-line {
  border-top-color: rgba(0, 0, 0, .12)
}

.mat-horizontal-stepper-header {
  height: 72px
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header,
.mat-vertical-stepper-header {
  padding: 24px
}

.mat-stepper-vertical-line:before {
  top: -16px;
  bottom: -16px
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:after,
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:before,
.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
  top: 36px
}

.mat-sort-header-arrow {
  color: #757575
}

.mat-tab-header,
.mat-tab-nav-bar {
  border-bottom: 1px solid rgba(0, 0, 0, .12)
}

.mat-tab-group-inverted-header .mat-tab-header,
.mat-tab-group-inverted-header .mat-tab-nav-bar {
  border-top: 1px solid rgba(0, 0, 0, .12);
  border-bottom: none
}

.mat-tab-label,
.mat-tab-link {
  color: rgba(0, 0, 0, .87)
}

.mat-tab-label.mat-tab-disabled,
.mat-tab-link.mat-tab-disabled {
  color: rgba(0, 0, 0, .38)
}

.mat-tab-header-pagination-chevron {
  border-color: rgba(0, 0, 0, .87)
}

.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: rgba(0, 0, 0, .38)
}

.mat-tab-group[class*=mat-background-] .mat-tab-header,
.mat-tab-nav-bar[class*=mat-background-] {
  border-bottom: none;
  border-top: none
}

.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(197, 202, 233, .3)
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: #3f51b5
}

.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {
  background-color: #fff
}

.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 128, 171, .3)
}

.mat-tab-group.mat-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent .mat-ink-bar {
  background-color: #ff4081
}

.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {
  background-color: #fff
}

.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn .mat-ink-bar {
  background-color: #f44336
}

.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {
  background-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(197, 202, 233, .3)
}

.mat-tab-group.mat-background-primary .mat-tab-header,
.mat-tab-group.mat-background-primary .mat-tab-header-pagination,
.mat-tab-group.mat-background-primary .mat-tab-links,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination,
.mat-tab-nav-bar.mat-background-primary .mat-tab-links {
  background-color: #3f51b5
}

.mat-tab-group.mat-background-primary .mat-tab-label,
.mat-tab-group.mat-background-primary .mat-tab-link,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link {
  color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled {
  color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {
  border-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-primary .mat-ripple-element,
.mat-tab-nav-bar.mat-background-primary .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .12)
}

.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 128, 171, .3)
}

.mat-tab-group.mat-background-accent .mat-tab-header,
.mat-tab-group.mat-background-accent .mat-tab-header-pagination,
.mat-tab-group.mat-background-accent .mat-tab-links,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination,
.mat-tab-nav-bar.mat-background-accent .mat-tab-links {
  background-color: #ff4081
}

.mat-tab-group.mat-background-accent .mat-tab-label,
.mat-tab-group.mat-background-accent .mat-tab-link,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link {
  color: #fff
}

.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled {
  color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {
  border-color: #fff
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-accent .mat-ripple-element,
.mat-tab-nav-bar.mat-background-accent .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .12)
}

.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-background-warn .mat-tab-header,
.mat-tab-group.mat-background-warn .mat-tab-header-pagination,
.mat-tab-group.mat-background-warn .mat-tab-links,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination,
.mat-tab-nav-bar.mat-background-warn .mat-tab-links {
  background-color: #f44336
}

.mat-tab-group.mat-background-warn .mat-tab-label,
.mat-tab-group.mat-background-warn .mat-tab-link,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link {
  color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled {
  color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {
  border-color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: hsla(0, 0%, 100%, .4)
}

.mat-tab-group.mat-background-warn .mat-ripple-element,
.mat-tab-nav-bar.mat-background-warn .mat-ripple-element {
  background-color: hsla(0, 0%, 100%, .12)
}

.mat-toolbar {
  background: #f5f5f5;
  color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-primary {
  background: #3f51b5;
  color: #fff
}

.mat-toolbar.mat-accent {
  background: #ff4081;
  color: #fff
}

.mat-toolbar.mat-warn {
  background: #f44336;
  color: #fff
}

.mat-toolbar .mat-focused .mat-form-field-ripple,
.mat-toolbar .mat-form-field-ripple,
.mat-toolbar .mat-form-field-underline {
  background-color: currentColor
}

.mat-toolbar .mat-focused .mat-form-field-label,
.mat-toolbar .mat-form-field-label,
.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow,
.mat-toolbar .mat-select-arrow,
.mat-toolbar .mat-select-value {
  color: inherit
}

.mat-toolbar .mat-input-element {
  caret-color: currentColor
}

.mat-toolbar-multiple-rows {
  min-height: 64px
}

.mat-toolbar-row,
.mat-toolbar-single-row {
  height: 64px
}

@media (max-width:599px) {
  .mat-toolbar-multiple-rows {
    min-height: 56px
  }

  .mat-toolbar-row,
  .mat-toolbar-single-row {
    height: 56px
  }
}

.mat-tooltip {
  background: rgba(97, 97, 97, .9)
}

.mat-tree {
  background: #fff
}

.mat-nested-tree-node,
.mat-tree-node {
  color: rgba(0, 0, 0, .87)
}

.mat-tree-node {
  min-height: 48px
}

.mat-snack-bar-container {
  color: hsla(0, 0%, 100%, .7);
  background: #323232;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-simple-snackbar-action {
  color: #ff4081
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
select,
small,
span,
strike,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: 100%;
  font: inherit;
  vertical-align: initial
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

ol,
ul {
  list-style: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

button {
  border: 0;
  cursor: pointer
}

a,
a:active,
a:focus,
a:hover,
button:focus,
li:focus {
  text-decoration: none;
  cursor: pointer;
  outline: none
}

input:active,
input:focus,
select:active,
select:focus {
  outline: none
}

input:not([type=checkbox]),
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none
}

html {
  font-family: Microsoft JhengHei
}

body {
  position: relative;
  text-decoration: none
}

.clearfix {
  clear: both
}

*,
:after,
:before {
  box-sizing: inherit;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased
}

.relative {
  position: relative
}

.absolute {
  position: absolute
}

.fixed {
  position: fixed
}

.flex,
app-transfer-old-member .row {
  display: flex
}

.inline-block {
  display: inline-block
}

.left {
  float: left
}

.right {
  float: right
}

.clear {
  clear: both
}

.popup {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  z-index: 50
}

.scroll-bar::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 2.5px
}

.scroll-bar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5
}

.scroll-bar::-webkit-scrollbar-thumb {
  border-radius: 2.5px;
  background-color: rgba(77, 77, 77, .4)
}

.g-1 {
  background: linear-gradient(45deg, #fff, #fbff40 50%, #fbe9a5 75%, #f6cb27)
}

.g-2 {
  background: linear-gradient(#f1d7b7, #cca172 50%, #f1c999)
}

.g-2:active {
  background: linear-gradient(0deg, #f1d7b7 0, #cca172 50%, #f1c999)
}

.g-3 {
  background: linear-gradient(#fff 40%, #f4f4f4)
}

.g-4 {
  background: linear-gradient(#fff 40%, #f2f2f2)
}

.g-5,
app-combine-quest-apply .check-btn {
  background: linear-gradient(180deg, #fff 25%, #ccc)
}

.g-5:active,
app-combine-quest-apply .check-btn:active {
  background: linear-gradient(180deg, #ccc 25%, #fff)
}

.g-7 {
  background: linear-gradient(135deg, #a1550b, #eed386 25%, #b87b2a 50%, #fff8ad 75%, #d3aa5b)
}

.g-8 {
  background: linear-gradient(135deg, #00b5ff, #0c6bff 55%, #7991ff)
}

.g-9 {
  background: linear-gradient(135deg, #50f, #880cff 55%, #d979ff)
}

.g-10 {
  background: linear-gradient(135deg, #59e200, #3cab08 55%, #60b857)
}

.g-11 {
  background: linear-gradient(135deg, #ffc600, #d28b00 55%, #ffd665)
}

.g-6 {
  background: linear-gradient(#21d506, #05b900)
}

.g-12 {
  background: linear-gradient(#fff, #f2f2f2)
}

.g-13 {
  background: linear-gradient(#ffe9f5, #fffff2)
}

.g-14 {
  background: linear-gradient(120deg, #f1d7b7, #cca172 50%, #f1c999)
}

.g-15 {
  background: linear-gradient(#5e9cff, #386df8)
}

.g-16 {
  background: linear-gradient(90deg, #7c4bff, #887bff)
}

.g-17 {
  background: linear-gradient(#3178ff, #784dff)
}

.g-18,
app-slot-center .game-contain {
  background: linear-gradient(#fcfcfc 85%, #d8d8d8)
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal
}

.carousel {
  position: relative
}

.carousel.pointer-event {
  touch-action: pan-y
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden
}

.carousel-inner:after {
  display: block;
  clear: both;
  content: ""
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .6s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
  .carousel-item {
    transition: none
  }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
  display: block
}

.active.carousel-item-right,
.carousel-item-next:not(.carousel-item-left) {
  transform: translateX(100%)
}

.active.carousel-item-left,
.carousel-item-prev:not(.carousel-item-right) {
  transform: translateX(-100%)
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
  z-index: 1;
  opacity: 1
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s .6s
}

@media (prefers-reduced-motion:reduce) {

  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none
  }
}

.carousel-control-next,
.carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: .5;
  transition: opacity .15s ease
}

@media (prefers-reduced-motion:reduce) {

  .carousel-control-next,
  .carousel-control-prev {
    transition: none
  }
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9
}

.carousel-control-prev {
  left: 0
}

.carousel-control-next {
  right: 0
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: 50%/100% 100% no-repeat
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none
}

.carousel-indicators li {
  box-sizing: initial;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity .6s ease
}

@media (prefers-reduced-motion:reduce) {
  .carousel-indicators li {
    transition: none
  }
}

.carousel-indicators .active {
  opacity: 1
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center
}

.w-100 {
  width: 100% !important
}

.d-block {
  display: block !important
}

.markdown-body .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom
}

.markdown-body .anchor {
  float: left;
  line-height: 1;
  margin-left: -20px;
  padding-right: 4px
}

.markdown-body .anchor:focus {
  outline: none
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
  color: #1b1f23;
  vertical-align: middle;
  visibility: hidden
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
  text-decoration: none
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  visibility: visible
}

.markdown-body h1:hover .anchor .octicon-link:before,
.markdown-body h2:hover .anchor .octicon-link:before,
.markdown-body h3:hover .anchor .octicon-link:before,
.markdown-body h4:hover .anchor .octicon-link:before,
.markdown-body h5:hover .anchor .octicon-link:before,
.markdown-body h6:hover .anchor .octicon-link:before {
  width: 16px;
  height: 16px;
  content: " ";
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E")
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word
}

.markdown-body details {
  display: block;
  width: 100%
}

.markdown-body summary {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 3px 0 #dedede;
  color: #595757;
  font-size: 14px;
  min-height: 51px;
  display: flex;
  align-items: center;
  position: relative
}

.markdown-body summary+div {
  padding: 10px
}

.markdown-body summary:before {
  content: "";
  display: inline-block;
  background-image: url(resources/problem2.5ec0a6a7bdad2ee0154f.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 15px;
  width: 15px;
  margin: 0 4vw
}

details summary:after {
  position: absolute;
  right: 4vw;
  transform: rotate(180deg);
  transition: .2s
}

details[open] summary:after,
details summary:after {
  content: "";
  background-image: url(resources/arrow_gray.23a209014d3b8695b115.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 9px;
  height: 16px
}

details[open] summary:after {
  transform: rotate(270deg)
}

.markdown-body a {
  background-color: initial
}

.markdown-body a:active,
.markdown-body a:hover {
  outline-width: 0
}

.markdown-body strong {
  font-weight: inherit;
  font-weight: bolder
}

.markdown-body h1 {
  margin: .67em 0
}

.markdown-body img {
  border-style: none;
  display: block;
  margin: 0 auto 20px;
  width: 100%
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: monospace, monospace;
  font-size: 1em
}

.markdown-body hr {
  box-sizing: initial;
  overflow: visible
}

.markdown-body input {
  font: inherit;
  margin: 0;
  overflow: visible
}

.markdown-body [type=checkbox] {
  box-sizing: border-box;
  padding: 0
}

.markdown-body * {
  box-sizing: border-box
}

.markdown-body input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

.markdown-body a {
  color: #0366d6;
  text-decoration: none
}

.markdown-body a:hover {
  text-decoration: underline
}

.markdown-body strong {
  font-weight: 600
}

.markdown-body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid #dfe2e5
}

.markdown-body hr:after,
.markdown-body hr:before {
  display: table;
  content: ""
}

.markdown-body hr:after {
  clear: both
}

.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse
}

.markdown-body td,
.markdown-body th {
  padding: 0
}

.markdown-body details summary {
  cursor: pointer
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 0;
  margin-bottom: 0
}

.markdown-body h1 {
  font-size: 32px
}

.markdown-body h1,
.markdown-body h2 {
  font-weight: 600
}

.markdown-body h2 {
  font-size: 24px
}

.markdown-body h3 {
  font-size: 20px
}

.markdown-body h3,
.markdown-body h4 {
  font-weight: 600
}

.markdown-body h4 {
  font-size: 16px
}

.markdown-body h5 {
  font-size: 14px
}

.markdown-body h5,
.markdown-body h6 {
  font-weight: 600
}

.markdown-body h6 {
  font-size: 12px
}

.markdown-body p {
  margin-bottom: 0;
  font-size: 14px;
  color: #595757
}

.markdown-body blockquote {
  margin: 0
}

.markdown-body ol,
.markdown-body ul {
  padding-left: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #595757
}

.markdown-body ul {
  list-style: initial
}

.markdown-body ol {
  list-style: decimal
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman
}

.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
  list-style-type: lower-alpha
}

.markdown-body dd {
  margin-left: 0
}

.markdown-body code,
.markdown-body pre {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 12px
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0
}

.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none
}

.markdown-body :checked+.radio-label {
  position: relative;
  z-index: 1;
  border-color: #0366d6
}

.markdown-body .border {
  border: 1px solid #e1e4e8 !important
}

.markdown-body .border-0 {
  border: 0 !important
}

.markdown-body .border-bottom {
  border-bottom: 1px solid #e1e4e8 !important
}

.markdown-body .rounded-1 {
  border-radius: 3px !important
}

.markdown-body .bg-white {
  background-color: #fff !important
}

.markdown-body .bg-gray-light {
  background-color: #fafbfc !important
}

.markdown-body .text-gray-light {
  color: #6a737d !important
}

.markdown-body .pl-3,
.markdown-body .px-3 {
  padding-left: 16px !important
}

.markdown-body .px-3 {
  padding-right: 16px !important
}

.markdown-body .f6 {
  font-size: 12px !important
}

.markdown-body .lh-condensed {
  line-height: 1.25 !important
}

.markdown-body .text-bold {
  font-weight: 600 !important
}

.markdown-body .pl-c {
  color: #6a737d
}

.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #005cc5
}

.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #6f42c1
}

.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
  color: #24292e
}

.markdown-body .pl-ent {
  color: #22863a
}

.markdown-body .pl-k {
  color: #d73a49
}

.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
  color: #032f62
}

.markdown-body .pl-smw,
.markdown-body .pl-v {
  color: #e36209
}

.markdown-body .pl-bu {
  color: #b31d28
}

.markdown-body .pl-ii {
  color: #fafbfc;
  background-color: #b31d28
}

.markdown-body .pl-c2 {
  color: #fafbfc;
  background-color: #d73a49
}

.markdown-body .pl-c2:before {
  content: "^M"
}

.markdown-body .pl-sr .pl-cce {
  font-weight: 700;
  color: #22863a
}

.markdown-body .pl-ml {
  color: #735c0f
}

.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  font-weight: 700;
  color: #005cc5
}

.markdown-body .pl-mi {
  font-style: italic;
  color: #24292e
}

.markdown-body .pl-mb {
  font-weight: 700;
  color: #24292e
}

.markdown-body .pl-md {
  color: #b31d28;
  background-color: #ffeef0
}

.markdown-body .pl-mi1 {
  color: #22863a;
  background-color: #f0fff4
}

.markdown-body .pl-mc {
  color: #e36209;
  background-color: #ffebda
}

.markdown-body .pl-mi2 {
  color: #f6f8fa;
  background-color: #005cc5
}

.markdown-body .pl-mdr {
  font-weight: 700;
  color: #6f42c1
}

.markdown-body .pl-ba {
  color: #586069
}

.markdown-body .pl-sg {
  color: #959da5
}

.markdown-body .pl-corl {
  text-decoration: underline;
  color: #032f62
}

.markdown-body .mb-0 {
  margin-bottom: 0 !important
}

.markdown-body .my-2 {
  margin-bottom: 8px !important;
  margin-top: 8px !important
}

.markdown-body .pl-0 {
  padding-left: 0 !important
}

.markdown-body .py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.markdown-body .pl-1 {
  padding-left: 4px !important
}

.markdown-body .pl-2 {
  padding-left: 8px !important
}

.markdown-body .py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important
}

.markdown-body .pl-3 {
  padding-left: 16px !important
}

.markdown-body .pl-4 {
  padding-left: 24px !important
}

.markdown-body .pl-5 {
  padding-left: 32px !important
}

.markdown-body .pl-6 {
  padding-left: 40px !important
}

.markdown-body .pl-7 {
  padding-left: 48px !important
}

.markdown-body .pl-8 {
  padding-left: 64px !important
}

.markdown-body .pl-9 {
  padding-left: 80px !important
}

.markdown-body .pl-10 {
  padding-left: 96px !important
}

.markdown-body .pl-11 {
  padding-left: 112px !important
}

.markdown-body .pl-12 {
  padding-left: 128px !important
}

.markdown-body hr {
  border-bottom-color: #eee
}

.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da
}

.markdown-body:after,
.markdown-body:before {
  display: table;
  content: ""
}

.markdown-body:after {
  clear: both
}

.markdown-body>:first-child {
  margin-top: 0 !important
}

.markdown-body>:last-child {
  margin-bottom: 0 !important
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none
}

.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body pre,
.markdown-body table {
  margin-top: 0;
  margin-bottom: 16px
}

.markdown-body hr {
  height: .25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: .25em solid #dfe2e5
}

.markdown-body blockquote>:first-child {
  margin-top: 0
}

.markdown-body blockquote>:last-child {
  margin-bottom: 0
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25
}

.markdown-body h1 {
  font-size: 2em
}

.markdown-body h1,
.markdown-body h2 {
  padding-bottom: .2em
}

.markdown-body h2 {
  font-size: 1.5em
}

.markdown-body h3 {
  font-size: 1.25em
}

.markdown-body h4 {
  font-size: 1em
}

.markdown-body h5 {
  font-size: .875em
}

.markdown-body h6 {
  font-size: .85em;
  color: #6a737d
}

.markdown-body ol,
.markdown-body ul {
  padding-left: 1em
}

.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
  margin-top: 0;
  margin-bottom: 0
}

.markdown-body li {
  word-wrap: break-all
}

.markdown-body li>p {
  margin-top: 16px
}

.markdown-body dl {
  padding: 0
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600
}

.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto
}

.markdown-body table th {
  font-weight: 600
}

.markdown-body table td,
.markdown-body table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa
}

.markdown-body img {
  max-width: 100%;
  box-sizing: initial;
  background-color: #fff
}

.markdown-body img[align=right] {
  padding-left: 20px
}

.markdown-body img[align=left] {
  padding-right: 20px
}

.markdown-body code {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, .05);
  border-radius: 3px
}

.markdown-body pre {
  word-wrap: normal
}

.markdown-body pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0
}

.markdown-body .highlight {
  margin-bottom: 16px
}

.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal
}

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px
}

.markdown-body pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: initial;
  border: 0
}

.markdown-body .commit-tease-sha {
  display: inline-block;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 90%;
  color: #444d56
}

.markdown-body .full-commit .btn-outline:not(:disabled):hover {
  color: #005cc5;
  border-color: #005cc5
}

.markdown-body .blob-wrapper {
  overflow-x: auto;
  overflow-y: hidden
}

.markdown-body .blob-wrapper-embedded {
  max-height: 240px;
  overflow-y: auto
}

.markdown-body .blob-num {
  width: 1%;
  min-width: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 12px;
  line-height: 20px;
  color: rgba(27, 31, 35, .3);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none
}

.markdown-body .blob-num:hover {
  color: rgba(27, 31, 35, .6)
}

.markdown-body .blob-num:before {
  content: attr(data-line-number)
}

.markdown-body .blob-code {
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 20px;
  vertical-align: top
}

.markdown-body .blob-code-inner {
  overflow: visible;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 12px;
  color: #24292e;
  word-wrap: normal;
  white-space: pre
}

.markdown-body .pl-token.active,
.markdown-body .pl-token:hover {
  cursor: pointer;
  background: #ffea7f
}

.markdown-body .tab-size[data-tab-size="1"] {
  -moz-tab-size: 1;
  tab-size: 1
}

.markdown-body .tab-size[data-tab-size="2"] {
  -moz-tab-size: 2;
  tab-size: 2
}

.markdown-body .tab-size[data-tab-size="3"] {
  -moz-tab-size: 3;
  tab-size: 3
}

.markdown-body .tab-size[data-tab-size="4"] {
  -moz-tab-size: 4;
  tab-size: 4
}

.markdown-body .tab-size[data-tab-size="5"] {
  -moz-tab-size: 5;
  tab-size: 5
}

.markdown-body .tab-size[data-tab-size="6"] {
  -moz-tab-size: 6;
  tab-size: 6
}

.markdown-body .tab-size[data-tab-size="7"] {
  -moz-tab-size: 7;
  tab-size: 7
}

.markdown-body .tab-size[data-tab-size="8"] {
  -moz-tab-size: 8;
  tab-size: 8
}

.markdown-body .tab-size[data-tab-size="9"] {
  -moz-tab-size: 9;
  tab-size: 9
}

.markdown-body .tab-size[data-tab-size="10"] {
  -moz-tab-size: 10;
  tab-size: 10
}

.markdown-body .tab-size[data-tab-size="11"] {
  -moz-tab-size: 11;
  tab-size: 11
}

.markdown-body .tab-size[data-tab-size="12"] {
  -moz-tab-size: 12;
  tab-size: 12
}

.markdown-body .task-list-item {
  list-style-type: none
}

.markdown-body .task-list-item+.task-list-item {
  margin-top: 3px
}

.markdown-body .task-list-item input {
  margin: 0 .2em .25em -1.6em;
  vertical-align: middle
}

.markdown-body .download-md {
  width: 100%
}

.markdown-body .download-md a {
  width: 70%;
  height: 9.87vw;
  font-size: 16px;
  margin: 15px 0;
  color: #7c5625
}

.markdown-body h3>a.d-btn {
  display: inline-block !important;
  width: 144px;
  height: 41px;
  line-height: 35px;
  text-align: center;
  margin: 0 0 0 15px;
  color: #7c5625
}

.markdown-body div>ol,
.markdown-body p+ol {
  margin-bottom: 8px
}

.main-wrap {
  width: 100%;
  min-height: 100vh;
  padding: 45px 0 47px;
  font-weight: 700;
  overflow-x: hidden
}

.main-wrap .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  background-size: cover;
  z-index: -999
}

.gray-btn-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 5px
}

.panel-style,
app-user-info-platform li,
app-vip-detail .table {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 3px 0 #dedede;
  color: #666
}

.markdown-body .download-md a,
.markdown-body h3>a.d-btn,
.orange_btn,
app-date-selector .btn-group .active,
app-member-center .user .info .innerBtn,
app-quest-detail .applyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d);
  border: 1px solid #b90b0a;
  border-radius: 3px;
  color: #fff
}

.markdown-body .download-md a.active,
.markdown-body .download-md a:active,
.markdown-body .download-md a:hover,
.markdown-body h3>a.active.d-btn,
.markdown-body h3>a.d-btn:active,
.markdown-body h3>a.d-btn:hover,
.orange_btn.active,
.orange_btn:active,
.orange_btn:hover,
app-date-selector .btn-group .active,
app-member-center .user .info .active.innerBtn,
app-member-center .user .info .innerBtn:active,
app-member-center .user .info .innerBtn:hover,
app-quest-detail .active.applyBtn,
app-quest-detail .applyBtn:active,
app-quest-detail .applyBtn:hover {
  background: linear-gradient(0deg, #e01515 40%, #bd1515)
}

.gray_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff 40%, #f4f4f4);
  border: 1px solid #e8e8e8;
  border-radius: 3px
}

.gray_btn:active {
  background: linear-gradient(0deg, #fff 40%, #f4f4f4)
}

.white_orange_btn {
  border: 1px solid #cfa678;
  border-radius: 3px;
  color: #cfa678
}

.white_orange_btn,
.white_red_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff
}

.white_red_btn {
  border: 1px solid #3d4cce;
  border-radius: 3px;
  color: #3d4cce
}

.gray_orange_frame_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#fff 40%, #f4f4f4);
  border: 1px solid #cc8b43;
  border-radius: 3px;
  color: #000
}

.gray_orange_frame_btn:active {
  background: linear-gradient(0deg, #fff 40%, #f4f4f4)
}

button:disabled {
  background: #ccc !important;
  border: none !important;
  cursor: not-allowed;
  color: #fff
}

input[type=date] {
  text-align: right
}

input:not([type=checkbox]):not([type=radio]),
select {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 0 0 0 15px;
  background: none
}

.mask {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, .4);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  z-index: 100
}

.dialog {
  background: #fff;
  border-radius: 5px
}

.dialog .title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 13.5vw;
  font-size: 21px;
  background: #e11515;
  border-radius: 5px 5px 0 0;
  color: #fff
}

.dialog .title i {
  position: absolute;
  top: calc((10.61vw - 4.73vw) / 2);
  right: 5.38vw;
  width: 4.73vw;
  height: 4.73vw;
  background: url(resources/close.d7763b665737ab56287e.svg) no-repeat 50%
}

.dialog hr {
  border: 1px solid #d7d8d8
}

form .err,
form .tips {
  line-height: 1.8;
  text-align: left
}

form .tips {
  font-size: 12px;
  color: #999
}

form .err {
  font-size: 12px;
  color: red
}

form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #e11515 0), linear-gradient(135deg, #e11515 50%, transparent 0);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat
}

form .form-row {
  display: flex;
  align-items: center;
  margin: 0 0 8.53vw
}

form .form-row .item {
  margin: 0 13.33vw 0 0
}

.no-data {
  letter-spacing: 1px;
  color: #999
}

.page-block {
  height: 66px;
  background: #fff;
  border-top: 1px solid #ccc;
  padding: 7px 0
}

.page-block>p {
  font-size: 13px;
  text-align: center;
  color: grey
}

.page-block .pagination .ngx-pagination {
  display: flex;
  justify-content: center;
  margin-bottom: 7px
}

.page-block .pagination .ngx-pagination .current {
  background: #008599;
  border-radius: 3px
}

.maintain-blur {
  filter: blur(2px);
  position: relative;
  z-index: 0
}

app-maintain .maintain .markdown-body {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 32px 16px;
  background-color: #fff
}

app-maintain .maintain .markdown-body table {
  display: table;
  width: 100%;
  height: auto;
  overflow: hidden;
  box-shadow: 0 0 0 1px #e11515;
  border-radius: 16px;
  border-style: hidden;
  font-family: 微軟正黑體
}

app-maintain .maintain .markdown-body table tr th {
  height: 40px;
  background: #e11515;
  vertical-align: middle;
  color: #fff;
  font-size: 4vw;
  font-weight: 700;
  border: 0
}

app-maintain .maintain .markdown-body table tr td {
  height: 40px;
  background: #fff;
  border-color: #e6e6e6;
  border-style: solid;
  border-width: 0 1px 1px 0;
  vertical-align: middle;
  padding: 5px 0;
  color: #000;
  font-size: 3.4vw;
  font-weight: 700;
  text-align: center
}

app-maintain .maintain .markdown-body table tr td:first-of-type,
app-maintain .maintain .markdown-body table tr td:nth-of-type(2) {
  width: 25%
}

app-maintain .maintain .markdown-body table tr td:nth-of-type(3) {
  width: 50%
}

app-maintain-tip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none
}

app-maintain-tip .maintain {
  line-height: 1.5;
  text-align: center;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, .62);
  text-shadow: 1px 2px 4px #d08016
}

app-maintain-tip .fixBox,
app-maintain-tip .maintain {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

app-maintain-tip .fixBox {
  left: 0;
  top: 0
}

app-maintain-tip .fixBox .title {
  color: #fff;
  font-size: 7vw;
  font-weight: 700;
  margin-bottom: 3vw;
  position: unset
}

app-maintain-tip .fixBox .timeBox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10vw;
  display: flex;
  justify-content: space-between
}

app-maintain-tip .fixBox .timeBox div span {
  display: block;
  color: #fff;
  font-size: 4vw;
  font-weight: 700;
  margin-bottom: 3vw
}

app-maintain-tip .fixBox .timeBox div p {
  color: #fff;
  font-size: 7vw;
  font-weight: 700;
  position: unset
}

app-header .header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99
}

app-header .content {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 45px;
  background: #e11515;
  padding: 0 14px;
  box-sizing: border-box;
  position: relative;
  background-image: url(resources/headerBG.d79e835ab1d1c23468c0.png);
  background-size: 100%
}

app-header .content2 {
  justify-content: center
}

app-header .logo {
  width: 58px;
  height: 26px;
  background: url(resources/logo.0cf262b28c348114ab8a.svg) no-repeat 50%;
  background-size: cover;
  position: relative
}

app-header .arrow {
  position: absolute;
  top: 12.5px;
  left: 14px;
  width: 10px;
  height: 20px;
  background: url(resources/arrow_w.bc6a068930d52e908174.svg) no-repeat 50%
}

app-header button {
  position: absolute;
  top: calc((45px - 27px) / 2);
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  padding: 0 5px;
  border: 1px solid #fff;
  background: none;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #fff
}

app-header .title {
  width: 70%;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

app-header .edit {
  background: url(resources/edit.977c73379c022d81aadb.svg) no-repeat 50%
}

app-header .edit,
app-header .refresh {
  position: absolute;
  top: calc((45px - 21px) / 2);
  right: 14px;
  width: 21px;
  height: 21px
}

app-header .refresh {
  background: url(resources/refresh_w.4ed4ee6c408ce113890f.svg) no-repeat 50%
}

app-header .recFbtn {
  width: 101px !important;
  height: 28px !important;
  border: none !important;
  border-radius: 5px !important;
  background: url(resources/recommendBTN.c4859a75956036dc7405.gif) no-repeat !important;
  background-size: 153% !important;
  background-position-x: 49% !important;
  background-position-y: 39% !important;
  margin-left: 200px;
}

app-footer .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 47px;
  box-shadow: 0 0 8px 0 #dedede;
  z-index: 99;
  background: linear-gradient(180deg, #fff 0, #f2f2f2)
}

app-footer li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 38px;
  border-right: 1px solid #ccc
}

app-footer li .menu_ic {
  background: url(resources/home.f149cf79c30885a4ba38.svg) no-repeat top;
  background-size: 100%
}

app-footer li .menu_ic.active {
  background: url(resources/home2.f9bee52e39572511e27b.svg) no-repeat top;
  background-size: 100%
}

app-footer li .event_ic {
  background: url(resources/discount.87d330de02c4913e3f66.svg) no-repeat top;
  background-size: 100%
}

app-footer li .event_ic.active {
  background: url(resources/discount2.474ac9827356262f042a.svg) no-repeat top;
  background-size: 100%
}

app-footer li .wallet_ic {
  background: url(resources/wallet.1c4abcce35b93157eeaf.svg) no-repeat top;
  background-size: 100%
}

app-footer li .wallet_ic.active {
  background: url(resources/wallet2.d86077eca000af7891ca.svg) no-repeat top;
  background-size: 100%
}

app-footer li .service_ic {
  background: url(resources/service.f5139e9ee8ca44b7e0d4.svg) no-repeat top;
  background-size: 72%
}

app-footer li .service_ic.active {
  background: url(resources/service2.86936db2a151384e12c1.svg) no-repeat top;
  background-size: 72%
}

app-footer li .center_ic {
  background: url(resources/member.6275886c17de9ce98c44.svg) no-repeat top;
  background-size: 79%
}

app-footer li .center_ic.active {
  background: url(resources/member2.580ab63b8bdeff73232e.svg) no-repeat top;
  background-size: 79%
}

app-footer li i {
  display: block;
  width: 22px;
  height: 20px
}

app-footer li p {
  font-size: 12px;
  color: #999;
  padding-top: 2px
}

app-footer li p.active {
  color: #e11515
}

app-home .home-center {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin: 8px 0 0
}

app-home .type {
  height: 73.7wv;
  flex-direction: column;
  align-content: flex-start
}

app-home .type li {
  width: 72px;
  height: 72px;
  margin: 0 0 3px;
  order: 10;
  border-radius: 1.5vw
}

app-home .type li div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 94%;
  height: 94%;
  border: 1px solid #e8e8e8;
  border-radius: 1.5vw
}

app-home .type li div i {
  width: 30px;
  height: 30px;
  margin-bottom: 3px
}

app-home .type li div p {
  font-size: 15px;
  letter-spacing: 0;
  color: #b3b3b3
}

app-home .type li div p.active {
  color: #fff
}

app-home .type li div.active {
  background: linear-gradient(180deg, #e60000 0, #800808)
}

app-home .type li.sport i {
  background: url(resources/sport.e43f823f73f6168a0ab5.svg) no-repeat 50%
}

app-home .type li.sport i.active {
  background: url(resources/sport2.09bd047360c2aaace8b8.svg) no-repeat 50%
}

app-home .type li.live i {
  background: url(resources/live.f4714d317633852cd8e2.svg) no-repeat 50%
}

app-home .type li.live i.active {
  background: url(resources/live2.760dfc886b5e5bff2bb4.svg) no-repeat 50%
}

app-home .type li.slot div {
  padding: 0 6px
}

app-home .type li.slot i {
  width: 40px;
  margin-bottom: 0;
  background: url(resources/slot.6bc216ef8abd1d6f73bf.svg) no-repeat 50%
}

app-home .type li.slot i.active {
  background: url(resources/slot2.5b4fc416c85c15864b3b.svg) no-repeat 50%
}

app-home .type li.lottery i {
  background: url(resources/lotto.2df96a6186e0e141bc70.svg) no-repeat 50%
}

app-home .type li.lottery i.active {
  background: url(resources/lotto2.3b4e9268ee9abd7a7e45.svg) no-repeat 50%
}

app-home .type li.board i {
  background: url(resources/board.31ac0e6f0c7082014d9c.svg) no-repeat 50%
}

app-home .type li.board i.active {
  background: url(resources/board2.f7c9e5dd07b9bda0e24f.svg) no-repeat 50%
}

app-home .type li.fishing div {
  padding: 0 6px
}

app-home .type li.fishing i {
  width: 38px;
  margin-bottom: 0;
  background: url(resources/fish.5e64526768f240cfb698.svg) no-repeat 50%
}

app-home .type li.fishing i.active {
  background: url(resources/fish2.2e9669cf56199d56ac2b.svg) no-repeat 50%
}

app-home .games {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 72px);
  height: 70vh;
  float: right;
  overflow-y: scroll
}

app-home .games li {
  position: relative;
  width: 100%;
  margin-bottom: 1vw
}

app-home .games li>a>div {
  width: 100%;
  padding-top: 67%;
  background: no-repeat 50%;
  background-size: contain
}

app-home .games li p {
  width: auto;
  height: auto;
  position: absolute;
  color: #ebd495;
  font-size: 5vw;
  bottom: 10%;
  right: 15%;
  text-shadow: 2px 3px 3px #332116, 2px -2px 3px #332116
}

app-home .gamesListBox {
  width: 26%;
  height: 47vh;
  overflow-y: scroll;
  background: linear-gradient(0deg, #fff 36%, #f5f5f5);
  border: 1px solid #b69761;
  border-width: 1px 0 0 1px;
  box-shadow: inset 1px 1px 3px 0 #fff, inset -2px -2px 3px 0 rgba(90, 90, 90, .5019607843137255);
  border-radius: 3px;
  float: left
}

app-home .gamesListBox .gamesList {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: nowrap;
  flex-direction: column
}

app-home .gamesListBox .gamesList li {
  width: 100%;
  height: 20vw;
  position: relative
}

app-home .gamesListBox .gamesList li:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 1px;
  background: #b7a25f
}

app-home .gamesListBox .gamesList div {
  width: 85%;
  height: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px
}

app-home .gamesListBox .gamesList div p {
  color: #444;
  text-align: center;
  font-size: 3vw
}

app-home aside {
  position: relative
}

app-home aside .sharetoEarnBTN {
  width: 115px;
  height: 115px;
  border: none;
  position: absolute;
  bottom: 0;
  right: 6px;
  z-index: 5;
  background: url(resources/sharetoEarn.7a4bc54f5d422dbc6f9b.png) no-repeat;
  background-size: 100%
}

app-home aside .closeBtn {
  width: 7.73vw;
  height: 7.73vw;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 50%;
  position: absolute;
  bottom: 98px;
  right: 18px;
  z-index: 10
}

app-home aside .closeBtn:before {
  transform: rotate(-45deg);
  right: 4px
}

app-home aside .closeBtn:after,
app-home aside .closeBtn:before {
  content: "";
  width: 21px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 14px
}

app-home aside .closeBtn:after {
  transform: rotate(45deg);
  left: 5px
}

@media only screen and (max-width:320px) {
  app-home .type li {
    height: 5.4vh
  }

  app-home .type li div i {
    outline: 1px solid pink;
    display: none
  }

  app-home .type li div p {
    width: 100%;
    text-align: center
  }

  app-home .games,
  app-home .gamesListBox {
    height: 35vh
  }
}

@media only screen and (max-height:812px) {
  app-home .type li {
    height: 8.2vh
  }

  app-home .games,
  app-home .gamesListBox {
    height: 51vh
  }
}

@media only screen and (max-height:731px) {
  app-home .type li {
    height: 7vh
  }

  app-home .games,
  app-home .gamesListBox {
    height: 44vh
  }
}

@media only screen and (max-height:823px) {
  app-home .type li {
    height: 8vh
  }

  app-home .games,
  app-home .gamesListBox {
    height: 50vh
  }
}

app-transfer-old-member .mask {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, .4);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  z-index: 100
}

app-transfer-old-member .dialog {
  width: 92vw;
  background: #fff;
  border-radius: 5px
}

app-transfer-old-member .dialog .title2 {
  position: relative;
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  letter-spacing: 2px;
  background: #e11515
}

app-transfer-old-member .dialog .title2 p {
  color: #fff
}

app-transfer-old-member .dialog .title2 i {
  position: absolute;
  width: 15px;
  height: 15px;
  background: url(/assets/img/close_w.svg) no-repeat 50%;
  right: 15px;
  top: 15px
}

app-transfer-old-member input {
  width: 68%;
  height: 42px;
  text-align: center
}

app-transfer-old-member input::placeholder {
  color: #b3b3b3
}

app-transfer-old-member form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px
}

app-transfer-old-member form p {
  font-size: 14px;
  line-height: 31px;
  color: #b0b0b1;
  margin: 15px 0
}

app-transfer-old-member form button {
  width: 27%;
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  border: 1px solid #cca172;
  border-radius: 3px
}

.markdown-body .download-md app-transfer-old-member form a,
.markdown-body app-transfer-old-member form h3>a.d-btn,
app-date-selector .btn-group app-transfer-old-member form .active,
app-member-center .user .info app-transfer-old-member form .innerBtn,
app-quest-detail app-transfer-old-member form .applyBtn,
app-transfer-old-member form .markdown-body .download-md a,
app-transfer-old-member form .markdown-body h3>a.d-btn,
app-transfer-old-member form .orange_btn,
app-transfer-old-member form app-date-selector .btn-group .active,
app-transfer-old-member form app-member-center .user .info .innerBtn,
app-transfer-old-member form app-quest-detail .applyBtn {
  margin-bottom: 0
}

app-transfer-old-member .row {
  position: relative;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 15px 0
}

app-transfer-old-member .row .err {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  bottom: -10px
}

app-transfer-old-member .row .reset {
  position: absolute;
  left: auto;
  right: 0;
  bottom: -27px
}

app-transfer-old-member .btn_group {
  padding: 30px;
  display: flex;
  justify-content: space-around
}

app-transfer-old-member .btn_group button {
  width: 40%;
  height: 45px
}

app-transfer-old-member .cs-zone {
  height: 60px;
  margin: 15px 0
}

app-transfer-old-member .cs-zone li {
  width: 20%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 7px 1px #000;
  cursor: pointer;
  float: left;
  margin: 0 40%;
  border-radius: 12px
}

app-transfer-old-member .cs-zone li img {
  width: 30px;
  height: 30px
}

app-member-board .board-wrap {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative
}

app-member-board .board-wrap.login:after {
  left: unset;
  right: 4px
}

app-member-board .info {
  display: none;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  width: 37.4vw;
  height: 100%;
  border-radius: 1.5vw 0 0 1.5vw
}

app-member-board .info .login_ic {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background: url(resources/sign_in.cc4f96e56a00d761b755.svg) no-repeat 50%;
  background-size: 100%
}

app-member-board .login-info-public {
  display: flex;
  align-items: center
}

app-member-board .login-info-public span {
  font-size: 14px;
  font-weight: 700;
  color: grey
}

app-member-board .login-info-login {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1.33vw 0 2vw;
  background: #f2f3f3;
  width: 37.4vw;
  height: 100%;
  border-radius: 1.5vw 0 0 1.5vw;
  box-sizing: border-box
}

app-member-board .login-info-login li {
  display: flex;
  height: 16px;
  line-height: 20px;
  margin-bottom: 4px
}

app-member-board .login-info-login li:last-child {
  margin-bottom: 0
}

app-member-board .login-info-login .vip-lv {
  height: 20px;
  padding: 0 3px;
  background: #b90b0a;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #b90b0a;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  flex-shrink: 0
}

app-member-board .login-info-login .member-name {
  width: 18vw;
  font-size: .75rem;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

app-member-board .login-info-login .member-amount {
  width: 33.76vw;
  height: 17px;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

app-member-board .operate-btn {
  background: #f8f8f8;
  border-radius: 0 1.5vw 1.5vw 0;
  width: 54.6vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px
}

app-member-board .operate-btn:before {
  content: "";
  height: 60px;
  width: 1px;
  background-color: #e6e6e6
}

app-member-board .btn-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%
}

app-member-board .btn-dot i {
  display: block;
  width: 8vw;
  height: 8vw;
  margin-bottom: 1vw
}

app-member-board .btn-dot i.btn-depo {
  background: url(resources/ope_deposit.601eb9c61121d548678e.svg) no-repeat 50%
}

app-member-board .btn-dot i.btn-tran {
  background: url(resources/ope_transfer.9cb347cc25f86332c122.svg) no-repeat 50%
}

app-member-board .btn-dot i.btn-with {
  background: url(resources/ope_withdrawal.ebebc5416357b4704698.svg) no-repeat 50%
}

app-member-board .btn-dot i.btn-vip {
  background: url(resources/ope_vip.434cb591cf1ce0b150a3.png) no-repeat;
  background-position: 50%;
  background-size: contain
}

app-member-board .btn-dot p {
  font-size: 15px;
  color: grey
}

@media only screen and (max-width:320px) {
  app-member-board .info button {
    width: 98px;
    height: 24px
  }

  app-member-board .operate-btn {
    padding: 0 1%
  }
}

app-announcement .announcement_page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 92%;
  background: #fff;
  margin: 0 auto
}

app-announcement .announcement_page>i {
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url(resources/marquee.dcdb5e6a39b898104e2a.svg) no-repeat;
  background-size: 100%
}

app-announcement .announcement_page .marquee {
  width: 100%;
  line-height: 36px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  box-sizing: border-box
}

app-announcement .announcement_page .marquee pre {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 50s linear infinite
}

@keyframes marquee {
  0% {
    transform: translate(0)
  }

  to {
    transform: translate(-100%)
  }
}

app-ad {
  display: block;
  height: 44vw
}

app-ad .c-container {
  position: relative;
  width: 100%;
  padding-top: 45%;
  background-color: initial;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%
}

app-letter .class {
  background: #fff;
  font-size: 14px
}

app-letter .class a {
  display: inline-block;
  text-align: center;
  height: 41px;
  line-height: 38px;
  width: 50vw
}

app-letter .class a:link {
  font-size: 13px;
  color: #000
}

app-letter .class a.active {
  border-bottom: 2px solid #e11515
}

app-letter .sub_class {
  height: 62px;
  width: 100vw;
  font-size: 13px;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background-color: #f8f8f8
}

app-letter .sub_class span {
  width: 174px;
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  color: #fff;
  background-color: #ccc
}

app-letter .sub_class span.active {
  border-color: #ff6464;
  background: linear-gradient(180deg, #c61515 0, #df1515)
}

app-letter .sub_class span:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px
}

app-letter .sub_class span:nth-child(2) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

app-letter .announce-tabs {
  width: calc(100vw - 20px);
  justify-content: center;
  border-radius: 7px;
  overflow: hidden
}

app-letter .announce-tabs li {
  width: 33%;
  height: 42px;
  line-height: 42px;
  background: #ccc
}

app-letter .announce-tabs li.active {
  border-color: #ff6464;
  background: linear-gradient(180deg, #c61515 0, #df1515)
}

app-letter .radius {
  display: inline-block;
  border: 1px solid #cacaca;
  width: 19px;
  height: 19px;
  border-radius: 50%
}

app-letter .radius.active {
  background-color: #3d4cce
}

app-letter .btn_list {
  justify-content: space-between;
  padding: 16px
}

app-letter .btn_list a {
  display: inline-block;
  width: 82px;
  height: 29px;
  line-height: 26px;
  border: 1px solid #cfa678;
  color: #cfa678;
  font-size: 13px;
  text-align: center;
  font-weight: 900;
  border-radius: 5px
}

app-letter .btn_list a:active {
  opacity: .8
}

app-letter .btn_list .all {
  display: inline-flex;
  align-items: center;
  color: grey
}

app-letter .btn_list .all .radio {
  margin-right: 10px
}

app-letter .modify a:first-child {
  border-color: #4cb816;
  color: #4cb816;
  margin-right: 5px
}

app-letter .modify a:nth-child(2) {
  border-color: #ed1c24;
  color: #ed1c24
}

app-letter .list li .msg,
app-letter .list li .title,
app-letter .whiteSpace {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px
}

app-letter .list {
  height: calc(100vh - 45px - 47px - 41px - 62px);
  overflow: scroll
}

app-letter .list li {
  padding: 15px;
  align-items: center;
  display: flex;
  background: linear-gradient(180deg, #fff 0, #f2f2f2);
  width: 90%;
  margin: 0 auto 15px;
  border: 1px solid #e6e6e6;
  border-radius: 5px
}

app-letter .list li.read {
  background-color: #e6e6e6;
  box-shadow: none;
  border-color: #e6e6e6
}

app-letter .list li.read .msg,
app-letter .list li.read .title {
  color: #929292
}

app-letter .list li div {
  width: calc(100vw - 47px)
}

app-letter .list li .radio {
  width: 19px;
  height: 19px
}

app-letter .list li .radio input {
  vertical-align: middle;
  padding: 0
}

app-letter .list li .title {
  padding-left: 10px;
  width: calc(100vw - 146px);
  font-size: 16px;
  color: #666
}

app-letter .list li .msg {
  padding-left: 10px;
  width: calc(100vw - 96px);
  color: #595757
}

app-letter .list li .date {
  width: 94px;
  padding-left: 5px;
  color: #999;
  font-size: 13px;
  float: right
}

app-letter input[type=checkbox] {
  position: relative
}

app-letter input[type=checkbox]:after,
app-letter input[type=checkbox]:checked:before {
  display: block;
  content: "";
  width: 19px;
  height: 19px;
  position: relative;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  background: #fff;
  border-radius: 50%;
  border: 2px solid #ececee
}

app-letter input[type=checkbox]:checked:after {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  background: #3d4cce;
  border-radius: 50px
}

app-pagination-box .pagination-out {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw
}

app-pagination-box .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93%
}

app-pagination-box .pagination li {
  width: 7px;
  height: 7px;
  margin: 0 10px 0 0;
  background: #e3d9d0;
  border-radius: 8px
}

app-pagination-box .pagination li:last-child {
  margin: 0
}

app-pagination-box .pagination li.cur {
  background: #bb8c60
}

app-bonus-log .scroll-wrap {
  height: calc(100vh - 45px - 47px);
  overflow-x: hidden;
  background: #fff;
  padding: 11px 0 0
}

app-bonus-log .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-bonus-log .white-bg:last-child {
  margin: 0
}

app-bonus-log .operate {
  padding: 13px 14px
}

app-bonus-log .operate .helf {
  width: 50%
}

app-bonus-log .operate .helf p {
  margin: 0 0 5px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000
}

app-bonus-log .operate .helf button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 44.27vw;
  height: 11.2vw;
  padding: 0 15px 0 13px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 3px
}

app-bonus-log .operate .helf button i {
  width: 9px;
  height: 4px;
  background: url(resources/select.735c6d9475a1ec549a44.svg) no-repeat
}

app-bonus-log form {
  width: 92.27vw
}

app-bonus-log form li {
  width: 100%;
  margin-bottom: 20px
}

app-bonus-log form li>p {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  margin: 10px 0
}

app-bonus-log form li:last-child {
  margin-bottom: 0
}

app-bonus-log form .type-selector {
  width: 100%;
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  color: #000
}

app-bonus-log form .date-selector {
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 3px
}

app-bonus-log form .date-selector>input {
  width: 43%;
  border: none !important;
  padding: 0
}

app-bonus-log form .date-selector>span {
  width: 5%;
  line-height: 42px;
  text-align: center
}

app-bonus-log form .date-selector>div {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0
}

app-bonus-log form .date-selector>div i {
  width: 20px;
  height: 100%;
  background: url(resources/date.f99961c7d91012d53e9d.svg) no-repeat;
  background-position: 50%;
  background-size: contain
}

app-bonus-log form .date-box {
  display: flex;
  justify-content: center;
  border-radius: 25px
}

app-bonus-log form .date-box button {
  width: 25%;
  height: 38px;
  font-size: 15px;
  font-weight: 700;
  color: grey;
  border-radius: 0
}

app-bonus-log form .date-box button:first-child {
  border-radius: 3px 0 0 3px
}

app-bonus-log form .date-box button:last-child {
  border-radius: 0 3px 3px 0
}

app-bonus-log form .date-box app-date-selector .btn-group button.active,
app-bonus-log form .date-box app-member-center .user .info button.innerBtn,
app-bonus-log form .date-box app-quest-detail button.applyBtn,
app-bonus-log form .date-box button.orange_btn,
app-date-selector .btn-group app-bonus-log form .date-box button.active,
app-member-center .user .info app-bonus-log form .date-box button.innerBtn,
app-quest-detail app-bonus-log form .date-box button.applyBtn {
  color: #fff
}

app-bonus-log form .btn-confirm {
  width: 100%;
  height: 41px
}

app-bonus-log .total {
  display: flex;
  align-items: center;
  padding: 0 0 0 13px;
  margin: 0 auto;
  border: 1px solid #b39b80;
  border-radius: 5px;
  background: #f9f1e4;
  font-size: 14px;
  letter-spacing: 1px;
  color: #94733e
}

app-bonus-log .total i {
  width: 4.27vw;
  height: 4.27vw;
  margin: 0 10px 0 0;
  background: url(resources/marvel_orange.2a6a461f934a293d7771.svg) no-repeat 50%
}

app-bonus-log .logs {
  padding: 10px 14px
}

app-bonus-log .logs .cnt,
app-bonus-log .logs>li {
  margin: 0 0 10px
}

app-bonus-log .logs .cnt .result {
  color: red
}

app-bonus-log .logs .cnt .title {
  font-size: 21px;
  padding: 13px 20px;
  letter-spacing: 1px
}

app-bonus-log .logs .cnt .data,
app-bonus-log .logs .cnt .detail-data {
  margin: 0 0 10px;
  font-size: 13px
}

app-bonus-log .logs .cnt .data>li,
app-bonus-log .logs .cnt .detail-data>li {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  padding: 6px 20px
}

app-bonus-log .logs .cnt .data>li p:first-child,
app-bonus-log .logs .cnt .detail-data>li p:first-child {
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-bonus-log .logs .cnt .detail-data {
  border-top: 1px solid #b49c64;
  padding-top: 8px
}

app-bonus-log .logs .cnt button {
  width: 100%;
  height: 35px;
  font-size: 13px;
  letter-spacing: 1px;
  background: none;
  border-top: 1px solid #b8a373
}

app-bonus-log .logs .cnt button i {
  display: inline-block;
  width: 9px;
  height: 16px;
  position: relative;
  top: 3px;
  left: 12px;
  transition: transform .5s ease 0s;
  background: url(resources/arrow_b.072b5e54d2c5ef52de7a.png) no-repeat;
  background-size: 100%;
  transform: rotate(-90deg)
}

app-bonus-log .logs .cnt button i.isOpen {
  transform: rotate(90deg)
}

app-bonus-log .logs .detail-wrap {
  height: 0;
  overflow: auto;
  transition: height .5s;
  background: #fffbf5
}

app-bonus-log .logs .detail-wrap div {
  margin-bottom: 7px
}

app-bonus-log .logs .detail-wrap .title {
  display: flex;
  justify-content: space-between;
  align-items: center
}

app-bonus-log .logs .detail-wrap .date {
  flex: 1;
  font-size: 14px;
  text-align: right;
  color: #4d4d4d
}

app-bonus-log .logs .detail-wrap.isOpen {
  height: 357px;
  padding: 12px 8px
}

app-bonus-log .no-data {
  text-align: center
}

app-bonus-log app-select-alert .dialog ul li:first-child {
  width: 85.5vw
}

@media only screen and (max-width:320px) {
  app-bonus-log .logs .detail-wrap .title {
    font-size: 18px
  }

  app-bonus-log .logs .detail-wrap .date {
    font-size: 12px
  }
}

app-bonus-log .empty-data {
  font-size: 14px;
  font-weight: 700;
  color: #999;
  display: flex;
  justify-content: center;
  padding: 80px 80px 100px
}

app-bonus-log .click {
  color: #557bff;
  text-decoration: underline
}

app-bonus-log .imgbox {
  position: relative
}

app-bonus-log .imgbox .imgMask {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: absolute;
  top: 0;
  background-color: hsla(0, 0%, 100%, .5);
  z-index: 9
}

app-bonus-log .imgbox .imgMask:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 8px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 26px);
  border-color: #000 transparent;
  border-style: solid;
  border-width: 4px;
  animation: imgMask 1.2s linear infinite
}

@keyframes imgMask {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

app-bonus-log .boom {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  z-index: 999
}

app-bonus-log .boom .panel {
  width: 89vw;
  font-weight: 700;
  background: #fff;
  border-radius: 3px;
  padding: 16px 14px;
  position: relative
}

app-bonus-log .boom .panel>.header {
  padding: 0 0 10px;
  border-bottom: 1px solid #e11515
}

app-bonus-log .boom .panel .header {
  position: relative;
  font-size: 20px;
  line-height: 83px;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px
}

app-bonus-log .boom .panel .header p {
  line-height: 1
}

app-bonus-log .boom .panel .title {
  letter-spacing: 2px;
  color: #1a1a1a;
  margin: 0 0 14px
}

app-bonus-log .boom .panel .close-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(resources/close2.192c55493635aad45113.svg) no-repeat 50%
}

app-bonus-log .boom .panel .cnt {
  max-height: 500px;
  margin-bottom: 13px;
  padding: 20px 5px 0;
  font-size: 14px;
  background: #ffe5e5;
  overflow: scroll
}

app-bonus-log .boom .panel .table {
  font-size: 13px;
  padding-bottom: 20px
}

app-bonus-log .boom .panel .table ul {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
  margin: 0 0 10px
}

app-bonus-log .boom .panel .table ul li {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  margin: initial
}

app-bonus-log .boom .panel .table ul li.wPs {
  display: block;
  height: auto;
  padding: 10px 14px
}

app-bonus-log .boom .panel .table ul li.wPs>div {
  padding: 10px 12px;
  background: #f5f5f5
}

app-bonus-log .boom .panel .table ul li.wPs .ps-cnt {
  margin: 10px 0 0;
  color: grey;
  line-height: 1.5
}

app-bonus-log .boom .panel .table ul li p {
  font-size: 14px;
  margin: initial;
  color: #4d4d4d
}

app-bonus-log .boom .panel .table ul li p.wShift {
  color: #fc4d14
}

app-bonus-log .boom .panel .table ul li p.wMoney {
  color: #42a600
}

app-bonus-log .boom .panel .table ul li:not(:first-of-type) p:first-child {
  color: #383838;
  letter-spacing: 1px
}

app-bonus-log .boom .panel .table ul .header {
  justify-content: start;
  justify-content: flex-start;
  border-radius: 6px 6px 0 0
}

app-bonus-log .boom .panel .table ul .header p {
  color: #000;
  font-size: 21px
}

app-bonus-log .friendWrap {
  width: 100%;
  height: calc(100vh - 95px);
  background: #f2f3f3;
  overflow-y: auto;
  padding-top: 10px;
  box-sizing: border-box
}

app-bonus-log .friendWrap .searchContent {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 13px 14px;
  background: #fff
}

app-bonus-log .friendWrap .searchContent .top {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap
}

app-bonus-log .friendWrap .searchContent .top .helf {
  width: 50%
}

app-bonus-log .friendWrap .searchContent .top .helf p {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #000
}

app-bonus-log .friendWrap .searchContent .top .helf button {
  width: 44vw;
  height: 42px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  color: #000;
  font-size: 16px;
  padding: 0 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700
}

app-bonus-log .friendWrap .searchContent .top .helf button i {
  display: block;
  width: 0;
  height: 0;
  border-color: #e11515 transparent;
  border-style: solid;
  border-width: 6px 4px 0
}

app-bonus-log .friendWrap .searchContent .top .full {
  width: 100%
}

app-bonus-log .friendWrap .searchContent .top .full p {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #000
}

app-bonus-log .friendWrap .searchContent .top .full .inputBox {
  width: 100%;
  height: 42px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #000;
  font-size: 16px;
  font-weight: 700
}

app-bonus-log .friendWrap .searchContent .top .full .inputBox input {
  width: auto;
  height: 100%;
  border: none;
  background: none;
  color: #000;
  font-size: 14px;
  font-weight: 700
}

app-bonus-log .friendWrap .searchContent .top .full .selectBox {
  width: 100%;
  height: auto
}

app-bonus-log .friendWrap .searchContent .top .full .selectBox select {
  width: 100%;
  height: 42px;
  background-color: #fff;
  border-radius: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  background-image: linear-gradient(45deg, transparent 50%, #e11515 0), linear-gradient(135deg, #e11515 50%, transparent 0);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid #e6e6e6;
  padding-left: 15px
}

app-bonus-log .friendWrap .searchContent .date {
  width: 100%;
  height: auto;
  display: flex;
  margin: 20px 0
}

app-bonus-log .friendWrap .searchContent .date app-date-selector {
  width: 100%
}

app-bonus-log .friendWrap .searchContent .date button {
  width: 25%;
  height: 38px;
  background: linear-gradient(#fff 40%, #f4f4f4);
  font-size: 4vw;
  font-weight: 700;
  color: grey;
  border: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center
}

app-bonus-log .friendWrap .searchContent .date button.active,
app-bonus-log .friendWrap .searchContent .date button:active {
  background: linear-gradient(180deg, #c61515 0, #df1515);
  color: #fff;
  border-color: #b90b0a
}

app-bonus-log .friendWrap .searchContent .date button:first-of-type {
  border-radius: 5px 0 0 5px
}

app-bonus-log .friendWrap .searchContent .date button:last-child {
  border-radius: 0 5px 5px 0
}

app-bonus-log .friendWrap .searchContent .check {
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d);
  border: 1px solid #b90b0a;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 1vw;
  letter-spacing: 1px
}

app-bonus-log .friendWrap .searchContent .check.active,
app-bonus-log .friendWrap .searchContent .check:active {
  background: linear-gradient(180deg, #b90b0a 0, #ea232d)
}

app-bonus-log .friendWrap .list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px 14px
}

app-bonus-log .friendWrap .list .noData {
  display: none;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 80px;
  color: #999;
  font-weight: 700;
  text-align: center;
  font-size: 14px
}

app-bonus-log .friendWrap .list .noData.display {
  display: block
}

app-bonus-log .friendWrap .list .recordBox {
  display: none;
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  background: #fff;
  margin-bottom: 10px
}

app-bonus-log .friendWrap .list .recordBox.display {
  display: block
}

app-bonus-log .friendWrap .list .recordBox .title {
  width: 100%;
  height: 38px;
  border-bottom: 1px solid #e11515;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 18px
}

app-bonus-log .friendWrap .list .recordBox .title .readMore {
  font-size: 13px;
  font-weight: 700;
  background: none;
  color: #b90b0a;
  border: 1px solid #b90b0a;
  border-radius: 3px;
  padding: 1px 5px
}

app-bonus-log .friendWrap .list .recordBox ul {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 18px
}

app-bonus-log .friendWrap .list .recordBox ul li {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  font-size: 14px;
  font-weight: 700
}

app-bonus-log .friendWrap .list .recordBox ul li p {
  font-size: 13px
}

app-bonus-log .friendWrap .list .recordBox ul li p.num {
  color: #666
}

app-bonus-log .friendWrap .list .recordBox ul li p.num.readMore {
  text-decoration: underline;
  color: #009be4
}

app-bonus-log .friendWrap .list .recInfo {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  margin-bottom: 10px
}

app-bonus-log .friendWrap .list .recInfo .lineBox {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 6px 70px 6px 16px;
  box-sizing: border-box
}

app-bonus-log .friendWrap .list .recInfo .lineBox p {
  width: 60%;
  font-size: 14px;
  font-weight: 700;
  text-align: right
}

app-bonus-log .friendWrap .list .recInfo .lineBox .copy {
  width: auto;
  height: 30px;
  position: absolute;
  right: 16px;
  top: 53%;
  padding: 1px 5px;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #b90b0a;
  font-size: 13px;
  font-weight: 700;
  color: #b90b0a;
  border-radius: 3px
}

app-bonus-log .friendWrap .list .recInfo .lineBox img {
  width: 18vh;
  height: 18vh;
  object-fit: contain
}

app-bonus-log .friendWrap .list .recInfo .lineBox.sp {
  justify-content: space-between;
  padding-right: 16px
}

app-bonus-log .friendWrap .list .recInfo label {
  width: 65px;
  height: auto;
  text-align: left;
  line-height: 30px;
  display: inline;
  margin-right: 50px;
  font-size: 14px;
  font-weight: 700
}

app-bonus-log .friendWrap .list .recInfo input {
  width: 60%;
  height: auto
}

app-bonus-log .friendWrap .list .eventInfo {
  height: auto;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  padding: 30px 10px
}

app-bonus-log .friendWrap .list .eventInfo .mainTitle {
  font-size: 20px;
  color: #e11515;
  font-weight: 700;
  margin-bottom: 20px
}

app-bonus-log .friendWrap .list .eventInfo .textBox {
  width: 100%;
  height: auto;
  margin-bottom: 20px
}

app-bonus-log .friendWrap .list .eventInfo .textBox .subTitle {
  font-size: 16px;
  color: #e11515;
  font-weight: 700;
  margin-bottom: 10px
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 10px
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content:last-child {
  margin: 0
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content span {
  color: #e11515;
  font-size: 14px;
  font-weight: 700
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content ul {
  margin-left: 15px
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content ul li {
  list-style: decimal;
  line-height: 18px;
  margin-bottom: 10px
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content ul li:last-child {
  margin: 0
}

app-bonus-log .friendWrap .list .eventInfo .textBox .content .remind {
  color: #e11515;
  font-size: 17px;
  font-weight: 700;
  margin-top: 10px
}

app-bonus-log .filter {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 999
}

app-bonus-log .filter,
app-bonus-log .filter .title {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex
}

app-bonus-log .filter .title {
  height: 50px;
  font-size: 21px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
  background: #e11515;
  position: relative;
  border-radius: 1.5vw 1.5vw 0 0
}

app-bonus-log .filter .title i {
  width: 4.73vw;
  height: 4.73vw;
  position: absolute;
  right: 5.38vw;
  top: 50%;
  transform: translateY(-50%)
}

app-bonus-log .filter .pointWindow {
  width: 92.27vw;
  height: auto;
  background: #fff;
  border-radius: 1.5vw;
  display: block
}

app-bonus-log .filter .pointWindow .content {
  width: 100%;
  height: auto;
  max-height: 50vh;
  padding: 24px 16px;
  box-sizing: border-box;
  overflow-y: auto
}

app-bonus-log .filter .pointWindow .content table {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px #ccc
}

app-bonus-log .filter .pointWindow .content table tr {
  border-bottom: 1px solid #ccc
}

app-bonus-log .filter .pointWindow .content table tr:first-child {
  border-bottom: 1px solid #e11515
}

app-bonus-log .filter .pointWindow .content table tr:last-child {
  border: none
}

app-bonus-log .filter .pointWindow .content table tr th {
  vertical-align: middle;
  height: 40px;
  border-right: 1px solid #ccc
}

app-bonus-log .filter .pointWindow .content table tr th:last-child {
  border: none
}

app-bonus-log .filter .pointWindow .content table tr th p {
  font-size: 16px;
  font-weight: 700;
  color: #000
}

app-bonus-log .filter .pointWindow .content table tr td {
  width: 30%;
  vertical-align: middle;
  height: 40px;
  border-right: 1px solid #ccc
}

app-bonus-log .filter .pointWindow .content table tr td:last-child {
  border: none
}

app-bonus-log .filter .pointWindow .content table tr td p {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: center
}

app-bonus-log .filter .pointWindow .content .noData {
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh
}

app-bonus-log .jumpWindow .title .close {
  background: url(resources/close.d7763b665737ab56287e.svg) no-repeat;
  background-size: 100%
}

app-letter-detail .main {
  height: calc(100vh - 120px);
  width: 90vw;
  overflow: scroll;
  padding: 10vw 15px;
  background: #fff;
  margin: 15px auto;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 #999;
  position: relative
}

app-letter-detail .main:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vw;
  background: #e11515;
  border-radius: 5px 5px 0 0
}

app-letter-detail .title {
  font-size: 18px;
  line-height: 27px;
  color: #000
}

app-letter-detail .date {
  font-size: 14px;
  color: #999
}

app-letter-detail .msg {
  margin-top: 19px;
  font-size: 17px;
  color: #666
}

app-letter-detail pre {
  white-space: pre-wrap
}

app-slot-center .slot-wrap {
  display: flex;
  flex-wrap: wrap
}

app-slot-center .slot-header {
  width: 100vw;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4%
}

app-slot-center .slot-header .tags {
  overflow: auto
}

app-slot-center .slot-header ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 5%
}

app-slot-center .slot-header ul>li {
  font-size: 12px;
  font-weight: 700;
  color: #9a9b9b;
  padding: 5px 1.33vw;
  display: flex;
  align-items: center;
  flex-shrink: 0
}

app-slot-center .slot-header ul i {
  width: 11px;
  height: 11px;
  margin-right: 5px
}

app-slot-center .slot-header ul .all i {
  background: url(resources/all.ffba60c068b4af362832.svg) no-repeat 50%
}

app-slot-center .slot-header ul .all.active i {
  background: url(resources/all2.cc1160de01c11384779e.svg) no-repeat 50%
}

app-slot-center .slot-header ul .hot i {
  background: url(resources/popular.4aaf632b5a1f65b466d7.svg) no-repeat 50%
}

app-slot-center .slot-header ul .hot.active i {
  background: url(resources/popular2.9a8a090f8e3189af8501.svg) no-repeat 50%
}

app-slot-center .slot-header ul .fav i {
  background: url(resources/favorite.adebdf68f600f91a8df0.svg) no-repeat 50%
}

app-slot-center .slot-header ul .fav.active i {
  background: url(resources/favorite2.0ae4b5755691d0dbf376.svg) no-repeat 50%
}

app-slot-center .slot-header ul li.active {
  color: #e11515;
  border-bottom: 2px solid
}

app-slot-center .slot-header .search-box {
  height: 25px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #9a9b9b;
  background-color: #f2f3f3;
  border: 2px solid #e6e6e6;
  padding: 4px 10px 4px 20px;
  border-radius: 25px
}

app-slot-center .slot-header .search-box>i {
  width: 12px;
  height: 12px;
  background: url(resources/search.788b4bcfb45156855984.svg) no-repeat 50%
}

app-slot-center .slot-header .search-box>input {
  width: 100%;
  background-color: #f2f3f3;
  padding-left: 10px;
  border: none
}

app-slot-center .game-list {
  width: calc(100vw - (13px * 2));
  height: calc(100vh - 173px);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 auto;
  overflow-y: scroll
}

app-slot-center .game-contain {
  width: 47%;
  min-height: 140px;
  flex-shrink: 0;
  border: 1px solid #b3b3b3;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 1vw 8px;
  position: relative
}

app-slot-center .game-contain .pic {
  height: 106px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  background-color: #c7a16e
}

app-slot-center .game-contain>p {
  width: 100%;
  height: 30px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 700;
  color: #3e3a39;
  display: flex;
  justify-content: space-between;
  align-items: center
}

app-slot-center .game-contain>p span {
  width: calc(100% - 15px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

app-slot-center .game-contain .btnGroup {
  width: 100%;
  height: 32px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly
}

app-slot-center .game-contain .btnGroup button {
  width: 20vw;
  height: 32px;
  background: linear-gradient(0deg, #384c79 0, #2b87e6);
  border: 1px solid #0f4eb7;
  border-radius: 1vw;
  color: #fff;
  font-weight: 700;
  font-size: 3vw;
  margin-bottom: 5px
}

app-slot-center .game-contain .btnGroup button:first-child {
  background: linear-gradient(0deg, #8c1212 0, #ff4a4a);
  border: 1px solid #dc0000;
  border-radius: 1vw;
  color: #fff;
  font-weight: 700;
  font-size: 3vw
}

app-slot-center .favor-icon {
  width: 15px;
  height: 15px;
  background: url(resources/love1.bb3abe56d6d32d4f4720.svg) no-repeat 50%;
  background-size: contain
}

app-slot-center .favor-icon.active {
  background: url(resources/love2.41b940076ac391db8e33.svg) no-repeat 50%
}

app-popup-transfer .dialog {
  width: 91.94vw
}

app-popup-transfer form {
  padding: 4vw 6vw;
  max-height: calc(90vh - 10.61vw - 11.46vw);
  overflow: auto
}

app-popup-transfer form input,
app-popup-transfer form select {
  width: 100%;
  height: 9.86vw
}

app-popup-transfer form .form-row {
  margin: 0 0 4vw
}

app-popup-transfer form .form-row .item {
  margin: 0 6vw 0 0;
  flex-shrink: 0
}

app-popup-transfer form .form-row.numBtnBox {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1vw
}

app-popup-transfer form .form-row.numBtnBox button {
  width: auto;
  height: 35px;
  color: #cfa678;
  background: transparent;
  border: 1px solid #cfa678;
  border-radius: 3px
}

app-popup-transfer form .form-row:nth-child(5) {
  margin-bottom: 0
}

app-popup-transfer form .item,
app-popup-transfer form .item_text {
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  color: #333
}

app-popup-transfer form .item .time,
app-popup-transfer form .item_text .time {
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 45vw;
  font-size: 13px;
  letter-spacing: 0;
  color: #999
}

app-popup-transfer form .item_text {
  font-size: 18px
}

app-popup-transfer .transferConfirm {
  justify-content: flex-end
}

app-popup-transfer .transferConfirm button {
  width: 100%;
  height: 11.2vw
}

app-popup-transfer .goGame {
  width: calc(100% - 12vw);
  height: 11.46vw;
  max-height: 10vh;
  margin: 4vw 6vw
}

@media only screen and (max-width:320px) {
  app-popup-transfer form .form-row .item {
    margin: 0 12px 0 0
  }
}

app-popup-transfer .locked {
  font-size: 14px;
  margin: 10px 0 0;
  color: #f15a24;
  padding: 10px 0
}

app-vip .white-bg {
  background: #fff;
  padding: 0 0 20px
}

app-vip .medal {
  background: url(resources/medal_1.4f58f0414f3df64a7a63.png) no-repeat 50%
}

app-vip .medal.lv-1 {
  background-image: url(resources/medal_1.4f58f0414f3df64a7a63.png)
}

app-vip .medal.lv-2 {
  background-image: url(resources/medal_2.be5d87833a1447a95cb6.png)
}

app-vip .medal.lv-3 {
  background-image: url(resources/medal_3.2ba3bae32a4dfc55b5af.png)
}

app-vip .medal.lv-4 {
  background-image: url(resources/medal_4.cd3954da0377c3ba5851.png)
}

app-vip .medal.lv-5 {
  background-image: url(resources/medal_5.d65bb0d887bdc84326d8.png)
}

app-vip .medal.lv-6 {
  background-image: url(resources/medal_6.4aed577ad5e7df377022.png)
}

app-vip .medal.lv-7 {
  background-image: url(resources/medal_7.3fd14caf044b28917772.png)
}

app-vip .board {
  width: 100vw;
  padding: 0 4vw 1vw;
  margin: 0 0 6.66vw;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 0 13px 2px rgba(0, 0, 0, .2);
  font-weight: 700;
  background: #fff
}

app-vip .board .content {
  position: relative;
  padding-top: 12px;
  width: 100%;
  height: auto;
  margin-bottom: 13.33vw
}

app-vip .board .content .medal {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.93vw;
  height: 30.13vw;
  padding: 6vw 0 0;
  background-size: contain
}

app-vip .board .content .account {
  font-size: 16px;
  margin: 0 0 10px;
  letter-spacing: 2px;
  color: #333
}

app-vip .board .content .title {
  display: flex;
  margin: 0 0 14px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #333
}

app-vip .board .content .text {
  display: flex;
  margin: 0 0 9px;
  font-size: 13px;
  letter-spacing: 1px;
  color: grey
}

app-vip .board .content .text p {
  margin: 0 0 0 8px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-vip .board .content .btn {
  width: auto;
  height: 28px;
  background: #ce1515;
  border-radius: 25px;
  color: #fff;
  font-size: 3.4vw;
  font-weight: 700;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

app-vip .board .experience-bar .level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 9px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-vip .board .experience-bar .level .cur {
  font-size: 14px;
  letter-spacing: 1px;
  color: #e11515
}

app-vip .board .experience-bar .bar {
  height: 8px;
  background: #fff;
  border-radius: 4px
}

app-vip .board .experience-bar .bar .cur {
  position: relative;
  width: 50%;
  max-width: 100%;
  min-width: 2%;
  height: 8px;
  border-radius: 4px;
  background: #e11515
}

app-vip .board .experience-bar .bar .cur i {
  width: 11.73vw;
  height: 5.06vw
}

app-vip .board .experience-bar .bar .cur .dialog {
  position: absolute;
  top: -28px;
  right: -20px
}

app-vip .board .experience-bar .bar .cur p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 3px;
  background: #e11515;
  font-size: 13px;
  letter-spacing: 1px;
  color: #fff
}

app-vip .board .experience-bar .bar .cur p .arrow {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: #e11515;
  position: absolute;
  bottom: -14px;
  left: 16px
}

app-vip .board .btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6.66vw 0 0
}

app-vip .board .btn-group button {
  width: 43.2vw;
  height: 11.2vw
}

app-vip .level-box {
  position: relative;
  width: calc(100% - 8vw);
  height: 5.86vw;
  margin: 0 auto;
  overflow: hidden
}

app-vip .level-box div,
app-vip .level-box ul {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%
}

app-vip .level-box div hr {
  width: 100%;
  border: 1px solid #ccc
}

app-vip .level-box ul {
  overflow-x: scroll;
  z-index: 2
}

app-vip .level-box ul::-webkit-scrollbar {
  display: none
}

app-vip .level-box ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 10.66vw;
  height: 5.33vw;
  margin: 0 10.99vw 0 0;
  background: #ccc;
  border-radius: 3vw;
  font-size: 12px;
  letter-spacing: 0;
  color: #fff
}

app-vip .level-box ul .cur {
  background: #e11515
}

app-vip .cards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47.46vw;
  padding: 0 1vw;
  margin: 5.33vw 0 0
}

app-vip .cards i {
  width: 2.67vw;
  height: 5.33vw;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%
}

app-vip .cards i:nth-child(3) {
  transform: rotate(180deg)
}

app-vip .cards .content {
  width: 88.27vw;
  height: 47.47vw;
  overflow: hidden
}

app-vip .cards .content ul {
  display: flex;
  align-items: center;
  transition: transform .5s ease 0s
}

app-vip .cards .content li {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex-shrink: 0;
  width: 88.27vw;
  height: 47.47vw;
  padding: 0 6.67vw;
  background: url(resources/vip_card.0b5202e7d7a235f3b498.png) no-repeat 50%;
  background-size: contain !important;
  border-radius: 10px
}

app-vip .cards .content li .medal {
  position: absolute;
  top: 0;
  left: 5.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.47vw;
  height: 25.87vw;
  padding: 6vw 0 0;
  background-size: contain
}

app-vip .cards .content li .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 6.4vw;
  font-size: 14px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 1px 2px 3px #000
}

app-vip .cards .content li .text p {
  margin: 2.4vw 0 0;
  font-size: 18px;
  letter-spacing: 0
}

app-vip .cards .content li.cur {
  background: linear-gradient(180deg, #d3b47b 0, #b18252)
}

app-vip .cards .content li.cur .text {
  color: #fff5e6
}

app-vip .cards .content li.cur .text p {
  color: #fff
}

app-vip .cards .muti-content {
  color: #e6e6e6
}

app-vip .cards .muti-content .text {
  margin: 0 0 15px !important;
  text-align: center
}

app-vip .cards .muti-content .num {
  margin: 0 0 15px;
  text-align: center
}

app-vip .enjoy {
  padding: 15px 12px;
  margin: 10px 0
}

app-vip .enjoy .enjoy-title {
  margin: 0 0 15px;
  font-size: 17px;
  letter-spacing: 2px;
  color: #000
}

app-vip .enjoy ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 44vw
}

app-vip .enjoy ul li {
  width: 45.33vw;
  height: 13.6vw;
  min-height: 51px;
  padding: 2px 0 0 12px;
  margin: 0 1.6vw 1.6vw 0;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: 0;
  color: #595757
}

app-vip .enjoy ul li:nth-child(2n) {
  margin: 0 0 1.6vw
}

app-vip .enjoy ul li p {
  font-size: 22px;
  letter-spacing: 0;
  color: #e11515
}

app-vip .detail {
  padding: 0
}

app-vip .detail p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  font-size: 15px;
  letter-spacing: 2px;
  color: #4d4d4d;
  border-radius: 5px;
  margin: 0 auto
}

app-vip .detail p i {
  width: 2.67vw;
  height: 5.33vw;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%;
  transform: rotate(180deg)
}

app-quest-center .type-selector {
  width: 100vw;
  overflow: hidden;
  overflow-x: scroll
}

app-quest-center .nav {
  font-size: 22px;
  font-weight: 700;
  color: #848484;
  display: flex
}

app-quest-center .nav li {
  width: 22.4vw;
  height: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0
}

app-quest-center .nav li.active {
  color: #231815
}

app-quest-center .nav li.active:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #e11515;
  position: absolute;
  left: 0;
  bottom: 0
}

app-quest-center .nav li>i {
  width: 25px;
  height: 25px;
  margin-bottom: 5px
}

app-quest-center .nav li>span {
  font-size: 3.5vw;
  font-weight: 700
}

app-quest-center .nav li.limited i {
  background: url(resources/limited.0a9424a13b0115e7fe00.svg) no-repeat 50%
}

app-quest-center .nav li.newbie i {
  background: url(resources/newbie.a13b4e743833b8fa465b.svg) no-repeat 50%
}

app-quest-center .nav li.daily i {
  background: url(resources/daily.0ac902d6ab9d64b9a40e.svg) no-repeat 50%
}

app-quest-center .nav li.period i {
  background: url(resources/period.1fd721bdb743632eb254.svg) no-repeat 50%
}

app-quest-center .quest-list {
  width: 100vw;
  height: calc(100vh - 45px - 72px - 47px - 10px);
  overflow-y: scroll;
  padding: 10px 13px 0 14px;
  background-color: #f2f3f3
}

app-quest-center .quest-list ul {
  display: flex;
  flex-wrap: wrap
}

app-quest-center .quest-list li {
  width: 100%;
  margin-bottom: 12px
}

app-quest-center .quest-box {
  flex-shrink: 0;
  background-color: #fff;
  box-shadow: 0 0 13px 5px #dedede
}

app-quest-center .quest-cover {
  min-height: 100px;
  padding: 5px
}

app-quest-center .quest-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px 5px 0 0
}

app-quest-center .quest-btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 0 0 5px 5px
}

app-quest-center .quest-btn>button {
  width: 82px;
  min-height: 21px
}

app-quest-center .quest-btn>button:first-child {
  margin-right: 7px
}

app-quest-center .btn-check {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #9ddbec 0, #0282cc 50%, #82aeeb);
  border: 1px solid #0282cc;
  border-radius: 3px
}

app-quest-center .btn-check:active {
  background: linear-gradient(0deg, #82aeeb 0, #0282cc 50%, #9ddbec)
}

app-quest-detail .quest-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 15px
}

app-quest-detail .quest-cover {
  padding: 5px
}

app-quest-detail .quest-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px
}

app-quest-detail .sub-title {
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-size: 16px;
  font-weight: 700;
  color: #9c8018;
  text-align: center;
  margin-bottom: 10px
}

app-quest-detail .detail-info {
  color: #4d4d4d
}

app-quest-detail .detail-info img {
  max-width: 100%
}

app-quest-detail .quest-info {
  width: 94.13vw;
  padding: 10px 15px;
  margin-top: 10px;
  box-shadow: 0 0 5px 0 hsla(0, 0%, 78.4%, .5019607843137255)
}

app-quest-detail .quest-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0
}

app-quest-detail .btn-buy {
  width: 47.73vw;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #fff
}

app-quest-detail .detail-info .ql-align-center {
  text-align: center
}

app-quest-detail .detail-info .ql-align-right {
  text-align: right
}

app-quest-detail .detail-info .ql-align-justify {
  text-align: justify
}

app-quest-detail .detail-info blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px
}

app-quest-detail .detail-info ol {
  list-style: decimal
}

app-quest-detail .detail-info ul {
  list-style: disc
}

app-quest-detail .detail-info h1 {
  font-size: 2em;
  font-weight: 700
}

app-quest-detail .detail-info h2 {
  font-size: 1.5em;
  font-weight: 700
}

app-quest-detail .detail-info h3 {
  font-size: 1.17em;
  font-weight: 700
}

app-quest-detail .detail-info h5 {
  font-size: .83em;
  font-weight: 700
}

app-quest-detail .detail-info h6 {
  font-size: .67em
}

app-quest-detail .detail-info strong {
  font-weight: 700
}

app-quest-detail .detail-info em {
  font-style: italic
}

app-quest-detail .detail-info a {
  color: #06c;
  text-decoration: underline
}

app-quest-detail .detail-info p {
  color: #4d4d4d
}

app-quest-detail .applyBtn {
  width: 80vw;
  height: 42px;
  margin: 5vw 0;
  letter-spacing: 1px
}

@media only screen and (max-width:320px) {
  app-quest-detail .quest-condition>:first-child {
    font-size: 13px
  }
}

app-popup-login .dialog {
  width: 87.2vw;
  padding: 0 0 16vw
}

app-popup-login .dialog .title {
  height: 15vw
}

app-popup-login .dialog .title .icon {
  width: 8.6vw;
  height: 9vw;
  margin: 0 16px 0 0;
  background: url(resources/loginIC.7e5137ed468523719fef.svg) no-repeat 50%;
  background-size: 96%
}

app-popup-login input {
  width: 77.6vw;
  height: 9.87vw
}

app-popup-login form {
  display: flex;
  flex-direction: column;
  align-items: center
}

app-popup-login form label {
  position: relative
}

app-popup-login form label .err {
  position: absolute;
  bottom: -19px;
  left: 0
}

app-popup-login form label:first-child {
  margin: 11.73vw 0 8vw
}

app-popup-login form .forget {
  display: flex;
  justify-content: flex-end;
  width: 77.6vw;
  margin: 10px 0 0;
  font-size: 12px;
  color: #009be4
}

app-popup-login form .forget span {
  margin: 0 2px;
  text-decoration: underline
}

app-popup-login form .forget .remember {
  width: 82%;
  display: flex
}

app-popup-login form .forget .remember input {
  width: 15px;
  height: 16px;
  margin-right: 5px
}

app-popup-login form .forget .remember p {
  line-height: 16px;
  font-size: 12px
}

app-popup-login form button {
  width: 77.6vw;
  height: 11.2vw;
  margin: 10.13vw 0 8vw
}

app-popup-login form .pwd img {
  position: absolute;
  top: calc((9.87vw - 4.26vw) / 2);
  right: 10px;
  width: 6.13vw;
  height: 4.26vw;
  z-index: 3
}

app-popup-login .register {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 1px;
  color: #595757
}

app-popup-login .register p {
  margin: 0 0 0 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #009be4
}

app-amount-record .scroll-wrap,
app-old-quest-center .scroll-wrap,
app-review-main .scroll-wrap {
  height: calc(100vh - 45px - 40px - 47px - 10px);
  margin: 10px 0 0;
  overflow-x: hidden
}

app-amount-record .page-header,
app-old-quest-center .page-header,
app-review-main .page-header {
  width: 100vw;
  height: 40px;
  background: #fff
}

app-amount-record .page-header ul,
app-old-quest-center .page-header ul,
app-review-main .page-header ul {
  display: flex;
  justify-content: space-between
}

app-amount-record .page-header li,
app-old-quest-center .page-header li,
app-review-main .page-header li {
  width: 50vw;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #000
}

app-amount-record .page-header li.active,
app-old-quest-center .page-header li.active,
app-review-main .page-header li.active {
  border-bottom: 2px solid #e11515
}

app-amount-record .page-body,
app-old-quest-center .page-body,
app-review-main .page-body {
  width: 100vw;
  height: calc(100vh - 132px);
  background-color: #f2f3f3;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll
}

app-amount-record .search-contain,
app-old-quest-center .search-contain,
app-review-main .search-contain {
  width: 100vw;
  background-color: #fff;
  padding: 15px;
  display: flex;
  justify-content: center
}

app-amount-record .search-contain form,
app-old-quest-center .search-contain form,
app-review-main .search-contain form {
  width: 92.27vw
}

app-amount-record .search-contain li,
app-old-quest-center .search-contain li,
app-review-main .search-contain li {
  width: 100%;
  margin-bottom: 20px
}

app-amount-record .search-contain li>p,
app-old-quest-center .search-contain li>p,
app-review-main .search-contain li>p {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px
}

app-amount-record .search-contain li:last-child,
app-old-quest-center .search-contain li:last-child,
app-review-main .search-contain li:last-child {
  margin-bottom: 0
}

app-amount-record .search-contain .type-selector,
app-old-quest-center .search-contain .type-selector,
app-review-main .search-contain .type-selector {
  width: 100%;
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  color: #000
}

app-amount-record .search-contain .date-selector,
app-old-quest-center .search-contain .date-selector,
app-review-main .search-contain .date-selector {
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-around;
  color: #666;
  border: 1px solid #e6e6e6;
  border-radius: 3px
}

app-amount-record .search-contain .date-selector>input,
app-old-quest-center .search-contain .date-selector>input,
app-review-main .search-contain .date-selector>input {
  width: 40%;
  border: none;
  padding: 0
}

app-amount-record .search-contain .date-selector>span,
app-old-quest-center .search-contain .date-selector>span,
app-review-main .search-contain .date-selector>span {
  width: 5%;
  line-height: 42px;
  text-align: center
}

app-amount-record .search-contain .date-selector>div,
app-old-quest-center .search-contain .date-selector>div,
app-review-main .search-contain .date-selector>div {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0
}

app-amount-record .search-contain .date-selector>div i,
app-old-quest-center .search-contain .date-selector>div i,
app-review-main .search-contain .date-selector>div i {
  width: 20px;
  height: 100%;
  background: url(resources/date.f99961c7d91012d53e9d.svg) no-repeat;
  background-position: 50%;
  background-size: contain
}

app-amount-record .search-contain .btn-confirm,
app-old-quest-center .search-contain .btn-confirm,
app-review-main .search-contain .btn-confirm {
  width: 100%;
  height: 41px
}

app-amount-record .review-body,
app-old-quest-center .review-body,
app-review-main .review-body {
  width: 100vw;
  background-color: #f2f3f3;
  padding: 10px 4% 0
}

app-amount-record .record,
app-old-quest-center .record,
app-review-main .record {
  width: 92.27vw;
  flex-shrink: 0;
  margin-bottom: 10px
}

app-amount-record .record .r-header,
app-old-quest-center .record .r-header,
app-review-main .record .r-header {
  display: flex;
  justify-content: space-between;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-weight: 700;
  padding: 0 20px;
  color: #000;
  border-bottom: 1px solid #e11515
}

app-amount-record .record .r-header .time,
app-old-quest-center .record .r-header .time,
app-review-main .record .r-header .time {
  font-size: 14px;
  color: #4d4d4d
}

app-amount-record .record .r-body,
app-old-quest-center .record .r-body,
app-review-main .record .r-body {
  padding: 2.67vw 4vw
}

app-amount-record .record .r-body li,
app-old-quest-center .record .r-body li,
app-review-main .record .r-body li {
  height: 25px;
  font-size: 13px;
  font-weight: 700;
  line-height: 25px;
  color: #000;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}

app-amount-record .record .r-body li>:last-child,
app-old-quest-center .record .r-body li>:last-child,
app-review-main .record .r-body li>:last-child {
  align-self: flex-end
}

app-amount-record .record .r-body li:last-child,
app-old-quest-center .record .r-body li:last-child,
app-review-main .record .r-body li:last-child {
  margin-bottom: 0
}

app-amount-record .record .r-body li:last-child span:last-child,
app-old-quest-center .record .r-body li:last-child span:last-child,
app-review-main .record .r-body li:last-child span:last-child {
  color: #000
}

app-amount-record .record .r-footer,
app-old-quest-center .record .r-footer,
app-review-main .record .r-footer {
  display: flex;
  justify-content: center;
  padding: 10px 0
}

app-amount-record .record .r-footer button,
app-old-quest-center .record .r-footer button,
app-review-main .record .r-footer button {
  width: 84.27vw;
  height: 41px
}

app-amount-record .empty-data,
app-old-quest-center .empty-data,
app-review-main .empty-data {
  width: 92.27vw;
  font-size: 14px;
  font-weight: 700;
  color: #999;
  display: flex;
  justify-content: center;
  padding: 80px
}

app-popup-register .dialog {
  width: 87.2vw;
  padding: 0 0 7.2vw
}

app-popup-register .dialog .title {
  height: 18.67vw
}

app-popup-register .dialog .title .icon {
  width: 7.47vw;
  height: 7.47vw;
  margin: 0 16px 0 0;
  background: url(resources/sign_in_w.7e5137ed468523719fef.svg) no-repeat 50%
}

app-popup-register .dialog form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.06vw 0 0;
  font-size: 14px
}

app-popup-register .dialog form button,
app-popup-register .dialog form input {
  width: 77.33vw;
  height: 9.6vw
}

app-popup-register .dialog form label {
  position: relative;
  margin: 0 0 5.06vw
}

app-popup-register .dialog form label.with-msg {
  margin: 0 0 .06vw
}

app-popup-register .dialog form label button {
  position: absolute;
  top: calc((9.6vw - 8vw) / 2);
  right: 10px;
  width: 23.2vw;
  height: 8vw;
  font-size: 13px
}

app-popup-register .dialog form label+.err {
  width: 77.33vw;
  line-height: 1.4;
  margin: 5px 0
}

app-popup-register .dialog form label+.tip {
  width: 77.33vw;
  line-height: 1.4;
  margin: 5px 0;
  font-size: 12px;
  color: #393939
}

app-popup-register .dialog form label .confirm {
  position: absolute;
  top: calc((9.6vw - 13px) / 2);
  right: 10px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #00de3f
}

app-popup-register .dialog form label img {
  position: absolute;
  top: calc((9.6vw - 4.26vw) / 2);
  right: 10px;
  width: 4.26vw;
  height: 4.26vw
}

app-popup-register .dialog form .phone+.reset {
  font-size: 13px;
  line-height: 1.4;
  margin: 5px 0;
  color: #333
}

app-popup-register .dialog form .isCheck {
  display: flex;
  width: 77.33vw
}

app-popup-register .dialog form .isCheck input[type=checkbox] {
  width: 4.5vw;
  height: 4.5vw;
  margin: 0 10px 0 0
}

app-popup-register .dialog form .isCheck p {
  color: #d9b48a
}

app-popup-register .dialog .success {
  display: flex;
  flex-direction: column;
  align-items: center
}

app-popup-register .dialog .success .icon {
  width: 12.8vw;
  height: 11.2vw;
  margin: 5.87vw 0 4.53vw;
  background: url(resources/celebrate.9d71a98ddb3e46363b53.svg) no-repeat 50%
}

app-popup-register .dialog .success p {
  font-size: 16px;
  letter-spacing: 1px;
  color: #595757
}

app-popup-register .dialog .success .btn-group {
  display: flex;
  justify-content: space-between;
  width: 73.6vw;
  margin: 9.6vw 0 0
}

app-popup-register .dialog .success .btn-group button {
  width: 34.13vw;
  height: 11.2vw;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff
}

app-popup-register .dialog .success .btn-group .blue_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#bbc8e6, #6d7fbe 50%, #99a6f1);
  border-radius: 3px;
  color: #fff
}

app-popup-register .dialog .success .btn-group .blue_btn:active {
  background: linear-gradient(0deg, #bbc8e6 0, #6d7fbe 50%, #99a6f1)
}

app-popup-bulletin .dialog {
  width: 92.27vw;
  padding: 0 0 8vw
}

app-popup-bulletin .types {
  display: flex;
  border-bottom: 1px solid #ebebeb
}

app-popup-bulletin .types li {
  display: flex;
  align-items: center;
  height: 14.4vw
}

app-popup-bulletin .types li p {
  width: 22.67vw;
  border-right: 1px solid #ebebeb;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  color: #333
}

app-popup-bulletin .types li.active {
  border-bottom: 2px solid #e11515
}

app-popup-bulletin .announcement {
  max-height: 324px;
  overflow-y: scroll
}

app-popup-bulletin .announcement li {
  padding: 5px 0 18px 24px;
  border-bottom: 1px solid #ebebeb
}

app-popup-bulletin .announcement .date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 0 0;
  margin: 0 0 9px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #b0b0b1
}

app-popup-bulletin .announcement .content {
  width: 76.53vw;
  min-height: 16px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #4d4d4d;
  white-space: nowrap;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden
}

app-popup-bulletin .announcement .open {
  white-space: unset
}

app-help .help-canter {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f3;
  font-size: .875rem;
  font-weight: 700;
  color: #595757
}

app-help .help-canter>div {
  width: 100vw
}

app-help .h-header {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #e6e6e6
}

app-help .h-header .box {
  width: 92.27vw;
  height: 41px;
  line-height: 41px;
  position: relative;
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 3px 0 #dedede;
  border: 1px solid #957222;
  color: #a07d44
}

app-help .h-header .box>i {
  width: 9px;
  height: 16px;
  background: url(resources/arrow_b.072b5e54d2c5ef52de7a.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 12px;
  right: 4vw;
  transform: rotate(270deg)
}

app-help .h-header select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

app-help .h-body {
  height: calc(100vh - 164px);
  overflow-y: scroll
}

app-help .h-nav {
  padding: 15px 4vw;
  display: flex;
  justify-content: center;
  width: 100vw
}

app-help .h-nav>ul {
  width: 92.27vw
}

app-help .h-nav li {
  height: 51px;
  line-height: 51px;
  text-align: center;
  margin-bottom: 15px
}

app-help .h-nav li:last-child {
  margin-bottom: 0
}

app-help .content-detail {
  font-size: 14px;
  font-weight: 700;
  color: #595757;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0
}

app-help .content-detail>div {
  width: 92.27vw;
  flex-shrink: 0
}

app-help .content-detail>div:first-child {
  min-height: 51px;
  display: flex;
  align-items: center;
  position: relative
}

app-help .content-detail>div:first-child>span {
  width: 73vw;
  flex-shrink: 0
}

app-help .content-detail>div:first-child>i {
  background-position: 50%;
  background-size: contain
}

app-help .content-detail>div:first-child>i:first-child {
  width: 24px;
  height: 24px;
  margin: 0 4vw
}

app-help .content-detail>div:first-child .arrow {
  width: 9px;
  height: 16px;
  background: url(resources/arrow_b.072b5e54d2c5ef52de7a.png) no-repeat;
  background-size: 100%;
  transition: .2s;
  transform: rotate(180deg);
  position: absolute;
  right: 4vw
}

app-help .content-detail>div:first-child .arrow.active {
  transform: rotate(270deg)
}

app-help .content-detail .icon-about {
  background: url(resources/aboutus.e745b589fe9b2db4b35e.svg) no-repeat
}

app-help .detail-body {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3)
}

app-help .detail-body>:not(img) {
  width: 100%;
  flex-shrink: 0
}

app-help .detail-body span {
  line-height: 25px
}

app-help .detail-body img {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  margin: 10px 0
}

app-help ul.teach2 {
  margin-top: 20px
}

app-help ul.teach2 li {
  margin: 5px 0
}

app-help ul.teach2 li .item {
  align-items: center
}

app-help ul.teach2 li .item p {
  display: flex;
  margin-bottom: 0
}

app-help ul.teach2 li .item p i {
  margin-right: 10px
}

app-help ul.teach2 li .item p i.online {
  width: 26px;
  height: 26px
}

app-help ul.teach2 li .item p i.wechat {
  width: 26px;
  height: 23px;
  background: url(resources/wechat.d92bdc1a333c95bc4acd.svg) no-repeat
}

app-help ul.teach2 li .item p i.alipay {
  width: 25px;
  height: 25px;
  background: url(resources/alipay.cb7c2579b78e74f10533.svg) no-repeat
}

app-help ul.teach2 li .item p i.unionpay {
  width: 30px;
  height: 19px;
  background: url(resources/unionpay.43f9e48af6f760721050.svg) no-repeat
}

app-help ul.teach2 li .item p i.credit {
  width: 30px;
  height: 19px;
  background: url(resources/credit.84e6277bb2ab4f7118f2.svg) no-repeat
}

app-help ul.teach2 li .item p i.number-deposit {
  width: 26px;
  height: 26px
}

app-help ul.teach2 li .item>i {
  width: 10px;
  height: 10px;
  transition: .2s;
  transform: rotate(180deg);
  margin-left: 10px
}

app-help ul.teach2 li .item.active>i,
app-help ul.teach2 li .item>i {
  background: url(resources/arrow_b.8933afac94b21bb0e97e.svg) no-repeat
}

app-help ul.teach2 li .item.active>i {
  transform: rotate(270deg)
}

app-help ul.teach2 li .online-cnt {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center
}

app-help ul.teach2 li .online-cnt .online01,
app-help ul.teach2 li .unionpay-cnt .online01 {
  max-width: 862px;
  margin-top: 20px;
  margin-bottom: 20px
}

app-help ul.teach2 li .online-cnt>.flex,
app-help ul.teach2 li .unionpay-cnt>.flex,
app-help ul.teach2 li app-transfer-old-member .online-cnt>.row,
app-help ul.teach2 li app-transfer-old-member .unionpay-cnt>.row,
app-transfer-old-member app-help ul.teach2 li .online-cnt>.row,
app-transfer-old-member app-help ul.teach2 li .unionpay-cnt>.row {
  justify-content: space-between
}

app-help ul.teach2 li .online-cnt>.flex>div,
app-help ul.teach2 li .unionpay-cnt>.flex>div,
app-help ul.teach2 li app-transfer-old-member .online-cnt>.row>div,
app-help ul.teach2 li app-transfer-old-member .unionpay-cnt>.row>div,
app-transfer-old-member app-help ul.teach2 li .online-cnt>.row>div,
app-transfer-old-member app-help ul.teach2 li .unionpay-cnt>.row>div {
  width: 350px;
  text-align: center
}

app-help ul.teach2 li .online-cnt>p.orange,
app-help ul.teach2 li .unionpay-cnt>p.orange {
  margin: 20px 0 !important
}

app-help ul.teach2 li .alipay-cnt,
app-help ul.teach2 li .wechat-cnt {
  justify-content: space-between
}

app-help ul.teach2 li .alipay-cnt h2,
app-help ul.teach2 li .wechat-cnt h2 {
  text-align: center
}

app-help ul.teach2 li .alipay-cnt>div,
app-help ul.teach2 li .wechat-cnt>div {
  width: 350px
}

app-help ul.teach2 li .alipay-cnt>div:first-of-type p,
app-help ul.teach2 li .wechat-cnt>div:first-of-type p {
  margin-bottom: 18px
}

app-help ul.teach2 li .alipay-cnt>div:first-of-type img,
app-help ul.teach2 li .wechat-cnt>div:first-of-type img {
  margin-bottom: 30px
}

app-help ul.teach2 li .alipay-cnt .phone,
app-help ul.teach2 li .wechat-cnt .phone {
  background: #fffcf5;
  border-radius: 10px;
  width: 350px;
  height: 569px;
  margin-bottom: 20px;
  text-align: center;
  padding: 15px
}

app-help ul.teach2 li .alipay-cnt .phone>div,
app-help ul.teach2 li .wechat-cnt .phone>div {
  align-items: center
}

app-help ul.teach2 li .alipay-cnt .phone>div i,
app-help ul.teach2 li .wechat-cnt .phone>div i {
  width: 40px;
  height: 20px;
  background: url(resources/arrow_b.8933afac94b21bb0e97e.svg) no-repeat;
  background-position: 50%;
  background-size: 11px 19px;
  cursor: pointer
}

app-help ul.teach2 li .alipay-cnt .phone>div i.left,
app-help ul.teach2 li .wechat-cnt .phone>div i.left {
  transform: rotate(180deg)
}

app-help ul.teach2 li .alipay-cnt .phone>div .image,
app-help ul.teach2 li .wechat-cnt .phone>div .image {
  position: relative;
  width: 260px;
  height: 447px
}

app-help ul.teach2 li .alipay-cnt .phone>div img,
app-help ul.teach2 li .wechat-cnt .phone>div img {
  border: none
}

app-help ul.teach2 li .alipay-cnt .phone ul,
app-help ul.teach2 li .wechat-cnt .phone ul {
  justify-content: center;
  margin-top: 22px
}

app-help ul.teach2 li .alipay-cnt .phone ul li,
app-help ul.teach2 li .wechat-cnt .phone ul li {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 4px;
  background: #b3b3b3
}

app-help .teach3 img,
app-help .teach4 img {
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  margin-bottom: 20px;
  max-width: 100%
}

app-help .problem2 li .item p {
  display: flex;
  margin-bottom: 0
}

app-help .problem2 li .item p i {
  width: 19px;
  height: 19px;
  background: url(/tb/assets/img/help/fix_o.svg) no-repeat;
  margin-right: 10px
}

app-help .problem2 li .item>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/add.svg) no-repeat
}

app-help .problem2 li .canot-open p {
  margin-bottom: 10px
}

app-help .problem2 li .canot-open p span {
  color: #ff7415;
  font-size: 15px;
  font-weight: 700;
  margin-right: 10px
}

app-help .problem2 li .canot-open button {
  color: #333;
  font-size: 13px;
  font-weight: 700;
  width: 115px;
  height: 30px;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  margin-right: 8px
}

app-help .problem2 li .canot-open>div {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 15px;
  margin-bottom: 10px
}

app-help .problem3 img {
  margin: 10px 0 20px
}

app-help .problem3>.flex,
app-help app-transfer-old-member .problem3>.row,
app-transfer-old-member app-help .problem3>.row {
  margin-left: 55px
}

app-help .problem3>.flex img,
app-help app-transfer-old-member .problem3>.row img,
app-transfer-old-member app-help .problem3>.row img {
  margin-left: 0
}

app-help .problem4 h2 {
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700
}

app-help .problem4 .tf-hr {
  align-items: center;
  padding: 18px 23px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px
}

app-help .problem4 .tf-hr img {
  border: none;
  width: 50px;
  height: 50px;
  margin: 0 20px 0 0
}

app-help .problem4 .tf-hr p {
  margin-bottom: 0
}

app-help .problem4 .tf-hr p.title {
  font-size: 20px;
  font-weight: 700
}

app-help .problem4 .tf-hr p.txt {
  font-size: 15px
}

app-help .problem4 .comm {
  flex-wrap: wrap
}

app-help .problem4 .comm>div {
  padding: 20px 10px;
  max-width: calc((92.26vw - 24px) / 2)
}

app-help .problem4 .comm img {
  width: 100%;
  margin: auto;
  display: block
}

app-help .problem5 li .item {
  align-items: center;
  justify-content: space-between
}

app-help .problem5 li .item>.flex,
app-help .problem5 li app-transfer-old-member .item>.row,
app-transfer-old-member app-help .problem5 li .item>.row {
  align-items: center
}

app-help .problem5 li .item p {
  margin-bottom: 0
}

app-help .problem5 li .item img {
  margin-right: 10px
}

app-help .problem5 li .item img.ag {
  width: 45px;
  height: auto
}

app-help .problem5 li .item .icon {
  background: url(/tb/assets/img/help/icon-app.png) no-repeat;
  background-size: 100%;
  width: 45px;
  height: 27px
}

app-help .problem5 li .item .icon-ebet {
  background-position-y: 0
}

app-help .problem5 li .item .icon-ag {
  background-position-y: 33.3333333333%
}

app-help .problem5 li .item .icon-og {
  background-position-y: 66.6666666667%
}

app-help .problem5 li .item .icon-dg {
  background-position-y: 100%
}

app-help .problem5 li .item>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/add.svg) no-repeat
}

app-help .problem5 li .item.active>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/less.svg) no-repeat
}

app-help .problem5 li .item-cnt {
  justify-content: space-between
}

app-help .problem5 li .item-cnt>div {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 24px 20px;
  width: calc((100% - 20px) / 3)
}

app-help .problem5 li .item-cnt>div.android p,
app-help .problem5 li .item-cnt>div.ios p {
  text-align: center
}

app-help .problem5 li .item-cnt>div.android img,
app-help .problem5 li .item-cnt>div.ios img {
  width: 150px;
  height: 150px;
  display: block;
  margin: 20px auto 25px
}

app-help .problem5 li .item-cnt h3 {
  text-align: center;
  margin-bottom: 20px
}

app-help .problem5 li .item-cnt p {
  margin-bottom: 12px;
  color: #333;
  line-height: 20px
}

app-help .problem5 li .item-cnt button {
  width: 100%;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #5af;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-top: 15px
}

app-help .about h2 {
  font-size: large;
  font-weight: 700;
  line-height: 25px;
  margin-bottom: 10px
}

app-help .about h2:not(:first-child) {
  margin-top: 20px
}

app-help .about p {
  line-height: 25px
}

app-help-center .help-content {
  height: 91vh;
  background-color: #f2f3f3
}

app-help-center .help-center {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f3;
  font-size: .875rem;
  font-weight: 700;
  color: #595757
}

app-help-center .help-center>div {
  width: 100vw
}

app-help-center .h-header {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #e6e6e6
}

app-help-center .h-header .box {
  width: 92.27vw;
  height: 41px;
  line-height: 41px;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 13px 2px #dedede
}

app-help-center .h-header .box>i {
  width: 9px;
  height: 16px;
  background: url(resources/arrow_gray.23a209014d3b8695b115.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 12px;
  right: 4vw;
  transform: rotate(270deg)
}

app-help-center .h-header select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

app-help-center .h-body {
  height: calc(100vh - 164px);
  overflow-y: scroll
}

app-help-center .h-nav {
  padding: 15px 4vw;
  display: flex;
  justify-content: center;
  width: 100vw
}

app-help-center .h-nav>ul {
  width: 92.27vw
}

app-help-center .h-nav li {
  height: 51px;
  line-height: 51px;
  text-align: center;
  margin-bottom: 15px
}

app-help-center .h-nav li:last-child {
  margin-bottom: 0
}

app-help-center .content-detail {
  font-size: 14px;
  font-weight: 700;
  color: #595757;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0
}

app-help-center .content-detail>div {
  width: 92.27vw;
  flex-shrink: 0
}

app-help-center .content-detail>div:first-child {
  min-height: 51px;
  display: flex;
  align-items: center;
  position: relative
}

app-help-center .content-detail>div:first-child>span {
  width: 73vw;
  flex-shrink: 0
}

app-help-center .content-detail>div:first-child>i {
  background-position: 50%;
  background-size: contain
}

app-help-center .content-detail>div:first-child>i:first-child {
  width: 24px;
  height: 24px;
  margin: 0 4vw
}

app-help-center .content-detail>div:first-child .arrow {
  width: 9px;
  height: 16px;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%;
  transition: .2s;
  transform: rotate(180deg);
  position: absolute;
  right: 4vw
}

app-help-center .content-detail>div:first-child .arrow.active {
  transform: rotate(270deg)
}

app-help-center .content-detail .icon-about {
  background: url(resources/aboutus.e745b589fe9b2db4b35e.svg) no-repeat
}

app-help-center .detail-body {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3)
}

app-help-center .detail-body>:not(img) {
  width: 100%;
  flex-shrink: 0
}

app-help-center .detail-body span {
  line-height: 25px
}

app-help-center .detail-body img {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  margin: 10px 0
}

app-help-center ul.teach2 {
  margin-top: 20px
}

app-help-center ul.teach2 li {
  margin: 5px 0
}

app-help-center ul.teach2 li .item {
  align-items: center
}

app-help-center ul.teach2 li .item p {
  display: flex;
  margin-bottom: 0
}

app-help-center ul.teach2 li .item p i {
  margin-right: 10px
}

app-help-center ul.teach2 li .item p i.online {
  width: 26px;
  height: 26px
}

app-help-center ul.teach2 li .item p i.wechat {
  width: 26px;
  height: 23px;
  background: url(resources/wechat.d92bdc1a333c95bc4acd.svg) no-repeat
}

app-help-center ul.teach2 li .item p i.alipay {
  width: 25px;
  height: 25px;
  background: url(resources/alipay.cb7c2579b78e74f10533.svg) no-repeat
}

app-help-center ul.teach2 li .item p i.unionpay {
  width: 30px;
  height: 19px;
  background: url(resources/unionpay.43f9e48af6f760721050.svg) no-repeat
}

app-help-center ul.teach2 li .item p i.credit {
  width: 30px;
  height: 19px;
  background: url(resources/credit.84e6277bb2ab4f7118f2.svg) no-repeat
}

app-help-center ul.teach2 li .item p i.number-deposit {
  width: 26px;
  height: 26px
}

app-help-center ul.teach2 li .item>i {
  width: 10px;
  height: 10px;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  transition: .2s;
  transform: rotate(180deg);
  margin-left: 10px
}

app-help-center ul.teach2 li .item.active>i {
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  transform: rotate(270deg)
}

app-help-center ul.teach2 li .online-cnt {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center
}

app-help-center ul.teach2 li .online-cnt .online01,
app-help-center ul.teach2 li .unionpay-cnt .online01 {
  max-width: 862px;
  margin-top: 20px;
  margin-bottom: 20px
}

app-help-center ul.teach2 li .online-cnt>.flex,
app-help-center ul.teach2 li .unionpay-cnt>.flex,
app-help-center ul.teach2 li app-transfer-old-member .online-cnt>.row,
app-help-center ul.teach2 li app-transfer-old-member .unionpay-cnt>.row,
app-transfer-old-member app-help-center ul.teach2 li .online-cnt>.row,
app-transfer-old-member app-help-center ul.teach2 li .unionpay-cnt>.row {
  justify-content: space-between
}

app-help-center ul.teach2 li .online-cnt>.flex>div,
app-help-center ul.teach2 li .unionpay-cnt>.flex>div,
app-help-center ul.teach2 li app-transfer-old-member .online-cnt>.row>div,
app-help-center ul.teach2 li app-transfer-old-member .unionpay-cnt>.row>div,
app-transfer-old-member app-help-center ul.teach2 li .online-cnt>.row>div,
app-transfer-old-member app-help-center ul.teach2 li .unionpay-cnt>.row>div {
  width: 350px;
  text-align: center
}

app-help-center ul.teach2 li .online-cnt>p.orange,
app-help-center ul.teach2 li .unionpay-cnt>p.orange {
  margin: 20px 0 !important
}

app-help-center ul.teach2 li .alipay-cnt,
app-help-center ul.teach2 li .wechat-cnt {
  justify-content: space-between
}

app-help-center ul.teach2 li .alipay-cnt h2,
app-help-center ul.teach2 li .wechat-cnt h2 {
  text-align: center
}

app-help-center ul.teach2 li .alipay-cnt>div,
app-help-center ul.teach2 li .wechat-cnt>div {
  width: 350px
}

app-help-center ul.teach2 li .alipay-cnt>div:first-of-type p,
app-help-center ul.teach2 li .wechat-cnt>div:first-of-type p {
  margin-bottom: 18px
}

app-help-center ul.teach2 li .alipay-cnt>div:first-of-type img,
app-help-center ul.teach2 li .wechat-cnt>div:first-of-type img {
  margin-bottom: 30px
}

app-help-center ul.teach2 li .alipay-cnt .phone,
app-help-center ul.teach2 li .wechat-cnt .phone {
  background: #fffcf5;
  border-radius: 10px;
  width: 350px;
  height: 569px;
  margin-bottom: 20px;
  text-align: center;
  padding: 15px
}

app-help-center ul.teach2 li .alipay-cnt .phone>div,
app-help-center ul.teach2 li .wechat-cnt .phone>div {
  align-items: center
}

app-help-center ul.teach2 li .alipay-cnt .phone>div i,
app-help-center ul.teach2 li .wechat-cnt .phone>div i {
  width: 40px;
  height: 20px;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-position: 50%;
  background-size: 11px 19px;
  cursor: pointer
}

app-help-center ul.teach2 li .alipay-cnt .phone>div i.left,
app-help-center ul.teach2 li .wechat-cnt .phone>div i.left {
  transform: rotate(180deg)
}

app-help-center ul.teach2 li .alipay-cnt .phone>div .image,
app-help-center ul.teach2 li .wechat-cnt .phone>div .image {
  position: relative;
  width: 260px;
  height: 447px
}

app-help-center ul.teach2 li .alipay-cnt .phone>div img,
app-help-center ul.teach2 li .wechat-cnt .phone>div img {
  border: none
}

app-help-center ul.teach2 li .alipay-cnt .phone ul,
app-help-center ul.teach2 li .wechat-cnt .phone ul {
  justify-content: center;
  margin-top: 22px
}

app-help-center ul.teach2 li .alipay-cnt .phone ul li,
app-help-center ul.teach2 li .wechat-cnt .phone ul li {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 4px;
  background: #b3b3b3
}

app-help-center .teach3 img,
app-help-center .teach4 img {
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  margin-bottom: 20px;
  max-width: 100%
}

app-help-center .problem2 li .item p {
  display: flex;
  margin-bottom: 0
}

app-help-center .problem2 li .item p i {
  width: 19px;
  height: 19px;
  background: url(/tb/assets/img/help/fix_o.svg) no-repeat;
  margin-right: 10px
}

app-help-center .problem2 li .item>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/add.svg) no-repeat
}

app-help-center .problem2 li .canot-open p {
  margin-bottom: 10px
}

app-help-center .problem2 li .canot-open p span {
  color: #ff7415;
  font-size: 15px;
  font-weight: 700;
  margin-right: 10px
}

app-help-center .problem2 li .canot-open button {
  color: #333;
  font-size: 13px;
  font-weight: 700;
  width: 115px;
  height: 30px;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  margin-right: 8px
}

app-help-center .problem2 li .canot-open>div {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 15px;
  margin-bottom: 10px
}

app-help-center .problem3 img {
  margin: 10px 0 20px
}

app-help-center .problem3>.flex,
app-help-center app-transfer-old-member .problem3>.row,
app-transfer-old-member app-help-center .problem3>.row {
  margin-left: 55px
}

app-help-center .problem3>.flex img,
app-help-center app-transfer-old-member .problem3>.row img,
app-transfer-old-member app-help-center .problem3>.row img {
  margin-left: 0
}

app-help-center .problem4 h2 {
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700
}

app-help-center .problem4 .tf-hr {
  align-items: center;
  padding: 18px 23px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px
}

app-help-center .problem4 .tf-hr img {
  border: none;
  width: 50px;
  height: 50px;
  margin: 0 20px 0 0
}

app-help-center .problem4 .tf-hr p {
  margin-bottom: 0
}

app-help-center .problem4 .tf-hr p.title {
  font-size: 20px;
  font-weight: 700
}

app-help-center .problem4 .tf-hr p.txt {
  font-size: 15px
}

app-help-center .problem4 .comm {
  flex-wrap: wrap
}

app-help-center .problem4 .comm>div {
  padding: 20px 10px;
  max-width: calc((92.26vw - 24px) / 2)
}

app-help-center .problem4 .comm img {
  width: 100%;
  margin: auto;
  display: block
}

app-help-center .problem5 li .item {
  align-items: center;
  justify-content: space-between
}

app-help-center .problem5 li .item>.flex,
app-help-center .problem5 li app-transfer-old-member .item>.row,
app-transfer-old-member app-help-center .problem5 li .item>.row {
  align-items: center
}

app-help-center .problem5 li .item p {
  margin-bottom: 0
}

app-help-center .problem5 li .item img {
  margin-right: 10px
}

app-help-center .problem5 li .item img.ag {
  width: 45px;
  height: auto
}

app-help-center .problem5 li .item .icon {
  background: url(/tb/assets/img/help/icon-app.png) no-repeat;
  background-size: 100%;
  width: 45px;
  height: 27px
}

app-help-center .problem5 li .item .icon-ebet {
  background-position-y: 0
}

app-help-center .problem5 li .item .icon-ag {
  background-position-y: 33.3333333333%
}

app-help-center .problem5 li .item .icon-og {
  background-position-y: 66.6666666667%
}

app-help-center .problem5 li .item .icon-dg {
  background-position-y: 100%
}

app-help-center .problem5 li .item>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/add.svg) no-repeat
}

app-help-center .problem5 li .item.active>i {
  width: 15px;
  height: 15px;
  background: url(/tb/assets/img/help/less.svg) no-repeat
}

app-help-center .problem5 li .item-cnt {
  justify-content: space-between
}

app-help-center .problem5 li .item-cnt>div {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 24px 20px;
  width: calc((100% - 20px) / 3)
}

app-help-center .problem5 li .item-cnt>div.android p,
app-help-center .problem5 li .item-cnt>div.ios p {
  text-align: center
}

app-help-center .problem5 li .item-cnt>div.android img,
app-help-center .problem5 li .item-cnt>div.ios img {
  width: 150px;
  height: 150px;
  display: block;
  margin: 20px auto 25px
}

app-help-center .problem5 li .item-cnt h3 {
  text-align: center;
  margin-bottom: 20px
}

app-help-center .problem5 li .item-cnt p {
  margin-bottom: 12px;
  color: #333;
  line-height: 20px
}

app-help-center .problem5 li .item-cnt button {
  width: 100%;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #5af;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-top: 15px
}

app-help-center .about h2 {
  font-size: large;
  font-weight: 700;
  line-height: 25px;
  margin-bottom: 10px
}

app-help-center .about h2:not(:first-child) {
  margin-top: 20px
}

app-help-center .about p {
  line-height: 25px
}

app-member-center .white-bg {
  background: #fff;
  margin: 0 0 10px
}

app-member-center .user {
  padding: 0 0 19px
}

app-member-center .user .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 15px 15px 10px
}

app-member-center .user .info .account {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 2px;
  color: #000
}

app-member-center .user .info .account .vip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 18px;
  padding: 0 5px;
  margin: 0 9px 0 0;
  border-radius: 3px;
  background: #b90b0a;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff
}

app-member-center .user .info p {
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-member-center .user .info .arrow_ic {
  display: block;
  width: 1.7vw;
  height: 3.2vw;
  transform: scaleX(-1);
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%
}

app-member-center .user .info .innerBtn {
  width: auto;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 1px
}

app-member-center .user .wallet {
  display: flex;
  justify-content: center;
  margin: 0 auto 12px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid #b90b0a;
  border-radius: 5vw
}

app-member-center .user .wallet p {
  display: flex;
  align-items: center;
  width: 64.53vw;
  height: 8.27vw;
  padding: 0 0 0 16px;
  background: #f2f3f3;
  border-right-width: 0;
  border-radius: 5vw 0 0 5vw;
  font-size: 15px;
  letter-spacing: 1px;
  color: #b90b0a
}

app-member-center .user .wallet button {
  width: 27.73vw;
  height: 8.27vw;
  border-radius: 0 5vw 5vw 0;
  border: none
}

app-member-center .user .btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 92.26vw;
  margin: 0 auto
}

app-member-center .user .btn-group button {
  width: 45.07vw;
  height: 18.4vw;
  border-radius: 5px
}

app-member-center .user .btn-group button:nth-child(2) i {
  background: url(resources/vip.82360cbb7face3ef4793.svg) no-repeat
}

app-member-center .user .btn-group button i {
  width: 10vw;
  height: 10vw;
  margin: 0 3.47vw 0 0;
  background: url(resources/memberBigBtn.af969570a0da25c57ab5.svg) no-repeat;
  background-size: 100%
}

app-member-center .user .btn-group button .text {
  font-size: 18px;
  letter-spacing: 2px;
  color: #595757
}

app-member-center .user .btn-group button .text p {
  text-align: left;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-member-center .user .btn-group.no-vip {
  justify-content: center
}

app-member-center .user ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 92.26vw;
  margin: 15px auto 0
}

app-member-center .user ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20.53vw;
  padding: 5px 0;
  border: 1px solid transparent;
  border-radius: 5px
}

app-member-center .user ul li p {
  font-size: 13px;
  letter-spacing: 1px;
  color: #000
}

app-member-center .user ul li i {
  display: block;
  width: 10.4vw;
  height: 9.33vw;
  background: url(resources/betting_record.c7a1649f31fde736168b.svg) no-repeat;
  background-size: 100%
}

app-member-center .user ul li:nth-child(2) i {
  background: url(resources/transaction.832795692fc4daeee01a.svg) no-repeat;
  background-size: 100%
}

app-member-center .user ul li:nth-child(3) i {
  background: url(resources/mail.85d79d7b8668f588941d.svg) no-repeat;
  background-size: 100%
}

app-member-center .user ul li:nth-child(3) .bubble {
  position: absolute;
  width: auto;
  min-width: 25px;
  min-height: 25px;
  line-height: 22px;
  font-size: 12px;
  letter-spacing: 0;
  padding: 0 2px;
  top: -7px;
  right: 10px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #fff;
  color: #fff;
  background: #b90b0a
}

app-member-center .user ul li:nth-child(4) i {
  background: url(resources/bankcard.5f304c2f62300277bab1.svg) no-repeat;
  background-size: 100%
}

app-member-center .options {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 14px 0 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 10px
}

app-member-center .options.queest-apply .icon {
  background: url(resources/application.e8635ccd11365ea0abc9.svg) no-repeat;
  background-size: 69%;
  margin: 0 15px 0 3px
}

app-member-center .options.help .icon {
  background: url(resources/problem.4a30ebdf317139a3cac3.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.aboutus .icon {
  background: url(resources/marvel.616874ea233bbc32da25.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.joinus .icon {
  background: url(resources/joinus.7411611c3c155ea41586.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.special .icon {
  background: url(resources/special.a379d814d09c108e58f4.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.partner .icon {
  background: url(resources/partner.2885e269394ad047e4a0.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.maintain .icon {
  background: url(resources/fixing.62c5f51b8fde73456ea5.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.download .icon {
  background: url(resources/download.0e038591c6fbe83a3896.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.lang .icon {
  background: url(resources/language.3eb4659880e21d0360e2.svg) no-repeat;
  background-size: 100%
}

app-member-center .options.logout {
  justify-content: flex-start
}

app-member-center .options.logout .icon {
  background: url(resources/exit.1f5a2ec4115425bc2c03.svg) no-repeat;
  background-size: 100%
}

app-member-center .options .arrow {
  width: 1.7vw;
  height: 3.2vw;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%;
  transform: rotate(180deg)
}

app-member-center .options p {
  font-size: 15px;
  letter-spacing: 2px;
  color: #595757
}

app-member-center .options .icon {
  display: block;
  margin-right: 18px;
  width: 5.6vw;
  height: 5.6vw
}

app-member-center .options .bonusIcon {
  width: 5.6vw;
  height: 5.6vw;
  margin: 0 18px 0 0;
  background: url(resources/transaction.832795692fc4daeee01a.svg) no-repeat;
  background-size: 100%
}

app-member-center app-select-alert .dialog ul {
  margin: 0
}

app-member-center app-select-alert .dialog ul li {
  width: 100%
}

@media only screen and (max-width:320px) {
  app-member-center .user .wallet>p {
    font-size: 14px;
    justify-content: center;
    padding: 0
  }

  app-member-center .user ul li p {
    font-size: 12px;
    margin: 11px 0 0
  }
}

app-vip-detail .markdown-body {
  font-family: inherit
}

app-vip-detail .markdown-body ul {
  padding-left: 0;
  list-style: none
}

app-vip-detail .markdown-body h2 {
  width: 100%;
  font-size: 17px;
  color: #000;
  margin: 26px 0 11px
}

app-vip-detail .notice ul {
  padding: 15px 5px;
  color: #6d6d6d
}

app-vip-detail .notice ul li {
  margin: 0 0 15px
}

app-vip-detail .main-title {
  font-family: inherit;
  width: 100%;
  font-size: 17px;
  color: #000;
  padding: 10px
}

app-vip-detail .table {
  position: relative;
  width: 94vw;
  margin: 0 auto;
  color: #734e1f
}

app-vip-detail .table ul {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column
}

app-vip-detail .table ul li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  position: relative
}

app-vip-detail .table ul li:nth-child(2n) {
  background-color: #f2f3f3
}

app-vip-detail .table ul li:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border-bottom: 1px solid #e11515
}

app-vip-detail .vip_name {
  width: 18.4vw;
  float: left
}

app-vip-detail .vip_name li,
app-vip-detail .vip_name ul {
  width: 18.4vw
}

app-vip-detail .vip_name li:not(:first-child) {
  font-size: 16px;
  color: #4d4d4d
}

app-vip-detail .vip_data {
  width: 73.6vw;
  display: inline-block;
  overflow: scroll
}

app-vip-detail .vip_data div {
  display: flex
}

app-vip-detail .vip_data ul {
  width: 36.8vw
}

app-vip-detail .vip_data li {
  position: relative;
  width: 36.8vw
}

app-vip-detail .vip_data li:not(:first-child) {
  font-size: 16px;
  color: #4d4d4d
}

app-vip-detail .vip_data li:before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  position: absolute;
  top: 12px;
  left: 0;
  background: #d0bda7
}

app-vip-detail .vip_data .up {
  margin: 0 auto;
  display: block;
  width: 86%;
  line-height: 20px
}

app-vip-detail .vip_data .w100 {
  width: 100%
}

app-vip-detail .vip_data .title {
  display: block !important
}

app-vip-detail .vip_data .small {
  font-size: 13px !important;
  overflow-x: auto;
  white-space: nowrap
}

app-vip-detail .vip_data .noborder:before {
  background: none
}

app-vip-detail .arr_l,
app-vip-detail .arr_r {
  display: inline-block;
  width: 20px;
  height: 95%;
  position: absolute;
  top: 50%;
  left: 18vw;
  transform: translateY(-50%);
  background: #fff;
  z-index: 2
}

app-vip-detail .arr_l:before,
app-vip-detail .arr_r:before {
  content: "";
  position: absolute;
  width: 9px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%
}

app-vip-detail .arr_r {
  left: 88vw
}

app-vip-detail .arr_r:before {
  transform: scaleX(-1) translate(50%, -50%)
}

app-bank-card .card_list {
  width: 100vw;
  height: 202px;
  padding: 10px 0 0;
  background-color: #f8f8f8
}

app-bank-card .card_list .flex,
app-bank-card .card_list app-transfer-old-member .row,
app-transfer-old-member app-bank-card .card_list .row {
  height: 202px;
  background-color: #fff;
  padding: 0 0 15px 10px;
  display: flex;
  overflow: scroll;
  align-items: flex-end;
  position: relative
}

app-bank-card .card_list .flex .num-info,
app-bank-card .card_list app-transfer-old-member .row .num-info,
app-transfer-old-member app-bank-card .card_list .row .num-info {
  font-size: 15px;
  color: grey;
  position: absolute;
  top: 10px;
  left: 10px
}

app-bank-card .card_list ul {
  display: flex;
  justify-content: center
}

app-bank-card .card_list li {
  background: linear-gradient(120deg, #ea232d, #a80d0c 50%, #ea232d);
  width: 250px;
  height: 150px;
  border-radius: 5px;
  position: relative;
  margin-right: 10px
}

app-bank-card .card_list li.card-empty {
  background: linear-gradient(120deg, #e8ebf2, #cbcdd3 30%);
  display: flex;
  justify-content: center;
  flex-direction: column
}

app-bank-card .card_list li.card-empty .to-add-card {
  width: 100%;
  height: 123px;
  background: url(resources/add.c38bbb2a0cb3e34a10a5.svg) no-repeat 50%;
  background-size: 60px
}

app-bank-card .card_list li.card-empty .status {
  color: #fff;
  background: none
}

app-bank-card .card_list li p {
  margin-top: 18px;
  padding-left: 21px;
  color: #fff;
  font-size: 21px;
  text-shadow: #666 .1em .1em .2em
}

app-bank-card .card_list li p:nth-child(2) {
  padding-left: 23px;
  margin-top: 4px;
  font-size: 14px
}

app-bank-card .card_list li .num {
  width: 204px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 38px;
  left: 23px;
  color: #fff
}

app-bank-card .card_list li .num span:not(:nth-child(4)) {
  position: relative;
  top: 3px
}

app-bank-card .card_list li .status {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 700
}

app-bank-card .panel-style,
app-bank-card app-user-info-platform li,
app-bank-card app-vip-detail .table,
app-user-info-platform app-bank-card li,
app-vip-detail app-bank-card .table {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px
}

app-bank-card .panel-style button,
app-bank-card .panel-style input,
app-bank-card .panel-style p,
app-bank-card .panel-style span,
app-bank-card app-user-info-platform li button,
app-bank-card app-user-info-platform li input,
app-bank-card app-user-info-platform li p,
app-bank-card app-user-info-platform li span,
app-bank-card app-vip-detail .table button,
app-bank-card app-vip-detail .table input,
app-bank-card app-vip-detail .table p,
app-bank-card app-vip-detail .table span,
app-user-info-platform app-bank-card li button,
app-user-info-platform app-bank-card li input,
app-user-info-platform app-bank-card li p,
app-user-info-platform app-bank-card li span,
app-vip-detail app-bank-card .table button,
app-vip-detail app-bank-card .table input,
app-vip-detail app-bank-card .table p,
app-vip-detail app-bank-card .table span {
  width: 92vw
}

app-bank-card .panel-style select,
app-bank-card app-user-info-platform li select,
app-bank-card app-vip-detail .table select,
app-user-info-platform app-bank-card li select,
app-vip-detail app-bank-card .table select {
  width: 92vw;
  height: 42px;
  border: 1px solid #a7854d;
  border-radius: 3px;
  padding: 0 0 0 15px;
  color: #000
}

app-bank-card .panel-style p,
app-bank-card app-user-info-platform li p,
app-bank-card app-vip-detail .table p,
app-user-info-platform app-bank-card li p,
app-vip-detail app-bank-card .table p {
  margin-top: 15px;
  margin-bottom: 9px;
  font-size: 14px;
  color: #000
}

app-bank-card .panel-style p .tip,
app-bank-card app-user-info-platform li p .tip,
app-bank-card app-vip-detail .table p .tip,
app-user-info-platform app-bank-card li p .tip,
app-vip-detail app-bank-card .table p .tip {
  display: inline;
  color: red;
  margin-left: 10px
}

app-bank-card .panel-style input,
app-bank-card app-user-info-platform li input,
app-bank-card app-vip-detail .table input,
app-user-info-platform app-bank-card li input,
app-vip-detail app-bank-card .table input {
  height: 42px;
  border: 1px solid #e9e9e9;
  color: #000
}

app-bank-card .panel-style button,
app-bank-card app-user-info-platform li button,
app-bank-card app-vip-detail .table button,
app-user-info-platform app-bank-card li button,
app-vip-detail app-bank-card .table button {
  height: 42px;
  margin-top: 34px;
  margin-bottom: 34px
}

app-bank-card .panel-style span,
app-bank-card app-user-info-platform li span,
app-bank-card app-vip-detail .table span,
app-user-info-platform app-bank-card li span,
app-vip-detail app-bank-card .table span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #999
}

app-bank-card .panel-style .err,
app-bank-card app-user-info-platform li .err,
app-bank-card app-vip-detail .table .err,
app-user-info-platform app-bank-card li .err,
app-vip-detail app-bank-card .table .err {
  color: #3d4cce
}

app-bank-card .upload-btn {
  color: #a80d0c;
  border: 1px solid;
  border-radius: 3px;
  background: #fff;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer
}

app-bank-card .upload-btn.disabled {
  background: #c9c9c9;
  color: grey;
  border-color: transparent;
  cursor: not-allowed
}

app-bank-card .preview-area {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px
}

app-bank-card .preview-item {
  position: relative;
  width: 160px;
  height: 90px;
  margin-right: 12px;
  margin-bottom: 12px
}

app-bank-card .preview-item .close-btn {
  position: absolute;
  right: -8px;
  top: -8px;
  margin: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #fff;
  background-color: #996d33
}

app-bank-card .preview-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background-color: #000;
  cursor: pointer
}

app-my-wallet .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-my-wallet .panel-style,
app-my-wallet app-user-info-platform li,
app-my-wallet app-vip-detail .table,
app-user-info-platform app-my-wallet li,
app-vip-detail app-my-wallet .table {
  overflow: hidden
}

app-my-wallet .wallet {
  padding: 0 0 15px
}

app-my-wallet .wallet .gradient {
  background: linear-gradient(180deg, #e11515 0, #e11515 23%, #fff 24%, #fff)
}

app-my-wallet .wallet .content {
  width: 92vw;
  margin: 0 auto;
  border-radius: 1.5vw;
  background: #fff;
  box-shadow: 0 0 5px 0 hsla(0, 0%, 78.4%, .5019607843137255)
}

app-my-wallet .wallet .content .amount {
  display: flex;
  border-bottom: 1px solid #efefef
}

app-my-wallet .wallet .content .helf {
  position: relative;
  width: 50%;
  padding: 12px 8px;
  font-size: 25px;
  letter-spacing: 0;
  color: #272727
}

app-my-wallet .wallet .content .helf>p {
  word-break: break-all;
  padding-left: 10px
}

app-my-wallet .wallet .content .helf .title {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 2px;
  padding-left: 10px;
  color: #009245
}

app-my-wallet .wallet .content .helf .black {
  color: #595757
}

app-my-wallet .wallet .content .limit {
  display: flex;
  align-items: center;
  height: 10.67vw;
  height: 43px;
  line-height: 43px;
  font-size: 15px;
  padding: 0 15px;
  border-bottom: 1px solid #efefef;
  color: #333
}

app-my-wallet .wallet .content .limit p {
  font-size: 12px;
  text-align: center;
  letter-spacing: 1px;
  color: #4d4d4d;
  margin-right: 5px
}

app-my-wallet .wallet .content .limit p:nth-of-type(2) {
  font-size: 15px;
  margin: 0 10px;
  color: red
}

app-my-wallet .wallet .content .limit i {
  width: 16.5px;
  height: 16.5px;
  background: url(resources/problem_red.3444e7dcd0c1bda52d71.svg) no-repeat;
  background-size: 100%
}

app-my-wallet .wallet ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 9.8vw 0
}

app-my-wallet .wallet ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 5px
}

app-my-wallet .wallet ul li.active,
app-my-wallet .wallet ul li:active,
app-my-wallet .wallet ul li:hover {
  border-color: #957222
}

app-my-wallet .wallet ul li i {
  width: 11.47vw;
  height: 11.47vw
}

app-my-wallet .wallet ul li p {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #4d4d4d;
  padding-top: 6px
}

app-my-wallet .wallet ul li:first-child i {
  background: url(resources/deposit.601eb9c61121d548678e.svg) no-repeat 50%
}

app-my-wallet .wallet ul li:nth-child(2) i {
  background: url(resources/transfer.9cb347cc25f86332c122.svg) no-repeat 50%
}

app-my-wallet .wallet ul li:nth-child(3) i {
  background: url(resources/withdrawal.ebebc5416357b4704698.svg) no-repeat 50%
}

app-my-wallet .wallets {
  display: flex;
  border-bottom: 1px solid #efefef
}

app-my-wallet .wallets .item {
  display: flex;
  align-items: center;
  width: 50%;
  height: 10.67vw;
  border-right: 1px solid #efefef;
  font-size: 15px;
  letter-spacing: 0;
  color: #333;
  padding: 0 6px
}

app-my-wallet .wallets .item p {
  font-size: 14px;
  text-align: center;
  color: #4d4d4d;
  width: 40%
}

app-my-wallet .wallets .item p:nth-child(2) {
  width: 60%;
  font-size: 15px;
  text-align: right;
  padding: 0 5px;
  color: #333;
  word-break: break-all
}

app-my-wallet .btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px 10px
}

app-my-wallet .btn-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46.4vw;
  height: 10.67vw;
  background: #ccc;
  border: 1px solid #e5e5e5;
  color: #fff
}

app-my-wallet .btn-group button:first-child {
  border-radius: 5px 0 0 5px
}

app-my-wallet .btn-group button:nth-child(3) {
  border-radius: 0 5px 5px 0
}

app-my-wallet .btn-group button.active {
  background: linear-gradient(#3178ff, #784dff)
}

app-my-wallet .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 50px;
  padding: 0 14px 0 23px;
  margin: 0 auto 17px;
  border: 1px solid #957222;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 #969696
}

app-my-wallet .options.active,
app-my-wallet .options:active,
app-my-wallet .options:hover {
  border-color: #fff;
  background: #957222
}

app-my-wallet .options.active .arrow,
app-my-wallet .options.active .icon,
app-my-wallet .options:active .arrow,
app-my-wallet .options:active .icon,
app-my-wallet .options:hover .arrow,
app-my-wallet .options:hover .icon {
  background-position-y: 100%
}

app-my-wallet .options.active p,
app-my-wallet .options:active p,
app-my-wallet .options:hover p {
  color: #fff
}

app-my-wallet .options .arrow {
  width: 2.13vw;
  height: 3.2vw;
  background: url(resources/arrow_b.072b5e54d2c5ef52de7a.png) no-repeat;
  background-size: 100%;
  transform: rotate(180deg)
}

app-my-wallet .options p {
  font-size: 15px;
  letter-spacing: 2px;
  color: #8a6a3a
}

app-my-wallet .options .icon {
  width: 5.6vw;
  height: 7.6vw;
  margin: 4px 18px 0 0;
  background: url(resources/walletIC.ad63237bc54a31e54d9e.png) no-repeat;
  background-size: 200%
}

app-my-wallet .options.trans .icon {
  background-position-x: 100%
}

@media only screen and (max-width:320px) {
  app-my-wallet .wallet .content .helf .tips {
    width: 103%;
    bottom: 0
  }
}

app-coupon-wallet .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px 0;
  margin: 0 0 7px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #a67c52
}

app-coupon-wallet .title i {
  width: 4.27vw;
  height: 4.27vw;
  background: url(/tb-mobile/assets/img/refresh.svg) no-repeat 50%
}

app-coupon-wallet .list {
  max-height: calc(3 * (60.27vw + 14px) + 7px);
  padding-bottom: 3vw;
  padding-top: 4px;
  overflow: hidden
}

app-coupon-wallet .list li {
  width: 92.53vw;
  height: 60.27vw;
  margin: 0 auto 14px
}

app-coupon-wallet .list .li-title {
  display: flex;
  align-items: center;
  padding: 0 0 0 17px;
  height: 37px;
  border-bottom: 1px solid #4a59ed;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-coupon-wallet .list .bar-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90.93vw;
  margin: 3px auto 0;
  background: #f8f8f8;
  padding: 10px 20px 15px
}

app-coupon-wallet .list .point {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%
}

app-coupon-wallet .list .point p {
  font-size: 13px;
  letter-spacing: 0;
  color: #666
}

app-coupon-wallet .list .bar {
  width: 100%;
  height: 5px;
  background: #ccc;
  border-radius: 5px;
  margin: 4px 0
}

app-coupon-wallet .list .bar .cur {
  height: 5px;
  background: #cca172;
  border-radius: 5px
}

app-coupon-wallet .list .not-finish {
  font-size: 12px;
  letter-spacing: 1px;
  color: grey
}

app-coupon-wallet .list .finish {
  font-size: 13px;
  letter-spacing: 1px;
  color: #e11515
}

app-coupon-wallet .list .item {
  display: flex;
  align-items: center;
  padding: 12px 0 0 16px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-coupon-wallet .list .item .item-title {
  margin: 0 19px 0 0
}

app-coupon-wallet .list .coupon-btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px 10px
}

app-coupon-wallet .list .coupon-btn-group button {
  width: 41.33vw;
  height: 8.27vw;
  font-size: 13px;
  letter-spacing: 1px
}

app-coupon-wallet .list.isOpen {
  max-height: none
}

app-coupon-wallet .open {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000
}

app-coupon-wallet .open i {
  width: 12px;
  height: 12px;
  margin: 0 0 0 9px;
  transition: transform .5s ease 0s;
  background: url(resources/unfold.2305b61abd1218133cd3.svg) no-repeat 50%
}

app-coupon-wallet .open i.isOpen {
  transform: rotate(180deg)
}

app-platform-wallet .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px 0;
  margin: 0 0 11px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b90b0a
}

app-platform-wallet .title button {
  width: 18.93vw;
  height: 6.13vw;
  font-size: 12px;
  letter-spacing: 1px
}

app-platform-wallet ul {
  display: flex;
  max-height: 300px;
  flex-wrap: wrap;
  height: auto;
  padding: 0 3.6vw;
  overflow: hidden
}

app-platform-wallet ul li {
  margin: 0 1.9vw 12px 0
}

app-platform-wallet ul li:nth-of-type(3n) {
  margin-right: 0
}

app-platform-wallet ul .gray-btn-frame {
  display: block;
  width: 29.66vw;
  min-height: 16.53vw;
  padding: 2.5vw 0 0 11px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-platform-wallet ul .gray-btn-frame .balance {
  margin: 1.5vw 0 0;
  font-size: 17px;
  letter-spacing: 0;
  word-break: break-all;
  color: #000
}

app-platform-wallet ul.isOpen {
  max-height: none
}

app-platform-wallet .open {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000
}

app-platform-wallet .open i {
  width: 12px;
  height: 12px;
  margin: 0 0 0 9px;
  transition: transform .5s ease 0s;
  background: url(resources/unfold.2305b61abd1218133cd3.svg) no-repeat 50%
}

app-platform-wallet .open i.isOpen {
  transform: rotate(180deg)
}

@media only screen and (max-width:320px) {
  app-platform-wallet ul .gray-btn-frame p {
    margin: 0
  }
}

app-transfer .wallet {
  width: 92vw;
  padding: 11px 11px 10px 15px;
  margin: 0 auto 8px
}

app-transfer .wallet>div {
  width: 55%
}

app-transfer .wallet .title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 1px;
  color: #3d4cce
}

app-transfer .wallet .title i {
  width: 4.27vw;
  height: 4.27vw;
  margin: 0 0 0 6px;
  background: url(resources/refresh.21af21dffa596c6a2d6c.svg) no-repeat 50%
}

app-transfer .wallet .title p {
  color: #e11515
}

app-transfer .wallet .title button {
  width: 18.93vw;
  height: 6.13vw;
  font-size: 12px;
  letter-spacing: 1px
}

app-transfer .wallet .amount {
  font-size: 29px;
  letter-spacing: 0;
  color: #272727
}

app-transfer .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-transfer .white-bg:last-child {
  margin: 0
}

app-transfer .auto {
  height: 13.6vw;
  padding: 0 0 0 18px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-transfer .auto,
app-transfer .auto label {
  display: flex;
  align-items: center
}

app-transfer .auto input {
  width: 4.8vw;
  height: 4.8vw;
  margin: 0 4.8vw 0 0;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto
}

app-transfer .operate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13px 0 16px
}

app-transfer .operate input,
app-transfer .operate select {
  width: 92.53vw;
  height: 11.2vw;
  margin: 0 auto 13px
}

app-transfer .operate select {
  padding: 0 0 0 52px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-transfer .operate i {
  display: block;
  position: absolute;
  top: calc((11.2vw - 19px) / 2);
  left: 18px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #e11515
}

.markdown-body .download-md app-transfer .operate a,
.markdown-body app-transfer .operate h3>a.d-btn,
app-date-selector .btn-group app-transfer .operate .active,
app-member-center .user .info app-transfer .operate .innerBtn,
app-quest-detail app-transfer .operate .applyBtn,
app-transfer .operate .markdown-body .download-md a,
app-transfer .operate .markdown-body h3>a.d-btn,
app-transfer .operate .orange_btn,
app-transfer .operate app-date-selector .btn-group .active,
app-transfer .operate app-member-center .user .info .innerBtn,
app-transfer .operate app-quest-detail .applyBtn {
  width: 92.53vw;
  height: 42px;
  line-height: 42px;
  font-size: 14px
}

app-transfer .operate .confirm+.err {
  font-size: 14px;
  padding: 10px;
  text-align: center
}

app-transfer .operate .btns-wrap {
  justify-content: space-around
}

app-transfer .operate .btns-wrap>* {
  width: 45%
}

app-transfer .btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 10px
}

app-transfer .btn-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46.4vw;
  height: 10.67vw;
  background: #ccc;
  border: 1px solid #e5e5e5;
  border-radius: 5px 0 0 5px;
  color: #fff
}

app-transfer .btn-group button:nth-child(2) {
  border-radius: 0 5px 5px 0
}

app-transfer .btn-group button.active {
  background: linear-gradient(#3178ff, #784dff)
}

app-user-info .menu {
  background: #fff
}

app-user-info .menu span {
  display: inline-block;
  height: 41px;
  width: 50vw;
  line-height: 41px;
  text-align: center
}

app-user-info .menu span.active {
  border-bottom: 2px solid #e11515
}

app-user-info .main {
  overflow: scroll;
  width: 100vw;
  height: calc(100vh - 132px);
  margin-top: 2px;
  padding: 10px 0;
  background: #f8f8f8
}

app-user-info .main form {
  background: #fff
}

app-user-info li {
  position: relative;
  width: 100vw;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid #f5f5f5
}

app-user-info li .err {
  width: auto;
  position: absolute;
  right: 17px;
  top: 21px;
  color: red
}

app-user-info .qrcode-data {
  height: auto
}

app-user-info .qrcode-data .qr_box {
  position: relative
}

app-user-info .qrcode-data a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%
}

app-transfer-old-member app-user-info .input_list li>.relative.row,
app-user-info .input_list app-transfer-old-member li>.relative.row,
app-user-info .input_list li>.relative.flex {
  width: 80vw;
  height: 100%;
  align-items: center;
  padding: 0 5px 0 0
}

app-user-info .input_list li em:before {
  content: "※ ";
  color: #e11515;
  padding: 0 5px 0 0
}

app-user-info .input_list li span {
  width: 20vw;
  font-size: 14px;
  color: #595757
}

app-user-info .input_list li .modify-btn {
  min-width: 45px;
  font-size: 13px;
  color: #333;
  background: none
}

app-user-info .input_list li input {
  width: 80vw;
  height: 100%;
  text-align: right;
  font-size: 14px;
  border: none !important
}

app-user-info .input_list li input.canEdit.editing {
  border: 1px solid #b9a889 !important
}

app-user-info .input_list li input.canEdit:read-only {
  border: none
}

app-user-info .input_list li input::placeholder {
  color: #b3b3b3
}

app-user-info .input_list li.error {
  border: 1px solid #b9a889
}

app-user-info .input_list li.error span {
  color: #b9a889
}

app-user-info .btn-commit {
  width: 92vw;
  height: 42px;
  margin: 12px auto
}

app-user-info .bgf8 {
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-items: center;
  color: #333
}

app-user-info .bgf8 li {
  background-color: #fff;
  font-size: 13px;
  color: #595757
}

app-user-info .bgf8 li div input,
app-user-info .bgf8 li div span,
app-user-info .bgf8 li span:last-child {
  color: #000
}

app-user-info .bgf8 button {
  width: 47px;
  height: 29px;
  font-size: 13px;
  color: #b90b0a;
  border: 1px solid #b90b0a;
  background-color: #fff;
  border-radius: 5px;
  margin-left: 22px
}

app-user-info .bgf8 .promo-url input {
  border: none
}

app-user-info .info {
  font-size: 13px;
  color: #333;
  background: #fff
}

app-user-info .info li div:not(.security) {
  display: flex;
  justify-content: center;
  align-items: center
}

app-user-info .info li div:not(.security) i {
  margin: 2px 12px 0 0
}

app-user-info .info li div:not(.security) span.phone {
  margin: 0 0 0 15px;
  letter-spacing: 1px
}

app-user-info .security {
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: left;
  background-color: #fffcf5;
  border: 1px solid #ffe5cd;
  padding: 0 20px;
  border-radius: 5px
}

app-user-info .security span {
  margin-left: 5px
}

app-user-info .security span.high {
  color: #5aa960
}

app-user-info .security span.middle {
  color: #ff8d68
}

app-user-info .security span.low {
  color: red
}

app-user-info .empty {
  color: #ca0000
}

app-user-info .check {
  width: 17px;
  height: 17px;
  background: url(resources/check.d4e016ce3dbf12c39881.svg) no-repeat 50%
}

app-user-info .nocheck {
  width: 17px;
  height: 17px;
  background: url(resources/nocheck.c80d260e1e056b3cccba.png) no-repeat;
  background-size: 100%
}

app-user-info .arr {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%;
  transform: rotate(180deg);
  position: relative;
  top: 0;
  margin-left: 12px
}

app-user-info .err {
  width: 92vw;
  font-size: 12px;
  color: #3d4cce;
  margin: 0 auto;
  padding: 10px 0
}

@media only screen and (max-width:320px) {
  app-user-info .input_list li span {
    width: 22vw
  }

  app-user-info .input_list li input {
    width: 78vw
  }

  app-user-info .promo-url input {
    padding: 0 !important
  }

  app-user-info .bgf8 button {
    margin-left: 10px
  }
}

app-deposit .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-deposit .white-bg:last-child {
  margin: 0
}

app-deposit .method-wrap {
  padding: 2px 0;
  overflow: hidden;
  overflow-x: auto
}

app-deposit .method {
  padding: 11px 0 13px 15px
}

app-deposit .method .title {
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-deposit .method ul {
  display: flex;
  margin: 11px 0 0
}

app-deposit .method ul li {
  flex-shrink: 0;
  position: relative;
  flex-direction: column;
  width: 22.4vw;
  height: 19.2vw;
  margin: 0 5px 0 0;
  background: linear-gradient(#fff 40%, #f4f4f4)
}

app-deposit .method ul li i {
  width: 8.27vw;
  height: 8.27vw;
  background: url(resources/card.223289c5825ac2e8b746.svg) no-repeat 50%;
  background-size: contain
}

app-deposit .method ul li p {
  font-size: 12px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-deposit .method ul li.cvs i {
  background: url(resources/shop.86ab167e1052ea841d57.svg) no-repeat 50%
}

app-deposit .method ul li.atm i {
  background: url(resources/atm.28746836515de8f97311.svg) no-repeat 50%
}

app-deposit .method ul li.usdt i {
  background: url(resources/usdt.f9115c6030e7519a06c7.svg) no-repeat
}

app-deposit .method ul li.alipay i {
  background: url(resources/alipay.cb7c2579b78e74f10533.svg) no-repeat
}

app-deposit .method ul li.unionpay i {
  background: url(resources/unionpay.43f9e48af6f760721050.svg) no-repeat
}

app-deposit .method ul li.credit i {
  background: url(resources/credit.84e6277bb2ab4f7118f2.svg) no-repeat
}

app-deposit .method ul li.online i {
  background: url(resources/bank.285542d6321b24d3db15.svg) no-repeat
}

app-deposit .method ul li.wechat i {
  background: url(resources/wechat.d92bdc1a333c95bc4acd.svg) no-repeat
}

app-deposit .method ul li.quck i {
  background: url(resources/quck.5ce1cb07f511dfc173fc.svg) no-repeat
}

app-deposit .method ul li .frame {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 19.2vw;
  border: 1px solid #e11515;
  border-radius: 5px;
  background: linear-gradient(135deg, transparent, transparent 85%, #e11515 0, #e11515)
}

app-deposit .method ul li .frame .frame-content {
  position: relative;
  width: 22.4vw;
  height: 19.2vw
}

app-deposit .method ul li .frame .frame-content i {
  position: absolute;
  bottom: 1.06vw;
  right: 1.06vw;
  width: 9px;
  height: 9px;
  background: url(resources/tick.b8270a0504a038f4fb46.svg) no-repeat 50%
}

app-deposit .method ul li .frame.active {
  display: block
}

app-deposit .content {
  padding: 15px 0 16px
}

app-deposit .content.bulletin {
  padding: 15px;
  line-height: 1.6;
  color: #333
}

app-deposit .content ul {
  display: flex;
  flex-wrap: wrap;
  width: 92.8vw;
  margin: 0 auto 20px
}

app-deposit .content li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45.33vw;
  height: 15.2vw;
  padding: 0 0 0 4vw;
  margin: 0 2.1vw 1.6vw 0
}

app-deposit .content li i {
  width: 9.6vw;
  height: 9.6vw;
  margin: 0 12px 0 0;
  background: url(resources/seven.b2b7a4fcd5092bb0f962.svg) no-repeat 50%
}

app-deposit .content li p {
  font-size: 18px;
  letter-spacing: 1px;
  color: #333
}

app-deposit .content li:nth-child(2) {
  margin: 0 0 1.6vw
}

app-deposit .content li:nth-child(2) i {
  background: url(resources/fm.4c69a7b4e5ca4d2648b1.svg) no-repeat 50%
}

app-deposit .content li:nth-child(3) i {
  background: url(resources/hilife.77d81bad659f0153b07e.svg) no-repeat 50%
}

app-deposit .content li:nth-child(4) {
  margin: 0 0 1.6vw
}

app-deposit .content li:nth-child(4) i {
  background: url(resources/ok.8f0b216e90cfca5f80bd.svg) no-repeat 50%
}

app-deposit .content .amount {
  width: 92.8vw;
  margin: 0 auto 20px
}

app-deposit .content .amount .amount-title {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-deposit .content .amount p {
  margin: 0 0 28px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-deposit button,
app-deposit input,
app-deposit select {
  width: 92.27vw;
  height: 10.93vw
}

app-deposit .notice {
  width: 92.27vw;
  padding: 14px 15px;
  line-height: 1.5;
  margin: 0 auto;
  background: #fcf9f3;
  border: 1px solid #cca172;
  border-radius: 3px
}

app-deposit .notice .notice-title {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b90b0a
}

app-deposit .notice p {
  font-size: 13px;
  letter-spacing: 1px;
  color: #666
}

app-deposit .notice p.remind {
  color: #e11515;
  font-weight: 700
}

app-deposit .red {
  color: #e11515
}

app-deposit .bank {
  width: 92.8vw;
  margin: 0 auto 20px
}

app-deposit .bank .bank-title {
  display: flex;
  align-items: flex-end;
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-deposit .bank .bank-title p {
  margin: 0 0 0 11px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-deposit .bank .tail {
  display: flex;
  align-items: center;
  margin: 5px 0 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-deposit .bank .tail p {
  margin: 0 0 0 11px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #e11515
}

app-deposit .confirm {
  padding: 19px 0 21px
}

app-deposit .confirm .confirm-title {
  padding: 0 0 0 25px;
  margin: 0 0 31px;
  font-size: 14px;
  color: #e11515
}

app-deposit .confirm .row {
  display: flex;
  align-items: center;
  padding: 0 0 0 25px;
  margin: 0 0 21px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #666
}

app-deposit .confirm .row p {
  margin: 0 0 0 26px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-deposit .confirm .row button {
  margin: 0 0 0 12px;
  width: 12.27vw;
  height: 7.73vw;
  font-size: 13px;
  letter-spacing: 1px
}

app-deposit .confirm .amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 91.73vw;
  height: 24.53vw;
  margin: 0 auto;
  border-radius: 5px;
  background: #fcf9f3;
  border: 1px solid #cca172
}

app-deposit .confirm .amount .number {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  letter-spacing: 2px;
  color: #000
}

app-deposit .confirm .amount p {
  font-size: 12px;
  letter-spacing: 1px;
  color: #e11515
}

app-deposit .confirm .amount button {
  margin: 0 0 0 12px;
  width: 12.27vw;
  height: 7.73vw;
  font-size: 13px;
  letter-spacing: 1px
}

app-deposit .confirm .copy {
  background: #fff;
  border: 1px solid #b90b0a;
  color: #b90b0a;
  border-radius: 3px
}

app-deposit .confirm .btn_remind {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #e11515;
  padding-top: 3px
}

app-deposit .third {
  padding: 15px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

app-deposit .third .row {
  margin: 0 0 20px
}

app-deposit .third .row>p {
  margin: 0 0 10px
}

app-deposit .third .important {
  color: #d31a1a;
  font-size: 12px;
  letter-spacing: 1px
}

.markdown-body .download-md app-deposit a,
.markdown-body app-deposit h3>a.d-btn,
app-date-selector .btn-group app-deposit .active,
app-deposit .markdown-body .download-md a,
app-deposit .markdown-body h3>a.d-btn,
app-deposit .orange_btn,
app-deposit app-date-selector .btn-group .active,
app-deposit app-member-center .user .info .innerBtn,
app-deposit app-quest-detail .applyBtn,
app-member-center .user .info app-deposit .innerBtn,
app-quest-detail app-deposit .applyBtn {
  margin: 25px auto 0
}

app-common-alert .common-alert {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  z-index: 9999
}

app-common-alert .common-alert.quest {
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto;
  padding: 24px 0;
  display: block
}

app-common-alert .common-alert.quest .cnt {
  max-height: none
}

app-common-alert .common-alert.quest .panel.policy {
  margin: 0 auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content
}

app-common-alert .common-alert.quest .panel.policy .cnt {
  padding: 24px 24px 0
}

app-common-alert .common-alert[hidden] {
  display: none !important;
  outline: 1px solid pink
}

app-common-alert .common-alert .panel {
  width: 92vw;
  font-weight: 700;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  overflow: hidden
}

app-common-alert .common-alert .panel.policy {
  width: 87.2vw
}

app-common-alert .common-alert .panel.policy .cnt {
  padding: 24px 63px 0
}

app-common-alert .common-alert .panel.policy .cnt>div {
  overflow: scroll;
  overflow-x: hidden;
  text-align: left
}

app-common-alert .common-alert .panel.policy .btm {
  padding: 18px 0
}

app-common-alert .common-alert .header {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
  background: #e11515
}

app-common-alert .common-alert .cnt {
  color: #4d4d4d;
  font-size: 14px;
  min-height: auto;
  max-height: 75vh;
  overflow: auto;
  padding: 24px 80px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  letter-spacing: 1px;
  color: #666
}

app-common-alert .common-alert .cnt h2 {
  margin: 0 0 15px;
  font-size: 15px;
  letter-spacing: 2px;
  color: #272727;
  font-weight: 700
}

app-common-alert .common-alert .act-cnt input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin: 10px 0 0
}

app-common-alert .common-alert .quest-detail-cnt img {
  width: 100%
}

app-common-alert .common-alert .quest-condition-cnt {
  padding: 10px 0 0
}

app-common-alert .common-alert .quest-condition-cnt .info {
  display: flex;
  font-size: 14px;
  text-align: center;
  justify-content: center;
  border-bottom: 1px solid #e6e6e6
}

app-common-alert .common-alert .quest-condition-cnt .info .max {
  color: grey
}

app-common-alert .common-alert .quest-condition-cnt .info .gain {
  color: #fc4c15
}

app-common-alert .common-alert .quest-condition-cnt .info li {
  width: 33.33%;
  padding: 12px 0
}

app-common-alert .common-alert .quest-condition-cnt .info li p:first-child {
  margin: 0 0 12px
}

app-common-alert .common-alert .quest-condition-cnt .conditions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 60vh;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #333
}

app-common-alert .common-alert .quest-condition-cnt .conditions li:not(:last-child) {
  margin: 0 0 10px
}

app-common-alert .common-alert .btm {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0
}

app-common-alert .common-alert .btm.with-cancel {
  justify-content: space-around;
  justify-content: space-evenly
}

app-common-alert .common-alert .btm.with-cancel button {
  width: 45%
}

app-common-alert .common-alert button {
  width: 92%;
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d);
  border: 1px solid #b90b0a;
  border-radius: 3px;
  color: #fff
}

app-common-alert .common-alert button.active,
app-common-alert .common-alert button:active,
app-common-alert .common-alert button:hover {
  background: linear-gradient(0deg, #e01515 40%, #bd1515)
}

app-common-alert .common-alert button.cancel {
  border: 1px solid
}

app-withdraw .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-withdraw .white-bg:last-child {
  margin: 0
}

app-withdraw .operate-notice,
app-withdraw button,
app-withdraw input,
app-withdraw select {
  width: 92.27vw;
  height: 10.93vw;
  margin: 10px auto 12px
}

app-withdraw .chk {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d);
  border: 1px solid #b90b0a;
  font-size: 15px;
  letter-spacing: 2px;
  color: #fff
}

app-withdraw .chk:active {
  background: linear-gradient(0deg, #e01515 40%, #bd1515)
}

app-withdraw .chk i {
  width: 8px;
  height: 5px;
  margin: 0 0 0 6px;
  position: relative
}

app-withdraw .chk i:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-color: #fff transparent;
  border-style: solid;
  border-width: 7px 4px 0
}

app-withdraw .wallet {
  padding: 0 0 15px;
  background: linear-gradient(180deg, #e11515 0, #e11515 12%, #fff 0, #fff)
}

app-withdraw .wallet .content {
  width: 92vw;
  padding: 10px 14px;
  margin: 0 auto;
  background: #fff;
  font-size: 29px;
  letter-spacing: 0;
  color: #272727
}

app-withdraw .wallet .content .title {
  display: flex;
  align-items: center;
  justify-content: space-between
}

app-withdraw .wallet .content .title span {
  color: #e11515;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center
}

app-withdraw .wallet .content .title span i {
  display: block;
  margin-left: 10px;
  width: 4.27vw;
  height: 4.27vw;
  background: url(resources/refresh.21af21dffa596c6a2d6c.svg) no-repeat 50%
}

app-withdraw .wallet .content .title .reBtn {
  width: auto;
  height: 28px;
  border: 1px solid #b90b0a;
  font-weight: 700;
  color: #fff;
  border-radius: 1vw;
  letter-spacing: 1px;
  font-size: 12px;
  padding: 0 10px;
  margin: 0 0 0 15px
}

app-withdraw .wallet .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 25px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
  letter-spacing: 1px;
  color: #595757;
  position: relative
}

app-withdraw .wallet .row p {
  font-size: 17px;
  letter-spacing: 0;
  color: #272727
}

app-withdraw .wallet .row i {
  width: 16.5px;
  height: 16.5px;
  position: absolute;
  top: 18px;
  left: 64px;
  background: url(resources/problem_red.3444e7dcd0c1bda52d71.svg) no-repeat;
  background-size: 93%
}

app-withdraw .wallet .goAmount-btn {
  width: 70px;
  height: 23px;
  font-size: 12px;
  margin: 0;
  position: relative;
  top: -8px;
  left: -5px
}

app-withdraw .wallet .row2 {
  padding: 0 25px;
  border-bottom: 1px solid #f2f2f2
}

app-withdraw .wallet .row2 .row {
  padding: 0;
  border-bottom: none
}

app-withdraw .operate {
  padding: 10px 0 14px
}

app-withdraw .operate .operate-notice {
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background: #fcf9f3;
  border: 1px solid #cca172;
  border-radius: 5px;
  color: #595757;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  margin-bottom: 10px
}

app-withdraw .operate input,
app-withdraw .operate select {
  display: block
}

app-withdraw .operate .tail {
  display: flex;
  align-items: center;
  width: 92.27vw;
  margin: 5px auto 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999
}

app-withdraw .operate .tail p {
  margin: 0 0 0 11px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #e11515
}

app-withdraw .operate .tail .red {
  color: #e11515
}

app-withdraw .notice {
  width: 92.27vw;
  padding: 14px 0 0 15px;
  margin: 0 auto;
  background: #fcf9f3;
  border: 1px solid #cca172;
  border-radius: 3px
}

app-withdraw .notice .notice-title {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b90b0a
}

app-withdraw .notice div {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #666
}

app-withdraw .notice div p {
  display: inline-block;
  color: #3d4cce
}

app-user-info-platform .menu span {
  display: inline-block;
  height: 41px;
  width: 50vw;
  line-height: 41px;
  text-align: center
}

app-user-info-platform .menu span.active {
  border-bottom: 2px solid #e11515
}

app-user-info-platform .main {
  overflow: scroll;
  width: 100vw;
  height: calc(100vh - 132px);
  margin-top: 2px;
  padding: 10px 0
}

app-user-info-platform li {
  width: 92vw;
  margin: 10px auto;
  border-radius: 5px;
  font-size: 14px
}

app-user-info-platform li button {
  width: 47px;
  height: 29px;
  line-height: 29px;
  font-size: 13px;
  color: #b90b0a;
  border: 1px solid #b90b0a;
  background-color: #fff;
  border-radius: 5px
}

app-user-info-platform li p {
  height: 45px;
  line-height: 45px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between
}

app-user-info-platform li p:first-child {
  border-bottom: 1px solid #e11515
}

app-user-info-platform li p span:first-child {
  color: #4d4d4d;
  min-width: 64px
}

app-user-info-platform li p span:nth-child(2) {
  width: 50%;
  text-align: end
}

app-user-info-platform li p span:nth-child(3) {
  width: 47px
}

app-user-info-platform .no-data {
  text-align: center;
  margin-top: 15px
}

app-bet-log .scroll-wrap {
  height: calc(100vh - 45px - 47px);
  overflow-x: hidden;
  background: #f2f3f3;
  padding: 11px 0 0
}

app-bet-log .white-bg {
  background: #fff;
  margin: 0 0 10px;
  font-weight: 700
}

app-bet-log .white-bg:last-child {
  margin: 0
}

app-bet-log .total,
app-bet-log button {
  width: 92.27vw;
  height: 10.93vw
}

app-bet-log .operate {
  padding: 13px 14px
}

app-bet-log .operate .helf {
  width: 50%
}

app-bet-log .operate .helf p {
  margin: 0 0 5px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000
}

app-bet-log .operate .helf button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 44.27vw;
  height: 11.2vw;
  padding: 0 15px 0 13px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 3px
}

app-bet-log .operate .helf button i {
  width: 9px;
  height: 4px;
  background: url(resources/select.735c6d9475a1ec549a44.svg) no-repeat
}

app-bet-log form {
  width: 92.27vw
}

app-bet-log form li {
  width: 100%;
  margin-bottom: 20px
}

app-bet-log form li>p {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  margin: 10px 0
}

app-bet-log form li:last-child {
  margin-bottom: 0
}

app-bet-log form .type-selector {
  width: 100%;
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  color: #000
}

app-bet-log form .date-selector {
  height: 42px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 3px
}

app-bet-log form .date-selector>input {
  width: 43%;
  border: none !important;
  padding: 0
}

app-bet-log form .date-selector>span {
  width: 5%;
  line-height: 42px;
  text-align: center
}

app-bet-log form .date-selector>div {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0
}

app-bet-log form .date-selector>div i {
  width: 20px;
  height: 100%;
  background: url(resources/date.f99961c7d91012d53e9d.svg) no-repeat;
  background-position: 50%;
  background-size: contain
}

app-bet-log form .date-box {
  display: flex;
  justify-content: center;
  border-radius: 25px
}

app-bet-log form .date-box button {
  width: 25%;
  height: 38px;
  font-size: 15px;
  font-weight: 700;
  color: grey;
  border-radius: 0
}

app-bet-log form .date-box button:first-child {
  border-radius: 3px 0 0 3px
}

app-bet-log form .date-box button:last-child {
  border-radius: 0 3px 3px 0
}

app-bet-log form .date-box app-date-selector .btn-group button.active,
app-bet-log form .date-box app-member-center .user .info button.innerBtn,
app-bet-log form .date-box app-quest-detail button.applyBtn,
app-bet-log form .date-box button.orange_btn,
app-date-selector .btn-group app-bet-log form .date-box button.active,
app-member-center .user .info app-bet-log form .date-box button.innerBtn,
app-quest-detail app-bet-log form .date-box button.applyBtn {
  color: #fff
}

app-bet-log form .btn-confirm {
  width: 100%;
  height: 41px
}

app-bet-log .total {
  display: flex;
  align-items: center;
  padding: 0 0 0 13px;
  margin: 0 auto;
  border: 1px solid #c58282;
  border-radius: 5px;
  background: #f9e4e4;
  font-size: 14px;
  letter-spacing: 1px;
  color: #e11515
}

app-bet-log .total i {
  width: 4.27vw;
  height: 4.27vw;
  margin: 0 10px 0 0;
  background: url(resources/marvel.616874ea233bbc32da25.svg) no-repeat 50%
}

app-bet-log .logs {
  padding: 10px 14px
}

app-bet-log .logs .cnt,
app-bet-log .logs>li {
  margin: 0 0 10px
}

app-bet-log .logs .cnt .result {
  color: red
}

app-bet-log .logs .cnt .title {
  font-size: 21px;
  padding: 13px 20px;
  letter-spacing: 1px;
  color: #000
}

app-bet-log .logs .cnt .data,
app-bet-log .logs .cnt .detail-data {
  margin: 0 0 10px;
  font-size: 13px
}

app-bet-log .logs .cnt .data>li,
app-bet-log .logs .cnt .detail-data>li {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  padding: 6px 20px
}

app-bet-log .logs .cnt .data>li p:first-child,
app-bet-log .logs .cnt .detail-data>li p:first-child {
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d
}

app-bet-log .logs .cnt .detail-data {
  border-top: 1px solid #e11515;
  padding-top: 8px
}

app-bet-log .logs .cnt button {
  width: 100%;
  height: 35px;
  font-size: 13px;
  letter-spacing: 1px;
  background: none;
  border-top: 1px solid #e11515
}

app-bet-log .logs .cnt button i {
  display: inline-block;
  width: 9px;
  height: 16px;
  position: relative;
  top: 3px;
  left: 12px;
  transition: transform .5s ease 0s;
  background: url(resources/arrow_r.f1fe3434e3ea472f0ba7.svg) no-repeat;
  background-size: 100%;
  transform: rotate(-90deg)
}

app-bet-log .logs .cnt button i.isOpen {
  transform: rotate(90deg)
}

app-bet-log .logs .detail-wrap {
  height: 0;
  overflow: auto;
  transition: height .5s;
  background: #fff5f5
}

app-bet-log .logs .detail-wrap div {
  margin-bottom: 7px
}

app-bet-log .logs .detail-wrap .title {
  display: flex;
  justify-content: space-between;
  align-items: center
}

app-bet-log .logs .detail-wrap .date {
  flex: 1;
  font-size: 14px;
  text-align: right;
  color: #4d4d4d
}

app-bet-log .logs .detail-wrap.isOpen {
  height: 357px;
  padding: 12px 8px
}

app-bet-log .no-data {
  text-align: center
}

app-bet-log app-select-alert .dialog ul li:first-child {
  width: 85.5vw
}

@media only screen and (max-width:320px) {
  app-bet-log .logs .detail-wrap .title {
    font-size: 18px
  }

  app-bet-log .logs .detail-wrap .date {
    font-size: 12px
  }
}

app-bet-log .empty-data {
  width: 92.27vw;
  font-size: 14px;
  font-weight: 700;
  color: #999;
  display: flex;
  justify-content: center;
  padding: 80px
}

app-select-alert .dialog {
  width: 92vw
}

app-select-alert .dialog ul {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 3.2vw;
  margin: 0 -2.4vw 0 0
}

app-select-alert .dialog ul li {
  flex-shrink: 0;
  width: 26.93vw;
  min-height: 9.87vw;
  margin: 0 2.4vw 2.4vw 0;
  font-size: 14px;
  color: grey
}

app-select-alert .dialog ul li.active {
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d);
  color: #fff
}

app-date-selector .btn-group {
  display: flex;
  justify-content: center;
  border-radius: 5px;
  font-weight: 700;
  overflow: hidden
}

app-date-selector .btn-group button {
  width: 25%;
  height: 38px;
  font-size: 15px;
  color: grey;
  border-radius: 0
}

app-date-selector .btn-group .active {
  border-radius: 0
}

app-popup-forget-password .dialog {
  width: 87.2vw
}

app-popup-forget-password .dialog .title2 {
  position: relative;
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #848484;
  background: #e11515
}

app-popup-forget-password .dialog .title2 i {
  position: absolute;
  width: 15px;
  height: 15px;
  background: url(resources/close.d7763b665737ab56287e.svg) no-repeat 50%;
  right: 15px;
  top: 15px
}

app-popup-forget-password .dialog .title2 .text-title {
  color: #fff;
  line-height: 50px;
  font-size: 20px
}

app-popup-forget-password input {
  width: 77.6vw;
  height: 9.87vw;
  margin-top: 19px;
  font-size: 14px
}

app-popup-forget-password input::placeholder {
  color: #b3b3b3
}

app-popup-forget-password form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 15px
}

app-popup-forget-password form button {
  width: 77.6vw;
  height: 11.2vw;
  margin: 10.13vw 0 8vw
}

app-popup-forget-password form .err {
  margin: 5px 0
}

.markdown-body .download-md app-popup-forget-password form a,
.markdown-body app-popup-forget-password form h3>a.d-btn,
app-date-selector .btn-group app-popup-forget-password form .active,
app-member-center .user .info app-popup-forget-password form .innerBtn,
app-popup-forget-password form .markdown-body .download-md a,
app-popup-forget-password form .markdown-body h3>a.d-btn,
app-popup-forget-password form .orange_btn,
app-popup-forget-password form app-date-selector .btn-group .active,
app-popup-forget-password form app-member-center .user .info .innerBtn,
app-popup-forget-password form app-quest-detail .applyBtn,
app-quest-detail app-popup-forget-password form .applyBtn {
  margin-top: 15px;
  margin-bottom: 0
}

app-popup-forget-password p {
  font-size: 14px;
  line-height: 31px;
  color: #b0b0b1
}

app-popup-forget-password p.small-text {
  margin: 10px 0
}

app-join-us .bg {
  height: calc(100vh - 45px - 47px);
  background: url(resources/joinus_bg.e5bcf465425658887ea1.png) no-repeat 50%;
  background-size: cover;
  overflow: scroll
}

app-join-us content {
  width: 100vw;
  overflow: hidden
}

app-join-us .content-ul {
  transition: transform .5s ease 0s;
  padding: 0 0 50px
}

app-join-us .item {
  padding: 19px 0 0
}

app-join-us .item .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 45px;
  margin: 0 0 16px;
  text-align: center;
  font-size: 40px;
  letter-spacing: 0;
  color: #3d4cce
}

app-join-us .item .title p {
  margin: 10px 0 0;
  font-size: 18px;
  letter-spacing: 3px
}

app-join-us .item .title .black {
  font-size: 12px;
  letter-spacing: 1px;
  color: #333
}

app-join-us .item ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10.6vw
}

app-join-us .item ul li {
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: #cc8b43
}

app-join-us .item ul li .icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: url(resources/accurate.0b5b0de2c0dd65210cdc.svg) no-repeat 50%
}

app-join-us .item ul li p {
  text-align: center;
  margin: 12px auto
}

app-join-us .item ul li button {
  flex-direction: column;
  width: 23.47vw;
  height: 20.53vw
}

app-join-us .item ul li button i {
  width: 8.8vw;
  height: 8vw;
  margin: 0 0 5px;
  background: url(resources/24hr.74e130fd7bb843e227dd.svg) no-repeat 50%
}

app-join-us .item ul li:nth-child(2) .icon {
  background: url(resources/quality.c269fb7cba2001a337dc.svg) no-repeat 50%
}

app-join-us .item ul li:nth-child(2) button i {
  background: url(resources/line.d92844e10600722b911c.svg) no-repeat 50%
}

app-join-us .item ul li:nth-child(3) .icon {
  background: url(resources/commission.b895ed76ae815f4ef9ae.svg) no-repeat 50%
}

app-join-us .item ul li:nth-child(3) button i {
  background: url(resources/wechat.de82145a682d266f24bd.svg) no-repeat 50%
}

app-join-us .item .photo {
  width: 70.4vw;
  height: 51.2vw;
  margin: 15px auto;
  background: url(resources/join_01.5e0196b6ea43d8bb5a30.png) no-repeat 50%;
  background-size: contain
}

app-join-us .item .join {
  width: 84vw;
  height: 40px;
  margin: 0 auto;
  border-radius: 5px;
  color: #fff
}

app-join-us .item .join:active {
  background: linear-gradient(0deg, #e01515 40%, #bd1515)
}

app-join-us .item .text {
  font-size: 12px;
  letter-spacing: 1px;
  color: #333
}

app-join-us .item .top {
  padding: 0 13.86vw
}

app-join-us .item .left {
  width: 40vw;
  margin: 5px 0 0;
  line-height: 29px
}

app-join-us .item .phone {
  width: 37.6vw;
  height: 67.2vw;
  background: url(resources/join_02.3f295c78161e060ddb5a.png) no-repeat 50%;
  background-size: contain
}

app-join-us .item:nth-child(2) ul {
  padding: 0 13.86vw
}

app-join-us .item:nth-child(2) ul li .icon {
  background: url(resources/abundant.7fd6877a2a5f53196545.svg) no-repeat 50%
}

app-join-us .item:nth-child(2) ul li:nth-child(2) .icon {
  background: url(resources/stable.2e9196316615126567b9.svg) no-repeat 50%
}

app-join-us .item:nth-child(2) ul li:nth-child(3) .icon {
  background: url(resources/secret.00aabe4db15b5745bc2e.svg) no-repeat 50%
}

app-join-us .item:nth-child(2) ul li:nth-child(4) .icon {
  background: url(resources/safety.5826fa11890155398802.svg) no-repeat 50%
}

app-join-us .item:nth-child(3) .title {
  margin: 0 0 30px
}

app-join-us .item:nth-child(3) ul {
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  padding: 0 5.66vw
}

app-join-us .item:nth-child(3) ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43.73vw;
  height: 24.8vw;
  margin: 0 0 6px;
  border-radius: 10px
}

app-join-us .item:nth-child(3) ul li .inner {
  display: flex
}

app-join-us .item:nth-child(3) ul li .inner .row {
  padding: 8px 0 0 11px;
  font-size: 25px;
  letter-spacing: 3px;
  color: #fff
}

app-join-us .item:nth-child(3) ul li .inner .row p {
  margin: 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fff;
  opacity: .8
}

app-join-us .item:nth-child(3) ul li .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 24px;
  padding: 0 18px 0 11px;
  background: rgba(0, 0, 0, .3);
  border-radius: 0 0 10px 10px;
  color: #fff
}

app-join-us .item:nth-child(3) ul li .bottom p {
  margin: 0
}

app-join-us .item .description {
  width: 88.26vw;
  padding: 11px 16px;
  margin: 20px auto 0;
  background: #fff;
  font-size: 13px;
  line-height: 23px;
  letter-spacing: 1px;
  color: #4d4d4d
}

@media only screen and (max-width:360px) {
  app-join-us .item .title {
    font-size: 38px
  }

  app-join-us .item .left {
    line-height: 1.6
  }

  app-join-us .item .description {
    line-height: 1.5;
    margin: 10px auto 0
  }

  app-join-us .item ul li button {
    font-size: 12px
  }

  app-join-us .item .photo {
    width: 58.4vw;
    height: 46.2vw;
    margin: 8px auto 0
  }

  app-join-us .item .phone {
    height: 57.2vw
  }

  app-join-us .item:nth-child(3) .title {
    margin: 0 0 10px
  }

  app-join-us .item:nth-child(3) ul li .inner .row {
    font-size: 18px
  }

  app-join-us .item:nth-child(3) ul li .bottom {
    padding: 0 5px;
    font-size: 12px
  }
}

app-popup-terms .dialog {
  width: 87.2vw;
  height: 68vh
}

app-popup-terms .dialog .title {
  position: relative;
  height: 45px;
  width: 100%;
  text-align: center;
  line-height: 45px;
  font-size: 18px;
  color: #fff
}

app-popup-terms button {
  width: 77.6vw;
  height: 11.2vw;
  margin: 10.13vw 0 8vw
}

.markdown-body .download-md app-popup-terms a,
.markdown-body app-popup-terms h3>a.d-btn,
app-date-selector .btn-group app-popup-terms .active,
app-member-center .user .info app-popup-terms .innerBtn,
app-popup-terms .markdown-body .download-md a,
app-popup-terms .markdown-body h3>a.d-btn,
app-popup-terms .orange_btn,
app-popup-terms app-date-selector .btn-group .active,
app-popup-terms app-member-center .user .info .innerBtn,
app-popup-terms app-quest-detail .applyBtn,
app-quest-detail app-popup-terms .applyBtn {
  margin: 15px auto
}

app-popup-terms .overflow {
  overflow: scroll;
  height: calc(68vh - 120px)
}

app-popup-terms .overflow summary {
  display: none
}

app-popup-terms .overflow summary+div {
  padding: 0;
  box-shadow: none
}

app-download-app .main {
  overflow: scroll;
  width: 100vw;
  height: calc(100vh - 92px);
  padding: 10px
}

app-download-app ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

app-download-app li {
  width: 44vw;
  height: 127px;
  border-radius: 5px;
  border: 1px solid #dbdbdb;
  padding: 2px;
  margin-bottom: 20px
}

app-download-app li img {
  width: 100%;
  height: 96px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #dbdbdb
}

app-download-app li p {
  font-size: 18px;
  color: #848484;
  text-align: center;
  line-height: 18px
}

app-download-app li p i {
  background: url(resources/download.a64b96c0140333c4508d.svg) no-repeat 50%;
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-left: 8px
}

app-popup-edit-pwd .dialog {
  width: 87.2vw
}

app-popup-edit-pwd .dialog .title {
  height: 45px
}

app-popup-edit-pwd input {
  width: 77.6vw;
  height: 9.87vw;
  margin-top: 19px
}

app-popup-edit-pwd form {
  display: flex;
  flex-direction: column;
  align-items: center
}

app-popup-edit-pwd form button {
  width: 77.6vw;
  height: 11.2vw;
  margin: 10.13vw 0 8vw
}

app-popup-edit-pwd form .err {
  margin: 5px 18px;
  align-self: self-start
}

app-combine-quest-apply {
  width: 100%
}

app-combine-quest-apply .list {
  outline: 1px solid pink;
  height: calc(100vh - 45px - 40px - 47px);
  padding: 10px 4% 0;
  overflow: scroll
}

app-combine-quest-apply .list>li {
  margin-bottom: 50px;
  border-radius: 13px;
  box-shadow: 0 0 13px 2px #dedede;
  background: #fff;
  border: 2px solid red
}

app-combine-quest-apply .header {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ea232d;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #e11515;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 0 10px
}

app-combine-quest-apply .header span {
  font-size: 14px;
  margin: 0 0 0 15px;
  color: #ff0
}

app-combine-quest-apply .btn-group {
  margin: 0;
  padding: 15px 12px;
  justify-content: space-between
}

app-combine-quest-apply .btn-group button {
  flex: 1;
  height: 32px;
  margin: 0 5px;
  border-radius: 3px;
  font-size: 16px;
  letter-spacing: 1px
}

app-combine-quest-apply .btn-group button:disabled {
  color: #fff
}

app-combine-quest-apply .btn-group .activity_btn {
  color: #b90b0a;
  border: 1px solid;
  background: none
}

app-combine-quest-apply .cheerup {
  position: absolute;
  width: 80vw;
  top: -35px;
  left: 11%;
  padding: 5px 12px;
  font-size: 13px;
  color: #fff;
  background: #557bff;
  border-radius: 5px
}

app-combine-quest-apply .cheerup .val,
app-combine-quest-apply .cheerup em {
  color: #ff0;
  margin: 0 5px
}

app-combine-quest-apply .cheerup:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: -7px;
  left: 11%;
  border-color: #557aff transparent transparent;
  border-style: solid;
  border-width: 10px 5px 0
}

app-combine-quest-apply .tips {
  width: 56vw;
  border-radius: 5px;
  margin: 6px auto 0;
  background: #fc4d14;
  box-sizing: border-box;
  padding: 7px 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 3vw;
  position: relative
}

app-combine-quest-apply .tips:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-color: #fc4d14 transparent;
  border-style: solid;
  border-width: 0 4px 6px
}

app-combine-quest-apply .tips em {
  color: #ff0;
  margin-right: 5px
}

app-combine-quest-apply .items>li {
  display: flex;
  justify-content: space-between;
  padding: 5px 13px
}

app-combine-quest-apply .items>li.current {
  background: #fcf9f3
}

app-combine-quest-apply .items label {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 12px 0 0;
  color: #4d4d4d;
  flex-shrink: 0
}

app-combine-quest-apply .items p {
  font-size: 13px;
  color: #000;
  text-align: end
}

app-combine-quest-apply .items em {
  color: #ab0000
}

app-combine-quest-apply .items em.green {
  color: #39b54a
}

app-combine-quest-apply .current .cheerup {
  width: 40%;
  top: -16px;
  left: 100px
}

app-combine-quest-apply .current .cheerup:after {
  width: 0;
  height: 0;
  border-color: transparent #557bff transparent transparent;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  bottom: 9px;
  left: -9px
}

app-combine-quest-apply .check-btn {
  padding: 0 10px;
  font-size: 14px;
  color: #666;
  border-radius: 3px;
  border: 1px solid #bfbfbf
}

app-combine-quest-apply .stages-table li {
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0 3px
}

app-combine-quest-apply .stages-table li p {
  width: 33.33%;
  text-align: center
}

app-combine-quest-apply .stage-header {
  font-size: 14px;
  color: #333;
  background: #fff8f2
}

app-combine-quest-apply .stage-cnt {
  font-size: 13px
}

app-combine-quest-apply .stage-cnt li:nth-child(2n) {
  background: #f7f7f7
}

app-combine-quest-apply .stage-cnt>li.reach {
  box-shadow: 0 0 1px 2px #fc4c15;
  position: relative;
  z-index: 1
}

app-combine-quest-apply .stage-cnt .max {
  color: grey
}

app-combine-quest-apply .stage-cnt .gain {
  color: #fc4c15
}

app-combine-quest-apply .no-data {
  font-size: 14px;
  display: flex;
  justify-content: center;
  padding: 80px
}

app-quest-record .record .r-header {
  font-size: 14px
}

app-quest-record .record .r-header .status_label {
  color: #4d4d4d
}

app-quest-record .record .r-header .status {
  font-size: 13px;
  color: #000
}

app-quest-record .record .r-detail li {
  font-size: 14px;
  color: #4d4d4d
}

app-quest-record .record .r-detail li .num {
  font-size: 13px;
  color: #000
}

app-amount-record {
  width: 100%;
  background: #fff
}

app-amount-record .record-table {
  padding: 17px 20px;
  height: calc(100vh - 51px - 56px - 38px - 66px);
  overflow: auto;
  font-size: 13px
}

app-amount-record .record-table ul {
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 0 13px 2px #dedede;
  margin: 0 0 10px
}

app-amount-record .record-table ul li {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  margin: initial
}

app-amount-record .record-table ul li.wPs {
  display: block;
  height: auto;
  padding: 10px 14px
}

app-amount-record .record-table ul li.wPs>div {
  padding: 10px 12px;
  background: #f5f5f5
}

app-amount-record .record-table ul li.wPs .ps-cnt {
  margin: 10px 0 0;
  color: grey;
  line-height: 1.5
}

app-amount-record .record-table ul li.btns {
  height: auto;
  padding: 12px 14px
}

app-amount-record .record-table ul li.btns button {
  width: calc((100% - 18px) / 2);
  height: 31px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 3px;
  background: none
}

app-amount-record .record-table ul li.btns button:disabled {
  background: #e6e6e6;
  color: #b3b3b3;
  border: none
}

app-amount-record .record-table ul li.btns .b-btn,
app-amount-record .record-table ul li.btns .d-btn {
  color: #e11515;
  border: 1px solid
}

app-amount-record .record-table ul li p {
  font-size: 13px;
  margin: initial;
  color: #1a1a1a
}

app-amount-record .record-table ul li p.wShift {
  color: #42a600
}

app-amount-record .record-table ul li:not(:first-of-type) p:first-child {
  color: #383838;
  letter-spacing: 1px
}

app-amount-record .record-table ul .header {
  height: 37px;
  justify-content: start;
  justify-content: flex-start;
  border-bottom: 2px solid #e11515;
  padding: 0 14px 0 0;
  border-radius: 5px 5px 0 0
}

app-amount-record .record-table ul .header .no {
  margin: 0 14px
}

app-amount-record .panel {
  width: 89vw;
  height: calc(100vh - 60px);
  font-weight: 700;
  background: #fff;
  border-radius: 3px;
  padding: 16px 14px 0;
  position: relative
}

app-amount-record .panel>.header {
  padding: 0 0 10px;
  border-bottom: 1px solid #e11515
}

app-amount-record .panel .header {
  position: relative;
  font-size: 20px;
  line-height: 83px;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px
}

app-amount-record .panel .header p {
  line-height: 1
}

app-amount-record .panel .header .no {
  font-size: 15px
}

app-amount-record .panel .title {
  letter-spacing: 2px;
  color: #1a1a1a;
  margin: 0 0 14px
}

app-amount-record .panel .close-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(resources/close2.192c55493635aad45113.svg) no-repeat 50%
}

app-amount-record .panel .cnt {
  height: calc(100% - 69px - 79px);
  padding: 5px 5px 40px;
  font-size: 14px;
  background: #ffe5e5;
  overflow: scroll
}

app-amount-record .panel .table {
  font-size: 13px;
  padding-bottom: 20px
}

app-amount-record .panel .table ul {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
  margin: 0 0 10px
}

app-amount-record .panel .table ul li {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  margin: initial
}

app-amount-record .panel .table ul li.wPs {
  display: block;
  height: auto;
  padding: 10px 14px
}

app-amount-record .panel .table ul li.wPs>div {
  padding: 10px 12px;
  background: #f5f5f5
}

app-amount-record .panel .table ul li.wPs .ps-cnt {
  margin: 10px 0 0;
  color: grey;
  line-height: 1.5
}

app-amount-record .panel .table ul li p {
  font-size: 14px;
  margin: initial;
  color: #4d4d4d
}

app-amount-record .panel .table ul li p.wShift {
  color: #fc4d14
}

app-amount-record .panel .table ul li p.wMoney {
  color: #42a600
}

app-amount-record .panel .table ul li:not(:first-of-type) p:first-child {
  color: #383838;
  letter-spacing: 1px
}

app-amount-record .panel .table ul .header {
  justify-content: start;
  justify-content: flex-start;
  border-radius: 6px 6px 0 0
}

app-amount-record .panel .table ul .header p {
  color: #000;
  font-size: 21px
}

app-amount-record .panel .drawback-sum {
  width: 100%;
  padding: 0 15px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 69px;
  border-top: 1px solid #b9a889
}

app-amount-record .panel .drawback-sum em {
  font-size: 16px;
  margin: 0 0 0 10px
}

app-amount-record .panel .drawback .table ul {
  border-radius: 0
}

app-amount-record .panel .drawback .table ul .header {
  height: 7px;
  border-radius: 0
}

app-activity-log,
app-drawback,
app-withdraw-bet-record {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  z-index: 999
}

app-activity-log .record-table {
  padding: 17px 20px;
  height: calc(100vh - 51px - 56px - 38px - 66px);
  overflow: auto;
  font-size: 13px
}

app-activity-log .record-table ul {
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 0 13px 2px #dedede;
  margin: 0 0 10px
}

app-activity-log .record-table ul li {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  margin: initial
}

app-activity-log .record-table ul li.wPs {
  display: block;
  height: auto;
  padding: 10px 14px
}

app-activity-log .record-table ul li.wPs>div {
  padding: 10px 12px;
  background: #f5f5f5
}

app-activity-log .record-table ul li.wPs .ps-cnt {
  margin: 10px 0 0;
  color: grey;
  line-height: 1.5
}

app-activity-log .record-table ul li.btns {
  height: auto;
  padding: 12px 14px
}

app-activity-log .record-table ul li.btns button {
  width: calc((100% - 18px) / 2);
  height: 31px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 3px;
  background: none
}

app-activity-log .record-table ul li.btns button:disabled {
  background: #e6e6e6;
  color: #b3b3b3;
  border: none
}

app-activity-log .record-table ul li.btns .b-btn,
app-activity-log .record-table ul li.btns .d-btn {
  color: #e11515;
  border: 1px solid
}

app-activity-log .record-table ul li p {
  font-size: 13px;
  margin: initial;
  color: #1a1a1a
}

app-activity-log .record-table ul li p.wShift {
  color: #42a600
}

app-activity-log .record-table ul li:not(:first-of-type) p:first-child {
  color: #383838;
  letter-spacing: 1px
}

app-activity-log .record-table ul .header {
  height: 37px;
  justify-content: start;
  justify-content: flex-start;
  border-bottom: 2px solid #e11515;
  padding: 0 14px 0 0;
  border-radius: 5px 5px 0 0
}

app-activity-log .record-table ul .header .no {
  margin: 0 14px
}

app-activity-log .panel {
  width: 89vw;
  height: calc(100vh - 60px);
  font-weight: 700;
  background: #fff;
  border-radius: 3px;
  padding: 16px 14px 0;
  position: relative
}

app-activity-log .panel>.header {
  padding: 0 0 10px;
  border-bottom: 1px solid #e11515
}

app-activity-log .panel .header {
  position: relative;
  font-size: 20px;
  line-height: 83px;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px
}

app-activity-log .panel .header p {
  line-height: 1
}

app-activity-log .panel .header .no {
  font-size: 15px
}

app-activity-log .panel .title {
  letter-spacing: 2px;
  color: #1a1a1a;
  margin: 0 0 14px
}

app-activity-log .panel .close-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(resources/close2.192c55493635aad45113.svg) no-repeat 50%
}

app-activity-log .panel .cnt {
  height: calc(100% - 69px - 79px);
  padding: 5px 5px 40px;
  font-size: 14px;
  background: #ffe5e5;
  overflow: scroll
}

app-activity-log .panel .table {
  font-size: 13px;
  padding-bottom: 20px
}

app-activity-log .panel .table ul {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
  margin: 0 0 10px
}

app-activity-log .panel .table ul li {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  margin: initial
}

app-activity-log .panel .table ul li.wPs {
  display: block;
  height: auto;
  padding: 10px 14px
}

app-activity-log .panel .table ul li.wPs>div {
  padding: 10px 12px;
  background: #f5f5f5
}

app-activity-log .panel .table ul li.wPs .ps-cnt {
  margin: 10px 0 0;
  color: grey;
  line-height: 1.5
}

app-activity-log .panel .table ul li p {
  font-size: 14px;
  margin: initial;
  color: #4d4d4d
}

app-activity-log .panel .table ul li p.wShift {
  color: #fc4d14
}

app-activity-log .panel .table ul li p.wMoney {
  color: #42a600
}

app-activity-log .panel .table ul li:not(:first-of-type) p:first-child {
  color: #383838;
  letter-spacing: 1px
}

app-activity-log .panel .table ul .header {
  justify-content: start;
  justify-content: flex-start;
  border-radius: 6px 6px 0 0
}

app-activity-log .panel .table ul .header p {
  color: #000;
  font-size: 21px
}

app-activity-log .panel .drawback-sum {
  width: 100%;
  padding: 0 15px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 69px;
  border-top: 1px solid #b9a889
}

app-activity-log .panel .drawback-sum em {
  font-size: 16px;
  margin: 0 0 0 10px
}

app-activity-log .panel .drawback .table ul {
  border-radius: 0
}

app-activity-log .panel .drawback .table ul .header {
  height: 7px;
  border-radius: 0
}

app-activity-log .panel .title {
  font-size: 20px;
  padding: 0
}

app-activity-log .panel .table ul li {
  width: 100%
}

app-activity-log .no-data {
  line-height: 80px;
  text-align: center
}

app-user-info-set-phone .dialog {
  width: 87.2vw
}

app-user-info-set-phone .dialog .title {
  height: 45px
}

app-user-info-set-phone .err {
  position: absolute;
  top: 9.87vw
}

app-user-info-set-phone input {
  width: 77.6vw;
  height: 9.87vw;
  margin-top: 19px
}

app-user-info-set-phone .cnt {
  padding: 10px 0;
  text-align: center
}

app-user-info-set-phone .cnt li {
  width: 100%;
  height: 60px
}

app-user-info-set-phone .cnt li .err {
  top: 60px;
  padding: 0
}

app-user-info-set-phone button {
  background: none;
  letter-spacing: 1px
}

app-user-info-set-phone .code-btn {
  height: 28px;
  padding: 0 5px;
  font-size: 14px;
  position: absolute;
  top: calc(50% - 5px);
  right: 7vw;
  border-radius: 3px;
  color: #b90b0a;
  border: 1px solid
}

app-user-info-set-phone .btn {
  text-align: center
}

app-user-info-set-phone .btn button {
  width: 77.6vw;
  height: 11.2vw;
  margin: 3vw 0;
  color: #fff;
  border: 1px solid #cca172;
  border-radius: 3px;
  background: linear-gradient(180deg, #ea232d 0, #a80d0c 50%, #ea232d)
}

app-user-info-set-phone .tips {
  font-size: 16px;
  padding: 0;
  margin: 20px;
  text-align: center;
  color: #ff2e2e
}

app-loading {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  z-index: 999
}

app-loading .panel {
  width: 80vw;
  height: 256px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden
}

app-loading .header {
  height: 50px;
  line-height: 50px;
  font-size: 21px;
  letter-spacing: 2px;
  color: #fff;
  background: #e11515;
  background-size: cover
}

app-loading .cnt {
  height: 206px;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 44px;
  text-align: center;
  color: #4d4d4d
}

app-loading i {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: url(resources/loading_b.f57290e3da4312104b79.svg);
  animation: spiner 1.2s linear infinite;
  margin: 0 0 30px
}

@keyframes spiner {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

app-special .specialWrap {
  width: 100%;
  height: calc(100vh - 95px);
  box-sizing: border-box;
  padding: 10px;
  overflow-y: auto
}

app-special .specialWrap ul {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 8px
}

app-special .specialWrap ul a {
  width: auto;
  height: auto;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .5019607843137255);
  font-size: 0;
  overflow: hidden
}

app-special .specialWrap ul a .textBox {
  width: 100%;
  height: 9vw;
  background: linear-gradient(180deg, #e60000 0, #800808);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 8px
}

app-special .specialWrap ul a .textBox p {
  color: #fff;
  font-size: 3.7vw;
  font-weight: 700
}

app-special .specialWrap ul a .textBox i {
  display: block;
  width: 4vw;
  height: 4vw
}

app-special .specialWrap img {
  width: 100%;
  object-fit: contain
}

app-special .specialWrap .arrow_ic {
  background: url(resources/arrow.1167a43c8dce2dba2df7.png) no-repeat;
  background-size: contain
}