﻿
.font-r { font-family: Roobert, sans-serif !important; font-weight: 400; }
.font-m { font-family: Roobert, sans-serif !important; font-weight: 500; }

.hl-lists ul { margin-left: 0; }

section.hero-header { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 2; overflow: hidden; margin-top: 0; padding: 30px 0 0 0; min-height: 410px;  }
section.hero-header .wrapper { display: flex; height: 100%; align-items: start; position: relative; z-index: 2; }

section.hero-header.bg-image { height: auto; padding: 30px 0; }

section.hero-header > .image-background { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 80px); }

section.hero-header .video-container { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 80px); z-index: 0; }
section.hero-header .video-container video { width: 100vw; height: 100%; object-position: center; object-fit: cover; }

/* iOS fix? Maybe. */
section.hero-header .video-container video::-webkit-media-controls { display: none !important; }


.hero-text-box { display: block; text-decoration: none; padding: 45px 30px; width: 100%; max-width: 580px; margin: 0; }

.hero-text-box p { color: var(--hl-dark-green); font-size: 17px; font-family: Roobert, sans-serif; }
.hero-text-box p:last-child { margin-bottom: 0; }

.hero-text-box .title { color: var(--hl-dark-green); font-family: Tiempos, serif; font-size: 26px; font-weight: 400; margin: 0 0 0.75em 0; line-height: 1.1; }
.hero-text-box .title span { font-size: 57px; }


section.actions { margin: 20px 0 0 0; z-index: 10; }
section.actions .actions-container { display: flex; flex-direction: row; align-items: center; gap: 20px; }


section.actions .action-buttons { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: end; flex-shrink: 0;  }

section.actions .search-field { height: 47px; flex-basis: 100%; background-color: var(--hl-light-taupe); border-color: var(--hl-light-taupe); display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 0 20px 0 0;  }

section.actions .search-field input[type=text] { height: 47px;  font-family: Roobert, sans-serif; font-size: 16px;background-color: transparent; width: 100%; }


.btn-search { background-color: transparent; display: inline-block; width: 47px; height: 47px; flex-shrink: 0; background-image: url("/_assets/icon-search-dark.png"); background-size: 24px; background-repeat: no-repeat; background-position: center; cursor: pointer; }

.btn-my-alerts { flex-shrink: 0; gap: 12px; white-space: nowrap; }

.btn-my-alerts:before { content: ""; display: inline-block; width: 21px; height: 21px; background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url("/_assets/icon-my-alerts-filled-hl-light-green.png"); }

.btn-2024.btn-my-alerts:hover { border-color: var(--hl-light-green); background-color: var(--hl-light-green); color: var(--hl-dark-green); }
.btn-2024.btn-my-alerts:hover:before { background-image: url("/_assets/icon-my-alerts-filled-hl-dark-green.png"); }


section.actions .social { display: flex; flex-direction: row; gap: 0px; flex-shrink: 0; justify-content: space-between; }

section.actions .social-buttons { display: flex; flex-direction: row;  gap: 0; flex-shrink: 0; }

ul.share-icons li .share-icon,
section.actions button.share-icon { width: 47px; height: 47px; background-size: 30px; }

/*** ***/

section.services { margin-top: 30px; }

section.services .service-panel { padding: 30px 20px; text-decoration: none; position: relative; height: 240px; border: 0; }
section.services .service-panel p.title { font-family: Roobert, sans-serif; font-weight: bold; font-size: 22px; color: var(--hl-dark-green); line-height: 1.2; }

section.services .service-panel .indicator { position: absolute; bottom: 30px; right: 25px; width: 10px; height: 18px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transition: all 0.2s; }
section.services .service-panel:hover .indicator { transform: translateX(5px); }

/*** ***/

section.essentials { margin-top: 30px; }

section.essentials h2.section-title { display: none; }

section.essentials .essentials-container { position: relative; padding-top: 65.789%; background-image: url("/dora-insurance/_assets/essentials-background.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }

section.essentials .essential-panel { width: 314px; height: 176px; background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; display: flex; align-items: end; justify-content: center; }
section.essentials .essential-panel p { position: absolute; bottom: 20px; left: 0; width: 100%; min-height: 51.4px;  z-index: 2; font-family: Roobert, sans-serif; font-size: 22px; font-weight: bold; color: #ffffff; margin: 0; line-height: 1.2; padding: 0 20px; }
section.essentials .essential-panel:before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.25; transition: all 0.2s; }

section.essentials .essential-panel[data-index='0'] { top: 0; left: 50%; transform: translateX(-50%); }
section.essentials .essential-panel[data-index='1'] { top: 16.7%; right: 0; }
section.essentials .essential-panel[data-index='2'] { bottom: 0; left: 50%; transform: translateX(-50%); }
section.essentials .essential-panel[data-index='3'] { top:  60.5%; right: 0; }
section.essentials .essential-panel[data-index='4'] { top: 60.5%; left: 0; }
section.essentials .essential-panel[data-index='5'] { top: 16.7%; left: 0; }

section.essentials .essential-panel .play-button { position: absolute; z-index: 2; width: 20px; height: 41px; top: calc(50% - 30px); left: calc(50% - 10px); background-image: url("/_assets/icon-play-white-tall.png"); background-position: center; background-size: contain; background-repeat: no-repeat; transition: all 0.2s;  }

section.essentials .essential-panel:hover { box-shadow: 0 0 2px 5px rgba(var(--hl-light-green-rgb), 0.9); }
section.essentials .essential-panel:hover:before {opacity: 0.35; }
section.essentials .essential-panel:hover .play-button { background-image: url("/_assets/icon-play-hl-light-green-tall.png"); }

section.essentials .caption { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 200px; height: 200px; font-family: Roobert, sans-serif; font-size: 35px; font-weight: 300; color: var(--hl-dark-green); display: flex; align-items: center;justify-content: center; text-align: center; }

/*** ***/

section.whats-new { margin-top: 20px; padding: 30px 0; }
section.whats-new .carousel-controls { display: flex; flex-direction: row; justify-content: space-between; }

section.whats-new .slick-arrow,
.topic-container .related-articles .slick-arrow,
.requirements-container .slick-arrow { border-color: var(--hl-light-green) !important; }

section.whats-new .slick-arrow:hover { border-color: var(--hl-dark-green) !important; }

.section-content .elements-container { position: relative; margin: 30px 0px 0 0px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }




.carousel-buttons { display: flex; flex-direction: row; gap: 20px; }

/*** ***/

section.quotes { padding: 20px 0; background-image: url("/_uploads/HL-Gradient.png"); background-size: cover; background-position: center; background-repeat: no-repeat; }
section.quotes .carousel-container { padding: 0 100px; position: relative; }
section.quotes .slick-arrow { position: absolute; top: 50%; left: 0; margin-top: -20px; }
section.quotes .slick-arrow.slick-next { left: unset; right: 0; }

section.quotes .quote-mark { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; }
section.quotes .quote-mark span { font-family: Roobert, sans-serif; font-size: 76px; color: var(--hl-dark-green);  line-height: 0.7; }
section.quotes .quote-mark hr { width: 50%; max-width: 150px; border-color: var(--hl-dark-green); margin-top: 10px; margin-bottom: 0;  }

section.quotes .quote { font-family: Roobert, sans-serif; font-size: 21px; font-weight: 400;  color: var(--hl-dark-green); text-align: center; line-height: 1.3; }
section.quotes .source { font-family: Roobert, sans-serif; font-size: 16px; font-weight: 300; font-style: italic; color: var(--hl-dark-green); text-align: center; }
/*** ***/
.btn-see-all { gap: 10px; }
.btn-see-all:after { content: ""; display: inline-block; width: 18px; height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png"); transform: rotate(-45deg); }


section.topics { margin-top: 30px; }

.topics-container { font-size: 0; }

.topic-panel { display: inline-block; padding: 0; width: 20%; border: 5px solid transparent; position: relative; transition: all 0.2s; }
.topic-panel > button { width: 100%; display: inline-flex; font-family: Roobert, sans-serif; font-size: 28px; text-align: left; line-height: 1.1; background-color: var(--hl-dark-green); color: #ffffff; padding: 14px; display: flex; flex-direction: column; align-content: space-between; justify-content: space-between; gap: 10px; }

.topic-panel .number-and-state { width: 100%; font-family: Roobert, sans-serif; font-size: 60px; font-weight: 500;  color: var(--hl-light-green); display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-right: 10px;  }
.topic-panel .state { display: inline-block; width: 25px; height: 50px; background-image: url("/_assets/btn-arrow-hl-light-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(90deg) scaleX(1); transition: transform .2s; }

.topic-panel:after { content: ""; opacity: 0; transition: opacity 0.2s; }

.topic-panel.expanded .state { transform: rotate(90deg)  scaleX(-1);/* rotate(270deg);*/ }

.topics-container[data-count='4'] .topic-panel { width: 25%; }
.topics-container[data-count='3'] .topic-panel { width: 33%; }

.topic-panel.expanded { border-color: var(--hl-light-green); }
.topic-panel.expanded:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -28px; width: 56px; height: 22px; background-image: url("/dora/_assets/topic-panel-arrow.png"); background-position: top center; background-size: contain; background-repeat: no-repeat; opacity: 1; }

.topics-container .related-articles { margin-top: 50px; }

.topic-container { width: 100%; display: block; margin: 30px 0 0 0; overflow: hidden; }
.topic-container.initial { height: 1px; }

/*** ***/

.sections-container { margin-top: 30px; }

.section-container { border-top: 1px solid var(--hl-light-green); }

button.section-expander { background-color: #ffffff; color: var(--hl-dark-green); width: 100%; text-align: left; display: flex; flex-direction: row; justify-content: space-between; gap: 20px; align-items: center; font-family: Roobert, sans-serif; font-size: 20px; font-weight: 500; padding: 10px 20px 10px 20px; line-height: 1.2; border-bottom: 1px solid #ffffff; }
button.section-expander .state { width: 10px; height: 21px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(90deg); transition: all 0.2s; }
button.section-expander:hover { background-color: var(--hl-light-green); }

button.section-expander.expanded { background-color: var(--hl-light-green); }
button.section-expander.expanded .state { transform: rotate(90deg) scaleX(-1); }

.section-content { width: 100%; display: block; overflow: hidden; padding: 0; }
.section-content.initial { height: 1px; }

.section-content .section-copy { font-family: Roobert, sans-serif; font-size: 17px; font-weight: 400; color: var(--hl-dark-green); line-height: 1.3; }

.section-content div.download-button { margin-top: 30px; }
.btn-download-pdf:after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("/_assets/icon-download-2-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat;  }

.section-content div.padding { height: 60px; width: 100%; }

/*** ***/


/*section.back { margin: 10px 0; }*/
.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; padding-top: 10px; padding-bottom: 10px;  }
.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); }
.btn-back:hover { background-color: var(--hl-dark-taupe); }
.btn-back:after { display: none; }
/*section.intro { margin-top: 40px; color: var(--hl-dark-green); }

section.intro h2.page-title { color: var(--hl-dark-green); margin-bottom: 0.75em; font-size: 35px; font-family: Roobert, sans-serif; font-weight: bold; } */
h2.section-title,
.key-contacts-v3 .header h2 { margin-bottom: 0.75em; font-size: 35px; font-family: Roobert, sans-serif; font-weight: 300; }

h2.section-title { color: var(--hl-dark-green); }

.key-contacts-v3 .header h2 { color: #ffffff; margin: 0; }




.my-alert-form .icon-and-title { display: flex; flex-direction: row; align-items: center; gap: 20px; margin: 0 0 20px 0;  }
.my-alert-form .icon-and-title img { height: 42px; width: 34px; }
.my-alert-form .icon-and-title h2 { font-family: Roobert, sans-serif; }

.my-alert-form .form-row { display: flex; flex-direction: row; gap: 20px; }
.my-alert-form .form-row .form-field { flex-basis: 50%; }
.my-alert-form .form-row .form-field input { border-color: var(--hl-light-taupe)!important; background-color: var(--hl-light-taupe);  }


.popup-modal .popup-form.checklist-download-form { max-width: 400px; }

section.intro .page-intro { color: var(--text); line-height: 1.3em; font-size: 17px; font-family: Roobert, sans-serif; font-weight: 300; }
section.intro .page-intro .standard-page-content :last-child { margin-bottom: 0; }

section.search-results { margin-top: 0; }

.no-search-results { }
.no-search-results p { font-family: Roobert, sans-serif; font-size: 18px; color: var(--hl-dark-green); margin: 0; }


.search-context { color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 15px; font-weight: 300; margin: 20px 0; }
.search-context > * { color: inherit; }
.search-context > :last-child { margin-bottom: 0; }

.search-highlight { font-weight: 800; }

.article-panel .search-highlight { color: #000000; }

.search-results-header { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 40px; font-family: Roobert, sans-serif; font-weight: 500; color: var(--hl-dark-green); }
.search-results-header .results-count { flex-basis: 100%; }
.search-results-header .search-results-sort { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0;  }
.search-results-header .search-results-sort label { white-space: nowrap;}

.search-results-header .search-results-sort table { background-color: transparent; margin: 0;  }

.search-results-header td { display: inline-flex; align-items: center; border: 0 !important; vertical-align: middle!important; }
.search-results-header td label { font-family: Roobert, sans-serif !important; font-size: 16px !important; color: var(--hl-dark-green); display: flex;flex-direction: row; align-items: center; gap: 6px;   }

.search-results-header td input[type=radio] { display: none; }
.search-results-header td label:before { content: ""; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--hl-dark-green); border-radius: 50%; }

.search-results-header td input[type=radio]:checked + label:before { background-color: var(--hl-dark-green); }

.search-result { background-color: var(--hl-light-taupe); padding: 16px;  text-align: left; display: flex; align-items: center; margin-bottom: 20px; width: 100%; gap: 40px; text-decoration: none; }
.search-result .content { flex-basis: 100%; }
.search-result p { font-family: Roobert, sans-serif; font-size: 16px; font-weight: 300; color: var(--hl-dark-green); }
.search-result p.title { font-weight: bold; }
.search-result p:last-child { margin: 0; }



.search-result .indicator { width: 20px; position: relative; flex-shrink: 0;  } 
.search-result .indicator:after { content: ""; position: absolute; left: calc(50% - 5px); top: calc(50% - 10px); width: 10px; height: 20px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-repeat: no-repeat;  }

.search-result:hover { background-color: var(--hl-taupe); }
/*** ***/
section.article-list { margin-top: 0; }

section.article-list:focus-within { z-index: 12; }

div.article-list { margin-top: 30px; }

.article-list-title-and-filter { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.article-list-title-and-filter h2.section-title { margin-bottom: 0; flex-basis: 100%; }

.article-list-filter { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.article-list-filter .filter-item { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.article-list-filter .filter-item label { font-family: Roobert, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--hl-dark-green); }

.article-list-filter .filter-item.monthly-bytes { flex-direction: column; border: 12px solid var(--hl-light-green); background-color: var(--hl-light-green); }
.article-list-filter .filter-item.monthly-bytes .dk-selected { width: 170px; }



.article-panel { border-top: 0; font-family: Roobert, sans-serif; color: var(--hl-dark-green); background-color: transparent; font-weight: 400; line-height: 1.4em; }
.article-panel .inner { }
.article-panel .inner button { background-color: var(--hl-light-taupe); color: var(--hl-dark-green); width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.article-panel .tag { display: flex; flex-direction: row; align-items: center; font-family: Roobert, sans-serif; font-size: 12px; font-weight: 500; gap: 14px; color: var(--hl-dark-green); }
.article-panel .tag .icon { width: 45px; height: 45px; background-color: var(--hl-light-green); background-size: 28px auto; background-position: center; background-repeat: no-repeat; }
.article-panel .content { padding: 18px; text-align: left; width: 100%; }
.article-panel .content .date { font-family: Roobert, sans-serif; font-size: 12px; margin: 0 0 1em 0; }
.article-panel .content .title { font-family: Roobert, sans-serif; font-size: 18px; line-height: 1.3; }
.article-panel .content .image { margin-top: 20px; width: 100%; height: 120px; background-position: center; background-size: cover; background-repeat: no-repeat; }

.article-panel:hover { opacity: 1 !important; }
.article-panel .inner button:hover { background-color: var(--hl-taupe); }

.article-panel.taupe .inner button {  }
.article-panel.taupe .inner button:hover { background-color: var(--hl-dark-taupe); }

.article-panel .tag-and-jurisdictions { width: 100%; display: flex; flex-direction: row; gap: 10px; justify-content: space-between; padding: 0 10px 0 0; }
.article-panel .jurisdictions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 10px 0 0 0; }
.article-panel .jurisdictions img { height: 24px; }

img.flag { box-shadow: 0 0 2px 1px #000000; border-radius: 50%; }


.carousel .article-panel,
.carousel .webinar-panel { padding: 0 10px; }

.carousel .article-panel .content { display: flex; flex-direction: column; justify-content: start; }
.carousel .article-panel .main-content { display: flex; flex-direction: column; flex-basis: 100%; justify-content: space-between; }

div.load-more { margin-top: 40px; }

.btn-load-more { font-family: Roobert, sans-serif; font-size: 15px; font-weight: 500; background-color: var(--hl-light-green); border-color: var(--hl-light-green); color: var(--hl-dark-green); }
.btn-load-more:hover { background-color: var(--hl-dark-green); border-color: var(--hl-dark-green); color: #ffffff; }

section.additional-resources .carousel { margin: 0; }


.carousel .webinar-panel p.title { font-size: 18px; }


/* #BFF355 #82C8BE #B1A6FF*/
.dk-select,
.dk-select * { font-family: Roobert, sans-serif; color: #000000; }

.dk-select.white .dk-selected,
.dk-select-multi.white .dk-selected { border-color: #ffffff; background-color: #ffffff; }

.dk-select.white .dk-select-options .dk-option-highlight,
.dk-select-multi.white .dk-select-options .dk-option-highlight { color: #000000; }

.dk-selected { border-color: var(--hl-taupe); background-color: var(--hl-taupe); width: 180px; }
.dk-select-options { background-color: var(--hl-taupe); }

.dk-select.white .dk-select-options,
.dk-select-multi.white .dk-select-options { background-color: #ffffff; }

.dk-select-options-highlight .dk-option-selected,
.dk-option-selected { background-color: rgba(var(--hl-dark-green-rgb), 0.3); color: var(--hl-dark-green); }


.dk-select-options .dk-option-highlight { background-color: rgba(var(--hl-dark-green-rgb), 0.2); color: #ffffff; }


.dk-select-open-down:not(.dk-always-open-up) .dk-select-options { padding: 10px; }
.dk-option { padding: 0.4em 20px; }

.dk-checkboxes li.dk-option { padding-left: 35px; }
.dk-checkboxes li.dk-option:before { left: 5px; border-color: var(--hl-dark-green); }

section.whats-new .carousel,
.related-articles .carousel { margin: 0 -10px; }

.carousel-controls { display: flex; flex-direction: row; gap: 20px; margin-top: 20px; }
.slick-arrow { width: 40px; height: 40px; border-width: 1px; border-style: solid; background-color: transparent; border-color: var(--hl-dark-green) !important; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; background-repeat: no-repeat; background-size: 50%; background-position: center; font-size: 0; }
.slick-arrow.slick-prev { transform: rotate(180deg); }

.slick-arrow:hover { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-white.png") !important; }

ul.slick-dots { list-style: none; display: flex; flex-direction: row; gap: 8px; }
ul.slick-dots li { }
ul.slick-dots li button { font-size: 0; width: 13px; height: 13px; background-color: var(--hl-dark-green); opacity: 0.2; }
ul.slick-dots li.slick-active button { opacity: 1; }

section.carousel-wide-fade { overflow: hidden; }
section.carousel-wide-fade .slick-list { overflow: visible; }

xsection.carousel-wide-fade .wrapper { display: flex; flex-direction: row; max-width: 100%; }
section.carousel-wide-fade .carousel-container { position: relative; z-index: 1; width: 100%; max-width: 1200px; flex-shrink: 0; padding: 0 10px; }

.slick-slide:not(.slick-active)[data-opac="3"] { opacity: 0.5; }
.slick-slide:not(.slick-active)[data-opac="2"] { opacity: 0.25; }
.slick-slide:not(.slick-active)[data-opac="1"] { opacity: 0.125; }
.slick-slide:not(.slick-active)[data-opac="0"] { opacity: 0.1; }

.standard-page-content { font-family: Roobert, sans-serif; font-size: 16px; font-weight: 400; color: var(--hl-dark-green); }


.popup-modal .popup-form .wrapper { max-height: 85vh; }

.article-popup .popup-form { padding: 0; font-family: Roobert, sans-serif; font-weight: 400; font-size: 16px; color: var(--hl-dark-green); }

.close-article-popup,
.close-essential-popup { position: absolute; display: block; width: 34px; height: 34px; background-color: transparent; border-radius: 100%; top: 0; z-index: 100; background-image: url("/_assets/icon-close-dark.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; z-index: 10; background-color: var(--hl-light-green); border-radius: 0;   }

.close-article-popup { right: -30px; }
.close-essential-popup { right: 0; }

.article-popup .header .tag { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; }

.article-popup .header .tag .icon { width: 45px; height: 45px; background-color: var(--hl-light-green); background-size: 28px auto; background-position: center; background-repeat: no-repeat; }
.article-popup .date { font-size: 14px; margin-top: 20px; }
.article-popup .title { font-size: 27px; margin: 0; line-height: 1.1; }
.article-popup .content .intro { margin: 16px 0 0 0; }
.article-popup .content .intro > * { font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; }
.article-popup .button-container { margin-top: 20px; }
.article-popup .btn-read-more { background-color: var(--hl-light-green); border-color: var(--hl-light-green); color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 15px; font-weight: 500; }
.article-popup .btn-read-more:hover { background-color: transparent; }

.article-popup .video-container,
.article-popup .image { margin-top: 20px; }

.article-popup .tag-and-jurisdictions { padding-right: 40px; }

/*** ***/
.popup-modal.essential-popup .popup-form { background-color: transparent; }
.popup-modal.essential-popup .popup-form .wrapper { padding: 0; background-color: transparent; }

.essential-popup .video-container { position: relative; z-index: 1; }

.video-container .play-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/_assets/icon-play-hl-light-green-tall.png"); background-size: 40px 78px; background-position: center; background-repeat: no-repeat; background-color: transparent; z-index: 12; }
.video-container .play-button:hover { opacity: 0.8; }

.essential-popup iframe { width: 100%; height: 340px; }

/*** ***/

section.service { margin-top: 20px; }
section.service .section-header { display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-between; gap: 20px; }
section.service .section-header h2.section-title { margin: 0; }

section.service .service-content { border-top: 1px solid var(--hl-light-green); width: 100%; max-width: min(850px, 85vw); margin-top: 20px; font-family: tiempos, serif; font-weight: 400; font-size: 16px; line-height: 1.25; color: var(--hl-dark-green); }

section.service .service-content h1,
section.service .service-content h2,
section.service .service-content h3,
section.service .service-content h4,
section.service .service-content h5,
section.service .service-content h6 { font-family: Roobert, sans-serif; font-weight: bold; color: inherit; margin-bottom: 0.5em; margin-top: 1em;  }

/*** ***/

.side-toolbar { position: fixed !important; bottom: 100px; right: 0; background-color: transparent !important; z-index: 1000; display: flex; flex-direction: column; }

.side-toolbar .btn-ask-question { margin-top: 10px; padding: 14px; width: 44px; height: 44px; background-image: url("/_assets/icon-question-mark-hl-light-green.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; background-color: var(--hl-dark-green); cursor: pointer; box-shadow: 0 0 0 1px #dedede; }
.side-toolbar .btn-my-alerts { display: block; padding: 14px; width: 44px; height: 44px; background-image: url("/_assets/icon-my-alerts-filled-hl-dark-green.png"); background-size: 22px; background-position: center; background-repeat: no-repeat; background-color: var(--hl-light-green); flex-basis: auto !important; box-shadow: 0 0 0 1px #dedede; cursor: pointer; }

/*** ***/

div.key-contacts-v3 { background-color: var(--hl-dark-green); padding: 40px 0; margin-top: 40px; }

div.key-contacts-v3 .carousel-controls .slick-arrow { border-color: var(--hl-light-green) !important; background-color: transparent; background-image: url("/_assets/icon-line-arrow-hl-light-green.png") !important; background-size: 50%; }
div.key-contacts-v3 .carousel-controls .slick-arrow:hover { background-color: var(--hl-light-green); background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; }

div.key-contacts-v3 .btn-contact-us { display: flex; flex-direction: row; gap: 12px; font-family: Roobert, sans-serif !important; font-size: 16px; font-weight: 500; background-color: var(--hl-light-green); border-color: var(--hl-light-green); }
div.key-contacts-v3 .btn-contact-us:before { content: ""; width: 24px; height: 18px; background-image: url("/_assets/icon-hl-contact-us.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }
div.key-contacts-v3 .btn-contact-us:hover { background-color: #ffffff; }


.tag-and-jurisdictions { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; justify-content: space-between; }

.tag-and-jurisdictions .jurisdictions { display: flex; flex-direction: row; gap: 10px; }

.tag-and-jurisdictions .flag { height: 32px; }


section.additional-resources .slick-arrow { border-color: var(--hl-light-green) !important; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; }
section.additional-resources .slick-arrow:hover { background-color: var(--hl-light-green); }


section.related-materials { margin-top: 40px; }


.grid-sections-container { }
.grid-sections-container .grid-sections-list-container { background-position: center top; background-size: contain; background-repeat: no-repeat; min-height: calc(min(1200px, 100vw) * 0.53); }
.grid-sections-container .grid-section-content { display: none; }

.grid-sections-list { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 40px; column-gap: 20px; transition: all 0.2s; }
.grid-sections-list .grid-section-expander { padding: 10px; background-color: var(--hl-light-green); font-family: Roobert, sans-serif; font-size: 16px; font-weight: 500; display: flex; flex-direction: row; gap: 20px; justify-content: space-between;  }
.grid-sections-list .grid-section-expander .state { display: inline-block; width: 16px; height: 20px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(90deg) scaleX(1); transition: transform .2s; }

.grid-sections-list .grid-section-expander.expanded { background-color: var(--hl-dark-green); color: #ffffff; }
.grid-sections-list .grid-section-expander.expanded .state { background-image: url("/_assets/btn-arrow-hl-light-green.png"); transform: rotate(90deg) scaleX(-1); }

.grid-sections-list .grid-section-expander:hover { background-color: var(--hl-dark-green); color: #ffffff; }
.grid-sections-list .grid-section-expander:hover .state { background-image: url("/_assets/btn-arrow-hl-light-green.png"); }

.grid-sections-list.expanded { row-gap: 10px; }
.grid-sections-list.expanded .grid-section-expander { padding-top: 8px; padding-bottom: 8px; }

.grid-sections-content { margin-top: 20px; position: relative; }
.grid-section-content { background-color: var(--hl-light-taupe); padding: 25px; font-family: Roobert, sans-serif; font-size: 16px; color: var(--hl-dark-green); }

.grid-section-content p.title { font-weight: bold; margin-bottom: 1.25em; }

.grid-section-content .btn-close { position: absolute; top: 0; right: 0; width: 34px; height: 34px; background-color: var(--hl-dark-green); background-image: url("/_assets/icon-close-hl-light-green.png"); background-size: 16px 16px; background-position: center; background-repeat: no-repeat;  }

.back-button.mobile { display: none; }

div.back-to-top { text-align: right; }

@media (max-width: 1200px) {
   section.essentials .essential-panel { width: 26.166%; height: 22.8%; }
   section.essentials .essential-panel p { font-size: 1.8vw; padding-left: 10px; padding-right: 10px; min-height: 4.25vw; }
   section.essentials .essential-panel .play-button { height: 3.4166vw; width: 1.666vw; }

   section.essentials .caption { font-size: 2.916vw; width: 16.66vw; }
}

@media (max-width: 1200px) {
   .topic-navigation-grid button[class^="topic"] { font-size: max(calc(100vw / 54), 14px); min-height: 4em; }

   .topics-container[data-count='5'] .topic-panel,
   .topics-container[data-count='6'] .topic-panel,
   .topics-container[data-count='7'] .topic-panel,
   .topics-container[data-count='8'] .topic-panel { width: 25%; }
}

@media (max-width: 1110px) {
}

@media (max-width: 940px) {
   .content-type-navigation-items { grid-template-columns: 1fr 1fr; }

   .article-list-title-and-filter { flex-direction: column; align-items: start; }
   .article-list-title-and-filter h2.section-title { margin-bottom: 20px; }

   .topics-container[data-count='4'] .topic-panel,
   .topics-container[data-count='5'] .topic-panel,
   .topics-container[data-count='6'] .topic-panel,
   .topics-container[data-count='7'] .topic-panel,
   .topics-container[data-count='8'] .topic-panel { width: 33%; }
}

@media (max-width: 800px) {
   .grid-sections-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
   .article-list-title-and-filter h2.section-title { margin-bottom: 0.5em; }
}

@media (max-width: 750px) {
   .popup-modal.essential-popup .popup-form { margin: 0; width: 90vw; }
   .essential-popup iframe { width: 90vw !important; height: 51vw!important; }

}

@media (max-width: 740px) {
   section.essentials .essentials-container { padding: 0; background-image: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   section.essentials .essential-panel { position: relative; width: 100%; height: 120px; top: unset!important; left: unset!important; right: unset!important; bottom: unset!important; transform: unset!important; }
   section.essentials .essential-panel p { font-size: 2.15vw;}
   section.essentials .essential-panel .play-button { height: 25px; width: 15px;  }

   section.essentials .caption { display: none; }
   section.essentials h2.section-title { display: block; }


   .search-results-header { display: grid; grid-template-areas: "count back" "sort sort"; gap: 10px; grid-template-columns: 5fr 1fr; }
   .search-results-header .results-count { grid-area: count; }
   .search-results-header .back-button { grid-area: back; }
   .search-results-header .search-results-sort { grid-area: sort; }
   .search-results-header .search-results-sort table { background-color: transparent; }
}

@media (max-width: 700px) {
   .topics-container[data-count='3'] .topic-panel,
   .topics-container[data-count='4'] .topic-panel,
   .topics-container[data-count='5'] .topic-panel,
   .topics-container[data-count='6'] .topic-panel,
   .topics-container[data-count='7'] .topic-panel,
   .topics-container[data-count='8'] .topic-panel { width: 50%; }
}

@media (max-width: 660px) {
}

@media (max-width: 640px) {
   section.essentials .essentials-container { grid-template-columns: repeat(2, 1fr); }
   section.essentials .essential-panel p { font-size: 17px; }

   section.actions .actions-container { display: grid; grid-template-areas: "social social" "search alerts"; gap: 10px; grid-template-columns: 2fr 1fr;  }
   section.actions .actions-container .social { grid-area: social; justify-content: end; }
   section.actions .actions-container .search-field { grid-area: search; }
   section.actions .actions-container .action-buttons { grid-area: alerts; }
}


@media (max-width: 600px) {
}

@media (max-width: 560px ) {
   section.actions .search-and-social { flex-direction: column-reverse; align-items: start; gap: 10px; }

   section.actions .search-and-social .search-field { width: 100%; }
   section.actions .search-and-social .social { width: 100%; }

   section.actions .col-1 { display: flex; flex-direction: column-reverse; gap: 10px; }

   .back-button.desktop { display: none; }
   .back-button.mobile { display: inline-block; }

   .grid-sections-list { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }

   section.service .section-header { flex-direction: column-reverse; gap: 10px; }
   section.service h2.section-title { align-self: start; }
   section.service .btn-back { align-self: end; }
}

@media (max-width: 520px) {
   .article-list-filter { flex-direction: column; gap: 10px; width: 100%; }
   .article-list-filter .filter-item { width: 100%; }
   .article-list-filter .filter-item > label { width: 55px; flex-shrink: 0; text-align: right; }
   .article-list-filter .filter-item .dk-selected { width: 100%; }
}

@media (max-width: 480px) {
   section.essentials .essentials-container { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
   .grid-sections-list { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
   section.actions .wrapper .col-1 .action-buttons { flex-direction: column; align-items: start; gap: 10px; }
}