:root {
  --line-dark: #34363e;
  --dark-mode-text-color: #d7d2cc;
  --expand-time: 0.2s;
  --opti-max-width: 600px;
  --opti-min-width: 400px;
  --horizontal-padding: 20px;
  --code-border-radius: 0.25rem;
}

[data-optisearch-column]:has(.optisearchbox:not(.mobile)) {
  min-width: var(--opti-min-width);
}
[data-optisearch-column=wide]:has(.optisearchbox:not(.mobile)) {
  min-width: var(--opti-max-width);
}

.optisearchbox {
  position: relative;
  overflow: hidden;
  margin: 20px 0 20px 0;
  padding: 8px var(--horizontal-padding);
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: min(100%, var(--opti-max-width));
  line-height: 1.5em;
  font-size: 15px;
  box-shadow: rgb(0 0 0 / 15%) 0px 0px 2px 0px, rgb(0 0 0 / 15%) 1px 3px 8px 0px;
  transition: max-height 5s;
}

.optisearchbox.mobile {
  max-width: 100%;
  margin: 0 0 8px 0;
  border-radius: 0;
}

.bright {
  color: #202124;
  background-color: #fff;
}
.dark {
  color: var(--dark-mode-text-color);
  color-scheme: dark;
}

.optiheader .headerhover {
  opacity: 0;
  transition: opacity 0.2s;
}
.optiheader:hover .headerhover {
  opacity: 1;
}
.optiheader .watermark {
  opacity: 1;
  transition: opacity 0.2s;
  z-index: 1;
}
.optiheader:hover .watermark {
  opacity: 0;
}

.optiheader .watermark, 
.optiheader .top-buttons-container {
  position: absolute;
  right: 0;
  margin: 0 1em;
  color: #999999;
  font-size: 10px;
  top: 4px;
}
.optiheader .top-buttons-container {
  z-index: 2;
}
.optiheader .top-buttons-container > * {
  margin-left: 5px;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  position: relative;
  transition: color 0.3s, text-shadow 0.3s;
  color: transparent;  
  text-shadow: 0 0 0 #bdbdbd;
}
.optiheader .top-buttons-container a {
  text-decoration: none;
  color: inherit !important;
}
.optiheader .top-buttons-container a:hover {
  text-decoration: none;
}
.optiheader [data-emoji=thumb]:hover {
  text-shadow: 0 0 0 #31a1fd;
}
.optiheader [data-emoji=star]:hover {
  text-shadow: 0 0 0 #ffe03e;
}
.optiheader [data-emoji=heart]:hover {
  text-shadow: 0 0 0 #ff4949;
}

.optiheader .left-buttons-container,
.optiheader .right-buttons-container {
  display: block;
  min-width: fit-content;
}

.optiheader .left-buttons-container > *,
.optiheader .right-buttons-container > * {
  margin-left: 5px;
  display: inline-block;
  width: 21px;
  height: 21px;
}

.optisearchbox.mobile .optiheader .right-buttons-container {
  opacity: 1;
}

.svg-container {
  fill: #bdbdbd;
  stroke: #bdbdbd;
  stroke-width: 0;
  transition: fill 0.3s, stroke 0.3s;
  cursor: pointer;
}

.bright .svg-container:hover:not([disabled]) {
  fill: #616161;
  stroke: #616161;
}
.dark .svg-container:hover:not([disabled]) {
  fill: white;
  stroke: white;
}

.svg-container[disabled] {
  fill-opacity: 0.4;
  cursor: not-allowed;
}

.optiheader .left-buttons-container {
  position: relative;
  margin-left: 5px;
  top: 5px;
}
.optiheader .right-buttons-container {
  position: absolute;
  right: 0;
  top: 28px;
  margin-right: 10px;
}

.optiheader .expand-arrow {
  transform-origin: center;
}
[data-optisearch-column=wide] .optisearchbox .expand-arrow {
  transform: rotate(-180deg);
}
.optisearchbox.mobile .expand-arrow {
  display: none;
}

.optiheader {
  margin-top: 15px;
  margin-bottom: 15px;
  display: grid;
  grid-auto-columns: 75% 1fr;
}

.title {
  font-size: large;
  font-weight: bold;
  line-height: initial;
  word-wrap: break-word;
}
.bright .title.result-title {
  color: #1a0dab;
}

.optiheader a.result-link:hover > .result-title {
  text-decoration: underline;
}
.optiheader a.result-link:link {
  text-decoration: none !important;
}

.optilink {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  padding-top: 5px;
  font-style: normal;
  font-size: small;
}

.bright .optilink {
  color: #3c4043 !important;
}
.dark .optilink {
  color: rgb(167, 159, 147) !important;
}

.optilink img {
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -3px;
  max-width: 16px;
  display: inline;
}

hr {
  height: 1px;
  margin: 0 .5em .5em .5em;
  border: 0px;
  background-color: rgb(220, 220, 220);
}
.dark hr {
  background-color: var(--line-dark);
}

.opticopy {
  position: absolute;
  width: auto;
  height: auto;
  right: 6px;
  top: 6px;
  user-select: none;
  font-size: x-small;
  opacity: 70%;
}

.opticopy svg {
  width: 15px;
  height: 15px;
  stroke: #bbc0c4;
}
.opticopy svg:hover {
  stroke: #9fa6ad;
  cursor: pointer;
}
.optibody p,
.optibody ul,
.optibody ol {
  line-height: 1.5;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.optibody ul,
.optibody ol {
  padding-left: 15px;
}
.optibody img {
  max-width: 100%;
}

.optibody li,
.optibody ol {
  list-style: initial;
  margin: 0.4rem;
  padding: 0 0.4rem;
}

blockquote {
  position: relative;
  padding-left: 12px;
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: inherit;
  border-radius: 8px;
  background: #c8ccd0;
}

code {
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
  padding: 0.25em 0.25em;
  border-radius: var(--code-border-radius);
  font-size: 100%;
}

pre code {
  display: block;
}

pre {
  border: 0px;
  margin-bottom: 1em;
  padding: 12px 8px;
  width: auto;
  max-height: 600px;
  overflow: auto;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 13px;
  border-radius: var(--code-border-radius);
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  white-space: pre-wrap;
}

span.math-container > mjx-container[jax="SVG"][display="true"]{
    margin: 0;
}

.optibody {
    overflow-y: auto;
}

a {
  text-decoration: none;
}
.bright a {
  color: #0077cc;
}
.dark a {
  color: #8ab4f8;
}
a:hover {
  text-decoration: underline;
}

.stackfoot .d-none {
  display: none;
}

.stackfoot {
  margin-top: 15px;
  line-height: 23px;
  font-size: small;
}

.bright pre,
.bright code  {
  background: #f7f7f7;
}

.dark pre,
.dark code  {
  color: var(--dark-mode-text-color);
  background: #222;
}

.dark.duckduckgo {
  color: var(--dark-mode-text-color);
  background-color: #282828;
}

.dark.duckduckgo pre,
.dark.duckduckgo code {
  color: var(--dark-mode-text-color);
  background-color: #222;
}
