.ogCenterIcon {
    height: 12px;
    width: 12px;
    margin-bottom: -3.5px;
    margin-right: -7.5px;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

.ogHandPoiner {
    cursor: pointer;
}

.defaultText {
    position: absolute;
    font: 16px;
    font-family: Consolas, monaco, monospace;
    z-index: 1000;
    top: 0px;
    left: 0px;
    color: white;
}

#ogShowFpsControl {
    color: red;
}

.ogGrabbingPoiner {
    cursor: grabbing !important;
}

.ogViewport {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    background-color: black;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    overflow: hidden;
}


.ogAttribution {
    background: rgba(255, 255, 255, 0.8);
    text-align: right;
    bottom: 0;
    right: 0;
    position: absolute;
    height: 20px;
}

.ogAttribution img {
    max-height: 2em;
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.ogAttribution ul {
    font-size: .7rem;
    color: black;
    /*text-shadow: 0 0 2px #fff;*/
    margin: 0;
    padding: 1px 0px 1px 0px;
    line-height: 1.375em;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

.ogAttribution li {
    display: inline;
    list-style: none;
    line-height: inherit;
    margin-left: 5px;
    margin-right: 5px;
}

.ogZoomControl {
    background-clip: padding-box;
    height: 70px;
    width: 40px;
    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
    z-index: 0;
    position: absolute;
    outline: none;
    cursor: pointer;
    bottom: 65px;
    right: 12px;
    background-color: rgba(64, 59, 59, 0.85);
    border-radius: 2px;
}

.ogZoomButton {
    z-Index: 50000;
    width: 100%;
    height: 50%;
    border: none;
    background-size: 15px !important;
    background-position: 12px 10px !important;
    cursor: pointer;
    outline: none;
}

.ogZoomIn {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAClSURBVEhL7daxDcQwDAPArPYbZFd7kGzzpWIFfiCmSbjIK5WKK0IIYhMB3szsVTSMRMNINIxEQ6XW+iml7HeesVmFhkorOBoDB5tVaKj4cijLwgkNFV8OZVk4GT76nflS5dtgoWds9oJ3OhS2AT9mXPjUfu/Iwn/Qha//NCt9CRbm4Q9oqPhyKMvCCQ0VXw5lsYX9Tq/H0w/e2QoNI9EwEg3j2HYC0DJ34KKb/uIAAAAASUVORK5CYII=) top left no-repeat;
}

.ogZoomOut {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAABxSURBVEhL7dKxDcAgDAVRVssG7GoGyUYO6UC6dD6qFK/ghPgNLTOPwmjCaMJowmjCaMJowmjCaMJowmjaDmOMKyLuSu+b68Y2OC/0KYv1deMfrPA9ePzTnIDRhNGE0YTRhNGE0YTRhNGE0YTRhNGT7QHh3Hk0K/0NYAAAAABJRU5ErkJggg==) top left no-repeat;
}

@media (hover: hover) {
    .ogZoomIn:hover {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAJsSURBVEhLxda7ihVBEMbxdb3fQEVEMTFSMTDRSBB8AGONNDY29BkMFd/PQPCCweYyfr9hapjT9roHXM80/GG2Ll/11FT3nr1hGLblxMR+ONnAVv5e7h90jR2q4KlwNpwPFyY8s/HVBnoaG3SNDVX0TLgUroWb4faEZzY+MVsV7xobCJ0Ol8OtcDc8Ck8mPLPxiRErp6c10zUusHPfUDtvhAfhbXgfPk54ZuMTI1bOX9+6a1wg2bfzJnfC0/A5tIuNT4xYOf9UuNp8NdwPz8OX0C42PjFij2x3z2inhZaZ2OvhYXgZvoZ2sfGJESun2l1s1Fn+wWmXErTKrs8F02pwHofX4XtoFxufGLFy5NKgRZP2vIG2qEDD4TtdCXZfk/wsvAk/QrvY+MTUhMulQYtmtX8svizqDAoymYbkXtA6x4WgVr4LP0O72PjEiJUjlwYtmrTnc16FteNicBk4FibUsLwIr4K3IfwpHIR2sfGJEStHLg1aNGmrMU68wjVAbh9tciYdD5NqaL4FrfRWCvwK7WLjEyNWjlwatGjSVkOtfYXtwDewIy1yIRz3oklbjfGCqcIue/euK/BDOO5Fk7Yaaq1feJVWrzZcqx2n1S6QZfGdXplt8Z3+k1jCWdTg2b3WaaWhaRcbnxixcuQutTbqbPzRodq/kx8CS+xUq3wnQ2JCHY92sfGJETtObuhpjnSNCyRrmeEwmY6FM+lC+K8/9lDt9iY14Y6LKxCea5LFHNlmdI0Ndk7IGTStbh+XgXsXntn45nMaelozXWOHKu7bmVjtdNnDMxvfVkXRNR4CwdqAb7ikCm5VdBiGvd+wSIGUtsOkBQAAAABJRU5ErkJggg==) top left no-repeat;
    }
}

@media (hover: hover) {
    .ogZoomOut:hover {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAE7SURBVEhLxdXBSgJRGMVx0yxShCiJwI0rBYkM3AW9QVsXok/hc7jsCV0E1kOM5y/duHP5kHGy7w78FvN57znD6IyNoijquEhYa44yhx7MoQdz6MEcejCHHsyhB2uYPirNmtKcUk98EkpaciltufojMsgiM1xMqTiUsvBGenIrd3Iv/ROxh71kkEUm2b/lcSlXyKIHGcpYnuRZpvJSEWvZw14yyCKTbDoO5aGY29GVR5nIm7zLXBaylFVFrGUPe8kgi0yy6aDrUMz9vxZuzUjWspVP2cnXj++Kwnr2kkEWmWTTQVeTYq6A74ArmslGzn2QSTYddLVCcUcG8iofcu6DTLLpoCt/cZZbne3Hle1xyvYCictdX5lpueufRIwPY2yoI80p9ZROPJlDD+bQgzn0YA49mEMP5vD/FY09SuYbVKRjctAAAAAASUVORK5CYII=) top left no-repeat;
    }
}

/* =============================== */
/*         MENU V-BAR STYLING      */
/* =============================== */

.og-menu-bar-vertical {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
    background-color: rgba(64, 59, 59, 0.85);
    border-radius: 2px;
    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
    z-index: 0;
}


/* =============================== */
/*         MENU ΒΤΝ STYLING        */
/*         General Settings        */
/* =============================== */

/* All buttons have this class + OFF if they are OFF */
.og-menu-btn {
    height: 40px;
    width: 40px;
    position: absolute;
    outline: none;
    cursor: pointer;
    z-index: 1;

}

/* All buttons have a div inside to hold the background base64 image */
.og-menu-btn > div {
    width: 40px;
    height: 40px;
    background-size: 24px !important;
    background-position: 8px 8px !important;
    filter: invert(95%) drop-shadow(4px 4px 3px black);
}

.og-menu-btn.og-OFF {
    border: none;
}

.og-menu-btn.og-OFF > div {
    filter: invert(75%)
}

.og-menu-btn.og-OFF > div:hover {
    filter: invert(100%)
}

.og-hide {
    display: none;
}

.og-dialog {
    overflow: auto;
    position: absolute;
    right: 46px;
    width: 17em;
    border-radius: 4px;
    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
    background-color: rgba(64, 59, 59, 0.85);
    z-index: 25000;
    padding: 0px;
    margin: 0px;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

}

/* =============================== */
/* 1 - LAYER SWITCHER */
#og-layer-switcher-menu-btn {
    top: 12px;
    right: 12px;
}

#og-layer-switcher-menu-btn > div {
    background: url('data:image/png;base64,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') top left no-repeat
}

.og-layer-switcher.og-dialog {
    top: 32px;
    max-height: calc(100% - 100px);
}

.og-layer-container {
    position: relative;
    color: white;
    margin: 0px; /* I want the parent div to have no space around childer to click into */
    padding: 12px;
    font-size: 14px;
}

.og-layer-container > div:first-child {
    margin-top: 8px;
}

.og-layer-record {
}

.og-layer-record > input {
    position: relative;
    vertical-align: middle;
    height: 14px;
    width: 14px;
    padding: 0px;
    margin: 0px;
    accent-color: #705affee;
    cursor: pointer;
}

.og-layer-record > span {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 16px;
    height: 16px;
    font-size: 1em;
    cursor: pointer;
    padding-left: 8px;
    margin: 0px;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.og-layer-record-drop-zone {
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 15px;
    background-color: rgba(136, 136, 136, 0);

}

.og-layer-record-drop-zone.og-drag-over {
    background-color: rgba(0, 0, 0, 0.3);
}

.og-center-icon.og-dragging {
    color: #705affee;
}


/* =============================== */
/* GEO IMAGE DRAGGER */

/* Just set position and background url */

#og-geo-image-dragger-menu-btn {
    top: 112px;
    right: 12px;
}

#og-geo-image-dragger-menu-btn > div {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIuSURBVHgB7ZjvVcIwFMWvHr9bN4gTyAZ2A92AOIFu4Ai4AWygToAbiBNQJwAnwDz6QkNs/tgAhXPyO+eeQJuS+5q8lD4gk8lkMpkTZ6S0Uhor3SsVOF7IG3kkrwul6Rlq8zYfSl/ckpboB6E0UCqVbrjdwhWADQUwQx3UXOmbj1WsVJMFG73kVnBbePysz5kBPLBJuvDO+KFYKqv1GQYbiF2uZPiD9Y56JmgZ4cLqOGNNjMEGrBv+LhwDC6vtgp5V8vBt+KlcF1zAT8V6s45TAMJoaeqv+Ptl4Dd/2OjC+Fyx/p1roQBc6JzonXOcODmAHUG584w6L/RDVcRevGJJ9McEjQ+tqae/1P2OYQbo7g9bjpeot28vhwiA/rsIz/mi47k1+w6A1vUry2WmQvuDio5FbdX7yoER4tc0LZW50XcR8CONvjsPgO70FH+TkjTyXCdQLzeJ8NKRSAxgiPbEE9i+k216RjoSCQEMjWvGaBK0RLOPh/SENCQ6BjBoMUl3/AVxxk0N0R2JDgG0mU/RAhH7fCiA2G1UwL8VdkEnu0ACMQGIXQzkIDmIUAAC+zNvj/GIjuO4csB+uBxKn2hKPK4XewlHElPnEu4HUZ+aG9psJmZVYlOqOCVi60IhlmheyKtA38JSErEv9RWaUsecWzqmKwopCDTBUOnmmltd7PLSNgO64vCGuhI3Q3+lRR1EqXSLltIiMUWdFGPucOx5QLvTBM2OlclkMpnM6fILH2AieAQ9pX8AAAAASUVORK5CYII=') top left no-repeat
}

/* =============================== */
.displayNone {
    display: none;
}

.displayBlock {
    display: block;
}

/* =============================== */
/* RULER */

/* Just set position and background url */
#og-ruler-menu-btn {
    top: 160px;
    right: 12px;
    box-shadow: 0px 1px 4px rgb(15 15 15 / 17%);
    background-color: rgba(64, 59, 59, 0.85);
    border-radius: 2px;
}

#og-ruler-menu-btn > div {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJVSURBVHgB1ZhrdcMwDEbvGBSCIRSCIJRBx2BlUDNYh2BlMAiFEAiBMAhbfDqfuo78yKNp9p2jH3EcW3GuJTmwLklnTWc/nR35R9p2duHqeGjCyrXp7J2+494urFhvnX2Tdt7bnpVJOmtJO/ytXG9YgQw6597c5hWuzsYvYXminENH8it+iJ6xSh/DE1Ti/ISOh2uLMVt0Qwt5XNw9UzHG4mHVdPZF2vF2oBPxIjQ8SJ7zFC6u3TJcW2WsAzNrRz4spjiv1YkHhVWhzLkwXVpYfWeCSunffY0d07SJxjgo82wZoRrOp35e8zdWHPsbJoRVIc/5F/MmmpPipDAirBoez7kvpW3QFnIvQVu8iMmwWuJcS/9jJejRxQZOHkmj21Mu/c/F+Wt07ZPfZ9ReKrdt2Fnob5QYF8MwCdcFCeWRDL+g4R4ZwwB0S50bxnGucexfKodMbtVVdJshnQfKooc8v2BhQjpSxkVFV+s8Nf17hZFjH7SbYC7XPgndM/2Vn+K8cJ8ld+SRSVlLJbpzHuFeySNjqatcB6NrlUEMw1Wzccec0KombumzV5LDw/FrgjZfeLXcnJGC426uUcVZKFEGlsIzWs0C91HmzAyc1+pCPweE2kQTppDZkd+gc2X0nnJHOMON4VTN4iTkK9dPHvyjKneES9Us3uFSPBcWUO4IZ9DL3DN5XPYsLO0IZ/7uWW4rukTlOloxxz7SaF9Iw8XwZAl9xxwKF1bAea1yzsa4zP7DaQ4Zys5bVvL/PiXLijmvUVwnzZ7+p+ilsp/hWio71j9YkX4Byx4UVaJRe+4AAAAASUVORK5CYII=') top left no-repeat
}

.og-ruler.og-dialog {
    height: 80px;
    top: 174px;
}

/* =============================== */

.ogConsole {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 70%;
    overflow: auto;
    font-size: 12px;
    font-family: Tahoma;
    background-color: rgba(130, 130, 130, 0.49);
    color: white;
    z-index: 100000000;
    pointer-events: none;
}

.ogConsole-text {
    padding: 7px;
    overflow: hidden;
}

.ogConsole-error {
    color: red;
}

.ogConsole-warning {
    color: yellow;
}

/* Is this class used elsewhere??? */
/* if not we can delete it */

.ogViewExtentBtn {
    margin-left: 12px;
    height: 24px;
    width: 24px;
    scale: 70%;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYEAQAAAAa7ikwAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5ggMBTM4rM25AwAAAAJiS0dEAACqjSMyAAABsUlEQVRIx81WWYrCQBAVg4Iwbp8ud5DoYRRBxPMoouiPegQVPYp6Azdc/ly++01XKkmPksQ4ZmAKAr3V0u9VVScU8ikQkQhwuRifHIeCFiAWgy2xWHCGRSIBVKtAt6scdDrGmtz7IOJUyjAk7ne4Ce2JdhsimXzTeKkE7PfK0vEIjMdqTuPTSc23W6BY9G/cjvpwgKjVmOBHDnitXmfnJLcboOs+YNntWGGxADIZtRcOQ4xGEMMhjdV6Ngssl6yz2XjywuSZkf8w/vrW5MS8iWi13LPFgkbC8n5SEFwmVOLry+EApaJJ6C8KCSIaVcRXKk8FlE4D/T5vzmY81zT/0Wsa68znbKPX47ksSC5/JxkM/EdPxDvJ5RKMA3nWw8EfQxQsyecz2yiXvdNUptz7adposO716pim7EQ2Lrv3ZLP+o8/n7RQVzabHwWSSGxcJlb9y4t4qcjlgtWKd9RoiHn9x1WKRG5d1E1mhBr7PzY7WCBaruAiaQsEnnrpuNC5biLzJRL0D06ki1Ircp/FH0lstdRsnoaibzZeweDuKx6m3qE5rPZnlsmu2/KtH/9Pflm+sYR/yIsaCAQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wOC0xMlQwNTo1MTo1NiswMDowMIPhE+YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDgtMTJUMDU6NTE6NTYrMDA6MDDyvKtaAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIyLTA4LTEyVDA1OjUxOjU2KzAwOjAwpamKhQAAAABJRU5ErkJggg==) center center no-repeat;

}

.ogViewExtentBtn:hover {
    border-radius: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYEAQAAAAa7ikwAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5ggMBTM4rM25AwAAAAJiS0dEAACqjSMyAAABsUlEQVRIx81WWYrCQBAVg4Iwbp8ud5DoYRRBxPMoouiPegQVPYp6Azdc/ly++01XKkmPksQ4ZmAKAr3V0u9VVScU8ikQkQhwuRifHIeCFiAWgy2xWHCGRSIBVKtAt6scdDrGmtz7IOJUyjAk7ne4Ce2JdhsimXzTeKkE7PfK0vEIjMdqTuPTSc23W6BY9G/cjvpwgKjVmOBHDnitXmfnJLcboOs+YNntWGGxADIZtRcOQ4xGEMMhjdV6Ngssl6yz2XjywuSZkf8w/vrW5MS8iWi13LPFgkbC8n5SEFwmVOLry+EApaJJ6C8KCSIaVcRXKk8FlE4D/T5vzmY81zT/0Wsa68znbKPX47ksSC5/JxkM/EdPxDvJ5RKMA3nWw8EfQxQsyecz2yiXvdNUptz7adposO716pim7EQ2Lrv3ZLP+o8/n7RQVzabHwWSSGxcJlb9y4t4qcjlgtWKd9RoiHn9x1WKRG5d1E1mhBr7PzY7WCBaruAiaQsEnnrpuNC5biLzJRL0D06ki1Ircp/FH0lstdRsnoaibzZeweDuKx6m3qE5rPZnlsmu2/KtH/9Pflm+sYR/yIsaCAQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wOC0xMlQwNTo1MTo1NiswMDowMIPhE+YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDgtMTJUMDU6NTE6NTYrMDA6MDDyvKtaAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIyLTA4LTEyVDA1OjUxOjU2KzAwOjAwpamKhQAAAABJRU5ErkJggg==) center center no-repeat, #705affee;
}


/**
     *DebugInfo
     */
.og-debug-info {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-family: arial;
    font-size: 12px;
    width: 346px;
    text-shadow: 0px 0px 3px #616161;
    padding: 10px;
    pointer-events: none;
    transform: scale(1.0);
    transform-origin: top left;
    background-color: rgb(55 55 55 / 63%);
}

.og-debug-info .og-watch-line {
    width: 100%;
    padding-bottom: 5px;
    display: inline-block;
}

.og-watch-line .og-watch-label {
    float: left;
    color: #cecece;
}

.og-watch-line .og-watch-value {
    float: left;
    margin-left: 15px;
}

.og-popup {
    position: absolute;
    text-align: center;
    bottom: -2px;
}

.og-popup-content-wrapper,
.og-popup-tip {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.og-popup-content-wrapper {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    padding: 1px;
    text-align: left;
    border-radius: 8px;
    min-width: 30px;
    min-height: 17px;
}

.og-popup-content {
    margin: 20px 5px 5px;
    line-height: 1.4;
}

.og-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
    bottom: -19px;
}

.og-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.og-popup-toolbar {
    position: absolute;
    top: 3px;
    right: 2px;
    display: inline-block;
}

.og-popup-btn {
    width: 15px;
    height: 15px;
    cursor: pointer;
    float: right;
}

.og-popup-btn:hover {
    color: #2e9be7;
}

.og-popup-title {
    position: absolute;
    left: 5px;
    top: 3px;
    font-size: 14px;
}

.og-scale-container {
    position: absolute;
    right: 320px;
    bottom: 30px;
}

.og-scale-label {
    position: relative;
    color: white;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    text-align: center;
}

.og-scale-ruler {
    position: relative;
    height: 7px;
    border-bottom: 2px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.og-compass-button {
    text-align: center;
    clear: none;
    cursor: pointer;
    background-clip: padding-box;
    height: 40px;
    width: 40px;
    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
    z-index: 0;
    position: absolute;
    outline: none;
    bottom: 144px;
    right: 12px;
    background-color: rgba(64, 59, 59, 0.85);
    border-radius: 2px;
}

/*
    Lighting control
*/
.og-lighing {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 0px 12px 12px;
    width: 350px;
    overflow: auto;
    height: calc(100% - 30px);
    color: #b6b6b6;
    background-color: #222222;
    font-family: monospace;
    font-size: 14px;
    z-index: 10000;
    overflow-x: hidden;
}

.og-lighing .og-color-options {
}

.og-lighing .og-caption {
    width: 100%;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
}

.og-lighing .og-option {
    width: 100%;
    position: relative;
    display: inline-block;
    padding-bottom: 7px;
}

.og-lighing .og-label {
    float: left;
}

.og-lighing .og-slider {
    float: left;
    width: calc(100% - 85px);
    margin-left: 10px;
    margin-right: 10px;
}

.og-lighing .og-slider input {
    width: 100%;
    position: relative;
}

.og-lighing .og-value {
    float: left;
    width: 50px;
}

.og-lighing #layers {
    font-size: 16px;
    color: #e8e8e8;
    background-color: #5e5e5e;
    font-family: monospace;
    padding: 5px;
    width: 240px;
    margin-left: 21px;
}


.og-coordinates {
    position: absolute;
    bottom: 25px;
    right: 12px;
    float: right;
    text-align: right;
    overflow: hidden;
    font-family: monospace;
    font-size: 1.0em;
    cursor: pointer;
    float: left;
    background-color: rgba(64, 59, 59, 0.85);
    color: white;
    padding: 3px;
}

.og-coordinates div {
    float: left;
}

.og-lat-side,
.og-lon-side {
    width: 10px;
    padding-right: 3px;
}

.og-lat-val,
.og-lon-val {
    width: 65px;
    padding-right: 3px;
    text-align: left;
    text-overflow: unset;
    overflow: hidden;
}

.og-height {
    width: 36px;
    text-align: right;
    text-overflow: ellipsis;
    padding-left: 3px;
    overflow: hidden;
}

.og-units-height {
    width: 15px;
    text-align: left;
    padding-left: 3px;
}

.og-center-icon {
    height: 12px;
    width: 12px;
    margin-bottom: -3.5px;
    margin-right: -7.5px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    pointer-events: none;
}