// app global css in Sass form

.innerpadding > *
  padding: 10px

h5
  margin-block: 10px

tbody tr
  background-color: var(--q-card-body)
  color: var(--q-card-body-text)

.q-table__container
  background-color: var(--q-card-body)
  color: var(--q-card-body-text)

tbody tr:nth-child(odd)
  background-color: var(--q-card-body-table-odd)
  color: var(--q-card-body-table-odd-text)

.table-no-stripes tbody tr
  background-color: inherit
  color: inherit

.col-recipe-list-card
  height: auto
  width: 100%
  @media (min-width: 850px)
    width: 50%
  @media (min-width: 1023px)
    width: 100%
  @media (min-width: 1100px)
    width: 50%
  @media (min-width: 1600px)
    width: 33.3%

.collection-recipe-list-card
  height: auto
  width: 100%
  @media (min-width: 851px)
    width: 50%
  @media (min-width: 1023px)
    width: 100%
  @media (min-width: 1450px)
    width: 50%

.recipe-card-height
  height: unset
  @media (min-width: 401px)
    height: 200px

.col-xsm-4
  flex: 0 0 100%
  max-width: 100%
  @media (min-width: 400px)
    flex: 0 0 33.3333%
    max-width: 33.3333%

.col-xsm-8
  flex: 0 0 100%
  max-width: 100%
  @media (min-width: 400px)
    flex: 0 0 66.6666%
    max-width: 66.6666%

.q-pt-xsm-none
  @media (min-width: 400px)
    padding-top: 0

.q-pl-xsm-sm
  @media (min-width: 400px)
    padding-left: 8px


/* .q-card--bordered
  border: 1px solid rgba(0, 0, 0, 0.12)

/* .q-card--dark
  //border-color: rgba(225, 225, 225, 0.28)
  border-color: var(--q-card-body-table-odd-text)

.page-content
  max-width: 1600px
  margin: auto

.no-link-format
  text-decoration: none
  color: inherit

h1, h2, h3, h4, h5, h6
  margin-block: 10px
  margin-inline: 0

.q-table__card--dark, .q-table--dark
  box-shadow: $table-box-shadow

p
  margin: unset

.clickable
  cursor: pointer

.dotted-overflow-1
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  display: block
  max-width: 100%

.dotted-overflow-2
  display: -webkit-box
  -webkit-line-clamp: 2
  -webkit-box-orient: vertical
  overflow: hidden

.dotted-overflow-4
  display: -webkit-box
  -webkit-line-clamp: 4
  -webkit-box-orient: vertical
  overflow: hidden

.text-navigation
  color: var(--q-navigation) !important

.bg-navigation
  background: var(--q-navigation) !important

.text-navigation-active
  color: var(--q-navigation-active-text) !important

.bg-navigation-active
  background: var(--q-navigation-active) !important

.bg-sidebar
  background: var(--q-sidebar) !important

.text-sidebar
  color: var(--q-sidebar) !important

.bg-header
  background: var(--q-header) !important

.text-header
  color: var(--q-header-text) !important

.bg-background
  background: var(--q-background) !important

.text-background-info-icon
  color: var(--q-background-info-icon) !important

.text-background
  color: var(--q-background-text) !important

.bg-sv-background
  background: var(--q-sv-background) !important

.text-sv-background
  color: var(--q-sv-background-text) !important

.bg-card-header
  background: var(--q-card-header) !important

.text-card-header
  color: var(--q-card-header-text) !important

.text-primary
  color: var(--q-primary-text) !important

.bg-card-body
  background: var(--q-card-body) !important

.text-card-body
  color: var(--q-card-body-text) !important

.bg-card-item-group
  background: var(--q-card-item-group) !important

.text-card-item-group
  color: var(--q-card-item-group-text) !important

.bg-sv-header
  background: var(--q-sv-header) !important

.text-sv-header
  color: var(--q-sv-header-text) !important

.bg-sv-navigation
  background: var(--q-sv-btn-navigation) !important

.text-sv-navigation
  color: var(--q-sv-btn-navigation-text) !important

.bg-sv-navigation-active
  background: var(--q-sv-btn-navigation-active) !important

.text-sv-navigation-active
  color: var(--q-sv-btn-navigation-active-text) !important

.bg-sv-btn-primary
  background: var(--q-sv-btn-primary) !important

.text-sv-btn-primary
  color: var(--q-sv-btn-primary-text) !important

.bg-sv-sidebar
  background: var(--q-sv-sidebar) !important

.text-sv-sidebar
  color: var(--q-sv-sidebar-text) !important

.bg-sv-cocktailprogress
  background: var(--q-sv-cocktailprogress) !important

.bg-sv-card-primary
  background: var(--q-sv-card-primary) !important

.text-sv-card-primary
  color: var(--q-sv-card-primary-text) !important

\:root
  --q-navigation-active: #be937b
  --q-navigation: #fbdeb0
  --q-navigation-active-text: #ffffff
  --q-sidebar: #bf947b
  --q-primary-text: #000000
  --q-header: #693f2f
  --q-header-text: #ffffff
  --q-card-header: #def5f8
  --q-card-header-text: #000000
  --q-card-body: #f9f9f9
  --q-card-body-table-odd: #fafafa
  --q-card-body-table-odd-text: #000000
  --q-card-body-text: #000000
  --q-card-item-group: #ffffff
  --q-card-item-group-text: #000000
  --q-background: #ffffff
  --q-background-text: #000000
  --q-background-info-icon: #9d9d9d
  --q-sv-background: #000000
  --q-sv-background-text: #ffffff
  --q-sv-header: #1a237e
  --q-sv-header-text: #ffffff
  --q-sv-btn-navigation: #616161
  --q-sv-btn-navigation-text: #ffffff
  --q-sv-btn-navigation-active: #b868c6
  --q-sv-btn-navigation-active-text: #000000
  --q-sv-btn-primary: #27b0b0
  --q-sv-btn-primary-text: #000000
  --q-sv-sidebar: #616161
  --q-sv-sidebar-text: #ffffff
  --q-sv-cocktailprogress: #1b5e20
  --q-sv-card-primary: #787878
  --q-sv-card-primary-text: #ffffff
