#container {
  width: 600px;
  margin: 0 auto;
}
.drop-shadow {
  position: relative;
  float: left;
  width: 40%;
  padding: 1em;
  margin: 2em 10px 4em;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -mox-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -2;
}
.drop-shadow p {
  font-size: 16px;
  font-weight: bold;
}
.lifted {
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.lifted:before,
.lifted:after {
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  max-height: 100px;
  -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -mox-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.lifted:after {
  right: 10px;
  left: auto;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
.curled {
  border: 1px solid #efefef;
  -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
  border-radius: 0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
  bottom: 12px;
  left: 10px;
  width: 50%;
  height: 55%;
  max-width: 200px;
  max-height: 100px;
  -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  -mox-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  -webkit-transform: skew(-8deg) rotate(-3deg);
  -moz-transform: skew(-8deg) rotate(-3deg);
  -ms-transform: skew(-8deg) rotate(-3deg);
  -o-transform: skew(-8deg) rotate(-3deg);
  transform: skew(-8deg) rotate(-3deg);
}
.curled:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}
.perspective:before {
  left: 80px;
  bottom: 5px;
  width: 50%;
  height: 35%;
  max-width: 200px;
  max-height: 50px;
  -webkit-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  -mox-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  -webkit-transform: skew(50deg);
  -moz-transform: skew(50deg);
  -ms-transform: skew(50deg);
  -o-transform: skew(50deg);
  transform: skew(50deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.perspective:after {
  display: none;
}
.raised {
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5) , 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -mox-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5) , 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5) , 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curved:before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 50%;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  -mox-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  -moz-border-radius: 10px / 100px;
  border-radius: 10px / 100px;
}
.curved.v2:before {
  right: 0;
}
.curved.h1:before {
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}
.curved.h2:before {
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}
.rotated {
  -webkit-box-shadow: none;
  -mox-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.rotated > :first-child:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -mox-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
}



div.movingdiv, div#test,div#test1,div#test2,div#test3,div#test4,div#test5,div#test6,div#testfixed  {
	width: 150px;
	height: 50px;
	border: 3px solid #9494b8; /*#AF0078*/
	border-radius: 15px 15px 15px 5px;
	padding: 10px;
	background-color: #ffffff;
	position: absolute;
	top: 210px;
	left: 0;
	cursor: pointer;
	z-index: 200;
	overflow:hidden; /*auto;*/
	/*
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-mox-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
	*/
}

div#testfixed {
	position: fixed;
	top: 220px;
}

div.staticdiv,div.static{
	width: 200px;
	height: 50px;
	border: 3px solid #C0C0C0;
	padding: 10px;
	background-color: #ffffff;
	position: relative;
	display: inline-block;
/*	top: 300px;*/
	left: 0;
/*	cursor: pointer;*/
	z-index: 200;
/*	overflow:scroll;*/
	overflow:hidden;
}

div.dragged {
	cursor: all-scroll !important;
	height: 100px;
	border-color: #F08080!important; /*#cc0000 #CD5C5C*/
	z-index: 9999999 !important;
}

.middle_z_index{
	z-index: 250 !important;

}
div.matched {
	border-color: #4d4dff !important; /*#0000ff*/
	z-index: 300 !important;
	opacity:0.45 !important;
}
div.static_matched {
	border-color: #ee804a !important; /*#0000ff*/
  background-color: #d76a35!important;
	/*z-index: 300 !important;*/
	/*opacity:0.45 !important;*/
}

.keyLink_container {
	
	  /*border: 2px solid red!important;*/
      overflow: auto!important;
      resize: both!important;
      display: flex!important;
	  /*direction:ltr!important;'*/	 	 
        }

a.keyLink {
	 margin: -5px 0 auto auto;
      position: sticky;
      order: 1;
    /*  right: 15px;
      top: calc(100% - 45px);*/
      flex-shrink: 0;
      display: flex;
	  
	/*top: calc(100% - 95px);*/
	top: 0px;
	right: -2px;	  
	 width: 20px;
	 height: 20px;
	border: 1px solid #000000;
	background-color: #ffffff;
	opacity: .5;
	padding: 0;
	/*position: absolute; */ /* absolute relative; static; sticky; fixed;*/
	/*top: -2px;
	right: -2px;
	width: 20px;
	height: 20px;
	border: 1px solid #000000;
	background-image: none;
	font-size: 120%;
	text-align: center;
	padding: 0;
	background-color: #ffffff;
	opacity: .5;*/
	
}

div.dragged a.keyHTML,a.keyHTML:focus {
	border-color: #cc0000; /*#CD5C5C;*/
	height: 350px;
}
/* https://stackoverflow.com/questions/67463673/how-to-detect-if-user-is-trying-to-resize-a-draggable-element */
.resizeable {
  /*width: 5em!important;
  height: 5em;*/
  width:150px;
  height:50px;
  border: 5px solid black;
  /*position: absolute;*/
  
  resize: both!important;
  display: flex;
  overflow: hidden!important;
  /*mix-blend-mode: hard-light;*/
  border-radius: 3em;
}


/* https://stackoverflow.com/questions/68781589/how-to-make-an-image-non-selectable-in-css */
div.no_drag_image img{
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}