.checkOTP {
    cursor: pointer;
    border: 1px solid #808080;
    border-radius: 0.5em;
    box-shadow: 0 2px 4px #808080;
    padding-top: 0.5em;
}

.checkOTP .ui.avatar.image {
    width: 1em;
    height: 1em;
}

.checkOTP .ribbon {
    position: absolute;
    width: 40%;
    right: 4%;
    top: 2%;
}

.checkOTP .price-icon {
    width: 80%;
    margin-top: 0.5em;
}

.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
    border: none;
}

#refillCoinModal .header .ui.avatar.image {
    width: 1.5em;
    height: 1.5em;
}

.div-display-coin {
    padding: 0.5em;
    border: 1px solid #e1e1e1;
    border-radius: 25px;
    box-shadow: 0 2px 4px #e1e1e1;
}

.special-price {
    background-image: linear-gradient(#FF3378, #A78CFF);
    border-radius: 25px;
}

.special-price .ui.avatar.image.margin0 {
    width: 1.5em;
    height: 1.5em;
}

.special-price .imageUrl {
    width: 80%;
}

.ribbon-white {
    position: absolute;
    bottom: 20%;
    right: 0%;
    z-index: 1000;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .ribbon-white {
        bottom: 12.5%;
    }
}
@media only screen and (max-width: 767px) {
    .ribbon-white {
        bottom: 12%;
        width: 30%;
    }
    .special-price .imageUrl {
        width: 100%;
    }
}
@media only screen and (max-width: 320px) {
    .ribbon-white {
        bottom: 14%;
    }
}