﻿/*
    JM 24th June 2024 
    These are overrides for the new HIgan Lovells CI 2024.

    PLEASE ENSURE you add a c2024 class selector to all styles. Then add this to outermost element of the page you want / need to target.
    Styles should NOT cascade down into tools, however the header and footer are ok to inherit the new styles.
    

*/

/* iPhones seem to have a default colour for buttons and links as blue: #3C7DFB. */
/* So this is to default these elements to black. */
/*button,
a { color: #000000; }*/

body.the-home-page .hide-on-home {
   display: none !important;
}

.c2024 h1 {
   font-family: Roobert;
   font-weight: 600;
}

.c2019 .page-banner .content .page-title h3.subtitle {
   font-family: Roobert;
   font-weight: 200;
}

.c2019 .page-banner .content .page-title h3.subtitle p {margin-top: 0px; }


.c2024.home-page .page-banner .banner .left { padding: 0; }
.c2024.home-page .page-banner .banner.full-height { display: flex; flex-direction: row; gap: 60px; align-items: center; justify-content: space-between; padding: 20px 40px;  }

.c2024.home-page .page-banner .banner .right { display: flex; flex-direction: column; gap: 10px; }

.c2024.home-page .page-banner .banner.full-height

.c2024.home-page .page-banner .right { padding: 0; }
.c2024.home-page .page-banner .right > :last-child { margin-bottom: 0; }

.c2024.home-page .page-banner.banner-2024 h2 { color: var(--hl-dark-green); font-family: Roobert; font-weight: 600; font-size: 50px; }

.c2024.home-page .page-banner .content .page-title h3.subtitle p { color: var(--hl-dark-green); font-family: Roobert; font-size: 19px; font-weight: 200; line-height: 1.2em; }
.c2024.home-page .page-banner .content .page-title h3.subtitle p:last-child { margin-bottom: 0; }

.c2019 nav.main-nav ul li a,
.c2024 nav.main-nav ul li a { font-family: Roobert; color: #243508; }

.c2019 nav.main-nav ul li,
.c2024 nav.main-nav ul li { border-left: 2px solid #BFF355; }

.c2019 nav.main-nav ul li.engage-premium a,
.c2024 nav.main-nav ul li.engage-premium a { font-weight: bold; color: #243508; font-family: Roobert; }

.c2024 .font-l { font-family: Roobert !important; font-weight: 200 !important;}
.c2024 .font-r { font-family: Roobert !important; font-weight: 400 !important;}
.c2024 .font-m { font-family: Roobert !important; font-weight: 500 !important;}

.c2024 .login-form .footer p,
.c2024 .login-form .footer p a,
.c2024 .reset-password a { font-family: Roobert !important; font-weight: 400 !important; color: var(--hl-dark-green) !important; font-size: 16px !important; text-align: left;}

.c2024 .login-form .footer p a,
.c2024 .reset-password a {text-decoration: underline!important;}

.c2024 .breadcrumbs .breadcrumbs-container .breadcrumb,
.c2024 .breadcrumbs .breadcrumbs-container .current-page-breadcrumb { font-family: Roobert, sans-serif; }
.c2024 .breadcrumbs .breadcrumbs-container .current-page-breadcrumb:after,
.c2024 div.breadcrumbs a.breadcrumb:not(.not-border-highlight):hover { border-color: var(--hl-dark-green); }

.c2024 .popup-modal .popup-form .form-field label {
	font-family: Roobert, sans-serif;
	color: var(--hl-dark-green);
}

.c2024 .popup-modal.ask-question-popup .buttons input[type=button] {
	background-color: var(--hl-light-green);
	border-color: var(--hl-light-green);
	color: var(--hl-dark-green);
	font-family: Roobert, sans-serif;
}

.c2024 .popup-modal.ask-question-popup input[type=text],
.c2024 .popup-modal.ask-question-popup textarea {
	background-color: var(--hl-light-taupe);
	border-color: var(--hl-light-taupe) !important;
	font-family: Roobert, sans-serif;
	color: var(--hl-dark-green);
}


.popup-contact-form h2 { font-family: Roobert !important; font-weight: 600 !important; color: var(--hl-dark-green) !important; font-size: 33px !important; text-align: left; }

.popup-contact-form p {font-family: Roobert !important; font-weight: 400 !important; color: var(--hl-dark-green) !important; font-size: 18px !important; text-align: left; margin: 20px 0px !important;}

.tagged-link { display: grid; grid-template-columns: 65px 1fr 50px; align-items: center; padding: 0; background-color: #ffffff; color: var(--hl-dark-green); font-size: 21px; font-weight: 400; text-decoration: none; font-family: Roobert; transition: all 0.2s; }
.tagged-link .tag { height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--hl-dark-green); font-size: 18px; color: var(--hl-light-green); font-weight: 600; padding: 18px 12px; }
.tagged-link .title { padding: 12px; transition: all 0.2s; line-height: 1.2; }
.tagged-link:after { content: ""; display: block; width: 11px; height: 15px; background-color: var(--hl-light-green); clip-path: polygon(0 0, 100% 50%, 0 100%); justify-self: center; transition: all 0.2s; }

.tagged-link:hover .title { color: var(--hl-light-green); }
.tagged-link:hover { background-color: var(--hl-dark-green); }


.btn-2024 {
   font-family: Roobert, sans-serif;
   font-size: var(--font-16);
   font-weight: 400;
   display: inline-flex;
   flex-direction: row;
   gap: 20px;
   align-items: center;
   padding: 0.75em 1em;
   border: 1px solid #eeeeee;
   background-color: #eeeeee;
   color: #4d5357;
   justify-content: space-between;
   line-height: 1.2em;
   transition: all 0.2s;
   text-decoration: none;
   cursor: pointer;
}

.btn-2024:after { transition: all 0.2s;}

.btn-2024.wide { min-width: 150px; }
.btn-2024.wide-170 { min-width: 170px; }

.btn-2024.full-width { width: 100%; display: flex; flex-direction: row; gap: 10px; justify-content: space-between; }

.btn-2024.light-green {
   border-color: var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: var(--hl-dark-green);
}

.btn-2024.light-green:hover,
.btn-2024.taupe:hover {
   background-color: #ffffff;
}

.btn-2024.light-taupe {
   background-color: var(--hl-light-taupe);
   color: var(--hl-dark-green);
}

.btn-2024.light-taupe:hover {
   background-color: var(--hl-taupe);
}

.btn-2024.arrow:after {
   content: "";
   width: 10px;
   height: 16px;
   background-color: #000000;
   clip-path: polygon(0 0, 100% 50%, 0 100%);
}


.btn-2024.arrow.light-green:after {
   background-color: var(--hl-dark-green);
}

.btn-2024.white {
   border-color: #ffffff;
   background-color: #ffffff;
   color: var(--hl-dark-green);
}

.btn-2024.white:hover { 
   background-color: var(--hl-dark-green);
   color: #ffffff;
}

.btn-2024.thin-arrow:after {
	content: "";
	width: 10px;
	height: 16px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
   flex-shrink: 0;
}

.btn-2024.thin-arrow:after { 
	background-image: url("/_assets/btn-arrow-hl-dark-green.png");
}

btn-2024.thin-arrow.light-green:after {
	background-image: url("/_assets/btn-arrow-hl-dark-green.png");
}

.btn-2024.long-arrow:after {
	content: "";
	height: 16px;
	width: 40px;
	background-image: url("/_assets/icon-follow-arrow-hl-dark-green.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.btn-2024.long-arrow-back:before {
   content: "";
   height: 16px;
   width: 40px;
   background-image: url("/_assets/icon-follow-arrow-hl-dark-green.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   transform: rotate(180deg);
   transition: transform 0.2s;
}

.btn-2024.long-arrow:hover:after { 
   transform: translateX(5px);
}

.btn-2024.long-arrow-back:hover:before {
   transform: rotate(180deg) translateX(5px);
}

.btn-2024.download:after {
   content: "";
   width: 20px;
   height: 20px;
   background-image: url("/_assets/icon-download-hl-dark-green.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.btn-2024.dark-green.download:after {
   background-image: url("/_assets/icon-download-hl-light-green.png");
}

.btn-2024.dark-green.download:hover:after {
   background-image: url("/_assets/icon-download-hl-dark-green.png");
}


.btn-2024.dark-green {
   border-color: var(--hl-dark-green);
   background-color: var(--hl-dark-green);
   color: #ffffff;
}
.btn-2024.dark-green:hover { background-color: #ffffff; color: var(--hl-dark-green); }

.btn-2024.arrow.dark-green:after { background-color: var(--hl-light-green); }
.btn-2024.dark-green.arrow:hover:after { background-color: var(--hl-dark-green); }

.btn-2024.dark-green.long-arrow:after { background-image: url("/_assets/icon-follow-arrow-hl-light-green.png"); }
.btn-2024.dark-green.long-arrow:hover:after { background-image: url("/_assets/icon-follow-arrow-hl-dark-green.png"); }


.btn-2024.taupe { border-color: var(--hl-taupe); background-color: var(--hl-taupe); color: var(--hl-dark-green); }
.btn-2024.taupe:hover { background-color: var(--light-tapue); }

.btn-2024.filled:hover { background-color: #ffffff; }

.btn-2024.light-green-text { color: var(--hl-light-green); }

.btn-2024.dark-green-border {
   border: 1px solid var(--hl-dark-green);
}

.btn-2024.light-green-border {
   border: 1px solid var(--hl-light-green);
}

.dark-green-text { color: var(--hl-dark-green)!important; }

.c2024 .register-container p { font-family: Roobert; color: var(--hl-dark-green); font-weight: 400; }

.c2024 footer nav.footer-nav ul li { border-color: var(--hl-light-green); }

.btn-2024.envelope-left:before { content: ""; width: 18px; height: 18px; background-image: url("/_assets/icon-email-hl-light-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }

.btn-2024.envelope-left:hover:before { background-image: url("/_assets/icon-email-hl-dark-green.png"); }

.btn-2024.line-arrow,
.btn-2024.angled-line-arrow {
   gap: 10px;
}

.btn-2024.line-arrow:not(.icon-before):after,
.btn-2024.angled-line-arrow:not(.icon-before):after,
.btn-2024.line-arrow.icon-before:before {
   content: "";
   width: 16px;
   height: 16px;
   background: url("/_assets/icon-line-arrow-hl-dark-green.png") no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0;
}

.btn-2024.line-arrow.icon-before:before { 
   transform: rotate(180deg);
}

.btn-2024.line-arrow.dark-green:after,
.btn-2024.angled-line-arrow.dark-green:after {
   background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

.btn-2024.line-arrow.dark-green:hover:after,
.btn-2024.angled-line-arrow.dark-green:hover:after {
   background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}


.btn-2024.angled-line-arrow:after {
   transform: rotate(-45deg);
}

.btn-2024.btn-generate-report {
   border-color: var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: var(--hl-dark-green);
   gap: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   line-height: 1;
}

.btn-2024.btn-generate-report:before { 
content: "";
display: block;
width: 22px;
height: 22px;
background: url("/_assets/icon-generate-report-hl-dark-green.png") no-repeat;
background-size: contain;
background-position: center;
}

.btn-2024.btn-generate-report:hover {
   background-color: #ffffff;
}

.btn-2024.btn-subscribe {
   padding-top: 8px;
   padding-bottom: 7px;
}

.btn-2024.btn-subscribe:before {
   content: "";
   display: block;
   width: 20px;
   height: 28px;
   background: url("/_assets/icon-my-alerts-filled-hl-dark-green.png") no-repeat;
   background-size: contain;
   background-position: center;
}

.btn-2024.btn-subscribe.dark-green:before {
   background-image: url("/_assets/icon-my-alerts-filled-hl-light-green.png");
}

.btn-2024.btn-subscribe.dark-green:hover:before {
   background-image: url("/_assets/icon-my-alerts-filled-hl-dark-green.png");
}


/*** ***/
.c2024 .input-form .form-row .form-cell label {
   font-family: Roobert;
   font-size: 16px;
   color: var(--hl-dark-green);
   font-weight: 200;
   margin-bottom: 12px;
}

.c2025 .popup-modal .input-form { 
   display: flex; flex-direction: column;
   gap: 15px;
}

.c2025 .popup-modal .input-form .form-row { 
   margin: 0;
}

.c2025 .popup-modal .input-form .form-row .form-cell {
   padding: 0;
}

.c2025 .popup-modal .input-form .form-row .form-cell label {
   margin-bottom: 5px;
}

.c2025 .popup-modal .input-form .form-row .form-cell input {
   border-color: var(--hl-dark-green);
}

.c2025 .popup-modal .popup-footer p { 
   font-family: Roobert, sans-serif;
   font-size: 14px;
   color: var(--hl-dark-green);
}

.c2025 .popup-modal .popup-footer p:last-child { 
   margin-bottom: 0;
}

/*.c2024 .input-form .form-row .form-cell input[type=text],
.c2024 .input-form .form-row .form-cell input[type=password],
.c2024 .input-form .form-row .form-cell textarea {
	font-family: Roobert;
	border-color: var(--input-background-colour);
	background-color: var(--input-background-colour);
	color: var(--input-text-colour);
}*/
.checkbox4 {
   display: inline-block;
   margin: 0;
   font-size: 0;
   background-color: transparent;
   vertical-align: initial;
   width: initial;
   height: initial;
}

.checkbox4 input[type=checkbox] { 
   position: absolute;
   visibility: hidden;
   opacity: 0;
}


.checkbox4 label {
   font-family: Roobert, sans-serif;
   font-weight: 400;
   font-size: var(--font-16);
   color: var(--hl-dark-green);
   display: inline-flex;
   flex-direction: row;
   gap: 10px;
   cursor: pointer;
}

.checkbox4 label span.check-mark {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-color: var(--hl-taupe);
   background-size: 13px auto;
   background-position: center;
   background-repeat: no-repeat;
}

.checkbox4 input[type=checkbox]:checked + label span.check-mark {
   background-image: url("/_assets/icon-tick-hl-dark-green.png");
}


.c2024 .popup-modal .form-container .close-form {
   right: 0px;
   top: 0px;
   background-color: var(--hl-light-green);
   border-radius: 0;
   background-image: url("/_assets/icon-close-dark.png");
}

.c2024 .btn-border.hl-green { border-color: var(--hl-light-green); background-color: var(--hl-light-green); font-family: Roobert; }
.popup-modal .form-container .close-form { right: 0px; top: 0px; background-color: var(--hl-light-green); border-radius: 0; background-image: url("/_assets/icon-close-dark.png"); }

.c2024 label.checkbox3:not(.checkbox-right):before { background-color: var(--input-background-colour); }

.c2024 .input-form.input-form-inverted .form-cell input[type=text],
.c2024 .input-form.input-form-inverted .form-cell input[type=password] { background-color: #ffffff; }

.c2024 .close-page.top-right { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: var(--hl-light-green); background-size: 25px; }

.c2024 div.form-errors ul { font-family: Roobert, sans-serif; }
.c2024 div.form-errors ul li p { color: inherit; font: inherit; }
.c2024 div.form-errors ul li:last-child { margin-bottom: 0; }
.c2024 div.form-errors ul li > :last-child { margin-bottom: 0; }

/*.c2024 .register-container .col-1 {padding: 0px; }*/
.c2024 .register-container .register-complete { margin-top: 20px; }
.c2024 .register-complete .panel {padding: 30px; }
.c2024 .main-close:before {background-image: url(/_assets/icon-close-dark.png); width: 25px; height: 25px; left: 44%; top: 44%; }

.alert-holder .c2024 .alert-text { font-family: Roobert; font-weight: 400; font-size: 17px; margin-bottom: 20px; }
.alert-holder .c2024 .alert-dismiss { font-family: Roobert; font-weight: 400; font-size: 16px; background-color: var(--hl-light-green); color: var(--hl-dark-green); border-color: var(--hl-light-green); }
.alert-holder .c2024 .alert-dismiss:hover { background-color: var(--hl-dark-green); color: #ffffff; }



.popup-modal.name-change-popup { }
.popup-modal.name-change-popup .form-container .content { margin-top: 40px; }
.popup-modal.name-change-popup .form-container .content p { font-size: 24px; line-height: 1.2; }
.popup-modal.name-change-popup .form-container .content p.title { font-weight: bold; margin-bottom: 1em; }

.height-check {position: absolute!important; visibility: hidden!important; opacity: 0!important; display: block!important; height: auto!important; }

/*** ***/

ul.share-icons.style-2024 li .share-icon { background-color: var(--hl-light-green); border-radius: 0; }
ul.share-icons.style-2024 li .share-icon:hover { background-color: var(--hl-dark-green); }

ul.share-icons.style-2024 li .share-icon.twitter { background-image: url("/_assets2024/social-sharing-icons/twitter-64-hl-dark-green.png"); }
/*ul.share-icons li .share-icon.facebook { background-image: url("/_assets2024/social-sharing-icons/facebook-64.png"); }*/
ul.share-icons.style-2024 li .share-icon.youtube { background-image: url("/_assets2024/social-sharing-icons/youtube-64-hl-dark-green.png"); }
ul.share-icons.style-2024 li .share-icon.linkedin { background-image: url("/_assets2024/social-sharing-icons/linkedin-64-hl-dark-green.png"); }
/*ul.share-icons li .share-icon.email { background-image: url("/_assets2019/social-sharing-icons/email-64.png"); }*/
/*ul.share-icons li .share-icon.print { background-image: url("/_assets2019/social-sharing-icons/print-64.png"); }*/
/*ul.share-icons li .share-icon.download { background-image: url("/_assets2019/social-sharing-icons/download-64.png"); }*/

ul.share-icons.style-2024 li .share-icon.twitter:hover { background-image: url("/_assets2024/social-sharing-icons/twitter-64-hl-light-green.png"); }
/*ul.share-icons li .share-icon.facebook:hover { background-image: url("/_assets2019/social-sharing-icons/facebook-selected-64.png"); }*/
ul.share-icons.style-2024 li .share-icon.youtube:hover { background-image: url("/_assets2024/social-sharing-icons/youtube-64-hl-light-green.png"); }
ul.share-icons.style-2024 li .share-icon.linkedin:hover { background-image: url("/_assets2024/social-sharing-icons/linkedin-64-hl-light-green.png"); }
/*ul.share-icons li .share-icon.email:hover { background-image: url("/_assets2019/social-sharing-icons/email-selected-64.png"); }*/
/*ul.share-icons li .share-icon.print:hover { background-image: url("/_assets2019/social-sharing-icons/print-selected-64.png"); }*/
/*ul.share-icons li .share-icon.download:hover { background-image: url("/_assets2019/social-sharing-icons/download-selected-64.png"); }*/



.hl-lists ul:not(.not-hl-list) {
   list-style: none;
   padding-left: 30px;
}

.hl-lists ul:not(.not-hl-list) > li {
   position: relative;
}

.hl-lists ul:not(.not-hl-list) > li:before {
   content: "";
   position: absolute;
   display: inline-block;
   font-family: inherit;
   font-size: inherit;
   width: 0.65em;
   height: 0.65em;
   top: 0.35em;
   left: -1.2em;
   background-color: var(--hl-light-green);
   flex-shrink: 0;
}

.standard-page-content ul li a,
.standard-page-content ol li a {
   color: inherit !important;
   border-color: var(--hl-dark-green);
}

.hl-lists .standard-page-content ul:not(.not-hl-list),
.standard-page-content .hl-lists ul:not(.not-hl-list),
.standard-page-content.hl-lists ul:not(.not-hl-list) {
   padding-left: 0;
}

/*** C2025 My Alert Popup Form ***/

.popup-modal.c2025 {
   font-family: Roobert, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: var(--hl-dark-green);
}


body.c2025 .my-alert-form .form-fields,
.popup-modal.c2025 .form-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
}

body.c2025 .popup-modal .my-alert-form .form-fields .form-field,
.popup-modal.c2025 .form-fields .form-field {
   margin-bottom: 0;
}

body.c2025 .popup-modal .my-alert-form .form-fields .form-field label {
   font-family: Roobert;
   font-size: 16px;
   color: var(--hl-dark-green);
}

body.c2025 .popup-modal .my-alert-form .form-fields .form-field input[type=text],
body.c2025 .popup-modal .my-alert-form .form-fields .form-field ul.radio-button-list,
.popup-modal.c2025 .form-fields .form-field input[type=text],
.popup-modal.c2025 .form-fields .form-field ul.radio-button-list {
   background-color: var(--hl-light-taupe);
   border: none;
   font-family: Roobert;
}

body.c2025 .popup-modal .my-alert-form .monthly-bytes-subscribe {
   border-top: 1px dotted var(--hl-dark-green);
   padding: 20px 0 0 0;
   margin: 20px 0 0 0;
}

body.c2025 .popup-modal .my-alert-form .monthly-bytes-subscribe > label {
   font-family: Roobert, sans-serif;
   font-size: 16px;
   color: var(--hl-dark-green);
   margin-bottom: 15px;
   display: block;
}

body.c2025 .popup-modal .my-alert-form .icon-and-title {
   display: flex;
   flex-direction: row;
   gap: 20px;
   align-items: center;
   margin-bottom: 20px;
}

body.c2025 .popup-modal .my-alert-form .icon-and-title h2 {
   font-family: Roobert;
   color: var(--hl-dark-green);
   font-weight: 500;
   font-size: 33px;
}

body.c2025 .popup-modal .my-alert-form .icon-and-title img {
   height: 40px;
   width: 32px;
}

body.c2025 .popup-modal .my-alert-form.popup-form .close-popup {
   top: 0;
   right: 0;
   border-radius: 0;
   background-color: var(--hl-light-green);
   background-image: url("/_assets/icon-close-dark.png");
}

.popup-modal.c2025 h2.title {
   font-family: inherit;
   font-size: 32px;
   font-weight: 500;
   color: inherit;
   margin-top: 0;
}

/*.switch-control-slider {
   display: flex !important;
}*/

@media (max-width: 450px) {
   .my-alert-form .form-fields {
      grid-template-columns: 1fr;
   }
}


/*** ***/

@media (max-width: 840px) {
   .c2019.home-page .page-banner .banner.full-height {
      flex-direction: column;
      gap: 20px;
   }

   .c2019.home-page .page-banner .banner .right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
   }

   .page-banner .tagged-link {
      font-size: 16px;
   }

   .page-banner .tagged-link .tag {
      padding: 8px 12px;
   }

   .page-banner .tagged-link .title {
      padding: 8px 12px;
   }
}

@media (max-width: 500px) {
   .c2019.home-page .page-banner .banner .right {
      grid-template-columns: 1fr;
   }
}