/* Base styles for sidebar items */
.Overview, .DataSharing, .cod, .rules, .class, .admin, .tradeclass, .tradeapproval, .tradelicense, .Employeemobility {
  align-self: stretch;
  height: 42px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
  background: #f3f5f7; /* Inactive state */
  color: #272727;
}

/* Active state */
.Overview.active, .DataSharing.active, 
.cod.active, .rules.active, 
.class.active, .admin.active, 
.tradeclass.active, .tradeapproval.active, .tradelicense.active {
  background: #586994; /* Blue highlight */
  color: white;
}
.SubmenuitemSpacer{
  height: 4px;
}
.DataSharing.active {
  height: 105px; /* Increased height when active to fit submenu */
}
.cod.active, .rules.active, .class.active, .admin.active, .tradeclass.active,
.tradeapproval.active, .tradelicense.active{
  height: 105px;
  }
.DataSharing.active .ActiveListInner {
  gap: 20px !important; /* Increased spacing between submenu items */
  align-self: stretch;
  padding-left: 48px;
  padding-right: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  height: auto; /* Remove fixed height constraint */
}

/* Tag styles */
.Tag {
  align-self: stretch;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

/* Text styles */
.OverviewText, .DataSharingText, .codText, .rulesText {
  flex: 1 1 0;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

/* Active text override */
.Overview.active .OverviewText, 
.cod.active .codText,
.DataSharing.active .DataSharingText {
  color: white;
  font-weight: 500;
}

.ActiveCodWorkflow {
  align-self: stretch;
  height: 103px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #586994;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ActiveCodWorkflowText {
  flex: 1 1 0;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

.ActiveClassifications {
  align-self: stretch;
  height: 103px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #586994;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ActiveClassificationsText {
  flex: 1 1 0;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

.ActiveFileAccessControl {
  align-self: stretch;
  height: 103px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #586994;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ActiveFileAccessControlText {
  flex: 1 1 0;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

.ActiveRuleSets {
  align-self: stretch;
  height: 82px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #586994;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ActiveRuleSetsText {
  flex: 1 1 0;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

.ActiveAdmin {
  align-self: stretch;
  height: 61px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #586994;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ActiveAdminText {
  flex: 1 1 0;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}

.ActiveListInner {
  align-self: stretch;
  padding-left: 48px;
  padding-right: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  display: flex;
  height: auto;
}

.ActiveListInnerCod,
.ActiveListInnerClass,
.ActiveListInnerFile,
.ActiveListInnerRule {
  align-self: stretch;
  height: 57px;
  padding-left: 48px;
  padding-right: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  display: flex;
}

.ActiveListInnerAdmin {
  align-self: stretch;
  height: 15px;
  padding-left: 48px;
  padding-right: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  display: flex;
}





.ActiveShareFiles,
.ActiveShareFolders,
.ActiveCreateWorkflow,
.ActiveManageWorkflows,
.ActiveTriggerPreemptively,
.ActiveLinkExpiration,
.ActiveFileDownload,
.ActiveApprovalWorkflows,
.ActiveRestrictSupplierAccess,
.ActiveRestrictFileAccess,
.ActiveManageUsers {
  width: 201px;
  color: white;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  word-wrap: break-word;
}


/* Hover effect to underline with white color */
.ActiveShareFiles:hover,
.ActiveShareFolders:hover,
.ActiveCreateWorkflow:hover,
.ActiveManageWorkflows:hover,
.ActiveTriggerPreemptively:hover,
.ActiveLinkExpiration:hover,
.ActiveFileDownload:hover,
.ActiveApprovalWorkflows:hover,
.ActiveRestrictSupplierAccess:hover,
.ActiveRestrictFileAccess:hover,
.ActiveManageUsers:hover {
  text-decoration: underline;
  text-decoration-color: white;
  cursor: pointer
}