@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

html, body {
    background-color: var(--colours-page-bg);
    color: var(--colours-page-fg);
    font-size: var(--colours-page-fontsize);
    font-family: Lato, 'Open Sans', Arial, sans-serif;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

body.HomePage {
    min-height: 100vh;
}

.footerbuttons {
    display: flex;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    flex-wrap: wrap;
}

    .footerbuttons > * {
        flex-grow: 1;
        display: inline-block;
        padding: 12px 6px;
        background-color: #e88b00;
        color: var(--colours-footerbuttons-fg);
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-size: larger;
        font-family: inherit;
        border: 0;
        cursor: pointer;
        box-shadow: rgb(0 0 0 / 40%) 5px 5px 5px;
    }

    .footerbuttons a:hover, .footerbuttons input:hover {
        background-color: #ffbc2c;
    }

    .footerbuttons > *:not(:last-child) {
        margin-right: 3px;
    }

.headerbox {
    display: grid;
    grid-template-columns: auto 1fr;
    text-align: center;
    margin-bottom: 1rem;
}

    .headerbox img {
        filter: drop-shadow(5px 5px 5px #999);
    }

.headerbox2 {
    align-self: center;
    font-weight: bold;
}

.siteheader1 {
    font-size: 1.2rem;
}

.siteheader2 {
    font-size: 2rem;
}

.userdetailsbox {
    margin-bottom: 1rem;
    background-color: #0a3dab;
    color: white;
    padding: 13px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-column-gap: 1rem;
    align-items: center;
    font-size: 14pt;
    border-radius: 6px;
    box-shadow: 4px 4px 8px 1px #909090;
}

    .userdetailsbox a {
        padding: 14px 30px;
        background-color: #f9c910;
        color: black;
        font-weight: bold;
        border-radius: 5px;
    }

.badnews {
    color: orangered;
    font-weight: bold;
}

.CancelPolicyBox {
    background-color: #efc6f5;
    margin: 1rem 0;
    font-size: small;
}

.totalline {
    font-weight: bold;
    border-top: solid 1px #3f60a3;
    border-bottom: solid 1px #3f60a3;
}

    .totalline > div {
    }

.registationsection {
    border: solid 2px #fca751;
    padding: 9px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background-color: #fff7e9;
    color: #333;
}

    .registationsection > .row {
        background-color: #fff7e9;
        display: grid;
        font-size: 12pt;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1px;
        margin-bottom: 1px;
    }

        .registationsection > .row > div {
            padding: 6px;
            border-bottom: solid 1px #CCC;
        }

table.registationsection th {
    padding: 6px;
    text-align: left;
}

    table.registationsection th.r {
        text-align: right !important;
    }

table.smalltable {
    width: 100%;
    border-collapse: collapse;
}

    table.smalltable td {
        padding: 0;
    }

.workshopinfobox {
    margin: 0.5em 0;
    padding: 10px;
    text-align: center;
}

.red {
    color: orangered;
}

.item3col {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    margin-bottom: 2px;
}

    .item3col > div {
        padding: 6px 0;
    }

        .item3col > div:first-child {
            font-weight: bold;
            padding-left: 1rem;
        }

    .item3col input, .item3col select, .item3col textarea {
        padding: 6px;
        margin: 3px;
        border: solid 1px #CCC;
    }

.help {
    font-weight: lighter;
    color: #999;
    font-size: small;
    font-style: italic;
    margin-left: 1rem;
}

.item3col:focus-within {
    background: lightyellow;
}

    .item3col:focus-within > .help {
        color: #333;
        font-style: normal;
    }

.item3col:hover {
    background: lightyellow;
}

.priceitem {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: solid 2px #fca751;
    padding: 9px;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    background-color: #fff7e9;
    color: #333;
}

.optionalItem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 0.5rem;
    align-items: center;
    margin-bottom: 2px;
    border: solid 2px #fca751;
    background-color: #fff7e9;
    padding: 9px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    color: #333;
}
.optionalItem2 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0.5rem;
    align-items: start;
    margin-bottom: 2px;
    border: solid 2px #51cefc; /* #fca751; */
    background-color: #fff7e9;
    padding: 9px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    color: #333;
}

.item1col {
    margin-bottom: 2px;
    padding: 6px;
}

    .item1col input, .item1col select, .item1col textarea {
        padding: 6px;
        margin: 3px;
        border: solid 1px #CCC;
        width: 100%;
    }


.heading2 {
    font-weight: bold;
    border-bottom: 1px solid #3f60a3;
    margin: 1rem 0;
    color: #3f60a3;
    font-size: 1.2rem;
}

.StripeElement {
    border: 1px solid #333;
    border-radius: 5px;
    padding: 13px;
}

.StripeElement--invalid {
    border: 3px solid orangered;
}

#card-errors {
    font-weight: bold;
    color: orangered;
}

#amountdiv {
    max-width: 25rem;
}

    #amountdiv .item2col {
        grid-template-columns: 10rem auto;
    }

        #amountdiv .item2col > div {
            padding: 3px;
        }

.enrollmentinfo {
    margin: 1rem 0;
}

.comment {
    font-size: small;
    margin-left: 1rem;
}

.eventlistitem {
    border-radius: 6px;
    box-shadow: 6px 6px 10px 1px #909090;
}

    .eventlistitem h1, .eventlistitem h2 {
        margin: 0;
        padding: 16px 0;
    }

    .eventlistitem h3 {
        margin: 0;
        padding: 16px;
    }

    .eventlistitem > input {
        padding: 10px;
    }

    .eventlistitem.eventlistitemfooter a {
        padding: 16px;
        margin: 0;
        text-align: center;
    }

.greybox {
    background-color: #e5e5e5cc;
}

.greytable {
    border: solid 2px #fca751;
    padding: 9px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    color: #333;
}

    .greytable > div {
        background-color: #fff7e9;
        margin-bottom: 3px;
    }

/* Old Stuff */
.EventList {
    max-width: 1200px;
    margin: auto;
    padding: 0 1ch;
}

.OneLineForm {
    display: flex;
    margin-top: 3px;
    margin-bottom: 3px;
}

    .OneLineForm select {
        font-family: inherit;
        font-size: inherit;
        flex: 0 1 auto;
        padding: 3px 0;
    }

        .OneLineForm select:last-child {
            flex-grow: 1;
        }
/* Payment Screen */
.payments-balance-table {
    max-width: 30rem;
    margin-bottom: 1rem;
    font-size: small;
    border: solid 1px #999;
}

    .payments-balance-table > div {
        display: grid;
        grid-template-columns: 1fr auto 2rem;
        padding: 3px 5px;
    }

        .payments-balance-table > div:last-child {
            border-top: solid 1px #999;
            font-weight: bold;
        }

.paymentinstructions {
    margin-bottom: 1rem;
}

#fininfodiv {
    margin-bottom: 1rem;
}

    #fininfodiv > div {
        background-color: #112e57;
        color: white;
        padding: 30px;
    }

.updatepersonbtn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--colours-footerbuttons-bg);
    color: var(--colours-footerbuttons-fg);
    text-align: center;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    border: 0;
    cursor: pointer;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: rgb(0 0 0 / 30%) 5px 5px 5px;
    border-radius: 4px;
}

    .updatepersonbtn:hover {
        background-color: var(--colours-footerbuttons-hover-bg);
        color: var(--colours-footerbuttons-hover-fg);
        text-decoration: none;
    }

/* Workshop Registration TimeBlock Layout */

.WorkshopTimeBlock {
    margin-bottom: 1rem;
}

.DayBlock {
    font-weight: bold;
    background-color: #112e57;
    color: white;
    padding: 9px;
}

.timeslotrow {
    display: grid;
    grid-template-columns: auto 1fr;
}

    .timeslotrow > div {
        padding: 3px;
    }

.WorkshopTimeBlock label + input[type="radio"]:checked + label {
    background-color: hotpink;
}

.regform2col {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 2rem;
    align-items: center;
}

.workshoppopup {
    width: 20rem;
    box-shadow: rgb(0 0 0 / 40%) 5px 5px 5px;
    background-color: #fca751;
    border: solid 2px #fca751;
    padding: 9px;
    border-radius: 6px;
    background-color: #fff7e9;
    color: #333;
    min-width: 0;
}

    .workshoppopup::backdrop {
        background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 20px );
        backdrop-filter: blur(3px);
    }

    .workshoppopup .title {
        color: #26269b;
        margin-bottom: 1rem;
        font-weight: bold;
        font-size: large;
    }

    .workshoppopup .buttonbox {
        margin-top: 1rem;
    }

        .workshoppopup .buttonbox input {
            background-color: #e88b00;
            color: white;
            padding: 8px 18px;
            margin-right: 1rem;
            outline: none;
            border: solid 1px #e88b00;
            border-radius: 4px;
            box-shadow: rgb(0 0 0 / 20%) 5px 5px 5px;
            cursor: pointer;
        }

.workshopinfobox {
    margin: 0.5em 0;
    padding: 10px;
    color: white;
    background-color: orangered;
    text-align: center;
}

.workshopcostline {
    padding: 6px;
    background-color: white;
    border-bottom: solid 2px #ffe2bc;
}

.workshop_isenroled {
    color: #e88b00;
    font-style: italic;
}

    .workshop_isenroled input[type=button] {
        font-weight: bold;
        color: orangered;
    }

.workshop_unenrolbtn {
    background-color: orangered;
    color: white;
    padding: 8px 18px;
    outline: none;
    border: solid 1px orangered;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 40%) 5px 5px 5px;
    cursor: pointer;
    margin-right: 1rem;
}

.workshop_changeoptionbtn, .workshop_canenrol {
    background-color: #e88b00;
    color: white;
    padding: 8px 18px;
    outline: none;
    border: solid 1px #e88b00;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 40%) 5px 5px 5px;
    cursor: pointer;
    margin-right: 1rem;
}

.workshop_cantregister {
    color: #e88b00;
    font-style: italic;
    font-weight: bold;
}

.enrolmentstatusbox {
}

.workshopbox_outer {
    display: grid;
    grid-template-columns: auto 3fr 2fr;
    grid-gap: 1rem;
    border: solid 2px #fca751;
    padding: 9px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background-color: #fff7e9;
    color: #333;
}

.workshop_title {
    font-weight: bold;
    font-size: x-large;
    color: #26269b;
}

.EventStatusBox {
    grid-column: span 2;
}

@media screen and (min-width: 993px) {
    .workshop_title {
        grid-column: span 2;
    }

    .enrolmentstatusbox {
        grid-template-columns: auto 1fr;
    }

    .workshopbox_outer > img {
        grid-row: 1/4;
    }

    .EnrolmentStatusBox {
        grid-column: span 2;
    }

    .enrolmentstatus_inner {
        grid-column: span 2;
        grid-template-columns: auto 1fr;
    }

    .enrolmentstatus_inner {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .enrolmentstatusbox .actionbuttons input[type=button] {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 992px) {
    .workshopbox_outer {
        grid-template-columns: 1fr;
    }

    .enrolmentstatus_inner .actionbuttons input[type=button] {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

.jsondata {
    font-size: 12px;
}

    .jsondata .key {
        font-weight: bold;
        color: deeppink;
    }

    .jsondata .string {
        font-weight: bold;
        color: rebeccapurple;
    }

    .jsondata .number {
        font-weight: bold;
        color: forestgreen;
    }


.jsondatapopup {
    box-shadow: rgb(0 0 0 / 40%) 5px 5px 5px;
    border-radius: 6px;
    color: #333;
    min-width: 0;
}

    .jsondatapopup::backdrop {
        background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 20px );
        backdrop-filter: blur(3px);
    }

    .jsondatapopup .title {
        color: #26269b;
        margin-bottom: 1rem;
        font-weight: bold;
        font-size: large;
    }

    .jsondatapopup .buttonbox {
        margin-top: 1rem;
    }

        .jsondatapopup .buttonbox input {
            background-color: #e88b00;
            color: white;
            padding: 8px 18px;
            margin-right: 1rem;
            outline: none;
            border: solid 1px #e88b00;
            border-radius: 4px;
            box-shadow: rgb(0 0 0 / 20%) 5px 5px 5px;
            cursor: pointer;
        }
.xm-button {
    padding: 8px 25px;
    background-color: #0b77fb;
    color: white !important;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    border-width: 0px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

    .xm-button:hover {
        background-color: #58a1fa;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    }