.room-draw-container {
    user-select: none;
}
#room-draw-container-inner{
    background-image: repeating-linear-gradient(0deg,transparent,transparent 19px,#CCC 19px,#CCC 20px),repeating-linear-gradient(-90deg,transparent,transparent 19px,#CCC 19px,#CCC 20px);
    background-size: 20px 20px;
    height: 550px;
    border: 1px solid #CCCCCC;
}
#creatorFrame{
    background-image: repeating-linear-gradient(0deg,transparent,transparent 19px,#CCC 19px,#CCC 20px),repeating-linear-gradient(-90deg,transparent,transparent 19px,#CCC 19px,#CCC 20px);
    background-size: 20px 20px;
    position:absolute;
    left:0;
    top:145px;
    width:930px;
    height:623px;

}

#creatorMenu{
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:250px;
    background:#2192db;
}

#creatorFooter{
    position: absolute;
    height:60px;
    width:621px;
    left:29px;
    top:553px;
    background: #dddddd;
}

#saveButton{
    font:14px robotoLight, sans-serif;
    width:100px;
    height:26px;
    position:absolute;
    top:12px;
    right:0;
    background:#2192db;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;
    padding-top: 10px;
}



#roomwalls{
    border:4px solid black;
    position:absolute;
    top:60px;
    left:60px;
    height:352px;
    width:532px;
    z-index: 64000;
    pointer-events: none;
}

.walldrag{
    width:12px;
    height:12px;
    position:absolute;
    background: #2192db;
    border-radius: 30px;
    border: 2px solid black;
    z-index: 65000;
    cursor: move;
    opacity: .6;
}
#wallLeftdrag{
    left:590px;
    top:232px;
}

#wallRightdrag{
    left:54px;
    top:232px;
}
#wallTopdrag{
    left:322px;
    top:54px;
}
#wallBottomdrag{
    left:322px;
    top:410px;
}


.machineholder{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events: none;
}

.machineArrowRight{
    margin:0;
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.machineArrowLeft{
    margin:0;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.machineArrowTop{
    margin:0;
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.machineArrowBottom{
    margin:0;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.machineNumber{
    position: absolute;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.machineNumberTop{
    position:absolute;
    top:0;
    left:0;
    padding-top:5%;
    width:100%;
    height: 50%;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.machineNumberTopWDcomb{
    position:absolute;
    top:0;
    left:0;
    padding-top:5%;
    width:100%;
    height: 45%;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.machineNumberBottom{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height: 50%;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.cardArrowLeft{
    margin:0;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.machineSingleDoorTop{
    position:absolute;
    top:0;
    left:0;
}

.machineSingleDoorBottom{
    position:absolute;
    top:100%;
    left:0;
}

.machineSingleDoorRight{
    position:absolute;
    top:0;
    left:100%;
}

.machineSingleDoorLeft{
    position:absolute;
    top:0;
    left:0;
}

.draw-tool-dryer{
    position:absolute;
    top:50px;
    left:90px;
    width:72px;
    height:56px;
    background: url('/static/images/Icon_Dryer_Draw_Tool.png');
}

.draw-tool-washer{
    position:absolute;
    top:48px;
    left:10px;
    width:72px;
    height:56px;
    background: url('/static/images/Icon_Washer_Draw_Tool.png');
    background-size:cover;
}

.draw-tool-upside-down{
    position:absolute;
    top:150px;
    left:0;
    white-space: nowrap;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
}

.draw-tool-large-table{
    position:absolute;
    top:230px;
    left:6px;
    width:95px;
    height:34px;
    background: url('/static/images/Icon_Table_Large_Sideview.png');
}

.draw-tool-small-table{
    position:absolute;
    top:230px;
    left:108px;
    width:57px;
    height:34px;
    background: url('/static/images/Icon_Table_Small_SideView.png');
}

.draw-tool-double-door{
    position:absolute;
    top:290px;
    left:11px;
    width:85px;
    height:78px;
    background: url('/static/images/Icon_Door_Double_SideView.png');
}

.draw-tool-door{
    position:absolute;
    top:290px;
    left:114px;
    width:43px;
    height:78px;
    background: url('/static/images/Icon_Door_Single_SideView.png');
}

.draw-tool-reader{
    position:absolute;
    top:400px;
    left:25px;
    width:40px;
    height:42px;
    background: url('/static/images/Icon_CardReader_Sideview.png');
}

.draw-tool-sink{
    position:absolute;
    top:390px;
    left:100px;
    width:46px;
    height:65px;
    background: url('/static/images/Icon_Sink_Sideview.png');
}

.draw-tool-text{
    position:absolute;
    width:150px;
    height:20px;
    text-align: left;
    font: 16px robotoLight, sans-serif;
    color: #ffffff;
    user-select: none;
}

#machinesText{
    top:15px;
    left:10px;
}
#accesoriesText{
    top: 200px;
    left:10px;
}

#save-button-draw{
    position:absolute;
    top:565px;
    left:590px;
    user-select: none;
}

#preview-button-draw{
    position:absolute;
    top:565px;
    left:650px;
    user-select: none;
}

.rotate-draw-tool-container{
    position:absolute;
    user-select:none;
    top:560px;
    left:90px;
    height:52px;
    width:75px;
    cursor: pointer;
}
.draw-tool-text{
    text-align:center;
    font-size:14px;
    color:#2192db;
    position:absolute;
    top:33px;
    height:20px;
    width:100%;
}

#rotate-tool-icon{
    position:absolute;
    top:0;
    left:calc(50% - 16px);
    height:32px;
    width:32px;
    background: url('/static/images/Icon_Rotate_DrawTool.png');
}

.scale-draw-tool-container{
    position:absolute;
    user-select:none;
    top:560px;
    left:200px;
    height:52px;
    width:64px;
}

.scale-tool-icon{
    position:absolute;
    top:0;
    left:0;
    height:32px;
    width:64px;
    background: url('/static/images/Icon_Zoom_DrawTool.png');
}

#scale-tool-plus-hitbox{
    position:absolute;
    top:0;
    height:32px;
    width:32px;
    left:33px;
    cursor: pointer;
}

#scale-tool-minus-hitbox{
    position:absolute;
    top:0;
    height:32px;
    width:32px;
    left:0;
    cursor: pointer;
}

.undo-draw-tool-container{
    position:absolute;
    user-select:none;
    top:560px;
    left:300px;
    height:52px;
    width:52px;
    cursor: pointer;
}

#undo-tool-icon{
    position:absolute;
    top:6px;
    left:15px;
    height:22px;
    width:22px;
    background: url('/static/images/Icon_UndoPoint_DrawTool.png');
}

.reset-draw-tool-container{
    position:absolute;
    user-select:none;
    top:560px;
    left:500px;
    height:52px;
    width:52px;
}

#reset-tool-icon{
    position:absolute;
    top:5px;
    left:17px;
    height:24px;
    width:19px;
    background: url('/static/images/Icon_Trashcan.png');
    cursor: pointer;
}

#viewer-container{
    position: absolute;
    right:0;
    top: 114px;
    background: #000000;
    width: 960px;
    height: 650px;
    visibility: hidden;
    margin:0;
}

#viewer-close{
    position:absolute;
    top:5px;
    left:922px;
}

#viewer-arrow-left,
#viewer-arrow-right {
    position:absolute;
    top:5%;
    padding: 10px;
    cursor: pointer;
}

#viewer-arrow-left {
    left:5%;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

#viewer-arrow-right {
    right:5%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

#roomCanvas{
    position:relative;
    left:0;
    top:0;
}

#machineLayer{
    position:absolute;
    left:0;
    top:0;
}

.machineWrapper{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

.tableImage{
    width:100%;
    height:100%;
}

.machine-active {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite;
    transform: translate3d(0, 0, 0);
}
@keyframes shake {
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-0.5px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(0.5px, 0, 0);
    }
}