﻿

/* Label mit Fahrzeugnamen in Google */
.google-label {
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 3px 5px 3px 5px;
    white-space: nowrap;
}

.divGoogleMapsTooltip {
    /*font-size:1.1em;*/
    color: #000000;
    font-family: Calibri, Arial;
    border-radius: 5px;
    font-size: 14px;
}
    /* Tooltip in GoogleMaps-Kartenansicht */
    .divGoogleMapsTooltip p {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .divGoogleMapsTooltip hr {
        margin-top: 5px;
        margin-bottom: 2px;        
       /* border-color: blue;  */
    }
    /* Fahrzeugname im Tooltip in GoogleMaps-Kartenansicht */
    .divGoogleMapsTooltip #divVehName {
        width: 120px;
        float: left;
        font-weight: bold;
    }
    /* Zeitstempel im Tooltip in GoogleMaps-Kartenansicht */
    .divGoogleMapsTooltip #divMsgTime {
        margin-left: 120px;
        text-align: right;
    }


/* überschreibt das Padding aus der leaflet.css */
.leaflet-tooltip {
    padding: 0px !important;
    border: none !important;
    background-color: #4786BB;
}


/* Überschreibt die Hintergrundfarbe von dem Dreieck des Tooltips */
.leaflet-tooltip-left::before {
    border-right-color: #4786BB !important;
}

/* Überschreibt die Hintergrundfarbe von dem Dreieck des Tooltips */
.leaflet-tooltip-right::before {
    border-right-color: #4786BB !important;
}


/* Label mit Fahrzeugname in PTV */
.ptvLabel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0px 5px 0px 5px;
    white-space: nowrap;
    font-size: 14px;
    background-color: #4786BB;
    color: #ffffff;
}

.divPtvClusterLabel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0px 5px 0px 5px;
    white-space: nowrap;
    font-size: 14px;
    background-color: #4786BB;
    color: #ffffff;
}




.divPtvTooltip {
    font-family: Calibri, Arial;
    border-radius: 5px;
    font-size: 14px;
}

    .divPtvTooltip hr {
        margin-top: 5px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 5px;
        border-color: lightgray;
    }
    /* Fahrzeugname im Tooltip in GoogleMaps-Kartenansicht */
    .divPtvTooltip #divVehName {
        width: fit-content();
        float: left;
        font-weight: bold;
    }
    /* Zeitstempel im Tooltip in GoogleMaps-Kartenansicht */
    .divPtvTooltip #divMsgTime {
        width: fit-content();
        margin-left: 120px;
        text-align: right;
    }

    .divPtvTooltip #spanAddInfos {
        width: fit-content();
        white-space: nowrap;
    }
    /* Überschreibt die Popup-CSS von Leaflet */
    .divPtvTooltip .leaflet-popup-content-wrapper, .leaflet-popup.tip {
        border-radius: 8px;
        background-color: #4786BB;
        color: #ffffff;
    }

    .divPtvTooltip .leaflet-popup-content {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 5px;
    }



.divPtvClusterTooltip {
    font-family: Calibri, Arial;
    border-radius: 5px;
    font-size: 14px;
    /*   padding-left: 5px;
   padding-right: 5px;*/
    background-color: #4786BB;
    color: #ffffff;
}
    /* Überschreibt die Popup-CSS von Leaflet */
    .divPtvClusterTooltip .leaflet-popup-content-wrapper, .leaflet-popup.tip {
        border-radius: 8px;
        background-color: #4786BB;
        color: #ffffff;
    }

    .divPtvClusterTooltip .leaflet-popup-content {
        margin: 5px;
    }




.ptv-custom-control {
    background-color: lightgray;
    border-color: gray;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    width: 320px;
    opacity: 1;
}



/* Leaflet FullScreen Beginn */
.fullscreen-icon {
    background-image: url(/images/icon-fullscreen.png);
}

.leaflet-retina .fullscreen-icon {
    background-image: url(/images/icon-fullscreen-2x.png);
    background-size: 26px 26px;
}
/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
.leaflet-container:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-container:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-container:full-screen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-container:fullscreen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-pseudo-fullscreen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 99999;
}
/* Leaflet FullScreen Ende */



/* Leaflet MarkerCluster Start*/
/* Ersetzt die https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"*/
.marker-cluster-small {
    /* inner Kreis */
    background-color: rgba(187, 222, 251, 0.6);    
}

    .marker-cluster-small div {
        /* äußerer Kreis */
        background-color: rgba(66, 165, 245, 0.6);
    }

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

    .marker-cluster-medium div {
        background-color: rgba(240, 194, 12, 0.6);
    }

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}

    .marker-cluster-large div {
        background-color: rgba(241, 128, 23, 0.6);
    }


.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}

    .marker-cluster div {
        width: 30px;
        height: 30px;
        margin-left: 5px;
        margin-top: 5px;
        text-align: center;
        border-radius: 15px;
        font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

    .marker-cluster span {
        line-height: 30px;
    }
/* Leaflet MarkerCluster End*/