:root { 
   --very-light-grey: #F2F3F3;
   --light-grey: #d8d8d8;
   --purple: #4A2B42;
   --light-green: #B4CC05;
   --green: #6FA739;
   --text: #3C4748;
   --dark-green: #2C5E4F;
   --pale-green: #F0F6EB;
	--hl-lime-green: #BFF355;
}

.section-title h2 {color: var(--hl-lime-green); font-size: 35px; margin-bottom: 30px; }



/* There is a global .grid-4 */
.grid-4:not(.grid-4-global) {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
@media (max-width: 999px) {
	.grid-4:not(.grid-4-global) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }}
@media (max-width: 999px) {
	.grid-4:not(.grid-4-global) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }}
@media (max-width: 670px) {
	.grid-4:not(.grid-4-global) { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }}


body.c2019.tool-page.grey-bg { background-color: var(--very-light-grey); }

#pnlToolNavigation { padding-bottom: 30px; }
body.grey-bg #pnlToolNavigation { background-color: #ffffff; }

section.banner { padding: 30px 0 0 0; }
section.banner .background { position: absolute; left: 0; top: 0; right: 0; bottom: 0px; overflow: hidden; }

section.banner .banner-header { background-color: var(--purple); padding: 35px 50px 35px 35px; max-width: 500px; width: 100%; }

section.banner .banner-header h1 { color: #ffffff; font-size: 32px; line-height: 1.2em; }
section.banner .intro {color: #ffffff; font-size: 20px; line-height: 1.2em; }

section.banner .home-link { text-decoration: none; }

.home-page section.banner,
.home-page section.search-bar,
.home-page section.know-hows { background-color: var(--very-light-grey); }



section.search-bar { padding: 20px 0; }
section.search-bar .search-bar-container { display: flex; flex-direction: row; gap: 20px; align-items: center; }
section.search-bar .search-box { background-color: #ffffff; border: 1px solid #BEC5C2; flex-basis: 100%; padding: 8px 12px; display: flex; flex-direction: row; align-items: center; }
section.search-bar .search-box input[type=text] { width: 100%; margin-right: 10px; font-size: 16px; }
section.search-bar .search-box .btn-search { display: inline-block; width: 21px; height: 21px; background-color: transparent; background-image: url("/_assets/icon-search.png"); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; flex-shrink: 0; }

.popup-form .header .icon-and-title { display: flex; flex-direction: row; gap: 10px; align-items: center; margin-bottom: 16px; }
.popup-form .header h2 { font-size: 24px; color: var(--purple); margin-bottom: 0em; }
.popup-modal .popup-form .close-popup { background-color: var(--purple); }
div.switch-control .switch-control-toggle:before { background-color: var(--purple); }


section.search-bar .buttons { display: flex; flex-direction: row; align-items: center; gap: 10px; }

section.search-bar .buttons a,
section.search-bar .buttons button { display: flex; flex-direction: row; gap: 10px; align-items: center; white-space: nowrap; padding: 7px 1em 8px 1em; font-size: 16px; }

section.search-bar .buttons a:before,
section.search-bar .buttons button:before { content: ""; display: inline-block; background-size: contain; background-repeat: no-repeat; }

.btn-generate-report { background-color: var(--light-green); color: #4C5155; border-color: var(--light-green); }
.btn-my-alerts { background-color: var(--purple); color: #ffffff; border-color: var(--purple); }

.btn-generate-report:before { width: 25px; height: 22px; background-image: url("/_assets/icon-generate-report-dark-grey.png"); }
.btn-my-alerts:before { width: 21px; height: 22px; background-image: url("/_assets/icon-my-alerts-yellow-green.png"); }

.btn-generate-report:hover { background-color: transparent; }
.btn-my-alerts:hover { background-color: transparent; color: #333333; }
.btn-my-alerts:hover:before { background-image: url("/_assets/icon-my-alerts-dark-green.png"); }


section.tool-bar { position: fixed !important; bottom: 100px; right: 0; background-color: transparent !important; z-index: 1000; display: flex; flex-direction: column; }

section.tool-bar .btn-ask-question { padding: 14px; width: 44px; height: 44px; border-top-left-radius: 22px; border-bottom-left-radius: 22px; background-image: url("/esg/litigation-guide/_assets/icon-ask-question.png"); background-size: 26px; background-position: center; background-repeat: no-repeat; background-color: #C3D544; cursor: pointer; box-shadow: 0 0 0 1px #dedede; }
section.tool-bar .btn-my-alerts { margin-top: 10px; display: block; padding: 14px; width: 44px; height: 44px; border-top-left-radius: 22px; border-bottom-left-radius: 22px; background-image: url("/_assets/icon-my-alerts-yellow-green.png"); background-size: 22px; background-position: center; background-repeat: no-repeat; background-color: var(--purple); flex-basis: auto !important; box-shadow: 0 0 0 1px #dedede; cursor: pointer; }


section.know-hows { padding: 10px 0 50px 0; }


h2.section-title { font-size: 36px; margin-bottom: 0.75em; }




.title-and-filter { margin-bottom: 30px; display: flex; flex-direction: row; align-items: center; }
.title-and-filter h2.section-title { flex-shrink: 0; margin: 0; }

.filter { flex-basis: 100%; display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: end;  }
.filter .filter-field { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.filter .filter-field > label { white-space: nowrap; }

.filter .filter-sort-by { width: 165px; }

.filter .filter-content-type,
.filter .filter-jurisdiction,
.filter .filter-language { width: 200px; }


.knowhow-panel { display: inline-block; background-color: transparent; padding: 0; }
.knowhow-panel .inner { color: inherit; padding: 0; background-color: #ffffff; border-top: 10px solid #f0f0f0; transition: all 0.2s; }
.knowhow-panel .tag { display: flex; flex-direction: row; padding: 0 0 15px 0; align-items: center; justify-content: space-between; font-size: 12px; gap: 20px; }
.knowhow-panel .tag .type { display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1.2em; }
.knowhow-panel .tag .type img.panel-type { width: 21px; }
.knowhow-panel .inner > button { background-color: transparent; text-align: left; padding: 10px 20px 20px 20px; width: 100%; }
.knowhow-panel  .date { font-size: 13px; color: var(--text); white-space: nowrap; margin-bottom: 0.75em; }
.knowhow-panel .title { margin-top: 1px; color: #333333; font-size: 20px; line-height: 1.2em; word-break: break-word;}
.knowhow-panel .image { position: relative; width: 100%; height: 120px; margin-top: 20px; background-size: cover; background-position: center; }
.knowhow-panel .inner .image .video-button { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.95; }

.knowhow-panel .inner:hover { background-color: var(--light-grey)!important; }

.knowhow-panel.slick-slide { padding: 0 5px; }

.knowhow-panel.slick-slide .inner,
.search-results-list .knowhow-panel .inner { background-color: var(--very-light-grey); }

.knowhow-panel .search-context { padding-top: 20px; font-size: 14px; line-height: 1.3em; color: #333333; }


.knowhow-panel .tag.small { font-size: 11px; }

.knowhow-panel .jurisdictions { display: flex; flex-direction: row; gap: 5px; flex-wrap: nowrap; }



div.load-more { margin-top: 30px; text-align: center; }

.btn-load-more { border-color: var(--purple); background-color: var(--purple); color: #ffffff; font-size: 16px; }
.btn-load-more:after { content: ""; width: 20px; height: 20px; background-image: url("/_assets/icon-plus-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }

.btn-load-more:hover { background-color: transparent; color: var(--text); }
.btn-load-more:hover:after { background-image: url("/_assets/icon-plus-dark-green.png"); }


.knowhow-popup .popup-form { border-top: 10px solid #c0c0c0; }
.knowhow-popup .tag { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; justify-content: space-between; }
.knowhow-popup .tag .type { display: flex; gap: 10px; align-items: center; flex-basis: 100%; }
.knowhow-popup .tag .know-how-type-icon { height: 20px; }
.knowhow-popup .tag label { font-size: 14px; }
.knowhow-popup .date { font-size: 14px; color: var(--text); white-space: nowrap; margin-bottom: 0.75em;   }

.knowhow-popup .title { font-size: 25px; color: var(--text); margin: 0; }

.knowhow-popup .content .intro { margin: 0; }

.knowhow-popup .video-container, .knowhow-popup .image { margin-top: 20px; }
.knowhow-popup .btn-read-more { border-color: var(--green); background-color: var(--green); color: #ffffff; }
.knowhow-popup a:hover { background-color: transparent; color: #000000; }
.knowhow-popup .button-container { margin-top: 20px; display: flex; flex-direction: row; gap: 20px;  }

.knowhow-popup .button-container a { font-size: 16px; }

.knowhow-popup .close-knowhow-popup { position: absolute; display: block; width: 34px; height: 34px; background-color: #6FA739; border-radius: 100%; top: -27px; right: -17px; z-index: 100; background-image: url("/_assets/icon-close-white.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; }

.knowhow-popup .tag .jurisdictions { display: flex; flex-direction: row; gap: 5px; }

.btn-asset { font-size: 16px; color: #000000; }
.btn-asset:hover { background-color: transparent; color: #000000; }


/*** Additional resources ***/

section.additional-resources .additional-resource-panel-wrapper { width: 340px; }
section.additional-resources .additional-resource-panel { height: 340px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; }
section.additional-resources .additional-resource-panel .background { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; transition: all 0.2s; z-index: 0; }

section.additional-resources .carousel { border: 0px solid red; position: relative; overflow: hidden; }

section.additional-resources .slick-arrow { border: 1px solid #c3d544; background-color: transparent; background-image: url("/_assets/icon-line-arrow-dark-green.png"); }
section.additional-resources .carousel-controls .carousel-buttons { padding: 0; }
section.additional-resources .carousel-buttons .slick-arrow { background-size: 17px auto; background-position: center; }

section.additional-resources .additional-resource-panel .inner { padding: 20px; position: relative; }
section.additional-resources .additional-resource-panel label.title { color: #ffffff; font-size: 30px; opacity: 1; transition: opacity 0s; }



.carousel-controls { margin-top: 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
section.additional-resources .carousel-controls .carousel-buttons { padding: 0; }

.carousel-controls .carousel-buttons { display: flex; flex-direction: row; align-items: center; gap: 20px; }


.slick-arrow,
.key-contacts-v3 .carousel-controls .slick-arrow { border: 1px solid #C3D544; width: 36px; height: 36px; font-size: 0; background-color: transparent; background-image: url("/_assets/icon-line-arrow-dark-green.png"); background-size: 17px auto; background-position: center; background-repeat: no-repeat; }

.slick-arrow.slick-prev { transform: rotate(180deg); }

/*.key-contacts-v3 .carousel-controls { justify-content: end; }*/

section.article { }

.article-image { width: 100%; height: 140px; border-top: 10px solid #cccccc; margin-bottom: 40px; }

.article-content-container { display: flex; flex-direction: row; gap: 80px; }
.article-content-container .article-content { flex-basis: 100%; }

.article-content-container .article-information { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }

.quote-container { background-color: var(--green); color: #ffffff; padding: 30px 30px 20px 30px; }

p.quote { color: #ffffff; font-size: 20px; line-height: 1.2em; }
p.quoter { color: #ffffff; font-size: 16px; font-style: italic; line-height: 1.2em; margin: 0; }
.quote-mark { height: 40px; margin-bottom: 30px; }

.article-content .tag { font-size: 16px; display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.article-content .tag .type-and-date { display: flex; flex-direction: row; gap: 16px; }

.article-content .tag .jurisdictions { display: flex; flex-direction: row; gap: 5px; align-items: center; }


img.jurisdiction-icon { height: 28px; border-radius: 100%; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5); }


.article-content .tag .type + .date:before { content: "|"; margin-right: 16px; }

.article-title { font-size: 38px; color: var(--dark-green); margin-bottom: 0.75em; line-height: 1.1em; }

.article-content h3 { color: var(--green); }

.contacts-list { display: flex; flex-direction: column; gap: 10px; }

.contacts-list .contact { transition: all 0.2s; padding: 0; }
.contacts-list .contact a { text-decoration: none; color: #3C4748; font-size: 13px; display: flex; flex-direction: row; gap: 10px; align-items: end; transition: all 0.2s; }
.contacts-list .contact .image { width: 85px; height: 95px; object-fit: cover; flex-shrink: 0; }

.contacts-list .contact p { color: inherit; margin-bottom: 0.1em; line-height: 1.2em; }
.contacts-list .contact p.name { font-size: 15px; margin-bottom: 0.5em; }

.contacts-list .contact:hover { background-color: var(--light-grey); box-shadow: 0 0 0px 5px var(--light-grey); }

.contacts-list + .contacts-options { margin-top: 30px; display: flex; flex-direction: row; gap: 10px; }

.btn-email { background-color: var(--pale-green); border-color: var(--pale-green); color: var(--dark-green);  }

.btn-standard.btn-email:before { background-image: url("/_assets/icon-envelope-green.png"); }

section.related-resources { margin-top: 50px; }


.search-results-list .search-highlight { color: var(--green); font-weight: bold; }

div.search-results h3 { color: var(--text); margin-bottom: 1em; }

.no-search-results p { color: #000000; font-size: 16px; margin-bottom: 0; }

div.key-contacts-v3 { margin-top: 40px; }
div.key-contacts-v3 .header h2 { color: initial; font-size: 36px; }

div.selection-area { background-color: var(--pale-green); padding: 25px; margin-top: 20px; }

/*** Generate Report Page ***/

section.gr-button .btn-generate-report { background-color: var(--light-green); border: 1px solid var(--light-green); color: var(--text); }

@media (max-width: 1170px) {
   /*
   .title-and-filter { flex-direction: column; align-items: start; gap: 20px; }
   .filter { align-self: end; }
   */
}

/*@media (max-width: 970px) {
   .filter { display: grid; grid-template-columns: ; gap: 10px; grid-template-areas: "sort-by sort-by sort-by" "filter-1 filter-2 filter-3"; align-self: start;  }

   .filter .filter-field > label { width: 56px; }
   .filter .filter-field.sort-by { grid-area: sort-by; }
   .filter .filter-sort-by { width: 200px; }
   .filter .filter-field.content-type { grid-area: filter-1; }
   .filter .filter-field.jurisdiction { grid-area: filter-2; }
   .filter .filter-field.language { grid-area: filter-3; }

}*/

@media (max-width: 840px) {
   .title-and-filter { flex-direction: column; align-items: start; gap: 20px; }
   .filter { align-self: end; }

   .filter { display: grid; grid-template-columns:; gap: 10px; grid-template-areas: "sort-by filter-1"; align-self: start; }

   .filter .filter-field > label { width: 56px; }
   .filter .filter-field.sort-by { grid-area: sort-by; }
   .filter .filter-sort-by { width: 200px; }
   .filter .filter-field.content-type { grid-area: filter-1; }
   .filter .filter-field.jurisdiction { grid-area: filter-2; }
   .filter .filter-field.language { grid-area: filter-3; }
}

@media (max-width: 840px) {
   .article-content-container { flex-direction: column; gap: 40px; }

   .article-content-container .article-information { width: 100%; }

   .article-content-container .contacts-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (max-width: 740px) {
   section.search-bar .search-bar-container { display: grid; grid-template-areas: "social social" "search actions"; grid-row-gap: 20px; grid-template-columns: 2fr 1fr; }
   section.search-bar .search-box { grid-area: search; }
   section.search-bar .buttons { grid-area: actions; }
   section.search-bar .share-icons { grid-area: social; justify-self: end; }


   .article-content-container .contacts-list { grid-template-columns: repeat(2, 1fr); }
}

/*@media (max-width: 720px) {
   .filter { grid-template-areas: "sort-by sort-by" "filter-1 filter-2" "filter-3 filter-3"; }

   .filter .filter-field.language { padding-left: 66px; }
}*/

@media (max-width: 580px) {

}

@media (max-width: 540px) {
   section.search-bar .search-bar-container { grid-template-areas: "social" "search" "actions"; grid-template-columns: 1fr; }

   .filter { grid-template-areas: "sort-by" "filter-1"; }
}

@media (max-width: 500px) {
   .article-content-container .contacts-list { grid-template-columns: 1fr; }

   .filter { grid-template-areas: "sort-by" "filter-1" "filter-2" "filter-3"; }
   .filter .filter-field.jurisdiction { padding-left: 66px; }
}

@media (max-width: 340px) {
   section.search-bar .buttons { flex-direction: column; align-items: start; }
}