.parameter-bottom-bar {
    border-top: 2px solid #ccc;
    padding-bottom:1rem;
}


div.margin {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* Add consistent margins to all admonition and reference box elements */
.admonition,
[class*="-reference"],
.sd-card,
div.margin {
    margin-bottom: 1.5rem !important;
    margin-top: 1.5rem !important;
    clear: both; /* Prevent elements from wrapping around boxes */
}

.admonition.note.small-note {
  font-size: 0.75em;  /* Make text smaller */
  margin-left: 3em;   /* Indent further if desired */    /* Adjust padding to your preference */
}



.item-required {
  color: #e53935 !important; /* Red text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-required-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
} 


/* Reference styling for item-dark-blue */
.optional-reference {
  color:  #1668C3 !important; /* Slightly darker blue than #1E88E5 */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important;
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important;
}

.optional-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


.page-reference {
  color: #263238 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #546e7a !important;
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.item-reference {
    /* Remove or reduce the big margin the wildcard rule gave them */
    margin: 0 .4em !important;  /* small left/right spacing is often enough */
    display: inline-block !important;
    vertical-align: middle;
    font-size: 0.8rem !important;

}



.page-reference,
.table-reference {
  /* Remove or reduce the big margin the wildcard rule gave them */
  margin: 0 .4em !important;  /* small left/right spacing is often enough */
  display: inline-block !important;
  vertical-align: middle;
  font-size: 0.8rem !important;
}



.admonition.result {
    background-color: #f5f5f5;
    border-left: 4px solid #28a745;
    padding: 0.75em 1em;
}
.admonition.result .admonition-title::before {
    content: "✔ ";
    color: #28a745;
    font-weight: bold;
}

.page-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23546e7a"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.hide-icon-text {
  color: transparent;      /* or color: rgba(0,0,0,0) */
  font-size: 0;
  line-height: 0;
}


.page-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.section-reference {
  color: #212121 !important;            /* A dark, legible grey for text */
  font-weight: 600 !important;
  background-color: #F5F5F5 !important;   /* A very light grey for a soft background */
  border: 1px solid #BDBDBD !important;   /* A medium grey for clear boundaries */
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.section-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23757575"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.section-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}



.subsection-reference {
  color: #C2185B !important;
  font-weight: 600 !important;
  background-color: #FCE4EC !important;
  border: 1px solid #E91E63 !important;
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.subsection-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E91E63"><path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.subsection-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.tab-reference {
  color: #546e7a !important;
  font-weight: 600 !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #546e7a !important;  /* Thicker and darker border for better contrast */
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.tab-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23546e7a"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.tab-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.table-reference {
  color: #00695C !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  background-color: #E0F2F1 !important;
  border: 1px solid #009688 !important;
  border-radius: 2px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.table-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23009688"><path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.table-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.column-reference {
  color: #212121 !important; /* Darker text */
  font-weight: 600 !important;
  background-color: #EEEEEE !important; /* Light grey background */
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.column-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23616161"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H4V5h10v4h8v10z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.column-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-reference {
  color: #212121 !important; /* Darker text */
  font-weight: 600 !important;
  background-color: #F5F5F5 !important; /* Light grey background */
  border-radius: 2px !important;
  padding: 1px 3px !important; /* No extra left padding since there's no icon */
  position: relative !important;
}

.item-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.red-reference {
  color: #D32F2F !important; /* Bold red text */
  font-weight: 600 !important;
  background-color: #FFEBEE !important; /* Very light red background */
  border-radius: 3px !important;
  padding: 2px 6px !important; /* No extra left padding since there's no icon */
  position: relative !important;
}

.red-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}



.item-grey-reference span.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.action-reference {
  color: #929091 !important;/* Pink text to match the colors in the screenshot */
  font-weight: 500 !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

/**
.action-reference::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  display: block !important; /* Show the icon / 
}
*/


.action-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.code-reference {
  color: #1A237E !important; /* Dark navy blue text */
  font-weight: 500 !important;
  background-color: #E8EAF6 !important; /* Very light indigo background */
  border-radius: 3px !important;
  padding: 2px 5px !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; /* Monospace font */
  white-space: nowrap !important;
  position: relative !important;
}

.code-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-purple-reference {
  color: #5c038598 !important;/* Purple text to match the colors in the screenshot */
  font-weight: 600 !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-purple-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}




.item-grey-reference {
  color: #929091 !important;/* Pink text to match the colors in the screenshot */
  font-weight: 500 !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-grey-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}




.item-pink-reference {
  color: #e40cd2 !important;/* Pink text to match the colors in the screenshot */
  font-weight: 500 !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-pink-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}





.item-blue-reference {
  color: hwb(208 8% 23%) !important;/* Purple text to match the colors in the screenshot */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-blue-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-cyan-reference {
  color: #46B2B6 !important; /* Cyan text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background like item-blue */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border like item-blue */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-cyan-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-green-reference {
  color: #2E7D32 !important; /* Green text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background like item-blue */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border like item-blue */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-green-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-orange-reference {
  color: #FF9800 !important; /* Orange text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background like item-blue */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border like item-blue */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-orange-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-deepblue-reference {
  color: #2196F3 !important; /* Deep blue text matching the image */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background like item-blue */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border like item-blue */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-deepblue-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.item-teal-reference {
  color: #009688 !important; /* Teal text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background like other item styles */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border like other item styles */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-teal-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}




.item-active-status {

  color: #1E88E5 !important; /* Blue text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}


.item-active-status-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;

}


.in-process-status {

  color: #26C6DA !important; /* Red text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}


.in-process-status-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;

}



.item-required {
  color: #e53935 !important; /* Red text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-required-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
} 


/* Reference styling for item-dark-blue */
.optional-reference {
  color:  #1668C3 !important; /* Slightly darker blue than #1E88E5 */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important;
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important;
}

.optional-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}



.item-red-reference {
  color: #e53935 !important; /* Red text */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

.item-red-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
} 

/* Styling for inline role 'item-dark-blue' */
.item-dark-blue {
  color:  #1668C3; /* Slightly darker blue than #1E88E5 */
  font-weight: normal !important;
  background-color: #F5F5F5 !important; /* Light gray background */
  border-radius: 3px !important;
  padding: 2px 5px !important; /* Smaller padding */
  position: relative !important;
  border: 1px solid #E0E0E0 !important; /* Light gray border */
  font-size: 0.9em !important; /* Slightly smaller font */
}

/* Reference styling for item-dark-blue */
.item-dark-blue-reference {
    color:  #1668C3 !important; /* Slightly darker blue than #1E88E5 */
    font-weight: normal !important;
    background-color: #F5F5F5 !important; /* Light gray background */
    border-radius: 3px !important;
    padding: 2px 5px !important;
    position: relative !important;
    border: 1px solid #E0E0E0 !important; /* Light gray border */
    font-size: 0.9em !important;
}

.item-dark-blue-reference span.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Search admonition style */
.admonition.search {
  border-left: 4px solid #7986CB !important;
}
.admonition.search > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #3F51B5 !important;
  font-weight: bold !important;
}
.admonition.search > .admonition-title::before {
  content: "\f002"; /* Search icon from Font Awesome */
  font-family: "FontAwesome";
  margin-right: 0.5em;
}

/* Admonition styles for status-based admonitions using standard directives with custom classes */

/* All status - Matching item-deepblue */
.admonition.all-status {
  border-left: 4px solid #2196F3 !important;
}
.admonition.all-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #2196F3 !important;
  font-weight: bold !important;
}

/* Upload Pending - Matching item-cyan */
.admonition.upload-pending-status {
  border-left: 4px solid #46B2B6 !important;
}
.admonition.upload-pending-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #46B2B6 !important;
  font-weight: bold !important;
}

/* Pending Approval - Matching item-orange */
.admonition.pending-approval-status {
  border-left: 4px solid #FF9800 !important;
}
.admonition.pending-approval-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #FF9800 !important;
  font-weight: bold !important;
}

/* Completed - Matching item-green */
.admonition.completed-status {
  border-left: 4px solid #2E7D32 !important;
}
.admonition.completed-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #2E7D32 !important;
  font-weight: bold !important;
}

/* Teal - Matching item-teal */
.admonition.teal-status {
  border-left: 4px solid #009688 !important;
}
.admonition.teal-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #009688 !important;
  font-weight: bold !important;
}

/* Blue - Matching item-blue */
.admonition.blue-status {
  border-left: 4px solid #673AB7 !important; 
}
.admonition.blue-status > .admonition-title {
  background-color: #F5F5F5 !important;
  color: #673AB7 !important;
  font-weight: bold !important;
}

.custom-dropdown {
  background-color: light-green; /* light blue background */
  border: 1px solid #ccc;   /* a subtle border */
  padding: 1em;
}

a[href^="https://upload-"],
a[href^="https://example-"],
a[href^="https://fake-"] {
  pointer-events: none;
  text-decoration: none; /* optional if you want to remove underline */
  color: inherit;        /* optional if you want to keep normal text color */
}

/* Immediately hide .dropdown content until JS finishes */
.sd-toggle-dropdown > .sd-card {
    display: none;
  }

.sd-toggle-dropdown.sd-toggle-open > .sd-card {
    display: block;
}

/* Make card images larger */
.sd-card-img-large {
  height: 200px; /* Adjust this value as needed */
  object-fit: cover; /* This ensures the image covers the area without distortion */
  width: 100%;
}

/* Make card body smaller to give more space to the image */
.sd-card-body-small {
  padding: 0.5rem !important;
  min-height: 60px; /* Adjust based on your text needs */
}

/* Make card header smaller if needed */
.sd-card-header-small {
  padding: 0.5rem !important;
}

/* Dashboard Screenshot Card Styling */
.dashboard-screenshot-card {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.dashboard-screenshot-body {
  padding: 0 !important;
}

.dashboard-screenshot-body img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style for tippy-ref role - make it look like a standard hyperlink */
.tippy-reference {
  color: #0645ad !important; /* Standard link blue */
  text-decoration: underline !important;
  background: none !important; 
  border: none !important;
  padding: 0 !important;
  font-weight: normal !important;
  display: inline !important;
}

.tippy-reference:hover {
  color: #0B0080 !important; /* Darker blue on hover */
  text-decoration: underline !important;
}

.standard-link {
  color: #3498db !important; /* Standard hyperlink blue color */
  text-decoration: underline !important;
  background: none !important; /* Remove any background */
  border: none !important; /* Remove any border */
  padding: 0 !important; /* Remove any padding */
  font-weight: normal !important; /* Regular font weight */
  display: inline !important;
  position: static !important; /* Reset position if needed */
}

.standard-link:hover {
  color: #1a5a9e !important; /* Darker blue on hover */
  text-decoration: underline !important;
}

/* Style for small-icon role - make icons smaller */
.small-icon-reference {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.small-icon-reference img {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
  margin: 0 2px;
}

/* Style for category role - for sidebar navigation items */
.category-reference {
  color: #D84315 !important; /* Deep orange text */
  font-weight: 600 !important;
  background-color: rgba(255, 224, 178, 0.7) !important; /* Light orange background with transparency */
  border: 1px solid #FF9800 !important; /* Lighter orange border */
  border-radius: 3px !important;
  padding: 0px 10px 0px 26px !important;
  position: relative !important;
}

.category-reference::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M4 18h16c1.1 0 2-.9 2-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2zm0-11h4v5H4V7zm0 7h4v2H4v-2zm6-7h10v9H10V7zm0 11h4v2h-4v-2zm6 0h4v2h-4v-2z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.category-reference span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Main container */
.admonition.action-complete {
  display: flex;
  flex-direction: column;
  border-left: 6px solid #28a745;
  border-radius: 4px;
  margin: 1rem 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0;
  background-color: transparent;
}

/* Header section - IMPORTANT CHANGES HERE */
.admonition.action-complete > .admonition-title {
  display: flex;
  align-items: center;
  background-color: #d4edda;
  color: #28a745;
  font-weight: 500;
  padding: 0.75rem 1rem;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  
  /* This is crucial - ensures no default icon appears */
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 20px;
}

/* This specifically removes the bell or any other icons */
.admonition.action-complete > .admonition-title::before {
  content: none !important;
  display: none !important;
}

/* Also ensure no other pseudo-elements are adding the bell */
.admonition.action-complete > .admonition-title::after {
  content: none !important;
  display: none !important;
}

/* Content section */
.admonition.action-complete > .admonition-content {
  padding: 1rem;
  background-color: white;
}

/* Link styling */
.admonition.action-complete a {
  color: #4299e1;
  text-decoration: none;
}

.admonition.action-complete a:hover {
  text-decoration: underline;
}



@media (max-width: 768px) {
  /* Make inline reference badges smaller on phones/tablets */
  .page-reference,
  .section-reference,
  .subsection-reference,
  .tab-reference,
  .table-reference,
  .column-reference,
  .item-reference,
  .action-reference,
  .code-reference,
  .item-blue-reference,
  .item-cyan-reference,
  .item-green-reference,
  .item-orange-reference,
  .item-deepblue-reference,
  .item-teal-reference,
  .item-red-reference {
    font-size: 0.5rem !important;   /* Smaller text */
    padding: 2px 4px !important;    /* Tighten up padding */
    margin: 2px 2px !important;     /* Less margin so they don't stack awkwardly */
  }
}

/* Settings Category Admonition */
.admonition.settings-category {
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 0.75em 1em;
    margin: 1.5em 0;
}

.admonition.settings-category > .admonition-title {
    font-weight: 600;
    color: #2e7d32;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0.5em;
}

.admonition.settings-category > .admonition-title::before {
    content: "⚙️ ";
    margin-right: 0.5em;
}

/* Settings Category Role */
.settings-category-reference {
    color: #2e7d32 !important;
    font-weight: 600 !important;
    background-color: #e8f5e9 !important;
    border: 1px solid #4caf50 !important;
    border-radius: 3px !important;
    padding: 0px 10px 0px 26px !important;
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8rem;
}

.settings-category-reference::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234caf50"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.04,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.settings-category-reference span.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}