.archive-tree {
          font-family: monospace;
          font-size: 15px;
          line-height: 1.8;
          margin-top:25px;
          margin-bottom:25px;
          
        }
        .archive-tree ul {
          list-style: none;
          margin: 0;
          padding-left: 20px;
          position: relative;
        }
        .archive-tree ul::before {
          content: "";
          /* border-left: 2px solid #888; */
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
        }
        .archive-tree li {
          position: relative;
          padding-left: 20px;
        }
        .archive-tree li::before {
          content: "";
          position: absolute;
          top: 0.9em;
          left: 0;
          width: 20px;
          /* border-top: 1px solid #888; */
        }
        .archive-tree li:last-child::before {
          border-left: 2px solid transparent;
        }

        /* Animation wrapper */
        .months-wrapper {
          overflow: hidden;
          transition: max-height 0.4s ease, opacity 0.4s ease;
        }
        .months-wrapper.closed {
          max-height: 0;
          opacity: 0;
        }
        .months-wrapper.open {
          max-height: 500px; 
          opacity: 1;
        }

        .listarchive{
          margin-top:5px;
          margin-bottom:5px;
        }

        .article-list {
  list-style-type: disc;
  padding-left: 24px; /* same as pl-6 */
  /* margin: 0; */
}

.article-item {
  margin-top: 8px;
  margin-bottom: 8px;
}

.article-link {

  text-decoration: none;
}

.archive-container {
 
  margin: 0 auto;
  padding: 10px 20px;

}

.archive-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 16px;
  line-height:1.2;
}

.archive-intro {
  color: #444;
  line-height: 1.6;
  margin-bottom: 24px;
}

.archive-list {
  list-style: none;
  padding-left: 0;
}

.archive-list li {
  position: relative;
  padding-left: 24px;
  margin: 10px 0;
}

.archive-list li::before {
  content: "➜"; 
  position: absolute;
  left: 0;
  color: #444; 
  font-size: 14px;
}
.arrowtext::before {
  content: "➜";
  color: #444;
  font-size: 14px;
}
.arrowtext {
    margin-right: 4px;
}

.archive-list a {

  text-decoration: none;
}

.cursor-pointer {
  cursor: pointer;
}

@media screen and (max-width: 991px) {
    .archive-container {
     padding: 5px !important;
    }
   

  
  }