html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}



#room {
    height: 72vh;
}

/* #logo {
    display: block;
    margin: 10px auto;
    width: auto;
    height: 40px;
    filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.75));
} */

#controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28vh;
    border-top: 2px solid #888;
    font-size: 0;
    background-color: #455560;
}

#controlsLeftFade{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28vh;
    width: 20px;
    background: linear-gradient(90deg, rgba(69, 85, 96, 1) 0px, rgba(69, 85, 96, 1) 10px, rgba(69, 85, 96, 0) 20px);
}

#controlsRight {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 28vh;
    width: auto;
    font-size: 2vh;
    padding: 0 20px;
    background: linear-gradient(90deg, rgba(69, 85, 96, 0) 0px, rgba(69, 85, 96, 1) 10px);
    color: #FFF;
}

#controlsRight h2 {
    display: inline-block;
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    vertical-align: middle;
}

#widthMessage {
    margin: 1em 0 0 0;
}

#widthOutput{
    display: inline-block;
    vertical-align: middle;
    min-width: 4em;
}

#finishPicker{
    margin: 1.2em 0 0 0;
}

.finishOption {
    display: inline-block;
    width: 4vh;
    height: 4vh;
    border: 2px solid #455560;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;

}
.finishOption.selected {
    border-color: #FFF;
}
.finishOption.finishMaple {
    background-image: url("../img/Maple.png");
}
.finishOption.finishElm {
    background-image: url("../img/Elm.png");
}

#reset {
	display:inline-block;
	background-color:#dd3333;
	border-radius: 0.25em;
	border: none;
    color:#FFF;
    padding: 0.625em 2em;
    margin: 1em 0 0 0;
    font-size: 2vh;
}

#itemPicker {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 20px 50vw 0 20px;
    box-sizing: border-box;
    white-space: nowrap;
    scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);
}

#itemPicker::-webkit-scrollbar {
    width: 0;
    background: rgba(0,0,0,0);
}

#itemPicker .item {
    display: inline-block;
    height: 66%;
    vertical-align: bottom;
    padding: 0 10px;
}

#itemPicker .item.hidden {
    display: none;
}

#itemPicker .item img {
    height: 100%;
    width: auto;
}
#itemPicker .item .itemName {
    display: block;
}

#itemRow {
    position: absolute;
    top: calc(10% + 66px);
    right: 0;
    bottom: calc(18% - 20px);
    left: 0;
    white-space: nowrap;
    overflow: hidden;
}

#itemFreePlace {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50%;
    pointer-events: none;
}


#itemFreePlace div {
    pointer-events: all;
}

.draggableItem {
    position: absolute;
    top: auto !important; /* Working around a JS rounding bug in jQuery UI */
    bottom: 0;
    height: auto;
    width: auto;
    animation: addItemHighlight 0.5s forwards;
}

    .draggableItem img {
        max-height: 100%;
        max-width: 100%;
    }

.draggableFloatingItem {
    position: absolute;
    top: 20%;
    height: auto;
    width: auto;
    animation: addItemHighlight 0.2s forwards;
}
    .draggableFloatingItem img {
        max-height: 100%;
        max-width: 100%;
    }

    .draggableItem.showDeleteOption::before,
    .draggableFloatingItem.showDeleteOption::before {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url("../img/RemoveItem.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50px;
        border: 2px solid #dd3333;
    }

@keyframes addItemHighlight {
    0% {
        filter: brightness(1);
    }
    20%{
        filter: brightness(1.4);
    }
    100% {
        filter: brightness(1);
    }
}