#drag-elements {
    display: flex;
    /* background-color: #dfdfdf; */
    border-radius: 5px;
    min-height: 50px;
    margin: 0 auto;
    padding: 2em;
    justify-content: space-around;
    /* transition: display 1s ease allow-discrete; */

}

#drag-elements > div {
    position: relative;
    text-align: center;
    /* float: left; */
    padding: 1em;
    margin: 0 1em 1em 0;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    /* border-radius: 100px; */
    border: 2px solid #ececec;
    background: #F7F7F7;
    transition: all 0.5s ease;
}

#drag-elements > div:hover {
    border: 2px solid rgb(82, 137, 254);
    background-color: #e5e5e5;
  }

rect {
    fill: transparent !important;
}

.unselectable {
    pointer-events: none;
}

#drag-elements > div.correct {
    border: 2px solid green;
    background-color: #00800030;
}

#drag-elements > div.incorrect {
    border: 2px solid red;
    background-color:#ff000030;
}

p.index {
	position: absolute;
	left: 0;
    font-family: "Arial", sans-serif;
	font-size: 120pt;
	color: #80808057;
	top: 0;
	bottom: 0;
	right: 0;
	margin: 0;
}

.guide {
    display: flex;
    justify-content: space-between;
}

.guide > div {
    font-size: 24px;
}

.arrow {
    padding: 6px;
}

#drag-elements span {
	position: absolute;
	bottom: -20;
	left: 0;
	right: 0;
	background-color: white;
	border-style: solid;
	width: 80pt;
	margin: auto;
	border-radius: 50%;
	border-width: 2pt;
	padding: 4pt;
	border-color: gray;
    font-family: "Arial", sans-serif;
}