/*
  to create a different theme, add the .css file to tcdocs/custom/styles folder and
  add the theme to config.php in GENERAL under $CONFIG_site_theme
*/

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

[x-cloak] { display: none !important; }

:root,
:host {
    color-scheme: dark;

    --sl-font-mono: "JetBrains Mono";
    --sl-font-sans: "Rubik";
    --sl-font-header: "Fredoka";
    --sl-font-serif: Georgia, "Times New Roman", serif;

    --tc-bg-color: #1e2129;
    --tc-fg-color: #bec0c5;
    --tc-fg-color-transparent: #bec0c51a;
    --tc-fg-muted-color: #939599;
    --tc-fg-muted-darker-color: #797a7d;
    --tc-neutral-color: #1a1a1e;
    /* --tc-title-color: #939599; */
    --tc-title-color: #dee1e7;
    --tc-primary-color: #14151a;
    --tc-searchbar-color: #0a0b0e;
    --tc-searchbar-hover-color: var(--tc-secondary-color);
    --tc-header-fg-color: #ffffff;
    --tc-accent-darker-color: #7c4dff;
    --tc-accent-color: #a281ff;
    --tc-secondary-color: #17191e;
    --tc-table-border-color: #363841;
    --tc-table-border-header-color: #525563;
    --tc-divider-color: #2d2f36;
    --tc-nav-border-color: #363841;
    --tc-nav-vertical-line-color: #2d2e35;
    --tc-status-icon-color: var(--tc-fg-muted-color);
    --tc-code-bg-color: #272935;
    --tc-pre-code-bg-color: #272935;
    --tc-strong-color: #90fcff;
    --tc-italics-color: var(--tc-fg-muted-color);
    --tc-table-bg-color: #1a1c23;
    --tc-h1-color: var(--tc-title-color);
    --tc-h2-color: #c4ffc4;
    --tc-h2-color: var(--tc-fg-color);
    --tc-h3-color: #fbfdcb;
    /*--tc-h3-color: var(--tc-fg-color); */
    --tc-h4-color: #c4ffc4;
    --tc-h5-color: #b3fff3;
    --tc-h6-color: #d49eff;
    --tc-overlay-bg-color: hsl(0 0% 0% / 60%);
    --tc-error-color: var(--sl-color-red-500);
    --tc-hover-table-bg-color: #272935;
    --tc-nav-tabs-fg-color: var(--tc-fg-color);
    --tc-nav-tabs-fg-active-color: var(--tc-accent-color);
    --tc-nav-tabs-fg-hover-color: var(--tc-accent-darker-color);
    --tc-footer-fg-color: var(--tc-fg-color);
    --tc-footer-bg-color: var(--tc-primary-color);
    --tc-footer-nav-fg-color: var(--tc-fg-color);
    --tc-footer-nav-bg-color: var(--tc-secondary-color);
    --tc-scrollbar-fg-color: var(--tc-accent-darker-color);
    --tc-scrollbar-bg-color: var(--tc-bg-color);
    --tc-fg-page-title-color: var(--tc-fg-muted-color);
    --tc-mobile-drawer-home-bg-color: var(--tc-primary-color);
    --tc-mobile-drawer-bg-color: var(--tc-primary-color);
    --tc-mobile-drawer-secondary-bg-color: var(--tc-nav-border-color);
    --tc-entry-header-bg-color: var(--tc-primary-color);
    --tc-announcement-fg-color: var(--tc-fg-color);
    --tc-announcement-bg-color: #000;
    --tc-announcement-icon-color: var(--tc-accent-color);
    --tc-announcement-close-btn-color: var(--tc-fg-color);
    --tc-announcement-close-btn-hover-color: var(--tc-fg-muted-color);
  }

  :not(:defined) {
    visibility: hidden;
  }

  ::selection {
    color: var(--tc-header-fg-color);
    background-color: var(--tc-accent-darker-color);
    text-shadow: none;
  }

::-moz-selection {
  color: var(--tc-header-fg-color);
  background-color: var(--tc-accent-darker-color);
  text-shadow: none;
}

#main_container {
  scrollbar-color: var(--tc-scrollbar-fg-color) #0000;
}

.color-money {
  color: var(--sl-color-green-600);
}

.footer-madewith {
  color: var(--tc-fg-muted-color);
}

.footer-tcdocs {
  cursor: pointer;
  color: var(--tc-accent-color);
}

.footer-tcdocs:hover {
  color: var(--tc-accent-darker-color);
}

.footer-tcdocs-version {
  color: var(--tc-fg-muted-color);
  font-size: 0.75rem;
  line-height: 1rem;
}

.footer-sitecreated {
  color: var(--tc-fg-muted-color);
}

  table {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    border-collapse: separate !important;
    min-width: 100%;
  }

  th {
    font-size: 0.925rem;
    line-height: 1.25rem;
    font-weight:400;
    color: var(--tc-fg-muted-color);
    top: 0px;
    vertical-align: bottom;
    position: sticky;
    z-index:1;
    padding-left: 0.625rem /* 10px */;
    padding-right: 0.625rem /* 10px */;
    padding-top: 0.5rem /* 8px */;
    padding-bottom: 0.5rem /* 8px */;
    /*border-bottom:2px solid var(--tc-table-border-header-color); */
    border-bottom: 1px solid var(--tc-table-border-color) !important;
    background-color: color-mix(in srgb, var(--tc-bg-color) 95%, transparent);
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  p+div.table_container {
    margin-top:1.2rem;
  }
  
  div.table_container {
    overflow:auto;
    max-height:500px;
    border: 1px solid var(--tc-table-border-color) !important;
    border-radius:4px;
    scrollbar-color: var(--tc-scrollbar-fg-color) #0000;
    scrollbar-width: thin !important;
    margin-bottom: 1.2rem;
  }

  div.table_container.full {
    max-height:none;
  }

  div.table_container:not(.infobox) > table {
    /* min-width: 400px; */
    overflow-x: auto;
    width: 100%;
  }

  div.table_container.infobox {
    width:fit-content;
  }

  div.table_container.infobox th {
    text-align:right;
    font-weight: 500;
    background-color:transparent;
    --tw-backdrop-blur: none;
    backdrop-filter: none;
    font-size:1.05rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-right: 1px solid var(--tc-table-border-color);
  }

  div.table_container.infobox td {
    font-size:1.05rem;
    font-weight: 400;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  div.table_container.infobox tr {
    vertical-align: top;
  }

  div.table_container.infobox table {
    table-layout: fixed;
    width: 330px;
  }

  @media (max-width: 640px) {
    div.table_container.infobox table {
      width: 100%;
    }    
}

  div.table_container.infobox img {
    border-top-left-radius:4px !important;
    border-top-right-radius:4px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    height:auto !important;
    width: 330px !important;
    object-position: top;
    object-fit: cover;
  }

  @media (max-width: 640px) {
    div.table_container.infobox img {
      width: 100% !important;
      object-fit: cover;
      display:none;
    }    
}

  div.table_container tr {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-fast);
    transition-property: background-color
  }

  div.table_container tbody tr:hover {
    background-color: var(--tc-hover-table-bg-color);
  }

  div.table_container.infobox tr:last-child th {
    border-bottom: none !important;
  }

  tbody {
    border-color:var(--tc-table-border-color) !important;
    /*
    border:1px solid var(--tc-table-border-color) !important;
    background-color: var(--tc-table-bg-color);
    */
  }

  td {
    padding-left: 0.625rem /* 10px */;
    padding-right: 0.625rem /* 10px */;
    padding-top: 0.875rem /* 14px */;
    padding-bottom: 0.875rem /* 14px */;
    /* word-break: break-word; */
    font-size: 0.925rem;
    line-height: 1.35rem;
  }

  tr {
    vertical-align: top;
  }

  .entrytable tr {
    vertical-align: middle !important;
  }

  td.entry_img_cell {
    text-align: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  tr:not(:last-child) td {
    border-bottom: 1px solid var(--tc-table-border-color) !important;
  }

  .sl-toast-stack {
    width:24rem !important;
    right:10px !important;
    top:40px !important;
  }

  .error_specific {
    font-family: var(--sl-font-mono);
    color: var(--sl-color-red-600);
    font-weight:700;
  }

  .error_general {
    color: var(--sl-color-red-700);
  }

  .content_container {
    margin-top:2.5rem;
  }

  .content_container a {
    color: var(--tc-accent-color);
    cursor:pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-fast);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    /* text-underline-offset: 2px; */
    word-break: break-word;
  }

  .content_container a:hover {
    color: var(--tc-accent-darker-color);
    /*
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    */
  }

  #content pre {
    margin-top:1rem;
    margin-bottom:1rem;
  }

  code {
    background-color: var(--tc-code-bg-color) !important;
    padding: .2rem .3rem !important;
    border-radius: 5px !important;
    font-size:0.85rem !important;
  }

  pre code {
    font-weight:200 !important;
    display:block !important;
    background-color: var(--tc-pre-code-bg-color) !important;
    padding:0.75rem 1rem !important;
    border-radius:5px !important;
    font-size:0.85rem !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;    
    scrollbar-width: thin !important;
    scrollbar-color: var(--tc-scrollbar-fg-color) #0000 !important;
    touch-action: auto !important;
    margin: 0px;
    overflow: auto !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    max-height: 500px;
  }

  @media (max-width: 640px) {
    pre code {
        word-break: normal !important;
        white-space: pre !important;
    }
}



  pre code:hover {
    scrollbar-color: var(--tc-scrollbar-fg-color) #0000;
  }


  code, kbd, pre, samp {
    font-family: var(--sl-font-mono) !important;
  }

  div.img_grid > div {
 width: 100%;
}

div.img_grid > div > p {
 width: 100%;
}

div.img_grid > div > p > img {
 width: 100%;
 object-position: top;
}


.table_description {
  font-size: 0.75rem;
  line-height: 1rem;
  min-width: 300px;
}


@media (min-width: 640px) {
    .table_description {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (max-width: 640px) {
    .table_description code {
        font-size: 0.65rem !important;
        padding: .15rem .25rem !important;
    }
}

.content_container li p, .editor-preview li p, .editor-preview-side li p {
  margin: 0 !important;
}

  .content_container p, .editor-preview p, .editor-preview-side p {
    overflow: hidden;
    line-height: 1.65;
    word-break: break-word;
    white-space: pre-wrap;
    margin: 0.5rem 0;
  }

  .content_container p+p, .editor-preview p+p, .editor-preview-side p+p {
    margin: 0.9rem 0;
  }

  .content_container img:hover, .img_container img:hover {
    opacity:0.7;
  }
  

  .content_container img:not(.card_img,.entry_subject_img,.entry_row_img), .img_container img:not(.card_img,.entry_subject_img,.entry_row_img) {
    max-height: 350px;
    border-radius:6px;
    cursor: pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: transform,opacity;
    height: 100%;
    object-fit: cover;
  }

  .content_container img:not(.card_img,.entry_subject_img,.entry_row_img):hover, .img_container img:not(.card_img,.entry_subject_img,.entry_row_img):hover {
    --tw-scale-x: 1.08;
    --tw-scale-y: 1.08;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }


  .profile_img {
    border: 2px solid var(--tc-fg-muted-darker-color);
    aspect-ratio: 1;
    border-radius: 9999px;
    object-fit: cover;
    margin-top: -0.5rem;
    margin-bottom: -1.5rem;
    min-height: 135px;
    height: 135px;
    min-width: auto;
    width: auto;
    cursor: pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: opacity;
    object-position: top;
  }

  .profile_img:hover {
    opacity: 0.7;
  }

  @media (min-width: 640px) {
    .profile_img {
      border-radius: 9999px;
      margin-top:0;
      margin-bottom: 0;
      min-height: 80px;
      height: 80px;
      min-width:80px;
      width: 80px;
    }   
  }

  .entry_subject_img {
    border: 1px solid var(--tc-fg-muted-darker-color);
    aspect-ratio: 1;
    border-radius: 9999px;
    object-fit: cover;
    min-height: 75px;
    height: 75px;
    min-width: auto;
    width: auto;
    cursor: pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: opacity;
  }

  .entry_subject_img.tiny {
    min-height: 40px;
    height: 40px;
  }

  .entry_subject_img:hover {
    opacity: 0.7;
  }

  .entry_row_img {
    aspect-ratio: 1;
    object-fit: cover;
    height:100%;
    width: 50px;
    border-radius: 9999px;
    min-width: 50px;
    cursor: pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: opacity;
    object-position: top;
  }

  .entry_row_img:hover {
    opacity: 0.7;
  }
  


  .content_container img.full:not(.card_img,.entry_subject_img,.entry_row_img), .img_container img.full:not(.card_img,.entry_subject_img,.entry_row_img) {
    max-height: none;
  }

  .content_container ul, .content_container ol, .editor-preview ul, .editor-preview ol, .editor-preview-side ul, .editor-preview-side ol  {
    padding-inline-start: 40px;
    margin: 0.5rem 0 0.9rem;
  }

  .content_container td ul, .content_container td ol, .editor-preview td ul, .editor-preview td ol, .editor-preview-side td ul, .editor-preview-side td ol  {
    padding-inline-start: 40px;
    margin: 0.3rem 0 0.3rem !important;
  }

  .content_container td li, .editor-preview td li, .editor-preview-side td li {
    padding: .1rem 0 !important;
  }  

  .content_container ul, .editor-preview ul, .editor-preview-side ul  {
    list-style: disc;
  }

  .content_container ol, .editor-preview ol, .editor-preview-side ol  {
    list-style: decimal;
  }

  .content_container ul ul, .content_container ol ul, .content_container ul ol, .content_container ol ol,
  .editor-preview ul ul, .editor-preview ol ul, .editor-preview ul ol, .editor-preview ol ol,
  .editor-preview-side ul ul, .editor-preview-side ol ul, .editor-preview-side ul ol, .editor-preview-side ol ol {
    margin-block-start: 0;
    margin-block-end: 0;
    margin: 0.3rem 0;
}

  .content_container li, .editor-preview li, .editor-preview-side li {
    padding: .2rem 0;
  }

  .content_container li::marker, .editor-preview li::marker, .editor-preview-side li::marker {
    color: var(--tc-fg-muted-darker-color)
  }

  .form-control__help-text {
    display: block;
      color: var(--sl-input-help-text-color);
    margin-top: var(--sl-spacing-3x-small);
    font-size: var(--sl-input-help-text-font-size-medium);
  }

  sl-menu-label::part(base) {
    color: var(--tc-fg-color);
  }

  sl-menu-label.header::part(base) {
    padding-bottom:0;
    margin-bottom: -0.5rem;
    color: var(--tc-fg-muted-darker-color);
  }

  sl-menu-label.name::part(base) {
    padding-bottom:0;
    margin-bottom: -0.6rem;
    font-size: 1rem;
    color: var(--tc-header-fg-color);
  }

  sl-avatar.pic::part(base) {
    border: 2px solid var(--tc-primary-color)
  }

  #user_avatar::part(base) {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: transform,opacity;

    --tw-ring-color: var(--tc-primary-color);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  #user_avatar::part(base):hover {
    opacity:.7;
  }

  #user_avatar.pic_selected::part(base) {
    opacity:.7;
    --tw-ring-color: var(--tc-accent-darker-color);
  }

  sl-menu-label.email::part(base) {
    padding-bottom:0;
    font-weight: 300;
    color: var(--tc-fg-color);
  }

  sl-icon-button#dialog_delete_header_btn::part(base):hover {
    color: var(--sl-color-red-600);
  }

  sl-icon-button#dialog_create_header_btn::part(base):hover {
    color: var(--sl-color-green-600);
  }

  sl-button.create_entry_btn {
    margin-left:0.75rem;
  }

  sl-button.create_entry_btn::part(base) {
    border-color: var(--tc-table-border-color);
    background-color: var(--tc-neutral-color);
    font-weight: 400;
  } 

  sl-button.create_entry_btn::part(base):hover {
    color: var(--tc-header-fg-color); 
    background-color: var(--tc-accent-darker-color);
  }  

  sl-button#dialog_edit_btn::part(base):hover {
    background-color:var(--tc-accent-darker-color);
    border-color:var(--tc-accent-darker-color);
  }

  sl-button.login_btn::part(base) {
    background-color: var(--tc-accent-darker-color);
    color: var(--tc-header-fg-color); 
    border-radius:6px;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  }

  sl-button.login_btn::part(base):hover {
    background-color:var(--tc-accent-color);
  }


  sl-badge.priority_pill.completed::part(base) {
    background-color:var(--sl-color-green-600);
  }

  sl-badge.priority_pill.high_priority::part(base) {
    background-color:var(--sl-color-red-600);
  }

  sl-badge.priority_pill.med_priority::part(base) {
    background-color:var(--sl-color-orange-600);
  }

  sl-badge.priority_pill.low_priority::part(base) {
    background-color:var(--sl-color-yellow-600);
  }

  sl-tab-group.doc_tab_group {
    margin-top: -2rem;
  }

  sl-tab-group::part(tabs) {
    border-color: var(--tc-divider-color) !important;
  }

  hr {
    border-color: var(--tc-divider-color);
  }


  sl-tab-group.doc_tab_group::part(nav) {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: -1rem;
  }

  @media (min-width: 640px) {
    sl-tab-group.doc_tab_group::part(nav) {
      margin-left: 0;
      margin-right: 0;
    }   
  }


  sl-tab-panel.doc_panel::part(base) {
    padding:0;
    margin-top:2.5rem;
    margin-bottom:0.25rem;
  }

  .search_input_icon {
    color: var(--tc-fg-color);;
  }

  sl-input.search_input::part(base) {
    border:none;
    color: var(--tc-fg-color);
    background-color: var(--tc-searchbar-color);

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  }

  @media (max-width: 768px) {
    sl-input.search_input::part(base) {
      background-color: var(--tc-primary-color);
    }    
}

@media (min-width: 768px) {
  .search_results_content_container {
    backface-visibility: visible;
    scrollbar-color: var(--tc-scrollbar-fg-color) #0000;
    scrollbar-width: thin;
  }    
}

.search_results_content_container {
  scrollbar-color: var(--tc-scrollbar-fg-color) var(--tc-scrollbar-bg-color);
  overflow:auto;
  transition: max-height, height 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}

.footer_nav_doc_link {
  font-size: 1.125rem;
line-height: 1.75rem;
align-items: center;
display:flex;
font-weight: 500;
color: var(--tc-header-fg-color);
}

.doc_name_ficon {
  word-break: break-word;
}

nav .doc_name_ficon {
  word-break: unset !important;
}

.project_logo {
  max-height: 200px !important;
}

.footer_nav_doc_link .doc_name_ficon {
  margin-left:0.1rem;
}

sl-input::part(form-control-label) {
  color: var(--tc-fg-color);
}

sl-input::part(input) {
  color: var(--tc-fg-color);
}



  sl-input.search_input::part(input) {
    color: var(--tc-fg-color);
    padding-left:1.5rem !important;
  }

  sl-input::part(input)::placeholder {
    color: var(--tc-fg-muted-darker-color);
  }

  sl-input::part(base):hover {
    background-color: var(--tc-secondary-color);
  }

  sl-input.search_input::part(base):hover {
    background-color: var(--tc-searchbar-hover-color);
  }

  sl-input::part(base):focus-within {
    background-color: var(--tc-bg-color) !important;
  }

  sl-input::part(input):focus-within {
    background-color: var(--tc-bg-color) !important;
    box-shadow:none !important;
  }

  sl-dialog::part(panel) {
    max-width: 100%;
  }

  sl-dialog::part(body) {
    scrollbar-color: var(--tc-scrollbar-fg-color) #0000;
    scrollbar-width: thin !important;
    overflow-y:auto;
    overflow-x:hidden !important;
  }

  sl-dialog#entries_dialog {
    --width: 50vw;
  }

  @media (max-width: 1200px) {
    sl-dialog#entries_dialog {
      --width: 70vw;
    }    
}

  @media (max-width: 768px) {
    sl-dialog#entries_dialog {
      --width: 100vw;
    }    
}

sl-dialog#entries_dialog::part(close-button__base) {
  display:none;
}

sl-dialog#entries_dialog::part(title) {
  font-size:1.25rem;
}

@media (max-width: 768px) {
  sl-dialog#entries_dialog::part(title) {
    font-size:1.1rem;
  }  
}

sl-dialog#entries_dialog::part(header) {
  border-bottom:1px solid var(--tc-divider-color);
  background-color: var(--tc-entry-header-bg-color);
}

sl-dialog#entries_dialog::part(header-actions) {
  padding: 0 0 !important;
}


  sl-dialog#img_lightbox::part(body) {
    padding: 0 !important;
    /* overflow:hidden; */
    overflow:auto;
  }

  sl-dialog#img_lightbox::part(base) {
    z-index:900 !important;
  }

  sl-dialog#img_lightbox::part(panel) {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  sl-dialog#img_lightbox {
    --width: 50vw;
  }

  @media (max-width: 768px) {
    sl-dialog#img_lightbox {
      --width: 90vw;
    }    
}


  sl-drawer::part(body) {
    padding: 0 !important;
    background-color: var(--tc-bg-color);
    color: var(--tc-fg-color);
    overflow:hidden;
  }

  sl-alert.site-announcement::part(base) {
    background-color: var(--tc-bg-announcement-color);
    border: none;
  }

  sl-alert.hidden-alert::part(base) {
    border-style: dashed;
    border-width: 2px;
    border-top-color: var(--sl-panel-border-color);
  }

  .load_all_btn {
    z-index: 4;
    position: sticky;
    bottom: 0;
    background-color: var(--tc-secondary-color);
  }

  .sold_banner {
    display:flex;
    justify-content:center;
    align-items:center;
    height:2rem;
    margin-bottom:-2rem;
    z-index:1;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: var(--tc-header-fg-color);
    background-color: var(--sl-color-red-400);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    opacity:.8;
    /* position:relative; */
    /* width:100%; */
    position: absolute;
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (max-width: 640px) {
    .sold_banner {
      margin-bottom:0rem;
    }    
}

  

  sl-card.index_card {
    width:100%;
    height:100%;
    background-color: var(--sl-panel-background-color);
    /* color: var(--tc-accent-color); */
    color: var(--tc-header-fg-color);
    /* border-color: var(--tc-fg-muted-darker-color); */ 
    border-color: var(--tc-accent-color);
    border-width: 2px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    border-radius: 0.25rem
  }

  sl-card.index_card:hover {
    border-color: var(--tc-accent-darker-color);
    opacity: 0.7 !important;
  }

  sl-card.index_card::part(base) {
    border:none;
    border-radius:0;
    height:100%;
  }

  sl-card.index_card::part(body) {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    padding: 1.25rem;
    line-height: 1.65rem;
  }

  @media (max-width: 600px) {
    sl-card.index_card::part(body) {
      font-size: 1.05rem;
      padding: 0.75rem 1rem;
      line-height: 1.3rem;
    }    
}

  

  sl-card.search_result_card::part(base) {
    border:none;
    border-radius:0;
  }

  sl-details.list_details {
    margin: 0.5rem 0;
  }

  sl-details.list_details::part(base) {
    background-color:inherit;
    border:none;
  }

  sl-details.list_details::part(content) {
    padding:0;
  }

  sl-details.list_details::part(summary) {
    flex: 0 1 auto;
    margin-right: 0.6rem;
  }

  sl-details.list_details::part(header) {
    padding:0;
    width: fit-content;
  }

  .search_status_bar {
    display:flex;
    align-items: center;
    padding-left:3.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--tc-fg-muted-color);
    background-color: var(--tc-nav-border-color);
    height: 2.5rem;
  }

  .search_result_item {
    background-color: var(--tc-bg-color);
    display:flex;
    justify-content: space-between;
    cursor:pointer;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  }

  .search_result_item:hover {
    background-color: var(--tc-secondary-color);
  }

  .search_result_item .search_content {
    display: flex;
    flex-direction: column;
  }

  .search_result_item .search_content_container {
    padding: 1rem 1rem 1rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  

  .search_result_item .search_content .name {
    display:flex;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--tc-fg-color);
    align-items: center;
  }

  .search_result_item .search_content .name .section {
    color: var(--tc-fg-muted-color);
    font-weight: 400;
    padding-left: 0.25rem;
    font-size: 1rem;
  }  

  @media (max-width: 768px) {
    .search_result_item .search_content .name .section {
      font-size: 0.9rem;
      display: none;
    }    
}

  .search_result_item .search_content .desc {
    color: var(--tc-fg-muted-color);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top:0.125rem;
  }

  @media (max-width: 768px) {
    .search_result_item .search_content .desc {
      font-size: 0.8rem;
    }    
}

  .search_result_item .search_img {
    height: auto;
    width:5rem;
    min-width: 5rem;
    background-size: cover;
    background-position: center;
  }

  .search_result_item .search_icon {
    height: auto;
    width:3.5rem;
    text-align: center;
    font-size:1.25rem;
  }

  .animate__fastest {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
  }

  .monospace {
    font-family: var(--sl-font-mono);
  }

  h1 .doc_name_ficon {
    margin-left:0.35rem;
  }

  .header_page_title .doc_name_ficon {
    margin-left:0.2rem;
  }

  .doc_icon {
    margin-right: 0.5rem;
    opacity: 0.7;
  }

  .search_icon .doc_icon {
    margin-right:0;
  }

  .doc_status_icon_container {
    display:flex;
    align-items:center;
    padding-left: 0.75rem;
  }

  .h1_container .doc_status_icon_container {
    padding-left: 1.25rem;
  }

  .doc_status_icon {
    color:var(--tc-status-icon-color);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1rem;
  }

  .h1_container .doc_status_icon {
    font-size: 1rem;
  }

  .doc_status_icon.error {
    color:#fca5a5;
  }


 #doc_outline ul ul, #toc ul ul ul {
    padding-left: 0.75rem;
    margin-left: 0.75rem;
    border-left: 1px solid var(--tc-nav-vertical-line-color);
  }

  #drawer_toc ul ul ul, #mobile_drawer_toc ul ul ul {
    padding-left: 0.75rem;
    margin-left: 0.75rem;
    border-left: 1px solid var(--tc-nav-vertical-line-color);
  }

  #doc_code {
    transition: max-height, height 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
  }


  html {
    background-color: var(--tc-bg-color);
    color: var(--tc-fg-color);
    font-family: var(--sl-font-sans) !important;
  }

  b, strong {
    color: var(--tc-strong-color);
    font-weight: 600 !important;
  }

  em {
    color: var(--tc-italics-color);
  }

  blockquote {
    border-left: 2px solid var(--tc-accent-darker-color);
    font-style: italic;
    padding-left: 1rem;
    margin-top: 1rem !important;
    color: var(--tc-italics-color);
  }

  h1 {
    margin: 2.5rem 0 .85rem !important;
    font-weight: 300 !important;
    letter-spacing: -.01em !important;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    color: var(--tc-h1-color) !important;
  }

  .h1_container h1 {
    margin:0 !important;
  }


h2 {
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    margin: 2.5rem 0 .85rem !important;
    font-weight: 300 !important;
    letter-spacing: -.01em !important;
    color: var(--tc-h2-color) !important;
    /*
    border-bottom: 1px solid var(--tc-divider-color);
    padding-bottom:0.5rem
    */
  }

  .combined_partial_grid h2 {
    margin-top: 0 !important;
  }

  @media (max-width: 1279px) {
    .combined_partial_grid h2.add-margin-lg {
      margin-top: 2.5rem !important;
    }    
}

  h2+h3 {
    margin-top: 1rem !important;
  }

  h3+h4 {
    margin-top: 1rem !important;
  }

  h4+h5 {
    margin-top: 1rem !important;
  }

  h5+h6 {
    margin-top: 1rem !important;
  }

  h1,h2,h3,h4,h5,h6 {
    scroll-margin-top:75px;
    font-family: var(--sl-font-header);
  }

  h3 {
    font-size: 1.2rem !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    margin: 2rem 0 .7rem !important;
    color: var(--tc-h3-color) !important;
  }

   
  h4 {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    margin: 2rem 0 .7rem !important;
    color: var(--tc-h4-color) !important;
  }

  h5 {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    margin: 2rem 0 .7rem !important;
    color: var(--tc-h5-color) !important;
  }

  h6 {
    font-size: 1rem !important;
    font-weight: 400 !important;
    margin: 2rem 0 .7rem !important;
    color: var(--tc-h6-color) !important;
  }


  @keyframes lilSlide {
    0% {
      transform: translateY(20px) translateZ(0px);
      opacity:0;
     } to {
     opacity:1;
     transform: translateY(0px) translateZ(0px);
     }
   }
     
   .animate__lilSlide {
   -webkit-animation-name:lilSlide;
   animation-name:lilSlide
   }

   @keyframes lilSlideDown {
    0% {
      transform: translateY(-10px) translateZ(0px);
      opacity:0;
     } to {
     opacity:1;
     transform: translateY(0px) translateZ(0px);
     }
   }
     
   .animate__lilSlideDown {
   -webkit-animation-name:lilSlideDown;
   animation-name:lilSlideDown
   }

   @keyframes lilSlideFromRight {
    0% {
      transform: translateX(20px) translateZ(0px);
      opacity:0;
     } to {
     opacity:1;
     transform: translateX(0px) translateZ(0px);
     }
   }
     
   .animate__lilSlideFromRight {
   -webkit-animation-name:lilSlideFromRight;
   animation-name:lilSlideFromRight
   }

:root,
:host {
  --sl-color-gray-50: hsl(240 5.1% 15%);
  --sl-color-gray-100: hsl(240 5.7% 18.2%);
  --sl-color-gray-200: hsl(240 4.6% 22%);
  --sl-color-gray-300: hsl(240 5% 27.6%);
  --sl-color-gray-400: hsl(240 5% 35.5%);
  --sl-color-gray-500: hsl(240 3.7% 44%);
  --sl-color-gray-600: hsl(240 5.3% 58%);
  --sl-color-gray-700: hsl(240 5.6% 73%);
  --sl-color-gray-800: hsl(240 7.3% 84%);
  --sl-color-gray-900: hsl(240 9.1% 91.8%);
  --sl-color-gray-950: hsl(0 0% 95%);

  --sl-color-red-50: hsl(0 56% 23.9%);
  --sl-color-red-100: hsl(0.6 60% 33.9%);
  --sl-color-red-200: hsl(0.9 67.2% 37.1%);
  --sl-color-red-300: hsl(1.1 71.3% 43.7%);
  --sl-color-red-400: hsl(1 76% 52.5%);
  --sl-color-red-500: hsl(0.7 89.6% 57.2%);
  --sl-color-red-600: hsl(0 98.6% 67.9%);
  --sl-color-red-700: hsl(0 100% 72.3%);
  --sl-color-red-800: hsl(0 100% 85.6%);
  --sl-color-red-900: hsl(0 100% 90.3%);
  --sl-color-red-950: hsl(0 100% 95.9%);

  --sl-color-orange-50: hsl(15 64.2% 23.3%);
  --sl-color-orange-100: hsl(15.1 70.9% 31.1%);
  --sl-color-orange-200: hsl(15.3 75.7% 35.5%);
  --sl-color-orange-300: hsl(17.1 83.5% 42.7%);
  --sl-color-orange-400: hsl(20.1 88% 50.8%);
  --sl-color-orange-500: hsl(24.3 100% 50.5%);
  --sl-color-orange-600: hsl(27.2 100% 57.7%);
  --sl-color-orange-700: hsl(31.3 100% 68.7%);
  --sl-color-orange-800: hsl(33.8 100% 79.3%);
  --sl-color-orange-900: hsl(38.9 100% 87.7%);
  --sl-color-orange-950: hsl(46.2 100% 95%);

  --sl-color-amber-50: hsl(21.9 66.3% 21.1%);
  --sl-color-amber-100: hsl(21.5 73.6% 29.7%);
  --sl-color-amber-200: hsl(22.3 77.6% 33.3%);
  --sl-color-amber-300: hsl(25.4 84.2% 39.6%);
  --sl-color-amber-400: hsl(31.4 87.4% 46.7%);
  --sl-color-amber-500: hsl(37 96.6% 48.3%);
  --sl-color-amber-600: hsl(43.3 100% 53.4%);
  --sl-color-amber-700: hsl(46.5 100% 61.1%);
  --sl-color-amber-800: hsl(49.3 100% 73%);
  --sl-color-amber-900: hsl(51.8 100% 85%);
  --sl-color-amber-950: hsl(60 100% 94.6%);

  --sl-color-yellow-50: hsl(32.5 60% 18.2%);
  --sl-color-yellow-100: hsl(28.1 68.6% 29%);
  --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
  --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
  --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
  --sl-color-yellow-500: hsl(44.7 88% 46%);
  --sl-color-yellow-600: hsl(47.7 100% 50.9%);
  --sl-color-yellow-700: hsl(51.3 100% 59.9%);
  --sl-color-yellow-800: hsl(54.6 100% 73%);
  --sl-color-yellow-900: hsl(58.9 100% 84.2%);
  --sl-color-yellow-950: hsl(60 100% 94%);

  --sl-color-lime-50: hsl(86.5 54.4% 18%);
  --sl-color-lime-100: hsl(87.6 56.8% 23.3%);
  --sl-color-lime-200: hsl(85.8 63.2% 24.5%);
  --sl-color-lime-300: hsl(86.1 72% 29.4%);
  --sl-color-lime-400: hsl(85.5 76.8% 37.3%);
  --sl-color-lime-500: hsl(84.3 74.2% 42.1%);
  --sl-color-lime-600: hsl(82.8 81.5% 52.6%);
  --sl-color-lime-700: hsl(82 89.9% 64%);
  --sl-color-lime-800: hsl(80.9 97.9% 76.6%);
  --sl-color-lime-900: hsl(77.9 100% 85.8%);
  --sl-color-lime-950: hsl(69.5 100% 93.8%);

  --sl-color-green-50: hsl(144.3 53.6% 16%);
  --sl-color-green-100: hsl(143.2 55.4% 23.5%);
  --sl-color-green-200: hsl(141.5 58.2% 26.3%);
  --sl-color-green-300: hsl(140.8 64.2% 31.8%);
  --sl-color-green-400: hsl(140.3 68% 39.2%);
  --sl-color-green-500: hsl(141.1 64.9% 43%);
  --sl-color-green-600: hsl(141.6 72.4% 55.2%);
  --sl-color-green-700: hsl(141.7 82.7% 70.1%);
  --sl-color-green-800: hsl(141 90.9% 82.1%);
  --sl-color-green-900: hsl(142 100% 89.1%);
  --sl-color-green-950: hsl(144 100% 95.5%);

  --sl-color-emerald-50: hsl(164.3 75% 13.5%);
  --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
  --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
  --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
  --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
  --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
  --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
  --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
  --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
  --sl-color-emerald-900: hsl(149.3 100% 87%);
  --sl-color-emerald-950: hsl(158.6 100% 94.8%);

  --sl-color-teal-50: hsl(176.5 51.5% 15.4%);
  --sl-color-teal-100: hsl(175.9 54.7% 22.3%);
  --sl-color-teal-200: hsl(175.9 60.7% 23.9%);
  --sl-color-teal-300: hsl(174.5 67.3% 28.8%);
  --sl-color-teal-400: hsl(174.4 71.9% 34.9%);
  --sl-color-teal-500: hsl(173.1 71% 38.3%);
  --sl-color-teal-600: hsl(172.3 68.2% 48.1%);
  --sl-color-teal-700: hsl(170.5 81.3% 61.5%);
  --sl-color-teal-800: hsl(168.4 92.1% 75.2%);
  --sl-color-teal-900: hsl(168.3 100% 86%);
  --sl-color-teal-950: hsl(180 100% 95.5%);

  --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
  --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
  --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
  --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
  --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
  --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
  --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
  --sl-color-cyan-700: hsl(187 98.6% 66.2%);
  --sl-color-cyan-800: hsl(184.9 100% 78.3%);
  --sl-color-cyan-900: hsl(180 100% 86.6%);
  --sl-color-cyan-950: hsl(180 100% 94.8%);

  --sl-color-sky-50: hsl(203 63.8% 20.9%);
  --sl-color-sky-100: hsl(203.4 70.4% 28%);
  --sl-color-sky-200: hsl(202.7 75.8% 30.8%);
  --sl-color-sky-300: hsl(203.1 80.4% 36.1%);
  --sl-color-sky-400: hsl(202.1 80.5% 44.3%);
  --sl-color-sky-500: hsl(199.7 85.9% 47.7%);
  --sl-color-sky-600: hsl(198.7 97.9% 57.2%);
  --sl-color-sky-700: hsl(198.7 100% 70.5%);
  --sl-color-sky-800: hsl(198.8 100% 82.5%);
  --sl-color-sky-900: hsl(198.5 100% 89.9%);
  --sl-color-sky-950: hsl(186 100% 95.5%);

  --sl-color-blue-50: hsl(227.1 49.5% 22.7%);
  --sl-color-blue-100: hsl(225.8 58.9% 36.8%);
  --sl-color-blue-200: hsl(227.7 64.4% 42.9%);
  --sl-color-blue-300: hsl(226.1 72.7% 51.2%);
  --sl-color-blue-400: hsl(222.6 86.5% 56.3%);
  --sl-color-blue-500: hsl(217.8 95.8% 57.4%);
  --sl-color-blue-600: hsl(213.3 100% 65%);
  --sl-color-blue-700: hsl(210.9 100% 74.8%);
  --sl-color-blue-800: hsl(211.5 100% 83.4%);
  --sl-color-blue-900: hsl(211 100% 88.9%);
  --sl-color-blue-950: hsl(201.8 100% 95.3%);

  --sl-color-indigo-50: hsl(243.5 40.8% 27%);
  --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
  --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
  --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
  --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
  --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
  --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
  --sl-color-indigo-700: hsl(229.4 100% 78.3%);
  --sl-color-indigo-800: hsl(227.1 100% 85%);
  --sl-color-indigo-900: hsl(223.8 100% 89.9%);
  --sl-color-indigo-950: hsl(220 100% 95.1%);

  --sl-color-violet-50: hsl(265.1 57.3% 25.4%);
  --sl-color-violet-100: hsl(263.5 63.8% 39.4%);
  --sl-color-violet-200: hsl(263.4 66.2% 44.1%);
  --sl-color-violet-300: hsl(263.7 72.8% 52.4%);
  --sl-color-violet-400: hsl(262.5 87.3% 59.8%);
  --sl-color-violet-500: hsl(258.3 95.1% 63.2%);
  --sl-color-violet-600: hsl(255.1 100% 67.2%);
  --sl-color-violet-700: hsl(253 100% 81.5%);
  --sl-color-violet-800: hsl(251.7 100% 87.9%);
  --sl-color-violet-900: hsl(254.1 100% 91.7%);
  --sl-color-violet-950: hsl(257.1 100% 96.1%);

  --sl-color-purple-50: hsl(276 54.3% 20.5%);
  --sl-color-purple-100: hsl(273.6 61.8% 35.4%);
  --sl-color-purple-200: hsl(272.9 64% 41.4%);
  --sl-color-purple-300: hsl(271.9 68.1% 49.2%);
  --sl-color-purple-400: hsl(271.5 85.1% 57.8%);
  --sl-color-purple-500: hsl(270.7 96.4% 62.1%);
  --sl-color-purple-600: hsl(270.5 100% 71.9%);
  --sl-color-purple-700: hsl(270.9 100% 81.3%);
  --sl-color-purple-800: hsl(272.4 100% 87.7%);
  --sl-color-purple-900: hsl(276.7 100% 91.5%);
  --sl-color-purple-950: hsl(300 100% 96.5%);

  --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
  --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
  --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
  --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
  --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
  --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
  --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
  --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
  --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
  --sl-color-fuchsia-900: hsl(300 100% 91.5%);
  --sl-color-fuchsia-950: hsl(300 100% 96.3%);

  --sl-color-pink-50: hsl(336.2 59.6% 20%);
  --sl-color-pink-100: hsl(336.8 63.9% 34%);
  --sl-color-pink-200: hsl(336.8 68.7% 37.6%);
  --sl-color-pink-300: hsl(336.1 71.8% 44.5%);
  --sl-color-pink-400: hsl(333.9 74.9% 53.1%);
  --sl-color-pink-500: hsl(330.7 86.3% 57.7%);
  --sl-color-pink-600: hsl(328.6 91.5% 67.2%);
  --sl-color-pink-700: hsl(327.4 97.6% 78.7%);
  --sl-color-pink-800: hsl(325.1 100% 86.6%);
  --sl-color-pink-900: hsl(322.1 100% 91.3%);
  --sl-color-pink-950: hsl(315 100% 95.9%);

  --sl-color-rose-50: hsl(342.3 62.9% 21.5%);
  --sl-color-rose-100: hsl(342.8 68.9% 34.2%);
  --sl-color-rose-200: hsl(344.8 72.6% 37.3%);
  --sl-color-rose-300: hsl(346.9 75.8% 43.7%);
  --sl-color-rose-400: hsl(348.2 80.1% 52.7%);
  --sl-color-rose-500: hsl(350.4 94.8% 57.5%);
  --sl-color-rose-600: hsl(351.2 100% 58.1%);
  --sl-color-rose-700: hsl(352.3 100% 78.1%);
  --sl-color-rose-800: hsl(352 100% 86.2%);
  --sl-color-rose-900: hsl(354.5 100% 90.7%);
  --sl-color-rose-950: hsl(353.3 100% 95.7%);

  --sl-color-primary-50: var(--sl-color-indigo-50);
  --sl-color-primary-100: var(--sl-color-indigo-100);
  --sl-color-primary-200: var(--sl-color-indigo-200);
  --sl-color-primary-300: var(--sl-color-indigo-300);
  --sl-color-primary-400: var(--sl-color-indigo-400);
  --sl-color-primary-500: var(--tc-accent-color);
  --sl-color-primary-600: var(--tc-accent-color);
  --sl-color-primary-700: var(--tc-accent-darker-color);
  --sl-color-primary-800: var(--sl-color-indigo-800);
  --sl-color-primary-900: var(--sl-color-indigo-900);
  --sl-color-primary-950: var(--sl-color-indigo-950);

  --sl-color-success-50: var(--sl-color-green-50);
  --sl-color-success-100: var(--sl-color-green-100);
  --sl-color-success-200: var(--sl-color-green-200);
  --sl-color-success-300: var(--sl-color-green-300);
  --sl-color-success-400: var(--sl-color-green-400);
  --sl-color-success-500: var(--sl-color-green-500);
  --sl-color-success-600: var(--sl-color-green-600);
  --sl-color-success-700: var(--sl-color-green-700);
  --sl-color-success-800: var(--sl-color-green-800);
  --sl-color-success-900: var(--sl-color-green-900);
  --sl-color-success-950: var(--sl-color-green-950);

  --sl-color-warning-50: var(--sl-color-amber-50);
  --sl-color-warning-100: var(--sl-color-amber-100);
  --sl-color-warning-200: var(--sl-color-amber-200);
  --sl-color-warning-300: var(--sl-color-amber-300);
  --sl-color-warning-400: var(--sl-color-amber-400);
  --sl-color-warning-500: var(--sl-color-amber-500);
  --sl-color-warning-600: var(--sl-color-amber-600);
  --sl-color-warning-700: var(--sl-color-amber-700);
  --sl-color-warning-800: var(--sl-color-amber-800);
  --sl-color-warning-900: var(--sl-color-amber-900);
  --sl-color-warning-950: var(--sl-color-amber-950);

  --sl-color-danger-50: var(--sl-color-red-50);
  --sl-color-danger-100: var(--sl-color-red-100);
  --sl-color-danger-200: var(--sl-color-red-200);
  --sl-color-danger-300: var(--sl-color-red-300);
  --sl-color-danger-400: var(--sl-color-red-400);
  --sl-color-danger-500: var(--sl-color-red-500);
  --sl-color-danger-600: var(--sl-color-red-600);
  --sl-color-danger-700: var(--sl-color-red-700);
  --sl-color-danger-800: var(--sl-color-red-800);
  --sl-color-danger-900: var(--sl-color-red-900);
  --sl-color-danger-950: var(--sl-color-red-950);

  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);

  --sl-color-neutral-0: hsl(240, 5.9%, 11%);
  --sl-color-neutral-1000: hsl(0, 0%, 100%);

  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.25rem;
  --sl-border-radius-large: 0.5rem;
  --sl-border-radius-x-large: 1rem;

  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;

  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
  --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);

  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 1rem;
  --sl-spacing-large: 1.25rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;

  --sl-transition-x-slow: 1000ms;
  --sl-transition-slow: 500ms;
  --sl-transition-medium: 250ms;
  --sl-transition-fast: 150ms;
  --sl-transition-x-fast: 50ms;

  --sl-font-size-2x-small: 0.625rem;
  --sl-font-size-x-small: 0.75rem;
  --sl-font-size-small: 0.875rem;
  --sl-font-size-medium: 1rem;
  --sl-font-size-large: 1.25rem;
  --sl-font-size-x-large: 1.5rem;
  --sl-font-size-2x-large: 2.25rem;
  --sl-font-size-3x-large: 3rem;
  --sl-font-size-4x-large: 4.5rem;

  --sl-font-weight-light: 300;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 500;
  --sl-font-weight-bold: 700;

  --sl-letter-spacing-denser: -0.03em;
  --sl-letter-spacing-dense: -0.015em;
  --sl-letter-spacing-normal: normal;
  --sl-letter-spacing-loose: 0.075em;
  --sl-letter-spacing-looser: 0.15em;

  --sl-line-height-denser: 1;
  --sl-line-height-dense: 1.4;
  --sl-line-height-normal: 1.8;
  --sl-line-height-loose: 2.2;
  --sl-line-height-looser: 2.6;

  --sl-focus-ring-color: var(--sl-color-primary-700);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 0;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 1px;

  --sl-button-font-size-small: var(--sl-font-size-x-small);
  --sl-button-font-size-medium: var(--sl-font-size-small);
  --sl-button-font-size-large: var(--sl-font-size-medium);

  --sl-input-height-small: 1.875rem;
  --sl-input-height-medium: 2.5rem;
  --sl-input-height-large: 3.125rem;

  --sl-input-background-color: var(--tc-neutral-color);
  --sl-input-background-color-hover: var(--tc-neutral-color);
  --sl-input-background-color-focus: var(--tc-neutral-color);
  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-border-color: var(--sl-color-neutral-400);
  --sl-input-border-color-hover: var(--sl-color-neutral-500);
  --sl-input-border-color-focus: var(--sl-color-primary-600);
  --sl-input-border-color-disabled: var(--sl-color-neutral-400);
  --sl-input-border-width: 1px;
  --sl-input-required-content: "*";
  --sl-input-required-content-offset: -2px;
  --sl-input-required-content-color: var(--sl-input-label-color);

  --sl-input-border-radius-small: var(--sl-border-radius-medium);
  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
  --sl-input-border-radius-large: var(--sl-border-radius-medium);

  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);

  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-color-focus: var(--sl-color-neutral-700);
  --sl-input-color-disabled: var(--sl-color-neutral-900);
  --sl-input-icon-color: var(--sl-color-neutral-500);
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
  --sl-input-placeholder-color: var(--sl-color-neutral-500);
  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
  --sl-input-spacing-small: var(--sl-spacing-small);
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-large);

  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  --sl-input-focus-ring-offset: 0;

  --sl-input-filled-background-color: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-filled-color: var(--sl-color-neutral-800);
  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);

  --sl-input-label-font-size-small: var(--sl-font-size-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
  --sl-input-label-font-size-large: var(--sl-font-size-large);
  --sl-input-label-color: inherit;

  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
  --sl-input-help-text-color: var(--tc-fg-muted-darker-color);

  --sl-toggle-size-small: 0.875rem;
  --sl-toggle-size-medium: 1.125rem;
  --sl-toggle-size-large: 1.375rem;

  --sl-overlay-background-color: var(--tc-overlay-bg-color);

  --sl-panel-background-color: var(--tc-secondary-color);
  --sl-panel-border-color: var(--tc-nav-border-color);

  --sl-panel-border-width: 1px;

  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
  --sl-tooltip-background-color: var(--sl-color-neutral-800);
  --sl-tooltip-color: var(--sl-color-neutral-0);
  --sl-tooltip-font-family: var(--sl-font-sans);
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
  --sl-tooltip-font-size: var(--sl-font-size-small);
  --sl-tooltip-line-height: var(--sl-line-height-dense);
  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
  --sl-tooltip-arrow-size: 6px;

  --sl-z-index-drawer: 700;
  --sl-z-index-dialog: 800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast: 950;
  --sl-z-index-tooltip: 1000;
}

@supports (scrollbar-gutter: stable) {
  .sl-scroll-lock {
    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
  }

  .sl-scroll-lock body {
    overflow: hidden !important;
  }
}

@supports not (scrollbar-gutter: stable) {
  .sl-scroll-lock body {
    padding-right: var(--sl-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}

.sl-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.sl-toast-stack sl-alert {
  margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
  box-shadow: var(--sl-shadow-large);
}


/* highlight.js */
.hljs {
  display: block;
  overflow-x: auto;
  background: var(--tc-pre-code-bg-color);
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #8be9fd;
}

.hljs-keyword {
  color: #ff79c6;
}

.hljs,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-title,
.hljs-attr,
.hljs-meta-keyword {
  font-style: italic;
  color: #50fa7b;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #f1fa8c;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-literal,
.hljs-number {
  color: #bd93f9;
}

.hljs-emphasis {
  font-style: italic;
}


/* tablesort */
th[role=columnheader]:not(.no-sort) {
	cursor: pointer;
  padding-right:25px !important;
}

th[role=columnheader]:not(.no-sort):after {
	content: '';
	float: right;
	margin-top: 7px;
	border-bottom: none;
	border-width: 6px 6px 0;
	border-color: var(--tc-fg-muted-darker-color) transparent;
	/* visibility: hidden; */
	opacity: 0;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
  margin-right: -20px;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--sl-transition-medium);
  transition-property: opacity
}

th[aria-sort=ascending]:not(.no-sort):after {
	
  border-width: 0 6px 6px;
	border-style: solid;
}

th[aria-sort]:not(.no-sort):after {
	/* visibility: visible; */
	opacity: 0.6;
}

th[role=columnheader]:not(.no-sort):hover:after {
	/* visibility: visible; */
	opacity: 1;
}


/* simplemde */

sl-input.entry_input::part(form-control-label), sl-textarea.entry_input::part(form-control-label) {
  font-size:1.15rem;
  color: var(--tc-h3-color);
  font-weight:300;
  margin-bottom: 0.25rem;
}

.form-control__label {
  font-size:1.15rem;
  color: var(--tc-h3-color);
  font-weight:300;
  margin-bottom: 0.25rem;
}

.editor-preview, .editor-preview-side {
  background-color: var(--tc-neutral-color);
  color: var(--tc-fg-color);
  font-size:14px;
  padding: 8px 16px 14px; 
  /* padding: 10px 16px; */
}

.editor-toolbar.disabled-for-preview a:not(.no-disable) {
  background-color:inherit;
  opacity:.4;
}

.CodeMirror {
  background-color: var(--tc-neutral-color);
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
  color: var(--tc-fg-color);
  font-family: var(--sl-font-mono);
  font-size:14px;
  padding: 14px 16px;
  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color;
  cursor: text;
}

.CodeMirror:hover {
  background-color: var(--tc-secondary-color);
}

.CodeMirror .CodeMirror-code .cm-formatting-code, .CodeMirror .CodeMirror-code .cm-formatting-code-block, .CodeMirror .CodeMirror-code .cm-formatting-em, .CodeMirror .CodeMirror-code .cm-formatting-header, .CodeMirror .CodeMirror-code .cm-formatting-strikethrough, .CodeMirror .CodeMirror-code .cm-formatting-strong {
  color: var(--tc-fg-muted-darker-color);
}

.CodeMirror .CodeMirror-code .cm-link {
  color: var(--tc-accent-color);
}

.CodeMirror, .CodeMirror-scroll {
	min-height: 75px;
}

.editor-toolbar {
  border: solid 2px var(--sl-input-border-color);
  background-color: var(--tc-mobile-drawer-bg-color);
}

.editor-toolbar a {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--sl-transition-medium);
    transition-property: background-color, color, border-color;
    color: var(--tc-fg-color) !important;
}

.editor-toolbar:hover a {
  color: var(--tc-accent-color) !important;
}

.editor-toolbar a:hover {
  border-color: var(--tc-accent-darker-color) !important;
}

.editor-toolbar i.separator {
  border-color: var(--tc-divider-color);
}

.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection, .CodeMirror-selected {
  color: var(--tc-header-fg-color) !important;
  background-color: var(--tc-accent-darker-color) !important;
}


.CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {
  color: var(--tc-header-fg-color) !important;
  background: var(--tc-accent-darker-color) !important;
}

.CodeMirror .CodeMirror-code span.CodeMirror-selectedtext.cm-comment {
  color: var(--tc-header-fg-color) !important;
  background: var(--tc-accent-darker-color) !important;
}

.CodeMirror .CodeMirror-code .cm-comment {
  background-color:var(--tc-code-bg-color);
}

.editor-preview pre, .editor-preview-side pre {
  background-color: var(--tc-pre-code-bg-color);
  font-family: var(--sl-font-mono);
  font-size: inherit !important;
  line-height: inherit !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  overflow: hidden;
  padding: 0 !important;
}

.CodeMirror.cm-s-paper.CodeMirror-wrap.CodeMirror-focused {
  border-color: var(--tc-accent-color);
  background-color: var(--tc-bg-color) !important;
}

.swap-stack { display: inline-grid; }
.swap-stack > * { grid-area: 1 / 1; }

.custom_combobox_item:hover {
  background-color: var(--tc-primary-color) !important;
}

.tooth_combobox {
  color: var(--tc-fg-color);
    padding: 0 var(--sl-input-spacing-medium);
    font-size: var(--sl-input-font-size-medium);
    height: var(--sl-input-height-medium);
    background-color: var(--sl-input-background-color);
    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
    border-radius: var(--sl-input-border-radius-medium);
}

.tooth_combobox.open {
  background-color: var(--tc-bg-color) !important;
  border-color: var(--sl-input-border-color-focus) !important;
}

.tooth_combobox:hover {
  background-color: var(--tc-secondary-color);
  border-color: var(--sl-input-border-color-hover)
}

.combobox-option:checked:before {
  background-color: var(--tc-accent-darker-color);
}

.combobox-option:checked:focus {
  outline-color: var(--tc-accent-darker-color);
}

.combobox-option:checked {
  border-color: var(--tc-accent-darker-color);
}

.combobox-option:checked + svg {
  color: white;
}




/* DENTAL DIAGRAM START */

/* Make this as small/large as you want */
  .dental-indicator-wrap{width:100%;max-width:300px;}
  .dental-indicator-face{position:relative;width:100%;aspect-ratio:2/1}
  .dental-indicator-mouth{
    position:absolute;inset:0;width:100%;height:100%;
    border-radius:50%/40% 40% 100% 100%;
    /* border: clamp(2px, 0.9vmin, 12px) solid #ffbf80; */
    border: 2px solid #ffbf80;
    background: radial-gradient(ellipse at center, #6b1113 20%, #511516 100%);
    overflow:hidden;
  }
  .dental-indicator-mouth::before{content:"";position:absolute;left:30%;top:20%;width:40%;height:70%;background:#2b00008c;border-radius:50%/100% 100% 30% 30%;opacity:.6}
  .dental-indicator-tongue{position:absolute;bottom:-3vmin;left:15%;width:70%;height:45%;background:#c9666b;border-radius:50% 50% 0 0 / 100% 100% 0 0;box-shadow:inset 1vmin 1vmin #aa3c41;opacity:.35}

  .dental-indicator-row{position:absolute;left:0;width:100%;list-style:none;display:block}
  .dental-indicator-row.upper{top:-4;height:28%;left:-1.25%; margin:0 !important}
  .dental-indicator-row.lower{bottom:0;height:28%;left:-1.25%; margin:0 !important}

  /* Teeth (display-only: no pointer events, no hover effects) */
  .dental-indicator-tooth{
    position:absolute;top:0;width:6.05%;height:125%;
    background:
      radial-gradient(60% 70% at 50% 20%, rgba(255,255,255,.95), rgba(245,245,245,.95)),
      linear-gradient(#fff,#f3f4f6);
    border:3px solid #d4d4d8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.05);
    display:grid;place-items:center;
    font-weight: 700;
    font-size: 11px;
    font-family: var(--sl-font-mono);
    color: rgb(100, 100, 100);
    user-select: none;
    border-radius:16%/18%;
    /* highlight behavior */
    opacity:.4;           /* dim by default */
    pointer-events:none;  /* no interactivity */
    transition:none;
  }
  .dental-indicator-row.upper .dental-indicator-tooth{border-bottom-left-radius:18%;border-bottom-right-radius:18%}
  .dental-indicator-row.lower .dental-indicator-tooth{border-top-left-radius:18%;border-top-right-radius:18%;top:-15%}

  /* Per-tooth vertical nudges (from your original) */
  .dental-indicator-tooth[data-tooth="1"], .dental-indicator-tooth[data-tooth="2"], .dental-indicator-tooth[data-tooth="15"], .dental-indicator-tooth[data-tooth="16"]{top:12%}
  .dental-indicator-tooth[data-tooth="3"], .dental-indicator-tooth[data-tooth="14"]{top:6%}
  .dental-indicator-tooth[data-tooth="4"], .dental-indicator-tooth[data-tooth="13"]{top:2%}
  .dental-indicator-tooth[data-tooth="7"], .dental-indicator-tooth[data-tooth="10"]{top:-8%}
  .dental-indicator-tooth[data-tooth="8"], .dental-indicator-tooth[data-tooth="9"]{top:-10%}

  .dental-indicator-tooth[data-tooth="32"], .dental-indicator-tooth[data-tooth="31"], .dental-indicator-tooth[data-tooth="18"], .dental-indicator-tooth[data-tooth="17"]{top:-55%!important}
  .dental-indicator-tooth[data-tooth="30"], .dental-indicator-tooth[data-tooth="19"]{top:-42%!important}
  .dental-indicator-tooth[data-tooth="29"], .dental-indicator-tooth[data-tooth="20"]{top:-25%!important}
  .dental-indicator-tooth[data-tooth="27"], .dental-indicator-tooth[data-tooth="22"]{top:-8%!important}
  .dental-indicator-tooth[data-tooth="26"], .dental-indicator-tooth[data-tooth="23"]{top:-4%!important}
  .dental-indicator-tooth[data-tooth="25"], .dental-indicator-tooth[data-tooth="24"]{top:-2%!important}

  /* Optional shapes (kept neutral for clean look) */
  .dental-indicator-shape-incisor{}
  .dental-indicator-shape-canine{}
  .dental-indicator-shape-premolar{}
  .dental-indicator-shape-molar{}

  /* Active tooth opacity override */
  .dental-indicator-tooth--on{opacity:1; color:black;}




  /* Responsive container (fills parent width, keeps 2:1 ratio) */
  .dental-diagram-wrap { position: relative; width: 100%; max-width: 800px; margin-inline: auto; }
  .dental-diagram-face {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;   /* derives height from width */
    z-index: 100; 
    isolation: isolate;
  }

  .dental-diagram-mouth {
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:50% / 40% 40% 100% 100%;
    border: clamp(2px, 0.9vmin, 12px) solid #ffbf80;
    background: radial-gradient(ellipse at center, #6b1113 20%, #511516 100%);
    overflow:hidden;
  }
  .dental-diagram-mouth::before { content:""; position:absolute; left:30%; top:20%; width:40%; height:70%; background:#2b00008c; border-radius:50% / 100% 100% 30% 30%; opacity:.6; }
  .dental-diagram-tongue { position:absolute; bottom:-3vmin; left:15%; width:70%; height:40%; background:#c9666b; border-radius:50% 50% 0 0 / 100% 100% 0 0; box-shadow: inset 1vmin 1vmin #aa3c41; opacity:.35; }

  /* Rows inside mouth */
  .dental-diagram-row { position:absolute; left:0; width:100%; list-style:none; display:block; pointer-events:none; }
  .dental-diagram-row.upper{ top:-5; height:28%; left:-1.25%; margin:0 !important }
  .dental-diagram-row.lower{ bottom:-2; height:28%; left:-1.25%; margin:0 !important }

  /* Teeth */
  .dental-diagram-tooth{
    position:absolute; top:0; width:6.05%; height:115%;
    background:
      radial-gradient(60% 70% at 50% 20%, rgba(255,255,255,.95), rgba(245,245,245,.95)),
      linear-gradient(#fff,#f3f4f6);
    border:3px solid #d4d4d8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.05);
    pointer-events:auto; cursor:pointer; display:grid; place-items:center;
    transition: transform .08s ease, box-shadow .08s ease, border-color .1s;
    border-radius: 16% / 18%;
    font-weight: 700;
    font-size: 11px;
    font-family: var(--sl-font-mono);
    color: rgb(100, 100, 100);
  transition: opacity .12s ease, transform .08s ease, box-shadow .08s ease, border-color .1s;
}
.dental-diagram-tooth.is-dimmed { opacity: .4; }

  .dental-diagram-row.upper .dental-diagram-tooth{ border-bottom-left-radius:18%; border-bottom-right-radius:18%; }
  .dental-diagram-row.lower .dental-diagram-tooth{ border-top-left-radius:18%; border-top-right-radius:18%; top:-15%; }

  .dental-diagram-tooth:hover, .dental-diagram-tooth[aria-pressed="true"]{ transform: translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.12); }

  /* (Optional) shapes */
  .dental-diagram-shape-incisor  { clip-path: polygon(18% 6%, 82% 6%, 90% 30%, 72% 95%, 28% 95%, 10% 30%); }
  .dental-diagram-shape-canine   { clip-path: polygon(22% 6%, 78% 6%, 86% 28%, 66% 100%, 50% 88%, 34% 100%, 14% 28%); }
  .dental-diagram-shape-premolar { clip-path: polygon(12% 12%, 88% 12%, 96% 42%, 80% 92%, 20% 92%, 4% 42%); }
  .dental-diagram-shape-molar    { clip-path: polygon(8% 16%, 92% 16%, 98% 46%, 90% 90%, 10% 90%, 2% 46%); }

  /* Status */
  .dental-diagram-is-crown   { border: 3px solid var(--sl-color-blue-500); }
  .dental-diagram-is-eroded  { border: 3px dashed var(--sl-color-red-500); }
  .dental-diagram-is-cavity  { border: 3px solid var(--sl-color-red-500); }
  .dental-diagram-is-filling { background: linear-gradient(#f8fafc, #e5e7eb); }
  .dental-diagram-is-missing { background: repeating-linear-gradient(45deg,#fff,#fff 6px,#e5e7eb 6px,#e5e7eb 12px); opacity:.2 !important; }

  .dental-diagram-invisible { visibility:hidden; }

  /* Your per-tooth tweaks */
  .dental-diagram-tooth[data-tooth="1"], .dental-diagram-tooth[data-tooth="2"], .dental-diagram-tooth[data-tooth="15"], .dental-diagram-tooth[data-tooth="16"] { top: 12%; }
  .dental-diagram-tooth[data-tooth="3"], .dental-diagram-tooth[data-tooth="14"] { top: 6%; }
  .dental-diagram-tooth[data-tooth="4"], .dental-diagram-tooth[data-tooth="13"] { top: 2%; }
  .dental-diagram-tooth[data-tooth="7"], .dental-diagram-tooth[data-tooth="10"] { top: -8%; }
  .dental-diagram-tooth[data-tooth="8"], .dental-diagram-tooth[data-tooth="9"] { top: -10%; }

  .dental-diagram-tooth[data-tooth="32"], .dental-diagram-tooth[data-tooth="31"], .dental-diagram-tooth[data-tooth="18"], .dental-diagram-tooth[data-tooth="17"] { top: -55% !important; }
  .dental-diagram-tooth[data-tooth="30"], .dental-diagram-tooth[data-tooth="19"] { top: -42% !important; }
  .dental-diagram-tooth[data-tooth="29"], .dental-diagram-tooth[data-tooth="20"] { top: -25% !important; }
  .dental-diagram-tooth[data-tooth="27"], .dental-diagram-tooth[data-tooth="22"] { top: -8% !important; }
  .dental-diagram-tooth[data-tooth="26"], .dental-diagram-tooth[data-tooth="23"] { top: -4% !important; }
  .dental-diagram-tooth[data-tooth="25"], .dental-diagram-tooth[data-tooth="24"] { top: -2% !important; }

  /* POPUP (no layout space) */
  .dental-diagram-pop {
    position: absolute;
    z-index: 101;
    width: min(100%, 350px);
    background: var(--tc-secondary-color);
    border: 2px solid var(--tc-table-border-color);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
    transform: translate(-50%, -8px); 
    transition: opacity 120ms ease, transform 120ms ease;     
    pointer-events: none;
    opacity:0;
    visibility:hidden;
  }
  .dental-diagram-pop.is-visible{
  opacity:1;
  visibility:visible;
  transform: translate(-50%, -100%);         /* a touch more for 'top' look */
}

  .dental-diagram-pop[data-locked="true"] { pointer-events: auto; }

  .dental-diagram-pop .arrow {
    position: absolute; width: 12px; height: 12px; background: var(--tc-secondary-color);
    border-right: 2px solid var(--tc-table-border-color); border-bottom: 2px solid var(--tc-table-border-color);
    transform: rotate(45deg);
  }

  .dental-diagram-pop:not(.is-visible) .arrow {
  visibility: hidden; /* or display:none if you don't need the arrow to fade */
}

  .dental-diagram-pop[data-side="top"] .arrow { bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); }

  .dental-diagram-pop .title { color:var(--tc-h1-color); font-size:1.05rem; font-weight:700; white-space: nowrap; }
  .dental-diagram-pop .details { 
    color:var(--tc-fg-muted-color);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.2;
    text-align:right;
  }
  .dental-diagram-pop .line { color:var(--tc-fg-color); display:flex; gap:.5rem; justify-content:space-between; font-size:.95rem; }


/* DENTAL DIAGRAM END */