:root {
    --font-family:          "Lato", sans-serif;

    --pickem-darker:        #11171d;
    --pickem-dark:          #161f28;
    --pickem-light:         #2c3c4a;

    --pickem-success:       #587b66;
    --pickem-fail:          #6f4444;
    --pickem-success-light: #a8ff902e;

    --yellow-hue:           #fff3902e;

    --light-grey-hover:     #757575;

    --csgo-orange:          #f2a61f;
    --csgo-orange-50:       #f2a61f78;
    --csgo-orange-darker:   #b67d16;
    --csgo-green-picks:     #317224;
    --csgo-red:             #fc8778;

    --col-5ths-width:       20%;
}

html {
    position:   relative;
    min-height: 100%;
}

body {
    font-family:      var(--font-family);
    font-weight:      300;
    font-size:        16px;
    background-color: var(--pickem-dark);
    color:            #fff;
    margin-bottom:    60px;
}

a {
    text-decoration:       underline;
    text-decoration-color: transparent;
    color:                 var(--csgo-orange);
    transition:            color 0.1s linear, text-decoration-color 0.05s linear;
}

a:hover {
    color:                 var(--csgo-orange-darker);
}

a:hover,
a.underline  {
    text-decoration-color: var(--csgo-orange-darker);
}

a:focus,
a:active {
    color:                 var(--csgo-orange-50);
    text-decoration-color: var(--csgo-orange-50);
}

nav {
    background-color: #222;
    border-bottom:    1px solid #101010;
}

.media, .media-body {
    overflow: initial !important;
}

nav ul.nav li .steam-login-link {
    padding-bottom: 12px;
}

nav ul.nav li a.steam-avatar {
    padding-bottom: 0;
    padding-top:    2px;
    padding-right:  0;
}

nav ul.nav li a.steam-avatar img {
    height: 50px;
}

.footer {
    background-color: #222;
    border-top:       1px solid #101010;
    padding:          20px 0;
    position:         absolute;
    bottom:           0;
    height:           60px;
    width:            100%;
}

form.steam-key-form input {
    color: #000;
}

img.tournament-logo {
    max-width:     250px;
    padding-right: 20px;
    float:         left;
    max-height:    100px;
}

h1.tournament-heading {
    margin-top: 10px;
}

.tournament-score {
    width:        100%;
    border:       3px solid var(--pickem-light);
    padding-left: 10px;
    box-shadow:   #111 4px 4px 8px;
}

.tournament-score h3 {
    margin-top: 10px;
}

.tournament-score p {
    margin-bottom: 5px;
    color:         #a9a4a4;
}

@media (max-width: 991px) {
    .tournament-score {
        max-width: 100%;
    }
}

.tournament .round .round-title {
    margin-left: 10px;
}

.tournament .round .round-title h2 {
    font-weight: 300;
}

.tournament .round .spacer {
    height: 85px;
}

@media (max-width: 991px) {
    .tournament .round .spacer {
        display: none;
    }
}

.tournament .round .round-of-4 {
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .tournament .round .round-of-4 {
        margin-bottom: 10px;
    }
}

.tournament .round h1 {
    font-size: 30px;
}

.tournament .game-container {
    background: var(--pickem-darker);
    border:     3px solid var(--pickem-light);
    margin:     10px 0;
    box-shadow: #111 4px 4px 8px;
}

.tournament .game-container div.game-link {
    color: #fff;
}

.tournament .game-container div.game-link:hover div.game {
    background-color: var(--light-grey-hover);
}

.tournament .game-container div.game-link:focus div.game {
    background-color: var(--light-grey-hover);
}

.tournament .game-container div.game-link .game {
    margin:          3px;
    min-height:      34px;
    padding:         4px 0 4px 5px;
}

body.pickem.group .tournament .game-container div.game-link .game {
    display:         flex;
    flex-direction:  row;
    justify-content: start;
}

body.site.index .tournament .game-container div.game-link .game,
body.pickem:not(.group) .tournament .game-container div.game-link .game {
    padding-top: 5px;
}

.tournament .game-container div.game-link .game span {
    display:       inline-block;
    margin-right:  0;
    flex-shrink:   0;
    padding-right: 8px;
}

.tournament .game-container div.game-link .game .game-team-logo-container {
    display:    inline-block;
    width:      32px !important;
    text-align: center;
}

.tournament .game-container div.game-link .game span.pick-points {
    padding-right: 5px;
}

.tournament .game-container div.game-link .game .logo {
    display:       inline-block;
    max-width:     30px;
    max-height:    26px;
    padding-right: 5px;
}

.tournament .round .round-title .make-pick,
.tournament .game-container div.game-link .game .make-pick.have-sticker {
    background-color: #6d943d;
    color:            #fff;
    padding:          1px;
    width:            30px;
    height:           30px;
    text-align:       center;
    border-radius:    50%;
    font-weight:      bold;
    margin-top:       -3px;
    margin-right:     2px;
    transition:       background-color 0.15s linear;
}

.tournament .round .round-title .make-pick:hover,
.tournament .game-container div.game-link .game .make-pick.have-sticker:hover {
    background-color: #5d7a3a;
}

.tournament .round .round-title .make-pick {
    margin-right: 10px;
}

.tournament .round .round-title .make-pick,
.tournament .game-container div.game-link .game .make-pick.have-sticker:hover {
    cursor: pointer;
}

.tournament .game-container div.game-link .game .make-pick.need-sticker {
    background-color: #1b6bb1;
    color:            #fff;
    padding:          5px;
    width:            31px;
    height:           30px;
    text-align:       center;
    border-radius:    50%;
    font-weight:      bold;
    margin-top:       -3px;
    margin-right:     2px;
}

.tournament .game-container div.game-link .game .make-pick.need-sticker:hover {
    cursor:          pointer;
    text-decoration: none;
}

.tournament .game-container div.game-link .game.picked {
    background-color: #535151;
    color:            #fff;
    font-weight:      bold;
}

.tournament .game-container div.game-link .game.picked.loser-maximus::after,
.tournament .game-container div.game-link .game.picked.winner-maximus::after {
    display:      inline-block;
    float:        right;
    margin-right: 10px;
    font-size:    0.9em;
}

body.pickem.view .tournament .game-container div.game-link .game.picked.loser-maximus::after,
body.pickem.view .tournament .game-container div.game-link .game.picked.winner-maximus::after {
    margin-top: 2px;
}

.tournament .game-container div.game-link .game.picked.loser-maximus::after {
    content: "👎 (0-3)";
}

.tournament .game-container div.game-link .game.picked.winner-maximus::after {
    content: "👍 (3-0)";
}

body:not(.logged-in) .tournament .game-container div.game-link .game.winner,
body:not(.made-picks) .tournament .game-container div.game-link .game.winner {
    background-color: var(--pickem-success);
}

body.made-picks .tournament .game-container div.game-link .game.winner:not(.picked) {
    border-right: 15px solid var(--pickem-success);
}

.tournament .game-container div.game-link .game.picked.winner {
    background-color: var(--pickem-success);
}

.tournament .game-container div.game-link .game.picked.loser {
    color:            #fff;
    background-color: var(--pickem-fail);
}

.tournament.finished .game-container .game.picked.winner:hover {
    background-color: var(--pickem-success);
    cursor:           default;
}

.tournament.finished .game-container .game.picked.winner:focus {
    background-color: var(--pickem-success);
    cursor:           default;
}

.tournament.finished .game-container .game.picked.loser:hover {
    color:            #fff;
    cursor:           default;
    background-color: var(--pickem-fail);
}

.tournament.finished .game-container .game.picked.loser:focus {
    color:            #fff;
    background-color: var(--pickem-fail);
    cursor:           default;
}

.tournament .game-container div.game-link .game.loser-didnt-make-it span {
    text-decoration: line-through;
}

.tournament .game-container div.game-link:hover div.game.unplayed {
    background-color: var(--pickem-dark);
}

.tournament.finished .game-container div.game-link {
    color: #fff;
}

.tournament.finished .game-container div.game-link:hover div.game {
    background-color: var(--pickem-darker);
    cursor:           default;
}

.tournament.finished .game-container div.game-link:focus div.game {
    background-color: var(--pickem-darker);
    cursor:           default;
}

.fantasy-players {
    margin-bottom: 20px;
}

.fantasy-players table {
    margin-bottom: 0;
}

.fantasy-players table thead {
    display:      table;
    width:        calc(100% - 1em);
    table-layout: fixed;
}

.fantasy-players table thead tr {
    background-color: var(--pickem-light);
}

.fantasy-players table thead tr th {
    color:      #99bad0;
    text-align: center;
}

.fantasy-players table thead tr th:hover {
    cursor: pointer;
}

.fantasy-players table thead tr th[class*="sorting-"] {
    color: #fff;
}

.fantasy-players table tbody {
    display:  block;
    height:   400px;
    overflow: auto;
}

.fantasy-players table tbody tr {
    display:      table;
    width:        100%;
    table-layout: fixed;
}

.fantasy-players table tbody tr:nth-of-type(even) {
    color:            #b3b0b0;
    background-color: #10161a;
}

.fantasy-players table tbody tr:nth-of-type(odd) {
    color:            #b3b0b0;
    background-color: var(--pickem-darker);
}

.fantasy-players table tbody td {
    text-align: center;
}

.fantasy-players table tbody td:hover {
    cursor: pointer;
}

.fantasy-players table tbody td .team-logo {
    width: 32px;
}

@media (max-width: 768px) {
    .fantasy-players.table-responsive {
        border: 0;
    }
}

#search {
    margin-bottom:    10px;
    background-color: #10161a;
    border:           3px solid var(--pickem-light);
}

.fantasy-team {
    padding:    10px 0 10px 0;
    text-align: center;
}

.fantasy-team div.col-xs-2 {
    padding-right: 5px;
    padding-left:  5px;
}

.fantasy-team img.player-logo {
    border-radius: 50%;
    border:        3px solid var(--pickem-light);
    margin-top:    5px;
    margin-bottom: 45px;
}

.fantasy-team img.player-sticker {
    position: absolute;
    top:      155px;
    left:     35px;
}

.fantasy-team .player-point {
    color: var(--light-grey-hover);
}

.fantasy-team .player:hover {
    cursor: pointer;
}

.fantasy-team .player.highlighted {
    background-color: #b3b0b0;
}

.fantasy-team .submit-team button {
    margin-top:       100px;
    height:           50px;
    background-color: #1f961d;
    border-color:     #141d11;
}

@media (max-width: 1200px) {
    .fantasy-team img.player-sticker {
        top:  130px;
        left: 20px;
    }

    .fantasy-team .submit-team button {
        margin-top:    80px;
        height:        50px;
        margin-bottom: 10px;
    }
}

@media (max-width: 991px) {
    .fantasy-team .player-role h4 {
        font-size: 16px;
    }

    .fantasy-team img.player-logo {
        margin-bottom: 35px;
    }

    .fantasy-team img.player-sticker {
        top:   105px;
        left:  20px;
        width: 90px;
    }

    .fantasy-team .submit-team button {
        margin-top:    60px;
        height:        50px;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .fantasy-team {
        text-align: left;
    }

    .fantasy-team img.player-logo {
        width:         80px;
        float:         left;
        margin-right:  120px;
        margin-bottom: 25px;
    }

    .fantasy-team img.player-sticker {
        top:   35px;
        left:  90px;
        width: 128px;
    }

    .fantasy-team .player-name {
        margin-top: 20px;
    }

    .fantasy-team .player:nth-of-type(even) {
        background-color: var(--pickem-darker);
    }

    .fantasy-team .submit-team button {
        margin-top:    0;
        height:        50px;
        margin-bottom: 10px;
    }
}

.fantasy-days {
    margin-top: 20px;
}

.fantasy-days div.day {
    background-color: var(--pickem-light);
    border-right:     1px solid var(--pickem-dark);
    text-align:       center;
}

.fantasy-days div.day:hover {
    cursor:        pointer;
    border-bottom: 3px solid #99bad0;
}

.fantasy-days div.day:last-child {
    border-right: 0;
}

.fantasy-days div.day h4 {
    margin-top: 4px;
}

.fantasy-days div.day span {
    font-size:   15px;
    font-weight: normal;
}

@media (max-width: 768px) {
    .fantasy-days div.day {
        border-right:  0;
        border-bottom: 1px solid var(--pickem-dark);
    }

    .fantasy-days div.day:hover {
        cursor:        pointer;
        border-left:   3px solid #99bad0;
        border-right:  3px solid #99bad0;
        border-bottom: 1px solid var(--pickem-dark);
    }
}

.fantasy-days div.day.active {
    border-bottom: 3px solid #99bad0;
}

@media (max-width: 768px) {
    .fantasy-days div.day.active {
        border-left:   3px solid #99bad0;
        border-right:  3px solid #99bad0;
        border-bottom: 1px solid var(--pickem-dark);
    }
}

.alert a:not(.btn-sm):not(.btn-xs):before {
    content:      "\e144";
    font-family:  "Glyphicons Halflings";
    font-size:    14px;
    margin-right: 4px;
}

.opacitypt4,
.tournament .game-container div.game-link .game span.pick-points,
.tournament .game-container div.game-link .game.loser img,
.tournament .game-container div.game-link .game.loser span,
.fantasy-days div.day span {
    opacity:     0.4;
    font-weight: bold;
}

.darkBlueBorder, .fantasy-players table, .fantasy-players table thead tr th, .fantasy-players table tbody td {
    border: 1px solid var(--pickem-dark);
}

.tournament-score.trophy {
    background-size:     auto 75%;
    background-position: center right;
    background-repeat:   no-repeat;
}

.explanation {
    cursor:        help;
    border-bottom: 1px dashed #aaa;
}

.jconfirm.jconfirm-black {
    background: rgba(0, 0, 0, 0.4);
}

.jconfirm-box-container {
    color: #000;
}

.setting-description {
    font-weight: 400;
    margin-left: 20px;
}

.picked .make-pick {
    display: none;
}

.navbar-nav > li.navitem.steam-login-btn > a {
    padding-top:    12px;
    padding-bottom: 12px;
}

.navbar-nav .logo-container > a {
    position:     relative;
    padding-left: 56px !important;
}

.navbar-nav .logo-container img {
    position:   absolute;
    left:       14px;
    top:        11px;
    max-width:  30px;
    max-height: 30px;
}

.navbar-nav .logo-container img.event-logo-10 {
    top: 13px;
}

.nav > li.dropdown-caret > a {
    padding-left:  18px;
    padding-right: 18px;
}

.nav .dropdown-menu {
    background-color: #222;
}

.nav .dropdown-menu {
    padding-top: 0;
}

.nav .dropdown-menu a {
    color: #9d9d9d;
}

.nav .dropdown-menu > .active > a {
    background-color: #080808;
}

.select-event {
    margin-bottom:    10px;
    background-color: #10161a;
    border:           3px solid var(--pickem-light);
}

.fantasy-players table thead th {
    border-top: 3px solid transparent !important;
    position:   relative;
}

.fantasy-players table thead th.role-active {
    border-top-color: #99bad0 !important;
}

.fantasy-players table thead tr th[class*="sorting-"]:after {
    position:    absolute;
    font-size:   12px;
    top:         10px;
    margin-left: 4px;
}

.fantasy-players table thead th.sorting-desc:after {
    content: " \25bc";
}

.fantasy-players table thead th.sorting-asc:after {
    content: " \25b2";
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: unset;
}

.table-striped > tbody > tr:nth-child(even) {
    background-color: var(--pickem-darker);
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-color: var(--pickem-light);
}

.table-bordered {
    box-shadow: #111 4px 4px 8px;
}

.fantasy-players table td:last-child img {
    max-height: 32px;
}

.fantasy-players table tbody tr.highlighted td {
    border-top-color:    white;
    border-bottom-color: white;
}

.fantasy-players table tbody tr.highlighted td:first-child {
    border-left-color: white;
}

.fantasy-players table tbody tr.highlighted td:last-child {
    border-right-color: white;
}

form .form-control {
    color:            #fff;
    background-color: #10161a;
    border:           3px solid var(--pickem-light);
}

form .form-control[readonly],
form .form-control[disabled] {
    color:            #b3b0b0;
    background-color: #10161a;
    border:           3px solid var(--pickem-light);
    opacity:          0.7;
}

form .settings-submit {
    background-color: var(--pickem-light);
    border:           3px solid #3d5769;
    width:            100px;
}

form .form-control::placeholder {
    color:   var(--light-grey-hover);
    opacity: 0.3;
}

/* PUT THIS STUFF IN SCSS */
#stickerCheckbox {
    display:      block;
    text-indent:  -15px;
    padding-left: 15px;
    padding-top:  2px;
}

#stickerCheckbox input {
    height:         25px;
    width:          25px;
    padding:        0;
    vertical-align: bottom;
    position:       relative;
    top:            -1px;
    overflow:       hidden;
}

#stickerCheckbox span {
    font-weight: normal;
    color:       #555;
}

.setting-highlighted {
    border:     2px solid #dff0d8;
    background: #dff0d826;
    padding:    8px 8px;
}

.ui-tooltip {
    white-space: pre-line;
}

body.pickem.group .tournament .game-container div.game-link .game.winner {
    background-color: var(--pickem-success);
}

body.pickem.group .users-pickem {
    margin-top:  -2px;
    margin-left: auto;
}

body.pickem.group .users-pickem .users-pickem-flex-container {
    display:        flex;
    flex-direction: row-reverse;
    flex-wrap:      wrap;
}

body.pickem.group .users-pickem .user-pickem {
    margin-right: 2px;
    position:     relative;
}

body.pickem.group .users-pickem .user-pickem:first-child {
    margin-right: 0;
}

body.pickem.group .users-pickem .user-pickem img {
    height: 24px;
}

body.pickem.group .users-pickem .user-pickem::after,
.drag-item.picked-index::after {
    position:      absolute;
    top:           -5px;
    right:         -4px;
    background:    #fff6;
    border-radius: 50%;
    width:         16px;
    text-align:    center;
    height:        16px;
    font-size:     10px;
}

.drag-item.picked-index::after {
    top:     2px;
    right:   2px;
    z-index: 99999999999;
}

body.pickem.group .users-pickem .user-pickem.loser::after {
    color:        red;
    border-color: red;
}

body.pickem.group .users-pickem .user-pickem.winner::after {
    color:        #63f731;
    border-color: #63f731;
}

body.pickem.group .users-pickem .user-pickem.loser::after {
    content: "✖";
}

body.pickem.group .users-pickem .user-pickem.winner::after,
.drag-item.picked-index.picked-index-4::after {
    content: "✔";
}

body.pickem.group .users-pickem .user-pickem.loser-maximus::after,
.drag-item.picked-index.picked-index-8::after,
.drag-item.picked-index.picked-index-9::after {
    content: "👎";
    border:  1px solid;
}

body.pickem.group .users-pickem .user-pickem.winner-maximus::after,
.drag-item.picked-index.picked-index-0::after,
.drag-item.picked-index.picked-index-1::after {
    content: "👍";
    border:  1px solid;
}

body.settings table.groups-table {
    margin-top: 4px;
}

body.settings table.groups-table th,
body.settings table.groups-table td {
    border-color: var(--pickem-light);
    padding:      5px 10px;
}

.tournament-score .only-on-parent-hover {
    display: none;
}

.tournament-score:hover .only-on-parent-hover {
    display: initial;
}

.alert {
    background-color:  var(--pickem-darker);
    border-left-width: 6px;
    color:             #fff;
    box-shadow:        #111 4px 4px 8px;
}

.alert > div:first-child::before {
    font-weight:  bold;
    font-variant: all-small-caps;
    margin-right: 8px;
}

.alert.alert-success > div:first-child::before {
    content: "Success";
    color:   #b2dba1;
}

.alert.alert-info > div:first-child::before {
    content: "Info";
    color:   #9acfea;
}

.alert.alert-warning > div:first-child::before {
    content: "Warning";
    color:   #f5e79e;
}

.alert > div:first-child[data-attribute]::before {
    content: attr(data-attribute);
}

.alert.alert-danger > div:first-child::before {
    content: "Error";
    color:   #dca7a7;
}

.btn {
    font-variant: all-small-caps;
    font-weight:  bold;
    padding-top:  3px; /** Account for the all-small-caps */
    box-shadow:   #111 4px 4px 8px;
}

.jconfirm {
    z-index: 9990 !important;
}

.jconfirm.jconfirm-black .jconfirm-box {
    border:           3px solid #777;
    background-color: var(--pickem-darker);
}

.cell {
    border:                      1px solid black;
    text-align:                  center;
    flex-basis:                  33.3333%;
    flex-grow:                   0;
    flex-shrink:                 0;
    -webkit-box-flex:            0;
    -webkit-tap-highlight-color: #0000;
}

.row-bootstrap4 {
    display:      flex;
    flex-flow:    row wrap;
    margin-right: -15px;
    margin-left:  -15px;
}

.col-bootstrap4 {
    flex-basis: 0;
    flex-grow:  1;
    max-width:  100%;
}

@media screen and (max-width: 640px) {
    .col-bootstrap4 {
        flex-basis: 25%;
    }
}

.jconfirm .jconfirm-box div.content-pane .content .drag-popup > .row {
    margin-left:  0;
    margin-right: 0;
}

.jconfirm .jconfirm-box div.content-pane .content .drag-popup img {
    width: initial;
}

.jconfirm .jconfirm-box div.content-pane .content .drag-popup img:hover {
    cursor: pointer;
}

.drag-items-container {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    flex-flow:       row wrap;
}

.drag-items-container .drag-item {
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    flex:        1;
    text-align:  center;
    padding:     8px 4px;
    transition:  background-color 0.15s linear;
    position:    relative;
}

.drag-items-container .drag-item.drag-item-grouping {
    border: 2px solid #777;
}

.drag-items-container .drag-item.drag-item-grouping.drag-item-grouping--left {
    border-right: 0;
}

.drag-items-container .drag-item.drag-item-grouping.drag-item-grouping--right {
    border-left: 0;
}

.drag-items-container .drag-item.has-image:hover {
    background-color: var(--pickem-success-light);
}

.drag-item.picked-index::after {
    content: "";

}

@media screen and (max-width: 992px) {
    .drag-items-container .drag-item {
        flex-basis: 25%;
    }
}

@media screen and (max-width: 640px) {
    .drag-items-container .drag-item {
        flex-basis: 50%;
    }
}

.drag-items-container .drag-item .helper {
    display:        inline-block;
    height:         100%;
    vertical-align: middle;
}

.drag-items-container .drag-item img {
    max-width:      50px;
    max-height:     50px;
    z-index:        9999999999;
    vertical-align: middle;
}

.dashed-border {
    overflow:      hidden;
    position:      relative;
    text-align:    center;
    padding:       10px;
    margin-bottom: 20px;
}

.dashed-border:before {
    content:  "";
    position: absolute;
    border:   10px dashed #bbb;
    top:      -8px;
    bottom:   -8px;
    left:     -8px;
    right:    -8px;
}

.droppable-container {
    height:      140px;
    padding-top: 12px;
    font-size:   24px;
    color:       #bbb;
    transition:  background-color 0.15s linear;
}

.droppable-container.ui-state-highlight {
    border:           0 !important;
    background-color: var(--pickem-success-light);

}

.droppable-container.ui-state-available {
    background-color: var(--yellow-hue);
}

.ui-tooltip-dark {
    background: var(--pickem-darker) !important;
    color:      #fff;
}

.homepage .row:not(.hr-container) {
    padding-top:    15px;
    padding-bottom: 15px;
    margin-bottom:  15px;
    font-size:      24px;
    line-height:    40px;
}

.homepage .row.hr-container hr {
    width:        60%;
    border-color: var(--pickem-light)
}

.homepage .row > div img {
    max-width: 100%;
}

.homepage .row > div img.homepage-image {
    border:  3px solid var(--pickem-light);
    padding: 3px;
}

.homepage .row h2,
.homepage .row .h2,
.homepage .row p {
    color: #eee;
}

.homepage .row h2,
.homepage .row .h2 {
    font-size:   250%;
    margin-top:  0;
    font-family: serif;
}

.homepage .row h2 .label,
.homepage .row .h2 .label {
    font-family:    var(--font-family);
    font-weight:    bold;
    font-variant:   all-small-caps;
    font-size:      50%;
    padding:        0.1em 0.3em 0.3em 0.3em;
    vertical-align: middle;
}

.homepage .blockquote-reverse {
    font-size:          80%;
    border-right-width: 2px;
    border-color:       var(--csgo-orange)
}

.homepage .blockquote-reverse small::after {
    content: "";
}

.homepage .blockquote-reverse small::before {
    content: "\00A0 \2014";
}

.navbar-nav > li > a {
    line-height: 23px !important;
}

.navbar-brand {
    height:      auto !important;
    line-height: 23px !important;
}

@media screen and (max-width: 640px) {

    .homepage .row:not(.hr-container) {
        font-size: 22px;
    }

    .homepage .row h2,
    .homepage .row .h2 {
        font-size: 200%;
    }
}

.picks-time-remaining {
    display:          block;
    text-align:       center;
    background-color: var(--csgo-green-picks);
    color:            #fff;
    margin:           8px 0 0 -10px;
    padding:          4px;
}

.col-xs-5ths {
    width: calc(var(--col-5ths-width) - 8px);
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: calc(var(--col-5ths-width) - 8px);
        float: left;
    }

    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: calc(var(--col-5ths-width) - 8px);
        float: left;
    }

    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .ui-tooltip {
        max-width: 750px;
    }

}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: calc(var(--col-5ths-width) - 8px);
        float: left;
    }

    .col-xs-5ths:nth-child(5n),
    .col-sm-5ths:nth-child(5n),
    .col-md-5ths:nth-child(5n),
    .col-lg-5ths:nth-child(5n) {
        margin-right: 0;
        width:        var(--col-5ths-width);
    }

    .col-xs-5ths,
    .col-sm-5ths,
    .col-md-5ths,
    .col-lg-5ths {
        position:      relative;
        min-height:    1px;
        padding-right: 3px;
        padding-left:  3px;
        margin-right:  8px;
        margin-bottom: 8px;
    }
}

/**
 * Margin and padding shortcuts
 */

.mx-0 {
    margin-left:  0;
    margin-right: 0;
}

.mx-1 {
    margin-left:  2px;
    margin-right: 2px;
}

.mx-2 {
    margin-left:  4px;
    margin-right: 4px;
}

.mx-3 {
    margin-left:  8px;
    margin-right: 8px;
}

.my-0 {
    margin-top:    0;
    margin-bottom: 0;
}

.my-1 {
    margin-top:    2px;
    margin-bottom: 2px;
}

.my-2 {
    margin-top:    4px;
    margin-bottom: 4px;
}

.my-3 {
    margin-top:    8px;
    margin-bottom: 8px;
}

.my-10px {
    margin-top:    8px;
    margin-bottom: 8px;
}

.m--top-0 {
    margin-top: 0;
}

.m--top-1 {
    margin-top: 2px;
}

.m--top-2 {
    margin-top: 4px;
}

.m--top-3 {
    margin-top: 8px;
}

.m--right-0 {
    margin-right: 0;
}

.m--right-1 {
    margin-right: 2px;
}

.m--right-2 {
    margin-right: 4px;
}

.m--right-3 {
    margin-right: 8px;
}

.m--bottom-0 {
    margin-bottom: 0;
}

.m--bottom-1 {
    margin-bottom: 2px;
}

.m--bottom-2 {
    margin-bottom: 4px;
}

.m--bottom-3 {
    margin-bottom: 8px;
}

.m--left-0 {
    margin-left: 0;
}

.m--left-1 {
    margin-left: 2px;
}

.m--left-2 {
    margin-left: 4px;
}

.m--left-3 {
    margin-left: 8px;
}

.m--left-10px {
    margin-left: 10px;
}

.py-0 {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

.py-2 {
    padding-top:    4px;
    padding-bottom: 4px;
}

.py-1px {
    padding-top:    1px;
    padding-bottom: 1px;
}

.pt-0 {
    padding-top: 0;
}

.p--left-0 {
    padding-left: 0;
}

.p--left-1 {
    padding-left: 2px;
}

.p--left-2 {
    padding-left: 4px;
}

.p--left-3 {
    padding-left: 8px;
}

.p--left-4 {
    padding-left: 16px;
}

.p--left-0 {
    padding-left: 0;
}

.p--bottom-1 {
    padding-bottom: 2px;
}

.p--bottom-2 {
    padding-bottom: 4px;
}

.p--bottom-3 {
    padding-bottom: 8px;
}

.p--bottom-4 {
    padding-bottom: 16px;
}

/**
 * End margin and padding shortcuts
 */

.text--white {
    color: #fff !important;
}

.match {
    background-color: var(--pickem-darker);
}

@media (max-width: 600px) {
    .match {
        padding-left:  5px !important;
        padding-right: 5px !important;
    }
}

.team-name {
    transition: background-color 0.1s linear;
}

.team-name.team-active {
    background-color: var(--light-grey-hover) !important;
}

.live-match .row:nth-child(2) {
    margin-top: 4px;
}

.team-score span {
    background:  rgba(0, 0, 0, 0.5);
    padding:     2px 4px;
    width:       28px;
    text-align:  center;
    display:     inline-block;
    font-weight: bold;
}

.map-name {
    font-weight: bold;
}

.d-inline-block {
    display: inline-block;
}

.valign-top {
    vertical-align: top;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear:   both;
    display: table;
}

.admin .free {
    display:  inline-block;
    position: relative;
}

.admin .free::before {
    content:      "FREE";
    position:     absolute;
    font-size:    10px;
    font-weight:  bold;
    font-variant: all-small-caps;
    top:          -6px;
    left:         4px;
    color:        #fff;
}

.ui-tooltip {
    font-size: 15px;
}

.btn-group-picks-stats .btn,
.btn-group-picks-stats .btn:hover,
.btn-group-picks-stats .btn:active,
.btn-group-picks-stats .btn:focus {
    outline: none;
}

.btn-group-picks-stats .btn {
    transition: background-color 0.1s linear, border 0.1s linear, color 0.1s linear;
}

.picks-stats {
    font-weight: 400;
}

/**
 * If the picks-stats are shown, scale the avatars to 0.8x
 */
.picks-stats:not([style="display: none;"]) + .users-pickem-flex-container .user-pickem img {
    height: 20px !important;
}

.raid-dropdown {
    position:      relative;
    width:         200px;
    padding:       3px 10px;
    background:    #fff;
    border-radius: 7px;
    border:        1px solid rgba(0, 0, 0, 0.15);
    box-shadow:    0 1px 1px rgba(50, 50, 50, 0.1);
    cursor:        pointer;
    outline:       none;
    font-weight:   500;
}

.raid-dropdown .dropdown {
    position:       absolute;
    top:            140%;
    left:           0;
    right:          0;
    z-index:        9999999;
    background:     white;
    border-radius:  inherit;
    border:         1px solid rgba(0, 0, 0, 0.17);
    box-shadow:     0 0 5px rgba(0, 0, 0, 0.1);
    font-weight:    normal;
    transition:     all 0.15s linear;
    list-style:     none;
    opacity:        0;
    pointer-events: none;
}

.raid-dropdown .dropdown::before {
    content:      "";
    width:        0;
    height:       0;
    position:     absolute;
    bottom:       100%;
    right:        13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent;
}

.raid-dropdown .dropdown li a {
    display:         block;
    padding:         3px 10px;
    text-decoration: none;
    border-bottom:   1px solid #e6e8ea;
    box-shadow:      inset 0 1px 0 rgba(255, 255, 255, 1);
    transition:      all 0.15s linear;
}

.raid-dropdown .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.raid-dropdown .dropdown li:last-of-type a {
    border:        none;
    border-radius: 0 0 7px 7px;
}

fieldset {
    border: 0;
}

label {
    display: block;
}

/* select with custom icons */
.ui-selectmenu-menu #event-selector-menu.ui-menu.customicons .ui-menu-item-wrapper {
    padding:    0.5em 0 0.5em 3em;
    background: var(--pickem-dark);
    transition: background-color 0.05s linear;
    color:      #fff;
}

.ui-selectmenu-menu #event-selector-menu.ui-menu.customicons .ui-menu-item .ui-icon {
    height: 24px;
    width:  24px;
    top:    0.1em;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--pickem-darker) !important;
    border:     var(--pickem-light) !important;
    transition: border-color 0.05s linear;
}

/**
 * @TODO: On new majors: new ui-icon-events
 */
#event-selector-menu .ui-icon.event9 {
    background: url("/img/tournaments/logo_event9.png");
}

#event-selector-menu .ui-icon.event10 {
    background: url("/img/tournaments/logo_event10.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event11 {
    background: url("/img/tournaments/logo_event11.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event15 {
    background: url("/img/tournaments/logo_event15.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event16 {
    background: url("/img/tournaments/logo_event16.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event18 {
    background: url("/img/tournaments/logo_event18.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event19 {
    background: url("/img/tournaments/logo_event19.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event20 {
    background: url("/img/tournaments/logo_event20.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event21 {
    background: url("/img/tournaments/logo_event21.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event22 {
    background: url("/img/tournaments/logo_event22.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event23 {
    background: url("/img/tournaments/logo_event23.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event24 {
    background: url("/img/tournaments/logo_event24.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event25 {
    background: url("/img/tournaments/logo_event25.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event26 {
    background: url("/img/tournaments/logo_event26.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event27 {
    background: url("/img/tournaments/logo_event27.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event28 {
    background: url("/img/tournaments/logo_event28.png");
}

/*noinspection CssUnknownTarget*/
#event-selector-menu .ui-icon.event29 {
    background: url("/img/tournaments/logo_event29.png");
}

#event-selector-menu .ui-icon {
    background-size: contain !important;
    margin-left:     4px;
}

#event-selector-menu .ui-selectmenu-icon.ui-icon {
    margin-top: 2px;
}

#event-selector-menu.ui-widget.ui-widget-content {
    border:     2px solid var(--pickem-light);
    transition: border-color 0.05s linear;
    background: initial;
    box-shadow: #000 2px 2px 4px;
}

#event-selector-menu.ui-menu .ui-state-focus,
#event-selector-menu.ui-menu .ui-state-active {
    margin: initial;
}

.event-selector > span {
    transition: background-color 0.1s linear;
}

select#event-selector,
.event-selector > span,
.event-selector > span:hover,
.event-selector > span:active,
.event-selector > span:focus {
    background: var(--pickem-darker) !important;
    color:      #fff !important;
    border:     2px solid var(--pickem-light) !important;
    transition: border-color 0.05s linear;
    box-shadow: #111 4px 4px 8px;
}

.event-selector > span:hover {
    background: var(--pickem-dark);
}

.event-selector > span:active {
    border-color: var(--pickem-success) !important;
}

/**
 * No JS
 */
select#event-selector {
    /** Copied from .ui-selectmenu-button.ui-button */
    text-align:  left;
    white-space: nowrap;
    width:       14em;

    /** Copied from .ui-button */
    padding:     .4em 1em;
}

@media (min-width: 1460px) {
    .visible-xl {
        display: block !important;
    }
}

.rank-container {
    --cylinder-color-r: 128;
    --cylinder-color-g: 128;
    --cylinder-color-b: 128;
}

/**
 * bronze 205	127	50
 * silver 190	194	203
 * gold 255	216	0
 * diamond 185	242	255
 */

.cylinder-1,
.table-leaderboards td.position-1,
.rank-container.position-1 {
    --cylinder-color-r: 255;
    --cylinder-color-g: 216;
    --cylinder-color-b: 0;
}

.cylinder-2,
.table-leaderboards td.position-2,
.rank-container.position-2 {
    --cylinder-color-r: 190;
    --cylinder-color-g: 194;
    --cylinder-color-b: 203;
}

.cylinder-3,
.table-leaderboards td.position-3,
.rank-container.position-3 {
    --cylinder-color-r: 205;
    --cylinder-color-g: 127;
    --cylinder-color-b: 50;
}

.cylinder {
    position:         relative;
    margin:           0 auto;
    display:          inline-block;
    width:            100px;
    height:           100px;
    border-radius:    50px/25px;
    background-color: rgba(
                              var(--cylinder-color-r),
                              var(--cylinder-color-g),
                              var(--cylinder-color-b),
                              0.5
                      );
    vertical-align:   bottom;
}

.cylinder:before,
.cylinder:after {
    position:      absolute;
    left:          0;
    width:         100px;
    height:        50px;
    border-radius: 50px/25px;
    content:       "";
}

.cylinder:before {
    top:              0;
    background-color: rgba(
                              var(--cylinder-color-r),
                              var(--cylinder-color-g),
                              var(--cylinder-color-b),
                              0.2
                      );
}

.cylinder:after {
    bottom:           0;
    background-color: rgba(
                              var(--cylinder-color-r),
                              var(--cylinder-color-g),
                              var(--cylinder-color-b),
                              0.4
                      );
}

.cylinder-1 {
    height:  200px;
    z-index: 1000;
}

.cylinder-2 {
    height:       160px;
    margin-right: -15px;
}

.cylinder-3 {
    height:      120px;
    margin-left: -15px;
}

.podium-container {
    position: relative;
    padding:  24px 0 16px;
}

.cylinder {
    text-align: center;
    box-shadow: #000 2px 2px 48px;
}

.cylinder img {
    position:      absolute;
    top:           -16px;
    left:          26px;
    width:         48px;
    box-shadow:    #000 2px 2px 4px;
    border:        3px solid rgb(
                           var(--cylinder-color-r),
                           var(--cylinder-color-g),
                           var(--cylinder-color-b)
                   );
    border-radius: 6px;
    z-index:       2000;
}

.cylinder img + img {
    top:     -29px;
    left:    32px;
    z-index: 1900;
    opacity: 0.7;
}

.cylinder img + img + img {
    top:     -42px;
    left:    38px;
    z-index: 1800;
    opacity: 0.4;
}

.cylinder .position {
    position:    absolute;
    top:         50px;
    left:        40px;
    font-size:   30px;
    z-index:     3000;
    font-weight: bold;
    text-shadow: #000 2px 2px 4px;
}

.cylinder .more-winners {
    position:    absolute;
    top:         -56px;
    right:       8px;
    text-shadow: #000 2px 2px 4px;
    font-weight: bold;
    z-index:     4000;
}

.table-leaderboards td.position {
    text-align: center;
}

.table-leaderboards td.position-1,
.table-leaderboards td.position-2,
.table-leaderboards td.position-3 {
    border-color: rgb(
                          var(--cylinder-color-r),
                          var(--cylinder-color-g),
                          var(--cylinder-color-b)
                  );
    border-width: 3px;
}

.table-leaderboards td.avatar img {
    margin-right:  8px;
    max-width:     24px;
    max-height:    24px;
    border-radius: 2px;
    box-shadow:    #000 2px 2px 4px;
}

.rank-container {
    position:      absolute;
    top:           10px;
    right:         26px;
    padding:       12px 6px;
    border:        4px solid rgb(
                           var(--cylinder-color-r),
                           var(--cylinder-color-g),
                           var(--cylinder-color-b)
                   );
    border-radius: 50%;
    box-shadow:    #000 2px 2px 4px;
    font-weight:   bold;
    font-size:     1.25em;
    min-width:     60px;
    text-align:    center;
}

.rank-container[data-mask="0000"] {
    font-size:      1.05em;
    min-width:      unset;
    padding-top:    14px;
    padding-bottom: 14px;
}

.rank-container[data-mask="00000"] {
    font-size:      0.85em;
    min-width:      unset;
    padding-top:    16px;
    padding-bottom: 16px;
}

.current-rank-container img {
    margin-right:  6px;
    border-radius: 2px;
    box-shadow:    #000 2px 2px 4px;
}

.rank-container.position-1,
.rank-container.position-2,
.rank-container.position-3 {
    box-shadow: rgba(var(--cylinder-color-r), var(--cylinder-color-g), var(--cylinder-color-b), 0.7) 0 0 12px;
    background: rgba(var(--cylinder-color-r), var(--cylinder-color-g), var(--cylinder-color-b), 0.3);
}

.table-leaderboards tr.you {
    background-color: var(--pickem-light) !important;
}

.table-leaderboards tr.you td:not(.position-1):not(.position-2):not(.position-3) {
    border-color: var(--pickem-darker);
}

.table-leaderboards tr.you td:not(.position-1):not(.position-2):not(.position-3):last-child {
    border-right: 3px solid var(--csgo-orange);
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.items-center {
    align-items: center;
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }
}