/*!
 * Quasar Framework v1.2.5
 * (c) 2015-present Razvan Stoenescu
 * Released under the MIT License.
 */
$space-base   ?= 16px
$space-x-base ?= $space-base
$space-y-base ?= $space-base
$space-none ?= { x: 0, y: 0 }
$space-xs   ?= { x: ($space-x-base * .25), y: ($space-y-base * .25) }
$space-sm   ?= { x: ($space-x-base * .5),  y: ($space-y-base * .5)  }
$space-md   ?= { x: $space-x-base,         y: $space-y-base         }
$space-lg   ?= { x: ($space-x-base * 1.5), y: ($space-y-base * 1.5) }
$space-xl   ?= { x: ($space-x-base * 3),   y: ($space-y-base * 3)   }
$spaces ?= {
  none: $space-none,
  xs: $space-xs,
  sm: $space-sm,
  md: $space-md,
  lg: $space-lg,
  xl: $space-xl
}
$breakpoint-xs ?= 599px
$breakpoint-sm ?= 1023px
$breakpoint-md ?= 1439px
$breakpoint-lg ?= 1919px
$flex-cols      ?= 12
$flex-gutter-xs ?= ($space-base * .25)
$flex-gutter-sm ?= ($space-base * .5)
$flex-gutter-md ?= $space-base
$flex-gutter-lg ?= ($space-base * 1.5)
$flex-gutter-xl ?= ($space-base * 3)
$body-font-size   ?= 14px
$body-line-height ?= 1.5
$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
$headings ?= {
  h1: {
    size: 6rem,
    line-height: 6rem,
    weight: 300,
    letter-spacing: -.01562em
  },
  h2: {
    size: 3.75rem,
    line-height: 3.75rem,
    letter-spacing: -.00833em,
    weight: 300
  },
  h3: {
    size: 3rem,
    line-height: 3.125rem,
    letter-spacing: normal,
    weight: 400
  },
  h4: {
    size: 2.125rem,
    line-height: 2.5rem,
    letter-spacing: .00735em,
    weight: 400
  },
  h5: {
    size: 1.5rem,
    line-height: 2rem,
    letter-spacing: normal,
    weight: 400
  },
  h6: {
    size: 1.25rem,
    line-height: 2rem,
    letter-spacing: .0125em,
    weight: 500
  },
  subtitle1: {
    size: 1rem,
    line-height: 1.75rem,
    letter-spacing: .00937em,
    weight: 400
  },
  subtitle2: {
    size: .875rem,
    line-height: 1.375rem,
    letter-spacing: .00714em,
    weight: 500
  },
  body1: {
    size: 1rem,
    line-height: 1.5rem,
    letter-spacing: .03125em,
    weight: 400
  },
  body2: {
    size: .875rem,
    line-height: 1.25rem,
    letter-spacing: .01786em,
    weight: 400
  },
  overline: {
    size: .75rem,
    line-height: 2rem,
    letter-spacing: .16667em,
    weight: 500
  },
  caption: {
    size: .75rem,
    line-height: 1.25rem,
    letter-spacing: .03333em,
    weight: 400
  }
}
$h-tags ?= {
  h1: $headings.h1,
  h2: $headings.h2,
  h3: $headings.h3,
  h4: $headings.h4,
  h5: $headings.h5,
  h6: $headings.h6
}
$text-weights ?= {
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  bolder: 900
}
$primary   ?= #027BE3
$secondary ?= #26A69A
$accent    ?= #9C27B0
$positive  ?= #21BA45
$negative  ?= #C10015
$info      ?= #31CCEC
$warning   ?= #F2C037
$light     ?= #bdbdbd
$dark      ?= #424242
$faded     ?= #777
$dimmed-background       ?= rgba(0, 0, 0, .4)
$light-dimmed-background ?= rgba(255, 255, 255, .6)
$separator-color         ?= rgba(0, 0, 0, .12)
$separator-dark-color    ?= rgba(255, 255, 255, .48)
$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
$ios-statusbar-height ?= 20px
$z-fab                ?= 990
$z-side               ?= 1000
$z-marginals          ?= 2000
$z-fixed-drawer       ?= 3000
$z-fullscreen         ?= 6000
$z-menu               ?= 6000
$z-top                ?= 7000
$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 rgba($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         ?= 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$min-line-height                ?= 1.12
$button-border-radius           ?= 3px
$button-padding                 ?= 4px 16px
$button-dense-padding           ?= .285em
$button-transition              ?= $generic-hover-transition
$button-font-size               ?= 14px
$button-line-height             ?= 1.718em
$button-font-weight             ?= 500
$button-shadow                  ?= $shadow-2
$button-shadow-active           ?= $shadow-5
$button-rounded-border-radius   ?= 28px
$button-push-border-radius      ?= 7px
$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     ?= $generic-border-radius
$chat-message-distance          ?= 8px
$chat-message-text-padding      ?= 8px
$item-base-color                ?= $grey-5
$editor-border-color            ?= $separator-color
$editor-content-padding         ?= 10px
$editor-content-min-height      ?= 10em
$editor-toolbar-padding         ?= 4px
$editor-hr-color                ?= $editor-border-color
$editor-button-gutter           ?= 4px
$fab-margin                     ?= 5px
$table-transition               ?= $generic-hover-transition
$table-border-radius            ?= $generic-border-radius
$table-box-shadow               ?= $shadow-2
$table-border-color             ?= $separator-color
$table-hover-background         ?= rgba(0, 0, 0, .03)
$table-selected-background      ?= rgba(0, 0, 0, .06)
$table-dark-border-color        ?= $separator-dark-color
$table-dark-hover-background    ?= rgba(255, 255, 255, .07)
$table-dark-selected-background ?= rgba(255, 255, 255, .1)
$toolbar-min-height             ?= 50px
$toolbar-padding                ?= 0 12px
$toolbar-inset-size             ?= 58px
$toolbar-title-font-size        ?= 21px
$toolbar-title-font-weight      ?= normal
$toolbar-title-letter-spacing   ?= .01em
$toolbar-title-padding          ?= 0 12px
$layout-border                  ?= 1px solid $separator-color
$layout-shadow                  ?= 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24)
$menu-background                ?= white
$menu-box-shadow                ?= $shadow-2
$menu-max-width                 ?= 95vw
$rating-grade-color             ?= $yellow
$rating-shadow                  ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
$tooltip-color                  ?= #fafafa
$tooltip-background             ?= $grey-7
$tooltip-padding                ?= 6px 10px
$tooltip-border-radius          ?= $generic-border-radius
$tooltip-fontsize               ?= 10px
$tooltip-mobile-padding         ?= 8px 16px
$tooltip-mobile-fontsize        ?= 14px
$option-focus-transition        ?= .22s cubic-bezier(0,0,.2,1)
$input-font-size                ?= 14px
$input-text-color               ?= rgba(0,0,0,.87)
$input-label-color              ?= rgba(0,0,0,.6)
$input-autofill-color           ?= inherit
$img-width                      ?= 100%
$img-background-repeat          ?= no-repeat
$img-loading-font-size          ?= 50px
$img-content-position           ?= absolute
$img-content-padding            ?= 16px
$img-content-color              ?= white
$img-content-background         ?= rgba(0, 0, 0, .47)
*, *:before, *:after 
  box-sizing inherit
  -webkit-tap-highlight-color transparent
  -moz-tap-highlight-color transparent
html, body, #q-app
  width 100%
  direction ltr
body.platform-ios.within-iframe, body.platform-ios.within-iframe #q-app
  width 100px
  min-width 100%
html, body
  margin 0
  box-sizing border-box
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
  width 1em
  height 1em
  letter-spacing normal
  text-transform none
  white-space nowrap
  word-wrap normal
  direction ltr
  text-align center
  position relative
  font-display block 
                     
  &:before
    width 100%
    height 100%
    display flex !important
    align-items center
    justify-content center
.q-icon,
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp
  user-select none
  cursor inherit
  font-size inherit
  display inline-flex
  align-items center
  justify-content center
  vertical-align middle
.q-panel
  height 100%
  width 100%
  > div
    height 100%
    width 100%
.q-panel-parent
  overflow hidden
  position relative
.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-avatar
  position relative
  vertical-align middle
  display inline-block
  border-radius 50%
  font-size 48px
  height 1em
  width 1em
  &__content
    font-size .5em
    line-height .5em
  &__content, img:not(.q-icon)
    border-radius inherit
    height inherit
    width inherit
.q-avatar__content--square
  border-radius 0
.q-badge
  background-color $primary
  background-color var(--q-color-primary)
  color white
  padding 2px 6px
  border-radius $generic-border-radius
  font-size 12px
  line-height 12px
  font-weight normal
  vertical-align baseline
  &--single-line
    white-space nowrap
  &--multi-line
    word-break break-all
    word-wrap break-word
  &--floating
    position absolute
    top -4px
    right -3px
    cursor inherit
  &--transparent
    opacity 0.8
.q-banner
  min-height 54px
  padding 8px 16px
  background white
  &--top-padding
    padding-top 14px
  &__avatar
    min-width 1px !important
    > .q-avatar
      font-size 46px
    > .q-icon
      font-size 40px
  &__avatar:not(:empty) + &__content
    padding-left 16px
  &__actions
    &.col-auto
      padding-left 16px
    &.col-all
      .q-btn-item
        margin 4px 0 0 4px
  &--dense
    min-height 32px
    padding 8px
    &.q-banner--top-padding
      padding-top 12px
    .q-banner__avatar
      > .q-avatar, > .q-icon
        font-size 28px
    .q-banner__avatar:not(:empty) + .q-banner__content
      padding-left 8px
    .q-banner__actions
      &.col-auto
        padding-left 8px
.q-bar
  background rgba(0, 0, 0, .2)
  > .q-icon
    margin-left 2px
  > div, > div + .q-icon
    margin-left 8px
  > .q-btn
    margin-left 2px
  > .q-icon:first-child, > .q-btn:first-child, > div:first-child
    margin-left 0
  &--standard
    padding 0 12px
    height 32px
    font-size 18px
    > div
      font-size 16px
    .q-btn
      font-size 11px
  &--dense
    padding 0 8px
    height 24px
    font-size 14px
    .q-btn
      font-size 8px
  &--dark
    background rgba(255, 255, 255, .15)
.q-breadcrumbs
  &__el
    color inherit
  &__el-icon
    font-size 125%
    &--with-label
      margin-right 8px
  &--last a
    pointer-events none
[dir=rtl] .q-breadcrumbs__separator .q-icon
  transform scaleX(-1) /* rtl:ignore */
.q-btn
  position relative
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  padding $button-padding
  font-size $button-font-size
  line-height $button-line-height
  text-decoration none
  color inherit
  background transparent
  transition $button-transition
  min-height 2.572em
  box-shadow $button-shadow
  font-weight $button-font-weight
  text-transform uppercase
  button&
    -webkit-appearance button
  a&
    display inline-flex
  .q-icon, .q-spinner
    font-size $button-line-height
  &.disabled
    opacity .7 !important
  &--standard:not(.disabled)
    &:before
      
      
      
      
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius inherit
      transition $button-transition
    &:active
    &.q-btn--active
      &:before
        box-shadow $button-shadow-active
  &--no-uppercase
    text-transform none
  &--rectangle
    border-radius $button-border-radius
  &--outline
    border 1px solid currentColor
    background transparent !important
  &--push
    border-radius $button-push-border-radius
    border-bottom 3px solid rgba(0, 0, 0, .15)
    &:active,
    &.q-btn--active
      &:not(.disabled)
        transform translateY(3px)
        border-bottom-width 0
    .q-focus-helper, .q-ripple-container
      height auto
      bottom -3px
  &--rounded
    border-radius $button-rounded-border-radius
  &--round
    border-radius 50%
    padding 0
    min-height 0
    height 3em
    width 3em
    min-width 3em
    min-height 3em
  &--flat, &--outline, &--unelevated
    box-shadow none
  &--dense
    padding $button-dense-padding
    min-height 2em
    &.q-btn--round
      padding 0
      height 2.4em
      width 2.4em
      min-height 2.4em
      min-width 2.4em
    .on-left
      margin-right 6px
    .on-right
      margin-left 6px
  &--fab, &--fab-mini
    .q-icon
      font-size 24px
      width 100%
      height 100%
  &--fab
    height 56px
    width 56px
  &--fab-mini
    height 40px
    width 40px
  
  &__content
    transition opacity .3s
    &--hidden
      opacity 0
    &:before
      content ''
  &__progress
    transition transform .3s
    transform-origin top left
    height 100%
    background rgba(255, 255, 255, .25)
    &--dark
      background rgba(0, 0, 0, .2)
.q-btn-dropdown--split .q-btn-dropdown__arrow-container
  padding 0 4px
  border-left 1px solid rgba(255, 255, 255, .3)
.q-btn-dropdown--simple .q-btn-dropdown__arrow
  margin-left 8px
.q-btn-dropdown__arrow
  transition transform .28s
.q-btn-group
  border-radius $button-border-radius
  box-shadow $button-shadow
  vertical-align middle
  > .q-btn-item
    box-shadow none
  > .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:not(:first-child)
    border-top-left-radius 0
    border-bottom-left-radius 0
  &--push
    border-radius $button-push-border-radius
    > .q-btn--push
      .q-btn__content
        transition $button-transition
      &:active,
      &.q-btn--active
        &:not(.disabled)
          border-bottom-width 3px
          transform none
          .q-btn__content
            transform translateY(3px)
  &--rounded
    border-radius $button-rounded-border-radius
  &--flat, &--outline, &--unelevated
    box-shadow none
    > .q-btn-item
      box-shadow none
  &--outline
    > .q-separator
      display none
    > .q-btn-item + .q-btn-item
      border-left 0
    > .q-btn-item:not(:last-child)
      border-right 0
  &--stretch
    align-self stretch
    border-radius 0
  &--glossy
    > .q-btn-item
      background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important
  &--spread
    > .q-btn-group
      display flex !important
    > .q-btn-item, > .q-btn-group > .q-btn-item:not(.q-btn-dropdown__arrow-container)
      width auto
      min-width 0
      max-width 100%
      flex 10000 1 0%
.q-card
  box-shadow $shadow-2
  border-radius $generic-border-radius
  vertical-align top
  background white
  position relative
  > div, > img
    &:first-child
      border-top 0
      border-top-left-radius inherit
      border-top-right-radius inherit
  > div, > img
    &:last-child
      border-bottom 0
      border-bottom-left-radius inherit
      border-bottom-right-radius inherit
  > div, > img
    &:not(:first-child)
      border-top-left-radius 0
      border-top-right-radius 0
  > div, > img
    &:not(:last-child)
      border-bottom-left-radius 0
      border-bottom-right-radius 0
  > div
    border-left 0
    border-right 0
    box-shadow none
  &--bordered
    border 1px solid $separator-color
  &--dark
    color white
    border-color $separator-dark-color
  &__section
    position relative
    padding 16px
  &__actions
    padding 8px
    .q-btn
      padding 0 8px
    &--horiz
      > .q-btn-item + .q-btn-item
      > .q-btn-group + .q-btn-item
      > .q-btn-item + .q-btn-group
        margin-left 8px
    &--vert
      > .q-btn-item + .q-btn-item
      > .q-btn-group + .q-btn-item
      > .q-btn-item + .q-btn-group
        margin-top 4px
      > .q-btn-group > .q-btn-item
        flex-grow 1
  &__section + &__section
    padding-top 0
  > img
    display block
    width 100%
    max-width 100%
    border 0
.q-carousel
  background-color inherit 
  height 400px
  &__slide
    height 100%
    padding 16px
    background-size cover
    background-position 50%
  &__slides-container
    height 100%
  &__control
    color white
  &__prev-arrow,
  &__next-arrow
    top 50%
    transform translateY(-50%)
    .q-icon
      font-size 46px
  &__prev-arrow
    left 4px
  &__next-arrow
    right 4px
  &__navigation
    padding 0 8px 8px
    left 0
    right 0
    bottom 0
    &-inner
      flex 1 1 auto
    .q-btn
      margin 6px 4px
      padding 5px
    .q-btn:not(.q-carousel__navigation-icon--active)
      opacity .5
    img
      margin 2px
      height 50px
      width auto
      display inline-block
      cursor pointer
      border 1px solid transparent
      vertical-align middle
      opacity .8
      transition opacity .3s
      &:hover, &.q-carousel__thumbnail--active
        opacity 1
      &.q-carousel__thumbnail--active
        border-color white
        cursor default
  &.q-carousel--navigation .q-carousel__slide
    padding-bottom 50px
  &.q-carousel--arrows .q-carousel__slide
    padding-left 56px
    padding-right 56px
  &.fullscreen
    height 100%
.q-message-name, .q-message-stamp, .q-message-label
  font-size small
.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
  min-width $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 $chat-message-border-radius $chat-message-border-radius 0
    &:last-child:before
      right 100%
      border-right 0 solid transparent
      border-left 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-received-color
.q-message-sent
  .q-message-name
    text-align right
  .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 $chat-message-border-radius 0 $chat-message-border-radius
    &:last-child:before
      left 100%
      border-left 0 solid transparent
      border-right 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-sent-color
.q-message-text
  background currentColor
  padding $chat-message-text-padding
  line-height max(1.2, $min-line-height)
  word-break break-word
  position relative
  & + &
    margin-top 3px
  &:last-child
    min-height $chat-message-avatar-size
    .q-message-stamp
      display block
    &:before
      content ''
      position absolute
      bottom 0
      width 0
      height 0
$checkbox-transition = .22s cubic-bezier(0,0,.2,1) 0ms
.q-checkbox
  vertical-align middle
  &__bg
    left 11px
    top 11px
    right auto
    bottom 0
    width 45%
    height 45%
    border 2px solid currentColor
    border-radius 2px
    transition background $checkbox-transition
  &__native
    width 1px
    height 1px
  &__label
    padding-left 4px
    font-size 14px
    line-height 20px
  &.reverse &__label
    padding-right 4px
  &__check
    color white
    path
      stroke currentColor
      stroke-width 3.12px
      stroke-dashoffset 29.78334
      stroke-dasharray 29.78334
  &__check-indet
    width 100%
    height 0
    left 0
    top 50%
    border-color white
    border-width 1px
    border-style solid
    transform translate3d(0, -50%, 0) rotate3d(0, 0, 1, -280deg) scale3d(0, 0, 0)
  &__inner
    width 40px
    min-width 40px
    height 40px
    padding 11px
    outline 0
    border-radius 50%
    color rgba(0, 0, 0, .54)
    &--active, &--indeterminate
      color $primary
      color var(--q-color-primary)
      .q-checkbox__bg
        background currentColor
    &--active
      path
        stroke-dashoffset 0
        transition stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms
    &--indeterminate
      .q-checkbox__check-indet
        transform translate3d(0, -50%, 0) rotate3d(0, 0, 1, 0) scale3d(1, 1, 1)
        transition transform $checkbox-transition
  &.disabled
    opacity .75 !important
  &--dark
    .q-checkbox__inner
      color rgba(255, 255, 255, .7)
      &:before
        opacity .32 !important
      &--active, &--indeterminate
        color $primary
        color var(--q-color-primary)
  &--dense
    .q-checkbox__inner
      width 20px
      min-width 20px
      height 20px
      padding 0
    .q-checkbox__bg
      left 1px
      top 1px
      width 18px
      height 18px
body.desktop
  .q-checkbox
    &__inner:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $option-focus-transition
    &:focus:not(.disabled)
      .q-checkbox__inner:before
        transform scale3d(1, 1, 1)
    &--dense:focus:not(.disabled) .q-checkbox__inner:before
      transform scale3d(1.5, 1.5, 1.5)
  .q-table--dense .q-checkbox--dense:focus:not(.disabled) .q-checkbox__inner:before
    transform scale3d(1.4, 1.4, 1.4)
$chip-height = 2em
.q-chip
  vertical-align middle
  border-radius 16px
  outline 0
  position relative
  height $chip-height
  margin 4px
  background #e0e0e0
  color rgba(0,0,0,.87)
  font-size 14px
  padding 0.5em 0.9em
  &--colored
    .q-chip__icon
      color inherit
  &--outline
    background transparent
    border 1px solid currentColor
  .q-avatar
    font-size $chip-height
    margin-left -0.45em
    margin-right 0.2em
    border-radius 16px
  &--selected
    .q-avatar
      display none
  &__icon
    color rgba(0,0,0,.54)
    font-size 1.5em
    margin -0.2em
    &--left
      margin-right 0.2em
    &--right
      margin-left 0.2em
    &--remove
      margin-left 0.1em
      margin-right -0.5em
      opacity .6
      outline none
      &:hover,
      &:focus
        opacity 1
  &__content
    white-space nowrap
  &--dense
    border-radius 12px
    padding 0 0.4em
    height 1.5em
    .q-avatar
      font-size 1.5em
      margin-left -0.27em
      margin-right 0.1em
      border-radius 12px
    .q-chip__icon
      font-size 1.25em
      &--left
        margin-right 0.195em
      &--remove
        margin-right -0.25em
  &--square
    border-radius $generic-border-radius
    .q-avatar
      border-radius ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
body.desktop .q-chip--clickable:focus
  box-shadow $shadow-1
.q-circular-progress
  display inline-block
  position relative
  vertical-align middle
  width 1em
  height 1em
  line-height 1
  &.q-focusable
    border-radius 50%
  &__svg
    width 100%
    height 100%
  &__text
    font-size .25em
  &--indeterminate
    .q-circular-progress__svg
      transform-origin 50% 50%
      animation q-spin 2s linear infinite /* rtl:ignore */
    .q-circular-progress__circle
      stroke-dasharray 1 400
      stroke-dashoffset 0
      animation q-circular-progress-circle 1.5s ease-in-out infinite /* rtl:ignore */
@keyframes q-circular-progress-circle
  0%
    stroke-dasharray 1, 400
    stroke-dashoffset 0
  50%
    stroke-dasharray 400, 400
    stroke-dashoffset -100
  100%
    stroke-dasharray 400, 400
    stroke-dashoffset -300
.q-color-picker
  overflow hidden
  background white
  max-width 350px
  vertical-align top
  min-width 150px
  border-radius $generic-border-radius
  box-shadow $shadow-2
  &__header
    height 88px
    input
      line-height 24px
      border 0
    .q-tab--inactive
      background linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))
  &__error-icon
    bottom 2px
    right 2px
    font-size 24px
    opacity 0
    transition opacity .3s ease-in
  &__header-content
    position relative
    background white
    &--light
      color black
    &--dark
      color white
      .q-tab--inactive
        &:before
          content ''
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          background rgba(255, 255, 255, .2)
  &__header-banner
    height 52px
  &__header-bg
    background white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
  &__footer
    .q-tab--inactive
      background linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))
  
  &__spectrum
    width 100%
    height 100%
  &__spectrum-tab
    padding 10px
  &__spectrum-white
    background linear-gradient(to right, white, rgba(255, 255, 255, 0))
  &__spectrum-black
    background linear-gradient(to top, black, rgba(0, 0, 0, 0))
  &__spectrum-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)
  &__hue .q-slider__track-container
    background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) 
    opacity 1
  &__alpha .q-slider__track-container
    color white
    opacity 1
    height 8px
    background-color white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
    &:after
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background linear-gradient(90deg, rgba(255, 255, 255, 0), $grey-7)
  &__sliders
    padding 4px 0 12px
    .q-slider__track-container
      height 9px
    .q-slider__track
      display none
    .q-slider__thumb-container
      top 4px
    .q-slider__thumb
      stroke-width 13px
    .q-slider
      height 20px
      margin-top 8px
      color $grey-9
  
  &__tune-tab
    .q-slider
      margin-left 18px
      margin-right 18px
    input
      font-size 11px
      border 1px solid $grey-4
      border-radius $generic-border-radius
      width 4em
  
  &__palette-rows
    &--editable .q-color-picker__cube
      cursor pointer
  &__cube
    padding-bottom 10%
    width 10% !important
  
  input
    color inherit
    background transparent
    outline 0
    text-align center
  .q-tabs
    overflow hidden
  .q-tab
    &--active
      box-shadow 0px 0px 14px 3px rgba(0,0,0,0.2)
      .q-focus-helper
        display none
  .q-tab__indicator
    display none
  .q-tab-panels
    background inherit
  &--dark
    background $grey-9
    color white
    .q-color-picker__tune-tab input
      border 1px solid alpha(#fff, .3)
    .q-slider
      color $grey-5
.q-date
  display inline-flex
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  max-width 100%
  .q-btn
    font-weight normal
  &--bordered
    border 1px solid $separator-color
  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
  &__content
    outline none
  &__header-link
    opacity .64
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1
  &__header-subtitle
    height 24px
    font-size 14px
    line-height 1.75
    letter-spacing 0.00938em
  &__header-title-label
    font-size 24px
    line-height 1.2
    letter-spacing 0.00735em
  &__view
    height 100%
    width 100%
    min-width 288px
    padding 16px
  &__navigation
    height 12.5%
    > div:first-child
      width 8%
      min-width 24px
      justify-content flex-end
    > div:last-child
      width 8%
      min-width 24px
      justify-content flex-start
  &__calendar-weekdays
    height 12.5%
    > div
      opacity .38
      font-size 12px
  &__calendar-item
    display inline-flex
    align-items center
    justify-content center
    vertical-align middle
    width 14.285% !important
    height 12.5% !important
    position relative
    > div, button
      width 32px
      height 32px
      border-radius 50%
    > div
      line-height 32px
      text-align center
    &--out
      opacity .18
    &--fill
      visibility hidden
  &__calendar-days-container
    height 75%
  &__calendar-days > div
    height 16.66% !important
  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 8px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)
  &__today
    box-shadow 0 0 1px 0 currentColor
  &__years-content
    padding 0 8px
  &__years-item, &__months-item
    flex 0 0 (round(1 / 3 * 100, 4))%
  &__months-content
    flex 0 0 (round(10 / 12 * 100, 4))%
  &.disabled, &--readonly
    .q-date__header, .q-date__content
      pointer-events none
  &--readonly .q-date__navigation
    display none
  &--portrait
    flex-direction column
  &--portrait-standard
    height 410px
    width 290px
    .q-date__content
      height calc(100% - 86px) 
    .q-date__header
      border-top-right-radius inherit
      height 86px
    .q-date__header-title
      align-items center
      height 30px
  &--portrait-minimal
    height 324px
    width 290px
    .q-date__content
      height 100% 
  &--landscape
    flex-direction row
    align-items stretch
    > div
      display flex
      flex-direction column
    .q-date__content
      height 100%
  &--landscape-standard
    height 321px
    width 420px
    .q-date__header
      border-bottom-left-radius inherit
      min-width 110px
      width 110px
    .q-date__header-title
      flex-direction column
    .q-date__header-today
      margin-top 12px
  &--landscape-minimal
    height 321px
    width 310px
  &--dark
    color white
    background $grey-9
.q-time
  max-width 100%
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  outline none
  &--bordered
    border 1px solid $separator-color
  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
    font-weight 300
  &__header-label
    font-size 28px
    line-height 1
    letter-spacing -0.00833em
    > div + div
      margin-left 4px
  &__link
    opacity .56
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1
  &__header-ampm
    font-size 16px
    letter-spacing 0.1em
  &__content
    padding 16px
    &:before
      content ''
      display block
      padding-bottom 100%
  &__container-parent
    padding 16px
  &__container-child
    border-radius 50%
    background rgba(0, 0, 0, .12)
  &__clock
    padding 24px
    width 100%
    height 100%
    max-width 100%
    max-height 100%
    font-size 14px
  &__clock-circle
    position relative
  &__clock-center
    height 6px
    width 6px
    margin auto
    border-radius 50%
    min-height 0
    background currentColor
  &__clock-pointer
    width 1px
    height 50%
    transform-origin top center /* rtl:ignore */
    min-height 0
    position absolute
    left 50%
    right 0
    bottom 0
    color $primary
    color var(--q-color-primary)
    background currentColor
    transform translateX(-50%)
    &:before, &:after
      content ''
      position absolute
      left 0
      border-radius 50%
      background currentColor
      transform translateX(-44%)
    &:before
      bottom -4px
      width 8px
      height 8px
    &:after
      top -3px
      height 6px
      width 6px
  &__clock-position
    position absolute
    min-height 32px
    width 32px
    height 32px
    font-size 12px
    line-height 32px
    margin 0
    padding 0
    transform translate(-50%, -50%) /* rtl:ignore */
    border-radius 50%
    &--disable
      opacity .4
    &--active
      background-color $primary
      background-color var(--q-color-primary)
      color white
  for $pos in 0..11
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))
    &__clock-pos-{$pos}
      top round($top * 50%, 2)
      left round($left * 50%, 2) /* rtl:ignore */
  for $pos in 12..23
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))
    &__clock-pos-{$pos}
      top round(15% + $top * 35%, 2)
      left round(15% + $left * 35%, 2) /* rtl:ignore */
  &__now-button
    background-color $primary
    background-color var(--q-color-primary)
    color white
    top 12px
    right 12px
  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 10px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)
  &.disabled, &--readonly
    .q-time__header-ampm, .q-time__content
      pointer-events none
  &--portrait
    display inline-flex
    flex-direction column
    width 290px
    min-width 180px
    .q-time__header
      border-top-right-radius inherit
      min-height 86px
    .q-time__header-ampm
      margin-left 12px
  &--landscape
    display inline-flex
    align-items stretch
    width 420px
    min-width 310px
    min-height 180px
    > div
      display flex
      flex-direction column
      justify-content center
    .q-time__header
      border-bottom-left-radius inherit
      width 110px
    .q-time__header-ampm
      margin-top 12px
  &--dark
    color white
    background $grey-9
.q-dialog
  &__title
    font-size 1.25rem
    font-weight 500
    line-height 2rem
    letter-spacing 0.0125em
  &__message
    opacity 0.6
  &__inner
    outline 0
    > div
      pointer-events all
      overflow auto
      -webkit-overflow-scrolling touch
      will-change scroll-position
      border-radius $generic-border-radius
      box-shadow $shadow-4
    &--square > div
      border-radius 0 !important
    > .q-card
      > .q-card__actions .q-btn--rectangle
        min-width 64px
    &--minimized
      padding 24px
      > div
        max-height calc(100vh - 48px)
    &--maximized
      > div
        height 100%
        width 100%
        max-height 100vh
        max-width 100vw
        border-radius 0 !important
    &--top, &--bottom
      padding-top 0 !important
      padding-bottom 0 !important
    &--right, &--left
      padding-right 0 !important
      padding-left 0 !important
    &--left, &--top
      > div
        border-top-left-radius 0
    &--right, &--top
      > div
        border-top-right-radius 0
    &--left, &--bottom
      > div
        border-bottom-left-radius 0
    &--right, &--bottom
      > div
        border-bottom-right-radius 0
    &--fullwidth
      > div
        width 100% !important
        max-width 100% !important
    &--fullheight
      > div
        height 100% !important
        max-height 100% !important
  &__backdrop
    z-index -1
    pointer-events all
    background $dimmed-background
body.platform-ios, body.platform-android:not(.native-mobile)
  .q-dialog__inner--minimized > div
    max-height calc(100vh - 108px)
body.q-ios-padding .q-dialog__inner
  padding-top $ios-statusbar-height !important
  padding-top env(safe-area-inset-top) !important
  padding-bottom env(safe-area-inset-bottom) !important
  > div
    
    max-height "calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important" % $ios-statusbar-height
@media (max-width $breakpoint-xs-max)
  .q-dialog__inner
    &--top, &--bottom
      padding-left 0
      padding-right 0
      > div
        width 100% !important
@media (min-width $breakpoint-sm-min)
  .q-dialog__inner--minimized > div
    max-width 560px
.q-body--dialog
  overflow hidden
.q-bottom-sheet
  padding-bottom 8px
  &--dark
    background $grey-9
    color white
  &__avatar
    border-radius 50%
  &--list
    width 400px
    .q-icon, img
      font-size 24px
      width 24px
      height 24px
  &--grid
    width 700px
    .q-bottom-sheet__item
      padding 8px
      text-align center
      min-width 100px
    .q-icon, img, .q-bottom-sheet__empty-icon
      font-size 48px
      width 48px
      height 48px
      margin-bottom 8px
    .q-separator
      margin 12px 0
  &__item
    flex 0 0 (round(1 / 3 * 100, 4))%
@media (min-width $breakpoint-sm-min)
  .q-bottom-sheet__item
    flex 0 0 (round(1 / 4 * 100, 4))%
.q-dialog-plugin
  width 400px
  &--dark
    background $grey-9
    color white
.q-editor
  border 1px solid $editor-border-color
  border-radius $generic-border-radius
  background-color #fff
  &.disabled
    border-style dashed
  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
    border-top-left-radius inherit
    border-top-right-radius inherit
  &__content
    outline 0
    padding $editor-content-padding
    min-height $editor-content-min-height
    border-bottom-left-radius inherit
    border-bottom-right-radius inherit
    overflow auto
    pre
      white-space pre-wrap
    hr
      border 0
      outline 0
      margin 1px
      height 1px
      background $editor-hr-color
  &__toolbar
    border-bottom 1px solid $editor-border-color
    min-height 32px
  .q-btn
    margin $editor-button-gutter
  &__toolbar-group
    position relative
    margin 0 $editor-button-gutter
    & + &
      &:before
        content ''
        position absolute
        left (- $editor-button-gutter)
        top $editor-button-gutter
        bottom $editor-button-gutter
        width 1px
        background $editor-border-color
  &_input input
    color inherit
  &--flat
    &, .q-editor__toolbar
      border 0
  &--dense
    .q-editor__toolbar-group
      display flex
      align-items center
      flex-wrap nowrap
.z-fab
  z-index $z-fab
.q-fab
  position relative
  vertical-align middle
  &--opened
    .q-fab__actions
      opacity 1
      transform scale(1) translate(0, 0)
      pointer-events all
    .q-fab__icon
      transform rotate(180deg)
      opacity 0
    .q-fab__active-icon
      transform rotate(0deg)
      opacity 1
  &__icon, &__active-icon
    transition opacity .4s, transform .4s
  &__icon
    opacity 1
    transform rotate(0deg)
  &__active-icon
    opacity 0
    transform rotate(-180deg)
  &__actions
    position absolute
    opacity 0
    transition all .2s ease-in
    pointer-events none
    .q-btn
      margin $fab-margin
    &--right
      transform scale(.4) translate(-100%, 0)
      top 0
      bottom 0
      left 120%
    &--left
      transform scale(.4) translate(100%, 0)
      top 0
      bottom 0
      right 120%
      flex-direction row-reverse
    &--up
      transform scale(.4) translate(0, 100%)
      flex-direction column-reverse
      justify-content center
      bottom 120%
      left 0
      right 0
    &--down
      transform scale(.4) translate(0, -100%)
      flex-direction column
      justify-content center
      top 120%
      left 0
      right 0
$field-transition = .36s cubic-bezier(.4,0,.2,1)
@keyframes q-autofill
  to
    background transparent
    color $input-autofill-color
.q-field
  font-size $input-font-size
  &--with-bottom
    padding-bottom 20px
  &__marginal
    height 56px
    color rgba(0, 0, 0, .54)
    font-size 24px
    > * + *
      margin-left 2px
    .q-avatar
      font-size 32px
  &__before, &__prepend
    padding-right 12px
  &__after, &__append
    padding-left 12px
    &:empty
      display none
  &__append + &__append
    padding-left 2px
  &__inner
    text-align left
  &__bottom
    font-size 12px
    min-height 12px
    line-height 1
    color rgba(0, 0, 0, .54)
    padding 8px 12px 0
    &--animated
      transform translateY(100%)
      position absolute
      left 0
      right 0
      bottom 0
  &__messages
    line-height 1
    > div
      word-break break-word
      word-wrap break-word
      overflow-wrap break-word
      & + div
        margin-top 4px
  &__counter
    padding-left 8px
    line-height 1
  &--item-aligned
    padding 8px 16px
    .q-field__before
      min-width 56px
  &__control-container
    height inherit
  &__control
    color $primary
    color var(--q-color-primary)
    height 56px
    max-width 100%
    outline none
    &:before, &:after
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      pointer-events none
    &:before
      border-radius inherit
  &__native, &__prefix, &__suffix
    font-weight 400
    line-height 28px
    letter-spacing .00937em
    text-decoration inherit
    text-transform inherit
    border none
    border-radius 0
    background none
    color $input-text-color
    outline 0
    padding 6px 0
  &__native
    width 100%
    min-width 0 
    outline 0 !important 
    &[type="file"]
      line-height 1em 
  &__prefix, &__suffix
    transition opacity $field-transition
    white-space nowrap
  &__prefix
    padding-right 4px
  &__suffix
    padding-left 4px
  &--readonly, &--disabled
    .q-placeholder 
      opacity 1 !important
  &--readonly
    &.q-field--labeled
      .q-field__native
        cursor default
    &.q-field--float
      .q-field__native
        cursor text
  &--disabled
    .q-field__inner
      cursor not-allowed
    .q-field__control
      pointer-events none
    .q-field__control > div
      opacity .6 !important
      &, * 
        outline 0 !important
  &__label
    left 0
    right 0
    top 18px
    color $input-label-color
    font-size 16px
    line-height 20px
    font-weight 400
    letter-spacing .00937em
    text-decoration inherit
    text-transform inherit
    transform-origin left top
    transition transform $field-transition, right $field-transition
  &--float .q-field__label
    transform translateY(-40%) scale(.75)
    right calc(-100% / 3)
  .q-field__native, .q-select__input
    &:-webkit-autofill
      -webkit-animation-name q-autofill
      -webkit-animation-fill-mode both
    &:-webkit-autofill + .q-field__label
      transform translateY(-40%) scale(.75)
    &[type="number"]:invalid + .q-field__label
      transform translateY(-40%) scale(.75)
    &:invalid
      box-shadow none
  &--focused
    .q-field__label
      color currentColor
  &--filled
    .q-field__control
      padding 0 12px
      background rgba(0,0,0,.05)
      border-radius $generic-border-radius $generic-border-radius 0 0
      &:before
        background rgba(0,0,0,.05)
        border-bottom 1px solid rgba(0,0,0,.42)
        opacity 0
        transition opacity $field-transition, background $field-transition
      &:hover:before
        opacity 1
      &:after
        height 2px
        top auto
        transform-origin center bottom
        transform scale3d(0, 1, 1)
        background currentColor
        transition transform $field-transition
    &.q-field--rounded .q-field__control
      border-radius 28px 28px 0 0
    &.q-field--focused
      .q-field__control
        &:before
          opacity 1
          background rgba(0,0,0,.12)
        &:after
          transform scale3d(1, 1, 1)
    &.q-field--dark
      .q-field__control, .q-field__control:before
        background rgba(255, 255, 255, .07)
      &.q-field--focused .q-field__control:before
        background rgba(255, 255, 255, .1)
    &.q-field--readonly
      .q-field__control:before
        opacity 1
        background transparent
        border-bottom-style dashed
  &--outlined
    .q-field__control
      border-radius $generic-border-radius
      padding 0 12px
      &:before
        border 1px solid rgba(0,0,0,.24)
        transition border-color $field-transition
      &:hover:before
        border-color black
      &:after
        height inherit
        border-radius inherit
        border 2px solid transparent
        transition border-color $field-transition
    &.q-field--rounded .q-field__control
      border-radius 28px
    &.q-field--focused
      .q-field__control:after
        border-color currentColor
        border-width 2px
        transform scale3d(1, 1, 1)
    &.q-field--readonly
      .q-field__control:before
        border-style dashed
  &--standard
    .q-field__control
      &:before
        border-bottom 1px solid rgba(0,0,0,.24)
        transition border-color $field-transition
      &:hover:before
        border-color black
      &:after
        height 2px
        top auto
        border-bottom-left-radius inherit
        border-bottom-right-radius inherit
        transform-origin center bottom
        transform scale3d(0, 1, 1)
        background currentColor
        transition transform $field-transition
    &.q-field--focused
      .q-field__control:after
        transform scale3d(1, 1, 1)
    &.q-field--readonly
      .q-field__control:before
        border-bottom-style dashed
  &--dark
    .q-field__control:before
      border-color rgba(255, 255, 255, .6)
    .q-field__control:hover:before
      border-color white
    .q-field__native, .q-field__prefix, .q-field__suffix, .q-select__input
      color white
    &:not(.q-field--focused) .q-field__label, .q-field__marginal, .q-field__bottom
      color rgba(255, 255, 255, .7)
  &--standout
    .q-field__control
      padding 0 12px
      background rgba(0,0,0,.05)
      border-radius $generic-border-radius
      transition box-shadow $field-transition, background-color $field-transition
      &:before
        background rgba(0,0,0,.07)
        opacity 0
        transition opacity $field-transition, background $field-transition
      &:hover:before
        opacity 1
    &.q-field--rounded .q-field__control
      border-radius 28px
    &.q-field--focused
      .q-field__control
        box-shadow $shadow-2
        background black
      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
        color white
    &.q-field--readonly
      .q-field__control:before
        opacity 1
        background transparent
        border 1px dashed rgba(0,0,0,.24)
    &.q-field--dark
      .q-field__control
        background rgba(255, 255, 255, .07)
        &:before
          background rgba(255, 255, 255, .07)
      &.q-field--focused
        .q-field__control
          background white
        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
          color black
      &.q-field--readonly
        .q-field__control:before
          border-color rgba(255, 255, 255, .24)
  &--labeled
    .q-field__native, .q-field__prefix, .q-field__suffix
      line-height 24px
      padding-top 24px
      padding-bottom 8px
    &:not(.q-field--float)
      .q-field__prefix, .q-field__suffix
        opacity 0
      .q-field__native, .q-select__input
        &::-webkit-input-placeholder
          color transparent
        &::-moz-placeholder
          color transparent
        &:-ms-input-placeholder
          color transparent !important
        &::-ms-input-placeholder
          color transparent
        &::placeholder
          color transparent
    &.q-field--dense
      .q-field__native, .q-field__prefix, .q-field__suffix
        padding-top 14px
        padding-bottom 2px
  &--dense
    .q-field__control, .q-field__marginal
      height 40px
    .q-field__bottom
      font-size 11px
    .q-field__label
      font-size 14px
      top 10px
    .q-field__before, .q-field__prepend
      padding-right 6px
    .q-field__after, .q-field__append
      padding-left 6px
    .q-field__append + .q-field__append
      padding-left 2px
    .q-avatar
      font-size 24px
    &.q-field--float .q-field__label
      transform translateY(-30%) scale(.75)
    .q-field__native, .q-select__input
      &:-webkit-autofill + .q-field__label
        transform translateY(-30%) scale(.75)
      &[type="number"]:invalid + .q-field__label
        transform translateY(-30%) scale(.75)
  &--borderless, &--standard
    .q-field__bottom,
    &.q-field--dense .q-field__control
      padding-left 0
      padding-right 0
  &--error
    .q-field__label
      animation q-field-label .36s
    .q-field__bottom
      color $negative
      color var(--q-color-negative)
  &--auto-height
    .q-field__control
      height auto
    .q-field__control, .q-field__native
      min-height 56px
    .q-field__native
      align-items center
    .q-field__control-container
      padding-top 0
    .q-field__native, .q-field__prefix, .q-field__suffix
      line-height 18px
    &.q-field--labeled
      .q-field__control-container
        padding-top 24px
      .q-field__native, .q-field__prefix, .q-field__suffix
        padding-top 0
      .q-field__native
        min-height 24px
    &.q-field--dense
      .q-field__control, .q-field__native
        min-height 40px
      &.q-field--labeled
        .q-field__control-container
          padding-top 14px
        .q-field__native
          min-height 24px
  &--square .q-field__control
    border-radius 0 !important
.q-transition--field-message
  &-enter-active,
  &-leave-active
    transition transform .6s cubic-bezier(.86, 0, .07, 1), opacity .6s cubic-bezier(.86, 0, .07, 1)
  &-enter, &-leave-to
    opacity 0
    transform translateY(-10px)
  &-leave, &-leave-active
    position absolute
@keyframes q-field-label
  40%
    margin-left 2px
  60%, 80%
    margin-left -2px
  70%, 90%
    margin-left 2px
.q-form
  position relative
.q-img
  position relative
  width $img-width
  display inline-block
  vertical-align middle
  &__loading .q-spinner
    font-size $img-loading-font-size
  &__image
    background-repeat $img-background-repeat
  &__content > div
    position $img-content-position
    padding $img-content-padding
    color $img-content-color
    background $img-content-background
.q-inner-loading
  background $light-dimmed-background
  &--dark
    background $dimmed-background
.q-textarea
  .q-field__control
    min-height 56px
    height auto
  .q-field__control-container
    padding-top 2px
    padding-bottom 2px
  .q-field__native, .q-field__prefix, .q-field__suffix
    line-height 18px
  .q-field__native
    resize vertical
    padding-top 17px
    min-height 52px
  &.q-field--labeled
    .q-field__control-container
      padding-top 26px
    .q-field__native, .q-field__prefix, .q-field__suffix
      padding-top 0
    .q-field__native
      min-height 26px
      padding-top 1px
  &--autogrow
    .q-field__native
      resize none
  &.q-field--dense
    .q-field__control, .q-field__native
      min-height 36px
    .q-field__native
      padding-top 9px
    &.q-field--labeled
      .q-field__control-container
        padding-top 14px
      .q-field__native
        min-height 24px
        padding-top 3px
      .q-field__prefix, .q-field__suffix
        padding-top 2px
body.mobile .q-textarea,
.q-textarea.disabled
  .q-field__native
    resize none
.q-knob
  font-size 48px
  &--editable
    cursor pointer
    outline 0
    &:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      box-shadow none
      transition box-shadow .24s ease-in-out
    &:focus:before
      box-shadow $shadow-4
.q-layout
  width 100%
.q-layout-container
  position relative
  width 100%
  height 100%
  .q-layout
    min-height 100%
  > div
    transform translate3d(0, 0, 0)
    > div
      min-height 0
      max-height 100%
.q-layout__shadow
  width 100%
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    box-shadow $layout-shadow
.q-layout__section--marginal
  background-color $primary
  background-color var(--q-color-primary)
  color white
.q-header
  &--hidden
    transform translateY(-110%)
  &--bordered
    border-bottom $layout-border
  .q-layout__shadow
    bottom -10px
    &:after
      bottom 10px
.q-footer
  &--hidden
    transform translateY(110%)
  &--bordered
    border-top $layout-border
  .q-layout__shadow
    top -10px
    &:after
      top 10px
.q-header, .q-footer
  z-index $z-marginals
.q-drawer
  position absolute
  top 0
  bottom 0
  background white
  z-index $z-side
  &--on-top
    z-index $z-fixed-drawer
  &--left
    left 0
    transform translateX(-100%)
    &.q-drawer--bordered
      border-right $layout-border
    .q-layout__shadow
      left 10px
      right -10px
      &:after
        right 10px
  &--right
    right 0
    transform translateX(100%)
    &.q-drawer--bordered
      border-left $layout-border
    .q-layout__shadow
      left -10px
      &:after
        left 10px
  &-container:not(&--mini-animate) &--mini
    padding 0 !important
    .q-item, .q-item__section
      text-align center
      justify-content center
      padding-left 0
      padding-right 0
      min-width 0
    .q-item__label, .q-item__section--main, .q-item__section--side ~ .q-item__section--side
      display none
  &--mini
    .q-mini-drawer-hide, .q-expansion-item__content
      display none
  &--mini-animate &__content
    overflow-x hidden
    white-space nowrap
  &--standard
    .q-mini-drawer-only
      display none
  &--mobile
    .q-mini-drawer-only, .q-mini-drawer-hide
      display none
  &__backdrop
    z-index ($z-fixed-drawer - 1) !important
    will-change background-color
  &__opener
    z-index ($z-marginals + 1)
    height 100%
    width 15px
    user-select none
.q-layout, .q-header, .q-footer, .q-page
  position relative
.q-page-sticky--shrink
  pointer-events none
  > div
    display inline-block
    pointer-events auto
body.q-ios-padding
  .q-layout--standard .q-header > .q-toolbar:nth-child(2),
  .q-layout--standard .q-header > .q-tabs:nth-child(2) .q-tabs-head
  .q-layout--standard .q-drawer--top-padding .q-drawer__content
    padding-top $ios-statusbar-height
    min-height ($toolbar-min-height + $ios-statusbar-height)
    padding-top env(safe-area-inset-top)
    min-height "calc(env(safe-area-inset-top) + %s)" % $toolbar-min-height
  .q-layout--standard .q-footer > .q-toolbar:last-child,
  .q-layout--standard .q-footer > .q-tabs:last-child .q-tabs-head
  .q-layout--standard .q-drawer--top-padding .q-drawer__content
    padding-bottom env(safe-area-inset-bottom)
    min-height "calc(env(safe-area-inset-bottom) + %s)" % $toolbar-min-height
.q-body--layout-animate
  .q-drawer__backdrop
    transition background-color .12s !important
  .q-drawer
    transition transform .12s, width .12s, top .12s, bottom .12s !important
  .q-layout__section--marginal
    transition transform .12s, left .12s, right .12s !important
  .q-page-container
    transition padding-top .12s, padding-right .12s, padding-bottom .12s, padding-left .12s !important
  .q-page-sticky
    transition transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
.q-body--drawer-toggle
  overflow-x hidden !important
.q-layout-padding
  @media (max-width $breakpoint-xs-max)
    padding 8px
  @media (min-width $breakpoint-sm-min) and (max-width $breakpoint-md-max)
    padding 16px
  @media (min-width $breakpoint-lg-min)
    padding 24px
body.platform-ios
  .q-layout--containerized
    
    
    
    position unset !important
.q-linear-progress
  position relative
  width 100%
  overflow hidden
  height 4px
  color $primary
  color var(--q-color-primary)
  &--reverse
    transform scale3d(-1, 1, 1)
  &__model, &__track
    transform-origin 0 0
    transition transform .3s
  &__model
    &--determinate
      background currentColor
    &--indeterminate, &--query
      transition none
      &:before, &:after
        background currentColor
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        transform-origin 0 0
      &:before
        animation q-linear-progress--indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
      &:after
        transform translate3d(-101%, 0, 0) scale3d(1, 1, 1)
        animation q-linear-progress--indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
        animation-delay 1.15s
  &__track
    opacity 0.4
    &--light
      background rgba(0, 0, 0, .26)
    &--dark
      background rgba(255, 255, 255, .6)
  &__stripe
    transition width .3s
    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
@keyframes q-linear-progress--indeterminate
  0%
    transform translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
  60%
    transform translate3d(100%, 0, 0) scale3d(.9, 1, 1)
  100%
    transform translate3d(100%, 0, 0) scale3d(.9, 1, 1)
@keyframes q-linear-progress--indeterminate-short
  0%
    transform translate3d(-101%, 0, 0) scale3d(1, 1, 1)
  60%
    transform translate3d(107%, 0, 0) scale3d(0.01, 1, 1)
  100%
    transform translate3d(107%, 0, 0) scale3d(0.01, 1, 1)
.q-expansion-item
  &__border
    opacity 0
  &__toggle-icon
    position relative
    transition transform .3s
  &--standard
    &.q-expansion-item--expanded
      > div > .q-expansion-item__border
        opacity 1
  &--popup
    transition padding .5s
    > .q-expansion-item__container
      border 1px solid $separator-color
      > .q-separator
        display none
    &.q-expansion-item
      &--collapsed
        padding 0 15px
      &--expanded
        padding 15px 0
        & + &
          padding-top 0
    &.q-expansion-item--collapsed:not(:first-child)
      > .q-expansion-item__container
        border-top-width 0
    &.q-expansion-item--expanded + &.q-expansion-item--collapsed
      > .q-expansion-item__container
        border-top-width 1px
  &__content > .q-card
    box-shadow none
    border-radius 0
  &:first-child > div > .q-expansion-item__border--top
    opacity 0
  &:last-child > div > .q-expansion-item__border--bottom
    opacity 0
  &--expanded + &--expanded
    > div > .q-expansion-item__border--top
      opacity 0
.q-item
  min-height 48px
  padding 8px 16px
  color inherit
  transition color .3s, background-color .3s
  &__section
    &--side
      color $grey-7
      align-items flex-start
      padding-right 16px
      width auto
      min-width 0
      max-width 100%
      > .q-icon
        font-size 24px
      > .q-avatar
        font-size 40px
    &--avatar
      color inherit
      min-width 56px
    &--thumbnail
      img
        width 100px
        height 56px
    &--nowrap
      white-space nowrap
  > .q-item__section--thumbnail:first-child,
  > .q-focus-helper + .q-item__section--thumbnail
    margin-left -16px
  > .q-item__section--thumbnail:last-of-type
    margin-right -16px
  &__label
    line-height 1.2em !important
    max-width 100%
    &--overline
      color rgba(0, 0, 0, .7)
    &--caption
      color rgba(0, 0, 0, .54)
    &--header
      color $grey-7
      padding 16px
      font-size 0.875rem
      line-height 1.25rem
      letter-spacing 0.01786em
      .q-separator--spaced + &, .q-list--padding &
        padding-top 8px
    & + .q-item__label
      margin-top 4px
.q-item__section--main
  width auto
  min-width 0
  max-width 100%
  flex 10000 1 0%
  & + &
    margin-left 8px
  ~ .q-item__section--side
    align-items flex-end
    padding-right 0
    padding-left 16px
  &.q-item__section--thumbnail
    margin-left 0
    margin-right -16px
.q-list
  &--bordered
    border 1px solid $separator-color
  &--separator
    > .q-item-type + .q-item-type,
    > .q-virtual-scroll__content > .q-item-type + .q-item-type
      border-top 1px solid $separator-color
  &--padding
    padding 8px 0
.q-list--dense > .q-item, .q-item--dense
  min-height 32px
  padding 2px 16px
.q-list--dark.q-list--separator
  > .q-item-type + .q-item-type,
  > .q-virtual-scroll__content > .q-item-type + .q-item-type
    border-top-color $separator-dark-color
.q-list--dark, .q-item--dark
  color white
  border-color $separator-dark-color
  .q-item__section--side:not(.q-item__section--avatar)
    color rgba(255, 255, 255, .7)
  .q-item__label
    &--header
      color rgba(255, 255, 255, .64)
    &--overline, &--caption
      color rgba(255, 255, 255, .8)
.q-item
  position relative
  &.q-router-link--active, &--active
    color $primary
    color var(--q-color-primary)
.q-slide-item
  position relative
  &__left, &__right, &__top, &__bottom
    visibility hidden
    font-size 14px
    color white
    .q-icon
      font-size 1.714em
  &__left
    background $green
    padding 8px 16px
    > div
      transform-origin left center
  &__right
    background $orange
    padding 8px 16px
    > div
      transform-origin right center
  &__top
    background $blue
    padding 16px 8px
    > div
      transform-origin top center
  &__bottom
    background $purple
    padding 16px 8px
    > div
      transform-origin bottom center
  &__content
    background white
    transition transform .2s ease-in
    user-select none
    cursor pointer
.q-menu
  position fixed !important
  display inline-block
  max-width $menu-max-width
  box-shadow $menu-box-shadow
  background $menu-background
  border-radius $generic-border-radius
  overflow-y auto
  overflow-x hidden
  outline 0
  max-height 65vh
  z-index $z-menu
  &--square
    border-radius 0
.q-option-group
  &--inline
    > div
      display inline-block
.q-pagination
  input
    text-align center
    -moz-appearance textfield
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button
    -webkit-appearance none
    margin 0
  .q-btn
    padding 0 5px !important
    &.disabled
      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-popup-edit
  padding 8px 16px
  &__buttons
    margin-top 8px
    .q-btn + .q-btn
      margin-left 8px
.q-pull-to-refresh
  position relative
  &__puller
    border-radius 50%
    width 40px
    height 40px
    color $primary
    color var(--q-color-primary)
    background white
    box-shadow 0px 0px 4px 0px rgba(0, 0, 0, .3)
    &--animating
      transition transform .3s, opacity .3s
$radio-transition = .22s cubic-bezier(0,0,.2,1) 0ms
.q-radio
  vertical-align middle
  &__bg
    left 10px
    top 10px
    width 50%
    height 50%
  &__native
    width 1px
    height 1px
  &__outer-circle
    border-width 2px
    border-style solid
    border-radius 50%
  &__inner-circle
    border-width 10px
    border-style solid
    border-radius 50%
    transform scale3d(0, 0, 0)
    transition transform $radio-transition
  &__label
    padding-left 4px
    padding-right 0
    font-size 14px
    line-height 20px
  &.reverse &__label
    padding-right 4px
    padding-left 0
  &__inner
    width 40px
    min-width 40px
    height 40px
    padding 10px
    outline 0
    border-radius 50%
    color rgba(0, 0, 0, .54)
    &--active
      color $primary
      color var(--q-color-primary)
      .q-radio__inner-circle
        transform scale3d(.5, .5, .5)
  &.disabled
    opacity .75 !important
  &--dark
    .q-radio__inner
      color rgba(255, 255, 255, .7)
      &:before
        opacity .32 !important
      &--active
        color $primary
        color var(--q-color-primary)
  &--dense
    .q-radio__bg
      left 0
      top 0
      width 100%
      height 100%
    .q-radio__inner
      width 20px
      min-width 20px
      height 20px
body.desktop
  .q-radio
    &__inner:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $radio-transition
    &:focus:not(.disabled)
      .q-radio__inner:before
        transform scale3d(1, 1, 1)
    &--dense:focus:not(.disabled) .q-radio__inner:before
      transform scale3d(1.5, 1.5, 1.5)
.q-rating
  color $rating-grade-color
  vertical-align middle
  &__icon
    color currentColor
    text-shadow $rating-shadow
    position relative
    opacity .4
    transition transform .2s ease-in, opacity .2s ease-in
    &--hovered
      transform scale(1.3)
    &--exselected
      opacity .7
    &--active
      opacity 1
    & + &
      margin-left 2px
  &--editable .q-icon
    cursor pointer
  &--non-editable span, .q-icon
    outline 0
.q-scrollarea
  position relative
.q-scrollarea__thumb
  background black
  opacity .2
  transition opacity .3s
  &--v
    right 0
    width 10px
  &--h
    bottom 0
    height 10px
  &:hover
    opacity .3
    cursor grab
  &:active
    opacity .5
  &--invisible
    opacity 0 !important
    &:hover
      cursor inherit
.q-select
  &--without-input
    .q-field__control
      cursor pointer
  &--with-input
    .q-field__control
      cursor text
  &__input
    border 0
    outline 0 !important 
    background transparent
    min-width 50px !important
    padding 0
    height 0
    min-height 24px
    line-height 24px
    &--padding
      padding-left 4px
  &__dropdown-icon
    cursor pointer
  &.q-field--readonly
    .q-field__control, .q-select__dropdown-icon
      cursor default
    &.q-field--labeled
      .q-select__input
        cursor default
    &.q-field--float
      .q-select__input
        cursor text
  &__dialog
    width 90vw !important
    max-width 90vw !important
    max-height calc(100vh - 70px) !important
    background white
    display flex
    flex-direction column
    > .scroll
      position relative
      background inherit
  &__menu--dark
    color white
    background $grey-9
body.mobile:not(.native-mobile) .q-select__dialog
  max-height calc(100vh - 108px) !important
body.platform-android
  &.native-mobile .q-dialog__inner--top .q-select__dialog
    max-height calc(100vh - 24px) !important
  &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog
    max-height calc(100vh - 80px) !important
body.platform-ios
  &.native-mobile .q-dialog__inner--top
    > div
      border-radius $generic-border-radius
    .q-select__dialog--focused
      max-height 47vh !important
  &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused
    max-height 50vh !important
.q-separator
  border none
  background $separator-color
  margin 0
  transition background .3s, opacity .3s
  &--dark
    background $separator-dark-color
  &--horizontal
    display block
    height 1px
    min-height 1px
    width 100%
    &.q-separator--spaced
      margin-top 8px
      margin-bottom 8px
    &.q-separator--inset
      margin-left 16px
      margin-right 16px
      width calc(100% - 32px)
    &.q-separator--item-inset
      margin-left 72px
      margin-right 0
      width calc(100% - 72px)
    &.q-separator--item-thumbnail-inset
      margin-left 116px
      margin-right 0
      width calc(100% - 116px)
  &--vertical
    width 1px
    min-width 1px
    height inherit
    min-height 100%
    &.q-separator--spaced
      margin-left 8px
      margin-right 8px
    &.q-separator--inset
      margin-top 8px
      margin-bottom 8px
.q-slider
  position relative
  width 100%
  height 40px
  color $primary
  color var(--q-color-primary)
  outline 0
  &__track-container
    top 50%
    width 100%
    height 2px
    background rgba(0, 0, 0, .26)
  &__track
    will-change width, left
    background currentColor
  &__track-markers
    color black
    background-image repeating-linear-gradient(to right, currentColor, currentColor 2px, transparent 0, transparent)
    &:after
      content ''
      position absolute
      right 0
      top 0
      bottom 0
      height 2px
      width 2px
      background currentColor
  &__thumb-container
    top 11px
    width 21px
    transform translate3d(-10px, 0, 0)
    will-change left
    outline 0
  &__thumb
    top 0
    left 0
    transform scale3d(.571, .571, .571)
    transition transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    stroke-width 3.5
    stroke currentColor
    circle
      stroke currentColor
      fill currentColor
  &__focus-ring
    width 21px
    height 21px
    transition transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
    border-radius 50%
    opacity 0
    transition-delay .14s
  &__pin
    top 0
    width 26px
    height 26px
    margin-top -2px
    margin-left -2px
    background currentColor
    transform rotate(-45deg) scale3d(0, 0, 0) translate3d(0, 0, 0)
    transition transform 100ms ease-out
    will-change left
    border-radius 50% 50% 50% 0%
    z-index 1
  &__pin-value-marker
    transform rotate(45deg)
    &-text
      position relative
      color white
      font-size 12px
      white-space nowrap
    &-bg
      position absolute
      min-width 27px
      width 130%
      height 27px
      left 50%
      top 50%
      transform translate3d(-50%, -50%, 0)
      background-color currentColor
      border-radius $generic-border-radius
  &--editable
    cursor grab
  &--no-value
    .q-slider__thumb, .q-slider__track
      visibility hidden
  &--focus
    .q-slider__thumb
      transform scale3d(.571, .571, .571)
  &--focus, body.desktop &.q-slider--editable:hover
    .q-slider__focus-ring
      background currentColor
      transform scale3d(1.55, 1.55, 1.55)
      opacity .25
    .q-slider__thumb, .q-slider__track
      visibility visible
  &--inactive
    .q-slider__thumb-container
      transition left .28s
    .q-slider__track
      transition width .28s, left .28s
  &--active
    cursor grabbing
    .q-slider__thumb
      transform scale3d(1, 1, 1)
    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
      transform scale3d(0, 0, 0) !important
  body.desktop &.q-slider--editable:hover .q-slider__pin
    transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0)
  &--label
    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
      .q-slider__pin
        transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0)
  &--dark
    .q-slider__track-container
      background alpha(#fff, .3)
    .q-slider__track-markers
      color white
  &--dense
    height 20px
    .q-slider__thumb-container
      top 0
.q-space
  flex-grow 1 !important
.q-spinner
  vertical-align middle
.q-spinner-mat
  animation q-spin 2s linear infinite
  transform-origin center center
  .path
    stroke-dasharray 1, 200 /* rtl:ignore */
    stroke-dashoffset 0 /* rtl:ignore */
    animation q-mat-dash 1.5s ease-in-out infinite
@keyframes q-spin
  0%
    transform rotate3d(0, 0, 1, 0deg) /* rtl:ignore */
  25%
    transform rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
  50%
    transform rotate3d(0, 0, 1, 180deg) /* rtl:ignore */
  75%
    transform rotate3d(0, 0, 1, 270deg) /* rtl:ignore */
  100%
    transform rotate3d(0, 0, 1, 359deg) /* rtl:ignore */
@keyframes q-mat-dash
  0%
    stroke-dasharray 1, 200 /* rtl:ignore */
    stroke-dashoffset 0 /* rtl:ignore */
  50%
    stroke-dasharray 89, 200 /* rtl:ignore */
    stroke-dashoffset -35px /* rtl:ignore */
  100%
    stroke-dasharray 89, 200 /* rtl:ignore */
    stroke-dashoffset -124px /* rtl:ignore */
.q-splitter
  &__panel
    position relative
    z-index 0
    > .q-splitter
      width 100%
      height 100%
  &__separator
    background-color $separator-color
    user-select none
    position relative
    z-index 1
  &__separator-area > *
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
  &--dark
    .q-splitter__separator
      background-color $separator-dark-color
  &--vertical
    > .q-splitter__panel
      height 100%
    &.q-splitter--active
      cursor col-resize
    > .q-splitter__separator
      width 1px
      > div
        left -6px
        right -6px
    &.q-splitter--workable > .q-splitter__separator
      cursor col-resize
  &--horizontal
    > .q-splitter__panel
      width 100%
    &.q-splitter--active
      cursor row-resize
    > .q-splitter__separator
      height 1px
      > div
        top -6px
        bottom -6px
    &.q-splitter--workable > .q-splitter__separator
      cursor row-resize
  &__before, &__after
    overflow auto
.q-stepper
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  &__title
    font-size 14px
    line-height 18px
    letter-spacing .1px
  &__caption
    font-size 12px
    line-height 14px
  &__dot
    margin-right 8px
    font-size 14px
    width 24px
    height 24px
    border-radius 50%
    background currentColor
    span
      color white
  &__tab
    padding 8px 24px
    font-size 14px
    color $grey
    flex-direction row
  &--dark
    .q-stepper__dot span
      color black
  &__tab
    &--navigation
      user-select none
      cursor pointer
    &--active, &--done
      color $primary
      color var(--q-color-primary)
      .q-stepper__dot, .q-stepper__label
        text-shadow 0 0 0 currentColor
    &--disabled
      .q-stepper__dot
        background rgba(0, 0, 0, .22)
      .q-stepper__label
        color rgba(0, 0, 0, .32)
    &--error
      color $negative
      color var(--q-color-negative)
      .q-stepper__dot
        background transparent !important
        span
          color currentColor
          font-size 24px
  &__header
    border-top-left-radius inherit
    border-top-right-radius inherit
    &--border
      border-bottom 1px solid $separator-color
    &--standard-labels
      .q-stepper__tab
        min-height 72px
        justify-content center
        &:first-child
          justify-content flex-start
        &:last-child
          justify-content flex-end
      .q-stepper__dot:after
        display none
    &--alternative-labels
      .q-stepper__tab
        min-height 104px
        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
  &__nav
    padding-top 24px
  &--bordered
    border 1px solid $separator-color
  &--horizontal
    .q-stepper__step-inner
      padding 24px
    .q-stepper__tab:first-child
      border-top-left-radius inherit
    .q-stepper__tab:last-child
      border-top-right-radius inherit
    .q-stepper__tab:first-child .q-stepper__dot:before,
    .q-stepper__tab:last-child .q-stepper__label:after,
    .q-stepper__tab:last-child .q-stepper__dot:after
      display none
    .q-stepper__tab
      overflow hidden
    .q-stepper__line
      &:before, &:after
        position absolute
        top 50%
        height 1px
        width 100vw
        background $separator-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
      padding 0 24px 24px
  &--vertical
    padding 16px 0
    .q-stepper__tab
      padding 12px 24px
    .q-stepper__title
      line-height 18px
    .q-stepper__step-inner
      padding 0 24px 32px 60px
    > .q-stepper__nav
      padding 24px 24px 0
    .q-stepper__step
      overflow hidden
    .q-stepper__dot
      margin-right 12px
      &:before, &:after
        content ''
        position absolute
        left 50%
        width 1px
        height 99999px
        background $separator-color
    .q-stepper__dot:before
      bottom 100%
      margin-bottom 8px
    .q-stepper__dot:after
      top 100%
      margin-top 8px
    .q-stepper__step:first-child .q-stepper__dot:before,
    .q-stepper__step:last-child .q-stepper__dot:after
      display none
    .q-stepper__step:last-child .q-stepper__step-inner
      padding-bottom 8px
  &--dark
    color white
    &.q-stepper--bordered,
    .q-stepper__header--border
      border-color $separator-dark-color
    &.q-stepper--horizontal
      .q-stepper__line
        &:before, &:after
          background $separator-dark-color
    &.q-stepper--vertical
      .q-stepper__dot
        &:before, &:after
          background $separator-dark-color
    .q-stepper__tab
      &--disabled
        color $separator-dark-color
        .q-stepper__dot
          background $separator-dark-color
        .q-stepper__label
          color rgba(255, 255, 255, .54)
  &--contracted
    .q-stepper__header
      min-height 72px
      &--alternative-labels
        .q-stepper__tab
          min-height 72px
          &:first-child
            align-items flex-start
          &:last-child
            align-items flex-end
      .q-stepper__tab
        padding 24px 0
        &:first-child
          .q-stepper__dot
            transform translateX(24px)
        &:last-child
          .q-stepper__dot
            transform translateX(-24px)
    .q-stepper__tab:not(:last-child)
      .q-stepper__dot:after
        display block !important
    .q-stepper__dot
      margin 0
    .q-stepper__label
      display none
.q-tab-panels
  background white
.q-tab-panel
  padding 16px
.q-markup-table
  overflow auto
  background white
.q-table
  width 100%
  max-width 100%
  border-collapse collapse
  border-spacing 0
  thead tr, tbody td
    height 48px
  th
    font-weight 500
    font-size 12px
    user-select none
    &.sortable
      cursor pointer
      &:hover .q-table__sort-icon
        opacity .64
    &.sorted .q-table__sort-icon
      opacity .86 !important
    &.sort-desc .q-table__sort-icon
      transform rotate(180deg)
  th, td
    padding 7px 16px
    background-color inherit
  thead, td, th
    border-style solid
    border-width 0
  tbody td
    font-size 13px
  &__card
    color #000
    background-color #fff
    border-radius $table-border-radius
    box-shadow $table-box-shadow
  &__container
    position relative
    > 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
  &__top
    padding 12px 16px
    .q-table__control
      flex-wrap wrap
  &__title
    font-size 20px
    letter-spacing 0.005em
    font-weight 400
  &__separator
    min-width 8px !important
  &__progress
    height 0 !important
    th
      padding 0 !important
      border-bottom 1px solid transparent !important
    .q-linear-progress
      position absolute
      bottom -1px
  &__middle
    max-width 100%
  &__bottom
    min-height 48px
    padding 4px 14px 4px 16px
    font-size 12px
    .q-table__control
      min-height 24px
  &__bottom-nodata-icon
    font-size 200%
    margin-right 8px
  &__bottom-item
    margin-right 16px
  &__control
    display flex
    align-items center
  &__sort-icon
    transition transform $table-transition
    opacity 0
    font-size 120%
    &--left, &--center
      margin-left 4px
    &--right
      margin-right 4px
  &--col-auto-width
    opacity 1 !important
    width 1px
    padding-right 0 !important
  &--flat
    box-shadow none
  &--bordered
    border 1px solid $table-border-color
  &--square
    border-radius 0
  &__linear-progress
    height 2px
  &--no-wrap
    th, td
      white-space nowrap
  &--grid
    box-shadow none
    .q-table__top
      padding-bottom 4px
    .q-table__middle
      min-height 2px
      margin-bottom 4px
      thead
        &, th
          border 0 !important
    .q-table__linear-progress
      bottom 0
    .q-table__bottom
      border-top 0
  &__grid-item-card
    vertical-align top
    padding 12px
    .q-separator
      margin 12px 0
  &__grid-item-row + &__grid-item-row
    margin-top 8px
  &__grid-item-title
    opacity .54
    font-weight 500
    font-size 12px
  &__grid-item-value
    font-size 13px
  &__grid-item
    padding 4px
    transition transform $table-transition
    &--selected
      transform scale(0.95)
.q-table--horizontal-separator
  thead, tbody tr:not(:last-child) td
    border-width 0 0 1px 0
.q-table--vertical-separator
  td, th
    border-width 0 0 0 1px
  thead tr:last-child th
    border-bottom-width 1px
  td:first-child, th:first-child
    border-left 0
.q-table--cell-separator
  td, th
    border-width 1px
  td:first-child, th:first-child
    border-left 0
  td:last-child, th:last-child
    border-right 0
  thead tr:first-child th
    border-top 0
  tbody
    tr:last-child td
      border-bottom 0
.q-table--vertical-separator, .q-table--cell-separator
  .q-table__top
    border-bottom 1px solid $table-border-color
.q-table .q-table--col-auto-width
  border-left 0
  border-right 0
  & + td, & + th
    border-left 0
.q-table--dense
  .q-table__bottom
    min-height 42px
  .q-table__sort-icon
    font-size 110%
  .q-table
    th, td
      padding 4px 8px
    thead tr, tbody tr, tbody td
      height 28px
    th:first-child, td:first-child
      padding-left 16px
    th:last-child, td:last-child
      padding-right 16px
  .q-table__bottom-item
    margin-right 8px
.q-table__bottom 
  border-top 1px solid $table-border-color
.q-table 
  thead, tr, th, td
    border-color $table-border-color
  th
    opacity .54
    transition opacity $table-transition
    &.sortable:hover, &.sorted
      opacity .86
  tbody tr
    &.selected
      background $table-selected-background
    &:hover
      background $table-hover-background
.q-table__card--dark
  color #fff
  background $grey-9
.q-table--dark
  .q-table__bottom
    border-top 1px solid $table-dark-border-color
  thead, tr, th, td
    border-color $table-dark-border-color
  tbody tr
    &.selected
      background $table-dark-selected-background
    &:hover
      background $table-dark-hover-background
  &.q-table--vertical-separator, &.q-table--cell-separator
    .q-table__top
      border-bottom 1px solid $table-dark-border-color
.q-tab
  padding 0 16px
  min-height 48px
  transition color .3s, background-color .3s
  text-transform uppercase
  white-space nowrap
  
  color inherit
  text-decoration none
  &--full
    min-height 72px
  &--no-caps
    text-transform none
  &__content
    height inherit
    padding 4px 0
    min-width 40px
    &--inline
      .q-tab__icon + .q-tab__label
        padding-left 8px
    .q-chip--floating
      top 0
      right -16px
  &__icon
    width 24px
    height 24px
    font-size 24px
  &__label
    font-size $button-font-size
    line-height $button-line-height
    font-weight $button-font-weight
  .q-badge
    top 3px
    right -12px
  &__alert
    position absolute
    top 7px
    right -9px
    height 10px
    width 10px
    border-radius 50%
    background currentColor
  &__indicator
    opacity 0
    height 2px
    background currentColor
  &--active .q-tab__indicator
    opacity 1
    transform-origin left
  &--inactive
    opacity .85
.q-tabs
  transition color .3s, background-color .3s
  &--not-scrollable
    .q-tabs__arrow
      display none
    .q-tabs__content
      border-radius inherit
  &__arrow
    cursor pointer
    min-width 36px
    &--faded
      opacity .5
  &__content
    overflow hidden
    flex 1 1 auto
    &--align
      &-center
        justify-content center
      &-right
        justify-content flex-end
      &-justify .q-tab
        flex 1 1 auto
  &__offset
    display none
  &--vertical
    display block !important
    height 100%
    .q-tabs__content
      display block !important
      height calc(100% - 72px)
    .q-tabs__arrow
      width 100%
      height 36px
      text-align center
    .q-tab
      padding 0 8px
    .q-tab__indicator
      height unset
      width 2px
  &--vertical.q-tabs--not-scrollable
    .q-tabs__content
      height 100%
  &--vertical.q-tabs--dense
    .q-tab__content
      min-width 24px
  &--dense
    .q-tab
      min-height 36px
      &--full
        min-height 52px
body.mobile
  .q-tabs
    &__content
      overflow auto
    &__arrow
      display none
@media (min-width $breakpoint-lg-min)
  .q-header, .q-footer
    .q-tab__content
      min-width 128px
.q-timeline
  padding 0
  width 100%
  list-style none
  h6
    line-height inherit
  &--dark
    color white
    .q-timeline__subtitle
      opacity .7
  &__content
    padding-bottom 24px
  &__title
    margin-top 0
    margin-bottom 16px
  &__subtitle
    font-size 12px
    margin-bottom 8px
    opacity .4
    text-transform uppercase
    letter-spacing 1px
    font-weight 700
  &__dot
    position absolute
    top 0
    bottom 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-icon
      position absolute
      top 0
      left 0
      right 0
      font-size 16px
      height 38px
      line-height 38px
      width 100%
      color white
  &__dot-img
    position absolute
    top 4px
    left 0
    right 0
    height 31px
    width 31px
    background currentColor
    border-radius 50%
  &__heading
    position relative
    &:first-child .q-timeline__heading-title
      padding-top 0
    &:last-child .q-timeline__heading-title
      padding-bottom 0
  &__heading-title
    padding 32px 0
    margin 0
  &__entry
    position relative
    line-height 22px
    &:last-child
      padding-bottom 0 !important
      .q-timeline__dot:after
        content none
    &--icon
      .q-timeline__dot
        width 31px
        &:before
          height 31px
          width 31px
        &:after
          top 41px
          left 14px
      .q-timeline__subtitle
        padding-top 8px
  &--dense--right
    .q-timeline
      &__entry
        padding-left 40px
        &--icon .q-timeline__dot
          left -8px
      &__dot
        left 0
  &--dense--left
    .q-timeline
      &__heading
        text-align right
      &__entry
        padding-right 40px
        &--icon .q-timeline__dot
          right -8px
      &__content
      &__title
      &__subtitle
        text-align right
      &__dot
        right 0
  &--comfortable
    display table
    .q-timeline
      &__heading
        display table-row
        font-size 200%
        > div
          display table-cell
      &__entry
        display table-row
        padding 0
        &--icon .q-timeline__content
          padding-top 8px
      &__subtitle, &__dot, &__content
        display table-cell
        vertical-align top
      &__subtitle
        width 35%
      &__dot
        position relative
        min-width 31px
  &--comfortable--right
    .q-timeline
      &__heading
        .q-timeline__heading-title
          margin-left -50px
      &__subtitle
        text-align right
        padding-right 30px
      &__content
        padding-left 30px
      &__entry--icon .q-timeline__dot
        left -8px
  &--comfortable--left
    .q-timeline
      &__heading
        text-align right
        .q-timeline__heading-title
          margin-right -50px
      &__subtitle
        padding-left 30px
      &__content
        padding-right 30px
      &__content,
      &__title
        text-align right
      &__entry--icon .q-timeline__dot
        right 0
      &__dot
        right -8px
  &--loose
    .q-timeline
      &__heading-title
        text-align center
        margin-left 0
      &__entry, &__subtitle, &__dot, &__content
        display block
        margin 0
        padding 0
      &__dot
        position absolute
        left 50%
        margin-left -7.15px
      &__entry
        padding-bottom 24px
        overflow hidden
        &--icon
          .q-timeline__dot
            margin-left -15px
          .q-timeline__subtitle
            line-height 38px
          .q-timeline__content
            padding-top 8px
        &--left .q-timeline__content,
        &--right .q-timeline__subtitle
          float left
          padding-right 30px
          text-align right
        &--left .q-timeline__subtitle,
        &--right .q-timeline__content
          float right
          text-align left
          padding-left 30px
      &__subtitle, &__content
        width 50%
$toggle-transition = .22s cubic-bezier(.4,0,.2,1)
.q-toggle
  vertical-align middle
  &__label
    font-size 14px
    line-height 20px
  &__native
    width 1px
    height 1px
  &__track
    height 14px
    border-radius 7px
    opacity .38
    background-color currentColor
  &__thumb-container
    left 10px
    right auto
    top 10px
    transform translate3d(0, 0, 0)
    transition transform $toggle-transition
    user-select none
  &__thumb
    width 20px
    height 20px
    border 10px solid
    border-radius 50%
    border-color #fff
    box-shadow 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
    .q-icon
      font-size 12px
      width 20px
      height 0
      line-height 0
      color black
      opacity .54
  &__inner
    width 56px
    min-width 56px
    height 40px
    padding 13px 12px
    &--active
      color $primary
      color var(--q-color-primary)
      .q-toggle__track
        opacity .54
      .q-toggle__thumb-container
        transform translate3d(16px, 0, 0)
      .q-toggle__thumb
        background-color currentColor
        border-color currentColor
        .q-icon
          color #fff
          opacity 1
  &.disabled
    opacity .75 !important
  &--dark
    .q-toggle__inner
      color #fff
      &--active
        color $primary
        color var(--q-color-primary)
    .q-toggle__thumb:before
      opacity .32 !important
  &--dense
    .q-toggle__inner
      height 20px
      padding 3px 12px
    .q-toggle__thumb-container
      top 0
body.desktop
  .q-toggle
    &__thumb:before
      content ''
      z-index -1
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $option-focus-transition
    &:focus:not(.disabled) .q-toggle__thumb:before
      transform scale3d(2, 2, 2)
    &--dense:focus:not(.disabled) .q-toggle__thumb:before
      transform scale3d(1.5, 1.5, 1.5)
.q-toolbar
  position relative
  padding $toolbar-padding
  min-height $toolbar-min-height
  width 100%
  &--inset
    padding-left $toolbar-inset-size
  .q-avatar
    font-size 38px
.q-toolbar__title
  flex 1 1 0%
  min-width 1px
  max-width 100%
  font-size $toolbar-title-font-size
  font-weight $toolbar-title-font-weight
  letter-spacing $toolbar-title-letter-spacing
  padding $toolbar-title-padding
  &:first-child
    padding-left 0
  &:last-child
    padding-right 0
.q-tooltip
  position fixed !important
  font-size $tooltip-fontsize
  color $tooltip-color
  background $tooltip-background
  z-index $z-tooltip
  padding $tooltip-padding
  border-radius $tooltip-border-radius
  overflow-y auto
  overflow-x hidden
  pointer-events none
  @media (max-width $breakpoint-xs-max)
    font-size $tooltip-mobile-fontsize
    padding $tooltip-mobile-padding
.q-tree
  position relative
  color $grey
  &__node
    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
  &__node-header:before
    content ''
    position absolute
    top -3px
    bottom 50%
    width 35px
    left -35px
    border-left 1px solid currentColor
    border-bottom 1px solid currentColor
  &__children
    padding-left 25px
    &.disabled
      pointer-events none
  &__node-body
    padding 5px 0 8px 5px
  &__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
  &__node--link
    cursor pointer
  &__node-header
    padding 4px
    margin-top 3px
    border-radius $generic-border-radius
    outline none
    &.disabled
      pointer-events none
  &__node-header-content
    color black
    transition color .3s
  &__node--selected .q-tree__node-header-content
    color $grey
  &__icon, &__node-header-content .q-icon, &__spinner
    font-size 21px
  &__img
    height 42px
  &__avatar, &__node-header-content .q-avatar
    font-size 28px
    border-radius 50%
    width 28px
    height 28px
  &__arrow, &__spinner
    font-size 16px
  &__arrow
    transition transform .3s
    &--rotate
      transform rotate3d(0, 0, 1, 90deg)
  
  > .q-tree__node
    padding 0
    &:after, > .q-tree__node-header:before
      display none
  
  > .q-tree__node--child > .q-tree__node-header
    padding-left 24px
  &--dark .q-tree__node-header-content
    color white
[dir=rtl]
  .q-tree__arrow
    transform rotate3d(0, 0, 1, 180deg) /* rtl:ignore */
    &--rotate
      transform rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
.q-uploader
  box-shadow $shadow-2
  border-radius $generic-border-radius
  vertical-align top
  background white
  position relative
  width 320px
  max-height 320px
  &--bordered
    border 1px solid $separator-color
  &__input
    opacity 0
    width 100%
    height 100%
    cursor pointer !important
    
    &::-webkit-file-upload-button
      cursor pointer
  &__header, &__file
    &:before
      content ''
      border-top-left-radius inherit
      border-top-right-radius inherit
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      pointer-events none
      background currentColor
      opacity .04
  &__header
    position relative
    border-top-left-radius inherit
    border-top-right-radius inherit
    background-color $primary
    background-color var(--q-color-primary)
    color white
    width 100%
  &__spinner
    font-size 24px
    margin-right 4px
  &__header-content
    padding 8px
  &__dnd
    outline 1px dashed currentColor
    outline-offset -4px
    background rgba(255, 255, 255, .6)
  &__overlay
    font-size 36px
    color black
    background-color rgba(255, 255, 255, .6)
  &__list
    position relative
    border-bottom-left-radius inherit
    border-bottom-right-radius inherit
    padding 8px
    min-height 60px
    flex 1 1 auto
    background white
  &__file
    border-radius $generic-border-radius $generic-border-radius 0 0
    border 1px solid $separator-color
    .q-circular-progress
      color black
      font-size 24px
    &--img
      color white
      height 200px
      min-width 200px
      background-position 50% 50%
      background-size cover
      background-repeat no-repeat
      &:before
        content none
      .q-circular-progress
        color white
      .q-uploader__file-header
        padding-bottom 24px
        background linear-gradient(to bottom, rgba(0,0,0,.7) 20%, transparent)
    & + &
      margin-top 8px
  &__file-header
    position relative
    padding 4px 8px
    border-top-left-radius inherit
    border-top-right-radius inherit
  &__file-header-content
    padding-right 8px
  &__file-status
    font-size 24px
    margin-right 4px
  &__title
    font-size 14px
    font-weight bold
    line-height 18px
    word-break break-word
  &__subtitle
    font-size 12px
    line-height 18px
  &--disable
    .q-uploader__header, .q-uploader__list
      pointer-events none
  &--dark
    color white
    border-color $separator-dark-color
    .q-uploader__list
      background $grey-9
    .q-uploader__file
      border-color $separator-dark-color
    .q-uploader__dnd, .q-uploader__overlay
      background rgba(255, 255, 255, .3)
    .q-uploader__overlay
      color white
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%
.q-virtual-scroll
  &:focus
    outline none
  &__padding
    background linear-gradient(
      transparent,
      transparent 20%,
      rgba(128, 128, 128, .03) 20%,
      rgba(128, 128, 128, .08) 50%,
      rgba(128, 128, 128, .03) 80%,
      transparent 80%,
      transparent
    )
    background-size 100% 50px
    
    .q-table &
      tr
        height 0 !important
      td
        padding 0 !important
  &--horizontal
    display flex
    flex-direction row
    flex-wrap nowrap
    align-items stretch
    .q-virtual-scroll
      &__content
        display flex
        flex-direction row
        flex-wrap nowrap
      &__padding,
      &__content,
      &__content > *
        flex 0 0 auto
      &__padding
        background linear-gradient(
          to left,
          transparent,
          transparent 20%,
          rgba(128, 128, 128, .03) 20%,
          rgba(128, 128, 128, .08) 50%,
          rgba(128, 128, 128, .03) 80%,
          transparent 80%,
          transparent
        )
        background-size 50px 100%
.q-ripple
  position absolute
  top 0
  left 0 /* rtl:ignore */
  width 100%
  height 100%
  color inherit
  border-radius inherit
  z-index 0
  pointer-events none
  overflow hidden
  contain strict
  &__inner
    position absolute
    top 0
    left 0 /* rtl:ignore */
    opacity 0
    color inherit
    border-radius 50%
    background currentColor
    pointer-events none
    will-change transform, opacity
    &--enter
      transition transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
    &--leave
      transition opacity .25s cubic-bezier(.4, 0, .2, 1)
.q-body--loading
  overflow hidden
.q-loading
  color black
  
  position fixed !important
  &:before
    content ''
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    background currentColor
    opacity .5
    z-index -1
  > div
    margin 40px 20px 0
    max-width 450px
    text-align center
.q-notifications__list
  z-index $z-notify
  pointer-events none
  left 0
  right 0
  margin-bottom 10px
  position relative
  &--center
    top 0
    bottom 0
  &--top
    top 0
  &--bottom
    bottom 0
body.q-ios-padding .q-notifications__list
  &--center, &--top
    top $ios-statusbar-height
    top env(safe-area-inset-top)
  &--center, &--bottom
    bottom env(safe-area-inset-bottom)
.q-notification
  box-shadow $shadow-2
  border-radius $generic-border-radius
  pointer-events all
  display inline-flex
  margin 10px 10px 0
  transition transform 1s, opacity 1s
  z-index $z-notify
  min-width 300px
  max-width 95vw
  background #323232
  color white
  font-size 14px
  &__icon
    font-size 24px
    padding-right 16px
  &__avatar
    font-size 32px
    padding-right 8px
  &__message
    padding 8px 0
  &__actions
    color #c581ff
  &--standard
    padding 0 16px
    min-height 48px
    .q-notification__actions
      padding 6px 0 6px 8px
      margin-right -8px
  &--multi-line
    min-height 68px
    padding 8px 16px
    .q-notification__actions
      padding 0
  &--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
@media (min-width $breakpoint-sm-min)
  .q-notification
    max-width 65vw
.animated
  animation-duration .3s
  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 .3s
.q-animate--scale
  animation q-scale .15s
  animation-timing-function cubic-bezier(.25, .8, .25, 1)
@keyframes q-scale
  0%
    transform scale(1)
  50%
    transform scale(1.04)
  100%
    transform scale(1)
.q-animate--fade
  animation q-fade .2s /* rtl:ignore */
@keyframes q-fade
  0%
    opacity 0
  100%
    opacity 1
:root
  --q-color-primary      $primary
  --q-color-secondary    $secondary
  --q-color-accent       $accent
  --q-color-positive     $positive
  --q-color-negative     $negative
  --q-color-info         $info
  --q-color-warning      $warning
.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-accent
  color $accent !important
  color var(--q-color-accent) !important
.bg-accent
  background $accent !important
  background var(--q-color-accent) !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-transparent
  color transparent !important
.bg-transparent
  background transparent !important
.text-separator
  color $separator-color !important
.bg-separator
  background $separator-color !important
.text-dark-separator
  color $separator-dark-color !important
.bg-dark-separator
  background $separator-dark-color !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
str-fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))
str-fe(selector, name, noProc, i = '')
  if noProc
    return str-fr(selector, name, i)
  return unquote(join(',', str-fr(selector, '', i) str-fr(selector, name, i)))
fg($name, $size)
  $noProcNotZero = ($size > 0)
  @media (min-width $size)
    {str-fe('.col<name>', $name, $noProcNotZero)}
      &, &-auto, &-grow, &-shrink
        .row > &, .flex > &
          width auto
          min-width 0
          max-width 100%
        .column > &, .flex > &
          height auto
          min-height 0
          max-height 100%
      &
        flex 10000 1 0%
      &-auto
        flex 0 0 auto
      &-grow
        flex 1 0 auto
      &-shrink
        flex 0 1 auto
    for $i in (0..$flex-cols)
      $ic = s('%s', $i)
      {str-fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
        @extends .col{$name}-auto
      .row
        {str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height auto
          width (round($i / $flex-cols * 100, 4))%
        if $i != 0 || $name != ''
          {str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
            margin-left (round($i / $flex-cols * 100, 4))%
      .column
        {str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height (round($i / $flex-cols * 100, 4))%
          width auto
      if $size == 0
        if $i == $flex-cols
          .row > .col-all
            height auto
            flex 0 0 100%
.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
  &evenly
    justify-content space-evenly
.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
  @extends .items-center
  @extends .justify-center
for $name, $size in $flex-gutter
  .q-gutter
    &-x-{$name}
      margin-left (- $size)
      > *
        margin-left $size
    &-y-{$name}
      margin-top (- $size)
      > *
        margin-top $size
    &-{$name}
      @extends .q-gutter-x-{$name}, .q-gutter-y-{$name}
  .q-col-gutter
    &-x-{$name}
      margin-left (- $size)
      > *
        padding-left ($size)
    &-y-{$name}
      margin-top (- $size)
      > *
        padding-top $size
    &-{$name}
      @extends .q-col-gutter-x-{$name}, .q-col-gutter-y-{$name}
for $name, $size in $sizes
  fg(s('-%s', unquote($name)), $size)
.rounded-borders
  border-radius $generic-border-radius
.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 .7
  &::-moz-placeholder
    color inherit
    opacity .7
  &:-ms-input-placeholder
    color inherit !important
    opacity .7 !important
  &::-ms-input-placeholder
    color inherit
    opacity .7
  &::placeholder
    color inherit
    opacity .7
.q-body--fullscreen-mixin, .q-body--prevent-scroll
  position fixed !important
.q-body--force-scrollbar
  overflow-y scroll
.q-no-input-spinner
  -moz-appearance textfield !important
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button
    -webkit-appearance none
    margin 0
.q-link
  outline 0
  text-decoration none
body.electron
  .q-electron-drag
    -webkit-user-select none
    -webkit-app-region drag
  .q-electron-drag .q-btn, .q-electron-drag--exception
    -webkit-app-region no-drag
.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
  &-not-allowed
    cursor not-allowed !important
  &-inherit
    cursor inherit !important
  &-none
    cursor none !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 scaleX(-1)
.flip-vertical
  transform scaleY(-1)
.float-left
  float left
.float-right
  float right
.relative-position
  position relative
.fixed,
.fixed-full,
.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, .fixed-full
  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
: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-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
$transition-easing = cubic-bezier(0.215, 0.61, 0.355, 1) 
.q-transition
  &--slide-right,
  &--slide-left,
  &--slide-up,
  &--slide-down,
  &--jump-right,
  &--jump-left,
  &--jump-up,
  &--jump-down,
  &--fade,
  &--scale,
  &--rotate,
  &--flip
    &-leave-active
      position absolute
  &--slide-right,
  &--slide-left,
  &--slide-up,
  &--slide-down
    &-enter-active, &-leave-active
      transition transform .3s $transition-easing
  &--slide-right
    &-enter
      transform translate3d(-100%, 0, 0)
    &-leave-to
      transform translate3d(100%, 0, 0)
  &--slide-left
    &-enter
      transform translate3d(100%, 0, 0)
    &-leave-to
      transform translate3d(-100%, 0, 0)
  &--slide-up
    &-enter
      transform translate3d(0, 100%, 0)
    &-leave-to
      transform translate3d(0, -100%, 0)
  &--slide-down
    &-enter
      transform translate3d(0, -100%, 0)
    &-leave-to
      transform translate3d(0, 100%, 0)
  &--jump-right,
  &--jump-left,
  &--jump-up,
  &--jump-down
    &-enter-active, &-leave-active
      transition opacity .3s, transform .3s
    &-enter, &-leave-to
      opacity 0
  &--jump-right
    &-enter
      transform translate3d(-15px, 0, 0)
    &-leave-to
      transform translate3d(15px, 0, 0)
  &--jump-left
    &-enter
      transform translate3d(15px, 0, 0)
    &-leave-to
      transform translateX(-15px)
  &--jump-up
    &-enter
      transform translate3d(0, 15px, 0)
    &-leave-to
      transform translate3d(0, -15px, 0)
  &--jump-down
    &-enter
      transform translate3d(0, -15px, 0)
    &-leave-to
      transform translate3d(0, 15px, 0)
  &--fade
    &-enter-active, &-leave-active
      transition opacity .3s ease-out
    &-enter, &-leave, &-leave-to
      opacity 0
  &--scale
    &-enter-active, &-leave-active
      transition opacity .3s, transform .3s $transition-easing
    &-enter, &-leave, &-leave-to
      opacity 0
      transform scale3d(0, 0, 1)
  &--rotate
    &-enter-active, &-leave-active
      transition opacity .3s, transform .3s $transition-easing
      transform-style preserve-3d
    &-enter, &-leave, &-leave-to
      opacity 0
      transform scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg)
  &--flip-right,
  &--flip-left,
  &--flip-up,
  &--flip-down
    &-enter-active, &-leave-active
      transition transform .3s
      backface-visibility hidden
    &-enter-to, &-leave
      transform perspective(400px) rotate3d(1, 1, 0, 0deg)
  &--flip-right
    &-enter
      transform perspective(400px) rotate3d(0, 1, 0, -180deg)
    &-leave-to
      transform perspective(400px) rotate3d(0, 1, 0, 180deg)
  &--flip-left
    &-enter
      transform perspective(400px) rotate3d(0, 1, 0, 180deg)
    &-leave-to
      transform perspective(400px) rotate3d(0, 1, 0, -180deg)
  &--flip-up
    &-enter
      transform perspective(400px) rotate3d(1, 0, 0, -180deg)
    &-leave-to
      transform perspective(400px) rotate3d(1, 0, 0, 180deg)
  &--flip-down
    &-enter
      transform perspective(400px) rotate3d(1, 0, 0, 180deg)
    &-leave-to
      transform perspective(400px) rotate3d(1, 0, 0, -180deg)
body
  min-width 100px
  min-height 100%
  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
  line-height $body-line-height
  font-size $body-font-size
for $heading, $value in $h-tags
  {$heading}
    font-size: $value.size
    font-weight: $value.weight
    line-height: $value.line-height
    letter-spacing: $value.letter-spacing
p
  margin: 0 0 $spaces.md.y
.text-
  for $heading, $value in $headings
    &{$heading}
      font-size: $value.size
      font-weight: $value.weight
      line-height: $value.line-height
      letter-spacing: $value.letter-spacing
  &uppercase
    text-transform uppercase
  &lowercase
    text-transform lowercase
  &capitalize
    text-transform capitalize
  &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
  &strike
    text-decoration line-through
  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
.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]
  &, * 
    outline 0 !important
    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 native-mobile cordova capacitor electron 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
  outline 0
body.desktop
  .q-focus-helper
    position absolute
    top 0
    left 0 /* rtl:ignore */
    width 100%
    height 100%
    pointer-events none
    border-radius inherit
    opacity 0
    transition background-color .3s cubic-bezier(.25, .8, .5, 1), opacity .4s cubic-bezier(.25, .8, .5, 1)
    &:before, &:after
      content ''
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      opacity 0
      border-radius inherit
      transition background-color .3s cubic-bezier(.25, .8, .5, 1), opacity .6s cubic-bezier(.25, .8, .5, 1)
    &:before
      background black
    &:after
      background white
    &--rounded
      border-radius $generic-border-radius
    &--round
      border-radius 50%
  .q-focusable, .q-manual-focusable, .q-hoverable
    outline 0
  .q-focusable:focus, .q-manual-focusable--focused, .q-hoverable:hover
    > .q-focus-helper
      background currentColor
      opacity .15
      &:before
        opacity .1
      &:after
        opacity .4
  .q-focusable:focus, .q-manual-focusable--focused
    > .q-focus-helper
      opacity .22
str-fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))
str-fe(selector, name, noProc, i = '')
  if noProc
    return str-fr(selector, name, i)
  return unquote(join(',', str-fr(selector, '', i) str-fr(selector, name, i)))
ie_style = @block
  
  .row, .flex
    &:after
      content ''
      display block
      font-size 0
      min-height inherit
  .q-notification,
  .q-banner,
  .q-field__native, .q-field__control
    &:after
      min-height 0 !important
  .q-item
    &:after
      min-height 32px !important
  .q-list--dense > .q-item, .q-item--dense
    &:after
      min-height 24px !important
  
  .q-btn__content
  .q-time__content
  .q-toolbar__title
  .q-menu .q-item__section--main
    flex-basis auto
  .q-banner__content,
  .q-notification__message
    flex-basis 0 !important
  .q-menu,
  .q-dialog__inner
    > .q-banner > .q-banner__content
      flex-basis auto !important
  .q-tab__content
    flex-basis auto
    min-width 100%
  .column
    min-width 0%
  for $name, $size in $sizes
    $noProcNotZero = $size > 0
    @media (min-width $size)
      {str-fe('.col<name>', s('-%s', unquote($name)), $noProcNotZero)}
        .row > &, .flex > &
          flex-basis auto
          min-width 0%
  
  .q-item
    &__section
      &--avatar
        
        min-width 56px
  
  .q-btn
    &:not(.disabled):active,
    &:not(.disabled):focus,
    &.q-btn--active
      .q-btn__content
        position relative
        top 0
        left 0
  
  .q-carousel__slide > *
    max-width 100%
  
  .q-tabs--vertical
    .q-tab__indicator
      height auto
  
  .q-fab--opened .q-fab__actions
    &--left
    &--right
      display block
      white-space nowrap
  
  .q-spinner
    animation q-ie-spinner 2s linear infinite /* rtl:ignore */
    transform-origin center center /* rtl:ignore */
    opacity .5
    &.q-spinner-mat .path
      stroke-dasharray 89, 200
  
  .q-toggle__thumb
    .q-icon
      margin-left -6px
  
  .q-date__view.q-date__months.column
    > .q-date__months-content
      width 100%
  .q-date--landscape .q-date__content
    width 100%
    > .q-date__view
      width 0
      min-width 100%
  
  .q-field
    &__prefix, &__suffix
      flex 1 0 auto
    ::-ms-clear
      display none
    &__bottom--stale
      .q-field__messages
        left 12px
    &--borderless, &--standard
      .q-field__bottom--stale
        .q-field__messages
          left 0
    &--float .q-field__label
      max-width 100%
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  {ie_style}
@supports (-ms-ime-align:auto)
  {ie_style}
@keyframes q-ie-spinner
  0%
    opacity .5
  50%
    opacity 1
  100%
    opacity .5