.Card {
    width: 90%;
    height: 170px;
    margin-bottom: var(--badgeMarginBottom);
    background: var(--cardBackground);
    border: var(--cardBorder);
    box-shadow: var(--cardShadow);
    border-radius: var(--cardRadius);
    display: flex;
    flex-direction:row;
    justify-items: end;
    align-items: end;
    border:solid 1px #e4e4e4;
}

.Card .Badge {
    justify-self:start;
    align-self:end;
    margin-left:15px;
    margin-bottom:15px;
}


.CardData {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height: 100%;
}


.CardWelcome {
    margin-top: 15px;
    margin-right: 18px;
    display: flex;
    flex-direction: row;
    justify-content:end;
    column-gap: 10px;
    cursor: pointer;
}

.CardWelcomeMessage {
    text-align:right;
}

.CardAction {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    margin-top:3px;
}

    .CardAction span {
        width: 8px;
        height: 8px;
        background-color: var(--mainColor);
        border-radius: 50%;
    }

.CardInfo {
    align-self: end;
    margin-bottom: 15px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    align-items: end;
}




.HideCard {
    animation-name: MoveOutView;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.ShowCard {
    animation-name: MoveInView;
    animation-duration: 0.4s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}