/*

Summary:
 * If a game is finished, it's a solid color.
 * If a game is in progress, it's diagonally striped.
 * If a game is not picked, it shows the same results as above, but with faded color.

Bootstrap Hex Ref:
 * primary   = 007bff
 * secondary = 6c757d
 * success   = 28a745
 * info      = 17a2b8
 * warning   = ffc107
 * danger    = dc3545
 * light     = f8f9fa
 * dark      = 343a40

Alpha:
 * Bootstrap bg-<> is at full opacity, with the last two digits ff
 * Bootstrap table-<> is faded, with the last two digits ~44,
 * If a game is finished, I increase to table-<> alpha to 77
 * If a game is in progress, it's the same color, but diagonally striped
 * If a game is not picked, it's the same color/striping, but almost transparent with 11 

*/

/* Unsubmitted */
.pick-unsubmitted {
    background: orange !important;
}

/* Picked */
.pick-unstarted {
    background: #007bff77 !important;
}
.pick-inprogress-noncover {
    background: repeating-linear-gradient(45deg, #dc354577, white 5px, #dc354577 10px) !important;
}
.pick-inprogress-push {
    background: repeating-linear-gradient(45deg, #ffc10777, white 5px, #ffc10777 10px) !important;
}
.pick-inprogress-cover {
    background: repeating-linear-gradient(45deg, #28a74577, white 5px, #28a74577 10px) !important;
}
.pick-finished-noncover {
    background: #dc354577 !important;
}
.pick-finished-push {
    background: #ffc10777 !important;
}
.pick-finished-cover {
    background: #28a74577 !important;
}

/* Not Picked */
.unpick-unstarted {
    background: #007bff11 !important;
}
.unpick-inprogress-noncover {
    background: repeating-linear-gradient(45deg, #dc354511, white 5px, #dc354511 10px) !important;
}
.unpick-inprogress-push {
    background: repeating-linear-gradient(45deg, #ffc10711, white 5px, #ffc10711 10px) !important;
}
.unpick-inprogress-cover {
    background: repeating-linear-gradient(45deg, #28a74511, white 5px, #28a74511 10px) !important;
}
.unpick-finished-noncover {
    background: #dc354511 !important;
}
.unpick-finished-push {
    background: #ffc10711 !important;
}
.unpick-finished-cover {
    background: #28a74511 !important;
}

/* Simple colors. */
.green {
    color: green !important;
}

/* Rank colors. */
.rank-first {
    background: linear-gradient(to right, #c9b037ff, #c9b03700) !important;
}
.rank-second {
    background: linear-gradient(to right, #b4b4b4ff, #b4b4b400) !important;
}
.rank-third {
    background: linear-gradient(to right, #ad8a56ff, #ad8a5600) !important;
}

/* Percentage colors. Same as cover/notcover/push, but lighter. */
.perc-below-50 {
    background: #dc35461a !important;
}
.perc-equal-50 {
    background: #ffc1071a !important;
}
.perc-above-50 {
    background: #28a7451a !important;
}

/* Limit the width of the username cols on all-picks and lb. */
.w-max-250 {
    max-width: 250px !important;
    overflow: hidden !important;
}

/* Bigger borders. */
.border-left-thick {
    border-left: 2px solid lightgray !important;
}
.border-right-thick {
    border-right: 2px solid lightgray !important;
}

/* The images are passed explicitly with inline style, but the positioning is here. */
.logo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 2rem !important;
    min-width: 2rem !important;
}

.tiny {
  font-size: 10px !important;
}

.scrollbox {
    list-style-type: none;
    overflow-y: auto;
    height: 200px;
    width: 500px;
    margin: auto;
}

.banner {
    background-size: contain !important;
    background-repeat: repeat-x;
    background-position: center;
    height: 250px;
    max-height: 250px;
    background-color: black;
}