/******************** Shop Containers **********************/

#shopItemsWrapper {
    position: relative;
    left: -10px;
    width: calc(100% + 20px);
    text-align: center;
}

#shopItemsContainer,
#goldShopItemsContainer {
    display: inline;
}

/******************** Prices **********************/

.price {
    font-family: Arial black;
    font-size: 1.2em;
}

.price.largeAmount {
    font-size: 0.8em;
}

.currencyIcon {
    display: inline;
    vertical-align: text-top;
    position: relative;
    top: -2px;
    left: 2px;
}

.largeAmount .currencyIcon {
    top: -4px;
    left: 1px;
    width: 22px;
}

/******************** General Shop Items **********************/

.shopItem {
    background: linear-gradient(to bottom, #cccccc, #4d4d4d);
    border-radius: 5px;
    display: inline-block;
    margin: 0 10px 20px;
    padding: 5px 0;
    width: 140px;
    height: 245px;
    box-sizing: border-box;
    position: relative;
    vertical-align: top;
    color: #ffffff;
    text-align: center;
}

.shopItem.withOptions {
    height: 285px;
}

.shopItem .header {
    position: absolute;
    width: 100%;
    font-family: TankTrouble;
    text-shadow: black 0px 1px 2px;
    z-index: 1;
}

.shopItem .preview {
    position: absolute;
    left: -10px;
    top: -10px;
}

.shopItem .purchaseOption {
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.shopItem .quantity {
    font-family: TankTrouble;
    text-shadow: black 0px 1px 2px;
    margin-bottom: 5px;
}

.shopItem .price {
    display: inline-block;
    width: calc(100% - 20px);
    border-radius: 5px;
    background-color: rgba(50, 50, 50, 0.5);
    box-sizing: border-box;
    line-height: 31px;
    height: 31px;
}

.shopItem .options {
    margin-top: 5px;
}

.shopItem .options select {
    width: calc(100% - 20px);
}

.shopItem .soldOut,
.shopItem .unavailable,
.shopItem .countdown {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
    -webkit-filter: drop-shadow(0px 3px 2px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 3px 2px rgba(0,0,0,0.5));
}

.shopItem svg {
    width: 100%;
    height: 100%;
}

.shopItem svg text {
    font-family: TankTrouble;
    stroke: #000000;
    stroke-width: 1px;
    fill: #ffda00;
    text-anchor: middle;
}

.shopItem .soldOut text {
    font-size: 44pt;
    stroke-width: 2px;
    transform:  translate(93px, 98px) rotate(-70deg);
}

.shopItem .unavailable text {
    font-size: 16pt;
    transform:  translate(80px, 96px) rotate(-70deg);
}

.shopItem .countdown text {
    font-size: 14pt;
    transform:  translate(73px, 150px) rotate(-10deg);
}

.shopItem button {
    margin: 5px 0 10px 0;
    position: relative;
    width: calc(100% - 20px);
}

.shopItem.info button.buy {
    width: calc(100% - 34px - 30px);
    float: left;
    left: 10px;
}

.shopItem.info button.info {
    width: 34px;
    float: right;
    right: 10px;
}


/* When viewport width is 800 we assume we are on a mobile and grow item box size to accommodate bigger font */
@media (max-width: 800px) {
    .shopItem.withOptions {
        height: 260px;
    }
}

/******************** Shop Item Details **********************/

.shopItemDetails {
    text-align: center;
}

.shopItemDetails .details {
    display: inline;
}

.shopItemDetails .purchaseOption {
    position: relative;
}

.shopItemDetails .purchaseOption button {
    width: 120px;
}

.shopItemDetails .description {
    margin-bottom: 15px;
}

.shopItemDetails .countdown {
    font-size: 1.2em;
    margin: 5px;
}

/******************** Shop Item Purchase Details **********************/

.shopItemPurchaseDetails {
    position: relative;
}

.shopItemPurchaseDetails .preview {
    height: 165px;
}

.shopItemPurchaseDetails .preview img {
    display: inline;
}

.shopPurchaseVerticalCentering {
    margin-bottom: 30px;
}

/******************** Shop Item Purchase **********************/

.shopItemPurchaseIcon {
    position: absolute;
    z-index: 10;
}

/******************** Player Panel **********************/

.shop.panelWrapper #playerPanel {
    position: relative;
}