.text-bg-mercenary-guilds {
    color: #fff !important;
    background-color: #0d6efd !important;
}
.text-bg-dwarven-forges {
    color: #fff !important;
    background-color: #744f28 !important;
    background-image: url("/images/DwarfFlag.png");
}
.text-bg-elven-branches {
    color: #fff !important;
    background-color: #b2b0af !important;
    background-image: url("/images/ElvesFlag.png");
}
.text-bg-deverenian-empire {
    color: #fff !important;
    background-color: #7c1217 !important;
    background-image: url("/images/DeverenianFlag.png");
}
.text-bg-nothrog-legions {
    color: #fff !important;
    background-color: #18733b !important;
    background-image: url("/images/NothrogFlag.png");
}
.text-bg-free-kingdoms {
    color: #fff !important;
    background-color: #e0a92e !important;
    background-image: url("/images/FreeKingdomsFlag.png");
}
.text-bg-item {
    color: #fff !important;
    background-color: #767574 !important;
}
.text-bg-action {
    color: #fff !important;
    background-color: #f15f3c !important;
}
.minw-badge {
    min-width: 4em;
}
.drafting-low-bar {
    z-index: 100;
    height: 3em;
}
.flag {
    max-height: 1.8em;
}
.class-icon {
    max-height: 1.7em;
    margin-left: 0.1em
}
.decklist-flag {
    max-height: 3em;
}
.decklist-card-mini {
    max-height: 5em;
}
.decklist-card-detail {
    max-height: 12em;
}

.decklist-card-hover-div {
    z-index: 5;
    position: absolute;
    bottom: 100%;
}

.decklist-card-hover-img {
    max-height: 15em;
}

.select-warlord-droplist {
    max-height: 15em;
    overflow-y: auto;
    scrollbar-width: thin;
}

.select-warlord-droplist::-webkit-scrollbar {
  display: thin;
}

.select-card-droplist {
    position: absolute;
    width: 100%;
    max-height: 15em;
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 5;
}
.select-card-droplist::-webkit-scrollbar {
  display: thin;
}

.faction-button-selected {
    box-shadow: inset 0 0 0.75em 0 gray;
}
a.decklist-name {
    text-decoration: none;
}
a.decklist-name:hover,a.decklist-name:focus {
    text-decoration: underline
}
.card-count-badge {
    left: 0.25em;
    top: 30%;
}

.scrollable-x {
    overflow-x: auto;
    -ms-overflow-style: thin;
    scrollbar-width: thin;
}

.scrollable::-webkit-scrollbar {
  display: thin;
}


.clickable {
    cursor: pointer;
}

body {
    height: 100%;
}

.play-area {
    padding-bottom: 15em;
    background-size: cover;
    background-image: url("/images/solo-background.png");
}

.notification-banner {
    position: fixed;
    top: 25%;
    max-width: 25%;
    z-index: 10;
    animation-duration: 0.3s;
    animation-name: slide-in;
}

@keyframes slide-in {
  from {
    left: -100%
  }

  to {
    left: 0;
  }
}

.rank {
    white-space: nowrap;
    overflow-x: auto;
    -ms-overflow-style: thin;
    scrollbar-width: thin;
}

.rank::-webkit-scrollbar {
  display: thin;
}

.adventure-card-menu {
    position: fixed;
    width: 10em;
    z-index: 5;
    bottom: 0.5em;
    left: 0.5em;
}

.adventure-attachment-list {
    position: fixed;
    width: 10em;
    z-index: 5;
    top: 0.5em;
    right: 35.5em;
}

.adventure-hand-menu {
    position: fixed;
    width: 10em;
    z-index: 5;
    bottom: 0.5em;
    left: 0.5em;
}

.adventure-hand {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 11em;
    min-height: 12em;
    min-width: 10em;
    max-width: 50em;
}

.adventure-hand-card-container {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: thin;
    scrollbar-width: thin;
}

.adventure-hand-card-container::-webkit-scrollbar {
  display: thin;
}

.adventure-hand-hide {
    position: fixed;
    z-index: 5;
    bottom: 0.5em;
    left: 14.5em;
    background: white;
    padding: 0.2em;
    font-weight: light;
    font-size: 0.75em;
    border-radius: 5px;
}

.adventure-hand-card {
    max-height: 10em;
    cursor: pointer;
}

.hand-banner {
    position: absolute;
    bottom: 100%;
    background: white;
    padding: 0.2em;
    font-weight: light;
    right: 0;
    font-size: 0.75em;
    border-radius: 5px;
}

.play-card {
    max-height: 7em;
    cursor: pointer;
}

.modal-card {
    max-height: 10em;
}

.pile-view {
    max-height: 30em;
    min-height: 30em;
    overflow-y: auto;
    -ms-overflow-style: thin;
    scrollbar-width: thin;
}

.pile-view::-webkit-scrollbar {
  display: thin;
}

.peep-input {
    max-width: 10em;
}

.center-badge {
    position: absolute;
    bottom: -5%;
    left: 30%;
}

.end-badge {
    position: absolute;
    bottom: -5%;
    right: 0;
}

.start-badge {
    position: absolute;
    bottom: -5%;
    left: -5%;
}

.movement-selection-space {
    min-width: 0.5em;
    min-height: 6.5em;
    animation: glow 1s infinite alternate;
}

.movement-selection-space-new-rank {
    min-width: 5em;
    min-height: 0.5em;
    animation: glow 1s infinite alternate;
}

.attachingTarget {
    animation: glowOutside 0.5s infinite alternate;
}

.opponent-acting {
    animation: enemyActing 0.5s infinite alternate;
}

.attach-details {
    font-size: 0.8em;
    font-style: italic;
}

@keyframes glowOutside {
    from {
        box-shadow: 0 0 1em 0.1em #1083e8;
    }
    to {
        box-shadow: 0 0 0.5em 0.1em #1083e8;
    }
}

@keyframes enemyActing {
    from {
        box-shadow: 0 0 1em 0.2em #ff243a;
    }
    to {
        box-shadow: 0 0 0.5em 0.2em #ff243a;
    }
}

@keyframes glow {
    from {
        box-shadow: inset 0 0 0.8em white;
    }
    to {
        box-shadow: inset 0 0 0.4em white;
    }
}

.focus-card {
    max-height: 20em;
}

.focus-card-row {
    min-height: 21em;
}

.history-row {
    min-height: 7em;
    max-height: 7em;
    overflow-y: auto;
    -ms-overflow-style: thin;
    scrollbar-width: thin;
}

.history-row::-webkit-scrollbar {
  display: thin;
}

.focus-card-banner {
    position: absolute;
    top: -5%;
    background: white;
    padding: 0.2em;
    font-weight: light;
    left: 5%;
    font-size: 0.75em;
    border-radius: 5px;
}

.spent {
  transform: rotate(90deg);
  margin: 1em;
}

.stun {
  transform: rotate(180deg);
}

@media only screen and (max-width: 768px) {
    .play-area {
        margin-bottom: 5em;
    }

    .play-card-sm {
        max-height: 4em;
        cursor: pointer;
    }

    .adventure-hand-menu {
        position: fixed;
        width: 10em;
        z-index: 6;
        bottom: 0;
        right: 0;
        left: inherit;
    }

    .adventure-hand-card {
        max-height: 5em;
        cursor: pointer;
    }

    .adventure-hand {
        position: fixed;
        z-index: 5;
        bottom: 0;
        left: 0;
        min-height: 6em;
        min-width: 10em;
        max-width: 100%;
    }

    .adventure-hand-hide {
        position: fixed;
        z-index: 5;
        bottom: 0;
        left: 0;
        background: white;
        padding: 0.2em;
        font-weight: light;
        font-size: 0.75em;
        border-radius: 5px;
    }

    .hand-banner {
        position: absolute;
        bottom: 100%;
        background: white;
        padding: 0.2em;
        font-weight: light;
        left: 0;
        right: inherit;
        font-size: 0.75em;
        border-radius: 5px;
    }

    .focus-card {
        max-height: 10em;
    }

    .focus-card-row {
        min-height: 11em;
    }

    .adventure-card-menu {
        position: fixed;
        width: 15em;
        z-index: 7;
        bottom: 0;
        right: 0;
        top: inherit;
        left: inherit;
        font-size: 0.7em;
    }

    .adventure-attachment-list {
        position: fixed;
        width: 20em;
        z-index: 7;
        top: inherit;
        bottom: 0;
        right: 21.5em;
        font-size: 0.5em;
    }

    .center-badge {
        position: absolute;
        bottom: 15%;
        left: inherit;
        right: 0;
        font-size: 0.5em;
    }

    .end-badge {
        position: absolute;
        bottom: -5%;
        right: 0;
        font-size: 0.5em;
    }

    .start-badge {
        position: absolute;
        bottom: -5%;
        left: -5%;
        font-size: 0.5em;
    }

    .movement-selection-space {
        min-width: 0.5em;
        min-height: 4em;
        animation: glow 1s infinite alternate;
    }

    .movement-selection-space-new-rank {
        min-width: 5em;
        min-height: 0.5em;
        animation: glow 1s infinite alternate;
    }

    .spent {
      transform: rotate(90deg);
      margin: 0.4em;
    }

    .notification-banner {
        top: 0;
    }
}