:root {
    --unviewed-default: rgb(255, 255, 100);
    --viewed-default: rgb(255, 255, 255);  
    
    --viewed-Up-gradient-0: rgb(255, 255, 255);      
    --viewed-Up-gradient-1: rgb(230, 255, 180);     
    --viewed-Up-gradient-2: rgb(204, 255, 160);      
    --viewed-Up-gradient-3: rgb(179, 255, 140);        
    --viewed-Up-gradient-4: rgb(153, 255, 120);     
    --viewed-Up-gradient-5: rgb(127.5, 255, 100);    
    --viewed-Up-gradient-6: rgb(102, 255, 100);
    --viewed-Up-gradient-7: rgb(76.5, 255, 100);
    --viewed-Up-gradient-8: rgb(51, 255, 100);
    --viewed-Up-gradient-9: rgb(25.5, 255, 100);
    --viewed-Up-gradient-10: rgb(0, 255, 100);

    --unviewed-Up-gradient-0: rgb(255, 255, 100);
    --unviewed-Up-gradient-1: rgb(229.5, 255, 100);
    --unviewed-Up-gradient-2: rgb(204, 255, 100);
    --unviewed-Up-gradient-3: rgb(178.5, 255, 100);
    --unviewed-Up-gradient-4: rgb(153, 255, 100);


    /* There was a weird glitch where the 0 gradients would be the colour of default yellow
    but would compile to the --viewed-Up-gradient-1 yellowish-green, to solve this you just copied and pasted
    the default yellow RGB in the 0 gradients until the yellow was correct */

    --viewed-Down-gradient-0: rgb(255, 255, 255);
    --viewed-Down-gradient-1: rgb(255, 230, 180);
    --viewed-Down-gradient-2: rgb(255, 204, 160);
    --viewed-Down-gradient-3: rgb(255, 179, 140);
    --viewed-Down-gradient-4: rgb(255, 153, 120);
    --viewed-Down-gradient-5: rgb(255, 127.5, 100);
    --viewed-Down-gradient-6: rgb(255, 102, 100);
    --viewed-Down-gradient-7: rgb(255, 76.5, 100);
    --viewed-Down-gradient-8: rgb(255, 51, 100);
    --viewed-Down-gradient-9: rgb(255, 25.5, 100);
    --viewed-Down-gradient-10: rgb(255, 0, 100);

    --unviewed-Down-gradient-0: rgb(255, 255, 100);
    --unviewed-Down-gradient-1: rgb(255, 229.5, 100);
    --unviewed-Down-gradient-2: rgb(255, 204, 100);
    --unviewed-Down-gradient-3: rgb(255, 178.5, 100);
    --unviewed-Down-gradient-4: rgb(255, 153, 100);
}


.marker-svg {
    transform-origin: 50% 100%;  /* scales around the bottom-center of the SVG */
}

#upArrow {
    fill: rgb(33, 202, 73);
    transform: scale(0.1) translate(3500px, 1900px); 
    transform-origin: 0 0; /* or whatever point you want as the origin */
}

#upMapIconArrow {
    fill: rgb(33, 202, 73);
    transform: scale(0.1) translate(1600px, 1700px); 
    transform-origin: 0 0; /* or whatever point you want as the origin */
}

#Up:hover #upArrow{
    animation: fillChangeUpArrow 0.1s forwards;
}

@keyframes fillChangeUpArrow {
    to { 
      fill: rgb(72, 154, 72);
    }
}

#downArrow {
    fill: rgb(255, 117, 117);
    transform: scale(0.1) translate(140px, 1900px); 
    transform-origin: 0 0; /* or whatever point you want as the origin */
}

#downMapIconArrow {
    fill: rgb(255, 117, 117);
    transform: scale(0.1) translate(110px, 1700px); 
    transform-origin: 0 0; /* or whatever point you want as the origin */
}

#Down:hover #downArrow{
    animation: fillChangeDownArrow 0.1s forwards;
}

@keyframes fillChangeDownArrow {
    to { 
      fill: rgb(202, 33, 73);
    }
}

.svg-text-content {
    font-family:'Roboto', sans-serif;
    font-weight: 500; 
}

.svg-bottom-text {
    font-family: Arial, sans-serif; /* Specify the font-family */
    font-size: 16px; /* Set the size of the text */
    /*font-weight: bold;  Make the text bold */
    fill: rgb(116, 116, 116);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0; /* Ensure no padding */
    overflow: hidden; /* Hide overflow */

}

#MaynoothMap {
    width: 100%;
    height: 100%;
    z-index: 1;
}

#buttonsContainer > div {
    fill: #7192ad;
    width: 60px;
    height: 50px; 
    border: none;
    position: fixed; 
    margin: 0;
    padding: 0;
    bottom: 1.5%; 
    z-index: 1000;
}

  #postButton {
    left: 5%; 
  }
  
  #toggleButton {
    left: 47%; 
  }
  
  #feedButton {
    right: 5%; 
  }

  @media (max-width: 768px) {

    #postButton, #toggleButton, #feedButton {
        bottom: 2%; 

    }

    #postButton {
        left: 5%; 
      }
      
      #toggleButton {
        left: 43%; 
      }
      
      #feedButton {
        right: 5%; 
      }
}

#inputPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute; /* Or fixed depending on your need */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; 
}


#customInput {
    font-family:'Roboto', sans-serif;
    font-weight: 500; 
    background-color: var(--viewed-default); 
    color: rgb(0, 0, 0); 
    border: none;              /* Removes any default borders */
    outline: none;             /* Removes the default focus outline */
    resize: none;
    overflow: hidden;

}

.closePopupLine {
    stroke: #EEEEEE;
    stroke-width: 3;
}


.postLine {
    stroke: var(--viewed-Up-gradient-10);
    stroke-width: 3;
}


#deleteButton, #fakePostBox, #timeTaken {
    position: fixed;
    z-index: 1000; 
}

#fakePostBox, #timeTaken {
    left: 32%;
}

#deleteButton {
    left: 6%;
}


#feedContainer {
    height: 35%; /* initially hidden */
    bottom: 10%;
    overflow-y: auto; /* ensures scrollability */
}

.clusterize-content {
    height: 100%;
    width: 100%; /* ensures full width */
}

.darken-svg {
    filter: brightness(70%);
}

/*index is [1][29]*/
.notification-circle-icon {
    display: none;
}

/*TODO: Make this an animation, as of now first thing the user observes the circle, it dissapears, so can't really tell there was a notification for that post*/
/* .hidden-option {
    display: none;
} */

.hidden-option {
    opacity: 0;
    visibility: hidden; /* Use visibility to remove the element from the interaction layer while it's invisible */
    transition: opacity 1s, visibility 1s;
}

.visible-option {
    display: block; /* or 'block', depending on desired display type */
}

#svgErrorContainer {
    position: absolute;  /* or 'absolute' or 'fixed' depending on your layout needs */
    top: 10%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjusts the positioning to truly center the div */
    z-index: 500;       /* Adjust z-index as needed to bring it above other content */
}

#splashScreen {
    position: absolute;  /* or 'absolute' or 'fixed' depending on your layout needs */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjusts the positioning to truly center the div */
    z-index: 500;       /* Adjust z-index as needed to bring it above other content */

}

/*TODO: 
Error, if there is no posts at all (even in the postData array) then the userPostData text 'Your post's will appear here' won't appear
This is not a problem since there will always be user posts, since I don't plan on mass deleting
Since the first people see it, there will be posts
*/
.no-svg-text-content {
    font-size: 42px;  /* Adjust as needed */
    height: 60%;
    text-align: center;
    position: absolute;  /* Use absolute positioning */
    left: 50%;  /* Move the left side of the element to the center of the container */
    transform: translateX(-50%);  /* Move the element back by half of its width */
}


.pulse-glow {
    animation: pulseEffect 0.5s ease-in-out;
    opacity: 0.8;
}

@keyframes pulseEffect {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.4); /* Scale the circle slightly */
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.circle-pulse { 
    /* Start with no shadow */
    border-radius:50%;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
    animation: pulseGlow 2s 1; /* Add the glowing pulse animation */
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); /* Faint red glow */
    }
    70% {
        box-shadow: 0 0 12.5px 12.5px rgba(255, 0, 0, 0); /* Larger glow, then fade out */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); /* No shadow */
    }
}

.pulse-circle {
    transform-origin: center; /* Ensure the SVG circle scales around its center */
}

/* Background Bar */
#buttonsBackgroundBar {
    position: fixed;
    bottom: 0;  /* Position at the bottom of the screen */
    left: 0;
    width: 100%;  /* Full width of the screen */
    height: 65px;  /* Adjust height as needed */
    background-color: rgba(0, 0, 0, .9);  /* Semi-transparent background */
    z-index: 999;  /* Ensure it's on top of Leaflet watermark */
}

/* Apply transition to all circles */
.transition-circle {
    transition: fill 0.2s ease;  
}

/* Darker blue when clicked */
.animated-darken {
fill: #4D6C85;  /* Darker blue */
}

/* Lighter blue (default state) */
.animated-lighten {
fill: #7192AD;  /* Lighter blue */
}

#splashScreen svg text {
font-family: 'Roboto', sans-serif;
font-weight: 500;
}

#splashScreen svg text.svg-bold {
    font-weight: bold; /* Ensure the bold class adds font weight */
}

#adminButtons {
    position: absolute;  /* or 'absolute' or 'fixed' depending on your layout needs */
    top: 10%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjusts the positioning to truly center the div */
    z-index: 500;       /* Adjust z-index as needed to bring it above other content */
    width: 100%
}

.fade-in {
    opacity: 0;
    animation: fadeInOut 4s forwards; /* Total duration: 6 seconds */
}

@keyframes fadeInOut {
    0% {
        opacity: 0; /* Start fully transparent */
    }
    25% {
        opacity: 1; /* Fade in by 1.5 seconds (25% of 6 seconds) */
    }
    75% {
        opacity: 1; /* Stay fully visible for 3 seconds (from 1.5s to 4.5s) */
    }
    100% {
        opacity: 0; /* Fade out over the last 1.5 seconds */
    }
}