/* The container <div> - needed to position the dropdown content */
.dropdown {
    /* position: relative; */
    display: inline-block;
    height: 32px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    font-size: 14pt;
    font-weight: normal;
    position: absolute;
    background-color: #FFFFFF;
    border: 1px #0070C0 solid;
    box-shadow: 0 0 6px #0070C0;
    min-width: 280px;
    margin: -10px 0 0 0;
    z-index: 1;
}

.dropdown-content > ul {
	list-style-type: none;
	margin: 5px;
    padding: 5px;
}

.dropdown-content > ul > li {
    padding: 5px;
}

.dropdown-content > ul > li > a {
	align-items: center;
	color: #000000;
	cursor: pointer;
	display: flex;
    text-decoration: none;
    padding: 5px;
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Style for the specific LI that contains the submenu */
.has-submenu {
    position: relative; /* Essential for positioning the submenu relative to this LI */
}

.has-submenu::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as needed for spacing */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid #0070C0; /* Triangle color */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Style for the "Content Plan" submenu */
/* Change color of dropdown links on hover */
.submenu a:hover {background-color: #A6CAEC}
.submenu {
    display: none; /* Hidden by default */
    position: absolute;
    left: 100%; /* Position it to the right of the parent li */
    top: 0; /* Align it with the top of the parent li */
    background-color: #FFFFFF; /* A different background for distinction */
    padding: 2px;
    border: 1px solid #ccc;
    white-space: nowrap; /* Prevent text from wrapping */
    z-index: 2; /* Ensure it appears above other elements */
}
/* Show the submenu when hovering over the parent LI */
.has-submenu:hover .submenu {
    display: block; /* Show the submenu on hover */
}
.dropdown-content li {
    padding: 0;
}
.dropdown-content li a {
    text-decoration: none;
    color: black;
    display: block;
}

.dropdown-content li:hover {
    background-color: #ddd;
}
/* Optional: Add some padding to the dropdown-content ul and li for better spacing */
.dropdown-content ul {
    padding: 0;
    margin: 0;
    min-width: 140px;
    list-style: none;
}
.dropdown-content > ul > li > a > img {
    height: 60px;
    width: 60px;
    padding-right: 5px;
    border-radius: 50%;
}
/* Spinner CSS */
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.loading-spinner::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #FF3D00 transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.menu-container {
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 0;
    background-color: white;
}

.action-list {
    list-style: none;
}

.action-list li {
    position: relative;
    margin: 0;
    padding: 5px 10px;
}

.action-list li.disabled {
    pointer-events: none; 
    opacity: 0.5; 
    cursor: default;
}

.action-list li a {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-left: 2px solid transparent;
}

.action-list li a img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.action-list li:hover a,
.action-list li.active a {
    background-color: #e6f2ff;
    border-left-color: transparent;
}

.action-list li:hover,
.action-list li.active {
    background-color: #e6f2ff;
    z-index: 0;
}

.action-list li.active a {
    padding-left: 10px;
}