/*!
 * FLo Component Library v0.0.15
 * (c) 2018-present Mobility COE
 * 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(black, .2)
$elevation-penumbra = rgba(black, .14)
$elevation-ambient = rgba(black, .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
$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         ?= 4px
$button-transition            ?= .3s cubic-bezier(.25, .8, .5, 1)
$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
$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      ?= 10px
$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               ?= .3s cubic-bezier(.25, .8, .5, 1)
$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-frame-transition ?= all .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-aside-left-width   ?= 280px
$layout-aside-right-width  ?= 280px
$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-24
$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
$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
$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
: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
.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
.col
  flex-basis 0
  flex-grow 1
  min-height 1px
  min-width 0
.row
  > .col
    max-width 100%
    width 100%
for $name, $size in $sizes
  .row > .col-{$name}
    width 100%
  .col-{$name}
    min-height 1px
  for $i in (1..$flex-cols)
    .row > .col-{$name}-{$i}
      width 100%
    .col-{$name}-{$i}
      min-height 1px
.row > .col-auto
  width auto
.col-auto
  flex 0 0 auto
  min-width 0
.col-grow
  flex 1 1 auto
.order-first
  order -10000
.order-last
  order 10000
.order-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 $i in (1..$flex-cols)
  .col-{$i}
    flex 0 0 (round($i / $flex-cols * 100, 4))%
  .row > .col-{$i}
    max-width (round($i / $flex-cols * 100, 4))%
  .offset-{$i}
    margin-left (round($i / $flex-cols * 100, 4))%
for $name, $size in $flex-gutter
  .gutter-{$name}
    margin (- $size) 0 0 (- $size)
    > div
      padding $size 0 0 $size
  .gutter-x-{$name}
    margin-left (- $size)
    > div
      padding-left $size
  .gutter-y-{$name}
    margin-top (- $size)
    > div
      padding-top $size
for $name, $size in $sizes
  @media (min-width $size)
    .col-{$name}
      max-width 100%
      flex-basis 0
      flex-grow 1
    .col-{$name}-auto
      flex 0 0 auto
      .row > &
        width auto
    for $i in (1..$flex-cols)
      .col-{$name}-{$i}
        flex 0 0 (round($i / $flex-cols * 100, 4))%
      .row > .col-{$name}-{$i}
        max-width (round($i / $flex-cols * 100, 4))%
      .offset-{$name}-{$i}
        margin-left (round($i / $flex-cols * 100, 4))%
.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
body.with-mixin-fullscreen
  overflow hidden !important
.q-no-input-spinner
  -moz-appearance textfield
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button
    -webkit-appearance none
    margin 0
@keyframes q-highlight
  0%
    background $lime-6
  100%
    background transparent
.highlight-and-fade
  animation q-highlight 2s
@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
.animate-spin-reverse
  animation-direction reverse
.animate-blink
  animation q-blink 1s steps(5, start) infinite
.animate-pop
  animation q-pop .2s
.animate-scale
  animation q-scale .2s
.animate-fade
  animation q-fade .2s
.animate-bounce
  animation q-bounce 2s infinite
@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)
.animate-popup-up, .animate-popup-down
  animation-timing-function cubic-bezier(0.23, 1, 0.32, 1)
.animate-popup-down
  animation q-popup-down .42s
  transform-origin left top 0px
.animate-popup-up
  animation q-popup-up .42s
  transform-origin left bottom 0px
@keyframes q-popup-down
  0%
    opacity 0
    transform translateY(-20px) scaleY(.3)
    pointer-events none
  100%
    opacity 1
@keyframes q-popup-up
  0%
    opacity 0
    transform translateY(20px) scaleY(.3)
    pointer-events none
  100%
    opacity 1
.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
  -webkit-overflow-scrolling touch
  will-change scroll-position
.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
    color inherit
    border-radius inherit
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    overflow hidden
    z-index 0
    pointer-events none
  &-animation
    color inherit
    position absolute
    top 0
    left 0 /* rtl:ignore */
    border-radius 50%
    background currentColor
    opacity 0
    transition .5s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
    pointer-events none
    overflow hidden
    will-change opacity
    &-enter
      transition none
    &-visible
      opacity .3
.q-radial-ripple
  overflow hidden
  transform translate3d(-25%, -25%, 0)
  width 200%
  height 200%
  border-radius 50%
  pointer-events none
  &, &:after
    position absolute
    top 0
    right 0
    bottom 0
    left 0
  &:after
    content ''
    display block
    width 100%
    height 100%
    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
.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}, .q-px-{$space}
    padding-left: $value.x
  .q-pr-{$space}, .q-px-{$space}
    padding-right: $value.x
  .q-pt-{$space}, .q-py-{$space}
    padding-top: $value.y
  .q-pb-{$space}, .q-py-{$space}
    padding-bottom: $value.y
  .q-ma-{$space}
    margin: $value.y $value.x
  .q-ml-{$space}, .q-mx-{$space}
    margin-left: $value.x
  .q-mr-{$space}, .q-mx-{$space}
    margin-right: $value.x
  .q-mt-{$space}, .q-my-{$space}
    margin-top: $value.y
  .q-mb-{$space}, .q-my-{$space}
    margin-bottom: $value.y
.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%
.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
.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)
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
  
  .absolute, .fixed
    .q-if-inner, .q-input-target
      min-width auto
      flex-basis auto
  .q-if-inner
    height 0
  
  .row > .col
    &.q-alert-content
      flex-basis auto
  
  .q-slider-handle
    > .q-chip.inline.row
      display -ms-inline-grid
  
  .q-btn
    &:active
      .q-btn-inner
        margin -1px 1px 1px -1px
      &.q-btn-push
        .q-btn-inner
          margin 0 1px 0 -1px
        &.disabled
          .q-btn-inner
            margin -1px 1px 1px -1px
  .q-btn-group > .q-btn.q-btn-push:not(.disabled):active .q-btn-inner
    margin 0
  
  .q-chip
    .q-chip-main
      line-height $chip-height
    &.q-chip-small .q-chip-main
      line-height normal
  .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
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  {ie_style}
@supports (-ms-ime-align:auto)
  {ie_style}