html, body {
    background-color: #002244;
    color: #fff;
    width: 100%;
}

.version { position: fixed; right: 15px; top: 10px; }
a:hover, a:active, a:focus { text-decoration: none; color: inherit; }

body.benefits img { display: block; width: 100%; background-size: contain; }

header { color: #fff; }

.hidden { display: none !important; }
.flash { visibility: hidden; }

a { color: inherit !important; margin: 10px; }

.grid {
    display: grid;
}

.container {
    margin: 50px auto;
    max-width: 900px;
    width: 100%;
    min-width: 340px;
    text-align: center;
}

.accordion {
    --bs-accordion-body-padding-x: 2.25rem;
    --bs-accordion-body-padding-y: 2rem;
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-item { background-color: transparent; }
div.accordion-body {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

div.accordion-body > div {
    width: 100px;
    height: 100px;
    background-color: transparent;
}

div.accordion-body > div:hover {
    transform: scale(1.05);
}

.accordion a {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
    width: inherit;
    height: inherit;
    color: inherit;
    text-decoration: none;
    position: relative;
}

div.production a { border-color: #ff0000; }
div.staging a { border-color: yellow; }
div.local a { border-color: #00ff00; }

.accordion a > span {
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accordion a > img {
    min-width: 64px;
    max-width: 64px;
}

.accordion a > img.fix { margin: 10px auto; }

.accordion a > img.nolabel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 85%;
    max-height: 85%;
    margin: auto;
}

div.checkbox {
    display: inline;
    cursor: pointer;
    font-weight: 600;
    font-size: 2em;
}

div.checkbox:before {
    content: '\2610';
    display: inline-block;
    padding: 0px 2px 0 2px;
    font-size: 1.4em;
    font-weight: normal;
    vertical-align: text-bottom;
    position: relative;
    top: 10px;
}

div.checkbox.checked:before {
    content: '\2611';
}

footer img { max-width: 24px; }