[data-name="Widget.Dice"].widget-content {
  background: none;
  text-align: center;
  width: 100%;
  margin: 0;
}
.edit [data-name="Widget.Dice"].widget-content {
  border: 1px solid #ccc;
  border-radius: 6px;
}


[data-name="Widget.Dice"] .myCube .front {
  transform: 
    translateZ(100px);
}

[data-name="Widget.Dice"] .myCube .back {
  transform: 
    rotateX(-180deg)
    translateZ(100px);
}

[data-name="Widget.Dice"] .myCube .right {
  transform:
    rotateY(90deg)
    translateZ(100px);
}

[data-name="Widget.Dice"] .myCube .left {
  transform:
    rotateY(-90deg)
    translateZ(100px);
}

[data-name="Widget.Dice"] .myCube .top {
  transform:
    rotateX(90deg)
    translateZ(100px);
}

[data-name="Widget.Dice"] .myCube .bottom {
  transform:
    rotateX(-90deg)
    translateZ(100px);
}

[data-name="Widget.Dice"] .dicecontainer {
  width: 200px;
  height: 200px;
  position: relative;
  margin: -80px auto 40px;
  border: 0px solid #FFF;
  
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

[data-name="Widget.Dice"] .myCube {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  
  transform-style: preserve-3d;
  
  transition: transform 6s;
}

[data-name="Widget.Dice"] .myCube:hover {
  cursor: pointer;
}

[data-name="Widget.Dice"] .myCube div {
  background: hsla(0, 85%, 50%, 0.9);
  display: block;
  position: absolute;
  width: 200px;
  height: 100px;
  border: 2px solid #ab1a1a;
  
  margin: 0 auto;  
  
  font-family: Arial, Helvetica, sans-serif; 
  text-align: center;
  padding: 50px 0;
}

[data-name="Widget.Dice"] .dot {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 15px;  
}

[data-name="Widget.Dice"] .front .dot1 { top: 85px; left: 85px; }
[data-name="Widget.Dice"] .back .dot1 { top: 45px; left: 45px; }
[data-name="Widget.Dice"] .back .dot2 { top: 125px; left: 125px; }
[data-name="Widget.Dice"] .right .dot1 { top: 45px; left: 45px; }
[data-name="Widget.Dice"] .right .dot2 { top: 85px; left: 85px; }
[data-name="Widget.Dice"] .right .dot3 { top: 125px; left: 125px; }
[data-name="Widget.Dice"] .left .dot1 { top: 45px; left: 45px; }
[data-name="Widget.Dice"] .left .dot2 { top: 45px; left: 125px; }
[data-name="Widget.Dice"] .left .dot3 { top: 125px; left: 45px; }
[data-name="Widget.Dice"] .left .dot4 { top: 125px; left: 125px; }
[data-name="Widget.Dice"] .top .dot1 { top: 45px; left: 45px; }
[data-name="Widget.Dice"] .top .dot2 { top: 45px; left: 125px; }
[data-name="Widget.Dice"] .top .dot3 { top: 85px; left: 85px; }
[data-name="Widget.Dice"] .top .dot4 { top: 125px; left: 45px; }
[data-name="Widget.Dice"] .top .dot5 { top: 125px; left: 125px; }
[data-name="Widget.Dice"] .bottom .dot1 { top: 45px; left: 45px; }
[data-name="Widget.Dice"] .bottom .dot2 { top: 45px; left: 85px; }
[data-name="Widget.Dice"] .bottom .dot3 { top: 45px; left: 125px; }
[data-name="Widget.Dice"] .bottom .dot4 { top: 125px; left: 45px; }
[data-name="Widget.Dice"] .bottom .dot5 { top: 125px; left: 85px; }
[data-name="Widget.Dice"] .bottom .dot6 { top: 125px; left: 125px; }