.error {
    padding: 5px;
    color: #f00;
}

input[type=text] {
    border-width: 1px;
}

::placeholder {
    color: rgba(0, 0, 0, .25);
}

#login-form {
    height: 600px;
}

tr[data-href] {
    cursor: pointer;
}

body {
    font-size: 0.875rem;
}

i.github {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/icons/github.svg);
    background-size: 20px 20px;
    margin-right: 5px;
}

i.github:hover {
    filter: invert(28%) sepia(91%) saturate(2260%) hue-rotate(208deg) brightness(98%) contrast(102%);
}

i.docker {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/icons/docker.svg);
    background-size: 20px 20px;
    margin-right: 5px;
}

i.docker:hover {
    filter: invert(28%) sepia(91%) saturate(2260%) hue-rotate(208deg) brightness(98%) contrast(102%);
}

i.grafana {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/icons/grafana.svg);
    background-size: 20px 20px;
    margin-right: 5px;
}

i.grafana:hover {
    filter: invert(28%) sepia(91%) saturate(2260%) hue-rotate(208deg) brightness(98%) contrast(102%);
}

i.log {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/icons/log.svg);
    background-size: 20px 20px;
    margin-right: 5px;
}

i.log:hover {
    filter: invert(28%) sepia(91%) saturate(2260%) hue-rotate(208deg) brightness(98%) contrast(102%);
}

i.loki {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/icons/loki.svg);
    background-size: 20px 20px;
    margin-right: 5px;
}

i.loki:hover {
    filter: invert(28%) sepia(91%) saturate(2260%) hue-rotate(208deg) brightness(98%) contrast(102%);
}

.env {
    z-index: 999;
}

.env.development {
    background-color: #0f0;
}

.env.staging {
    background-color: #209cee;
}

.env.production {
    background-color: #f00;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #727272;
}

.sidebar .nav-link:hover .feather {
    color: inherit;
}

.sidebar .nav-link.active {
    color: #2470dc;
}

.sidebar .nav-link.active .feather {
    color: inherit;
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.navbar-brand {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
    top: 0.25rem;
    right: 1rem;
}

.navbar .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 5rem;
    }
}