.controller{
  position:fixed;
  bottom:0px;
  right:26px;
  width:100%;
  max-width:338px;
  z-index:100;
  overflow:hidden;
  /*width:312px;*/
  height:100%;
}  
.controller-menu{
  position:relative;
  /*top:520px;*/
  /*bottom:0px;*/
  /*right:26px;*/
  /*width:332px;*/
  height:100%;

  overflow-x: hidden;
    overflow-y: scroll;
    
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
  
    /*transform:translate(-50%, 0);*/
  /*display:flex;*/
  /*align-items:flex-end;*/
  /*justify-content:flex-end;*/
  z-index:5;
}
.controller-menu::-webkit-scrollbar {
  display: none;
}
.controller-inner {
    position: relative;
    width:100%;
    /*width: calc(100% - 52px);*/
    /* height: 182px; */
    /*height: 52px;*/
    /*height:426px;*/
    padding:78px 26px 0px 26px;
    display: flex;
    /*align-items: flex-end;*/
    /*justify-content: flex-end;*/
    /*margin-right:26px;*/

}
.controller-wrap{
  /*position:absolute;*/
  /*top:0;*/
  /*right:0;*/
  position:relative;
  /*width:104px;*/
  width: 286px;
  min-height:100vh;
  /*height:78px;*/
  /*display:flex;*/
  /*flex-direction: column;*/
  /*flex-direction: row;*/
  /*float:right;*/
  /*align-items:flex-end;*/
  /*height:1800px;*/
}
.controller-wrap div{
  position:relative;
  /*display:inline-flex;*/
}

.builder-content{
  display:flex;
  flex-wrap:wrap;
}

.controller{
  display:none;
}
.controller.open{
  display:block;
}

.controller-wrap .plate{
  opacity:0.8;  
}
.controller-wrap .plate:hover,
.controller-wrap .studded:hover{
  opacity:1;  
  border:1px solid blue !important;
}
.controller-line{
  /*wf-left;*/
  /*display:inline-block;*/
  display: flex;
  flex-wrap: wrap;
  /*flex-wrap:wrap;*/
  width:100%;
  /*margin-bottom:26px;*/
  /*background:white;*/
  z-index:1;
  /*width:260px;*/
  padding:26px 26px 26px 26px;
  /*padding:26px 13px 26px 13px;*/
}
.controller-line.centered{
  padding:26px 13px 26px 13px;
}
.controller-header{
  position:absolute;
  top:26px;
  left:26px;
  z-index:6;
}


/*************/
      .open .closed,
      .opened{
        display:none !important;
      }
      .closed,
      .open .opened{
        display:block !important;
      }
      .close-button{
        background-color:var(--red);
        color:#fff;
        /*border-color:#5d5d5d !important;*/

      }
      .opener{
        border-color:#ffffff !important;
        /*background-color:var(--yellow);*/
        /*color:black;*/
      }

/***********/


.showGrid{
  /*wf-left;*/
  /*position:fixed;*/
  /*bottom:0px;*/
  /*right:130px;*/
  z-index:20;
  margin-left:26px;
  width:26px;
}

.cPanel{
  /*wf-left;*/
  /*position:fixed;*/
  /*bottom:0px;*/
  /*right:78px;*/
  z-index:56;
  width:52px;
}
.cp-icon{
    /*width:60%;*/
    /*height:60%;*/
    background-image:url(/assets/elements/tiles/cp-icon-off.svg);
    background-size:contain;
    /*background-size:80% 80%;*/
    background-repeat:no-repeat;
    /*transform: rotate(-45deg);*/
  
}
.cp-icon.on,
.on .cp-icon{
    background-image:url(/assets/elements/tiles/cp-icon-on.svg);
}



/*********************/


@media(max-width:769px){
  .controller{
    right:0px;
  }

}



/*********************/


.builderPointer {
    --pointerRadius:6px;
    --pointerCorrection:-3px;
    margin-top:var(--pointerCorrection);
    margin-left:var(--pointerCorrection);
    width: var(--pointerRadius);
    height: var(--pointerRadius);
    background-color: var(--green);
    /*background-color: orange;*/
    border-radius: 50%;
    position: absolute;
    z-index:11;
}