html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: black;
}


/* Spinner */
.let-the-ponies-run-sidebar {
    background-image: url("/images/spinner.png");
    position: absolute;
    margin: 0 auto;
    z-index: 99999999;
    margin-left: -190px;
    text-align: center;
    left: 50%;
    top: 30%;
    width: 380px;
    height: 380px;
    z-index: 10000;
    -webkit-animation: play .3s steps(11) infinite;
    -moz-animation: play .3s steps(11) infinite;
    -ms-animation: play .3s steps(11) infinite;
    -o-animation: play .3s steps(11) infinite;
    animation: play .3s steps(11) infinite;
    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
    transform: scale(0.5);
}

.let-the-ponies-run {
    background-image: url("/images/spinner.png");
    position: fixed;
    margin: 0 auto;
    z-index: 99999999;
    margin-left: -190px;
    text-align: center;
    left: 50%;
    top: 30%;
    width: 380px;
    height: 380px;
    z-index: 10000;
    -webkit-animation: play .3s steps(11) infinite;
    -moz-animation: play .3s steps(11) infinite;
    -ms-animation: play .3s steps(11) infinite;
    -o-animation: play .3s steps(11) infinite;
    animation: play .3s steps(11) infinite;
    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@-webkit-keyframes play {
    from {
        background-position: 0px;
    }

    to {
        background-position: -4180px;
    }
}

@-moz-keyframes play {
    from {
        background-position: 0px;
    }

    to {
        background-position: -4180px;
    }
}

@-ms-keyframes play {
    from {
        background-position: 0px;
    }

    to {
        background-position: -4180px;
    }
}

@-o-keyframes play {
    from {
        background-position: 0px;
    }

    to {
        background-position: -4180px;
    }
}
/*end Spinner*/


.grad-upper {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

    .grad-upper .card-header {
        background-color: #0d6efd;
    }

.card-header {
    color: white;
}
    .card-header i {
        color: white;
    }
.card-header h5 {
    color: white;
}

.card-header {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(13,110,253,1) 100%, rgba(255,255,255,1) 100%);
}

.list-bg {
    color: white;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(136,136,136,1) 50%, rgba(62,62,62,1) 100%, rgba(0,0,0,1) 100%) !important;
}
.list-bg-minor {
    background: rgb(0,0,0);
    background: #0d6efd !important;
}
.list-bg-serious {
    background: rgb(0,0,0);
    background: #ffc107 !important;
}
.list-bg-destroyed {
    background: rgb(0,0,0);
    background: #dc3545 !important;
}

.card-header-fatal {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,53,69,1) 100%, rgba(255,255,255,1) 100%);
}
.card-header-serious {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,193,7,1) 100%, rgba(255,255,255,1) 100%);
}
.card-header-minor {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 25%, rgba(86,255,0,1) 100%);
}

