.wrapper {
background: #f4f9ff;
border: 1px solid #60AFFF;
border-radius: 5px;
color: #555;
height: auto;
margin: 5% auto 0;
padding: 30px 30px 35px;
position: relative;
width: 54%;
}
#header {
margin-bottom: 20px;
}
#header h1 {
margin: 0;
text-align: center;
}
#container .instructions {
color: #999;
font-style: italic;
font-weight: bold;
margin: 15px auto 40px auto;
text-align: center;
width: 100%;
}
#container {
margin: 0 auto;
position: relative;
text-align: justify;
width: 70%;
}
#container .icon-title {
color: #999;
font: 20px Impact,Charcoal,sans-serif;
margin: 7px 0;
text-transform: uppercase;
}
.blue {
color: #6db0f2;
}
.orange {
color: #ffb847;
}
#container > div {
border-radius: 5px;
}
#container .row {
background: #d6ebff;
border: 1px solid #a8d4ff;
position: relative;
width: 100%;
}
#row1 {
margin: 0 auto 20px;
}
#row2 {
margin: 0 auto 40px;
}
#icons {
background: #ffe6bf;
border: 1px solid #fac46d;
position: relative;
}
.drop-container {
color: #9a9aaa;
font: italic 14px Verdana,sans-serif none;
height: auto;
margin: 0;
min-height: 32px;
padding: 13px 15px;
position: relative;
text-align: justify;
}
.row .drop-container-hover {
background-color: #e0f0ff;
}
#icons .drop-container-hover {
background-color: #ffedd1;
}
.drop-container li, .drop-container .ui-draggable-dragging {
border: 1px solid transparent;
display: inline-block;
height: 26px;
list-style-type: none;
padding: 2px;
position: relative!important;
text-align: justify;
}
.drop-container li:hover {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #fff;
cursor: move;
opacity: 0.8;
}
.drop-container .place-icons {
background-color: transparent!important;
box-shadow: none!important;
cursor: default!important;
opacity: 1;
position: absolute;
top: 5px;
}
#icons .selected {
border: 1px dashed #bf9c64;
border-radius: 5px;
box-shadow: none;
background-color: rgba(255, 157, 0, 0.4);
padding: 5px;
}
.row .selected {
background-color: rgba(0, 128, 255, 0.3)!important;
border: 1px dashed #2894ff;
border-radius: 5px;
box-shadow: none!important;
padding: 5px;
}

/*
.ui-draggable-dragging, .selected {
background-color: none;
border: 1px solid transparent;
display: inline-block;
padding: 2px;
z-index: 5;
}*/
#icons .ui-sortable-placeholder, .row .ui-sortable-placeholder {
background: #CCC!important;
border: 1px dashed #777!important;
border-radius: 5px!important;
display: inline-block!important;
height: 22px!important;
line-height: 20px!important;
opacity: 0.5!important;
margin: 0 5px!important;
padding: 1px!important;
position: relative!important;
visibility: visible!important;
width: 22px!important;
}
.tooltip{
background-color: #444;
border: 1px solid #222;
border-radius: 5px;
padding: 3px;
position: absolute;
width: auto;
visibility: hidden;
z-index: 999;
}
.tooltip p{
background-color: #999;
color: #fff;
font-family: Electrolize, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 2px 5px;
}
