body {
	margin: 0;
	background-color: #d7d7d7;
	background-image: url("/editor/bg.png");
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}
a {
	color: #ff0;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.editor_text {
	background: transparent;
	color: #000;
	resize: none;
	width: 100%;
	font-size: 30px;
	outline: none;
	height: 100%;
	position: absolute;
	text-align: left;
	white-space:nowrap;
  }

  .button1 {
	position: relative;
	margin-right:10px;
	align-items: center;
	appearance: none;
	background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
	border: 0;
	border-radius: 15px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: "JetBrains Mono",monospace;
	height: 48px;
	justify-content: center;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size:32px;
  }
  
  .button1:focus {
	box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  }
  
  .button1:hover {
	box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
	transform: translateY(-4px);
	background-image: radial-gradient(100% 100% at 100% 0, #02c8ff 0, #374eff 100%);
  }
  
  .button1:active {
	box-shadow: #3c4fe0 0 3px 7px inset;
	transform: translateY(2px);
  }





  @keyframes flickerAnimation {
	0%   { opacity:1; transform: translateX(-8px); }
	50%  { opacity:0; transform: translateX(8px); }
	100% { opacity:1; transform: translateX(-8px); }
  }
  @-o-keyframes flickerAnimation{
	0%   { opacity:1; transform: translateX(-8px); }
	50%  { opacity:0; transform: translateX(8px); }
	100% { opacity:1; transform: translateX(-8px); }
  }
  @-moz-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; transform: translateX(8px);  }
	100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0;  }
	100% { opacity:1; }
  }
  .animate-flicker {
	  transform: translateX(8px); 
	 -webkit-animation: flickerAnimation 1s infinite;
	 -moz-animation: flickerAnimation 1s infinite;
	 -o-animation: flickerAnimation 1s infinite;
	  animation: flickerAnimation 1s infinite;
  }
  .animate-flickertop {
	  transform: translateY(8px); 
	 -webkit-animation: flickerAnimationTop 1s infinite;
	 -moz-animation: flickerAnimationTop 1s infinite;
	 -o-animation: flickerAnimationTop 1s infinite;
	  animation: flickerAnimationTop 1s infinite;
  }
  @keyframes flickerAnimationTop {
	0%   { opacity:1; transform: translateY(-8px); }
	50%  { opacity:0; transform: translateY(8px); }
	100% { opacity:1; transform: translateY(-8px); }
  }
  @-o-keyframes flickerAnimationTop{
	0%   { opacity:1; transform: translateY(-8px); }
	50%  { opacity:0; transform: translateY(8px); }
	100% { opacity:1; transform: translateY(-8px); }
  }
  @-moz-keyframes flickerAnimationTop{
	0%   { opacity:1; }
	50%  { opacity:0; transform: translateY(8px);  }
	100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimationTop{
	0%   { opacity:1; }
	50%  { opacity:0;  }
	100% { opacity:1; }
  }




  select {
	position: relative;
	display: flex;
	flex-direction: column;

	margin-bottom:10px;
	padding: 7px;
	border-radius: 1px;
	font-size: 20px;

	border: 2px solid transparent;
	box-shadow: 0 0 0 1px #dddddd, 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%);
}



input  {
	margin-bottom:10px;
	padding: 7px;
	border-radius: 6px;
	font-size: 20px;
	background: #ffffff;
	border: 2px solid transparent;
	width: 200px;
	box-shadow: 0 0 0 1px #dddddd, 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%);
}
input:focus{
	border: 2px solid #000;
	border-radius: 4px;
}



.div_items_style {
	position: fixed;
	top: 0px;
	right: 0px;
	padding: 7px;
	z-index: 1111; /* TODO Solve this in HTML */
}
.div_items_img {
	border: 3px solid #dadada;
	border-radius: 20px;
	margin-top:5px;
}
.div_items_img:active {
	border: 3px solid #dd1063;
}



.div_window_bottom {
	position: fixed; 
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 140px; /* Need a specific value to work */
	bottom:120px;
	font-size:16px;
	color:#000;
	font-family: 'Arial';
	text-align: center;
}
.div_window_bottom2 {
	position: fixed; 
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 400px; /* Need a specific value to work */
	bottom:10px;
	font-size:16px;
	color:#000;
	font-family: 'Arial';
	text-align: center;
}
.div_window_bottom3 {
	position: fixed; 
	left: 10px; 
	top: 10px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 50px; /* Need a specific value to work */
	font-size:16px;
	color:#000;
	font-family: 'Arial';
	text-align: center;
}
.div_window_bottom4 {
	position: fixed; 
	right: 100px; 
	bottom: 10px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 100px; /* Need a specific value to work */
	font-size:11px;
	color:#000;
	font-family: 'Arial';
	text-align: center;
}
/* Bottom Nav Menu */
.div_window_bottom5 {
	position: fixed; 
	left: 0; 
	right: 0; 
	width:350px;
	height:140px;
	margin-left: auto; 
	margin-right: auto; 
	font-size:16px;
	color:#000;
	font-family: 'Arial';
	text-align: center;
	border-radius: 20px;
	background: linear-gradient(to bottom right, #ffffff, #dddddd);
	border: 1px solid #8b8b8b;
	box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
	will-change: box-shadow,transform;
	 transition: box-shadow .15s,transform .15s;
}

.div_window_bottom5:hover {
	border: 1px solid #8b8b8b;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.5) 0px 8px 16px -8px;
	/*transform: translateY(-3px);*/
  }

.div_window_frame {
	overflow: scroll;
	overflow-x: hidden;
	max-height:450px;
}


.div_window {
	cursor: pointer; 
	position: fixed;
	padding: 20px;
	margin: 20px;
	height: auto;
	max-height: 500px;
	left:0px;
	top:0px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	background-color: #f5f5f5;
	font-size:12px;
	color:#000;
	font-family: 'Arial';
	border: 2px solid #bcbcbc;
	overflow:hidden;
}


.cat_prev_img {
	cursor: pointer; 
	border-radius: 6px;
	padding:10px;
	margin: 5px;
	font-size:12px;
	align-items: center;
	text-align: center;
	overflow:hidden;
	height: 165px;
	width: 120px;
	transition: box-shadow .15s,transform .15s;
	will-change: box-shadow,transform;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.cat_prev_img:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.cat_prev_img_big {
	cursor: pointer; 
	border-radius: 14px;
	margin: 5px;
	align-items: center;
	text-align: center;
	overflow:hidden;
	height: 200px;
	width: 200px;
	transition: box-shadow .15s,transform .15s;
	will-change: box-shadow,transform;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.cat_prev_img_big:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}




@media (max-height: 600px) {
	.div_window_frame {
		max-height: 350px;
	}
	.div_window {
		max-height: 400px;
	}
  }

@media (max-width: 700px) {
	.div_window {
		width: 90%;
		margin: 0px;
	}
	.cat_prev_img {
		height: 135px;
		width: 90px;
	}
  }
  @media (min-width: 800px) {
	  .div_window {
		  width: 650px;
	  }
	  .cat_prev_img {
		height: 135px;
		width: 90px;
	  }
 }


.closebtn2 {
	position:absolute;
	top:0px;
	right:0px;
	display: block;
	outline: none;
	cursor: pointer;
	font-size: 30px;
	height: 50px;
	font-weight: 600;
	border-radius: 10px;
	padding: 10px;
	background: linear-gradient(to right, rgb(230, 30, 77) 0%, rgb(227, 28, 95) 50%, rgb(215, 4, 102) 100%);
	color: #fff;
	z-index: 12000;
}



/* CSS */
.closebtn {
  position:absolute;
  top:0px;
  right:0px;
  align-items: center;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: "Codec cold",sans-serif;
  font-size: 16px;
  font-weight: 700;
  height: 54px;
  justify-content: center;
  letter-spacing: .4px;
  line-height: 1;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: box-shadow .15s,transform .15s;
}

.closebtn:active {
  outline: 0;
}

.closebtn:hover {
  outline: 0;
  transform: translateY(-4px);
}

.closebtn span {
  transition: all 200ms;
}

.closebtn:hover span {
  transform: scale(.9);
  opacity: .75;
}











input[type='radio'][name='cat_group1'] { display:none;  }
input[type='radio'][name='cat_group1']:checked + label { background-image: linear-gradient(180deg,#3fb200,#4ad100);color:#FFFFFF;font-size: 14px; }
input[type='radio'][name='cat_group2'] { display:none; }
input[type='radio'][name='cat_group2']:checked + label { background-image: linear-gradient(180deg,#3fb200,#4ad100);color:#FFFFFF;font-size: 14px; }
input[type='radio'][name='cat_group3'] { display:none; }
input[type='radio'][name='cat_group3']:checked + label { background-image: linear-gradient(180deg,#3fb200,#4ad100);color:#FFFFFF;font-size: 14px; }
input[type='radio'][name='cat_group4'] { display:none; }
input[type='radio'][name='cat_group4']:checked + label { background-image: linear-gradient(180deg,#3fb200,#4ad100);color:#FFFFFF;font-size: 14px; }
input[type='radio'][name='cat_group5'] { display:none; }
input[type='radio'][name='cat_group5']:checked + label { background-image: linear-gradient(180deg,#3fb200,#4ad100);color:#FFFFFF;font-size: 14px; }





.radiobtn {
	display: inline-block;
	outline: 0;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	color: rgb(72, 76, 122);
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 10px;
	background-image: linear-gradient(180deg,#fff,#f5f5fa);
	box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
	transition: all .2s ease-out;
	margin-right:5px;
	margin-bottom:5px;
}
.radiobtn:hover{
	box-shadow: 0 8px 22px 0 rgb(37 44 97 / 15%), 0 4px 6px 0 rgb(93 100 148 / 20%);
}















/* CSS NAVIGATION: Blue Button */
.button_15 {
  background-image: linear-gradient(#42A1EC, #0070C9);
  border: 1px solid #0077CC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  display: block;
  font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 2px 10px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  margin-bottom:5px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 0px 0 inset;
  transition: transform .2s;
}
.button_15:hover {
  background-image: linear-gradient(#51A9EE, #004985);
  border-color: #1482D0;
  text-decoration: none;
  transform: scale(1.2);
}
.button_15:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}





/* CSS NAVIGATION: Green Button */
.button_16 {
	background-image: linear-gradient(#62ca8a, #00b150);
	border: 1px solid #27972d;
	border-radius: 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	direction: ltr;
	display: block;
	font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.47059;
	min-width: 30px;
	overflow: visible;
	padding: 2px 10px;
	text-align: center;
	vertical-align: baseline;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	margin-bottom:5px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 0px 0 inset;
	transition: transform .2s;
  }
  .button_16:hover {
	background-image: linear-gradient(#98ee51, #7dcd14);
	border-color: #00c73c;
	text-decoration: none;
	transform: scale(1.1);
  }
  .button_16:active {
	background-image: linear-gradient(#cfd93d, #91b900);
	border-color: #00bc09;
	outline: none;
  }
  




/* CSS NAVIGATION: Red Button */
.button_17 {
	background-image: linear-gradient(#d13a3a, #b32a01);
	border: 1px solid #cc0000;
	border-radius: 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	direction: ltr;
	display: block;
	font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.47059;
	min-width: 30px;
	overflow: visible;
	padding: 2px 10px;
	text-align: center;
	vertical-align: baseline;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	margin-bottom:5px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 0px 0 inset;
	transition: transform .2s;
  }
  .button_17:hover {
	background-image: linear-gradient(#ee5151, #cd1414);
	border-color: #d01414;
	text-decoration: none;
	transform: scale(1.1);
  }
  .button_17:active {
	background-image: linear-gradient(#d93d3d, #b90000);
	border-color: #bc0000;
	outline: none;
  }
  





/* CSS NAVIGATION: Red Button */
.button_18 {
	background-image: linear-gradient(#d1cf3a, #b3b001);
	border: 1px solid #ccbe00;
	border-radius: 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	direction: ltr;
	display: block;
	font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.47059;
	min-width: 30px;
	overflow: visible;
	padding: 2px 10px;
	text-align: center;
	vertical-align: baseline;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	margin-bottom:5px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 0px 0 inset;
	transition: transform .2s;
  }
  .button_18:hover {
	background-image: linear-gradient(#eee351, #cdbb14);
	border-color: #d0ae14;
	text-decoration: none;
	transform: scale(1.1);
  }
  .button_18:active {
	background-image: linear-gradient(#d9bc3d, #b99d00);
	border-color: #bca000;
	outline: none;
  }










/* CSS */
.button_62 {
  background: linear-gradient(to bottom right, #EF4765, #FF9A5A);
  border: 0;
  border-radius: 12px;
  margin-right:15px;
  margin-bottom:10px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 16px;
  float: left;
  font-weight: 500;
  line-height: 2.5;
  outline: transparent;
  padding: 0 1rem;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
}

.button_62:focus {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button_62:hover {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
  transform: translateY(-4px);
}





  
  








/* CSS */
.arrowbtn-29 {
  position: relative;
  margin-right:10px;
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 15px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size:32px;
}
.arrowbtn-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.arrowbtn-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-4px);
  background-image: radial-gradient(100% 100% at 100% 0, #02c8ff 0, #374eff 100%);
}
.arrowbtn-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}







/* CSS */
.arrowbtn-30 {
	position: absolute;
	left:0px;
	top:0px;
	display:none;
	margin-right:0px;
	align-items: center;
	appearance: none;
	background-image: radial-gradient(100% 100% at 100% 0, #ffffff 0, #b8b8b8 100%);
	border: 0;
	border-radius: 25px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	height: 45px;
	justify-content: center;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 13px;
	padding-right: 13px;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size:22px;
  }
  
  .arrowbtn-30:focus {
	box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  }
  
  .arrowbtn-30:hover {
	box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
	transform: translateY(-4px);
	background-image: radial-gradient(100% 100% at 100% 0, #02c8ff 0, #374eff 100%);
  }
  
  .arrowbtn-30:active {
	box-shadow: #3c4fe0 0 3px 7px inset;
	transform: translateY(2px);
  }
  
  







/* CSS */
.arrowbtn-31 {
	position: relative;
	display:block;
	margin-right:0px;
	margin-top:4px;
	align-items: center;
	justify-content: center;
	appearance: none;
	background: linear-gradient(to bottom right, #EF4765, #FF9A5A);
	border: 0;
	border-radius: 25px;
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "JetBrains Mono",monospace;
	height: 45px;
	width: 45px;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 13px;
	padding-right: 13px;
	text-align: center;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size:22px;
  }
  
  .arrowbtn-31:focus {
	box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  }
  
  .arrowbtn-31:hover {
	box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
	transform: translateY(-4px);
	background-image: radial-gradient(100% 100% at 100% 0, #02c8ff 0, #374eff 100%);
  }
  
  .arrowbtn-31:active {
	box-shadow: #3c4fe0 0 3px 7px inset;
	transform: translateY(2px);
  }
  
  






  [type='color'] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	width: 50px;
	height: 30px;
	border: none;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
  
  [type='color']::-webkit-color-swatch-wrapper {
	padding: 0;
  }
  
  [type='color']::-webkit-color-swatch {
	border: none;
  }
  
  .color-picker {
	padding: 5px 5px;
  }



 .marker {
  position:absolute;
  border: 2px solid #818181;
  border-radius: 6px;
}


.resize-drag {
	position:absolute;
	border-color:#bdbdbd;
    border-width: 0px;
	border-style: solid;
	color: white;
	font-size: 20px;
	font-family: sans-serif;
	margin: 0px 0px;
	transform: rotate(0);
	transform-origin: center center;
	user-select: none;
	width: 120px;
	height: 120px;
	box-sizing: border-box;
	border-radius: 5px;

  }
  
  .resize-container {
	display: inline-block;
	width: 700px;
	height: 700px;
	background-color: #FFFFFF;
	transform: rotate(0);
	transform-origin: center center;
	overflow: hidden;
	margin-top: 5px;
	border-radius: 20px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }













::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #4177ff;
}

 ::-webkit-scrollbar-thumb:horizontal{
        background: #4177ff;
        border-radius: 0;
 }