.alert {
    --primary-colour: #f69350;
    background-color: var(--primary-colour);
    padding: 0;
    margin: 0;
    border-radius: 0;
}

    .alert.alert--apple {
        --primary-colour: #55a442
    }

    .alert.alert--asparagus {
        --primary-colour: #779b4a
    }

    .alert.alert--barley {
        --primary-colour: #b3916c
    }

    .alert.alert--celery {
        --primary-colour: #9ec64f
    }

    .alert.alert--cesoir {
        --primary-colour: #935ea0
    }

    .alert.alert--chalk-complementary-1 {
        --primary-colour: #ededed
    }

    .alert.alert--chalk-complementary-2 {
        --primary-colour: #706f6f
    }

    .alert.alert--chalk-shade {
        --primary-colour: #878787
    }

    .alert.alert--chalk-tint {
        --primary-colour: #fff
    }

    .alert.alert--chalk {
        --primary-colour: #dadada
    }

    .alert.alert--crusta {
        --primary-colour: #f69350
    }

    .alert.alert--danube {
        --primary-colour: #6d8dc8
    }

    .alert.alert--egyptian {
        --primary-colour: #174290
    }

    .alert.alert--gainsboro {
        --primary-colour: #dadada
    }

    .alert.alert--harley {
        --primary-colour: #e04613
    }

    .alert.alert--leaf-complementary-1 {
        --primary-colour: #034c2a
    }

    .alert.alert--leaf-complementary-2 {
        --primary-colour: #02251c
    }

    .alert.alert--leaf-shade {
        --primary-colour: #168039
    }

    .alert.alert--leaf-tint {
        --primary-colour: #a0cb82
    }

    .alert.alert--leaf {
        --primary-colour: #55b257
    }

    .alert.alert--malibu {
        --primary-colour: #6cb6e7
    }

    .alert.alert--oast-house-complementary-1 {
        --primary-colour: #f7bdb6
    }

    .alert.alert--oast-house-complementary-2 {
        --primary-colour: #ca2f17
    }

    .alert.alert--oast-house-shade {
        --primary-colour: #e03114
    }

    .alert.alert--oast-house-tint {
        --primary-colour: #e56c3b
    }

    .alert.alert--oast-house {
        --primary-colour: #df4613
    }

    .alert.alert--pacific {
        --primary-colour: #009fe3
    }

    .alert.alert--pride-complementary-1 {
        --primary-colour: #ab73af
    }

    .alert.alert--pride-complementary-2 {
        --primary-colour: #813d8f
    }

    .alert.alert--pride-shade {
        --primary-colour: #804379
    }

    .alert.alert--pride-tint {
        --primary-colour: #d28ebd
    }

    .alert.alert--pride {
        --primary-colour: #a15499
    }

    .alert.alert--rapeseed-complementary-1 {
        --primary-colour: #ffde00
    }

    .alert.alert--rapeseed-complementary-2 {
        --primary-colour: #e8ca00
    }

    .alert.alert--rapeseed-shade {
        --primary-colour: #e5a30b
    }

    .alert.alert--rapeseed-tint {
        --primary-colour: #fed066
    }

    .alert.alert--rapeseed {
        --primary-colour: #fab41a
    }

    .alert.alert--seagull {
        --primary-colour: #77c4ca
    }

    .alert.alert--shrimp-complementary-1 {
        --primary-colour: #f7f5c5
    }

    .alert.alert--shrimp-complementary-2 {
        --primary-colour: #f6a766
    }

    .alert.alert--shrimp-shade {
        --primary-colour: #ed695a
    }

    .alert.alert--shrimp-tint {
        --primary-colour: #fedeb3
    }

    .alert.alert--shrimp {
        --primary-colour: #f5a389
    }

    .alert.alert--sky-complementary-1 {
        --primary-colour: #6d8dc8
    }

    .alert.alert--sky-complementary-2 {
        --primary-colour: #2c53a1
    }

    .alert.alert--sky-shade {
        --primary-colour: #1f5780
    }

    .alert.alert--sky-tint {
        --primary-colour: #85c2eb
    }

    .alert.alert--sky {
        --primary-colour: #3c92d0
    }

    .alert.alert--south-downs-complementary-1 {
        --primary-colour: #9ec64f
    }

    .alert.alert--south-downs-complementary-2 {
        --primary-colour: #4fae33
    }

    .alert.alert--south-downs-shade {
        --primary-colour: #627f3e
    }

    .alert.alert--south-downs-tint {
        --primary-colour: #c5d870
    }

    .alert.alert--south-downs {
        --primary-colour: #779a4a
    }

    .alert.alert--summer-sky {
        --primary-colour: #1a9dd9
    }

    .alert.alert--tangerine {
        --primary-colour: #fab41a
    }

    .alert.alert--violet {
        --primary-colour: #a15598
    }

    .alert.alert--water-complementary-1 {
        --primary-colour: #89cdd4
    }

    .alert.alert--water-complementary-2 {
        --primary-colour: #23b2a5
    }

    .alert.alert--water-shade {
        --primary-colour: #006e80
    }

    .alert.alert--water-tint {
        --primary-colour: #56c3e8
    }

    .alert.alert--water {
        --primary-colour: #00aac6
    }

    .alert.alert--wealden-clay-complementary-1 {
        --primary-colour: #8d5737
    }

    .alert.alert--wealden-clay-complementary-2 {
        --primary-colour: #592e1e
    }

    .alert.alert--wealden-clay-shade {
        --primary-colour: #a68053
    }

    .alert.alert--wealden-clay-tint {
        --primary-colour: #d5c1a1
    }

    .alert.alert--wealden-clay {
        --primary-colour: #bfa380
    }

    .alert.alert--white {
        --primary-colour: #fff
    }

    .alert .alert__container {
        align-items: center;
        color: #fff;
        display: flex;
        line-height: 1.2rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%
    }

@media(min-width:576px) {
    .alert .alert__container {
        max-width: 540px
    }
}

@media(min-width:768px) {
    .alert .alert__container {
        max-width: 768px
    }
}

@media(min-width:992px) {
    .alert .alert__container {
        max-width: 960px
    }
}

@media(min-width:1200px) {
    .alert .alert__container {
        max-width: 1140px
    }
}

@media(min-width:1400px) {
    .alert .alert__container {
        max-width: 1320px
    }
}

@media(min-width:992px) {
    .alert .alert__container {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.alert .alert__icon {
    font-size: 1rem;
    line-height: 2rem;
    margin-right: 1.5rem
}

@media(max-width:991.98px) {
    .alert .alert__icon {
        display: none
    }
}

.alert .alert__text {
    flex-grow: 1;
    font-size: .9rem;
    margin-bottom: .75rem;
    margin-top: .75rem
}

@media(min-width:768px) {
    .alert .alert__text {
        font-size: 1rem
    }
}

.alert .alert__text a {
    color: #fff
}

    .alert .alert__text a:focus, .alert .alert__text a:hover {
        color: #ededed
    }

.alert .alert__text p:last-of-type {
    margin-bottom: 0
}

.alert .alert__view-button {
    display: none;
    margin-bottom: .5rem;
    margin-top: .5rem
}

@media(min-width:576px) {
    .alert .alert__view-button {
        display: block
    }
}

.alert .alert__close {
    border-radius: .5rem;
    justify-self: flex-end;
    padding: .25rem 1rem
}

    .alert .alert__close:focus, .alert .alert__close:hover {
        background-color: #fff;
        color: var(--primary-colour)
    }

.btn-outline-white {
    border-color: #fff;
    color: #fff;
}