/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
@import url("/styles/icons.css");
@import url("/blocks/tags/tags.css");

:root {
    /* rsm colours */
    --rsm-white: #fff;
    --rsm-blue: #009cde;
    --rsm-primary-green: #3f9c35;
    --rsm-mid-grey: #888b8d;
    --rsm-dark-grey: #63666a;
    --rsm-midnight-blue: #00153d;
    --rsm-light-grey: #cccfcf;
    --rsm-error-red: #e40046;
    --text-grey: #515356;

    /* Not in style guide */
    --rsm-darker-hc-green: #1d4e19;

    /* rsm accessibility colors */
    --rsm-hc-blue: #007eb4;
    --rsm-light-blue: #e5f5fc;
    --rsm-hc-green: #2b6c25;
    --rsm-extra-light-grey: #f0f0f0;
    --rsm-extra-extra-light-grey: #F3F3F4;
    --rsm-darker-blue: #006e9d;
    --rsm-menu-border: #ccebf8;

    /* colors */

    --text-color: var(--text-grey);
    --link-color: var(--rsm-primary-green);
    --link-text-color: var(--rsm-white);
    --link-hover-text-color: var(--rsm-hc-green);

    /* button state colors */

    /* primary */
    --button-primary-bg-color: var(--rsm-primary-green);
    --button-primary-text-color: var(--rsm-white);
    --button-primary-hover-bg-color: var(--rsm-hc-green);
    --button-primary-hover-text-color: var(--rsm-white);
    --button-primary-disabled-bg-color: var(--rsm-mid-grey);
    --button-primary-disabled-text-color: var(--rsm-white);

    /* secondary */
    --button-secondary-bg-color: transparent;
    --button-secondary-border-color: var(--rsm-primary-green);
    --button-secondary-text-color: var(--rsm-primary-green);
    --button-secondary-hover-bg-color: var(--rsm-primary-green);
    --button-secondary-hover-text-color: var(--rsm-white);
    --button-secondary-active-bg-color: var(--rsm-hc-green);
    --button-secondary-active-text-color: var(--rsm-white);
    --button-secondary-disabled-bg-color: var(--rsm-mid-grey);
    --button-secondary-disabled-text-color: var(--rsm-mid-grey);
    --button-disabled-bg: var(--rsm-mid-grey);

    /* links */

    /* tertiary && tertiary-contextual */
    --link-tertiary-text-color: var(--rsm-primary-green);
    --link-tertiary-text-hover-color: var(--rsm-hc-green);
    --link-tertiary-text-active-color: var(--rsm-hc-green);
    --link-tertiary-text-disabled-color: var(--rsm-mid-grey);

    /* tertiary bold */
    --link-tertiary-bold-text-color: var(--rsm-primary-green);
    --link-tertiary-bold-text-hover-color: var(--rsm-hc-green);
    --link-tertiary-bold-text-active-color: var(--rsm-hc-green);
    --link-tertiary-bold-text-disabled-color: var(--rsm-mid-grey);
    --breadcrumbs-color: var(--text-grey);

    /* fonts */
    --body-font-family: prelo, roboto, roboto-fallback, sans-serif;
    --heading-font-family: prelo, roboto-condensed, roboto-condensed-fallback,
    sans-serif;

    /* body sizes */
    --body-font-size-l: 1.125rem;
    --body-font-size-m: 1rem;
    --body-font-size-s: 0.875rem;
    --body-font-size-xs: 0.75rem;

    /* heading sizes */
    --heading-font-size-xxl: 1.875rem;
    --heading-font-size-xl: 1.5rem;
    --heading-font-size-l: 1.25rem;
    --heading-font-size-m: 1.125rem;
    --heading-font-size-s: 0.875rem;
    --heading-font-size-xs: 0.875rem;

    /* nav height */
    --nav-height: 4rem;

    /* footer weight */
    --heading-font-weight: 400;
    --sub-heading-font-weight: 700;

    /* breadcrumbs */
    --breadcrumbs-height: 2.125rem;

    /* general layout */
    --horizontal-padding-desktop: 5rem;
    --horizontal-padding-mobile: 1.25rem;
    --block-container-width: calc(
        1280px + 2 * var(--horizontal-padding-desktop)
    );
    --block-container-readable-width: calc(
        844px + 2 * var(--horizontal-padding-desktop)
    );
    --form-columns: 1;
}

html {
    -webkit-font-smoothing: antialiased;
}

html.contrast {
    --rsm-blue: var(--rsm-hc-blue);
    --rsm-primary-green: var(--rsm-hc-green);
    --button-primary-hover-bg-color: var(--rsm-darker-hc-green);
}

.dark-bg {
    /* primary */
    --button-primary-bg-color: var(--rsm-white);
    --button-primary-text-color: var(--rsm-primary-green);
    --button-primary-hover-bg-color: var(--rsm-hc-green);
    --button-primary-hover-text-color: var(--rsm-white);
    --button-primary-disabled-bg-color: var(--rsm-mid-grey);
    --button-primary-disabled-text-color: var(--rsm-white);

    /* secondary */
    --button-secondary-border-color: var(--rsm-white);
    --button-secondary-text-color: var(--rsm-white);
    --button-secondary-hover-bg-color: var(--rsm-white);
    --button-secondary-hover-text-color: var(--rsm-hc-green);
    --button-secondary-active-bg-color: var(--rsm-white);
    --button-secondary-active-text-color: var(--rsm-hc-green);
    --button-secondary-disabled-bg-color: var(--rsm-light-grey);
    --button-secondary-disabled-text-color: var(--rsm-light-grey);
    --link-color: var(--rsm-white);
    --link-hover-text-color: var(--rsm-white);

    /* links */

    /* tertiary && tertiary-contextual */
    --link-tertiary-text-color: var(--rsm-extra-light-grey);
    --link-tertiary-text-hover-color: var(--rsm-white);
    --link-tertiary-text-active-color: var(--rsm-white);
    --link-tertiary-text-disabled-color: var(--rsm-light-grey);

    /* tertiary bold */
    --link-tertiary-bold-text-color: var(--rsm-white);
    --link-tertiary-bold-text-hover-color: var(--rsm-white);
    --link-tertiary-bold-text-active-color: var(--rsm-white);
    --link-tertiary-bold-text-disabled-color: var(--rsm-mid-grey);
    --breadcrumbs-color: var(--rsm-white);
}

/* fallback fonts */
@font-face {
    font-family: roboto-condensed-fallback;
    size-adjust: 88.82%;
    src: local("Arial");
}

@font-face {
    font-family: roboto-fallback;
    size-adjust: 99.529%;
    src: local("Arial");
}

@media (min-width: 900px) {
    :root {
        /* heading sizes */
        --heading-font-size-xxl: 3rem;
        --heading-font-size-xl: 2.25rem;
        --heading-font-size-l: 1.5rem;
    }
}

* {
    box-sizing: border-box;
}

body {
    display: none;
    margin: 0;
    background-color: var(--rsm-white);
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-l);
    line-height: 1.4;
}

body.appear {
    display: block;
}

header {
    height: 106px;
}

@media (min-width: 1200px) {
    header {
        height: 119px;
    }
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
    font-family: var(--heading-font-family);
    line-height: 1.2;
    scroll-margin: 2.5rem;
}

h1,
h2 {
    font-weight: 300;
}

h4,
h5,
h6 {
    font-weight: 700;
}

h1 {
    font-size: var(--heading-font-size-xxl);
    line-height: 2.313rem;
}

h2 {
    font-size: var(--heading-font-size-xl);
    line-height: 1.813rem;
}

.default-content-wrapper h2 {
    color: var(--rsm-blue);
    padding-bottom: 10px;
}

main .default-content-wrapper li {
    margin-bottom: 10px;
}

h3 {
    font-size: var(--heading-font-size-l);
    line-height: 1.688rem;
    font-weight: 400;
}

h4 {
    font-size: var(--heading-font-size-m);
}

h5 {
    font-size: var(--heading-font-size-s);
}

h6 {
    font-size: var(--heading-font-size-xs);
}

p,
dl,
ol,
ul,
pre,
blockquote {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
}

code,
pre {
    font-size: var(--body-font-size-s);
}

pre {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--rsm-extra-light-grey);
    overflow-x: auto;
    white-space: pre;
}

main > div {
    margin: 2.5rem 1rem;
}

input,
textarea,
select,
button {
    font: inherit;
}

.default-content-wrapper ol ol {
    list-style-type: lower-roman;
}

.default-content-wrapper ul:not(.footer ul, .header ul),
.default-content-wrapper ol:not(.footer ol, .header ol) {
    list-style-position: outside;
}

.default-content-wrapper ul:not(.footer ul, .header ul) li,
.default-content-wrapper ol:not(.footer ol, .header ol) li {
    padding-bottom: 0.5em;
}

.default-content-wrapper ul:not(.footer ul, .header ul) li::marker {
    font-size: 0.39em;
    line-height: 1;
    vertical-align: middle;
}

/* links */
a:any-link {
    color: var(--link-color);
    text-decoration: none;
    word-break: break-word;
}

a:hover {
    color: var(--link-hover-text-color);
    text-decoration: underline;
}

/* buttons */
.button-container strong {
    font-weight: 400;
}

a.button:any-link,
button {
    font-size: var(--body-font-size-m);
    box-sizing: border-box;
    display: inline-flex;
    column-gap: 0.625rem;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    outline: 0.063rem solid transparent;
    padding: 0.75rem 1.25rem;
    font-family: var(--body-font-family);
    font-style: normal;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    background-color: var(--button-primary-bg-color);
    color: var(--button-primary-text-color);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button[type="submit"] {
    background-color: var(--rsm-primary-green);
    color: var(--rsm-white);
    min-width: 170px;
    width: 100%;
    max-width: 100%;
}

a.link {
    line-height: 1.5rem;
    font-size: var(--body-font-size-l);
}

.default-content-wrapper a.link {
    font-size: var(--body-font-size-l);
}

a:is(.link, .button) span.icon,
button:is(.link, .button) span.icon {
    max-width: 1rem;
    max-height: 0.875rem;
    display: inline-flex;
    align-self: center;
}

/* LINK STYLE BLOCK START */
a.link.tertiary-bold,
button.link.tertiary-bold {
    font-style: normal;
    color: var(--link-tertiary-bold-text-color);
}

a.link:is(.tertiary, .tertiary-bold),
button.link:is(.tertiary, .tertiary-bold) {
    box-sizing: border-box;
    display: inline-flex;
    column-gap: 0.688rem;
    align-items: baseline;
    justify-content: center;
    max-width: 100%;
}

a.link:is(.tertiary, .tertiary-contextual),
button.link:is(.tertiary, .tertiary-contextual) {
    color: var(--link-tertiary-text-color);
}

a.link.tertiary-bold:is(:hover, .hover, :focus, .active),
button.link.tertiary-bold:is(:hover, .hover, :focus, .active) {
    color: var(--link-tertiary-bold-text-hover-color);
    text-decoration: underline;
}

a.link.tertiary-bold:is(:disabled, .disabled, :disabled:hover, .disabled:hover),
button.link.tertiary-bold:is(
        :disabled,
        .disabled,
        :disabled:hover,
        .disabled:hover
    ) {
    color: var(--link-tertiary-bold-text-disabled-color);
    pointer-events: none;
}

a.link:is(:hover, .hover, :focus, .active),
button.link:is(:hover, .hover, :focus, .active) {
    color: var(--link-tertiary-text-hover-color);
    text-decoration: underline;
}

a.link:is(:disabled, .disabled, :disabled:hover, .disabled:hover),
button.link:is(:disabled, .disabled, :disabled:hover, .disabled:hover) {
    color: var(--link-tertiary-text-disabled-color);
    pointer-events: none;
}

a.link.tertiary-contextual {
    font-weight: 400;
}

button.link.tertiary-contextual {
    font-weight: bold;
}

/* LINK STYLE BLOCK END */

a.button:is(:hover, .hover, :focus, .active),
button:is(:hover, .hover, :focus, .active) {
    color: var(--button-primary-hover-text-color);
    background-color: var(--button-primary-hover-bg-color);
    cursor: pointer;
}

a.button:disabled,
a.button.disabled,
a.button:disabled:hover,
a.button.disabled:hover,
button:disabled,
button.disabled,
button:disabled:hover,
button.disabled:hover {
    color: var(--button-primary-disabled-text-color);
    background-color: var(--button-primary-disabled-bg-color);
    cursor: unset;
}

a.button.secondary,
button.secondary {
    background-color: unset;
    outline: 0.063rem solid var(--button-secondary-border-color);
    color: var(--button-secondary-text-color);
}

a.button.secondary:hover,
a.button.secondary.hover,
button.secondary:hover,
button.secondary.hover {
    background-color: var(--button-secondary-hover-bg-color);
    outline: 0.063rem solid transparent;
    color: var(--button-secondary-hover-text-color);
}

a.button.secondary:focus,
a.button.secondary.active,
button.secondary:focus,
button.secondary.active {
    background-color: var(--button-secondary-active-bg-color);
    outline: 0.063rem solid transparent;
    color: var(--button-secondary-active-text-color);
}

a.button.secondary:disabled,
a.button.secondary.disabled,
a.button.secondary:disabled:hover,
a.button.secondary.disabled:hover,
button.secondary:disabled,
button.secondary.disabled,
button.secondary:disabled:hover,
button.secondary.disabled:hover {
    background-color: unset;
    outline: 0.063rem solid var(--button-secondary-disabled-bg-color);
    color: var(--button-secondary-disabled-text-color);
}

main img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.icon {
    display: inline-block;
    width: auto;
    height: auto;
}

.icon img,
.icon svg {
    height: 100%;
    width: 100%;
}

/* sections */
main > .section {
    margin: 3rem 0;
}

main > .section > div {
    max-width: var(--block-container-width);
    margin: 0 auto;
    padding: 0 var(--horizontal-padding-mobile);
}

main > .section.container-w-844 .article-line {
    margin-top: 1.75rem;
    margin-bottom: 2.75rem;
    display: block;
    height: 0.063rem;
    background-color: var(--rsm-mid-grey);
    border: none;
}

main > .section.container-w-844 > div {
    max-width: var(--block-container-readable-width);
}

main > :is(.section.tabs-wrapper) .container-w-844 > div {
    max-width: var(--block-container-readable-width);
    width: 100%;
    margin: 0 auto;
}

main > .section:first-of-type {
    margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
    background-color: var(--rsm-extra-light-grey);
    margin: 0;
    padding: 2.5rem 0;
}

.green-bg {
    background-color: green;
}

.blue-bg {
    background-color: blue;
}

.midnight-blue-bg {
    background-color: var(--rsm-midnight-blue);
    color: var(--rsm-white);
}

.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

/* rsm background colour classes */
.rsm-blue-bg {
    background-color: var(--rsm-blue);
}

.rsm-green-bg {
    background-color: var(--rsm-primary-green);
}

.rsm-mid-grey-bg {
    background-color: var(--rsm-mid-grey);
}

.rsm-dark-grey-bg {
    background-color: var(--rsm-dark-grey);
}

.rsm-midnight-blue-bg {
    background-color: var(--rsm-midnight-blue);
}

.rsm-light-grey-bg {
    background-color: var(--rsm-light-grey);
}

.text-grey-bg {
    background-color: var(--text-grey);
}

.high-contrast-blue-bg {
    background-color: var(--rsm-hc-blue);
}

.light-blue-bg {
    background-color: var(--rsm-light-blue);
}

.high-contrast-green-bg {
    background-color: var(--rsm-hc-green);
}

.extra-light-grey-bg {
    background-color: var(--rsm-extra-light-grey);
}

.darker-blue-bg {
    background-color: var(--rsm-darker-blue);
}

.op-80 {
    opacity: 0.8;
}

.op-60 {
    opacity: 0.6;
}

.op-40 {
    opacity: 0.4;
}

.op-20 {
    opacity: 0.2;
}

@media (min-width: 900px) {
    :root {
        /* heading sizes */
        --heading-font-size-xxl: 3rem;
        --heading-font-size-xl: 2.25rem;
        --heading-font-size-l: 1.5rem;
    }

    h1 {
        line-height: 3.625rem;
    }

    h2 {
        line-height: 2.688rem;
    }

    h3 {
        line-height: 1.813rem;
    }

    h4 {
        line-height: 1.563rem;
    }

    h5 {
        line-height: 1.125rem;
    }

    main > .section > div {
        padding: 0 var(--horizontal-padding-desktop);
    }

    main > :is(.section.tabs-wrapper) .container-w-844 > div {
        padding: 0 var(--horizontal-padding-desktop);
    }
}

/* FORM STYLING */
.form-columns {
    column-gap: 1.875rem;
    display: grid;
    grid-template-columns: repeat(var(--form-columns), 1fr);
}

.field-wrapper {
    align-items: flex-start;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.125rem;
    justify-content: flex-start;
}

.selection-wrapper {
    flex-wrap: wrap;
}

.field-wrapper > * {
    grid-column: span 1;
}

fieldset {
    display: grid;
    grid-auto-flow: row;
    margin: 0;
    border: none;
    padding: 0;
    width: 100%;
}

.column-full {
    grid-column: 1 / -1;
}

.submit-wrapper button[type="submit"] {
    border: none;
    width: 100%;
    max-width: 100%;

    &:not(:disabled) {
        outline: 0.063rem solid var(--rsm-blue);
    }
}

.field-wrapper [type="checkbox"],
.field-wrapper [type="radio"] {
    width: 1.688rem;
    height: 1.688rem;
    place-self: end;
}

form > .selection-wrapper + .selection-wrapper,
form fieldset .selection-wrapper + .selection-wrapper {
    margin-top: 0.25em;
}

label,
fieldset > legend {
    margin-bottom: 0.25em;
    font-size: var(--body-font-size-s);
}

.selection-wrapper label {
    margin: 0;
    font-weight: normal;
}

input,
select,
textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5em 0.875rem;
    border: 0.063rem solid var(--rsm-mid-grey);
    background-color: var(--rsm-white);
    color: var(--text-color);
    font-size: var(--body-font-size-s);
    transition: border-color 0.2s;
}

input[type="text"],
input[type="date"],
input[type="search"],
input[type="email"],
select {
    min-height: 3rem;
    color: var(--rsm-mid-grey);
}

.form textarea {
    min-height: 86px;
    resize: none;
}

.field-wrapper.search-wrapper {
    justify-content: flex-end;
    align-self: flex-end;
}

.heading-wrapper {
    margin-bottom: 0;

    &:has(h1, h2, h3, h4, h5, h6) {
        color: var(--rsm-blue);
        margin: 0.625rem 0;
    }
}

.plaintext-wrapper p > * {
    margin: 0;
}

.plaintext-wrapper {
    margin-bottom: 1.25rem;
}

main .section.aligned-centered .default-content-wrapper * {
    text-align: center;
}

main .section.aligned-right .default-content-wrapper * {
    text-align: right;
}

main .section.aligned-left .default-content-wrapper * {
    text-align: left;
}

.search-field-wrapper {
    display: flex;
    width: 100%;
}

.search-field-wrapper .form-search {
    width: 3.5rem;
    padding: 0 0.969rem;
    border: none;
}

.search-field-wrapper .form-search .icon-search {
    height: 1rem;
}

select {
    color: var(--text-grey);
    appearance: none;
    padding: 0.5rem 0.875rem;
}

.select-field-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

/* stylelint-disable selector-class-pattern */
.form .adaptiveSelect-wrapper {
    margin-bottom: 2.5rem;
}

.select-arrow {
    mask-image: url('data:image/svg+xml;utf8,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6.5 6.5L12 1" stroke="currentColor"/></svg>');
    display: inline-block;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: right;
    background-color: var(--rsm-mid-grey);
    position: absolute;
    right: 1rem;
    top: 1.375rem;
    width: 0.875rem;
    height: 0.5rem;
}

input[type="date"] {
    padding-right: 0.75rem;

    &::-webkit-calendar-picker-indicator {
        mask-image: url('data:image/svg+xml;utf8,<svg width="55" height="62" viewBox="0 0 55 62" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M53.18 8.10999C54.38 9.30999 54.97 10.77 54.97 12.5V55.67C54.97 57.36 54.37 58.81 53.18 60.03C51.98 61.25 50.54 61.86 48.86 61.86H6.17999C4.48999 61.86 3.06 61.25 1.89 60.03C0.719999 58.81 0.130005 57.36 0.130005 55.67V12.5C0.130005 10.77 0.719999 9.29999 1.89 8.10999C3.06 6.90999 4.48999 6.32001 6.17999 6.32001H9.27V0.130005H15.32V6.32001H39.72V0.130005H45.84V6.32001H48.86C50.55 6.32001 51.99 6.91999 53.18 8.10999ZM48.85 21.72H6.17V55.68H48.85V21.72ZM12.29 27.91V43.38H27.55V27.91H12.29Z" fill="currentColor"/></svg>');
        background-image: none;
        width: 0.875rem;
        height: 0.875rem;
        display: inline-block;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        background-color: var(--rsm-hc-blue);
    }
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--rsm-blue);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--rsm-blue);
}

.selection-wrapper input {
    width: max-content;
}

@media (min-width: 600px) {
    .form-columns {
        display: grid;
        grid-template-columns: repeat(var(--form-columns), 1fr);
        column-gap: 1.75rem;
    }

    .button {
        max-width: max-content;
    }

    .column-1 {
        grid-column: 1;
    }

    .column-2 {
        grid-column: 2;
    }

    .column-3 {
        grid-column: 3;
    }
}

@media (min-width: 900px) {
    .form.block {
        padding: 0 110px;
    }
}

.field-wrapper.selection-wrapper {
    flex-direction: row;
    column-gap: 1rem;
    align-items: baseline;
    place-content: flex-start;
}

.field-wrapper.selection-wrapper label {
    place-self: center;
}

label[data-required]::after {
    content: "*";
    color: var(--text-color);
    margin-inline-start: 0.188rem;
}

.toggle-wrapper .switch {
    position: relative;
    display: inline-block;
    width: 3.25rem;
    height: 1.75rem;
}

.toggle-wrapper input {
    opacity: 0;
    width: 3.25rem;
    height: 1.75rem;
}

.toggle-wrapper .slider {
    display: flex;
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 1.75rem;
    background-color: var(--rsm-mid-grey);
    transition: background-color 0.2s;
    width: 4.375rem;
    height: 2.125rem;
    align-items: center;
}

.toggle-wrapper .slider.labelled-state {
    background-color: var(--rsm-blue);
    width: 3.5rem;
    height: 1.5rem;
}

.toggle-wrapper .slider::before {
    content: "";
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    top: 0.25rem;
    left: 0.25rem;
    border-radius: 50%;
    background-color: var(--rsm-white);
    transition: transform 0.2s;
}

.toggle-wrapper .slider.labelled-state::before {
    width: 1.125rem;
    height: 1.125rem;
    top: 0.188rem;
    left: 0.188rem;
}

.toggle-wrapper input:checked + .slider {
    background-color: var(--link-color);
}

.toggle-wrapper input + .slider.labelled-state .label-off {
    padding-right: 0.438rem;
    right: 0;
}

.toggle-wrapper input + .slider.labelled-state .label-on {
    display: none;
}

.toggle-wrapper input + .slider.labelled-state .label-off,
.toggle-wrapper input:checked + .slider.labelled-state .label-on {
    display: inline-block;
    font-size: var(--body-font-size-xs);
    text-transform: uppercase;
    color: var(--rsm-white);
    position: absolute;
}

.toggle-wrapper input:checked + .slider.labelled-state .label-off {
    display: none;
}

.toggle-wrapper input:checked + .slider.labelled-state .label-on {
    padding-left: 0.438rem;
}

.toggle-wrapper input:focus + .slider {
    outline: 0.125rem solid var(--link-color);
    outline-offset: 0.125rem;
}

.toggle-wrapper input:checked + .slider::before {
    transform: translateX(2.25rem);
}

.toggle-wrapper input:checked + .slider.labelled-state::before {
    transform: translateX(2rem);
}

.checkbox-wrapper .checkbox-element {
    display: inline-block;
    position: absolute;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    z-index: 0;
    width: 1.688rem;
    height: 1.688rem;
    border-radius: 0.25rem;
    background-color: var(--rsm-white);
}

.checkbox-wrapper .checkbox-element .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.688rem;
    width: 1.688rem;
    border-radius: 0.25rem;
    border: 0.063rem solid var(--rsm-mid-grey);
}

.checkbox-wrapper .checkbox-element .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    color: white;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="11" viewBox="0 0 14 11" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2942 1.41421C13.6847 1.80474 13.6847 2.4379 13.2942 2.82843L6.08777 10.0349C5.69724 10.4254 5.06408 10.4254 4.67355 10.0349L0.707107 6.06843C0.316582 5.6779 0.316582 5.04474 0.707107 4.65421L1.41421 3.94711C1.80474 3.55658 2.4379 3.55658 2.82843 3.94711L4.67355 5.79223C5.06408 6.18276 5.69724 6.18276 6.08777 5.79223L11.1729 0.707107C11.5634 0.316583 12.1966 0.316582 12.5871 0.707107L13.2942 1.41421Z" fill="currentColor"/></svg>');
    mask-position: center;
    background: currentcolor;
}

.field-wrapper input[type="checkbox"] {
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.field-wrapper:has(input.validation-error) .checkbox-element {
    background-color: rgb(from var(--rsm-error-red) r g b / 20%);
}

.field-wrapper input.check-locked,
.field-wrapper input.check-locked ~ .checkbox-element,
.field-wrapper input[type="checkbox"]:disabled ~ .checkbox-element,
.field-wrapper input[type="checkbox"]:disabled,
.field-wrapper input.check-locked ~ .checkbox-element .checkmark {
    cursor: default;
    pointer-events: none;
}

.field-wrapper
    input[type="checkbox"]:disabled
    ~ .checkbox-element
    .checkmark::after {
    content: "";
    display: inline-block;
    mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="3" rx="1" fill="currentColor"/></svg>');
    mask-position: center;
    background-color: var(--rsm-mid-grey);
}

.field-wrapper
    input[type="checkbox"]:checked
    ~ .checkbox-element
    .checkmark::after {
    display: inline-block;
    color: var(--rsm-white);
}

.field-wrapper
    input[type="checkbox"]:is(:focus, .focus)
    ~ .checkbox-element
    .checkmark::after {
    color: var(--rsm-primary-green);
    border-color: var(--rsm-primary-green);
}

.field-wrapper.selection-wrapper
    input[type="checkbox"].check-locked
    ~ .checkbox-element
    .checkmark::after {
    color: var(--rsm-mid-grey);
}

.field-wrapper input[type="radio"] {
    appearance: none;
    background-color: var(--rsm-white);
    margin: 0;
    font: inherit;
    color: currentcolor;
    width: 1.688rem;
    height: 1.688rem;
    border: 0.063rem solid var(--rsm-mid-grey);
    border-radius: 50%;
    padding: 0.313rem;
}

.field-wrapper
    input[type="checkbox"]:is(:focus, .focus)
    ~ .checkbox-element
    .checkmark,
.field-wrapper input[type="radio"]:is(:focus, .focus) {
    border-color: var(--rsm-primary-green);
    background-color: rgb(from var(--rsm-primary-green) r g b / 20%);
}

.field-wrapper
    input[type="checkbox"]:checked:not(:focus, .focus, .check-locked)
    ~ .checkbox-element {
    background-color: var(--rsm-primary-green);
    color: var(--rsm-white);
}

.field-wrapper input[type="radio"]:disabled {
    background-color: rgb(from var(--rsm-light-grey) r g b / 20%);
}

.field-wrapper input[type="radio"]:checked:not(:focus) {
    background-color: var(--rsm-primary-green);
    border-color: var(--rsm-primary-green);
}

.field-wrapper input[type="radio"]:is(:checked, .checked)::after {
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--rsm-primary-green);
}

.field-wrapper input[type="radio"]:checked:not(:focus, .focus)::after {
    background-color: var(--rsm-white);
}

.field-wrapper input.validation-error,
.field-wrapper textarea.validation-error,
.field-wrapper:has(input.validation-error:not(.check-locked, :focus))
    .checkbox-element
    .checkmark,
.field-wrapper input[type="radio"]:not(:focus).validation-error {
    border-color: var(--rsm-error-red);
}

.field-wrapper
    input[type="checkbox"]:checked:not(
        :is(.check-locked, :focus, .validation-error)
    )
    ~ .checkbox-element
    .checkmark {
    border-color: var(--rsm-primary-green);
}

.field-wrapper:has(input.validation-error) label,
.field-wrapper:has(textarea.validation-error) label,
.field-wrapper input.validation-error::placeholder,
.field-wrapper:has(input.validation-error, textarea.validation-error)
    label::after,
.field-wrapper
    input[type="checkbox"]:checked.validation-error
    ~ .checkbox-element
    .checkmark::after {
    color: var(--rsm-error-red);
}

.field-wrapper
    input[type="checkbox"]:checked:not(:focus).validation-error
    ~ .checkbox-element,
.field-wrapper input[type="radio"]:not(:focus).validation-error {
    background-color: rgb(from var(--rsm-error-red) r g b / 20%);
}

.field-wrapper input[type="radio"]:not(:focus).validation-error::after {
    background-color: var(--rsm-error-red);
}

.field-wrapper .error-message {
    font-size: var(--body-font-size-s);
    color: var(--rsm-error-red);
    margin-top: 0.25rem;
    flex-basis: 100%;
}

.published-date-block {
    display: flex;
    column-gap: 0.875rem;
}