.modal-dices {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: calc(100vh + 65px);
  background-color: rgba(255, 255, 255, 1); /* Color semitransparente de fondo */
  z-index: 9999; /* Asegura que el modal esté por encima de todo el resto de elementos */
  overflow: scroll;
}

.badge-primary{
    background-color: #007bff;
    cursor: pointer;
}

.counterimg {
    width: 1px;
    height: 1px;

}

#diceLog {
    max-height: calc(100vh - 120px);
    font-size: 11px;
    height: 100%;
    text-align: left !important;
    overflow-y: scroll;
}

#diceLog p{
    margin-top: 1px;
    margin-bottom: 1px;
}

#dice-container {
    height: auto;
}

#close-dice-modal {
    position: absolute !important;
    right: 0px;
    top: 0px;
    font-size: 28px;
    color: #007bff;
}

#dice-main-container {

}

.linerightgrey {
    border-right: 0.5px solid #d7d5d5;
}

.cube .front {
  transform: 
    translateZ(25px);
}

.cube .back {
  transform: 
    rotateX(-180deg)
    translateZ(25px);
}

.cube .right {
  transform:
    rotateY(90deg)
    translateZ(25px);
}

.cube .left {
  transform:
    rotateY(-90deg)
    translateZ(25px);
}

.cube .top {
  transform:
    rotateX(90deg)
    translateZ(25px);
}

.cube .bottom {
  transform:
    rotateX(-90deg)
    translateZ(25px);
}

.container-dices {
  width: 50px;
  height: 50px;
  position: relative;
  left: -2px;
  margin: 5px;
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

.cube {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 2s;
}

.cube:hover {
  cursor: pointer;
}

.cube div {
  background: hsla(0, 85%, 50%, 0.8);
  display: block;
  position: absolute;
  width: 50px;
  height: 25px;
  border: 0px solid #ab1a1a;
  margin: 0 auto;  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 500%;
  text-align: center;
  padding: 25px 0;
}

.dot {
  display: block;
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 5px;  
}

.front .dot1 { top: 20px; left: 20px; }
.back .dot1 { top: 8px; left: 8px; }
.back .dot2 { top: 32px; left: 32px; }
.right .dot1 { top: 8px; left: 8px; }
.right .dot2 { top: 20px; left: 20px; }
.right .dot3 { top: 32px; left: 32px; }
.left .dot1 { top: 8px; left: 8px; }
.left .dot2 { top: 8px; left: 32px; }
.left .dot3 { top: 32px; left: 8px; }
.left .dot4 { top: 32px; left: 32px; }
.top .dot1 { top: 8px; left: 8px; }
.top .dot2 { top: 8px; left: 32px; }
.top .dot3 { top: 20px; left: 20px; }
.top .dot4 { top: 32px; left: 8px; }
.top .dot5 { top: 32px; left: 32px; }
.bottom .dot1 { top: 8px; left: 8px; }
.bottom .dot2 { top: 8px; left: 20px; }
.bottom .dot3 { top: 8px; left: 32px; }
.bottom .dot4 { top: 32px; left: 8px; }
.bottom .dot5 { top: 32px; left: 20px; }
.bottom .dot6 { top: 32px; left: 32px; }