input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

input[type="number"],
input[type="text"] {
    border-radius: 0;
    -moz-appearance : textfield;
    -webkit-appearance: none;
}

.integrated-label {
    background : #f7f7f7;
    border     : 0;
    position   : relative;
}

.integrated-label__label,
.integrated-label .integrated-label__label--currency {
    font           : normal 2.5rem/1 'WWF', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    left           : 1rem;
    position       : absolute;
    text-transform : uppercase;
    top            : 0.75rem;
}
.integrated-label .integrated-label__label--currency {
    top : 3.9rem;
}

.integrated-label__subheading {
    bottom: 0.1rem;
    font           : normal 1.4rem/1 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;;
    position       : absolute;
    height         : 2em;
    right: 0.1rem;
    text-transform : none;
    vertical-align : top;
    z-index        : 100;
}

.integrated-label__subheading b {
    display      : inline-block;
    font-weight  : normal;
    cursor       : help;
    height       : 2em;
    overflow     : hidden;
    padding-left : 2.2em;
    position     : absolute;
    width        : 2em;
}

.integrated-label__subheading b:hover {
    height : auto;
    width  : 10em;
}

.integrated-label__subheading b::before {
    border        : 1px solid;
    border-radius : 100%;
    content       : "?";
    display       : block;
    left          : 0;
    line-height   : 1.7;
    position      : absolute;
    text-align    : center;
    top           : 0;
    height        : 2em;
    width         : 2em;
}

.integrated-label input {
    background   : none;
    font-size    : 2rem;
    font-weight  : normal;
    height       : 8rem;
    padding-top  : 3.75rem;
    padding-left : 2.5rem;
}






.give-an-hour-calculator,
.give-an-hour-donation {
    margin    : auto;
    padding   : 2rem;
    position: relative;
}

.give-an-hour-donation .btn--submit,
.give-an-hour-calculator .btn--submit {
    width : 100%;
}

.give-an-hour-calculator {
    background: #dfdfdf;
    margin-bottom: 4em;
    max-width : 64rem;
}

.give-an-hour-calculator .btn--submit {
    margin-bottom: 0;
}

.give-an-hour__arrow {
    bottom: -4em;
    height: 4em;
    left: 0;
    position: absolute;
    transform: translateX(0);
    width: 100%;
}

.give-an-hour__arrow path {
    fill: #dfdfdf;
}

.give-an-hour-donation {
    padding-top: 1em;
}

.give-an-hour-donation .incremental,
.give-an-hour-donation .btn--submit {
    display   : block;
    margin    : auto;
    max-width: 76.8rem;
}

.give-an-hour-donation .gift-aid  {
    font-size: 1.8rem;
    margin: auto;
    max-width: 76.8rem;
}

.give-an-hour-donation .join-the-conversation {
    font-size: 1.8rem;
    margin: auto;
    max-width: 76.8rem;
}


/*doc
---
title: Stand-alone messages
name: stand-alone-messages
category:
  - elements
  - forms
tag:
  - latest
  - form
  - element
  - feedback
---

Messages to show errors, with three flavours of error message: error, warning, and question.

* The **error message** should be used to show supporters that a piece of information is incorrect, and because of that the form can’t be submitted. Always give a correct example.
* The **warning message** is used when something needs attention, but it’s not as critical enough to need an error message. It doesn’t always need a correct example, but an example is always preferred. In the example below a phone number has been entered, just not a mobile number.
* The **question message** is used when something *might* be incorrect, higlighting the possible error with a solution.

The error messages can be used inside an [integrated label][integrated-label-input], as well as on their own.

Stand alone message:

```html_example
<p class="message">Please select an animal</p>
<p class="message--error">Please select an animal</p>
<p class="message--question">Please select an animal</p>
<p class="message--warning">Please select an animal</p>
```

Used with [integrated label][integrated-label-input]:

```html_example
<label class="integrated-label">
    Sortcode
    <input type="number" value="l2-34-33">
    <p class="integrated-label__floating-message--error">Your sortcode should only be numbers and dashes &ndash; for example, 12-34-56.</p>
</label>

<label class="integrated-label">
    Mobile phone
    <input type="tel" value="020 1234 5678">
    <p class="integrated-label__floating-message--warning">This is a landline number, not a mobile number.</p>
</label>

<label class="integrated-label">
    Email address
    <input type="text" value="someone@gmail.con">
    <p class="integrated-label__floating-message--question">You've entered <i>.con</i> - did you mean <i>.com</i>?</p>
</label>
```
*/
.integrated-label__floating-message,
.integrated-label__floating-message--error,
.integrated-label__floating-message--question,
.integrated-label__floating-message--warning {
    background      : #ffe96c url("data:image/gif;base64,R0lGODlhAQABAIAAAPXSAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==") no-repeat -0.5em -5%;
    background-size : 2.5em 110%;
    border          : 1px solid #f5d200;
    box-sizing      : border-box;
    bottom          : 0.6em;
    display         : block;
    font            : normal 1.4rem/1.4 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform  : none;
    margin          : 0;
    padding         : 0.5em 1em 0.5em 2.5em;
    position        : absolute;
        -webkit-transform : translateY(100%);
    transform       : translateY(100%);
    left            : 0.6em;
    max-width       : calc(100% - 1.2em);
    z-index         : 100;
}

.integrated-label__floating-message::before, .integrated-label__floating-message::after,
.integrated-label__floating-message--error::before,
.integrated-label__floating-message--error::after,
.integrated-label__floating-message--question::before,
.integrated-label__floating-message--question::after,
.integrated-label__floating-message--warning::before,
.integrated-label__floating-message--warning::after {
  box-sizing : border-box;
}

.integrated-label__floating-message::before,
.integrated-label__floating-message--error::before,
.integrated-label__floating-message--question::before,
.integrated-label__floating-message--warning::before {
    background : #f5d200;
    content    : " ";
    display    : block;
    height     : 1em;
    width      : 1em;
    position   : absolute;
    top        : 0;
    left       : 0;
        -webkit-transform: translateY(-50%) translateX(50%) rotate(45deg);
    transform  : translateY(-50%) translateX(50%) rotate(45deg);
}

.integrated-label__floating-message::after,
.integrated-label__floating-message--error::after,
.integrated-label__floating-message--question::after,
.integrated-label__floating-message--warning::after {
    color       : rgba(0, 0, 0, 0.5);
    content     : " ";
    font-size   : 1.5em;
    height      : 1em;
    left        : 0;
    line-height : 1;
    padding     : 0;
    position    : absolute;
    text-align  : center;
        -webkit-transform: translateY(-50%);
    transform   : translateY(-50%);
    top         : 50%;
    width       : 1.33333em;
}

.ie8 .integrated-label__floating-message, .ie8
.integrated-label__floating-message--error, .ie8
.integrated-label__floating-message--question, .ie8
.integrated-label__floating-message--warning {
  padding-left : 1em;
  top          : 6.75em;
  bottom       : auto;
}

.integrated-label__floating-message--warning::before {
  background-color : #f5d200;
}

.integrated-label__floating-message--warning::after {
  content: "!";
}

.integrated-label__floating-message--error {
  background-color : #fdbc5f;
  background-image : url("data:image/gif;base64,R0lGODlhAQABAIAAAPaMUAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==");
  border-color     : #f68c50;
}

.integrated-label__floating-message--error::before {
  background-color : #f68c50;
}

.integrated-label__floating-message--error::after {
  content : "!";
}

.integrated-label__floating-message--question {
  background-color : #b8db9b;
  background-image : url("data:image/gif;base64,R0lGODlhAQABAIAAAAB5MgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==");
  border-color     : #007932;
}

.integrated-label__floating-message--question::before {
  background : #007932;
}

.integrated-label__floating-message--question::after {
  color   : #b8db9b;
  content : "?";
}





/*doc
---
title: Number with incremental buttons
name: number-with-incremental-buttons
category:
 - forms
---

A number input with two buttons, one on each side.

```html_example
<fieldset class="incremental">
    <button type="button" class="btn incremental-btn--minus js-incremental-minus">-</button><!--
    --><span class="incremental__currency">&pound;</span><input type="number" class="incremental__number js-incremental-number"><!--
    --><button type="button" class="btn incremental-btn--plus js-incremental-plus">+</button>
</fieldset>
```

*/
.incremental {
    margin: 0;
    position: relative;
}

.incremental__number,
.incremental-btn--minus,
.incremental-btn--plus {
    display        : inline-block;
    font-size      : 40px;
    height         : 1.5em;
    line-height    : 0;
    vertical-align : top;
}

.incremental__currency {
    font-size   : 1.2em;
    font-family : "WWF", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    height      : 3em;
    line-height : 2.6;
    position    : absolute;
    left        : 3em;
    top         : 0;
    width       : 2.5em;
}

.incremental__number {
    -webkit-appearance : none;
    border             : 1px solid #c0c2c2;
    border-left        : 0;
    border-right       : 0;
    font-size          : 20px;
    height             : 3em;
    margin             : 0 auto 0.2em auto;
    padding-left       : 1.25em;
    width              : calc(100% - 6em);
}

.incremental-btn--minus,
.incremental-btn--plus {
    margin-top : 0;
    width      : 1.5em;
}

.incremental-btn--minus:active,
.incremental-btn--plus:active {
    height : 1.5em;
}

.incremental-btn--minus {
  border-top-right-radius    : 0;
  border-bottom-right-radius : 0;
  right                      : -1px;
}

.incremental-btn--plus {
  border-top-left-radius    : 0;
  border-bottom-left-radius : 0;
  left                      : -1px;
}

/*doc
---
title: Checkbox list
name: checkbox-list
category:
  - elements
  - forms
tag:
  - checkbox
  - latest
  - form
  - element
---



```html_example
    <fieldset class="checkbox-list">
        <label class="checkbox-list__item">
            <input type="hidden" name="communication-by-email" value="no">
            <input type="checkbox" name="communication-by-email" id="communication-by-email" value="yes">
            <span>Yes, please keep me updated <b>by email</b></span>
        </label>
        <label class="checkbox-label__item">
            <input type="hidden" name="communication-by-sms" value="no">
            <input type="checkbox" name="communication-by-sms" id="communication-by-sms" value="yes">
            <span>Yes, please keep me updated <b>by text</b></span>
        </label>
    </fieldset>
```

*/
.checkbox-list {
        -ms-flex-line-pack    : stretch;
    align-content         : stretch;
        -webkit-box-align     : stretch;
        -ms-flex-align        : stretch;
    align-items           : stretch;
        display               : -webkit-box;
        display               : -ms-flexbox;
    display               : flex;
        -webkit-box-orient    : horizontal;
        -webkit-box-direction : normal;
        -ms-flex-direction    : row;
    flex-direction        : row;
        -ms-flex-wrap         : wrap;
    flex-wrap             : wrap;
        -webkit-box-pack      : justify;
        -ms-flex-pack         : justify;
    justify-content       : space-between;
}

.checkbox-list__item {
    background: #e6e6e6;
    font-size : 1.6rem;
    position  : relative;
    margin    : 0 0 1em 0;
    width     : 100%;
}

@media screen and (min-width: 37.5em) {
    .checkbox-list__item {
        width : calc(50% - 0.5em);
    }
}

@media screen and (min-width: 64em) {
    .checkbox-list__item {
        width : calc(24% - 0.5em);
    }
}

.checkbox-list__item input[type="checkbox"] {
    position : absolute;
    top      : 1em;
    left     : 1em;
    width    : auto;
}

.checkbox-list__item input[type="checkbox"][value="true"] + span {
    border-color : #faa61a;
}

.checkbox-list__item input[type="checkbox"][value="true"]:checked + span {
    border-color : #8cc63f;
}

.checkbox-list__item input[type="checkbox"][value="false"]:checked + span {
    border-color : #faa61a;
}

.checkbox-list__item span {
    border           : 0.1rem solid #8cc63f;
    font-size        : 1em;
    font-family      : "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight      : normal;
    display          : block;
    height           : 100%;
    padding          : 0.65em 1em 1em 2.65em;
    position         : relative;
    text-transform   : none;
}


/*doc
---
title: Gift aid fieldset
name: gift-aid
category:
  - forms
tag:
  - form
  - gift-aid
---

A fieldset for forms that require a Gift Aid opt-int.

```html_example
```

*/
.gift-aid {
  margin: 0 0 2em 0;
  position: relative;
}

.gift-aid label {
  font-size      : 16px;
  font-family    : 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight    : normal;
  text-transform : none;
}

.gift-aid__declaration {
    border         : 1px solid #c0c2c2;
    margin         : 0;
    padding        : 1em 1em 1em 2.125em;
    padding-bottom : 1em;
}

.gift-aid__declaration-checkbox {
    left     : 0.5em;
    position : absolute;
    top      : 1.3em;
    width    : auto;
}

.gift-aid__declaration-checkbox:checked + .gift-aid__money-or-behalf {
    max-height : 7em;
}

.gift-aid__money-or-behalf {
    background : #c0c2c2;
    height     : 100%;
    max-height : 0;
    overflow   : hidden;
    top        : -0.2em;
        -webkit-transition : all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    transition : all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gift-aid__money-or-behalf label {
    font-weight : normal;
    margin      : 0 1em 1em 1em;
    padding     : 1em 0 0 1.8em;
    position    : relative;
}

.gift-aid__money-or-behalf label:first-child {
    margin-bottom : 0;
}

.gift-aid__money-or-behalf label input {
    left     : 0;
    position : absolute;
    top      : 1.125em;
    width    : auto;
}


/*doc
---
title: Gift aid notice
name: gift-aid-notice
category:
  - forms
tag:
  - form
  - gift-aid
---

The terms and conditions that should available near any Gift Aid declaration.

Note: the content in this example is out of date; always get fresh copy.

```html_example

<p><label for="gift-aid-faq-trigger" class="btn--non-button">About Gift Aid - do I qualify?</label></p>

<aside class="gift-aid-faqs__wrapper">
    <div class="grid-aid-faqs__content">
        <h1>What is Gift Aid?</h1>
        <p>Gift Aid is a scheme which allows charities such as WWF-UK to reclaim basic rate tax paid on any money donated to them by UK tax-payers.</p>
        <h1>How does it work?</h1>
        ...
    </div>
<aside>
```

*/
.gift-aid-faqs__button {
  display: inline-block;
}

.gift-aid-faqs__wrapper {
  position: fixed;
  -webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 0;
  height: 0;
  opacity: 0;
  overflow: none;
  z-index: 1000;
}

.gift-aid-faqs__wrapper h2 {
  font-size: 24px;
  font-size: 1.2rem;
}

.gift-aid-faqs__wrapper.modal-box--open {
  height: 100%;
  width: 100%;
}

.gift-aid-faqs__wrapper.modal-box--transition {
  opacity: 1;
}

.gift-aid-faqs__content {
  background: white;
  left: 50%;
  height: 80%;
  height: 80vh;
  max-width: 32em;
  width: 90%;
  overflow: hidden;
  position: relative;
  top: 5%;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: translateX(-50%) translateY(-110%);
          transform: translateX(-50%) translateY(-110%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.gift-aid-faqs__content header {
  background: #e6e6e6;
  padding: 0.15em 1em;
  height: 3em;
}

.gift-aid-faqs__content header h1 {
  font-size: 36px;
  font-size: 1.8rem;
}

.modal-box--transition .gift-aid-faqs__content {
  -webkit-transform: translateX(-50%) translateY(0%);
          transform: translateX(-50%) translateY(0%);
}

.gift-aid-faqs__content .scrollable {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  height: calc(100% - 3em);
  padding: 1em;
}

.gift-aid-faqs__close {
  position: absolute;
  top: 0.35em;
  right: 0.5em;
}



@supports (-webkit-appearance: -apple-pay-button) {
    .btn--apple-pay {
        margin-top: 2em;
    }
    .btn--apple-pay,
    .btn--apple-pay:hover,
    .btn--apple-pay:active {
        color                   : rgba(0,0,0, 0);
        -webkit-appearance      : -apple-pay-button;
        -apple-pay-button-type  : donate;
        -apple-pay-button-style : black;
    }
}