@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html, body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

h1, h2, h3, h4, h5, h6, input, select, textarea {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

html {
  font-family: 'DM Sans', sans-serif !important;
  color: #262626;
  background-color: #ffff;
  font-size: 1.2rem;
  line-height: 160%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  html {
    color: #e0dfe0;
    background-color: #323232;
  }

  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

h1 {
  font-weight: 200 !important;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 120%;
}

h2,
h3,
h4,
h5,
h6 {
  padding-bottom: 0.25rem;
  font-weight: 300 !important;
}

h2 {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: thin solid #dfdfdf;
  font-size: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  h2 {
    border-bottom: thin solid #464646;
  }
}

h3 {
  padding-bottom: 0.5rem;
  border-bottom: thin dashed #dfdfdf;
  font-size: 1.4rem;
}

@media (prefers-color-scheme: dark) {
  h3 {
    border-bottom: thin solid #464646;
  }
}

h4 {
  font-size: 1.3rem;
  padding: 0.2em 0.5rem 0.2rem 0.5rem;
  background-color: #fafafa;
  border-radius: 0.2rem;
}

@media (prefers-color-scheme: dark) {
  h4 {
    background-color: #666666 !important;
    color: #e0dfe0 !important;
  }
}

h5 {
  font-size: 1.2rem;
}

header {
  padding: 2rem 0 1.5rem 0;
  margin: 0 0 2.5rem 0;
  border-bottom: thin solid #dfdfdf;
}

@media (prefers-color-scheme: dark) {
  header {
    border-bottom: thin solid #464646;
  }
}

header p {
  margin: 0;
  padding: 0;
  font-weight: 100;
}

a,
a:link,
a:active,
a:focus,
a:visited,
a:hover {
  color: #3362b3;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  a,
  a:link,
  a:active,
  a:focus,
  a:visited,
  a:hover {
    color: #fbfafb;
  }

  main a,
  main a:link,
  main a:active,
  main a:focus,
  main a:visited,
  main a:hover {
    text-decoration: underline;
  }
}

pre {
  background-color: #f6f8fa !important;
  color: #262626 !important;
  border: none;
}

code {
  padding: 0.1em 0.2em;
  margin: 0;
  font-size: 95%;
  background-color: #f6f8fa !important;
  border-radius: 3px;
  border: none;
  color: #262626 !important;
}

@media (prefers-color-scheme: dark) {
  pre {
    background-color: rgb(186, 186, 188) !important;
  }
  code {
    background-color: rgb(186, 186, 188) !important;
  }

  pre code {
    color: #262626 !important;
  }
}

pre code {
  padding: auto;
  background-color: transparent !important;
}

pre, code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', Terminal, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace !important;
  font-weight: 100 !important;
  font-size: 0.8rem !important;
  line-height: 130% !important;
}

.highlight {
  border-radius: 0.2rem;
}

/* ---------- TABLES ---------- */

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  table, th, td {
    border: 1px solid #dfdfdf;
    vertical-align: top;
  }

  th {
    text-align: left;
  }

  th[align="right"] {
    text-align: right;
  }

  th small {
    font-weight: normal;
  }

  td small {
    opacity: .5;
    font-size: small;
  }

  th, td {
    padding: 5px;
  }

  th,
  .nowrap {
    white-space: nowrap;
  }

  tbody tr:hover {
    background-color: #efefef;
  }

  @media (prefers-color-scheme: dark) {
    tbody tr:hover {
      background-color: #464646;
    }
  }

/* ---------- /TABLES ---------- */

footer {
  padding: 1.5rem 0 2rem 0;
  margin: 1.5rem 0 0 0;
  border-top: thin solid #dfdfdf;
  font-size: 0.8rem;
}

@media (prefers-color-scheme: dark) {
  footer {
    border-top: thin solid #464646;
  }
}

footer p {
  margin: 0;
  padding: 0;
}

.sidebar {
  /*margin-top: 2.8rem;*/
  font-size: 0.8rem;
}

.sidebar form {
  margin-right: 0.8rem;
}

.sidebar form input[type=text] {
  margin-bottom: 0.1rem;
}

.sidebar form input[type=submit] {
  width: 100%;
}

.sidebar > ul {
  margin-top: 3px;
}

.sidebar ul li a {
  display: block;
  padding: 0.4rem 0 0.4rem 0;
  margin-right: 0.8rem;
  border-bottom: thin solid #dfdfdf;
  line-height: 140%;
}

.sidebar ul > li:last-child a {
  border-bottom: none;
}

@media (prefers-color-scheme: dark) {
  .sidebar ul li a {
    border-bottom: thin solid #464646;
  }
}

.sidebar ul li ul li,
.sidebar ul li ul li ul li {
  padding-left: 1.5rem;
}

.sidebar ul li a.active {
  font-weight: 500;
  color: #ed665a;
}

/* ---------- Tipue Search ---------- */

  #tipue_search_input {
    display: block !important;
    height: 2rem !important;
    padding: .25rem !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    background: #fff !important;
    border: 1px solid silver !important;
    border-radius: 0 !important;
    color: #222 !important;
    font-family: inherit !important;
  }

  @media (prefers-color-scheme: dark) {
    #tipue_search_input {
      color: #e0dfe0 !important;
      background-color: #323232 !important;
      border: 1px solid #dfdfdf !important;
    }
  }

  #tipue_search_results_count {
    display: none;
  }

  ul#tipue_search_foot_boxes {
    list-style: none;
    border: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
  }

  ul#tipue_search_foot_boxes li {
    display: inline;
    margin-right: 0.8rem;
  }
  
  .tipue_search_content_title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1.2rem !important;
    line-height: 160% !important;
    font-weight: 300 !important;
  }

  .tipue_search_content_title a,
  .tipue_search_content_title a:hover {
    color: #3362b3 !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }

  @media (prefers-color-scheme: dark) {
    .tipue_search_content_title a,
    .tipue_search_content_title a:hover {
      color: #fbfafb !important;
    }
  }

  .tipue_search_content_url {
    font-family: 'DM Sans', sans-serif !important;
    font-size: .9rem !important;
    line-height: 140% !important;
    font-weight: 300 !important;
    padding-top: 0 !important;
  }

  .tipue_search_content_url a,
  .tipue_search_content_url a:hover {
    color: #339e41 !important;
  }

  @media (prefers-color-scheme: dark) {
    .tipue_search_content_url a,
    .tipue_search_content_url a:hover {
      color: #fbfafb !important;
      text-decoration: none !important;
      opacity: .8;
    }
  }

  #tipue_search_error {
    font-family: 'DM Sans', sans-serif !important;
    color: #262626;
    font-size: 1.2rem;
    line-height: 160%;
  }

  .tipue_search_content_text {
    display: none;
  }

/* ---------- /Tipue Search ---------- */

.alert {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.alert code {
  background-color: rgba(246, 248, 250, .6) !important;
}

@media (prefers-color-scheme: dark) {
  .alert code {
    color: #323232 !important;
  }
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-left-color: #bee5eb
}

.alert-info a {
  color: #062c33
}

@media (prefers-color-scheme: dark) {
  .alert a {
    color: #4f3c00 !important;
  }
}

.embed-youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dn {
  display: none;
}