/* -------------- */
/* BASIC ELEMENTS */
/* -------------- */
body {
    background-color: black;
    color: #AAA;
}
h1, .title { color: #FFC107; }
h3, h4, h5, h6 { color: white; }
h2, a, kbd { color: #CA6; }
a:hover { color: #B39559; }

.btn-outline-webb {
    background-color: black;
    color: #FFC107;
    border-color: #FFC107;
}
.btn-outline-webb:hover {
    background-color: #FFC107;
    color: black;
    border-color: black;
}


/* ----------------- */
/*      CHARTS       */
/* ----------------- */
.chart-card { background-color: rgb(28, 28, 30); }


/* ----------------- */
/*  (DJANGO) TABLES  */
/* ----------------- */
.table {
    margin-top: 20px;
    margin-bottom: 30px;
}
.page-link {
    background-color: transparent;
    border-color: rgb(55, 59, 62);
    color: #6c757d;
}
.page-link:hover {
    background-color: #CA6;
    border-color: #CA6;
    color: black;
}
.page-item.active .page-link {
    background-color: #FFC107;
    border-color: #CA6;
    color: black;
}
.underway {
    border: 2px solid rgba(255, 193, 7, 0.8)
}


/* --------------- */
/*    WEBB PATH    */
/* --------------- */
.moving-path-wrapper { margin-top: -60px; }
.moving-path {width: 40%;}
.moving-path .progress {height: 1px;}
.moving-path .progress-bar {
    width: 100%;
    background-image: linear-gradient(45deg,#343a40 25%,black 25%,black 50%,#343a40 50%,#343a40 75%,black 75%,black);
}
.current-target-progress {
    height: 10px;
    background-color: #6c757d;
}
.card { background-color: inherit; }


/* ------------- */
/*    MARQUEE    */
/* ------------- */
.marquee {
    height: 100px;
    width: 100%;
    margin-bottom: -120px;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
.marquee div {
    display: block;
    width: 200%;
    height: 30px;
    position: absolute;
    overflow: hidden;
    animation: marquee 100s linear infinite;
}
.marquee span {
    float: left;
    width: 50px;
}
.marquee .bottom-targets {
    margin-top: 75px;
}
.marquee .top-targets span {
    margin-right: 1000px;
}
.marquee .bottom-targets span {
    margin-left: 500px;
    margin-right: 500px;
}
@keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}