body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    position: fixed;
    top: 0;
    width: 100vw;
}

a:link {
    color: olive;
    cursor: pointer;
}

.jqx-widget-content {
    font-size: 11px;
}


hr {
    border: solid thin darkgrey;
}

.container {
    max-width: none;   /*to neutralize bootstrap b*s */
}

.authentication {
    position: relative;
    top: 10vh;
    left: 100px;
}

.dragHandle {
    height: 5px;
    position: absolute;
    top: 0;
    left: calc(50% - 13px);
    width: 26px;
    cursor: grabbing;
    border-top: solid medium lightgrey;
    padding-top: 20px;
}

header nav .selected {
    font-weight: bold;
    background-color: #eee;
}

@media (max-width: 1100px) {

    #entrance,
    #mapContainer {
        display: none;
    }

    #smallUI {
        display: block;
    }

}

@media (min-width: 1200px) {
    .privacy ul {
        width: 60%;
    }
}

.privacy li {

    margin-top: 20px;
}

@media (min-width: 1600px)
{
    .container {
        min-width: 1600px;
    }

}

.cptr { cursor: pointer; }
.loadHidden { display: none; }
.relative { position: relative; }
.flex { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.fwb { font-weight: bold; }
.taCenter { text-align: center; }
.taRight { text-align: right; }
.fss { font-size: small; }
.taRight { text-align: right; }
.bLightGrey { border: solid thin lightgrey; }
.bgWhite { background-color: white; }
.hFull { height: 100%; }
.h8 { height: 8px; }
.h34 { height: 34px; }
.h45 { height: 45px; }
.h50 { height: 50px; }
.h80 { height: 80px; }
.h180 { height: 180px; }
.wFull { width: 100%; }
.wHalf { width: 50%; }
.w25 { min-width: 25px; max-width: 25px; }
.w30 { min-width: 30px; max-width: 30px; }
.w40 { min-width: 40px; max-width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w80 { width: 80px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w180 { width: 180px; }
.w200 { width: 200px; }
.w210 { width: 210px; }
.w240 { width: 240px; }
.w250 { width: 250px; }
.w260 { width: 260px; }
.w300 { min-width: 300px; max-width: 300px; }
.mb5 { margin-bottom: 5px; }
.mb15 { margin-bottom: 15px; }
.mb25 { margin-bottom: 25px; }
.mb60 { margin-bottom: 60px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.pad2 { padding: 2px; }
.pb15 { padding-bottom: 15px; }

.noBorder { border: none; }

.align-items-center { align-items: center; }
.align-items-start { align-items: start; }
.space-between { justify-content: space-between; }
.justify-content-right { justify-content: right; }
.justify-content-center { justify-content: center; }
.justify-content-end {
    justify-content: end;
}
.justify-content-start {
    justify-content: start;
}

.footer .footerLink {
    position: relative;
}

.footer .footerLink .footerLinkLabel {
    cursor: pointer;
}

.footer .privacyStatement {
    position: absolute;
    left: 0;
    bottom: 40px;
    background-color: white;
    padding: 10px;
    border: solid thin lightgrey;
    width: 300px;
    white-space: normal;
    line-height: normal;
    font-size: small;
}

.footer .eMailForm {
    position: fixed;
    right: 40px;
    bottom: 40px;
    background-color: white;
    padding: 10px;
    border: solid thin lightgrey;
    width: 300px;
    white-space: normal;
    line-height: normal;
    font-size: small;
}

.sectionLabel {
    font-weight: bold;
    font-size: 1rem; 
}

.close {
    position: absolute;
    cursor: pointer;
    font-size: small;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.zrClose {
    color: #666666;
    font-weight: bold;
    text-align: center;
}

.errMsg {
    color: red;
}

.registeredUser {
    display: none;
}

.showMe {
    text-align: right;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: x-small;
    cursor: pointer;
    color: steelblue;
    font-weight: bold;
}

#mapContainer[data-user-name] .registeredUser { display: block; }

#mapContainer.hasRegions #opacityControl {
    visibility: visible;
}

#mapContainer:not(.hasRegions) #howToAddRegion {
    display: block;
    left: calc(50vw - 125px);
    top: calc(50vh - 100px);
}

#mapContainer #howToAddRegion {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border: solid thin lightgrey;
    text-align: center;
    width: 250px;
    padding: 25px;
    display: none;
    z-index: 300;
}

.dataPanels {
    height: calc(100% - 80px);
    position: absolute;
    top: 60px;
    left: 100px;
}

.mapPanel {

    z-index: 100;
    background-color: white;
    border: solid thin lightgrey;
    padding: 5px;
    height: 50%;
}


    .mapPanel .surfaceAreaUnits {
        font-size: 11px;
    }

.mapManagement {
    width: 300px;
}

    .mapManagement input {
        border: solid thin lightgrey;
    }

    .mapManagement .centerLat,
    .mapManagement .centerLng {
        border: none;
        background-color: #eee;
    }

        .mapManagement .mapSelector .maps {
            height: 25px;
            width: 150px;
        }

    .mapManagement .mapEditor {
        position: relative;
        border: solid thin darkgrey;
        padding: 10px;
    }

    .mapManagement .editorCommandBar {
        display: flex;
        align-items: center;
        justify-content: right;
    }

        .mapManagement .editorCommandBar .editorCommandBarCommand {
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto;
            cursor: pointer;
            height: 25px;
            width: 25px;
            border: none;
            margin: 0;
        }

.mapEditorSection {
}

.dataSelection input[type=number],
.dataSelection input[type=text] {
    border: solid thin lightgrey;
}

.dataSelection input[type=radio] {
    width: 30px;
}

.dataSelection label {
    width: 120px;
    margin: 0;
}

.dataSelection .columnHeader {
    width: 120px;
}

.dataSelection .columnNo {
    width: 50px;
}

.dataSelection .columnLetter {
}

.dataSelection input[type=number] {
    width: 50px;
    margin-right: 10px;
}

.dataSelection .fromThru {
    margin-right: 10px;
}

.btnInputFile {
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto;
    background-image: url(/Images/open-file-folder.png);
    cursor: pointer;
    height: 25px;
    width: 50px;
    border: none;
    margin: 0;
}

#legend { }

.zrContainer {
    position: relative;
    top: 56px;
    border: solid thin lightgrey;
    width: 100%;
    height: calc(100vh - 85px);
}
/*
    .mapContainer.blank #map,
    .mapContainer.blank #toolbox {
        display: none;
    }*/

#opacityControl {
    position: absolute;
    top: 60px;
    left: 1000px;
    visibility: hidden;
}

#opacityRendering {
    border: 2px solid white;
    background-image: linear-gradient(to right, transparent, darkblue);
    width: 300px;
    height: 30px;
}

#map {
    position: relative;
    height: 100%;
    width: 100%;
}

#mapSelector {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 100px;
    height: 40px;
    z-index: 10;
}

.getStarted {
    font-size: 24px;
    margin-top: 60px;
}

.beginMode {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

    .beginMode .msgInvalidLocation {
        position: absolute;
        top: 25px;
        left: 50px;
        width: 350px;
        color: red;
        font-size: 1rem;
        background-color: white;
        padding: 5px;
        border: solid thin lightgrey;
    }

    .beginMode .selectForUpload {
        position: relative;
        cursor: pointer;
    }

        .beginMode .selectForUpload .uploadSource {
            display: block;
            position: absolute;
            top: 30px;
            left: 20px;
            background-color: white;
            border: solid thin lightgrey;
            padding: 5px;
            font-size: 14px;
        }

        .beginMode .selectForUpload:not(.loggedIn) .uploadSource {
            display: none;
        }

            .beginMode .selectForUpload .uploadSource .fromDevice {
                padding: 5px 0;
                cursor: pointer;
                color: cornflowerblue;
            }

            .beginMode .selectForUpload .uploadSource .fromServer {
                display: flex;
                align-items: center;
                border-top: solid thin lightgrey;
                padding: 5px 0;
            }

#entrance {
    position: absolute;
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50vh - 300px);
}

    #entrance .appName {
        margin: 50px 0;
        font-size: 48px;
        text-align: center;
    }

    #entrance .appPurpose {
        padding: 10px 0;
        margin-bottom: 60px;
        font-size: xx-large;
        background-color: tan;
    }

    #entrance .appGraphic {
        display: flex;
        justify-content: center;
    }

    #entrance .appGraphic td {
        padding: 0 10px;
        text-align: center;
    }

.drawing {
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

    #entrance .drawing {
        height: 180px;
        width: 180px;
    }

#smallUI {
    position: absolute;
    width: 360px;
    left: calc(50vw - 180px);
    top: 20vh;
    font-size: 20px;
    line-height: 24px;
}

#smallUI p {
    text-align: center;
    margin: 15px 0;
}

#smallUI .drawing {
    height: 100px;
    width: 100px;
    background-size: contain;
}

    #entrance .appGraphic .zonedMap {
        background-image: url('/Images/zonedMap.png');
    }

    #entrance .appGraphic .plottedMap {
        background-image: url('/Images/plottedMap.png');
    }

    #entrance .appGraphic .unzonedList {
        background-image: url('/Images/unzonedAddresses.png');
    }

    #entrance .appGraphic .zonedList {
        background-image: url('/Images/zonedAddresses.png');
    }

    #entrance .appGraphic .roundedPlus {
        background-image: url('/Images/roundedPlus.png');
        width: 60px;
    }
    #entrance .appGraphic .roundedRightArrow {
        background-image: url('/Images/roundedRightArrow.png');
        width: 60px;
    }

#smallUI .appGraphic .zonedMap {
    background-image: url('/Images/zonedMap.png');
}

#smallUI .appGraphic .plottedMap {
    background-image: url('/Images/plottedMap.png');
}

#smallUI .appGraphic .unzonedList {
    background-image: url('/Images/unzonedAddresses.png');
}

#smallUI .appGraphic .zonedList {
    background-image: url('/Images/zonedAddresses.png');
}

#smallUI .appGraphic .roundedPlus {
    background-image: url('/Images/roundedPlus.png');
    width: 100px;
    height: 40px;
}

#smallUI .appGraphic .roundedRightArrow {
    background-image: url('/Images/roundedRightArrow.png');
    width: 100px;
    height: 40px;
    transform: rotate(90deg);
}

    .helpMe {
        background-image: url(/Images/questionMarkInCircle.png);
        min-width: 48px;
        height: 32px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
    }


@media (max-width: 280px) {

    #smallUI {
        width: 260px;
        left: calc(50vw - 130px);
        font-size: 16px;
        top: 15vh;
    }

        #smallUI .drawing {
            width: 80px;
            height: 80px;
        }
}

#entrance .go input {
    font-size: 18px;
    padding: 0 5px;
}



#entrance .visitor {
    display: flex;
    justify-content: space-between;
    border: solid medium lavender;
    padding: 10px 10px;
}


.addMap .firstMap {
    position: absolute;
    display: none;
    cursor: pointer;
    border: solid medium #4682b4;
    padding: 10px;
    width: 200px;
    top: 20px;
    left: 23px;
    background-color: white;
    z-index: 30;
}

#zoneMapper {
    padding: 5px;
    border: solid thin lightgrey;
    background-color: white;
    font-size: 11px;
    height: calc(50vh - 120px);
    min-width: 320px;
    min-height: 120px;
    z-index: 200;
}

    #zoneMapper .inputContainer {
        height: calc(100% - 50px);
        position: relative;
    }

    #zoneMapper #inputData{
        height: 100%;
        position: relative;
    }

    #zoneMapper .processContainer {
        display: flex;
        margin-left: 20px;
        border-left: solid thin lightgrey;
    }

    #zoneMapper .process {
        cursor: pointer;
        background-image: url(/Images/processing.png);
        background-position: center;
        background-repeat: no-repeat;
        width: 48px;
        height: 48px;
    }

    #zoneMapper .inputMode {
        width: 50%;
        cursor: pointer;
        height: 30px;
    }

    #zoneMapper .inputModeKeyboard {
        border-left: solid thin lightgrey;
        border-top: solid thin lightgrey;
        border-right: solid thin lightgrey;
        border-bottom: none;
    }

    #zoneMapper .inputModeExcel {
        border-bottom: solid thin lightgrey;
        border-left: none;
        border-top: none;
        border-right: none;
    }

    #zoneMapper.excelMode .inputModeKeyboard {
        border-bottom: solid thin lightgrey;
        border-left: none;
        border-top: none;
        border-right: none;
    }

    #zoneMapper.excelMode .inputModeExcel {
        border-left: solid thin lightgrey;
        border-top: solid thin lightgrey;
        border-right: solid thin lightgrey;
        border-bottom: none;
    }

    #zoneMapper #inputText {
        height: calc(100% - 33px);
        width: 240px;
        border-color: lightgrey;
        position: absolute;
        bottom: -2px; /* visually align bottom with #outputgrid */
    }

    #zoneMapper.excelMode #inputText {
        display: none;
    }

    #zoneMapper.excelMode #processExcel {
        display: block;
    }

    #processExcel input {
        border: solid thin lightgrey;
    }

    .iconExcel,
    .iconKeyboard {
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        height: 28px;
    }

    #zoneMapper .configureExcel {
        position: absolute;
        background-color: white;
        left: 140px;
        bottom: 0;
        width: 200px;
        height: 180px;
        border: solid thin lightgrey;
    }

#zoneMapper .downloadFormat {
    width: 50px;
    text-align: right;
    border: solid thin lightgrey;
    border-radius: 4px;
    margin: 0 10px 0 0;
    cursor: pointer;
    font-weight: bold;
    background-color: #eee;
    background-image: url(/Images/downloadSmall.png);
    background-size: auto;
    background-position-x: 5px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding: 3px;
}

#outputGrid {
    max-height: 100%;
}

.markerSvg {
    display: inline-block;
    height: 20px;
    width: 20px;
}

#toolbox {
    display: flex;
    align-items: center;
    top: 10px;
    left: 700px;
    border: solid thin #4682b4;
    background-color: white;
    padding: 5px;
    z-index: 10;
    margin-bottom: 15px;
}

.toolboxCommand {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    height: 35px;
    width: 35px;
    margin: 5px;
}

.toolboxCommand.active {
    /*border: solid medium darkred;*/
    background-color: bisque;
}

#toolbox .saveRegions {
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 36px;
    background-color: aqua;
    font-weight: bold;
    cursor: pointer;
}

    #mapsBody:not(.forUpdate) #toolbox .saveRegions {
        display: none;
    }

    .toolboxCommand.inactive {
        background-color: transparent;
    }

    .toolboxCommand.lasso {
        background-image: url('/Images/lassoPoint.png');
    }

    .toolboxCommand.addPoint {
        background-image: url('/Images/addPoint.png');
    }

    .toolboxCommand.deletePoint {
        background-image: url('/Images/deletePoint.png');
    }

    .toolboxCommand.undo {
        background-image: url('/Images/undo.png');
    }

    .toolboxCommand.redo {
        background-image: url('/Images/redo.png');
    }

    .toolboxCommand.snapTo {
        background-image: url('/Images/snapTo.png');
        cursor: none;
    }

    #toolbox .snapDistance {
        height: 28px; 
        width: 50px;
        font-size: small;
        border: solid thin lightgrey;
    }

    .iconQuestionMark {
        background-image: url('/Images/QuestionMark.png');
        position: relative;
    }

.iconQuestionMark_18px {
    background-image: url('/Images/QuestionMark_18px.png');
    position: relative;
}

.iconQuestionMarkSteel {
    background-image: url('/Images/QuestionMarkSteel.png');
    position: relative;
}

.helpVideo {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-style: italic;
}

.iconVideo {
    background-image: url('/Images/video.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 35px;
    width: 35px;
    margin-left: 10px;
}

#regions {
    border: solid thin lightgrey;
    padding: 5px;
    height: calc(100% - 130px);
}

#regions .header,
#pois .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#regions .commands {
    display: flex;
}

#regions .sortRegions {
    cursor: pointer;
    color: steelblue;
}

.command {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    height: 35px;
    width: 35px;
/*    margin: 5px;*/
}


.mapEditor .howTo {
}

    .mapEditor .howTo ul {
        padding-left: 0;
    }

    .mapEditor .howTo .task {
        min-width: 140px;
        margin-right: 20px;
        font-weight: bold;
    }

    .mapEditor .howTo .action {
        min-width: 350px;
    }

        .mapEditor .howTo .action::before {
            content: "\2b24";
            margin-right: 10px;
            font-size: 8px;
        }

        .mapEditor .howTo .action img {
            margin: 0 5px;
        }



.mapEditor .deleteMap {
    position: relative;
    background-image: url('/Images/RecycleBinSmall.png');
    width: 25px;
    margin: 0;
}

    .mapEditor .deleteMap .confirmationForm {
        position: absolute;
        background-color: white;
        border: solid medium darkred;
        top: 20px;
        left: 25px;
        padding: 10px;
        font-size: small;
        width: 300px;
        z-index: 20;
        cursor: auto;
    }

        .mapEditor .deleteMap .confirmationForm .confirm,
        .mapEditor .deleteMap .confirmationForm .abort {
            cursor: pointer;
            font-weight: bold;
            color: #4682b4;
        }

.howTo {
    font-size: small;
    position: absolute;
    border: solid medium lightgrey;
    background-color: white;
    padding: 10px;
    z-index: 100;
}

.iconPlusLarge {
    background-image: url('/Images/PlusLargeTransparent.png');
    position: relative;
}
.iconPlusLarge_18px {
    background-image: url('/Images/PlusLarge_18px.png');
}
.iconPlusLargeSteel {
    background-image: url('/Images/PlusLargeSteel.png');
    position: relative;
}
.iconPlusLargeSteel_18px {
    background-image: url('/Images/PlusLargeSteel_18px.png');
}
.iconQuestionMarkSteel_18px {
    background-image: url('/Images/QuestionMarkSteel_18px.png');
}
.iconDownload {
    background-image: url('/Images/download.png');
}
.iconUploadToDatabase {
    background-image: url('/Images/uploadToDatabase.png');
}
.iconOverlay {
    background-image: url('/Images/overlay.png');
}
.iconArrowCross {
    background-image: url('/Images/arrowCross.png');
}
.iconPin {
    background-image: url('/Images/pin.png');
}
.iconImage {
    background-image: url('/Images/landscape.png');
}

    #regions .addRegion .howTo {
        top: 15px;
        left: 50px;
        width: 250px;
    }

    #toolbox .howTo {
        top: 15px;
        left: 50px;
        width: 600px;
    }

        #toolbox .howTo .howToTitle {
            font-size: initial;
            font-weight: bold;
            color: #888;
            margin-top: 10px;
            margin-left: 18px;
        }

        #toolbox .howTo ul {
            padding-left: 20px;
        }

    #toolbox .howTo li {
        display: flex;
        margin-top: 20px;
    }

        #toolbox .howTo li .task {
            font-weight: bold;
            width: 180px;
            margin-right: 30px;
        }

        #toolbox .howTo li .action {
            width: 400px;
        }

        #toolbox .howTo li .action img {
            height: 17px;
        }

    .mapSelector .editMap {
        background-image: url('/Images/Pencil.png');
    }

.collapsed .selectInput {
    display: none;
}

.collapsed .expand {
    display: block;
}

.iconUpDown {
    background-image: url('/Images/UpDown.png');
}
.iconUpDown_18px {
    background-image: url('/Images/UpDown_18px.png');
}

.icon3Dots {
    background-image: url('/Images/3dots.png');
}

.plotAddresses {
    background-image: url('/Images/eyeglasses.png');
}

.iconExcel {
    background-image: url('/Images/Excel.png');
}

.iconKeyboard {
    background-image: url('/Images/keyboard.png');
}
.iconEyeOpened {
    background-image: url('/Images/eyeOpened.png');
}
.iconEyeClosed {
    background-image: url('/Images/eyeClosed.png');
}
.iconRecycleBinSmall {
    background-image: url('/Images/RecycleBinSmall.png');
}
.forEdit .mapEditor {
    display: block;
}
.addRegion.active {
    background-color: bisque;
}
#regions .save {
    background-image: url('/Images/Save.png');
}
#regions .restore {
    background-image: url('/Images/Restore.png');
}

#regions .locationCountHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: small;
    min-width: 60px;
    max-width: 60px;
}

    #regions .locationCountHeader .totalLocations {
        padding: 0 3px;
    }

.legend {
    height: calc(100% - 45px);
    overflow-y: auto;
    font-size: 11px;
    margin-right: 8px;
    margin-top: 8px;
}

.legendEntry {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    justify-content: space-between;
}

    .legendEntry .surfaceArea {
        width: 40px;
        margin-right: 20px;
        text-align: right;
    }

    .legendEntry .intersects {
        width: 40px;
        height: 25px;
        margin-right: 20px;
        background-image: url('/Images/warning.png');
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto;
    }

    .legendEntry .locationCount {
        width: 60px;
        text-align: center;
    }

    .legendEntry .fillColor {
        border: none;
        width: 50px;
        margin-right: 10px;
    }

    .legendEntry .name {
        border: none;
        background-color: transparent;
    }

#regions .regionSelected,
#regions .regionUnselected,
#regions .deleteRegion,
#regions .closeRegion,
.smallCommand,
.editPOI,
.deletePOI {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    height: 25px;
    width: 25px;
}

    .editPOI {
        background-image: url('/Images/region-selected.png');
    }

    .legendEntry .regionUnselected {
        background-image: url('/Images/region-unselected.png');
    }

    .legendEntry .regionSelected {
        background-image: url('/Images/region-selected.png');
    }

.legendEntry.selected .regionUnselected {
    display: none;
}

.legendEntry:not(.selected) .regionSelected {
    display: none;
}

        .legendEntry .deleteRegion,
        .deletePOI {
            background-image: url('/Images/RecycleBinSmall.png');
        }

#msgSnapTo {
    position: absolute;
    border: solid medium #4682b4;
    background-color: white;
    font-size: small;
    padding: 30px 10px 10px 10px;
    width: 400px;
    z-index: 10;
}

#msgSnapTo .close {
    top: 0;
}

    #msgSnapTo .setDontShow {
        font-size: x-small;
        cursor: pointer;
        font-weight: bold;
        color: darkblue;
    }

.jqx-dropdownlist-state-normal {
    border-color: #ddd !important;
    background-color: white;
}

    .jqx-dropdownlist-state-normal.inError {
        border-color: black !important;
    }

.jqx-listbox {
    border-color: #ddd !important;
}

.getStarted .subsection {
    margin-left: 60px;
    display: flex;
}

    .getStarted .subsection ul{
        padding-left:0;
    }

    .getStarted h3,
    .privacy h3 {
        font-weight: normal;
        margin-bottom: 40px;
    }

    .getStarted .subsection {
        margin-bottom: 20px;
    }

    .getStarted .subsection h4 {
        color: steelblue;
        font-size: 20px;
        min-width: 200px;
        max-width: 200px;
    }

    .getStarted .subsection .content {
        min-width: 200px;
        max-width: 70%;
        font-size: 16px;
    }

        .getStarted .toMaps {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-top: 35px;
        }

    .getStarted .toMaps h3{
        color: steelblue;
        margin: 0 30px;
    }

        .getStarted .toMaps h3 a {
            color: steelblue;
            font-weight: bold;
        }

        .ttMapCenterContent, .ttUploadFileContent {
            text-align: left;
        }

.ttContent .example {
    display: inline-block;
    background-color: lavender;
    padding: 0 5px;
}

.ttZoneMapperContent .zoning {
    display: flex;
    position: relative;
    padding: 10px 0;
}

.ttZoneMapperContent .direct {
    border-right: solid thin lightgrey;
}

.ttZoneMapperContent .iconZoning {
    width: 40px;
    border: solid thin lightgrey;
    margin-right: 20px; 
}

.ttToolbox {
    display: flex;
}

    .ttToolbox .ttContent {
        position: relative;
        text-align: left;
        width: 200px;
        margin-right: 10px;
    }

    .cmdIcon {
        display: inline-block;
        vertical-align: middle;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        height: 18px;
        width: 18px;
    }

    .cmdSpan {
        font-weight: bold;
        background-color: aqua;
        padding: 2px 5px;
    }

#videoContainer {
    align-items: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    border: solid medium steelblue;
    z-index: 1000;
    background-color: #12345677;
    right: 10%;
    padding: 5vh 0;
}

#videoContainer video {
    height: 90%;
    width: auto;
}

    #videoContainer .controls {
        display: flex;
        position: absolute;
        left: calc(50% - 58px);
        top: 0;
    }

    #videoContainer .btnPause_top,
    #videoContainer .btnPlay_top,
    #videoContainer .closeVideo {
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        cursor: pointer;
        height: 48px;
        width: 48px;
        z-index: 1000;
        background-color: white;
        border: solid medium lightgrey;
    }

    #videoContainer .btnPause_top {
        background-image: url('/Images/videoPause_36px.png');
    }

    #videoContainer .btnPlay_top {
        background-image: url('/Images/videoPlay_36px.png');
    }

    #videoContainer .closeVideo {
        background-image: url('/Images/Close.png');
    }

    #videoContainer.playing .btnPause_top {
        display: block;
    }

    #videoContainer.paused .btnPlay_top {
        display: block;
    }

    #videoContainer.ended .btnReplay {
        display: block;
    }

    #videoContainer.playing .btnPlay_top {
        display: none;
    }

    #videoContainer.playing .btnPause_top{
        display: block;
    }

    video::cue {
        background-color: darkgrey;
        color: steelblue;
        font-size: 28px;
    }

.videocaption {
    color: red;
}

/*.poiEditor {
    position: absolute;
    background-color: white;
    padding: 5px;
    border: solid medium steelblue;
    z-index: 10;
}

.poiEditor .poiMarkerLabel{
    width: 40px;
    height: 27px;
    text-align: center;
}

.poiLegendGroup .poiGroupName {
    margin: 12px 0;
    font-weight: bold;
}

.poiLegendGroup details summary {
    position: relative;
    height: 30px;
    border-bottom: solid thin lightgrey;
    margin-bottom: 5px;
}

    .poiLegendGroup details summary .poiLegendEntry {
        display: inline-flex;
        position: absolute;
        left: 0;
        top: 0;
    }

    .poiLegendGroup details summary .similar {
        position: absolute;
        right: 0;
        top: 0;
        font-weight: bold;
    }

.poiLegendEntry {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    margin-left: 35px;
    cursor: default;
}

    .poiLegendEntry .poiMarkerText {
        margin-right: 30px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border-radius: 50%;
    }

    .poiLegendEntry .managePOI {
        display: none;
    }

.poiLegendEntry.similarSet .managePOI {
    display: none;
}

.poiEditor .poiName {
    margin-top: 5px;
}

#poiGroupSelector {
    position: absolute;
    border: solid medium #4682b4;
    background-color: white;
    font-size: small;
    padding: 
        10px 50px 10px 10px;
    z-index: 10;
}

    #poiGroupSelector .close {
        top: 0;
    }

    #poiGroupSelector .poiGroup {
        font-weight: bold;
        cursor: pointer;
    }

.poiClusterInspector {
    position: absolute;
    border: solid medium steelblue;
    background-color: white;
    font-size: small;
    padding: 30px 10px 10px 10px;
    z-index: 10;
}

.poiClusterInspector .poiLegendEntry {
    margin: 2px 0;
}

    .poiClusterInspector .close {
        top: 0;
    }

    .poiClusterInspector .poiLegendEntry .poiMarkerText {
        margin-right: 15px;
    }

*/

#btnOverlays {
    position: relative;
}

    #btnOverlays #overlaysContainer {
        position: absolute;
        top: 35px;
        left: 40px;
        background-color: white;
        border: solid thin lightgrey;
        padding: 10px;
        cursor: default;
    }

#overlays {
    font-size: small;
    border-top: solid thin lightgrey;
    padding-top: 10px;
}

#overlays .overlayEntry {
    display: flex;
    align-items: center;
}

    #overlays .overlayEntry.hidden .hideOverlay {
        display: none;
    }
    #overlays .overlayEntry.hidden .showOverlay {
        display: block;
    }

#map .overlayHelper {
    position: absolute;
    z-index: 100;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

    #map .overlayHelper .freeze {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 400;
        background-color: #fffc;
    }

#map .geoName {
    position: absolute;
}

#storedMaps {
    display: flex;
    flex-wrap: wrap;
}

    #storedMaps .mapSummary, #storedMaps .newMap {
        position: relative;
        border: solid thin lightgrey;
        margin: 10px;
        padding: 5px;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-width: 360px;
        max-width: 360px;
        height: 240px;
    }

    #storedMaps .mapName {
        font-size: x-large;
        background-color: white;
        position: absolute;
        padding: 0 10px;
    }

.eMailForm {
    position: relative;
    width: 500px;
    font-size: 16px;
    font-family: 'Segoe UI';
}

    .eMailForm .tourDate {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

        .eMailForm .tourDate .tourSelect {
            width: 30px;
        }

        .eMailForm .tourDate .tourStart {
            width: 250px;
        }

        .eMailForm .tourDate label {
            margin-left: 10px;
        }

    .eMailForm .formData {
        border: solid thin lightgrey;
        margin: 10px 0;
    }

        .eMailForm .formData input,
        .eMailForm .formData textarea {
            width: 98%;
            padding: 5px;
            border: none;
            font-size: 16px;
            font-family: 'Segoe UI';
        }

        .eMailForm .formData #content {
            height: 150px;
        }

    .eMailForm .submit, .eMailForm .feedback {
        cursor: auto;
        background-color: lightgrey;
        padding: 10px;
        text-align: center;
    }

    .eMailForm .submitContainer.ready .submit {
        cursor: pointer;
        background-color: steelblue;
        font-weight: bold;
        color: white;
    }

    .eMailForm .submitContainer.submitted .submit {
        display: none;
    }

    .eMailForm .submitContainer.submitted .feedback {
        display: block;
    }

#aboutContent {
    z-index: 400;
    position: absolute;
    top: calc(50vh - 150px);
    left: calc(50vw - 250px);
    background-color: white;
    padding: 20px;
    border: solid medium lightgrey;
/*    height: 300px;*/
    width: 500px;
}

    #aboutContent .close {
        font-size: xx-large;
    }

.aboutSection {
}

.aboutTitle {
    color: steelblue;
    font-size: 18px;
    margin-bottom: 5px;
}

.aboutPara {
}

.aboutFeedback {
    font-size: small;
}

.aboutContact {
    cursor: pointer;
    color:#6c757d;
}

nav .language {
    cursor: pointer;
}