.active-element{
  /*position:relative !important;*/
  /*margin-left:-2px;*/
  /*margin-top:-2px;*/
  /*background:#fef5ca;*/
  /*background:rgba(254, 245, 202, 0.5);*/
  /*border-radius:30px;*/
  /*padding:10px;*/
  border-width:0px;
  border-style:solid;
  /*border-color:var(--yellow) !important;*/
  border-color:black;
}

.instructor-bg{
  position:absolute;
  top:-39px;
  /*left:-39px;*/
  display:flex;
  /*width:52px;*/
  height:52px;
  justify-content:center;
  align-items:center;
  border-radius:18px;
  border:2px solid black;
  z-index:11;
  background-color:#fef5ca;
  cursor:grab;
}

.rotator{
  /*position:absolute;*/
  /*top:0px;*/
  /*left:0px;*/
  /*top:-39px;*/
  /*left:-39px;*/
  /*top: -64px;*/
  /*left: -64px;  */
  /*top: -64px;*/
  /*left: -52px;  */
  /*width:52px;*/
  /*height:52px;*/
  width:48px;
  height:48px;
  /*border-radius:50%;*/
  /*border-radius:18px;*/
  /*border:2px solid black;*/
  /*background-color:var(--yellow);*/
  background-image:url("/assets/svg/2x2/arrow/rotate/red.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:60%;
  cursor:grab;
}
.dragBox .rotator{
  top: 0px;
  left: 0px;  
  /*top: -64px;*/
  /*left: -64px;  */
}
.dragBox .rotator-v-line{
  width:2px;
  height:26px;
  position:absolute;
  bottom:-26px;
  left:24px;
  background:black;
  /*border:1px solid white;*/
}
.dragBox .rotator-h-line{
  width:26px;
  height:2px;
  position:absolute;
  bottom:-26px;
  left:24px;
  background:black;
  display:none;
  /*border:1px solid white;*/
}
/*.dragBox .rotator-arrow{*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    position: absolute;*/
/*    bottom: -34px;*/
/*    left: 49px;*/
/*    background-image: url(/assets/svg/not-scaled/instruction-arrow/right/black);*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: 100%;*/
/*}*/

.dragBox .rotator-arrow{
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -42px;
    left: 14px;
    /*background-image: url(/assets/svg/not-scaled/instruction-arrow/right/black);*/
    background-image: url(/assets/svg/not-scaled/instruction-arrow/down/black.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}


.trash{
  /*position:absolute;*/
  /*top:0px;*/
  /*left:0px;*/
  /*top:-39px;*/
  /*left:-39px;*/
  /*top: -64px;*/
  /*left: -64px;  */
  /*top: -64px;*/
  /*left: -52px;  */
  /*width:52px;*/
  /*height:52px;*/
  width:48px;
  height:48px;
  /*border-radius:50%;*/
  /*border-radius:18px;*/
  /*border:2px solid black;*/
  /*background-color:var(--yellow);*/
  background-image:url("/assets/icons/red/trash.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:60%;
  /*cursor:grab;*/
}


.color-palette{
  /*position:absolute;*/
  /*top:0px;*/
  /*left:0px;*/
  /*top:-39px;*/
  /*left:-39px;*/
  /*top: -64px;*/
  /*left: -64px;  */
  /*top: -64px;*/
  /*left: -52px;  */
  /*width:52px;*/
  /*height:52px;*/
  width:30px;
  height:30px;
  margin:10px;
  border:2px solid #f80000;
  border-radius:50%;
  /*border-radius:50%;*/
  /*border-radius:18px;*/
  /*border:2px solid black;*/
  /*background-color:var(--yellow);*/
  /*background-image:url("/assets/icons/red/color-palette.svg");*/
  /*background-image:url("/assets/icons/red/paint-brush.svg");*/
  background-image:url("/assets/icons/color-wheel.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:auto;
}

.wrench-button{
  /*position:absolute;*/
  /*top:0px;*/
  /*left:0px;*/
  /*top:-39px;*/
  /*left:-39px;*/
  /*top: -64px;*/
  /*left: -64px;  */
  /*top: -64px;*/
  /*left: -52px;  */
  /*width:52px;*/
  /*height:52px;*/
  width:48px;
  height:48px;
  /*border-radius:50%;*/
  /*border-radius:18px;*/
  /*border:2px solid black;*/
  /*background-color:var(--yellow);*/
  /*background-image:url("/assets/icons/red/color-palette.svg");*/
  background-image:url("/assets/icons/red/wrench.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:60%;
}

.sticker-button{
  width:48px;
  height:48px;

  background-image: url(/assets/icons/instruction/stick.svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:60%;
  /*cursor:grab;*/
  
}

.illuminating-button {
    width: 48px;
    height: 48px;
    background-image: url(/assets/icons/illuminating.webp);
    background-size: 62%;
    background-repeat: no-repeat;
    background-position: center;
}