﻿.card-container {
    position: relative;
    color: white;
}

.bottom-left-card-num {
    font-size: 1.5rem;
    position: absolute;
    bottom: 4rem;
    left: 2rem;
    letter-spacing: 0.35rem;
    font-weight: 600;
    width: 100%;
}

    .bottom-left-card-num p {
        background: -webkit-linear-gradient(#505050, #ffffff, #272727);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.bottom-left-card-exp {
    font-size: 1.1rem;
    position: absolute;
    bottom: 3.4rem;
    left: 12rem;
    font-weight: 600;
}

    .bottom-left-card-exp span {
        background: -webkit-linear-gradient(#3a3939, #ffffff, #717171);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.cross-left {
    font-size: 1.5vw;
    position: absolute;
    bottom: 44%;
    left: 0px;
    font-weight: 600;
    width: 97%;
    transform: rotate(-45deg);
    border-radius: 60px 200px 0px 143px;
    overflow: hidden;
    /* Legacy vendor prefixes that you probably don't need... */
    /* Safari */
    -webkit-transform: rotate(-45deg);
    /* Firefox */
    -moz-transform: rotate(-45deg);
    /* IE */
    -ms-transform: rotate(-45deg);
    /* Opera */
    -o-transform: rotate(-45deg);
}

    .cross-left span {
        background: -webkit-linear-gradient(#f50606, #f50606, #ef0606);
        /*-webkit-text-fill-color: transparent;*/
        white-space: nowrap;
        letter-spacing: 0.35rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }

.bottom-left-owner-name {
    font-size: 0.8rem;
    position: absolute;
    bottom: 1rem;
    left: 2rem;
}

    .bottom-left-owner-name span {
        background: -webkit-linear-gradient(#e8e8e8, #ffffff, #e2e2e2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-weight: 600;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-graph-area {
    background-color: rgb(2 122 176 / 0.40);
    border-radius: 20px;
}


.user-fullname {
    background: -webkit-linear-gradient(left, #6fbfd4, transparent, transparent);
    border-radius: 15px;
}