.desk-background {
    background: url("../img/layout/wood.b43df2f6b405.jpg");
}

.swo-roller {
    position: absolute;
    top: 0;
}

.progress-bars .progress-bar {
    color: black;
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
}

.weapon-tooltip, .hero-tooltip {
    min-width: 400px;
}

.weapon-tooltip.half, .hero-tooltip.half {
    min-width: 200px;
}

@media (max-width: 991px) {
    .weapon-tooltip {
        min-width: 40vw;
    }
}

.card-overlay {
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
}

.ui-draggable-dragging {
    z-index: 1100;
}

/* .d-flex overrides .d-none, recheck once bootstrap beta/ga is available */
.d-none.d-flex {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .1rem .2rem;
    font-size: .7rem;
    line-height: 1.5;
    border-radius: .2rem;
}

select.select-sm {
    font-size: small;
}

@media (min-width: 1500px) {
    .container {
        max-width: 1440px;
    }
}

.breadcrumb {
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

.flag {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../img/icon/flags.443e423115c8.png") no-repeat
}

.flag.flag-cs {
    background-position: -72px -72px
}

.flag.flag-en {
    background-position: -312px -312px
}

.tooltipster-base {
    /* fixes #51 */
    pointer-events: auto !important;
}

#copy {
    position: fixed;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    color: transparent;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.filtered-out {
    display: none !important;
}

.dimmed-out {
    opacity: 0.5;
}

.mw-5 {
    min-width: 5em;
}

.tw-auto {
    width: auto;
}

/* footer see https://getbootstrap.com/docs/4.1/examples/sticky-footer/ */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 30px; /* Margin bottom by footer height */
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px; /* Set the fixed height of the footer here */
}

.footer .container {
    background-color: #f5f5f5;
}

.help-block {
    color: red;
}

.asteriskField {
    display: none;
}

.badge.badge-small {
    font-size: 60%;
}

tr.archived, tr.archived span, tr.archived i {
    text-decoration: line-through;
}

tr.archived .hide-if-archived {
    display: none !important;;
}

.win-message {
    text-align: center;
    font-weight: bold;
    font-size: 75%;
    padding: 1rem 1rem 0 1rem;
    background-color: gold;
    border-radius: 1rem;
}

.user-id, .game-id {
    color: #6c757d;
    font-size: 60%;
}

.text-white .user-id, .text-white .game-id {
    color: #c0d1d9;
}

.mastery-bar .progress-bar {
    color: black;
    font-weight: bold;
}

select.custom-select option:disabled {
    color: #bbbbbb;
    background-color: #eeeeee;
}

span.last-seen {
    margin-bottom: 3px;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    width: 6px;
}

h2 span.last-seen {
    margin-bottom: 9px;
    margin-left: -3px;
    margin-right: -4px;
}

span.last-seen.green {
    background: rgb(66, 183, 42);
}

span.last-seen.orange {
    background: rgb(226, 191, 67);
}

span.last-seen.red {
    background: rgb(183, 0, 0);
}

span.last-seen.unknown {
    background: rgb(221, 221, 221);
}

.text-200pct {
    font-size: 200%;
}

.badge-muted {
    color: #8f99a2;
    background-color: #f8f9fa;
}

.main-content {
    padding-bottom: 20px;
}

div.upgrade {
    width: 128px;
    height: 128px;
    background: url("../img/goodies/upgrades.b61d54204656.png") no-repeat top left;
    background-size: 768px 256px;
    background-position-x: 0;
    background-position-y: 100%;
}

div.achievement {
    width: 128px;
    height: 128px;
    background: url("../img/goodies/achievements.7cf61e2c3359.png") no-repeat top left;
    background-size: 384px 256px;
    background-position-x: 0;
    background-position-y: 100%;
}

div.shop-points {
    width: 128px;
    height: 128px;
    background: url("../img/goodies/shop-points.0f8a2f7d1c2e.png") no-repeat top left;
    background-size: 1280px 256px;
    background-position-x: 0;
    background-position-y: 100%;
}

div.achievement.achieved, div.shop-points.bought, div.upgrade.unlocked {
    background-position-y: 0;
}

div.achievement.top_1_wooden {
    background-position-x: calc(1% / 0.02);
}

div.achievement.top_1_standard {
    background-position-x: calc(2% / 0.02);
}

div.upgrade.fast_spinner {
    background-position-x: calc(1% / 0.05);
}

div.upgrade.incognito {
    background-position-x: calc(2% / 0.05);
}

div.upgrade.roller_vampiria {
    background-position-x: calc(3% / 0.05);
}

div.upgrade.roller_canbalandia {
    background-position-x: calc(4% / 0.05);
}

div.upgrade.roller_zepplandia {
    background-position-x: calc(5% / 0.05);
}

div.shop-points.lvl_1 {
    background-position-x: calc(0% / 0.09);
}

div.shop-points.lvl_2 {
    background-position-x: calc(1% / 0.09);
}

div.shop-points.lvl_3 {
    background-position-x: calc(2% / 0.09);
}

div.shop-points.lvl_4 {
    background-position-x: calc(3% / 0.09);
}

div.shop-points.lvl_5 {
    background-position-x: calc(4% / 0.09);
}

div.shop-points.lvl_6 {
    background-position-x: calc(5% / 0.09);
}

div.shop-points.lvl_7 {
    background-position-x: calc(6% / 0.09);
}

div.shop-points.lvl_8 {
    background-position-x: calc(7% / 0.09);
}

div.shop-points.lvl_9 {
    background-position-x: calc(8% / 0.09);
}

div.shop-points.lvl_10 {
    background-position-x: calc(9% / 0.09);
}

div.row.awards button, .roller-buttons {
    text-align: center;
    margin-top: 10px;
}

.row.awards div.upgrade, .row.awards div.achievement, .row.awards div.shop-points {
    margin-left: auto;
    margin-right: auto;
}

.has-click-tooltip, .hand-pointer {
    cursor: pointer;
}

.battle-header a.copy-to-clipboard {
    font-size: 60%;
}

.form-check-label ~ .invalid-feedback {
    display: block;
}

.challonge {
    min-height: 600px;
}

.children-td-p1 td {
    padding: .25rem !important;
}
.roller-padded-holder {
    /* since floating overlay is position absolute, it ignores parent's padding, have to wrap in this */
    position: relative;
}

.roller-buttons:not(.active) .roller-btn-active {
    display: none;
}

.roller-buttons.active .roller-btn-use {
    display: none;
}

.rollers .col-3 {
    padding-top: 15px;
    bottom: 15px;
}