
.gps-picker {
    width: min(900px, 90vw);
    padding: 16px;
    border: 1px solid #585858;
    background: #283038;
    color: #C0FFFF;
}

.gps-picker::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.gps-picker h2,
.gps-picker p {
    margin: 0 0 12px;
}

.gps-picker-map {
    width: 100%;
    height: min(60vh, 600px);
    margin-bottom: 12px;
    background: #E0E0E0;
}

.gps-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.gps-picker-actions button {
    padding: 8px 16px;
    cursor: pointer;
}

div#tools {
    width: 100%;
    padding-left: 5px;
    position: absolute;
    background-color: #28303860;
    border-bottom: 1px solid #58585880;

}

div#toolbar {
    width: 100%;
}

div#subbar {
    border-top: 1px solid #58585880;
}

div#toolbar .id-title {
    display: inline-block;
    background-color: #28303800;
    margin: 0;
    border: none;
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
}

div#toolbar .user-pane {
    margin: 6px 8px 4px 4px;
    font-size: 200%;
    min-width: 2em;
    background-color: #28303800;
    text-decoration: none;
    color: #C0FFFF;
    height: 1.2em;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

div#toolbar .user-text {
    background-color: #28303800;
    display: inline-block;
    height: 17px;
    border: none;
    top: 0.4em;
    left: 4px;
    text-align: left;
    padding-left: 0.3em;
    color: #C0FFFF;
    font-size: 18px;
}

div#toolbar .id-pane {
    margin: 6px 8px 4px 4px;
    font-size: 200%;
    border: 1px solid #585858;
    background-color: #283038;
    text-decoration: none;
    color: #C0FFFF;
    width: 200px;
    height: 1.5em;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

div#toolbar .text {
    display: inline-block;
    top: 2px;
    left: 4px;
    color: #C0FFFF;
    cursor: pointer;
    font-size: 13px;
}

div.toggle-indicator {
    position: absolute;
    top : 5px;
    right : 5px;
    width : 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #505050;
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),0px 0px 3px 2px rgba(135,135,135,0.5);
}

input.toolbar {
    display: inline-block;
    position: absolute;
    height: 1em;
    bottom: 4px;
    left: 3%;
    width: 90%;
    background: transparent;
    border: none;
    color: #C0FFFF;
    font-size: 24px;
}

div#toolbar .id-pane-value {
    display: inline-block;
    position: absolute;
    height: 1em;
    bottom: 4px;
    left: 3%;
    width: 94%;
    color: #C0FFFF;
    font-size: 24px;
    overflow: hidden;
    white-space: nowrap;
}

#toolbar div.button-link {
    margin: 4px;
    font-size: 70%;
    border: 1px solid #585858;
    background-color: #283038;
    text-decoration: none;
    color: #E0E0E0;
    width: 36px;
    height: 36px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#toolbar div.button-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#subbar div.button-link {
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #283038;
    width: 26px;
    height: 26px;
    border: 1px solid #585858;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#subbar div.button-text {
    position: relative;
}


#subbar div.separator {
    margin: 1px;
    display: inline-block;
    position: relative;
    width: 6px;
    height: 26px;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#subbar div.separator-image {
    position: relative;
}

.upload {
    vertical-align: top;
    margin: 6px 8px 4px 4px;
    font-size: 70%;
    border: 1px solid #585858;
    background: none;
    text-decoration: none;
    color: #E0E0E0;
    width: 48px;
    height: 48px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.upload > input {
    vertical-align: middle;
    display: none;
}

.upload > label {
    display: block;
    width: 48px;
    height: 48px;
    position: relative;
    cursor: pointer;
    padding-top: 21%;
}

#subbar .id-pane {
    margin: 2px 2px 1px 1px;
    font-size: 80%;
    border: 1px solid #585858;
    background-color: #283038;
    text-decoration: none;
    color: #C0FFFF;
    width: 200px;
    height: 26px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#subbar .id-pane-textarea {
    height: 7em;
    vertical-align: top;
}

div#subbar .id-title {
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 4px;
    cursor: pointer;
    font-size: 8px;
}

#subbar input {
    border: none;
    border-bottom: 1px solid #585858;
    display: inline-block;
    position: absolute;
    height: 13px;
    bottom: 1px;
    left: 3%;
    width: 90%;
    background: transparent;
    color: #C0FFFF;
    font-size: 14px;
}

#subbar textarea {
    border: 1px solid #585858;
    display: inline-block;
    position: absolute;
    top: 1.6em;
    left: 3%;
    width: 90%;
    height: calc(100% - 2em);
    resize: vertical;
    background: transparent;
    color: #C0FFFF;
    font-size: 12px;
    font-family: monospace;
}

#subbar .latlon-pane {
    margin: 2px 2px 1px 1px;
    font-size: 80%;
    border: 1px solid #585858;
    background-color: #283038;
    text-decoration: none;
    color: #C0FFFF;
    width: 9em;
    height: 26px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#subbar input.inp-lat {
    border-bottom: 1px solid #585858;
    position: absolute;
    width: 3em;
}

#subbar div.latlon-colon {
    position: absolute;
    left: 4.2em;
    bottom: 0.3em;
}

#subbar .inp-lon {
    border-bottom: 1px solid #585858;
    position: absolute;
    width: 3em;
    left: 4.5em;

}

textarea:focus, input:focus{
    bottom: 2px;
    outline: none;
}

div#subbar .text {
    border: none;
    border-bottom: 1px solid #585858;
    display: inline-block;
    position: absolute;
    height: 13px;
    bottom: 1px;
    left: 3%;
    width: 90%;
    background: transparent;
    color: #C0FFFF;
    font-size: 14px;
}

div#subbar .subbar-text {
    border: none;
    background: transparent;
    color: #C0FFFF;
    font-size: 14px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;

}
