:root {
    --discovery-main: #197A39;
    --discovery-secondary: #DCF4E6;
    --discovery-black: #303030;
    --discovery-grey: #5C5C5C;
    --discovery-white: #FFFFFF;
    --discovery-background: #F8F8F8;
}

html {
    scroll-behavior: smooth;
}

#discovery-header {
    width: 100%;
    position: fixed;
    padding: 15px 32px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: var(--discovery-white);
    max-height: 79px;

    z-index: 9999;
}

#discovery-header #logo-link {
    display: block;
    width: 183px;

    cursor: pointer;
}

.static-text {
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: right;
}

.h2 {
    font-family: Inter, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}
.h3 {
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}
.h3.light {
    font-size: 32px;
    font-weight: 300;
    line-height: 42px;
}
.h5.semi-bold {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--discovery-black);
}
.h5.light {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    color: var(--discovery-grey);
}

.body-text {
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--discovery-grey)
}
.card {
    background: var(--discovery-white);
    border-radius: 32px;

    display: flex;
    flex-direction: column;
    gap: 24px;

    flex: 1;
}
.btn-modal {
    padding: 15px 30px;
    border-radius: 30px;
    background: var(--discovery-main);
    color: white;
    font-weight: 700;

    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
}
.btn-modal.btn-icon {
    width: 32px;
    height: 32px;

    padding: 0;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-modal.desktop {
    display: flex;
}
.btn-modal.mobile {
    display: none;
}

#grid-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.discovery-footer {
    width: 100vw;
    background-color: #06300C;
    padding: 50px 32px;
}

#delimiter-footer {
    margin: 40px auto;
    border: 1px solid #45624A;
}

#top-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#top-footer img {
    filter: invert(1);
    max-width: 165px;
}

#addresses {
    display: flex;
    gap: 24px
}

#addresses address {
    max-width: 288px;
    font-style: normal;
}

#addresses .cntry {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    color: var(--discovery-white);

    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px
}

#addresses .street {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

#addresses .street .h7 {
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    text-align: left;
    color: var(--discovery-white);
}

#bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: var(--discovery-white);
}

#bottom-footer img {
    filter: contrast(0) brightness(100);
}

#bottom-footer .right {
    display: flex;
    gap: 24px;
}

#custom-table-discovery {
    background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%);
}

#discovery-table {
    border-collapse: collapse;

    width: 100%;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
#discovery-table th, td {
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 26px;
    text-align: left;
    color: var(--discovery-black);

    padding: 10px 12px;
}
#discovery-table td {
    border: 1px solid #EEEEEE;
}
#discovery-table td[contenteditable="true"] {
    outline: none;
}

#discovery-table thead {
    background-color: #DCF4E6;
}

#discovery-table td.group-row {
    font-weight: 700;
}

#discovery-table td.once-row {
    font-weight: 500;
}

.included-select {
    width: 132px;
    height: 34px;
    padding: 4px 40px 4px 16px;
    border-radius: 24px;

    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
    appearance: none;
}
.included-select[data-included=include] {
    color: #197A39;

    background:
            linear-gradient(#DCF4E6, #DCF4E6),
            url("../images/discovery/green-arrow.svg") no-repeat right 16px center;
    background-blend-mode: multiply;
}
.included-select[data-included=exclude] {
    color: #FF4747;

    background:
            linear-gradient(#F4DCDC, #F4DCDC),
            url("../images/discovery/red-arrow.svg") no-repeat right 16px center;
    background-blend-mode: multiply;
}

@media screen and (max-width: 450px) {
    #discovery-header {
        padding: 15px 16px;
    }

    .h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .h3 {
        font-size: 22px;
        line-height: 30px;
    }
    .h3.light {
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
    }
    .h5.semi-bold {
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
    }
    .h5.light {
        font-size: 16px;
        font-weight: 300;
        line-height: 26px;
    }
    .body-text {
        font-size: 24px;
        line-height: 32px;
    }

    #top-footer {
        flex-direction: column;
    }
    #addresses {
        flex-direction: column;
        margin-top: 50px;
    }
    .discovery-footer {
        padding: 32px 16px;
    }
    #discovery-table th, td {
        font-size: 14px;
        line-height: 22px;
    }
    .btn-modal.desktop {
        display: none;
    }
    .btn-modal.mobile {
        display: flex;
    }
}