/* Custom Help Scout StyleSheet - by Devan Sabaratnam (founder of HR Partner - www.hrpartner.io) */
/* Color pallette chosen from https://coolors.co/54494b-7e8287-9da39a-b98389-232323 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */

/* */

/* disable admin edit button */
#fullArticle .admin-edit {display: none !important;}


:root {
  --main-font: 'Inter', sans-serif;
  --font-size-1: 16px;
  --primary-color: #7244c5;
  --secondary-color: #0d91a5; /*#23a3b7*/
  --link-color: #0d91a5; /*#7244c5*/
  --font-color: #2d2a32; /*#546575*/
  --font-color-light: #737176;
  --font-color-heading: #3d3a41;
  --font-color-active: #2d2a32; /*#1d1a22*/
  --elevation-0: 0px 1px 1px 0px rgba(29, 43, 53, 0.02),
    0px 2px 2px 0.5px rgba(29, 43, 53, 0.03),
    0px 3px 3px 1px rgba(29, 43, 53, 0.05);
  --elevation-1: 0px 1px 1px 0px rgba(29, 43, 53, 0.02),
    0px 2px 2px 0.5px rgba(29, 43, 53, 0.04),
    0px 4px 4px 1px rgba(29, 43, 53, 0.06),
    0px 8px 8px 1.5px rgba(29, 43, 53, 0.08);
  --banner-bg-color: #f6f6f8;
}

.container-fluid {
  max-width: 1280px;
}

/* Home Page Title */

#docsSearch {
  display: flex;
  flex-flow: column;
  justify-content: center;
  border: none;
  background-color: var(--banner-bg-color);
  margin-bottom: 80px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 1105px) {
  #docsSearch {
    height: 400px;
  }
}

@media screen and (min-width: 1025px) {
  #docsSearch::before {
    background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/665906a15173914f806c126f/file-0BGbLB2z96.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: '';
    height: 100%;
    position: absolute;
    left: 3%;
    top: 0;
    transform: translateX(-50%);
    width: 800px;
    transition: left 0.2s;
  }
}
@media screen and (min-width: 1300px) {
  #docsSearch::before {
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: '';
    height: 100%;
    position: absolute;
    left: 16%;
    top: 0;
    transform: translateX(-50%);
    width: 800px;
  }
}
@media screen and (min-width: 1900px) {
  #docsSearch::before {
    left: 16%;
  }
}

@media screen and (min-width: 1025px) {
  #docsSearch::after {
    background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/665906ff5173914f806c1270/file-pqT2QLaZq1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: '';
    height: 100%;
    position: absolute;
    left: 107%;
    top: 0;
    transform: translateX(-50%);
    width: 800px;
    transition: left 0.2s;
  }
}
@media screen and (min-width: 1300px) {
  #docsSearch::after {
    background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/665906ff5173914f806c1270/file-pqT2QLaZq1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: '';
    height: 100%;
    position: absolute;
    left: 88%;
    top: 0;
    transform: translateX(-50%);
    width: 800px;
  }
}
@media screen and (min-width: 1900px) {
  #docsSearch::after {
    left: 84%;
  }
}

#docsSearch h1 {
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  margin-top: 1em;
  font-family: var(--main-font);
  color: var(--font-color-heading);
  position: relative;
  z-index: 1;
}
.navbar .nav li {
  display: inline-block;
  float: none;
  font-family: var(--main-font);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.navbar .nav li a,
.navbar .icon-private-w {
  font-size: var(--font-size-1);
  letter-spacing: 0px;
  font-weight: 400;
  color: var(--font-color);
  transition: all 0.2s;
  opacity: 0.8;
}
.navbar .nav li a:hover {
  color: var(--font-color-active);
}

.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--font-color-active);
}

.navbar .nav .active a {
  /* border-bottom: solid 4px var(--primary-color); */
  font-weight: 600;
  opacity: 1;
}

/* Header Size */

/* #mainNav {
  position: sticky;
  top: 0;
  z-index: 1300;
} */

a.brand > img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  max-height: 46px;
  margin-left: 15px;
  width: auto;
}

.navbar .navbar-inner {
  height: 72px;
  padding-top: 10px;
  box-shadow: none;
}
.navbar .navbar-inner .container-fluid {
  padding: 0;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.navbar .brand {
  float: left;
  display: block;
  padding: 0px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #777;
  text-shadow: 0 1px 0 #fff;
}
/* Home Page Search Bar Background */

/* Search Input Box */
input.search-query {
  padding-right: 18px;
  padding-right: 4px \9;
  padding-left: 18px;
  padding-left: 4px \9;
  margin-bottom: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  font-family: var(--main-font);
  letter-spacing: 0.5px;
}
/* Most Popular Articles */
.most-pop-articles h2 {
  font-family: var(--main-font);
}
/* Home Page Category Title*/

.category-list h3 {
  color: var(--font-color);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1.3em;
  font-family: var(--main-font);
  margin-bottom: 1em;
  position: absolute;
  top: 45%;
  line-height: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/* Category Styles */

.category-list .category p {
  color: var(--font-color);
  font-family: var(--main-font);
  font-weight: 400;
  font-size: var(--font-size-1);
  letter-spacing: 0.025px;
  line-height: 1.5em;
}
.category-list .category {
  background-color: #fff;
  background-position: top 56px center !important;
  background-repeat: no-repeat !important;
  background-size: 64px auto !important;
  box-shadow: var(--elevation-0);
  box-sizing: border-box;
  border-color: #fff; /*var(--banner-bg-color)*/
  border-radius: 6px;
  display: inline-flex;
  flex-flow: column;
  justify-content: flex-end;
  height: 300px;
  min-height: 183px;
  padding: 120px 20px 30px;
  position: relative;
  width: 31.5%;
  transition: all 0.2s;
}
.category-list .category:hover {
  text-decoration: none;
  box-shadow: var(--elevation-1);
  background: #f3f2f5;
}

.collection-category h2 {
  font-weight: 600;
  margin: 0 0 20px;
  text-align: center;
  padding-left: 0.95%;
  font-family: var(--main-font);
  color: var(--font-color);
  font-size: 23px;
  letter-spacing: 0px;
  text-align: left;
}

.collection-category h2 a {
  color: var(--font-color-heading);
}

.collection-category .category-list {
  margin: 0 0 4em;
  text-align: center;
}

/* Home Page Link Style */

#serp-dd .result a,
#serp-dd .result > li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a span,
.category-list .category .article-count,
.contentWrapper a {
  letter-spacing: 0.25px;
  color: var(--link-color);
  margin-top: 15px;
  /* text-transform: capitalize; */
  text-decoration: none;
  font-family: var(--main-font);
  font-weight: 400;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.contentWrapper a {
  letter-spacing: 0.25px;
  color: var(--link-color);
  margin-top: 15px;
  font-family: var(--main-font);
  font-weight: 400;
}

.category-list .category .article-count {
  margin-top: 0px;
}
/* Home Page Search Button */

#searchBar {
  z-index: 1;
  display: flex;
}

/* #searchBar::after {
  content: 'Designed by Freepik';
  display: block;
  font-size: 11px;
  text-align: left;
  padding-left: 0px;
  position: absolute;
  right: 0;
  bottom: 4px;
  color: #ABABAB;
} */

#sidebar #searchBar::after {
  display: none;
}

#searchBar .search-query {
  height: 56px;
  border-width: 1px;
  border-color: #979798;
  border-radius: 6px 0 0 6px;
  margin: 0;
  transition: none;
  box-shadow: none;
}

#searchBar .search-query:focus {
  border-width: 2px;
  border-color: var(--primary-color);
}

#searchBar button {
  color: #fff;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0);
  background: var(--primary-color);
  border-radius: 0 6px 6px 0;
  border: 1px solid var(--primary-color);
  font-size: 18px;
  padding: 0 2.5em;
  height: 56px;
  position: relative;
  top: unset;
  right: unset;
}
#searchBar button:hover {
  background: var(--primary-color);
}
input,
button,
select,
textarea {
  font-family: 'Archivo', sans-serif, Arial, sans-serif;
}
#serp-dd {
  top: 80px;
}

/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/

/* Account Management */
#category-13 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c07a81bee2d183948ccef/file-k3JolPMSSz.png');
}

/* Commission */
#category-42 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0ce55ae8353469c6b794/file-KMtXSP6HQ0.png');
}

/* Customization */
#category-34 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c098c5027f87fcc6be63b/file-jGiBU7fVA7.png');
}

/* Integrations */
#category-27 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0a245ae8353469c6b793/file-v4a6slJrag.png');
}

/* Contact Profile */
#category-10 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0b001bee2d183948ccf3/file-tGz1zzVuig.png');
}

/* Contacts */
#category-5 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0b441bee2d183948ccf4/file-uSrwK25dOw.png');
}

/* Email */
#category-14 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0bc51bee2d183948ccf5/file-px19XEDCDC.png');
}

/* Get Started */
#category-6 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0be6e7511e33f36eb0c5/file-Sqbh5QiK6C.png');
}

/* Lead Capture */
#category-12 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0c1de7511e33f36eb0c6/file-7i1emUsAm6.png');
}

/* Pipeline */
#category-7 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0c497303ea4a739d422d/file-0m6gTHwHVS.png');
}

/* Schedule */
#category-11 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0c6e7303ea4a739d422e/file-mMbiM7DFBi.png');
}

/* Teams */
#category-9 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c0c93e7511e33f36eb0c7/file-L31blULe56.png');
}

/* Transactions */
#category-8 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663c088d5027f87fcc6be639/file-E0rgGgjLEx.png');
}

/* Brokerage Categories */

/* Agents */
#category-99 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663d37a11bee2d183948cdeb/file-f6jju5R8RH.png');
}

/* Leads */
#category-100 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663d37e41bee2d183948cdec/file-6l9JjBYyM6.png');
}

/* Assignments */
#category-101 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663d38137303ea4a739d430d/file-94fjWNqkb7.png');
}

/* Dashboard */
#category-102 {
  background-image: url('https://s3.amazonaws.com/helpscout.net/docs/assets/663936b74c3ddc1d4e7a3549/images/663d38275027f87fcc6be72a/file-5RVQZiv2A3.png');
}

/* etc... keep going and add one CSS ID selector for each category. */

/* Side Bar Styles */

#sidebar form .search-query {
  border: 1px solid #a5b2bd;
  border-radius: 5px;
  height: 42px;
  font-size: 15px;
}

#sidebar .nav-list li {
  margin: 2px 0 3px 0;
  padding-left: 12px;
  border-radius: 4px;
}
#sidebar .nav-list li.active {
  background: #1c9cae; /*#e2e2e2*/
  /*border-radius: 99px;*/
}

#sidebar .nav-list a {
  display: inline-block;
  color: var(--font-color);
  font-size: var(--font-size-1);
  padding: 10px 15px 10px 0;
  line-height: 20px;
  margin-left: 0;
  font-family: var(--main-font);
  font-weight: 400;
}
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  font-weight: 400;
  color: #ffffff;
  background: 0 0;
  text-shadow: none;
}
#sidebar .nav-list .active .icon-arrow:before {
  color: #ffffff;
}

#sidebar h3 {
  text-transform: uppercase;
  font-size: 15px;
  color: var(--font-color);
  font-weight: 400;
  margin-bottom: 24px;
  font-family: var(--main-font);
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.icon-arrow:before {
  color: var(--font-color-active);
}
/* Article Styles */

#main-content {
  background: none;
  float: right;
  margin-bottom: 2em;
  padding: 32px 0 0 28px;
}
@media (max-width: 768px) {
  #main-content {
    float: none;
    padding: 0 15px;
  }
}

#fullArticle table {
  margin: 30px 0;
}

#fullArticle table td, 
#fullArticle table th {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #e2e2e2;
}

#fullArticle table th {
  background: #f6f6f8;
}

#fullArticle hr {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #fff;
  margin: 40px auto 30px auto;
}

#fullArticle img {
  display: block;
  margin: 1em 0 2em;
  padding: 1px;
  box-sizing: border-box;
  border: 4px solid #E9E5E5;
  border-radius: 8px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .05);
}

.contentWrapper {
  background-color: #fff;
  border: 0;
  border-radius: 4px;
  color: #556575;
  box-shadow: var(--elevation-1);
  padding: 30px;
  word-break: break-word;
}
@media screen and (max-width: 768px) {
  .contentWrapper {
    padding: 30px 20px !important;
    box-shadow: none;
    border: 1px solid #e9e5e5;
    border-top: 0;
    border-radius: 2px;
  }
}
@media screen and (min-width: 1000px) {
  .contentWrapper {
    padding: 70px 90px;
  }
}

/* The print icon on the article page */
.icon-print {
  background-image: url('https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--print.svg');
  width: 24px;
  height: 24px;
  background-size: cover;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s;
}

.icon-print:before {
  /* content: "\e602"; */
  content: none;
}

#fullArticle .title,
.contentWrapper h1 {
  margin: 0 30px 0.5em 0;
  font-size: 28px;
  font-family: var(--main-font);
  color: var(--font-color);
  font-weight: 600;
}
#fullArticle .printArticle {
  position: absolute;
  right: 40px;
  top: 24px;
}
@media (max-width: 768px) {
  #fullArticle .printArticle {
    right: 20px;
    top: 18px;
  }
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd {
  color: var(--font-color);
  font-family: var(--main-font);
  font-size: var(--font-size-1);
  letter-spacing: 0em;
  line-height:1.6em; /*jc*/
  margin-bottom: 1.2em; /*jc*/
}
#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p,
#fullArticle .private-note p {
  font-size: calc(var(--font-size-1) - 1px);
  letter-spacing: 0em;
}
#categoryHead .sort select {
  width: 154px;
  height: 30px;
  margin: 0;
  line-height: 24px;
  font-size: 13px;
  color: var(--font-color);
  font-family: var(--main-font);
  font-weight: 400;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
  color: var(--font-color);
}
#fullArticle h2 {
  font-size: 23px;
  font-family: var(--main-font);
  font-weight: 600;
  color: var(--font-color);
}
#fullArticle h3 {
  font-size: 20px;
  font-family: var(--main-font);
  font-weight: 600;
  color: var(--font-color);
}
#fullArticle h4 {
  font-size: var(--font-size-1);
  font-family: var(--main-font);
  font-weight: 400;
  color: var(--font-color);
  font-style: italic;
}
#fullArticle li {
  margin-bottom: -1px;
}
#fullArticle .admin-edit {
  color: #fff;
  display: inline-block;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 400;
  text-shadow: none;
  padding: 0.5rem 1rem;
  border: none;
}
#fullArticle .admin-edit:hover {
  background: var(--primary-color);
}

.contentWrapper p {
  margin-top: -4px;
  word-wrap: break-word;
  font-family: var(--main-font);
  color: var(--font-color);
  font-weight: 400;
  font-size: var(--font-size-1);
  letter-spacing: 0.01em;
}

@media screen and (min-width: 1000px) {
  .contentWrapper p.descrip {
    margin-bottom: 0;
    max-width: 30rem;
  }
}

.contentWrapper p.descrip {
  font-size: var(--font-size-1);
  color: var(--font-color);
  margin-bottom: 25px;
  margin-top: 0;
  line-height: 1.6;
}

/* Article Footers */

.articleFoot p,
.articleFoot time {
  color: var(--font-color);
  display: inline-block;
  font-family: var(--main-font);
  font-weight: 400;
  font-style: italic;
}

/* Page Footers */

footer p a {
  color: var(--font-color);
  font-family: var(--main-font);
  font-weight: 400;
}

/* Contact Modal */

#contactModal h2,
.abuse h2 {
  background: #fff;
  margin: 0;
  padding: 11px 0 10px 18px;
  font-size: 23px;
  border-bottom: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: var(--main-font);
  color: #58a4b0;
  font-weight: 400;
}
#contactModal .control-label {
  width: 110px;
  font-family: var(--main-font);
  font-size: var(--font-size-1);
  font-weight: 400;
  color: var(--font-color);
}

.btn {
  color: #fff;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0);
  background: var(--primary-color);
  border-radius: 5px;
  border: 1px solid #b98389;
  font-size: var(--font-size-1);
  padding: 0.5em;
  /* height: 50px; */
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #fff;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0);
  background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
  color: #fff;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0);
  background: #8fa7c2;
  border-radius: 5px;
  border: 1px solid #9da39a;
  font-size: var(--font-size-1);
  padding: 0 1.5em;
  height: 50px;
}

.category-list {
  text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
  section.category-list .category {
    width: 48.2%;
  }
}
@media screen and (max-width: 760px) {
  section.category-list .category {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 120px 20px 15px;
    width: 100%;
  }
}
/* RESPONSIVE */

@media (max-width: 768px) {
  .navbar .btn-navbar {
    margin-top: 16px;
    right: -10px;
  }
  .nav-collapse,
  .nav-collapse.collapse {
    overflow: hidden;
    height: 0;
    top: 80px;
    right: -5px;
    background: transparent;
    box-shadow: none;
  }
  .nav-collapse.in,
  .nav-collapse.in.collapse {
    background: white;
    box-shadow: var(--elevation-1);
  }
  .related {
    padding: 30px 25px 25px;
  }
  .related ul {
    margin-left: 0;
  }
  .related h3 {
    padding-left: 0;
  }
  .related ul > li a {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  #searchBar button {
    border-radius: 0 6px 6px 0;
    padding: 17.5px 1.075em;
  }
  #searchBar button .icon-search,
  #searchBar button:hover .icon-search:hover {
    display: block;
    text-shadow: none;
    margin-top: 0;
    background-color: transparent;
  }
  #fullArticle .title,
  .contentWrapper h1 {
    font-size: 24px;
  }
  #fullArticle h2 {
    font-size: 22px;
  }
}

/* Callout */
.callout p {
  font-size: var(--font-size-1);
}

/* Related Articles */
.related {
  margin-top: 32px;
  font-family: var(--main-font);
  border-radius: 4px;
}

.related h3 {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.related a {
  color: var(--link-color);
}

/* Search Results */
#serp p {
  font-size: var(--font-size-1);
}

/* Article List */
.articleList {
  box-sizing: border-box;
  margin-top: 34px;
  padding-top: 25px;
  position: relative;
}

.articleList {
  list-style: none;
  margin: 0 0 38px 0;
  font-size: 1.3em;
}
.articleList:before {
  content: '';
  position: absolute;
  top: 0;
  width: 50px;
  height: 4px;
  left: 0;
  background: #393249; /* var(--primary-color); */
}

.articleList li {
  margin: 1em 0;
  padding-left: 0;
  font-size: var(--font-size-1);
}
.articleList li a i {
  display: none;
}

.articleList a {
  margin-left: 0;
}