body {
    font-size: 12px;
}

.lightHandsize {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/lightHand-42.png');
}

.lightSabaccHandsize {
    display: none;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/lightSabaccHand-42.png');
}

.darkHandsize {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/darkHand-42.png');
}

.darkSabaccHandsize {
    display: none;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/darkSabaccHand-42.png');
}

.lightOutOfPlayPileSize {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/lightOutOfPlay-42.png');
}

.darkOutOfPlayPileSize {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/darkOutOfPlay-42.png');
}

.lightForceGeneration {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/lightForce-42.png');
}

.darkForceGeneration {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 200%;
    font-weight: bolder;
    width: 42px;
    height: 42px;
    background-image: url('https://swccg.com/gemp/darkForce-42.png');
}

.lightRaceTotal {
     display: table-cell;
     color: #ffffff;
     text-align: center;
     vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 42px;
     height: 42px;
     background-image: url('https://swccg.com/gemp/lightPodracer-42.png');
 }

 .darkRaceTotal {
     display: table-cell;
     color: #ffffff;
     text-align: center;
     vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 42px;
     height: 42px;
     background-image: url('https://swccg.com/gemp/darkPodracer-42.png');
 }

 .lightPoliticsTotal {
     display: table-cell;
     color: #ffffff;
     text-align: center;
     vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 42px;
     height: 42px;
     background-image: url('https://swccg.com/gemp/lightPolitics-42.png');
 }

 .darkPoliticsTotal {
     display: table-cell;
     color: #ffffff;
     text-align: center;
     vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 42px;
     height: 42px;
     background-image: url('https://swccg.com/gemp/darkPolitics-42.png');
 }

.sabaccTotalDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 135%;
    z-index: 50;
}

.powerAtLocationDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 135%;
    z-index: 50;
}

.battlePowerDiv, .attackPowerOrFerocityDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 180%;
    z-index: 50;
}

.battleNumDestinyDiv, .attackNumDestinyDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 125%;
    z-index: 50;
}

.battleDamageRemainingDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ff6633;
    opacity: 0.7;
    color: #000000;
    font-size: 180%;
    z-index: 50;
}

.battleAttritionRemainingDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ff3333;
    opacity: 0.7;
    color: #000000;
    font-size: 180%;
    z-index: 50;
}

.duelOrLightsaberCombatTotalDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 180%;
    z-index: 50;
}

.duelOrLightsaberCombatNumDestinyDiv {
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000000;
    font-size: 125%;
    z-index: 50;
}

.showStats {
    display: table-cell;
}

.borderOverlay {
    border: solid #000000;
}

.highlightBorderOverlay {
    border: solid #ffffff;
}

.foilOverlay {
    opacity: 0.20;
}

body.foil-none .foilOverlay {
    display: none !important;
}

.frozenOverlay {
    opacity: 0.70;
}

.suspendedOverlay {
    opacity: 0.80;
}

.collapsedOverlay {
    opacity: 0.35;
}

.destinyTypeOverlay {
    width: inherit;
    color: #ffffff;
    display: table-cell;
    text-align: center;
    vertical-align: top;
    opacity: 0.7;
    font-size: 200%;
}

.testingTextOverlay {
    width: inherit;
    background-color: #ffff00;
    color: #000000;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    opacity: 1.0;
    font-size: 110%;
}

.cardHint {
    display: inline;
    color: #6f6fff;
    cursor: pointer;
}

.selectableCard > .borderOverlay {
    border-color: #7faf7f;
    cursor: pointer;
}

.actionableCard > .borderOverlay {
    border-color: #7f7fff;
    cursor: pointer;
}

.actionableCardSilent > .borderOverlay {
    cursor: pointer;
}

.selectedCard > .borderOverlay {
    border-color: #009f9f;
}

.stats {
    text-align: center;
    padding: 2px;
}

.player {
    color: #ffffff;
    position: relative;
    z-index: 50;
}

.player.current {
    background-color: #ffffff;
    color: #000000;
}

.playerStats {
    color: #ffffff;
    text-shadow: -1px  1px 0 #000000,
                  1px  1px 0 #000000,
                  1px -1px 0 #000000,
                 -1px -1px 0 #000000;
}

.playerStats .clickable {
    color: #6f6fff;
    cursor: pointer;
    text-shadow: -1px  1px 0 #000000,
                  1px  1px 0 #000000,
                  1px -1px 0 #000000,
                 -1px -1px 0 #000000;
}

.phase {
    float: right;
    padding-left:5px;
    padding-right:5px;
    color: #000000;
    font-weight: bolder;
    font-size: 100%;
}

.cardInfo {
    font-size:0.9em;
}

.cardModifier {
    font-size:0.7em;
}

.cardPiles {
    color: #ffffff;
}

#chatBox {
    font-size: 90%;
}

.muteObservers .chatMessage.fromObserver {
    display: none;
}

/* if observers are muted, disable the 'mute' button (and vice-versa) */
#gameOptionsBox.muteObservers #muteObserversBtn {
    display: none;
}
#gameOptionsBox:not(.muteObservers) #unmuteObserversBtn {
    display: none;
}

.chatMessage {
    color: #3fafff;
}

.systemMessage {
    color: #5f5f5f;
    font-size: 80%;
}

.gameMessage {
    padding-top: 2px;
    font-size: 80%;
}

.warningMessage {
    color: #ff0000;
}

.ui-tabs-nav li {
    font-size: 70%;
}

#settingsBox {
    font-size: 70%;
}

.indentedSetting {
    padding-left:20px;
}

.clock {
    float: right;
    font-size: 100%;
}

.clock.timer-own {
    font-weight: bold;
    padding: 0 6px;
    border-radius: 4px;
    transition: background-color 0.5s;
}

.clock.timer-warn, .decisionClock.timer-warn {
    background-color: #d9760a;
}

.clock.timer-danger, .decisionClock.timer-danger {
    background-color: #c62828;
}

.clock.timer-pulse, .decisionClock.timer-pulse {
    animation: timer-pulse 0.8s ease-out 1;
}

.clock.timer-expired, .decisionClock.timer-expired {
    background-color: #c62828;
    color: #ffffff;
    font-weight: bold;
    animation: none;
}

@keyframes timer-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.decisionClock {
    font-size: 120%;
    display: none;
    padding: 0 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.decisionClock.has-limit {
    display: inline-block;
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0;
}

.setting-row #animation-slider {
    flex: 1 1 auto;
    margin: 0 8px;
}

.timerAlertRule {
    margin: 0 0 0 8px;
}

#timerAlertSettings .timerAlertBelow,
#timerAlertSettings .timerAlertEvery {
    width: 5em;
}

#timerAlertSettings .timerAlertHint {
    font-size: 80%;
    margin-left: 8px;
}

.timer-control {
    display: none;
}

#auto-zoom-li {
    margin-left: auto;
}

#timer-mute-toggle, #auto-zoom-toggle {
    width: 25px;
    height: 20px;
}

#timer-mute-toggle.muted .ui-icon {
    overflow: visible;
}

#timer-mute-toggle.muted .ui-icon::after {
    content: "\2715";
    text-indent: 0;
    position: absolute;
    right: -4px;
    top: 3px;
    color: #ff3b3b;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.alertButtons .ui-button-text-only .ui-button-text {
    font-size: 70%;
    padding: .2em .5em;
}

.ui-button-text-only.slimButton .ui-button-text {
    font-size: 70%;
    padding: .2em .5em;
}

.ui-tabs .ui-tabs-panel.slimPanel {
    padding: 4px;
}

.ui-tabs .ui-tabs-nav li a.slimTab {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.cardPileCount {
    display: none;
    width: 59px;
}

.topDarkReserveDeck {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topDarkForcePile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topDarkUsedPile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topDarkLostPile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topLightReserveDeck {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topLightForcePile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topLightUsedPile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

.topLightLostPile {
    display: table-cell;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
}

div.playerStats .darkSabaccHandsize,    div.playerStats .lightSabaccHandsize,
div.playerStats .darkPoliticsTotal,     div.playerStats .lightPoliticsTotal,
div.playerStats .darkRaceTotal,         div.playerStats .lightRaceTotal {
    color: #ffffff;
    text-shadow: -1px  1px 0 #000000,
                  1px  1px 0 #000000,
                  1px -1px 0 #000000,
                 -1px -1px 0 #000000;
}

div.playerStats .darkOutOfPlayPileSize, div.playerStats .lightOutOfPlayPileSize {
    text-shadow: -1px  1px 0 #000000,
                  1px  1px 0 #000000,
                  1px -1px 0 #000000,
                 -1px -1px 0 #000000;
}

div.playerStats .darkForceGeneration, div.playerStats .lightForceGeneration {
    color: #000000;
    text-shadow: -1px  1px 0 #ffffff,
                  1px  1px 0 #ffffff,
                  1px -1px 0 #ffffff,
                 -1px -1px 0 #ffffff;
}

div#forceGeneration0 {
    color:darkred;
    text-shadow: -1px  1px 0 #ffffff, 1px  1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
}

div#forceGeneration1 {
    color:darkblue;
    text-shadow: -1px  1px 0 #ffffff, 1px  1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
}

div.playerStats {
   font-family: "Hack", monospace;
}

#auto-zoom-li {
    float: right;
}

#auto-zoom-toggle {
    width: 25px;
    height: 20px;
    margin-top:-5px;
    margin-right: -5px;
}

ul.ui-tabs-nav {
    height: 14px;
}

#auto-zoom-message {
    position: relative;
    bottom: 0em;
    color: #FFFF00;
    background-color: #000000;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}
/* Frozen Assets beside the Force Pile: frozen count under Frozen Assets, usable count under the Force Pile, total below */
.frozenAssetsDark,
.frozenAssetsLight {
    display: block;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-size: 75%;
    line-height: 1.1;
}
.cardPileCount .faPileCounts {
    display: flex;
}
.cardPileCount .faPileCounts > span {
    display: inline-block;
    text-align: center;
}
.cardPileCount .faPileTotal {
    display: block;
    text-align: center;
}