* {
  box-sizing: border-box;
}

body {
  --icon-size: 16px;
  --font: "Noto Sans","IBM Plex Sans",sans-serif;
  --header-font: "Droid Serif", "Raleway", "Merryweather", serif;
  --margin: 16px;
  --disabled-color: #747474;
  --max-width: 700px;

  margin: 0;
  font-family: var(--font);
  line-height: 1.4;
}

textarea {
    font-family: var(--font);
}

button, input, textarea {
    padding: 8px;
    font-size: 1rem;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
}

h1 {
  font-size: 1.6rem;
  font-family: var(--header-font)
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.1rem;
}

button:hover {
    cursor: pointer;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline
}

a:visited {
    color: linktext; /* FF */
    color: -webkit-any-link;
}

hr {
    border: none;
    border-top: 1px dotted #666;
    color: #666;
    overflow: visible;
    text-align: center;
    height: 1px;
    width: 100%;
    margin: var(--margin) 0;
}

input[type=checkbox]
{
    width: 18px;
    height: 18px;
}

img.Icon {
    width:var(--icon-size);
}

.UnstyledLink {
    color: unset !important;
    text-decoration: none;
}

.UnstyledLink:hover {
    text-decoration: none;
}

.SuccessMsg {
    color: green;
}

.Errors {
    color:red;
}

.App {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px 10px;
    min-width: 250px;
}

.MainContent {
    width: 100%;
    max-width: var(--max-width);
}

.TitleContentSeparator {
    background: #666;
    height: 1px;
    margin-top: 4px;
}

header {
  font-size: 1.6rem;
  display:flex;

  flex-direction: column;
  margin-bottom: 4px;
}

.SiteTitleText {
    font-family: "Droid Serif", "Raleway", "Merryweather", serif;
    display: flex;
    align-items: center;
    margin:0;
    white-space:nowrap;
  }

.MenuButtons {
  display: flex;
  gap: var(--margin);
  position: relative;
  right: 46px;
  margin-left: 52px;
  align-self: flex-end;
  align-items: center;
  bottom: 6px;
  font-size: 0.9rem;
}

.IconTextLink {
    display: flex;
    align-items: center;
    gap: calc(var(--margin) / 4);
    white-space: nowrap;
}

/* set size to prevent layout shift after the browser loads images  */
.IconTextLink img {
    width:var(--icon-size);
    height:var(--icon-size);
}

.ButtonAsLink {
    align-items: normal;
    background-color: rgba(0,0,0,0);
    border-color: rgb(0, 0, 238);
    border-style: none;
    box-sizing: content-box;
    color: linktext; /* FF */
    color: -webkit-any-link;
    cursor: pointer;
    display: inline;
    font: inherit;
    height: auto;
    padding: 0;
    perspective-origin: 0 0;
    text-align: start;
    transform-origin: 0 0;
    width: auto;
    -moz-appearance: none;
    -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
    -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

.ButtonAsLink:hover {
    text-decoration: underline;
}

/* fix for IconTextLink as ButtonLink having the flex gap underlined on hover: only decorate text */
.ButtonAsLink.IconTextLink {
    text-decoration: none;
}

.ButtonAsLink.IconTextLink:hover .Text {
    text-decoration: underline;
}
/* end fix */

@supports (-moz-appearance:none) { /* Mozilla-only */
  ButtonAsLink::-moz-focus-inner { /* reset any predefined properties */
    border: none;
    padding: 0;
  }
  ButtonAsLink:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

.UnstyledButton {
    background: transparent;
    border: 0;
}

/* search */
.SearchInput {
    height: var(--search-input-height);
    font-size: 1.1rem;
    width: 100%;
    border-radius: 12px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 8px 12px;
    border-style: solid;
    border-color: #666;
  }

  .SearchInput:focus-visible {
      z-index: 2;
  }

  .SearchButton {
    display:flex;
    align-items: center;
    padding: 0px 12px;

    border-radius: 12px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0;
    border-style: solid;
    border-color: #666;
  }

  .SearchForm {
    width: 100%;
    margin-bottom: 20px;
    min-width: 140px;
  }

  .SearchResultEntry {
    margin-bottom: 20px;
  }

  .SearchResultDescription {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    /* limit number of lines shown, ellipsis */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .SearchResultTitle {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: calc(var(--margin)/8);
  }

  .SearchResultUrl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    }

  .SearchResultUrl a {
    font-size: 0.85rem;
    text-decoration: none;
  }

  .SearchResultUrl:hover + .SearchResultTitle a {
    text-decoration: underline;
  }

  .LinkAsNormalText {
    text-decoration: none;
  }

  .Suggestion {
    margin-bottom: var(--margin);
    display:flex;
    align-items: center;
    column-gap: var(--margin);
  }

  .Pagination {
    display: flex;
    flex-direction: column;
  }

    .Pagination .Active {
        color: black;
        text-decoration: underline;
    }

  .Pagination a {
    padding: 4px 16px 4px 0px;
  }

  .Pagination a {
    padding: 4px 16px 4px 0px;
  }

  .Pagination a.Disabled {
      color: var(--disabled-color);
      text-decoration: none;
      cursor: default;
  }

  @media (min-width: 350px) {
        .Pagination {
            flex-direction: row;
        }

      .Pagination a {
        padding: 8px 16px 8px 16px;
      }

      .Pagination a:first-of-type {
        padding-left: 0;
      }
  }

  .TitleAndMenu {
    display:flex;
    flex-direction: row;
  }

  .TagLine {
      font-size: 1.1rem;
  }

  @media only screen and (max-width: 490px) {
    .TitleAndMenu {
      flex-direction: column;
    }

    .MenuButtons {
      position: unset;
      margin-left: 0;
      align-self: flex-start;
    }
  }

   @media only screen and (max-width: 345px) {
        .MenuButtons {
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
        }
   }

.Note[contenteditable=true] {
    border-bottom: 1px dashed #cddde3;
}