/* image */
  /* component inline icon */
  .cin {
    height: 1em !important; 
    vertical-align: -0.2em !important;
  }

  /* slightly bigger inline icon */
  img.si{
    display: inline-block !important;
    height: 1.5em !important;
    vertical-align: -0.4em !important;
    padding-left: auto !important;
    padding-right: auto !important;
  }

  img.fillet {
    border-radius: 5px;
  }

  /* main images, using elsevier one column = 190mm rule */
  /* 1031.81px 190mm */
  img.w10  { max-width: calc(1031.81px * 10 / 190); width: 100%; }
  img.w20  { max-width: calc(1031.81px * 20 / 190); width: 100%; }
  img.w30  { max-width: calc(1031.81px * 30 / 190); width: 100%; }
  img.w40  { max-width: calc(1031.81px * 40 / 190); width: 100%; }
  img.w50  { max-width: calc(1031.81px * 50 / 190); width: 100%; }
  img.w60  { max-width: calc(1031.81px * 60 / 190); width: 100%; }
  img.w70  { max-width: calc(1031.81px * 70 / 190); width: 100%; }
  img.w80  { max-width: calc(1031.81px * 80 / 190); width: 100%; }
  img.w90  { max-width: calc(1031.81px * 90 / 190); width: 100%; }
  img.w100 { max-width: calc(1031.81px * 100 / 190); width: 100%; }
  img.w110 { max-width: calc(1031.81px * 110 / 190); width: 100%; }
  img.w120 { max-width: calc(1031.81px * 120 / 190); width: 100%; }
  img.w130 { max-width: calc(1031.81px * 130 / 190); width: 100%; }
  img.w140 { max-width: calc(1031.81px * 140 / 190); width: 100%; }
  img.w150 { max-width: calc(1031.81px * 150 / 190); width: 100%; }
  img.w160 { max-width: calc(1031.81px * 160 / 190); width: 100%; }
  img.w170 { max-width: calc(1031.81px * 170 / 190); width: 100%; }
  img.w180 { max-width: calc(1031.81px * 180 / 190); width: 100%; }
  img.w190 { max-width: calc(1031.81px * 190 / 190); width: 100%; }

/* extra space at bottom of main contents */
  .md-content {
    padding-bottom: 100px;
  }

/* admonition example with ovenbird icon */
  :root {
    --primary-r: 239;
    --primary-g: 85;
    --primary-b: 82;
  }

  :root {
    --md-admonition-icon--ovenbird: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 21 21'%3E%3C!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) --%3E%3Cg%3E%3Cg id='_x34_6-50'%3E%3Cpath d='M12,18.5h-1.5v-5c0-.3.2-.5.5-.5s.5.2.5.5v4h.5c.3,0,.5.2.5.5s-.2.5-.5.5Z'/%3E%3Cpath d='M16,18.5h-1.5v-5c0-.3.2-.5.5-.5s.5.2.5.5v4h.5c.3,0,.5.2.5.5s-.2.5-.5.5Z'/%3E%3Cpath d='M15.5,4.5c-.3,0-.5-.2-.5-.5v-1.5h5c.3,0,.5.2.5.5s-.2.5-.5.5h-4v.5c0,.3-.2.5-.5.5Z'/%3E%3Cpath d='M.5,19.4c.6.5,2.9-1.4,5.4-3.1,2.5-1.7,3.8-2.2,3.5-2.7s-2.8-1.3-3.2-1.2-3.8,4-4.8,5.2-.9,1.9-.9,1.9h0Z'/%3E%3Cpath d='M11.2,14.9c-2.1,0-4.9-.4-5.6-.5-1.1-.2-1.1-.9-1.1-1.3s.4-.9,1.4-1.8c.6-.5,1.2-1.1,1.8-1.8,1.2-1.4,6-6.5,6.8-7.1h0c.8-.7,2.3-1.9,3.8-.7h0c0,.1.7.8.4,1.6v.2c-.2.4-.3.7-.8,1.4-.2.3-.1,1.8,0,2.7,0,1.2.1,2.4,0,3-.5,1.3-3.2,3.9-5.2,4.3-.4,0-.9,0-1.4,0h0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
  }

  .md-typeset .admonition.example-inline,
  .md-typeset details.example-inline {
    border-color: var(--md-primary-fg-color);
  }

  .md-typeset .example-inline > .admonition-title,
  .md-typeset .example-inline > summary {
    background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.1);
  }
  
  .md-typeset .example-inline > .admonition-title::before,
  .md-typeset .example-inline > summary::before {
    background-color: var(--md-primary-fg-color);
    -webkit-mask-image: var(--md-admonition-icon--ovenbird);
            mask-image: var(--md-admonition-icon--ovenbird);
  }
  
  .md-typeset .admonition.example-inline {
    margin-top: -16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -16px;
    padding-bottom: 12px;;
  }
  
  .md-typeset .admonition.example-inline .admonition-title {
    margin-bottom: 12px;;
  }

  .md-typeset .admonition.example-block,
  .md-typeset details.example-block {
    border-color: var(--md-primary-fg-color);
  }

  .md-typeset .example-block > .admonition-title,
  .md-typeset .example-block > summary {
    background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.1);
  }

  .md-typeset .example-block > .admonition-title::before,
  .md-typeset .example-block > summary::before {
    background-color: var(--md-primary-fg-color);
    -webkit-mask-image: var(--md-admonition-icon--ovenbird);
            mask-image: var(--md-admonition-icon--ovenbird);
  }

  .md-tooltip {
    border-radius: 4px !important; /* match admonition */
  }

  /* otherwise it becomes 17.6px some times */
  .md-tooltip__inner {
    padding: 16px !important;
  }

  .md-typeset table img {
    display: inline-block !important;
  }

/* math */
  .katex-display {
    margin: -16px 0 !important;
  }

  .arithmatex {
    margin: 0 !important;
  }

/* grid customization */
  .grid {
    display: grid;
    gap: 10px !important;    /* space between items */
    align-items: start;   /* top-align like inline flow */
  }

  .grid3 {
    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)) !important;
  }

  .grid4 {
    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)) !important;
  }

  .card {
    /* looks like an inline box */
    padding: 10px !important;
  }

  .grid-no-border {
    gap: 4px !important;
  }

  .grid-no-border .card {
    border: none !important;
  }

  .grid-center .card {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    padding-top: 10px !important;   
    padding-bottom: 10px !important;   
  }

  .grid-authors .card img {
    display: block;
    margin: 0 auto;          /* centers the image only */
    /* max-width: 100px; */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* border-radius: 50%; */
    margin-bottom: 5px;
  }

  .grid-authors .card a,
  .grid-authors .card
  {
    text-align: center;      /* centers text separately */
  }

  .grid-long-logos {
    align-items: center !important;   /* center vertically */
  }

  .grid-long-logos .card img {
    max-height: 70px !important;
  }
