/*
.credits {
  width: 100%;
  top: 90%;
  border:solid 10px red;
}
*/
/*
.text {
  text-align: center;
  font-family: Helvetica;
  font-size: 0.8rem;
  color: grey;
  pointer-events: none;
}
*/



.centered, .cube > .cube1x1 > .element > .sticker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.scene {
  width: 100%;
  height: 250px;
  margin:auto;
  margin-top: 8px;
  margin-bottom: 8px;
  perspective: 1200px;
  transform-style: preserve-3d;
  /* overflow: hidden;
  border:solid 1px #444!important;  */
  /*background-color: #222; */ /*#2C2C2C;   */  /* #FFF; */
  /*background: radial-gradient(circle, #BBB, rgba(255, 255, 255, 0.25)); */
  /* border:solid 1px #eee; */
  /*background-color: #2F2F31; */
  /* -webkit-box-shadow: 3px 1px 39px 8px rgba(0,0,0,0.33); */
  /* box-shadotransitionw: 3px 1px 39px 8px rgba(0,0,0,0.33); */
}
.scene > .pivot {
  width: 0;
  height: 0;
  transition: 0.99s;
}
/*
.scene .anchor {
  width: 2em;
  height: 6em;
  border:solid 10px green!important;
}
*/
.scene div {
  position: absolute;
  transform-style: inherit;
}


.cube {
 /* font-size: 12%;*/
  margin-left: -21.5px;
  margin-top : -21.5px;

}
.cube > .cube1x1 {
  width: 43px;
  height: 43px;
}
.cube > .cube1x1 > .element {
  width: 43px;
  height: 43px;
  background: var(--black);
  outline: 0px solid var(--black);
  border : 1px solid var(--black);
  border-radius: 0%; 
}
.cube > .cube1x1 > .element.left {
  transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg) translateZ(22px);
}
.cube > .cube1x1 > .element.right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) translateZ(22px);
}
.cube > .cube1x1 > .element.back {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(-90deg) translateZ(22px);
}
.cube > .cube1x1 > .element.front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(22px);
}
.cube > .cube1x1 > .element.down {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg) translateZ(22px);
}
.cube > .cube1x1 > .element.up {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg) translateZ(22px);
}


.cube > .cube1x1 > .element > .round10 {
  border-radius: 10%;
}
.cube > .cube1x1 > .element > .round50 {
  border-radius: 80%;
}

.cube > .cube1x1 > .element > .sticker {
  transform: translateZ(0px);
  width: 95%;
  height: 95%;
  outline: 0px solid transparent;

  /* box-shadow: inset 0.05em 0.05em 0.2rem 0 rgba(255, 255, 255, 0.25), inset -0.05em -0.05em 0.2rem 0 rgba(0, 0, 0, 0.25); */
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center;
  /* background-image: url(/Images/Arrow.U.png); */
  
}

/* sticker.CW, sticker.WC{
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center;
} */

.CW{
  background-image: url(/Images/Arrow.4.CW.50x50.png);
  /*background-image: url(/Images/Rotate64.50x50.png);*/
}
.WC{
  background-image: url(/Images/Arrow.4.WC.50x50.png);
}

.AU{
  background-image: url(/Images/Arrow.U.png);
}

.AD{
  background-image: url(/Images/Arrow.D.png);
}
.AL{
  background-image: url(/Images/Arrow.L.png);
}

.AR{
  background-image: url(/Images/Arrow.R.png);
}





.RU{
  background-image: url(/Images/Arrow.RU.png);
}

.LD{
  background-image: url(/Images/Arrow.LD.png);
}
.LU{
  background-image: url(/Images/Arrow.LU.png);
}

.RD{
  background-image: url(/Images/Arrow.RD.png);
}

.cube > .cube1x1 > .element > .sticker.undefinite,  
#tblPickColor td.undefinite, 
#tblPickFace td.undefinite, 
#tblFace div.undefinite{
  background-color: var(--undefinedColor);

}

.cube > .cube1x1 > .element > .sticker.blue,  td.blue, button.blue{
  background-color: var(--blue);
}
.cube > .cube1x1 > .element > .sticker.green, td.green, button.green {
  background-color: var(--green);
}
.cube > .cube1x1 > .element > .sticker.white, td.white, button.white {
  background-color: var(--white);
}
.cube > .cube1x1 > .element > .sticker.yellow, td.yellow, button.yellow {
  background-color: var(--yellow);
}
.cube > .cube1x1 > .element > .sticker.orange, td.orange, button.orange {
  background-color: var(--orange);
}
.cube > .cube1x1 > .element > .sticker.red, td.red, button.red {
  background-color: var(--red);
}
.cube > .cube1x1 > .element > .sticker.dimgray  {
  background-color: var(--dimgray);
}
.cube > .cube1x1 > .element > .sticker.defaultColor, td.defaultColor {
  background-color: var(defaultColor);
}
.cube > .cube1x1 > .element > .sticker.undefined {
  background-color: var(--undefinedColor);
}


button.blue, button.green, button.red, button.orange{
  color: #FFF /* #1b3ad6;*/ /* #417CB9*/ /* #1b3ad6;*/   /* 001ca8   */
}

.cubeHeader{
  margin-left:auto;
  margin-right:auto;
  /*position: absolute;*/
  border: solid 0px green;		
  empty-cells: show;
  font-size: 0.9rem;
  /*width: 100%;*/
  margin-top: 1px;
  top:0px;
  /*width: 600px;*/
  width: 100%;
  background-color: transparent;
  opacity: 0.7;
}
.cubeHeader:hover{
  opacity: 1;
}
.cubeHeader td{
  border: solid 0px blue;	
  empty-cells: show;
  white-space: nowrap;
}

.cubeHeader td.degrees{
  width: 28px;
  text-align: right;
  color:var(--colorLed);
  /*
  background-color: #333;
  border-radius: 5px;
  border: solid 1px #444;
  padding-right: 3px;
  */
}
.cubeHeader td.labelDegrees{
  width: 10px;
  text-align: right;
  border: solid 0px #F44;
}
.cubeHeader td.labelPosition{
  width: 42px;
  text-align: left;
  border: solid 0px #f44;
}
.positionId{		
  color: var(--colorLed); 
  text-align: left;
  width: 24px;
  border: solid 0px #00F;
}
.position{		
  /*color: #777; *//* var(--colorLed); */
  text-align: center;
  width: 43px;  
  border: solid 0px #0F0;
}
.cubeHeader td.position div {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
  text-overflow: ellipsis;
  border: solid 0px #F0F;
}

.labelSticker{
  width: 25px;
  /* color: #777; var(--colorLed); */
}
.sticker{
  color: var(--colorLed); 
  width: 33px;
}