body {
    font-family: $default-font;
    -webkit-font-smoothing: antialiased;
}

// overall appearance (background color, font color, paragraphs, footer, etc.)
html {
    position: relative;
    min-height: 100%;
}
body {
    color: $default-font-color;
    background-color: $default-bg-color;
    letter-spacing: .1px;

    // always show a scrollbar not to flicker on tabs / long drop downs
    overflow-y: scroll;
}
[data-bs-theme="dark"] body {
    color: $default-font-color-dark;
    background-color: $default-bg-color-dark;
}

// don't underline links except on focus/hover
a { text-decoration: none; }
a:focus, a:hover { text-decoration: underline; }
// don't underline links at all on certain places
.nav-link { &:focus, &:hover { text-decoration: none; } }
.dropdown-item { &:focus, &:hover { text-decoration: none; } }
.page-link { &:focus, &:hover { text-decoration: none; } }
.btn { &:focus, &:hover { text-decoration: none; } }

@include media-breakpoint-up(md) {
    #content {
        padding-left: 40px;
        padding-right: 40px;
    }
}

// buttons
.btn i.fa + span {
    padding-left: 8px;
}
.btn-group-sm .btn.help_popover, .btn-sm.help_popover {
    padding-top: 6px;
}

// footer
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    background-color: #f5f5f5;
}
[data-bs-theme="dark"] .footer {
    background-color: $default-bg-color-dark;
}
#footer-links {
    &.left {
        float: left;
    }

    &.right {
        float: right;
    }

    a {
        display: inline;
        margin-left: 15px;
        margin-right: 15px;
    }
}
body {
    // add some space between last elements and footer
    margin-bottom: 45px;
}

// paragraphs, links, misc
p {
    margin: 0 0 1em;
}
a {
    @include transition(all 0.2s);
}
[data-bs-theme="dark"] a:not(.btn) {
    color: $link-color-dark;
}
.links {
    text-align: left;
    padding-top: 0;
}

// headings
h1, .h1, h2, .h2 {
    margin-top: 18px;
    margin-bottom: 9px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    color: #444;
}
[data-bs-theme="dark"] {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        color: #bbb;
    }
}

// cards (former panels)
.card {
    margin-bottom: 15px;
}
[data-bs-theme="dark"] .card {
    background-color: $default-bg-color-dark;
    border: $table-border-color-dark solid 0.5px;
}
// colorful card headers (Bootstrap 4 only has colorful borders or fully colored cards)
.card.border-danger {
    border-color: #eed3d7;
    .card-header {
        color: #b94a48;
        background-color: #f2dede;
    }
}
[data-bs-theme="dark"] {
    .card.border-danger .card-header {
        color: #cf4644;
        background-color: #450202;
    }
}
.card.border-success {
    border-color: #d6e9c6;
    .card-header {
        color: #468847;
        background-color: #dff0d8;
    }
}
[data-bs-theme="dark"] {
    .card.border-success .card-header {
        color: #74f476;
        background-color: #144500;
    }
}
.card.border-warning {
    border-color: #fbeed5;
    .card-header {
        color: #c09853;
        background-color: #fcf8e3;
    }
}
[data-bs-theme="dark"] {
    .card.border-warning .card-header {
        color: #fdca71;
        background-color: #1d1800;
    }
}
.card.border-info {
    border-color: #bce8f1;
    .card-header {
        color: #3a87ad;
        background-color: #d9edf7;
    }
}
[data-bs-theme="dark"] {
    .card.border-info .card-header {
        color: #64cafd;
        background-color: #000000;
    }
}

// big welcome box ("jumbtron")
.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #f9f9f9;
}
[data-bs-theme="dark"] .jumbotron {
    background-color: #111111;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 200;
}

// tabs
.tab-content {
    padding-top: 15px;
}
.nav-tabs .nav-link {
    border: none;
    color: $default-font-color;

    &:hover, &:focus, &.active {
        border: none;
        -webkit-box-shadow: inset 0 -2px 0 #446E9B;
        box-shadow: inset 0 -2px 0 #446E9B;
        color: #446E9B;
    }
}
[data-bs-theme="dark"] {
    .nav-tabs .nav-link {
        color: $default-font-color-dark;

        &:hover, &:focus, &.active {
            -webkit-box-shadow: inset 0 -2px 0 #6caef5;
            box-shadow: inset 0 -2px 0 #6caef5;
            color: #6caef5;
            background-color: $default-bg-color-dark;
        }
    }
}

// popover
.help_popover  {
    margin: 0px 5px;
    &:focus, &:hover {
        outline: none;
        text-decoration: none;
    }
}
.popover code {
    word-break: break-all;
}
.popover .popover-header {
    word-break: break-all;
}

// tooltips
.tooltip .tooltip-inner {
    max-width: 400px;
    p {
        margin-bottom: 2px;
    }
    ul {
        padding-left: 1.2rem;
    }
    p, ul {
        text-align: left;
        word-break: break-word;
    }
}

// full screen mode
#content_fullscreen {
    min-width: 100%;
}

// Icon for copying job ID
.copy-jobid {
    margin-right: 5px;
}

[data-bs-theme="dark"] {
    .table {
        color: $default-font-color-dark;
        background-color: $default-bg-color-dark;
    }
    // All tests pagination
    .page-link,.page-item.disabled .page-link {
        background-color: $default-bg-color-dark;
        color: $default-font-color-dark;
        border:rgba(255, 255, 255, 0.3) solid 0.5px;
    }

    // All tests search field
    .chosen-container .chosen-drop, .chosen-container .chosen-results li, .chosen-container ul.chosen-choices {
        background-color: $default-bg-color-dark;
        background-image: none;
        color: $default-font-color-dark;
    }

     // All tests table rows
    .table td {
        border-top-color: rgba(255, 255, 255, 0.03);
    }

    .modal.show {
        background-color: lighten($default-bg-color-dark, 25%);
    }
    .modal-content {
        background-color: $default-bg-color-dark;
    }
    .modal-header, .modal-footer {
        border-top: none;
        border-bottom: none;
    }


    .container-fluid .btn-light:hover, .container-fluid .btn-light:active:hover {
        background-color: #101010;
        color: #cbc5bf;
    }
    .container-fluid .btn-light:active {
        background-color: #101010;
        background-image: radial-gradient(circle, lighten(#101010, 25%) 10%, #363636 11%);
    }

    input, textarea {
        background-color: $default-bg-color-dark;
        color: $default-font-color-dark;
        border: $table-border-color-dark solid 0.5px;
    }
}
