html,
        body {
            height: 100%;
        }

        .tooltip {
            position: relative;
            padding: 3px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            opacity: 0.7;
            white-space: nowrap;
            font: 10pt sans-serif;
        }

        .btn-map {
            padding: 6px 10px;
            background: #FF9AA2;
            color: #ffffff;
            border-radius: 2px;
            opacity: 0.9;
        }

        .btn-map-selected {
            padding: 6px 10px;
            background: #ffffff;
            color: #FF9AA2;
            border-radius: 2px;
            opacity: 0.9;
        }

        .btn-map:hover {
            padding: 6px 10px;
            background: #D58187;
            color: #ffffff;
            border-radius: 2px;
            opacity: 0.9;
        }

        .btnedit {
            box-shadow: 0px 1px 0px 0px #fff6af;
            background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
            background-color: #ffec64;
            border-radius: 4px;
            border: 1px solid #ffaa22;
            display: inline-block;
            color: #333333;
            font-family: Arial;
            font-size: 12px;
            font-weight: bold;
            padding: 4px 6px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffee66;
        }

        .btnedit:hover {
            background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
            background-color: #ffab23;
        }

        .btndel {
            box-shadow: inset 0px 1px 0px 0px #fff6af;
            background: linear-gradient(to bottom, #ffc766 5%, #ff2424 100%);
            background-color: #ffc766;
            border-radius: 4px;
            border: 1px solid #ff2424;
            display: inline-block;
            cursor: pointer;
            color: #333333;
            font-family: Arial;
            font-size: 12px;
            font-weight: bold;
            padding: 4px 6px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffba66;
        }

        .btndel:hover {
            background: linear-gradient(to bottom, #ff2424 5%, #ffc766 100%);
            background-color: #ff2424;
        }

        @media (min-width: 276px) {

            .stylescroll {
                max-height: 200px;
                padding: 1rem;
                overflow-y: auto;
                direction: ltr;
                scrollbar-color: #d4aa70 #e4e4e4;
                scrollbar-width: thin;
            }

            .stylescroll::-webkit-scrollbar {
                width: 10px;
            }

            .stylescroll::-webkit-scrollbar-track {
                background-color: #e4e4e4;
                border-radius: 100px;
            }

            .stylescroll::-webkit-scrollbar-thumb {
                border-radius: 100px;
                border: 6px solid rgba(0, 0, 0, 0.18);
                border-left: 0;
                border-right: 0;
                background-color: #355CCD;
            }

            #legend_ket {
                width: 18%;
            }

            .modal-content {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                pointer-events: auto;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid rgba(0, 0, 0, .2);
                border-radius: 0.3rem;
                outline: 0;
                margin-left: 15%;
                margin-right: 1%;
            }

        }

        @media (min-width: 768px) {
            .stylescroll {
                max-height: 200px;
                padding: 1rem;
                overflow-y: auto;
                direction: ltr;
                scrollbar-color: #d4aa70 #e4e4e4;
                scrollbar-width: thin;
            }

            .stylescroll::-webkit-scrollbar {
                width: 10px;
            }

            .stylescroll::-webkit-scrollbar-track {
                background-color: #e4e4e4;
                border-radius: 100px;
            }

            .stylescroll::-webkit-scrollbar-thumb {
                border-radius: 100px;
                border: 6px solid rgba(0, 0, 0, 0.18);
                border-left: 0;
                border-right: 0;
                background-color: #355CCD;
            }

            #legend_ket {
                width: 18%;
            }

            .modal-content {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                pointer-events: auto;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid rgba(0, 0, 0, .2);
                border-radius: 0.3rem;
                outline: 0;
                margin-left: auto;
                margin-right: auto;
            }


        }

        @media (min-width: 992px) {
            .stylescroll {
                max-height: 500px;
                padding: 1rem;
                overflow-y: auto;
                direction: ltr;
                scrollbar-color: #d4aa70 #e4e4e4;
                scrollbar-width: thin;
            }

            .stylescroll::-webkit-scrollbar {
                width: 10px;
            }

            .stylescroll::-webkit-scrollbar-track {
                background-color: #e4e4e4;
                border-radius: 100px;
            }

            .stylescroll::-webkit-scrollbar-thumb {
                border-radius: 100px;
                border: 6px solid rgba(0, 0, 0, 0.18);
                border-left: 0;
                border-right: 0;
                background-color: #355CCD;
            }

            #legend_ket {
                width: 16%;
            }

            .modal-content {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 30%;
                pointer-events: auto;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid rgba(0, 0, 0, .2);
                border-radius: 0.3rem;
                outline: 0;
                margin-left: auto;
                margin-right: auto;
            }
        }


        /* Ol general fixes */
        .ol-control button {
            cursor: pointer;
        }

        .ol-control.ol-attribution {
            font-size: 11px;
        }

        .ol-control.ol-attribution a {
            color: #000;
        }

        .ol-control.ol-attribution a:hover {
            color: #0076ff;
        }

        /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        /* HTML5 display-role reset for older browsers */
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }

        body {
            line-height: 1;
            font-family: sans-serif;
        }

        ol,
        ul {
            list-style: none;
        }

        blockquote,
        q {
            quotes: none;
        }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }