/* bootstrap overrides */
/* correction for sizing of hero-unit background image on non-logged in main page */
.hero-unit {
    padding-bottom: 65px !important;
}

div.popover {
    width: 400px !important; /* wider popover */
    color: rgb(
        85,
        85,
        85
    ); /* fix odd bug where color of text is dependent on where the popover spawns from  bs 2.2.2 */
    text-shadow: none; /* text shadows are descending as well bs 2.2.2 */
    font-weight: normal; /* more resets for bs 2.2.2 */
}

/* this is a slightly wider than span3 but less than span4 size for the team_partial */
.span3_5 {
    width: 246px;
}

/* fix for bs 2.2.2 bug #6344 */
.modal-body {
    overflow: visible;
}

/*support dropdowns inside button groups (left sidebar of the bet page) */
.btn-center-grouped-dropdown > .dropdown-toggle {
    border-radius: 0;
}

.btn-center-grouped-dropdown > .dropdown-menu {
    text-align: left;
}

.btn-center-grouped-dropdown > .btn-last {
    border-left: 0px;
}

div.index-page-hero {
    text-align: center;
    background: url("../images/hero/hero-pigskin.da71f63b1669.jpg") no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-resolution: 2dppx) {
    div.index-page-hero {
        background-image: url("../images/hero/hero-pigskin@2x.8906d6873cf1.jpg");
        background-size: 940px 284px;
    }
}

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.badge-in-progress-small::before,
.badge-push-small::before,
.badge-picked-small::before,
.badge-incorrect-small::before,
.badge-correct-small::before {
    position: absolute;
    background: url("../images/badges/badges-small.abd4ed29f3c4.png?v=2") no-repeat;
    content: "";
    bottom: -2px;
    right: -2px;
    z-index: 1;
}

i.badge-icon-in-progress-small,
i.badge-icon-push-small,
i.badge-icon-picked-small,
i.badge-icon-incorrect-small,
i.badge-icon-correct-small {
    display: inline-block;
    position: relative;
    background: url("../images/badges/badges-small.abd4ed29f3c4.png?v=2") no-repeat;
    vertical-align: middle;
}

.badge-in-progress-small::before,
i.badge-icon-in-progress-small {
    background-position: -0px -16px;
    width: 16px;
    height: 16px;
}
.badge-push-small::before,
i.badge-icon-push-small {
    background-position: -0px -0px;
    width: 16px;
    height: 16px;
}
.badge-picked-small::before,
i.badge-icon-picked-small {
    background-position: -16px -16px;
    width: 16px;
    height: 16px;
}
.badge-incorrect-small::before,
i.badge-icon-incorrect-small {
    background-position: -0px -32px;
    width: 16px;
    height: 16px;
}
.badge-correct-small::before,
i.badge-icon-correct-small {
    background-position: -16px -0px;
    width: 16px;
    height: 16px;
}

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.badge-push-large::before,
.badge-correct-large::before,
.badge-in-progress-large::before,
.badge-picked-large::before,
.badge-incorrect-large::before {
    position: absolute;
    background: url("../images/badges/badges-large.902126b89972.png") no-repeat;
    content: "";
    bottom: -4px;
    right: -5px;
    z-index: 1;
}

.badge-push-large::before {
    background-position: -0px -0px;
    width: 32px;
    height: 32px;
}
.badge-correct-large::before {
    background-position: -32px -0px;
    width: 32px;
    height: 32px;
}
.badge-in-progress-large::before {
    background-position: -0px -32px;
    width: 32px;
    height: 32px;
}
.badge-picked-large::before {
    background-position: -32px -32px;
    width: 32px;
    height: 32px;
}
.badge-incorrect-large::before {
    background-position: -0px -64px;
    width: 32px;
    height: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-resolution: 2dppx) {
    .badge-push-large::before,
    .badge-correct-large::before,
    .badge-in-progress-large::before,
    .badge-picked-large::before,
    .badge-incorrect-large::before {
        background-image: url("../images/badges/badges-large@2x.c8d14eeac2f0.png");
        background-size: 64px 96px;
    }
    .badge-in-progress-small::before,
    .badge-push-small::before,
    .badge-picked-small::before,
    .badge-incorrect-small::before,
    .badge-correct-small::before,
    i.badge-icon-in-progress-small,
    i.badge-icon-push-small,
    i.badge-icon-picked-small,
    i.badge-icon-incorrect-small,
    i.badge-icon-correct-small {
        background-image: url("../images/badges/badges-large.902126b89972.png");
        background-size: 32px 48px;
    }
}

/* FOR THE INPROGRESS BADGES */
.badge-inprogress-push-small::before,
.badge-inprogress-incorrect-small::before,
.badge-inprogress-correct-small::before {
    position: absolute;
    background: url("../images/badges/badges-inprogress-small.fe404f0c3a7c.png?v=2") no-repeat;
    content: "";
    bottom: -2px;
    right: -2px;
    z-index: 1;
}

i.badge-icon-inprogress-push-small,
i.badge-icon-inprogress-incorrect-small,
i.badge-icon-inprogress-correct-small {
    display: inline-block;
    position: relative;
    background: url("../images/badges/badges-inprogress-small.fe404f0c3a7c.png?v=2") no-repeat;
    vertical-align: middle;
}

.badge-inprogress-push-small::before,
i.badge-icon-inprogress-push-small {
    background-position: -0px -0px;
    width: 16px;
    height: 16px;
}
.badge-inprogress-incorrect-small::before,
i.badge-icon-inprogress-incorrect-small {
    background-position: -0px -32px;
    width: 16px;
    height: 16px;
}
.badge-inprogress-correct-small::before,
i.badge-icon-inprogress-correct-small {
    background-position: -16px -0px;
    width: 16px;
    height: 16px;
}

.badge-inprogress-push-large::before,
.badge-inprogress-correct-large::before,
.badge-inprogress-incorrect-large::before {
    position: absolute;
    background: url("../images/badges/badges-inprogress-large.4bc99e1b985f.png") no-repeat;
    content: "";
    bottom: -4px;
    right: -5px;
    z-index: 1;
}

.badge-inprogress-push-large::before {
    background-position: -0px -0px;
    width: 32px;
    height: 32px;
}
.badge-inprogress-correct-large::before {
    background-position: -32px -0px;
    width: 32px;
    height: 32px;
}
.badge-inprogress-incorrect-large::before {
    background-position: -0px -64px;
    width: 32px;
    height: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-resolution: 2dppx) {
    .badge-inprogress-push-large::before,
    .badge-inprogress-correct-large::before,
    .badge-inprogress-incorrect-large::before {
        background-image: url("../images/badges/badges-inprogress-large@2x.892ffb25ceec.png");
        background-size: 64px 96px;
    }
    .badge-inprogress-push-small::before,
    .badge-inprogress-correct-small::before,
    .badge-inprogress-incorrect-small::before,
    i.badge-icon-inprogress-push-small,
    i.badge-icon-inprogress-correct-small,
    i.badge-icon-inprogress-incorrect-small {
        background-image: url("../images/badges/badges-inprogress-large.4bc99e1b985f.png");
        background-size: 32px 48px;
    }
}
/* INPROGRESS BADGE STOPS HERE */

/* The sm logo pill's height, so a row with no pick is as tall as one with.
   Middle alignment would push the pill half a pixel past the line. */
table.my-weekly-bets td {
    line-height: 20px;
}

table.my-weekly-bets [class^="logo-sm-"] {
    vertical-align: top;
}

table.my-weekly-bets img.bet-badge {
    position: absolute;
}

h1.final-score-home {
    font-size: 84px;
    line-height: 84px;
    float: right;
    width: 100px;
    margin-top: 20px;
    margin-right: 40px;
}

h1.final-score-away {
    font-size: 84px;
    line-height: 84px;
    width: 100px;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
}

a.incomplete-bet-set {
    background: -moz-linear-gradient(
        left,
        rgba(253, 178, 178, 0) 0%,
        rgba(253, 178, 178, 0.6) 20%,
        rgba(253, 178, 178, 0.8) 50%,
        rgba(253, 178, 178, 0.6) 80%,
        rgba(253, 178, 178, 0) 100%
    ); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0%, rgba(253, 178, 178, 0)),
        color-stop(20%, rgba(253, 178, 178, 0.6)),
        color-stop(50%, rgba(253, 178, 178, 0.8)),
        color-stop(80%, rgba(253, 178, 178, 0.6)),
        color-stop(100%, rgba(253, 178, 178, 0))
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
        left,
        rgba(253, 178, 178, 0) 0%,
        rgba(253, 178, 178, 0.6) 20%,
        rgba(253, 178, 178, 0.8) 50%,
        rgba(253, 178, 178, 0.6) 80%,
        rgba(253, 178, 178, 0) 100%
    ); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
        left,
        rgba(253, 178, 178, 0) 0%,
        rgba(253, 178, 178, 0.6) 20%,
        rgba(253, 178, 178, 0.8) 50%,
        rgba(253, 178, 178, 0.6) 80%,
        rgba(253, 178, 178, 0) 100%
    ); /* Opera 11.10+ */
    background: -ms-linear-gradient(
        left,
        rgba(253, 178, 178, 0) 0%,
        rgba(253, 178, 178, 0.6) 20%,
        rgba(253, 178, 178, 0.8) 50%,
        rgba(253, 178, 178, 0.6) 80%,
        rgba(253, 178, 178, 0) 100%
    ); /* IE10+ */
    background: linear-gradient(
        to right,
        rgba(253, 178, 178, 0) 0%,
        rgba(253, 178, 178, 0.6) 20%,
        rgba(253, 178, 178, 0.8) 50%,
        rgba(253, 178, 178, 0.6) 80%,
        rgba(253, 178, 178, 0) 100%
    ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fdb2b2', endColorstr='#00fdb2b2',GradientType=1 ); /* IE6-9 */
    color: black;
}

i.team-bet,
.hand-pointer {
    cursor: pointer;
    cursor: hand;
    position: relative;
}

/* Picking posts a form per logo. The button is only a click target: it draws no
   border, background or shadow of its own, so the logo reads as a bare logo and
   the cell's selected/hover underlay shows through it. */
table.table-bet td.team-logo-container form {
    display: inline;
    margin: 0;
}

table.table-bet td.team-logo-container button.team-bet {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    line-height: 0;
    cursor: pointer;
}

table.table-bet td.team-logo-container button.team-bet[disabled] {
    cursor: default;
}

/* logos.css fits the mark to its md box, which is as wide as the underlay, and
   most marks touch both sides of it. Drawn smaller, the mark gets a margin
   inside the underlay (#414). */
table.table-bet td.team-logo-container i {
    background-size: 40px 40px;
}

.table-reduced-padding td {
    padding: 8px 2px !important;
}

table.table-bet td.team-logo-container:hover {
    background: url("../images/underlays/underlay-hover.9eb6a8654de0.png") no-repeat;
    background-position: center;
}

table.table-bet td.team-logo-container.bet-logo-container-disabled:hover {
    background: inherit;
}

/* A fixed width keeps the gap the "at" sits in the same in both tables,
   whatever their text columns leave over. */
table.table-bet td.team-logo-container {
    position: relative;
    width: 64px;
    text-align: center;
    vertical-align: middle;
}

table.table-bet td.selected-team,
table.table-bet td.selected-team:hover,
table.table-bet
    td.team-logo-container.selected-team.bet-logo-container-disabled:hover {
    background: url("../images/underlays/underlay-selected.6ce4fe6fb469.png") no-repeat;
    background-position: center;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-resolution: 2dppx) {
    table.table-bet td.team-logo-container:hover {
        background-image: url("../images/underlays/underlay-hover@2x.b85772f2b35c.png");
        background-size: 48px 48px;
    }
    table.table-bet td.selected-team,
    table.table-bet td.selected-team:hover,
    table.table-bet
        td.team-logo-container.selected-team.bet-logo-container-disabled:hover {
        background-image: url("../images/underlays/underlay-selected@2x.46509790b6d8.png");
        background-size: 48px 48px;
    }
}

/* Descendant, not child: the logo sits inside the submit button that posts the pick.
   A used team is rejected too, and dimming its logo on top of the cell leaves 9% opacity. */
table.table-bet td.bet-disabled,
table.table-bet td.bet-logo-container-disabled:not(.used-team) i {
    opacity: 0.3;
}

table.table-bet td.used-team {
    opacity: 0.3;
}

table.table-bet td.used-team:hover {
    background: inherit;
}

div.no-spread {
    z-index: 1001;
    position: absolute;
    width: 150px;
    height: 54px;
    padding-top: 10px;
    text-align: center;
    font-size: 18px;
    color: black;
}

div.at-text {
    z-index: 1000;
    position: absolute;
    left: 100%;
    top: 22px;
    transform: translateX(-50%);
    height: 20px;
    font-size: 14px;
    color: #999;
}

table.table-manage-games {
    margin-bottom: 0px;
}

table.table-manage-games td.playing {
    color: #149906;
}

table.table-manage-games td {
    vertical-align: middle;
}

/* funbuck formatting */
table.funbuck-bet-table td {
    vertical-align: middle;
}

table.funbuck-bet-table {
    margin-bottom: 0px;
}

table.table tr.second-row td {
    border-top: 0px solid white;
}

div.bet-well {
    padding: 10px;
}
/* end funbuck formatting */

/* Anchored to the logo cell, which is the nearest positioned ancestor now that
   the logo sits inside a submit button rather than being the clickable element. */
span.spread-badge {
    font-style: normal;
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.filter-bar {
    text-align: center;
}

.pick-history-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
}

.pick-history-week {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
    font-size: 11px;
}

.pick-history-week.current .pick-history-week-num {
    font-weight: bold;
    text-decoration: underline;
}

.pick-history-week-num {
    color: #555;
}

.week-type-group {
    margin-bottom: 10px;
}

span.funbuck-loss {
    color: red;
}

span.funbuck-win {
    color: green;
}

div.jGrowl {
    z-index: 9999;
    color: #fff;
    font-size: 12px;
}

/** Normal Style Positions **/
div.jGrowl {
    position: absolute;
}

body > div.jGrowl {
    position: fixed;
}

div.jGrowl.top-left {
    left: 0px;
    top: 0px;
}

div.jGrowl.top-right {
    right: 0px;
    top: 0px;
}

div.jGrowl.bottom-left {
    left: 0px;
    bottom: 0px;
}

div.jGrowl.bottom-right {
    right: 0px;
    bottom: 0px;
}

div.jGrowl.center {
    top: 0px;
    width: 50%;
    left: 25%;
}

/** Cross Browser Styling **/
div.center div.jGrowl-notification,
div.center div.jGrowl-closer {
    margin-left: auto;
    margin-right: auto;
}

div.jGrowl div.jGrowl-notification,
div.jGrowl div.jGrowl-closer {
    background-color: #000;
    opacity: 0.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
    zoom: 1;
    width: 235px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: left;
    display: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div.jGrowl div.jGrowl-notification {
    min-height: 40px;
}

div.jGrowl div.jGrowl-notification,
div.jGrowl div.jGrowl-closer {
    margin: 10px;
}

div.jGrowl div.jGrowl-notification div.jGrowl-header {
    font-weight: bold;
    font-size: 0.85em;
}

div.jGrowl div.jGrowl-notification div.jGrowl-close {
    z-index: 99;
    float: right;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
}

div.jGrowl div.jGrowl-closer {
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
}

/** Hide jGrowl when printing **/
@media print {
    div.jGrowl {
        display: none;
    }
}

/** PICKS OF THE WEEK CSS **/
th.potwtitle {
    font-size: 14px;
}

div.ofthecentury {
    margin-top: 5px;
    font-size: 24px;
    font-style: italic;
}

/** LOGOUT FORM CSS **/
#logout-form {
    display: inline;
}
#logout-form button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 20px;
}

/* htmx marks the game being picked while its request is in flight
   (hx-indicator on #pick-content); includeIndicatorCSS is off, so the look
   is ours. */
.table-bet tbody.htmx-request {
    opacity: 0.6;
    transition: opacity 200ms ease-in;
}

/* Bootstrap 2 gives every form a 20px bottom margin, which would stretch the
   card's rows. */
.table-manage-games form {
    margin: 0;
}

/* The profile's favourite form stands where an h1 did: its top margin and
   bold text, and none of Bootstrap 2's 20px form margin below. */
.favorite-form {
    margin: 10px 0 0;
}
.favorite-form .btn {
    font-weight: bold;
}

/* A leaderboard star is a form, drawn as the bare icon it used to be. */
form.favorite-user {
    display: inline;
    margin: 0;
}
form.favorite-user button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    vertical-align: top;
}
.group-actions {
    margin: 20px 0 10px;
}
.group-actions form {
    display: inline;
    margin-bottom: 0;
}
/* With the inline gap, Ruby's 10px between header buttons. */
.group-actions > * + * {
    margin-left: 6px;
}
.group-password .help-block {
    margin-top: 15px;
}
/* The page already names the group, so the Manage Games card's heading would
   repeat it. A selector, not a template flag, because a Play swaps in the card
   from a route that doesn't know which page holds it. */
#group-detail .card-heading {
    display: none;
}
/* The card's table has no bottom margin, so give its row a well's. */
.group-card-row {
    margin-bottom: 20px;
}

/* Ruby's span5 and span9 with six rows. In CSS because the admin builds its
   form from the same class, and widget attributes would restyle it too. */
.group-form #id_name,
.group-form #id_join_password {
    width: 366px;
    max-width: 100%;
}
.group-form #id_description {
    width: 686px;
    max-width: 100%;
    height: 120px;
}
.group-form .group-join-password .checkbox {
    margin-top: 10px;
}

/* A public group ignores its join password, so the form doesn't ask for one. */
.group-form:has(#id_public:checked) .group-join-password {
    display: none;
}

/* A label too long for a short bar sits in the empty track beside it, since
   the bar floats; below the bar, it moved the page when the first pick
   swapped it inside. */
#bet-status-countdown .progress-label {
    padding-left: 5px;
    font-size: 12px;
    line-height: 18px;
}