quasar-framework/dist/quasar.ios.styl

/*!
 * Quasar Framework v0.17.20
 * (c) 2016-present Razvan Stoenescu
 * Released under the MIT License.
 */
$space-base   ?= 16px
$space-x-base ?= $space-base
$space-y-base ?= $space-base
$spaces ?= {
  none: {
    x: 0,
    y: 0
  },
  xs: {
    x: ($space-x-base * .25),
    y: ($space-y-base * .25)
  },
  sm: {
    x: ($space-x-base * .5),
    y: ($space-y-base * .5)
  },
  md: {
    x: $space-x-base,
    y: $space-y-base
  },
  lg: {
    x: ($space-x-base * 1.5),
    y: ($space-y-base * 1.5)
  },
  xl: {
    x: ($space-x-base * 3),
    y: ($space-y-base * 3)
  }
}
$breakpoint-xs ?= 575px
$breakpoint-sm ?= 767px
$breakpoint-md ?= 991px
$breakpoint-lg ?= 1199px
$flex-cols      ?= 12
$flex-gutter-xs ?= 8px
$flex-gutter-sm ?= 16px
$flex-gutter-md ?= 32px
$flex-gutter-lg ?= 48px
$flex-gutter-xl ?= 64px
$body-background ?= white
$body-color      ?= #0c0c0c
$flex-gutter ?= {
  none: 0,
  xs: $flex-gutter-xs,
  sm: $flex-gutter-sm,
  md: $flex-gutter-md,
  lg: $flex-gutter-lg,
  xl: $flex-gutter-xl
}
$sizes ?= {
  xs: 0,
  sm: $breakpoint-xs + 1, 
  md: $breakpoint-sm + 1, 
  lg: $breakpoint-md + 1, 
  xl: $breakpoint-lg + 1  
}
$breakpoint-xs-min ?= 0
$breakpoint-xs-max ?= $breakpoint-xs
$breakpoint-sm-min ?= $sizes[sm]
$breakpoint-sm-max ?= $breakpoint-sm
$breakpoint-md-min ?= $sizes[md]
$breakpoint-md-max ?= $breakpoint-md
$breakpoint-lg-min ?= $sizes[lg]
$breakpoint-lg-max ?= $breakpoint-lg
$breakpoint-xl-min ?= $sizes[xl]
$breakpoint-xl-max ?= 9999px
$backdrop-opacity    ?= .3
$backdrop-background ?= rgba(0, 0, 0, $backdrop-opacity)
$router-link-active       ?= router-link-active
$router-link-exact-active ?= router-link-exact-active
$headings ?= {
  display-4: {
    size: 112px,
    weight: 300,
    opacity: .54,
    line-height: $min-line-height,
    letter-spacing: -.04em
  },
  display-3: {
    size: 56px,
    weight: 400,
    opacity: .54,
    line-height: 1.35,
    letter-spacing: -.02em
  },
  display-2: {
    size: 45px,
    weight: 400,
    opacity: .54,
    line-height: 48px,
    letter-spacing: normal
  },
  display-1: {
    size: 34px,
    weight: 400,
    opacity: .54,
    line-height: 40px,
    letter-spacing: normal
  },
  headline: {
    size: 24px,
    weight: 400,
    opacity: .87
    line-height: 32px,
    letter-spacing: normal
  },
  title: {
    size: 20px,
    weight: 500,
    opacity: .87
    line-height: $min-line-height,
    letter-spacing: .02em
  },
  subheading: {
    size: 16px,
    weight: 400,
    opacity: .87
  },
  body-2: {
    size: 14px,
    weight: 500,
    opacity: .87
  },
  body-1: {
    size: 14px,
    weight: 400,
    opacity: .87
  },
  caption: {
    size: 12px,
    weight: 400,
    opacity: .54
  }
}
$h-tags ?= {
  h1: $headings.display-4,
  h2: $headings.display-3,
  h3: $headings.display-2,
  h4: $headings.display-1,
  h5: $headings.headline,
  h6: $headings.title
}
$text-weights ?= {
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  bolder: 900
}
$primary   ?= #027be3
$secondary ?= #26A69A
$tertiary  ?= #555
$positive  ?= #21BA45
$negative  ?= #DB2828
$info      ?= #31CCEC
$warning   ?= #F2C037
$light     ?= #bdbdbd
$dark      ?= #424242
$faded     ?= #777
$form-light    ?= #a7a7a7
$form-dark     ?= #979797
$form-autofill ?= #ff9800
$dimmed-background       ?= rgba(0, 0, 0, .4)
$light-dimmed-background ?= rgba(255, 255, 255, .6)
$red = #f44336
$red-1 = #ffebee
$red-2 = #ffcdd2
$red-3 = #ef9a9a
$red-4 = #e57373
$red-5 = #ef5350
$red-6 = #f44336
$red-7 = #e53935
$red-8 = #d32f2f
$red-9 = #c62828
$red-10 = #b71c1c
$red-11 = #ff8a80
$red-12 = #ff5252
$red-13 = #ff1744
$red-14 = #d50000
$pink = #e91e63
$pink-1 = #fce4ec
$pink-2 = #f8bbd0
$pink-3 = #f48fb1
$pink-4 = #f06292
$pink-5 = #ec407a
$pink-6 = #e91e63
$pink-7 = #d81b60
$pink-8 = #c2185b
$pink-9 = #ad1457
$pink-10 = #880e4f
$pink-11 = #ff80ab
$pink-12 = #ff4081
$pink-13 = #f50057
$pink-14 = #c51162
$purple = #9c27b0
$purple-1 = #f3e5f5
$purple-2 = #e1bee7
$purple-3 = #ce93d8
$purple-4 = #ba68c8
$purple-5 = #ab47bc
$purple-6 = #9c27b0
$purple-7 = #8e24aa
$purple-8 = #7b1fa2
$purple-9 = #6a1b9a
$purple-10 = #4a148c
$purple-11 = #ea80fc
$purple-12 = #e040fb
$purple-13 = #d500f9
$purple-14 = #aa00ff
$deep-purple = #673ab7
$deep-purple-1 = #ede7f6
$deep-purple-2 = #d1c4e9
$deep-purple-3 = #b39ddb
$deep-purple-4 = #9575cd
$deep-purple-5 = #7e57c2
$deep-purple-6 = #673ab7
$deep-purple-7 = #5e35b1
$deep-purple-8 = #512da8
$deep-purple-9 = #4527a0
$deep-purple-10 = #311b92
$deep-purple-11 = #b388ff
$deep-purple-12 = #7c4dff
$deep-purple-13 = #651fff
$deep-purple-14 = #6200ea
$indigo = #3f51b5
$indigo-1 = #e8eaf6
$indigo-2 = #c5cae9
$indigo-3 = #9fa8da
$indigo-4 = #7986cb
$indigo-5 = #5c6bc0
$indigo-6 = #3f51b5
$indigo-7 = #3949ab
$indigo-8 = #303f9f
$indigo-9 = #283593
$indigo-10 = #1a237e
$indigo-11 = #8c9eff
$indigo-12 = #536dfe
$indigo-13 = #3d5afe
$indigo-14 = #304ffe
$blue = #2196f3
$blue-1 = #e3f2fd
$blue-2 = #bbdefb
$blue-3 = #90caf9
$blue-4 = #64b5f6
$blue-5 = #42a5f5
$blue-6 = #2196f3
$blue-7 = #1e88e5
$blue-8 = #1976d2
$blue-9 = #1565c0
$blue-10 = #0d47a1
$blue-11 = #82b1ff
$blue-12 = #448aff
$blue-13 = #2979ff
$blue-14 = #2962ff
$light-blue = #03a9f4
$light-blue-1 = #e1f5fe
$light-blue-2 = #b3e5fc
$light-blue-3 = #81d4fa
$light-blue-4 = #4fc3f7
$light-blue-5 = #29b6f6
$light-blue-6 = #03a9f4
$light-blue-7 = #039be5
$light-blue-8 = #0288d1
$light-blue-9 = #0277bd
$light-blue-10 = #01579b
$light-blue-11 = #80d8ff
$light-blue-12 = #40c4ff
$light-blue-13 = #00b0ff
$light-blue-14 = #0091ea
$cyan = #00bcd4
$cyan-1 = #e0f7fa
$cyan-2 = #b2ebf2
$cyan-3 = #80deea
$cyan-4 = #4dd0e1
$cyan-5 = #26c6da
$cyan-6 = #00bcd4
$cyan-7 = #00acc1
$cyan-8 = #0097a7
$cyan-9 = #00838f
$cyan-10 = #006064
$cyan-11 = #84ffff
$cyan-12 = #18ffff
$cyan-13 = #00e5ff
$cyan-14 = #00b8d4
$teal = #009688
$teal-1 = #e0f2f1
$teal-2 = #b2dfdb
$teal-3 = #80cbc4
$teal-4 = #4db6ac
$teal-5 = #26a69a
$teal-6 = #009688
$teal-7 = #00897b
$teal-8 = #00796b
$teal-9 = #00695c
$teal-10 = #004d40
$teal-11 = #a7ffeb
$teal-12 = #64ffda
$teal-13 = #1de9b6
$teal-14 = #00bfa5
$green = #4caf50
$green-1 = #e8f5e9
$green-2 = #c8e6c9
$green-3 = #a5d6a7
$green-4 = #81c784
$green-5 = #66bb6a
$green-6 = #4caf50
$green-7 = #43a047
$green-8 = #388e3c
$green-9 = #2e7d32
$green-10 = #1b5e20
$green-11 = #b9f6ca
$green-12 = #69f0ae
$green-13 = #00e676
$green-14 = #00c853
$light-green = #8bc34a
$light-green-1 = #f1f8e9
$light-green-2 = #dcedc8
$light-green-3 = #c5e1a5
$light-green-4 = #aed581
$light-green-5 = #9ccc65
$light-green-6 = #8bc34a
$light-green-7 = #7cb342
$light-green-8 = #689f38
$light-green-9 = #558b2f
$light-green-10 = #33691e
$light-green-11 = #ccff90
$light-green-12 = #b2ff59
$light-green-13 = #76ff03
$light-green-14 = #64dd17
$lime = #cddc39
$lime-1 = #f9fbe7
$lime-2 = #f0f4c3
$lime-3 = #e6ee9c
$lime-4 = #dce775
$lime-5 = #d4e157
$lime-6 = #cddc39
$lime-7 = #c0ca33
$lime-8 = #afb42b
$lime-9 = #9e9d24
$lime-10 = #827717
$lime-11 = #f4ff81
$lime-12 = #eeff41
$lime-13 = #c6ff00
$lime-14 = #aeea00
$yellow = #ffeb3b
$yellow-1 = #fffde7
$yellow-2 = #fff9c4
$yellow-3 = #fff59d
$yellow-4 = #fff176
$yellow-5 = #ffee58
$yellow-6 = #ffeb3b
$yellow-7 = #fdd835
$yellow-8 = #fbc02d
$yellow-9 = #f9a825
$yellow-10 = #f57f17
$yellow-11 = #ffff8d
$yellow-12 = #ffff00
$yellow-13 = #ffea00
$yellow-14 = #ffd600
$amber = #ffc107
$amber-1 = #fff8e1
$amber-2 = #ffecb3
$amber-3 = #ffe082
$amber-4 = #ffd54f
$amber-5 = #ffca28
$amber-6 = #ffc107
$amber-7 = #ffb300
$amber-8 = #ffa000
$amber-9 = #ff8f00
$amber-10 = #ff6f00
$amber-11 = #ffe57f
$amber-12 = #ffd740
$amber-13 = #ffc400
$amber-14 = #ffab00
$orange = #ff9800
$orange-1 = #fff3e0
$orange-2 = #ffe0b2
$orange-3 = #ffcc80
$orange-4 = #ffb74d
$orange-5 = #ffa726
$orange-6 = #ff9800
$orange-7 = #fb8c00
$orange-8 = #f57c00
$orange-9 = #ef6c00
$orange-10 = #e65100
$orange-11 = #ffd180
$orange-12 = #ffab40
$orange-13 = #ff9100
$orange-14 = #ff6d00
$deep-orange = #ff5722
$deep-orange-1 = #fbe9e7
$deep-orange-2 = #ffccbc
$deep-orange-3 = #ffab91
$deep-orange-4 = #ff8a65
$deep-orange-5 = #ff7043
$deep-orange-6 = #ff5722
$deep-orange-7 = #f4511e
$deep-orange-8 = #e64a19
$deep-orange-9 = #d84315
$deep-orange-10 = #bf360c
$deep-orange-11 = #ff9e80
$deep-orange-12 = #ff6e40
$deep-orange-13 = #ff3d00
$deep-orange-14 = #dd2c00
$brown = #795548
$brown-1 = #efebe9
$brown-2 = #d7ccc8
$brown-3 = #bcaaa4
$brown-4 = #a1887f
$brown-5 = #8d6e63
$brown-6 = #795548
$brown-7 = #6d4c41
$brown-8 = #5d4037
$brown-9 = #4e342e
$brown-10 = #3e2723
$brown-11 = #d7ccc8
$brown-12 = #bcaaa4
$brown-13 = #8d6e63
$brown-14 = #5d4037
$grey ?= #9e9e9e
$grey-1 ?= #fafafa
$grey-2 ?= #f5f5f5
$grey-3 ?= #eeeeee
$grey-4 ?= #e0e0e0
$grey-5 ?= #bdbdbd
$grey-6 ?= #9e9e9e
$grey-7 ?= #757575
$grey-8 ?= #616161
$grey-9 ?= #424242
$grey-10 ?= #212121
$grey-11 ?= #f5f5f5
$grey-12 ?= #eeeeee
$grey-13 ?= #bdbdbd
$grey-14 ?= #616161
$blue-grey = #607d8b
$blue-grey-1 = #eceff1
$blue-grey-2 = #cfd8dc
$blue-grey-3 = #b0bec5
$blue-grey-4 = #90a4ae
$blue-grey-5 = #78909c
$blue-grey-6 = #607d8b
$blue-grey-7 = #546e7a
$blue-grey-8 = #455a64
$blue-grey-9 = #37474f
$blue-grey-10 = #263238
$blue-grey-11 = #cfd8dc
$blue-grey-12 = #b0bec5
$blue-grey-13 = #78909c
$blue-grey-14 = #455a64
active-color($color)
  if luminosity($color) > .29
    darken($color, 10%)
  else
    lighten($color, 30%)
light-active-color($color)
  if luminosity($color) > .29
    darken($color, 5%)
  else
    lighten($color, 20%)
dark-active-color($color)
  if luminosity($color) > .1
    darken($color, 20%)
  else
    lighten($color, 20%)
hover-color($color)
  if luminosity($color) > .29
    darken($color, 15%)
  else
    lighten($color, 15%)
strong-active-color($color)
  if luminosity($color) > .29
    darken($color, 20%)
  else
    lighten($color, 80%)
composite-color($color)
  if luminosity($color) > .29
    darken($color, 35%)
  else
    lighten($color, 65%)
opposite-non-color($color)
  if luminosity($color) > .29
    black
  else
    white
max(value1, value2)
  if value1 <= value2
    value2
  else
    value1
$ios-statusbar-height ?= 20px
$z-fab          ?= 990
$z-side         ?= 1000
$z-marginals    ?= 2000
$z-fixed-drawer ?= 3000
$z-modal        ?= 5000
$z-fullscreen   ?= 6000
$z-top          ?= 7000
$z-popover      ?= 8000
$z-tooltip      ?= 9000
$z-notify       ?= 9500
$z-max          ?= 9998
$shadow-color ?= black
$shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
$inset-shadow = 0 7px 9px -7px alpha($shadow-color, .7) inset
$elevation-umbra = rgba($shadow-color, .2)
$elevation-penumbra = rgba($shadow-color, .14)
$elevation-ambient = rgba($shadow-color, .12)
$shadow-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
$shadow-1 = 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient
$shadow-2 = 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient
$shadow-3 = 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient
$shadow-4 = 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient
$shadow-5 = 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient
$shadow-6 = 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient
$shadow-7 = 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient
$shadow-8 = 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient
$shadow-9 = 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient
$shadow-10 = 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient
$shadow-11 = 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient
$shadow-12 = 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient
$shadow-13 = 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient
$shadow-14 = 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient
$shadow-15 = 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient
$shadow-16 = 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient
$shadow-17 = 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient
$shadow-18 = 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient
$shadow-19 = 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient
$shadow-20 = 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient
$shadow-21 = 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient
$shadow-22 = 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient
$shadow-23 = 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient
$shadow-24 = 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient
$shadow-up-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
$shadow-up-1 = 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient
$shadow-up-2 = 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient
$shadow-up-3 = 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient
$shadow-up-4 = 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient
$shadow-up-5 = 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient
$shadow-up-6 = 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient
$shadow-up-7 = 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient
$shadow-up-8 = 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient
$shadow-up-9 = 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient
$shadow-up-10 = 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient
$shadow-up-11 = 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient
$shadow-up-12 = 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient
$shadow-up-13 = 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient
$shadow-up-14 = 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient
$shadow-up-15 = 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient
$shadow-up-16 = 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient
$shadow-up-17 = 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient
$shadow-up-18 = 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient
$shadow-up-19 = 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient
$shadow-up-20 = 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient
$shadow-up-21 = 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient
$shadow-up-22 = 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient
$shadow-up-23 = 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient
$shadow-up-24 = 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient
$generic-border-radius      ?= 4px
$generic-hover-transition   ?= .3s cubic-bezier(.25, .8, .5, 1)
$typography-font-family     ?= '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$min-line-height            ?= 1.19
$action-sheet-background       ?= white
$action-sheet-border-radius    ?= 13px
$action-sheet-hover-background ?= #d0d0d0
$alert-padding       ?= 12px
$alert-border-radius ?= $generic-border-radius
$alert-min-width     ?= 200px
$button-border-radius         ?= $generic-border-radius
$button-padding               ?= 4px 16px
$button-dense-padding         ?= .285em
$button-transition            ?= $generic-hover-transition
$button-font-size             ?= 14px
$button-rounded-border-radius ?= 28px
$button-push-border-radius    ?= 7px
$card-faded-color          ?= rgba(0, 0, 0, .4)
$card-separator-color      ?= rgba(0, 0, 0, .1)
$card-overlay-color        ?= rgba(0, 0, 0, .47)
$card-shadow               ?= $shadow-2
$card-dark-faded-color     ?= rgba(255, 255, 255, .6)
$card-dark-separator-color ?= rgba(255, 255, 255, .2)
$carousel-padding                           ?= 18px
$carousel-quick-nav-icon-font-size          ?= 18px
$carousel-quick-nav-icon-inactive-font-size ?= 14px
$carousel-quick-nav-background              ?= rgba(0, 0, 0, .3)
$chat-message-received-color     ?= black
$chat-message-received-bg        ?= $green-4
$chat-message-sent-color         ?= black
$chat-message-sent-bg            ?= $grey-4
$chat-message-avatar-size        ?= 48px
$chat-message-border-radius      ?= 20px
$chat-message-distance           ?= 8px
$chat-message-text-padding-vert  ?= 9px
$chat-message-text-padding-horiz ?= 11px
$chip-border             ?= #e0e0e0
$chip-border-radius      ?= 2rem
$chip-font-size          ?= 14px
$chip-padding-horizontal ?= 0
$chip-padding-vertical   ?= 12px
$chip-height             ?= 32px
$chip-icon-size          ?= 24px
$chip-small-icon-size    ?= 16px
$chip-small-height       ?= 26px
$chip-color              ?= black
$chip-background         ?= $grey-3
$item-dense-factor                 ?= .2
$item-sparse-factor                ?= 1.4
$item-base-color                   ?= $grey-5
$item-highlight-color              ?= alpha($item-base-color, 50%)
$item-stripe-color                 ?= alpha($item-base-color, 65%)
$item-active-color                 ?= alpha($item-base-color, 40%)
$item-side-color                   ?= #737373
$item-label-color                  ?= $grey-7
$item-content-secondary-text-color ?= $grey-7
$item-separator-color              ?= rgb(224, 224, 224)
$item-base-dark-color                   ?= $grey-7
$item-highlight-dark-color              ?= alpha($item-base-dark-color, 30%)
$item-stripe-dark-color                 ?= alpha($item-base-dark-color, 45%)
$item-active-dark-color                 ?= alpha($item-base-dark-color, 20%)
$item-side-dark-color                   ?= #bbb
$item-label-dark-color                  ?= rgba(255,255,255,0.64)
$item-content-secondary-text-dark-color ?= $grey-5
$item-separator-dark-color              ?= rgba(255,255,255,0.32)
$item-min-height                   ?= 40px
$item-padding                      ?= 16px
$item-gutter                       ?= 10px
$item-primary-size                 ?= 38px
$item-inverted-icon-size           ?= round($item-primary-size * .52)
$item-icon-size                    ?= round($item-primary-size * .63)
$item-image-size                   ?= round(3 * $item-primary-size)
$item-font-size                    ?= 1rem
$item-stamp-font-size              ?= .8rem
$item-inset                        ?= ($item-gutter + $item-primary-size)
$jumbotron-padding               ?= 2rem 1rem
$jumbotron-large-padding         ?= 4rem 2rem
$jumbotron-border-radius         ?= $generic-border-radius
$jumbotron-bg                    ?= $grey-3
$jumbotron-dark-bg               ?= $grey-7
$jumbotron-dark-color            ?= white
$collapsible-padding             ?= 8px 16px
$collapsible-indent-left-padding ?= ($item-primary-size + $item-gutter)
$collapsible-active-color        ?= $item-active-color
$collapsible-menu-left-padding   ?= 48px
$datetime-range-space     ?= 10px
$datetime-input-min-width ?= 70px
$dot-color             ?= $red
$dot-opacity           ?= .8
$dot-size              ?= 10px
$dot-position-top      ?= -2px
$dot-position-right    ?= -10px
$editor-border-color            ?= #ccc
$editor-border                  ?= 1px solid $editor-border-color
$editor-content-padding         ?= 10px
$editor-content-min-height      ?= 10em
$editor-toolbar-padding         ?= 4px
$editor-hr-color                ?= $editor-border-color
$editor-button-gutter           ?= 5px
$fab-margin    ?= 5px
$field-icon-size        ?= 28px
$field-label-color      ?= $dark
$field-dark-label-color ?= $light
$table-transition               ?= $generic-hover-transition
$table-border-radius            ?= $generic-border-radius
$table-box-shadow               ?= $shadow-2
$table-border-color             ?= rgba(0, 0, 0, .12)
$table-color                    ?= rgba(0, 0, 0, .87)
$table-header-color             ?= rgba(0, 0, 0, .54)
$table-hover-background         ?= rgba(0, 0, 0, .03)
$table-selected-background      ?= rgba(0, 0, 0, .06)
$table-dark-border-color        ?= rgba(255, 255, 255, .12)
$table-dark-color               ?= white
$table-dark-header-color        ?= rgba(255, 255, 255, .64)
$table-dark-hover-background    ?= rgba(255, 255, 255, .1)
$table-dark-selected-background ?= rgba(255, 255, 255, .2)
$input-margin-top            ?= 16px
$input-margin-bottom         ?= 8px
$input-font-size       ?= 1rem
$input-label-top-scale ?= .75
$input-padding-x       ?= 8px
$input-padding-top     ?= 25px
$input-padding-bottom  ?= 7px
$input-control-size    ?= 24px
$input-control-margin  ?= 4px
$input-min-height      ?= $input-control-size
$input-hide-underline-padding-top ?= 18px
$input-box-padding-top          ?= $input-padding-top
$input-box-padding-bottom       ?= $input-padding-bottom
$input-inverted-border-radius  ?= $generic-border-radius
$input-label-transform-base           ?= translate(0, 0)
$input-label-box-transform-base       ?= translate(0, -21px)
$input-label-transform                ?= translate(0, -100%)
$input-label-box-transform            ?= translate(0, -125%)
$input-frame-transition        ?= all .45s cubic-bezier(.23, 1, .32, 1), display 0s 0s
$input-frame-transition-border ?= opacity .45s cubic-bezier(.23, 1, .32, 1)
$toolbar-min-height          ?= 50px
$toolbar-padding             ?= 4px 10px
$toolbar-title-font-size     ?= 16px
$toolbar-subtitle-font-size  ?= 12px
$toolbar-title-font-weight   ?= 600
$toolbar-title-padding       ?= 0 5px
$layout-aside-background   ?= white
$layout-border-color       ?= $item-separator-color
$layout-border             ?= 1px solid $layout-border-color
$loading-background ?= $dimmed-background
$modal-background        ?= white
$modal-width             ?= 80vw
$modal-max-width         ?= 1000px
$modal-height            ?= 80vh
$modal-max-height        ?= 1000px
$modal-header-font-size  ?= 1.3rem
$modal-header-padding    ?= 20px 16px 10px
$modal-header-text-align ?= center
$modal-body-color        ?= black
$modal-body-padding      ?= 10px 16px 21px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 0
$modal-border-radius     ?= 13px
$label-offset ?= 8px
$paralax-text-shadow ?= 0 0 5px white
$popover-background   ?= white
$popover-box-shadow   ?= $shadow-4
$popover-max-width    ?= 100vw
$progress-track-height         ?= 5px
$progress-track-color          ?= currentColor
$progress-track-opacity        ?= .2
$progress-transition           ?= width .3s linear
$pull-to-refresh-font-size          ?= 1rem
$pull-to-refresh-icon-size          ?= 2rem
$rating-grade-color     ?= $yellow
$rating-shadow          ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
$stepper-divider-color         ?= rgba(0, 0, 0, .12)
$stepper-label-color           ?= rgba(0, 0, 0, .56)
$stepper-label-inactive-color  ?= rgba(0, 0, 0, .42)
$stepper-hover-background      ?= rgba(0, 0, 0, .05)
$stepper-active-background     ?= rgba(0, 0, 0, .17)
$stepper-pane-padding          ?= 16px
$stepper-border-radius         ?= $generic-border-radius
$tabs-padding                  ?= 8px 10px
$tabs-big-screen-horiz-padding ?= 25px
$tabs-min-height               ?= 35px
$tabs-big-screen-side-padding  ?= 12px
$tabs-pane-padding             ?= 12px
$tabs-pane-border              ?= 1px solid rgba(0, 0, 0, .1)
$tabs-unselected-opacity       ?= .6
$tabs-font-size                ?= .7rem
$tabs-big-font-size            ?= .9rem
$tabs-icon-font-size           ?= 1.5rem
$tabs-font-weight              ?= 400
$tooltip-color         ?= black
$tooltip-background    ?= white
$tooltip-box-shadow    ?= $shadow-6
$tooltip-padding       ?= 10px
$tooltip-border-radius ?= $generic-border-radius
$tooltip-fontsize      ?= 12px
$tree-connector-color            ?= #ccc
$tree-label-padding              ?= 5px
$tree-label-border-radius        ?= $generic-border-radius
$tree-highlight-color            ?= inherit
$tree-highlight-background       ?= $tree-connector-color
$tree-label-icon-font-size       ?= 1.3rem
*, *:before, *:after 
  box-sizing inherit
  -webkit-tap-highlight-color transparent
  -moz-tap-highlight-color transparent
html, body, #q-app
  width 100%
  direction ltr
html, body
  margin 0
  box-sizing border-box
input[type='text'], input[type='email'], input[type='search'], input[type='password']
  -webkit-appearance none
  -moz-appearance none /* mobile firefox too! */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary
  display block
audio:not([controls])
  display none
  height 0
abbr[title]
  border-bottom none 
  text-decoration underline 
  text-decoration underline dotted 
dfn
  font-style italic
img
  border-style none
svg:not(:root)
  overflow hidden
code, kbd, pre, samp
  font-family monospace, monospace 
  font-size 1em 
hr
  box-sizing content-box 
  height 0 
  overflow visible 
button,
input,
select,
textarea
  font inherit
  margin 0
optgroup
  font-weight bold
button,
input, 
select 
  overflow visible
button::-moz-focus-inner, input::-moz-focus-inner
  border 0
  padding 0
button:-moz-focusring, input:-moz-focusring
  outline 1px dotted ButtonText
textarea
  overflow auto
input[type='search']
  -webkit-appearance textfield
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
  -webkit-appearance none
.q-icon
  line-height 1
  letter-spacing normal
  text-transform none
  white-space nowrap
  word-wrap normal
  direction ltr
.q-icon, .material-icons
  user-select none
  cursor inherit
  font-size inherit
  display inline-flex
  align-items center
  justify-content center
  vertical-align middle
.q-actionsheet
  border-radius $action-sheet-border-radius
  background $action-sheet-background
  max-width 95%
  margin-left auto
  margin-right auto
  margin-bottom 10px
  overflow hidden
.q-actionsheet-title
  min-height 48px
  padding 0 16px
  color $faded
  color var(--q-color-faded)
  text-align center
.q-actionsheet-grid
  padding 8px 16px
  .q-item-separator-component
    margin 18px 0
.q-actionsheet-grid-item
  padding 8px 16px
  transition background .3s
  &:hover, &:focus
    background $action-sheet-hover-background
    outline 0
  i, img
    font-size 48px
    margin-bottom 4px
  .avatar
    width 48px
    height 48px
  span
    color $faded
    color var(--q-color-faded)
.q-loading-bar
  position fixed
  z-index $z-max
  transition transform .5s cubic-bezier(0, 0, .2, 1), opacity .5s
  &.top
    left 0 /* rtl:ignore */
    right 0 /* rtl:ignore */
    top 0
    width 100%
  &.bottom
    left 0 /* rtl:ignore */
    right 0 /* rtl:ignore */
    bottom 0
    width 100%
  &.right
    top 0
    bottom 0
    right 0
    height 100%
  &.left
    top 0
    bottom 0
    left 0
    height 100%
.q-alert
  border-radius $generic-border-radius
  box-shadow none
  .avatar
    width 32px
    height 32px
.q-alert-side, .q-alert-content
  padding 12px
  font-size 16px
  word-break break-word
.q-alert-side
  font-size 24px
  background rgba(0, 0, 0, .1)
.q-alert-actions
  padding 12px 12px 12px 0
.q-alert-detail
  font-size 12px
.q-breadcrumbs
  .q-icon, .q-breadcrumbs-separator
    font-size 150%
.q-breadcrumbs-last a
  pointer-events none
[dir=rtl] .q-breadcrumbs-separator .q-icon
  transform scaleX(-1) /* rtl:ignore */
.q-btn
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  padding $button-padding
  font-size $button-font-size
  text-decoration none
  color inherit
  background transparent
  transition $button-transition
  min-height 2.572em
  button&
    -webkit-appearance button
  a&
    display inline-flex
  .q-icon, .q-spinner
    font-size 1.4em
  
  .q-btn-inner
    transition opacity .6s
    &--hidden
      opacity 0
    &:before
      content ''
  &.disabled
    opacity .7 !important
.q-btn-progress
  transition all .3s
  height 100%
  background rgba(255, 255, 255, .25)
  &.q-btn-dark-progress
    background rgba(0, 0, 0, .2)
.q-btn-rectangle
  border-radius $button-border-radius
.q-btn-outline
  border 1px solid currentColor
  background transparent !important
.q-btn-push
  border-radius $button-push-border-radius
  border-bottom 3px solid rgba(0, 0, 0, .15)
  &:active:not(.disabled)
  &.active:not(.disabled)
    transform translateY(3px)
    border-bottom-color transparent
  .q-focus-helper, .q-ripple-container
    height auto
    bottom -3px
.q-btn-rounded
  border-radius $button-rounded-border-radius
.q-btn-round
  border-radius 50%
  padding 0
  min-height 0
  height 3em
  width 3em
.q-btn-dense
  padding $button-dense-padding
  min-height 2em
  &.q-btn-round
    padding 0
    height 2.4em
    width 2.4em
  .on-left
    margin-right 6px
  .on-right
    margin-left 6px
.q-btn-fab, .q-btn-fab-mini
  .q-icon
    font-size 24px
.q-btn-fab
  height 56px
  width 56px
.q-btn-fab-mini
  height 40px
  width 40px
.q-transition
  &--fade
    &-leave-active
      position absolute
  &--fade
    &-enter-active, &-leave-active
      transition opacity .4s ease-out
    &-enter, &-leave, &-leave-to
      opacity 0
.q-btn-dropdown-split .q-btn-dropdown-arrow
  padding 0 4px
  border-left 1px solid rgba(255, 255, 255, .3)
.q-btn-group
  border-radius $button-border-radius
  vertical-align middle
  > .q-btn-group
    > .q-btn:first-child
      border-top-left-radius inherit
      border-bottom-left-radius inherit
    > .q-btn:last-child
      border-top-right-radius inherit
      border-bottom-right-radius inherit
  > .q-btn-group:not(:first-child) > .q-btn:first-child
    border-left 0
  > .q-btn-group:not(:last-child) > .q-btn:last-child
    border-right 0
  > .q-btn-item:not(:last-child)
    border-top-right-radius 0
    border-bottom-right-radius 0
  > .q-btn-item + .q-btn-item
    border-top-left-radius 0
    border-bottom-left-radius 0
.q-btn-group-push
  border-radius $button-push-border-radius
  > .q-btn-push
    .q-btn-inner
      transition $button-transition
    &:active:not(.disabled)
    &.active:not(.disabled)
      border-bottom-color rgba(0, 0, 0, .15)
      transform translateY(0)
      .q-btn-inner
        transform translateY(3px)
.q-btn-group-rounded
  border-radius $button-rounded-border-radius
.q-btn-group-outline
  > .q-btn-item + .q-btn-item
    border-left 0
  > .q-btn-item:not(:last-child)
    border-right 0
.q-card
  border-radius $generic-border-radius
  box-shadow $card-shadow
  vertical-align top
  > div:first-child
    border-top-left-radius inherit
    border-top-right-radius inherit
  > div:last-child
    border-bottom-left-radius inherit
    border-bottom-right-radius inherit
  > .q-list
    border 0
.q-card-separator
  background $card-separator-color
  height 1px
  &.inset
    margin 0 16px
.q-card-container
  padding 16px
.q-card-title
  font-size 18px
  font-weight 400
  letter-spacing normal
  line-height 2rem
  &:empty
    display none
.q-card-subtitle, .q-card-title-extra
  font-size 14px
  color $card-faded-color
  .q-icon
    font-size 24px
.q-card-main
  font-size 14px
.q-card-primary + .q-card-main
  padding-top 0
.q-card-actions
  padding 8px
  .q-btn
    padding 0 8px
.q-card-actions-horiz
  .q-btn:not(:last-child)
    margin-right 8px
.q-card-actions-vert
  .q-btn + .q-btn
    margin-top 4px
.q-card-media
  overflow hidden
  > img
    display block
    width 100%
    max-width 100%
    border 0
.q-card-media-overlay
  color white
  background $card-overlay-color
  .q-card-subtitle
    color white
.q-card-dark
  .q-card-separator
    background $card-dark-separator-color
  .q-card-subtitle, .q-card-title-extra
    color $card-dark-faded-color
.q-carousel
  overflow hidden
  position relative
.q-carousel-inner
  position relative
  height 100%
.q-carousel-slide
  flex 0 0 100%
  margin 0
  padding $carousel-padding
.q-carousel-track
  padding 0
  margin 0
  will-change transform
  display flex
  flex-wrap nowrap
  height 100%
  &.infinite-left > div:nth-last-child(2)
    order -1000
    margin-left -100%
  &.infinite-right > div:nth-child(2)
    order 1000
.q-carousel-left-arrow,
.q-carousel-right-arrow
  top 50%
  transform translateY(-50%)
  background $carousel-quick-nav-background
.q-carousel-left-arrow
  left 5px
.q-carousel-right-arrow
  right 5px
.q-carousel-quick-nav
  padding 2px 0
  background $carousel-quick-nav-background
  .q-icon
    font-size $carousel-quick-nav-icon-font-size !important
  .q-btn.inactive
    opacity .5
    .q-icon
      font-size $carousel-quick-nav-icon-inactive-font-size !important
.q-carousel-thumbnails
  will-change transform
  transition transform .3s
  transform translateY(105%)
  width 100%
  height auto
  max-height 60%
  overflow auto
  background black
  padding .5rem
  text-align center
  box-shadow 0 -3px 6px rgba(0, 0, 0, .16), 0 -5px 6px rgba(0, 0, 0, .23)
  &.active
    transform translateY(0)
  img
    height auto
    width 100%
    display block
    opacity .5
    will-change opacity
    transition opacity .3s
    cursor pointer
    border 1px solid black
  > div > div
    flex 0 0 108px
    &.active img, img.active
      opacity 1
      border-color white
.q-carousel-thumbnail-btn
  background $carousel-quick-nav-background
  top 5px
  right 5px
body.desktop .q-carousel-thumbnails img:hover
  opacity 1
.q-message-name, .q-message-stamp, .q-message-label
  font-size small
.q-message-name
  padding-left $chat-message-text-padding-horiz
.q-message-label
  margin (3 * $chat-message-distance) 0
.q-message-stamp
  color inherit
  margin-top 4px
  opacity .6
  display none
.q-message-avatar
  border-radius 50%
  width $chat-message-avatar-size
  height $chat-message-avatar-size
.q-message
  margin-bottom $chat-message-distance
  &:first-child .q-message-label
    margin-top 0
.q-message-received
  .q-message-avatar
    margin-right 8px
  .q-message-text
    color $chat-message-received-bg
    border-radius $chat-message-border-radius
    &:last-child
      &:before
        left -7px
        border-left 20px solid currentColor
        border-bottom-right-radius 16px 14px
      &:after
        left 23px
        border-bottom-right-radius 10px
  .q-message-text-content
    color $chat-message-received-color
.q-message-sent
  .q-message-name
    text-align right
    padding-right $chat-message-text-padding-horiz
  .q-message-avatar
    margin-left 8px
  .q-message-container
    flex-direction row-reverse
  .q-message-text
    color $chat-message-sent-bg
    border-radius $chat-message-border-radius
    &:last-child
      &:before
        right -7px
        border-right 20px solid currentColor
        border-bottom-left-radius 16px 14px
      &:after
        right -37px
        border-bottom-left-radius 10px
  .q-message-text-content
    color $chat-message-sent-color
.q-message-text
  background currentColor
  padding $chat-message-text-padding-vert $chat-message-text-padding-horiz
  line-height max(1.2, $min-line-height)
  word-break break-word
  position relative
  transform translate3d(0, 0, 0)
  & + &
    margin-top 3px
  &:last-child
    min-height $chat-message-avatar-size
    .q-message-stamp
      display block
    &:before, &:after
      content ''
      position absolute
      bottom -2px
      height 20px
      transform translate(0, -2px)
    &:after
      background white
      width 7px
      transform translate(-30px, -2px)
$checkbox-size = 21px
.q-checkbox-icon
  height $checkbox-size
  width $checkbox-size
  font-size $checkbox-size
  opacity 0
.q-chip
  min-height $chip-height
  max-width 100%
  padding $chip-padding-horizontal $chip-padding-vertical
  font-size $chip-font-size
  border $chip-border
  border-radius $chip-border-radius
  vertical-align middle
  color $chip-color
  background $chip-background
  &:focus .q-chip-close
    opacity .8
  .q-icon
    font-size $chip-icon-size
    line-height 1
.q-chip-main
  line-height initial
  flex 1 1 auto
.q-chip-side
  border-radius 50%
  height $chip-height
  width $chip-height
  min-width $chip-height
  overflow hidden
  img
    width 100%
    height 100%
.q-chip-left
  margin-left -12px
  margin-right 8px
.q-chip-right
  margin-left 2px
  margin-right -12px
.q-chip-square
  border-radius 2px
.q-chip-floating
  position absolute
  top -.3em
  right -.3em
  pointer-events none
  z-index 1
.q-chip-tag
  position relative
  padding-left 1.7rem
  &:after
    content ''
    position absolute
    top 50%
    left .5rem
    margin-top -.25rem
    background white
    width .5rem
    height .5rem
    box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
    border-radius 50%
.q-chip-pointing
  position relative
  z-index 0
  &:before
    content ''
    z-index -1
    background inherit
    width 16px
    height 16px
    position absolute
.q-chip-pointing-up
  margin-top .8rem
  &:before
    top 0
    left 50%
    transform translateX(-50%) translateY(-22%) rotate(45deg)
.q-chip-pointing-down
  margin-bottom .8rem
  &:before
    right auto
    top 100%
    left 50%
    transform translateX(-50%) translateY(-78%) rotate(45deg)
.q-chip-pointing-right
  margin-right .8rem
  &:before
    top 50%
    right 2px
    bottom auto
    left auto
    transform translateX(33%) translateY(-50%) rotate(45deg)
.q-chip-pointing-left
  margin-left .8rem
  &:before
    top 50%
    left 2px
    bottom auto
    right auto
    transform translateX(-33%) translateY(-50%) rotate(45deg)
.q-chip-detail
  background rgba(0, 0, 0, .1)
  opacity .8
  padding 0 5px
  border-radius inherit
  border-top-right-radius 0
  border-bottom-right-radius 0
.q-chip-small
  min-height $chip-small-height
  .q-chip-main
    padding 4px 1px
    line-height initial
  .q-chip-side
    height $chip-small-height
    width $chip-small-height
    min-width $chip-small-height
  .q-chip-icon
    font-size $chip-small-icon-size
.q-chip-dense
  min-height 1px
  padding 0 3px
  font-size 12px
  &.q-chip-tag
    padding-left 1.3rem
  &.q-chip-pointing:before
    width 9px
    height 9px
  .q-chip-main
    padding 1px
  .q-chip-side
    height 18px
    width 18px
    min-width 16px
    font-size 14px
  .q-chip-left
    margin-left -3px
    margin-right 2px
  .q-chip-right
    margin-left 2px
    margin-right -2px
  .q-icon
    font-size 16px
.q-input-chips
  margin-top -1px
  margin-bottom -1px
  .q-chip
    margin 1px
  input.q-input-target
    min-width 70px !important
.q-collapsible-sub-item
  padding $collapsible-padding
  &.indent
    padding-left $collapsible-menu-left-padding
    padding-right 0
  .q-card
    margin-bottom 0
.q-collapsible.{$router-link-active} > .q-item
  background $collapsible-active-color
.q-collapsible
  transition padding .5s
.q-collapsible-popup-closed
  padding 0 15px
  .q-collapsible-inner
    border 1px solid $item-separator-color
  & + &
    .q-collapsible-inner
      border-top 0
.q-collapsible-popup-opened
  padding 15px 0
  .q-collapsible-inner
    box-shadow $shadow-2
  & + &, &:first-child
    padding-top 0
  &:last-child
    padding-bottom 0
.q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item
  cursor pointer
.q-collapsible-toggle-icon
  border-radius 50%
  width 1em
  text-align center
.q-color
  max-width 100vw
  border 1px solid $grey-4
  display inline-block
  width 100%
  background white
.q-color-saturation
  width 100%
  height 123px
.q-color-saturation-white
  background linear-gradient(to right, white, rgba(255, 255, 255, 0))
.q-color-saturation-black
  background linear-gradient(to top, black, rgba(0, 0, 0, 0))
.q-color-saturation-circle
  width 10px
  height 10px
  box-shadow 0 0 0 1.5px white, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4)
  border-radius 50%
  transform translate(-5px, -5px)
.q-color-swatch, .q-color-alpha .q-slider-track
  background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
.q-color-swatch
  position relative
  width 32px
  height 32px
  border-radius 50%
  background white
  border 1px solid $grey-4
.q-color-hue .q-slider-track
  border-radius 2px
  background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) 
  opacity 1
  height $dot-size * .8
  &.active-track
    opacity 0
.q-color-alpha .q-slider-track
  position relative
  background white
  opacity 1
  height $dot-size * .8
  &:after
    content ''
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    background linear-gradient(90deg, rgba(255, 255, 255, 0), $grey-7)
  &.active-track
    opacity 0
.q-color-sliders
  height 66px
  .q-slider
    height 24px
  .q-slider-handle
    height 18px
    width 18px
    box-shadow 0 1px 4px 0 rgba(0, 0, 0, .37)
  .q-slider-ring
    display none
.q-color-inputs
  font-size 11px
  color $grey-7
  input
    border 1px solid $grey-4
    outline 0
.q-color-padding
  padding 0 2px
.q-color-label
  padding-top 4px
.q-color-dark
  background black
  border 1px solid $grey-9
  input
    background black
    color $light
    color var(--q-color-light)
    border 1px solid $dark
    border 1px solid var(--q-color-dark)
  .q-color-inputs
    color $light
    color var(--q-color-light)
  .q-color-swatch
    border 1px solid $dark
    border 1px solid var(--q-color-dark)
.q-datetime-input
  min-width $datetime-input-min-width
.q-datetime
  border 1px solid $grey-4
  &.type-date, &.type-datetime
    min-width 320px
  &.type-time
    min-width 250px
.q-datetime-content
  height 200px
  position relative
.q-datetime-inner
  font-size 21px
  overflow hidden
  perspective 1200px
  height 100%
  text-align right
  position relative
  padding 0
  direction ltr /* rtl:ignore */
.q-datetime-col
  display block
  overflow visible
  transform-style preserve-3d
  position relative
  max-height 100%
.q-datetime-col-wrapper, .q-datetime-item
  transform-style preserve-3d
  transition all .2s ease-out
  cursor pointer
.q-datetime-col-divider
  max-height 100%
  width 10px
.q-datetime-col-month
  width 117px
  text-align left
.q-datetime-col-day
  width 37px
.q-datetime-col-year
  width 61px
.q-datetime-col-hour
  width 37px
.q-datetime-col-minute
  width 37px
.q-datetime-item
  font-size 85%
  height 36px
  line-height 36px
  color rgba(0, 0, 0, .87)
  position absolute
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  left 0
  top 0
  width 100%
  backface-visibility hidden
  transform-origin center center -110px
[dir=rtl] .q-datetime-col-month .q-datetime-item
  padding-right 5px
.q-datetime-mask
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  height 100%
  width 100%
  background linear-gradient(to top, white, rgba(255, 255, 255, 0.0) 50%, white)
  pointer-events none
.q-datetime-highlight
  height 36px
  position absolute
  left 0
  right 0
  width 100%
  top 50%
  margin-top -18px
  pointer-events none
  border-top 1px solid $grey-5
  border-bottom 1px solid $grey-5
.q-datetime-range
  &.row
    .q-datetime-range-left
      border-top-right-radius 0
      border-bottom-right-radius 0
    .q-datetime-range-right
      border-top-left-radius 0
      border-bottom-left-radius 0
  &.column > div + div
    margin-top $datetime-range-space
.q-datetime-dark
  background $dark
  background var(--q-color-dark)
  .modal-buttons
    background black
  .q-datetime-item
    color rgba(255, 255, 255, .87)
  .q-datetime-mask
    background linear-gradient(to top, black, rgba(0, 0, 0, 0.0) 50%, black)
@media (max-width $breakpoint-sm-max)
  .datetime-ios-modal
    &.type-date, &.type-datetime
      min-width 320px
      width auto
    &.type-time
      min-width 250px
      width auto
@media (min-width $breakpoint-md-min)
  .datetime-ios-modal.type-time
    min-width 280px
.q-dot
  position absolute
  top $dot-position-top
  right $dot-position-right
  height $dot-size
  width $dot-size
  border-radius 50%
  background $dot-color
  opacity $dot-opacity
.q-editor
  border $editor-border
  &.disabled
    border-style dashed
  &.fullscreen
    border 0 !important
.q-editor-content
  outline 0
  padding $editor-content-padding
  min-height $editor-content-min-height
  background white
  hr
    border 0
    outline 0
    margin 1px
    height 1px
    background $editor-hr-color
.q-editor-toolbar-padding
  padding $editor-toolbar-padding
.q-editor-toolbar
  border-bottom $editor-border
  background $grey-4
  min-height 37px
  .q-btn-group
    box-shadow none
  .q-btn-group + .q-btn-group
    margin-left $editor-button-gutter
.q-editor-toolbar-separator
  .q-btn-group + .q-btn-group
    padding-left $editor-button-gutter
    &:before
      content ''
      position absolute
      left 0
      top 0
      bottom 0
      height 100%
      width 1px
      background $editor-border-color
.q-editor-input input
  color inherit
.q-fab
  position relative
  vertical-align middle
.z-fab
  z-index $z-fab
.q-fab-opened
  .q-fab-actions
    opacity 1
    transform scaleX(1) scaleY(1) translateX(0) translateY(0)
    pointer-events all
  .q-fab-icon
    transform rotate3d(0, 0, 1, 180deg)
    opacity 0
  .q-fab-active-icon
    transform rotate3d(0, 0, 1, 0deg)
    opacity 1
.q-fab-icon, .q-fab-active-icon
  transition opacity .4s, transform .4s
.q-fab-icon
  opacity 1
  transform rotate3d(0, 0, 1, 0deg)
.q-fab-active-icon
  opacity 0
  transform rotate3d(0, 0, 1, -180deg)
.q-fab-actions
  position absolute
  opacity 0
  transition all .2s ease-in
  pointer-events none
  .q-btn
    margin $fab-margin
.q-fab-right
  transform scaleX(.4) scaleY(.4) translateX(-100%)
  top 0
  bottom 0
  left 120%
.q-fab-left
  transform scaleX(.4) scaleY(.4) translateX(100%)
  top 0
  bottom 0
  right 120%
  flex-direction row-reverse
.q-fab-up
  transform scaleX(.4) scaleY(.4) translateY(100%)
  flex-direction column-reverse
  justify-content center
  bottom 120%
  left 0
  right 0
.q-fab-down
  transform scaleX(.4) scaleY(.4) translateY(-100%)
  flex-direction column
  justify-content center
  top 120%
  left 0
  right 0
.q-field-icon
  width $field-icon-size
  height $field-icon-size
  min-width $field-icon-size
  font-size $field-icon-size
  margin-right 16px
  color $field-label-color
.q-field-label
  padding-right 8px
  color $field-label-color
.q-field-label-inner
  min-height $field-icon-size
.q-field-label-hint
  padding-left 8px
.q-field-bottom
  font-size 12px
  padding-top $input-margin-bottom
  color $form-dark
.q-field-no-input .q-field-bottom
  margin-top 8px
  border-top 1px solid rgba(0, 0, 0, .12)
.q-field-counter
  color $field-label-color
  padding-left 8px
.q-field-dark
  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
    color $form-light
  .q-field-no-input .q-field-bottom
    border-top 1px solid $field-label-color
.q-field-with-error
  .q-field-icon, .q-field-label, .q-field-bottom
    color $negative
    color var(--q-color-negative)
  .q-field-no-input .q-field-bottom
    border-top 1px solid $negative
    border-top 1px solid var(--q-color-negative)
.q-field-with-warning
  .q-field-icon, .q-field-label, .q-field-bottom
    color $warning
    color var(--q-color-warning)
  .q-field-no-input .q-field-bottom
    border-top 1px solid $warning
    border-top 1px solid var(--q-color-warning)
.q-field-margin
  margin-top 5px
.q-field-floating .q-field-margin
  margin-top 23px
.q-field-no-input .q-field-margin
  margin-top 3px
.q-field-content
  .q-if.q-if-has-label:not(.q-if-standard)
    margin-top 9px
  .q-if-standard:not(.q-if-has-label)
    padding-top 6px
  .q-option-group
    padding-top 0
.q-field-no-input .q-field-content
  padding-top 6px
qfield-vertical()
  &:not(.q-field-no-label)
    .q-field-margin
      margin-top 0
    .q-if-standard:not(.q-if-has-label)
      padding-top 0
    .q-if.q-if-has-label:not(.q-if-standard)
      margin-top 0px
  &.q-field-no-label .q-field-label
    display none
.q-field-vertical
  qfield-vertical()
@media (max-width $breakpoint-xs-max)
  .q-field-responsive
    qfield-vertical()
.q-inner-loading
  background $light-dimmed-background
  &.dark
    background $dimmed-background
.q-if, .q-if:before, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
  transition $input-frame-transition
$content-none
  content none
$padding-x
  padding-left $input-padding-x
  padding-right $input-padding-x
$margin-y-box
  margin-top $input-box-padding-bottom
  margin-bottom $input-box-padding-bottom
$margin-top-box
  margin-top $input-box-padding-top
.q-if
  &:before, &:after
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    border 1px hidden currentColor
    border-bottom-style solid
    background transparent
    pointer-events none
    content ''
  &:before
    color $light
    color var(--q-color-light)
  &:after
    border-width 2px
    opacity 0
  &:not(.q-if-disabled):not(.q-if-error):not(.q-if-warning):hover:before,
  &.q-if-readonly:not(.q-if-error):not(.q-if-warning):after
    color black
    .q-if-dark&
      color white
  &.q-if-hide-underline, &.q-if-inverted
    &:before, &:after
      @extends $content-none
.q-if-focused:after
  opacity 1
  transition $input-frame-transition-border
.q-if
  outline 0
  align-items center
  font-size $input-font-size
  .q-if-inner
    min-height $input-min-height
.q-if-standard
  padding-top $input-padding-bottom
  padding-bottom $input-padding-bottom
  &.q-if-has-label
    padding-top $input-padding-top
.q-if-hide-underline
  padding-top 0
  padding-bottom 0
  &.q-if-has-label
    padding-top $input-hide-underline-padding-top
.q-if-standard, .q-if-inverted
  .q-if-label
    position absolute
    left 0
    transform-origin top left
    transform $input-label-transform-base
    &.q-if-label-above
      font-size ($input-font-size * $input-label-top-scale)
      transform $input-label-transform
      line-height $input-control-size * $input-label-top-scale
.q-if-inverted
  @extends $padding-x
  .q-if-label
    top 50%
    transform $input-label-box-transform-base
    &.q-if-label-above
      top 4px
      transform $input-label-box-transform
  .q-if-inner
    @extends $margin-y-box
  &.q-if-has-label
    .q-if-inner
      @extends $margin-top-box
  box-shadow $shadow-1
  border-radius $input-inverted-border-radius
  .q-input-target
    color inherit
.q-if-focused:not(.q-if-readonly)
  .q-if-label, .q-if-addon, .q-if-control
    color currentColor
.q-if-warning
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $warning
    color var(--q-color-warning)
  &:hover:before
    color lighten($warning, 46%)
    color var(--q-color-warning-l)
.q-if-error
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $negative
    color var(--q-color-negative)
  &:hover:before
    color lighten($negative, 46%)
    color var(--q-color-negative-l)
.q-if-disabled
  cursor not-allowed
  opacity .6
  .q-if-label, .q-if-control, .q-input-target, .q-chip
    cursor not-allowed
.q-if-dark:not(.q-if-inverted-light)
  .q-input-target:not(.q-input-target-placeholder)
    color white
.q-if-focusable
  outline 0
  cursor pointer
.q-if-label, .q-input-target, .q-input-target-placeholder
  line-height $input-control-size
.q-if-control
  font-size $input-control-size
  width $input-control-size
  height $input-control-size
  cursor pointer
  + .q-if-control, + .q-if-inner, .q-if-inner + &
    margin-left $input-control-margin
  &:hover
    opacity .7
.q-if-baseline
  line-height $input-control-size
  width 0
  color transparent
.q-if-label-inner, .q-if-label-spacer, .q-if-baseline
  pointer-events none
  user-select none
.q-if-label-spacer
  visibility hidden
  height 0 !important
  white-space nowrap
  max-width 100%
.q-if-label
  cursor text
  max-width 100%
  overflow hidden
.q-if-label, .q-if-addon, .q-if-control
  color $form-dark
  line-height $input-control-size
.q-if-inverted
  .q-if-label, .q-if-addon, .q-if-control
    color #ddd
.q-if-inverted-light
  .q-if-label, .q-if-addon, .q-if-control
    color #656565
.q-if-addon
  opacity 0
  cursor inherit
  &:not(.q-if-addon-visible)
    display none
.q-if-addon-left
  padding-right 1px
.q-if-addon-right
  padding-left 1px
.q-if-addon-visible
  opacity 1
@keyframes webkit-autofill-on
  to
    background transparent
    color $form-autofill
@keyframes webkit-autofill-off
  to
    background transparent
.q-input-target, .q-input-shadow
  border 0
  outline 0
  padding 0
  background transparent
  line-height $input-control-size
  font-size inherit
  resize none
  display flex
  align-items center
  color black
.q-input-target
  &:-webkit-autofill
    -webkit-animation-name webkit-autofill-on
    -webkit-animation-fill-mode both
  &.q-input-autofill:not(:-webkit-autofill)
    -webkit-animation-name webkit-autofill-off
    -webkit-animation-fill-mode both
  &::-ms-clear, &::-ms-reveal
    display none
    width 0
    height 0
  &:invalid
    box-shadow inherit
.q-input-target:before
  content '|'
  line-height $input-control-size
  width 0
  color transparent
input.q-input-target
  width 100% !important
  height $input-control-size
  outline 0
  display inline-block
  -webkit-appearance none
.q-if
  .q-input-target-placeholder
    color $form-dark !important
  .q-input-target
    &::-webkit-input-placeholder /* Chrome/Opera/Safari */
      color $form-dark !important
    &::-moz-placeholder 
      color $form-dark !important
    &:-ms-input-placeholder 
      color $form-dark !important
.q-if-dark
  .q-input-target-placeholder
    color #979797 !important
  .q-input-target
    &::-webkit-input-placeholder /* Chrome/Opera/Safari */
      color #979797 !important
    &::-moz-placeholder 
      color #979797 !important
    &:-ms-input-placeholder 
      color #979797 !important
.q-if-inverted:not(.q-if-inverted-light)
  .q-input-target-placeholder
    color #ddd !important
  .q-input-target
    &::-webkit-input-placeholder /* Chrome/Opera/Safari */
      color #ddd !important
    &::-moz-placeholder 
      color #ddd !important
    &:-ms-input-placeholder 
      color #ddd !important
.q-input-shadow
  overflow hidden
  visibility hidden
  pointer-events none
  height auto
  width 100% !important
.q-jumbotron
  position relative
  padding $jumbotron-padding
  border-radius $jumbotron-border-radius
  background-color $jumbotron-bg
  background-repeat no-repeat
  background-size cover
.q-jumbotron-dark
  color $jumbotron-dark-color
  background-color $jumbotron-dark-bg
  hr.q-hr
    background rgba(255, 255, 255, .36)
@media (min-width $breakpoint-md-min)
  .q-jumbotron
    padding $jumbotron-large-padding
.q-knob, .q-knob > div
  position relative
  display inline-block
.q-knob > div
  width 100%
  height 100%
.q-knob-label
  width 100%
  pointer-events none
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  i
    font-size 130%
$layout-transition = all .12s ease-in
.q-layout
  width 100%
  min-height 100vh
.q-layout-container
  .q-layout
    min-height 100%
  > div
    transform translate3d(0, 0, 0)
    > div
      min-height 0
      max-height 100%
.q-layout-header
  border-bottom $layout-border
  &-hidden
    transform translateY(-110%)
.q-layout-footer
  border-top $layout-border
  &-hidden
    transform translateY(110%)
.q-layout-drawer
  position absolute
  top 0
  bottom 0
  background $layout-aside-background
  z-index $z-side
  &.on-top
    z-index $z-fixed-drawer
.q-layout-drawer-left
  left 0
  transform translateX(-100%)
  &.fixed
    border-right $layout-border
.q-layout-drawer-right
  right 0
  transform translateX(100%)
  &.fixed
    border-left $layout-border
.q-layout, .q-layout-header, .q-layout-footer, .q-layout-page
  position relative
.q-layout-header, .q-layout-footer
  z-index $z-marginals
.q-layout-backdrop
  z-index ($z-fixed-drawer - 1) !important
  will-change background-color
.q-layout-drawer-mini
  padding 0 !important
  .q-item, .q-item-side
    text-align center
    justify-content center
  .q-mini-drawer-hide,
  .q-collapsible-inner > div:last-of-type, .q-list-header, .q-item-main, .q-item-side-right
    display none
.q-layout-drawer-normal
  .q-mini-drawer-only
    display none
.q-layout-drawer-mobile
  .q-mini-drawer-only, .q-mini-drawer-hide
    display none
.q-layout-drawer-opener
  z-index ($z-marginals + 1)
  height 100%
  width 15px
  user-select none
.q-page-sticky-shrink
  pointer-events none
  > span
    pointer-events auto
body.q-ios-statusbar-padding
  .q-layout .q-layout-header > .q-toolbar:nth-child(2),
  .q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
    padding-top $ios-statusbar-height
    min-height ($toolbar-min-height + $ios-statusbar-height)
body.q-ios-statusbar-x
  .q-layout .q-layout-header > .q-toolbar:nth-child(2),
  .q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
    padding-top env(safe-area-inset-top)
  .q-layout .q-layout-footer > .q-toolbar:last-child,
  .q-layout .q-layout-footer > .q-tabs:last-child .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-footer > .q-toolbar:last-child
    padding-bottom env(safe-area-inset-bottom)
    min-height ($toolbar-min-height + $ios-statusbar-height)
.q-layout-animate .q-layout-transition
  transition $layout-transition !important
.q-body-drawer-toggle
  overflow-x hidden !important
.layout-padding
  @media (max-width $breakpoint-sm-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media (min-width $breakpoint-xl-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem
.q-item-stamp
  font-size $item-stamp-font-size
  line-height $item-stamp-font-size
  white-space nowrap
  margin .3rem 0
.q-item-side
  color $item-side-color
  flex 0 0 auto
  min-width $item-primary-size
.q-item-side-right
  text-align right
.q-item-avatar, .q-item-avatar img
  width $item-primary-size
  height $item-primary-size
  border-radius 50%
.q-item-letter, .q-item-icon
  font-size $item-icon-size
.q-item-inverted
  border-radius 50%
  color white
  background $item-side-color
  height $item-primary-size
  width $item-primary-size
  &, .q-icon
    font-size $item-inverted-icon-size
.q-item-main
  flex 1 1 auto
  min-width 0
.q-item-main-inset
  margin-left $item-inset
.q-item-label
  line-height 1.2
  > span
    color $item-content-secondary-text-color
.q-item-sublabel
  color $item-content-secondary-text-color
  font-size 90%
  margin-top .2rem
  > span
    font-weight 500
.q-item-section + .q-item-section
  margin-left $item-gutter
.q-item
  position relative
  display flex
  align-items center
  font-size $item-font-size
  text-align left
  padding ($item-padding / 2) $item-padding
  min-height $item-min-height
  &.active, &.{$router-link-active}, &:focus
    background $item-active-color
  &:focus
    outline 0
.q-item-image
  min-width $item-image-size
  max-width $item-image-size
  max-height $item-image-size
.q-list-multiline > .q-item, .q-item-multiline
  align-items flex-start
.q-list-link > .q-item, .q-item-link
  cursor pointer
.q-list-highlight > .q-item, .q-item-highlight,
.q-list-link > .q-item, .q-item-link
  &:hover
    background $item-highlight-color
.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
  border-top 1px solid $item-separator-color
.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
  &:after
    content ''
    position absolute
    top 0
    right 0
    left ($item-padding + $item-inset)
    height 1px
    background $item-separator-color
.q-list-dense > .q-item, .q-item-dense
  padding round($item-padding * $item-dense-factor) $item-padding
  min-height round($item-min-height * $item-dense-factor)
.q-list-sparse > .q-item, .q-item-sparse
  padding ($item-padding * $item-sparse-factor) $item-padding
  min-height ($item-min-height * $item-sparse-factor)
.q-list-striped > .q-item:nth-child(even)
  background-color $item-stripe-color
.q-list-striped-odd > .q-item:nth-child(odd)
  background-color $item-stripe-color
.q-list
  border 1px solid $item-separator-color
  padding ($item-padding / 2) 0
.q-item-separator-component
  margin ($item-padding / 2) 0
  height 1px
  border 0
  background-color $item-separator-color
  &:last-child
    display none
  & + .q-list-header
    margin-top ($item-padding / 2)
.q-item-separator-inset-component
  margin-left ($item-padding + $item-gutter + $item-primary-size)
.q-list-header
  color $item-label-color
  font-size 10px
  font-weight 500
  min-height 35px
  padding ($item-padding / 2) $item-padding
  line-height 14px
  letter-spacing 1px
  text-transform uppercase
.q-list-header-inset
  padding-left ($item-padding + $item-inset)
.q-list-dark, .q-item-dark
  .q-item-side
    color $item-side-dark-color
  .q-item-inverted
    color black
    background $item-side-dark-color
  .q-item-label > span, .q-item-sublabel
    color $item-content-secondary-text-dark-color
  .q-item
    color white
    &.active, &.{$router-link-active}, &:focus
      background $item-active-dark-color
.q-list-dark
  border 1px solid $item-separator-dark-color
  &.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
    border-top 1px solid $item-separator-dark-color
  &.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
    &:after
      background $item-separator-dark-color
  &.q-list-striped > .q-item:nth-child(even)
    background-color $item-stripe-dark-color
  &.q-list-striped-odd > .q-item:nth-child(odd)
    background-color $item-stripe-dark-color
  .q-item-separator-component
    background-color $item-separator-dark-color
  .q-list-header
    color $item-label-dark-color
  &.q-list-highlight > .q-item, .q-item-highlight,
  &.q-list-link > .q-item, .q-item-link
    &:hover
      background $item-highlight-dark-color
body.with-loading
  overflow hidden
.q-loading
  background $loading-background
  > div
    margin 40px 20px 0
    max-width 450px
    text-align center
    text-shadow 0 0 7px black
minimized-modal()
  max-width 80vw
  max-height 80vh
maximized-modal()
  width 100%
  height 100%
  max-width 100%
  max-height 100%
  border-radius 0
  .q-layout-container
    min-height 100vh !important
.modal-backdrop
  background $dimmed-background
  .modal.maximized &
    display none
.modal-content
  position relative
  background $modal-background
  box-shadow $popover-box-shadow
  overflow-y auto
  will-change scroll-position
  min-width 280px
  max-height 80vh
  border-radius $modal-border-radius
  -webkit-backface-visibility hidden
  outline 0
.modal
  z-index $z-modal
  &.minimized .modal-content
    minimized-modal()
  &.maximized .modal-content
    maximized-modal()
.q-modal-enter, .q-modal-leave-active
  opacity 0
@media (min-width $breakpoint-md-min)
  .modal:not(.maximized)
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)
  .modal.maximized
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateX(30%)
@media (max-width $breakpoint-sm-max)
  .q-responsive-modal
    overflow hidden
  .modal:not(.minimized)
    .modal-content
      maximized-modal()
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateX(30%)
  .modal.minimized
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)
.q-maximized-modal
  overflow hidden
.modal, .modal-content
  transition all .2s ease-in-out
.modal-header
  text-align $modal-header-text-align
  padding $modal-header-padding
  font-size $modal-header-font-size
  font-weight 500
.modal-body
  padding $modal-body-padding
  color $modal-body-color
.modal-message
  text-align center
.small-modal-scroll, .modal-scroll, .big-modal-scroll
  overflow auto
  -webkit-overflow-scrolling touch
  will-change scroll-position
.small-modal-scroll
  max-height (.65 * $modal-scroll-size)
.modal-scroll
  max-height $modal-scroll-size
.big-modal-scroll
  max-height (2 * $modal-scroll-size)
.modal-buttons:not(.modal-buttons-top)
  padding $modal-buttons-padding
  border-top 1px solid $grey-5
  color $primary
  color var(--q-color-primary)
  .q-btn
    flex 1 1 auto
    font-size 110%
    margin 0
    padding 1rem
    border-radius 0
    &:last-child
      font-weight bold
  &.row
    .q-btn + .q-btn
      border-left 1px solid $grey-5
  &.column
    .q-btn + .q-btn
      border-top 1px solid $grey-5
.modal-buttons-top
  background $grey-2
  height 45px
.q-modal-bottom-enter, .q-modal-bottom-leave-active
  opacity 0
  .modal-content
    transform translateY(30%)
.q-modal-top-enter, .q-modal-top-leave-active
  opacity 0
  .modal-content
    transform translateY(-30%)
.q-modal-right-enter, .q-modal-right-leave-active
  opacity 0
  .modal-content
    transform translateX(30%)
.q-modal-left-enter, .q-modal-left-leave-active
  opacity 0
  .modal-content
    transform translateX(-30%)
.q-notifications > div
  z-index $z-notify
.q-notification-list
  pointer-events none
  left 0
  right 0
  margin-bottom 10px
  position relative
.q-notification-list-center
  top 0
  bottom 0
.q-notification-list-top
  top 0
.q-notification-list-bottom
  bottom 0
body.q-ios-statusbar-x
  .q-notification-list-center, .q-notification-list-top
    top env(safe-area-inset-top)
  .q-notification-list-center, .q-notification-list-bottom
    bottom env(safe-area-inset-bottom)
.q-notification
  border-radius 5px
  pointer-events all
  display inline-block
  margin 10px 10px 0
  transition-property transform,opacity
  transition-duration 1s
  z-index $z-notify
  max-width 100%
.q-notification-
  &top-left-enter, &top-left-leave-to,
  &top-enter, &top-leave-to,
  &top-right-enter, &top-right-leave-to
    opacity 0
    transform translateY(-50px)
    z-index ($z-notify - 1)
  &left-enter, &left-leave-to,
  &center-enter, &center-leave-to,
  &right-enter, &right-leave-to,
  &bottom-left-enter, &bottom-left-leave-to,
  &bottom-enter, &bottom-leave-to,
  &bottom-right-enter, &bottom-right-leave-to
    opacity 0
    transform translateY(50px)
    z-index ($z-notify - 1)
  &top-left-leave-active,
  &top-leave-active,
  &top-right-leave-active,
  &left-leave-active,
  &center-leave-active,
  &right-leave-active,
  &bottom-left-leave-active,
  &bottom-leave-active,
  &bottom-right-leave-active
    position absolute
    z-index ($z-notify - 1)
    margin-left 0
    margin-right 0
  &top-leave-active,
  &center-leave-active
    top 0
  &bottom-left-leave-active,
  &bottom-leave-active,
  &bottom-right-leave-active
    bottom 0
.q-option-inner
  display inline-block
  line-height 0
  &.active
    color $primary
    color var(--q-color-primary)
  & + .q-option-label
    margin-left $label-offset
.q-option
  vertical-align middle
  input
    display none !important
  &.reverse .q-option-inner + .q-option-label
    margin-right $label-offset
    margin-left 0
.q-option-group-inline-opts > div
  display inline-flex
.q-option-group
  margin -5px
  padding 5px 0
.q-pagination
  input
    text-align center
  .q-btn
    padding 0 5px !important
    &.disabled
      color $faded
      color var(--q-color-faded)
.q-parallax
  position relative
  width 100%
  overflow hidden
  border-radius inherit
.q-parallax-media
  > img, > video
    position absolute
    left 50%
    bottom 0
    min-width 100%
    min-height 100%
    will-change transform
.q-parallax-text
  text-shadow $paralax-text-shadow
.q-popover
  position fixed
  box-shadow $popover-box-shadow
  border-radius $generic-border-radius
  background $popover-background
  z-index $z-popover
  overflow-y auto
  overflow-x hidden
  max-width $popover-max-width
  outline 0
  > .q-list:only-child
    border none
body div .q-popover
  display none
.q-progress
  position relative
  height $progress-track-height
  display block
  width 100%
  background-clip padding-box
  overflow hidden
.q-progress-model
  background currentColor
  &.animate
    animation q-progress-stripes 2s linear infinite
  &:not(.indeterminate)
    position absolute
    top 0
    bottom 0
    transition $progress-transition
  &.indeterminate
    &:before, &:after
      content ''
      position absolute
      background inherit
      top 0
      left 0
      bottom 0
      will-change left, right
    &:before
      animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
    &:after
      animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
      animation-delay 1.15s
  &.stripe
    &, &:before, &:after
      background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important
      background-size 40px 40px !important
.q-progress-track
  top 0
  left 0
  bottom 0
  transition $progress-transition
.q-progress-buffer
  top 50%
  transform translateY(-50%)
  height 4px
  right 0
  transition $progress-transition
  mask url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=") 
.q-progress-track, .q-progress-buffer
  background $progress-track-color
  opacity $progress-track-opacity
  position absolute
@keyframes q-progress-indeterminate
  0%
    left -35%
    right 100%
  60%
    left 100%
    right -90%
  100%
    left 100%
    right -90%
@keyframes q-progress-indeterminate-short
  0%
    left -200%
    right 100%
  60%
    left 107%
    right -8%
  100%
    left 107%
    right -8%
@keyframes q-progress-stripes
  from
    background-position 40px 0
  to
    background-position 0 0
.pull-to-refresh
  position relative
.pull-to-refresh-message
  height 65px
  font-size $pull-to-refresh-font-size
  .q-icon
    font-size $pull-to-refresh-icon-size
    margin-right 15px
    transition all .3s
$radio-size = 21px
.q-radio-unchecked, .q-radio-checked, .q-radio .q-option-inner
  height $radio-size
  width $radio-size
  min-width $radio-size
  font-size $radio-size
  transition transform .45s cubic-bezier(.23, 1, .32, 1)
  opacity 1
.q-radio-unchecked
  opacity 1
.q-radio-checked
  transform-origin 50% 50% 0
  transform scale(0)
.q-radio .q-option-inner.active
  .q-radio-unchecked
    opacity 0
  .q-radio-checked
    transform scale(1)
.q-rating
  color $rating-grade-color
  vertical-align middle
  span
    pointer-events none
    display inherit
  i
    color currentColor
    text-shadow $rating-shadow
    position relative
    cursor default
    opacity .4
    pointer-events all
    &.hovered
      transform scale(1.3)
    &.exselected
      opacity .7
    &.active
      opacity 1
    & + i
      margin-left .3rem
  &.editable i
    cursor pointer
  &:not(.editable) span, i
    outline 0
.q-scrollarea-thumb
  background black
  width 10px
  right 0
  opacity .2
  transition opacity .3s
  &.invisible-thumb
    opacity 0 !important
  &:hover
    opacity .3
  &:active
    opacity .5
.q-toolbar .q-search
  background rgba(255, 255, 255, .25)
$slider-height              = 32px
$slider-track-height        = 2px
$slider-mark-height         = 10px
$slider-handle-size         = 22px
$slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
.q-slider-track, .q-slider-mark
  opacity .4
  background currentColor
.q-slider-track
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  height $slider-track-height
  width 100%
  &:not(.dragging)
    transition all .3s ease
  &.active-track
    opacity 1
  &.track-draggable.dragging
    height ($slider-track-height * 2)
    transition height .3s ease
  &.handle-at-minimum
    background transparent
.q-slider-mark
  position absolute
  top 50%
  height $slider-mark-height
  width 2px
  transform translateX(-50%) translateY(-50%)
.q-slider-handle-container
  position relative
  height 100%
  margin-left ($slider-handle-size / 2)
  margin-right ($slider-handle-size / 2)
.q-slider-label
  top 0
  left ($slider-handle-size / 2)
  opacity 0
  transform translateX(-50%) translateY(0) scale(0)
  transition all .2s
  padding 2px 4px
  &.label-always
    opacity 1
    transform $slider-label-transform
.q-slider-handle
  position absolute
  top 50%
  transform translate3d(-50%, -50%, 0)
  transform-origin center
  transition all .3s ease
  width $slider-handle-size
  height $slider-handle-size
  background white
  box-shadow $shadow-3
  .q-chip
    max-width unset
  &.dragging
    transform translate3d(-50%, -50%, 0)
    transition opacity .3s ease, transform .3s ease
    .q-slider-label
      opacity 1
      transform $slider-label-transform
.q-slider-ring
  position absolute
  top -50%
  left -50%
  width 200%
  height 200%
  border-radius inherit
  pointer-events none
  opacity 0
  transform scale(0)
  transition all .2s ease-in
  background currentColor
.q-slider:not(.disabled):not(.readonly)
  .q-slider-handle.dragging, .q-slider-handle:focus, body.desktop &:hover
    .q-slider-ring
      opacity .4
      transform scale(1)
.q-slider.disabled
  .q-slider-handle
    border 2px solid white
  .q-slider-handle.handle-at-minimum
    background currentColor
.q-slider
  height $slider-height
  width 100%
  color $primary
  color var(--q-color-primary)
  cursor pointer
  &.label-always, &.with-padding
    padding 30px 0 4px
    height 56px
  &.has-error
    color $negative
    color var(--q-color-negative)
  &.has-warning
    color $warning
    color var(--q-color-warning)
.q-spinner
  vertical-align middle
.q-spinner-mat
  animation q-spin 2s linear infinite  /* rtl:ignore */
  transform-origin center center /* rtl:ignore */
  .path
    stroke-dasharray 1, 200
    stroke-dashoffset 0
    stroke-linecap round
    animation q-mat-dash 1.5s ease-in-out infinite  /* rtl:ignore */
@keyframes q-mat-dash
  0%
    stroke-dasharray 1, 200
    stroke-dashoffset 0
  50%
    stroke-dasharray 89, 200
    stroke-dashoffset -35px
  100%
    stroke-dasharray 89, 200
    stroke-dashoffset -124px
.q-stepper
  border-radius $generic-border-radius
  box-shadow $shadow-2
.q-stepper-title
  font-size 14px
.q-stepper-subtitle
  font-size 12px
  opacity .7
.q-stepper-dot
  margin-right 8px
  font-size 14px
  width 24px
  height 24px
  border-radius 50%
  background currentColor
  span
    color white
.q-stepper-tab
  padding 24px
  font-size 14px
  flex-direction row
  transition color .28s, background .28s
  &.step-waiting
    color black
    .q-stepper-dot
      color $stepper-label-inactive-color
  &.step-navigation
    user-select none
    cursor pointer
    &:active
      background $stepper-active-background !important
  &.step-color
    color currentColor
  &.step-active .q-stepper-title
    font-weight bold
  &.step-disabled
    color $stepper-label-inactive-color
  &.step-error
    color $negative
    color var(--q-color-negative)
    .q-stepper-dot
      background transparent
      span
        color $negative
        color var(--q-color-negative)
        font-size 24px
.q-stepper-header
  min-height 72px
  &:not(.alternative-labels)
    .q-stepper-tab
      justify-content center
    .q-stepper-dot:after
      display none
  &.alternative-labels
    min-height 104px
    .q-stepper-tab
      padding 24px 32px
      flex-direction column
      justify-content flex-start
    .q-stepper-dot
      margin-right 0
    .q-stepper-label
      margin-top 8px
      text-align center
      &:before, &:after
        display none
.q-stepper-step-content
  color black
.q-stepper-horizontal >
  .q-stepper-header
    .q-stepper-tab
      overflow hidden
    .q-stepper-first .q-stepper-dot:before,
    .q-stepper-last .q-stepper-label:after,
    .q-stepper-last .q-stepper-dot:after
      display none
    .q-stepper-line
      &:before, &:after
        position absolute
        top 50%
        height 1px
        width 100vw
        background $stepper-divider-color
    .q-stepper-label:after, .q-stepper-dot:after
      content ''
      left 100%
      margin-left 8px
    .q-stepper-dot:before
      content ''
      right 100%
      margin-right 8px
  .q-stepper-nav
    margin 0 16px 8px
  .q-stepper-step
    .q-stepper-nav
      margin 16px 0 0
      > div.col
        display none
    > .q-stepper-step-content > .q-stepper-step-inner
      padding 24px
.q-stepper-vertical
  padding 8px 0 18px
.q-stepper-vertical >
  .q-stepper-nav
    margin-top 16px
    > div.col
      display none
  .q-stepper-step
    overflow hidden
    > .q-stepper-step-content > .q-stepper-step-inner
      padding 0 24px 24px 48px
    > .q-stepper-tab
      padding 12px 16px
      .q-stepper-dot
        &:before, &:after
          content ''
          position absolute
          left 50%
          width 1px
          height 100vh
          background $stepper-divider-color
      .q-stepper-dot:before
        bottom 100%
        margin-bottom 8px
      .q-stepper-dot:after
        top 100%
        margin-top 8px
      .q-stepper-label
        padding-top 4px
        .q-stepper-title
          line-height 18px
      &.q-stepper-first .q-stepper-dot:before,
      &.q-stepper-last .q-stepper-dot:after
        display none
body.desktop .q-stepper-tab.step-navigation:hover
  background $stepper-hover-background
@media (max-width $breakpoint-sm-max)
  .q-stepper-horizontal.q-stepper-contractable >
    .q-stepper-header
      min-height 72px
      .q-stepper-tab
        padding 24px 0
        &:not(:last-child)
          .q-stepper-dot:after
            display block !important
      .q-stepper-dot
        margin 0
      .q-stepper-label
        display none
.q-tabs
  flex-direction column
  border-radius $generic-border-radius
.q-layout-marginal .q-tabs
  border-radius 0
.q-tabs-scroller
  overflow hidden
.q-tab-pane
  padding $tabs-pane-padding
.q-tabs-panes:empty
  display none
.q-tab-icon, .q-tab-label
  opacity $tabs-unselected-opacity
.q-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  .q-tab-icon, .q-tab-label
    transition transform .2s
  .q-tab-icon-parent + .q-tab-label-parent
    margin-top 3px
  .q-chip
    top -4px
    right -10px
    left auto
    min-height auto
    color white
    background alpha($dot-color, .75)
  &.active
    .q-tab-icon, .q-tab-label
      transform scale(1.1)
      opacity 1
  &:active
    background rgba(255, 255, 255, .3)
.q-tab-label
  text-align center
  line-height 1.3
.q-tab-only-label
  font-size $tabs-big-font-size
.q-tab-icon
  font-size $tabs-icon-font-size
.q-tab-focus-helper
  z-index -1
  outline 0
  &:focus
    z-index unset
    background currentColor
    opacity .1
@media (max-width $breakpoint-sm-max)
  .q-tab
    &.hide-icon .q-tab-icon-parent,
    &.hide-label .q-tab-label-parent
      display none !important
    &.hide-icon .q-tab-label
      font-size $tabs-big-font-size
      margin-top 0
  .q-tab-full.hide-none .q-tab-label-parent .q-tab-meta
    display none
@media (min-width $breakpoint-md-min)
  .q-tab-full .q-tab-label-parent .q-tab-meta
    display none
@media (max-width $breakpoint-md-max)
  .q-tabs-head:not(.scrollable)
    .q-tabs-scroller, .q-tab
      flex 1 1 auto
@media (min-width $breakpoint-lg-min)
  .q-tab
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .q-tab-label
    font-size $tabs-big-font-size
  .q-layout-marginal .q-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding
.q-tabs-head
  min-height $tabs-min-height
  overflow hidden
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative
  &:not(.scrollable)
    .q-tabs-left-scroll, .q-tabs-right-scroll
      display none !important
.q-tabs-left-scroll, .q-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  top 0
  .q-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &.disabled
    display none
.q-tabs:hover
  .q-tabs-left-scroll, .q-tabs-right-scroll
    .q-icon
      visibility visible
.q-tabs-left-scroll
  left 0 /* rtl:ignore */
.q-tabs-right-scroll
  right 0 /* rtl:ignore */
.q-tabs-align-justify
  .q-tabs-scroller, .q-tab
    flex 1 1 auto
.q-tabs-align-center
  justify-content center
.q-tabs-align-right
  justify-content flex-end
.q-tabs-two-lines .q-tab
  white-space normal
  .q-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2
.q-tabs-position-bottom .q-tabs-panes
  order -1
.q-tabs-inverted
  .q-tab
    &:active
      background rgba(0, 0, 0, .1)
  .q-tabs-head
    background white
  &.q-tabs-position-top
    .q-tabs-panes
      border-top $tabs-pane-border
    .q-tab-pane
      border-top 0
  &.q-tabs-position-bottom
    .q-tabs-panes
      border-bottom $tabs-pane-border
    .q-tab-pane
      border-bottom 0
body.mobile .q-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch
body.desktop .q-tab
  &:before
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    opacity .1
    background currentColor
  &:hover:before
    content ''
.q-table-container
  border-radius $table-border-radius
  box-shadow $table-box-shadow
  position relative
  &.fullscreen
    background-color inherit
.q-table-top
  min-height 64px
  padding 8px 24px
  &:before
    content ''
    position absolute
    pointer-events none
    top 0
    right 0
    bottom 0
    left 0
    opacity .2
    transition $table-transition
  .q-table-control
    min-height 36px
    padding 8px 0
    flex-wrap wrap
.q-table-title
  font-size 20px
  letter-spacing 0.005em
  font-weight 400
.q-table-separator
  min-width 8px !important
.q-table-nodata .q-icon
  font-size 200%
  padding-right 15px
.q-table-progress
  height 0 !important
  td
    padding 0 !important
    border-bottom 1px solid transparent !important
  .q-progress
    position absolute
    height 2px
    bottom 0
.q-table-middle
  max-width 100%
.q-table-bottom
  min-height 48px
  padding 4px 14px 4px 24px
  &, .q-if
    font-size 12px
  .q-table-control
    min-height 24px
.q-table-control
  display flex
  align-items center
.q-table-sort-icon
  transition $table-transition
  will-change opacity, transform
  opacity 0
  font-size 120%
.q-table-sort-icon-left,
.q-table-sort-icon-center
  margin-left 4px
.q-table-sort-icon-right
  margin-right 4px
.q-table
  width 100%
  max-width 100%
  border-collapse collapse
  border-spacing 0
  thead tr
    height 56px
  th
    font-weight 500
    font-size 12px
    transition $table-transition
    user-select none
    &.sortable
      cursor pointer
      &:hover .q-table-sort-icon
        opacity .5
    &.sorted .q-table-sort-icon
      opacity 1 !important
    &.sort-desc .q-table-sort-icon
      transform rotate(180deg)
  tbody tr
    transition $table-transition
    will-change background
  th, td
    white-space nowrap
    padding 7px 24px
  thead, td, th
    border-style solid
    border-width 0
  tbody td
    height 48px
    font-weight 400
    font-size 13px
.q-table-col-auto-width
  width 1px
.q-table-bottom-item
  margin-right 24px
.q-table-grid
  box-shadow none
  .q-table-bottom
    border-top 0
  .q-table
    height 2px
    thead
      border 0
.q-table-horizontal-separator
  thead, tbody td
    border-width 0 0 1px 0
.q-table-vertical-separator
  thead
    border-width 0 0 1px 0
  td
    border-width 0 0 0 1px
  td:first-child
    border-left 0
.q-table-cell-separator
  td
    border-width 1px
  td:first-child
    border-left 0
  td:last-child
    border-right 0
table-dense()
  .q-table-top
    min-height 48px
  .q-table-top, .q-table-bottom
    padding-left 8px
    padding-right 8px
  .q-table-bottom
    min-height 42px
  .q-table-sort-icon
    font-size 110%
  .q-table
    th, td
      padding 4px 8px
    thead tr
      height 40px
    tbody td
      height 28px
  .q-table-bottom-item
    margin-right 8px
.q-table-dense
  table-dense()
@media (max-width $breakpoint-sm-max)
  table-dense()
.q-table-bottom 
  color $table-header-color
  border-top 1px solid $table-border-color
.q-table 
  color $table-color
  thead, tr, th, td
    border-color $table-border-color
  th
    color $table-header-color
    &.sortable:hover, &.sorted
      color $table-color
  tbody tr
    &.selected
      background $table-selected-background
    &:hover
      background $table-hover-background
.q-table-dark
  color $table-dark-color
  .q-table-bottom, .q-table-top
    color $table-dark-header-color
    border-top 1px solid $table-dark-border-color
  thead, tr, th, td
    border-color $table-dark-border-color
  th
    color $table-dark-header-color
    &.sortable:hover, &.sorted
      color $table-dark-color
  tbody tr
    &.selected
      background $table-dark-selected-background
    &:hover
      background $table-dark-hover-background
.q-timeline
  padding 0
  width 100%
  list-style none
  h6
    line-height inherit
.q-timeline-title
  margin-top 0
  margin-bottom 16px
.q-timeline-subtitle
  font-size 12px
  margin-bottom 8px
  opacity .4
  text-transform uppercase
  letter-spacing 1px
  font-weight 700
.q-timeline-dot
  position absolute
  top 0
  bottom 0
  left 0
  width 15px
  &:before, &:after
    content ''
    background currentColor
    display block
    position absolute
  &:before
    border 3px solid transparent
    border-radius 100%
    height 15px
    width 15px
    top 4px
    left 0
    transition background .3s ease-in-out, border .3s ease-in-out
  &:after
    width 3px
    opacity .4
    top 24px
    bottom 0
    left 6px
.q-timeline-entry-with-icon
  .q-timeline-dot
    width 31px
    left -8px
    &:before
      height 31px
      width 31px
    &:after
      top 41px
      left 14px
  .q-timeline-subtitle
    padding-top 8px
.q-timeline-dot .q-icon
  position absolute
  display inline-flex
  top 0
  left 0
  right 0
  font-size 16px
  height 38px
  color white
  transition color .3s ease-in-out
.q-timeline-dark
  color white
  .q-timeline-subtitle
    opacity .7
.q-timeline-entry
  padding-left 40px
  position relative
  line-height 22px
  &:last-child
    padding-bottom 0
    .q-timeline-dot:after
      content none
.q-timeline-hover .q-timeline-entry
  &:hover
    .q-timeline-dot:before
      background transparent
      border 3px solid currentColor
  &.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
    color currentColor
.q-timeline-content
  padding-bottom 24px
.q-timeline-heading
  position relative
  &:first-child .q-timeline-heading-title
    padding-top 0
  &:last-child .q-timeline-heading-title
    padding-bottom 0
.q-timeline-heading-title
  padding 32px 0
  margin 0
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .q-timeline-responsive
    .q-timeline-heading
      display table-row
      font-size 200%
      > div
        display table-cell
    .q-timeline-heading-title
      margin-left -50px
    .q-timeline
      display table
    .q-timeline-entry
      display table-row
      padding 0
    .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
      display table-cell
      vertical-align top
    .q-timeline-subtitle
      text-align right
      width 35%
    .q-timeline-dot
      position relative
    .q-timeline-content
      padding-left 30px
    .q-timeline-entry-with-icon .q-timeline-content
      padding-top 8px
    .q-timeline-subtitle
      padding-right 30px
@media (min-width $breakpoint-lg-min)
  .q-timeline-responsive
    .q-timeline-heading-title
      text-align center
      margin-left 0
    .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
      display block
      margin 0
      padding 0
    .q-timeline-dot
      position absolute
      left 50%
      margin-left -7.15px
    .q-timeline-entry-with-icon .q-timeline-dot
      left 50%
      margin-left -15px
    .q-timeline-subtitle, .q-timeline-content
      width 50%
    .q-timeline-entry-left .q-timeline-content,
    .q-timeline-entry-right .q-timeline-subtitle
      float left
      padding-right 30px
      text-align right
    .q-timeline-entry-left .q-timeline-subtitle,
    .q-timeline-entry-right .q-timeline-content
      float right
      text-align left
      padding-left 30px
    .q-timeline-entry-with-icon .q-timeline-content
      padding-top 8px
    .q-timeline-entry
      padding-bottom 24px
      overflow hidden
$toggle-width           = 50px
$toggle-height          = 32px
$toggle-span            = 2px
$toggle-handle-size     = $toggle-height - 2 * $toggle-span
.q-toggle-base
  transition all .45s cubic-bezier(.23, 1, .32, 1)
  width 100%
  height $toggle-height
  color $grey-2
  background currentColor
  border-radius 16px
  border 2px solid $light
  border 2px solid var(--q-color-light)
.q-toggle-base-dark
  color darken($light, 10%)
  color var(--q-color-light-d)
.q-toggle-handle
  background white
  box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px $light 
  box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px var(--q-color-light) 
  transition all 450ms cubic-bezier(.23, 1, .32, 1)
  border-radius 50%
  position absolute
  top $toggle-span
  left $toggle-span
  width $toggle-handle-size
  height $toggle-handle-size
  line-height $toggle-handle-size
.q-toggle .q-option-inner
  height $toggle-height
  width $toggle-width
  min-width $toggle-width
  &.active
    .q-toggle-base
      color currentColor
      border 0
    .q-toggle-handle
      box-shadow $shadow-2
      left ($toggle-width - $toggle-handle-size - $toggle-span)
.q-toolbar
  padding $toolbar-padding
  min-height $toolbar-min-height
  overflow hidden
  width 100%
.q-toolbar-inverted
  background white
.q-toolbar-title
  flex 1 1 0%
  min-width 1px
  max-width 100%
  align-items center
  font-size $toolbar-title-font-size
  font-weight $toolbar-title-font-weight
  padding $toolbar-title-padding
  text-align center
.q-toolbar-subtitle
  font-size $toolbar-subtitle-font-size
  opacity .7
.q-toolbar-title, .q-toolbar-subtitle
  text-overflow ellipsis
  white-space nowrap
  overflow hidden
.q-tooltip
  position fixed
  font-size $tooltip-fontsize
  color $tooltip-color
  background $tooltip-background
  box-shadow $tooltip-box-shadow
  z-index $z-tooltip
  padding $tooltip-padding
  border-radius $tooltip-border-radius
  overflow-y auto
  overflow-x hidden
  pointer-events none
.q-tree-node
  margin 0
  list-style-type none
  position relative
  padding 0 0 3px 22px
  &:after
    content ''
    position absolute
    top -3px
    bottom 0
    width 1px
    right auto
    left -13px
    border-left 1px solid currentColor
  &:last-child:after
    display none
.q-tree-node-header:before
  content ''
  position absolute
  top -3px
  bottom 50%
  width 35px
  left -35px
  border-left 1px solid currentColor
  border-bottom 1px solid currentColor
.q-tree-children
  padding-left 25px
  &.disabled
    pointer-events none
.q-tree-node-body
  padding 5px 0 8px 5px
.q-tree-node-parent
  padding-left 2px
  > .q-tree-node-header:before
    width 15px
    left -15px
  > .q-tree-node-collapsible > .q-tree-node-body
    padding 5px 0 8px 27px
    &:after
      content ''
      position absolute
      top 0
      width 1px
      height 100%
      right auto
      left 12px
      border-left 1px solid currentColor
      bottom 50px
.q-tree-node-link
  cursor pointer
.q-tree-node-selected
  background rgba(0, 0, 0, .15)
.q-tree-dark .q-tree-node-selected
  background rgba(255, 255, 255, .4)
body.desktop
  .q-tree-node-link:hover
    background rgba(0, 0, 0, .1)
  .q-tree-dark .q-tree-node-link:hover
    background rgba(255, 255, 255, .3)
.q-tree-node-header
  padding 4px
  margin-top 3px
  border-radius $generic-border-radius
  &.disabled
    pointer-events none
.q-tree-icon
  font-size 1.5em
.q-tree-img
  height 3em
  &.avatar
    width 2em
    height 2em
.q-tree-arrow
  font-size 1rem
  width 1rem
  height 1rem
.q-tree-arrow-rotate
  transform rotate(90deg)
[dir=rtl]
  .q-tree-arrow
    transform rotate(180deg) /* rtl:ignore */
  .q-tree-arrow-rotate
    transform rotate(90deg) /* rtl:ignore */
.q-tree
  
  > .q-tree-node
    padding 0
    &:after, > .q-tree-node-header:before
      display none
  
  > .q-tree-node-child > .q-tree-node-header
    padding-left 24px
.q-uploader-expanded .q-if
  border-bottom-left-radius 0
  border-bottom-right-radius 0
.q-uploader-input
  opacity 0
  max-width 100%
  height 100%
  width 100%
  font-size 0
.q-uploader-pick-button[disabled] .q-uploader-input
  display none
.q-uploader-files
  border 1px solid $grey-4
  font-size 14px
  max-height 500px
.q-uploader-files-no-border .q-uploader-files
  border-top 0 !important
.q-uploader-file:not(:last-child)
  border-bottom 1px solid $grey-4
.q-uploader-progress-bg, .q-uploader-progress-text
  pointer-events none
.q-uploader-progress-bg
  height 100%
  opacity .2
.q-uploader-progress-text
  font-size 40px
  opacity .1
  right 44px
  bottom 0
.q-uploader-dnd
  outline 2px dashed currentColor
  outline-offset -6px
  background rgba(255, 255, 255, .6)
  &.inverted
    background rgba(0, 0, 0, .3)
.q-uploader-dark
  .q-uploader-files
    color white
    border 1px solid $field-dark-label-color
  .q-uploader-bg
    color white
  .q-uploader-progress-text
    opacity .2
  .q-uploader-file:not(:last-child)
    border-bottom 1px solid $dark
    border-bottom 1px solid var(--q-color-dark)
img
  &.responsive
    max-width 100%
    height auto
  &.avatar
    width 50px
    height 50px
    border-radius 50%
    box-shadow $shadow-1
    vertical-align middle
.q-video
  position relative
  overflow hidden
  border-radius inherit
  iframe, object, embed
    width 100%
    height 100%
:root
  --q-color-primary      $primary
  --q-color-secondary    $secondary
  --q-color-tertiary     $tertiary
  --q-color-positive     $positive
  --q-color-negative     $negative
  --q-color-negative-l   lighten($negative, 46%)
  --q-color-info         $info
  --q-color-warning      $warning
  --q-color-warning-l    lighten($warning, 46%)
  --q-color-light        $light
  --q-color-light-d      darken($light, 10%)
  --q-color-faded        $faded
  --q-color-dark         $dark
.text-primary
  color $primary !important
  color var(--q-color-primary) !important
.bg-primary
  background $primary !important
  background var(--q-color-primary) !important
.text-secondary
  color $secondary !important
  color var(--q-color-secondary) !important
.bg-secondary
  background $secondary !important
  background var(--q-color-secondary) !important
.text-tertiary
  color $tertiary !important
  color var(--q-color-tertiary) !important
.bg-tertiary
  background $tertiary !important
  background var(--q-color-tertiary) !important
.text-faded
  color $faded !important
  color var(--q-color-faded) !important
.bg-faded
  background $faded !important
  background var(--q-color-faded) !important
.text-positive
  color $positive !important
  color var(--q-color-positive) !important
.bg-positive
  background $positive !important
  background var(--q-color-positive) !important
.text-negative
  color $negative !important
  color var(--q-color-negative) !important
.bg-negative
  background $negative !important
  background var(--q-color-negative) !important
.text-info
  color $info !important
  color var(--q-color-info) !important
.bg-info
  background $info !important
  background var(--q-color-info) !important
.text-warning
  color $warning !important
  color var(--q-color-warning) !important
.bg-warning
  background $warning !important
  background var(--q-color-warning) !important
.text-white
  color #fff !important
.bg-white
  background #fff !important
.text-black
  color #000 !important
.bg-black
  background #000 !important
.text-light
  color $light !important
  color var(--q-color-light) !important
.bg-light
  background $light !important
  background var(--q-color-light) !important
.text-dark
  color $dark !important
  color var(--q-color-dark) !important
.bg-dark
  background $dark !important
  background var(--q-color-dark) !important
.text-transparent
  color transparent !important
.bg-transparent
  background transparent !important
.text-red
  color $red !important
.text-red-1
  color $red-1 !important
.text-red-2
  color $red-2 !important
.text-red-3
  color $red-3 !important
.text-red-4
  color $red-4 !important
.text-red-5
  color $red-5 !important
.text-red-6
  color $red-6 !important
.text-red-7
  color $red-7 !important
.text-red-8
  color $red-8 !important
.text-red-9
  color $red-9 !important
.text-red-10
  color $red-10 !important
.text-red-11
  color $red-11 !important
.text-red-12
  color $red-12 !important
.text-red-13
  color $red-13 !important
.text-red-14
  color $red-14 !important
.text-pink
  color $pink !important
.text-pink-1
  color $pink-1 !important
.text-pink-2
  color $pink-2 !important
.text-pink-3
  color $pink-3 !important
.text-pink-4
  color $pink-4 !important
.text-pink-5
  color $pink-5 !important
.text-pink-6
  color $pink-6 !important
.text-pink-7
  color $pink-7 !important
.text-pink-8
  color $pink-8 !important
.text-pink-9
  color $pink-9 !important
.text-pink-10
  color $pink-10 !important
.text-pink-11
  color $pink-11 !important
.text-pink-12
  color $pink-12 !important
.text-pink-13
  color $pink-13 !important
.text-pink-14
  color $pink-14 !important
.text-purple
  color $purple !important
.text-purple-1
  color $purple-1 !important
.text-purple-2
  color $purple-2 !important
.text-purple-3
  color $purple-3 !important
.text-purple-4
  color $purple-4 !important
.text-purple-5
  color $purple-5 !important
.text-purple-6
  color $purple-6 !important
.text-purple-7
  color $purple-7 !important
.text-purple-8
  color $purple-8 !important
.text-purple-9
  color $purple-9 !important
.text-purple-10
  color $purple-10 !important
.text-purple-11
  color $purple-11 !important
.text-purple-12
  color $purple-12 !important
.text-purple-13
  color $purple-13 !important
.text-purple-14
  color $purple-14 !important
.text-deep-purple
  color $deep-purple !important
.text-deep-purple-1
  color $deep-purple-1 !important
.text-deep-purple-2
  color $deep-purple-2 !important
.text-deep-purple-3
  color $deep-purple-3 !important
.text-deep-purple-4
  color $deep-purple-4 !important
.text-deep-purple-5
  color $deep-purple-5 !important
.text-deep-purple-6
  color $deep-purple-6 !important
.text-deep-purple-7
  color $deep-purple-7 !important
.text-deep-purple-8
  color $deep-purple-8 !important
.text-deep-purple-9
  color $deep-purple-9 !important
.text-deep-purple-10
  color $deep-purple-10 !important
.text-deep-purple-11
  color $deep-purple-11 !important
.text-deep-purple-12
  color $deep-purple-12 !important
.text-deep-purple-13
  color $deep-purple-13 !important
.text-deep-purple-14
  color $deep-purple-14 !important
.text-indigo
  color $indigo !important
.text-indigo-1
  color $indigo-1 !important
.text-indigo-2
  color $indigo-2 !important
.text-indigo-3
  color $indigo-3 !important
.text-indigo-4
  color $indigo-4 !important
.text-indigo-5
  color $indigo-5 !important
.text-indigo-6
  color $indigo-6 !important
.text-indigo-7
  color $indigo-7 !important
.text-indigo-8
  color $indigo-8 !important
.text-indigo-9
  color $indigo-9 !important
.text-indigo-10
  color $indigo-10 !important
.text-indigo-11
  color $indigo-11 !important
.text-indigo-12
  color $indigo-12 !important
.text-indigo-13
  color $indigo-13 !important
.text-indigo-14
  color $indigo-14 !important
.text-blue
  color $blue !important
.text-blue-1
  color $blue-1 !important
.text-blue-2
  color $blue-2 !important
.text-blue-3
  color $blue-3 !important
.text-blue-4
  color $blue-4 !important
.text-blue-5
  color $blue-5 !important
.text-blue-6
  color $blue-6 !important
.text-blue-7
  color $blue-7 !important
.text-blue-8
  color $blue-8 !important
.text-blue-9
  color $blue-9 !important
.text-blue-10
  color $blue-10 !important
.text-blue-11
  color $blue-11 !important
.text-blue-12
  color $blue-12 !important
.text-blue-13
  color $blue-13 !important
.text-blue-14
  color $blue-14 !important
.text-light-blue
  color $light-blue !important
.text-light-blue-1
  color $light-blue-1 !important
.text-light-blue-2
  color $light-blue-2 !important
.text-light-blue-3
  color $light-blue-3 !important
.text-light-blue-4
  color $light-blue-4 !important
.text-light-blue-5
  color $light-blue-5 !important
.text-light-blue-6
  color $light-blue-6 !important
.text-light-blue-7
  color $light-blue-7 !important
.text-light-blue-8
  color $light-blue-8 !important
.text-light-blue-9
  color $light-blue-9 !important
.text-light-blue-10
  color $light-blue-10 !important
.text-light-blue-11
  color $light-blue-11 !important
.text-light-blue-12
  color $light-blue-12 !important
.text-light-blue-13
  color $light-blue-13 !important
.text-light-blue-14
  color $light-blue-14 !important
.text-cyan
  color $cyan !important
.text-cyan-1
  color $cyan-1 !important
.text-cyan-2
  color $cyan-2 !important
.text-cyan-3
  color $cyan-3 !important
.text-cyan-4
  color $cyan-4 !important
.text-cyan-5
  color $cyan-5 !important
.text-cyan-6
  color $cyan-6 !important
.text-cyan-7
  color $cyan-7 !important
.text-cyan-8
  color $cyan-8 !important
.text-cyan-9
  color $cyan-9 !important
.text-cyan-10
  color $cyan-10 !important
.text-cyan-11
  color $cyan-11 !important
.text-cyan-12
  color $cyan-12 !important
.text-cyan-13
  color $cyan-13 !important
.text-cyan-14
  color $cyan-14 !important
.text-teal
  color $teal !important
.text-teal-1
  color $teal-1 !important
.text-teal-2
  color $teal-2 !important
.text-teal-3
  color $teal-3 !important
.text-teal-4
  color $teal-4 !important
.text-teal-5
  color $teal-5 !important
.text-teal-6
  color $teal-6 !important
.text-teal-7
  color $teal-7 !important
.text-teal-8
  color $teal-8 !important
.text-teal-9
  color $teal-9 !important
.text-teal-10
  color $teal-10 !important
.text-teal-11
  color $teal-11 !important
.text-teal-12
  color $teal-12 !important
.text-teal-13
  color $teal-13 !important
.text-teal-14
  color $teal-14 !important
.text-green
  color $green !important
.text-green-1
  color $green-1 !important
.text-green-2
  color $green-2 !important
.text-green-3
  color $green-3 !important
.text-green-4
  color $green-4 !important
.text-green-5
  color $green-5 !important
.text-green-6
  color $green-6 !important
.text-green-7
  color $green-7 !important
.text-green-8
  color $green-8 !important
.text-green-9
  color $green-9 !important
.text-green-10
  color $green-10 !important
.text-green-11
  color $green-11 !important
.text-green-12
  color $green-12 !important
.text-green-13
  color $green-13 !important
.text-green-14
  color $green-14 !important
.text-light-green
  color $light-green !important
.text-light-green-1
  color $light-green-1 !important
.text-light-green-2
  color $light-green-2 !important
.text-light-green-3
  color $light-green-3 !important
.text-light-green-4
  color $light-green-4 !important
.text-light-green-5
  color $light-green-5 !important
.text-light-green-6
  color $light-green-6 !important
.text-light-green-7
  color $light-green-7 !important
.text-light-green-8
  color $light-green-8 !important
.text-light-green-9
  color $light-green-9 !important
.text-light-green-10
  color $light-green-10 !important
.text-light-green-11
  color $light-green-11 !important
.text-light-green-12
  color $light-green-12 !important
.text-light-green-13
  color $light-green-13 !important
.text-light-green-14
  color $light-green-14 !important
.text-lime
  color $lime !important
.text-lime-1
  color $lime-1 !important
.text-lime-2
  color $lime-2 !important
.text-lime-3
  color $lime-3 !important
.text-lime-4
  color $lime-4 !important
.text-lime-5
  color $lime-5 !important
.text-lime-6
  color $lime-6 !important
.text-lime-7
  color $lime-7 !important
.text-lime-8
  color $lime-8 !important
.text-lime-9
  color $lime-9 !important
.text-lime-10
  color $lime-10 !important
.text-lime-11
  color $lime-11 !important
.text-lime-12
  color $lime-12 !important
.text-lime-13
  color $lime-13 !important
.text-lime-14
  color $lime-14 !important
.text-yellow
  color $yellow !important
.text-yellow-1
  color $yellow-1 !important
.text-yellow-2
  color $yellow-2 !important
.text-yellow-3
  color $yellow-3 !important
.text-yellow-4
  color $yellow-4 !important
.text-yellow-5
  color $yellow-5 !important
.text-yellow-6
  color $yellow-6 !important
.text-yellow-7
  color $yellow-7 !important
.text-yellow-8
  color $yellow-8 !important
.text-yellow-9
  color $yellow-9 !important
.text-yellow-10
  color $yellow-10 !important
.text-yellow-11
  color $yellow-11 !important
.text-yellow-12
  color $yellow-12 !important
.text-yellow-13
  color $yellow-13 !important
.text-yellow-14
  color $yellow-14 !important
.text-amber
  color $amber !important
.text-amber-1
  color $amber-1 !important
.text-amber-2
  color $amber-2 !important
.text-amber-3
  color $amber-3 !important
.text-amber-4
  color $amber-4 !important
.text-amber-5
  color $amber-5 !important
.text-amber-6
  color $amber-6 !important
.text-amber-7
  color $amber-7 !important
.text-amber-8
  color $amber-8 !important
.text-amber-9
  color $amber-9 !important
.text-amber-10
  color $amber-10 !important
.text-amber-11
  color $amber-11 !important
.text-amber-12
  color $amber-12 !important
.text-amber-13
  color $amber-13 !important
.text-amber-14
  color $amber-14 !important
.text-orange
  color $orange !important
.text-orange-1
  color $orange-1 !important
.text-orange-2
  color $orange-2 !important
.text-orange-3
  color $orange-3 !important
.text-orange-4
  color $orange-4 !important
.text-orange-5
  color $orange-5 !important
.text-orange-6
  color $orange-6 !important
.text-orange-7
  color $orange-7 !important
.text-orange-8
  color $orange-8 !important
.text-orange-9
  color $orange-9 !important
.text-orange-10
  color $orange-10 !important
.text-orange-11
  color $orange-11 !important
.text-orange-12
  color $orange-12 !important
.text-orange-13
  color $orange-13 !important
.text-orange-14
  color $orange-14 !important
.text-deep-orange
  color $deep-orange !important
.text-deep-orange-1
  color $deep-orange-1 !important
.text-deep-orange-2
  color $deep-orange-2 !important
.text-deep-orange-3
  color $deep-orange-3 !important
.text-deep-orange-4
  color $deep-orange-4 !important
.text-deep-orange-5
  color $deep-orange-5 !important
.text-deep-orange-6
  color $deep-orange-6 !important
.text-deep-orange-7
  color $deep-orange-7 !important
.text-deep-orange-8
  color $deep-orange-8 !important
.text-deep-orange-9
  color $deep-orange-9 !important
.text-deep-orange-10
  color $deep-orange-10 !important
.text-deep-orange-11
  color $deep-orange-11 !important
.text-deep-orange-12
  color $deep-orange-12 !important
.text-deep-orange-13
  color $deep-orange-13 !important
.text-deep-orange-14
  color $deep-orange-14 !important
.text-brown
  color $brown !important
.text-brown-1
  color $brown-1 !important
.text-brown-2
  color $brown-2 !important
.text-brown-3
  color $brown-3 !important
.text-brown-4
  color $brown-4 !important
.text-brown-5
  color $brown-5 !important
.text-brown-6
  color $brown-6 !important
.text-brown-7
  color $brown-7 !important
.text-brown-8
  color $brown-8 !important
.text-brown-9
  color $brown-9 !important
.text-brown-10
  color $brown-10 !important
.text-brown-11
  color $brown-11 !important
.text-brown-12
  color $brown-12 !important
.text-brown-13
  color $brown-13 !important
.text-brown-14
  color $brown-14 !important
.text-grey
  color $grey !important
.text-grey-1
  color $grey-1 !important
.text-grey-2
  color $grey-2 !important
.text-grey-3
  color $grey-3 !important
.text-grey-4
  color $grey-4 !important
.text-grey-5
  color $grey-5 !important
.text-grey-6
  color $grey-6 !important
.text-grey-7
  color $grey-7 !important
.text-grey-8
  color $grey-8 !important
.text-grey-9
  color $grey-9 !important
.text-grey-10
  color $grey-10 !important
.text-grey-11
  color $grey-11 !important
.text-grey-12
  color $grey-12 !important
.text-grey-13
  color $grey-13 !important
.text-grey-14
  color $grey-14 !important
.text-blue-grey
  color $blue-grey !important
.text-blue-grey-1
  color $blue-grey-1 !important
.text-blue-grey-2
  color $blue-grey-2 !important
.text-blue-grey-3
  color $blue-grey-3 !important
.text-blue-grey-4
  color $blue-grey-4 !important
.text-blue-grey-5
  color $blue-grey-5 !important
.text-blue-grey-6
  color $blue-grey-6 !important
.text-blue-grey-7
  color $blue-grey-7 !important
.text-blue-grey-8
  color $blue-grey-8 !important
.text-blue-grey-9
  color $blue-grey-9 !important
.text-blue-grey-10
  color $blue-grey-10 !important
.text-blue-grey-11
  color $blue-grey-11 !important
.text-blue-grey-12
  color $blue-grey-12 !important
.text-blue-grey-13
  color $blue-grey-13 !important
.text-blue-grey-14
  color $blue-grey-14 !important
.bg-red
  background $red !important
.bg-red-1
  background $red-1 !important
.bg-red-2
  background $red-2 !important
.bg-red-3
  background $red-3 !important
.bg-red-4
  background $red-4 !important
.bg-red-5
  background $red-5 !important
.bg-red-6
  background $red-6 !important
.bg-red-7
  background $red-7 !important
.bg-red-8
  background $red-8 !important
.bg-red-9
  background $red-9 !important
.bg-red-10
  background $red-10 !important
.bg-red-11
  background $red-11 !important
.bg-red-12
  background $red-12 !important
.bg-red-13
  background $red-13 !important
.bg-red-14
  background $red-14 !important
.bg-pink
  background $pink !important
.bg-pink-1
  background $pink-1 !important
.bg-pink-2
  background $pink-2 !important
.bg-pink-3
  background $pink-3 !important
.bg-pink-4
  background $pink-4 !important
.bg-pink-5
  background $pink-5 !important
.bg-pink-6
  background $pink-6 !important
.bg-pink-7
  background $pink-7 !important
.bg-pink-8
  background $pink-8 !important
.bg-pink-9
  background $pink-9 !important
.bg-pink-10
  background $pink-10 !important
.bg-pink-11
  background $pink-11 !important
.bg-pink-12
  background $pink-12 !important
.bg-pink-13
  background $pink-13 !important
.bg-pink-14
  background $pink-14 !important
.bg-purple
  background $purple !important
.bg-purple-1
  background $purple-1 !important
.bg-purple-2
  background $purple-2 !important
.bg-purple-3
  background $purple-3 !important
.bg-purple-4
  background $purple-4 !important
.bg-purple-5
  background $purple-5 !important
.bg-purple-6
  background $purple-6 !important
.bg-purple-7
  background $purple-7 !important
.bg-purple-8
  background $purple-8 !important
.bg-purple-9
  background $purple-9 !important
.bg-purple-10
  background $purple-10 !important
.bg-purple-11
  background $purple-11 !important
.bg-purple-12
  background $purple-12 !important
.bg-purple-13
  background $purple-13 !important
.bg-purple-14
  background $purple-14 !important
.bg-deep-purple
  background $deep-purple !important
.bg-deep-purple-1
  background $deep-purple-1 !important
.bg-deep-purple-2
  background $deep-purple-2 !important
.bg-deep-purple-3
  background $deep-purple-3 !important
.bg-deep-purple-4
  background $deep-purple-4 !important
.bg-deep-purple-5
  background $deep-purple-5 !important
.bg-deep-purple-6
  background $deep-purple-6 !important
.bg-deep-purple-7
  background $deep-purple-7 !important
.bg-deep-purple-8
  background $deep-purple-8 !important
.bg-deep-purple-9
  background $deep-purple-9 !important
.bg-deep-purple-10
  background $deep-purple-10 !important
.bg-deep-purple-11
  background $deep-purple-11 !important
.bg-deep-purple-12
  background $deep-purple-12 !important
.bg-deep-purple-13
  background $deep-purple-13 !important
.bg-deep-purple-14
  background $deep-purple-14 !important
.bg-indigo
  background $indigo !important
.bg-indigo-1
  background $indigo-1 !important
.bg-indigo-2
  background $indigo-2 !important
.bg-indigo-3
  background $indigo-3 !important
.bg-indigo-4
  background $indigo-4 !important
.bg-indigo-5
  background $indigo-5 !important
.bg-indigo-6
  background $indigo-6 !important
.bg-indigo-7
  background $indigo-7 !important
.bg-indigo-8
  background $indigo-8 !important
.bg-indigo-9
  background $indigo-9 !important
.bg-indigo-10
  background $indigo-10 !important
.bg-indigo-11
  background $indigo-11 !important
.bg-indigo-12
  background $indigo-12 !important
.bg-indigo-13
  background $indigo-13 !important
.bg-indigo-14
  background $indigo-14 !important
.bg-blue
  background $blue !important
.bg-blue-1
  background $blue-1 !important
.bg-blue-2
  background $blue-2 !important
.bg-blue-3
  background $blue-3 !important
.bg-blue-4
  background $blue-4 !important
.bg-blue-5
  background $blue-5 !important
.bg-blue-6
  background $blue-6 !important
.bg-blue-7
  background $blue-7 !important
.bg-blue-8
  background $blue-8 !important
.bg-blue-9
  background $blue-9 !important
.bg-blue-10
  background $blue-10 !important
.bg-blue-11
  background $blue-11 !important
.bg-blue-12
  background $blue-12 !important
.bg-blue-13
  background $blue-13 !important
.bg-blue-14
  background $blue-14 !important
.bg-light-blue
  background $light-blue !important
.bg-light-blue-1
  background $light-blue-1 !important
.bg-light-blue-2
  background $light-blue-2 !important
.bg-light-blue-3
  background $light-blue-3 !important
.bg-light-blue-4
  background $light-blue-4 !important
.bg-light-blue-5
  background $light-blue-5 !important
.bg-light-blue-6
  background $light-blue-6 !important
.bg-light-blue-7
  background $light-blue-7 !important
.bg-light-blue-8
  background $light-blue-8 !important
.bg-light-blue-9
  background $light-blue-9 !important
.bg-light-blue-10
  background $light-blue-10 !important
.bg-light-blue-11
  background $light-blue-11 !important
.bg-light-blue-12
  background $light-blue-12 !important
.bg-light-blue-13
  background $light-blue-13 !important
.bg-light-blue-14
  background $light-blue-14 !important
.bg-cyan
  background $cyan !important
.bg-cyan-1
  background $cyan-1 !important
.bg-cyan-2
  background $cyan-2 !important
.bg-cyan-3
  background $cyan-3 !important
.bg-cyan-4
  background $cyan-4 !important
.bg-cyan-5
  background $cyan-5 !important
.bg-cyan-6
  background $cyan-6 !important
.bg-cyan-7
  background $cyan-7 !important
.bg-cyan-8
  background $cyan-8 !important
.bg-cyan-9
  background $cyan-9 !important
.bg-cyan-10
  background $cyan-10 !important
.bg-cyan-11
  background $cyan-11 !important
.bg-cyan-12
  background $cyan-12 !important
.bg-cyan-13
  background $cyan-13 !important
.bg-cyan-14
  background $cyan-14 !important
.bg-teal
  background $teal !important
.bg-teal-1
  background $teal-1 !important
.bg-teal-2
  background $teal-2 !important
.bg-teal-3
  background $teal-3 !important
.bg-teal-4
  background $teal-4 !important
.bg-teal-5
  background $teal-5 !important
.bg-teal-6
  background $teal-6 !important
.bg-teal-7
  background $teal-7 !important
.bg-teal-8
  background $teal-8 !important
.bg-teal-9
  background $teal-9 !important
.bg-teal-10
  background $teal-10 !important
.bg-teal-11
  background $teal-11 !important
.bg-teal-12
  background $teal-12 !important
.bg-teal-13
  background $teal-13 !important
.bg-teal-14
  background $teal-14 !important
.bg-green
  background $green !important
.bg-green-1
  background $green-1 !important
.bg-green-2
  background $green-2 !important
.bg-green-3
  background $green-3 !important
.bg-green-4
  background $green-4 !important
.bg-green-5
  background $green-5 !important
.bg-green-6
  background $green-6 !important
.bg-green-7
  background $green-7 !important
.bg-green-8
  background $green-8 !important
.bg-green-9
  background $green-9 !important
.bg-green-10
  background $green-10 !important
.bg-green-11
  background $green-11 !important
.bg-green-12
  background $green-12 !important
.bg-green-13
  background $green-13 !important
.bg-green-14
  background $green-14 !important
.bg-light-green
  background $light-green !important
.bg-light-green-1
  background $light-green-1 !important
.bg-light-green-2
  background $light-green-2 !important
.bg-light-green-3
  background $light-green-3 !important
.bg-light-green-4
  background $light-green-4 !important
.bg-light-green-5
  background $light-green-5 !important
.bg-light-green-6
  background $light-green-6 !important
.bg-light-green-7
  background $light-green-7 !important
.bg-light-green-8
  background $light-green-8 !important
.bg-light-green-9
  background $light-green-9 !important
.bg-light-green-10
  background $light-green-10 !important
.bg-light-green-11
  background $light-green-11 !important
.bg-light-green-12
  background $light-green-12 !important
.bg-light-green-13
  background $light-green-13 !important
.bg-light-green-14
  background $light-green-14 !important
.bg-lime
  background $lime !important
.bg-lime-1
  background $lime-1 !important
.bg-lime-2
  background $lime-2 !important
.bg-lime-3
  background $lime-3 !important
.bg-lime-4
  background $lime-4 !important
.bg-lime-5
  background $lime-5 !important
.bg-lime-6
  background $lime-6 !important
.bg-lime-7
  background $lime-7 !important
.bg-lime-8
  background $lime-8 !important
.bg-lime-9
  background $lime-9 !important
.bg-lime-10
  background $lime-10 !important
.bg-lime-11
  background $lime-11 !important
.bg-lime-12
  background $lime-12 !important
.bg-lime-13
  background $lime-13 !important
.bg-lime-14
  background $lime-14 !important
.bg-yellow
  background $yellow !important
.bg-yellow-1
  background $yellow-1 !important
.bg-yellow-2
  background $yellow-2 !important
.bg-yellow-3
  background $yellow-3 !important
.bg-yellow-4
  background $yellow-4 !important
.bg-yellow-5
  background $yellow-5 !important
.bg-yellow-6
  background $yellow-6 !important
.bg-yellow-7
  background $yellow-7 !important
.bg-yellow-8
  background $yellow-8 !important
.bg-yellow-9
  background $yellow-9 !important
.bg-yellow-10
  background $yellow-10 !important
.bg-yellow-11
  background $yellow-11 !important
.bg-yellow-12
  background $yellow-12 !important
.bg-yellow-13
  background $yellow-13 !important
.bg-yellow-14
  background $yellow-14 !important
.bg-amber
  background $amber !important
.bg-amber-1
  background $amber-1 !important
.bg-amber-2
  background $amber-2 !important
.bg-amber-3
  background $amber-3 !important
.bg-amber-4
  background $amber-4 !important
.bg-amber-5
  background $amber-5 !important
.bg-amber-6
  background $amber-6 !important
.bg-amber-7
  background $amber-7 !important
.bg-amber-8
  background $amber-8 !important
.bg-amber-9
  background $amber-9 !important
.bg-amber-10
  background $amber-10 !important
.bg-amber-11
  background $amber-11 !important
.bg-amber-12
  background $amber-12 !important
.bg-amber-13
  background $amber-13 !important
.bg-amber-14
  background $amber-14 !important
.bg-orange
  background $orange !important
.bg-orange-1
  background $orange-1 !important
.bg-orange-2
  background $orange-2 !important
.bg-orange-3
  background $orange-3 !important
.bg-orange-4
  background $orange-4 !important
.bg-orange-5
  background $orange-5 !important
.bg-orange-6
  background $orange-6 !important
.bg-orange-7
  background $orange-7 !important
.bg-orange-8
  background $orange-8 !important
.bg-orange-9
  background $orange-9 !important
.bg-orange-10
  background $orange-10 !important
.bg-orange-11
  background $orange-11 !important
.bg-orange-12
  background $orange-12 !important
.bg-orange-13
  background $orange-13 !important
.bg-orange-14
  background $orange-14 !important
.bg-deep-orange
  background $deep-orange !important
.bg-deep-orange-1
  background $deep-orange-1 !important
.bg-deep-orange-2
  background $deep-orange-2 !important
.bg-deep-orange-3
  background $deep-orange-3 !important
.bg-deep-orange-4
  background $deep-orange-4 !important
.bg-deep-orange-5
  background $deep-orange-5 !important
.bg-deep-orange-6
  background $deep-orange-6 !important
.bg-deep-orange-7
  background $deep-orange-7 !important
.bg-deep-orange-8
  background $deep-orange-8 !important
.bg-deep-orange-9
  background $deep-orange-9 !important
.bg-deep-orange-10
  background $deep-orange-10 !important
.bg-deep-orange-11
  background $deep-orange-11 !important
.bg-deep-orange-12
  background $deep-orange-12 !important
.bg-deep-orange-13
  background $deep-orange-13 !important
.bg-deep-orange-14
  background $deep-orange-14 !important
.bg-brown
  background $brown !important
.bg-brown-1
  background $brown-1 !important
.bg-brown-2
  background $brown-2 !important
.bg-brown-3
  background $brown-3 !important
.bg-brown-4
  background $brown-4 !important
.bg-brown-5
  background $brown-5 !important
.bg-brown-6
  background $brown-6 !important
.bg-brown-7
  background $brown-7 !important
.bg-brown-8
  background $brown-8 !important
.bg-brown-9
  background $brown-9 !important
.bg-brown-10
  background $brown-10 !important
.bg-brown-11
  background $brown-11 !important
.bg-brown-12
  background $brown-12 !important
.bg-brown-13
  background $brown-13 !important
.bg-brown-14
  background $brown-14 !important
.bg-grey
  background $grey !important
.bg-grey-1
  background $grey-1 !important
.bg-grey-2
  background $grey-2 !important
.bg-grey-3
  background $grey-3 !important
.bg-grey-4
  background $grey-4 !important
.bg-grey-5
  background $grey-5 !important
.bg-grey-6
  background $grey-6 !important
.bg-grey-7
  background $grey-7 !important
.bg-grey-8
  background $grey-8 !important
.bg-grey-9
  background $grey-9 !important
.bg-grey-10
  background $grey-10 !important
.bg-grey-11
  background $grey-11 !important
.bg-grey-12
  background $grey-12 !important
.bg-grey-13
  background $grey-13 !important
.bg-grey-14
  background $grey-14 !important
.bg-blue-grey
  background $blue-grey !important
.bg-blue-grey-1
  background $blue-grey-1 !important
.bg-blue-grey-2
  background $blue-grey-2 !important
.bg-blue-grey-3
  background $blue-grey-3 !important
.bg-blue-grey-4
  background $blue-grey-4 !important
.bg-blue-grey-5
  background $blue-grey-5 !important
.bg-blue-grey-6
  background $blue-grey-6 !important
.bg-blue-grey-7
  background $blue-grey-7 !important
.bg-blue-grey-8
  background $blue-grey-8 !important
.bg-blue-grey-9
  background $blue-grey-9 !important
.bg-blue-grey-10
  background $blue-grey-10 !important
.bg-blue-grey-11
  background $blue-grey-11 !important
.bg-blue-grey-12
  background $blue-grey-12 !important
.bg-blue-grey-13
  background $blue-grey-13 !important
.bg-blue-grey-14
  background $blue-grey-14 !important
.shadow-transition
  transition $shadow-transition !important
for $z in 1..24
  .shadow-{$z}
    box-shadow $shadow-+$z
  .shadow-up-{$z}
    box-shadow $shadow-up-+$z
.no-shadow, .shadow-0
  box-shadow none !important
.inset-shadow
  box-shadow $inset-shadow !important
.z-marginals
  z-index $z-marginals
.z-notify
  z-index $z-notify
.z-fullscreen
  z-index $z-fullscreen
.z-inherit
  z-index inherit !important
fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))
fe(selector, name, noProc, i = '')
  if noProc
    return fr(selector, name, i)
  return unquote(join(',', fr(selector, '', i) fr(selector, name, i)))
fg($name, $size)
  $noProcNotZero = $size > 0
  @media (min-width $size)
    {fe('.col<name>', $name, $noProcNotZero)}
      &, &-auto, &-grow
        .row > &, .flex > &
          width auto
          min-width 0
          max-width 100%
        .column > &, .flex > &
          height auto
          min-height 0
          max-height 100%
      &
        flex 10**4 1 0%
      &-auto
        flex 0 0 auto
      &-grow
        flex 1 0 auto
    for $i in (0..$flex-cols)
      $ic = s('%s', $i)
      {fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
        @extend .col{$name}-auto
      .row
        {fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height auto
          width (round($i / $flex-cols * 100, 4))%
        if $i != 0 || $name != ''
          {fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
            margin-left (round($i / $flex-cols * 100, 4))%
      .column
        {fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height (round($i / $flex-cols * 100, 4))%
          width auto
.row, .column, .flex
  display flex
  flex-wrap wrap
  &.inline
    display inline-flex
.row.reverse
  flex-direction row-reverse
.column
  flex-direction column
  &.reverse
    flex-direction column-reverse
.wrap
  flex-wrap wrap
.no-wrap
  flex-wrap nowrap
.reverse-wrap
  flex-wrap wrap-reverse
.order-
  &first
    order -10000
  &last
    order 10000
  &none
    order 0
.justify-
  &start
    justify-content flex-start
  &end
    justify-content flex-end
  &center
    justify-content center
  &between
    justify-content space-between
  &around
    justify-content space-around
.items-
  &start
    align-items flex-start
  &end
    align-items flex-end
  &center
    align-items center
  &baseline
    align-items baseline
  &stretch
    align-items stretch
.content-
  &start
    align-content flex-start
  &end
    align-content flex-end
  &center
    align-content center
  &stretch
    align-content stretch
  &between
    align-content space-between
  &around
    align-content space-around
.self-
  &start
    align-self flex-start
  &end
    align-self flex-end
  &center
    align-self center
  &baseline
    align-self baseline
  &stretch
    align-self stretch
.flex-center
  @extend .items-center
  @extend .justify-center
for $name, $size in $flex-gutter
  .gutter-
    &x-{$name}
      margin-left (- $size)
      > div
        padding-left $size
    &y-{$name}
      margin-top (- $size)
      > div
        padding-top $size
    &{$name}
      @extends .gutter-x-{$name}, .gutter-y-{$name}
      > div
        @extends .gutter-x-{$name} > div, .gutter-y-{$name} > div
for $name, $size in $sizes
  fg(s('-%s', unquote($name)), $size)
.backdrop
  display none
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  width 100vw
  height 100vh
  background transparent
  transition background .28s ease-in
  &.active
    display block
    background $backdrop-background
.round-borders
  border-radius $generic-border-radius !important
.generic-margin, .group > * 
  margin 5px
.no-transition
  transition none !important
.transition-0
  transition 0s !important
.glossy
  background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important
.q-placeholder
  &::-webkit-input-placeholder
    color inherit
    opacity .5
  &::-moz-placeholder
    color inherit
    opacity .5
  &:-ms-input-placeholder
    color inherit
    opacity .5
.q-body-fullscreen-mixin, .q-body-prevent-scroll
  overflow hidden !important
.q-no-input-spinner
  -moz-appearance textfield !important
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button
    -webkit-appearance none
    margin 0
a.q-link
  outline 0
  color inherit
  text-decoration none
.q-select-highlight
  background $item-highlight-color !important
@keyframes q-highlight
  0%
    background $lime-6
  100%
    background transparent
.highlight-and-fade
  animation q-highlight 2s /* rtl:ignore */
@keyframes q-rotate
  0%
    transform rotate(0) /* rtl:ignore */
  25%
    transform rotate(90deg) /* rtl:ignore */
  50%
    transform rotate(180deg) /* rtl:ignore */
  75%
    transform rotate(270deg) /* rtl:ignore */
  100%
    transform rotate(360deg) /* rtl:ignore */
.transition-generic
  transition all .3s
.animate-spin, .animate-spin-reverse
  animation q-spin 2s infinite linear /* rtl:ignore */
.animate-spin-reverse
  animation-direction reverse
.animate-blink
  animation q-blink 1s steps(5, start) infinite /* rtl:ignore */
.animate-pop
  animation q-pop .2s /* rtl:ignore */
.animate-scale
  animation q-scale .2s /* rtl:ignore */
.animate-fade
  animation q-fade .2s /* rtl:ignore */
.animate-bounce
  animation q-bounce 2s infinite /* rtl:ignore */
.animate-shake
  animation q-shake .15s
  animation-timing-function cubic-bezier(.25, .8, .25, 1)
@keyframes q-blink
  to
    visibility hidden
@keyframes q-spin
  0%
    transform rotate(0deg) /* rtl:ignore */
  100%
    transform rotate(359deg) /* rtl:ignore */
@keyframes q-pop
  0%
    opacity 0
    transform scale(.7)
  70%
    opacity 1
    transform scale(1.07)
  100%
    transform scale(1)
@keyframes q-fade
  0%
    opacity 0
  100%
    opacity 1
@keyframes q-scale
  0%
    opacity 0
    transform scale(.7)
  100%
    opacity 1
    transform scale(1)
@keyframes q-bounce
  0%, 20%, 50%, 80%, 100%
    transform translateY(0)
  40%
    transform translateY(-30px)
  60%
    transform translateY(-15px)
@keyframes q-shake
  0%
    transform scale(1)
  50%
    transform scale(1.02)
  100%
    transform scale(1)
.animate-popup-up, .animate-popup-down
  animation-timing-function cubic-bezier(0.23, 1, 0.32, 1)
  > *
    animation q-fade .82s cubic-bezier(.785, .135, .15, .86)
.animate-popup-down
  animation q-popup-down .36s /* rtl:ignore */
  transform-origin left top 0px /* rtl:ignore */
.animate-popup-up
  animation q-popup-up .36s /* rtl:ignore */
  transform-origin left bottom 0px /* rtl:ignore */
@keyframes q-popup-down
  0%
    opacity 0
    transform translateY(-10px) scaleY(.3)
    pointer-events none
  30%
    opacity 1
@keyframes q-popup-up
  0%
    opacity 0
    transform translateY(10px) scaleY(.3)
    pointer-events none
  30%
    opacity 1
.animate-fade-left
  animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-left .36s ease
.animate-fade-right
  animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-right .36s ease
@keyframes q-slide-left
  0%
    transform translateX(-70%)
@keyframes q-slide-right
  0%
    transform translateX(70%)
.animated
  animation-duration 1s
  animation-fill-mode both
.animated.infinite
  animation-iteration-count infinite
.animated.hinge
  animation-duration 2s
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut
  animation-duration .75s
.non-selectable
  user-select none !important
.scroll
  overflow auto
.scroll, .scroll-x, .scroll-y
  -webkit-overflow-scrolling touch
  will-change scroll-position
.scroll-x
  overflow-x auto
.scroll-y
  overflow-y auto
.no-scroll
  overflow hidden !important
.no-pointer-events
  pointer-events none !important
.all-pointer-events
  pointer-events all !important
.cursor-pointer
  cursor pointer !important
.cursor-not-allowed
  cursor not-allowed !important
.cursor-inherit
  cursor inherit !important
.rotate-45
  transform rotate(45deg) /* rtl:ignore */
.rotate-90
  transform rotate(90deg) /* rtl:ignore */
.rotate-135
  transform rotate(135deg) /* rtl:ignore */
.rotate-180
  transform rotate(180deg) /* rtl:ignore */
.rotate-205
  transform rotate(205deg) /* rtl:ignore */
.rotate-270
  transform rotate(270deg) /* rtl:ignore */
.rotate-315
  transform rotate(315deg) /* rtl:ignore */
.flip-horizontal
  transform scale(-1, 1)
.flip-vertical
  transform scale(1, -1)
.float-left
  float left
.float-right
  float right
.relative-position
  position relative
.fixed,
.fullscreen,
.fixed-center,
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top,
.fixed-top-left,
.fixed-top-right,
.fixed-bottom-left,
.fixed-bottom-right
  position fixed
.absolute,
.absolute-full,
.absolute-center,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right
  position absolute
.fixed-top, .absolute-top
  top 0
  left 0
  right 0
.fixed-right, .absolute-right
  top 0
  right 0
  bottom 0
.fixed-bottom, .absolute-bottom
  right 0
  bottom 0
  left 0
.fixed-left, .absolute-left
  top 0
  bottom 0
  left 0
.fixed-top-left, .absolute-top-left
  top 0
  left 0
.fixed-top-right, .absolute-top-right
  top 0
  right 0
.fixed-bottom-left, .absolute-bottom-left
  bottom 0
  left 0
.fixed-bottom-right, .absolute-bottom-right
  bottom 0
  right 0
.fullscreen
  z-index $z-fullscreen
  border-radius 0 !important
  max-width 100vw
  max-height 100vh
.absolute-full, .fullscreen
  top 0
  right 0
  bottom 0
  left 0
.fixed-center, .absolute-center
  top 50%
  left 50%
  transform translate(-50%, -50%)
.vertical-
  &top
    vertical-align top !important
  &middle
    vertical-align middle !important
  &bottom
    vertical-align bottom !important
.on-left
  margin-right 12px
.on-right
  margin-left 12px
.q-ripple
  &-container
    top 0
    left 0
    width 100%
    height 100%
    position absolute
    color inherit
    border-radius inherit
    overflow hidden
    z-index 0
    pointer-events none
  &-animation
    top 0
    left 0 /* rtl:ignore */
    opacity 0
    color inherit
    position absolute
    border-radius 50%
    background currentColor
    transition .3s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
    pointer-events none
    overflow hidden
    will-change transform, opacity
    &-enter
      transition none
    &-visible
      opacity .15
.q-radial-ripple
  overflow hidden
  border-radius 50%
  pointer-events none
  position absolute
  top -50%
  left -50%
  width 200%
  height 200%
  &:after
    content ''
    display block
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background-image radial-gradient(circle, currentColor 10%, transparent 10.01%)
    background-repeat no-repeat
    background-position 50%
    transform scale(10, 10)
    opacity 0
    transition transform .5s, opacity 1s
  &.active:after
    transform scale(0, 0)
    opacity .4
    transition 0s
:root
  for $name, $size in $sizes
    --q-size-{$name} $size
.fit
  width 100% !important
  height 100% !important
.full-height
  height 100% !important
.full-width
  width 100% !important
  margin-left 0 !important
  margin-right 0 !important
.window-height
  margin-top 0 !important
  margin-bottom 0 !important
  height 100vh !important
.window-width
  margin-left 0 !important
  margin-right 0 !important
  width 100vw !important
.block
  display block !important
.inline-block
  display inline-block !important
for $space, $value in $spaces
  .q-pa-{$space}
    padding: $value.y $value.x
  .q-pl-{$space}
    padding-left: $value.x
  .q-pr-{$space}
    padding-right: $value.x
  .q-pt-{$space}
    padding-top: $value.y
  .q-pb-{$space}
    padding-bottom: $value.y
  .q-px-{$space}
    @extends .q-pl-{$space}, .q-pr-{$space}
  .q-py-{$space}
    @extends .q-pt-{$space}, .q-pb-{$space}
  .q-ma-{$space}
    margin: $value.y $value.x
  .q-ml-{$space}
    margin-left: $value.x
  .q-mr-{$space}
    margin-right: $value.x
  .q-mt-{$space}
    margin-top: $value.y
  .q-mb-{$space}
    margin-bottom: $value.y
  .q-mx-{$space}
    @extends .q-ml-{$space}, .q-mr-{$space}
  .q-my-{$space}
    @extends .q-mt-{$space}, .q-mb-{$space}
.q-ml-auto
  margin-left auto
.q-mr-auto
  margin-right auto
.q-mx-auto
  @extends .q-ml-auto, .q-mr-auto
.q-my-form
  margin-top $input-margin-top
  margin-bottom $input-margin-bottom
.q-touch
  user-select none
  user-drag none
  -khtml-user-drag none
  -webkit-user-drag none
.q-touch-x
  touch-action pan-x
.q-touch-y
  touch-action pan-y
body
  min-width 100px
  font-family $typography-font-family
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-smoothing antialiased
  background $body-background
  color $body-color
  min-height 100vh
for $heading, $value in $h-tags
  {$heading}
    font-size: $value.size
    font-weight: $value.weight
    if $value.line-height
      line-height: $value.line-height
    if $value.letter-spacing
      letter-spacing: $value.letter-spacing
    @media screen and (max-width $breakpoint-sm)
      font-size: ($value.size * .6)
for $heading, $value in $headings
  .q-{$heading}-opacity
    opacity: $value.opacity
  .q-{$heading}
    font-size: $value.size
    font-weight: $value.weight
    if $value.line-height
      line-height: $value.line-height
    if $value.letter-spacing
      letter-spacing: $value.letter-spacing
p
  margin: 0 0 $spaces.md.y
.caption
  color $grey-9
  letter-spacing 0
  line-height 24px
  padding 0
  font-weight 300
.uppercase
  text-transform uppercase
.lowercase
  text-transform lowercase
.capitalize
  text-transform capitalize
.text-
  &center
    text-align center
  &left
    text-align left
  &right
    text-align right
  &justify
    text-align justify
    hyphens auto
  &italic
    font-style italic
  &bold
    font-weight bold
  &no-wrap
    white-space nowrap
  for $weight, $value in $text-weights
    &weight-{$weight}
      font-weight $value
small
  font-size 80%
big
  font-size 170%
sub
  bottom -.25em
sup
  top -.5em
blockquote
  padding: $spaces.sm.y $spaces.md.x
  margin 0
  font-size 16px
  border-left: $spaces.xs.x solid $primary
  border-left: $spaces.xs.x solid var(--q-color-primary)
  &.text-right
    padding-right: $spaces.md.x
    padding-left 0
    border-right: $spaces.xs.x solid $primary
    border-right: $spaces.xs.x solid var(--q-color-primary)
    border-left 0
    text-align right
  small
    display block
    line-height 1.4
    color $faded
    color var(--q-color-faded)
    &:before
      content '\2014 \00A0'
.quote
  padding 10px 20px
  margin 0 0 20px
  border-left 5px solid $primary
  border-left 5px solid var(--q-color-primary)
  &.text-right
    padding-right 15px
    padding-left 0
    border-right 5px solid $primary
    border-right 5px solid var(--q-color-primary)
    border-left 0
    text-align right
dt
  font-weight bold
dd
  margin-left 0
dt, dd
  line-height 1.4
dl
  margin-top 0
  margin-bottom 20px
  &.horizontal
    dt
      float left
      width 25%
      clear left
      text-align right
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    dd
      margin-left 30%
hr
  &.q-hr, &.q-hr-dark
    height 1px
    min-height 1px
    display block
    border none
    width 100%
    background rgba(0, 0, 0, .12)
  &.q-hr-dark
    background rgba(255, 255, 255, .36)
.no-margin
  margin 0 !important
.no-padding
  padding 0 !important
.no-border
  border 0 !important
.no-border-radius
  border-radius 0 !important
.no-box-shadow
  box-shadow none !important
.no-outline
  outline 0 !important
.ellipsis
  text-overflow ellipsis
  white-space nowrap
  overflow hidden
  &-2-lines, &-3-lines
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
  &-2-lines
    -webkit-line-clamp 2
  &-3-lines
    -webkit-line-clamp 3
.readonly
  cursor default !important
.disabled, [disabled]
  &, * 
    cursor not-allowed !important
.disabled, [disabled]
  opacity .6 !important
.hidden
  display none !important
.invisible
  visibility hidden !important
.transparent
  background transparent !important
.overflow-auto
  overflow auto !important
.overflow-hidden
  overflow hidden !important
.overflow-hidden-y
  overflow-y hidden !important
.dimmed, .light-dimmed
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
.dimmed:after
  background $dimmed-background !important
.light-dimmed:after
  background $light-dimmed-background !important
.z-top
  z-index $z-top !important
.z-max
  z-index $z-max !important
for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
  body:not(.{type}) .{type}-only,
  body.{type} .{type}-hide
    display none !important
@media all and (orientation portrait)
  .orientation-landscape
    display none !important
@media all and (orientation landscape)
  .orientation-portrait
    display none !important
@media screen
  .print-only
    display none !important
@media print
  .print-hide
    display none !important
@media (max-width $breakpoint-xs-max)
  .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-sm-min) and (max-width $breakpoint-sm-max)
  .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
  .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-xl-min)
  .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
    display none !important
.q-focus-helper
  position absolute
  top 0
  left 0 /* rtl:ignore */
  width 100%
  height 100%
  pointer-events none
  border-radius inherit
  opacity .15
  transition background-color .3s cubic-bezier(.25, .8, .5, 1)
.q-focus-helper-rounded
  border-radius $generic-border-radius
.q-focus-helper-round
  border-radius 50%
body
  &.desktop
    .q-focusable:focus, .q-hoverable:hover
      .q-focus-helper
        background currentColor
  &.ios .q-hoverable:active .q-focus-helper
    background currentColor
    opacity .3
ie_style = @block
  
  .q-if > .q-if-inner
    flex-basis auto
    display inline-flex
    > div
      > .q-input-target
        flex-basis auto
      > input.q-input-target
        min-width 3rem
        flex-basis 0% !important
  .q-input-target:before
    display block
  .q-if-label-spacer
    width 0
  
  .q-editor-toolbar
    .q-btn-group.row.inline
      display block
      white-space nowrap
  
  .q-toolbar
  .q-actionsheet-title
  .q-field-label-inner
    height 0px
  
  .q-carousel-slide
    max-width 100%
  
  .row > .col
    &.q-alert-content
      flex-basis auto
  
  .q-slider-handle
    > .q-chip.inline.row
      display table
  
  a.q-btn:not(.q-btn-round)
    height 0px
  .q-btn
    .q-btn-inner
      flex-basis auto
    &:active
    &.active
      .q-btn-inner
        margin -1px 1px 1px -1px
      &.q-btn-push
        .q-btn-inner
          margin 1px 1px -1px -1px
        &.disabled
          .q-btn-inner
            margin -1px 1px 1px -1px
  .q-btn-group > .q-btn.q-btn-push:not(.disabled)
    &:active .q-btn-inner
    &.active .q-btn-inner
      margin 0
  
  .q-chip:not(.q-chip-small):not(.q-chip-dense) .q-chip-main
    line-height $chip-height
  .q-btn .q-chip
    display inline-block
  .q-tab .q-chip .q-chip-main
    line-height normal
  
  .q-fab-actions
    &.q-fab-left
    &.q-fab-right
      display block
      white-space nowrap
  
  .q-item-main
    min-width 1px
  
  .q-layout-drawer-mini .q-item
    padding-left 0
    padding-right 0
  
  .q-modal-layout
    min-height 80vh !important
    overflow hidden
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  {ie_style}
@supports (-ms-ime-align:auto)
  {ie_style}