﻿body {
    background-color: unset;
}

div#action-item-headline {
    font-family: var(--headline-font);
    padding-inline: 0;
}

#action-item-title {
    font-size: 72px;
    line-height: 71.36px;
    font-weight: 900;
    text-align: left;
    width: 75%;
    color: #000000;
}

.action-item-headline.panel {
    max-width: unset;
    min-height: unset;
}

p#action-item-subtitle, div#signature-count-wrapper {
    display: none;
}

#featured-image {
    display: block;
    object-fit: cover;
    width: 100%;
}

#action-item-description{
    margin-top: 25px;
}

#action-item-description.panel {
    padding: 10px 0;
}

div#section-2-column-2 {
    order: 1;
}

div#section-2-column-1 {
    order: 2;
}

fieldset.call-to-action {
    padding: 0 5px;
}

.submission-analytics-tracking > fieldset > div {
    padding: 0;
}

legend#call-to-action-legend {
    font-family: var(--body-copy-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    padding: 0;
}

button.btn-primary,
button#action-item-form-submit {
    font-weight: bold;
    background-color: var(--primary-color);
    color: #ffffff;
    border: solid 2px var(--primary-color);
    border-radius: var(--button-corner);
}

input[type="checkbox"] {
    accent-color: var(--secondary-color);
}

#letter-salutation, .read-more-sign-up-intro, #action-item-body-copy, .message-text-more, .full-text, .first-paragraph, #letter-message {
    font-size: 16px;
}

@media (max-width: 767px) {
    #action-item-title {
        font-size: 60px;
        line-height: 59px;
        padding: 15px 0;
    }

    .panel {
        padding: 5px 0;
    }
}

@media (max-width: 480px) {
    #action-item-title {
        font-size: 48px;
        line-height: 48px;
    }
}


    /*Event Related CSS*/
    .legal-disclaimer-container, .event-subheader, .form-header-container, .share-with-title, #event-title-third {
        display: none;
    }

    .ticketed-event {
        display: block;
        font-size: 16px;
        text-align: left;
        color: var(--secondary-color);
        display: flex;
        align-items: center;
        gap: 5px;
        border-radius: 25px;
        background: #EBEDF0;
        width: max-content;
        padding: 10px 15px;
    }

    .action-item-headline {
        text-shadow: unset;
    }

    .ticketed-event > svg {
        width: 20px;
        height: 20px;
        fill: var(--secondary-color);
    }

    .event-title-container > h1#action-item-title {
        font-size: 48px;
        font-weight: 700;
        text-align: left;
        width: 100%;
        margin: 15px 0;
    }

    .calendar-location-table i {
        color: var(--secondary-color);
    }

    #addFriend {
        background: var(--secondary-color);
        border: solid 2px var(--secondary-color);
        display: flex;
        gap: 5px;
        padding: 10px 20px;
    }

    .event-form-container .panel-body, .panel-body[grapes-name="Invite Friends"], .panel-body[grapes-name="Info Container"],
    .panel-body[grapes-name="Legal Disclaimer"] {
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        margin-top: 0;
    }

    .panel-body[grapes-name="Legal Disclaimer"] {
        margin-top: 25px;
    }

    .panel-body > h5 {
        font-family: var(--body-copy-font);
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;
    }

    .social-share-buttons {
        gap: 35px;
        margin-top: 15px;
    }

    .event-title-container {
        height: unset;
        min-height: unset;
        max-width: unset;
        padding-left: 0;
    }

    .show-on-small ~ .event-body-container {
        margin-top: 25px;
    }

    .event-section .row.panel.panel-body {
        margin: 0 0 25px 0;
    }

    .register-tickets {
        width: 100%;
        padding: 10px 20px;
        margin-top: 0;
    }

    .body-titles {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    #register-title {
        font-family: var(--body-copy-font);
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
    }

    .login-title {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .update-view-registration {
        margin: auto;
    }

    .social-icon-container {
        margin: 0;
    }

    .show-on-small {
        display: none;
    }

    .event-body-container .col-sm-push-2.col-sm-8 {
        width: 100%;
        left: unset;
    }

    .panel-social-icon {
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        margin-top: 0;
    }

    .event-details {
        margin-bottom: 25px;
    }

    #event-map-container {
        border: 1px solid #D9D9D9;
        border-radius: 8px;
    }

    #div-calendar-links {
        margin: 0;
    }

    @media (max-width: 767px) {
        .event-container {
            margin-top: 0;
        }

        .show-on-small ~ .event-body-container, .event-body-container .panel, #featured-image {
            margin-top: 15px;
        }

        .event-body-container .panel {
            margin-bottom: 15px;
        }

        #event-legal-disclaimer, .event-body-container .panel {
            padding: 15px;
        }

        .event-title-container > h1#action-item-title {
            margin: 0;
            padding: 15px 0;
        }

        #event-mobile-actions {
            display: none !important;
        }

        .multi-column-layout {
            gap: 0;
        }

        .invite-friends-container > .panel {
            margin: 0;
        }

        .event-section .row.panel.panel-body {
            margin: 0 0 15px 0;
        }
    }

@media (max-width: 480px) {
    .show-on-small {
        display: block;
        padding: 0 15px;
    }

        .event-title-container > h1#action-item-title {
            font-size: 28px;
            margin: 10px 0 5px 0;
            padding: 0;
        }

        .event-section #featured-image {
            margin: 0;
        }

        #event-legal-disclaimer > h5 {
            margin-top: 0;
        }

        #action-item-subtitle > p, #event-legal-disclaimer, .event-body-container .panel, #event-map-container > div {
            margin: 0 0 25px;
        }

        .event-form-container .event-body-container .panel {
            margin-top: 15px;
        }

            .event-form-container .event-body-container .panel:last-child {
                margin-bottom: 15px;
            }
    }
