.dice {
display: flex;
justify-content: space-around;
padding: 20px ;
}

.chat-group-divider {
    position: relative;
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #8392a5;
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter UI", Roboto, sans-serif;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.chat-group-divider:first-child {
    margin-top: 0;
}

.chat-group-divider::before,
.chat-group-divider::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background-color: #e5e9f2;
}

.chat-group-divider::before {
    margin-right: 10px;
}

.chat-group-divider::after {
    margin-left: 10px;
}
@media (max-width: 680px) {
.dice {
flex-wrap: wrap;
}
}
.dice .main {
padding: 0px;
width: 510px;
}
@media (max-width: 980px) {
.dice .main {
width: 400px;
}
}
@media (max-width: 680px) {
.dice .main {
width: 100%;
order: 1;
}
}
.dice .main .groups {
display: flex;
margin-bottom: 35px;
}
@media (max-width: 680px) {
.dice .main .groups {
justify-content: center;
}
}
.dice .main .groups .group:first-child {
margin-right: 10px;
}
.dice .main .groups .group label {
display: block;
margin-bottom: 10px;
font-size: 14px;
}
.dice .main .groups .group input {
padding: 10px;
border-radius: 6px;
border: 1px solid #ced4da;
font-size: 18px;
font-weight: 500;
text-align: center;
color: #555;
}
@media (max-width: 980px) {
.dice .main .groups .group input {
width: 100%;
}
}
.dice .main .groups .group .badges {
display: flex;
}
.dice .main .groups .group .badges span {
width: calc(100% / 4);
margin-right: 5px;
cursor: pointer;
border: 1px solid #dfdfdf;
display: block;
text-align: center;
margin-top: 5px;
border-radius: 4px;
padding: 3px 0;
font-size: 14px;
color: #6c757d;
}
.dice .main .groups .group .badges span:hover {
transition: 250ms linear;
background-color: #6c757d;
color: white;
}
.dice .main .groups .group .badges span:last-child {
margin-right: 0px;
}
.dice .main .hash {
text-align: center;
word-break: break-all;
color: #6c757d;
}
.dice .main .hash .title {
margin-bottom: 10px;
}
.dice .main .hash span {
font-size: 13px;
}
.dice .main .hash a {
color: black;
margin-top: 20px;
position: relative;
display: none;
}
.dice .main .hash a:hover {
opacity: 0.7;
}
.dice .main .hash a img {
vertical-align: middle;
margin-left: 5px;
}
.dice .info {
width: 440px;
text-align: center;
}
@media (max-width: 980px) {
.dice .info {
width: 370px;
}
}
@media (max-width: 680px) {
.dice .info {
width: 100%;
order: 0;
margin-bottom: 20px;
}
}
.dice .info .x {
font-size: 62px;
}
.dice .info .description {
color: #abb1c9;
}
.dice .info .actions {
display: flex;
}
.dice .info .actions .action {
width: 50%;
margin: 20px 0;
}
.dice .info .actions .action:first-child {
margin-right: 10px;
}
.dice .info .actions .action span {
display: block;
color: #b9b1d7;
margin-bottom: 10px;
font-size: 14px;
}
.dice .info .actions .action button {
border-radius: 8px;
padding: 13px 25px;
font-size: 14px;
width: 100%;
font-weight: 500;
}
.dice .info .actions .action button:hover {
background-color: #fff;
}
.dice .info .result {
background-color: #ededed;
color: #6c757d;
font-size: 18px;
padding: 12px;
border-radius: 10px;
}
.dice .info .result.danger {
background-color: #dc3545;
color: white;
}
.dice .info .result.success {
background-color: #02be7a;
color: white;
}