/*-----------Lists-----------*/
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul,
ol {
  margin: 0 0 1em 1.778em;
  padding: 0;
}

/* using .main and the :not([class]) to target only regular ul's in page content. This approach avoids adding unwanted css to things like the main nav and responsive tabs */
.main ul:not([class]) {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  overflow: hidden;
}
.main ul:not([class]) li {
  list-style: none;
  margin: 0 0 1.125em 0;
  padding: 0 0 0 1.25em;
  position: relative;
}
.main ul:not([class]) li:before {
  font-family: var(--icon-family);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--near-black);
}
.main ul:not([class]) li:before {
  font-size: 1em;
  content: "\e915";
  top: -0.0625em;
}
.main ul:not([class]) ul {
  margin: 1.25em 0 0 0.667em;
}

/* this targets the sitemap list, currently used on the 404 page */
.main ul[class^="wsp"] {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  overflow: hidden;
}
.main ul[class^="wsp"] li {
  list-style: none;
  margin: 0 0 0.125em 0;
  padding: 0 0 0 1.25em;
  position: relative;
}
.main ul[class^="wsp"] li:before {
  font-family: var(--icon-family);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
}
.main ul[class^="wsp"] li:before {
  font-size: 1em;
  content: "\e915";
  top: -0.0625em;
}
.main ul[class^="wsp"] ul {
  margin: 0.25em 0 0 0.667em;
}

ul.two-columns {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  overflow: hidden;
}
ul.two-columns li {
  list-style: none;
  margin: 0 0 1.125em 0;
  padding: 0 0 0 1.25em;
  position: relative;
}
ul.two-columns li:before {
  font-family: var(--icon-family);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
}
ul.two-columns li:before {
  font-size: 1em;
  content: "\e915";
  top: -0.0625em;
}
ul.two-columns ul {
  margin: 1.25em 0 0 0.667em;
}

ul.three-columns {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  overflow: hidden;
}
ul.three-columns li {
  list-style: none;
  margin: 0 0 1.125em 0;
  padding: 0 0 0 1.25em;
  position: relative;
}
ul.three-columns li:before {
  font-family: var(--icon-family);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
}
ul.three-columns li:before {
  font-size: 1em;
  content: "\e915";
  top: -0.0625em;
}
ul.three-columns ul {
  margin: 1.25em 0 0 0.667em;
}

ol,
li {
  line-height: 1.5;
}
ol {
  counter-reset: section;
  list-style-type: none;
  margin: 0 0 1em 0;
  padding: 0;
}
ol li {
  counter-increment: section;
  position: relative;
  padding: 0 0 0 1.125em;
  margin-bottom: 1.25em;
}
ol li:before {
  font-weight: 700;
  content: counters(section, ".") ".";
  display: inline-block;
  color: var(--primary);
  margin-right: 0.5em;
}
ol ol {
  margin: 1.778em 0;
}
ol ol li {
  font-size: 0.875em;
}
ol ol li {
  padding-left: 2.1429em;
}
ul.bullets,
ul.checkmarks {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  overflow: hidden;
}
ul.bullets li,
ul.checkmarks li {
  list-style: none;
  margin: 0 0 1.125em 0;
  padding: 0 0 0 1.25em;
  position: relative;
}
ul.bullets li:before,
ul.checkmarks li:before {
  font-family: var(--icon-family);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
}
ul.bullets li:before {
  font-size: 1em;
  content: "\e915";
  top: -0.0625em;
}
ul.checkmarks li:before {
  font-size: 1em;
  content: "\e94b";
  top: -0.0625em;
}
.main ul.checkmarks ul {
  margin: 1.25em 0 0 0.667em;
}
.main ul.checkmarks ul li:before {
  font-size: 1em;
  content: "\e94b";
  top: -0.0625em;
}
ul.bullets ul,
ul.checkmarks ul {
  margin: 1.25em 0 0 0.667em;
}
ul.two-columns {
  column-count: 2;
  column-gap: 40px;
}
ul.three-columns {
  column-count: 3;
  column-gap: 40px;
}
ul.no-bullets {
  list-style: none;
  margin-left: 0;
}
ul.no-bullets li {
  margin: 0 0 1.125em 0;
  padding-left: 0;
}
ul.no-bullets li:before {
  content: none;
}

.main .center ul,
.main .center ul.bullets,
.main .center ul.checkmarks {
  width: fit-content;
  margin: 0 auto 1em;
  text-align: left;
}

@media (max-width: 800px) {
  ul.two-columns {
    column-count: 2;
    column-gap: 40px;
  }
  ul.three-columns {
    column-count: 2;
    column-gap: 40px;
  }
}
@media (max-width: 479px) {
  ul.two-columns {
    column-count: 1;
    column-gap: 0px;
  }
  ul.three-columns {
    column-count: 1;
    column-gap: 0px;
  }
}