.strength-bar {
    display: block;
    min-height: 5px;
    width: 60px;
    border-radius: 50px;
    margin-right: 3px;
    background-color: #DDDDDD;
}

.strength-bar__default {
    background-color: #FF0000;
}

.strength-bar__orange {
    background-color: orange;
}

.strength-bar__green {
    background-color: green;
}

.svg-rank_Beginner {
    color: orange;
    fill: orange;
}

.banner-dp {
    cursor: pointer;
}

.banner-dp__items {
    position: relative;
    /* width: 250px; */
    /* height: 250px; */
    height: max-content;
    width: max-content;
    border-radius: 100%;
    /* background-color: yellowgreen; */
}

.banner-dp * img {
    border-radius: 100%;
    width: 250px;
    height: 250px;
    /* inset: 1; */
}

.banner-dp__overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    /* width: 250px;
    height: 250px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    opacity: 0;
    /* z-index: 9999; */
}

.banner-dp__overlay:hover {
    opacity: 1;
}

.verbanner-dp {
    height: 250px;
    position: relative;
}

.verbanner-dp__items {
    /* position: relative; */
    /* width: 500px; */
    height: 250px;
    /* border-radius: 100%; */
    /* background-color: yellowgreen; */
}

.verbanner-dp * img {
    /* border-radius: 100%; */
    width: 100%;
    height: inherit;
    object-fit: contain;
    /* height: 250px; */
    /* inset: 1; */
}

.verbanner-dp__overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    /* width: 250px;
    height: 250px; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 100%; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    opacity: 0;
    /* z-index: 9999; */
}

.verbanner-dp__overlay:hover {
    opacity: 1;
}

.asterisk {
    color: red !important;
}