/* bootstrap overrides so it looks like the rest of the site */
body {
    font-size:16px;
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.navbar {
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    height: 60px;
    border: 0;
}
.container-fluid {
    padding: 5px 10px;
}
.navbar-brand {
    padding: 0 0 0 15px;
    line-height:50px;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -.1rem;
    position: absolute;
    white-space: nowrap;
}
.navbar-brand img {
    height: 50px;
    vertical-align: top;
    margin-left: -10px;
    max-width: none;
    display: inline-block;
}
.navbar-default, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-collapse {
    background-color: var(--color-header-background);
}
.navbar-default .navbar-toggle {
    border-color: var(--color-header-text);
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: var(--color-primary);
}
.navbar-default .navbar-nav > li > a {
    color: var(--color-header-text);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
    color: var(--color-header-text-hover);
}
.navbar-collapse {
    border-width: 0;
}
a, a.list-group-item, a.list-group-item:hover, a.list-group-item:focus {
    color: var(--color-primary);
}
a:hover, a:focus {
    color: var(--color-secondary);
}
.badge {
    background-color: var(--color-primary);
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-group.open .dropdown-toggle.btn-primary {
    background-color: var(--color-primary);
    border-color:color-mix(in oklab, var(--color-primary), black 5%);
}
.btn-primary:active, .btn-primary.active, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color:color-mix(in oklab, var(--color-primary), black 17%);
    border-color: color-mix(in oklab, var(--color-primary), black 30%);
}


.btn-lg {
    font-size:18px;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:370px;
    z-index:1;
}
nav.navbar {
    margin:0;
}
nav.navbar .container {
    position:relative;
}
#main {
    overflow:hidden;
    position:relative;
    padding:0;
    margin:0;
    flex-grow: 1;
}
#sidebar {
    position: absolute;
    top:0;
    right: 0;
    width: 370px;
    height: 100%;
    overflow: auto;
    z-index:2;
    background-color: #ffffff;
    transition: width 300ms;
    -webkit-transition: width 300ms;
}
#sidebar.loading {
    background: #ffffff url('/static/img/loader.gif') no-repeat center;
}
body:not(.map-enabled) #sidebar {
    width:100%;
}
#sidebar .content {
    width:100%;
    max-width:370px;
    padding:12px 12px 0;
    margin:auto;
}
#sidebar .content form>.form-group:last-child {
    margin-bottom:0;
    padding:0 0 12px;
    position:sticky;
    min-height:50px;
    bottom:0;
    background-color: #ffffff;
    box-shadow: 0 0 10px 10px #ffffff;
}
#sidebar .form-group-group {
    display: flex;
}
#sidebar .form-group-group .form-group {
    flex-grow: 1;
}
#sidebar .form-group-group .form-group:not(:last-child) {
    margin-right: 15px;
}
#sidebar form:not(.show-source-wizard) .source-wizard {
    display: none;
}
#noscript {
    font-weight:bold;
    color:red;
    position:absolute;
    font-size:14px;
    left:15px;
    top:30px;
}
body.mobileclient .nomobileclient {
    display:none;
}

/* sidebar contents */
#sidebar form.creation-lock [type=submit].btn.btn-primary,
#sidebar form.scan-lock [type=submit].btn.btn-primary {
    display:none;
}
#sidebar h3 {
    margin-top:3px;
}
#sidebar .content p:empty {
    margin-bottom:0;
}
a.list-group-item .badge {
    font-size:14px;
    font-weight:bold;
}
.itemtable td:first-child {
    padding-left:0;
}
.itemtable td:last-child {
    text-align:right;
    padding-right:0;
}
.itemtable tr.highlight td {
    background-color:#FFFFDD;
}
select option.highlight {
    text-decoration: underline;
    font-weight: bold;
}
.itemtable .item-group-header td {
    padding-top: 20px;
    font-size: 140%;
    line-height: 85%;
}
.cancel-btn {
    margin-right:8px;
}
#mapeditlist legend .btn {
    padding-left:6px;
    padding-right:6px;
}
legend {
    margin: 0;
}
#featuretype_dropdown_btn {
    cursor:pointer;
}
#start-drawing, #cancel-drawing {
    display:none;
    position: absolute;
    right: 8px;
    top: 8px;
}
[data-active-node] form button {
    margin-top: 5px;
}
[data-levels], [data-sublevels], #sidebar .nav, [data-modal-close] {
    display:none;
}
[data-modal-close] {
    font-size: 20px;
    line-height: 18px;
    padding: 5px 8px 4px;
}
form button.invisiblesubmit {
    overflow: visible;
    height: 0;
    width: 0;
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
}
#sidebar .content table.table.table-h-bordered td, #sidebar .content table.table.table-h-bordered th {
    border-color:#eeeeee;
}
.change-group tbody tr:last-child td {
    border-bottom:1px;
    border-bottom-style:solid;
}
.change-group .glyphicon.pull-right {
    margin-top: 3px;
}
.change-group tr th small {
    font-weight:normal;
}
.change-group > thead > tr > th {
    padding-left:0;
    padding-right:0;
}
.change-group tr th .btn.pull-right {
    margin-bottom: -3px;
}
.change-group tr td:first-child {
    width:23px;
    padding-right:0;
}
.changesettable td:first-child {
    padding-left:0;
    width:21px;
}
.changesettable td:last-child {
    text-align:right;
    padding-right:0;
}

/* Styles inside leaflet */
.leaflet-map-pane svg {
    z-index: auto;
}
.leaflet-control-layers-overlays label {
    margin-bottom:0;
}
.leaflet-control-layers-overlays input[type="checkbox"] {
    margin: 2px 0 0;
    top:2px;
}
.leaflet-container .leaflet-control-layers-expanded {
    min-width:75px;
}
.leaflet-overlay-pane .leaflet-interactive {
    cursor:inherit;
}
.leaflet-editable-drawing .leaflet-overlay-pane .leaflet-interactive, #map .leaflet-overlay-pane .c3nav-graph-space {
    cursor:crosshair;
}
#map .leaflet-overlay-pane .c3nav-highlight, #map .leaflet-overlay-pane .c3nav-graph-node,
#map .leaflet-overlay-pane .c3nav-graph-other-space {
    cursor:pointer;
}
.leaflet-overlay-pane .leaflet-image-layer {
    z-index:201;
}
.tooltip {
    font-size:16px;
}
h4 {
    margin-top:20px;
}

/* responsiveness */
#responsive_switch {
    display:none;
    padding:4px;
    background-color:#f8f8f8;
    border-width:0 0 3px;
    border-color:#e7e7e7;
    border-style:solid;
    height:34px;
    text-align:center;
}
@media (max-width: 767px) {
    #sidebar {
        transition: right 300ms;
        -webkit-transition: right 300ms;
        width:100vw;
    }
    #sidebar .content {
        max-width:500px;
    }
    body.show-map #sidebar {
        pointer-events: none;
        right:-100vw;
    }
    #map {
        transition: left 300ms;
        -webkit-transition: left 300ms;
        width:100vw;
    }
    body:not(.show-map) #map {
        left:-100vw;
    }

    #show_details {
        display:none;
    }
    body.show-map #show_details {
        display:block;
    }
    body.show-map #show_map {
        display:none;
    }
    .navbar-nav {
        margin:0;
    }
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    body.map-enabled #responsive_switch {
        display:block;
    }
}


/* leaftlet levels control */
.leaflet-control-levels {
    overflow:hidden;
}
.leaflet-control-sublevels {
    position:absolute;
}
.leaflet-control-levels a, .leaflet-control-levels a:hover {
    width: auto;
    font-size: 14px;
    padding: 0 7px;
    white-space: nowrap;
}
.leaflet-touch .leaflet-control-levels a, .leaflet-touch .leaflet-control-levels a:hover {
    width: auto;
    height:36px;
    line-height:37px;
    font-size: 14px;
    padding: 0 12px;
}
.leaflet-control-levels a, .leaflet-control-levels a:hover {
    opacity:0;
    margin-top:-26px;
}
.leaflet-touch .leaflet-control-levels a, .leaflet-touch .leaflet-control-levels a:hover {
    margin-top:-36px;
}
.leaflet-control-levels a.current, .leaflet-control-levels-expanded a, .leaflet-control-levels-expanded a:hover,
.leaflet-touch .leaflet-control-levels a.current, .leaflet-touch .leaflet-control-levels-expanded a,
.leaflet-touch .leaflet-control-levels-expanded a:hover {
    opacity:1;
    margin-top:0;
}
.leaflet-control-levels:not(.leaflet-control-levels-expanded) a.current {
    border-radius:4px;
    border-width:0;
}
.leaflet-control-levels a.current {
    font-weight:bold;
}
.leaflet-control-levels .leaflet-disabled.current {
    color:#000000;
    background-color:#ffffff;
}

.btn + .btn {
    margin-left: 5px;
}

textarea.form-control {
    resize: none;
    height: 75px;
}

.scancollector {
    padding: 10px;
    height: auto;
}
body > .scancollector {
    display: none;
}
.scancollector:not(.empty) .btn.start,
.scancollector:not(.running) .btn.stop,
.scancollector:not(.done) .btn.reset,
.scancollector.empty .count-line,
.scancollector.empty table,
.abcdefg,
body:not(.mobileclient) .scancollector .btn {
    display: none;
}
.scancollector .count-line {
    font-style: italic;
}
.scancollector .btn {
    margin: 0 5px 0 0;
}
.scancollector p:first-child {
    height: 26px;
}
.scancollector table {
    width: 100%;
    margin-top: -8px;
    &:not(:last-child) {
        margin-bottom: 15px;
    }
}
.scancollector table {

}
.scancollector table td {
    padding: 2px 2px 0 0;
}
.scancollector table td:last-child {
    padding-right: 0;
    text-align: right;
}
.scancollectorŝ table tr td {
    color: #666666;
}


.theme-editor-filter {
    body > & {
        display: none;
    }

    border-top: 1px solid #e7e7e7;
    padding-top: 12px;
    margin-bottom: 12px;
}

body > .theme-color-info {
    display: none;
}

label.theme-color-label {
    display: block;
    > .theme-color-info {
        float: right;
        text-decoration: underline black dotted;
        cursor: help;
    }
}

.theme-color-hidden {
    display: none;
}

.leaflet-control-overlays {
    background-color: white;
    border-radius: 0.5rem;
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;

    &.leaflet-control-overlays-expanded > .collapsed-toggle {
        display: none;
    }

    > .pin-toggle {
        display: none;
        position: absolute;
        right: 0.5rem;
        color: black;
        font-size: 1.5rem;
        top: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid #DCDCDC;
        border-radius: 0.5rem;
        text-align: center;
        cursor: pointer;

        &:hover {
            box-shadow: inset 0 0 2px black;
        }

        &.active {
            border-color: black;
            background: #DCDCDC;
            box-shadow: inset 0 0 2px black;
        }
    }

    &.leaflet-control-overlays-expanded > .pin-toggle {
        display: block;
    }

    > .content {
        display: none;
        max-height: calc(100vh - 160px);
        overflow: scroll;

        padding: 1rem;
        flex-direction: column;
        gap: 1rem;

        .overlay-group {
            display: flex;
            flex-direction: column;
            h4 {
                margin-top: 0;
                cursor: pointer;

                &::before {
                    content: '▹ ';
                }
            }

            label {
                cursor: pointer;
                margin-left: 3ch;
            }

            input[type=checkbox] {
                margin-right: 0.5rem;
            }
        }

        .overlay-group.expanded h4::before {
            content: '▿ ';
        }

        .overlay-group:not(.expanded) label {
            height: 0;
            overflow: hidden;
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    &.leaflet-control-overlays-expanded > .content {
        display: flex;
    }
}