.card_container {
    display: flex;
    justify-content: flex-start;
    gap: 10px 40px;
    width: 95%;
    flex-wrap: wrap;
    margin: 20px 0px;

    .card {
        display: flex;
        gap: 50px;
        align-items: center;
        background: #fff;
        padding: 15px 10px 15px 50px;
        border-radius: 10px;
        border-left: 5px solid #666;
        color: #000;
        font-weight: 600;
        position: relative;
        overflow: hidden;
        /* margin-top: 20px; */
        box-shadow: 0px 3px 12px 0px rgba(0, 24, 99, 0.1);

        &:nth-child(2n + 1) {
            border-color: #23a047;
        }

        &:nth-child(2n + 1) p {
            background-color: #23a047;
        }

        &:nth-child(2n + 2) {
            border-color: #fca004;
        }

        &:nth-child(2n + 2) p {
            background-color: #fca004;
        }

        &:nth-child(2n + 3) {
            border-color: #f44336;
        }

        &:nth-child(2n + 3) p {
            background-color: #f44336;
        }

        & p {
            padding: 5px;
            background: #fff;
            color: #fff;
            border-radius: 5px;
        }

        .planet {
            position: absolute;
            left: -20px;
            bottom: -50px;
        }
    }

    .edit_ig_btn {
        width: 70px;
        /* border: 1px solid #2e85fe; */
        border-radius: 10px;
        background: rgb(255 255 255);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0px 3px 12px 0px rgba(0, 24, 99, 0.1);
    }
}

.heatmap {
    display: flex;
    justify-content: center;
    width: 95%;
    overflow: scroll;
    background: #ffffff;
    /* box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06); */
    border-radius: 10px;
    padding: 10px 5px;
}
