{"mappings":"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","sources":["scss/gralig.scss","scss/abstracts/_variables.scss","scss/base/_reset.scss","scss/base/_base.scss","scss/base/_typography.scss","scss/abstracts/_mixins.scss","scss/base/_utilities.scss","scss/grid/_main.scss","scss/grid/_columns.scss","scss/components/_button.scss","scss/components/_alert.scss","scss/components/_card.scss","scss/components/_list.scss","scss/components/_table.scss","scss/components/_modal.scss","scss/components/_image.scss","scss/components/_breadcrumb.scss","scss/components/_nav.scss","scss/components/_navbar.scss","scss/components/_progress.scss","scss/components/_loading.scss","scss/components/_form.scss","scss/components/_checkbox.scss","scss/components/_radio.scss","scss/components/_switch.scss","scss/components/_dropdown.scss","scss/components/_footer.scss"],"sourcesContent":["@charset \"utf-8\";\n\n@import \"abstracts/all\";\n@import \"modes/modes\";\n@import \"base/all\";\n@import \"grid/all\";\n@import \"components/all\";\n","//**********************\n/* MAIN VARIABLES\n***********************/\n$blackpearl: hsl(206, 20%, 7%);\n$woodsmoke: hsl(200, 7%, 8%);\n$shark: hsl(207, 13%, 14%);\n\n$abbey: hsl(205, 7%, 40%);\n$raven: lighten($abbey, 8%);\n$oslo: lighten($abbey, 18%);\n$mischka: lighten($abbey, 28%);\n$ghost: lighten($abbey, 38%);\n$iron: lighten($abbey, 46%);\n$porcelain: lighten($abbey, 55%);\n\n$white: hsl(0, 0%, 100%);\n\n$summer: hsl(201, 66%, 54%);\n$summer-dark: darken($summer, 8%);\n$summer-darker: darken($summer, 16%);\n$summer-light: lighten($summer, 8%);\n$summer-lighter: lighten($summer, 16%);\n\n$shamrock: hsl(166, 66%, 54%);\n$shamrock-dark: darken($shamrock, 8%);\n$shamrock-darker: darken($shamrock, 16%);\n$shamrock-light: lighten($shamrock, 8%);\n$shamrock-lighter: lighten($shamrock, 16%);\n\n$tulip: hsl(47, 82%, 54%);\n$tulip-dark: darken($tulip, 8%);\n$tulip-darker: darken($tulip, 16%);\n$tulip-light: lighten($tulip, 8%);\n$tulip-lighter: lighten($tulip, 16%);\n\n$flame: hsl(0, 66%, 54%);\n$flame-dark: darken($flame, 8%);\n$flame-darker: darken($flame, 16%);\n$flame-light: lighten($flame, 8%);\n$flame-lighter: lighten($flame, 16%);\n\n$font-size: 1.6rem;\n$font-size-s: 1.4rem;\n$font-size-m: 1.8rem;\n\n$font-thin: lighter;\n$font-normal: normal;\n$font-bold: bold;\n\n$font-family-general: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n  Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n$font-family: \"Catamaran\", sans-serif;\n\n$heading-1: $font-size * 2.75;\n$heading-2: $font-size * 2.25;\n$heading-3: $font-size * 1.75;\n$heading-4: $font-size * 1.5;\n$heading-5: $font-size * 1.125;\n$heading-6: $font-size * 1;\n\n$space-xxs: 0.2rem;\n$space-xs: 0.4rem;\n$space-s: 0.8rem;\n$space: 1.2rem;\n$space-m: 1.6rem;\n$space-l: 2.4rem;\n$space-xl: 3.2rem;\n$space-xxl: 6.4rem;\n\n$line-height-s: 1.2;\n$line-height: 1.5;\n$line-height-m: 1.6;\n$line-height-l: 1.7;\n\n$el-height: 3.8rem;\n$el-height-s: 3.1rem;\n$el-height-l: 4.2rem;\n\n$border-radius: 0.2rem;\n$border-radius-full: 50%;\n\n$transition-default: all 0.15s ease-in;\n$transition-secondary: all 0.3s ease-in;\n$transparent: transparent;\n\n$progress-bar: 1.4rem;\n$progress-bar-s: 1rem;\n$progress-bar-l: 2rem;\n\n$progress-circle: 6rem;\n$progress-circle-s: 3rem;\n$progress-circle-l: 8rem;\n\n//**********************\n/* DERIVED VARIABLES\n***********************/\n\n$color-background: $white;\n$color-font: $abbey;\n$color-font-secondary: $oslo;\n$color-font-revert: $porcelain;\n$color-main: $abbey;\n$color-secondary: $raven;\n$color-lighter: $porcelain;\n$color-light: $iron;\n\n$color-blue: $summer;\n$color-blue-light: $summer-light;\n$color-blue-lighter: $summer-lighter;\n$color-blue-dark: $summer-dark;\n$color-blue-darker: $summer-darker;\n\n$color-yellow: $tulip;\n$color-yellow-light: $tulip-light;\n$color-yellow-lighter: $tulip-lighter;\n$color-yellow-dark: $tulip-dark;\n$color-yellow-darker: $tulip-darker;\n\n$color-green: $shamrock;\n$color-green-light: $shamrock-light;\n$color-green-lighter: $shamrock-lighter;\n$color-green-dark: $shamrock-dark;\n$color-green-darker: $shamrock-darker;\n\n$color-red: $flame;\n$color-red-light: $flame-light;\n$color-red-lighter: $flame-lighter;\n$color-red-dark: $flame-dark;\n$color-red-darker: $flame-darker;\n\n$color-mute: $ghost;\n$color-mark: $tulip-light;\n$color-code: $porcelain;\n$color-button-font: $white;\n$color-alert: $raven;\n$color-alert-font: $porcelain;\n$color-link-font: $oslo;\n$color-link-hover: $color-main;\n\n$color-border: $iron;\n$color-border-dark: $raven;\n$color-switch-bg: $mischka;\n\n$p-size: $font-size * 1;\n$p-s-size: $font-size * 0.8125;\n$p-l-size: $font-size * 1.125;\n\n$el-font-size: $font-size * 0.8125;\n$el-font-size-s: $font-size * 0.6875;\n$el-font-size-l: $font-size * 0.9375;\n\n$content-padding-inline: $space-xl;\n$content-padding-block: $space-m;\n\n$color-input-disabled: $color-lighter;\n$color-input-placeholder: $mischka;\n\n$el-box-shadow: 0 0 3px 1px rgba($color-main, 0.5);\n$el-box-shadow-blue: 0 0 3px 1px rgba($color-blue, 0.5);\n$el-box-shadow-green: 0 0 3px 1px rgba($color-green, 0.5);\n$el-box-shadow-yellow: 0 0 3px 1px rgba($color-yellow, 0.5);\n$el-box-shadow-red: 0 0 3px 1px rgba($color-red, 0.5);\n\n//**********************\n/* DARK THEME\n***********************/\n\n$color-font-dt: $iron;\n$color-font-secondary-dt: $ghost;\n$color-font-revert-dt: $woodsmoke;\n$color-background-dt: $woodsmoke;\n$color-main-dt: $raven;\n$color-secondary-dt: $oslo;\n$color-button-font-dt: $woodsmoke;\n$color-border-dt: $abbey;\n$color-border-light-dt: $oslo;\n$color-code-dt: $shark;\n$color-mute-dt: darken($abbey, 8%);\n$color-alert-dt: $oslo;\n$color-alert-font-dt: $shark;\n$color-card-dt: $shark;\n$color-link-font-dt: $oslo;\n$color-link-hover-dt: $ghost;\n$color-input-disabled-dt: rgba($iron, 0.2);\n$color-input-placeholder-dt: $abbey;\n\n//**********************\n/* BREAKPOINTS\n***********************/\n$breakpoint-xl: 120em; //1920px // tv, big monitors\n$breakpoint-l: 75em; //1200px // tablet land\n$breakpoint-m: 62.5em; //1000px // tablet mid\n$breakpoint-s: 50em; //800px // tablet\n$breakpoint-xs: 37.5em; //600px // mobile\n\n$search-icon: \"data:image/svg+xml,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.643 6.107a3.755 3.755 0 01-3.75 3.75 3.755 3.755 0 01-3.75-3.75 3.755 3.755 0 013.75-3.75 3.755 3.755 0 013.75 3.75zm4.286 6.965c0-.285-.118-.561-.31-.754l-2.871-2.87A5.89 5.89 0 005.893.214 5.89 5.89 0 000 6.106a5.89 5.89 0 009.233 4.855l2.87 2.863c.193.2.47.318.754.318.586 0 1.072-.486 1.072-1.072z' fill='%236F7880'/%3E%3C/svg%3E\";\n","html,\nbody,\np,\nol,\nul,\nli,\ndl,\ndt,\ndd,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0;\n  padding: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: 100%;\n  font-weight: normal;\n}\n\nul {\n  list-style: none;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  margin: 0;\n}\n\nhtml {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\niframe {\n  border: 0;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\ntd:not([align]),\nth:not([align]) {\n  text-align: left;\n}\n","html {\n  font-family: $font-family-general;\n  font-size: 62.5%; // 10px/16px = 62.5% <<<>>> 1rem = 10px;\n  text-size-adjust: none;\n}\n\nbody {\n  background-color: $color-background;\n  color: $color-font;\n  font-family: $font-family;\n  font-size: $font-size;\n  font-weight: $font-normal;\n  line-height: 1.5;\n  text-rendering: optimizeLegibility;\n}\n\n.dark {\n  background-color: $color-background-dt;\n  color: $color-font-dt;\n}\n","// stylelint-disable selector-no-qualifying-type\nstrong,\nb {\n  font-weight: $font-bold;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: Consolas, Menlo, Courier, monospace;\n  font-size: 0.75em;\n}\n\ncode {\n  padding: $space-xxs $space-xs;\n  border: 1px solid $iron;\n  background-color: $color-code;\n  border-radius: $border-radius;\n  margin-inline: 1px;\n  @include moder($modes) {\n    border: 1px solid mode(\"colorBorder\");\n    background-color: mode(\"colorCode\");\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: $font-bold;\n}\n\n.gra-heading,\n.gra-subheading {\n  margin-bottom: $space-s;\n  line-height: $line-height-s;\n}\n\n.gra-subheading {\n  color: $color-font-secondary;\n  font-weight: $font-normal;\n  @include moder($modes) {\n    color: mode(\"colorFontSecondary\");\n  }\n}\n\nh1 {\n  font-size: $heading-1;\n  letter-spacing: -0.15rem;\n}\n\nh2 {\n  font-size: $heading-2;\n  letter-spacing: -0.15rem;\n}\n\nh3 {\n  font-size: $heading-3;\n  letter-spacing: -0.1rem;\n}\n\nh4 {\n  font-size: $heading-4;\n  letter-spacing: -0.1rem;\n}\n\nh5 {\n  font-size: $heading-5;\n  letter-spacing: -0.05rem;\n}\n\nh6 {\n  font-size: $heading-6;\n  letter-spacing: -0.05rem;\n}\n\na,\n.gra-link {\n  color: $color-link-font;\n  cursor: pointer;\n  font-weight: $font-thin;\n  text-decoration: none;\n  @include moder($modes) {\n    color: mode(\"colorLinkFont\");\n  }\n\n  &:hover,\n  &:focus {\n    color: $color-link-hover;\n    outline: none;\n    @include moder($modes) {\n      color: mode(\"colorLinkHover\");\n    }\n  }\n\n  &:not(.disabled):not([disabled]):not(.gra-btn):not(.gra-nav-link):not(.gra-breadcrumb-link):hover {\n    text-decoration: underline;\n  }\n\n  &.disabled,\n  &[disabled] {\n    color: $color-mute;\n    cursor: not-allowed;\n    opacity: 1;\n    outline: none;\n    user-select: none;\n    @include moder($modes) {\n      color: mode(\"colorMute\");\n    }\n  }\n\n  &.current {\n    font-weight: $font-bold;\n\n    &:hover {\n      color: $color-link-font;\n      @include moder($modes) {\n        color: mode(\"colorLinkFont\");\n      }\n    }\n  }\n}\n\np,\n.gra-p {\n  margin-bottom: $content-padding-block;\n  font-size: $p-size;\n}\n\n.gra-p-small {\n  margin-bottom: $space-s;\n  font-size: $p-s-size;\n  line-height: $line-height-m;\n}\n\n.gra-p-large {\n  margin-bottom: $space-l;\n  font-size: $p-l-size;\n  line-height: $line-height-l;\n}\n\n.gra-text {\n  &-secondary {\n    color: $color-font-secondary;\n    @include moder($modes) {\n      color: mode(\"colorFontSecondary\");\n    }\n  }\n\n  &-yellow {\n    color: $color-yellow;\n\n    &-light {\n      color: $color-yellow-light;\n    }\n\n    &-lighter {\n      color: $color-yellow-lighter;\n    }\n\n    &-dark {\n      color: $color-yellow-dark;\n    }\n\n    &-darker {\n      color: $color-yellow-darker;\n    }\n  }\n\n  &-red {\n    color: $color-red;\n\n    &-light {\n      color: $color-red-light;\n    }\n\n    &-lighter {\n      color: $color-red-lighter;\n    }\n\n    &-dark {\n      color: $color-red-dark;\n    }\n\n    &-darker {\n      color: $color-red-darker;\n    }\n  }\n\n  &-green {\n    color: $color-green;\n\n    &-light {\n      color: $color-green-light;\n    }\n\n    &-lighter {\n      color: $color-green-lighter;\n    }\n\n    &-dark {\n      color: $color-green-dark;\n    }\n\n    &-darker {\n      color: $color-green-darker;\n    }\n  }\n\n  &-blue {\n    color: $color-blue;\n\n    &-light {\n      color: $color-blue-light;\n    }\n\n    &-lighter {\n      color: $color-blue-lighter;\n    }\n\n    &-dark {\n      color: $color-blue-dark;\n    }\n\n    &-darker {\n      color: $color-blue-darker;\n    }\n  }\n\n  &-muted {\n    color: $color-mute;\n    @include moder($modes) {\n      color: mode(\"colorMute\");\n    }\n  }\n\n  &-marked {\n    background-color: $color-mark;\n  }\n}\n","// themify mixin taken from https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1\n@mixin moder($modes: $modes) {\n  @each $mode, $map in $modes {\n    .#{$mode} & {\n      $mode-map: () !global;\n\n      @each $key, $submap in $map {\n        $value: map-get(map-get($modes, $mode), \"#{$key}\");\n        $mode-map: map-merge(\n          $mode-map,\n          (\n            $key: $value\n          )\n        ) !global;\n      }\n\n      @content;\n      $mode-map: null !global;\n    }\n  }\n}\n\n// Min-width breakpoints\n@mixin min-width($size) {\n  @media screen and (min-width: $size) {\n    @content;\n  }\n}\n\n// Max-width breakpoints\n@mixin max-width($size) {\n  @media screen and (max-width: $size) {\n    @content;\n  }\n}\n\n@mixin caret-icon($deg, $x, $y, $color) {\n  width: 8px;\n  height: 8px;\n  border-right: 1px solid $color;\n  border-bottom: 1px solid $color;\n  transform: rotate($deg) translate($x, $y);\n}\n",".gra-blue-bg {\n  background-color: $color-blue !important;\n}\n\n.gra-green-bg {\n  background-color: $color-green !important;\n}\n\n.gra-yellow-bg {\n  background-color: $color-yellow !important;\n}\n\n.gra-red-bg {\n  background-color: $color-red !important;\n}\n\n.gra-blue-color {\n  color: $color-blue !important;\n}\n\n.gra-green-color {\n  color: $color-green !important;\n}\n\n.gra-yellow-color {\n  color: $color-yellow !important;\n}\n\n.gra-red-color {\n  color: $color-red !important;\n}\n\n.gra-center-text {\n  text-align: center !important;\n}\n\n.gra-right-text {\n  text-align: right !important;\n}\n\n.gra-left-text {\n  text-align: left !important;\n}\n\n.gra-bold-text {\n  font-weight: $font-bold !important;\n}\n\n.gra-normal-text {\n  font-weight: $font-normal !important;\n}\n\n.gra-thin-text {\n  font-weight: $font-thin !important;\n}\n\n.gra-width-100 {\n  width: 100% !important;\n}\n\n.gra-height-100 {\n  height: 100% !important;\n}\n\n.gra-img-responsive {\n  width: 100% !important;\n  height: auto !important;\n}\n\n.gra-none {\n  display: none !important;\n}\n\n.gra-block {\n  display: block !important;\n}\n\n.gra-inline {\n  display: inline !important;\n}\n\n.gra-inline-block {\n  display: inline-block !important;\n}\n\n.gra-flex {\n  display: flex !important;\n}\n\n.gra-flex-col {\n  flex-direction: column !important;\n}\n\n.gra-flex-row {\n  flex-direction: row !important;\n}\n\n.gra-flex-ai-c {\n  align-items: center !important;\n}\n\n.gra-flex-ai-start {\n  align-items: flex-start !important;\n}\n\n.gra-flex-ai-end {\n  align-items: flex-end !important;\n}\n\n.gra-flex-ai-sb {\n  align-items: space-between !important;\n}\n\n.gra-flex-jc-c {\n  justify-content: center !important;\n}\n\n.gra-flex-jc-start {\n  justify-content: flex-start !important;\n}\n\n.gra-flex-jc-end {\n  justify-content: flex-end !important;\n}\n\n.gra-flex-jc-sb {\n  justify-content: space-between !important;\n}\n\n.gra-bg-cover {\n  background-size: cover !important;\n}\n\n.gra-bg-contain {\n  background-size: contain !important;\n}\n\n.gra-bg-norepeat {\n  background-repeat: no-repeat !important;\n}\n\n.gra-absolute {\n  position: absolute !important;\n}\n\n.gra-relative {\n  position: relative !important;\n}\n\n.gra-fixed {\n  position: fixed !important;\n}\n\n.gra-sticky {\n  position: sticky !important;\n}\n\n// spaces\n.gra-pd-left-xxs {\n  padding-left: $space-xxs !important;\n}\n\n.gra-pd-left-xs {\n  padding-left: $space-xs !important;\n}\n\n.gra-pd-left-s {\n  padding-left: $space-s !important;\n}\n\n.gra-pd-left-m {\n  padding-left: $space-m !important;\n}\n\n.gra-pd-left-l {\n  padding-left: $space-l !important;\n}\n\n.gra-pd-left-xl {\n  padding-left: $space-xl !important;\n}\n\n.gra-pd-left-xxl {\n  padding-left: $space-xxl !important;\n}\n\n.gra-pd-right-xxs {\n  padding-right: $space-xxs !important;\n}\n\n.gra-pd-right-xs {\n  padding-right: $space-xs !important;\n}\n\n.gra-pd-right-s {\n  padding-right: $space-s !important;\n}\n\n.gra-pd-right-m {\n  padding-right: $space-m !important;\n}\n\n.gra-pd-right-l {\n  padding-right: $space-l !important;\n}\n\n.gra-pd-right-xl {\n  padding-right: $space-xl !important;\n}\n\n.gra-pd-right-xxl {\n  padding-right: $space-xxl !important;\n}\n\n.gra-pd-top-xxs {\n  padding-top: $space-xxs !important;\n}\n\n.gra-pd-top-xs {\n  padding-top: $space-xs !important;\n}\n\n.gra-pd-top-s {\n  padding-top: $space-s !important;\n}\n\n.gra-pd-top-m {\n  padding-top: $space-m !important;\n}\n\n.gra-pd-top-l {\n  padding-top: $space-l !important;\n}\n\n.gra-pd-top-xl {\n  padding-top: $space-xl !important;\n}\n\n.gra-pd-top-xxl {\n  padding-top: $space-xxl !important;\n}\n\n.gra-pd-bottom-xxs {\n  padding-bottom: $space-xxs !important;\n}\n\n.gra-pd-bottom-xs {\n  padding-bottom: $space-xs !important;\n}\n\n.gra-pd-bottom-s {\n  padding-bottom: $space-s !important;\n}\n\n.gra-pd-bottom-m {\n  padding-bottom: $space-m !important;\n}\n\n.gra-pd-bottom-l {\n  padding-bottom: $space-l !important;\n}\n\n.gra-pd-bottom-xl {\n  padding-bottom: $space-xl !important;\n}\n\n.gra-pd-bottom-xxl {\n  padding-bottom: $space-xxl !important;\n}\n\n.gra-pd-inline-xxs {\n  padding-inline: $space-xxs !important;\n}\n\n.gra-pd-inline-xs {\n  padding-inline: $space-xs !important;\n}\n\n.gra-pd-inline-s {\n  padding-inline: $space-s !important;\n}\n\n.gra-pd-inline-m {\n  padding-inline: $space-m !important;\n}\n\n.gra-pd-inline-l {\n  padding-inline: $space-l !important;\n}\n\n.gra-pd-inline-xl {\n  padding-inline: $space-xl !important;\n}\n\n.gra-pd-inline-xxl {\n  padding-inline: $space-xxl !important;\n}\n\n.gra-pd-block-xxs {\n  padding-block: $space-xxs !important;\n}\n\n.gra-pd-block-xs {\n  padding-block: $space-xs !important;\n}\n\n.gra-pd-block-s {\n  padding-block: $space-s !important;\n}\n\n.gra-pd-block-m {\n  padding-block: $space-m !important;\n}\n\n.gra-pd-block-l {\n  padding-block: $space-l !important;\n}\n\n.gra-pd-block-xl {\n  padding-block: $space-xl !important;\n}\n\n.gra-pd-block-xxl {\n  padding-block: $space-xxl !important;\n}\n\n.gra-pd-all-xxs {\n  padding-block: $space-xxs !important;\n  padding-inline: $space-xxs !important;\n}\n\n.gra-pd-all-xs {\n  padding-block: $space-xs !important;\n  padding-inline: $space-xs !important;\n}\n\n.gra-pd-all-s {\n  padding-block: $space-s !important;\n  padding-inline: $space-s !important;\n}\n\n.gra-pd-all-m {\n  padding-block: $space-m !important;\n  padding-inline: $space-m !important;\n}\n\n.gra-pd-all-l {\n  padding-block: $space-l !important;\n  padding-inline: $space-l !important;\n}\n\n.gra-pd-all-xl {\n  padding-block: $space-xl !important;\n  padding-inline: $space-xl !important;\n}\n\n.gra-pd-all-xxl {\n  padding-block: $space-xxl !important;\n  padding-inline: $space-xxl !important;\n}\n\n// margins\n\n.gra-mg-left-xxs {\n  margin-left: $space-xxs !important;\n}\n\n.gra-mg-left-xs {\n  margin-left: $space-xs !important;\n}\n\n.gra-mg-left-s {\n  margin-left: $space-s !important;\n}\n\n.gra-mg-left-m {\n  margin-left: $space-m !important;\n}\n\n.gra-mg-left-l {\n  margin-left: $space-l !important;\n}\n\n.gra-mg-left-xl {\n  margin-left: $space-xl !important;\n}\n\n.gra-mg-left-xxl {\n  margin-left: $space-xxl !important;\n}\n\n.gra-mg-right-xxs {\n  margin-right: $space-xxs !important;\n}\n\n.gra-mg-right-xs {\n  margin-right: $space-xs !important;\n}\n\n.gra-mg-right-s {\n  margin-right: $space-s !important;\n}\n\n.gra-mg-right-m {\n  margin-right: $space-m !important;\n}\n\n.gra-mg-right-l {\n  margin-right: $space-l !important;\n}\n\n.gra-mg-right-xl {\n  margin-right: $space-xl !important;\n}\n\n.gra-mg-right-xxl {\n  margin-right: $space-xxl !important;\n}\n\n.gra-mg-top-xxs {\n  margin-top: $space-xxs !important;\n}\n\n.gra-mg-top-xs {\n  margin-top: $space-xs !important;\n}\n\n.gra-mg-top-s {\n  margin-top: $space-s !important;\n}\n\n.gra-mg-top-m {\n  margin-top: $space-m !important;\n}\n\n.gra-mg-top-l {\n  margin-top: $space-l !important;\n}\n\n.gra-mg-top-xl {\n  margin-top: $space-xl !important;\n}\n\n.gra-mg-top-xxl {\n  margin-top: $space-xxl !important;\n}\n\n.gra-mg-bottom-xxs {\n  margin-bottom: $space-xxs !important;\n}\n\n.gra-mg-bottom-xs {\n  margin-bottom: $space-xs !important;\n}\n\n.gra-mg-bottom-s {\n  margin-bottom: $space-s !important;\n}\n\n.gra-mg-bottom-m {\n  margin-bottom: $space-m !important;\n}\n\n.gra-mg-bottom-l {\n  margin-bottom: $space-l !important;\n}\n\n.gra-mg-bottom-xl {\n  margin-bottom: $space-xl !important;\n}\n\n.gra-mg-bottom-xxl {\n  margin-bottom: $space-xxl !important;\n}\n\n.gra-mg-inline-xxs {\n  margin-inline: $space-xxs !important;\n}\n\n.gra-mg-inline-xs {\n  margin-inline: $space-xs !important;\n}\n\n.gra-mg-inline-s {\n  margin-inline: $space-s !important;\n}\n\n.gra-mg-inline-m {\n  margin-inline: $space-m !important;\n}\n\n.gra-mg-inline-l {\n  margin-inline: $space-l !important;\n}\n\n.gra-mg-inline-xl {\n  margin-inline: $space-xl !important;\n}\n\n.gra-mg-inline-xxl {\n  margin-inline: $space-xxl !important;\n}\n\n.gra-mg-block-xxs {\n  margin-block: $space-xxs !important;\n}\n\n.gra-mg-block-xs {\n  margin-block: $space-xs !important;\n}\n\n.gra-mg-block-s {\n  margin-block: $space-s !important;\n}\n\n.gra-mg-block-m {\n  margin-block: $space-m !important;\n}\n\n.gra-mg-block-l {\n  margin-block: $space-l !important;\n}\n\n.gra-mg-block-xl {\n  margin-block: $space-xl !important;\n}\n\n.gra-mg-block-xxl {\n  margin-block: $space-xxl !important;\n}\n\n.gra-mg-all-xxs {\n  margin-block: $space-xxs !important;\n  margin-inline: $space-xxs !important;\n}\n\n.gra-mg-all-xs {\n  margin-block: $space-xs !important;\n  margin-inline: $space-xs !important;\n}\n\n.gra-mg-all-s {\n  margin-block: $space-s !important;\n  margin-inline: $space-s !important;\n}\n\n.gra-mg-all-m {\n  margin-block: $space-m !important;\n  margin-inline: $space-m !important;\n}\n\n.gra-mg-all-l {\n  margin-block: $space-l !important;\n  margin-inline: $space-l !important;\n}\n\n.gra-mg-all-xl {\n  margin-block: $space-xl !important;\n  margin-inline: $space-xl !important;\n}\n\n.gra-mg-all-xxl {\n  margin-block: $space-xxl !important;\n  margin-inline: $space-xxl !important;\n}\n\n// colors\n\n.gra-blackpearl {\n  color: $blackpearl !important;\n}\n\n.gra-woodsmoke {\n  color: $woodsmoke !important;\n}\n\n.gra-shark {\n  color: $shark !important;\n}\n\n.gra-abbey {\n  color: $abbey !important;\n}\n\n.gra-raven {\n  color: $raven !important;\n}\n\n.gra-oslo {\n  color: $oslo !important;\n}\n\n.gra-mischka {\n  color: $mischka !important;\n}\n\n.gra-ghost {\n  color: $ghost !important;\n}\n\n.gra-iron {\n  color: $iron !important;\n}\n\n.gra-porcelain {\n  color: $porcelain !important;\n}\n\n.gra-summer-lighter {\n  color: $summer-lighter !important;\n}\n\n.gra-summer-light {\n  color: $summer-light !important;\n}\n\n.gra-summer {\n  color: $summer !important;\n}\n\n.gra-summer-dark {\n  color: $summer-dark !important;\n}\n\n.gra-summer-darker {\n  color: $summer-darker !important;\n}\n\n.gra-shamrock-lighter {\n  color: $shamrock-lighter !important;\n}\n\n.gra-shamrock-light {\n  color: $shamrock-light !important;\n}\n\n.gra-shamrock {\n  color: $shamrock !important;\n}\n\n.gra-shamrock-dark {\n  color: $shamrock-dark !important;\n}\n\n.gra-shamrock-darker {\n  color: $shamrock-darker !important;\n}\n\n.gra-tulip-lighter {\n  color: $tulip-lighter !important;\n}\n\n.gra-tulip-light {\n  color: $tulip-light !important;\n}\n\n.gra-tulip {\n  color: $tulip !important;\n}\n\n.gra-tulip-dark {\n  color: $tulip-dark !important;\n}\n\n.gra-tulip-darker {\n  color: $tulip-darker !important;\n}\n\n.gra-flame-lighter {\n  color: $flame-lighter !important;\n}\n\n.gra-flame-light {\n  color: $flame-light !important;\n}\n\n.gra-flame {\n  color: $flame !important;\n}\n\n.gra-flame-dark {\n  color: $flame-dark !important;\n}\n\n.gra-flame-darker {\n  color: $flame-darker !important;\n}\n\n// bg colors\n\n.gra-blackpearl-bg {\n  background-color: $blackpearl !important;\n}\n\n.gra-woodsmoke-bg {\n  background-color: $woodsmoke !important;\n}\n\n.gra-shark-bg {\n  background-color: $shark !important;\n}\n\n.gra-abbey-bg {\n  background-color: $abbey !important;\n}\n\n.gra-raven-bg {\n  background-color: $raven !important;\n}\n\n.gra-oslo-bg {\n  background-color: $oslo !important;\n}\n\n.gra-mischka-bg {\n  background-color: $mischka !important;\n}\n\n.gra-ghost-bg {\n  background-color: $ghost !important;\n}\n\n.gra-iron-bg {\n  background-color: $iron !important;\n}\n\n.gra-porcelain-bg {\n  background-color: $porcelain !important;\n}\n\n.gra-summer-lighter-bg {\n  background-color: $summer-lighter !important;\n}\n\n.gra-summer-light-bg {\n  background-color: $summer-light !important;\n}\n\n.gra-summer-bg {\n  background-color: $summer !important;\n}\n\n.gra-summer-dark-bg {\n  background-color: $summer-dark !important;\n}\n\n.gra-summer-darker-bg {\n  background-color: $summer-darker !important;\n}\n\n.gra-shamrock-lighter-bg {\n  background-color: $shamrock-lighter !important;\n}\n\n.gra-shamrock-light-bg {\n  background-color: $shamrock-light !important;\n}\n\n.gra-shamrock-bg {\n  background-color: $shamrock !important;\n}\n\n.gra-shamrock-dark-bg {\n  background-color: $shamrock-dark !important;\n}\n\n.gra-shamrock-darker-bg {\n  background-color: $shamrock-darker !important;\n}\n\n.gra-tulip-lighter-bg {\n  background-color: $tulip-lighter !important;\n}\n\n.gra-tulip-light-bg {\n  background-color: $tulip-light !important;\n}\n\n.gra-tulip-bg {\n  background-color: $tulip !important;\n}\n\n.gra-tulip-dark-bg {\n  background-color: $tulip-dark !important;\n}\n\n.gra-tulip-darker-bg {\n  background-color: $tulip-darker !important;\n}\n\n.gra-flame-lighter-bg {\n  background-color: $flame-lighter !important;\n}\n\n.gra-flame-light-bg {\n  background-color: $flame-light !important;\n}\n\n.gra-flame-bg {\n  background-color: $flame !important;\n}\n\n.gra-flame-dark-bg {\n  background-color: $flame-dark !important;\n}\n\n.gra-flame-darker-bg {\n  background-color: $flame-darker !important;\n}\n",".gra-container {\n  position: relative;\n  width: 100%;\n  margin: 0 auto;\n  padding-inline: $space;\n  @include min-width($breakpoint-l) {\n    max-width: 114rem;\n  }\n\n  &.full {\n    @include min-width($breakpoint-l) {\n      max-width: 100%;\n    }\n  }\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n\n  @include min-width($breakpoint-xs) {\n    width: calc(100% + #{$space} * 2);\n    flex-direction: row;\n    margin-left: -$space;\n  }\n\n  &.row-mobile {\n    width: calc(100% + #{$space} * 2);\n    flex-direction: row;\n    margin-left: -$space;\n  }\n}\n",".col {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 1 0;\n  padding-block: $space;\n\n  @include min-width($breakpoint-xs) {\n    padding-inline: $space;\n\n    &.col-10 {\n      max-width: 10%;\n      flex: 0 0 10%;\n    }\n\n    &.col-16 {\n      max-width: 16.66666666%;\n      flex: 0 0 16.66666666%;\n    }\n\n    &.col-20 {\n      max-width: 20%;\n      flex: 0 0 20%;\n    }\n\n    &.col-25 {\n      max-width: 25%;\n      flex: 0 0 25%;\n    }\n\n    &.col-30 {\n      max-width: 30%;\n      flex: 0 0 30%;\n    }\n\n    &.col-33 {\n      max-width: 33.33333333%;\n      flex: 0 0 33.33333333%;\n    }\n\n    &.col-40 {\n      max-width: 40%;\n      flex: 0 0 40%;\n    }\n\n    &.col-50 {\n      max-width: 50%;\n      flex: 0 0 50%;\n    }\n\n    &.col-60 {\n      max-width: 60%;\n      flex: 0 0 60%;\n    }\n\n    &.col-67 {\n      max-width: 66.66666666%;\n      flex: 0 0 66.66666666%;\n    }\n\n    &.col-70 {\n      max-width: 70%;\n      flex: 0 0 70%;\n    }\n\n    &.col-75 {\n      max-width: 75%;\n      flex: 0 0 75%;\n    }\n\n    &.col-80 {\n      max-width: 80%;\n      flex: 0 0 80%;\n    }\n\n    &.col-84 {\n      max-width: 83.33333333%;\n      flex: 0 0 83.33333333%;\n    }\n\n    &.col-90 {\n      max-width: 90%;\n      flex: 0 0 90%;\n    }\n\n    //offsets\n    &.col-span-10 {\n      margin-left: 10%;\n    }\n\n    &.col-span-16 {\n      margin-left: 16.66666666%;\n    }\n\n    &.col-span-20 {\n      margin-left: 20%;\n    }\n\n    &.col-span-25 {\n      margin-left: 25%;\n    }\n\n    &.col-span-30 {\n      margin-left: 30%;\n    }\n\n    &.col-span-33 {\n      margin-left: 33.33333333%;\n    }\n\n    &.col-span-40 {\n      margin-left: 40%;\n    }\n\n    &.col-span-50 {\n      margin-left: 50%;\n    }\n\n    &.col-span-60 {\n      margin-left: 60%;\n    }\n\n    &.col-span-67 {\n      margin-left: 66.66666666%;\n    }\n\n    &.col-span-70 {\n      margin-left: 70%;\n    }\n\n    &.col-span-75 {\n      margin-left: 75%;\n    }\n\n    &.col-span-80 {\n      margin-left: 80%;\n    }\n\n    &.col-span-84 {\n      margin-left: 83.33333333%;\n    }\n\n    &.col-span-90 {\n      margin-left: 90%;\n    }\n  }\n}\n\n.gra-row.gra-row-mobile {\n  .gra-col {\n    padding-inline: $space;\n\n    &.col-10 {\n      max-width: 10%;\n      flex: 0 0 10%;\n    }\n\n    &.col-16 {\n      max-width: 16.66666666%;\n      flex: 0 0 16.66666666%;\n    }\n\n    &.col-20 {\n      max-width: 20%;\n      flex: 0 0 20%;\n    }\n\n    &.col-25 {\n      max-width: 25%;\n      flex: 0 0 25%;\n    }\n\n    &.col-30 {\n      max-width: 30%;\n      flex: 0 0 30%;\n    }\n\n    &.col-33 {\n      max-width: 33.33333333%;\n      flex: 0 0 33.33333333%;\n    }\n\n    &.col-40 {\n      max-width: 40%;\n      flex: 0 0 40%;\n    }\n\n    &.col-50 {\n      max-width: 50%;\n      flex: 0 0 50%;\n    }\n\n    &.col-60 {\n      max-width: 60%;\n      flex: 0 0 60%;\n    }\n\n    &.col-67 {\n      max-width: 66.66666666%;\n      flex: 0 0 66.66666666%;\n    }\n\n    &.col-70 {\n      max-width: 70%;\n      flex: 0 0 70%;\n    }\n\n    &.col-75 {\n      max-width: 75%;\n      flex: 0 0 75%;\n    }\n\n    &.col-80 {\n      max-width: 80%;\n      flex: 0 0 80%;\n    }\n\n    &.col-84 {\n      max-width: 83.33333333%;\n      flex: 0 0 83.33333333%;\n    }\n\n    &.col-90 {\n      max-width: 90%;\n      flex: 0 0 90%;\n    }\n\n    //offsets\n    &.col-span-10 {\n      margin-left: 10%;\n    }\n\n    &.col-span-16 {\n      margin-left: 16.66666666%;\n    }\n\n    &.col-span-20 {\n      margin-left: 20%;\n    }\n\n    &.col-span-25 {\n      margin-left: 25%;\n    }\n\n    &.col-span-30 {\n      margin-left: 30%;\n    }\n\n    &.col-span-33 {\n      margin-left: 33.33333333%;\n    }\n\n    &.col-span-40 {\n      margin-left: 40%;\n    }\n\n    &.col-span-50 {\n      margin-left: 50%;\n    }\n\n    &.col-span-60 {\n      margin-left: 60%;\n    }\n\n    &.col-span-67 {\n      margin-left: 66.66666666%;\n    }\n\n    &.col-span-70 {\n      margin-left: 70%;\n    }\n\n    &.col-span-75 {\n      margin-left: 75%;\n    }\n\n    &.col-span-80 {\n      margin-left: 80%;\n    }\n\n    &.col-span-84 {\n      margin-left: 83.33333333%;\n    }\n\n    &.col-span-90 {\n      margin-left: 90%;\n    }\n  }\n}\n",".gra-btn {\n  &,\n  &:link,\n  &:visited {\n    $color-button-font: $white;\n    display: inline-flex;\n    height: $el-height;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    background-color: $color-main;\n    border-radius: $border-radius;\n    color: $color-button-font;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: $el-font-size;\n    font-weight: $font-bold;\n    letter-spacing: 0.08rem;\n    line-height: 1;\n    padding-block: 0;\n    padding-inline: $content-padding-inline;\n    text-align: center;\n    text-transform: uppercase;\n    user-select: none;\n    white-space: nowrap;\n    @include moder($modes) {\n      background-color: mode(\"colorMain\");\n      color: mode(\"colorFontButton\");\n    }\n\n    &:not([disabled]):hover {\n      opacity: 0.8;\n    }\n\n    &:not([disabled]):focus {\n      box-shadow: $el-box-shadow;\n      outline: none;\n    }\n\n    &.disabled,\n    &[disabled] {\n      cursor: not-allowed;\n      opacity: 0.2;\n    }\n\n    &.gra-btn-outline {\n      border: 1px solid $color-main;\n      background-color: transparent;\n      color: $color-main;\n      @include moder($modes) {\n        background-color: mode(\"transparentColor\");\n        color: mode(\"colorMain\");\n      }\n\n      &:hover {\n        opacity: 0.7;\n      }\n    }\n\n    &.gra-btn-blue {\n      background-color: $color-blue;\n\n      &:focus {\n        box-shadow: $el-box-shadow-blue;\n      }\n\n      &.gra-btn-outline {\n        border: 1px solid $color-blue;\n        background-color: transparent;\n        color: $color-blue;\n      }\n\n      &.gra-btn-clear {\n        background-color: transparent;\n        color: $color-blue;\n      }\n    }\n\n    &.gra-btn-yellow {\n      background-color: $color-yellow;\n\n      &:focus {\n        box-shadow: $el-box-shadow-yellow;\n      }\n\n      &.gra-btn-outline {\n        border: 1px solid $color-yellow;\n        background-color: transparent;\n        color: $color-yellow;\n      }\n\n      &.gra-btn-clear {\n        background-color: transparent;\n        color: $color-yellow;\n      }\n    }\n\n    &.gra-btn-green {\n      background-color: $color-green;\n\n      &:focus {\n        box-shadow: $el-box-shadow-green;\n      }\n\n      &.gra-btn-outline {\n        border: 1px solid $color-green;\n        background-color: transparent;\n        color: $color-green;\n      }\n\n      &.gra-btn-clear {\n        background-color: transparent;\n        color: $color-green;\n      }\n    }\n\n    &.gra-btn-red {\n      background-color: $color-red;\n\n      &:focus {\n        box-shadow: $el-box-shadow-red;\n      }\n\n      &.gra-btn-outline {\n        border: 1px solid $color-red;\n        background-color: transparent;\n        color: $color-red;\n      }\n\n      &.gra-btn-clear {\n        background-color: transparent;\n        color: $color-red;\n      }\n    }\n\n    &.gra-btn-small {\n      height: $el-height-s;\n      font-size: $el-font-size-s;\n      padding-inline: $space-m;\n    }\n\n    &.gra-btn-large {\n      height: $el-height-l;\n      font-size: $el-font-size-l;\n    }\n\n    &.gra-btn-clear {\n      background-color: transparent;\n      color: $color-main;\n      padding-inline: $space-m;\n      @include moder($modes) {\n        background-color: mode(\"transparentColor\");\n        color: mode(\"darkButtonBackground\");\n      }\n    }\n\n    &.gra-btn-full-width {\n      width: 100%;\n    }\n  }\n}\n",".gra-alert {\n  display: inline-block;\n  min-width: 100%;\n  height: calc(#{$el-height-s} - 1px);\n  background-color: $color-alert;\n  border-radius: $border-radius;\n  color: $color-alert-font;\n  font-size: 1.4rem;\n  line-height: $el-height-s;\n  padding-inline: $content-padding-inline;\n  @include moder($modes) {\n    background-color: mode(\"colorAlert\");\n    color: mode(\"colorAlertFont\");\n  }\n  @include min-width($breakpoint-xs) {\n    width: 42rem;\n    min-width: 42rem;\n  }\n\n  &.green {\n    background-color: $color-green;\n  }\n\n  &.yellow {\n    background-color: $color-yellow;\n  }\n\n  &.blue {\n    background-color: $color-blue;\n  }\n\n  &.red {\n    background-color: $color-red;\n  }\n}\n",".gra-card {\n  display: flex;\n  width: 100%;\n  min-width: 20rem;\n  flex-direction: column;\n  margin-bottom: $space;\n  border: 1px solid $color-border;\n  border-radius: $border-radius;\n  @include moder($modes) {\n    background-color: mode(\"colorCardBg\");\n    border-color: mode(\"transparentColor\");\n  }\n\n  &.gra-card-horizontal {\n    flex-direction: row;\n  }\n\n  &-title {\n    border-bottom: 1px solid $color-border;\n    font-weight: $font-bold;\n    line-height: 1;\n    padding-block: $content-padding-block;\n    padding-inline: $content-padding-inline;\n    @include moder($modes) {\n      border-color: mode(\"colorBorder\");\n    }\n  }\n\n  &-media-wrapper {\n    overflow: hidden;\n    flex: 1;\n    margin-top: -1px;\n    margin-right: -1px;\n    margin-left: -1px;\n    border-top-left-radius: $border-radius;\n    border-top-right-radius: $border-radius;\n\n    * {\n      display: block;\n    }\n  }\n\n  &-media-bottom {\n    .gra-card-media-wrapper {\n      margin-top: 0;\n      margin-bottom: -1px;\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n\n    &.gra-card {\n      flex-direction: column-reverse;\n    }\n  }\n\n  &-media-left {\n    .gra-card-media-wrapper {\n      margin-right: 0;\n      margin-bottom: -1px;\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: 0;\n      border-top-left-radius: $border-radius;\n      border-top-right-radius: 0;\n    }\n  }\n\n  &-media-right {\n    .gra-card-media-wrapper {\n      margin-bottom: -1px;\n      margin-left: 0;\n      border-bottom-right-radius: $border-radius;\n      border-top-left-radius: 0;\n      border-top-right-radius: $border-radius;\n    }\n\n    &.gra-card {\n      flex-direction: row-reverse;\n    }\n  }\n\n  &-content {\n    flex: 1;\n  }\n\n  &-body {\n    padding-block: $content-padding-block;\n    padding-inline: $content-padding-inline;\n  }\n\n  p {\n    margin-bottom: 0;\n  }\n}\n",".gra-list {\n  padding-block: $content-padding-block;\n  padding-inline: $content-padding-inline;\n\n  > :first-child {\n    padding-top: 0;\n  }\n\n  > :last-child {\n    padding-bottom: 0;\n  }\n\n  &-item {\n    display: flex;\n    width: 100%;\n    line-height: $line-height-s;\n    padding-block: $space;\n    word-break: break-word;\n\n    &:not(:last-child) {\n      border-bottom: 1px solid $color-border;\n      @include moder($modes) {\n        border-color: mode(\"colorBorder\");\n      }\n    }\n  }\n}\n\n.gra-block-list {\n  height: auto;\n  border: 1px solid $color-border;\n  border-radius: $border-radius;\n  padding-block: $content-padding-block;\n  padding-inline: $content-padding-inline;\n  @include moder($modes) {\n    border-color: mode(\"colorBorder\");\n  }\n\n  > :first-child {\n    padding-top: 0;\n  }\n\n  > :last-child {\n    padding-bottom: 0;\n  }\n}\n",".gra-table {\n  width: 100%;\n  min-width: $breakpoint-xs;\n  border-spacing: 0;\n\n  &-wrapper {\n    overflow-x: auto;\n  }\n\n  td,\n  th {\n    border-bottom: 1px solid $color-border;\n    padding-block: $space;\n    padding-inline: $space-m;\n    text-align: left;\n    @include moder($modes) {\n      border-color: mode(\"colorBorder\");\n    }\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    &:last-child {\n      padding-right: 0;\n    }\n  }\n\n  &.gra-table-bordered {\n    td,\n    th {\n      border: 1px solid $color-border;\n\n      &:first-child {\n        padding-left: $space-m;\n      }\n\n      &:last-child {\n        padding-right: $space-m;\n      }\n    }\n  }\n}\n",".gra-modal {\n  position: absolute;\n  z-index: 199;\n  top: 50%;\n  left: 50%;\n  width: 52rem;\n  max-width: 52rem;\n  background: $color-background;\n  border-radius: $border-radius;\n  transform: translate(-50%, -50%);\n  transition: $transition-secondary;\n  @include moder($modes) {\n    background-color: mode(\"colorCardBg\");\n  }\n  @include min-width($breakpoint-l) {\n    width: 72rem;\n    max-width: 72rem;\n  }\n\n  &-overlay {\n    position: absolute;\n    z-index: 191;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba($color: $color-main, $alpha: 0.8);\n    cursor: default;\n    @include moder($modes) {\n      background-color: rgba($color: mode(\"colorMain\"), $alpha: 0.5);\n    }\n\n    &:hover {\n      background-color: rgba($color: $color-main, $alpha: 0.8);\n      @include moder($modes) {\n        background-color: rgba($color: mode(\"colorMain\"), $alpha: 0.5);\n      }\n    }\n  }\n\n  &-wrapper {\n    display: none;\n    position: fixed;\n    z-index: 190;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    visibility: hidden;\n\n    &:target {\n      display: block;\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n\n  &-header {\n    border-bottom: 1px solid $color-border;\n    padding-block: $space;\n    padding-inline: $content-padding-inline;\n    @include moder($modes) {\n      border-color: mode(\"colorBorder\");\n    }\n  }\n\n  &-body {\n    padding-block: $space-l;\n    padding-inline: $content-padding-inline;\n  }\n\n  &-footer {\n    display: block;\n    border-top: 1px solid $color-border;\n    padding-block: $space;\n    padding-inline: $content-padding-inline;\n    @include moder($modes) {\n      border-color: mode(\"colorBorder\");\n    }\n  }\n\n  &-actions {\n    display: flex;\n    justify-content: flex-end;\n\n    .btn:not(:first-child) {\n      margin-left: $space-xs;\n    }\n  }\n}\n","img {\n  max-width: 100%;\n  height: auto;\n  border-style: none;\n}\n\n.gra-object-fit {\n  @supports (object-fit: cover) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  @supports not (object-fit: cover) {\n    width: 100%;\n    max-width: 720px;\n    height: auto;\n  }\n}\n",".gra-breadcrumb {\n  border: 1px solid $color-border;\n  border-radius: $border-radius;\n  padding-block: $content-padding-block;\n  padding-inline: $content-padding-inline;\n  @include moder($modes) {\n    border-color: mode(\"colorBorder\");\n  }\n\n  &-list {\n    display: flex;\n  }\n\n  &-item {\n    position: relative;\n    font-size: $font-size-s;\n\n    &:not(:first-child) {\n      padding-left: $space-l;\n    }\n\n    &:not(:first-child) > a::before {\n      @include caret-icon(-45deg, 0, -50%, $color-main);\n      display: inline-block;\n      position: absolute;\n      top: 50%;\n      left: -4px;\n      margin-top: -2px;\n      content: \"\";\n      @include moder($modes) {\n        border-color: mode(\"colorBorder\");\n      }\n    }\n\n    &:not(:last-child) {\n      margin-right: $space-l;\n    }\n  }\n\n  &-item > .current {\n    cursor: default;\n  }\n}\n","nav {\n  display: flex;\n}\n\n.gra-nav {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n\n  &-fill {\n    width: 100%;\n\n    .gra-nav-item {\n      flex: 1 1 auto;\n      text-align: center;\n    }\n  }\n\n  &-item {\n    position: relative;\n    font-size: $font-size-s;\n    padding-inline: $space-m;\n    @include min-width($breakpoint-xs) {\n      font-size: $font-size;\n    }\n  }\n\n  &-link {\n    display: inline-block;\n    position: relative;\n    padding-block: $space-s;\n    padding-inline: $space-s;\n\n    &:not(.disabled, [disabled])::after {\n      position: absolute;\n      bottom: 6px;\n      left: 50%;\n      width: 0;\n      height: 0;\n      background-color: $color-main;\n      border-radius: $border-radius-full;\n      content: \"\";\n      transform: translateX(-50%);\n      transition: $transition-default;\n      @include moder($modes) {\n        background-color: mode(\"colorLinkHover\");\n      }\n    }\n\n    &:hover {\n      &:not([disabled]):not(.disabled)::after {\n        width: 4px;\n        height: 4px;\n      }\n    }\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &.current::after {\n      width: 4px;\n      height: 4px;\n      @include moder($modes) {\n        background-color: mode(\"colorMain\");\n      }\n    }\n  }\n}\n",".gra-navbar {\n  display: flex;\n  height: 5.6rem;\n  min-height: 5.6rem;\n  border-bottom: 1px solid $color-border;\n  @include moder($modes) {\n    background-color: mode(\"colorCardBg\");\n    border-color: mode(\"colorBorder\");\n  }\n  @include min-width($breakpoint-xs) {\n    height: 7rem;\n    max-height: 7rem;\n  }\n\n  > .gra-container {\n    display: flex;\n    align-items: center;\n  }\n\n  &-logo {\n    display: flex;\n    max-width: 9.2rem;\n    flex-shrink: 0;\n    align-items: stretch;\n    margin-left: -$space-m;\n    padding-inline: $space-m;\n    @include min-width($breakpoint-xs) {\n      max-width: 12rem;\n    }\n  }\n\n  &-logo-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &-content {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: flex-end;\n  }\n}\n",".gra-progress {\n  &-bar {\n    display: inline-block;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: $progress-bar;\n    background-color: $color-lighter;\n    border-radius: $border-radius;\n    @include moder($modes) {\n      background-color: mode(\"colorCardBg\");\n    }\n\n    &.small {\n      height: $progress-bar-s;\n    }\n\n    &.large {\n      height: $progress-bar-l;\n    }\n\n    &-value {\n      display: inline-block;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 100%;\n      height: 100%;\n      background-color: $color-secondary;\n      border-radius: inherit;\n      transform: translateX(-100%);\n\n      &.blue {\n        background-color: $color-blue;\n      }\n\n      &.green {\n        background-color: $color-green;\n      }\n\n      &.yellow {\n        background-color: $color-yellow;\n      }\n\n      &.red {\n        background-color: $color-red;\n      }\n    }\n  }\n\n  &-circle {\n    position: relative;\n    width: $progress-circle;\n    height: $progress-circle;\n\n    &.small {\n      width: $progress-circle-s;\n      height: $progress-circle-s;\n    }\n\n    &.large {\n      width: $progress-circle-l;\n      height: $progress-circle-l;\n    }\n\n    svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    circle {\n      stroke-width: 0.8em;\n    }\n\n    &-back {\n      fill: $color-lighter;\n      @include moder($modes) {\n        fill: mode(\"colorCardBg\");\n      }\n    }\n\n    &-value {\n      // dashoffset 380 = 0% & 147 = 100%\n      stroke: $color-secondary;\n      stroke-dasharray: 380;\n      stroke-dashoffset: 380;\n      transform: rotate(-90deg);\n      transform-origin: center;\n    }\n\n    &.blue {\n      .gra-progress-circle-value {\n        stroke: $color-blue;\n      }\n    }\n\n    &.green {\n      .gra-progress-circle-value {\n        stroke: $color-green;\n      }\n    }\n\n    &.yellow {\n      .gra-progress-circle-value {\n        stroke: $color-yellow;\n      }\n    }\n\n    &.red {\n      .gra-progress-circle-value {\n        stroke: $color-red;\n      }\n    }\n  }\n}\n",".gra-progress-bar {\n  &.gra-loading {\n    .gra-progress-bar-value {\n      width: 38%;\n      animation-duration: 1.4s;\n      animation-iteration-count: infinite;\n      animation-name: progress-bar;\n    }\n  }\n}\n\n@keyframes progress-bar {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(265%);\n  }\n}\n\n.gra-progress-circle {\n  &.gra-loading {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    .gra-progress-circle-back {\n      fill: none;\n    }\n\n    .gra-progress-circle-value {\n      stroke: $color-light;\n      @include moder($modes) {\n        stroke: mode(\"colorLoadings\");\n      }\n    }\n\n    &.gra-circle-turn-pieces {\n      .gra-progress-circle-value {\n        animation-duration: 2.5s;\n        animation-iteration-count: infinite;\n        animation-name: circle-turn-pieces;\n        animation-timing-function: cubic-bezier(0.27, 0.82, 0.83, 0.67);\n        stroke-dasharray: 52;\n      }\n    }\n\n    &.gra-circle-turn {\n      .gra-progress-circle-value {\n        animation-duration: 1.2s;\n        animation-iteration-count: infinite;\n        animation-name: circle-turn;\n        animation-timing-function: linear;\n        stroke-dasharray: 170;\n      }\n    }\n  }\n}\n\n@keyframes circle-turn {\n  0% {\n    transform: rotate(-90deg);\n  }\n\n  100% {\n    transform: rotate(630deg);\n  }\n}\n\n@keyframes circle-turn-pieces {\n  0% {\n    transform: rotate(90deg);\n  }\n\n  50% {\n    transform: rotate(810deg);\n  }\n\n  100% {\n    transform: rotate(90deg);\n  }\n}\n\n.gra-loading {\n  &-dots {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n  }\n\n  &-dot {\n    display: inline-block;\n    width: 1.4rem;\n    height: 1.4rem;\n    animation-duration: 0.8s;\n    animation-iteration-count: infinite;\n    animation-name: progress-dot;\n    animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n    background: $color-light;\n    border-radius: $border-radius;\n    margin-inline: 2px;\n    @include moder($modes) {\n      background: mode(\"colorLoadings\");\n    }\n\n    &.dot-1 {\n      animation-delay: 0s;\n    }\n\n    &.dot-2 {\n      animation-delay: 0.1s;\n    }\n\n    &.dot-3 {\n      animation-delay: 0.2s;\n    }\n  }\n}\n\n@keyframes progress-dot {\n  0% {\n    transform: scale(0.4);\n  }\n\n  30% {\n    transform: scale(1.2);\n  }\n\n  60% {\n    transform: scale(0.4);\n  }\n\n  100% {\n    transform: scale(0.4);\n  }\n}\n","// stylelint-disable selector-no-qualifying-type\n// stylelint-disable media-feature-name-no-vendor-prefix\nfieldset {\n  border: 0;\n}\n\nlegend,\nlabel {\n  display: block;\n  font-weight: $font-bold;\n}\n\nlabel {\n  margin-bottom: $space-xs;\n  cursor: pointer;\n}\n\nlegend {\n  text-align: center;\n}\n\n@media screen and (min--moz-device-pixel-ratio: 0) {\n  // for firefox\n  fieldset {\n    position: relative;\n    padding-top: 3.2rem;\n\n    > legend {\n      position: absolute;\n      top: 0;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n}\n\ninput[type=\"email\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"url\"],\ntextarea,\nselect {\n  width: 100%;\n  box-sizing: inherit;\n  padding: $space-s $space-m;\n  border: 1px solid $color-border;\n  background-color: $transparent;\n  border-radius: $border-radius;\n  box-shadow: none;\n  color: $color-font;\n  font-family: $font-family;\n  font-size: $font-size-s;\n  line-height: normal;\n  vertical-align: middle;\n  @include moder($modes) {\n    background-color: mode(\"colorCardBg\");\n    border-color: mode(\"colorBorder\");\n    color: mode(\"colorFont\");\n  }\n\n  &:focus,\n  &:hover {\n    border-color: $color-border-dark;\n    outline: 0;\n    @include moder($modes) {\n      border-color: mode(\"colorBorderLight\");\n    }\n  }\n\n  &::placeholder {\n    color: $color-input-placeholder;\n    @include moder($modes) {\n      color: mode(\"colorInputPlaceholder\");\n    }\n  }\n\n  &:disabled {\n    background-color: $color-input-disabled;\n    cursor: not-allowed;\n    @include moder($modes) {\n      background-color: mode(\"colorInputDisabled\");\n      border-color: mode(\"transparentColor\");\n    }\n\n    &:hover,\n    &:focus {\n      border: 1px solid $color-border;\n      @include moder($modes) {\n        border-color: mode(\"transparentColor\");\n      }\n    }\n  }\n}\n\ninput[type=\"email\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"url\"] {\n  height: 4.1rem;\n  appearance: none;\n}\n\nselect {\n  height: 4.1rem;\n  border-radius: $border-radius;\n  cursor: pointer;\n}\n\ninput[type=\"search\"] {\n  padding-left: $content-padding-inline + $space-m;\n}\n\n.gra-search-input {\n  position: relative;\n\n  input[type=\"search\"] {\n    padding-left: $content-padding-inline + $space-m;\n  }\n\n  &::before {\n    display: inline-block;\n    position: absolute;\n    top: 50%;\n    left: $space-m;\n    width: 1.6rem;\n    height: 1.6rem;\n    margin-top: -8px;\n    padding-left: $space-m;\n    background-image: url($search-icon);\n    background-repeat: no-repeat;\n    background-size: cover;\n    content: \"\";\n  }\n}\n\n.gra-form-group {\n  margin-bottom: $space-l;\n}\n\n.gra-form-actions {\n  .gra-btn:not(:first-child) {\n    margin-left: $space-xs;\n  }\n}\n\n.gra-custom-form-control {\n  display: block;\n  position: relative;\n  margin-bottom: $space;\n  padding-left: calc(1.6rem + #{$space-s});\n\n  .gra-custom-form-input {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n\n    &:focus ~ .gra-custom-form-label::before {\n      box-shadow: $el-box-shadow;\n    }\n  }\n\n  .gra-custom-form-input:disabled ~ .gra-custom-form-label,\n  .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label {\n    color: $color-mute;\n    cursor: not-allowed;\n    @include moder($modes) {\n      color: mode(\"colorMute\");\n    }\n\n    &::before {\n      background: $color-mute;\n      border-color: $color-mute;\n      @include moder($modes) {\n        background-color: mode(\"colorMute\");\n        border-color: mode(\"colorMute\");\n      }\n    }\n  }\n\n  .gra-custom-form-label {\n    display: inline-block;\n    margin-bottom: 0;\n    font-weight: $font-normal;\n\n    &::before,\n    &::after {\n      display: block;\n      position: absolute;\n      content: \"\";\n    }\n\n    &::before {\n      top: 3px;\n      left: 0;\n      width: 1.6rem;\n      height: 1.6rem;\n      border: 1px solid $color-border-dark;\n      border-radius: 1px;\n      pointer-events: all;\n      transition: $transition-default;\n      user-select: none;\n      @include moder($modes) {\n        background-color: mode(\"colorCardBg\");\n        border-color: mode(\"colorBorder\");\n      }\n    }\n\n    &::after {\n      opacity: 0;\n    }\n  }\n\n  &.blue {\n    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {\n      background: $color-blue;\n      @include moder($modes) {\n        background-color: $color-blue;\n      }\n    }\n\n    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {\n      box-shadow: $el-box-shadow-blue;\n    }\n\n    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {\n      opacity: 0.5;\n    }\n  }\n\n  &.green {\n    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {\n      background: $color-green;\n      @include moder($modes) {\n        background-color: $color-green;\n      }\n    }\n\n    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {\n      box-shadow: $el-box-shadow-green;\n    }\n\n    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {\n      opacity: 0.5;\n    }\n  }\n\n  &.yellow {\n    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {\n      background: $color-yellow;\n      @include moder($modes) {\n        background-color: $color-yellow;\n      }\n    }\n\n    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {\n      box-shadow: $el-box-shadow-yellow;\n    }\n\n    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {\n      opacity: 0.5;\n    }\n  }\n\n  &.red {\n    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {\n      background: $color-red;\n      @include moder($modes) {\n        background-color: $color-red;\n      }\n    }\n\n    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {\n      box-shadow: $el-box-shadow-red;\n    }\n\n    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {\n      opacity: 0.5;\n    }\n  }\n}\n",".gra-checkbox {\n  .gra-custom-form-label {\n    &::before {\n      border-radius: $border-radius;\n    }\n\n    &::after {\n      top: 4px;\n      left: 5px;\n      width: 0.6rem;\n      height: 1.1rem;\n      border-right: 2px solid $white;\n      border-bottom: 2px solid $white;\n      border-radius: $border-radius;\n      transform: rotate(-45deg) scale(0);\n      transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;\n      @include moder($modes) {\n        border-color: mode(\"colorBackground\");\n      }\n    }\n  }\n\n  .gra-custom-form-input {\n    &:checked ~ .gra-custom-form-label::before {\n      border: 0;\n      background: $color-main;\n      @include moder($modes) {\n        background-color: mode(\"colorMain\");\n      }\n    }\n\n    &:checked ~ .gra-custom-form-label::after {\n      opacity: 1;\n      transform: rotate(45deg) scale(1);\n    }\n  }\n}\n",".gra-radio {\n  .gra-custom-form-label {\n    &::before {\n      border-radius: $border-radius-full;\n    }\n\n    &::after {\n      border-radius: $border-radius-full;\n      opacity: 0;\n      transform: scale(0);\n      transition: transform 0.3s ease-in-out;\n    }\n  }\n\n  .gra-custom-form-input {\n    &:checked ~ .gra-custom-form-label::before {\n      border: 0;\n      background-color: $color-main;\n      @include moder($modes) {\n        background-color: mode(\"colorMain\");\n      }\n    }\n\n    &:checked ~ .gra-custom-form-label::after {\n      top: 8px;\n      left: 5px;\n      width: 0.6rem;\n      height: 0.6rem;\n      background-color: $color-background;\n      opacity: 1;\n      transform: scale(1);\n      @include moder($modes) {\n        background-color: mode(\"colorBackground\");\n      }\n    }\n  }\n}\n",".gra-switch {\n  padding-left: calc(4.2rem + #{$space-s});\n\n  .gra-custom-form-label::before {\n    top: 1px;\n    width: 4.2rem;\n    height: 2rem;\n    border: 0;\n    background-color: $color-switch-bg;\n    border-radius: $border-radius;\n    @include moder($modes) {\n      border: 1px solid mode(\"colorBorder\");\n      background-color: mode(\"colorCardBg\");\n    }\n  }\n\n  .gra-custom-form-label::after {\n    top: 4px;\n    left: $space-xs;\n    width: 1.4rem;\n    height: 1.4rem;\n    border: 1px solid $white;\n    border-radius: $border-radius;\n    opacity: 1;\n    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in, transform 0.3s ease-in-out;\n    @include moder($modes) {\n      background-color: mode(\"colorBorder\");\n      border-color: mode(\"colorBorder\");\n    }\n  }\n\n  .gra-custom-form-input:checked ~ .gra-custom-form-label {\n    &::before {\n      border: 0;\n      background: $color-main;\n      @include moder($modes) {\n        background-color: mode(\"colorMain\");\n      }\n    }\n\n    &::after {\n      border: 0;\n      background-color: $color-lighter;\n      opacity: 1;\n      transform: translateX(2rem);\n      @include moder($modes) {\n        background-color: mode(\"colorBackground\");\n      }\n    }\n  }\n}\n",".gra-dropdown {\n  position: relative;\n\n  &[open] .gra-dropdown-btn {\n    box-shadow: none;\n\n    &::before {\n      display: block;\n      position: fixed;\n      z-index: 90;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background: $transparent;\n      content: \" \";\n      cursor: default;\n    }\n\n    &::after {\n      transform: rotate(-135deg) translate(-2px, -2px);\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  &:not([open]) .gra-dropdown-btn {\n    opacity: 1;\n  }\n\n  &:not([open]) .gra-dropdown-list {\n    display: block;\n    opacity: 1;\n  }\n}\n\n.gra-dropdown-list {\n  position: absolute;\n  z-index: 99;\n  top: 105%;\n  left: 0;\n  height: auto;\n  background-color: $color-background;\n  @include moder($modes) {\n    border: 0;\n    background-color: mode(\"colorCardBg\");\n  }\n\n  &-item {\n    min-width: 8rem;\n    font-size: $font-size-s;\n    padding-block: $space-s;\n  }\n}\n\n.gra-dropdown-wrapper {\n  display: inline-block;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: 0;\n  }\n}\n\n.gra-dropdown-btn {\n  margin: 0;\n\n  &::after {\n    @include caret-icon(45deg, -2px, -2px, $color-border);\n    display: inline-block;\n    margin-left: 12px;\n    content: \"\";\n    transition: $transition-default;\n    @include moder($modes) {\n      border-color: mode(\"colorIcon\");\n    }\n  }\n}\n",".gra-footer {\n  display: flex;\n  justify-content: center;\n  border-top: 1px solid $color-border;\n  font-size: $font-size-s;\n  padding-block: $space-l;\n  @include moder($modes) {\n    border-color: mode(\"colorBorder\");\n  }\n}\n"],"names":[],"version":3,"file":"gralig.css.map"}