html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            background: radial-gradient(circle, rgb(35, 69, 109) 0%, rgb(0 0 0) 100%);
        }

        body {
            &.newlegacy {
                .map-logo {
                    background-image: url(../images/uomaps-logo-nl.png)!important;
                }
            }
            &.menu {
                .map-main-menu {
                    display: block;
                }
                .leaflet-top.leaflet-right {
                    display: none;
                }
            }
        }

        #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            background: radial-gradient(circle, rgb(19 27 37) 0%, rgb(0 0 0) 100%);
        }
        @font-face {
            font-family: 'UOC';
            src: url('../font/uoc.ttf');
        }
        @font-face {
            font-family: 'Inter';
            src: url('../font/inter.otf');
        }
        @font-face {
            font-family: 'OSR';
            src: url('../font/osr.ttf');
        }
        * {
            font-family: 'OSR', sans-serif;
            font-size: 1rem;
        }

        :root {
            /*--primary-bg: rgb(31 50 75 / 70%);*/
            --primary-bg: rgb(25 40 60 / 70%);
            /*--primary-bg: rgb(30 30 30 / 70%);*/
            --secondary-bg: rgb(0 0 0 / 20%);
            --primary-acc: #f9db6e;
            

            
        }

        ::-webkit-scrollbar {
        width: 8px;
        }

        ::-webkit-scrollbar-track {
        background: #f1f1f1; 
        }
        
        ::-webkit-scrollbar-thumb {
        background: #888; 
        }
      
        ::-webkit-scrollbar-thumb:hover {
        background: #555; 
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }

        input[type="checkbox"] {
            
            box-sizing: border-box;
            width: 15px;
            height: 15px;
            margin: 0;
            margin-left: 0.25rem;
            padding: 0;
            appearance: none;
            background: var(--secondary-bg);
            border: 1px solid rgb(133 133 133 / 30%);
            outline: none;
            vertical-align: text-top;
            border-radius: 3px;
        }
        input[type="checkbox"]:checked {
            background-repeat: no-repeat;
            background-size: 0.8rem;
            background-position: center;
            padding: 2px;
            border: none;
            
        }

        input[type="checkbox"]:not(:disabled):checked {
            border-color: white;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23f9db6e" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
        }
        h1 {
            position: absolute;
            left: -9999px;
        }
        
        .leaflet-map-pane {
            /*filter: brightness(0.99) hue-rotate(-2deg);*/
        }
        .leaflet-bar a span {
            font-family: 'UOC', sans-serif;
            font-size: 1.3rem;
        }
        .leaflet-interactive{
            stroke-dasharray: 1 5;
            /*transition: all 0.2s ease;*/
        }
        .zoom-7 .leaflet-marker-icon {
            height: 50px !important;
            width: 50px !important;
            margin-left: -25px !important;
            margin-top: -25px !important;
        }
        .zoom-8 .leaflet-marker-icon {
            height: 75px !important;
            width: 75px !important;
            margin-left: -37.5px !important;
            margin-top: -37.5px !important;
        }
        .zoom-9 .leaflet-marker-icon {
            height: 150px !important;
            width: 150px !important;
            margin-left: -75px !important;
            margin-top: -75px !important;
        }
        
        
       
        .map-title {
            text-align: center;
            margin: 0;
            font-size: 1.5rem;
            white-space: nowrap;
            padding: 0.5rem 0.75rem;
        }
        
        .mouseposition {
            padding: 0.25rem 0.5rem;
            text-align: right;
        }
        .leaflet-popup-content-wrapper  {
            border-radius: 15px;
            backdrop-filter: blur(8px);
            border: 2px solid rgb(153 161 171 / 30%);
            color: white;
            user-select: none;
            background: var(--primary-bg);
            padding: 0.25rem 0.5rem;
            -webkit-text-stroke: 1px #000000;
            paint-order: stroke fill;
            
        }
        .leaflet-popup-content {
            margin: 0.5rem;
           /* white-space: nowrap;
            width: auto!important;*/
        }
        .leaflet-popup-tip-container  {
            display: none;
        }
        .leaflet-popup-content  p {
            margin: 0.5rem 0 1rem 0;
        }
        .leaflet-popup-content  .popup-title {
            display: block;
            color: var(--primary-acc);
            font-family: 'Inter', sans-serif;
            font-weight: bold;
            font-size: 1.1rem;
            -webkit-text-stroke: 1px #000000;
            paint-order: stroke fill;
            margin-right: 0.75rem;
        }
        .leaflet-popup-close-button span {
            color: white;
            font-size: 1.2rem;
            position: relative;
            top: 0.2rem;
            right: 0.2rem;
            &:hover {
                color: var(--primary-acc);
            }
        }
        .leaflet-popup-content a {
            color: white;
            text-underline-offset: 3px;
            text-decoration: underline 2px white;
            &:hover {
                color: var(--primary-acc);
                text-decoration-color: var(--primary-acc);
            }
            &::after {
            content: "";
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z"/></svg>');
            width: 13px;
            height: 13px;
            display: inline-block;
            /*vertical-align: middle;*/
            margin-left: 0.25rem;
            background-color: currentColor;
            }
        }
        .leaflet-tooltip {
            border-radius: 15px;
            backdrop-filter: blur(8px);
            border: 2px solid rgb(153 161 171 / 30%);
            color: white;
            user-select: none;
            background: var(--primary-bg);
            padding: 0.5rem;
            -webkit-text-stroke: 1px #000000;
            paint-order: stroke fill;
            margin: 0.5rem;
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
            &::before {
                content: none;
            }
        }
        
        .leaflet-control {
            border-radius: 15px;
            backdrop-filter: blur(8px);
            border: 2px solid rgb(153 161 171 / 30%);
            color: white;
            user-select: none;
            background: var(--primary-bg);
            padding: 0.5rem;
            -webkit-text-stroke: 1px #000000;
            paint-order: stroke fill;
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
           
        }
        .leaflet-bar  {
            
            
        }
        .closed .leaflet-bar {
            right: calc(-3.5rem);
        }
        .leaflet-control-rotate {
            margin:0 !important;
            border-radius: 0;
            border-radius: 15px;
            background: var(--secondary-bg);
                            border: 1px solid rgb(133 133 133 / 30%);
            backdrop-filter: none;
            &:after {
                content: "Rotate";
                font-size: 0.6rem;
                display: block;
                text-align: center;
            }
        }
        .leaflet-control-zoom {
            margin:0 !important;
            z-index: 801;
            border-radius: 15px;
            background: var(--secondary-bg);
                            border: 1px solid rgb(133 133 133 / 30%);
            backdrop-filter: none;
            &:after {
                content: "Zoom";
                font-size: 0.6rem;
                display: block;
                text-align: center;
            }
        }
        .closed .leaflet-control-zoom {
           
         }
        .leaflet-control-toggle {
           width: 30px;
           /*right: -3.4rem;*/
           border-radius: 0px 15px 15px 0px;
           position: absolute;
           box-shadow: 3px 5px 7px rgba(0, 0, 0, 0.2)!important;
           transition: all 0.1s ease-in-out;
           /*left: 300px;*/
           left: 318px;
        }
         .closed .leaflet-control-toggle {
            right: -3.75rem;
            border-radius: 15px;
         }
        .leaflet-bar a {
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            font-size: 1.2rem;
        }
        .leaflet-top.leaflet-left{
            width: fit-content;
            &.closed {
                .map-control {
                    left: -25rem;
                }
                .leaflet-control-toggle {
                    left: 0;
                    right: auto;
                }
            }
        }
        .leaflet-top.leaflet-right {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            border-radius: 15px;
            border: 2px solid rgb(153 161 171 / 30%);
            color: white;
            user-select: none;
            background: var(--primary-bg);
            padding: 0.75rem;
            right: 0.5rem;
            top: 0.5rem;
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
            &:before {
                content: "";
                position: absolute;
                inset: 0;
                backdrop-filter: blur(8px);
                z-index: -1;
                border-radius: 15px;
            }
        }
        .leaflet-rotate-toggle {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='2 3 25 25' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
            cursor: pointer;
            display: block;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: 50% center;
            transform: rotate(0deg);

            &.active {
                transform: rotate(45deg);
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='2 3 25 25' xmlns='http://www.w3.org/2000/svg' fill='%23f9db6e'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23333'/%3E%3C/svg%3E");

            }
            &:hover {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='2 3 25 25' xmlns='http://www.w3.org/2000/svg' fill='%23f9db6e'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23333'/%3E%3C/svg%3E");

            }
        }




        .leaflet-control-mapselect {
            margin: 0 !important;
            border-radius: 0;
            border-radius: 15px;
            background: var(--secondary-bg);
            border: 1px solid rgb(133 133 133 / 30%);
            backdrop-filter: none;
            &:after {
                content: "Map";
                font-size: 0.6rem;
                display: block;
                text-align: center;
            }
            .mapselect-toggle {
                border: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23ffffff'%3E%3Cpath d='M576 112C576 103.7 571.7 96 564.7 91.6C557.7 87.2 548.8 86.8 541.4 90.5L416.5 152.1L244 93.4C230.3 88.7 215.3 89.6 202.1 95.7L77.8 154.3C69.4 158.2 64 166.7 64 176L64 528C64 536.2 68.2 543.9 75.1 548.3C82 552.7 90.7 553.2 98.2 549.7L225.5 489.8L396.2 546.7C409.9 551.3 424.7 550.4 437.8 544.2L562.2 485.7C570.6 481.7 576 473.3 576 464L576 112zM208 146.1L208 445.1L112 490.3L112 191.3L208 146.1zM256 449.4L256 148.3L384 191.8L384 492.1L256 449.4zM432 198L528 150.6L528 448.8L432 494L432 198z'/%3E%3C/svg%3E");
                cursor: pointer;
                display: block;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: 50% center;
                &:hover {
                     filter: sepia(1) saturate(30) hue-rotate(333deg);  
                      color: var(--primary-acc);
                }
            }
            .mapselect-popout {
                position: absolute;
                top: 0;
                border-radius: 15px;
                backdrop-filter: blur(8px);
                border: 2px solid rgb(153 161 171 / 30%);
                color: white;
                user-select: none;
                background: var(--primary-bg);
                padding: 0.5rem;
                -webkit-text-stroke: 1px #000000;
                paint-order: stroke fill;
                box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
                transition: all 0.1s ease-in-out;
                right: -30rem;
                z-index: -1;
                &.active {
                    right: 4rem;
                }
                ul {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    display: flex;
                    gap: 1rem;
                    flex-wrap: wrap;
                    width: 400px;
                    justify-content: center;
                    li {
                        border-radius: 15px;
                        border: 2px solid rgb(153 161 171 / 30%);
                        color: white;
                        user-select: none;
                        background: var(--secondary-bg);
                        padding: 0.5rem;
                        -webkit-text-stroke: 1px #000000;
                        paint-order: stroke fill;
                        font-size: 0.7rem;
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                        flex-flow: column;
                        gap: 0.25rem;
                        flex: 0 0 calc(25% - 2rem);
                        &:hover {
                            color: var(--primary-acc);
                            &:before {
                                filter: sepia(1) saturate(30) hue-rotate(333deg);  
                            }
                            cursor: pointer;
                        }
                        &:before {
                                content: "";
                                background: url(../images/britannia.png) no-repeat;
                                background-size: contain;
                                height: 50px;
                                width: 50px;
                                display: block;
                            }
                        &.popout-item-ilsh {
                            &:before {
                                background: url(../images/ilshenar.png) no-repeat;
                                background-size: contain;
                            }
                        }
                        &.popout-item-mal {
                            &:before {
                                background: url(../images/malas.png) no-repeat;
                                background-size: contain;
                            }
                        }
                        &.popout-item-tok {
                            &:before {
                                background: url(../images/tokuno.png) no-repeat;
                                background-size: contain;
                            }
                        }
                        &.popout-item-ter {
                            &:before {
                                background: url(../images/termur.png) no-repeat;
                                background-size: contain;
                            }
                        }
                    }
                }
            }
        }































        
       
        
        
       
        
        .tmapImage {
            margin-top: 1.25rem;
             
            &:not([src]) {
                margin:0;
            }
            &[src=""] {
                margin: 0;
            }
        }
        .tmapImageMap {
            margin-top: 1.25rem;
                
        }
        .tmapUpload{
            position: relative;
            color: white;
            display: inline-block;
            width: calc(100% - 3.5rem);
            margin: 0 0.75rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--secondary-bg);
            border-radius: 15px;
            padding: 0.5rem 1rem;
            color: white;
            border: 1px solid rgb(133 133 133 / 30%);
            &.dragging {
                padding: 2rem 1rem;
                border: 2px dashed rgb(133 133 133 / 50%);
                background: rgb(119 119 119 / 30%);
            }
            
        }
        input[type='file'] {
            display: none;
        }
        .tmapReader{
            position: relative;
            margin: 1rem 0 0.5rem 0;
            display: flex;
            flex-direction: column;
           
            overflow: hidden;
            .tmapImageMap {
                display: none;
            }
            &.active {
                .tmapImage {
                    display: none;
                }
                .tmapImageMap {
                    display: block;
                }
                .tmapReset {
                    display: block;
                }
            }
        }
        .tmapPins {
            position:absolute;
            left: -9999px;
        }
        .tmapReset {
            display: none;
            background: var(--secondary-bg);
            border-radius: 15px;
            border: none;
            border: 1px solid rgb(133 133 133 / 30%);
            color: white;
            cursor: pointer;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            &:hover {
                color: var(--primary-acc);
            }
        }
        .tmapHelp {
            position: absolute;
            top: 4px;
            margin-left: 5px;
            color: black;
            background-color: white;
            border-radius: 999px;
            height: 16px;
            width: 16px;
            text-align: center;
            font-size: 0.75rem;
            font-weight: bold;
            -webkit-text-stroke: 0;
            &:hover {
                background: #a4d6ff;
                cursor: pointer;
            }
        }
        .tmapCompare {
            width: 100%;
        }
        .tmapOverlay {
            visibility: hidden;
            width: 100%;
            position: absolute;
            height: calc(100% - 6.75rem);
            top: 5.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            color: white;
            /*text-shadow: #000000 3px 5px 2px, 2px 2px 2px rgba(102, 231, 222, 0);*/
        }
        .tmapOverlay:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 3px;
            border-radius: 100px;
            background: #66e7de;
            box-shadow: 0 0 70px 20px #66e7de;
            clip-path: inset(0);
            animation: x 1s ease-in-out infinite alternate, y 2s ease-in-out infinite;
        }

        @keyframes x {
        to {
            transform:translateX(-100%);
            left:100%;
        }
        }

        @keyframes y {
        33% {
            clip-path:inset(0 0 0 -100px);    
        }
        50% {
            clip-path:inset(0 0 0 0);    
        }
        83%{
            clip-path:inset(0 -100px 0 0); 
        }
        }
        .leaflet-modal .modal-content {
            border-radius: 15px;
            backdrop-filter: blur(8px);
            border: 2px solid rgb(153 161 171 / 30%);
            color: white;
            user-select: none;
            background: var(--primary-bg);
            padding: 0.5rem;
            -webkit-text-stroke: 1px #000000;
            paint-order: stroke fill;
            cursor: auto;
            overflow: hidden;
            transition: margin 0.1s linear;
            u {
                margin-right: 0.5rem;
                text-underline-offset: 3px;
                text-decoration-thickness: 2px;
                text-decoration-color: white;
            }
        }
       
        .leaflet-modal h2 {
            margin: -0.5rem -0.5rem 0.5rem -0.5rem;
            padding: 0.5rem 1rem 0.25rem 1rem;
            font-weight: bold;
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            background: var(--secondary-bg);
        }
        .leaflet-modal .close {
            color: white;
            opacity: 1;
            font-weight: 100;
            font-size: 1.25rem;
            position: relative;
            top:0.2rem;
            right: 0.3rem;
            cursor: pointer;
            &:hover {
                color: var(--primary-acc);
            }
        }
        








.map-control {
    /*width: calc(100% - 1.5rem);
    max-width: 300px;*/
    width: 300px;
    transition: all 0.1s ease-in-out;
    border-radius: 15px 0px 15px 15px;
    left: 0;
    
    
    .map-control-wrap {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 2.25rem);
        width: calc(100% + 0.5rem);
        position: relative;
        left: -.25rem;
        right: -0.25rem;
        .sectionTitle {
            position: relative;
            left: 0.75rem;
            color: var(--primary-acc);
            font-family: 'Inter', sans-serif;
                font-size: 1.1rem;
                font-weight: bold;
                -webkit-text-stroke: 1px #000000;
                paint-order: stroke fill;
        }
        .map-logo {
            background: url(../images/uomaps-logo.png);
            width: 100%;
            height: 117px;
            margin-bottom: 5px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(1.25);
            &:after {
                content: "BETA";
                display: block;
                position: absolute;
                top: 0px;
                right: 5px;
                color: var(--primary-acc);
                font-weight: bold;
                -webkit-text-stroke: 1px #000000;
                paint-order: stroke fill;
                font-size: 1.1rem;
            }
        }
        .map-control-show {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 0 0.75rem;
            position: relative;
            margin-top: 1rem;
            &::before {
                position: absolute;
                top: 0;
                bottom: 0;
                left: -0.35rem;
                right: -0.35rem;
                content: "";
                
                z-index: -1;
            }
            &::after {
                position: absolute;
                top: 3px;
                bottom: -3px;
                left: -0.35rem;
                right: -0.35rem;
                content: "";
                z-index: -1;
            }
            .map-control-button {
                background: var(--secondary-bg);
                border-radius: 15px;
                padding: 0.5rem 1rem;
                width: 100%;
                border: none;
                color: white;
                border: 1px solid rgb(133 133 133 / 30%);
                
                &:hover {
                    color: var(--primary-acc);
                    cursor: pointer;
                }
            }
        }
        .map-control-item-container {
            position: relative;
            margin-top: 1rem;
            .map-control-item {
                padding: 0 0.25rem;
                position: relative;
                &:hover {
                    label {
                        color: var(--primary-acc)!important;
                    }
                    input[type="checkbox"] {
                        border: 1px solidvar(--primary-acc);
                    }
                }
                img {
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: -1;
                }
                label {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    cursor: pointer;
                    padding: 0.25rem;
                    gap: 5px;
                }
            }
        }
        .goto-control {
            position: relative;
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            .goto-inner {
                background: var(--secondary-bg);
                border-radius: 15px;
                margin: 0 0.75rem;
                padding: 0 0.5rem 0 1rem;
                border: none;
                color: white;
                border: 1px solid rgb(133 133 133 / 30%);
                display: flex;
                justify-content: space-between;
                align-items: center;

                &:focus-within, &:hover {
                    input {
                        border-bottom: 2px solid rgb(153 161 171 / 50%);
                    }
                }
                input {
                width: 6rem;
                background: none;
                border: none;
                color: white;
                
                &:focus, &:not(:placeholder-shown) {
                    border-bottom: 2px solid var(--primary-acc);
                    outline: 0;
                }
            }
            .gotoButton {
                /*font: bold 22px 'Lucida Console', Monaco, monospace;*/
                color: white;
                background: none;
                padding: 0.5rem;
                border: none;
                cursor: pointer;
                font-size: 1.3rem;
                font-family: 'UOC', sans-serif;
                position: relative;
                top: 0.15rem;
                &:hover{
                    color: var(--primary-acc);
                }
            }
            }
             .gotoHelp {
                position: absolute;
                top: 4px;
                margin-left: 5px;
                color: black;
                background-color: white;
                border-radius: 999px;
                height: 16px;
                width: 16px;
                text-align: center;
                font-size: 0.75rem;
                font-weight: bold;
                -webkit-text-stroke: 0;
                &:hover {
                    background: #a4d6ff;
                    cursor: pointer;
                }
            }
        }
    }
}















.map-main-menu {
    display: none;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    .map-menu-logo {
        background: url(../images/uomaps-logo.png);
        width: 100%;
        height: 225px;
        margin-bottom: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: brightness(1.25);
    }
    .map-menu-cont {
        border-radius: 15px;
        backdrop-filter: blur(8px);
        border: 2px solid rgb(74 87 103 / 30%);
        color: white;
        user-select: none;
        background: rgb(0 0 0 / 40%);
        padding: 0.5rem 1rem;
        -webkit-text-stroke: 1px #000000;
        paint-order: stroke fill;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        max-width: 600px;
        width: calc(100% - 2rem - 4px);
        ul {
            list-style: none;
            padding-left: 2rem;
            li {
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 0.5rem;
                &:before {
                    content: "";
                    background: url('../images/arrow-gold.png');
                    background-size: contain;
                    height: 20px;
                    width: 20px;
                    display: inline;
                    position: absolute;
                    left: -1.5rem;
                    filter:brightness(1.5);
                }
            }
        }
        .map-menu-options {
            display: flex;
            justify-content: space-around;
            padding: 1rem 0;
            .map-menu-button {
                background-size: cover !important;
                height: 200px;
                width: 200px;
                display: block;
                font-size: 0;
                text-decoration: none;
                transition: all 0.2s ease;
                cursor: pointer;
                &.prod {
                    background: url(../images/production-shards-button.png);
        
                }
                &.nl {
                    background: url(../images/new-legacy-shard-button.png);
                }
                &:hover {
                    filter: brightness(1.3) contrast(1.2);
                }
            }
        }
    }
}
















.leaflet-marker-icon {
    &[alt="emberwing"] { filter: hue-rotate(-22deg) saturate(10) brightness(0.5) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="grobu"], &[alt="pachuxo"] { filter: hue-rotate(154deg) saturate(0.3) brightness(0.5) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="thunderhoof"] { filter: hue-rotate(206deg) saturate(0.8) brightness(1.2) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="draalwyrm"] { filter: hue-rotate(229deg) saturate(0.7) brightness(1.3) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="snarltooth"] { filter: saturate(0) brightness(1.3) contrast(1.5) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="cinderclaw"] { filter: hue-rotate(-22deg) saturate(3) brightness(0.5) contrast(2) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="arantress"] { filter: hue-rotate(30deg) saturate(2) brightness(0.5) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="arctos"] { filter: saturate(0) brightness(1.7) contrast(0.7) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="frostpaw"] { filter: sepia(1) hue-rotate(170deg) saturate(0.6) brightness(1) contrast(0.9) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="flameofabrahel"] { filter: hue-rotate(347deg) sepia(1) saturate(15) contrast(0.9) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="shadowmane"] { filter: hue-rotate(34deg) saturate(15) brightness(0.45) contrast(2) saturate(0.1) contrast(1.1) brightness(2.5) saturate(0.5) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
    &[alt="blazetail"] { filter: sepia(1) hue-rotate(313deg) saturate(3.5) brightness(0.6) contrast(1.3) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white); }
}