#g4u-map 
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.g4u-attribution 
{
    display: none;
}

#g4u-map .g4u-mouseposition
{
    left: 88px !important;
    min-width: 174px;
}

#g4u-map .g4u-toolbox 
{
    left: 290px !important;
}

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    z-index: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.ol-popup > a:visited {
    text-decoration: none;
}

.ol-popup > a:hover {
    text-decoration: none;
    font-weight: bold;
}

.ol-popup > a:active {
    text-decoration: none;
}

.ol-popup > a:focus {
    text-decoration: none;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-content {
    min-width: 170px;
    cursor: move;
    overflow-x: auto;
    padding: 15px 25px 15px 15px;
}

.ol-popup-closer {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 18px;
    padding: 0 4px;
    color: gray;
    text-decoration: none;
}


.ol-popup-closer:after {
    content: "\2716";
}

/* Icoon om popup te verplaatsen in enkel van toepassing bij desktop omgeving. */
.g4u-desktop .ol-popup-focus {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 30px;
    padding: 0 4px;
    color: gray;
    text-decoration: none;
}

/* Icoon om popup te verplaatsen in enkel van toepassing bij desktop omgeving. */
.g4u-desktop .ol-popup-focus:after {
    content: "\2316";
}

.ol-popup div.infoResult {
    min-width: 130px;
}

.ol-popup div.infoResult p {
    padding: 0.1em;
    margin: 0;
}

.ol-popup-content h3 {
    margin: 0.25em 0;
}

.ol-popup.marker {
    margin-bottom: 30px;
}

.ol-popup-content td.image
{
    text-align: center;
}

.ol-popup-content td img {
    margin-top: 10px; /* Klein beetje ruimte voorzien want anders plakt het tegen de vorige lijn. */
}

/* Ruimte voorzien voor de image zodoende dat deze niet pas bij het volledig geladen van de image vergroot */
.ol-popup-content td.smaller_image_size {
    height: 100%;
    text-align: center;
}

.ol-popup-content td.smaller_image_size img {
    max-width: 200px;
    max-height: 150px;
}

.ol-popup-content td.original_image_size {
    height: 300px; /*breed maken, maar ook niet overdrijven...*/
    text-align: center;
}

.ol-popup-content td.original_image_size img {
    max-height: 100%;
    max-width: 100%;
}

.ol-popup-content td.iframe iframe 
{
    height: 320px;
    min-width: 391px;
    overflow: hidden !important;
}

.ol-popup-content td.large iframe,
.ol-popup-content td.large img 
{
    width: 640px;
}

/* Styling voor teken/meten controls*/
.drawcontrolWrapper {
    padding-top: 5px;
    padding-bottom: 5px;
    width: max-content;
}

.liDrawElement{
    margin-left: 10px;
    margin-right: 10px;
}

/* Styling voor tooltips die verschijnen tijdens meten */
.tooltip
{
  position: relative;
  background: #000000;
  background: rgba(0, 0, 0, 0.5);
  -ms-border-radius: 4px;
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  -ms-opacity: 0.7;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-inactive {
    display: none;
}

.tooltip-measure-hidden {
    display: none;
}

.tooltip-measure
{
  -ms-opacity: 1;
  opacity: 1;
  font-weight: bold;
}

.tooltip-static 
{
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before
{
  border-top: 6px solid #000000;
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before 
{
  border-top-color: #ffcc33;
}

.tijdsKaderInputDiv {
    margin-left: -30px;
    width: 300px;
}

.pnlButtons {
    float: right;
    margin-right: 20px;
    margin-top: -40px;
    text-align: right;
    width: 18px;
    height: 18px;
}

.pnlButtons:hover {
    cursor: pointer;
}

.datetimeselect {
    margin-bottom: 3px;
}

/*Bij inladen van map pagina willen we de usercontrol van tijdskader verbergen -> tijdskader heeft klasses:  .inputForm .userpopup*/
.inputForm.userpopup {
    display: none;
}

/* mapOverlayerContainer is de container waaraan we alle responsive tauris html controls aan toevoegen (vb: detail info). 

    Deze control is zelf niet zichtbaar maar alle children worden gedwongen een absolute positioning te hebben. Deze children controls
    positioneren zich dus zelf in de body van de html pagina.

    Note: het is ook mogelijk om de container over de ganse pagina te stretchen (een echte overlay te maken), en alle controls te 
    positioneren hierin. Op IE ontstaat hier de issue dat buttons met images niet makkelijk meer aanklikbaar zijn. Van zodra dat de mouse
    over de image van de button gaat (dus child van button) dan IE om een bepaalde reden niet detecteren dat de over de button gehovered/clicked
    wordt maar over de overlay container.
*/
#mapOverlayerContainer {
    z-index: 1;
    width: 0;
    height: 0;
}

#mapOverlayerContainer > * {
    position: absolute;
}

/* Zeker zijn dat alle toegevoegde tauris overlays onder de algemene control overlays zitten (vb: popup moet onder layerselector) */
.ol-overlaycontainer-stopevent > * {
    z-index: 1;
}

.ol-overlaycontainer-stopevent > .ol-overlay-container.taurisMobilecontrol {
    z-index: 0;
}

/* Detail info scherm */
div.detailInfo 
{
    color: #FFF;
    display: none;
    font-size: 9px;
    left: 6px;
    min-width: 195px;
    padding-right: 10px;
    width: auto;
    z-index: 2;
}

.taurisDesktop div.detailInfo 
{
    top: 35%;
}

.taurisMobile div.detailInfo 
{
    bottom: 45px;
}

div.detailInfo div.detailInfoDiv
{
    background: #ffffff;
    border-radius: 6px;
    max-width: 500px;
    opacity: 0.75;
    padding: 11px;
    padding-top: 26px;
    width: auto;
}

a.detailInfo-close 
{
    top: 16px;
    right: 20px;
}

a.close-btn 
{
    color: gray !important;
    font-size: 18px;
    text-decoration: none !important;
    position: absolute;
    z-index: 9999;
}

a.close-btn:after 
{
    content: "\2716";
}

a.close-btn:hover 
{
    font-weight: bold;
}

div.detailInfo div.detailInfoDiv > *
{
    background-color: #0071bc;
    background-color: rgba(0, 113, 188, 1);
    padding: 5px;
}

div.detailInfo div.detailInfoDiv > table td
{
    padding: 4px;
}

div.detailInfo div.pnlPDF {
    pointer-events: all; /* div met pdf moet wel aanklikbaar zijn */
}

div.detailInfo div.pnlPDF div.left 
{
    float: left;
    margin-left: 6px;
    margin-right: 20px;
    margin-top: 6px;
    width: 19px;
}

div.detailInfo div.pnlPDF div.right 
{
    min-height: 42px;
    min-width: 250px;
    padding: 7px;
    width: auto;
}

div.detailInfo a,div.detailInfo img 
{
    color: white;
    cursor: pointer;
}

div.detailInfo .imgLink 
{
    font-weight: 700;
    text-decoration: underline;
}

/* Layerselector: indenteren volgens groep-keyword */

.taurisg4u-layer-indent
{
    margin-left: 22px !important;
}

/* Mobile */
body .g4u-mobile * 
{
    /* Bugfix voor Android browsers: default stelt G4U een font-weight in van 100, 
        iOS heeft hier geen probleem mee, maar op een Android is de tekst wel héél licht waardoor deze niet zo goed leesbaar blijkt. is blijkbaar 100 wat héél dun is. */
    font-weight: normal;
}

/*
    De children van .ol-overlaycontainer-stopevent (dus alle overlays) worden hidden wanneer we overgaan op de mobile omgeving
    Om te vermijden dat onze control/overlay ook hidden wordt kunnen we er de taurisMobilecontrol klasse aan toevoegen.
*/
.g4u-mobile .ol-overlaycontainer-stopevent>.taurisMobilecontrol {
    display: block;
}


/*
    Guide4You maakt alle mobile controls groter door de fontsize en line height te vergroten.
    Via het bestand clouds.less wordt een instelling gedaan van de variabele @g4u-mobile-huge-fontsize. De waarde van de 
    variabele wordt gebruikt als basis bij de berekening om te bepalen hoe groot HTML elementen moeten worden.
    Wij willen vermijden dat de tekst te groot wordt omdat het scherm anders volledig ingenomen wordt door de weergegeven popup.
*/
.g4u-mobile .ol-overlaycontainer-stopevent>.taurisMobilecontrol .ol-popup-content * {
    font-size: 10px;
    line-height: 12px;
}

.g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content td {
    white-space: normal /*wrappen indien te veel tekst*/;
}

.g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content td.left {
    white-space: nowrap; /*mag niet wrappen */
}


/******************/
/* Tijd aanpassen */
/******************/

.g4u-mobile .tijdsKaderInputDiv {
    margin: auto;
    position: relative;
    height: 75px;
}


.g4u-mobile .tijdsKaderInputDiv input.text {
    height: auto;
}


.g4u-mobile .tijdsKaderInputDiv input.txt_date {
    width: 92px;
}


.g4u-mobile .tijdsKaderInputDiv div.datetimeselect input.txt_hour, .g4u-mobile .tijdsKaderInputDiv div.datetimeselect input.txt_minute {
    text-align: center; /* Invoervelden iets groter, maar content in het midden. Maakt het voor mobiel gebruik makkelijker om de inhoud aan te passen */
	width: 24px;	
}


.g4u-mobile .tijdsKaderInputDiv > * {
    padding-bottom: 5px;
    height: auto;
}


.g4u-mobile .tijdsKaderInputDiv .pnlButtons {
    margin: auto;
    position: absolute;
    top: 15px; 
    right: 15px;
    width: auto;
    height: auto;
}


/* Het refresh-icoon groter maken in mobiele context zodat dit makkelijk aantikbaar wordt. */
.g4u-mobile .tijdsKaderInputDiv .pnlButtons #imgRefresh {
    width: 37px;
    height: 37px;
}


.g4u-mobile .tijdsKaderInputDiv .datetimeselect {
    margin-left: 3em;
    position: absolute;
}

.g4u-mobile .tijdsKaderInputDiv label {
    position: absolute;
}


.g4u-mobile .tijdsKaderInputDiv .datetimeselect:first-of-type {
    top: 0;
}


.g4u-mobile .tijdsKaderInputDiv label:first-of-type {
    top: 0;
}

.g4u-mobile .tijdsKaderInputDiv label {
    width: 2em;
}


.g4u-mobile .tijdsKaderInputDiv .datetimeselect:nth-of-type(2) {
    bottom: 0;
}

.g4u-mobile .tijdsKaderInputDiv label:nth-of-type(2) {
    bottom: 0;
}


.g4u-mobile.g4u-window-decorator.tauris-tijdskader>.g4u-window {
    /* Een mobiele window popup is niet gelijk aan een desktop window popup, noodzakelijk om hier ook het achtergrondkleur in te stellen */
    background-color: white; 
	height: 134px !important;

}

.tauris-tijdskader .g4u-window .g4u-window-content {
	right: 0; /* Left staat default op 0px (Guide4You), right op 4px. We zetten dit gelijk. */
}

/* Overrule op de berekende waarde van tauris.less, want hier specifiek enkel voor mobiele weergave de knoppen groter maken omdat ze dan 
    makkelijker aantikbaar zijn. */
.g4u-mobile .g4u-layerselector .tauris-layerselector-buttonDiv>.taurisg4u-layerselector-layerbuttonwrapper>.taurisg4u-layerListButton,
.g4u-mobile .g4u-layerselector .tauris-layerselector-buttonDiv>.taurisg4u-layerselector-layerbuttonwrapper>.taurisg4u-layerTextButton {
    height: 25px;
    margin-top: -5px;
    width: 25px;
}

.g4u-mobile .g4u-layerselector .tauris-layerselector-buttonDiv > .taurisg4u-layerselector-layerbuttonwrapper > .taurisg4u-layerListButton {
    margin-right: 40px;
}

/* Weergave loading van een layer: manueel + automatisch (refreshen van de layer)*/
.g4u-layerselector.ol-unselectable.ol-control .taurisg4u-layer-loading {
    background-color: #FFB347 !important;
}

.g4u-layerselector.ol-unselectable.ol-control .taurisg4u-layer-loading > .taurisg4u-layerselector-layertext
{   
    color: #2F4F4F !important;
}

/* Weergave dat er iets fout ging bij de layer */
.g4u-layerselector.ol-unselectable.ol-control .taurisg4u-layer-error 
{
    background-color: #dc3545 !important;
}

.g4u-layerselector.ol-unselectable.ol-control .taurisg4u-layer-error > .taurisg4u-layerselector-layertext 
{
    color: #fff !important;
}

/* Style voor layerselectors: moeten visueel eruit springen want beïnvloeden andere layers door deze aan- of uit te zetten */
div.layer_selector_accent div.g4u-layerselector-menu-title,
div.layer_selector_accent div.g4u-layerselector-menu-title *,
div.layer_selector_accent div.g4u-layerselector-menu-title .g4u-layerselector-menu-titlebutton,
div.layer_selector_accent div.tauris-layerselector-buttonDiv 
{
    background-color: #58B183 !important;
}


div.layer_selector_accent .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active 
{
    background-color: #28a745 !important
}

/* Style voor laag die features van een andere laag gaat highlighten/selecteren wanneeer men die aanklikt */
div.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active.layer_highlight_accent,
div.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active.layer_highlight_accent :hover,
div.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active.layer_highlight_accent div.g4u-layerselector-menu-title,
div.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active.layer_highlight_accent div.g4u-layerselector-menu-title *,
div.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active.layer_highlight_accent div.g4u-layerselector-menu-title .g4u-layerselector-menu-titlebutton
{
    background-color: #AF7AC5 !important;
}

.g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv.g4u-layerselector-menu-active > .taurisg4u-layerselector-layertext {
    font-weight: bold;
}

/* Enkel voor desktop: max. ruimte voor de knoppen lijst- en tekstfunctionaliteit, bij een mobieltje gebruiken we de volledige breedte van het scherm */
.g4u-desktop .g4u-layerselector.ol-unselectable.ol-control .tauris-layerselector-buttonDiv > .taurisg4u-layerselector-layerbuttonwrapper {
    width: 20%;
}

/***********************************************/
/* Optimalisatie voor grotere mobiele schermen */
/***********************************************/
@media all and (min-device-width : 375px) {
    /* Mobiel: enkel voor schermen die voldoende breed zijn, is mooier. Bij kleinere schermen nemen we genoegen met het feit dat het kruisje over de tekst komt. 
    Het kruisje is voor mobiel gebruik groter gemaakt om makkelijker aantikbaar te zijn, waardoor er meer padding nodig is aan de rechterkant in de popup omdat het anders
    doorheen de tekst komt. */
    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup {
        display: block;
        height: 100%;
        left: 0 !important;
        background-color: aliceblue;
        position: fixed;
        padding: 0;
        width: 100%;
        width: -webkit-fill-available;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup a.ol-popup-closer 
    {
        font-size: 42px;
        top: 7px;
        position: fixed;
        left: -8px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: 35px;
        position: relative;
        color: transparent;
        width: 100%;
        color: #fff;
        background: rgba(0,113,188,.7);
        display: block;
        background-color: #0071bc;
        border: none;
        cursor: pointer;
        text-align: left;
        padding-top: 18px;
        right: 10px;
        text-align: right;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup div.ol-popup-content
    {
        padding: 0;
        top: 45px;
        position: fixed;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content * 
    {
        font-size: 14px;
        line-height: 25px;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content tr td.iframe iframe
    {
        width: 100%;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content,
    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content div.popup,
    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup-content div.popup table {
        width: 100%;
    }

    .g4u-mobile .ol-overlaycontainer-stopevent > .taurisMobilecontrol .ol-popup:after {
        background-color: aliceblue;
        border-top: 0;
        margin-left: 0;
        left: 0;
        height: inherit;
        width: 100%;
    }

    .g4u-mobile .tijdsKaderInputDiv .pnlButtons {
        right: 0;
    }

    body.taurisMobile div.featuresList.taurisMobile 
    {
        left: 0;
        height: fit-content;
        top: unset;
        bottom: 52px;
        width: 100%;
    }

    body.taurisMobile div.featuresList.taurisMobile div.lijst 
    {
        height: 80px;
    }

    body.taurisMobile div.featuresList.taurisMobile div.lijst table
    {
        width: 100%;
    }

    body.taurisMobile div.featuresList.taurisMobile div.lijst table tr,
    body.taurisMobile div.featuresList.taurisMobile div.lijst table td 
    {
        line-height: 30px;
    }

    body.taurisMobile .ol-popup-content td.iframe iframe 
    {
        min-width: -webkit-fill-available;
    }

    body.taurisMobile .ol-popup-content td.iframe iframe div.buiten div#page_content 
    {
        margin-top: 0;
    }
}

/* Op kleine schermen zoals een iPhone 4 in potrait moeten de knoppen om de lijst en test makkelijk aanklikbaar zijn.
Hierbij zorgen we voor voldoende ruimte voor deze knoppen. De ruimte die we voorzien om de layernaam weer te geven is hierbij
ondergeschikt.
*/
@media all and (max-device-width : 320px) {
    /* Op een iPhone 4 in portrait is er heel weinig ruimte om de informatie in de popup te tonen. Daarom kleiner
    lettertype. De gebruiker kan wel tabben op de popup waardoor er ingezoomd wordt. Dus aanvaardbare oplossing.   
    */
	.g4u-mobile .ol-overlaycontainer-stopevent>.taurisMobilecontrol .ol-popup-content * {
		font-size: 9px;
		line-height: 11px;
	}
}