.content {padding: 80px 5% 120px 10%;}
h1 {margin-bottom: 10px; font-family: var(--font-family-base-heading); font-size: 3rem;}
p {margin-top: 0; font-size: 1.2rem; color: var(--text-colour); line-height: 1.7;}
h2 {margin: 40px 0 0 0; font-family: var(--font-family-base-heading); font-size: 1.4rem;}

.register-wrapper {display: grid; grid-template-columns: 7fr 6fr; gap: 100px;}
.register-panel {position: relative; max-width: 480px; margin: 0 auto; padding:20px; border: 1px solid #eaeaea; box-shadow: 0px 5px 30px 0px #00000025; border-radius: 15px; background-color: white;}
.register-item {margin-bottom: 20px;}
.register-label {margin-bottom: 5px; font-weight: 400; color: var(--text-colour);}
input[type="text"], input[type="password"], select {width: 100%; padding: 12px 10px; color: var(--text-colour); background-color: white; font-size: 1rem; border: 1px solid #999; border-radius: 10px;}
.name-wrapper {justify-content: space-between;}
#first-name, #last-name {width: 48%;}
input[type="radio"] { margin-right: 10px;}
.flex {align-items: center;}
.flex .register-label {margin-right: 20px; margin-bottom: 0;}
.agency-label {color: var(--schoolsnz-blue); font-weight: 600;}
.code-label {margin-top: 10px; font-size: .8rem;}
.register-heading {display:flex; justify-content: center; margin-bottom: 20px; font-size: 1.2rem; font-weight: 600; font-family: var(--font-family-base-heading);}
.error-message {margin-bottom: 20px; font-weight: 400; color: red;}
.h-spinner {width: 50px; margin-left: 20px;}
.register-blocker {
    position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255,255,255,.9); border-radius: 15px;
    opacity: 0; transition-duration: .3s;
}
.register-blocker .big {font-size: 1.4rem; color: var(--text-colour); font-weight: 600; font-family: var(--font-family-base-heading);}
.register-blocker .med {font-size: 1.1rem; color: var(--text-colour); font-weight: 600; font-weight: 400;}
.register-blocker .med-1 {margin-top: 20px;}
.register-blocker .small {display: flex; justify-content: center; height: 30px; margin-top: 20px; font-size: 1rem; color: var(--text-colour); font-weight: 300;}
.register-blocker img {width: 50px; margin-top: 20px; opacity: 0;}

@media screen and (max-width: 1000px) {
    .register-wrapper {grid-template-columns: 1fr; gap: 20px;}
    .register-panel {max-width: 380px;}

    h1 {font-size: 1.5rem;}
    p {font-size: 1rem;}
}