:root{
    --primary-color: #FFDD26;
}

.earning-pending-payouts{
    left:0;
    top:90px;
    width:150px;
    height:150px;
    background:#FFC107;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:bold;
    font-size:1.3rem;
    flex-direction:column;
}

.earning-total-earning{
    left:130px;
    top:0;
    width:270px;
    height:270px;
    background:#28A745;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:bold;
    font-size:2rem;
}

.earning-tips-received{
    left:345px;
    top:20px;
    width:180px;
    height:180px;
    background:#000;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:bold;
    font-size:1.5rem;
}

.story-profile-img{
    border: 2px solid var(--primary-color);
}

.user-story-svg{
    background-color: #fff;
    fill: var(--primary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 100%;
}

.story-swiper {
    padding: 20px 0;
}

/* .swiper-slide {
    width: 340px !important;
    display: flex;
    justify-content: center;
} */

.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span {
    background: #000!important;
    transform: scale(1.2)!important;
}

.owl-dots .owl-dot span {
    width: 10px!important;
    height: 10px!important;
    margin: 5px 3px!important;
    background: #D6D6D6!important;
    display: block!important;
    -webkit-backface-visibility: visible!important;
    transition: opacity .2s ease!important;
    border-radius: 30px!important;
}