@import 'template'

// forzar modo claro
body.body--dark
  background-color: white !important
  color: black !important

.rounded
  border-radius: 8px

.win-btn
  border-radius: 8px
  min-width: 160px!important
  padding: 6px 16px
  .q-btn__content
    display: flex
    flex-wrap: nowrap

@media screen and (max-width: 1000px)
  .win-btn
    min-width: 135px!important

@media screen and (max-width: 500px)
  .win-btn
    min-width: 100px!important

@media screen and (max-width: 285px)
  .win-btn
    min-width: 50px!important

.win-btn-primary
  border: 1px solid $win-info
  background-color: #ffffff00 !important
  color: black !important

.win-btn-primary:hover
  border: 1px solid $win-primary
  background-color: #ffffff00 !important
  cursor: pointer

.hover-underline
  border-bottom: 1px solid transparent
  transition: border-color 0.3s ease

.hover-underline:hover
  border-color: $primary
  cursor: pointer
  font-weight: 500

.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
  color: #000000 !important

.q-date__range-from:before
  background: $light

.q-select__dropdown-icon
  padding-right: 8px
  color: $secondary-2

.q-date__range-to:before
  background: $light !important

.q-date__range-to
  color: white

.q-date__range:before
  background: $light

.pointer_hover:hover
  cursor: pointer

.card-selected
  border: 2px solid #53aff5

.q-carousel__slide
  padding: 0px !important

.q-dialog
  .q-dialog__backdrop
    background: $low-opacity
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1)
    backdrop-filter: blur(5px)
    -webkit-backdrop-filter: blur(5px)
  .q-card.farggi_dialog
    border: 5px solid white
    background-color: white
    .card-title
      color: $farggi_blue_5
      text-align: center
      font-size: 24px
  &__inner
    &--minimized
      padding-top: 8px !important
      padding-bottom: 8px !important
      padding-right: 8px !important
      padding-left: 8px !important

.container-offers
  max-width: 900px !important

.text-small
  font-size: 0.8rem

.offer:hover
  .q-card__actions--horiz
    background: $farggi_pink_1 !important

.btn_home
  background: linear-gradient(to right , $farggi_blue_2, $farggi_blue_4)
  padding: 2px
  width: 100%
  margin-right: 16px
  cursor: pointer
  margin-bottom: 15px
  .q-btn__wrapper
    padding: 0
    margin: 0
  .btn_home_border
    width: 100%
    margin: 7px
    border: 5px solid white
    padding: 15px 10px
    color: white
    font-weight: bold
    font-size: 16px
    .row
      display: flex
      align-items: center
      justify-content: center
      background-size: cover
      background-position: center center
.btn_home:hover
  background: $farggi_blue_2
  div
    color: $farggi_blue_5

.border-radius-80
  border-radius: 80px !important

.border-radius-20
  border-radius: 20px !important

.border-radius-30
  border-radius: 30px !important

.border-radius-10
  border-radius: 10px !important

.border_bottom_farggi_grey_6
  border-bottom: 2px solid $farggi_grey_6

.farggi-title
  text-align: center
  div
    font-size: 16px
    font-family: "MontserratSemiBold"
    color: $farggi_violeta_9
    display: inline-block
    padding: 10px 40px
    background: $farggi_grey_7
    border-radius: 40px

.resumen_compras_error
  font-size: 14px
  color: #ff0000
  font-weight: bold

.resumen_compras1
  font-size: 14px
  color: #104877
  font-weight: bold

.resumen_compras2
  font-size: 14px
  color: #104877

.page-title
  font-weight: 400
  text-transform: uppercase
  font-size: 1rem
  color: $grey-8
  padding: 0 10px
  letter-spacing: 1px
  font-weight: bold

.page-subtitle
  font-weight: 400
  text-transform: uppercase
  font-size: 0.7rem
  color: $grey-8
  padding: 0 10px
  letter-spacing: 1px
  font-weight: bold

.toolbar_page_active
  height: 60px
  :before
    content: ""
    display: block
    top: 54px
    position: absolute
    background-color: $farggi_pink_1
    height: 5px
.toolbar_page_inactive
  height: 60px

.navbar_active
  font-size: medium
  border-bottom: 5px solid $primary
  a
    text-decoration: none
    color: $secondary
.page
  border-top: 3px solid $farggi_blue_1
  background: white

  .page-top
    button
      width: 150px
      height: 50px
      font-size: 0.7rem
    button.active
      background: $farggi_blue_2 !important
      color: white !important
      font-weight: bold
      border-bottom: 3px solid $farggi_pink_1
  .page-top-2
    background: $farggi_blue_1
    border-radius: 4px

.card-title
  text-transform: uppercase
  font-size: 1.1rem

.image
  background-position: center center
  background-repeat: no-repeat
  background-size: contain

.product
  .product-border
    border: 3px solid $farggi_yellow_1
    margin: 10px

  .product-margin
    padding: 10px
    color: #666

    .image
      height: 150px

    h6
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden
    h6,h5
      color: $farggi_blue_5
      font-weight: bold
    p
      height: 100px
      overflow: auto

.product
  .product-border:hover
    border-color: $farggi_blue_1
    .product-margin
      color: #333
    h6
      color: $farggi_pink_1

.catalog-category:hover
  .border_1
    border-color: $farggi_blue_4

.catalog-category
  margin: 0 3px 6px 3px
  cursor: pointer

  .border_1
    border: 6px solid $farggi_blue_1
    margin: 2px

    .border_2
      border: 3px solid $farggi_yellow_1
      margin: 2px
      position: relative

      .bg123
        position: absolute
        background: no-repeat center center
        background-size: cover
        top: 0
        height: 100%
        width: 33%
      .bg1
        left: 0
      .bg2
        left: 33%
        width: 34%
      .bg3
        left: 67%

      .bg
        height: 140px
        display: flex
        align-items: center
        justify-content: center
        background-size: cover
        background-position: center center

        .bg_text
          z-index: 2
          background: white
          max-width: 85%

          .border_text
            border: 2px solid $farggi_blue_1
            margin: 2px

            .text
              line-height: 20px
              text-transform: uppercase
              padding: 0 10px
              color: $farggi_pink_1
              font-weight: bold
              text-align: center
              font-size: 16px

.separator-title
  text-transform: uppercase
  color: $primary
  background-color: $grey-2
  padding: 10px 16px
  font-weight: 500

.drawer
  background-color: $blue-grey-10
  .q-item__label
    color: white
  .q-item__section
    color: white
.sticky-header-table
  height: calc(100vh - 150px)

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: white

  thead tr th
    position: sticky
    z-index: 1

  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */

  &.q-table--loading thead tr:last-child th
    top: 48px

.address-prev
  overflow: hidden
  max-width: 300px
  &:hover
    padding: 5px 16px
    background-color: $grey-3
    overflow-x: scroll

.draggable
  cursor: row-resize

.w2w-table

  .q-btn.icon
    font-size: 11px

  .q-table__card
    border-radius: 10px
  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    background-color: white
  tr th, tr td
    padding: 4px 8px !important
  tr th:first-of-type, tr td:first-of-type
    padding-left: 12px !important
  tr th:last-of-type, tr td:last-of-type
    padding-right: 12px !important
  tr td
    color: $primary
    font-size: 13px
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap

  .actions
    display: flex
    justify-content: center
    @media(min-width: 1024px)
      &.hoverable
        visibility: hidden
    button
      font-size: 11px
      color: rgba(0,0,0,0.8)

  tr:hover
    background: #ffffff
    .actions
      visibility: visible

  thead tr th
      position: sticky
      z-index: 1
  /* this will be the loading indicator */
  thead tr:last-child th
      top: 48px
  thead tr:first-child th
      top: 0
.q-table__bottom
  color: $primary
.q-layout
  .q-header
    background: white
    color: $dark
    .q-toolbar
      .headerLeft
        display: inline-block
        font-size: 12px
        padding-top: 10px
        border-top: 2px solid $farggi_pink_1

      > .col
        padding: 20px 0
  .lineBottom1
    border-top: 3px solid $farggi_blue_5
    min-height: 4px
  .lineBottom2
    border-top: 3px solid $farggi_pink_1
    min-height: 5px
  .menu
    color: white
    background: linear-gradient(to right , $farggi_blue_4, $farggi_blue_5)
    border-bottom: 6px solid $farggi_blue_1
    .active
      background: white
      color: indigo
    .active:before
      content: ""
      display: block
      width: 100%
      top: 54px
      position: absolute
      background-color: indigo
      height: 3px
  .lineBottom3
    border-bottom: 3px solid $farggi_blue_1
    min-height: 12px
    margin-bottom: 10px

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl
  width: 100%
  margin-right: auto
  margin-left: auto

.inline
  display: inline-block

.background-size-contain
  .q-img__image
    background-size: contain !important

.text-h7
  font-size: 1rem
  color: $farggi_blue_5
  text-transform: uppercase

.text-h6
  font-size: 1rem

.text-h8
  font-size: .9rem
  color: $farggi_blue_5

.q-item__section
  font-size: 12px

.loading-layout
  .q-page-container
    background: white
    .login-header
      font-size: 50px
      text-align: center
    .login-fotter
      font-size: 14px
      color: $farggi_blue_5
      text-align: center
    form
      background: transparent

.photo-profile
  border: 5px solid
  border-color: $farggi_blue_4

.q-table
  th
    color: $primary
    text-transform: uppercase
  tr,td
    color: $primary
  .q-field__input
    min-width: inherit
    width: 50px

$breakpoint-mobile: 599.5px
$breakpoint-tablet: 1023.5px
$xs-breakpoint: 600px
$sm-breakpoint: 1024px
$md-breakpoint: 1440px
$lg-breakpoint: 1920px

@media (max-width: $breakpoint-mobile)
  .full-width-mobile
    width: 100% !important
    margin-left: 0 !important
    margin-right: 0 !important

@media (max-width: $breakpoint-tablet)
  .q-layout
    .q-header
      .q-toolbar
        > .col
          padding: 5px 0

@media (min-width: $xs-breakpoint)
  .container,
  .container-sm
    max-width: calc(100%)

@media (min-width: $sm-breakpoint)
  .container,
  .container-sm,
  .container-md
    max-width: calc(100% - 50px)

@media (min-width: $md-breakpoint)
  .container,
  .container-sm,
  .container-md,
  .container-lg
    max-width: calc(100% - 100px)

@media (min-width: $lg-breakpoint)
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl
    max-width: calc(100% - 200px)

.verticalLine
  border-right: solid $farggi_blue_4

hr
  height: 3px
  border-width: 75
  color: #9AAFCE
  background-color: $farggi_blue_4

.q-table
  thead
    th.searchable:last-child
      border-radius: 0 4px 0 0
    th.searchable:first-child
      border-radius: 0 0 0 4px
    th.no-searchable
      opacity: 0.4
    th
      background: #d2ddf1
      > div
        input
          text-transform: none

.q-field--outlined.q-field--readonly
  .q-field__control:before
    border-style: solid !important
    border-color: $farggi_blue_2

.q-field__control
  .relative-position
    padding-left: 10px

.active-simple-card
  border-radius: 8px
  padding: 15px
  width: 200px
  height: 65px
  -webkit-box-shadow: 11px 7px 14px -2px #dfb2ff
  -moz-box-shadow: 11px 7px 14px -2px #dfb2ff
  box-shadow: 11px 7px 14px 14px #dfb2ff

.simple-card
  border-radius: 8px
  padding: 15px
  width: 200px
  height: 65px
  border: 1px solid #d5d6d7

.q-field__native
  span
    color: $secondary-2 !important

.q-table__control
  .q-btn__content
    color: $primary !important

.limit-height
  .q-select
    .q-field__control
      .q-field__native
        span
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        input
          min-height: 1px
        input:focus
          min-height: 25px !important
.text-transform-none
  text-transform: none

.font-bold
  font-family: "MontserratSemiBold" !important
  *
    font-family: "MontserratSemiBold" !important

.q-table
  th
    font-size: 13px
    text-transform: none
    font-family: "MontserratSemiBold"
    color: $primary

.qselect_custom_fotter
  text-align: center
  font-size: 11px
  font-weight: 500
  padding: 10px

@font-face
  font-family: 'Montserrat'
  src: url('fonts/Montserrat-Regular.woff2') format('woff2'), url('fonts/Montserrat-Regular.woff') format('woff')
  font-weight: normal
  font-style: normal
  font-display: swap

@font-face
  font-family: 'MontserratSemiBold'
  src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'), url('fonts/Montserrat-SemiBold.woff') format('woff')
  font-weight: 600
  font-style: normal
  font-display: swap

.fade-leave-active,
.fade-enter-active
  opacity: 1
  transition: opacity 0.5s

.fade-leave-to, .fade-enter
  opacity: 0

.win-title
  font-size: 20px
  color: black
  font-weight: 600

.win-subtitle
  font-size: 15px
  color: black
  font-weight: 400

.win-text
  font-size: 16px

.win-text-1
  font-size: 14px

.win-caption
  font-size: 12px

.win-counter-value
  font-size: 22px
  color: $primary
  font-weight: 400

.win-counter-label
  font-size: 12.5px
  color: $primary

.win-header-container
  padding-right: 14px
  padding-left: 4px

.win-dialog-card
  background: rgba(255, 255, 255, 0)
  border-radius: 16px
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1)
  backdrop-filter: blur(2.3px)
  -webkit-backdrop-filter: blur(2.3px)
  position: relative

.transp
  background: rgba(255, 255, 255, 0.25)
  border-radius: 16px
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1)
  backdrop-filter: blur(7.1px)
  -webkit-backdrop-filter: blur(7.1px)

.win-card
  background: white
  border-radius: 6.5px
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1)

.glass-card
  background: white
  border-radius: 6.5px
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1)

.glass-card-transparent
  background: rgba(255, 255, 255, 0.203)
  border-radius: 6.5px
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1)
  backdrop-filter: blur(4.6px)
  -webkit-backdrop-filter: blur(4.6px)
  border: 1px solid rgba(255, 255, 255, 0.642)

.glass-card-transp-white
  background: rgba(255, 255, 255, 0.721)
  border-radius: 6.5px
  box-shadow: 0px 2px 8px rgba(212, 212, 212, 0.497)
  backdrop-filter: blur(4.6px)
  -webkit-backdrop-filter: blur(4.6px)
  border: 1px solid rgba(255, 255, 255, 0.13)

.glass
  background: rgba(255, 255, 255, 0.783)
  border-radius: 12px
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
  backdrop-filter: blur(7.1px)
  -webkit-backdrop-filter: blur(7.1px)

.win-container
  padding-top: 25px
  padding-left: 25px
  padding-right: 25px

.overlay-message-container
  background: rgba(255, 255, 255, 0.312)
  border-radius: 12px
  backdrop-filter: blur(7.1px)
  -webkit-backdrop-filter: blur(7.1px)
  width: 340px
  height: 340px
  margin-top: 120px

@media (max-height: 768px)
  .overlay-message-container
    margin-top: 50px
    width: 300px
    height: 250px

@media (max-width: 350px)
  .overlay-message-container
    width: 275px
    height: 275px

.glass3
  background: rgba(255, 255, 255, 0.783)
  border-radius: 12px
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1)
  backdrop-filter: blur(7.1px)
  -webkit-backdrop-filter: blur(7.1px)

.card-item
  cursor: pointer
  padding: 0.75rem
  font-weight: 400

.card-label
  color: grey
  font-size: 14px
  line-height: 1

.card-value
  color: grey

.glass-card-active
  background: white
  border-radius: 6.5px
  border: 2px solid #A2D2D8
  box-sizing: border-box

.masked-overflow
  --scrollbar-width: 8px
  --mask-height: 5px
  overflow-y: auto
  padding-bottom: var(--mask-height)
  padding-right: 8px
  padding-left: 8px
  --mask-image-content: linear-gradient(to bottom, transparent, black var(--mask-height), black calc(100% - var(--mask-height)), transparent)
  --mask-size-content: calc(100% - var(--scrollbar-width)) 100%
  --mask-image-scrollbar: linear-gradient(black, black)
  --mask-size-scrollbar: var(--scrollbar-width) 100%
  mask-image: var(--mask-image-content), var(--mask-image-scrollbar)
  mask-size: var(--mask-size-content), var(--mask-size-scrollbar)
  mask-position: 0 0, 100% 0
  mask-repeat: no-repeat, no-repeat

.bg-gradient-1
  background: rgb(233, 234, 255)
  background: linear-gradient(0deg, rgba(233, 234, 255, 1) 0%, rgba(244, 244, 255, 1) 50%, rgba(254, 254, 254, 1) 100%)

.bg-gradient-2
  background: rgb(112, 146, 233)
  background: linear-gradient(6deg, #d7d7d7 0%, #979797 25%, #d0d0d0 50%, #f4f4fd 75%, #aaa 100%)

.bg-gradient-green
  background: rgb(76,209,232)
  background: linear-gradient(0deg, rgba(76,209,232,1) 0%, rgba(89,208,239,1) 11%, rgba(57,224,233,1) 25%, rgba(27,239,227,1) 45%, rgba(133,251,240,1) 62%, rgba(234,255,253,1) 77%, rgba(236,255,252,1) 100%)

.bg-gradient-3
  background: rgb(113, 146, 233)
  background: linear-gradient(5deg, rgba(113, 146, 233, 1) 0%, rgba(113, 146, 233, 1) 25%, rgba(151, 152, 233, 1) 50%, rgba(151, 152, 233, 1) 75%, rgba(151, 152, 233, 1) 100%)

input:-internal-autofill-selected
  background: transparent !important
  background-color: transparent !important

.q-btn-dropdown
  color: white
  font-size: 13px !important
  text-shadow: 2px 2px 4px rgba(220, 218, 218, 0.5) !important

.q-timeline__entry--icon .q-timeline__dot:after
  background-color: rgb(113, 146, 233)

.q-avatar__content
  max-width: 100%

.ww-semi-bold
  font-weight: 600

.ww-text-lg
  font-size: 48px

.ww-text-xs
  font-size: 10px

.ww-h1
  font-size: 28px

.ww-title
  font-size: 21px
  font-weight: 500

.ww-subtitle
  font-size: 18px

.ww-subtitle-1
  font-size: 16px

.ww-subtitle-2
  font-size: 15px

.ww-subtitle-3
  font-size: 14px

.ww-text
  font-size: 13px

.ww-caption
  font-size: 11px

@media screen and (max-width: 500px)
  .ww-h1
    font-size: 24px

  .ww-title
    font-size: 19.5px

  .ww-subtitle
    font-size: 16px

.win-info-dialog-overlay
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: flex-end
  z-index: 2001

.win-info-dialog-content
  background: #333
  // background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%,$win-intense 50%, rgba(0, 0, 0, 1) 100%)
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
  text-align: center
  width: 100%
  color: white
  z-index: 999

.tab-text
  font-size: 16px
  padding-bottom: 2px
  white-space: nowrap

.gradient-border
  border-bottom: 2.5px solid #dbdbdb
  cursor: pointer

.gradient-active-border
  position: relative
  cursor: pointer

  &::after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    height: 2.5px
    background-image: linear-gradient(90deg, rgba(72, 62, 180, 1) 0%, rgba(133, 156, 252, 1) 50%, rgba(72, 62, 180, 1) 100%)

@media screen and (max-width: 1024px)
  .tab-text
    font-size: 14px

$sizes: ("base": 1rem, "-xs": 0.25rem, "-sm": 0.5rem, "-md": 1.50rem, "-lg": 2rem, "-xl": 3rem)

@each $suffix, $gap in $sizes
  $stackClassName: ".stack#{$suffix}"
  $gapClassName: ".gap#{$suffix}"
  @if $suffix == "base"
    $stackClassName: ".stack"
    $gapClassName: ".gap"

  #{$stackClassName}
    display: flex
    flex-direction: column
    justify-content: flex-start
    gap: $gap

  #{$gapClassName}
    gap: $gap !important

.q-card__section, .q-card__actions
  padding: 1rem

.q-dialog
  z-index: 1000

.dialog-card
  width: 600px
  max-width: 85vw
  display: flex
  flex-direction: column
  .q-card__actions
    flex-grow: 1
    display: flex
    justify-content: flex-end
    align-items: flex-end
  @media (max-width: 992px)
    max-width: 100vw
    max-height: 100vh
    height: 100vh

.dialog-content
  height: fit-content
  max-height: calc(100vh - 132px)
  overflow: auto

.label
  font-weight: 500
  opacity: 0.7
  font-size: 16px
  margin-bottom: 4px

.cards-grid
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 1rem

.repeating-grid
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 10px
  grid-auto-flow: dense

.page-container
  padding: 0 6rem
  @media (max-width: 992px)
    padding: 0 0.5rem

.page-content
  padding: 1rem 3rem
  scrollbar-gutter: stable
  overflow: unset

  @media (max-width: 992px)
    padding: 0 1rem

.grow
  flex-grow: 1

.center
  display: flex
  justify-content: center
  align-items: center

.clickable
  cursor: pointer!important

.btn-filled
  border: 1px solid $dark!important
  background-color: $dark !important
  color: white !important
  &:hover
    border: 1px solid lighten($dark, 5%) !important
    background-color: lighten($dark, 5%) !important

$grid_sizes: ('1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7)
@each $suffix, $gap in $grid_sizes
  $stackClassName: ".grid-#{$suffix}"
  #{$stackClassName}
    display: grid
    grid-template-columns: repeat(#{$gap}, minmax(0, 1fr))!important
    gap: 1rem
    @media(max-width: 768px)
      grid-template-columns: 1fr!important
      gap: 0.5rem

.drag-enter
  background-color: rgba(0, 0, 0, 0.04)
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1)
  border-radius: 4px
  padding: 0.5rem

$sizes: ("": 200px, "-xs": 60px, "-sm": 120px, "-md": 240px, "-lg": 400px)

@each $suffix, $size in $sizes
  $gridClass: ".simple-grid#{$suffix}"

  #{$gridClass}
    display: grid
    column-gap: 0.5rem
    row-gap: 1rem
    grid-template-columns: repeat(auto-fit, minmax($size, 1fr))

$colors: ("-orange": #ffd285, "-green": rgb(135, 204, 204), "-grey": #e3e3e3, "-blue": #8cc3ed)

@each $suffix, $color in $colors
  $badgeClass: ".badge#{$suffix}"

  #{$badgeClass}
    padding: 0px 6px
    border-radius: 4px
    background-color: $color!important

// DRAGABLE ELEMENT
.draggable
  z-index: 99999
  background-color: #f9f9f9
  border: 1px solid #ddd
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2)

.draggableContainer
  > div
    height: 100% !important
    width: 100% !important
    > div
      height: 100% !important
      width: 100% !important

.dialog-actions
  display: flex !important
  justify-content: flex-end
  gap: 1rem
  margin-top: auto
  @media (min-width: 768px)
    display: inline-block

.card
  .hidden-actions
    display: flex
    gap: 0.5rem
    @media (min-width: 768px)
      visibility: hidden

  &:hover
    .hidden-actions
      visibility: visible

$positions: (between, center, end, start)
$justify-values: (space-between, center, flex-end, flex-start)

@for $i from 1 through length($positions)
  .row-#{nth($positions, $i)}
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: nth($justify-values, $i)

.grid-3-columns
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 16px
  grid-template-areas: "col1 col3 col2"

.grid-item-1
  grid-area: col1

.grid-item-2
  grid-area: col2

.grid-item-3
  grid-area: col3

.grid-item-7
  grid-area: col7

@media (max-width: 768px)
  .grid-3-columns
    grid-template-columns: 1fr

.grid-container
  display: grid
  grid-template-columns: repeat(12, 1fr)
  gap: 16px
  @media (max-width: 768px)
    gap: 12px

$spans: ("2", "3", "4", "6", "7", "8", "9", "10", "11", "12")

@each $span in $spans
  .grid-item-span-#{$span}
    grid-column: span #{$span}

@media (max-width: 768px)
  @each $span in $spans
    .grid-item-span-#{$span}
      grid-column: span 12

.grid-3-columns
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 16px

.smooth-bg-shadow
  box-shadow: 0px 0px 5px #04325411, 1px 1px 19px #04325404, 3px 3px 77px #04325402

@keyframes borderPulse
  0%
    box-shadow: 0px 0px 12px 1px rgba(255, 255, 255,.4), 0px 0px 0px 0px #152054
  100%
    box-shadow: 0px 0px 12px 1px rgba(117, 117, 255,.0), 0px 0px 0px 10px rgba(255,255,255,0)

@import ./widgets/_qr_header

.form-row
  display: flex
  gap: 1rem
  align-items: center
  @media(min-width: 768px)
    .actions
      display: flex
      align-items: center
      gap: 0.5rem
      visibility: hidden
    &:hover
      .actions
        visibility: visible

.cursor-grab
  cursor: grab

$options: ("left": flex-start, "start": flex-start, "center": center, "right": flex-end, "end": flex-end, "between": space-between, "around": space-around)

@each $suffix, $option in $options
  $className: ".flex-#{$suffix}"
  #{$className}
    display: flex!important
    justify-content: $option

.dialog-content
  padding-top: 0!important

.line-clamp
  display: -webkit-box
  -webkit-box-orient: vertical
  overflow: hidden!important
  text-overflow: ellipsis
  line-clamp: 2
  -webkit-line-clamp: 2

.no-data-image
  height: auto
  width: 100%
  object-fit: contain
  -webkit-box-shadow: 0px 12px 13px -20px rgba(0, 0, 0, 0.75)
  -moz-box-shadow: 0px 12px 13px -20px rgba(0, 0, 0, 0.75)
  box-shadow: 0px 12px 13px -20px rgba(0, 0, 0, 0.75)

$spans: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")

@each $value in $spans
  $className: ".span-#{$value}"
  $classNameSm: ".span-sm-#{$value}"
  #{$className}
    grid-column: span #{$value}
  #{$classNameSm}
    @media (max-width: 768px)
      grid-column: span #{$value}

$lines: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")
@each $value in $lines
  $className: ".line-#{$value}"
  #{$className}
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden!important
    text-overflow: ellipsis
    line-clamp: #{$value}
    -webkit-line-clamp: #{$value}

.table-grid
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))

.muted
  opacity: 0.6

.q-card__actions button
  padding: 0 16px!important

.gap-x
  column-gap: 1rem

.leaflet-div-icon
  width: 0!important
  height: 0!important