﻿body {
}

.am-btns-outer {display: flex;align-items: center;}

.btn-2024.btn-subscribe {padding-top: 5px; padding-bottom: 5px; }

strong.am-sr {font-weight: 800; border-bottom: 2px dotted var(--hl-dark-green); color: var(--hl-dark-green);}


h2.section-title {
   font-family: Roobert, sans-serif;
   font-size: 35px;
   font-weight: 300;
   color: var(--hl-dark-green);
   margin-bottom: 1em;
}

body.c2025 section.additional-resources .slick-arrow:hover {
   background-color: var(--hl-light-green);
}

/*** ***/
section.header {
   background: url("/_uploads/amla/header-bg.jpg") no-repeat var(--hl-light-green);
   background-size: cover;
   background-position: center;
   padding: 0 0 30px 0;
}

section.header div.header {
   position: relative;
   display: grid;
   grid-template-columns: auto min(20vw, 240px);
   align-items: center;
   gap: 80px;
}

section.header div.header .header-image { 
   width: 100%;
   height: 100%;
   flex-shrink: 0;
   background-size: contain;
   background-position: right center;
   background-repeat: no-repeat;
}

section.header .header-intro {
   padding: 30px 0 0 0;
}

section.header .header-intro .title h1 {
   font-size: min(8vw, 60px);
   font-weight: bold;
}


section.header .header-intro > a {
   text-decoration: none;
   font-family: Roobert, sans-serif;
   font-size: 19px;
   font-weight: 300;
   line-height: 1.2;
   color: var(--hl-dark-green);
}

section.header .header-buttons {
   margin-top: 30px;
   display: grid;
   grid-template-columns: 4fr 1fr;

   /*display: flex;
   flex-direction: row;*/
   gap: 25px;
   justify-content: space-between;
}

section.header .header-buttons section.standard-toolbar {
   padding: 0 0 0 20px;
}

section.header .header-buttons section.standard-toolbar .col-1 {
   padding: 0;
}


section.header .header-buttons.header-buttons-2l {
   margin-top: 0px;
}

@media (max-width: 520px)
{	
	section.header .header-buttons.header-buttons-2l {margin-top: 30px; }
}


/*** Home Page Links ***/

section.home-page-links {
   padding: 30px 0; z-index: 1;
}

.home-page-link-panel {
   font-family: Roobert, sans-serif;
   font-size: 38px;
   font-weight: 600;
   color: var(--hl-dark-green);
   line-height: 1.2;
   text-decoration: none;
   padding: 20px;
   background-color: var(--hl-light-green);

   transition: all 0.2s;
}

.home-page-link-panel a {
   text-decoration: none;
   color: inherit;
}

.home-page-link-panel .icon {
   position: relative;
   width: 100%;
   height: 64px;
}

.home-page-link-panel .icon > div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: contain;

   opacity: 1;
   transition: opacity 0.2s;
}

.home-page-link-panel.green {
   background: #bff355;
   background: linear-gradient(180deg, #bff355 0.00%, rgba(191,243,85,0.2 ) 100.00%);
}

.home-page-link-panel.green:hover {
   background: #bff355;
   background: linear-gradient(180deg, rgb(191,243,85) 0.00%,#53740e 100.00%);
}

.home-page-link-panel.purple {
   background: #b1a6ff;
   background: linear-gradient(180deg, #b1a6ff 0.00%, rgba(177,166,255,0.15 ) 100.00%);
}

.home-page-link-panel.purple:hover {
   background: #b1a6ff;
   background: linear-gradient(180deg, rgb(177, 166, 255) 0.00%, #30238f 100.00%);
}

.home-page-link-panel.cyan {
   background: rgba(130,200,190,0.15 );
   background: linear-gradient(0deg, rgba(130,200,190,0.15 ) 0.00%, #82c8be 100.00%);
}

.home-page-link-panel.cyan:hover {
   background: #243508;
   background: linear-gradient(0deg, #243508 0.00%, #82c8be 100.00%);
}

.home-page-link-panel:hover { 
color: #ffffff;
}

.home-page-link-panel:not(:hover) .icon .hover {
   opacity: 0;
}

.home-page-link-panel:hover .icon .normal {
   opacity: 0;
}

/*** ***/

section.whats-new {
   background-color: var(--hl-taupe)!important;
   padding: 30px 0;
}

/*** ***/

section.knowhows .knowhow-panel .inner {background-color: var(--hl-light-taupe); height: 100%;}

.knowhows .standard-knowhow-panel .inner > button {height: 85%;}
.knowhows .standard-knowhow-panel .content {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
/*** ***/
.core-team {
   padding: 40px 0 20px 0;
   border-bottom: 1px solid var(--hl-dark-green);
}

.core-team:first-of-type {
   padding-top: 0;
}

.core-team p.team-title {
   font-family: Roobert, sans-serif;
   font-size: 28px;
   font-weight: 600;
   color: var(--hl-dark-green);
   margin-bottom: 1em;
}

.core-team .btn-back-to-top {
   font-family: Roobert, sans-serif;
   font-size: 14px;
   font-weight: 400;
   color: var(--hl-dark-green);
   background-color: transparent;
   margin-top: 20px;
}

.core-team .btn-back-to-top:hover {
   text-decoration: underline;
}

.core-teams-map { width: 100%; height: 800px;  }




/*** ***/
section.tracker-header { 
z-index: 1;
}

section.tracker-header .header-and-filter-clear {
   display: flex;
   flex-direction: row;
   gap: 80px;
}

section.tracker-header .header-and-filter-clear h2.section-title {font-weight: 600; margin: 0; line-height: 1.1em;}

section.tracker-header .header-and-filter-clear div.filter-clear { 
   display: flex;
   align-items: end;
}

section.tracker-filter .filter {
   display: grid;
   grid-template-columns: auto auto auto 1fr auto;
   gap: 10px;
}

section.tracker {
   position: relative;
   z-index: 0;
}

table.tracker {
   background-color: transparent;
   border-collapse: collapse;
}

table.tracker thead tr th,
table.tracker tbody tr td {
   font-family: Roobert, sans-serif;
   font-size: 15px;
   font-weight: 400;
   color: var(--hl-dark-green);
   line-height: 1.2;
   padding: 8px 12px;
}

table.tracker thead tr th {
   font-weight: 500;
   background-color: var(--hl-dark-green);
   color: var(--hl-light-green);
   border-top: 0;
   border-bottom: 0;
   border-left: 1px solid var(--hl-light-green);
   border-right: 1px solid var(--hl-light-green);
}
table.tracker thead tr th:first-child {
   border-left: 0;
}

table.tracker thead tr th:last-child {
   border-right: 0;
}

table.tracker tbody tr td {
   padding-top: 14px;
   padding-bottom: 14px;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid var(--hl-dark-green);
   background-color: transparent;

   transition: background-color 0.1s;
}


table.tracker tbody tr td a {
   color: inherit;
   border: 0;
   text-decoration: underline;
   text-underline-offset: 2px;
}

table.tracker tbody tr td .status {
   font-size: 15px;
   font-weight: 400;
   margin: 0 0 20px 0;
   display: flex;
   flex-direction: row;
   align-items: start;
   gap: 10px;
}

table.tracker tbody tr td .status .indicator { width: 15px; height: 15px; }

table.tracker div.read-more {
   margin-top: 20px;
}

table.tracker button.btn-read-more {
   font-family: Roobert, sans-serif;
   font-size: 15px;
   background-color: transparent;
   font-weight: bold;
   color: var(--hl-dark-green);
}

table.tracker button.btn-read-more:before {
   content: "Read more";
}

table.tracker tr.regulation-summary.expanded button.btn-read-more:before { 
content: "Read less";
}

table.tracker button.btn-read-more:hover {
   text-decoration: underline;
}

table.tracker tr.regulation-additional td { 
   font-family: Roobert, sans-serif;
   font-size: 15px;
   font-weight: 400;
   color: var(--hl-dark-green);
}

table.tracker tbody tr.regulation-additional td div.ra-section {
   padding: 20px 0;
}

table.tracker tbody tr.regulation-additional td div.ra-section:not(:first-child) {
   border-top: 1px solid #707070;
   margin-top: 0px;
}

table.tracker tr.regulation-additional td p.title {
   font-weight: bold;
   margin-bottom: 0.5em;
}

table.tracker tr.regulation-additional {
   display: none;
}

table.tracker .full-summary {
   padding-top: 0px;
   display: none;
}

table.tracker td.regulation-additional {
   padding: 0;
}

table.tracker ul.topics-list {
   list-style: none;
   margin: 0;
}

table.tracker ul.topics-list li {
}

table.tracker td.regulation-additional > div.content {
   display: none;
   background-color: var(--hl-light-taupe);
   padding: 0 20px;
}

table.tracker tbody tr.regulation-summary.expanded td {
   background-color: var(--hl-light-taupe);
   border-color: var(--hl-light-taupe);
}

table.tracker td.regulation-additional .spacer {
   background-color: #ffffff;
   height: 40px;
}

/*** ***/
section.video-series {
   background-image: url("/_uploads/amla/videos-bg.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   padding: 30px 0;
}

section.video-series .intro {
   font-family: Roobert, sans-serif;
   font-size: 17px;
   font-weight: 400;
   color: var(--hl-dark-green);
   line-height: 1.2;
}

section.video-series .carousel {
   position: relative;
}

.video-panel {
   position: relative;
}

.video-panel button.action {
   position: relative;
   font-family: Roobert, sans-serif;
   font-weight: 400;
   color: var(--hl-dark-green);
   background-color: #ffffff;
   text-align: left;
}

.video-panel button.action:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #000000;
   opacity: 0.2;
   transition: opacity 0.1s;
}

.video-panel.current button.action:before {
   opacity: 0;
}

.video-panel .logo {
   position: absolute;
   top: 20px;
   left: 20px;
   height: 54px;
   width: auto;
}

.video-panel .inner .content {
   width: 440px;
   height: 240px;

   display: grid;
   grid-template-columns: auto 35%;
}

.video-panel .inner .content .details {
   padding: 25% 20px 20px 20px;

}

.video-panel .inner .content .details div.title {
   display: flex;
   flex-direction: row;
   align-items: end;
   gap: 20px;
   margin-bottom: 8px;
}

.video-panel .inner .content .details p {
   font: inherit;
   color: inherit;
}

.video-panel .inner .content .details p.title {
   font-size: 20px;
   margin: 0;
}

.video-panel .inner .content .details .play-arrow { 
   width: 38px;
   height: 77px;
   background-image: url("/_assets/icon-play-hl-light-green-tall.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;

   opacity: 1;
   transition: opacity: 0.2s;
}

.video-panel:not(.current) .inner .content .details .play-arrow {
   opacity: 0.25;
}

.video-panel .inner .content .image {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.video-panel {}

/** FAQS **/
.a-faqs h2.section-title {margin-top: 0px; color: #000; }
.a-faqs .a-faq-intro p {font-size: 21px; line-height: 31px; margin-bottom: 40px; font-weight: 500; color: #000;}
.a-faqs .a-faq-copy p {font-size: 17px; line-height: 25px; font-weight: 400; color: #000;}
.core-team-intro .a-contact-btn {display: block; position: absolute; top: 0; right: 0; margin-right: 10px; }


.am-faq-subjects ul {display: flex; list-style: none; justify-content: space-between; gap: 30px; flex-wrap: wrap;}
.am-faq-subjects ul li {padding: 10px; background-color: #E8DED8; font-size: 15px; font-family: "Roobert", sans-serif; font-weight:500; color: #243508; min-width: 230px; text-align: center; flex: 1; cursor: pointer; transition: 0.2s ease-in-out}
.am-faq-subjects ul li:hover {opacity: 0.5;}
.am-faq-subjects ul li.active:hover {opacity: 1;}
.am-faq-subjects ul li span {position: relative; z-index: 1;}
.am-faq-subjects ul li.active {background-color: #243508; color: #FFFFFF;position: relative; z-index: 1;}
.am-faq-subjects ul li.active:after {content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #243508; }

.am-faqs {margin-top: 20px;}
.accordion-item h2 {position: relative; font-size: 18px; font-weight:500; font-family: "Roobert", sans-serif; padding-right: 36px; line-height: 1.2em;}
.accordion-item h2 span.plus {width: 22.5px; height: 22.5px; position: absolute; right: 0;}
.accordion-item h2 span.plus::before {width:2px; height: 100%; background-color: #0D0D0D; position: absolute; left: 4px; top: 0; content: ''; transition: transform 0.4s ease;}
.accordion-item h2 span.plus::after {width:2px; height: 100%; background-color: #0D0D0D; position: absolute; left: 4px; top: 0; content: ''; transform: rotate(90deg);}

.accordion-item {border-bottom: 1px solid #707070; padding: 24px 0; transition: padding 0.4s ease;}
.accordion-item:hover {cursor: pointer;}
.accordion-expanded {display: none; padding: 40px 30px; background-color: #F4EFEC;margin-top: 24px; font-size: 17px; font-weight:400;}
.accordion-expanded p {color: #243508; font-family: "Roobert", sans-serif;}
.accordion-item.active {border-bottom: none; padding-bottom: 0;}

.accordion-item.active h2 span.plus::after {display: none;}
.accordion-item.active h2 span.plus::before {transform: rotate(90deg);}

.am-faq-subjects-mb {display: none;}

.am-faq-subjects-select-wrapper { position: relative; display: inline-block; width: 100%; background-color: var(--hl-dark-green); }

.am-faq-subjects-mb p {color: var(--hl-dark-green); font-size: 15px; font-weight:500;}

/* Mobile Subject select custom styling */
.subjects-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; background-color: transparent; width: 100%; padding: 12px 40px 12px 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; color: white; cursor: pointer; }
.subjects-select option {color: #243508;}
.am-faq-subjects-select-wrapper::after { content:''; position: absolute; top: 50%; right: 16px; width: 12px; height: 12px; border: solid var(--hl-light-green); border-width: 0 2px 2px 0; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.am-faq-subjects-select-wrapper:has(.custom-select:focus) { box-shadow: 0 0 0 2px var(--select-focus-shadow); }






/*** ***/

@media (max-width: 880px) {
   .standard-title-and-filter .col-1 {
      flex-direction: column;
      gap: 20px;
   }
}

@media (max-width: 760px) {
   .tracker-header {
      padding: 0px 12px !important;
   }

   .filter-clear {
      justify-content: flex-end;
   }

   thead.dk {
      display: none;
   }

   .mb-th {
      display: block;
      font-weight: 500;
      background-color: var(--hl-dark-green);
      color: var(--hl-light-green);
      border-top: 0;
      border-bottom: 0;
      border-left: 1px solid var(--hl-light-green);
      border-right: 1px solid var(--hl-light-green);
      padding: 10px;
      margin-bottom: 15px;
   }

   .mb-th.first {
      margin-top: 10px;
   }

   table.tracker,
   table.tracker tbody,
   table.tracker th,
   table.tracker tr,
   table.tracker td {
      display: block;
      width: 100%;
   }

	table.tracker tr.regulation-summary {display: flex; flex-wrap: wrap;}
	table.tracker tr.regulation-summary.odd-summary {background-color:#f0ebe8;}
	table.tracker tbody tr td {width: 100%;}
	table.tracker tbody tr td.half {width: 50%;}
	table.tracker button.btn-read-more {padding: 10px;background-color: #bff355;}
	table.tracker tbody tr td .mb-th.first {margin-top: 0px; }
	table.tracker .regulation-additional.expanded {display: block !important;}



   section.tracker-filter .filter {
      display: flex !important;
      flex-direction: column !important;
      margin-top: 20px;
      margin-bottom: -20px;
      padding: 0 12px;
   }

   section.tracker-filter .filter .standard-filter-field.sff-label-above {
      flex-direction: row;
      align-items: center;
   }

   section.tracker-filter .standard-filter-field .dk-select.wide-dd-400 .dk-select-options,
   section.tracker-filter .standard-filter-field .dk-select-multi.wide-dd-400 .dk-select-options {
      width: inherit;
      max-width: inherit;
   }

   section.tracker-header .header-and-filter-clear {
      flex-direction: column !important;
      gap: 30px !important;
   }

   .standard-filter-field > label {
      width: 100px;
   }

   .standard-filter-field .dk-selected {
      width: 100%;
      max-width: 100% !important;
   }
}

@media (max-width: 740px) {
   section .header div.header .header-image {background-position-y: 14vw; }
	
	section.standard-toolbar .search-bar-container {display: block !important;}

	.am-faq-subjects-mb {display: block;}
	.am-faq-subjects {display: none;}

	.a-faqs {padding: 0 30px;}

	.accordion-expanded {margin-top: 15px; padding: 25px;}
	
}

@media (max-width: 700px) {
   section.title-and-filter .filter .filter-field > label {
      width: 60px;
   }

   section.title-and-filter .filter {
      display: grid;
      grid-template-areas: "sortBy sortBy" "contentType jurisdiction";
      grid-template-columns: 1fr 1fr;
   }

   section.title-and-filter .filter .filter-field.sort-by {
      grid-area: sortBy;
   }

   section .title-and-filter .filter .filter-field.content-type {
      grid-area: contentType;
   }

   section .title-and-filter .filter .filter-field.jurisdiction {
      grid-area: jurisdiction;
   }

   section.title-and-filter .filter .filter-field .dk-select-multi {
      width: 100% !important;
   }

   section.title-and-filter .filter .filter-field .dk-selected {
      max-width: calc(50vw - 50px);
   }
	.core-team-intro {margin-bottom: 10px; }
	.core-team-intro .a-contact-btn {display: unset; position: unset;}

	
	.core-teams-map { width: 100%; height: 600px;  }

	
	
}

@media (max-width: 520px) {
	
	
	section.header div.header {display: flex;}
	
   section .header div.header {
      grid-template-columns: 1fr;
   }

   section.header div.header .header-image {
      display: none;
   }

   .core-teams-map {
      width: 100%;
      height: 50vh;
   }

   section.header .am-btns-outer {
      flex-direction: column;
      gap: 10px;
      align-items: start;
   }

   section.header .header-buttons section.standard-toolbar {
      padding-left: 0;
   }

   section.header .header-buttons { /*flex-direction: column!important;*/
      grid-template-columns: 1fr;
      gap: 10px;
   }
   /*section.standard-toolbar {padding: 0px !important;}*/
}

@media (max-width: 450px) {
   section.title-and-filter .filter {
      grid-template-areas: "sortBy" "contentType" "jurisdiction";
      grid-template-columns: 1fr;
   }

   section.title-and-filter .filter .filter-field .dk-selected {
      max-width: calc(100vw - 90px);
   }

   section.title-and-filter .filter .filter-field.jurisdiction { 
   padding-left: 70px; 
   }

}

@media (max-width: 360px) {

	.core-team-intro .a-contact-btn {padding: 10px !important; font-size: 14px; }

}