*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
:root {
  --ol-background-color: rgb(0,60,136);
  --ol-accent-background-color: #f5f5ff;
  --ol-subtle-background-color: rgb(98 157 232 / 50%);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333344;
  --ol-subtle-foreground-color: #ffffff;
  --ol-brand-color: #00AAFF;
}
.ol-zoomslider button,.ol-zoomslider ,.ol-zoom,.ol-control-koordzset,.ol-control-zset {
    border: 2px solid #dddddd;
}
svg {
    overflow:visible;
}

/* portrait */

#Koordinatenusw, #Kartenwahl, #Funktionenusw, #Downloads {
    font-size:0.9em;
}

/* GRID */
.divinnen , .divinnen2, .gpxkmlgrid {
    display:grid;
    grid-template-rows: auto;
    grid-gap: 3px;
    grid-auto-rows: auto;
}

.divinnen {
    grid-template-columns: minmax(40%,60%) auto;
    padding: 3px;
}

.divinnen2 {
    grid-template-columns: auto 15% 15% auto;
}

.gpxkmlgrid {
    grid-template-columns: fit-content(15%) auto fit-content(12%) auto fit-content(15%) fit-content(15%);
    align-items: center;
}

.gpxkmlbgcol1 {
    background-color:rgb(210,210,210);
    padding:2px;
}
.gpxkmlbgcol2 {
    background-color:rgb(230,230,230);
    padding:2px;
}
.divinnen > div, .divinnen2 > div, .gpxkmlgrid > div {
    text-align: left;
}

.divinnen > div.right, .divinnen2 > div.right {
    text-align: right;
}
.ueberschrift {
    grid-column: 1 / span 2;
    background-color: #cac8ba;
    border-radius:0px;
}
.ueberschrift, .colcolspan2,  .colbezeichnung, .colwert, .col1, .col2, .col2a, .col2b,
.gpxkmlgridcol1, .gpxkmlgridcol2 , .gpxkmlgridcol3,
.gpxkmlgridcol4, .gpxkmlgridcol5, .gpxkmlgridcol5,
.gpxkmlgridcol234, .gpxkmlgridcol56 {
    grid-gap: 3px;
}

div[class=colbezeichnung]::before {
    content:'•';
}
.gpxkmlgridcol1 {
    grid-column: 1 / span 1;
}
.gpxkmlgridcol2 {
    grid-column: 2 / span 1;
}
.gpxkmlgridcol3 {
    grid-column: 3 / span 1;
}
.gpxkmlgridcol4 {
    grid-column: 4 / span 1;
}
.gpxkmlgridcol5 {
    grid-column: 5 / span 1;
}
.gpxkmlgridcol6 {
    grid-column: 6 / span 1;
}
.gpxkmlgridcol234 {
    grid-column: 2 / span 3;
}
.gpxkmlgridcol56 {
    grid-column: 5 / span 2;
}

#hilfediv {
    padding:5px;
    border-radius:0px;
    display:none;
    position:fixed;
    top:50px;
    bottom:50px;
    z-index:100000000;
    background-color:#eeeeee;
    border:2px solid black;
}

#map {
    position: fixed;
    top: 0em;
    bottom: 0em;
    left: 0em;
    right: 0em;
}

.ol-control-koordzset {
    position: absolute;
    top: 29em;
    left: 0.5em;
    font-weight: 400;
}

.ol-rotate {
    top:32em !important;
    left:0.5em !important;
    right: unset  !important;
}

.ol-zoomslider {
    top:9.5em !important;
}

.ol-zoom {
    top: 4.5em !important;;
}

#startdiv {

    display:block;
    position:fixed;
    top:5px;
    left:5px;
    bottom:20px;
    background:#f0f0f0;
    border:2px solid blue;
    z-index:9999999999;
    overflow-y:scroll;
}
.ol-zb {
    background:rgba(0,60,136,.7);
    display: inline-block;
    font-size: 1em;
    padding:5px;
    color: #ffffff;
    list-style-type:none;
}
.ol-zb a {
    color:#ffffff;
    font-weight:bold;
}
.ol-control-zset {
    position: absolute;
    top: 26em;
    left: 0.5em;
    font-weight: 400;
}
.ol-control-zausw {
    position: absolute;
    visibility:hidden;
    opacity:0;
    top: 18em;
    left: 4em;
    font-weight: 400;
    overflow-y:auto;
}
.ol-za {
    display: block;
    font-size: 1em;
    width: 1.375em;
    height:1.375em;
    background-color: rgba(0,60,136,0.5);
    line-height: 0.4em;
    text-align: center;
    color: #ffffff;
}
.ol-zs {
    display: inline-block;
    font-size: 1em;
    width: 1.375em;
    padding:5px;
    background-color: rgba(0,60,136,0.5);
    text-align: center;
    color: #ffffff;
}
#zoomauswahl > ul {
  list-style-type: none;
  margin:0;
  padding-left:3px;
  padding-right:3px;
  cursor:pointer;
}

/* nicht gebrauchte erstmalweg */
#Kartenwahl,#Funktionenusw,#Downloads {
    right:-100%;
    opacity:0;
}

#Koordinatenusw {
    right:0%;
    opacity:1;
}
#Koordinatenusw, #Kartenwahl,#Funktionenusw,#Downloads {
    position: fixed;
    top:45px;
    width:650px;
    transition: right 0.5s ease, opacity 0.5s ease;
    max-height:100%;
    height:85vh;
    z-index:5000;
    overflow:auto;
    background-color:rgba(255,255,255,0.9);
}

.olControlAttribution {
    left: 5px;
    bottom: 0px !important;
}

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow: hidden;
}
body {
    font-family: sans-serif;
    color:#000000;
    font-size:1 ;
}


#header {
    border: 1px solid #000022;
    z-index:5000;
    height: 20px;
    top: 1px;
    right:1px;
    background-color: #ffffee;
    border-radius:0px;

}

#header, #menu, #menusvg,#selfixedcursor,#mousemovekoorddiv {
    position:fixed;
}


#MinMaxBereich {

}

.olImageLoadError {
   /* display: none !important;*/
}

table.kleinerfont {
    font-size:small;
    margin-left: auto;
    margin-right: auto;
}
span.kleiner {
    font-size:0.9em;
}

input[type=button], input[type=submit] {
    background-color: #cccccc;
    border-style:solid;
    border-color: #eeeeee #000000 #000000 #eeeeee;
    border-width:1px;
    font-size:inherit;
    opacity:1;
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */

}

input[type=text], select {
    border-width:1px;
    border-color: #e8e7e6;
    border-style: solid;
}

button.dl {
    background:#ddddee;
    border: 1px solid #0000dd;
    font-size:inherit;
    width:auto;
    min-width:50px;
    height:auto;
    cursor:pointer;
    border-radius:2px;
    text-align: center;
}

button.padit {
    padding:2px;
}
button.dl:active {
    background:#0000dd;
    border: 1px solid #ddddee;
}

.sharesym {
    display:none;
}

input[readonly=readonly] {
    font-size:inherit;
    border:none;
    background-color:#e8e7e6;
    color:#330000;
    text-align:left;
}
#menu, #menusvg, #startdiv{
    border-radius: 0px;
}
td.top2x {
    border-top: #000000 2px solid;
}
#start {
    padding:5px;
    width:600px;
    height:600px;
    overflow:auto;
    overflow-wrap:normal;
    top:20px;
    left:100px;
    position:absolute;
    display:inline-block;
    z-index:9999;
    background-color:#ffffff;
    transition: height 0.2s ease-in-out, width 0.2s ease-in-out;

}

.ol-koordz {
    position:absolute;
    left:3em;
    top:35em;
    transform:translateY(-100%);
    z-index:2000;
    padding:5px;
    opacity:0;
    visibility:hidden;
}

#movekoords {
    font-weight:bold;
    padding:2px;
    background: rgba(0,60,136,.5);
    color:#ffffff;
    border:none;
}

#selfixedcursor {
    display:none;

}
#menusvg {
    top:25px;
    right:0px;
    height:18px;
    background-color: #ecebe9;
    display:flex;
    justify-content: space-around;
}
#wmsauswahldiv {
    left:5px;
    height:90vh;
    overflow:auto;
    top:20px;
    position:fixed;
    display:none;
    z-index:9999;
    background-color: rgba(255,255,255,0);
}
span.ueberschr {
    font-weight:bold;
}
.bgcol {
    background-color: #cac8ba;
    border-radius:0px;
}
.bgcol, select {
    opacity: 1;

}

a {
    color: #0000aa;
    text-decoration:none;
}

a:hover {
    text-decoration:underline overline;
}
.baseLbl {
    display:none !important;
}


#mousemovekoorddiv {
    font-size: 1em;
    display: none;
    margin: 3px;
    border: 1px solid #0000ff;
    background: rgba(255,255,255,0.9);
    z-index: 999999;
    pointer-events: none;

}

/* custum input */
input[type=button],
input[type=submit]
{
    background-color:#ddddee;
    border-width:1px;
    border-style: outset;
    border-color: #0000dd;
    border-radius: 0px;
    display:inline-block;
    cursor:pointer;
    color:#000000;
    padding: 2px;

}

input[type=button]:hover,
input[type=submit]:hover
{
    background-color:#bbbbcc;

}

input[type=button]:active,
input[type=submit]:active
{
    position:relative;
    top:1px;
}

use,span {
    transition:opacity 0.3s ease-in-out;
}

/*SVG*/
.svgcircle, .svgrect {
    height:18px;
    width:18px;
}

.svgarr {
    height:14px;
    width:14px;
}

.menusvg {
    height:15px;
    width:30px;

}


#featureinfo, #featureclick, #featureattributes {
    display:none;
    top:0px;
    left:0px;
}

#featureinfo {
    font-size:1.1em;
    z-index:2000;
}

#featureclick {
    font-size:1em;
    z-index:2001;
}

#featureattributes {
    z-index:2002;
}

#attributediv {
    max-width:500px;
    max-height:600px;
    overflow:auto;
    z-index:5001;
    top: 50px;
    left: 50px;


}
#attributediv,#featureinfo, #featureclick, #featureattributes {
    border:1px solid #000088;
    background-color:#f0f0f0;
    border-radius:5px;
    position:fixed;
    display:none;
    padding:3px;

}

#polyliste, #pktliste {
    font-size:inherit;
    width:80%;
}

table {
    width:100%;
}

/* div table  irgendwann*/

.dtbl{
    display:table;
    width:100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin:3px;
}
.dtbd {
    display: table-row-group;
}
.dtr {
    display: table-row;
}
.dtd, .dtdbgcol {
    display: table-cell;
    padding:2px;
}
.dtdbgcol {
    background-color: #cac8ba;
    border-radius:0px;
}

#onlineoffline {
    position:fixed;
    display:none;
    bottom:20px;
    left: 50%;
    transform: translate(-50%, 0%);
    background: rgba(255,255,255,0.9);
    z-index: 999999;

}
#pfeilrunter, #sharesym {
    margin:0;
}
.svgbuttonheight {
    height:1em;
    width:1em;
    margin:2px;
}

use,span {
    transition:all 0.3s ease;
}

#onlinestatus {
    border:1px solid red;
    background:#eeeeee;
    color:#110000;
    padding:5px;
    font-size:120%;
    font-weight:bold;
    display:none;
    position:fixed;
    left:50%;
    bottom:2em;
    transform:translateX(-50%);
}
#csvimportcontainer {
    display:none;
    top:1em;
    left:1em;
    right:1em;
    bottom:1em;
    position:fixed;
    background:#eeeeee;
}

#tkausschnittmap {
    display: none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    position:fixed;
    z-index: 100000000;
}


@media (max-width: 650px) {

    .ol-unselectable {
        font-size:0.8em;
    }
    /* SCREEN BIS 650px */
    #Koordinatenusw, #Kartenwahl,#Funktionenusw,#Downloads {
        width:100%;
    }
    #header, #menusvg {
        width:100vw;
    }
    #startdiv {
        width:300px;
    }
    #wmsauswahldiv {
        width:95vw;
    }
    #header {
        font-size:0.8em;
    }
    #menusvg{
        font-size:0.8em;
    }
    .menutxt {
        display:none;
    }
    #hilfediv {
        left:5px;
        right:5px;
    }
    .menusvg {
        transform:scale(1.5,1);
    }

    /* grid alles untereinander */
    /*  100%                    */
    /*     100%                 */
    .colbezeichnung, .colcolspan2 {
        grid-column: 1 / span 2;
    }
    .colcolspan4 {
        grid-column: 1 / span 4;
    }
    .colwert {
        grid-column: 1 / span 2;
        margin-left: 30px;
    }
    /* bei den Downloads */
    /* 100%              */
    /*    10% 10% 10%    */
    .col1 {
        grid-column: 1 / span 4;
    }
    .col2 {
        grid-column: 1 / span 1;
        margin-left: 30px;
    }
    .col2a {
        grid-column: 2 / span 1;
    }
    .col2b {
        grid-column: 3 / span 1;
    }

}
@media (min-width: 651px) {

    /* SCREEN UEBER 650px */

    #header, #menusvg {
        width:650px;
    }
    #startdiv {
        width:500px;
    }
    #wmsauswahldiv {
        width:640px;
    }
    #header {
        font-size:1em;
    }
    #menusvg{
        font-size:0.9em;
    }
    .menutxt {
        display:inline;
        font-size:1em;
    }
    #hilfediv {
        left:50px;
        right:50px;
    }
    .menusvg {
        transform:scale(1,1);
    }

    /* grid anordnung alles nebeneinander */
    /* auto auto */
    .colcolspan2 {
        grid-column: 1 / span 2;
    }
    .colcolspan4 {
        grid-column: 1 / span 4;
    }
    .colbezeichnung {
        grid-column: 1 / span 1;
    }
    .colwert {
        grid-column: 2 / span 1;
    }
    /* bei den Downloads */
    /* 70% 10% 10% 10%   */

    .col1 {
        grid-column: 1 / span 1;
    }
    .col2 {
        grid-column: 2 / span 1;
    }
    .col2a {
        grid-column: 3 / span 1;
    }
    .col2b {
        grid-column: 4 / span 1;
    }

}