:root {
    --gold-color: #F0AB4D;
    --maana-color: #3EC1D7;
}

#currencies {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 56px;
    max-width: 1240px;
    padding: 0 50px;
    position: relative;
    top: 100px;
    z-index: 3;
    box-sizing: border-box;
    margin: auto;
    pointer-events: none;
}

#currencies #daily-gift-container {
    display: none;
    position: relative;
    cursor: pointer;
    margin: 0 20px;
    pointer-events: initial;
}

#currencies #daily-gift-container.active {
    display: block;
}

#currencies #daily-gift-container img {
    position: relative;
}

#currencies .currency {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px rgba(34, 33, 34, 0.56);
    border-radius: 10px;
    padding-left: 44px;
    padding-right: 30px;
    text-align: center;
    box-sizing: border-box;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 20px;
    font-weight: 900;
    position: relative;
    margin: 0 10px;
    cursor: pointer;
    pointer-events: initial;
}

#currencies #currency-maana {
    position: relative;
    color: var(--maana-color);
}

#currencies #currency-legacy {
    position: relative;
    color: #927e4c;
}

#currencies #currency-legacy[data-legacy="0"] {
    display: none;
}

#currencies #currency-maana::after {
    content: '';
    position: absolute;
    background: url(/static/img/new-layout/home/connected/maana.png);
    width: 47px;
    height: 56px;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
}

#currencies #currency-legacy::after {
    content: '';
    position: absolute;
    background: url(/static/img/currency/legacy.png);
    width: 47px;
    height: 56px;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
}

#currencies #currency-gold {
    position: relative;
    color: var(--gold-color);
}

#currencies #currency-gold::after {
    content: '';
    position: absolute;
    background: url(/static/img/new-layout/home/connected/gold.png);
    width: 43px;
    height: 53px;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
}

#currencies #currency-gold::after,
#currencies #currency-maana::after,
#currencies #currency-legacy::after {
    transition: all ease-in-out 200ms;
}

#currencies #currency-gold:hover::after,
#currencies #currency-maana:hover::after,
#currencies #currency-legacy:hover::after{
    transform: translateY(-50%) translateX(-12px) scale(1.2);
}