/*!
 * Quasar Framework v2.11.1
 * (c) 2015-present Razvan Stoenescu
 * Released under the MIT License.
 */
@function str-replace($string, $search, $replace: '')
  $index: str-index($string, $search)
  @if $index
    $start: str-slice($string, 1, $index - 1)
    $end: str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
    @return $start + $replace + $end
  @return $string
@function str-fr($selector, $name, $i: '')
  @return str-replace(str-replace($selector, '<name>', $name), '<i>', $i)
@function str-fe($selector, $name, $noProc, $i: '')
  @if $noProc
    @return str-fr($selector, $name, $i)
  @return join(str-fr($selector, '', $i), str-fr($selector, $name, $i), $separator: comma)
$PI: 3.14159265359
@function pow($number, $exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value
@function fact($number)
  $value: 1
  @if $number > 0
    @for $i from 1 through $number
      $value: $value * $i
  @return $value
@function toFixed($number, $power)
  @return round($number * $power) / $power
@function sin($angle)
  $sin: 0
  
  $rad: $angle / 180 * $PI
  
  @for $i from 0 through 25
    $sin: $sin + pow(-1, $i) * pow($rad, (2 * $i + 1)) / fact(2 * $i + 1)
  @return $sin
@function cos($angle)
  $cos: 0
  
  $rad: $angle / 180 * $PI
  
  @for $i from 0 through 25
    $cos: $cos + pow(-1, $i) * pow($rad, 2 * $i) / fact(2 * $i)
  @return $cos
$space-base   : 16px !default
$space-x-base : $space-base !default
$space-y-base : $space-base !default
$space-none : (x: 0, y: 0) !default
$space-xs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
$space-sm   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
$space-md   : (x: $space-x-base, y: $space-y-base) !default
$space-lg   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
$space-xl   : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
$spaces: ('none': $space-none, 'xs': $space-xs, 'sm': $space-sm, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl) !default
$animate-duration : .3s !default
$animate-delay    : .3s !default
$animate-repeat   : 1 !default
$breakpoint-xs: 599px !default
$breakpoint-sm: 1023px !default
$breakpoint-md: 1439px !default
$breakpoint-lg: 1919px !default
$flex-cols      : 12 !default
$flex-gutter-xs : ($space-base * .25) !default
$flex-gutter-sm : ($space-base * .5) !default
$flex-gutter-md : $space-base !default
$flex-gutter-lg : ($space-base * 1.5) !default
$flex-gutter-xl : ($space-base * 3) !default
$body-font-size   : 14px !default
$body-line-height : 1.5 !default
$flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $flex-gutter-md, 'lg': $flex-gutter-lg, 'xl': $flex-gutter-xl) !default
$sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
$breakpoint-sm-min: map-get($sizes, "sm") !default
$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
$breakpoint-md-min: map-get($sizes, "md") !default
$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
$breakpoint-lg-min: map-get($sizes, "lg") !default
$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
$breakpoint-xl-min: map-get($sizes, "xl") !default
$h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
$h2:        (size: 3.75rem,  line-height: 3.75rem,  letter-spacing: -.00833em, weight: 300) !default
$h3:        (size: 3rem,     line-height: 3.125rem, letter-spacing: normal,    weight: 400) !default
$h4:        (size: 2.125rem, line-height: 2.5rem,   letter-spacing: .00735em,  weight: 400) !default
$h5:        (size: 1.5rem,   line-height: 2rem,     letter-spacing: normal,    weight: 400) !default
$h6:        (size: 1.25rem,  line-height: 2rem,     letter-spacing: .0125em,   weight: 500) !default
$subtitle1: (size: 1rem,     line-height: 1.75rem,  letter-spacing: .00937em,  weight: 400) !default
$subtitle2: (size: .875rem,  line-height: 1.375rem, letter-spacing: .00714em,  weight: 500) !default
$body1:     (size: 1rem,     line-height: 1.5rem,   letter-spacing: .03125em,  weight: 400) !default
$body2:     (size: .875rem,  line-height: 1.25rem,  letter-spacing: .01786em,  weight: 400) !default
$overline:  (size: .75rem,   line-height: 2rem,     letter-spacing: .16667em,  weight: 500) !default
$caption:   (size: .75rem,   line-height: 1.25rem,  letter-spacing: .03333em,  weight: 400) !default
$headings: ('h1': $h1, 'h2': $h2, 'h3': $h3, 'h4': $h4, 'h5': $h5, 'h6': $h6, 'subtitle1': $subtitle1, 'subtitle2': $subtitle2, 'body1': $body1, 'body2': $body2, 'overline': $overline, 'caption': $caption) !default
$h-tags: (h1: map-get($headings, "h1"), h2: map-get($headings, "h2"), h3: map-get($headings, "h3"), h4: map-get($headings, "h4"), h5: map-get($headings, "h5"), h6: map-get($headings, "h6")) !default
$text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900) !default
$primary   : #1976D2 !default
$secondary : #26A69A !default
$accent    : #9C27B0 !default
$dark-page : #121212 !default
$dark      : #1d1d1d !default
$positive  : #21BA45 !default
$negative  : #C10015 !default
$info      : #31CCEC !default
$warning   : #F2C037 !default
$dimmed-background       : rgba(0, 0, 0, .4) !default
$light-dimmed-background : rgba(255, 255, 255, .6) !default
$separator-color         : rgba(0, 0, 0, .12) !default
$separator-dark-color    : rgba(255, 255, 255, .28) !default
$red : #f44336 !default
$red-1 : #ffebee !default
$red-2 : #ffcdd2 !default
$red-3 : #ef9a9a !default
$red-4 : #e57373 !default
$red-5 : #ef5350 !default
$red-6 : #f44336 !default
$red-7 : #e53935 !default
$red-8 : #d32f2f !default
$red-9 : #c62828 !default
$red-10 : #b71c1c !default
$red-11 : #ff8a80 !default
$red-12 : #ff5252 !default
$red-13 : #ff1744 !default
$red-14 : #d50000 !default
$pink : #e91e63 !default
$pink-1 : #fce4ec !default
$pink-2 : #f8bbd0 !default
$pink-3 : #f48fb1 !default
$pink-4 : #f06292 !default
$pink-5 : #ec407a !default
$pink-6 : #e91e63 !default
$pink-7 : #d81b60 !default
$pink-8 : #c2185b !default
$pink-9 : #ad1457 !default
$pink-10 : #880e4f !default
$pink-11 : #ff80ab !default
$pink-12 : #ff4081 !default
$pink-13 : #f50057 !default
$pink-14 : #c51162 !default
$purple : #9c27b0 !default
$purple-1 : #f3e5f5 !default
$purple-2 : #e1bee7 !default
$purple-3 : #ce93d8 !default
$purple-4 : #ba68c8 !default
$purple-5 : #ab47bc !default
$purple-6 : #9c27b0 !default
$purple-7 : #8e24aa !default
$purple-8 : #7b1fa2 !default
$purple-9 : #6a1b9a !default
$purple-10 : #4a148c !default
$purple-11 : #ea80fc !default
$purple-12 : #e040fb !default
$purple-13 : #d500f9 !default
$purple-14 : #aa00ff !default
$deep-purple : #673ab7 !default
$deep-purple-1 : #ede7f6 !default
$deep-purple-2 : #d1c4e9 !default
$deep-purple-3 : #b39ddb !default
$deep-purple-4 : #9575cd !default
$deep-purple-5 : #7e57c2 !default
$deep-purple-6 : #673ab7 !default
$deep-purple-7 : #5e35b1 !default
$deep-purple-8 : #512da8 !default
$deep-purple-9 : #4527a0 !default
$deep-purple-10 : #311b92 !default
$deep-purple-11 : #b388ff !default
$deep-purple-12 : #7c4dff !default
$deep-purple-13 : #651fff !default
$deep-purple-14 : #6200ea !default
$indigo : #3f51b5 !default
$indigo-1 : #e8eaf6 !default
$indigo-2 : #c5cae9 !default
$indigo-3 : #9fa8da !default
$indigo-4 : #7986cb !default
$indigo-5 : #5c6bc0 !default
$indigo-6 : #3f51b5 !default
$indigo-7 : #3949ab !default
$indigo-8 : #303f9f !default
$indigo-9 : #283593 !default
$indigo-10 : #1a237e !default
$indigo-11 : #8c9eff !default
$indigo-12 : #536dfe !default
$indigo-13 : #3d5afe !default
$indigo-14 : #304ffe !default
$blue : #2196f3 !default
$blue-1 : #e3f2fd !default
$blue-2 : #bbdefb !default
$blue-3 : #90caf9 !default
$blue-4 : #64b5f6 !default
$blue-5 : #42a5f5 !default
$blue-6 : #2196f3 !default
$blue-7 : #1e88e5 !default
$blue-8 : #1976d2 !default
$blue-9 : #1565c0 !default
$blue-10 : #0d47a1 !default
$blue-11 : #82b1ff !default
$blue-12 : #448aff !default
$blue-13 : #2979ff !default
$blue-14 : #2962ff !default
$light-blue : #03a9f4 !default
$light-blue-1 : #e1f5fe !default
$light-blue-2 : #b3e5fc !default
$light-blue-3 : #81d4fa !default
$light-blue-4 : #4fc3f7 !default
$light-blue-5 : #29b6f6 !default
$light-blue-6 : #03a9f4 !default
$light-blue-7 : #039be5 !default
$light-blue-8 : #0288d1 !default
$light-blue-9 : #0277bd !default
$light-blue-10 : #01579b !default
$light-blue-11 : #80d8ff !default
$light-blue-12 : #40c4ff !default
$light-blue-13 : #00b0ff !default
$light-blue-14 : #0091ea !default
$cyan : #00bcd4 !default
$cyan-1 : #e0f7fa !default
$cyan-2 : #b2ebf2 !default
$cyan-3 : #80deea !default
$cyan-4 : #4dd0e1 !default
$cyan-5 : #26c6da !default
$cyan-6 : #00bcd4 !default
$cyan-7 : #00acc1 !default
$cyan-8 : #0097a7 !default
$cyan-9 : #00838f !default
$cyan-10 : #006064 !default
$cyan-11 : #84ffff !default
$cyan-12 : #18ffff !default
$cyan-13 : #00e5ff !default
$cyan-14 : #00b8d4 !default
$teal : #009688 !default
$teal-1 : #e0f2f1 !default
$teal-2 : #b2dfdb !default
$teal-3 : #80cbc4 !default
$teal-4 : #4db6ac !default
$teal-5 : #26a69a !default
$teal-6 : #009688 !default
$teal-7 : #00897b !default
$teal-8 : #00796b !default
$teal-9 : #00695c !default
$teal-10 : #004d40 !default
$teal-11 : #a7ffeb !default
$teal-12 : #64ffda !default
$teal-13 : #1de9b6 !default
$teal-14 : #00bfa5 !default
$green : #4caf50 !default
$green-1 : #e8f5e9 !default
$green-2 : #c8e6c9 !default
$green-3 : #a5d6a7 !default
$green-4 : #81c784 !default
$green-5 : #66bb6a !default
$green-6 : #4caf50 !default
$green-7 : #43a047 !default
$green-8 : #388e3c !default
$green-9 : #2e7d32 !default
$green-10 : #1b5e20 !default
$green-11 : #b9f6ca !default
$green-12 : #69f0ae !default
$green-13 : #00e676 !default
$green-14 : #00c853 !default
$light-green : #8bc34a !default
$light-green-1 : #f1f8e9 !default
$light-green-2 : #dcedc8 !default
$light-green-3 : #c5e1a5 !default
$light-green-4 : #aed581 !default
$light-green-5 : #9ccc65 !default
$light-green-6 : #8bc34a !default
$light-green-7 : #7cb342 !default
$light-green-8 : #689f38 !default
$light-green-9 : #558b2f !default
$light-green-10 : #33691e !default
$light-green-11 : #ccff90 !default
$light-green-12 : #b2ff59 !default
$light-green-13 : #76ff03 !default
$light-green-14 : #64dd17 !default
$lime : #cddc39 !default
$lime-1 : #f9fbe7 !default
$lime-2 : #f0f4c3 !default
$lime-3 : #e6ee9c !default
$lime-4 : #dce775 !default
$lime-5 : #d4e157 !default
$lime-6 : #cddc39 !default
$lime-7 : #c0ca33 !default
$lime-8 : #afb42b !default
$lime-9 : #9e9d24 !default
$lime-10 : #827717 !default
$lime-11 : #f4ff81 !default
$lime-12 : #eeff41 !default
$lime-13 : #c6ff00 !default
$lime-14 : #aeea00 !default
$yellow : #ffeb3b !default
$yellow-1 : #fffde7 !default
$yellow-2 : #fff9c4 !default
$yellow-3 : #fff59d !default
$yellow-4 : #fff176 !default
$yellow-5 : #ffee58 !default
$yellow-6 : #ffeb3b !default
$yellow-7 : #fdd835 !default
$yellow-8 : #fbc02d !default
$yellow-9 : #f9a825 !default
$yellow-10 : #f57f17 !default
$yellow-11 : #ffff8d !default
$yellow-12 : #ffff00 !default
$yellow-13 : #ffea00 !default
$yellow-14 : #ffd600 !default
$amber : #ffc107 !default
$amber-1 : #fff8e1 !default
$amber-2 : #ffecb3 !default
$amber-3 : #ffe082 !default
$amber-4 : #ffd54f !default
$amber-5 : #ffca28 !default
$amber-6 : #ffc107 !default
$amber-7 : #ffb300 !default
$amber-8 : #ffa000 !default
$amber-9 : #ff8f00 !default
$amber-10 : #ff6f00 !default
$amber-11 : #ffe57f !default
$amber-12 : #ffd740 !default
$amber-13 : #ffc400 !default
$amber-14 : #ffab00 !default
$orange : #ff9800 !default
$orange-1 : #fff3e0 !default
$orange-2 : #ffe0b2 !default
$orange-3 : #ffcc80 !default
$orange-4 : #ffb74d !default
$orange-5 : #ffa726 !default
$orange-6 : #ff9800 !default
$orange-7 : #fb8c00 !default
$orange-8 : #f57c00 !default
$orange-9 : #ef6c00 !default
$orange-10 : #e65100 !default
$orange-11 : #ffd180 !default
$orange-12 : #ffab40 !default
$orange-13 : #ff9100 !default
$orange-14 : #ff6d00 !default
$deep-orange : #ff5722 !default
$deep-orange-1 : #fbe9e7 !default
$deep-orange-2 : #ffccbc !default
$deep-orange-3 : #ffab91 !default
$deep-orange-4 : #ff8a65 !default
$deep-orange-5 : #ff7043 !default
$deep-orange-6 : #ff5722 !default
$deep-orange-7 : #f4511e !default
$deep-orange-8 : #e64a19 !default
$deep-orange-9 : #d84315 !default
$deep-orange-10 : #bf360c !default
$deep-orange-11 : #ff9e80 !default
$deep-orange-12 : #ff6e40 !default
$deep-orange-13 : #ff3d00 !default
$deep-orange-14 : #dd2c00 !default
$brown : #795548 !default
$brown-1 : #efebe9 !default
$brown-2 : #d7ccc8 !default
$brown-3 : #bcaaa4 !default
$brown-4 : #a1887f !default
$brown-5 : #8d6e63 !default
$brown-6 : #795548 !default
$brown-7 : #6d4c41 !default
$brown-8 : #5d4037 !default
$brown-9 : #4e342e !default
$brown-10 : #3e2723 !default
$brown-11 : #d7ccc8 !default
$brown-12 : #bcaaa4 !default
$brown-13 : #8d6e63 !default
$brown-14 : #5d4037 !default
$grey : #9e9e9e !default
$grey-1 : #fafafa !default
$grey-2 : #f5f5f5 !default
$grey-3 : #eeeeee !default
$grey-4 : #e0e0e0 !default
$grey-5 : #bdbdbd !default
$grey-6 : #9e9e9e !default
$grey-7 : #757575 !default
$grey-8 : #616161 !default
$grey-9 : #424242 !default
$grey-10 : #212121 !default
$grey-11 : #f5f5f5 !default
$grey-12 : #eeeeee !default
$grey-13 : #bdbdbd !default
$grey-14 : #616161 !default
$blue-grey : #607d8b !default
$blue-grey-1 : #eceff1 !default
$blue-grey-2 : #cfd8dc !default
$blue-grey-3 : #b0bec5 !default
$blue-grey-4 : #90a4ae !default
$blue-grey-5 : #78909c !default
$blue-grey-6 : #607d8b !default
$blue-grey-7 : #546e7a !default
$blue-grey-8 : #455a64 !default
$blue-grey-9 : #37474f !default
$blue-grey-10 : #263238 !default
$blue-grey-11 : #cfd8dc !default
$blue-grey-12 : #b0bec5 !default
$blue-grey-13 : #78909c !default
$blue-grey-14 : #455a64 !default
$ios-statusbar-height : 20px !default
$z-fab                : 990 !default
$z-side               : 1000 !default
$z-marginals          : 2000 !default
$z-fixed-drawer       : 3000 !default
$z-fullscreen         : 6000 !default
$z-menu               : 6000 !default
$z-top                : 7000 !default
$z-tooltip            : 9000 !default
$z-notify             : 9500 !default
$z-max                : 9998 !default
$shadow-color         : #000 !default
$shadow-transition    : box-shadow .28s cubic-bezier(.4, 0, .2, 1) !default
$inset-shadow         : 0 7px 9px -7px rgba($shadow-color, .7) inset !default
$inset-shadow-down    : 0 -7px 9px -7px rgba($shadow-color, .7) inset !default
$elevation-umbra      : rgba($shadow-color, .2) !default
$elevation-penumbra   : rgba($shadow-color, .14) !default
$elevation-ambient    : rgba($shadow-color, .12) !default
$shadow-0  : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
$shadow-1  : 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient !default
$shadow-2  : 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient !default
$shadow-3  : 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient !default
$shadow-4  : 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient !default
$shadow-5  : 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient !default
$shadow-6  : 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient !default
$shadow-7  : 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient !default
$shadow-8  : 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient !default
$shadow-9  : 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient !default
$shadow-10 : 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient !default
$shadow-11 : 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient !default
$shadow-12 : 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient !default
$shadow-13 : 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient !default
$shadow-14 : 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient !default
$shadow-15 : 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient !default
$shadow-16 : 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient !default
$shadow-17 : 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient !default
$shadow-18 : 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient !default
$shadow-19 : 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient !default
$shadow-20 : 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient !default
$shadow-21 : 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient !default
$shadow-22 : 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient !default
$shadow-23 : 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient !default
$shadow-24 : 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient !default
$shadows: ($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10, $shadow-11, $shadow-12, $shadow-13, $shadow-14, $shadow-15, $shadow-16, $shadow-17, $shadow-18, $shadow-19, $shadow-20, $shadow-21, $shadow-22, $shadow-23, $shadow-24)
$shadow-up-0  : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
$shadow-up-1  : 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient !default
$shadow-up-2  : 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient !default
$shadow-up-3  : 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient !default
$shadow-up-4  : 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient !default
$shadow-up-5  : 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient !default
$shadow-up-6  : 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient !default
$shadow-up-7  : 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient !default
$shadow-up-8  : 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient !default
$shadow-up-9  : 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient !default
$shadow-up-10 : 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient !default
$shadow-up-11 : 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient !default
$shadow-up-12 : 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient !default
$shadow-up-13 : 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient !default
$shadow-up-14 : 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient !default
$shadow-up-15 : 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient !default
$shadow-up-16 : 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient !default
$shadow-up-17 : 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient !default
$shadow-up-18 : 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient !default
$shadow-up-19 : 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient !default
$shadow-up-20 : 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient !default
$shadow-up-21 : 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient !default
$shadow-up-22 : 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient !default
$shadow-up-23 : 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient !default
$shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient !default
$shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
$dark-shadow-color         : #fff !default
$inset-dark-shadow         : 0 7px 9px -7px rgba($dark-shadow-color, .7) inset !default
$inset-dark-shadow-down    : 0 -7px 9px -7px rgba($dark-shadow-color, .7) inset !default
$elevation-dark-umbra      : rgba($dark-shadow-color, .2) !default
$elevation-dark-penumbra   : rgba($dark-shadow-color, .14) !default
$elevation-dark-ambient    : rgba($dark-shadow-color, .12) !default
$dark-shadow-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
$dark-shadow-1  : 0 1px 3px $elevation-dark-umbra, 0 1px 1px $elevation-dark-penumbra, 0 2px 1px -1px $elevation-dark-ambient !default
$dark-shadow-2  : 0 1px 5px $elevation-dark-umbra, 0 2px 2px $elevation-dark-penumbra, 0 3px 1px -2px $elevation-dark-ambient !default
$dark-shadow-3  : 0 1px 8px $elevation-dark-umbra, 0 3px 4px $elevation-dark-penumbra, 0 3px 3px -2px $elevation-dark-ambient !default
$dark-shadow-4  : 0 2px 4px -1px $elevation-dark-umbra, 0 4px 5px $elevation-dark-penumbra, 0 1px 10px $elevation-dark-ambient !default
$dark-shadow-5  : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient !default
$dark-shadow-6  : 0 3px 5px -1px $elevation-dark-umbra, 0 6px 10px $elevation-dark-penumbra, 0 1px 18px $elevation-dark-ambient !default
$dark-shadow-7  : 0 4px 5px -2px $elevation-dark-umbra, 0 7px 10px 1px $elevation-dark-penumbra, 0 2px 16px 1px $elevation-dark-ambient !default
$dark-shadow-8  : 0 5px 5px -3px $elevation-dark-umbra, 0 8px 10px 1px $elevation-dark-penumbra, 0 3px 14px 2px $elevation-dark-ambient !default
$dark-shadow-9  : 0 5px 6px -3px $elevation-dark-umbra, 0 9px 12px 1px $elevation-dark-penumbra, 0 3px 16px 2px $elevation-dark-ambient !default
$dark-shadow-10 : 0 6px 6px -3px $elevation-dark-umbra, 0 10px 14px 1px $elevation-dark-penumbra, 0 4px 18px 3px $elevation-dark-ambient !default
$dark-shadow-11 : 0 6px 7px -4px $elevation-dark-umbra, 0 11px 15px 1px $elevation-dark-penumbra, 0 4px 20px 3px $elevation-dark-ambient !default
$dark-shadow-12 : 0 7px 8px -4px $elevation-dark-umbra, 0 12px 17px 2px $elevation-dark-penumbra, 0 5px 22px 4px $elevation-dark-ambient !default
$dark-shadow-13 : 0 7px 8px -4px $elevation-dark-umbra, 0 13px 19px 2px $elevation-dark-penumbra, 0 5px 24px 4px $elevation-dark-ambient !default
$dark-shadow-14 : 0 7px 9px -4px $elevation-dark-umbra, 0 14px 21px 2px $elevation-dark-penumbra, 0 5px 26px 4px $elevation-dark-ambient !default
$dark-shadow-15 : 0 8px 9px -5px $elevation-dark-umbra, 0 15px 22px 2px $elevation-dark-penumbra, 0 6px 28px 5px $elevation-dark-ambient !default
$dark-shadow-16 : 0 8px 10px -5px $elevation-dark-umbra, 0 16px 24px 2px $elevation-dark-penumbra, 0 6px 30px 5px $elevation-dark-ambient !default
$dark-shadow-17 : 0 8px 11px -5px $elevation-dark-umbra, 0 17px 26px 2px $elevation-dark-penumbra, 0 6px 32px 5px $elevation-dark-ambient !default
$dark-shadow-18 : 0 9px 11px -5px $elevation-dark-umbra, 0 18px 28px 2px $elevation-dark-penumbra, 0 7px 34px 6px $elevation-dark-ambient !default
$dark-shadow-19 : 0 9px 12px -6px $elevation-dark-umbra, 0 19px 29px 2px $elevation-dark-penumbra, 0 7px 36px 6px $elevation-dark-ambient !default
$dark-shadow-20 : 0 10px 13px -6px $elevation-dark-umbra, 0 20px 31px 3px $elevation-dark-penumbra, 0 8px 38px 7px $elevation-dark-ambient !default
$dark-shadow-21 : 0 10px 13px -6px $elevation-dark-umbra, 0 21px 33px 3px $elevation-dark-penumbra, 0 8px 40px 7px $elevation-dark-ambient !default
$dark-shadow-22 : 0 10px 14px -6px $elevation-dark-umbra, 0 22px 35px 3px $elevation-dark-penumbra, 0 8px 42px 7px $elevation-dark-ambient !default
$dark-shadow-23 : 0 11px 14px -7px $elevation-dark-umbra, 0 23px 36px 3px $elevation-dark-penumbra, 0 9px 44px 8px $elevation-dark-ambient !default
$dark-shadow-24 : 0 11px 15px -7px $elevation-dark-umbra, 0 24px 38px 3px $elevation-dark-penumbra, 0 9px 46px 8px $elevation-dark-ambient !default
$dark-shadows: ($dark-shadow-1, $dark-shadow-2, $dark-shadow-3, $dark-shadow-4, $dark-shadow-5, $dark-shadow-6, $dark-shadow-7, $dark-shadow-8, $dark-shadow-9, $dark-shadow-10, $dark-shadow-11, $dark-shadow-12, $dark-shadow-13, $dark-shadow-14, $dark-shadow-15, $dark-shadow-16, $dark-shadow-17, $dark-shadow-18, $dark-shadow-19, $dark-shadow-20, $dark-shadow-21, $dark-shadow-22, $dark-shadow-23, $dark-shadow-24)
$dark-shadow-up-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
$dark-shadow-up-1  : 0 -1px 3px $elevation-dark-umbra, 0 -1px 1px $elevation-dark-penumbra, 0 -2px 1px -1px $elevation-dark-ambient !default
$dark-shadow-up-2  : 0 -1px 5px $elevation-dark-umbra, 0 -2px 2px $elevation-dark-penumbra, 0 -3px 1px -2px $elevation-dark-ambient !default
$dark-shadow-up-3  : 0 -1px 8px $elevation-dark-umbra, 0 -3px 4px $elevation-dark-penumbra, 0 -3px 3px -2px $elevation-dark-ambient !default
$dark-shadow-up-4  : 0 -2px 4px -1px $elevation-dark-umbra, 0 -4px 5px $elevation-dark-penumbra, 0 -1px 10px $elevation-dark-ambient !default
$dark-shadow-up-5  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -5px 8px $elevation-dark-penumbra, 0 -1px 14px $elevation-dark-ambient !default
$dark-shadow-up-6  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -6px 10px $elevation-dark-penumbra, 0 -1px 18px $elevation-dark-ambient !default
$dark-shadow-up-7  : 0 -4px 5px -2px $elevation-dark-umbra, 0 -7px 10px 1px $elevation-dark-penumbra, 0 -2px 16px 1px $elevation-dark-ambient !default
$dark-shadow-up-8  : 0 -5px 5px -3px $elevation-dark-umbra, 0 -8px 10px 1px $elevation-dark-penumbra, 0 -3px 14px 2px $elevation-dark-ambient !default
$dark-shadow-up-9  : 0 -5px 6px -3px $elevation-dark-umbra, 0 -9px 12px 1px $elevation-dark-penumbra, 0 -3px 16px 2px $elevation-dark-ambient !default
$dark-shadow-up-10 : 0 -6px 6px -3px $elevation-dark-umbra, 0 -10px 14px 1px $elevation-dark-penumbra, 0 -4px 18px 3px $elevation-dark-ambient !default
$dark-shadow-up-11 : 0 -6px 7px -4px $elevation-dark-umbra, 0 -11px 15px 1px $elevation-dark-penumbra, 0 -4px 20px 3px $elevation-dark-ambient !default
$dark-shadow-up-12 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -12px 17px 2px $elevation-dark-penumbra, 0 -5px 22px 4px $elevation-dark-ambient !default
$dark-shadow-up-13 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -13px 19px 2px $elevation-dark-penumbra, 0 -5px 24px 4px $elevation-dark-ambient !default
$dark-shadow-up-14 : 0 -7px 9px -4px $elevation-dark-umbra, 0 -14px 21px 2px $elevation-dark-penumbra, 0 -5px 26px 4px $elevation-dark-ambient !default
$dark-shadow-up-15 : 0 -8px 9px -5px $elevation-dark-umbra, 0 -15px 22px 2px $elevation-dark-penumbra, 0 -6px 28px 5px $elevation-dark-ambient !default
$dark-shadow-up-16 : 0 -8px 10px -5px $elevation-dark-umbra, 0 -16px 24px 2px $elevation-dark-penumbra, 0 -6px 30px 5px $elevation-dark-ambient !default
$dark-shadow-up-17 : 0 -8px 11px -5px $elevation-dark-umbra, 0 -17px 26px 2px $elevation-dark-penumbra, 0 -6px 32px 5px $elevation-dark-ambient !default
$dark-shadow-up-18 : 0 -9px 11px -5px $elevation-dark-umbra, 0 -18px 28px 2px $elevation-dark-penumbra, 0 -7px 34px 6px $elevation-dark-ambient !default
$dark-shadow-up-19 : 0 -9px 12px -6px $elevation-dark-umbra, 0 -19px 29px 2px $elevation-dark-penumbra, 0 -7px 36px 6px $elevation-dark-ambient !default
$dark-shadow-up-20 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -20px 31px 3px $elevation-dark-penumbra, 0 -8px 38px 7px $elevation-dark-ambient !default
$dark-shadow-up-21 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -21px 33px 3px $elevation-dark-penumbra, 0 -8px 40px 7px $elevation-dark-ambient !default
$dark-shadow-up-22 : 0 -10px 14px -6px $elevation-dark-umbra, 0 -22px 35px 3px $elevation-dark-penumbra, 0 -8px 42px 7px $elevation-dark-ambient !default
$dark-shadow-up-23 : 0 -11px 14px -7px $elevation-dark-umbra, 0 -23px 36px 3px $elevation-dark-penumbra, 0 -9px 44px 8px $elevation-dark-ambient !default
$dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $elevation-dark-penumbra, 0 -9px 46px 8px $elevation-dark-ambient !default
$dark-shadows-up: ($dark-shadow-up-1, $dark-shadow-up-2, $dark-shadow-up-3, $dark-shadow-up-4, $dark-shadow-up-5, $dark-shadow-up-6, $dark-shadow-up-7, $dark-shadow-up-8, $dark-shadow-up-9, $dark-shadow-up-10, $dark-shadow-up-11, $dark-shadow-up-12, $dark-shadow-up-13, $dark-shadow-up-14, $dark-shadow-up-15, $dark-shadow-up-16, $dark-shadow-up-17, $dark-shadow-up-18, $dark-shadow-up-19, $dark-shadow-up-20, $dark-shadow-up-21, $dark-shadow-up-22, $dark-shadow-up-23, $dark-shadow-up-24)
$generic-border-radius          : 4px !default
$generic-hover-transition       : .3s cubic-bezier(.25, .8, .5, 1) !default
$typography-font-family         : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
$min-line-height                : 1.12 !default
$button-border-radius           : 3px !default
$button-padding                 : 4px 16px !default
$button-dense-padding           : .285em !default
$button-transition              : $generic-hover-transition !default
$button-font-size               : 14px !default
$button-line-height             : 1.715em !default
$button-font-weight             : 500 !default
$button-shadow                  : $shadow-2 !default
$button-shadow-active           : $shadow-5 !default
$button-rounded-border-radius   : 28px !default
$button-push-border-radius      : 7px !default
$chat-message-received-color    : #000 !default
$chat-message-received-bg       : $green-4 !default
$chat-message-sent-color        : #000 !default
$chat-message-sent-bg           : $grey-4 !default
$chat-message-avatar-size       : 48px !default
$chat-message-border-radius     : $generic-border-radius !default
$chat-message-distance          : 8px !default
$chat-message-text-padding      : 8px !default
$item-base-color                : $grey-5 !default
$editor-border-color            : $separator-color !default
$editor-border-dark-color       : $separator-dark-color !default
$editor-content-padding         : 10px !default
$editor-content-min-height      : 10em !default
$editor-toolbar-padding         : 4px !default
$editor-hr-color                : $editor-border-color !default
$editor-hr-dark-color           : $editor-border-dark-color !default
$editor-button-gutter           : 4px !default
$table-transition               : $generic-hover-transition !default
$table-border-radius            : $generic-border-radius !default
$table-box-shadow               : $shadow-2 !default
$table-border-color             : $separator-color !default
$table-hover-background         : rgba(0, 0, 0, .03) !default
$table-selected-background      : rgba(0, 0, 0, .06) !default
$table-dark-border-color        : $separator-dark-color !default
$table-dark-hover-background    : rgba(255, 255, 255, .07) !default
$table-dark-selected-background : rgba(255, 255, 255, .1) !default
$table-box-shadow-dark          : $dark-shadow-2 !default
$toolbar-min-height             : 50px !default
$toolbar-padding                : 0 12px !default
$toolbar-inset-size             : 58px !default
$toolbar-title-font-size        : 21px !default
$toolbar-title-font-weight      : normal !default
$toolbar-title-letter-spacing   : .01em !default
$toolbar-title-padding          : 0 12px !default
$layout-border                  : 1px solid $separator-color !default
$layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
$layout-shadow-dark             : 0 0 10px 2px rgba(255,255,255,.2), 0 0px 10px rgba(255,255,255,.24) !default
$menu-background                : #fff !default
$menu-box-shadow                : $shadow-2 !default
$menu-box-shadow-dark           : $dark-shadow-2 !default
$menu-max-width                 : 95vw !default
$rating-grade-color             : $yellow !default
$rating-shadow                  : 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !default
$tooltip-color                  : #fafafa !default
$tooltip-background             : $grey-7 !default
$tooltip-padding                : 6px 10px !default
$tooltip-border-radius          : $generic-border-radius !default
$tooltip-fontsize               : 10px !default
$tooltip-mobile-padding         : 8px 16px !default
$tooltip-mobile-fontsize        : 14px !default
$option-focus-transition        : .22s cubic-bezier(0,0,.2,1) !default
$input-font-size                : 14px !default
$input-text-color               : rgba(0,0,0,.87) !default
$input-label-color              : rgba(0,0,0,.6) !default
$input-autofill-color           : inherit !default
$img-loading-font-size          : 50px !default
$img-content-position           : absolute !default
$img-content-padding            : 16px !default
$img-content-color              : #fff !default
$img-content-background         : rgba(0, 0, 0, .47) !default
*, *: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
/*
 * line 1: Remove the bottom border in Firefox 39-.
 * lines 2,3: Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title]
  border-bottom: none
  text-decoration: underline
  text-decoration: underline dotted
img
  border-style: none
svg:not(:root)
  overflow: hidden
/*
 * line 1: Correct the inheritance and scaling of font size in all browsers.
 * line 2: Correct the odd `em` font sizing in all browsers.
 */
code, kbd, pre, samp
  font-family: monospace, monospace
  font-size: 1em
/*
 * lines 1,2: Add the correct box sizing in Firefox.
 * line 3: Show the overflow in Edge and IE.
 */
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
/*
 * Show the overflow in IE.
 *  input: Show the overflow in Edge.
 *  select: Show the overflow in Edge, Firefox, and IE.
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 *  select: Remove the inheritance of text transform in Firefox.
 */
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
/**
 * lines 1,3,4,6: Correct the text wrapping in Edge and IE.
 * line 2: Correct the color inheritance from `fieldset` elements in IE.
 * line 5: Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
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-search-cancel-button,
input[type='search']::-webkit-search-decoration
  -webkit-appearance: none
.q-icon
  line-height: 1
  width: 1em
  height: 1em
  flex-shrink: 0
  letter-spacing: normal
  text-transform: none
  white-space: nowrap
  word-wrap: normal
  direction: ltr
  text-align: center
  position: relative
  box-sizing: content-box
  fill: currentColor 
  &:before, &:after
    width: 100%
    height: 100%
    display: flex !important
    align-items: center
    justify-content: center
  > svg,
  > img
    width: 100%
    height: 100%
.q-icon,
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-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
  background: $red
  &--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):not(.q-img__image)
    border-radius: inherit
    height: inherit
    width: inherit
  &--square
    border-radius: 0
.q-badge
  background-color: var(--q-primary)
  color: #fff
  padding: 2px 6px
  border-radius: $generic-border-radius
  font-size: 12px
  line-height: 12px
  min-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
  &--rounded
    border-radius: 1em
.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
[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
  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
  cursor: default
  padding: $button-padding
  min-height: 2.572em
  .q-icon, .q-spinner
    font-size: $button-line-height
  &.disabled
    opacity: .7 !important
  &: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
      &:before
        
        
        
        
        transition: box-shadow $button-transition
      &:active,
      &.q-btn--active
        &:before
          box-shadow: $button-shadow-active
  &--no-uppercase
    text-transform: none
  &--rectangle
    border-radius: $button-border-radius
  &--outline
    background: transparent !important
    &:before
      border: 1px solid currentColor
  &--push
    border-radius: $button-push-border-radius
    &:before
      border-bottom: 3px solid rgba(0,0,0,.15)
    &.q-btn--actionable
      transition: transform $button-transition
      &:before
        transition: border-width $button-transition
      &:active,
      &.q-btn--active
        transform: translateY(2px)
        &:before
          border-bottom-width: 0
  &--rounded
    border-radius: $button-rounded-border-radius
  &--round
    border-radius: 50%
    padding: 0
    min-width: 3em
    min-height: 3em
  &--square
    border-radius: 0
  &--flat, &--outline, &--unelevated
    &:before
      box-shadow: none
  &--dense
    padding: $button-dense-padding
    min-height: 2em
    &.q-btn--round
      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
    padding: 16px
    min-height: 56px
    min-width: 56px
    .q-icon
      margin: auto
  &--fab-mini
    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)
  &--flat, &--outline
    .q-btn__progress-indicator
      opacity: 0.2
      background: currentColor
.q-btn-dropdown
  &--split .q-btn-dropdown__arrow-container
    padding: 0 4px
    &.q-btn--outline
      border-left: 1px solid currentColor
    &:not(.q-btn--outline)
      border-left: 1px solid rgba(255,255,255,.3)
  &--simple * + .q-btn-dropdown__arrow
    margin-left: 8px
  &__arrow
    transition: transform .28s
  &--current
    flex-grow: 1
.q-btn-group
  border-radius: $button-border-radius
  box-shadow: $button-shadow
  vertical-align: middle
  > .q-btn-item
    border-radius: inherit
    align-self: stretch
    &: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:before
    border-left: 0
  > .q-btn-group:not(:last-child) > .q-btn:last-child: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:before
    z-index: -1
  &--push
    border-radius: $button-push-border-radius
    > .q-btn--push
      &.q-btn--actionable
        transform: none
        .q-btn__content
          transition: margin-top $button-transition, margin-bottom $button-transition
        &:active,
        &.q-btn--active
          .q-btn__content
            margin-top: 2px
            margin-bottom: -2px
  &--rounded
    border-radius: $button-rounded-border-radius
  &--square
    border-radius: 0
  &--flat, &--outline, &--unelevated
    box-shadow: none
  &--outline
    > .q-separator
      display: none
    > .q-btn-item + .q-btn-item:before
      border-left: 0
    > .q-btn-item:not(:last-child):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-btn-toggle
  position: relative
.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
    box-shadow: $dark-shadow-2
  &__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--rectangle
      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
      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
  text-align: center
.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
  &__native
    width: 1px
    height: 1px
  &__bg,
  &__icon-container
    user-select: none
  &__bg
    top: 25%
    left: 25%
    width: 50%
    height: 50%
    border: 2px solid currentColor
    border-radius: 2px
    transition: background $checkbox-transition
    -webkit-print-color-adjust: exact
  &__icon
    color: currentColor
    font-size: .5em
  &__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: var(--q-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: var(--q-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
  &.body--dark
    .q-chip--clickable:focus
      box-shadow: $dark-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
    &-tabs
      height: 32px
    &-banner
      height: 36px
    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
    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
      padding-top: 0
    .q-slider__track:before
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: inherit
      background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
  &__sliders
    padding: 0 16px
    .q-slider__thumb
      color: $grey-9
      path
        stroke-width: 2px
        fill: transparent
    .q-slider--active path
      stroke-width: 3px
  
  &__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
    box-shadow: $dark-shadow-2
    .q-color-picker__tune-tab input
      border: 1px solid rgba(#fff, .3)
    .q-slider__thumb
      color: $grey-1
.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: var(--q-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
    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
    padding: 1px
    &:after
      content: ''
      position: absolute
      pointer-events: none
      top: 1px
      right: 0
      bottom: 1px
      left: 0
      border-style: dashed
      border-color: transparent
      border-width: 1px
    > div, button
      width: 30px
      height: 30px
      border-radius: 50%
    > div
      line-height: 30px
      text-align: center
    > button
      line-height: 22px
    &--out
      opacity: .18
    &--fill
      visibility: hidden
  &__range, &__range-from, &__range-to
    &:before
      content: ''
      background-color: currentColor
      position: absolute
      top: 1px
      bottom: 1px
      left: 0
      right: 0
      opacity: .3
    &:nth-child(7n-6)
      &:before
        border-top-left-radius: 0
        border-bottom-left-radius: 0
    &:nth-child(7n)
      &:before
        border-top-right-radius: 0
        border-bottom-right-radius: 0
  &__range-from
    &:before
      left: 50%
  &__range-to
    &:before
      right: 50%
  &__edit-range
    &:after
      border-color: currentColor transparent
    &:nth-child(7n-6)
      &:after
        border-top-left-radius: 0
        border-bottom-left-radius: 0
    &:nth-child(7n)
      &:after
        border-top-right-radius: 0
        border-bottom-right-radius: 0
    &-from, &-from-to
      &:after
        left: 4px
        border-left-color: currentColor
        border-top-color: currentColor
        border-bottom-color: currentColor
        border-top-left-radius: $button-rounded-border-radius
        border-bottom-left-radius: $button-rounded-border-radius
    &-to, &-from-to
      &:after
        right: 4px
        border-right-color: currentColor
        border-top-color: currentColor
        border-bottom-color: currentColor
        border-top-right-radius: $button-rounded-border-radius
        border-bottom-right-radius: $button-rounded-border-radius
  &__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: var(--q-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
    box-shadow: $dark-shadow-2
    border-color: $separator-dark-color
.q-dialog
  &__title
    font-size: 1.25rem
    font-weight: 500
    line-height: 2rem
    letter-spacing: .0125em
  &__progress
    font-size: 4rem
  &__inner
    outline: 0
    > div
      pointer-events: all
      overflow: auto
      -webkit-overflow-scrolling: touch
      will-change: scroll-position
      border-radius: $generic-border-radius
    &--square > div
      border-radius: 0 !important
    > .q-card
      > .q-card__actions .q-btn--rectangle
        min-width: 64px
    &--minimized
      padding: 24px
      > div
        max-height: calc(100vh - 48px)
    &--maximized
      > div
        height: 100%
        width: 100%
        max-height: 100vh
        max-width: 100vw
        border-radius: 0 !important
        top: 0 !important
        left: 0 !important
    &--top, &--bottom
      padding-top: 0 !important
      padding-bottom: 0 !important
    &--right, &--left
      padding-right: 0 !important
      padding-left: 0 !important
    &--left, &--top
      &:not(.q-dialog__inner--animating) > div
        border-top-left-radius: 0
    &--right, &--top
      &:not(.q-dialog__inner--animating) > div
        border-top-right-radius: 0
    &--left, &--bottom
      &:not(.q-dialog__inner--animating) > div
        border-bottom-left-radius: 0
    &--right, &--bottom
      &:not(.q-dialog__inner--animating) > 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
    outline: 0
    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
@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
  &__form
    max-height: 50vh
  .q-card__section + .q-card__section
    padding-top: 0
  &--progress
    text-align: center
.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
    max-width: 100%
    pre
      white-space: pre-wrap
    hr
      border: 0
      outline: 0
      margin: 1px
      height: 1px
      background: $editor-hr-color
    &:empty:not(:focus):before
      content: attr(placeholder)
      opacity: .7
  &__toolbar
    border-bottom: 1px solid $editor-border-color
    min-height: 32px
  &__toolbars-container
    max-width: 100%
  .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
  &__link-input
    color: inherit
    text-decoration: none
    text-transform: none
    border: none
    border-radius: 0
    background: none
    outline: 0
  &--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
  &__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
    &--opened
      .q-fab__icon
        transform: rotate(180deg)
        opacity: 0
      .q-fab__active-icon
        transform: rotate(0deg)
        opacity: 1
  &__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
    &--opened
      opacity: 1
      
      transform: scale(1) translate(0.1px, 0)
      pointer-events: all
  &--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)
.q-field
  font-size: $input-font-size
  ::-ms-clear,
  ::-ms-reveal
    display: none
  &--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: 20px
    line-height: 1
    color: rgba(0,0,0,.54)
    padding: 8px 12px 0
    backface-visibility: hidden
    &--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: var(--q-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
  &__shadow
    top: 8px
    opacity: 0
    overflow: hidden
    white-space: pre-wrap
    transition: opacity $field-transition
    + .q-field__native
      &::placeholder
        transition: opacity $field-transition
      &:focus::placeholder
        opacity: 0
  &__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 
    user-select: auto
    &:-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
  &__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
    top: 18px
    max-width: 100%
    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, max-width $field-transition-label-right-up
    backface-visibility: hidden
  &--float .q-field__label
    max-width: 133%
    transform: translateY(-40%) scale(.75)
    transition: transform $field-transition, max-width $field-transition-label-right-down
  &--highlighted
    .q-field__label
      color: currentColor
    .q-field__shadow
      opacity: .5
  &--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--highlighted
      .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--highlighted .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__native,
    .q-field__input
      &:-webkit-autofill
        margin-top: 1px
        margin-bottom: 1px
    &.q-field--rounded .q-field__control
      border-radius: 28px
    &.q-field--highlighted
      
      .q-field__control:hover:before
        border-color: transparent
      .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--highlighted
      .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--highlighted) .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--highlighted
      .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--highlighted
        .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
    .q-field__shadow
      top: 0
    &: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__shadow
      top: 0
    .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-field__marginal
      .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: var(--q-negative)
  &__focusable-action
    opacity: 0.6
    cursor: pointer
    outline: 0 !important
    border: 0
    color: inherit
    background: transparent
    padding: 0
    &:hover,
    &:focus
      opacity: 1
  &--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__shadow
        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__shadow
          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-from, &-leave-to
    opacity: 0
    transform: translateY(-10px)
  &-leave-from, &-leave-active
    position: absolute
@keyframes q-field-label
  40%
    margin-left: 2px
  60%, 80%
    margin-left: -2px
  70%, 90%
    margin-left: 2px
@keyframes q-autofill
  to
    background: transparent
    color: $input-autofill-color
.q-file
  .q-field__native
    word-break: break-all
    overflow: hidden
  .q-field__input
    opacity: 0 !important
    &::-webkit-file-upload-button
      cursor: pointer
  &__filler
    visibility: hidden
    width: 100%
    border: none
    padding: 0
  &__dnd
    outline: 1px dashed currentColor
    outline-offset: -4px
.q-form
  position: relative
.q-img
  position: relative
  width: 100%
  display: inline-block
  vertical-align: middle
  overflow: hidden
  &__loading .q-spinner
    font-size: $img-loading-font-size
  &__container
    border-radius: inherit
    font-size: 0
  &__image
    border-radius: inherit
    width: 100%
    height: 100%
    opacity: 0
    &--with-transition
      transition: opacity .28s ease-in
    &--loaded
      opacity: 1
  &__content
    border-radius: inherit
    pointer-events: none
    > div
      pointer-events: all
      position: $img-content-position
      padding: $img-content-padding
      color: $img-content-color
      background: $img-content-background
  &--no-menu
    .q-img__image,
    .q-img__placeholder
      pointer-events: none
.q-inner-loading
  background: $light-dimmed-background
  &--dark
    background: $dimmed-background
  &__label
    margin-top: 8px
.q-textarea
  .q-field__control
    min-height: 56px
    height: auto
  .q-field__control-container
    padding-top: 2px
    padding-bottom: 2px
  .q-field__shadow
    top: 2px
    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__shadow
      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__shadow
        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: var(--q-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-2
body.body--dark .q-knob--editable:focus:before
  box-shadow: $dark-shadow-2
.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: var(--q-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 !important
    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(1),
  .q-layout--standard .q-header > .q-tabs:nth-child(1) .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) + #{$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) + #{$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
body:not(.q-body--layout-animate)
  .q-layout--prevent-focus
    visibility: hidden
.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
  .q-layout__shadow:after
    box-shadow: $layout-shadow-dark
body.platform-ios
  .q-layout--containerized
    
    
    
    position: unset !important
.q-linear-progress
  --q-linear-progress-speed: .3s
  position: relative
  width: 100%
  overflow: hidden
  font-size: 4px
  height: 1em
  color: var(--q-primary)
  transform: scale3d(1, 1, 1)
  &__model, &__track
    transform-origin: 0 0
    &--with-transition
      transition: transform var(--q-linear-progress-speed)
  &--reverse
    .q-linear-progress
      &__model, &__track
        transform-origin: 0 100%
  &__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
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
    background-size: 40px 40px !important
    &--with-transition
      transition: width var(--q-linear-progress-speed)
@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
  &--dark
    box-shadow: $menu-box-shadow-dark
.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
  &__content
    --q-pagination-gutter-parent: -2px
    --q-pagination-gutter-child: 2px
    margin-top: var(--q-pagination-gutter-parent)
    margin-left: var(--q-pagination-gutter-parent)
  &__content > .q-btn,
  &__content > .q-input,
  &__middle > .q-btn
    margin-top: var(--q-pagination-gutter-child)
    margin-left: var(--q-pagination-gutter-child)
.q-parallax
  position: relative
  width: 100%
  overflow: hidden
  border-radius: inherit
.q-parallax__media
  > img, > video
    position: absolute
    left: 50% #{"/* rtl:ignore */"}
    bottom: 0
    min-width: 100%
    min-height: 100%
    will-change: transform
    display: none
.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: var(--q-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
  &__native
    width: 1px
    height: 1px
  &__bg,
  &__icon-container
    user-select: none
  &__bg
    top: 25%
    left: 25%
    width: 50%
    height: 50%
    -webkit-print-color-adjust: exact
    path
      fill: currentColor
  &__icon
    color: currentColor
    font-size: .5em
  &__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: var(--q-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: var(--q-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-container
    height: 1em
    outline: 0
    & + &
      margin-left: 2px
  &__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
  &--no-dimming .q-rating__icon
    opacity: 1
  &--editable .q-rating__icon-container
    cursor: pointer
.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
  contain: strict
  &__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
    border-radius: 3px
    &:hover
      opacity: .3
    &:active
      opacity: .5
  &__content
    min-height: 100%
    min-width: 100%
  &--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
    cursor: text
    &--padding
      padding-left: 4px
  &__focus-target,
  &__autocomplete-input
    position: absolute
    outline: 0 !important
    width: 1px 
    height: 1px 
    padding: 0
    border: 0
    opacity: 0
  &__dropdown-icon
    cursor: pointer
    transition: transform .28s
  &.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
  flex-shrink: 0
  &--dark
    background: $separator-dark-color
  &--horizontal
    display: block
    height: 1px
    &-inset
      margin-left: 16px
      margin-right: 16px
    &-item-inset
      margin-left: 72px
      margin-right: 0
    &-item-thumbnail-inset
      margin-left: 116px
      margin-right: 0
  &--vertical
    width: 1px
    height: auto
    align-self: stretch
    &-inset
      margin-top: 8px
      margin-bottom: 8px
.q-skeleton
  --q-skeleton-speed: 1500ms
  background: $separator-color
  border-radius: $generic-border-radius
  &--anim
    cursor: wait
  
  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 var(--q-skeleton-speed) linear .5s infinite
  &--anim-pulse
    animation: q-skeleton--pulse var(--q-skeleton-speed) ease-in-out .5s infinite
  &--anim-pulse-x
    animation: q-skeleton--pulse-x var(--q-skeleton-speed) ease-in-out .5s infinite
  &--anim-pulse-y
    animation: q-skeleton--pulse-y var(--q-skeleton-speed) 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 var(--q-skeleton-speed) linear .5s infinite
  &--anim-wave:after
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0))
    animation: q-skeleton--wave var(--q-skeleton-speed) 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, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0))
    &.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
  &--h
    width: 100%
  &--v
    height: 200px
  &--editable .q-slider__track-container
    cursor: grab
  &__track-container
    outline: 0
    &--h
      width: 100%
      padding: 12px 0
      .q-slider__selection
        will-change: width, left
    &--v
      height: 100%
      padding: 0 12px
      .q-slider__selection
        will-change: height, top
  &__track
    color: var(--q-primary)
    background: rgba(0,0,0,.1)
    border-radius: $generic-border-radius
    width: inherit
    height: inherit
  &__inner
    background: rgba(0,0,0,.1)
    border-radius: inherit
    width: 100%
    height: 100%
  &__selection
    background: currentColor
    border-radius: inherit
    width: 100%
    height: 100%
  &__markers
    color: rgba(0,0,0,.3)
    border-radius: inherit
    width: 100%
    height: 100%
    &:after
      content: ''
      position: absolute
      background: currentColor
    &--h
      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
      &:after
        height: 100%
        width: 2px
        top: 0
        right: 0
    &--v
      background-image: repeating-linear-gradient(to bottom, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
      &:after
        width: 100%
        height: 2px
        left: 0
        bottom: 0
  &__marker-labels-container
    position: relative
    width: 100%
    height: 100%
    min-height: 24px
    min-width: 24px
  &__marker-labels
    position: absolute
    &--h
      &-standard
        top: 0
      &-switched
        bottom: 0
      &-ltr
        transform: translateX(-50%) #{"/* rtl:ignore */"}
      &-rtl
        transform: translateX(50%) #{"/* rtl:ignore */"}
    &--v
      &-standard
        left: 4px
      &-switched
        right: 4px
      &-ltr
        transform: translateY(-50%) #{"/* rtl:ignore */"}
      &-rtl
        transform: translateY(50%) #{"/* rtl:ignore */"}
  &__thumb
    z-index: 1
    outline: 0
    color: var(--q-primary)
    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    &.q-slider--focus
      opacity: 1 !important
    &--h
      top: 50%
      will-change: left
      &-ltr
        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
      &-rtl
        transform: scale(1) translate(50%,-50%) #{"/* rtl:ignore */"}
    &--v
      left: 50% #{"/* rtl:ignore */"}
      will-change: top
      &-ltr
        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
      &-rtl
        transform: scale(1) translate(-50%,50%) #{"/* rtl:ignore */"}
  &__thumb-shape
    top: 0
    left: 0
    stroke-width: 3.5
    stroke: currentColor
    transition: transform .28s
    path
      stroke: currentColor
      fill: currentColor
  &__focus-ring
    border-radius: 50%
    opacity: 0
    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
    transition-delay: .14s
  &__pin
    opacity: 0
    white-space: nowrap
    transition: opacity .28s ease-out
    transition-delay: .14s
    &:before
      content: ''
      width: 0
      height: 0
      position: absolute
    &--h
      &:before
        border-left: 6px solid transparent
        border-right: 6px solid transparent
        left: 50%
        transform: translateX(-50%)
      &-standard
        bottom: 100%
        &:before
          bottom: 2px
          border-top: 6px solid currentColor
      &-switched
        top: 100%
        &:before
          top: 2px
          border-bottom: 6px solid currentColor
    &--v
      top: 0
      &:before
        top: 50%
        transform: translateY(-50%)
        border-top: 6px solid transparent
        border-bottom: 6px solid transparent
      &-standard
        left: 100%
        &:before
          left: 2px
          border-right: 6px solid currentColor
      &-switched
        right: 100%
        &:before
          right: 2px
          border-left: 6px solid currentColor
  &__label
    z-index: 1
    white-space: nowrap
    position: absolute
    &--h
      left: 50%
      transform: translateX(-50%)
      &-standard
        bottom: 7px
      &-switched
        top: 7px
    &--v
      top: 50%
      transform: translateY(-50%)
      &-standard
        left: 7px
      &-switched
        right: 7px
  &__text-container
    min-height: 25px
    padding: 2px 8px
    border-radius: $generic-border-radius
    background: currentColor
    position: relative
    text-align: center
  &__text
    color: #fff
    font-size: 12px
  &--no-value
    .q-slider__thumb,
    .q-slider__inner,
    .q-slider__selection
      opacity: 0
  &--focus,
  body.desktop &.q-slider--editable .q-slider__track-container:hover
    .q-slider__focus-ring
      background: currentColor
      transform: scale3d(1.55, 1.55, 1)
      opacity: .25
    .q-slider__thumb,
    .q-slider__inner,
    .q-slider__selection
      opacity: 1
  &--inactive
    .q-slider__thumb
      &--h
        transition: left .28s, right .28s
      &--v
        transition: top .28s, bottom .28s
    .q-slider__selection
      transition: width .28s, left .28s, right .28s, height .28s, top .28s, bottom .28s
    .q-slider__text-container
      transition: transform .28s
  &--active
    cursor: grabbing
    .q-slider__thumb-shape
      transform: scale(1.5)
    .q-slider__focus-ring,
    &.q-slider--label .q-slider__thumb-shape
      transform: scale(0) !important
  body.desktop &.q-slider--enabled .q-slider__track-container:hover
    .q-slider__pin
      opacity: 1
  &--label
    &.q-slider--active,
    .q-slider--focus,
    &.q-slider--label-always
      .q-slider__pin
        opacity: 1
  &--dark
    .q-slider__track
      background: rgba(#fff,.1)
    .q-slider__inner
      background: rgba(#fff,.1)
    .q-slider__markers
      color: rgba(#fff,.3)
  &--dense
    .q-slider__track-container
      &--h
        padding: 6px 0
      &--v
        padding: 0 6px
.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
    stroke-dashoffset: 0
  50%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -35px
  100%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -124px
.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
    contain: layout
    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
    box-shadow: $dark-shadow-2
    .q-stepper__dot span
      color: #000
  &__tab
    &--navigation
      user-select: none
      cursor: pointer
    &--active, &--done
      color: var(--q-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: var(--q-negative)
    &--error-with-icon
      .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
        &:only-child
          justify-content: center
      .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
    &--contracted
      min-height: 72px
      &.q-stepper__header--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
  &__nav
    padding-top: 24px
  &--flat
    box-shadow: none
  &--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
      contain: layout
      &: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)
.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
    .q-table__top,
    .q-table__bottom
      flex: 0 0 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: 50px
    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
.q-table__card--dark,
.q-table--dark
  box-shadow: $table-box-shadow-dark
.q-table
  &--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, &__alert-icon
    position: absolute
  &__alert
    top: 7px
    right: -9px
    height: 10px
    width: 10px
    border-radius: 50%
    background: currentColor
  &__alert-icon
    top: 2px
    right: -12px
    font-size: 18px
  &__indicator
    opacity: 0
    height: 2px
    background: currentColor
  &--active .q-tab__indicator
    opacity: 1
    transform-origin: left #{"/* rtl:ignore */"}
  &--inactive
    opacity: .85
.q-tabs
  position: relative
  transition: color .3s, background-color .3s
  &--scrollable
    &.q-tabs__arrows--outside
      &.q-tabs--horizontal
        padding-left: 36px
        padding-right: 36px
      &.q-tabs--vertical
        padding-top: 36px
        padding-bottom: 36px
      .q-tabs__arrow--faded
        opacity: 0.3
        pointer-events: none
    &.q-tabs__arrows--inside
      .q-tabs__arrow--faded
        display: none
  &--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
    transition: opacity .3s
  &__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 #{"/* rtl:ignore */"}
      bottom: 0
    &--right
      top: 0
      right: 0 #{"/* rtl:ignore */"}
      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
.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: var(--q-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: var(--q-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: var(--q-primary)
      color: #fff
  @for $pos from 0 through 11
    $angle: (270 + 30 * $pos)
    $top: (1 + sin($angle))
    $left: (1 + cos($angle))
    &__clock-pos-#{$pos}
      top: toFixed(percentage($top * 0.5), 100)
      left: toFixed(percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
  @for $pos from 12 through 23
    $angle: (270 + 30 * $pos)
    $top: (1 + sin($angle))
    $left: (1 + cos($angle))
    &__clock-pos-#{$pos}
      top: toFixed(percentage(.15 + $top * .35), 100)
      left: toFixed(percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
  &__now-button
    background-color: var(--q-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
    box-shadow: $dark-shadow-2
.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: .6
    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
      > svg,
      > img
        width: 1em
        height: 1em
  &__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
    -webkit-print-color-adjust: exact
    &--indet
      .q-toggle__thumb
        left: .45em
    &--truthy
      color: var(--q-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: var(--q-primary)
    .q-toggle__thumb
      &:after
        box-shadow: none
      &: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: 31px
    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
    font-size: 21px
  &__img
    height: 42px
    border-radius: 2px
  &__avatar, &__node-header-content .q-avatar
    font-size: 28px
    border-radius: 50%
    width: 28px
    height: 28px
  &__arrow,
  &__spinner
    font-size: 16px
    margin-right: 4px
  &__arrow
    transition: transform .3s
    &--rotate
      transform: rotate3d(0, 0, 1, 90deg)
  &__tickbox
    margin-right: 4px
  
  > .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
  &--dense
    > .q-tree__node--child > .q-tree__node-header
      padding-left: 1px
    .q-tree
      &__arrow,
      &__spinner
        margin-right: 1px
      &__img
        height: 32px
      &__tickbox
        margin-right: 3px
      &__node
        padding: 0
        &:after
          top: 0
          left: -8px
      &__node-header
        margin-top: 0
        padding: 1px
        &:before
          top: 0
          left: -8px
          width: 8px
      &__node--child
        padding-left: 17px
        > .q-tree__node-header:before
          left: -25px
          width: 21px
      &__node-body
        padding: 0 0 2px
      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
        padding: 0 0 2px 20px
        &:after
          left: 8px
      &__children
        padding-left: 16px
[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
    z-index: 1 
    
    &::-webkit-file-upload-button
      cursor: pointer
  &__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: var(--q-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%, rgba(255,255,255,0))
    & + &
      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
    box-shadow: $dark-shadow-2
    .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
img.responsive
  max-width: 100%
  height: auto
.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
  &__content
    outline: none
    contain: content
    > *
      overflow-anchor: none
    > [data-q-vs-anchor]
      overflow-anchor: auto
  &__padding
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"}
    background-size: var(--q-virtual-scroll-item-width, 100%) var(--q-virtual-scroll-item-height, 50px) #{"/* rtl:ignore */"}
    .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, rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"}
        background-size: var(--q-virtual-scroll-item-width, 50px) var(--q-virtual-scroll-item-height, 100%) #{"/* rtl:ignore */"}
.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-morph--invisible,
.q-morph--internal
  opacity: 0 !important
  pointer-events: none !important
  position: fixed !important
  right: 200vw !important
  bottom: 200vh !important
.q-loading
  color: #000
  
  position: fixed !important
  &__backdrop
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    opacity: .5
    z-index: -1
    background-color: #000
    transition: background-color .28s
  &__box
    border-radius: $generic-border-radius
    padding: 18px
    color: #fff
    max-width: 450px
  &__message
    margin: 40px 20px 0
    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
    flex: 0 0 1em
    &--additional
      margin-right: 16px
  &__avatar
    font-size: 32px
    &--additional
      margin-right: 8px
  &__spinner
    font-size: 32px
    &--additional
      margin-right: 8px
  &__message
    padding: 8px 0
  &__caption
    font-size: 0.9em
    opacity: 0.7
  &__actions
    color: var(--q-primary)
  &__badge
    animation: q-notif-badge .42s
    padding: 4px 8px
    position: absolute
    box-shadow: $shadow-1
    background-color: var(--q-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-from, &--top-left-leave-to,
  &--top-enter-from, &--top-leave-to,
  &--top-right-enter-from, &--top-right-leave-to
    opacity: 0
    transform: translateY(-50px)
    z-index: ($z-notify - 1)
  &--left-enter-from, &--left-leave-to,
  &--center-enter-from, &--center-leave-to,
  &--right-enter-from, &--right-leave-to
    opacity: 0
    transform: rotateX(90deg)
    z-index: ($z-notify - 1)
  &--bottom-left-enter-from, &--bottom-left-leave-to,
  &--bottom-enter-from, &--bottom-leave-to,
  &--bottom-right-enter-from, &--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)
/*
 * Animate.css additions
 * Adapted from: https:
 */
\:root
  --animate-duration: #{$animate-duration}
  --animate-delay: #{$animate-delay}
  --animate-repeat: #{$animate-repeat}
.animated
  animation-duration: var(--animate-duration)
  animation-fill-mode: both
  &.infinite
    animation-iteration-count: infinite
  
  &.hinge
    animation-duration: 2s
  &.repeat-1
    animation-iteration-count: var(--animate-repeat)
  &.repeat-2
    animation-iteration-count: calc(var(--animate-repeat) * 2)
  &.repeat-3
    animation-iteration-count: calc(var(--animate-repeat) * 3)
  &.delay-1s
    animation-delay: var(--animate-delay)
  &.delay-2s
    animation-delay: calc(var(--animate-delay) * 2)
  &.delay-3s
    animation-delay: calc(var(--animate-delay) * 3)
  &.delay-4s
    animation-delay: calc(var(--animate-delay) * 4)
  &.delay-5s
    animation-delay: calc(var(--animate-delay) * 5)
  &.faster
    animation-duration: calc(var(--animate-duration) / 2)
  &.fast
    animation-duration: calc(var(--animate-duration) * 0.8)
  &.slow
    animation-duration: calc(var(--animate-duration) * 2)
  &.slower
    animation-duration: calc(var(--animate-duration) * 3)
@media print, (prefers-reduced-motion: reduce)
  .animated
    animation-duration: 1ms !important
    transition-duration: 1ms !important
    animation-iteration-count: 1 !important
  .animated[class*='Out']
    opacity: 0
.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-primary:      #{$primary}
  --q-secondary:    #{$secondary}
  --q-accent:       #{$accent}
  --q-positive:     #{$positive}
  --q-negative:     #{$negative}
  --q-info:         #{$info}
  --q-warning:      #{$warning}
  --q-dark:         #{$dark}
  --q-dark-page:    #{$dark-page}
.text-dark
  color: var(--q-dark) !important
.bg-dark
  background: var(--q-dark) !important
.text-primary
  color: var(--q-primary) !important
.bg-primary
  background: var(--q-primary) !important
.text-secondary
  color: var(--q-secondary) !important
.bg-secondary
  background: var(--q-secondary) !important
.text-accent
  color: var(--q-accent) !important
.bg-accent
  background: var(--q-accent) !important
.text-positive
  color: var(--q-positive) !important
.bg-positive
  background: var(--q-positive) !important
.text-negative
  color: var(--q-negative) !important
.bg-negative
  background: var(--q-negative) !important
.text-info
  color: var(--q-info) !important
.bg-info
  background: var(--q-info) !important
.text-warning
  color: var(--q-warning) !important
.bg-warning
  background: var(--q-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 from 1 through 24
  .shadow-#{$z}
    box-shadow: nth($shadows, $z)
  .shadow-up-#{$z}
    box-shadow: nth($shadows-up, $z)
.inset-shadow
  box-shadow: $inset-shadow
.inset-shadow-down
  box-shadow: $inset-shadow-down
body.body--dark
  @for $z from 1 through 24
    .shadow-#{$z}
      box-shadow: nth($dark-shadows, $z)
    .shadow-up-#{$z}
      box-shadow: nth($dark-shadows-up, $z)
  .inset-shadow
    box-shadow: $inset-dark-shadow
  .inset-shadow-down
    box-shadow: $inset-dark-shadow-down
.no-shadow, .shadow-0
  box-shadow: none !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
@mixin 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 from 0 through $flex-cols
      $ic: quote('' + $i)
      #{str-fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
        @extend .col#{$name}-auto
      .row
        #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height: auto
          width: toFixed(percentage($i / $flex-cols), 10000)
        @if $i != 0 or $name != ''
          #{str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
            margin-left: toFixed(percentage($i / $flex-cols), 10000)
      .column
        #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height: toFixed(percentage($i / $flex-cols), 10000)
          width: auto
      @if $size == 0 and $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
  @extend .items-center
  @extend .justify-center
@each $name, $size in $flex-gutter
  .q-gutter
    &-x-#{$name}
      margin-left: -$size
      > *
        margin-left: $size
    &-y-#{$name}
      margin-top: -$size
      > *
        margin-top: $size
    &-#{$name}
      @extend .q-gutter-x-#{$name}
      @extend .q-gutter-y-#{$name}
  .q-col-gutter
    &-x-#{$name}
      margin-left: -$size
      > *
        padding-left: $size
    &-y-#{$name}
      margin-top: -$size
      > *
        padding-top: $size
    &-#{$name}
      @extend .q-col-gutter-x-#{$name}
      @extend .q-col-gutter-y-#{$name}
@each $name, $size in $sizes
  @include fg("-" + $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-x
  overflow-x: scroll
.q-body--force-scrollbar-y
  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
  &--focusable:focus-visible
    text-decoration: underline dashed currentColor 1px
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,
.no-pointer-events--children,
.no-pointer-events--children *
  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]
  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-225
  transform: rotate(225deg) #{"/* 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
body.q-ios-padding .fullscreen
  padding-top: $ios-statusbar-height !important
  padding-top: env(safe-area-inset-top) !important
  padding-bottom: env(safe-area-inset-bottom) !important
.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
  @each $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
@each $space, $value in $spaces
  .q-pa-#{$space}
    padding: map-get($value, "y") map-get($value, "x")
  .q-pl-#{$space}
    padding-left: map-get($value, "x")
  .q-pr-#{$space}
    padding-right: map-get($value, "x")
  .q-pt-#{$space}
    padding-top: map-get($value, "y")
  .q-pb-#{$space}
    padding-bottom: map-get($value, "y")
  .q-px-#{$space}
    padding-left: map-get($value, "x")
    padding-right: map-get($value, "x")
  .q-py-#{$space}
    padding-top: map-get($value, "y")
    padding-bottom: map-get($value, "y")
  .q-ma-#{$space}
    margin: map-get($value, "y") map-get($value, "x")
  .q-ml-#{$space}
    margin-left: map-get($value, "x")
  .q-mr-#{$space}
    margin-right: map-get($value, "x")
  .q-mt-#{$space}
    margin-top: map-get($value, "y")
  .q-mb-#{$space}
    margin-bottom: map-get($value, "y")
  .q-mx-#{$space}
    margin-left: map-get($value, "x")
    margin-right: map-get($value, "x")
  .q-my-#{$space}
    margin-top: map-get($value, "y")
    margin-bottom: map-get($value, "y")
.q-mt-auto, .q-my-auto
  margin-top: auto
.q-ml-auto
  margin-left: auto
.q-mb-auto, .q-my-auto
  margin-bottom: 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
\:root
  --q-transition-duration: .3s
.q-transition
  &--slide-right,
  &--slide-left,
  &--slide-up,
  &--slide-down,
  &--jump-right,
  &--jump-left,
  &--jump-up,
  &--jump-down,
  &--fade,
  &--scale,
  &--rotate,
  &--flip
    &-enter-active,
    &-leave-active
      --q-transition-duration: .3s
      --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
    &-leave-active
      position: absolute
  &--slide-right,
  &--slide-left,
  &--slide-up,
  &--slide-down
    &-enter-active,
    &-leave-active
      transition: transform var(--q-transition-duration) var(--q-transition-easing)
  &--slide-right
    &-enter-from
      transform: translate3d(-100%, 0, 0)
    &-leave-to
      transform: translate3d(100%, 0, 0)
  &--slide-left
    &-enter-from
      transform: translate3d(100%, 0, 0)
    &-leave-to
      transform: translate3d(-100%, 0, 0)
  &--slide-up
    &-enter-from
      transform: translate3d(0, 100%, 0)
    &-leave-to
      transform: translate3d(0, -100%, 0)
  &--slide-down
    &-enter-from
      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 var(--q-transition-duration), transform var(--q-transition-duration)
    &-enter-from,
    &-leave-to
      opacity: 0
  &--jump-right
    &-enter-from
      transform: translate3d(-15px, 0, 0)
    &-leave-to
      transform: translate3d(15px, 0, 0)
  &--jump-left
    &-enter-from
      transform: translate3d(15px, 0, 0)
    &-leave-to
      transform: translateX(-15px)
  &--jump-up
    &-enter-from
      transform: translate3d(0, 15px, 0)
    &-leave-to
      transform: translate3d(0, -15px, 0)
  &--jump-down
    &-enter-from
      transform: translate3d(0, -15px, 0)
    &-leave-to
      transform: translate3d(0, 15px, 0)
  &--fade
    &-enter-active,
    &-leave-active
      transition: opacity var(--q-transition-duration) ease-out
    &-enter-from,
    &-leave-to
      opacity: 0
  &--scale
    &-enter-active,
    &-leave-active
      transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
    &-enter-from,
    &-leave-to
      opacity: 0
      transform: scale3d(0, 0, 1)
  &--rotate
    &-enter-active,
    &-leave-active
      transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
      transform-style: preserve-3d
    &-enter-from,
    &-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 var(--q-transition-duration)
      backface-visibility: hidden
    &-enter-to,
    &-leave-from
      transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
  &--flip-right
    &-enter-from
      transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
    &-leave-to
      transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
  &--flip-left
    &-enter-from
      transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
    &-leave-to
      transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
  &--flip-up
    &-enter-from
      transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
    &-leave-to
      transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
  &--flip-down
    &-enter-from
      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
@each $heading, $value in $h-tags
  #{$heading}
    font-size: map-get($value, "size")
    font-weight: map-get($value, "weight")
    line-height: map-get($value, "line-height")
    letter-spacing: map-get($value, "letter-spacing")
p
  margin: 0 0 map-get(map-get($spaces, "md"), "y")
.text-
  @each $heading, $value in $headings
    &#{$heading}
      font-size: map-get($value, "size")
      font-weight: map-get($value, "weight")
      line-height: map-get($value, "line-height")
      letter-spacing: map-get($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
  @each $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, .invisible *
  visibility: hidden !important
  transition: none !important
  animation: none !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 #{"/* rtl:ignore */"}
    bottom: 0
    left: 0 #{"/* rtl:ignore */"}
.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
$platforms: desktop, mobile, native-mobile, cordova, capacitor, electron, touch, within-iframe, platform-ios, platform-android
@each $type in $platforms
  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, .q-focusable, .q-manual-focusable, .q-hoverable
  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 #{"/* rtl:ignore */"}
      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: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: var(--q-dark-page)
.q-dark
  color: #fff
  background: var(--q-dark)