/*v20.05.1*/
/*Copyright 2020 Practical Change*/
:root {
    --colour-primary: #37c8ab; /*PracticalBlueGreen*/
    --colour-error: #ffd42a; /*OutcomeYellow*/
    --selection-colour: #abffd9;
    --unitless-max-font-size: 18;
}

.alert {
    color: #CC5154; /*TasmanianWaratah*/
}

form {
    margin: 0 auto;
    padding: 1.5rem 2rem;
    padding-left: 0px;
    background-color: #feffff; /*OffWhite*/
    border-radius: 8px
}

    form h1 {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #ccc; /*20percentGrey*/
        text-align: center
    }

input {
    width: 100%;
    font-size: 18pt;
    padding: 8px;
    border-style: solid;
    border-radius: 8px
}

textarea {
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    width: 100%;
    height: 324px;
    font-size: 18pt;
    padding: 8px;
    border-style: solid;
    border-width: 2px;
    border-color: #245F72; /*ChangeBlueMuted*/
    border-radius: 8px;
    color: #1a1a1a; /*90percentGrey*/
    font-family: sans-serif;
    font-variant: normal
}

.help-text {
    display: flex;
    margin-top: 0.5rem;
    color: #808080; /*50percentGrey*/
    font-style: normal
}

input:placeholder-shown + label {
    opacity: 0;
    transform: translateY(1rem)
}

.has-dynamic-label {
    position: relative;
    padding-top: 1.5rem
}

    .has-dynamic-label label {
        position: absolute;
        top: 0;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.2s ease-out
    }

input:required + .help-text::before {
    color: #808080; /*50percentGrey*/
    content: 'Required'
}

input:optional + .help-text::before {
    color: #808080; /*50percentGrey*/
    content: ''
}

input:read-only {
    border-color: #ccc; /*20percentGrey*/
    !important;
    color: #808080; /*50percentGrey*/
    cursor: not-allowed
}

input:valid {
    border-color: #37c8ab; /*PracticalBlueGreen*/
}

input:invalid {
    border-color: #ffd42a; /*OutcomeYellow*/
}

    input:invalid:focus {
        border-color: #ffd42a; /*OutcomeYellow*/
    }

    input:invalid + .help-text {
        color: #ffd42a; /*OutcomeYellow*/
    }

input[type='email']:invalid + .help-text::before {
    content: 'Valid email required'
}

input:out-of-range + .help-text::before {
    content: 'Out of range'
}

input[type='checkbox'] + label {
    user-select: none
}

form label {
    display: block;
    font-weight: bold;
    color: #245F72; /*ChangeBlueMuted*/
}

.send {
    background-color: #245F72; /*ChangeBlueMuted*/
    width: 100%;
    height: 64px;
    border-width: 0px;
    border-radius: 8px;
    margin-top: 16px;
    margin-right: 16px;
    color: #feffff; /*OffWhite*/
    font-size: 16pt;
    font-weight: normal;
    cursor: pointer
}

    .send:hover {
        background-color: #245F72; /*ChangeBlueMuted*/
    }

    .send:active {
        background-color: #37c8ab /*PracticalBlueGreen*/
    }

    .send span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s
    }

        .send span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s
        }

    .send:hover span {
        padding-right: 24px
    }

        .send:hover span:after {
            opacity: 1;
            right: 0
        }

.phonenumber {
    font-size: 20pt;
    font-weight: bold;
    text-decoration: none;
    color: #245F72; /*ChangeBlueMuted*/
}

    .phonenumber:hover {
        font-weight: bold;
        text-decoration: none;
        color: #1a404d; /*ChangeBlue*/
    }

    .phonenumber:active {
        font-weight: bold;
        text-decoration: none;
        color: #37c8ab /*PracticalBlueGreen*/
    }