/* DTOL styles */

/* Major Third & Major Second typography scale : https://type-scale.com : https://www.modularscale.com : 0.8, 1, 1.125, 1.25, 1.563, 2.441 */

/* Media queries : 480 768 992 1200 : https://ricostacruz.com/til/css-media-query-breakpoints */

/* Colour wheel : https://www.sessions.edu/color-calculator/ */

/* CSS Variables */
:root {
    /* use user's prefer-color-scheme preference: https://www.htmhell.dev/adventcalendar/2022/19/ */
    color-scheme: light dark;

    --dtol-account-gold-color: #334b5b;
    --dtol-account-gold-background-color: #e6d5a1;
    --dtol-account-gold-border-color: #d4af37;
    --dtol-account-label-color: #999999;
    --dtol-active-color: #77c700;
    --dtol-admin-table-row-odd-background-color: #ffffff;
    --dtol-background-color: #f3f9fc;
    --dtol-countries-highlight-color: #cccccc;
    --dtol-dark-grey-color: #333333;
    --dtol-footer-color: #f3f9fc;
    --dtol-footer-background-color: #666666;
    --dtol-form-background-color: #dddddd;
    --dtol-form-border-color: #bbbbbb;
    --dtol-form-button-colour: #ffffff;
    --dtol-form-button-background-colour: #ff6900;
    --dtol-form-button-disabled-colour: #cccccc;
    --dtol-form-button-hover-colour: #0096ff;
    --dtol-form-button-inactive-colour: #999999;
    --dtol-form-error-color: #ff6900;
    --dtol-form-error-background-color: #fff8b3;
    --dtol-form-input-colour: #334b5b;
    --dtol-form-input-background-colour: #ffffff;
    --dtol-form-label-color: #666666;
    --dtol-form-legend-color: #ff6900;
    --dtol-form-legend-backgound-color: #ffffff;
    --dtol-gold-color: #d4af37;
    --dtol-header-color: #f3f9fc;
    --dtol-header-background-color: #0096ff;
    --dtol-home-section-background-color: #ffffff;    
    --dtol-inactive-color: #ff0096;
    --dtol-info-highlight-background-color: #def1ff;
    --dtol-job-seekers-highlight-background-color: #ffecde;
    --dtol-job-seekers-color: #ff6900;
    --dtol-jobs-color: #ff0096;
    --dtol-jobs-highlight-background-color: #ffdef1;
    --dtol-light-gold-color: #e6d5a1;
    --dtol-light-grey-color: #999999;
    --dtol-link-color: #0096ff;
    --dtol-main-item-border-color: #cccccc;
    --dtol-main-span-color: #999999;
    --dtol-members-color: #0096ff;
    --dtol-middle-grey-color: #666666;
    --dtol-nav-color: #f3f9fc;
    --dtol-nav-background-color: #999999;
    --dtol-nav-highlight-color: #666666;
    --dtol-nav-shadow-color: #333333;
    --dtol-popup-background-color: #00000099;  /* black with opacity */
    --dtol-text-color: #334b5b;
    --dtol-very-light-grey-color: #cccccc;
    --dtol-white-color: #ffffff;

    --dtol-small-font-size: 0.8rem;
    --dtol-normal-font-size: 1rem;
    --dtol-large-font-size: 1.125rem;
    --dtol-sub-heading-font-size: 1.25rem;
    --dtol-heading-font-size: 1.563rem;
    --dtol-title-font-size: 2.441rem;
    --dtol-banner-width: 280px;

    --dtol-normal-font-weight: 400;
    --dtol-bold-font-weight: 700;
}

/* Dark Mode colours */
@media (prefers-color-scheme: dark) {
    :root {
        --dtol-account-gold-color: #c5cacc;
        --dtol-account-gold-background-color: #4C4326;
        --dtol-account-gold-border-color: #D4BB6A;
        --dtol-account-label-color: #949799;
        --dtol-admin-table-row-odd-background-color: #334b5b;
        --dtol-background-color: #243541;
        --dtol-countries-highlight-color: #405F73;
        --dtol-form-error-color: #c5cacc;
        --dtol-form-error-background-color: #4C2B26;
        --dtol-footer-color: #c5cacc;
        --dtol-form-background-color: #405F73;
        --dtol-form-border-color: #405F73;
        --dtol-form-button-colour: #334b5b;
        --dtol-form-button-background-colour: #ff6900;
        --dtol-form-button-disabled-colour: #cccccc;
        --dtol-form-button-hover-colour: #7fcaff;
        --dtol-form-button-inactive-colour: #999999;
        --dtol-form-input-colour: #c5cacc;
        --dtol-form-input-background-colour: #243541;
        --dtol-form-label-color: #c5cacc;
        --dtol-form-legend-color: #334b5b;
        --dtol-form-legend-backgound-color: #6B9EBF;
        --dtol-home-section-background-color: #243541;
        --dtol-info-highlight-background-color: #405F73;
        --dtol-job-seekers-highlight-background-color: #4C4641;
        --dtol-jobs-highlight-background-color: #4C4148;
        --dtol-link-color: #7fcaff;
        --dtol-main-item-border-color: #405F73;
        --dtol-main-span-color: #949799;
        --dtol-nav-color: #c5cacc;
        --dtol-nav-background-color: #666666;
        --dtol-nav-highlight-color: #333333;
        --dtol-nav-shadow-color: #333333;
        --dtol-text-color: #c5cacc;
    }
}



body {
    background-color: var(--dtol-background-color);
    color: var(--dtol-text-color);
    display: flex;
    flex-direction: column;
    font-family: "Lato", sans-serif;
    font-size: var(--dtol-normal-font-size);
    font-weight: var(--dtol-normal-font-weight);
}



/* Common */
.show {
    display: block !important;
}

.hide {
    display: none !important;
}

.clear {
    clear: both;
}



/* Header */
header.dtol-header {
    align-items: center;
    background-color: var(--dtol-header-background-color);
    display: flex;
}

header.dtol-header a {
    color: var(--dtol-header-color);
    text-decoration: none;
}

header.dtol-header p {
    background-image: url(/apple-touch-icon.png);
    background-repeat: no-repeat;
    background-size: 2.5rem;
    background-position-x: 1rem;
    background-position-y: 0rem;
}

header.dtol-header p a {
    display: block;
    font-size: var(--dtol-heading-font-size);
    padding: 0.25rem 0 0.25rem 4rem;
}

header.dtol-header p a strong {
    font-weight: var(--dtol-bold-font-weight);
    padding-right: 0.75rem;
}

header.dtol-header div {
    margin-left: auto;
    padding: 0.25rem 1rem 0.25rem 0;
}

header.dtol-header div a:hover {
    text-decoration: underline;
}

header.dtol-header div a:last-child {
    border-left: 1px solid var(--dtol-header-color);
    padding-left: 0.75rem;
    margin-left: 0.5rem;
}

header.dtol-header div a.dtol-header-account {
    background-image: url(/images/account.png);
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    background-size: 1rem;
    padding: 0 0 0 1.5rem;
}

/* smaller screen adjustments */
@media only screen and (max-width: 992px) {
    header.dtol-header {
        box-shadow: 0rem 0.25rem 1rem var(--dtol-light-grey-color);
    }

    header.dtol-header p {
        background-size: 2rem;
        background-position-x: 3rem;
        background-position-y: 0rem;
    }

    header.dtol-header p a {
        padding: 0 0 0 5.5rem;
    }

    header.dtol-header p a span {
        font-size: var(--dtol-sub-heading-font-size);
    }

    /* Dark Mode changes */
    @media (prefers-color-scheme: dark) {
        header.dtol-header {
            box-shadow: none;
        }
    }
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    header.dtol-header p a strong {
        padding-right: 0;
    }

    header.dtol-header p a span {
        display: none;
    }

    header.dtol-header div a.dtol-header-sign-out {
        display: none;
    }
}



/* Navigation bar directly beneath Header */
nav.dtol-nav {
    background-color: var(--dtol-nav-background-color);
    box-shadow: 0rem 0.25rem 1rem var(--dtol-nav-background-color);
    margin: 0;
    padding: 0;
}

nav.dtol-nav label,
nav.dtol-nav input {
    display: none;
}

nav.dtol-nav ul {
    display: flex;
    margin: 0;
    padding: 0;
}

nav.dtol-nav ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

nav.dtol-nav ul li a {
    color: var(--dtol-nav-color);
    display: flex;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    white-space: nowrap;
}

nav.dtol-nav ul li a:hover {
    background-color: var(--dtol-nav-highlight-color);
}

nav.dtol-nav ul li ul {
    background-color: var(--dtol-nav-background-color);
    box-shadow: 0rem 0.5rem 1rem var(--dtol-nav-shadow-color);
    display: none;
    position: absolute;
    z-index: 999;   /* should be higher than all others */
}

nav.dtol-nav ul li:hover > ul {
    display: block;
}

/* Dark Mode changes */
@media (prefers-color-scheme: dark) {
    nav.dtol-nav {
        box-shadow: none;
    }
}

/* smaller screen adjustments => use a 'hamburger' menu instead for navigation */
@media only screen and (max-width: 992px) {
    nav.dtol-nav {
        box-shadow: none;
    }
    
        /* move the hamburger menu to the top-left of the header */
    nav.dtol-nav label {
        background-color: var(--dtol-nav-background-color);
        display: inline-block;
        color: var(--dtol-nav-color);
        font-style: normal;
        font-size: var(--dtol-heading-font-size);
        padding: 0 0.5rem;
        position: absolute;
        top: 0;
        left: 0;
    }

    nav.dtol-nav input ~ ul {
        background-color: var(--dtol-nav-background-color);
        box-shadow: 0.5rem 0.5rem 1rem var(--dtol-nav-highlight-color);
        display: block;
        left: -16rem;
        position: absolute;
        top: 2.3125rem;
        transition: left 0.5s;
        width: auto;
        z-index: 999;   /* to appear above main content */
    }

    /* toggle show/hide the navigation from the hamburger menu */
    nav.dtol-nav input:checked ~ ul {
        left: 0;
    }

    nav.dtol-nav ul li a {
        display: block;
        padding: 0.75rem 1rem;
    }

    nav.dtol-nav ul li ul {
        box-shadow: none;
        display: block;
        position: relative;
        transition: none;
    }

    nav.dtol-nav ul li ul li a {
        padding-left: 3rem;
    }
}



/* Footer fixed to bottom */
footer.dtol-footer {
    background-color: var(--dtol-footer-background-color);
    color: var(--dtol-footer-color);
    display: flex;
    font-size: var(--dtol-small-font-size);
    /* extra space at bottom for touch-screens */
    padding: 0.5rem 1rem 2rem 1rem;
}

footer.dtol-footer ul {
    display: flex;
    margin: 0 0 0 auto;
    padding: 0;
}

footer.dtol-footer ul li {
    border-left: 1px solid var(--dtol-footer-color);
    display: block;
    list-style: none;
    margin: 0 0 0 0.5rem;
    padding: 0 0 0 0.5rem;
}

footer.dtol-footer ul li:first-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

footer.dtol-footer ul li a {
    color: var(--dtol-footer-color);
    text-decoration: none;
}

footer.dtol-footer ul li a:hover {
    text-decoration: underline;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    footer.dtol-footer {
        flex-wrap: wrap;
    }

    footer.dtol-footer ul {
        margin: 0.5rem auto 0 0;
    }
}



/* GDPR Cookie bar fixed to bottom of browser window */
section.dtol-cookies {
    align-items: center;
    background: var(--dtol-light-grey-color);
    bottom: 0;
    color: var(--dtol-background-color);
    display: flex;
    left: 0;
    padding: 0.25rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

section.dtol-cookies-hide {
    display: none;
}

section.dtol-cookies p {
    margin: 0 1rem 0 auto;
}

section.dtol-cookies p a {
    color: var(--dtol-background-color);
    text-decoration: none;
}

section.dtol-cookies p a:hover {
    text-decoration: underline;
}

section.dtol-cookies button {
    background: var(--dtol-job-seekers-color);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0 0.25rem var(--dtol-job-seekers-color);
    color: var(--dtol-white-color);
    cursor: pointer;
    margin: 0 auto 0 0;
    padding: 0.25rem 1rem;
}

section.dtol-cookies button:hover {
    background: var(--dtol-link-color) !important;
    box-shadow: 0 0 0.25rem var(--dtol-link-color) !important;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    section.dtol-cookies {
        font-size: var(--dtol-small-font-size);
    }
}



/* Common wrapper for middle content */
div.dtol-content {
    flex: 1;
    margin: 0 auto 1rem auto;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    div.dtol-content {
        margin: 0 0 1rem 0;
        width: 100%;
    }
}



/* Pop-ups */
div.dtol-popup {
    background: var(--dtol-popup-background-color);  /* black with opacity */
    display: flex;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
}

div.dtol-popup-photo:hover {
    cursor: zoom-out;
}

div.dtol-popup-show {
    visibility: visible;
}

div.dtol-popup div {
    background-color: var(--dtol-background-color);
    border: 1px solid var(--dtol-middle-grey-color);
    border-radius: 1rem;
    box-shadow: 0 0 3rem var(--dtol-dark-grey-color);
    margin: auto auto;
    padding: 1rem 2rem;
}

div.dtol-popup-photo div {
    background: var(--dtol-white-color);
    border: none;
    border-radius: 0;
    padding: 0;
}

div.dtol-popup div h4 {
    font-size: var(--dtol-sub-heading-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin: 0 0 0.5rem 0;
}

div.dtol-popup-photo div img {
    display: block;
}



/* Home page */
main.dtol-home {
    height: 40rem;  /* 640px */
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
    width: 60rem;   /* 960px */
}

main.dtol-home img.dtol-home-background {
    border-radius: 1rem;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

main.dtol-home h1 {
    background-color: var(--dtol-members-color);
    border-radius: 1rem;
    color: var(--dtol-white-color);
    font-size: var(--dtol-title-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin: 3rem auto 0 auto;
    opacity: 0.8;
    padding: 0.5rem;
    position: relative;
    text-align: center;
    width: 50%;
    z-index: 2;
}

main.dtol-home h1 span {
    opacity: 1.0;
}

main.dtol-home article {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 3;
}

main.dtol-home article section {
    margin: 3rem 0.5rem 0 0.5rem;
    width: 18rem;   /* 290px ish */
}

main.dtol-home article section.dtol-home-error {
    width: 50%;
}

main.dtol-home article section a {
    background-color: var(--dtol-home-section-background-color);
    border-color: var(--dtol-members-color);
    border-radius: 1rem;
    border-width: 0.3125rem;
    border-style: solid;
    display: block;
    height: 100%;
    opacity: 0.8;
    padding: 1.25rem;
    text-decoration: none;
}

main.dtol-home article section.dtol-home-jobs a {
    border-color: var(--dtol-jobs-color);
}

main.dtol-home article section.dtol-home-job-seekers a {
    border-color: var(--dtol-job-seekers-color);
}

main.dtol-home article section a:hover {
    background-color: var(--dtol-members-color);
    box-shadow: 0 0 1rem var(--dtol-middle-grey-color);
    opacity: 1.0;
}

main.dtol-home article section.dtol-home-jobs a:hover {
    background-color: var(--dtol-jobs-color);
}

main.dtol-home article section.dtol-home-job-seekers a:hover {
    background-color: var(--dtol-job-seekers-color);
}

main.dtol-home article section h2 {
    color: var(--dtol-members-color);
    font-size: var(--dtol-heading-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin-bottom: 0.5rem;
    opacity: 1.0;
}

main.dtol-home article section h3 {
    color: var(--dtol-members-color);
    font-size: var(--dtol-large-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin-bottom: 0.5rem;
    opacity: 1.0;
}

main.dtol-home article section.dtol-home-jobs h2,
main.dtol-home article section.dtol-home-jobs h3 {
    color: var(--dtol-jobs-color);
}

main.dtol-home article section.dtol-home-job-seekers h2,
main.dtol-home article section.dtol-home-job-seekers h3 {
        color: var(--dtol-job-seekers-color);
}

main.dtol-home article section.dtol-home-error h2 {
    margin: 0.5rem 0 0 0;
    text-align: center;
}

main.dtol-home article section h2 strong {
    font-weight: var(--dtol-bold-font-weight);
}

main.dtol-home article section a:hover h2,
main.dtol-home article section a:hover h3 {
    color: var(--dtol-white-color);
}

main.dtol-home article section p {
    color: var(--dtol-text-color);
    opacity: 1.0;
}

main.dtol-home article section.dtol-home-error p {
    text-align: center;
}

main.dtol-home article section a:hover p {
    color: var(--dtol-white-color);
}

/* smaller screen adjustments */
@media only screen and (max-width: 992px) {
    main.dtol-home {
        height: auto;
        margin-top: 0;
        position: relative;
        width: auto;
    }

    main.dtol-home img.dtol-home-background {
        border-radius: 0;
        height: auto;
    }

    main.dtol-home h1 {
        font-size: var(--dtol-heading-font-size);
        margin: 2rem auto 1rem auto;
    }

    main.dtol-home article section {
        margin: 1rem 2rem 1rem 2rem;
        width: 100%;
    }

    main.dtol-home article section a {
        border-width: 0.25rem;
        padding: 0.5rem 1rem;
    }
    
    main.dtol-home article section h2 {
        font-size: var(--dtol-sub-heading-font-size);
        margin-bottom: 0.25rem;
    }
    
    main.dtol-home article section h3 {
        margin-bottom: 0.25rem;
    }
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-home img.dtol-home-background {
        left: auto;
        position: relative;
        top: auto;
    }

    main.dtol-home h1 {
        font-size: var(--dtol-heading-font-size);
        left: 50%;
        margin: -1.2815rem 0 0 -9.5rem;
        position: absolute;
        top: 32vw;
        width: 19rem;
    }

    main.dtol-home article section {
        margin: 1rem 1rem 1rem 1rem;
        width: 100%;
    }

    main.dtol-home article section.dtol-home-error {
        width: 19rem;
    }

    main.dtol-home article section a {
        opacity: 1;
    }
}



/* Common classes for all pages (except home) */
main.dtol-main {
    margin: 1rem auto;
    max-width: 45rem;
}

main.dtol-main h1 {
    font-size: var(--dtol-title-font-size);
    font-weight: var(--dtol-normal-font-weight);
}

main.dtol-main h1 a {
    text-decoration: none;
}

main.dtol-main h1 a:hover {
    text-decoration: underline;
}

main.dtol-main h2 {
    font-size: var(--dtol-heading-font-size);
    font-weight: var(--dtol-normal-font-weight);
}

main.dtol-main h3 {
    font-size: var(--dtol-sub-heading-font-size);
    font-weight: var(--dtol-normal-font-weight);
}

main.dtol-main h4 {
    font-size: var(--dtol-sub-heading-font-size);
    font-weight: var(--dtol-normal-font-weight);
}

main.dtol-main h5 {
    font-size: var(--dtol-large-font-size);
    font-weight: var(--dtol-normal-font-weight);
}

main.dtol-main section {
    margin: 2rem 0 0 0;
}

main.dtol-main section.dtol-main-item {
    border: 0;
    border-top: 2px solid var(--dtol-main-item-border-color);
    padding-top: 0.5rem;
}

main.dtol-main p {
    overflow-wrap: break-word;
}

/* Admin fields in smaller font */
main.dtol-main p.dtol-main-admin {
    font-size: var(--dtol-small-font-size);
}

main.dtol-main p.dtol-main-admin-highlight {
    font-weight: var(--dtol-bold-font-weight);
}

main.dtol-main p.dtol-main-secondary {
    color: var(--dtol-light-grey-color);
}

main.dtol-main p.dtol-main-active {
    color: var(--dtol-active-color);
}

main.dtol-main p.dtol-main-inactive {
    color: var(--dtol-inactive-color);
}

main.dtol-main p span {
    color: var(--dtol-main-span-color);
}

main.dtol-main p a {
    color: var(--dtol-link-color);
    text-decoration: none;
}

main.dtol-main p a:hover {
    text-decoration: underline;
}

main.dtol-main address,
main.dtol-main p span.dtol-main-phone,
main.dtol-main p span.dtol-main-mobile,
main.dtol-main p span.dtol-main-email,
main.dtol-main p span.dtol-main-website {
    background-position-x: 0;
    background-position-y: 4px;
    background-repeat: no-repeat;
    background-size: 16px;
    color: var(--dtol-text-color);
    display: block;
    overflow-wrap: break-word;
    padding-left: 24px;
}

main.dtol-main address {
    background-image: url(/images/address.png);
    font-style: normal;
}

main.dtol-main p span.dtol-main-phone {
    background-image: url(/images/phone.png);
}

main.dtol-main p span.dtol-main-mobile {
    background-image: url(/images/mobile.png);
}

main.dtol-main p span.dtol-main-email {
    background-image: url(/images/email.png);
}

main.dtol-main p span.dtol-main-website {
    background-image: url(/images/website.png);
}

main.dtol-main ul li a {
    color: var(--dtol-link-color);
    text-decoration: none;
}

main.dtol-main ul li a:hover {
    text-decoration: underline;
}

main.dtol-main span.dtol-main-photo {
    float: left;
    margin: 0 1rem 1rem 0;
}

main.dtol-main span.dtol-main-photo img {
    display: block;
    border-radius: 1rem;
    height: 80px;
    object-fit: cover;
    width: 80px;
}

main.dtol-main p.dtol-main-photos {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -2rem;
}

main.dtol-main p.dtol-main-photos span {
    margin: 1rem 0 0 2rem;
}

main.dtol-main p.dtol-main-photos span img {
    border-radius: 1rem;
    display: block;
    height: 160px;
    object-fit: cover;
    width: 160px;
}

main.dtol-main span.dtol-main-photo:hover img,
main.dtol-main p.dtol-main-photos span:hover img {
    box-shadow: 0 0 1rem var(--dtol-light-grey-color);
    cursor: zoom-in;
}

/* Banner image ads 2 columns of 560 width x 200 height displayed at 50% for hi-res */
main.dtol-main section.dtol-main-banners {
    display: flex;
    flex-direction: row;
}

main.dtol-main section.dtol-main-banners div {
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

main.dtol-main section.dtol-main-banners div a img {
    width: var(--dtol-banner-width);
}



/* below iPad (vertical) adjustments */
@media only screen and (max-width: 767px) {
    main.dtol-main {
        margin: 1rem;
        width: auto;
    }

    main.dtol-main h1 {
        font-size: var(--dtol-heading-font-size);
    }

    main.dtol-main h2 {
        font-size: var(--dtol-sub-heading-font-size);
    }
}

/* banners go 1 per row below 620px */
@media only screen and (max-width: 620px) {
    main.dtol-main section.dtol-main-banners {
        flex-direction: column;
    }

    main.dtol-main section.dtol-main-banners div {
        margin-bottom: 1rem;
    }
}


/* iPhone 7/8 adjustments */
@media only screen and (max-width: 375px) {
    main.dtol-main p.dtol-main-photos {
        margin-left: -1rem;
    }
    
    main.dtol-main p.dtol-main-photos span {
        margin-left: 1rem;
    }
}

/* iPhone SE adjustments */
@media only screen and (max-width: 360px) {
    main.dtol-main {
        margin: 1rem 0.75rem;
    }

    main.dtol-main p.dtol-main-photos span img {
        height: 136px;
        width: 136px;
    }
}



/* "Looking for work" page */
main.dtol-job-seekers h1,
main.dtol-job-seekers h4 {
    color: var(--dtol-job-seekers-color);
}

main.dtol-job-seekers h4.dtol-job-seekers-account {
    background-image: url(/images/account-job-seekers.png);
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0.25rem;
    background-size: 1rem;
    padding: 0 0 0 1.5rem;
}

main.dtol-job-seekers section.dtol-job-seekers-highlight {
    background: var(--dtol-job-seekers-highlight-background-color);
    border: 2px dashed var(--dtol-job-seekers-color);
    border-radius: 1rem;
    display: block;
    margin: 1rem 0;
	padding: 0.5rem 1rem;
}

main.dtol-job-seekers p.dtol-main-admin-highlight,
main.dtol-job-seekers p.dtol-main-admin-highlight span {
    color: var(--dtol-job-seekers-color);
}

/* larger gap when used after forms */
main.dtol-job-seekers form + section.dtol-job-seekers-highlight {
    margin: 2rem 0 0 0;
}



/* Jobs page */
main.dtol-jobs h1,
main.dtol-jobs h4 {
    color: var(--dtol-jobs-color);
}

main.dtol-jobs h5 {
    color: var(--dtol-job-seekers-color);
    font-size: var(--dtol-normal-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin: 1rem 0 0 0;
}

main.dtol-jobs section.dtol-jobs-highlight {
    background: var(--dtol-jobs-highlight-background-color);
    border: 2px dashed var(--dtol-jobs-color);
    border-radius: 1rem;
    display: block;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
}

main.dtol-jobs p.dtol-main-admin-highlight,
main.dtol-jobs p.dtol-main-admin-highlight span {
    color: var(--dtol-jobs-color);
}

/* larger gap when used after forms */
main.dtol-jobs form + section.dtol-jobs-highlight {
    margin: 2rem 0 0 0;
}



/* Find a Dance Teacher — Countries page */
main.dtol-countries h1,
main.dtol-countries h1 a {
    color: var(--dtol-members-color);
}


main.dtol-countries section.dtol-countries-list {
    margin-top: 1rem;
}

main.dtol-countries section.dtol-countries-list:first-of-type {
    margin-top: 0;
}

main.dtol-countries section.dtol-countries-top {
    margin-top: 1rem !important;
}

main.dtol-countries section.dtol-countries-list h3 {
    font-size: var(--dtol-normal-font-size);
}

main.dtol-countries section.dtol-countries-list ul {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0;
    padding: 0;
}

main.dtol-countries section.dtol-countries-list ul li {
    list-style: none;
    margin: 0 3% 0 0;
    padding: 0;
    width: 30%;
}

main.dtol-countries section.dtol-countries-list ul li h4 {
    font-size: var(--dtol-normal-font-size);
    margin: 0;
}

main.dtol-countries section.dtol-countries-list ul li h4 a {
    color: var(--dtol-members-color);
    display: block;
    padding: 0.25rem 0 0.25rem 32px;
    position: relative;
    text-decoration: none;
    width: 100%;
}

main.dtol-countries section.dtol-countries-list ul li h4 a:hover {
    text-decoration: underline;
}

main.dtol-countries section.dtol-countries-list ul li h4 a img {
    left: 0;
    position: absolute;
    top: 0.25rem;
}

/* "skip to region" area below top countries */
main.dtol-countries div {
    background-color: var(--dtol-countries-highlight-color);
    border-radius: 1rem;
    border-width: 0;
    margin: 2rem 0 0 0;
    padding: 0.5rem 1rem;
}

main.dtol-countries div p {
    font-size: var(--dtol-small-font-size);
}

main.dtol-countries div ul {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0;
    padding: 0;
}

main.dtol-countries div ul li {
    list-style: none;
    margin: 0 1.25rem 0 0;
    padding: 0;
}

main.dtol-countries div ul li:last-child {
    margin-right: 0;
}

main.dtol-countries div ul li a {
    color: var(--dtol-text-color);
    display: block;
    padding: 0.25rem 0;
    text-decoration: none;
    width: auto;
}

main.dtol-countries div ul li a:hover {
    text-decoration: underline;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-countries div ul li:first-child {
        display: none;
    }

    main.dtol-countries section.dtol-countries-list ul li {
        margin: 0 5% 0 0;
        width: 45%;
    }
}



/* Find a Dance Teacher — Subdivisions within a Country page */
main.dtol-subdivisions h1,
main.dtol-subdivisions h1 a {
    color: var(--dtol-members-color);
}

main.dtol-subdivisions h2 {
    margin-top: 1rem;
    padding: 0 0 0 32px;
    position: relative;
}

main.dtol-subdivisions h2 img {
    left: 0;
    position: absolute;
    top: 0.3125rem;
}

main.dtol-subdivisions h2 a {
    color: var(--dtol-members-color);
    text-decoration: none;
}

main.dtol-subdivisions h2 a:hover {
    text-decoration: underline;
}

main.dtol-subdivisions section {
    margin-top: 1rem;
}

main.dtol-subdivisions section ul {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0;
    padding: 0;
}

main.dtol-subdivisions section ul li {
    list-style: none;
    margin: 0 5% 0 0;
    padding: 0;
    width: 45%;
}

main.dtol-subdivisions section ul li a {
    color: var(--dtol-link-color);
    display: inline-block;
    padding: 0.5rem 0;
    position: relative;
    text-decoration: none;
    width: auto;
}

main.dtol-subdivisions section ul li a:hover {
    text-decoration: underline;
}


/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-subdivisions h2 img {
        top: 0.125rem;
    }
    
    main.dtol-subdivisions section ul {
        display: block;
    }
    
    main.dtol-subdivisions section ul li {
        margin: 0;
        width: 100%;
    }
}



/* Find a Dance Teacher — Members page */
main.dtol-members h1,
main.dtol-members h1 a {
    color: var(--dtol-members-color);
}

main.dtol-members h2 {
    margin-top: 1rem;
    padding: 0 0 0 32px;
    position: relative;
}

main.dtol-members h2 a {
    color: var(--dtol-members-color);
    text-decoration: none;
}

main.dtol-members h2 a:hover {
    text-decoration: underline;
}

main.dtol-members h2 img {
    left: 0;
    position: absolute;
    top: 0.3125rem;
}

main.dtol-members h3 {
    padding: 0 0 0 32px;
}

main.dtol-members h4 {
    color: var(--dtol-job-seekers-color);
}

main.dtol-members p.dtol-members-icons {
    display: flex;
    margin-top: 0.25rem;
}

main.dtol-members p.dtol-members-icons a {
    display: block;
    height: 1.5rem;
}

main.dtol-members p.dtol-members-icons a + a {
    margin-left: 1rem;
}

main.dtol-members p.dtol-members-icons a img {
    height: 100%;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-members h2 img {
        top: 0.125rem;
    }

    main.dtol-members h3 {
        font-size: var(--dtol-large-font-size);
    }
}



/* Advertising, Privacy Policy, etc. */
main.dtol-info h1 {
    color: var(--dtol-members-color);
}

main.dtol-info h3 {
    color: var(--dtol-job-seekers-color);
    margin: 2rem 0 0 0;
}

main.dtol-info h5 {
    margin: 1rem 0 0 0;
}

main.dtol-info h5 + ul {
    margin: 0;
}

main.dtol-info p {
    margin: 1rem 0 0 0;
}

main.dtol-info h3 + p {
    margin: 0.5rem 0 0 0;
}

main.dtol-info p small {
    font-size: var(--dtol-small-font-size);
}

main.dtol-info p strong {
    font-weight: var(--dtol-bold-font-weight);
}

main.dtol-info section.dtol-info-highlight {
    background: var(--dtol-info-highlight-background-color);
    border: 2px dashed var(--dtol-members-color);
    border-radius: 1rem;
    display: block;
    margin: 1rem 0;
	padding: 0.5rem 1rem;
}

main.dtol-info section.dtol-info-highlight p:first-child {
    margin: 0;
}



/* Forms */
/* and Simple forms in admin lists and for searching */
form.dtol-mini-form {
    margin: 0;
}

main.dtol-form p {
    margin: 1rem 0 0 0;
}

/* Legal text */
main.dtol-form p.dtol-form-legal {
    color: var(--dtol-light-grey-color);
    font-size: var(--dtol-small-font-size);
    margin: 1rem 0;
}

main.dtol-form p.dtol-form-legal a {
    color: var(--dtol-light-grey-color);
    font-weight: var(--dtol-bold-font-weight);
}

main.dtol-form form fieldset,
form.dtol-mini-form fieldset {
    background: var(--dtol-form-background-color);
	border: 1px dashed var(--dtol-form-border-color);
	border-radius: 1rem;
	margin: 2rem 0;
	padding: 0rem 1rem 1rem 1rem;
}

main.dtol-form form fieldset legend,
form.dtol-mini-form fieldset legend {
	background: var(--dtol-form-legend-backgound-color);
	border: 1px solid var(--dtol-form-border-color);
    color: var(--dtol-form-legend-color);
	display: block;
	padding: 0 0.5rem;
	float: right;
	margin: -0.9rem 0 0 0;
}

main.dtol-form form fieldset p,
form.dtol-mini-form fieldset p {
	margin: 1rem 0 0 0;
}

main.dtol-form form fieldset p.dtol-form-condensed,
form.dtol-mini-form fieldset p.dtol-form-condensed {
	margin: 0.25rem 0 0 0;
}

main.dtol-form form fieldset p label,
form.dtol-mini-form fieldset p label {
	color: var(--dtol-form-label-color);
	display: block;
	margin: 0 0 0.25rem 0.25rem;
}

main.dtol-form form fieldset p input[type=text],
form.dtol-mini-form fieldset p input[type=text],
main.dtol-form form fieldset p input[type=email],
main.dtol-form form fieldset p input[type=password],
main.dtol-form form fieldset p input[type=tel],
main.dtol-form form fieldset p input[type=url] {
    background-color: var(--dtol-form-input-background-colour);
    border: none;
    border-radius: 0.25rem;
    color: var(--dtol-form-input-colour);
    display: block;
    outline: none;
    padding: 0.25rem 0.5rem;
    width: 20rem;
}

main.dtol-form form fieldset p textarea {
    background-color: var(--dtol-form-input-background-colour);
    border: none;
    border-radius: 0.25rem;
    color: var(--dtol-form-input-colour);
    display: block;
    outline: none;
    padding: 0.25rem 0.5rem;
    width: 30rem;
    -webkit-appearance: none;
}

/* Give textarea same width as an input field */
main.dtol-form form fieldset p textarea.dtol-form-narrow {
    width: 20rem;
}

main.dtol-form form fieldset p input[type=text]:focus,
form.dtol-mini-form fieldset p input[type=text]:focus,
main.dtol-form form fieldset p input[type=email]:focus,
main.dtol-form form fieldset p input[type=password]:focus,
main.dtol-form form fieldset p input[type=tel]:focus,
main.dtol-form form fieldset p input[type=url]:focus,
main.dtol-form form fieldset p textarea:focus {
    box-shadow: 0 0 0 0.125rem var(--dtol-link-color);
    -webkit-appearance: none;
}

main.dtol-form form fieldset p.dtol-form-radio,
form.dtol-mini-form fieldset p.dtol-form-radio {
    display: flex;
}

main.dtol-form form fieldset p.dtol-form-radio-list {
    display: block;
}

main.dtol-form form fieldset p.dtol-form-radio label:first-child,
form.dtol-mini-form fieldset p.dtol-form-radio label:first-child {
    display: inline-block;
    margin: 0 1rem 0 0;
    padding: 0;
}

main.dtol-form form fieldset p.dtol-form-radio span,
form.dtol-mini-form fieldset p.dtol-form-radio span {
    display: block;
}

main.dtol-form form fieldset p.dtol-form-radio-list span,
form.dtol-mini-form fieldset p.dtol-form-radio-list span {
    margin-top: 1rem;
}

main.dtol-form form fieldset p.dtol-form-radio span + span,
form.dtol-mini-form fieldset p.dtol-form-radio span + span {
    margin-left: 2rem;
}

main.dtol-form form fieldset p.dtol-form-radio-list span + span,
form.dtol-mini-form fieldset p.dtol-form-radio-list span + span {
    margin-left: 0;
}

main.dtol-form form fieldset p.dtol-form-radio span input[type=radio],
form.dtol-mini-form fieldset p.dtol-form-radio span input[type=radio] {
    display: inline-block;
    margin: 0;
    padding: 0;
}

main.dtol-form form fieldset p.dtol-form-radio span label,
form.dtol-mini-form fieldset p.dtol-form-radio span label {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Make form buttons available as simple forms in admin lists */
main.dtol-form form button,
form.dtol-mini-form button,
main.dtol-form form input[type=file] + label,
form.dtol-mini-form input[type=file] + label {
    background: var(--dtol-form-button-background-colour);
	border: none;
	border-radius: 1rem;
	box-shadow: 0 0 0.25rem var(--dtol-form-button-background-colour);
	color: var(--dtol-form-button-colour);
	cursor: pointer;
    display: inline-block;
	letter-spacing: 0.0625rem;
	padding: 0.25rem 2rem;
}

main.dtol-form form button.dtol-form-secondary,
form.dtol-mini-form button.dtol-form-secondary {
    background: var(--dtol-form-button-inactive-colour);
	box-shadow: 0 0 0.25rem var(--dtol-form-button-inactive-colour);
}

main.dtol-form form button:hover,
form.dtol-mini-form button:hover,
main.dtol-form form input[type=file]:focus + label,
form.dtol-mini-form input[type=file]:focus + label,
main.dtol-form form input[type=file] + label:hover,
form.dtol-mini-form input[type=file] + label:hover {
    background: var(--dtol-form-button-hover-colour) !important;
    box-shadow: 0 0 0.5rem var(--dtol-form-button-hover-colour) !important;
}

main.dtol-form form button,
form.dtol-mini-form button {
    margin: 1rem 2rem 0 0;
}

main.dtol-form form fieldset ~ button,
form.dtol-mini-form fieldset p button {
    margin-top: 0;
}

main.dtol-form form button:last-of-type,
form.dtol-mini-form button:last-of-type {
    margin-right: 0;
}

/* make the buttons invisible for files  */
main.dtol-form form button.dtol-form-file,
main.dtol-form form input[type=file] {
    display: none;
    /* opacity: 0;
    position: absolute;
    z-index: -1; */
}

/* Make form buttons look disabled after submitting */
main.dtol-form form.dtol-form-disabled button,
form.dtol-mini-form.dtol-form-disabled button,
main.dtol-form form.dtol-form-disabled button:hover,
form.dtol-mini-form.dtol-form-disabled button:hover {
    background: var(--dtol-form-button-disabled-colour) !important;
    box-shadow: 0 0 0.25rem var(--dtol-form-button-disabled-colour) !important;
    cursor: default !important;
}

/* photo editing */
main.dtol-form form fieldset p.dtol-form-photo {
    display: flex;
    margin-top: 1.5rem;
}

main.dtol-form form fieldset p.dtol-form-photo-add {
    margin-top: 1.5rem;
}

main.dtol-form form fieldset p.dtol-form-photo > span:first-child {
    margin: 0;
}

main.dtol-form form fieldset p.dtol-form-photo > span:first-child img {
    border-radius: 1rem;
    display: block;
    height: 160px;
    object-fit: cover;
    width: 160px;
}

main.dtol-form form fieldset p.dtol-form-photo > span:first-child img:hover {
    box-shadow: 0 0 1rem var(--dtol-light-grey-color);
    cursor: zoom-in;
}

main.dtol-form form fieldset p.dtol-form-photo > span:last-child {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0.5rem 0 0.5rem 2rem;
}

main.dtol-form form fieldset p.dtol-form-photo span.dtol-form-photo-blank {
    display: block;
    height: 1.5rem;
}

main.dtol-form form fieldset p.dtol-form-photo button {
    display: block;
    margin: 0;
    padding: 0.25rem 1rem;
}

/* Form errors */
main.dtol-form section.dtol-form-error {
    background: var(--dtol-form-error-background-color);
    border: 2px dashed var(--dtol-form-error-color);
	border-radius: 1rem;
    color: var(--dtol-form-error-color);
    display: block;
	margin: 1rem 0;
	padding: 0.5rem 1rem;
}

main.dtol-form section.dtol-form-error h5 {
    font-size: var(--dtol-normal-font-size);
    font-weight: var(--dtol-normal-font-weight);
    margin: 0;
    padding: 0;
}

main.dtol-form section.dtol-form-error ul {
    margin: 0;
    padding: 0;
}

main.dtol-form section.dtol-form-error ul li {
	font-weight: var(--dtol-bold-font-weight);
    list-style: disc;
    margin: 0 0 0 1rem;
    padding: 0;
}

main.dtol-form section.dtol-form-error p {
	margin: 0.5rem 0 0 0;
}

main.dtol-form section.dtol-form-error p:first-child {
	margin-top: 0;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-form form fieldset p textarea {
        width: 20rem !important;
    }

    main.dtol-form form fieldset p select {
        max-width: 20rem;
    }
}

/* iPhone 8 adjustments */
@media only screen and (max-width: 375px) {
    main.dtol-form form fieldset p input[type=text],
    form.dtol-mini-form fieldset p input[type=text],
    main.dtol-form form fieldset p input[type=email],
    main.dtol-form form fieldset p input[type=password],
    main.dtol-form form fieldset p input[type=tel],
    main.dtol-form form fieldset p input[type=url] {
        width: 18rem;
    }

    main.dtol-form form button,
    form.dtol-mini-form button,
    main.dtol-form form input[type=file] + label,
    form.dtol-mini-form input[type=file] + label {
        letter-spacing: 0.03125rem;
        padding: 0.25rem 1rem;
    }

    main.dtol-form form fieldset p textarea {
        width: 18rem !important;
    }

    main.dtol-form form fieldset p select {
        max-width: 18rem;
    }

    main.dtol-form form fieldset p.dtol-form-radio-condensed span + span,
    form.dtol-mini-form fieldset p.dtol-form-radio-condensed span + span {
        margin-left: 1rem;
    }
}

/* iPhone SE adjustments */
@media only screen and (max-width: 360px) {
    main.dtol-form form fieldset p input[type=text],
    form.dtol-mini-form fieldset p input[type=text],
    main.dtol-form form fieldset p input[type=email],
    main.dtol-form form fieldset p input[type=password],
    main.dtol-form form fieldset p input[type=tel],
    main.dtol-form form fieldset p input[type=url] {
        width: 15rem;
    }

    main.dtol-form form fieldset p.dtol-form-photo > span:first-child img {
        height: 128px;
        width: 128px;
    }

    main.dtol-form form fieldset p.dtol-form-photo > span:last-child {
        margin: 0 0 0 2rem;
    }

    main.dtol-form form fieldset p textarea {
        width: 15rem !important;
    }

    main.dtol-form form fieldset p select {
        max-width: 15rem;
    }
}


/* Contact Us form */
main.dtol-contact-us h3 {
    margin: 1rem 0 0 0;
}

main.dtol-contact-us h3 + p {
    margin: 0;
}

main.dtol-contact-us h3 a {
    color: var(--dtol-job-seekers-color);
    text-decoration: none;
}

main.dtol-contact-us h3 a:hover {
    color: var(--dtol-link-color);
    text-decoration: underline;
}



/* Account page */
main.dtol-account section {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
}

main.dtol-account section label {
    color: var(--dtol-account-label-color);
    display: block;
    text-align: right;
    white-space: nowrap;
}

main.dtol-account section label span {
    color: var(--dtol-account-label-color);
    display: inline;
}

main.dtol-account section span {
    color: var(--dtol-text-color);
    display: block;
}

main.dtol-account section span.dtol-account-gold {
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    background-size: 1rem;
    padding: 0 0 0 1.5rem;
}

main.dtol-account section span.dtol-account-gold {
    background-image: url(/images/account-gold.png);
}

main.dtol-account section span.dtol-account-gold small {
    color: var(--dtol-light-grey-color);
    display: block;
    font-size: 0.8em;
}

main.dtol-account form button.dtol-account-gold {
	background: var(--dtol-gold-color);
	box-shadow: 0 0 0.25rem var(--dtol-gold-color);
    margin-top: 0;
    white-space: nowrap;
}

main.dtol-account section span.dtol-account-url {
    overflow-wrap: break-word;
}

main.dtol-account section span.dtol-account-disabled {
    color: var(--dtol-light-grey-color);
}

main.dtol-account section span.dtol-account-photos {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem 0 0 0;
}

main.dtol-account section span.dtol-account-photos span {
    margin: 1rem 2rem 0 0;
}

main.dtol-account section span.dtol-account-photos span img {
    border-radius: 1rem;
    display: block;
    height: 160px;
    object-fit: cover;
    width: 160px;
}

main.dtol-account section span.dtol-account-photos span img:hover {
    box-shadow: 0 0 1rem var(--dtol-light-grey-color);
    cursor: zoom-in;
}

main.dtol-account section div {
    grid-column-end: span 2;
    margin-top: 1rem;
}

main.dtol-account section form span {
    display: inline-block;
}

main.dtol-account section form span + span {
    margin: 0 0 0 2rem;
}

main.dtol-account section.dtol-account-gold-info,
main.dtol-account p.dtol-account-gold-info {
    background: var(--dtol-account-gold-background-color);
    border: 2px dashed var(--dtol-account-gold-border-color);
    border-radius: 1rem;
    color: var(--dtol-account-gold-color);
    display: block;
	padding: 0.5rem 1rem;
}

/* iPhone adjustments */
@media only screen and (max-width: 480px) {
    main.dtol-account section form span {
        display: block;
    }
    
    main.dtol-account section form span + span {
        margin: 1rem 0 0 0;
    }

    main.dtol-account section label span {
        display: block;
    }

    main.dtol-account section span.dtol-account-photos span img {
        height: 80px;
        width: 80px;
    }
}



/* Admin pages */
main.dtol-admin {
    max-width: 100%;
    padding: 0 1.5rem;
}

main.dtol-admin h1 {
    color: var(--dtol-members-color);
}

main.dtol-admin table {
    border-collapse: collapse;
}

main.dtol-admin table thead tr {
    background-color: var(--dtol-members-color);
    position: sticky;
    top: 0;
}

main.dtol-admin table thead tr th {
    color: var(--dtol-white-color);
    font-size: var(--dtol-large-font-size);
    font-weight: var(--dtol-normal-font-weight);
    padding: 0.25rem 1rem;
    text-align: left;
}

main.dtol-admin table tbody tr:nth-child(odd) {
    background-color: var(--dtol-admin-table-row-odd-background-color);
}

main.dtol-admin table tbody tr:nth-child(even) {
    background-color: none;
}

main.dtol-admin table tbody tr td {
    padding: 0.25rem 1rem;
}

main.dtol-admin table tbody tr td a {
    color: var(--dtol-link-color);
    display: inline-block;
    text-decoration: none;
}

main.dtol-admin table tbody tr td a:hover {
    text-decoration: underline;
}

main.dtol-admin table tbody tr td a.dtol-admin-country {
    padding: 0.25rem 0 0.25rem 32px;
    position: relative;
}

main.dtol-admin table tbody tr td a.dtol-admin-country img {
    left: 0;
    position: absolute;
    top: 0.25rem;
}

main.dtol-admin pre {
    display: block;
    margin: 0;
    overflow-wrap: break-word;
    padding: 0;
    width: 100%;
}

main.dtol-admin p.dtol-admin-banner img {
    width: var(--dtol-banner-width);
}

/* multi column layout (for banners) */
main.dtol-admin article {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

main.dtol-admin article section {
    margin: 3rem 2rem 0 0;
    width: 20rem;
}

/* multi column layout (for emails) */
main.dtol-admin-email form {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

main.dtol-admin-email form fieldset {
    margin: 3rem 3rem 0 0;
    width: 25rem;
}

/* dummy item to force break to a new row */
main.dtol-admin-email div {
    flex-basis: 100%;
    height: 0;
}