/* index.css (Portal newsletters) */
.newsletters-header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin: 0 0 36px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--clr-dark-blue);
}

.newsletters-years {
   max-width: 110px;
   max-height: 37px;
   margin-left: 20px;
}

.newsletters-search-wrapper {
   position: relative;
}

.newsletters-search-wrapper form {
   display: inline;
   padding: 0;
   margin: 0;
}

.newsletters-search-wrapper input[type="text"] {
   height: 35px;
   margin-top: 4px;
   padding: 10px 30px 10px 10px;
   font-size: 1rem !important;
}

.newsletters-search-wrapper button {
   position: absolute;
   right: 0;
   top: 0;
   padding: 10px 6px;
   border: none;
   background-color: transparent;
   opacity: 0.5;
}

.newsletters-search-wrapper button:hover {
   opacity: 1;
}

.newsletters-search-wrapper button i {
   font-size: 22px;
   color: var(--clr-dark-blue);
}

.newsletters-banner {
   margin-bottom: 10px;
}

.newsletters-banner h2 {
   max-width: 600px;
   margin: 0 0 5px;
   font-size: 40px;
   font-weight: 600;
   color: var(--clr-red);
   text-align: center;
   text-transform: none;
}

.newsletters-banner p {
   max-width: 600px;
   margin: 0;
   font-size: 22px;
   font-style: italic;
   font-weight: 600;
   line-height: 26px;
   color: #444444;
   text-align: center;
}

.newsletters-banner p.small {
   font-size: 15px;
}

.newsletters-banner span.red {
   display: inline-block;
   margin-top: 5px;
   color: var(--clr-red) !important;
}

.newsletters-promo {
   margin-bottom: 15px;
}

.newsletters-promo-logo {
   width: 100%;
   max-width: 600px;
}

.newsletters-promo-img {
   margin-right: 4rem;
}

.newsletters-promo-img img {
   display: none;
   width: 100%;
   max-width: 420px;
}

.newsletters-promo-links a {
   display: inline-block;
   margin: 7px auto 14px;
   padding: 4px 24px;
   color: white;
   background-color: var(--clr-red);
   font-size: 20px;
   text-align: center;
   text-transform: uppercase;
   border-radius: 20px;
   white-space: nowrap;
}

.newsletters-promo-links a:hover {
   background-color: var(--clr-dark-blue);
}

.newsletters-header h3 {
   margin: 15px 0 9px;
   font-size: 35px;
   font-weight: 600;
   line-height: 24px;
   color: var(--clr-dark-blue);
   text-transform: none;
}

.newsletters-grid h4 {
   margin: 1.5rem 0 0.75rem;
   padding: 0 0.5rem;
   font-size: 22px;
   font-weight: 600;
   line-height: 24px;
   color: var(--clr-dark-blue);
   text-transform: none;
}

.newsletters-grid ul {
   display: grid;
   grid-gap: 3rem 2rem;
   grid-template-columns: 100%;
   margin-bottom: 4rem;
}

.newsletters-grid li {
   list-style: none;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border: 1px solid var(--clr-dark-blue);
   border-radius: 2px;
   text-align: center;
   overflow: hidden;
}

.newsletters-grid li a {
   display: block;
}

.newsletters-grid li.subscribe_banner {
   justify-content: flex-start;
   text-align: left;
   border: none;
}

.newsletters-grid li.subscribe_banner p {
   margin: 0;
   font-size: 19px;
   font-weight: 600;
   line-height: 25px;
   color: #555555;
}

.newsletters-grid li.subscribe_banner h4 {
   margin: 20px 0;
   font-size: 22px;
   font-weight: 600;
   color: var(--clr-red);
   text-transform: none;
}

.newsletters-grid li.subscribe_banner a {
   width: fit-content;
   padding: 3px 20px;
   margin: 0 0 20px;
   font-size: 22px;
   font-weight: 600;
   border: none;
   border-radius: 20px;
   text-transform: uppercase;
   color: white;
   background-color: var(--clr-red);
}

.newsletters-grid li.load-more {
   align-items: center;
   justify-content: center;
   flex-direction: row;
   border: none;
}

.newsletters-grid li.load-more > button {
   padding: 3px 24px;
   font-size: 18px;
   color: #ffffff;
   background-color: var(--clr-dark-blue);
   text-transform: none;
}

.newsletters-grid li.subscribe_banner a:hover,
.newsletters-grid li.load-more > button:hover {
   color: #555555;
   background-color: #e7e7e7;
}

.newsletters-grid img {
   min-width: 100%;
   height: 150px;
   object-fit: cover;
}

.newsletters-grid .newsletter-date {
   font-size: 14px;
   color: var(--clr-dark-blue);
   opacity: 0.8;
}

.qtip-default {
   width: 280px;
   border: none !important;
   background-color: #e5f8ff !important;
   color: var(--clr-dark-blue) !important;
   margin-left: -240px;
   margin-top: 5px;
   padding: 5px !important;
}

.newsletter-summary {
   display: none;
}

.newsletter-summary p {
   padding: 0;
   margin: 0;
   font-size: 14px;
}

.newsletter-summary ul {
   margin: 8px 0 10px 8px;
   padding: 0;
}

.newsletter-summary li {
   margin: 6px 0;
   padding: 0;
   font-size: 14px;
   overflow: hidden;
   list-style: inside;
   white-space: nowrap;
   text-overflow: ellipsis;
}

@media (min-width: 480px) {
   .newsletters-promo,
   .newsletters-promo-links {
      display: flex;
   }

   .newsletters-promo-links a {
      min-width: 200px;
   }

   .newsletters-search-wrapper input[type="text"] {
      width: 420px;
   }

   .newsletters-grid ul {
      grid-template-columns: repeat(2, 2fr);
   }

   .newsletters-grid li.subscribe_banner {
      grid-column: 1 / 3;
   }
}

@media (min-width: 768px) {
   .newsletters-header {
      flex-direction: row;
   }

   .newsletters-header h3 {
      margin-bottom: 0;
   }

   .newsletters-promo-links a {
      min-width: 200px;
   }

   .newsletters-grid ul {
      grid-template-columns: repeat(3, 3fr);
   }
}

@media (min-width: 1024px) {
   .newsletters-promo-img img {
      display: inline-block;
   }

   .newsletters-promo-links a {
      min-width: 275px;
      padding: 0 35px;
      font-size: 25px;
   }

   .newsletters-grid ul {
      grid-template-columns: repeat(4, 4fr);
   }
}

@media (min-width: 1280px) {
   .newsletters-grid ul {
      grid-template-columns: repeat(5, 5fr);
   }

   .newsletters-grid li.subscribe_banner {
      grid-column: 4 / 6;
   }
}