body {
    font-family: sans-serif;
}


section.signup div.error button,
form.signup button,
form.signup a.dd {
    border-radius:      0.2em;
}

form.signup a.dd,
form.signup a.dd.active,
form.signup a.dd.hover,
form.signup a.dd.visited {
    display:            inline-block;
    margin:             0 0 0.5em 0;
    border-style:       solid;
    border-color:       black;
    border-width:       1px;
    padding:            0.3em;
    color:              black;
    text-decoration:    none;
}

section.signup div.error {
    position:           fixed;
    left:               30vw;
    top:                30vh;
    width:              40vw;
    min-height:         40vh;
    border-style:       solid;
    border-color:       black;
    border-width:       1px;
    border-radius:      0.6em;
    background-color:   #ffffff;
    overflow-y:         auto;
    padding:            2em 2em 1em 2em;
}

section.signup div.error button[data-close] {
    position:           absolute;
    top:                0.6em;
    right:              0.6em;
    width:              2em;
    height:             2em;
    padding:            0;
}
section.signup div.error button[data-close] img {
    display:            block;
    margin:             0;
    width:              100%;
    height:             100%;
    content:            url('./close.png');
}
section.signup button.ok {
    display:            block;
    margin-left:        calc(50% - 5em);
    margin-right:       calc(50% - 5em);
}
section.signup input[type="button"],
section.signup button.ok,
form.signup button,
section.signup select {
    display: inline-block;
    line-height: 1.8em;
}
section.signup input[type="button"],
section.signup button.ok,
form.signup button,
form.signup a.dd {
    background-color: rgb(200,200,255);
}


form.signup {
    padding-bottom: 2em;
    width: 100%;
}

form.signup label.hidden {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

form.signup label[for="dob"],
form.signup label.requirements {
    margin-left: 0.3em;
}
form.signup label[for="dob"] {
    width: 17em;
}
form.signup label.requirements {
    max-width: 36em;
}

form.signup fieldset {
    margin: 0.8em 0.5em 0 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 0.3em;
    padding-bottom: 0.8em;
}

form.signup fieldset h3:first-of-type {
    margin-top: 0.3em;
}

form.signup fieldset.finished {
    /*position: relative;*/
    bottom: 13.6em;
}

body.unframed form.signup fieldset.finished {
    position: fixed;
    top: 3em;
}

form.signup fieldset legend {
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-weight: bold;
}

form.signup fieldset.gambling_commission p {
    margin: 1.5em 1em 1em 1em;
}

form.signup fieldset.gambling_commission img {
    margin: 1em 2em 0 2em;
    width:  auto;
    height: 2.5em;
}

form.signup div.field.checkbox {
    margin-left: 1.5em;
}

form.signup div.field.radioset {
    margin: 1em 0 0.3em 1.5em;
}
form.signup div.field.radioset:first-of-type {
    margin-top: 0.3em;
}
form.signup div.field.radioset > label {
    margin: 0.5em 0 0.5em -0.8em;
}

form.signup div.field.checkbox input,
form.signup div.field.radioset input {
    margin: 0.5em 0 0.5em 0;
}
form.signup div.field.radioset input.hidden {
    visibility: hidden;
}
form.signup div.field.radioset label.greyed {
    color: #888888;
}

form.signup #signup-cost {
    display: block;
    margin: 1em 1.5em 1em 1.5em;
}
form.signup #signup-cost-confirm {
    display: inline-block;
    margin: 0 0.3em 0 0.3em;
}
form.signup .signup-cost {
    width: 8em;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5em;
    padding: 0.3em;
    text-align: center;
    font-weight: bold;
}

form.signup fieldset.finished div {
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 0.3em;
    background-color: #a2ff8f;
    padding: 0.5em;
}

form.signup.hidden fieldset {
    visibility: hidden;
}

form.signup.hidden fieldset.finished {
    visibility: visible;
}



form.signup hr {
    border-width: 0;
}

form.signup div.hidden {
    width: 0;
    height: 0;
    overflow: hidden;
}

@media screen and (max-width: 508px) {
    #AddressCapture_FindButton,
    #county {
        display: block;
        margin-top: 0.5em;
        margin-left: 0;
    }
}

form.signup label,
section.signup input {
    display: inline-block;
}


form.signup select[name="title"] {
    margin-left: 0.3em;
    width: 8em;
}

form.signup div.data8-postcodelookup-dropdown {
}

form.signup select.data8-postcodelookup-list {
    display: block;
    position: fixed;
    z-index: 10;
    left: 1em;
    top: 5em;
    width: calc(100vw - 3em);
    height: calc(100vh - 10em);
    background-color: rgb(200,200,255);
}

form.signup select.data8-postcodelookup-list option {
    position: static;
    display: block;
    line-height: 1em;
    height: 1.1em;
}

form.signup select.data8-postcodelookup-list + div {
    position: fixed;
    display: block;
    left: 1em;
    top: calc(100vh - 6em);
    width: calc(100vw - 3em);
    background-color: grey;
}

form.signup input.eager {
    background-color: rgb(255,191,0);
}
form.signup input.satisfied {
    background-color: rgb(200,255,200);
}

form.signup input[type="radio"] {
    display: inline-block;
    position: relative;
    top: 0.2em;
}

form.signup input[type="radio"] + label {
}

section.signup input[type="text"],
section.signup input[type="email"],
section.signup input[type="tel"],
section.signup input[type="date"] {
    margin-top: 0.5em;
    display: inline-block;
    height: 2em;
    line-height: 1.6em;
    padding: 0;
}

section.signup input[type="text"],
section.signup input[type="email"],
section.signup input[type="tel"],
section.signup input[type="date"],
form.signup button {
    margin-left: 0;
    margin-right: 0.4em;
    box-sizing: border-box;
    width: 16.25em;
}

form.signup button[data-verifytype],
input#email_verify,
input#mobile_verify {
    width: 8em;
}

section.signup input[type="button"],
section.signup button,
section.signup #card-element input {
    border-style: solid;
    border-width: 1px;
    border-color: grey;
}

#AddressCapture_FindButton {
    margin-left: 0.4em;
    width: 16.5em;
}

form.signup input.address-line {
    width: 33.5em;
}

form.signup input[name="signed"],
form.signup input[name="terms"],
form.signup input[name="age"] {
    margin-left: 2em;
}

section.signup input[type="submit"] {
    display:            inline-block;
    margin:             0 0 0 0.5em;
    border-width:       0;
    width:              120px;
    height:             60px;
    cursor:             pointer;
    padding:            0;
    background-size:    contain;
    background-repeat:  no-repeat;
}

section.signup small.warning {
    display:            block;
    margin:             0.3em 0 1em 0.8em;
    color:              rgb(80,180,0);
}