.form-input, input {
    border: none;
    outline: none;
    font-family: PROXIMANOVA-REGULAR;
    background: #fff;
    color: #000;
    box-sizing: border-box;
}

    .form-input[data-type=text], .form-input[data-type=email], input[type=text]:not(.form-control), input[type=email]:not(.form-control) {
        padding: 15px;
        border-radius: 5px;
        font-size: 16px;
        font-family: PROXIMANOVA-REGULAR;
        margin-right: 15px;
        width: 240px;
        transition: all 300ms;
        text-align: left;
    }

        .form-input[data-type=text], .form-input[data-type=email].email, input[type=text].email, input[type=email].email {
            width: 270px;
        }

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text);
    color: #aaa;
}

.mailing-list-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

[contenteditable=true].single-line {
    white-space: nowrap;
    overflow: hidden;
}

    [contenteditable=true].single-line br {
        display: none;
    }

    [contenteditable=true].single-line * {
        display: inline;
        white-space: nowrap;
    }

.charity-list-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    background: white;
    border-radius: 6px;
    padding-right: 12px;
}

    .charity-list-search > * {
        height: 100%;
    }

    .charity-list-search .input[type=text].search {
        padding: 15px;
        border-radius: 5px 0px 0px 5px;
        width: 340px;
        margin-bottom: 0px;
    }

    .charity-list-search a.search-input-button img {
        width: 15px;
    }

@media only screen and (max-width: 975px) {
    .mailing-list-form {
        flex-direction: column;
        width: 100%;
    }

        .mailing-list-form .form-input[data-type=text], .mailing-list-form .form-input[data-type=email], .mailing-list-form input[type=text], .mailing-list-form input[type=email] {
            width: 100%;
        }

    .form-input[data-type=text], .form-input[data-type=email], input[type=text]:not(.form-control), input[type=email]:not(.form-control) {
        width: 270px;
        margin-bottom: 20px;
        max-width: 100%;
        margin-right: 0px;
    }

    .charity-list-search {
        width: 100%;
    }

        .charity-list-search .input[type=text].search {
            width: 100%;
        }
}

@media only screen and (max-width: 400px) {
    .mailing-list-form {
        width: 100%;
        flex-direction: column;
    }

    .form-input[data-type=text], .form-input[data-type=email], input[type=text]:not(.form-control), input[type=email]:not(.form-control) {
        width: 100%;
        margin-bottom: 20px;
        max-width: 100%;
        margin-right: 0px;
    }

        .form-input[data-type=text].email, .form-input[data-type=email].email, input[type=text].email, input[type=email].email {
            width: 100%;
        }

    .form-input[data-type=submit] {
        width: 100%;
    }

    .charity-list-search {
        width: 100%;
    }
}

.lds-grid {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    transition: all 100ms;
    transform: scale(0.3);
    overflow: hidden;
    max-width: 0px;
    animation: open-loader 100ms forwards;
}

    .lds-grid.active {
        max-width: 80px;
    }

    .lds-grid div {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #005f86;
        animation: lds-grid 1.2s linear infinite;
    }

        .lds-grid div:nth-child(1) {
            top: 8px;
            left: 8px;
            animation-delay: 0s;
        }

        .lds-grid div:nth-child(2) {
            top: 8px;
            left: 32px;
            animation-delay: -0.4s;
        }

        .lds-grid div:nth-child(3) {
            top: 8px;
            left: 56px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(4) {
            top: 32px;
            left: 8px;
            animation-delay: -0.4s;
        }

        .lds-grid div:nth-child(5) {
            top: 32px;
            left: 32px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(6) {
            top: 32px;
            left: 56px;
            animation-delay: -1.2s;
        }

        .lds-grid div:nth-child(7) {
            top: 56px;
            left: 8px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(8) {
            top: 56px;
            left: 32px;
            animation-delay: -1.2s;
        }

        .lds-grid div:nth-child(9) {
            top: 56px;
            left: 56px;
            animation-delay: -1.6s;
        }

@keyframes lds-grid {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes open-loader {
    from {
        max-width: 0px;
    }

    to {
        max-width: 80px;
    }
}