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