/* Global custom colors stylesheets. to use:
 @import ./colors.css;
*/


:root {
    --Neutral-Soft-gray: #E1E1E1;
    --Neutral-White: #FFF;
    --Primary-Light-Green: #E9F1F0;
    --Primary-Standard-Green: #1F7067;
    --Neutral-Md-Gray: #767575;
    --Neutral-Dark-gray: #4A4A4A;
    --Neutral-Text-gray: #898989;
    --Brand-Teal: #356A72;
    --Primary-Highlight-Green: #A0CAC6;
    --Primary-Red: #c62828;
}


#highlights-tab {
    height: 167vh ;
    width: 100%;
    font-family: "Public-Sans";
    background-color: var(--Primary-Light-Green, #E9F1F0) !important;
}


.header {
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    border-bottom: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
    background: var(--Neutral-White, #FFF);
}


.header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


.header-link {
    display: flex;
    align-items: center;
    gap: 4px;
}


.header-link span {
    color: var(--Primary-Standard-Green, #1F7067);
    text-align: justify;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 114.286% */
    text-transform: capitalize;
}


.header-title {
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Header/H4 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 177.778% */
}


.header-subtitle {
    color: var(--Neutral-Md-Gray, #767575);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Paragraph/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}


.highlights-body{
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    background: var(--Primary-Light-Green, #E9F1F0);
}


.highlights {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
    gap: 40px;
}


.highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}


.highlight-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;}


.highlight-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}


.highlight-subtitle {
    color: var(--Neutral-Md-Gray, #767575);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Paragraph/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}


.highlight-title span {
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Header/H4 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 177.778% */
}


.highlight-link {
    color: var(--Primary-Standard-Green, #1F7067);
    cursor: pointer;
    display: flex;
    gap: 4px;
    align-items: center;
}


.highlight-link span {
    cursor: pointer;
    color: var(--Primary-Standard-Green, #1F7067);
    text-align: justify;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;
}


#blogs {
    display: flex;
    align-items: stretch;
    gap: 16px;
    align-self: stretch;
    overflow-x: scroll;

}


.blog-frame {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    /* flex: 1 0 0; */
    min-width: 24rem;
}


.blog {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-Highlight-Green, #A0CAC6);
    background: #FFF;
    width: 100%;
}


.blog-graphic {
    display: flex;
    width: 100%;
    height: min-content;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
}


.blog-body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background: #FFF;}


.blog-date {
    color: #FFF; /* this keeps the calendar svg looking pretty */
    display: flex;
    align-items: center;
    gap: 8px;
}


.blog-date span {
    color: #6A7282;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Paragraph/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}


.blog-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}


.blog-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    justify-content: space-between;
}


.blog-title svg {
    cursor: pointer;
    color: var(--Primary-Standard-Green, #1F7067);
}


.blog-title span {
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */}


.blog-subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
    overflow: hidden;
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;

    /* Paragraph/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */}


.tags {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
}


.tags::-webkit-scrollbar {
    display: none;
}


.tag {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--Primary-Light-Green, #E9F1F0);
    cursor: pointer;
    min-width: fit-content;
}


.tag span {
    color: var(--Primary-Main-Green, #07443D);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 116.667% */}


#projects {
    display: inherit;
    gap: 16px;
    width: 100%;
}


#projects-map-container {
    width: inherit;
    position: absolute;
}


#projects-map {
    position: absolute;
    width: 70vw;
    left: 30vw;
}


#projects-map #mapPanel {
    margin-left: 0 !important;
}


#projects-column{
    width: 29vw;
}


.project {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green, #A0CAC6);
    background: var(--Neutral-White, #FFF);}


.ghost-button {
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--Primary-Standard-Green, #1F7067);
    background: var(--Neutral-White, #FFF);
    cursor: pointer;
}


.ghost-button div{
    display: flex;
    padding: 10px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Primary-Standard-Green, #1F7067);}


.ghost-button div span {

    color: var(--Primary-Standard-Green, #1F7067);

    /* Buttons/Light */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 114.286% */
    text-transform: capitalize;}


.primary-button {
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--Primary-Standard-Green, #1F7067);

}


.primary-button div {
    display: flex;
    padding: 12px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


.primary-button div span {
    color: var(--Neutral-White, #FFF);

    /* Buttons/Light */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 114.286% */
    text-transform: capitalize;
}


.primary-button div svg {
    fill: var(--Neutral-White, #FFF);
}


.project-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}


.project-title  {
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}


.project-attribution {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color:#FFF;
}


.project-attribution span {
    color: var(--Primary-Main-Green, #07443D);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 100% */    
}


.project-description{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}


.project-description span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
    overflow: hidden;
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;

    /* Paragraph/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}


.expand-description {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


.expand-description span {
    color: var(--Primary-Standard-Green, #1F7067);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Link/Default */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;}


.project-controls {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}


#projects-map #mapPanel {
    margin-left: 0;
}


#projects-map #mapPanel #home-map-pane {
    width: 70vw;
    position: inherit;
}


#home-map-pane .ol-attribution {
    position: fixed;
}


.search-bar {
display: flex;
height: 42px;
padding: 10px 187px 10px 16px;
align-items: center;
border-radius: 4px;
border: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
background: var(--Neutral-Light-gray, #F6F6F6);
margin-bottom: 2rem;
width: 100%;}


.search-label {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}


.search-label input {
color: var(--Neutral-Md-Gray, #767575);

/* Standard Input Label/Small */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 157.143% */
width: 100%;
}


.cta-sort-row {

display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 1rem;
}


.cta-sort-row a {
    flex-grow: 1;
}


.cta-sort-row div {
    flex-grow: 1;
}


.create-institution {
display: flex;
height: 44px;
justify-content: center;
align-items: center;
border-radius: 4px;
background: var(--Primary-Standard-Green, #1F7067);
cursor: pointer;
color: white;
}


.create-institution-label {
display: flex;
padding: 10px 14px;
justify-content: center;
align-items: center;
gap: 8px;}


.create-institution-label svg {
    color: inhert;
}


.create-institution-label span {
color: var(--Neutral-White, #FFF);

/* Buttons/Light */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 114.286% */
text-transform: capitalize;
}


.sort-by {
display: flex;
align-items: center;
gap: 4px;}


.sort-by label {
color: var(--Neutral-Black, #000);
font-feature-settings: 'liga' off, 'clig' off;

/* Label/xs */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 14px; /* 100% */
}


#projects-column .header-row {
    padding: 1rem !important ;
    border-bottom: none;
}


#collect-earth {
    height: 1000vh;
    background-color: var(--Primary-Light-Green);
}


#collect-tab {
    display: inline-block;
    width: 100vw;
    background-color: var(--Primary-Light-Green);
    height: 100vh;
    
}


#collect-map-container {
    display: inherit;
    /* width: 70vw; */
    position: absolute;
}


#collect-projects {
    flex-direction: column;
    display: inherit;
    gap: 16px;
    padding: 0 1rem 1rem;
}


.collect-empty {
    padding: 1rem;
    color: var(--Neutral-Md-Gray, #767575);
    font-size: 14px;
    text-align: center;
}


#collect-map-container #mapPanel #home-map-pane {
    width: 66vw;
}