@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap')

// Color scheme
$grey: #BBB
$black: #000
$white: #fff
$primary: #F00
$secondary: $grey
$red: $primary

$background-primary: #222
$background-secondary: #191919
// $background-gradient: linear-gradient(165deg, $background-primary 65%, $background-secondary 100%)

$font-primary: $white
$font-inactive: $grey
$font-secondary: $primary
$font-inverted: $black
$font-link: $secondary

// Default text
*
    font-family: "Karla", sans-serif
    color: $font-primary
    transition-duration: 0.1s

::selection
    background: $primary
    color: $black

// Components
$navbar-height: 4rem

body
    background: $background-primary !important
    margin: 0
//   background: $background-primary !important
//   background: -moz-linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
//   background: -webkit-linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
//   background: linear-gradient(165deg, $background-primary 65%, $background-secondary 100%) !important
//   background-attachment: fixed !important

.hidden
    display: none

.form-group
    label
        color: $font-secondary
        margin-bottom: -0.1em
        margin-left: 0.1em
    input
        background-color: $background-primary !important
        color: $font-primary !important

a
    color: $font-link !important
    
    &.btn:hover
        color: $background-primary !important
    
    &:hover
        color: $primary !important

.b-dropdown, .dropdown
    border-radius: 0
    background: #0000

.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after
    border-bottom-color: $white !important

.dropdown-menu, .b-popover
    background-color: $background-secondary !important
    border: 1px solid $white !important
    color: $primary

    .b-time *, 
        background-color: $background-primary !important

#dropdown .dropdown-menu
    *:hover
        color: $white !important
        background: darken($primary, 20) !important

    *:active
        color: $white !important
        background: $primary !important

.custom-checkbox
    label
        color: $font-primary !important

a.btn-secondary, a.btn-primary
    color: $font-primary !important

#title
    font-weight: bold

.breadcrumb
    background-color: #FFF0 !important

.breadcrumb-item + .breadcrumb-item::before
    content: ">" !important

.breadcrumb-item.active
    span
        color: $font-secondary !important

// .modal-content
//     background-color: $background-primary

// .modal-header button.close
//     color: $font-primary !important

header.b-calendar-grid-caption, .b-calendar-grid-weekdays *, header.b-calendar-header *
    color: $font-inverted !important

.b-form-datepicker, .b-form-timepicker
    background-color: $background-primary !important

.b-form-datepicker label:not(.text-muted), .b-form-timepicker label:not(.text-muted)
    color: $font-primary !important

input:disabled, .b-form-timepicker[aria-disabled=true], .b-form-datepicker[aria-disabled=true], .input-group-prepend.disabled *
    color: $font-inactive !important
    border-color: $background-primary !important

input, .input-group-prepend *
    color: $font-primary !important
    border-color: $grey !important
    background-color: $background-primary !important

select
    background-color: $background-primary !important
    color: $font-primary !important

div.card
    background-color: $background-secondary
    border-color: $white

pre
    color: $font-primary !important

hr
    border-color: $white !important


// Import Bootstrap and BootstrapVue source SCSS files
@import '~bootstrap/scss/bootstrap.scss'
@import '~bootstrap-vue/src/index.scss'