.map-component {
    z-index: 1;
    height: 100%;
}

    .map-component.blankcanvas {
        visibility: visible;
        background-color: #A0A0A0;
        background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
        background-image: -webkit-linear-gradient(white 1px, transparent 1px), -webkit-linear-gradient(0, white 1px, transparent 1px), -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
        background-image: -moz-linear-gradient(white 1px, transparent 1px), -moz-linear-gradient(0, white 1px, transparent 1px), -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
        background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
        -pie-background: linear-gradient(white 1px, transparent 1px) -2px -2px / 80px, linear-gradient(90deg, white 1px, transparent 1px) -2px -2px / 80px, linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, #269;
        behavior: url(/pie/PIE.htc);
    }

    .map-component.blankcanvas > div > div:first-of-type {
        display:none;
    }

    .map-component.drawing {
        cursor: crosshair;
    }

    .map-component.gate-hover {
        cursor: pointer;
    }

.map-container {
    position: absolute;
    left: 0;
    top: 55px;
    right: 0;
    bottom: 0;
    background: #606060;
    z-index: 1;
    opacity: 0;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity linear 200ms;
    overflow: hidden;
}

    .map-container .draggable-deck-container {
        position: absolute;
        left: 0px;
        top: 0px;
        width: auto;
        height: auto;
        z-index: 99;
        cursor: move;
    }

        .map-container .draggable-deck-container .draggable-icon {
            background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTUwNywyNDlsLTgxLjMtNjYuMmMtNi40LTYuNC0xNy4zLTEuOS0xNy4zLDcuMnY0MC43aC0xMjd2LTEyN2g0MC43YzksMCwxMy41LTEwLjksNy4yLTE3LjNMMjYzLjMsNWMtNC00LTEwLjQtNC0xNC4zLDAgIGwtNjYuMiw4MS4zYy02LjQsNi40LTEuOSwxNy4zLDcuMiwxNy4zaDQwLjd2MTI3aC0xMjd2LTQwLjdjMC05LTEwLjktMTMuNS0xNy4zLTcuMkw1LDI0OC43Yy00LDQtNCwxMC40LDAsMTQuM2w4MS4zLDY2LjIgIGM2LjQsNi40LDE3LjMsMS45LDE3LjMtNy4ydi00MC43aDEyN3YxMjdoLTQwLjdjLTksMC0xMy41LDEwLjktNy4yLDE3LjNsNjUuOSw4MS4zYzQsNCwxMC40LDQsMTQuMywwbDY2LjItODEuMyAgYzYuNC02LjQsMS45LTE3LjMtNy4yLTE3LjNoLTQwLjd2LTEyN2gxMjdWMzIyYzAsOSwxMC45LDEzLjUsMTcuMyw3LjJsODEuMy02NS45QzUxMSwyNTkuMyw1MTEsMjUyLjksNTA3LDI0OXoiPjwvcGF0aD48L3N2Zz4=");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: auto 80%;
            background-color: rgba(0,0,0,.3);
            border-radius: 60px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 12px !important;
            min-width: 12px !important;
        }

    .map-container.show-xs {
        opacity: 1;
        -ms-user-select: initial;
        -moz-user-select: initial;
        -webkit-user-select: initial;
        user-select: initial;
    }

    .map-container .single-gate,
    .map-container .double-gate,
    .map-container .stairs {
        margin: -9px 0 0 -9px;
        position: absolute;
        z-index: 999;
    }

    .map-container .temp-label {
        background: #fff;
        color: #000;
        font-size: 14px;
        padding: 2px 6px;
        box-shadow: 1px 1px 0 0 rgba(0,0,0,0.25);
        position: absolute;
        z-index: 1001;
        display: inline-block;
    }

    .map-container .temp-label-light {
        /*background: rgba(255,255,255,0.6);*/
        background: rgba(255,247,223,0.3);
        color: #fff;
        font-weight: bold;
        text-shadow: -.75px -.75px 0 #000, .75px -.75px 0 #000, -.75px .75px 0 #000, .75px .75px 0 #000;
        font-size: 14px;
        padding: 2px 6px;
        box-shadow: 1px 1px 0 0 rgba(0,0,0,0.25);
        position: absolute;
        z-index: 1001;
        display: inline-block;
    }

    .map-container .temp-marker {
        background: #fff;
        border: 2px solid #ffcc00;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px; 
        border-radius: 50%;
        z-index: 1001;
        position: absolute;
    }

    .map-container .poweredBy {
        bottom: 10px;
        position: absolute;
        z-index: 1;
    }

    .map-container #mySalesman {
        left: 10px;
    }

    .map-container #beehive {
        right: 190px;
    }

    .map-container svg rect {
        fill-opacity: 1 !important;
    }

@media (min-width: 768px) {
    .map-container.show-sm {
        opacity: 1;
        -ms-user-select: initial;
        -moz-user-select: initial;
        -webkit-user-select: initial;
        user-select: initial;
        top: 66px;
        left: 400px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) {
    .map-container .poweredBy {
        height: 50px
    }

    .map-component.drawing > div:first-child {
        overflow: auto !important
    }

    .map-container {
        overflow: auto !important;
    }
}

@media (max-width: 440px) {
    .map-container .poweredBy {
        height: 35px
    }
}

@media (max-width: 365px) {
    .map-container .poweredBy {
        display: none;
    }
}

#map-drawing-geometry {
    background: url('images/home.png');
    background-repeat: no-repeat; 
    background-position: center; 
}

#map-drawing-geometry-deck {
    background: url('images/deck.png');
    background-repeat: no-repeat;
    background-position: center;
}