roboflow--supervision/docs/stylesheets/extra.css

:root, body {
  /* Default to light theme */
  --md-primary-fg-color:        #8315F9;
  --md-code-hl-color:          #8315F9 !important;
  --md-accent-fg-color:        #8315F9 !important;
  --md-code-hl-color--light: #e8d2ff89 !important;
  --md-footer-fg-color--light: rgb(111, 108, 121) !important;
}

body.light {
  /* Light theme */
  --md-text-color:              #000000;
  --md-h2-color:                #000000;
}
.md-grid {
  max-width: 85%;
  margin: auto;
}
.sublist {
  display: none;
  list-style: none;
  padding-left: 0;
  background: white;
  position: absolute;
  border-radius: 8px;
  margin-top: 0.25rem;
}
.sublist {
  transition: opacity 0.5s ease-in-out;
  display: none;
  position: absolute; /* Ensure it overlaps and doesn't break flow */
  background: white;  /* So it's visible */
  z-index: 1000;
}
.sublist li {
  padding: 0.5rem;
}
#products-list *:hover .products-sublist {
  display: block;
}
#resources-list *, #products-list * {
  cursor: pointer;
}
.products-sublist, .resources-sublist {
  padding: 0.25rem;
}
.products-sublist li:hover, .resources-sublist li:hover, .md-nav__link[href]:hover {
  background: rgb(242, 241, 247) !important;
  border-radius: 6px;
  color: initial !important;
}
.md-search {
  flex-grow: 2;
}
.portfolio-section .md-grid {
  max-width: 100%;
}
.md-header__inner {
  align-items: center;
  display: grid;
  grid-template-columns: 0.1fr 1.4fr 2fr 2fr;
  padding-right: 1rem;
}
.md-search__inner {
  max-width: 600px;
  width: 100%;
  min-width: 100%;
}
.md-search__input {
  background: white;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 8px;
  color: rgb(111, 108, 121);
}
.md-search__form *, .md-search__icon, .md-search__input {
  color: rgb(111, 108, 121);
}
.md-search__input::placeholder {
  color: rgb(156, 163, 175);
}
.md-search__form {
  background: none !important;
}
.md-footer, .md-footer-meta {
  background-color: transparent;
  color: rgb(111, 108, 121);
}
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child, .md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10), .md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11), .md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12), .md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13), .md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14), .md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15), .md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16), .md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17), .md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18), .md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19), .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2), .md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20), .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3), .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4), .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5), .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6), .md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7), .md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8), .md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
  color: #8315F9;
  border-bottom: 1px solid #8315F9;
}
.md-footer *, html .md-footer-meta.md-typeset a {
  color: rgb(111, 108, 121);
}
.repo-card {
  height: 100%;
}
.header-btn {
  text-align: center;
}
.header-btn, .sublist {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(217, 215, 226) 0px 0px 0px 1px, rgb(217, 215, 226) 0px 1px 2px 0px;
}
.header-btn:hover {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(217, 215, 226) 0px 0px 0px 1px, rgb(217, 215, 226) 0px 1.0001px 2.00013px -0.0000327245px, rgba(0, 0, 0, 0) 0px 0.000065449px 0.000130898px -0.000065449px;
}
.md-typeset .headerlink:hover, .md-typeset .headerlink:target {
  color: #8315F9;
}
.md-typeset h1, .md-header__title {
  color: black;
  font-weight: 800;
}
.md-typeset h1 {
  font-weight: normal;
  margin-bottom: 1rem;
}
body {
  background: linear-gradient(to left bottom, rgb(243, 238, 255), rgb(255, 255, 255) 60%) no-repeat;
}

/* .md-nav__link:has([tabindex=""]) {
  text-transform: uppercase;
} */

.header-list {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  font-size: 0.75rem;
  justify-content: flex-end;
}
.md-nav__list label, .md-nav--secondary label {
  /* text-transform: uppercase; */
  color: rgb(29, 29, 31) !important;
  font-size: 0.7rem;
  margin-bottom: 0;
}
.md-nav--secondary label {
  margin-left: 0.5rem;
}

.md-nav__link {
  padding: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.md-nav__link--active {
  background: rgb(243, 238, 255);
  border-radius: 6px;
  padding-top: 0.25rem;
}

.md-tabs__item--active {
  color: var(--md-primary-fg-color);
  border-bottom: 2px solid var(--md-primary-fg-color);
}

.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
}

.md-header, .md-tabs {
  color: rgb(111, 108, 121);
  background-color: transparent;
}
.md-header--shadow {
  background: linear-gradient(to left bottom, rgb(243, 238, 255), rgb(255, 255, 255) 60%);
  box-shadow: none;
  border-bottom: 1px solid rgb(229, 231, 235);
}

#item-logo {
  display: none;
}
.md-main__inner, .md-header__inner, .md-grid {
  max-width: 100%;
}
@media (max-width: 1200px) {
  .md-header__inner {
    display: flex;
  }
  .header-list {
    display: none;
  }
  #item-logo {
    display: block;
  }
}
.md-content {
  max-width: 40rem;
  margin: auto;
}
/* // if no md-sidebar--primary, make .md-content full width */
.md-main__inner:has(.md-sidebar--primary[hidden]) .md-content {
  max-width: 100%;
}
.md-sidebar--primary {
  flex: 0 20%;
}
.md-tabs {
  border-bottom: 1px solid rgb(229, 231, 235);
}
.md-main__inner {
  padding-top: 1rem;
  margin-top: 0;
}

body.dark {
  /* Dark theme */
  --md-text-color:              #FFFFFF;
  --md-h2-color:                #add8e6;
}

body.light .md-content *, body.dark .md-content * {
  color: var(--md-text-color) !important;
}

body[data-md-url$="/cookbooks/"] .md-sidebar--primary,
body[data-md-url$="/cookbooks/"] .md-sidebar--secondary {
    display: none;
}

body[data-md-url$="/cookbooks/"] .md-content {
    margin-left: 0;
    width: 100%;
}

.md-main, nav .md-grid, .md-header__inner {
  max-width: 1600px;
  width: 100%;
  margin: auto;
}
.md-search__scrollwrap {
  width: 100% !important;
}
.md-nav--secondary .md-nav__title {
  position: initial !important;
}

.md-header__title .md-ellipsis {
  overflow: initial !important;
  text-overflow: initial !important;
}
.md-search {
  flex-grow: 0;
}

/* Table style */

th, td {
  border: 1px solid var(--md-typeset-table-color);
}

.md-typeset__table {
  line-height: 1.5;
}

.md-typeset__table table:not([class]) {
  font-size: 0.6rem;
  border-collapse: collapse;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
  padding: 10px;
}