:target::before {
    content: "";
    display: block;
    height: 60px; /* fixed header height*/
    margin: -60px 0 0; /* negative fixed header height */
}

/**
 * @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');
}

/**
 * @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
}

/**
 * @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,400&display=swap');
 */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/static/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R9aX8.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
}

html {
    scroll-behavior: smooth;
}

/**
* Responsive modifiers
* inspired by Tailwind CSS (https://tailwindcss.com)
*
* For example class="hidden sm:block" means "hidden on small screens and shown on larger screens".
*
* Breakpoints:
* sm: 640px;
* md: 768px;
* lg: 1024px;
* xl: 1280px;
*/

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

@media (min-width: 640px) {
    .sm\:hidden {
        display: none;
    }

    .sm\:block {
        display: block;
    }

    .sm\:inline-block {
        display: inline-block;
    }

    .sm\:flex {
        display: flex;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:flex {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }

    .lg\:block {
        display: block;
    }

    .lg\:inline-block {
        display: inline-block;
    }

    .lg\:flex {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .xl\:hidden {
        display: none;
    }

    .xl\:block {
        display: block;
    }

    .xl\:inline-block {
        display: inline-block;
    }

    .xl\:flex {
        display: flex;
    }
}


:root {
    /**
     * Colors
     *
     * Colors with `--` postfix are not in the style guide.
     * For example `--90-lighter` means 90% lighter, created with Sass.
     */
    --color-cream: #f2e5d9;
    --color-beige: #d3bba7;
    /* #fefefd */
    --color-a-hint-of-beige: #fefefd;
    --color-beige--30-darker: #ad815b;
    --color-light-green--90-lighter: #f7fbe6;
    --color-light-green: #adca1e;
    --color-light-green--30-darker: #56640f;
    --color-light-green-2: #8FB55B;
    --color-dark-green: #90b55b;
    --color-grey-black: #4a4a49;
    --color-light-red: #e24c3b;
    --color-dark-red--90-lighter: #f9e9e7;
    --color-dark-red: #b33a2b;
    --color-dark-red--30-darker: #591c15;
    --color-light-turquoise: #197a70;
    --color-light-turquoise--30-darker: #11554e;
    --color-dark-turquoise: #00403a;
    --color-yellow--lightest: #fcf4c7;
    --color-yellow: #f2b82e;
    --color-yellow--40-darker: #a2750a;
    --color-light-grey: #f5f5f5;
    --color-dark-grey: #e5e5e5;

}

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

/* focus */
.focus\:outline-none:focus {
    outline: none;
}

.focus-within\:error:focus-within {
    outline: 1px solid var(--color-dark-red);
    box-shadow: 0 0 0 3px rgba(179, 58, 43, 0.5);
}

.focus-within\:success:focus-within {
    outline: 1px solid var(--color-light-green);
    box-shadow: 0 0 0 3px rgba(143, 181, 91, 0.5);
}

.focus-within\:warning:focus-within {
    outline: 1px solid var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(242, 184, 46, 0.5);
}

.focus-within\:input:focus-within {
    outline: 1px solid var(--color-beige--30-darker);
    box-shadow: 0 0 0 3px rgba(173, 129, 91, 0.5);
}

.highlight {
    background-color: var(--color-light-grey);
    margin: -1rem -0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 5px;
    transition: opacity 0.5s;
}

.highlight-error {
    background-color: var(--color-dark-red--90-lighter);
    margin: -1rem -0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 5px;
    transition: opacity 0.5s;
}

.highlight-warning {
    background-color: var(--color-yellow--lightest);
    margin: -1rem -0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 5px;
    transition: opacity 0.5s;
}

.highlight-success {
    background-color: var(--color-light-green--90-lighter);
    margin: -1rem -0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 5px;
    transition: opacity 0.5s;
}


.cGreyblack {
    background-color: var(--color-grey-black);
    color: #ffffff;
}

.cGrey {
    background-color: var(--color-light-grey);
    color: black;
}

.cGreen2 {
    background-color: var(--color-light-green-2);
    color: #ffffff;
}

.cLightgreen {
    background-color: var(--color-light-green);
    color: #ffffff;
}

.cCream {
    background-color: var(--color-cream);
    color: var(--color-grey-black);
}

.cGreen2Header {
    background-color: var(--color-light-green-2);
    /*height: 200px;*/
    padding: 10px;
    color: #ffffff;
}

.cGreyblackHeader {
    background: var(--color-grey-black);
    /*height: 200px;*/
    padding: 10px;
    color: #ffffff;
}

.cLightturquoise {
    background-color: var(--color-light-turquoise);
    color: #ffffff;
}

.cDarkturquoise {
    background-color: var(--color-dark-turquoise);
    color: #ffffff;
}

.alertHeading {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.infoAlert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: .25rem;
    color: black;
    background-color: var(--color-light-grey);
}

.infoAlert a {
    font-weight: bold;
    color: black;
}

.warningAlert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-yellow);
    border-radius: .25rem;
    color: var(--color-yellow--40-darker);
    background-color: var(--color-yellow--lightest)
}

.warningAlert a {
    font-weight: bold;
    color: var(--color-yellow--40-darker);
}

.errorAlert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-dark-red);
    border-radius: .25rem;
    color: var(--color-dark-red--30-darker);
    background-color: var(--color-dark-red--90-lighter);
}

.errorAlert a {
    font-weight: bold;
    color: var(--color-dark-red--30-darker);
}

.successAlert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-light-green);
    border-radius: .25rem;
    color: var(--color-light-green--30-darker);
    background-color: var(--color-light-green--90-lighter);
}

.successAlert a {
    font-weight: bold;
    color: var(--color-light-green--30-darker);
}


.shadow {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.shadowSmall {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadowBorder {
    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px
}

.border {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Rounded corners: normal */

.rounded {
    border-radius: 5px;
}

.roundedSmall {
    border-radius: 3px;
}

.roundedLarge {
    border-radius: 8px;
}


.card {
    border-radius: 5px;
    padding: 1rem;
    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(17, 24, 39, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
    line-height: 1.25rem;
}

.card .cardHeader {
    font-weight: 600;
    font-size: 1rem;
    background-color: var(--color-light-grey);
    padding: 0.75rem 1.25rem;
    margin: -1rem -1rem 0 -1rem;
}

.card .cardBody {
    margin-top: 1rem;
}

.alert {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--color-light-grey);
    color: black;
    display: inline-block;
}

.alert svg {
    fill: black;
}

.alertRed {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--color-dark-red--90-lighter);
    color: var(--color-dark-red--30-darker);
    display: inline-block;
}

.alertRed svg {
    fill: var(--color-dark-red--30-darker);
}

.alertGreen {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--color-light-green--90-lighter);
    color: var(--color-light-green--30-darker);
    display: inline-block;
}

.alertGreen svg {
    fill: var(--color-light-green--30-darker);
}

.alertYellow {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--color-yellow--lightest);
    color: var(--color-yellow--40-darker);
    display: inline-block;
}

.alertYellow svg {
    fill: var(--color-yellow--40-darker);
}


h2 {
    margin-top: 20px;
    margin-bottom: 15px;
}

p {
    margin: 10px 0;
}

table.dataTable {
    width: 100%;
    line-height: 1.25rem;
    font-size: 0.875rem;
    text-indent: 0;
    border-color: inherit;
}


table.dataTable, th.dataTable, td.dataTable {
    border-collapse: collapse;
}

.dataTable td, .dataTable th {
    padding: 1rem 0.75rem;
    /* white-space: nowrap; */
    /*max-width: 50px;*/
    text-overflow: ellipsis;
    text-align: left;
}

/*
td:hover, th:hover {
    overflow: visible;
    white-space: normal;
}
 */

table.dataTable.compact td, table.dataTable.compact th {
    padding: 0.5rem 0.75rem;
}

.dataTable th {

    /* white-space: nowrap; */
    font-weight: bold;
}


.dataTable tr {
    border-width: 0;
}

.dataTable thead {
    border-bottom: 1px solid var(--color-dark-grey);
    background-color: var(--color-light-grey);
}

.dataTable thead.sticky {
    position: sticky;
    top: 0;
    background-color: var(--color-light-grey);
}

table.dataTable tr:not(:last-child) td {
    border-bottom: 1px solid var(--color-dark-grey);
}


form .fieldErrorText {
    color: var(--color-dark-red);
    font-size: 1em;
    margin-top: 0.25em;
    line-height: 1.5em;
}

label {
    line-height: 1.5em;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
}

input {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    font-size: 1em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

input.error {
    border: 1px solid var(--color-dark-red);
    color: var(--color-dark-red--30-darker);
    background: var(--color-dark-red--90-lighter);
}

select {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    font-size: 1em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

select.error {
    border: 1px solid var(--color-dark-red);
    color: var(--color-dark-red--30-darker);
}

textarea {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    font-size: 1em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

textarea.error {
    border: 1px solid var(--color-dark-red);
    background: var(--color-dark-red--90-lighter);
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--color-beige--30-darker);
}

input[type="radio"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--color-beige--30-darker);
}

a:focus, input:focus, select:focus, textarea:focus, button:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, label:focus {
    outline: 1px solid var(--color-beige--30-darker);
    box-shadow: 0 0 0 3px rgba(173, 129, 91, 0.5);
}

/*
 * List of selectable fat info boxes.
 *
 * See: https://tailwindui.com/components/ecommerce/page-examples/checkout-pages#component-1eba6ef876ae6e4e30202d1785858c6d
 * Tailwind UI "Delivery Method" section in "Single step with order" example
 */
.optionList {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.optionList .option {
    border: 1px solid var(--color-dark-grey);
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    border-radius: 5px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    flex-grow: 1;
}

.optionList .option.active {
    border: 3px solid var(--color-light-turquoise);
    padding: 18px;
}

.optionList .option .optionTitle {
    font-weight: bold;
}

.optionList .option .optionSubtitle {
    margin-top: 5px;
    color: grey;
}

.optionList .option .optionDescription {
}

.optionList .option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/**
 * See: https://tailwindui.com/components/application-ui/data-display/description-lists
 */
dl.dataList > div {
    display: grid;
    grid-template-columns: 200px 2fr;
    gap: 1rem 1.5rem;
    padding: 0.75rem 0;
    min-height: 1.5rem;
}

dl.dataList > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e7eb;
    border-style: solid;
    border-width: 0;
    border-top-width: 1px;
}

dl.dataList dt {
    font-weight: 500;
    display: flex;
    align-items: center;
}

dl.dataList dd {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.secondaryLink {
    font-weight: 500;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.secondaryLink:hover {
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}


.btnSmall {
    padding: 5px;
    font-size: 13px;
}

.btnNormal {
    padding: 10px;
    font-size: 14px;
}

.btnLarge {
    padding: 11px;
    font-size: 20px;
}

.primaryBtn {
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: var(--color-light-turquoise);
    color: white;
    text-decoration: none;
    display: inline-block;
}

.primaryBtn:disabled {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.primaryBtn:hover {
    background-color: var(--color-dark-turquoise);
    cursor: pointer;
}

.primaryBtn:disabled:hover {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.dangerBtn {
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: var(--color-light-red);
    color: white;
    text-decoration: none;
    display: inline-block;
}

.dangerBtn:hover {
    background-color: var(--color-dark-red);
    cursor: pointer;
}

.dangerBtn:disabled {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.dangerBtn:disabled:hover {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.secondaryBtn {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-light-grey);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--color-grey-black);
    text-decoration: none;
    display: inline-block;
}

.secondaryBtn:hover {
    background-color: var(--color-dark-grey);
    cursor: pointer;
}

.secondaryBtn:disabled {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.secondaryBtn:disabled:hover {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

/**
.infoBtn {
    font-family:'Montserrat', sans-serif;
    background-color: var(--color-light-green);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: black;
    text-decoration: none;
    font-size: 14px;
}

.infoBtn:hover {
    background-color: var(--color-dark-green);
    cursor: pointer;
}

.infoBtn:disabled {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}

.infoBtn:disabled:hover {
    background-color: var(--color-dark-grey);
    cursor: not-allowed;
    color: var(--color-grey-black);
}
*/

.linkBtn {
    font-family: 'Montserrat', sans-serif;
    border: none;
    background-color: transparent;
    color: var(--color-light-turquoise);
    text-decoration: none;
    font-weight: bold;
}

.linkBtn:hover {
    color: var(--color-dark-turquoise);
    cursor: pointer;
}

.linkBtn:disabled {
    color: var(--color-grey-black);
    cursor: not-allowed;
}

.linkBtn:disabled:hover {
    color: var(--color-grey-black);
    cursor: not-allowed;
}

.linkBtnDark {
    font-family: 'Montserrat', sans-serif;
    border: none;
    background-color: transparent;
    border-radius: 5px;
    color: var(--color-grey-black);
    text-decoration: none;
    font-weight: bold;
}

.linkBtnDark:hover {
    background-color: var(--color-light-grey);
    color: black;
    cursor: pointer;
}

.linkBtnDark:disabled {
    color: rgba(0, 0, 0, 0.4);
    cursor: not-allowed;
}

.linkBtnDark:disabled:hover {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.6);
    cursor: not-allowed;
}

.secondaryBtn:disabled {
    cursor: not-allowed;
}

.secondaryBtn:disabled:hover {
    cursor: not-allowed;
}

/*
.primaryLink {
    font-weight: bold;
    text-decoration: none;
    color: var(--color-light-turquoise);
    cursor: pointer;
    fill: red;
}

.primaryLink svg {
    height: 16px;
    width: 16px;
    margin-right: 5px;
    fill: var(--color-light-turquoise);;
}

.primaryLink img {
    height: 16px;
    width: 16px;
    margin-right: 5px;
    fill: var(--color-light-turquoise);;
}

.primaryLink:hover {
    fill: var(--color-dark-turquoise);
    color: var(--color-dark-turquoise);
    cursor: pointer;
}
 */

.pillsNavBar {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: start;
}

.pillsNavBar a {
    color: white;
    text-decoration: none;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

.pillsNavBar a:hover {
    /* slow transition, does it work? */
    transition: background-color 0.1s ease-in-out;
    background-color: rgba(255, 255, 255, 0.15);
}

.pillsNavBar a.active {
    background-color: rgba(0, 0, 0, 0.3);
}

.pillsNavBar a.disabled {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
}

.pillsNavBar a.disabled:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
}

.compactNavBar a {
    color: white;
    padding: 5px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    background-color: var(--color-light-turquoise);

    text-decoration: none;
    font-size: 13px;
    text-align: center;
}

.compactNavBar a:hover {
    background-color: var(--color-light-turquoise--30-darker);
    cursor: pointer;
}

.compactNavBar a.active {
    background-color: var(--color-dark-turquoise);
}

.compactNavBar a.disabled {
    color: lightgray;
    cursor: not-allowed;
}

.compactNavBar a.disabled:hover {
    background-color: var(--color-light-turquoise);
    cursor: not-allowed;
}

@media print {
    .new-page {
        page-break-before: always;
    }
}

.keep-together {
    page-break-inside: avoid;
}

.break-before {
    page-break-before: always;
}

.break-after {
    page-break-after: always;
}

.cover {
    background-image: url('Background.png');
    background-repeat: no-repeat;
    background-size: cover;
    page-break-after: always;
}

page {
    padding: 1.04cm 1.54cm 1.04cm 1.54cm;
    width: 21cm;
    min-height: 29.7cm;
    height: 29.7cm;
}

.page2 {
    padding: 1.04cm 1.54cm 1.04cm 1.54cm;
    margin: 4px;
}

body {
    background-color: white;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
    padding: 0px;
}

.tableH1 {
    color: green;
    background-color: #dddddd;
    font-size: '+2';
}

h1 {
    margin-top: 10px;
    margin-bottom: 2px;
}

h2 {
    margin-top: 20px;
    margin-bottom: 15px;
}

h3 {
    margin-top: 10px;
    margin-bottom: 6px;
}

.itembox {
    height: 20mm;
    width: 35mm;
    border-radius: 2mm;
    margin: 1mm;
    padding: 1mm;
    font-size: 0.7em;
    float: left;
}

.itemboxBig {
    height: 18mm;
    width: 35mm;
    border-radius: 3mm;
    margin: 1mm;
    padding: 1mm;
    float: left;
}

.leftcontainer {
    height: 100%;
    width: 20mm;
    margin: 2mm;
    padding: 2mm;
    float: left;
    position: relative;
}

.pagebox {
    margin: 20mm;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%); /* FF3.5+ */
    -o-transform: translate(-50%, -50%); /* Opera 10.5 */
    -webkit-transform: translate(-50%, -50%) rotate(-90.0deg); /* Saf3.1+, Chrome */
    border: 5px solid #FFFF00;
    padding: 10px;
}

.rotate {
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(-90deg);
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 10px;
    color: #000000;
    margin: 1mm;
    -webkit-transform: translate(-50%, -50%) rotate(-90.0deg); /* Saf3.1+, Chrome */
    -moz-transform: translate(-50%, -50%) rotate(-90.0deg); /* FF3.5+ */
}

.debug {
    background-color: #ffcccc;
    border: solid 1px black;
}


.box-row {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    width: 95%;
    margin: 10px 2px;
}

.box-main {
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    width: 80%;
}

.box-left {
    position: relative;
    width: 40px; /* For old syntax, otherwise collapses. */
}

.box-right {
    width: 100px;
}


/* for survey and/or web-editor only */

.centeredMainOld {
    padding: 5px;
    background: #fdefe1;
    max-width: 1400px;
    margin-left: 30%;
    transform: translate(-20%);
}

/*
body {
	max-width: 1080px;
	margin: 0 auto !important;
	float: none !important;
}
*/
.centeredMain {
    max-width: 1080px;
    margin: 0 auto;
}

.centeredMainSmall {
    max-width: 1080px;
    margin: 0 auto;
}

/*
.centeredMainSmall {
    padding: 5px;
    background: #fdefe1;
    max-width: 1200px;
    margin-left: 50%;
    transform: translate(-50%);
}
*/
.cBrown {
    background: #fdefe1;
}

.cWhite {
    background: var(--color-a-hint-of-beige);
    color: #4A4A49;
}

/* Deprecated: Name and color do not match!
 * This is not green, but light turquoise
 * use .cLightturquoise
 */
.cGreen {
    background: #197a70;
    background-color: #197a70;
    color: #ffffff;
}

/* Deprecated: Name and color do not match!
 * This is not dark green, but dark turquoise
 * use .cDarkturquoise
 */
.cDarkgreen {
    background: #003a3b;
    background-color: #003a3b;
    color: #ffffff;
}

.cGreenHeader {
    background: #197a70;
    /*height: 200px;*/
    padding: 10px;
    color: #ffffff;
}

.popover {
    position: relative;
    cursor: help;
}

.popover .popovercard {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;

    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 125%;
    width: 300px;
    margin-left: -151px;

    border-radius: 5px;
    padding: 1rem;
    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
    /* box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(17, 24, 39, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0; */
    background-color: var(--color-light-grey);
    line-height: 1.25rem;
}

.popover:hover .popovercard {
    visibility: visible;
    opacity: 1;
}

.popover .popovercard::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -11px;
    border-width: 5px;
    border-style: solid;
    border-color: #e5e5e5 transparent transparent transparent;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
}

.infobutton {
    color: #fff;
    /*background-color: #003A3B;*/
    background-color: #197A70;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    border: solid 3px #D6E3E1;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -151px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -11px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}