 <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

        * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-image:background-image: url('https://nexus.swgtools.com/images/planets/<?=$factionalbground?>');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }

        .main {
            /*display: flex;*/
            justify-content: center;
            align-items: center;
            margin-top:0;
            width:100%;
            height: 100vh;
            max-witdh:1920px;
        }

        .container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 768px;
            padding: 30px;
            border-radius: 10px;
            background-color: transparent;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }

        .map-container {
            
            width: 100%;
            max-witdh:1920px;
        }
            
        .map {
            width: 100%;
            height: 100%;
        }

        .marker-container {
            position: relative;
            height: 100%;
            width: 28%;
            background-color:<?=$factionalbackground?>;
            border-radius:5px;
        }

        .marker-container > h1 {
            text-align: center;
            margin: 5px;
        }

        .marker {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px 10px;
            height: 230px;
        }

        .input-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 95%;
            margin: 10px;
        }

        .input-group > input {
            padding: 5px;
            outline: none;
            font-size: 17px;
            width: 170px;
        }

        .marker > button {
            width: 95%;
            padding: 5px;
            font-size: 14px;
            margin: 10px;
            cursor: pointer;
            border-radius: 5px;
            border: none;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            background-color: rgb(255, 255, 255);
        }

        .marker > button:hover {
            background-color: rgb(220, 220, 220);
        }

        .marked > h2 {
            text-align: center;
            margin-top: 10px;
        }

        #markedLocations {
            overflow-y: auto;
            height: 100%;
            list-style: none;
            
        }

        #markedLocations > li {
            /*display: flex;*/
            justify-content: left;
            align-items: left;
        }

        #markedLocations > li div {
           /* display: flex;*/
            justify-content: space-between;
            background-color: transparent;
            width: 90%;
            margin: 10px;
            
        }

        #markedLocations > li div button {
            font-size: 11px;
            color: rgb(0, 0, 255);
            text-decoration: underline;
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        #markedLocations > li div button:hover {
            color: rgb(88, 88, 255);
            text-decoration: none;
        }

        #markedLocations > li > button {
            background-color: lime;
            border: none;
            outline: none;
            font-size: 14px;
            margin-left: 5px;
            color: rgb(220, 20, 20);
            cursor: pointer;
            width: 20px;
        }

        #markedLocations > li > button:hover {
            background-color: rgb(220, 200, 200);
            color: rgb(240, 10, 10);
        }
        .leaflet-container {
    background: transparent;
    outline: 0;
}
.pulse {
    animation: pulsate 2s ease-out;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.3;
}
.pulse2 {
    animation: pulsate 3s ease-out;
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.3;
}

@keyframes pulsate {
    0% {transform: opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {transform: opacity: 0.0;}
}
.ipsum {
  background: <?=$factionalbackground?>;
  color:<?=$factionalcolor?>;
  height: 75%;
  width: 120px;
  z-index: 1000;
  position: absolute;
  top: 100px;
 right: 0;
 border-radius:5px;
  font-size:0.9em;
  border: 1px solid black;
  opacity:0.9;
  margin-right:5px;
}

.sidepanel-content {
			font-size: 0.8rem;
			opacity:0.9;
		}

		.sidepanel-content h5 {
			margin-top: 0;
			margin-bottom: 0;
		}

		.sidepanel-content a {
			text-decoration: none;
			font-size: 1rem;
			color: #199900;
			transition: color 0.3s ease-in;
		}

		.sidepanel-content a:hover {
			color: #116600;
			text-decoration: underline;
		}
 
    </style>