:root { --dark-green: #243508; --light-green: #BFF355; --text: #3C4748; --light-blue: #82C8BE; }


.c2019 .page-banner .wrapper { padding: 25px 0; }
.c2019 .page-banner .banner { width: 100%; max-width: 510px; }
.c2019 .page-banner .content { background-color: var(--dark-green); padding: 25px 25px 50px 25px; }
.c2019 .page-banner .content .copy-container { padding-right: 60px; }
.c2019 .page-banner h2.title { color: var(--light-green); line-height: 1.6em; font-family: Roobert, sans-serif; font-size: 24px; }
.c2019 .page-banner h2.title span { color: #ffffff; font-family: Roobert, sans-serif; font-size: 36px; }

.c2019 .page-banner .content p { font-size: 20px; font-family: Roobert, sans-serif; }
.c2019 .page-banner .content p:last-child { margin-bottom: 0; }

section.intro { margin-top: 0; }
section.intro h2.title { color: var(--dark-green); font-size: 35px; font-family: Roobert, sans-serif; font-weight: 600; }
section.intro h2.title.light { font-weight: 200; }

section.intro h2.title span { color: var(--dark-green) !important; }


section.intro p { font-size: 17px; line-height: 1.3em; font-weight: 200; }

.standard-knowhow-popup.is-new .close-knowhow-popup { 
  right: 70px;
}

.narrow { max-width: 950px; }

.podcast-list,
.video-list { display: grid; grid-template-columns: 1fr; gap: 40px; }

.podcast-list h4.title,
.video-list h4.title { font-size: 21px; color: var(--light-blue); margin-bottom: 0.5em; line-height: 1.2em; font-family: Roobert, sans-serif; font-weight: 600; }


.podcast-list .podcast-container iframe { width: 100%; height: 150px; border: none; min-width: min(100%, 430px); }

.podcast-container { position: relative; width: 100%; height: 150px; background-color: #f8f8f8; }

/*.podcast-list .podcast-panel:not(:first-child) { margin-top: 20px; border-top: 1px dotted var(--hl-light-green); padding-top: 20px; } */

.podcast-panel { }
.podcast-panel .podcast-panel-content { position: relative; }
.podcast-panel .podcast-panel-content + .podcast-panel-content { margin-top: 20px; }

.podcast-panel .podcast-container iframe { opacity: 1; transition: opacity 0.25s; z-index: 1; position: relative; }
.podcast-panel .podcast-container iframe[data-src] { opacity: 0; }

.podcast-container:before { content: "Loading ..."; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -0.5em; text-align: center; z-index: 0; font-size: 20px; font-family: Roobert, sans-serif; color: #999999; }


.transcript-link-container { margin-top: 10px; text-align: right; }
a.transcript-link { text-decoration: none; color: var(--dark-green); font-size: 17px; line-height: 1.2em; font-weight: 400; }

a.transcript-link:hover { text-decoration: underline; }

.font-m, p, p span,
.standard-page-content:not(.inherit) p:last-child,
.standard-page-content:not(.inherit) ul:last-child,
.standard-page-content:not(.inherit) ol:last-child {
   font-family: Roobert, sans-serif !important;
   color: var(--dark-green);
   font-weight: 200;
   font-size: 17px;
}

p span { font-weight: 400; }

#cpBody_ctl00_pnlPageCopy p { color: #ffffff !important; font-weight: 200 !important; font-size: 17px; line-height: 1.4em; }

.c2019 .page-banner .copy { margin: 15px 0 20px 0; }

section.back { margin: 30px 0 20px 0; z-index: 100; }
section.back .btn-back { background-color: var(--hl-taupe); border-color: var(--hl-taupe); color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 16px; padding-left: 20px; gap: 16px; }
section.back .btn-back:before { content: ""; width: 12px; height: 19px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(180deg); }
section.back .btn-back:after { display: none; }
section.back .btn-back:hover { background-color: var(--hl-dark-taupe); }



/*** Data Chronicls ***/

section.header {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 20px 0; 
}

section.header .inner {
   display: grid;
   grid-template-columns: 55% auto;
   gap: 60px;
}

section.header div.header {
   background-color: var(--hl-dark-green);
   padding: 30px;
   font-family: Roobert, sans-serif;
   font-weight: 400;
   font-size: 19px;
   color: #ffffff !important;
   line-height: 1.3;
}

section.header div.header h1.title {
   font-family: inherit;
   font-weight: 600;
   font-size: 36px;
   color: var(--hl-light-green);
}

section.header div.header p {
   color: #ffffff !important;
}

/* Not all systems might support container queries - Chrome does. */
section.header .media {
   container-type: inline-size;
   container-name: media-header;

   align-content: center;
}

section.header .media iframe {
   width: 100%;
   height: 100%;
}


/*** ***/

.section-title {
   font-family: Roobert, sans-serif;
   font-size: 30px;
   font-weight: bold;
   color: var(--hl-dark-green);
}

section.title-and-filter { 
   z-index: 10; 
}

section.title-and-filter .col-1 {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 20px;
   justify-content: space-between;
}

.dc-article-panel { }

.dc-article-panel.standard-knowhow-panel .inner {
   background-color: var(--hl-light-taupe);
}


.dc-article-panel .tag-and-jurisdictions {
   width: 100%;
   align-items: center;
}

.dc-article-panel .jurisdictions {
   padding: 0 10px 0 0;
}

.dc-article-panel .jurisdictions img.flag {
   height: 24px;
}

.dc-article-panel .date-and-length {
   font-family: Roobert, sans-serif;
   font-weight: 400;
   font-size: 12px;
   color: var(--hl-dark-green);
   margin-bottom: 1em;
   display: flex;
   justify-content: space-between;
}

.dc-article-panel .title {
   font-family: Roobert, sans-serif;
   font-size: 18px;
   font-weight: 400;
   color: var(--hl-dark-green);
   line-height: 1.2;
}

.dc-article-panel .title .copy { 
   margin-top: 15px;
   font-size: 14px;
}

.dc-article-panel .title .copy p { 
   font: inherit;
   margin-bottom: 0.75em;
}

.dc-article-panel .title .copy > :last-child {
   margin-bottom: 0;
}

.dc-article-panel .tag div.is-new {
   width: 45px;
   height: 45px;
   display: block;
   overflow: hidden;
   position: relative;
}

.dc-article-panel .tag div.is-new span {
   display: block;
   background-color: var(--hl-dark-green);
   color: var(--hl-light-green);
   width: 100%;
   text-align: center;
   padding: 3px 0px;
   width: 54px;
   font-family: Roobert, sans-serif;
   font-size: 10px;
   font-weight: bold;
   transform: rotate(45deg);
   transform-origin: bottom left;
   margin-top: -20px;
   text-transform: uppercase;
}

.dc-article-popup .popup-form {
   width: calc(100vw - 20px);
   max-width: 800px;
}

.dc-article-popup .tag {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   width: 100%;
   padding-right: 40px;
}

.dc-article-popup .tag .type {
   font-family: Roobert, sans-serif;
   font-size: 12px;
   font-weight: 500;
   color: var(--hl-dark-green);
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

.dc-article-popup .tag .tag-and-jurisdictions {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
}

.dc-article-popup.popup-modal .popup-form .wrapper {
   padding: 0;
}

.popup-modal.dc-article-popup .header {
   padding-left: 30px;
   padding-right: 30px;
   padding-bottom: 10px;
}

.dc-article-popup .header .is-new {
   position: absolute;
   top: 0;
   right: 0;
   width: 80px;
   height: 80px;
   overflow: hidden;
}

.dc-article-popup .header .is-new span {
   display: block;
   background-color: var(--hl-dark-green);
   font-family: Roobert, sans-serif;
   font-weight: bold;
   font-size: 14px;
   color: var(--hl-light-green);
   text-transform: uppercase;
   width: 116px;

   padding: 5px 0;
   text-align: center;
   transform: rotate(45deg);
   transform-origin: bottom left;

   margin-top: -25px;
}

.dc-article-popup .tag .type .icon {
   width: 45px;
   height: 45px;
   background-color: var(--hl-light-green);
   background-position: center;
   background-size: 30px;
   background-repeat: no-repeat;
}

.dc-article-popup .content {
   padding: 10px 30px 0 30px;

   font-family: Roobert, sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: var(--hl-dark-green);
   line-height: 1.3;
}

/*.dc-article-popup.standard-knowhow-popup.is-new .close-knowhow-popup {
   right: 65px;
}*/

.dc-article-popup .date-and-length {
   font-family: Roobert, sans-serif;
   font-size: 14px;
   color: var(--hl-dark-green);
   display: flex;
   gap: 20px;
   justify-content: space-between;
   margin-bottom: 20px;
}

.dc-article-popup p.title {
   font-family: Roobert, sans-serif;
   font-size: 27px;
   font-weight: 400;
   line-height: 1.2;
   margin: 0 0 30px 0;
}

.dc-article-popup .links {
   margin-top: 30px;
   display: flex;
   flex-direction: row;
   gap: 20px;
}

.dc-article-popup .links .btn-2024 {
   font-size: 15px;
   font-weight: 500;
}

.dc-article-popup .key-contacts-v3 {
   background-color: transparent;
   margin-top: 30px;
   padding: 0;
}

.dc-article-popup .key-contacts-v3 .header {
   padding: 0 0 20px 0;
}

.dc-article-popup .key-contacts-v3 .header h2 {
   font-family: Roobert, sans-serif;
   font-size: 28px;
   font-weight: 400;
   color: var(--hl-dark-green);
}

.dc-article-popup .key-contacts-v3 .carousel-controls .slick-arrow {
   width: 40px;
   height: 40px;
   background-color: var(--hl-light-green);
   border-color: var(--hl-light-green);
   background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
   background-size: 18px;
}

.dc-article-popup .key-contacts-v3 .key-contact {
   height: 234px;
}

.dc-article-popup .button { 
   margin-top: 20px;
}

.dc-article-popup .button a { 
   font-size: 15px;
}

section.dc-promoted-article {
   margin: 10px 0 20px 0;
   font-family: Roobert, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: var(--hl-dark-green);
}

section.dc-promoted-article .col-1 .inner {
   background-image: url("/_uploads/podcasts/data-chronicles/promoted-bg.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 30px;

   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

section.dc-promoted-article .col-1 .inner .tag {
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;

   margin-bottom: 40px;
}

section.dc-promoted-article .col-1 .inner .tag .icon {
   width: 45px;
   height: 45px;
   background-color: var(--hl-light-green);
   background-size: 30px;
   background-position: center;
   background-repeat: no-repeat;
}

section.dc-promoted-article .col-1 .inner .tag label {
   font-size: 12px;
   font-weight: 500;
}

section.dc-promoted-article .date-and-length {
   font-size: 14px;
   margin-bottom: 20px;
}

section.dc-promoted-article p.title {
   font-size: 28px;
   line-height: 1.1;
   color: var(--hl-dark-green);
   margin: 0;
}

section.dc-promoted-article .content {
   display: flex;
   flex-direction: column;
   gap: 30px;
   justify-content: space-between;
}

section.dc-promoted-article .media {
   container-type: inline-size;
   container-name: media-header;
   align-self: center;
}

section.dc-promoted-article iframe {
   width: 100%;
   height: 100%;
}



/*** ***/

section.back.with-social-media section.standard-toolbar { 
   padding: 0;
}

section.back.with-social-media > .wrapper > .col-1 {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
}

.streaming-service-link {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   border: 1px solid var(--hl-dark-green);
   border-radius: 10px;
   padding: 4px 6px!important;
   font-family: Roobert, sans-serif;
   font-size: 15px!important;
   font-weight: bold;
   line-height: 1;
   color: var(--hl-dark-green);
   transition: all 0.2s;
   background-color: #ffffff;
   height: auto!important;
}

.streaming-service-link div { 
   padding-bottom: 2px;
}

.streaming-service-link div span {
   font-size: 12px;
   font-weight: 400;
}

.streaming-service-link img {
   height: 30px;
   width: auto;
}

.streaming-service-link:hover { 
   background-color: var(--hl-dark-green);
   color: #ffffff;
}

@media (max-width: 740px) {
   section.back.with-social-media > .wrapper > .col-1 { 
      align-items: start;
   }
}

@media (max-width: 640px) {
   .dc-article-popup .key-contacts-v3 .key-contact {
      height: calc(50vw - 50px);
   }
}

@media (max-width: 540px) {
   section.back.with-social-media section.standard-toolbar .search-bar-container {
      grid-template-areas: "social" "actions";
      justify-content: end;
   }
}

@media (max-width: 500px) {
   section.back.with-social-media > .wrapper > .col-1 { 
      flex-direction: column;
      gap: 0;
   }

   section.back.with-social-media .social-media { 
      width: 100%;
   }
}

@media (max-width: 420px) {
   .dc-article-popup .key-contacts-v3 .key-contact {
      height: calc(100vw - 80px);
   }
}

@container media-header (min-width: 0) {
   /* 56% of the container w, which should equate to ~16:9 video ratio. */
   /* Without this you will get black bars top and bottom of the video. */
   section .inner .media iframe {
      height: 56cqw;
   }
}

@media (max-width: 1200px) {
   section .header .inner {
   grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 1090px) {
   section.title-and-filter .col-1 {
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
}

@media (max-width: 960px) {
   section.header div.header {
      font-size: 16px;
   }
}

@media (max-width: 840px) {
   section.header .inner {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   section.header .inner iframe {
      display: block;
      width: 400px;
      height: 225px;
      margin: 0 auto;

      max-width: 100%;
   }
}

@media (max-width: 820px) {
   section.title-and-filter .col-1 .filter {
      display: grid;
      grid-template-areas: "sortBy clear" "date topic";
      width: 100%;
   }

   section.title-and-filter .col-1 .filter .sort-by {
      grid-area: sortBy;
   }

   section.title-and-filter .col-1 .filter .date {
      grid-area: date;
   }

   section.title-and-filter .col-1 .filter .topic {
      grid-area: topic;
   }

   section.title-and-filter .col-1 .filter .clear {
      grid-area: clear;
      justify-content: end;
   }

   section.title-and-filter .col-1 .filter-field > label {
      width: 55px;
   }

   section.title-and-filter .filter .filter-field .dk-selected {
      max-width: calc(50vw - 50px);
   }
}

@media (max-width: 700px) {
   section.dc-promoted-article .col-1 .inner {
      grid-template-columns: 1fr;
   }

   section.dc-promoted-article .col-1 .inner .media iframe { 
      width: 600px;
      max-width: 100%;
   }
}

@media (max-width: 450px) {
   section.title-and-filter .col-1 .filter {
      grid-template-areas: "sortBy" "date" "topic" "clear";
   }

   section.title-and-filter .col-1 .filter .topic,
   section.title-and-filter .col-1 .filter .clear {
      padding-left: 65px;
      justify-content: start;
   }

   section.title-and-filter .filter .filter-field .dk-selected {
      max-width: calc(100vw - 80px);
   }
}

@media (max-width: 440px) {
   section.header .inner iframe {
      height: 56cqw;
   }
}