:root {
    --national-color: #da3838;
    --toronto-color: #006eb6;
    --bc-color: #da3838;
    --base: #f9f9f9;
    --fail: #ff0000;
    --pass: #3eb33e;
}

/*Util*/

input.membershipIDFail{
    border: 2px solid var(--fail) !important;
}

input.membershipIDPass{
    border: 2px solid var(--pass) !important;
}

.showPayment{
    display: flex;
}

.membershipFail{
    display: block;
    border: 3px solid var(--fail);
    height: 10vh;
    width: 50%;
}

.membershipPass{
    display: block;
    border: 3px solid var(--pass);
    height: 10vh;
    width: 50%;
}

/*General*/

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: #e3e3e3;
}

main{
    width: 60vw;
    height: 60vh;
    border: 2px solid var(--national-color);
    border-radius: 15px;
    background-color: var(--base);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/*Membership Form*/

#membershipForm{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Memebership ID input*/

#membershipID{
    text-align: center;
    text-emphasis: none;
    border: 2px solid var(--base);
    border-radius: 15px;
    outline: none;
}

#membershipID:focus{
    border: 1px solid #000;
}

/*Payment*/

.paymentContainer{
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 40vh;
}

#payment{
    display: block;
    position: relative !important;
}