:root {
    --ch20-purple: #1B1750;
    --ch20-purple-active: #501874;
    --ch20-purple-light: #69668B;
    --ch20-blue: #0070AF;
    --ch20-background: #DDDCE5;
    --ch20-background-light: #F4F3F6;
    --ch20-inter: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    --ch20-pt-serif: PT Serif,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}


.dataTables_wrapper, #ch-2016-interim-white-wrapper, #quick-search-results {
    * {
        font-family: var(--ch20-inter);
        color: var(--ch20-purple);
    }

    .glyphicon {
        font-family: "Glyphicons Halflings";
    }


    .table {
        th {
           border-bottom: 2px solid var(--ch20-background);
        }

        td.no-results-col {
            padding: 15px;
            text-align: center;
            font-size: 16px;
            background: var(--ch20-purple-light);
            font-style: italic;
        }

        tr {
            .name {
                font-weight: 700;
            }

            .actions {
                text-align: end;
                button {
                    background-color: transparent;
                }
            }
        }

        td {
            padding: 15px;
            line-height: 1.25;
            vertical-align: middle;
            border-top: none;

            .fund-selector {
                 width: 100%;
                 max-width: 300px;
            }
        }


        tbody {
            font-size: 12px;
            tr:nth-child(odd) {
                background-color: var(--ch20-background-light)
            }

            tr:nth-child(even) {
                background-color: #FFFFFF;
            }

        }
    }
}



.dataTables_wrapper {
    .btn-primary, .btn-primary:active {
        background: none;
        border: none;
        padding: 2px 4px;
    }
}


#ch-2016-interim-white-wrapper, #quick-search-results {
    font-size: 12px;
    .btn {
        font-weight: 700;
        font-size: 14px;
        padding: 10px 24px;
    }

    .btn-primary {
        background-color: var(--ch20-purple);
        color: #FFFFFF;

        span {
            color: #FFFFFF;
        }
    }

    .btn-secondary {
        background-color: white;
        border: 1px solid var(--ch20-purple);
    }

    h1 {
        font-size: 24px;
        line-height: 26px;
        font-weight: 700;
        padding: 24px 0px;
        background-color: transparent;
    }

    h2, h3 {
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        border-bottom: none;
    }

    input[type="checkbox"]:checked {
        background-color: var(--ch20-purple);
        accent-color: var(--ch20-purple);
    }

    .table { 
        th {
            border-top: 2px solid var(--ch20-background);
            border-bottom: none;
            color: var(--ch20-purple-light);
            padding: 15px;
            font-size: 11px;
        }
    }

    #selected-charity-list .name {
        width: auto;
    }

    #giving-page-create-form {
        display: flex;
        flex-direction: column;

        #givingpage-create-submit {
            place-self: end;
        }
    }

    .js-btn-search {
        padding: 2px 24px;
    }

    .btn-upload {
        background-color: var(--ch20-purple);
        color: #FFFFFF;
    }

    .social-button {
        background-color: var(--ch20-purple);
        border-radius: 9999px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
            height: 2em; 
            fill: #FFFFFF;
        }
    }

    .link-terms-of-use {
        text-decoration: underline;
        color: #0070AF;
    }
}





@media (max-width: 758px) {

    #ch-2016-interim-white-wrapper {
        margin: 10px 20px !important;
    }

    .receipt-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* align to left instead of center */
    }

    #ch-2016-interim-white-wrapper .page-header {
        display: none !important;
    }

    .form-content {
        margin-left: 0 !important; /* remove the extra left margin */
        margin-top: 40px !important; /* add some top margin for spacing */
        padding: 10px !important; /* remove padding */
    }

    form.wrapper {
        width: 100% !important; /* ensure full width */
        max-width: none !important;
        margin: 0 !important; /* remove centering */
        padding: 0; /* optional: trim padding */
    }

    .form-indent {
        padding: 0 !important; /* remove padding */
    }

    #thank-you-statement, #thank-you-statement-underlined {
        font-size: 28px !important;
        font-family: var(--ch20-pt-serif) !important;
        font-weight: 400;
        line-height: 40px !important;
    }

    .receipts-download-title {
        font-family: var(--ch20-pt-serif) !important;
        font-size: 12px !important; /* reduce font size */
        margin-bottom: 10px !important; /* adjust margin */
        margin-top: 0.5em;
    }

    .receipts-text {
        margin-top: 16px !important;
    }

    #bodyContentContainer_LSuccessImage {
        width: 100% !important;
    }

    .receipt-download #receipt-success-image {    

        margin-right: 0px !important;

    }

}









.givingpage-create, .tab-content {
    background-color: #FFFFFF;

    #your-fundraising-story {
        font-size: 14px;
    }
}

.givingpage-create {
    h2 {
        background-color: var(--ch20-purple);
        color: #FFFFFF !important;
    }
}

.nav-tabs > li > a {
     background-color: var(--ch20-background);
     color: var(--ch20-purple-light);
}

.tab-content {
    padding: 12px 40px;

    h1 {
       margin-top: 0px;
       margin-bottom: 0px;
    }

    .link--back {
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
    }

    .form-actions {
        padding-top: 50px;
    }

    #id-givingpage-delete {
        background-color: var(--ch20-blue);
        color: #FFFFFF;
    }

    #sharing-pane {
        font-size: 14px;
    }
}

#quick-search-results {
    .btn-info {
        background-color: var(--ch20-background);
    }

    .btn .disabled {
        background-color: var(--ch20-background-light);
    }
}


.receipt-download {

    #navbar {
        margin: 0;
    }

    #main-content {
        background-color: #FFFFFF;
        width: 100%;
    }

    #ch-2016-interim-white-wrapper {
        max-width: 1240px;
        margin: 0px auto;
    }
    
    .receipt-content {
        display: flex;
    }
    .ch-underline-gradient {
        border-bottom: 4px solid;
        border-image: linear-gradient(90deg, #3CB9FF, #3CFF7F) 1 stretch;
        font-size: inherit;
        font-family: inherit;

    }
    #receipt-success-image {
        margin-right: 120px;
    }


    .form-content {
        margin-left: 100px;
        padding: 40px 65px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);

        .status-message {
            min-width: 304px;
        }

        #bodyContentContainer_LYear {
            margin-top: 30px;
        }

        .g-recaptcha {
            margin: 45px 0px; 
        }

        #bodyContentContainer_btnSubmit {
            background-color: var(--ch20-blue);
        }
    }

    #receipt-description {
        .receipts-download-title {
            font-size: 16px;
            letter-spacing: 1.6px;
            text-transform: uppercase;
        }

.receipts-text {
    margin-top: 24px;
    font-size: 16px;
}
#thank-you-statement, #thank-you-statement-underlined {
    font-size: 68px;
    font-family: var(--ch20-pt-serif);
    font-weight: 700;
    line-height: 76px;
}



        #receipt-success-description {
            margin-top: 
        }
    
        span {
            font-size: 16px;

            a {
                text-decoration: underline;
                color: var(--ch20-blue);
            }
        }
    }

}