@import url('/open-color.css');

@font-face {
  font-family: "Noto Sans";
  src: url("/NotoSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/NotoSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/NotoSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/NotoSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --fonts-main: "Noto Sans", sans-serif;
}

body { font-family: var(--fonts-main); font-size: 0.875rem; color: var(--oc-gray-9); line-height: 1.6;}
pre, code { font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; }
pre {
    margin: 1em 1em 1em 1.6em;
    padding: 8px;
    background-color: var(--oc-gray-0);
    border: 1px solid var(--oc-gray-4);
    border-radius: 3px;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: normal;
}
a, a:link, a:visited{ color: var(--oc-blue-9); text-decoration: none; }
a:hover, a:active{ color: var(--oc-red-9); text-decoration: underline;}
a.new { color: var(--oc-red-9); }

table.sample { border-collapse: collapse; border-spacing: 0; margin: 4px; margin-left: 30px;}
table.sample th, table.sample td { border: solid 1px var(--oc-gray-5); padding: 4px; height: 1em; }
table.list td { background-color: var(--oc-gray-0); vertical-align: middle; padding: 0.3em;}

.syntaxhl .c1 { color: #888888 }
.syntaxhl .k { color: #008800; font-weight: bold }
.syntaxhl .nc { color: #BB0066; font-weight: bold }
.syntaxhl .nf { color: #0066BB; font-weight: bold }
.syntaxhl .nb { color: #007020 }
.syntaxhl .vi { color: #3333BB }
.syntaxhl .o { color: #333333 }
.syntaxhl .s2 { background-color: #fff0f0 }
.syntaxhl .si { background-color: #eeeeee }


.markdown-alert {
  border-inline-start: 4px solid;
  padding-inline-start: 10px;
  margin-inline-start: 20px;
}
.markdown-alert-title {
  font-weight: bold;
}
.markdown-alert-tip { border-color: var(--oc-green-7); }
.markdown-alert-tip .markdown-alert-title { color: var(--oc-green-9); }
.markdown-alert-important { border-color: var(--oc-grape-7); }
.markdown-alert-important .markdown-alert-title { color: var(--oc-grape-9); }
.markdown-alert-caution { border-color: var(--oc-yellow-7); }
.markdown-alert-caution .markdown-alert-title { color: var(--oc-yellow-9); }
.markdown-alert-warning { border-color: var(--oc-orange-7); }
.markdown-alert-warning .markdown-alert-title { color: var(--oc-orange-9); }
.markdown-alert-note { border-color: var(--oc-indigo-7); }
.markdown-alert-note .markdown-alert-title { color: var(--oc-indigo-9); }