#costom-page-content {
    margin-right: 220px;
    width: 400px;
    max-width: 40%;
    padding: 20px 30px 0 30px;
}

.mycard {
    width: 300px;
    height: 200px;
    /*background-image: url('path-to-your-image.jpg');*/
    background-size: cover;
    border-radius: 10px;
    display: flex;
    /*flex-direction: column;*/
    /*justify-content: center;*/
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    position: relative; /* اضافه کردن position:relative برای card */
}

    .mycard .myname {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        position: absolute;
        right: 5px; /* تعیین موقعیت افقی نام و نام خانوادگی */
        bottom: 1px; /* تعیین موقعیت عمودی نام و نام خانوادگی */
        z-index: 1; /* بالاترین اولویت نمایش برای نام و نام خانوادگی */
    }

    .mycard .mynumber {
        font-size: 16px;
        letter-spacing: 5px; /* تعیین فاصله بین اعداد */
        position: absolute;
        transform: translate(-50%, 20%); /* تغییر موقعیت افقی و عمودی برای قرار گرفتن زیر مرکز کارت */
        z-index: 0; /* اولویت نمایش پایین‌تر برای شماره کارت */
    }



    /*category list*/

.stat-box-category {
    height: 160px;
    /*width: 160px;*/
    overflow: hidden;
    padding: 10px 20px;
    /*margin-bottom: 20px;*/
    position: relative;
    border-radius: 10px;
    background: #fff;
}
.stat-box-report-category {
    overflow: hidden;
    padding: 10px 20px;
    /*margin-bottom: 20px;*/
    position: relative;
    border-radius: 10px;
    background: #fff;
}

    .stat-box-category a {
        color: #777;
    }

    .stat-box-category .counter-down {
        font-size: 20pt;
        margin-top: 10px;
        direction: ltr;
        text-align: right;
    }

        .stat-box-category .counter-down .num {
            display: inline-block;
        }

.visual-category {
    position: absolute;
    bottom: 30px;
    left: 20px;
    transition: ease 0.25s all;
    opacity: 0.7;
}

    .visual-category i {
        font-size: 48pt;
    }

.stat-box-category:hover .visual {
    transform: scale(1.3);
    opacity: 1;
}
/* .stat-box.knob-container {
    height: auto;
    min-height: 146px;
    padding: 5px;
    text-align: center;
} */

.stat-box-category.knob-container.use-blue input, .stat-box.use-blue i {
    color: #14B9D6 !important;
}

.stat-box-category.knob-container.use-red input, .stat-box.use-red i {
    color: #f55145 !important;
}

.stat-box-category.knob-container.use-green input, .stat-box.use-green i {
    color: #0abb87 !important;
}

.stat-box-category.knob-container.use-orange input, .stat-box.use-orange i {
    color: #ffbd15 !important;
}

.stat-box-category.knob-container.use-purple input, .stat-box.use-purple i {
    color: #4527a0 !important;
}

.stat-box-category.knob-container.use-deeporange input, .stat-box.use-deeporange i {
    color: #ff8a65 !important;
}

.stat-box-category.knob-container.use-rose input, .stat-box.use-rose i {
    color: #e91e63 !important;
}

.stat-box-category.knob-container.use-cyan input, .stat-box.use-cyan i {
    color: #13a2a6 !important;
}

.stat-box-category.knob-container.use-lime input, .stat-box.use-lime i {
    color: #90ca4b !important;
}

.stat-box-category.knob-container.use-darkorange input, .stat-box.use-darkorange i {
    color: #ee7825 !important;
}

.stat-box-category.knob-container.use-darkblue input, .stat-box.use-darkblue i {
    color: #13a2a6 !important;
}
    /*category list*/