@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  /* Light mode colors (DEFAULT) */
  --clr-light-text: #2c2c31;
  --clr-lighter-text: #1c1c21;
  --clr-dark-text: #1c1c21;
  --clr-primary: #069d72;
  --clr-accent: #058060;
  --clr-heading: #29443d;
  --clr-bg-darker: #fff;
  --clr-bg-dark: #f5f5f5;
  --clr-bg-medium: #e6f2ef;
  --clr-bg-light: #edfeb2;
  --clr-yes: hsla(120, 100%, 25%, 1);
  --clr-no: hsla(0, 100%, 50%, 1);
  --clr-sm-primary: #29443d;
  --clr-sm-secondary: #f5f5f5;
  --clr-sm-accent: hsla(19, 99%, 48%, 1);
  --clr-sm-text-accent: #058060;
  --clr-sm-bg2: hsla(202, 38%, 88%, 1);

  --clr-code-bg: #f5f5f5;
  --clr-code-text: red;
  --clr-search-bg: #fff;
  --clr-search-text: #777;

  --ff-title: Philosopher, system-ui, sans-serif;
  --ff-sans: Lato, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --clr-light-text: #d9d9d9;
    --clr-lighter-text: hsla(0, 0%, 100%, 1);
    --clr-dark-text: #1c1c21;
    --clr-primary: #fefefe;
    --clr-accent: #e7f9f4;
    --clr-heading: #d9d9d9;
    --clr-bg-darker: #fefefe;
    --clr-bg-dark: #1f3832;
    --clr-bg-medium: #29443d;
    --clr-bg-light: #edfeb2;
    --clr-yes: hsla(120, 100%, 25%, 1);
    --clr-no: hsla(0, 100%, 50%, 1);
    --clr-sm-primary: #29443d;
    --clr-sm-secondary: #1c1c21;
    --clr-sm-accent: hsla(19, 99%, 48%, 1);
    --clr-sm-text-accent: #edfeb2;
    --clr-sm-bg2: hsla(202, 38%, 12%, 1);

    --clr-code-bg: #121212;
    --clr-code-text: lightgreen;
    --clr-search-bg: #fefefe;
    --clr-search-text: #777;
  }

  /* Dark mode overrides */
  select {
    background-color: #28433c;
    color: #d9d9d9;
  }

  /* Sidebar links - white default, acid lime on hover */
  #sidebar .nav-list a,
  #sidebar .nav-list a:focus,
  .nav-list > li > a {
    color: #fefefe !important;
  }

  #sidebar .nav-list a:hover {
    color: #edfeb2 !important;
    background: 0 0;
    text-decoration: none;
  }

  #sidebar .nav-list .active a,
  #sidebar .nav-list .active a:focus,
  #sidebar .nav-list .active a:hover {
    color: #fefefe !important;
    background: 0 0;
    font-weight: 700;
    text-shadow: none;
  }

  /* Category boxes */
  section.category-list a.category h3 {
    color: #28433c !important;
  }

  section.category-list a.category:hover {
    background: var(--clr-bg-medium);
    border: 2px dashed #e7f9f4 !important;
  }

  section.category-list a.category:hover h3 {
    color: #fefefe !important;
  }

  p.article-count * {
    color: #28433c !important;
  }
  p.article-count *:hover {
    color: #d9d9d9 !important;
  }

  .category-list .category .article-count {
    color: #28433c !important;
  }
  .category-list .category:hover .article-count {
    color: #d9d9d9 !important;
  }

  /* Dark mode callouts */
  #fullArticle div.callout-blue {
    background: #2f5070 !important;
  }

  #fullArticle div.callout-red {
    background: #9b4745 !important;
  }

  #fullArticle div.callout-green {
    background: #1f3832 !important;
  }

  #fullArticle div.callout-yellow {
    background: #8c5a1f !important;
  }

  /* Callout links in dark mode */
  #fullArticle .callout a,
  #fullArticle .callout-blue a,
  #fullArticle .callout-red a,
  #fullArticle .callout-green a,
  #fullArticle .callout-yellow a {
    color: #fefefe !important;
    text-decoration: underline;
  }
}

body {
  font-family: var(--ff-sans);
  background: var(--clr-bg-medium);
}
h1,
h2,
h3,
h4,
h5 {
  color: var(--clr-heading);
  font-family: var(--ff-title);
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
  color: var(--clr-heading);
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover {
  color: var(--clr-primary);
}
a {
  color: var(--clr-accent);
}
a:hover {
  color: var(--clr-primary);
}
.navbar .navbar-inner {
  background: var(--clr-bg-darker);
}
#docsSearch {
  background: var(--clr-bg-medium);
}
#docsSearch {
  height: 20em;
  background: url(https://cdn.mysharefox.com/theotherone/uploads/documents/SF-HS-hero.jpg)
    no-repeat 100% / cover transparent;
  background-position: center center;
  border-bottom: none;
  padding-top: 115px;
  position: relative;
  top: -1px;
}
#docsSearch h1 {
  color: #fefefe;
  font-weight: 700;
}

.navbar .nav li a,
.navbar .icon-private-w {
  color: var(--clr-sm-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

.navbar ul.nav li.active a {
  font-weight: 900;
  color: var(--clr-sm-primary) !important;
}
.navbar ul.nav li a:hover {
  color: #069d72 !important;
}
.navbar .icon-private-w {
  color: var(--clr-sm-primary) !important;
  font-weight: 100 !important;
}

input {
  font-family: var(--ff-sans);
}

#searchBar .search-query {
  background: var(--clr-search-bg);
  border-color: transparent;
  box-shadow: none;
  color: var(--clr-search-text);
}
#searchBar button {
  background: #069d72;
  border-color: transparent;
  color: #fff;
}
#searchBar button:hover {
  background: #29443d;
  border-color: transparent;
  color: #fff;
}
#searchBar.sm button {
  background: transparent !important;
}

#main-content {
  background-image: none !important;
}
.contentWrapper {
  background: var(--clr-bg-medium);
  border: 1px solid transparent;
  padding-top: 1.2em;
}
.contentWrapper h1 {
  color: var(--clr-heading);
  text-transform: none;
  font-weight: 700;
  margin-top: 0;
  padding-bottom: 0.4em;
  font-size: 2rem;
  line-height: 2.1rem;
}

#fullArticle img,
#fullArticle image {
  display: block;
  margin: 1em 0px 2em;
  padding: 0px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-sizing: border-box;
  max-width: 100%;
}
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
  color: var(--clr-heading);
}
#fullArticle h1 a,
#fullArticle h2 a,
#fullArticle h3 a,
#fullArticle h4 a,
#fullArticle h5 a {
  color: var(--clr-heading);
}
#fullArticle h1 a:hover,
#fullArticle h2 a:hover,
#fullArticle h3 a:hover,
#fullArticle h4 a:hover,
#fullArticle h5 a:hover {
  color: var(--clr-primary);
}
#fullArticle h1 {
  font-size: 2em;
}
#fullArticle h2 {
  font-size: 1.8em;
  margin-top: 30px !important;
}
@media (prefers-color-scheme: dark) {
  #fullArticle h2 {
    font-family: lato, sans-serif, system-ui;
  }
}
#fullArticle h3 {
  font-size: 1.3em;
  margin-top: 30px !important;
  font-family: lato, sans-serif, system-ui;
}
#fullArticle h4 {
}
#fullArticle h5 {
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--clr-light-text);
  font-size: 1.1rem;
}
#fullArticle p {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
#fullArticle ul,
ol {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
#fullArticle li {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}
#fullArticle img {
  margin-bottom: 12px !important;
  margin-top: 7px !important;
}
#fullArticle strong {
  color: var(--clr-light-text);
}
#fullArticle code,
#fullArticle pre {
  font-size: 14px;
  line-height: 26px;
  padding: 10px 20px 12px 15px;
  background-color: var(--clr-code-bg);
  color: var(--clr-code-text);
  border: 0;
  font-family: monospace, system-ui;
}
#fullArticle .printArticle {
  position: absolute;
  right: 30px;
  top: 19px;
}
code.inline-code {
  padding: 2px 10px 2px 10px !important;
}

section.category-list a {
  background: var(--clr-bg-darker);
}
section.category-list a.category:hover {
  background: var(--clr-bg-medium);
  border: 2px dashed #29443d;
}
section.category-list a.category h3 {
  color: #29443d;
  font-weight: 700;
}
section.category-list a.category:hover h3 {
  color: #29443d;
}
.category-list .category {
  border: 2px solid transparent;
}
p.article-count * {
  color: #29443d !important;
}
.category-list .category .article-count {
  color: #29443d !important;
}
.category-list .category:hover .article-count,
.category-list .category:hover .article-count * {
  color: #29443d !important;
}
@media (prefers-color-scheme: dark) {
  .category-list .category:hover .article-count,
  .category-list .category:hover .article-count * {
    color: #fefefe !important;
  }
}

/* ---------------------------------------THIS IS HELPFOX ------------------------------------------------------- */
a#category-686 {
  height: 100px;
  display: block;
  width: 88.6%;
  max-width: 560px;
  margin: 0 auto;
  margin-bottom: 20px;
  box-sizing: border-box;
  vertical-align: top;
  border: 2px solid #edfeb2;
  border-radius: 10px;
  text-align: right !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff !important;
  box-shadow: 0 0 12px rgba(237, 254, 178, 0.5);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
a#category-686:hover {
  color: #fff !important;
  border: 2px solid #66ccff;
  box-shadow: 0 0 12px rgba(102, 204, 255, 0.6);
  transform: scale(1.02);
  transition: all 155ms ease;
  -webkit-font-smoothing: subpixel-antialiased;
}
#category-686 p.article-count {
  display: none;
}
a#category-686 h3 {
  color: #fff !important;
}
#category-686 {
  background-color: #242d32;
  background-image: url("https://cdn.mysharefox.com/styledemo4/uploads/documents/HelpFoxSml.png");
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: bottom left;
}
#serp-dd {
  position: relative;
  z-index: 50;
}
/* ------------------------------------------------- HELPFOX END  ----------------------------------------------------*/

.pagination ul > li > a,
.pagination ul > li > span {
  background-color: #1f3832;
}

#sidebar h3 {
  text-transform: none;
  font-size: 1.3rem;
  color: var(--clr-heading);
  margin-bottom: 4px;
}
#sidebar .nav-list li {
  margin: 2px 0 3px 0;
  color: var(--clr-light-text);
}
#sidebar .nav-list a {
  display: inline-block;
  color: var(--clr-lighter-text);
  font-size: 1.3em;
  padding: 6px 15px 6px 0;
  line-height: 20px;
  margin-left: 0;
}
.nav-list > li > a {
  color: var(--clr-lighter-text);
}
.nav-list .nav-header,
.nav-list > li > a {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0);
}
#sidebar .nav-list a:focus,
#sidebar .nav-list a:hover {
  text-decoration: none;
  color: var(--clr-primary);
  background: 0 0;
}
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:focus,
#sidebar .nav-list .active a:hover {
  font-weight: 700;
  color: var(--clr-lighter-text);
  background: 0 0;
  text-shadow: none;
}
.icon-arrow:before {
  color: var(--clr-accent);
}

p.help,
time.lu,
p.article-count * {
  font-family: var(--ff-sans) !important;
}

#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span {
  color: var(--clr-sm-text-accent) !important;
}
#fullArticle strong a:hover,
#fullArticle a strong:hover,
.collection a:hover,
.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover {
  color: var(--clr-primary) !important;
}
#serp-dd .result a,
#serp-dd .result > li {
  color: #29443d;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active {
  color: var(--clr-dark-text);
}
#serp p {
  font-size: 14px;
  color: var(--clr-light-text);
  line-height: 1.55em;
  margin-bottom: 1.5em;
}
.collection-category h2 a {
  color: var(--clr-heading);
}
.collection-category h2 a:hover {
  color: var(--clr-primary);
}
.articleList {
  list-style: none;
  margin: 0 0 36px 0;
  font-size: 1.2rem;
}
.articleList li {
  margin: 0.5em 0;
}
select {
  width: 220px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  color: #2c2c31;
}

.related {
  background: transparent;
  border: 1px solid transparent;
}
.related ul > li {
  color: var(--clr-sm-text-accent);
}
.related ul > li a:hover {
  color: var(--clr-primary);
}
.related h3 {
  color: var(--clr-heading);
}

#fullArticle div.callout-blue {
  background: #a4c4e4;
}
#fullArticle .callout-blue {
  border-left: 5px solid #116cd1;
  border-radius: 4px;
}
#fullArticle .callout-blue p {
  font-size: 1rem;
}

#fullArticle div.callout-red {
  background: #e89090;
}
#fullArticle .callout-red {
  border-left: 5px solid #830101;
  border-radius: 4px;
}
#fullArticle .callout-red p {
  font-size: 1rem;
}

#fullArticle div.callout-green {
  background: #90d4b8;
}
#fullArticle .callout-green {
  border-left: 5px solid #556619;
  border-radius: 4px;
}
#fullArticle .callout-green p {
  font-size: 1rem;
}

#fullArticle div.callout-yellow {
  background: #f4dca0;
}
#fullArticle .callout-yellow {
  border-left: 5px solid #c18202;
  border-radius: 4px;
}
#fullArticle .callout-yellow p {
  font-size: 1rem;
}

#fullArticle div.callout {
  background: var(--clr-sm-secondary);
  border-radius: 4px;
}
#fullArticle .callout {
  border-left: 5px solid #777;
}
#fullArticle .callout p {
  font-size: 1rem;
}

/* Callout links in light mode */
#fullArticle .callout a,
#fullArticle .callout-blue a,
#fullArticle .callout-red a,
#fullArticle .callout-green a,
#fullArticle .callout-yellow a {
  color: var(--clr-dark-text);
  text-decoration: underline;
}

.navbar .nav .active .caret {
  border-bottom: 8px solid var(--clr-bg-medium);
}
#fullArticle dt {
  background: var(--clr-sm-accent);
}
#fullArticle hr {
  border-top: 1px solid var(--clr-accent);
  border-bottom: 1px solid var(--clr-accent);
  margin: 50px auto !important;
}
@media (prefers-color-scheme: dark) {
  #fullArticle hr {
  border-top: 1px solid var(--clr-accent);
  border-bottom: 0px solid var(--clr-accent);
}
#fullArticle .admin-edit {
  color: var(--clr-sm-primary) !important;
}

@media only screen and (max-width: 768px) {
  .navbar .btn-navbar .icon-bar {
    background: var(--clr-bg-dark);
  }
  .navbar .btn-navbar {
    color: hsla(19, 99%, 48%, 1);
  }
}