@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

:root {
    --moonstone: #47aec5ff;
    --blue-ncs: #3286b2ff;
    --lapis-lazuli: #155488ff;
    --myrtle-green: #38837aff;
    --mantis: #69bd4bff;
    --bright-white: #ffffffff;
    --icy-white: #f0f8ffff;
}

body {
    background-color: var(--bright-white);
    font-family: "Open Sans", sans-serif;
}

H1,
H2 {
    font-weight: 800;
}

H3,
H4,
H5,
H6 {
    font-weight: 700;
}

H1 {
    color: var(--bright-white);
}

H2 {
    color: var(--blue-ncs);
}

H3,
H4 {
    color: var(--myrtle-green);
    color: var(--mantis);
}

P {
    line-height: 2rem;
}

a {
    color: var(--moonstone);
    text-decoration: none;
}

a:hover {
    color: var(--mantis);
}

.bg-bright-white {
    background-color: var(--bright-white);
}

.bg-moonstone {
    background-color: var(--moonstone);
}

.bg-icy-white {
    background-color: #dee;
}

.text-lapis-lazuli {
    color: var(--lapis-lazuli);
}

/* HEADER ------------------------------------------------------ */
.header {
    background-color: var(--bright-white);
    z-index: 100;
}

.navbar-brand img {
    height: 70px;
}

header #block-sociallinks img {
    fill: var(--moonstone);
    width: 18px;
    height: auto;
    margin-left: 10px;
}
/* --------------------------------------------------------------*/

/* HERO   ------------------------------------------------------ */
.hero-parent {
    background: radial-gradient(
        var(--moonstone),
        var(--blue-ncs),
        var(--lapis-lazuli)
    );
}

.hero {
    background: url("../../../sites/default/files/hero-fx7.png");
    background-repeat: repeat-x;
    background-attachment: fixed;
}

.hero H1 {
    color: var(--lapis-lazuli);
    text-shadow: 1px 1px 1px var(--bright-white);
}

.hero .hero-left p {
    color: var(--bright-white);
    line-height: 2rem;
    font-size: 1.25rem;
    text-shadow: 0px 0px 3px var(--lapis-lazuli);
    font-weight: 300;
}

.hero .hero-left P > strong {
    font-weight: 500;
    color: white;
}

.hero .hero-right img {
    width: 100%;
    max-width: 500px;
}
/* --------------------------------------------------------------*/

/* CONTENT   --------------------------------------------------- */
.breadcrumb-parent {
    font-size: 0.8rem;
    background: linear-gradient(to right, var(--blue-ncs), var(--moonstone));
}

#block-b5customtheme-breadcrumbs {
    margin-left: 20px;
}

#block-b5customtheme-breadcrumbs ol {
    margin-bottom: 0px;
}

#block-b5customtheme-breadcrumbs ol a {
    color: var(--lapis-lazuli);
}

#block-b5customtheme-breadcrumbs ol a:hover {
    color: var(--mantis);
}

main {
    background-color: var(--lapis-lazuli);
    background-image: url("../../../sites/default/files/eu-map-white-outline.png");
    background-position: center right;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    background-size: auto 800px;
    color: var(--bright-white);
}

#block-b5customtheme-page-title {
    /*margin-top: 3rem;*/
    margin-bottom: 2rem;
}

#block-b5customtheme-content {
    padding-bottom: 3rem !important;
}

.path-frontpage H4 {
    line-height: 2rem;
    font-weight: 400;
    color: var(--moonstone);
    text-shadow: 0px 0px 4px #0008;
}

.path-frontpage .front strong {
    color: var(--bright-white);
    font-weight: 600;
}

.partner-node img {
    max-width: 90%;
    border-radius: 50% !important;
}

.partner-logo img {
    width: 90%;
    height: auto;
    border-radius: 50%;
}

#block-b5customtheme-content .ecare-objectives li {
    list-style: none;
    margin-bottom: 1.5rem;
    background-image: url("../../../sites/default/files/svg/target.svg");
    background-repeat: no-repeat;
    padding-left: 40px;
    background-size: 30px;
}

#impactsAccordion .accordion-item {
    background: none;
    border: none;
    font-weight: 300;
}

#impactsAccordion .accordion-button {
    background: var(--moonstone);
    background: none;
    background: #47aec577;
    border: none;
    color: var(--bright-white);
    font-size: 1.1rem;
    font-weight: 300;
}

#impactsAccordion .accordion-body {
    background: #47aec544;
    color: var(--bright-white);
}

#block-esgmenu {
    display: inline-block;
    margin-left: auto;
    margin-right: 0px;
    width: fit-content;
}

#block-esgmenu .nav-link.xlink.dropdown-toggle {
    font-size: 0.9rem;
    font-weight: bold;
    font-variant: all-small-caps;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal {
    background: var(--moonstone);
    box-shadow: 5px 5px 5px #0003;
    border: 1px solid #1b1b1d !important;
}

.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix {
    /* line-height: 2rem; */
    padding: 0.5rem;
}

.webform-confirmation-modal--content {
    padding: 2rem;
}

#ui-id-1 {
    padding: 2rem;
    background: #fffa;
}

[dir="ltr"] .ui-dialog .ui-dialog-titlebar-close {
    right: 20px;
    top: 8px;
}

#block-sociallinks {
    display: inline-block;
}

.article-logo img {
    /* border-radius: 50%; */
    border-radius: 3rem;
    max-width: 90%;
}

.timeline li {
    list-style: none;
}

.timeline-entry {
    background-color: #47aec544;
}

/* .timeline-entry img {
    border-radius: 50% !important;
} */

.deliverables .card {
    background: #47aec577;
    border: none;
    color: var(--bright-white);
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.media-card {
    background-color: #47aec577;
}

#block-webform-3 {
    max-width: 500px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: radial-gradient(#0001, #0004);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 3px 2px #0005;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.deliverables a {
    color: #fff;
}

.deliverables a:hover {
    color: var(--mantis);
}

.view-dissemination a {
    position: absolute;
    bottom: 10px;
}

.esg-member > div {
    background-color: white;
    height: 100%;
}

.esg-member p {
    text-align: center;
    color: var(--lapis-lazuli);
}

#block-views-block-data-collection-submissions-block-1,
#block-views-block-data-collection-submissions-block-2,
#block-views-block-data-collection-submissions-block-4,
#block-views-block-data-collection-submissions-block-3,
#block-views-block-data-collection-submissions-block-5 {
    margin-bottom: 3rem;
}

#block-views-block-data-collection-submissions-block-1 h2,
#block-views-block-data-collection-submissions-block-2 h2,
#block-views-block-data-collection-submissions-block-4 h2,
#block-views-block-data-collection-submissions-block-3 h2,
#block-views-block-data-collection-submissions-block-5 h2 {
    color: var(--mantis);
    /* margin-bottom: 1rem; */
    font-size: 1.4rem;
    font-weight: 500;
}

#block-views-block-data-collection-submissions-block-1 a,
#block-views-block-data-collection-submissions-block-2 a,
#block-views-block-data-collection-submissions-block-4 a,
#block-views-block-data-collection-submissions-block-3 a,
#block-views-block-data-collection-submissions-block-5 a {
    color: var(--lapis-lazuli);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.webform-submission-navigation {
    display: none;
}

.webform-submission-information {
    display: none;
}

#block-esgmenu ul.nav-level-1 > li:last-child {
    border-top: 1px solid #ddd;
}

.ui-dialog:not(.ui-dialog-off-canvas) {
    background: white !important;
    padding: 1rem;
    border-radius: 0.5rem !important;
    box-shadow: 1px 1px 4px #0005;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: var(--lapis-lazuli) !important;
}

.content2 h2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.content2-fluid p {
    line-height: 2.5rem;
    text-align: justify;
    font-size: 1.5rem;
}

.content2-fluid {
    background: #47aec5aa;
    color: color(srgb 0.0445 0.2639 0.445);
}

.content2-fluid #synergies {
    margin-top: 1.5rem;
}

.content2-fluid #synergies p {
    font-size: 1.2rem;
    line-height: 1.5;
}

#subcontent .block-news-entry {
    flex: 1;
    background-color: white;
    line-height: 1.1rem;
}

#subcontent .block-news-entry p {
    line-height: 1.5rem;
    color: #000022c8;
}

/* #subcontent .block-news-entry img {
    border-radius: 50% !important;
} */

.subcontent-fluid {
    background: #47aec578;
}

.subcontent-fluid h2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.footer-top-fluid {
    background: url("../../../sites/default/files/newsletter-bg4.png");
    background-position: bottom;
    background-size: auto 100%;
    background-repeat: repeat-x;
}

.footer-bottom-fluid {
    background-color: #e7f7f8;
}

#esgmap {
    height: 500px;
    width: 100%;
}

#esgmapDiv {
    background-color: #435576;
}

#esgmapDiv .activeRegion {
    fill: red !important;
}

#esgmembersDiv {
    background-color: white;
    color: color(srgb 0.2621 0.3346 0.4646);
    font-size: 1.1rem;
}

.maplibregl-popup {
    max-width: 600px !important;
    font:
        14px "Helvetica Neue",
        Arial,
        Helvetica,
        sans-serif;
    color: black;
}

.maplibregl-popup P {
    line-height: 1.5;
    color: #435576;
    margin: 0px;
    padding: 0px;
}

.countdown li {
    display: inline-block;
    font-size: 0.8rem;
    list-style-type: none;
    padding: 0.5rem 2rem;
    text-transform: uppercase;
    text-align: center;
}

.countdown li span {
    display: block;
    font-size: 2.5rem;
}

/* --------------------------------------------------------------*/

#footer-bottom #block-sociallinks-2 H2 {
    font-size: 1.5rem;
}

#footer-bottom #block-sociallinks-2 img {
    width: 30px;
    height: auto;
    margin: 10px;
}

.footer-bottom-left a.nav-link {
    font-weight: 500;
    color: var(--myrtle-green);
}

/* EFFECTS  ---------------------------------------------------- */
@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}

.puzzle-front {
    transform: translatey(0px);
    animation: float 4s ease-in-out infinite;
    img {
        width: 100%;
        height: auto;
    }
}
/* --------------------------------------------------------------*/

/* WEBFORMS ---------------------------------------------------- */
#webform-submission-ecare-mapping-t2-2-add-form > fieldset {
    background: var(--blue-ncs);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
}

#webform-submission-ecare-mapping-t2-2-add-form .form-item {
    margin-bottom: 2rem;
}

#webform-submission-ecare-mapping-t2-2-add-form .form-item label {
    font-weight: bold;
}

#webform-submission-ecare-mapping-t2-2-add-form
    .select2-container--default
    .select2-selection--single,
#webform-submission-ecare-mapping-t2-2-add-form .form-item input,
#webform-submission-ecare-mapping-t2-2-add-form .form-item textarea,
#webform-submission-ecare-mapping-t2-2-add-form .form-item select {
    background-color: #fff4;
    color: #212529;
    border-radius: 1px;
    border-color: var(--myrtle-green);
}

#webform-submission-ecare-mapping-t2-2-add-form
    .select2-container--default
    .select2-selection--single:focus,
#webform-submission-ecare-mapping-t2-2-add-form .form-item input:focus,
#webform-submission-ecare-mapping-t2-2-add-form .form-item textarea:focus,
#webform-submission-ecare-mapping-t2-2-add-form .form-item select:focus {
    background-color: #fff;
}

#webform-submission-ecare-mapping-t2-2-add-form #edit-coordination-type label {
    font-weight: normal;
}

#edit-funding-information > legend,
#edit-classification > legend,
#edit-general-information > legend {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--lapis-lazuli);
    padding-bottom: 2rem;
}

#webform-submission-ecare-listing-of-funding-add-form .webform-section {
    background: var(--blue-ncs);
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#webform-submission-ecare-listing-of-funding-add-form .form-item {
    margin-bottom: 1rem;
}

#webform-submission-ecare-listing-of-funding-add-form
    .webform-flexbox
    .form-item {
    margin-bottom: 0px;
}

#webform-submission-ecare-listing-of-funding-add-form .webform-section-title {
    color: white;
}

#webform-submission-ecare-listing-of-funding-add-form .form-item label {
    font-weight: bold;
}

#webform-submission-ecare-listing-of-funding-add-form
    .select2-container--default
    .select2-selection--single,
#webform-submission-ecare-listing-of-funding-add-form .form-item input,
#webform-submission-ecare-listing-of-funding-add-form .form-item textarea,
#webform-submission-ecare-listing-of-funding-add-form .form-item select {
    background-color: #fff4;
    color: #212529;
    border-radius: 1px;
    border-color: var(--myrtle-green);
}

#webform-submission-ecare-listing-of-funding-add-form
    .select2-container--default
    .select2-selection--single:focus,
#webform-submission-ecare-listing-of-funding-add-form .form-item input:focus,
#webform-submission-ecare-listing-of-funding-add-form .form-item textarea:focus,
#webform-submission-ecare-listing-of-funding-add-form .form-item select:focus {
    background-color: #fff;
}

#edit-taxonomy-concerned-section fieldset .form-item label {
    font-weight: normal;
}

#edit-taxonomy-concerned-section .fieldset-legend {
    font-weight: bold;
}

#edit-general-information,
[id^="edit-general-information"],
#edit-container,
[id^="edit-container"],
#edit-stakeholder-competencies,
[id^="edit-stakeholder-competencies"],
#edit-apis,
[id^="edit-apis"],
#edit-extracted-data,
[id^="edit-extracted-data"] {
    background-color: #00002233;
    padding: 3rem;
}

#edit-general-information label,
[id^="edit-general-information"] label,
#edit-container label,
[id^="edit-container"] label,
#edit-stakeholder-competencies label,
[id^="edit-stakeholder-competencies"] label,
#edit-apis label,
[id^="edit-apis"] label,
#edit-extracted-data label,
[id^="edit-extracted-data"] label {
    font-weight: bold;
    color: var(--bright-white);
}

#edit-general-information .form-date,
[id^="edit-general-information"] .form-date {
    padding: 0.14rem !important;
}

#edit-general-information .form-item,
[id^="edit-general-information"] .form-item,
#edit-container .form-item,
[id^="edit-container"] .form-item,
#edit-stakeholder-competencies .form-item,
[id^="edit-stakeholder-competencies"] .form-item,
#edit-extracted-data .form-item,
[id^="edit-extracted-data"] .form-item {
    margin-bottom: 2rem;
}

#edit-extraction-date,
[id^="edit-extraction-date"] {
    line-height: 1.5;
    padding: unset !important;
    padding-bottom: 0.375rem !important;
    padding-top: 0.375rem !important;
}

#edit-general-information #edit-eligible-structures .form-item,
[id^="edit-general-information"] [id^="edit-eligible-structures"] .form-item,
#edit-data-file-upload,
[id^="edit-data-file-upload"] {
    margin-right: 1.25rem;
    margin-bottom: 0px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: royalblue;
    border-color: darkblue;
    font-size: 0.9rem;
}

.select2-selection__choice__remove {
    color: darkblue;
}

#edit-general-information #edit-eligible-structures .description,
[id^="edit-general-information"] [id^="edit-eligible-structures"] .description,
.form-type-checkbox .description {
    margin-left: 1.25rem;
}

.form-item-data-file {
    margin-top: 0px;
}

#edit-data-file-upload,
[id^="edit-data-file-upload"] {
    line-height: 2rem;
}

.form-item-data-file {
    margin-left: 3rem;
}

.webform-options-display-three-columns {
    max-width: 100% !important;
}

.webform-options-display-three-columns label {
    font-weight: normal !important;
    color: var(--bright-white);
}

.webform-options-display-three-columns .form-type-checkbox {
    margin-bottom: 0.5rem !important;
}
/* --------------------------------------------------------------*/