:root {
  --md-primary-fg-color:        #007cbb;
  --md-primary-fg-color--light: #52a8d9;
  --md-primary-fg-color--dark:  #005a8d;
}

img.center {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #eeeeee;
}

/* Makes tables slightly more compact for technical data */
.md-typeset table:not([class]) {
  font-size: 0.75rem; /* Smaller, more professional font size */
  display: table;
  width: 100%;
}

.md-typeset table:not([class]) td, 
.md-typeset table:not([class]) th {
  padding: 12px; /* Reduces vertical space in cells */
}
.md-typeset table:not([class]) td {
    vertical-align: top;
}

/* Force the first column of tables to be narrow and prevent internal wrapping */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 24px; /* Space between the label and the description */
}

/* Optional: Slight background tint for the first column to make it look like a header */
.md-typeset table:not([class]) td:first-child {
  background-color: #fafafa;
}

/* Make bold text use Blue color */
.md-typeset strong {
#  color: #007cbb; /* Traditional VMware Blue */
}

/* Style inline code (like `None`) to look like a UI button */
.md-typeset code {
  background-color: #f0f7fb;
  color: #005a8d;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Styling the Grid Cards */
.grid.cards ul li {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Hover effect for the cards */
.grid.cards ul li:hover {
  border-color: #007cbb;
  box-shadow: 0 4px 12px rgba(0, 124, 187, 0.15);
  transform: translateY(-2px);
}

/* Make the icons/images in the grid look sharp */
.grid.cards img {
  margin-right: 10px;
}

/* Indent all top-level content, but keep headings (h1-h6) aligned to the far left */
.md-typeset > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(hr) {
  margin-left: 1rem; /* Adjust this value to your preferred indentation */
}

/* Optional: Ensure grid cards don't look weird with the new margin */
.md-typeset > .grid {
  margin-left: 1rem; 
}