html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    #SentryMapDiv.WithSentryTitle {
        position: absolute;
        height: calc(50% - 52px);
        width: 100%;
        top: 104px;
        left: 0px;
    }

    #MapInfoDiv.WithSentryTitle {
        position: absolute;
        height: calc(50% - 52px);
        width: 100%;
        bottom: 0px;
        right: 0px;
    }

    #SentryMapDiv.WithoutSentryTitle {
        position: absolute;
        height: 50%;
        width: 100%;
        top: 0px;
        left: 0px;
    }

    #MapInfoDiv.WithoutSentryTitle {
        position: absolute;
        height: 50%;
        width: 100%;
        bottom: 0px;
        right: 0px;
    }

    #SentryMapDiv.WithTitleNonSplit {
        position: absolute;
        height: calc(100% - 104px);
        width: 100%;
        top: 104px;
        left: 0px;
    }

    #SentryMapDiv.WithoutTitleNonSplit {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    #SentryMapDiv.WithSentryTitle {
        position: absolute;
        height: calc(100% - 104px);
        width: 50%;
        top: 104px;
        left: 0px;
    }

    #MapInfoDiv.WithSentryTitle {
        position: absolute;
        height: calc(100% - 104px);
        width: 50%;
        top: 104px;
        right: 0px;
    }

    #SentryMapDiv.WithoutSentryTitle {
        position: absolute;
        height: 100%;
        width: 50%;
        top: 0px;
        left: 0px;
    }

    #MapInfoDiv.WithoutSentryTitle {
        position: absolute;
        height: 100%;
        width: 50%;
        top: 0px;
        right: 0px;
    }

    #SentryMapDiv.WithTitleNonSplit {
        position: absolute;
        height: calc(100% - 104px);
        width: 100%;
        top: 104px;
        left: 0px;
    }

    #SentryMapDiv.WithoutTitleNonSplit {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
    }
}

#wrapper > #content {
    height: 100vh;
    padding: 0px;
}
.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    top: 5px;
}