@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: #000
// $background-gradient: linear-gradient(165deg, $background-primary 65%, $background-secondary 100%)

$font-primary: $white
$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.3em
        margin-left: 0.3em
    input
        background-color: $background-primary !important
        color: $font-primary !important

a
    color: $font-link !important

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

ul.dropdown-menu
    background-color: $background-primary
    border: 1px solid $primary
    color: $primary
    
    *:hover
        color: $white !important
        background: darken($primary, 20)
    
    *:active
        color: $white !important
        background: $primary

// .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

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

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

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

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

// input:disabled
//     color: $font-secondary !important
//     border-color: $grey !important