@font-face
  font-family: 'Nunito Sans'
  src: url('../assets/NunitoSans-Regular.ttf')

@font-face
  font-family: 'Nunito Sans'
  src: url('../assets/NunitoSans-Bold.ttf')
  font-weight: bold

@font-face
  font-family: 'Nunito Sans'
  src: url('../assets/NunitoSans-Light.ttf')
  font-weight: 250

@font-face
  font-family: 'Nunito Sans'
  src: url('../assets/NunitoSans-SemiBold.ttf')
  font-weight: 600

@font-face
  font-family: 'Poppins'
  src: url('../assets/Poppins-SemiBold.ttf')
  font-weight: 600

$theme-colors: ("primary": #212121, "secondary": #282828, "tertiary": #151515, "textPrimary": #ffffff, "textSecondary": #565656, "textInverse": #000000, "accent": #65CB88, "divider": rgba(79, 79, 79, 0.67))

*:focus
  outline: none

body
  background-color: var(--primary) !important
  color: var(--textPrimary) !important
  overflow: hidden !important

img
  mix-blend-mode: normal
  border-radius: 16px
  height: 100%
  width: 100%
  object-fit: cover

.dropdown-item
  color: var(--textPrimary) !important

#app
  font-family: 'Nunito Sans'
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  background: var(--primary)
  color: var(--textPrimary) !important
  width: 100%
  height: 100%
  user-select: none
  user-drag: none

.appContainer
  width: 100vw
  height: 100vh

.button-grow
  cursor: pointer
  transition: all .2s ease-in-out
  &:hover
    transform: scale(1.1)

.card-grow
  cursor: pointer
  transition: all .2s ease-in-out
  &:hover
    transform: scale(1.05)

.delete-modal
  background: var(--primary)

.vol-icon
  cursor: pointer

.custom-toast,.success-toast
  font-weight: 400 !important
  border-radius: 8px !important
  border: 1px solid var(--textPrimary) !important

.success-toast
  background-color: var(--accent) !important
  color: var(--textInverse) !important

.page-title
  font-weight: bold
  font-size: 55px
  margin-bottom: 50px
  margin-top: 20px

.vue-slider-process
  background-color: var(--accent)

.vue-slider-rail
  background-color: var(--tertiary)

.control-row
  position: relative

.details-col
  left: 0

.gradient
  background: linear-gradient(176.27deg, var(--secondary) 1.69%, var(--primary) 72.01%)
  border-radius: 0px 30px 0px 0px

.b-sidebar
  transition: 0.2s
  height: calc(100% - (6.5rem + 15px)) !important

.b-sidebar-body
  overflow-x: hidden

.sidebar-top-low-spacing
  top: 10px !important

.sidebar-top-high-spacing
  top: 34px !important

.card
  background-color: transparent !important
  border: none !important
  text-align: left !important
  padding-left: 0
  padding-right: 0
  max-width: 200px

.card-title
  margin-bottom: 0 !important
  font-weight: 300
  font-size: 20px

.subtitle
  margin-bottom: 0 !important
  font-size: 16px

.default-icon
  svg
    border-radius: 16px

.card
  background-color: transparent

.card-body
  padding: 12px !important

.icon-container
  z-index: 1
  position: absolute
  top: 25px
  left: 8px
  padding-left: 2px
  padding-right: 4px
  border-radius: 0 8px 8px 0
  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.2)
  svg
    width: 24px
    height: 24px

.overlay
  position: absolute
  top: 0
  opacity: 0

.overlay-base
  transition: opacity 0.2s ease

.img-container
  position: relative
  transition: opacity 0.2s ease
  &:hover
    .overlay-base
      opacity: 0.2
    .overlay
      opacity: 1

.image
  border-radius: 25px
  object-fit: cover
  aspect-ratio: 1 / 1

.text-container > .b-overlay > .bg-dark
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%) !important
  background-color: #00000000 !important

.text-over
  text-align: left
  margin-left: 15px

.text-container
  margin-left: 15px
  overflow: hidden

.title
  font-size: 24px
  text-align: left
  max-width: fit-content

.dummy
  margin-top: 75%

.subtitle
  font-weight: 250
  text-align: left
  font-size: 14px

.button-group
  @media (max-height: 700px)
    display: none !important
  svg
    margin-right: 16px

.provider-icon
  height: 20px
  width: 20px
  min-height: 20px
  min-width: 20px
  align-self: center
  border-radius: 0px !important

.main-container
  padding-top: 15px
  padding-bottom: 15px

.index-no-td
  padding: 20px 0 20px 15px !important

.index-no-th > div
  padding-left: 10px

.loading-container
  color: var(--accent)

.wrapper
  display: flex

.box
  color: var(--textPrimary)
  padding: 20px

  box-sizing: border-box

  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto

.handler
  width: 8px
  padding: 0
  cursor: ew-resize
  flex: 0 0 auto

.handler::before
  content: ''
  display: block
  width: 1px
  height: 100%
  background: var(--textSecondary)
  padding-top: 14px
  padding-bottom: 14px
  background-clip: content-box
.recycler-row
  height: calc(100% - 70px)

.field-content
  height: 64px
  border-bottom: 1px solid var(--divider)
  border-top: 1px solid transparent

.headers
  border-bottom: 1px solid var(--divider)
  div
    font-weight: bold
    font-size: 16px

.wrapper
  div
    text-align: left
    user-select: none

.selectedItem
  background: var(--secondary) !important
  border-top: 1px solid var(--accent)
  border-bottom: 1px solid var(--accent)

#clipboard-popover
  background: var(--accent)
  .arrow::after
    border-top-color: var(--accent)
  .popover-body
    color: var(--textInverse) !important

.text-container
  width: fit-content

.timestamp
  margin-right: 0

.accounts-popover
  background-color: var(--tertiary) !important
  border-radius: 16px !important
  width: 300px !important
  border: none !important
  box-shadow: 4px 4px 14px 3px rgba(0, 0, 0, 0.25)
  .arrow
    &::after
      border-bottom-color: var(--tertiary) !important

.notification-popover
  background-color: var(--tertiary) !important
  border-radius: 16px
  border: none
  box-shadow: 4px 4px 14px 3px rgba(0, 0, 0, 0.25)
  .arrow
    &::after
      border-bottom-color: var(--tertiary) !important

.modal-content
  font-family: 'Nunito Sans'
  background-color: var(--primary) !important
  color: var(--textPrimary) !important

.modal-content-container
  margin: 35px 35px 10px 35px !important

.modal
  display: block !important

.VueCarousel-dot-container
  margin-top: 0 !important
  .VueCarousel-dot
    margin-top: 0 !important

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link
  background-color: var(--accent)
  color: var(--textPrimary)

.nav-tabs .nav-link
  color: var(--textPrimary)

.nav-tabs .nav-link
  border: none

.scroller
  height: 100%

.modal-content
  border-radius: 16px !important

.parent
  overflow-y: scroll
  padding-left: 30px

.tooltip-inner
  background-color: var(--tertiary) !important
  color: var(--textPrimary) !important
  box-shadow: 4px 4px 14px 3px rgba(0, 0, 0, 0.25)

.bs-tooltip-right .arrow::before
  border-right-color: var(--tertiary) !important

.colors > .item
  margin: 10px 0 0 5px !important

.context-menu
  background: var(--secondary)
  border-radius: 16px
  color: var(--textPrimary) !important
  div
    color: var(--textPrimary) !important

.mx-context-menu-item.open
  background-color: var(--accent) !important
  div
    color: var(--textInverse) !important
  .mx-right-arrow
    path
      fill: var(--textInverse) !important

.mx-context-menu-item
  &:hover
    background: var(--accent)
    background-color: var(--accent)
    div
      color: var(--textInverse) !important
    .mx-right-arrow
      path
        fill: var(--textInverse) !important

.mx-context-menu-updown
  background-color: var(--secondary) !important

.mx-right-arrow
  path
    fill: var(--textPrimary)

:root
  --toastify-toast-width: 220px !important

.Toastify__toast
  border-radius: 12px !important

.Toastify__close-button
  color: var(--textPrimary) !important

.Toastify__toast--default
  background: var(--tertiary) !important
  color: var(--textPrimary) !important

.Toastify__progress-bar-theme--light
  background: var(--accent) !important

.Toastify__toast-theme--light
  background: var(--tertiary) !important
  color: var(--textPrimary) !important

@import "./transitions"
@import "./scrollbar"
@import 'node_modules/bootstrap/scss/bootstrap.scss'
@import 'node_modules/bootstrap/scss/bootstrap-grid.scss'
@import 'node_modules/bootstrap-vue/src/index.scss'
@import 'node_modules/@voerro/vue-tagsinput/dist/style'

@include media-breakpoint-up(lg)
  .slider-container
    position: static
    opacity: 1

.bg-light
  background-color: transparent !important
