* {
    font-family: Arial;

}


body {
    padding: 0 30px;
    background-color: #ececec;
    /*background-color: #4c8dec;*/
}

.dnd-wrapper {
    width: 100%;
    min-height: 100vh;
}

.dnd-wrapper .row:first-of-type {
    text-align: center;
}
.dnd-wrapper h2 {}

.divCreator {
    border: 3px solid #228c1d;
    border-radius: 15px;
    padding: 10px 30px;
    background-color: #35e430;
    font-size: 16px;
    color: #1d7919;
    font-weight: bold;
    cursor: pointer;
}

.divCrasher {
    border: 3px solid #8c0f11;
    border-radius: 15px;
    padding: 5px 15px;
    background-color: #e44748;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

.divCreator:hover {
    background-color: #30ce2b;
    color: #186615;

}

.divCrasher:hover {
    background-color: #bf252d;
    color: #ccc;
}

.divPool {margin-top: 30px;
    position: relative; height: 800px;
    border: 10px dashed #ececec;
    background-color: #fff;}
.divPool > div {height: 100px; width: 100px; background-color: #ddd; border: 1px solid #fff;}


.divPool > .draggable-div  {
    position: absolute;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    transition: all 0.005s ease-in, background-color 0.2s ease-in;

    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;}
.divPool > .draggable-div span {}
.divPool > .draggable-div .size {font-size: 14px; opacity:0;}
.divPool > .draggable-div:hover  {cursor: pointer;}
.divPool > .draggable-div:focus  {cursor: move;}
.divPool > .draggable-div:hover .size {font-size: 14px; opacity:1;}
.divPool > .draggable-div .color {opacity:0.6;}
.divPool > .draggable-div:hover .color { opacity:1;}

.divPool.dragging > .draggable-div.active {opacity: 0.85;}
.divPool.dragging > .draggable-div  {opacity: 0.55;}

.divPool.without-border > .draggable-div  {border: none;}


.options {margin: 0 auto; text-align: left}
.options td {    vertical-align: top; width: 50%;}
.options .mini_title {text-align: center; cursor: pointer;}

.hintsList, .settingsList {transition: all 0.3s ease-in; height: 80px;overflow: hidden;}

.hiddenCollapsed {
    height: 0;
}


.touchInfo {font-size: 36px; text-align: center; font-weight: bold; }

div {
}