/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


/* CSS variables which are used in all MVC css files */

.mvc {
    /* Core Colors */

    --mvc-col-primary-light-super: #f1ffef;
    --mvc-col-primary-light: #d1decf;
    --mvc-col-primary-medium-light: #bce3b5;
    --mvc-col-primary: #4c8043;
    --mvc-col-primary-medium-dark: #3d6636;
    --mvc-col-primary-dark: #2e4b28;

    /* Red */
    --mvc-red: #c10f0f;
    --mvc-red-hover: #9f0808;

    /* Whites & Greys */

    --mvc-white: #fafafa;
    --mvc-grey-light: rgb(214, 214, 214);
    --mvc-grey-medium: grey;
    --mvc-grey-medium-dark: rgb(83, 83, 83);
    --mvc-grey-dark: #333333;

    /* Font */

    --mvc-font-size: 14px;
    --mvc-font-col: var(--mvc-grey-dark);
    --mvc-font-col-hover: var(--mvc-grey-medium);

    /* General */

    --mvc-map-background: #cae6c2;
    --mvc-border-radius: 3px;
    --mvc-outline: 2px solid var(--mvc-col-primary-medium-dark);

    --mvc-icon-size-std: 35px;
    --mvc-icon-size-small: 25px;

    --mvc-row-highlighted: #fbe4ae;
    --mvc-row-highlighted-dark: #ecd396;
    --mvc-row-highlighted-dark-2: #ab6c1b;
    --mvc-row-selected: #d6ffca;
    --mvc-row-selected-dark: #afe69e;
    --mvc-row-hidden: #d9d9d9;
    --mvc-row-hidden-dark: #dedede;

    /* Notes */

    --mvc-note-info-col: #cbdcef;
    --mvc-note-success-col: lightgreen;
    --mvc-note-warning-col: #f4edb3;
    --mvc-note-error-col: rgb(255, 188, 180);

    /* Attribution */

    --mvc-attr-height: 20px;

    /* INPUT: RANGE SLIDER */

        /* Track */
        --mvc-input-range-track-width: 100px;
        --mvc-input-range-track-height: 6px;
        --mvc-input-range-track-bg: var(--mvc-grey-medium);
        --mvc-input-range-track-bg-hover: var(--mvc-grey-medium);
        --mvc-input-range-track-shadow: none;
        --mvc-input-range-track-border: 0;
        --mvc-input-range-track-border-radius: 2px;
        --mvc-input-range-track-cursor: pointer;

        /* Thumb */
        --mvc-input-range-thumb-width: 10px;
        --mvc-input-range-thumb-height: 19px;
        --mvc-input-range-thumb-bg: var(--mvc-grey-dark);
        --mvc-input-range-thumb-bg-hover: var(--mvc-grey-medium-dark);
        --mvc-input-range-thumb-shadow: none; /* 0 0 4px #000000; */
        --mvc-input-range-thumb-border: 0;
        --mvc-input-range-thumb-border-radius: var(--mvc-border-radius);
        --mvc-input-range-thumb-cursor: grab;

        /* Wrapper for track and thumb */
        --mvc-input-range-wrap-width: var(--mvc-input-range-track-width); /* MUST BE TRACK WIDTH! */
        --mvc-input-range-wrap-height: var(--mvc-input-range-thumb-height); /* MUST BE THUMB HEIGHT OR TRACK HEIGHT (this is also relevant for triggering hover) */
        --mvc-input-range-wrap-bg: none;
        --mvc-input-range-wrap-border: 0;
        --mvc-input-range-wrap-cursor: pointer;
        
        /* Progress */
        --mvc-input-range-progress-lower-bg: var(--mvc-col-primary);
        --mvc-input-range-progress-lower-bg-hover: var(--mvc-col-primary-dark);
        --mvc-input-range-progress-upper-bg: var(--mvc-input-range-track-bg);
        --mvc-input-range-progress-upper-bg-hover: var(--mvc-input-range-track-bg-hover);

    /* Buttons */

    --mvc-btn-font-col: var(--mvc-white);
    --mvc-btn-bg-col: var(--mvc-col-primary);
    --mvc-btn-bg-col-hover: var(--mvc-col-primary-dark);
    --mvc-btn-border: 2px solid var(--mvc-col-primary);
    --mvc-btn-red: var(--mvc-red);
    --mvc-btn-red-hover: var(--mvc-red-hover);

    /* Controls */

    --mvc-ctr-gap: 10px;  /* spacing between map edge and control buttons + between control buttons */
    --mvc-ctr-gap-menu: 8px; /* spacing between a conrol button and it's menu */

    /* Control Container */

    --mvc-ctr-container-bg-col: rgba(255, 255, 255, 0.5);

    /* Control Button */

    --mvc-ctr-btn-width: 38px;
    --mvc-ctr-btn-height: 38px;

    --mvc-ctr-btn-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
    --mvc-ctr-btn-bg-col: var(--mvc-white);
    --mvc-ctr-btn-bg-col-hover: var(--mvc-col-primary-medium-light);
    --mvc-ctr-btn-border-radius: var(--mvc-border-radius);
    --mvc-ctr-btn-border: none;

    /* Control Menu */

    --mvc-ctr-menu-shadow: var(--mvc-ctr-btn-shadow);
    --mvc-ctr-menu-bg-col: var(--mvc-white);
    --mvc-ctr-menu-border-radius: var(--mvc-border-radius);
    --mvc-ctr-menu-border: none;
    --mvc-ctr-menu-outline: 0 solid var(--mvc-col-primary-medium-dark);

    --mvc-ctr-menu-row-bg: #ededed;
    --mvc-ctr-menu-row-bg-hover: #dfdfdf;

    --mvc-ctr-menu-content-padding-side: 13px;
    --mvc-ctr-menu-row-padding: 0 5px 0 5px;

    /* Control Menu Alert */

    --mvc-ctr-alert-bg-col: #ffffffba;;

    --mvc-ctr-alert-message-shadow: 0px 0px 25px 0px rgba(0,0,0,0.6);
    --mvc-ctr-alert-message-bg-col: var(--mvc-ctr-menu-bg-col);
    --mvc-ctr-alert-message-border-radius: var(--mvc-ctr-menu-border-radius);
    --mvc-ctr-alert-message-border: var(--mvc-ctr-menu-border);

    /* Status Bar */

    --mvc-status-bar-el-bg-col: #ffffff57;
    --mvc-status-bar-info-bg-col: #9c9c9c57;
    --mvc-status-bar-backdrop-filter: blur(3px); /* blures the map in the background */
    --mvc-status-bar-font-size: 12px;

    /* Status Bar: Scale */

    --mvc-scale-bar-height: 8px;
    --mvc-scale-bar-border-weight: 1px;
    --mvc-scale-bar-font-size: 12px;
    --mvc-scale-bar-font-weight: 400;
    --mvc-scale-bar-text-align: center; /* flex-start, center, flex-end */
    --mvc-scale-bar-text-margin-bottom-adjustment: -1px; /* between text and scale bar */

    /* Geodata: Accordion row gap */

    --mvc-geodata-accordion-row-gap: 5px;

    /* Popups */

    --mvc-popup-bg-col: var(--mvc-white);
    --mvc-popup-font-col: var(--mvc-font-col);
    --mvc-popup-font-size: var(--mvc-font-size);
    --mvc-popup-border-radius: var(--mvc-border-radius);
    --mvc-popup-border: 1px solid var(--mvc-col-primary-dark);
    --mvc-popup-shadow: 0px 0px 60px 10px rgba(0,0,0,0.7);
    --mvc-popup-content-margin: 28px 24px;

    /* Geodata Styling */

    --mvc-geodata-point-selected-filter: drop-shadow(0px 0px 2px red);
    --mvc-geodata-line-selected-filter: drop-shadow(0px 0px 2px red);
    --mvc-geodata-area-selected-filter: drop-shadow(0px 0px 2px red);
	
	--mvc-geodata-line-outline-filter: drop-shadow(0px 0px 1px black);

    /* Cluster Marker */

    --mvc-cluster-marker-bg-col: #001a8b;
    --mvc-cluster-marker-bg-col-hover: #001a8b;

    --mvc-cluster-marker-border: 1px solid #ffffff8c;
    --mvc-cluster-marker-border-hover: var(--mvc-cluster-marker-border);
    
    --mvc-cluster-marker-border-radius: 20px !important;
    --mvc-cluster-marker-font-col: var(--mvc-ctr-btn-bg-col);

    --mvc-cluster-marker-outline: 5px solid #001a8b8c;
    --mvc-cluster-marker-outline-hover: 5px solid #ffffffb7;
}

/* =============================================================== */
/* CLUSTER MARKER STYLING */
/* =============================================================== */

.mvc .mvc-cluster-marker {
    background-color: var(--mvc-cluster-marker-bg-col);
    background-clip: padding-box;
    border: var(--mvc-cluster-marker-border);
    border-radius: var(--mvc-cluster-marker-border-radius);
    outline: var(--mvc-cluster-marker-outline);
}

.mvc .mvc-cluster-marker:hover {
    background-color: var(--mvc-cluster-marker-bg-col-hover);
    border: var(--mvc-cluster-marker-border-hover);
    outline: var(--mvc-cluster-marker-outline-hover);
    -webkit-transition: background-color 0.25s ease;
    -o-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
}

.mvc .mvc-cluster-marker-inner {
    /* Size */
    width: 100%;
    height: 100%;

    /* Flexbox */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mvc .mvc-cluster-marker-count {
    color: var(--mvc-cluster-marker-font-col);
    text-align: center;
    line-height: unset;
}

/* =============================================================== */
/* ADVANCED SYMBOLOGY STATES */
/* =============================================================== */

/* Normal */

.mvc .leaflet-marker-icon.mvc-geodata-point-normal {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 100%;
    border: 1px solid #000;
    -webkit-filter: none;
            filter: none;
}

/* Selected */

.mvc .leaflet-marker-icon.mvc-geodata-point-selected {
    background-color: var(--mvc-row-selected);
    border-radius: 100%;
    border: 2px solid var(--mvc-col-primary-dark);
    -webkit-filter: none;
            filter: none;
}

/* Highlighted */

.mvc .leaflet-marker-icon.mvc-geodata-point-highlighted {
    background-color: var(--mvc-row-highlighted);
    border-radius: 100%;
    border: 2px solid var(--mvc-row-highlighted-dark-2);
    -webkit-filter: none;
            filter: none;
}

/* Hidden */

.mvc .leaflet-marker-icon.mvc-geodata-point-hidden {
    display: none;
}

/* =============================================================== */
/* BASIC SYMBOLOGY STYLING + STATES */
/* =============================================================== */

/* Pulsating animation */

@-webkit-keyframes pulse {
    from {
        stroke-opacity: 1;
        stroke-width: 0;
    }
    to {
        stroke-opacity: 0;
        stroke-width: 12px;
    }
}

@keyframes pulse {
    from {
        stroke-opacity: 1;
        stroke-width: 0;
    }
    to {
        stroke-opacity: 0;
        stroke-width: 12px;
    }
}

/* Points */

.mvc .mvc-geodata-point-normal {
}

.mvc .mvc-geodata-point-selected {
    -webkit-filter: var(--mvc-geodata-point-selected-filter);
            filter: var(--mvc-geodata-point-selected-filter);
}

.mvc .mvc-geodata-point-highlighted {
    -webkit-animation: pulse 1000ms ease-out infinite;
            animation: pulse 1000ms ease-out infinite;
}

.mvc .mvc-geodata-point-hidden {
    visibility: hidden;
}

/* Lines */

.mvc .mvc-geodata-line-normal {
	-webkit-filter: var(--mvc-geodata-line-outline-filter);
            filter: var(--mvc-geodata-line-outline-filter);
}

.mvc .mvc-geodata-line-selected {
    -webkit-filter: var(--mvc-geodata-line-selected-filter);
            filter: var(--mvc-geodata-line-selected-filter);
}

.mvc .mvc-geodata-line-highlighted {
    -webkit-animation: pulse 1000ms ease-out infinite;
            animation: pulse 1000ms ease-out infinite;
}

.mvc .mvc-geodata-line-hidden {
    visibility: hidden;
}

.mvc .mvc-geodata-line-hidden {
    visibility: hidden;
}

/* Areas */

.mvc .mvc-geodata-area-normal {
}

.mvc .mvc-geodata-area-selected {
    -webkit-filter: var(--mvc-geodata-area-selected-filter);
            filter: var(--mvc-geodata-area-selected-filter);
}

.mvc .mvc-geodata-area-highlighted {
    -webkit-animation: pulse 1000ms ease-out infinite;
            animation: pulse 1000ms ease-out infinite;
}

.mvc .mvc-geodata-area-hidden {
    visibility: hidden;
}