/* General Container */
.compass-rose-container {
    text-align: center; /* Center the entire compass rose */
    /* Remove background-image - it interferes with the rose itself */
}

/* Main Compass Rose Circle */
.compass-rose {
    position: relative;
    width: 150px; /* Increased size for better visibility */
    height: 150px; /* Increased size for better visibility */
    margin: 20px auto; /* Center horizontally, adjust top margin as needed */
    border-radius: 50%; /* Make it a circle */
    border: 2px solid black; /* Slightly thicker border */
    background-color: rgba(255, 255, 255, 0.8); /* Add a semi-transparent white background for readability */
}

/* Base Styling for Direction Letters/Links */
.compass-rose div {
    position: absolute; /* Allows precise placement within the circle */
    font-size: 1em; /* Slightly smaller to fit better in the circle */
    font-weight: 300;
    color: #ddd; /* Consistent text color for letters */
    text-decoration: none; /* Remove underlines from links */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.compass-rose a {
    color: inherit; /* Inherit the color from the parent div */
}

.compass-rose a:hover {
    color: darkblue; /* Change link color on hover */
}


/* Positioning the Directions */

/* Cardinal Directions */
.compass-rose-n {
    top: 5px; /* Fine-tune spacing */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
}

.compass-rose-s {
    bottom: 5px; /* Fine-tune spacing */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
}

.compass-rose-e {
    right: 5px; /* Fine-tune spacing */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
}

.compass-rose-w {
    left: 5px; /* Fine-tune spacing */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
}

/* Intermediate Directions */
.compass-rose-ne {
    top: 25px; /* Fine-tune spacing */
    right: 25px;
}

.compass-rose-se {
    bottom: 25px; /* Fine-tune spacing */
    right: 25px;
}

.compass-rose-nw {
    top: 25px; /* Fine-tune spacing */
    left: 25px;
}

.compass-rose-sw {
    bottom: 25px; /* Fine-tune spacing */
    left: 25px;
}

/* Up/Down Directions (Stair Icons) */
.compass-rose-u,
.compass-rose-d {
    font-family: monospace; /* Use a monospace font for the icons */
    font-size: 1.5em; /* Slightly smaller icon size */
    position: absolute;
    color: #555; /* Muted color for the icons */
}

.compass-rose-u {
    top: 50%;
    left: -30px; /* Adjust position to the left of the rose */
    transform: translateY(-50%);
}

.compass-rose-d {
    top: 50%;
    right: -30px; /* Adjust position to the right of the rose */
    transform: translateY(-50%);
}

/* Hover and Open States */
.compass-rose div:hover,
.compass-rose a:hover {
    color: darkblue; /* Hover color for all directions */
}

.compass-rose > div {
  cursor: pointer; /* Make it clear they are clickable */
  padding: 5px;
  /* No border on the inner divs */
}

.compass-rose > div.open {
  background-color: rgba(240, 240, 240, 0.5); /* Highlight the opened direction with transparency */
  font-weight: bold;
}

[class^="compass-rose-"].open::after {
  content: "\f2ce"; /* FontAwesome stair icon */
  font-family: FontAwesome;
  font-size: 1.5em; /* Adjust icon size */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: darkgreen; /* Adjust the color of the icon when open */
}
.roomdes {
	font-family: Arial;
	font-size: 9px;

}
#founditem {
	font-size:12px !important;
    color:black !important;
}
#founditem a {
	color:darkred !important;
}
#founditem a:hover {
color: darkmagenta !important;
}

img.item-image {
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}