/*popup*/
.popup{
  position:fixed;
  /*top:0;*/
  /*top:var(--grid2);*/
  /*left:0;*/
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:9999;
  /*z-index:3;*/
  /*width:100%;*/
  /*height:100%;*/
  /*max-width:var(--grid19);*/
  /*padding-top:var(--grid2);*/
  /*padding-bottom:var(--grid2);*/
  /*padding-left:var(--grid1);*/
  /*padding-right:var(--grid1);*/
  /*box-sizing: border-box;*/
  display:none;
}

.popup.open{
  display:flex;
  align-items:center;
  justify-content:center;
}
.popupFrame{
    position:relative;
    width:100%;
    height:100%;
    /*overflow:hidden;*/
}
.popupContainer{
    position:relative;
}
.popupContentWrapper{
    /*position:absolute;*/
    top:var(--grid4) !important;
    left:var(--grid3);
    right:var(--grid3);
    bottom:var(--grid3);
    /*top:130px;*/
    width:100%;
    max-width:var(--grid30);
    z-index:10001;
}
.popupContent {
    position:relative;
    /*float:left;*/
    display:flex;
    flex-wrap:wrap;
    width:100%;
    height:100%;
    min-height:var(--grid8);
    /*background:black;*/
    z-index:2;
}
.popupFooter{
    width:100%;
    max-width:var(--grid30);
    /*left:var(--grid2);*/
    /*float:left;*/
    display:flex;
}
.popupPieces{
    position:absolute;
    width:100%;
    /*background:var(--red);*/
    /*background:var(--yellow);*/
    
}
@keyframes forwardBackward {
  0% {
    transform: scale(1);
    transform-origin: center;
  }
  25% {
    transform: translateX(0px) scale(1.2);
    transform-origin: center;
  }
  50% {
    transform: translateX(0px) scale(1);
    transform-origin: center;
  }
  75% {
    transform: translateX(0px) scale(1.2);
    transform-origin: center;
  }
  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

/* Alkalmazd az animációt a div-re */
.close-button-anim {
  animation: forwardBackward 2s infinite;
}

.plate-inline-img{
  width:100%;
  height:auto;
}

.popup-color{
    /*border-color:black !important;*/
    /*border-color: var(--border-bright) !important;*/
    /*background:var(--yellow);*/
    /*background:white;*/
    background:var(--grey);
    /*background:var(--dark);*/
    /*-webkit-box-shadow: 0px 5px 15px -2px rgba(0,0,0,0.67);*/
    /*box-shadow: 0px 5px 15px -2px rgba(0,0,0,0.67);    */
}

input.t-frame{
	border-width:2px;
	border-style:solid;
	border-color:inherit;
}
input.tile{
	padding:4px 8px;
}
.plate9x2{
	width:var(--grid9);
	height:var(--grid2);
}

.photo-upload {
    color: white;
    width: var(--grid2);
    height: var(--grid2);
    font-size: 24px;
    /* background-size: contain; */
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/icons/add_a_photo_sharp_filled.png);
    /* margin-left: 12px; */
    color: var(--grey);
}
dark-mode .mode-ai-background {
    background-color: var(--grey);
    /* background-color: #ee9dc3; */
}
.color-black-white {
    font-weight: 600;
    color: black;
}
.l-button-medium {
    width: var(--grid6);
    height: var(--grid2);
}

/*PC*/

:root {
  --shadow-color: 286deg 36% 56%;
  --shadow-elevation-low: -0.4px 0.4px 0.6px hsl(var(--shadow-color) / 0.52),
                        -1.5px 1.5px 2.4px -2.5px hsl(var(--shadow-color) / 0.52);
  --shadow-elevation-medium: -0.4px 0.4px 0.6px hsl(var(--shadow-color) / 0.72),
                            -7.3px 7.3px 11.6px -2.5px hsl(var(--shadow-color) / 0.72);
  --shadow-elevation-high: -0.4px 0.4px 0.6px hsl(var(--shadow-color) / 0.89),
                          -8.3px 8.2px 13.1px -1.2px hsl(var(--shadow-color) / 0.89),
                          -36.7px 36.4px 58.2px -2.5px hsl(var(--shadow-color) / 0.89);
}


.editor {
  display: flex;
  gap: 20px;
}

#draggable {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 2px solid red;
  position: absolute;
  top: 90px;
  left: 90px;
  border-radius: 50%;
  cursor: grab;
  z-index:11;
}
#code-output {
  white-space: pre;
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.preview-box {
  width: 180px;
  height: 180px;
  /*background-color: #fff;*/
  /*border: 1px solid #ddd;*/
  border-radius:50%;
  box-shadow: var(--shadow-elevation-low);
  margin-bottom: 10px;
  position: relative;
  /*border:2px solid rgba(0,0,0,.27);*/
}
.preview-box.bevel{
	/*box-shadow: */
    /*inset 0px 2px 5px rgba(255, 255, 255, 0.8), */
    /* Felső világos árnyék */
    /*inset 0px -2px 5px rgba(0, 0, 0, 0.2),*/
    /*0px 4px 8px rgba(0, 0, 0, 0.3); */
    /* Alsó sötét árnyék */    	
	box-shadow: rgba(255, 255, 255, 0.4) 0.77625px -6.07947px 10px, rgba(0, 0, 0, 0.4) -1.5525px 12.1589px 10px;        
}  
.pattern-creator-color{
	--pattern-creator-color:var(--modeColor);
	/*--pattern-creator-color:var(--white);*/
	background-color:var(--pattern-creator-color);
}
.center-lego-text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:62px;
	color:var(--pattern-creator-color);
	font-weight: 400;
	font-style: italic;
	/*font-family:"Arial";*/
	font-family:"Open Sans";
  	z-index:1;
	/*text-shadow: 0px 2px 4px rgba(0,0,0,.27);*/
  	text-shadow: rgba(0, 0, 0, 0.5) 1.62px 1.84px 2px;
}
  .preview-box-small{
	position:absolute;
	top:0;
	left:0;
	width: 17px;
	height: 17px;
	border-radius:50%;
	box-shadow: var(--shadow-elevation-low);
	/*margin-bottom: 10px;*/
	position: relative;
	/*border:1px solid rgba(0,0,0,.07);*/
  }
.preview-box-small.bevel{
	box-shadow:rgba(255, 255, 255, 0.4) 0.5175px -4.05298px 10px, rgba(0, 0, 0, 0.4) -1.035px 8.10596px 10px;
}
.preview-box-small .center-lego-text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:6px;
	/*color:rgba(255,255,255,.2);*/
	color:var(--pattern-creator-color);
	font-weight: 400;
	font-style: italic;
	/*font-family:"Arial";*/
	font-family:"Open Sans";
	z-index:1;
	/*text-shadow: 0px 2px 4px rgba(0,0,0,.27);*/
	text-shadow:rgba(0, 0, 0, 0.5) 1.8px 1.5px 2px;
}