#blog-disp {
     margin: 20px auto;
     max-width: 1120px;
     width: 95vw;
     padding: 10px;
}
#editor {
     min-height: 300px;
     margin-block: 5px;
     border: 1px solid var(--lgy);
     border-radius: 3px;
     padding: 10px;
}

h3 {
     margin-bottom: 6px;
}
div#editor > h3:first-child {
     margin-top: 0;
}

.blog-outer {
     margin-bottom: 250px;
}

.blog-edit-inner button {
     font-weight: 400;
}

.blog-edit-inner input {
     border: 1px solid var(--lgy);
}

.blog-edit-header {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 12px;
}

.active-format-btn {
     background-color: var(--dr);
     border: 1px solid var(--dr);
     color: white;
}

.blog-edit-inner {
     margin: 20px auto;
     max-width: 1120px;
     width: 95vw;
}

.blog-list-header-div {
     border-bottom: 1px solid var(--lgy);
}

.blog-filter {
     margin-bottom: 5px;
     display: flex;
     gap: 20px;
 }

 #blog-list {
     display: grid;
     /* grid-template-columns: auto auto min-content min-content auto; */
     grid-template-columns: repeat(5, auto);
 }
 .blog-list-header {
     font-weight: bold;
     padding-left: 15px;
     padding-block: 5px;
 }
 .blog-list-underline {
     border-top: 1px solid #ddd;
 }
.blog-list-span {
     grid-column: span 5;
}
.blog-filter input[type="checkbox"], .blog-filter input[type="radio"] {
     height:25px;
}

.blog-filter input[type="checkbox"], .blog-filter input[type="radio"], .blog-filter label {
     cursor: pointer;
}

.blog-list-item {
     font-size: 14px;
     display: flex;
     align-items: center;
     padding-left: 15px;
     padding-block: 8px;
}

.blog-list-actions {
     display: flex;
     gap: 10px;
}

.blog-list-edit-btn {
     cursor: pointer;
     height: min-content;
}

.blog-stat-1 {
     background-color: rgba(255, 255, 0, 0.21);
}

.blog-stat-2 {
     background-color: rgba(0, 255, 44, 0.1);
}

.blog-stat-3 {
     background-color: rgba(255, 179, 102, 0.2);
}

.blog-stat-4 {
     color: var(--lr);
     background-color: rgb(255 240 243);
     font-weight: 500;
}

.blog-list-divider {
     grid-column: span 5;
     border-bottom: 1px dashed rgb(233 233 233);
}

.blog-list-actions .blog-stat-4 {
     color: var(--lgy);
     font-weight: 600;
}

.btn-hollow-sm-lgy {
     background-color: transparent !important;
}

.blog-list-cont {
     display: contents;
}

.blogp-cont a {
     color: #438ac9;
     font-weight: 600;
}

.blogp-cont a:hover {
     text-decoration: underline;
     text-shadow: 0 0 0.1em #00000054;
}

.pagination-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 75px;
   }

   .pagination-container button, .pagination-container select {
     outline-color: var(--lr) !important;
   }
   
   .pagination-controls {
     display: flex;
     gap: 10px;
     margin-bottom: 22px;
     margin-top: 12px;
     padding-top: 8px;
     /* box-shadow: 0 -15px 16px -5px rgb(0 0 0 / 2%); */
   }
   
   .pagination-btn {
     padding: 5px 12px;
     border: none;
     background-color: transparent;
     cursor: pointer;
     border-radius: 50%;
     color: rgba(200, 53, 94, 0.67);
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .pagination-btn i {
     text-shadow: none;
   }
   
   .pagination-btn.active {
     background-color: var(--lr);
     color: white;
     font-weight: 700;
   }
   .move-page {
     color: var(--lr);
     font-weight: 700 !important;
     border-radius: 0;
   }

   .pagination-btn.disabled {
     opacity: 0.5;
     cursor: default;
   }
   
   .pagination-options {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     color: var(--lr);
   }
   
   .pagination-info {
     font-size: 14px;
     color: rgba(200, 53, 94, 0.67);
     margin-bottom: 15px;
   }
   .pag-label {
     width: max-content;
   }

   #items-per-page {
     margin-bottom: 0;
     padding-inline: 5px;
     height: 35px;
     width: max-content;
     color: var(--lr);
     border: 1px solid rgba(200,53,94,0.52);
  }

  .blog-link {
     text-decoration: underline;
     cursor: pointer;
     color: var(--lgy);
     font-weight: 600;
  }

  .blog-disp-grid {
     display: grid;
     grid-template-columns: 3fr 1fr;
     gap: 50px;
     padding: 0;
     margin-bottom: 80px;
  }

  .blog-disp-grid img, .blog-disp-grid2 img {
     border-radius: 6px;
  }
  .blog-disp-grid2 {
     margin-bottom: 80px;
  }

  .banner-top-inner {
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, rgba(0, 0, 0, 0));
     box-shadow: 0px 15px 15px -20px rgb(0 0 0 / 20%);
     padding: 9px 60px 11px 60px;
  }

  .dotted-banner-top {
     margin-top: 0;
     margin-bottom: 100px;     
     display: flex;
     justify-content: center;
     font-size: 24px;
     font-weight: 600;
     color: var(--lr);
  }

  .blogp-cont {
     display: grid;
     grid-template-columns: 1fr 6.1fr;
     column-gap: 28px;
  }

  .blogp-date-cont {
     color: var(--lr);
     font-weight: 600;
     display: flex;
     text-align: center;
     justify-content: center;
     flex-direction: column;
  }

  .blogp-day {
     font-size: 36px;
     line-height: 1;
  }

  .blogp-authorpic-cont {
     display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .blogp-spacer {
     grid-column: span 2;
    border-top: 4px dotted #f1f1f1;
    padding-bottom: 26px;
    margin-top: 5px;
  }
  .blogp-btitle {
     color: var(--lr);
     font-weight: 600;
     font-size: 24px;
  }
  .blogp-meta {
     color: #b7b4ab;
     display: flex;
     gap: 5px;
  }
  .blogp-meta-text {
     padding-left: 10px;
     border-left: 1px solid #ededed;
 }
 .blogp-author{
     padding-right: 7px;
     border-right: 1px lightgrey solid;
 }
  .blogp-top .back-arrow {
     position: static;
     height: 70px;
     margin-left: 10px;
  }

  .blogp-top .back-arrow i {
     text-shadow: none;
  }

  .blogp-search-bar i.fa-search {
     top: 14px;
     left: 12px;
     width: fit-content;
  }

  .blogp-search-bar input {
     padding-left: 42px !important;
     border: none !important;
     border-bottom: 1px solid lightgrey !important;
     margin-bottom: 50px !important;
     position: relative;
  }

  .blogp-search-results {
     position: absolute;
     top: 100%;
     right: 0;
     width: max-content;
     background: white;
     border: 1px solid #ddd;
     border-radius: 0 0 4px 4px;
     max-height: 300px;
     overflow-y: auto;
     z-index: 1000;
     box-shadow: 0 5px 20px 0px rgb(0 0 0 / 13%);
   }
   
   .search-result, .recent-result {
     padding: 15px 20px 20px 20px;
     cursor: pointer;
     border-bottom: 2px dotted #f1f1f1;
   }

   .recent-result {
    padding-inline: 5px;
   }
   
   .search-result:hover, .recent-result:hover {
     background-color: #fbfbfb;
   }
   
   .search-result h3, .recent-result h3 {
     margin: 0;
     font-size: 16px;
     color: var(--lr);
   }
   
   .search-result p, .recent-result p {
     margin: 0;
     font-size: 14px;
   }

   .search-result .blogp-meta, .recent-result .blogp-meta {
     font-size: 14px;
   }
   
   .no-results {
     padding: 15px;
     color: #b7b4ab;
     font-style: italic;
   }

   .blogp-side-title {
     border-bottom: 1px solid lightgrey;
     height: 45px;
     display: flex;
     align-items: center;
   }

   p.recent-content {
     margin-top: 10px;
     font-style: italic;
   }

   .blogp-read-more a{
     color: var(--lgy);
     text-decoration: underline;
   }

   .blogp-read-more {
     margin-top: 5px;
   }

   .blogp-rw-img {
     margin-bottom: 36px;
   }