.hide-scrollbar {
    overflow: auto;

    /* Firefox */
    scrollbar-width: none;

    /* IE / Edge legacy */
    -ms-overflow-style: none;
}

/* Chrome / Edge / Safari / Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.svg{
  z-index:2;
}
.svg-wrap svg{
  width:100%;
  height:100%;
}
.svg svg{
  width:100%;
  height:100%;
  /*fill:var(--dark) !important;*/
  fill:var(--yellow) !important;
}
.scrollerHandlerWrap{
  /*background:#000;*/
  /*border-left: 1px solid #131313;*/
}
.scrollpiece{
  /*background-color:var(--modeColor);*/
  background-color:var(--lgrey);
  border-left:1px solid var(--border-bright);

}

.dark-mode .scrollpiece{
  background-color:var(--dark);
}

/*:root{*/
/*--overlayBorderColor: rgba(52, 253, 255, 0.2);  */
/*}*/

.overlay-v{
  /*wf-left;*/
  background-color: var(--overlayBorderColor);
}

.overlay-v:after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: white; */
    border-style: solid;
    border-width: 2px;
    border-color: var(--overlayBorderColor);
}
.overlay-v span {
    position: absolute;
    border: 2px solid var(--overlayBorderColor);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.overlay-v > span:nth-child(1) {
    left: 8px;
    top: 20px;
}
.overlay-v > span:nth-child(2) {
    left: 8px;
    top: 46px;
}
.overlay-v > span:nth-child(3) {
    left: 8px;
    top: 72px;
}
.trans{
  border-color:var(--modeColor) !important;
}

  .scrollGear{
      position:absolute;
      width:var(--grid3);
      height:var(--grid3);
      /*width:var(--grid6);*/
      /*height:var(--grid6);*/
      z-index:52;
    
  }
  
  .gear64{
      width:var(--grid6);
      height:var(--grid6);
  }

  .gear24{
      position:absolute;
      /*width:var(--grid4);*/
      /*height:var(--grid4);*/
      width:78px;
      height:78px;
      /*margin-top:-4px;*/

  }
  .scrollConnect.right{
        /*position:fixed;*/
        /*right:52px;*/
        /*top:0;*/
        /*width:8px;*/
        /*height:100vh;*/
        z-index:5;
        /*background:yellow;*/
        
      width: 6px;
      height: 100vh; /* A teljes ablak magassága */
      /*background: repeating-linear-gradient(var(--dark), var(--dark) 4px, transparent 4px, transparent 8px);*/
      
      /*background: linear-gradient(45deg,var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark)), */
      /*            linear-gradient(-45deg, var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark));*/

      background: linear-gradient(45deg,var(--lgrey) 25%, transparent 25%, transparent 75%, var(--lgrey) 75%, var(--lgrey)), linear-gradient(-45deg, var(--lgrey) 25%, transparent 25%, transparent 75%, var(--lgrey) 75%, var(--lgrey));

      /*background: linear-gradient(45deg,var(--grey) 25%, transparent 25%, transparent 75%, var(--grey) 75%, var(--grey)), linear-gradient(-45deg, var(--grey) 25%, transparent 25%, transparent 75%, var(--grey) 75%, var(--grey));*/

      /*background: linear-gradient(-45deg, var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark)), */
      /*            linear-gradient(45deg, var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark));*/

      /*background: linear-gradient(135deg, var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark)), */
                  /*linear-gradient(-135deg, var(--dark) 25%, transparent 25%, transparent 75%, var(--dark) 75%, var(--dark));*/

      background-size: 13px 13px;      
      position: absolute;
      top: 0;
      right:22px;
      /*right:0px;*/
      transform:translateX(-50%) rotate(180deg);
      /*transform: translateX(0%) translateY(0);*/
        
  }
  .dark-mode .scrollConnect.right{
      /*background: linear-gradient(45deg,var(--grey) 25%, transparent 25%, transparent 75%, var(--grey) 75%, var(--grey)), linear-gradient(-45deg, var(--grey) 25%, transparent 25%, transparent 75%, var(--grey) 75%, var(--grey));*/
      /*background-size: 13px 13px;*/
  	
  }
  
  .scrollConnect.left{
      width: 6px;
      height: 100vh;
      background: linear-gradient(45deg,var(--lgrey) 25%, transparent 25%, transparent 75%, var(--lgrey) 75%, var(--lgrey)), 
                  linear-gradient(-45deg, var(--lgrey) 25%, transparent 25%, transparent 75%, var(--lgrey) 75%, var(--lgrey));
      background-size: 13px 13px;      
      position: absolute;
      top: 0;
      left:0px;
      transform:translateX(-50%) rotate(0deg);
      z-index:5;
  }
  
  .block{
      position:relative;
      height:104px;
      background:red;
      width:8px;
      
      
    }
    
    
  .yellow {
      --bcolor: var(--yellow);
      /*--bdarkcolor: #4f4f4f;*/
      /*--bdarkcolor:#b39c42 !important;*/
      --bdarkcolor:#ffcd03 !important;
      /*--border-brighter: #4d4d4d !important;*/
  }    
  .tech.grid2x1.yellow{
    background-color:transparent !important;
    background-image: url(/assets/texture/patterns/TECHNIC_BRICK_2x1_yellow.svg) !important;  
  }
  
  .position1{
      /*right:4px;*/
      right:26px;
      /*left:39px;*/
      /*top:var(--grid18);*/
      /*top:-26px;*/
      /*bottom:-56px;*/
      bottom:-26px;
      /*bottom:-65px;*/
      /*bottom:-39px;*/
      /*bottom:0;*/
      /*bottom:calc(-1 * (var(--grid3) - var(--grid2)));*/
      /*bottom:calc(-1 * (var(--grid6) - var(--grid3)));*/
  }
  .position2{
    right:96px;
    bottom:-52px;
  }  
  
  /*test*/
  .position3{
    right:26px;
    top:-52px;
  }
  .position4{
    left:70px;
    bottom:-52px;
  }  


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

        }        
        .scrollConnect.right{
          right:-6px;
        }
        .scrollConnect.left{
          left:-6px;
        }
    }
  :root{
    --lgrey:#afb0b8
    
  }