/*!
 * Quasar Framework v1.9.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   ?= #1976D2
$secondary ?= #26A69A
$accent    ?= #9C27B0
$dark-page ?= #121212
$dark      ?= #1d1d1d
$positive  ?= #21BA45
$negative  ?= #C10015
$info      ?= #31CCEC
$warning   ?= #F2C037
$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, .28)
$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.715em
$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-border-dark-color       ?= $separator-dark-color
$editor-content-padding         ?= 10px
$editor-content-min-height      ?= 10em
$editor-toolbar-padding         ?= 4px
$editor-hr-color                ?= $editor-border-color
$editor-hr-dark-color           ?= $editor-border-dark-color
$editor-button-gutter           ?= 4px
$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
abbr[title]
  border-bottom: none 
  text-decoration: underline 
  text-decoration: underline dotted 
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,
optgroup,
select,
textarea
  font: inherit
  font-family: inherit
  margin: 0
optgroup
  font-weight: bold
button,
input, 
select 
  overflow: visible
  text-transform: none
button::-moz-focus-inner, input::-moz-focus-inner
  border: 0
  padding: 0
button:-moz-focusring, input:-moz-focusring
  outline: 1px dotted ButtonText
fieldset
  padding: 0.35em 0.75em 0.625em
legend
  box-sizing: border-box 
  color: inherit 
  display: table 
  max-width: 100% 
  padding: 0 
  white-space: normal 
progress
  vertical-align: baseline
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
  fill: currentColor 
  &:before, &:after
    width: 100%
    height: 100%
    display: flex !important
    align-items: center
    justify-content: center
  > svg
    width: 100%
    height: 100%
.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: #fff
  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: .8
  &--outline
    background-color: transparent
    border: 1px solid currentColor
.q-banner
  min-height: 54px
  padding: 8px 16px
  background: #fff
  &--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
  display: inline-flex
  flex-direction: column
  align-items: stretch
  position: relative
  outline: 0
  border: 0
  vertical-align: middle
  padding: 0
  font-size: $button-font-size
  line-height: $button-line-height
  text-decoration: none
  color: inherit
  background: transparent
  font-weight: $button-font-weight
  text-transform: uppercase
  text-align: center
  width: auto
  height: auto
  .q-icon, .q-spinner
    font-size: $button-line-height
  &.disabled
    opacity: .7 !important
  &__wrapper
    padding: $button-padding
    min-height: 2.572em
    border-radius: inherit
    width: 100%
    height: 100%
    &:before
      content: ''
      display: block
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      border-radius: inherit
      box-shadow: $button-shadow
  &--actionable
    cursor: pointer
    &.q-btn--standard
      .q-btn__wrapper:before
        
        
        
        
        transition: box-shadow $button-transition
      &:active,
      &.q-btn--active
        .q-btn__wrapper:before
          box-shadow: $button-shadow-active
  &--no-uppercase
    text-transform: none
  &--rectangle
    border-radius: $button-border-radius
  &--outline
    background: transparent !important
    .q-btn__wrapper:before
      border: 1px solid currentColor
  &--push
    border-radius: $button-push-border-radius
    .q-btn__wrapper:before
      border-bottom: 3px solid rgba(0,0,0,.15)
    &.q-btn--actionable
      transition: transform $button-transition
      .q-btn__wrapper:before
        transition: top $button-transition, bottom $button-transition, border-bottom-width $button-transition
      &:active,
      &.q-btn--active
        transform: translateY(2px)
        .q-btn__wrapper:before
          border-bottom-width: 0
  &--rounded
    border-radius: $button-rounded-border-radius
  &--round
    border-radius: 50%
    .q-btn__wrapper
      padding: 0
      min-width: 3em
      min-height: 3em
  &--flat, &--outline, &--unelevated
    .q-btn__wrapper:before
      box-shadow: none
  &--dense
    .q-btn__wrapper
      padding: $button-dense-padding
      min-height: 2em
    &.q-btn--round
      .q-btn__wrapper
        padding: 0
        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
  &--fab
    .q-icon
      margin: auto
    .q-btn__wrapper
      padding: 16px
      min-height: 56px
      min-width: 56px
  &--fab-mini .q-btn__wrapper
    padding: 8px
    min-height: 40px
    min-width: 40px
  
  &__content
    transition: opacity .3s
    z-index: 0
    &--hidden
      opacity: 0
      pointer-events: none
  &__progress
    border-radius: inherit
    z-index: 0
    &-indicator
      z-index: -1
      transform: translateX(-100%)
      background: rgba(255,255,255,.25)
    &--dark
      .q-btn__progress-indicator
        background: rgba(0,0,0,.2)
.q-btn-dropdown--split .q-btn-dropdown__arrow-container
  border-left: 1px solid rgba(255,255,255,.3)
  .q-btn__wrapper
    padding: 0 4px
.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
    border-radius: inherit
    align-self: stretch
    .q-btn__wrapper:before
      box-shadow: none
    .q-badge--floating
      right: 0
  > .q-btn-group
    box-shadow: none
    &:first-child
      > .q-btn:first-child
        border-top-left-radius: inherit
        border-bottom-left-radius: inherit
    &:last-child
      > .q-btn:last-child
        border-top-right-radius: inherit
        border-bottom-right-radius: inherit
  > .q-btn-group:not(:first-child) > .q-btn:first-child
    .q-btn__wrapper:before
      border-left: 0
  > .q-btn-group:not(:last-child) > .q-btn:last-child
    .q-btn__wrapper:before
      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
  > .q-btn-item.q-btn--standard
    .q-btn__wrapper:before
      z-index: -1
  &--push
    > .q-btn--push
      &.q-btn--actionable
        transform: none
        .q-btn__wrapper
          transition: margin-top $button-transition, margin-bottom $button-transition, box-shadow $button-transition
        &:active,
        &.q-btn--active
          .q-btn__wrapper
            margin-top: 2px
            margin-bottom: -2px
  &--rounded
    border-radius: $button-rounded-border-radius
  &--flat, &--outline, &--unelevated
    box-shadow: none
  &--outline
    > .q-separator
      display: none
    > .q-btn-item + .q-btn-item
      .q-btn__wrapper:before
        border-left: 0
    > .q-btn-item:not(:last-child)
      .q-btn__wrapper:before
        border-right: 0
  &--stretch
    align-self: stretch
    border-radius: 0
  &--glossy
    > .q-btn-item
      background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .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: #fff
  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
    border-color: $separator-dark-color
  &__section
    position: relative
    &--vert
      padding: 16px
    &--horiz
      > div,
      > img
        &:first-child
          border-top-left-radius: inherit
          border-bottom-left-radius: inherit
        &:last-child
          border-top-right-radius: inherit
          border-bottom-right-radius: inherit
        &:not(:first-child)
          border-top-left-radius: 0
          border-bottom-left-radius: 0
        &:not(:last-child)
          border-top-right-radius: 0
          border-bottom-right-radius: 0
      > div
        border-top: 0
        border-bottom: 0
        box-shadow: none
  &__actions
    padding: 8px
    align-items: center
    .q-btn__wrapper
      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--round
        align-self: center
      > .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
  > img
    display: block
    width: 100%
    max-width: 100%
    border: 0
.q-carousel
  background-color: #fff 
  height: 400px
  &__slide
    min-height: 100%
    background-size: cover
    background-position: 50%
  &__slide, .q-carousel--padding
    padding: 16px
  &__slides-container
    height: 100%
  &__control
    color: #fff
  &__arrow
    pointer-events: none
    .q-icon
      font-size: 28px
    .q-btn
      pointer-events: all
  &__prev-arrow--horizontal,
  &__next-arrow--horizontal
    top: 16px
    bottom: 16px
  &__prev-arrow--horizontal
    left: 16px
  &__next-arrow--horizontal
    right: 16px
  &__prev-arrow--vertical,
  &__next-arrow--vertical
    left: 16px
    right: 16px
  &__prev-arrow--vertical
    top: 16px
  &__next-arrow--vertical
    bottom: 16px
  &__navigation
    &--top,
    &--bottom
      left: 16px
      right: 16px
      overflow-x: auto
      overflow-y: hidden
    &--top
      top: 16px
    &--bottom
      bottom: 16px
    &--left,
    &--right
      top: 16px
      bottom: 16px
      overflow-x: hidden
      overflow-y: auto
      > .q-carousel__navigation-inner
        flex-direction: column
    &--left
      left: 16px
    &--right
      right: 16px
    &-inner
      flex: 1 1 auto
    .q-btn
      margin: 6px 4px
      .q-btn__wrapper
        padding: 5px
  &__navigation-icon--inactive
    opacity: .7
  .q-carousel__thumbnail
    margin: 2px
    height: 50px
    width: auto
    display: inline-block
    cursor: pointer
    border: 1px solid transparent
    border-radius: $generic-border-radius
    vertical-align: middle
    opacity: .7
    transition: opacity .3s
  .q-carousel__thumbnail:hover,
  .q-carousel__thumbnail--active
    opacity: 1
  .q-carousel__thumbnail--active
    border-color: currentColor
    cursor: default
  &--navigation-top,
  &--arrows-vertical
    &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding
      padding-top: 60px
  &--navigation-bottom,
  &--arrows-vertical
    &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding
      padding-bottom: 60px
  &--navigation-left,
  &--arrows-horizontal
    &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding
      padding-left: 60px
  &--navigation-right,
  &--arrows-horizontal
    &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding
      padding-right: 60px
  &.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-avatar--received
  margin-right: 8px
.q-message-text--received
  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--received
  color: $chat-message-received-color
.q-message-name--sent
  text-align: right
.q-message-avatar--sent
  margin-left: 8px
.q-message-container--sent
  flex-direction: row-reverse
.q-message-text--sent
  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--sent
  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
    top: 25%
    left: 25%
    width: 50%
    height: 50%
    border: 2px solid currentColor
    border-radius: 2px
    transition: background $checkbox-transition
  &__native
    width: 1px
    height: 1px
  &__svg
    color: #fff
  &__truthy
    stroke: currentColor
    stroke-width: 3.12px
    stroke-dashoffset: 29.78334
    stroke-dasharray: 29.78334
  &__indet
    fill: currentColor
    transform-origin: 50% 50%
    transform: rotate(-280deg) scale(0)
  &__inner
    font-size: 40px
    width: 1em
    min-width: 1em
    height: 1em
    outline: 0
    border-radius: 50%
    color: rgba(0,0,0,.54)
    &--truthy, &--indet
      color: $primary
      color: var(--q-color-primary)
      .q-checkbox__bg
        background: currentColor
    &--truthy
      path
        stroke-dashoffset: 0
        transition: stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms
    &--indet
      .q-checkbox__indet
        transform: rotate(0) scale(1)
        transition: transform $checkbox-transition
  &.disabled
    opacity: .75 !important
  &--dark
    .q-checkbox__inner
      color: rgba(255,255,255,.7)
      &:before
        opacity: .32 !important
      &--truthy, &--indet
        color: $primary
        color: var(--q-color-primary)
  &--dense
    .q-checkbox__inner
      width: .5em
      min-width: .5em
      height: .5em
    .q-checkbox__bg
      left: 5%
      top: 5%
      width: 90%
      height: 90%
    .q-checkbox__label
      padding-left: .5em
    &.reverse .q-checkbox__label
      padding-left: 0
      padding-right: .5em
body.desktop
  .q-checkbox:not(.disabled)
    .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, 1)
      transition: transform $option-focus-transition
    &:focus,
    &:hover
      .q-checkbox__inner:before
        transform: scale3d(1, 1, 1)
  .q-checkbox--dense:not(.disabled)
    &:focus,
    &:hover
      .q-checkbox__inner:before
        transform: scale3d(1.4, 1.4, 1)
$chip-height = 2em
.q-chip
  vertical-align: middle
  border-radius: 16px
  outline: 0
  position: relative
  height: $chip-height
  max-width: 100%
  margin: 4px
  background: #e0e0e0
  color: rgba(0,0,0,.87)
  font-size: 14px
  padding: .5em .9em
  &--colored, &--dark
    .q-chip__icon
      color: inherit
  &--outline
    background: transparent !important
    border: 1px solid currentColor
  .q-avatar
    font-size: $chip-height
    margin-left: -.45em
    margin-right: .2em
    border-radius: 16px
  &--selected
    .q-avatar
      display: none
  &__icon
    color: rgba(0,0,0,.54)
    font-size: 1.5em
    margin: -.2em
    &--left
      margin-right: .2em
    &--right
      margin-left: .2em
    &--remove
      margin-left: .1em
      margin-right: -.5em
      opacity: .6
      outline: 0
      &:hover,
      &:focus
        opacity: 1
  &__content
    white-space: nowrap
  &--dense
    border-radius: 12px
    padding: 0 .4em
    height: 1.5em
    .q-avatar
      font-size: 1.5em
      margin-left: -.27em
      margin-right: .1em
      border-radius: 12px
    .q-chip__icon
      font-size: 1.25em
      &--left
        margin-right: .195em
      &--remove
        margin-right: -.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: #fff
  max-width: 350px
  vertical-align: top
  min-width: 180px
  border-radius: $generic-border-radius
  box-shadow: $shadow-2
  .q-tab
    padding: 0 !important
  &--bordered
    border: 1px solid $separator-color
  &__header
    height: 68px
    input
      line-height: 24px
      border: 0
    .q-tab
      min-height: 32px !important
      height: 32px !important
      &--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: #fff
    &--light
      color: #000
    &--dark
      color: #fff
      .q-tab--inactive
        &:before
          content: ''
          position: absolute
          top: 0
          right: 0
          bottom: 0
          left: 0
          background: rgba(255,255,255,.2)
  &__header-banner
    height: 36px
  &__header-bg
    background: #fff
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
  &__footer
    height: 36px
    .q-tab
      min-height: 36px !important
      height: 36px !important
      &--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: 0 !important
  &__spectrum-white
    background: linear-gradient(to right, #fff, rgba(255,255,255,0))
  &__spectrum-black
    background: linear-gradient(to top, #000, rgba(0,0,0,0))
  &__spectrum-circle
    width: 10px
    height: 10px
    box-shadow: 0 0 0 1.5px #fff, 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%) !important 
    opacity: 1
  &__alpha .q-slider__track-container
    color: #fff
    opacity: 1
    height: 8px
    background-color: #fff !important
    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 16px 16px
    .q-slider__track-container
      height: 10px
      margin-top: -5px
    .q-slider__track
      display: none
    .q-slider__thumb
      path
        stroke-width: 2px
        fill: transparent
    .q-slider--active path
      stroke-width: 3px
    .q-slider
      height: 16px
      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: 3.5em
  
  &__palette-tab
    padding: 0 !important
  &__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: 0 0 14px 3px rgba(0,0,0,.2)
    .q-focus-helper
      display: none
  .q-tab__indicator
    display: none
  .q-tab-panels
    background: inherit
  &--dark
    .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: #fff
  width: 290px
  min-width: 290px
  max-width: 100%
  &--bordered
    border: 1px solid $separator-color
  &__header
    border-top-left-radius: inherit
    color: #fff
    background-color: $primary
    background-color: var(--q-color-primary)
    padding: 16px
  &__actions
    padding: 0 16px 16px
  &__content, &__main
    outline: 0
  &__content .q-btn
    font-weight: normal
  &__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: .00938em
  &__header-title-label
    font-size: 24px
    line-height: 1.2
    letter-spacing: .00735em
  &__view
    height: 100%
    width: 100%
    min-height: 290px
    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%
    min-height: 192px
  &__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 33.3333%
  &.disabled, &--readonly
    .q-date__header, .q-date__content
      pointer-events: none
  &--readonly .q-date__navigation
    display: none
  &--portrait
    flex-direction: column
  &--portrait-standard
    .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
    .q-date__content
      height: 100% 
  &--landscape
    flex-direction: row
    align-items: stretch
    min-width: 420px
    > div
      display: flex
      flex-direction: column
    .q-date__content
      height: 100%
  &--landscape-standard
    min-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
      margin-left: -8px
  &--landscape-minimal
    width: 310px
  &--dark
    border-color: $separator-dark-color
.q-dialog
  &__title
    font-size: 1.25rem
    font-weight: 500
    line-height: 2rem
    letter-spacing: .0125em
  &__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 .q-btn__wrapper
        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
  &__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 33.3333%
@media (min-width: $breakpoint-sm-min)
  .q-bottom-sheet__item
    flex: 0 0 25%
.q-dialog-plugin
  width: 400px
  .q-card__section + .q-card__section
    padding-top: 0
.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
  &--dark
    border-color: $editor-border-dark-color
    .q-editor
      &__content hr
        background: $editor-hr-dark-color
      &__toolbar
        border-color: $editor-border-dark-color
    .q-editor__toolbar-group + .q-editor__toolbar-group:before
      background: $editor-border-dark-color
.q-expansion-item
  &__border
    opacity: 0
  &__toggle-icon
    position: relative
    transition: transform .3s
    &--rotated
      transform: rotate(180deg)
  &__toggle-focus
    width: 1em !important
    height: 1em !important
    position: relative !important
    & + .q-expansion-item__toggle-icon
      margin-top: -1em
  &--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
  &--expanded .q-textarea--autogrow textarea
    animation: q-expansion-done 0s
@keyframes q-expansion-done
  0%
    --q-exp-done: 1 
.z-fab
  z-index: $z-fab
.q-fab
  position: relative
  vertical-align: middle
  > .q-btn
    width: 100%
  &--form-rounded
    border-radius: $button-rounded-border-radius
  &--form-square
    border-radius: $generic-border-radius
  &--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)
  &__label
    &--external
      position: absolute
      padding: 0 8px
      transition: opacity .18s cubic-bezier(.65,.815,.735,.395)
      &-hidden
        opacity: 0
        pointer-events: none
    &--external-left
      top: 50%
      left: -12px
      transform: translate(-100%, -50%)
    &--external-right
      top: 50%
      right: -12px
      transform: translate(100%, -50%)
    &--external-bottom
      bottom: -12px
      left: 50%
      transform: translate(-50%, 100%)
    &--external-top
      top: -12px
      left: 50%
      transform: translate(-50%, -100%)
    &--internal
      padding: 0
      transition: font-size .12s cubic-bezier(.65,.815,.735,.395), max-height .12s cubic-bezier(.65,.815,.735,.395), opacity .07s cubic-bezier(.65,.815,.735,.395)
      max-height: 30px
      &-hidden
        font-size: 0
        opacity: 0
      &-top
        padding-bottom: .12em
      &-bottom
        padding-top: .12em
      &-top, &-bottom
        &.q-fab__label--internal-hidden
          max-height: 0
      &-left
        padding-left: .285em
        padding-right: .571em
      &-right
        padding-right: .285em
        padding-left: .571em
  &__icon-holder
    min-width: 24px
    min-height: 24px
    position: relative
  &__actions
    position: absolute
    opacity: 0
    transition: transform .18s ease-in, opacity .18s ease-in
    pointer-events: none
    align-items: center
    justify-content: center
    align-self: center
    padding: 3px
    .q-btn
      margin: 5px
    &--right
      transform-origin: 0 50%
      transform: scale(.4) translateX(-62px)
      height: 56px
      left: 100%
      margin-left: 9px
    &--left
      transform-origin: 100% 50%
      transform: scale(.4) translateX(62px)
      height: 56px
      right: 100%
      margin-right: 9px
      flex-direction: row-reverse
    &--up
      transform-origin: 50% 100%
      transform: scale(.4) translateY(62px)
      width: 56px
      bottom: 100%
      margin-bottom: 9px
      flex-direction: column-reverse
    &--down
      transform-origin: 50% 0
      transform: scale(.4) translateY(-62px)
      width: 56px
      top: 100%
      margin-top: 9px
      flex-direction: column
    &--up, &--down
      left: 50%
      margin-left: -28px
  &--align-left
    > .q-fab__actions
      &--up, &--down
        align-items: flex-start
        left: 28px
  &--align-right
    > .q-fab__actions
      &--up, &--down
        align-items: flex-end
        left: auto
        right: 0
$field-transition = .36s cubic-bezier(.4,0,.2,1)
$field-transition-label-right-down = .396s cubic-bezier(.4,0,.2,1)
$field-transition-label-right-up = .324s 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, &__input
    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, &__input
    width: 100%
    min-width: 0 
    outline: 0 !important 
  &__native[type="file"]
    line-height: 1em 
  &__input
    padding: 0
    height: 0
    min-height: 24px
    line-height: 24px
  &__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, .q-field__input
        cursor: default
    &.q-field--float
      .q-field__native, .q-field__input
        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-label-right-up
  &--float .q-field__label
    transform: translateY(-40%) scale(.75)
    right: calc(-100% / 3)
    transition: transform $field-transition, right $field-transition-label-right-down
  .q-field__native, .q-field__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: #000
      &: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: #000
      &: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: #fff
    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
      color: #fff
    &: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: #000
      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
        color: #fff
    &.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: #fff
        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
          color: #000
      &.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-field__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-field__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-file
  width: 100%
  .q-field__native
    word-break: break-all
  .q-field__input
    opacity: 0 !important
    &::-webkit-file-upload-button
      cursor: pointer
  &__dnd
    outline: 1px dashed currentColor
    outline-offset: -4px
.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
    border-radius: inherit
    background-repeat: $img-background-repeat
  &__content
    overflow: hidden
    border-radius: inherit
    > div
      position: $img-content-position
      padding: $img-content-padding
      color: $img-content-color
      background: $img-content-background
  &--menu
    .q-img
      &__image
        pointer-events: none
        > img
          pointer-events: all
          opacity: 0
      &__content
        pointer-events: none
        > div
          pointer-events: all
.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-intersection
  position: relative
.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: .875rem
      line-height: 1.25rem
      letter-spacing: .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: #fff
  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-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: #fff
.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: #fff
  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.body--dark
  .q-header, .q-footer, .q-drawer
    border-color: $separator-dark-color
body.platform-ios
  .q-layout--containerized
    
    
    
    position: unset !important
.q-linear-progress
  position: relative
  width: 100%
  overflow: hidden
  font-size: 4px
  height: 1em
  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: .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(.01, 1, 1)
  100%
    transform: translate3d(107%, 0, 0) scale3d(.01, 1, 1)
.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__wrapper
    padding: 0 5px !important
.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: #fff
    box-shadow: 0 0 4px 0 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
    top: 25%
    left: 25%
    width: 50%
    height: 50%
    path
      fill: currentColor
  &__native
    width: 1px
    height: 1px
  &__check
    transform-origin: 50% 50%
    transform: scale3d(0, 0, 1)
    transition: transform $radio-transition
  &__inner
    font-size: 40px
    width: 1em
    min-width: 1em
    height: 1em
    outline: 0
    border-radius: 50%
    color: rgba(0,0,0,.54)
    &--truthy
      color: $primary
      color: var(--q-color-primary)
      .q-radio__check
        transform: scale3d(1, 1, 1)
  &.disabled
    opacity: .75 !important
  &--dark
    .q-radio__inner
      color: rgba(255,255,255,.7)
      &:before
        opacity: .32 !important
      &--truthy
        color: $primary
        color: var(--q-color-primary)
  &--dense
    .q-radio__inner
      width: .5em
      min-width: .5em
      height: .5em
    .q-radio__bg
      left: 0
      top: 0
      width: 100%
      height: 100%
    .q-radio__label
      padding-left: .5em
    &.reverse .q-radio__label
      padding-left: 0
      padding-right: .5em
body.desktop
  .q-radio:not(.disabled)
    .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, 1)
      transition: transform $radio-transition
    &:focus,
    &:hover
      .q-radio__inner:before
        transform: scale3d(1, 1, 1)
  .q-radio--dense:not(.disabled)
    &:focus,
    &:hover
      .q-radio__inner:before
        transform: scale3d(1.5, 1.5, 1)
.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)
    &--active
      opacity: 1
    &--exselected
      opacity: .7
    & + &
      margin-left: 2px
  &--no-dimming .q-rating__icon
    opacity: 1
  &--editable .q-icon
    cursor: pointer
  &--non-editable span, .q-icon
    outline: 0
.q-responsive
  position: relative
  max-width: 100%
  max-height: 100%
  &__filler
    width: inherit
    max-width: inherit
    height: inherit
    max-height: inherit
  &__content
    border-radius: inherit
    > *
      width: 100% !important
      height: 100% !important
      max-height: 100% !important
      max-width: 100% !important
.q-scrollarea
  position: relative
  &__bar,
  &__thumb
    opacity: .2
    transition: opacity .3s
    will-change: opacity
    cursor: grab
    &--v
      right: 0
      width: 10px
    &--h
      bottom: 0
      height: 10px
    &--invisible
      opacity: 0 !important
      pointer-events: none
  &__thumb
    background: #000
    &:hover
      opacity: .3
    &:active
      opacity: .5
  &--dark .q-scrollarea__thumb
    background: #fff
.q-select
  &--without-input
    .q-field__control
      cursor: pointer
  &--with-input
    .q-field__control
      cursor: text
  .q-field__input
    min-width: 50px !important
    &--padding
      padding-left: 4px
  &__autocomplete-input
    width: 0
    height: 0
    padding: 0
    border: 0
    opacity: 0
  &__dropdown-icon
    cursor: pointer
  &.q-field--readonly
    .q-field__control, .q-select__dropdown-icon
      cursor: default
  &__dialog
    width: 90vw !important
    max-width: 90vw !important
    max-height: calc(100vh - 70px) !important
    background: #fff
    display: flex
    flex-direction: column
    > .scroll
      position: relative
      background: inherit
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: 0
  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
    &.q-separator--spaced
      margin-left: 8px
      margin-right: 8px
    &.q-separator--inset
      margin-top: 8px
      margin-bottom: 8px
.q-skeleton
  cursor: wait
  background: $separator-color
  border-radius: $generic-border-radius
  
  box-sizing: border-box
  &:before
    content: '\00a0'
  &--type
    &-text
      transform: scale(1, .5)
    &-circle,
    &-QAvatar
      height: 48px
      width: 48px
      border-radius: 50%
    &-QBtn
      width: 90px
      height: 36px
    &-QBadge
      width: 70px
      height: 16px
    &-QChip
      width: 90px
      height: 28px
      border-radius: 16px
    &-QToolbar
      height: 50px
    &-QCheckbox,
    &-QRadio
      width: 40px
      height: 40px
      border-radius: 50%
    &-QToggle
      width: 56px
      height: 40px
      border-radius: 7px
    &-QSlider,
    &-QRange
      height: 40px
    &-QInput
      height: 56px
  &--bordered
    border: 1px solid rgba(0,0,0,.05)
  &--square
    border-radius: 0
  &--anim-fade
    animation: q-skeleton--fade 1.5s linear .5s infinite
  &--anim-pulse
    animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
  &--anim-pulse-x
    animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
  &--anim-pulse-y
    animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
  &--anim-wave,
  &--anim-blink,
  &--anim-pop
    position: relative
    overflow: hidden
    z-index: 1
    &:after
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      z-index: 0
  &--anim-blink:after
    background: rgba(255,255,255,.7)
    animation: q-skeleton--fade 1.5s linear .5s infinite
  &--anim-wave:after
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent)
    animation: q-skeleton--wave 1.5s linear .5s infinite
  &--dark
    background: rgba(255, 255, 255, 0.05)
    &.q-skeleton--bordered
      border: 1px solid rgba(255,255,255,.25)
    &.q-skeleton--anim-wave:after
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent)
    &.q-skeleton--anim-blink:after
      background: rgba(255,255,255,.2)
@keyframes q-skeleton--fade
  0%
    opacity: 1
  50%
    opacity: .4
  100%
    opacity: 1
@keyframes q-skeleton--pulse
  0%
    transform: scale(1)
  50%
    transform: scale(.85)
  100%
    transform: scale(1)
@keyframes q-skeleton--pulse-x
  0%
    transform: scaleX(1)
  50%
    transform: scaleX(.75)
  100%
    transform: scaleX(1)
@keyframes q-skeleton--pulse-y
  0%
    transform: scaleY(1)
  50%
    transform: scaleY(.75)
  100%
    transform: scaleY(1)
@keyframes q-skeleton--wave
  0%
    transform: translateX(-100%)
  100%
    transform: translateX(100%)
.q-slide-item
  position: relative
  background: white
  &__left, &__right, &__top, &__bottom
    visibility: hidden
    font-size: 14px
    color: #fff
    .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: inherit
    transition: transform .2s ease-in
    user-select: none
    cursor: pointer
.q-slider
  position: relative
  width: 100%
  height: 40px
  color: $primary
  color: var(--q-color-primary)
  outline: 0
  &__track-container
    top: 50%
    margin-top: -1px
    width: 100%
    height: 2px
    background: rgba(0,0,0,.26)
  &__track
    will-change: width, left
    background: currentColor
    top: 0
    bottom: 0
  &__track-markers
    color: #000
    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: 50%
    margin-top: -10px
    width: 20px
    height: 20px
    transform: translateX(-10px) /* rtl:ignore */
    will-change: left
    outline: 0
  &__thumb
    top: 0
    left: 0
    transform: scale(1)
    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    stroke-width: 3.5
    stroke: currentColor
    path
      stroke: currentColor
      fill: currentColor
  &__focus-ring
    width: 20px
    height: 20px
    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
  &__arrow
    position: absolute
    top: 20px
    left: 4px
    width: 0
    height: 0
    border-left: 6px solid transparent
    border-right: 6px solid transparent
    border-top: 6px solid currentColor
    transform-origin: 50% 50%
    transform: scale(0) translateY(0)
    transition: transform 100ms ease-out
  &__pin
    top: 0
    right: 0
    margin-top: -4px
    transform: scale(0) translateY(0)
    transition: transform 100ms ease-out
    will-change: left
    z-index: 1
    white-space: nowrap
    &-text-container
      min-height: 25px
      padding: 2px 8px
      border-radius: $generic-border-radius
      background: currentColor
      position: relative
      right: -50%
      text-align: center
    &-text
      color: #fff
      font-size: 12px
  &--editable
    cursor: grab
  &--no-value
    .q-slider__thumb, .q-slider__track
      visibility: hidden
  &--focus
    .q-slider__thumb
      transform: scale(1)
  &--focus, body.desktop &.q-slider--editable:hover
    .q-slider__focus-ring
      background: currentColor
      transform: scale3d(1.55, 1.55, 1)
      opacity: .25
    .q-slider__thumb, .q-slider__track
      visibility: visible
  &--inactive
    .q-slider__thumb-container
      transition: left .28s, right .28s
    .q-slider__track
      transition: width .28s, left .28s, right .28s
  &--active
    cursor: grabbing
    .q-slider__thumb
      transform: scale(1.5)
    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
      transform: scale(0) !important
  body.desktop &.q-slider--editable:hover
    .q-slider__pin,
    .q-slider__arrow
      transform: scale(1) translateY(-25px)
  &--label
    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
      .q-slider__pin,
      .q-slider__arrow
        transform: scale(1) translateY(-25px)
  &--dark
    .q-slider__track-container
      background: rgba(#fff, .3)
    .q-slider__track-markers
      color: #fff
  &--reversed
    .q-slider__thumb-container
      transform: translateX(10px) /* rtl:ignore */
  &--dense
    height: 20px
.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: #fff
  &__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
    min-width: 24px
    height: 24px
    border-radius: 50%
    background: currentColor
    span
      color: #fff
  &__tab
    padding: 8px 24px
    font-size: 14px
    color: $grey
    flex-direction: row
  &--dark
    .q-stepper__dot span
      color: #000
  &__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
    &.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: #fff
.q-tab-panel
  padding: 16px
.q-markup-table
  overflow: auto
  background: #fff
.q-table
  width: 100%
  max-width: 100%
  border-collapse: separate
  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
    .q-table__middle
      flex: 1 1 auto
  &__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
    > .q-inner-loading
      border-radius: inherit !important
  &__top
    padding: 12px 16px
    .q-table__control
      flex-wrap: wrap
  &__title
    font-size: 20px
    letter-spacing: .005em
    font-weight: 400
  &__separator
    min-width: 8px !important
  &__progress
    height: 0 !important
    th
      padding: 0 !important
      border: 0 !important
    .q-linear-progress
      position: absolute
      bottom: 0
  &__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
    width: 1px
  &--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
    border-radius: $generic-border-radius
    .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
    .q-table__grid-content
      flex: 1 1 auto
    &.fullscreen
      background: inherit
  &__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(.95)
.q-table--horizontal-separator, .q-table--cell-separator
  thead th, tbody tr:not(:last-child) td
    border-bottom-width: 1px
.q-table--vertical-separator, .q-table--cell-separator
  td, th
    border-left-width: 1px
  thead tr:last-child th,
  &.q-table--loading tr:nth-last-child(2) th
    border-bottom-width: 1px
  td:first-child, th:first-child
    border-left: 0
  .q-table__top
    border-bottom: 1px solid $table-border-color
.q-table--dense
  .q-table__top
    padding: 6px 16px
  .q-table__bottom
    min-height: 33px
  .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__select
    .q-field__control, .q-field__native
      min-height: 24px
      padding: 0
    .q-field__marginal
      height: 24px
.q-table__bottom 
  border-top: 1px solid $table-border-color
.q-table 
  thead, tr, th, td
    border-color: $table-border-color
  tbody
    td
      position: relative
      &:before, &:after
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        pointer-events: none
      &:before
        background: $table-hover-background
      &:after
        background: $table-selected-background
    tr.selected td:after
      content: ''
body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no-hover):before
  content: ''
.q-table__card--dark, .q-table--dark
  border-color: $table-dark-border-color
.q-table--dark
  .q-table__bottom, thead, tr, th, td
    border-color: $table-dark-border-color
  tbody
    td
      &:before
        background: $table-dark-hover-background
      &:after
        background: $table-dark-selected-background
  &.q-table--vertical-separator, &.q-table--cell-separator
    .q-table__top
      border-color: $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
  position: relative
  transition: color .3s, background-color .3s
  &--not-scrollable
    .q-tabs__arrow
      display: none
    .q-tabs__content
      border-radius: inherit
  &__arrow
    cursor: pointer
    font-size: 32px
    min-width: 36px
    text-shadow: 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000
    &--faded
      display: none
  &__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
  &--horizontal .q-tabs__arrow
    height: 100%
    &--left
      top: 0
      left: 0
      bottom: 0
    &--right
      top: 0
      right: 0
      bottom: 0
  &--vertical
    display: block !important
    height: 100%
    .q-tabs__content
      display: block !important
      height: 100%
    .q-tabs__arrow
      width: 100%
      height: 36px
      text-align: center
      &--left
        top: 0
        left: 0
        right: 0
      &--right
        left: 0
        right: 0
        bottom: 0
    .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-time
  box-shadow: $shadow-2
  border-radius: $generic-border-radius
  background: #fff
  outline: 0
  width: 290px
  min-width: 290px
  max-width: 100%
  &--bordered
    border: 1px solid $separator-color
  &__header
    border-top-left-radius: inherit
    color: #fff
    background-color: $primary
    background-color: var(--q-color-primary)
    padding: 16px
    font-weight: 300
  &__actions
    padding: 0 16px 16px
  &__header-label
    font-size: 28px
    line-height: 1
    letter-spacing: -.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: .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: 2px
    height: 50%
    transform-origin: 0 0 /* 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: 50%
      border-radius: 50%
      background: currentColor
      transform: translateX(-50%)
    &: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: #fff
  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: #fff
    top: 12px
    right: 12px
  &.disabled, &--readonly
    .q-time__header-ampm, .q-time__content
      pointer-events: none
  &--portrait
    display: inline-flex
    flex-direction: column
    .q-time__header
      border-top-right-radius: inherit
      min-height: 86px
    .q-time__header-ampm
      margin-left: 12px
    &.q-time--bordered .q-time__content
      margin: 1px 0
  &--landscape
    display: inline-flex
    align-items: stretch
    min-width: 420px
    > div
      display: flex
      flex-direction: column
      justify-content: center
    .q-time__header
      border-bottom-left-radius: inherit
      min-width: 156px
    .q-time__header-ampm
      margin-top: 12px
  &--dark
    border-color: $separator-dark-color
.q-timeline
  padding: 0
  width: 100%
  list-style: none
  h6
    line-height: inherit
  &--dark
    color: #fff
    .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: #fff
  &__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
  &__native
    width: 1px
    height: 1px
  &__track
    height: .35em
    border-radius: .175em
    opacity: .38
    background: currentColor
  &__thumb
    top: .25em
    left: .25em
    width: .5em
    height: .5em
    transition: left $toggle-transition
    user-select: none
    z-index: 0
    &:after
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: 50%
      background: #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: .3em
      min-width: 1em
      color: #000
      opacity: .54
      z-index: 1
  &__inner
    font-size: 40px
    width: 1.4em
    min-width: 1.4em
    height: 1em
    padding: .325em .3em
    &--indet
      .q-toggle__thumb
        left: .45em
    &--truthy
      color: $primary
      color: var(--q-color-primary)
      .q-toggle__track
        opacity: .54
      .q-toggle__thumb
        left: .65em
        &:after
          background-color: currentColor
        .q-icon
          color: #fff
          opacity: 1
  &.disabled
    opacity: .75 !important
  &--dark
    .q-toggle__inner
      color: #fff
      &--truthy
        color: $primary
        color: var(--q-color-primary)
    .q-toggle__thumb:before
      opacity: .32 !important
  &--dense
    .q-toggle__inner
      width: .8em
      min-width: .8em
      height: .5em
      padding: .07625em 0
    .q-toggle__thumb
      top: 0
      left: 0
    .q-toggle__inner--indet
      .q-toggle__thumb
        left: .15em
    .q-toggle__inner--truthy
      .q-toggle__thumb
        left: .3em
    .q-toggle__label
      padding-left: .5em
    &.reverse .q-toggle__label
      padding-left: 0
      padding-right: .5em
body.desktop
  .q-toggle:not(.disabled)
    .q-toggle__thumb:before
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: 50%
      background: currentColor
      opacity: .12
      transform: scale3d(0, 0, 1)
      transition: transform $option-focus-transition
    &:focus,
    &:hover
      .q-toggle__thumb:before
        transform: scale3d(2, 2, 1)
  .q-toggle--dense:not(.disabled)
    &:focus,
    &:hover
      .q-toggle__thumb:before
        transform: scale3d(1.5, 1.5, 1)
.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--style
  font-size: $tooltip-fontsize
  color: $tooltip-color
  background: $tooltip-background
  border-radius: $tooltip-border-radius
  text-transform: none
  font-weight: normal
.q-tooltip
  z-index: $z-tooltip
  position: fixed !important
  overflow-y: auto
  overflow-x: hidden
  padding: $tooltip-padding
  @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: 2px
      right: auto
      left: -13px
      border-left: 1px solid currentColor
    &:last-child:after
      display: none
    &--disabled
      pointer-events: none
      .disabled
        opacity: 1 !important
      > div,
      > i,
      > .disabled
        opacity: .6 !important
        .q-tree__node--disabled
          > div,
          > i,
          > .disabled
            opacity: 1 !important
  &__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
  &__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: 2px
        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: 0
  &__node-header-content
    color: #000
    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: #fff
  &--no-connectors
    .q-tree__node:after,
    .q-tree__node-header:before,
    .q-tree__node-body:after
      display: none !important
[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: #fff
  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: #fff
    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: #000
    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
  &__file
    border-radius: $generic-border-radius $generic-border-radius 0 0
    border: 1px solid $separator-color
    .q-circular-progress
      font-size: 24px
    &--img
      color: #fff
      height: 200px
      min-width: 200px
      background-position: 50% 50%
      background-size: cover
      background-repeat: no-repeat
      &:before
        content: none
      .q-circular-progress
        color: #fff
      .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
    border-color: $separator-dark-color
    .q-uploader__file
      border-color: $separator-dark-color
    .q-uploader__dnd, .q-uploader__overlay
      background: rgba(255,255,255,.3)
    .q-uploader__overlay
      color: #fff
.q-video
  position: relative
  overflow: hidden
  border-radius: inherit
  iframe,
  object,
  embed
    width: 100%
    height: 100%
  &--responsive
    height: 0
    iframe,
    object,
    embed
      position: absolute
      top: 0
      left: 0
.q-virtual-scroll
  &:focus
    outline: 0
  &__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-loading
  color: #000
  
  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
  flex-shrink: 0
  max-width: 95vw
  background: #323232
  color: #fff
  font-size: 14px
  &__icon
    font-size: 24px
    padding-right: 16px
  &__avatar
    font-size: 32px
    padding-right: 8px
  &__message
    padding: 8px 0
  &__caption
    font-size: 0.9em
    opacity: 0.7
  &__actions
    color: $primary
    color: var(--q-color-primary)
  &__badge
    animation: q-notif-badge .42s
    padding: 4px 8px
    position: absolute
    background: $negative
    box-shadow: $shadow-1
    background-color: $negative
    background-color: var(--q-color-negative)
    color: #fff
    border-radius: $generic-border-radius
    font-size: 12px
    line-height: 12px
    &--top-left,
    &--top-right
      top: -6px
    &--bottom-left,
    &--bottom-right
      bottom: -6px
    &--top-left,
    &--bottom-left
      left: -22px
    &--top-right,
    &--bottom-right
      right: -22px
  &__progress
    z-index: -1
    position: absolute
    height: 3px
    bottom: 0
    left: -10px
    right: -10px
    animation: q-notif-progress linear
    background: currentColor
    opacity: .3
    border-radius: $generic-border-radius $generic-border-radius 0 0
    transform-origin: 0 50%
    transform: scaleX(0)
  &--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__badge
      &--top-left,
      &--top-right
        top: -15px
      &--bottom-left,
      &--bottom-right
        bottom: -15px
    .q-notification__progress
      bottom: -8px
    .q-notification__actions
      padding: 0
      &--with-media
        padding-left: 25px
  &--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
    opacity: 0
    transform: rotateX(90deg)
    z-index: ($z-notify - 1)
  &--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
@keyframes q-notif-badge
  15%
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
  30%
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
  45%
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
  60%
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
  75%
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
@keyframes q-notif-progress
  0%
    transform: scaleX(1)
  100%
    transform: scaleX(0)
.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
  --q-color-dark:         $dark
.text-dark
  color: $dark !important
  color: var(--q-color-dark) !important
.bg-dark
  background: $dark !important
  background: var(--q-color-dark) !important
.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
.border-radius-inherit
  border-radius: inherit
.no-transition
  transition: none !important
.transition-0
  transition: 0s !important
.glossy
  background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .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-item, .q-electron-drag--exception
    -webkit-app-region: no-drag
img.responsive
  max-width: 100%
  height: auto
.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
[aria-busy='true']
  cursor: progress
[aria-controls],
[role='button']
  cursor: pointer
[aria-disabled]
  cursor: default
.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
/* internal: */
.q-position-engine
  margin-top: var(--q-pe-top, 0) !important
  margin-left: var(--q-pe-left, 0) !important
  will-change: auto
  visibility: collapse 
: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
  margin-left: auto
  margin-right: 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
.hide-scrollbar
  scrollbar-width: none
  -ms-overflow-style: none
  &::-webkit-scrollbar
    width: 0
    height: 0
    display: none
.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: #000
    &:after
      background: #fff
    &--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
body.body--dark
  color: #fff
  background: $dark-page
.q-dark
  color: #fff
  background: $grey-9
  background: var(--q-color-dark)
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
  
  .q-item,
  .q-toolbar,
  .q-notification
    &:after
      content: ''
      font-size: 0
      visibility: collapse
      display: inline
      width: 0
  .q-banner > .q-banner__avatar
    min-height: 38px
  .q-banner--dense > .q-banner__avatar
    min-height: 20px
  .q-item:after
    min-height: 32px
  .q-list--dense > .q-item,
  .q-item--dense
    &after
      min-height: 24px
  .q-toolbar:after
    min-height: $toolbar-min-height
  .q-notification
    &--standard:after
      min-height: 48px
    &--multi-line
      min-height: 68px
  
  .q-btn__wrapper,
  .q-time__content,
  .q-toolbar__title,
  .q-menu .q-item__section--main,
  .q-table__middle
    flex-basis: auto
  .q-banner__content
    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%
  .q-card__actions--vert
    flex: 0 0 auto
  .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
  
  button.q-btn--actionable:active:hover
    .q-btn__wrapper
      margin: -1px 1px 1px -1px
  .q-btn-group
    &--push
      > button.q-btn--push.q-btn--actionable:active:hover
        .q-btn__wrapper
          margin: 1px 1px -1px -1px
  .q-btn
    overflow: visible
    &--wrap
      flex-direction: row
  
  .q-carousel__slide > *
    max-width: 100%
  
  .q-tabs--vertical
    .q-tab__indicator
      height: auto
  
  .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-checkbox
    &__indet
      opacity: 0
    &__inner--indet
      .q-checkbox__indet
        opacity: 1
  
  .q-radio
    &__check
      opacity: 0
    &__inner--truthy
      .q-radio__check
        opacity: 1
  
  .q-date__main
    min-height: 290px !important
  .q-date__months
    align-items: stretch
  .q-time--portrait .q-time__main
    display: flex
    flex-direction: column
    flex-wrap: nowrap
    flex: 1 0 auto
  
  .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%
  
  .q-focus-helper
    z-index: 1
@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