* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    scrollbar-gutter: stable;
}
@media (max-width: 768px) {
    html, body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

.red {
    fill: #ff0000;
}
.red:hover {
    fill: #870c0c;
}
:root {
    --color-bg: #f0f0f0;
    --color-button-bg: #fdfdfd;
    --color-small-box: #efefef;
    --color-small-box-hover: #e9e9e9;
    --color-surface-alt: #e9e9e9;
    --color-surface-hover: #dfdfdf;
    --color-footer-bg: #e5e5e5;
    --color-border: #ccc;
    --color-border-strong: #8c8c8c;
    --color-text: #333;
    --color-text-strong: #222;
    --color-text-muted: #999;
    --color-accent: #e0eef9;
    --color-accent-strong: #6279e2;
    --color-popup-bg: #d8deff;
    --color-warning: #e4c5f5;
}

body.theme-default {
    --color-bg: #f0f0f0;
    --color-button-bg: #fdfdfd;
    --color-small-box: #efefef;
    --color-small-box-hover: #e9e9e9;
    --color-surface-alt: #e9e9e9;
    --color-surface-hover: #dfdfdf;
    --color-footer-bg: #e5e5e5;
    --color-border: #ccc;
    --color-border-strong: #8c8c8c;
    --color-text: #333;
    --color-text-strong: #222;
    --color-text-muted: #999;
    --color-accent: #e0eef9;
    --color-accent-strong: #6279e2;
    --color-popup-bg: #d8deff;
    --color-warning: #e4c5f5;
}
    /* Color themes, switched by clicking the logo */
body.theme-green {
 /*   --color-bg: #1b1b1b; */
    --color-button-bg: #f7fff9;
    --color-small-box: #c3ffd0;
    --color-small-box-hover: #a6f6b7;
    --color-surface-alt: #a7ffbb;
    --color-surface-hover: #a1f6bc;
  /*  --color-border: rgb(126, 204, 119);*/
    --color-border-strong: #778c79;
 /*   --color-text: #e6e6e6; */
  /*  --color-text-strong: #ffffff; */
  /*  --color-text-muted: #b0b0b0; */
      --color-accent: #f9f4e0; 
 /*   --color-accent-strong: #6a88ff; */
 /*   --color-popup-bg: #2f3450; */
 /*   --color-warning: #7a4a8a; */
}             
body.theme-blue {
    --color-button-bg: #f2fbff;
    --color-small-box: #d0f2ff;
    --color-small-box-hover: #a4e5ff;
    --color-surface-alt: #b7d4ff;
    --color-surface-hover: #9dbdf1;
  /*  --color-border: rgb(119, 149, 204);*/
    --color-border-strong: #778c8c;
    --color-accent: #e3f9e0; 
}
body.theme-purple {
    --color-button-bg: #fcf9ff;
    --color-small-box: #e7e0fd;
    --color-small-box-hover: #d6cefb;
    --color-surface-alt: #d3cdff;
    --color-surface-hover: #c3bcfc;
  /*  --color-border: rgb(152, 119, 204);*/
    --color-border-strong: #778c8c;
    --color-accent: #f9e0e0; 
}
body.theme-red {
    --color-button-bg: #fff9f9;
    --color-small-box: #ffdfdf;
    --color-small-box-hover: #ffcece;
    --color-surface-alt: #ecb0b0;
    --color-surface-hover: #f5a1a1;
  /*  --color-border: rgb(204, 119, 119);*/
    --color-border-strong: #778c8c;
    --color-accent: #e0f9e0; 
}
#blinker-upper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 52vh;
    background-color: rgb(33, 7, 7);
    z-index: 10000;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.15s ease;
}
@keyframes blinker-upper {
    0% { transform: scaleY(0); }
    20% { transform: scaleY(1); }
    70% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
#blinker-lower {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48vh;
    background-color: rgb(33, 7, 7);
    z-index: 10000;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.15s ease;
}
@keyframes blinker-lower {
    0% { transform: scaleY(0); }
    20% { transform: scaleY(1); }
    70% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
#blinker-upper.is-blinking {
    animation: blinker-upper 0.8s 1;
}
#blinker-lower.is-blinking {
    animation: blinker-lower 0.8s 1;
}
@media (max-width: 768px) {
    #blinker-upper {
        height: 50vh;
    }
    #blinker-lower {
        height: 120vh;
    }
}

body {
    background-color: var(--color-bg);
    position: relative;
}


img {
    max-width: 100%;
    height: auto;
}
.dot-five-gap {
    height: 0.5rem;
}
mark { /* Used to highlight text to improve later */
    color: #ff0000;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline;
}

/* Header */
.header {
    width: 37rem;
    padding: 1.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
}
.nav-button-container {
    width: 100%;
    height: 5.375rem;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr 1fr;
/*    grid-template: 43px 43px / 135px 135px 135px;*/
    grid-gap: 0.3125rem 1.0625rem;
}
.nav-button {
    width: 10.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    height: 2.6875rem;
    color: var(--color-text);
    border-radius: 0.1875rem;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#decentration-and-magnification-button {
    font-size: 0.9rem;
    padding-top: 0.1rem;
}
.nav-button:hover {
    background-color: var(--color-accent);
    scale: 1.03;
}
@media (max-width: 768px) {
    .nav-button-container {
        margin-bottom: 1rem;
    }
    #decentration-and-magnification-button {
        font-size: 0.8rem;
    }
}
.language-container {
    width: 2rem;
    margin-left: 1rem;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.language-button {
    display: none;
   /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.8rem;
    width: 1.875rem;
    height: 1.875rem;
    color: var(--color-text);
    border-radius: 0.1875rem;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    margin: 0.0625rem 1.125rem;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.language-button:hover {
    background-color: var(--color-accent);
    scale: 1.1;
}
.logo {
    width: 4.9375rem;
    height: 3.6875rem;
    position: absolute;
    right: -6rem;
    top: 3rem;
    cursor: pointer;
}
#logo-text-1 {
    position: absolute;
    left: -7.2rem;
    top: 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    width: 7rem;
}
#logo-text-2 {
    position: absolute;
    left: -7.2rem;
    top: 5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    width: 7rem;
}
@media (max-width: 768px) {
    .header {
        width: 100vw;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.5rem;
        margin: 0;
        position: relative;
    }
    .nav-button-container {
        width: 100vw;
        height: auto;
        display: grid;
        padding-top: 4.5rem;
        grid-template: 1fr 1fr / 1fr 1fr 1fr;
        grid-gap: 0px;
    }
    .nav-button {
        width: 33.33vw;
        height: 3rem;
        text-align: center;
        line-height: 1.2;
        border-radius: 0rem;
        font-size: 1.05rem;
    }
    .logo {
        position: absolute;
        left: auto;
        right: 6vw;
        top: 0.5rem;
        width: auto;
        height: 4rem;
    }
    #logo-text-1 {
        left: 8vw;
        top: 1.5rem;
        font-size: 1.1rem;
        font-weight: 700;
    }
    #logo-text-2 {
        left: 8vw;
        top: 3rem;
        font-size: 0.9rem;
        font-weight: 700;
    }
   
}
#more-button {
    position: absolute;
    left: -5.7rem;
    top: 7.5rem;
    width: 4rem;
    height: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    transition: all 0.15s ease;
    z-index: 1003;
}
#more-button:hover,
#more-button:has(~ #more-panel:hover) {
   /* background-color: #e0eef9; */
    top: 7.6rem;
    background-color: #d0d0d0;
    border: 1px solid black;
    font-size: 0.87rem;
    scale: 1.2;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
    width: 6rem;
    height: 1.1rem;
    left: -6.7rem;
}
#more-button:active {
    background-color: #9aa8e5;
    border: 1px solid #9aa8e5;
}
#more-panel {
    position: absolute;
    left: -7.2rem;
    top: 8.7rem;
    width: 7rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.15rem 0.5rem 0.15rem;
    justify-content: center;
    align-items: flex-start;
    font-weight: 600;
    color: var(--color-text);
  /*  background-color: #a3b0e9;*/
    background-color: var(--color-surface-hover);
  /*  border: 2px solid #7084dd; */
    border: 2px ridge var(--color-border-strong);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
    z-index: 1002;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.2s ease, transform 0.15s ease;
    pointer-events: none;
}
@media (max-width: 768px) {
    #more-button {
        left: auto;
        right: 0vw;
        top: 11rem;
        width: 5rem;
    }
    #more-button:hover, #more-button:has(~ #more-panel:hover) {
        left: auto;
        right: 2.5vw;
        top: 11.1rem;
    }
    #more-panel {
        left: auto;
        right: 0vw;
        top: 12.2rem;
    }
}
@media (hover: hover) and (pointer: fine) {
    #more-button:hover ~ #more-panel,
    #more-panel:hover {
        opacity: 1;
        transform: scaleY(1);
        pointer-events: auto;
    }
}

body.more-panel-open #more-panel {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}
.more-panel-button {
    width: 100%;
    height: auto;
    min-height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  /*  background-color: #c6cbdd; */
 /*    background-color: #dfdfdf; */
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border-strong);
    font-size: 0.93rem;
    border-radius: 0.1875rem;
    padding: 0.5rem 0.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}
.more-panel-button-small {
    font-size: 0.9rem;
}
.more-panel-button:hover {
    background-color: var(--color-accent);

  /*  transform: translateX(0.0625rem); */
    scale: 1.02;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}
.more-panel-button:active {
    background-color: var(--color-accent-strong);
    font-weight: 700;
    transform: translateX(0.0625rem);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
/* Popup */
#popup-frame-wrapper {
    position: absolute;
    top: 9.8rem;
    left: 0rem;
    z-index: 999;
    padding-bottom: 2rem;
    overflow: visible;
}
#popup-frame {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 37rem;
    height: auto;
    background-color: var(--color-popup-bg);
    border: 2px ridge var(--color-border-strong);
    border-radius: 0.1875rem;
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1),
    0 0.125rem 0.75rem rgba(0, 0, 0, 0.15); 

    opacity: 1;
    transition: all 0.3s ease;
    overflow: visible;
}
@media (max-width: 768px) {
    #popup-frame-wrapper {
        top: 12.3rem;
        z-index: 1000;
    }
    #popup-frame {
        width: 100vw;
        border: 1px solid var(--color-border-strong);
    }
}
#popup-equations, #popup-motility, #popup-literature, #popup-organizations, #popup-desktop-version, #popup-references, #popup-payment, #popup-standard-values, #popup-about {
    display: none;
    height: auto;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding-bottom: 0.5rem;
}
/* Popup - Equations, Literature, Organizations, Schools, Glossary, Links and About -------------------------------------------*/
#popup-equations, #popup-literature, #popup-organizations, #popup-schools, #popup-glossary, #popup-links, #popup-about {
    position: relative;
}
#popup-about {
    width: 100%;
    padding: 2rem 0.5rem 2rem 1rem;
    text-align: left;
    grid-template: auto / auto;
}
#popup-equations .source {
    top: 1rem;
    width: 20%;
}
#popup-equations .equation-container {
    background-color: #f6f7ff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color 0.3s ease;
}
#popup-equations .equation-container:hover {
    background-color: #ffffff;
}
#popup-equations h3, #popup-literature h3, #popup-organizations h3, #popup-schools h3, #popup-glossary h3, #popup-links h3, #popup-about h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    width: 75%;
    margin: 2rem 0 0.1rem 1.5rem;
    padding-left: 1rem;
    border-bottom: 2px solid var(--color-text-muted);
}
#popup-equations h4, #popup-literature h4, #popup-organizations h4, #popup-schools h4, #popup-glossary h4, #popup-links h4, #popup-about h4 {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    width: 70%;
    margin: 1rem 0 0.5rem 2rem;
    padding-left: 1rem;
    border-bottom: 1px solid var(--color-text-muted);
}
#popup-equations h5, #popup-literature h5, #popup-organizations h5, #popup-schools h5, #popup-glossary h5, #popup-links h5, #popup-about h5 {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    width: 90%;
    margin: 1rem 0 0.5rem 1rem;
    padding-left: 1rem;
}
#popup-equations p {
    width: 70%;
    text-align: left;
    padding-left: 1rem;
    padding-right: 0.8rem;
    margin: 0.5rem 0 1rem 2rem;
    font-size: 0.9rem;
}
#popup-literature p, #popup-organizations p, #popup-schools p, #popup-glossary p, #popup-links p {
    text-align: left;
    padding-left: 1rem;
    padding-right: 0.8rem;
    margin-left: 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-text-muted);
}
@media (max-width: 768px) {
    #popup-equations h3, #popup-literature h3, #popup-organizations h3, #popup-schools h3, #popup-glossary h3, #popup-links h3, #popup-about h3 {
        width: 90vw;
        margin: 1rem 0 0.1rem 2.5vw;
        padding-left: 2.5vw;
    }
    #popup-equations h4, #popup-literature h4, #popup-organizations h4, #popup-schools h4, #popup-glossary h4, #popup-links h4, #popup-about h4 {
        width: 90vw;
        margin: 1rem 0 0.5rem 2.5vw;
        padding-left: 2.5vw;
    }
    #popup-equations p, #popup-literature p, #popup-organizations p, #popup-schools p, #popup-glossary p, #popup-links p {
        width: 90vw;
        margin-left: 4vw;
        padding-left: 4vw;
    }
    #popup-equations .source {
        top: 1.5rem !important;
        right: 0rem !important;
        width: 40vw;
    }
    #popup-equations .equation-container {
        width: 97vw;
        margin-left: 1.2vw;
    }
}
#popup-links p, #popup-about p {
    width: 80%;
    text-align: left;
    padding-right: 0.8rem;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}
#popup-literature p:hover, #popup-organizations p:hover, #popup-schools p:hover, #popup-glossary p:hover, #popup-links p:hover {
    background-color: var(--color-accent);
}
#popup-equations a, #popup-literature a, #popup-organizations a, #popup-schools a, #popup-glossary a, #popup-links a {
    color: var(--color-text);
    text-decoration: none;
}
#popup-equations a:hover, #popup-literature a:hover, #popup-organizations a:hover, #popup-schools a:hover, #popup-glossary a:hover, #popup-links a:hover {
    color: var(--color-accent-strong);
}
#popup-lists-gap {
    height: 0.4rem;
}
#popup-lists-gap-large {
    height: 1.5rem;
}
#popup-equations footer, #popup-literature footer, #popup-organizations footer, #popup-schools footer, #popup-links footer, #popup-glossary footer {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: left;
    padding-left: 24rem;
}
@media (max-width: 768px) {
    #popup-equations footer, #popup-literature footer, #popup-organizations footer, #popup-schools footer, #popup-glossary footer, #popup-links footer {
        padding-left: 40vw;
    }
}


/* Popup - Desktop version -----------------------------------------------------------------*/
#popup-desktop-version {
    grid-template: auto auto / 0.75fr 1.25fr;
}
#popup-desktop-version-top {
    grid-column: 1 / -1;
    padding: 1.5rem 0.5rem 2rem 1rem;
    text-align: left;
    width: 90%;
}
#popup-desktop-version-left-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 4rem;
    padding-left: 1rem;
    text-align: left;
}
#popup-desktop-version-right-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#popup-desktop-version-image {
    padding: 1rem 0.5rem 0rem 0.5rem;
    height: 25rem;
    width: auto;
}
/* Popup - References -----------------------------------------------------------------*/
#popup-references {
    width: 90%;
    padding: 2rem 0.5rem 2rem 3rem;
    text-align: left;
    grid-template: auto / auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
#popup-references h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem 0;
    padding-left: 2rem;
    border-bottom: 2px solid var(--color-text-muted);
}
#popup-references p {
    text-align: left;
    margin-bottom: 0.5rem;
/*    font-size: 0.9rem;
    font-weight: 600;
    width: 100%;
    color: #222;*/
    border-bottom: 1px solid var(--color-text-muted);
    padding: 0.3rem;
}
#popup-references p:hover {
    background-color: var(--color-accent);
}
@media (max-width: 768px) {
    #popup-references {
        width: 90vw;
        padding-left: 0;
    }
    #popup-references h3 {
        width: 90vw;
        margin: 1rem 0 0.1rem 2.5vw;
        padding-left: 2.5vw;
    }
    #popup-references p {
        width: 90vw;
        margin: 1rem 0 0.5rem 2.5vw;
        padding-left: 2.5vw;
    }
}

/* Scoreboard -----------------------------------------------------------------*/
#scoreboard-frame {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10rem;
    left: -12.5rem;
    width: 12rem;
    height: 30rem;

    border-radius: 0.1875rem;
    padding: 0.5rem;
 /*   box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.15); */
    transition: background-color 0.4s ease;
    font-size: 1rem;
    font-weight: 600;
    gap: 1rem;
    overflow: visible;
}
#scoreboard-frame:hover {
    background-color: var(--color-surface-hover);
    border-left: 1px ridge var(--color-border-strong);
 /*   box-shadow: 
        0.2rem -0.125rem 0.15rem rgba(0, 0, 0, 0.15),
        0.2rem 0.125rem 0.15rem rgba(0, 0, 0, 0.15); */
}
#scoreboard-frame h3 {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin: 1rem 0 0.2rem 0;
    height: auto;
    width: 100%;
    color: var(--color-text-strong);
    border-bottom: 1px solid var(--color-text-muted);
    padding-bottom: 0.3rem;
}
#scoreboard-hover-section {
    position: absolute;
    top: 0rem;
    left: 11.5rem;
    display: grid;
    grid-template: auto auto auto auto auto / 1fr 1fr 1fr;
    width: 38rem;
    height: 30rem;
    padding: 1rem 0.5rem 0.5rem 1.5rem;
    background-color: var(--color-bg);
    border-radius: 0rem 0.1875rem 0.1875rem 0rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.4s ease;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
    z-index: 10000;
    pointer-events: none;
}
#scoreboard-frame:hover #scoreboard-hover-section, #scoreboard-hover-section:hover {
    transform: scaleX(1);
    pointer-events: auto;
    background-color: var(--color-surface-hover);
    border-right: 1px ridge var(--color-border-strong);
 /*   box-shadow: 
        0.2rem -0.125rem 0.25rem rgba(0, 0, 0, 0.15),
        0.2rem 0.125rem 0.25rem rgba(0, 0, 0, 0.15);  */
  /*  border-top: 1px ridge #8c8c8c;
    border-bottom: 1px ridge #8c8c8c; */
}

.scoreboard-button {
    width: 10rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background-color 0.3s ease;
    background-color: var(--color-button-bg);
    cursor: pointer;
    padding: 0.5rem 0.5rem;
}
.scoreboard-button:hover {
    background-color: var(--color-accent);
    scale: 1.03;
}
.scoreboard-button:active {
    background-color: var(--color-accent-strong);
    scale: 1.01;
}
#scoreboard-frame h4 {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0.5rem 0 0.2rem 0;
    height: auto;
    padding-top: 0.5rem;
    width: 100%;
    color: var(--color-text-strong);
    border-bottom: 1px solid var(--color-text-muted);
    padding-bottom: 0.3rem;
}
input[type="text"] {
    width: 100%;
    height: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    text-align: center;
    justify-self: center;
    align-self: center;
}
input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}
label {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    justify-self: center;
    align-self: center;
}
@media (max-width: 768px) {
    input[type="text"] {
        height: 2rem;
        font-size: 1rem;
    }
    label {
        font-size: 1.1rem;
    }
}

/* Main */
.main {
    width: 37rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}
#main-various {
    display: flex;
    flex-direction: column;
}
#main-vertex {
    display: none;
}
#main-desentration {
    display: none;
}
#main-price {
    display: none;
}
#main-general {
    display: none;
}


/* Calculation sections */
.calculation-section {
    width: 100%;
    height: 9.875rem;
    background-color: var(--color-surface-alt);
    border: 2px inset var(--color-border-strong);
    margin-bottom: 1.25rem;
    transition: background-color 0.4s ease;
    position: relative;
}

.calculation-section:hover {
/*    background-color: #a2e6b4;*/
    background-color: var(--color-surface-hover);
}
.calculation-section h2, .pri-glasses-section h2, .pri-cl-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    top: 0.625rem;
    left: 1.25rem;
}
.reset-button, .x-button, .background-button, .background-close-button, .popup-background-button, .popup-background-close-button {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.5625rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.125rem;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: "Arial", sans-serif;
    color: var(--color-text);
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
@media (max-width: 768px) {
    .main {
        width: 100vw;
        padding: 0 0;
    }
    .calculation-section {
        width: 100vw;
        height: auto;
        border: none;
        border-top: 2px inset var(--color-border-strong);
        border-bottom: 2px inset var(--color-border-strong);
    }
    .calculation-section h2, .pri-glasses-section h2, .pri-cl-section h2 {
        font-size: 1.3rem;
        position: relative;
        text-align: left;
        padding: 1.2rem 5vw 0 5vw;
        width: 90vw;
    }
    .reset-button, .x-button, .background-button, .background-close-button, .popup-background-button, .popup-background-close-button {
        top: 0.4rem;
    }
}
.x-button {
    top: 2rem;
}
.background-button {
    right: 2.3rem;
}
.no-x {
    right: -0.35rem !important;
}
.popup-background-button {
    right: 1.3rem;
    top: -0.4rem;
}
#popup-frame .x-button {
    top: 0.625rem;
    z-index: 1000;
}
#stv-standard-values .x-button {
    top: 0.6rem;
    right: 0.625rem;
    z-index: 1000;
}
#scoreboard-frame .x-button, #scoreboard-frame .reset-button {
    top: 0.4rem;
    right: 0.4rem;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    width: 1.09rem;
    height: 0.875rem;
    font-size: 0.7rem;
    font-family: "Arial", sans-serif;
    padding-top: 0.1rem;
}
#scoreboard-frame .reset-button {
    right: 1.75rem;
}
.calculation-section:hover .footer-box {
    background-color: var(--color-surface-hover);
}
.calculate-button {
    width: 8.125rem;
    height: 1.875rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    border-radius: 0.1875rem;
    background-color: var(--color-button-bg);
    border: 1px solid #777;
    transition: background-color 0.3s ease;
    position: absolute;
    bottom: 0.625rem;
    left: 1.875rem;
    padding-top: 0.12rem;
    cursor: pointer;
}
.invalid-input {
    font-size: 1.0rem;
    font-weight: 700;
    display: none;
    background-color: var(--color-warning);
    padding: 0.1rem 0.2rem;
    position: absolute;
    right: 2rem;
    bottom: -0.5rem;
    width: 9rem;
    text-align: center;
    border-radius: 0.1875rem;
    border: 1px solid #777;
}
/*
.calculation-section footer:hover, .calculation-section footer:has(~ .expandable-footer:hover) {
    background-color: var(--color-footer-bg);
}
.calculation-section footer:hover ~ .expandable-footer, .expandable-footer:hover {
    transform: scaleY(1);
    pointer-events: auto;
} */
.background-frame, .popup-background-frame {
    display: none;
    position: absolute;
    top: 0.5rem;
    left: 0.625rem;
    width: 33.6rem;
    flex-direction: column;
    min-height: 8.7rem;
    max-height: 8.7rem;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    z-index: 100;
    overflow: hidden;
    transition: all 0.1s ease;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
    .background-frame {
        width: 100vw;
        left: 0;
        height: auto;
        min-height: auto;
        max-height: 100%;
        padding-top: 2rem;
    }
    .calculate-button {
        left: 2.8vw;
        bottom: 0.8rem;
        height: 2.2rem;
        padding-top: 0.3rem;
        color: black;
        font-size: 1.1rem;
    }
}
.popup-background-frame {
    z-index: 1000;
    left: -1.5rem;
    top: -0;
    min-height: 6rem;
    max-height: 6rem;
    width: 32.5rem;
}
.background-frame:hover, .popup-background-frame:hover {
    max-height: 50rem;
    overflow: visible;
}
.background-frame h5, .popup-background-frame h5, .expandable-footer p {
    font-size: 1.0rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0.5rem;
}
.background-frame p, .popup-background-frame p, .expandable-footer p {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    margin-bottom: 0.4rem;
}
.popup-background-frame-parent {
    position: relative;
}
.footer-box {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--color-surface-alt);
    transition: all 0.4s ease;
    padding: 0.5rem;
    overflow: hidden;
}
.footer-box p {
    font-size: 0.8rem;
}
.footer-box:hover .hidden-footer {
    display: flex;
}
/*
.hidden-footer {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    gap: 0.2rem;
    padding: 0.5rem;
    transition: all 0.3s ease;
}
.hidden-footer h5 {
    font-size: 1.0rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0.5rem;
} */
.source {
    position: absolute;
    top: 0.5rem;
    right: 4rem;
    text-align: right;
}
/*
.calculation-section footer {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background-color: var(--color-footer-bg);
    transition: all 0.3s ease;
} */

.popup-background-frame-parent .source {
    top: -0.5rem;
}

.ref {
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
}
.ref:hover {
    font-weight: 700;
}
#ref-tooltip {
    position: fixed;
    display: none;
    max-width: 30rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-button-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    line-height: 1.4;
    z-index: 9000;
    pointer-events: none;
}
#ref-tooltip a {
    color: var(--color-text-strong);
    text-decoration: none;
}

.ref-tooltip-hint {
    font-size: 0.8em;
    font-weight: 600;
}

/* Calculator section 1-1: VA - Visual acuity conversion --------------------------------------------------------------------------------------------------------*/
.va-content {
    margin-top: 3.5rem;
    display: grid;
    grid-template: auto auto / 7.5rem 7.5rem 7.5rem 7.5rem;
    grid-gap: 0.625rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.calculation-section#va-section {
    min-height: 11rem;
    height: auto;
}
.va-content input {
    width: 7.5rem;
}
#va-section .footer-box {
    height: 2rem;
    padding-right: 4rem;
    bottom: auto;
    top: 7.5rem;
}
#va-section .invalid-input {
    right: auto;
    left: 1rem;
    bottom: 1rem;
}
#va-show-table-button {
    position: absolute;
    top: 8rem;
    right: 1rem;
    width: 7.125rem;
    height: 1.875rem;
    padding-top: 0.25rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    border: 1px solid #777;
    border-radius: 0.1875rem;
    background-color: var(--color-button-bg);
    transition: background-color 0.3s ease;
    cursor: pointer;
}
#va-table-container {
    display: none;
    position: relative;
    width: 90%;
    margin-top: 4rem;
    margin-left: 5%;
    margin-bottom: 1rem;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: auto;
    padding: 1.5rem 0.5rem 1rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    background-color: var(--color-small-box);
    transition: all 0.3s ease;
}
#va-table-container:hover {
    border: 1px solid #777;
    background-color: #eee;
}
#va-table-container h4 {
    font-size: 1rem;
    text-align: center;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}
#va-table-container p {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem 0 0rem 0;
    border-bottom: 1px solid #ccc;
}
#va-table-container .x-button {
    top: 0.5rem;
}
#va-table-snellen-decimal-label, #va-table-snellen-fraction-m-label, #va-table-snellen-fraction-ft-label, #va-table-logmar-label {
    cursor: pointer;
}
#va-table-snellen-decimal-label:hover, #va-table-snellen-fraction-m-label:hover, #va-table-snellen-fraction-ft-label:hover, #va-table-logmar-label:hover {
    background-color: var(--color-accent);
    border-left: 1px solid var(--color-border-strong);
    border-right: 1px solid var(--color-border-strong);
}
#va-table-snellen-decimal-label:active, #va-table-snellen-fraction-m-label:active, #va-table-snellen-fraction-ft-label:active, #va-table-logmar-label:active {
    scale: 0.97;
}
#va-section .background-frame {
    min-height: 10rem;
}

@media (max-width: 768px) {
    .calculation-section#va-section {
        min-height: 18rem;
    }
    .va-content {
        margin-top: 2.5rem;
        grid-template: auto auto auto auto / 1fr 1fr;
        padding-bottom: 1rem;
        grid-gap: 0.2rem;
        font-size: 1.1rem;
    }
    .va-content input {
        font-size: 1.1rem;
        width: 8rem;
    }
    /* Row 1 labels */
    #va-snellen-decimal-label { grid-row: 1; grid-column: 1; }
    #va-snellen-fraction-m-label { grid-row: 1; grid-column: 2; }
    /* Row 2 inputs */
    #va-snellen-decimal-input { grid-row: 2; grid-column: 1; margin-bottom: 0.6rem; }
    #va-snellen-fraction-m-input { grid-row: 2; grid-column: 2; margin-bottom: 0.6rem; }
    /* Row 3 labels */
    #va-snellen-fraction-ft-label { grid-row: 3; grid-column: 1; }
    #va-logmar-label { grid-row: 3; grid-column: 2; }
    /* Row 4 inputs */
    #va-snellen-fraction-ft-input { grid-row: 4; grid-column: 1; margin-bottom: 0.6rem; }
    #va-logmar-input { grid-row: 4; grid-column: 2; margin-bottom: 0.6rem; }

    #va-section .footer-box {
        top: 15rem;
        left: 5vw;
        right: auto;
    }
    #va-show-table-button {
        top: 15.5rem;
        right: 5vw;
    }
    #va-table-container {
        width: 100vw;
        margin-top: 2.5rem;
        margin-left: 0;
        padding-top: 2rem;
    }
}

/* Calculator section 1-2: TCY - Turn cylinder */
.tcy-form {
    margin-top: 2.5rem;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem/ 3.75rem 3.75rem 3.125rem 1.5rem 10.6rem 11rem;
    grid-gap: 0.125rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding-left: 0.6rem;
}
.tcy-form input[type="radio"] {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
}
.tcy-radio-label {
    font-size: 0.85rem;
    text-align: left;
}
.tcy-result-label {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}
@media (max-width: 768px) {
    .tcy-form {
        width: 95vw;
        grid-template: 1.50rem 2.25rem 2.25rem 0.75rem 1.75rem 1.75rem 1.75rem 1.75rem 1.75rem / 0.62fr 0.38fr 1fr 0.5fr;
        grid-gap: 0.1rem;
        margin: 2.5rem 0 1.5rem 0;
        font-size: 1.1rem;
    }
    .tcy-form label {
        font-size: 1.1rem;
    }
    .tcy-form input[type="text"] {
        font-size: 1.1rem;
    }
    .tcy-radio-label {
        font-size: 1.1rem;
    }
    .tcy-result-label {
        font-size: 1.15rem;
    }
    /* Readjusting the grid for mobile */
    #tcy-sphere-label { grid-row: 1; grid-column: 1 / span 2; }
    #tcy-sphere1 { grid-row: 2; grid-column: 1 / span 2; }
    #tcy-sphere2 { grid-row: 3; grid-column: 1 / span 2; }
    #tcy-filler-label1 { grid-row: 4; grid-column: 1 / span 4; }
    #tcy-filler-label2 { display: none; }
    #tcy-plus-to-minus { grid-row: 5; grid-column: 1; justify-self: end; align-self: center; margin-right: 0.2rem; }
    #tcy-plus-to-minus-label { grid-row: 5; grid-column: 2 / span 3; text-align: left; justify-self: start; }
    #tcy-minus-to-plus { grid-row: 6; grid-column: 1; justify-self: end; align-self: center; margin-right: 0.2rem; }
    #tcy-minus-to-plus-label { grid-row: 6; grid-column: 2 / span 3; text-align: left; justify-self: start; }
    .tcy-result-label { grid-row: 7; grid-column: 1 / span 4; text-align: right; justify-self: right; margin-top: 1.5rem; padding-right: 0.5rem; }
    #tcy-result1 { grid-row: 8; grid-column: 1 / span 4; padding-right: 0.7rem; }
    #tcy-result2 { grid-row: 9; grid-column: 1 / span 4; padding-right: 0.7rem; }
}

/* Calculator section 1-3: SPE - Spherical equivalent */
.spe-content {
    margin-top: 2.25rem;
    display: flex;
}
.spe-input-container {
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem/ 5rem 5rem;
    grid-gap: 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding-left: 2.2rem;
}
.spe-input-container input {
    width: 5rem;
}
.spe-result-container {
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem/ 10rem;
    grid-gap: 0.125rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding-left: 3rem;
}
#spe-section .calculate-button {
    margin-left: 1.5rem;
    z-index: 1;
}
#spe-section .footer-box {
    height: 2rem;
    padding-left: 10rem;
}

@media (max-width: 768px) {
    #spe-section {
        height: 19.2rem;
    }
    .spe-content {
        margin-top: 2rem;
        height: auto;
        flex-direction: column;
        gap: 0.5rem;
    }
    .spe-content p {
        font-size: 1.1rem;
    }
    .spe-input-container {
        grid-template: 1.50rem 2.25rem 2.25rem/ 1fr 1fr;
        grid-gap: 0.1rem;
        width: 90vw;
    }
    .spe-input-container input {
        font-size: 1.1rem;
        width: 8rem;
    }
    .spe-result-container {
        padding-left: 9rem;
        grid-template: 1.50rem 1.50rem 1.50rem/ 1fr;
        grid-gap: 0.1rem;
        width: 90vw;
    }
    #spe-section .calculate-button {
        margin-left: 0;
        margin-bottom: 2rem;
    }
    #spe-section .footer-box {
        position: relative;
        padding: 1rem 0 0 0;
    }
    
}

/* Calculator section: KER - Keratometry conversion */
.ker-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 3.2rem;
    gap: 5rem;
}
.ker-content label {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.ker-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
}
#ker-section .invalid-input {
    right: auto;
    left: 1rem;
    bottom: 1rem;
}
@media (max-width: 768px) {
    #ker-section {
        height: 16rem;
    }
    .ker-content {
        margin-top: 2rem;
        gap: 2rem;
    }
    #ker-section .invalid-input {
        bottom: 2rem;
    }
    #ker-section .background-frame:hover {
        min-height: 16rem;
    }
}

/* Calculator section 2-1: VCA - Vertex calculator */
.vca-form {
    margin-top: 2.3125rem;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem 1.25rem/ 3.75rem 3.75rem 3.125rem 2rem 11rem 9rem;
    grid-gap: 0.125rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding-left: 0.6rem;
}
.vca-form .vertex-result-label {
    font-weight: 700;
    font-size: 1rem;
    padding-left: 1rem;
}
#vca-section .footer-box {
    height: 2.8rem;
    width: 65%;
    margin-left: 32.5%;
    bottom: 0.5rem;
}

@media (max-width: 768px) {
    #vca-section {
        height: 25.2rem;
    }
    .vca-form {
        grid-template: 1.50rem 2.25rem 2.25rem 0.75rem 1.50rem 1.50rem 1.50rem/ 1fr 1fr 0.75fr 0.75fr;
        grid-gap: 0.1rem;
        width: 98vw;
        font-size: 1.1rem;
    }
    .vca-form label, .vca-form .vertex-result-label {
        font-size: 1.1rem;
        padding-left: 0rem;
    }
    #vca-section .calculate-button {
        margin: 0 0 4rem 6rem;
        z-index: 1;
    }
    #vca-section .footer-box {
        width: 98vw;
        position: relative;
        margin: 3.4rem 0 0 1vw;
        height: auto;
        text-align: center;
    }
    #vca-adjusted-correction-label { grid-row: 5; grid-column: 1 / span 2; }
    #vca-sph-equivalent-label { grid-row: 5; grid-column: 3 / span 2; }
    #vca-result1 { grid-row: 6; grid-column: 1 / span 2; }
    #vca-sph-equivalent1 { grid-row: 6; grid-column: 3 / span 2; }
    #vca-result2 { grid-row: 7; grid-column: 1 / span 2; }
    #vca-sph-equivalent2 { grid-row: 7; grid-column: 3 / span 2; }
}
/* Calculator section 2-2: VCH - Vertex chart */
.vch-form {
    margin-top: 2.8rem;
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding-left: 2rem;
    width: 100%;
}
.vch-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5rem;
    margin-right: 2rem;
}
.vch-form-item input {
    width: 5rem;
}
#vch-section .calculate-button {
    position: static;
    margin-top: 1rem;
}
#vch-chart {
    margin-top: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    width: 95%;
    margin-left: 2.5%;
    height: auto;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 0.25rem;
    border: 1px solid #aaa;
}
#vch-chart:hover {
    border: 1px solid #777;
    background-color: #eee;
}
#vch-place-filler {
    height: 3rem;
}
#vch-chart h2 {
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding: 0.25rem;
    padding-right: 1.5rem;
    margin-left: 2.5rem;
}
#vch-chart h3 {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0.25rem;
    border-bottom: 1px solid #ccc;
}
#vch-section {
    height: auto;
    min-height: 9.875rem;
}
#vch-section .footer-box {
    height: 2rem;
    position: static;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    #vch-section {
        height: auto;
        min-height: 16.5rem;
    }
    .vch-form {
        width: 90vw;
        overflow: hidden;
        margin-top: 2rem;
        justify-content: space-between;
    }
    .vch-form-item {
        width: 22vw;
        margin-right: 1rem;
    }
    .vch-form-item input {
        width: 22vw;
    }
    #vch-section .calculate-button {
        position: absolute;
        top: 9.4rem;
        left: 6.5rem;
        z-index: 1;
    }
    #vch-section .footer-box {
        width: 98vw;
        position: relative;
        margin: 4.2rem 0 0 1vw;
        height: auto;
        text-align: center;
    }
    #vch-chart {
        margin-top: 1rem;
        width: 95vw;
        margin-left: 2.5vw;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        box-sizing: border-box;
    }
    #vch-chart h2, #vch-chart h3 {
        position: static;
        padding: 0.25rem;
        margin: 0;
        left: auto;
        top: auto;
        width: 100%;
    }
}
/* Calculator section 3-1: EPD - Decentration */
#epd-section {
    height: 12rem;
    position: relative;
    overflow: visible;
}
.epd-form {
    margin-top: 2.7rem;
    margin-left: 1rem;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem 2rem 1.1rem 1.1rem / 3.75rem 3.75rem 0.6rem 2rem 0.6rem 2.3rem 0.6rem 2.8rem 5rem 7.3rem 4rem;
    gap: 0.125rem 0.1rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.epd-form input[type="text"] {
    width: 3.75rem;
    align-self: left;
    justify-self: left;
}
.epd-form input[type="radio"] {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.3rem;
}
#epd-cylinder-label {
    grid-column: 2 / span 3;
}
#epd-axis-label {
    grid-column: 5 / span 5;
}
#epd-mm-decentration-label {
    padding-left: 2rem;
}
#epd-prisms-label {
    padding-left: 0.3rem;
}
#epd-error1, #epd-error2 {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    justify-self: left;
    align-self: left;
    padding-left: 0.7rem;
    overflow: visible;
    white-space: nowrap;
}
.epd-form label {
    text-align: left;
    align-self: left;
    justify-self: left;
}
#epd-direction-label {
    grid-column: 1 / span 11;
    text-align: left;
    justify-self: left;
    align-self: left;
    padding-left: 1rem;
    margin-top: 0.5rem;
}
.epd-direction-radio {
    justify-self: end;
    margin-right: 0.5rem;
/*    grid-column: 1 / span 2; */
}
.epd-direction-radio-label {
    grid-column: 2 / span 10;
    text-align: left;
    justify-self: left;
    align-self: left;
}
#epd-distance1-input, #epd-distance2-input {
    margin-left: 1.5rem;
}
#epd-section .footer-box {
    width: 63%;
    max-height: 4.2rem;
    margin-left: 35%;
    border-left: 1px solid var(--color-border);
    padding: 0.5rem;
    bottom: auto;
    top: 7rem;
    z-index: 100;
}
#epd-section .footer-box p {
    width: 100%;
    text-align: left;
    margin-bottom: 0.2rem;
}
#epd-section .expand-arrow {
    position: absolute;
    top: 3rem;
    right: 0rem;
    opacity: 0.7;
}
#epd-section .footer-box:hover {
    max-height: 20rem;
    height: 20rem;
}
#epd-section .footer-box:hover .expand-arrow {
    display: none;
}
@media (min-width: 769px) {
    #epd-section .background-frame {
        min-height: 10.8rem;
        max-height: 10.8rem;
    }
}


@media (max-width: 768px) {
    #epd-section {
        height: auto;
    }
    .epd-form {
        margin-top: 2rem;
        margin-left: 0.5rem;
        grid-template: 1.50rem 2.25rem 2.25rem 0.75rem 2.8rem 2.25rem 2.25rem / 18vw 18vw 4.5vw 12vw 2.6vw 12vw 5.2vw 8.6vw;
        grid-gap: 0.1rem;
        font-size: 1.1rem;
    }
    .epd-form label {
        font-size: 1.1rem;
        padding-left: 0rem;
    }
    .epd-form input[type="radio"] {
        justify-self: end;
        align-self: center;
    }
    .epd-form input[type="text"] {
        font-size: 1.1rem;
        justify-self: start;
    }
    #epd-axis-label { grid-column: 5 / span 4; }
    #epd-direction-label { grid-row: 5; grid-column: 1 / span 2; margin-bottom: 0.5rem; }
    #epd-direction-horizontal { grid-row: 6; grid-column: 1; }
    #epd-direction-horizontal-label { grid-row: 6; grid-column: 2 / span 3; }
    #epd-direction-vertical { grid-row: 7; grid-column: 1; }
    #epd-direction-vertical-label { grid-row: 7; grid-column: 2 / span 3; }
    #epd-error1 { grid-row: 6; grid-column: 6; position: absolute; top: 18.5rem; left: 14rem; pointer-events: none; background-color: var(--color-warning); opacity: 0.7; }
    #epd-error2 { grid-row: 7; grid-column: 6; position: absolute; top: 20.75rem; left: 14rem; pointer-events: none; background-color: var(--color-warning); opacity: 0.7; }
    #epd-mm-decentration-label { grid-row: 5; grid-column: 5 / span 3; padding-left: 1rem; font-weight: 900; font-size: 1.1rem; }
    #epd-distance1-input { grid-row: 6; grid-column: 5 / span 3; justify-self: start; margin-left: 0rem; }
    #epd-distance2-input { grid-row: 7; grid-column: 5 / span 3; justify-self: start; margin-left: 0rem; }
    #epd-prisms-label { grid-row: 5; grid-column: 8; padding-left: 0rem; text-align: center; font-weight: 900; font-size: 1.1rem; }
    #epd-prisms1-input { grid-row: 6; grid-column: 8; }
    #epd-prisms2-input { grid-row: 7; grid-column: 8; }
    #epd-section .footer-box {
        width: 98vw;
        position: relative;
        margin: 0rem 0 0 1vw;
        height: auto;
        text-align: center;
        top: auto;
    }
}

/* Calculator section 3-2: MAX - Maximum decentration */
#max-section {
    z-index: 1;
    position: relative;
    height: 14rem;
    z-index: 10;
}
.max-form {
    margin-top: 2.7rem;
    margin-left: 1rem;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem 2rem 1.1rem 1.1rem / 3.75rem 3.75rem 0.6rem 2rem 0.6rem 2.3rem 0.6rem 2.8rem 7.3rem 9.3rem;
    gap: 0.125rem 0.1rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.max-form input[type="text"] {
    width: 3.75rem;
}
.max-form input[type="radio"] {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.3rem;
}
.max-form label {
    text-align: left;
    align-self: left;
    justify-self: left;
}
#max-cylinder-label {
    grid-column: 2 / span 3;
}
#max-axis-label {
    grid-column: 5 / span 5;
}
#max-axis1-oblique-label {
    padding-left: 0.6rem;
    grid-column: 8 / span 2;
}
#max-axis2-oblique-label {
    padding-left: 0.6rem;
    grid-column: 8 / span 2;
}
#max-direction-label {
    grid-column: 1 / span 10;
    text-align: left;
    justify-self: left;
    align-self: left;
    padding-left: 1rem;
    margin-top: 0.5rem;
}
.max-direction-radio {
    justify-self: end;
    margin-right: 0.5rem;
}
.max-direction-radio-label {
    grid-column: 2 / span 9;
    text-align: left;
    justify-self: left;
    align-self: left;
}
.max-result-label {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    font-size: 0.9rem;
}
#max-section .calculate-button {
    left: 19.5rem;
    bottom: 4.8rem;
    width: 6rem;
    font-size: 0.95rem;
    padding-top: 0.2rem;
}
#max-section .footer-box {
    width: 63%;
    max-height: 4.2rem;
    margin-left: 35%;
    border-left: 1px solid var(--color-border);
    padding: 0.5rem;
    bottom: auto;
    top: 9rem;
    z-index: 100;
}
#max-section .footer-box p {
    width: 100%;
    text-align: left;
    margin-bottom: 0.2rem;
}
#max-section .expand-arrow {
    position: absolute;
    top: 3rem;
    right: 0rem;
    opacity: 0.7;
}
#max-section .footer-box:hover {
    max-height: 15rem;
    height: 15rem;
}
#max-section .footer-box:hover .expand-arrow {
    display: none;
}
@media (min-width: 769px) {
    #max-section .background-frame {
        min-height: 10.8rem;
        max-height: 10.8rem;
    }
}
#max-section .background-frame:hover {
    max-height: 50rem;
    overflow: visible;
}
@media (max-width: 768px) {
    #max-section {
        height: auto;
    }
    .max-form {
        margin-top: 2rem;
        margin-left: 0.5rem;
        grid-template: 1.50rem 2.25rem 2.25rem 0.75rem 2.8rem 2.25rem 2.25rem/ 18vw 18vw 4.5vw 12vw 2.6vw 12vw 5.2vw 8.6vw;
        grid-gap: 0.1rem;
        font-size: 1.1rem;
        padding-bottom: 1.5rem;
    }
    .max-form label {
        font-size: 1.1rem;
        padding-left: 0rem;
        line-height: 1.1;
    }
    .max-form input[type="radio"] {
        justify-self: end;
        align-self: center;
    }
    .max-form input[type="text"] {
        font-size: 1.1rem;
        justify-self: start;
    }
    .max-form .filler-label {
        display: none;
    }
    #max-axis-label { grid-column: 5 / span 5; }
    #max-axis1-oblique-label { padding-left: 0rem; }
    #max-axis2-oblique-label { padding-left: 0rem; }
    #max-direction-label { grid-row: 5; grid-column: 1 / span 2; margin-bottom: 0.5rem; }
    #max-direction-horizontal { grid-row: 6; grid-column: 1; }
    #max-direction-horizontal-label { grid-row: 6; grid-column: 2 / span 3; }
    #max-direction-vertical { grid-row: 7; grid-column: 1; }
    #max-direction-vertical-label { grid-row: 7; grid-column: 2 / span 3; }
    #max-mm-decentration-label { grid-row: 5; grid-column: 5 / span 4; text-align: center; justify-self: center; font-weight: 900; font-size: 1.2rem; align-self: end; padding-bottom: 0.5rem; }
    #max-result1 { grid-row: 6; grid-column: 5 / span 4; justify-self: start; margin-left: 0rem; text-align: center; justify-self: center; }
    #max-result2 { grid-row: 7; grid-column: 5 / span 4; justify-self: start; margin-left: 0rem; text-align: center; justify-self: center; }
    #max-section .footer-box {
        width: 98vw;
        position: relative;
        margin: 1.5rem 0 0 1vw;
        height: auto;
        text-align: center;
        top: auto;
    }
    #max-section .calculate-button {
        left: 11rem;
        bottom: auto;
        top: 24rem;
        z-index: 1;
        width: 8.1rem;
        font-size: 1rem;
        padding-top: 0.3rem;
    }
}
/* Calculator section 3-3: Spectacle magnification */
#sma-section {
    z-index: 1;
    position: relative;
    height: 38.5rem;
}
#sma-form {
    width: 98%;
    margin-top: 3rem;
    margin-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
#sma-form-line1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#sma-form-line2 {
    display: flex;
    flex-direction: row;
    gap: 0.1rem;
}
#sma-power-factor-container {
    display: grid;
    justify-self: center;
    align-self: center;
    grid-template: 2rem 1.75rem 1.25rem 1.25rem/ 5rem 5rem 5rem;
    grid-gap: 0.1rem;
    width: auto;
}
#sma-power-factor-title {
    grid-column: span 3;
    text-align: center;
    justify-self: center;
    align-self: center;
}
#sma-shape-factor-toggle-button {
    width: 2rem;
    height: 2rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    border-radius: 50%;
    background-color: var(--color-button-bg);
    border: 1px solid #777;
    text-align: center;
    justify-self: center;
    align-self: center;
    margin-top: 1rem;
    padding-bottom: 0.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}
#sma-shape-factor-toggle-button:hover {
    scale: 1.05;
    background-color: var(--color-accent);
}
#sma-shape-factor-container {
    justify-self: center;
    align-self: center;
    display: grid;
    grid-template: 2rem 1.75rem 1.25rem 1.25rem/ 5rem 5rem 5rem;
    grid-gap: 0.1rem;
    width: auto;
}
#sma-shape-factor-title {
    grid-column: span 3;
    text-align: center;
    justify-self: center;
    align-self: center;
}
#sma-result-container {
    display: grid;
    grid-template: 1.75rem 1.50rem 1.50rem/ 7rem 5rem 6.5rem 5rem;
    grid-gap: 0.1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    grid-column: span 2;
    margin-left: 10rem;
    margin-top: 1.2rem;
}
.sma-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
    line-height: 1.1;
}
.sma-form input {
    width: 5rem;
}
#sma-section .calculate-button {
    bottom: auto;
    top: 13rem;
}
#sma-section .footer-box {
    width: 95%;
    max-height: 5.5rem;
    margin-left: 2.5%;
    border-left: 1px solid var(--color-border);
    padding: 0.5rem;
    bottom: auto;
    top: 16rem;
    z-index: 110;
}
#sma-section #sma-RSM-footer-box {
    top: 33rem;
    max-height: 4.5rem !important;
}
#sma-section .footer-box p {
    width: 95%;
    text-align: left;
    margin-bottom: 0.2rem;
}
#sma-section .expand-arrow {
    position: absolute;
    top: 1.5rem;
    right: 0rem;
    opacity: 0.7;
}
#sma-section .footer-box:hover {
    max-height: 11.5rem;
    height: 11.5rem;
}
#sma-section #sma-RSM-footer-box:hover {
    max-height: 20rem !important;
    height: 20rem !important;
}
#sma-section .footer-box:hover .expand-arrow {
    display: none;
}
#sma-section .background-frame {
    min-height: 37.5rem;
    z-index: 400;
}
#sma-section .background-frame:hover {
    min-height: 64rem;
}
#sma-RSM-title {
    margin-top: 6rem;
    margin-left: 2rem;
    margin-bottom: 1rem;
    position: relative;
    top: auto;
    left: auto;
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
    width: 90%;
}
#sma-RSM-radio-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    margin-left: 2rem;
    width: 90%;
}
#sma-RMS-axial-radio-container, #sma-RMS-refractive-radio-container, #sma-RMS-mixed-radio-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
#sma-RSM-result-container {
    display: grid;
    grid-template: 1.75rem 1.50rem 1.50rem/ 7rem 5rem 4rem 1.5rem 6.5rem 5rem 4rem;
    grid-gap: 0.1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    grid-column: span 2;
    margin-left: -1rem;
    margin-top: 1.2rem;
}
@media (max-width: 768px) {
    #sma-section {
        height: 59rem;
    }
    #sma-section h2 {
        left: 0.2rem;
        width: 95vw;
    }
    #sma-section .background-button, #sma-section .reset-button {
        z-index: 100;
    }
    #sma-form {
        margin-top: 2rem;
    }
    #sma-form-line1 {
        display: grid;
        grid-template: auto auto/ 10% 90%;
        grid-gap: 0.1rem;
    }
    #sma-power-factor-container {
        grid-column: span 2;
        grid-template: 2rem 1.75rem 2rem 2rem/ 5rem 5rem 5rem;
    }
    #sma-shape-factor-toggle-button {
        margin-top: 2.8rem;
        margin-left: 1rem;
        padding-top: 0.2rem;
    }
    #sma-shape-factor-container {
        margin-top: 0.5rem;
        grid-template: 2rem 1.75rem 2rem 2rem/ 5rem 5rem 5rem;
    }
    #sma-section .calculate-button {
        top: 23rem !important;
        left: 30vw;
    }
    #sma-section .footer-box {
        top: 32rem !important;
    }
    #sma-section .footer-box:hover {
        max-height: 17rem !important;
        height: 17rem !important;
    }
    #sma-section .expand-arrow {
        top: 2.5rem !important;
    }
    #sma-result-container {
        margin-top: 4.5rem;
        margin-left: -0.5rem;
        grid-template: 1.75rem 1.50rem 1.50rem/ 6rem 4rem 6rem 4rem;
    }
    #sma-RSM-title {
        margin-top: 7rem;
        margin-left: 1rem;
        width: 95%;
    }
    #sma-RSM-result-container {
        display: grid;
        grid-template: 1.75rem 1.50rem 1.50rem/ 5rem 3rem 2rem 0.5rem 4.5rem 3rem 2rem;
        grid-gap: 0.1rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-align: center;
        margin-left: -1rem;
        margin-top: 1.2rem;
    }
    #sma-section #sma-RSM-footer-box {
        top: 54rem !important;
    }
    #sma-section #sma-RSM-footer-box:hover {
        max-height: 30rem !important;
        height: 30rem !important;
    }
    #sma-section .background-frame:hover {
        min-height: 81rem;
    }
}

/* Calculator section 4: PRI - Price calculator */
#main-price {
    position: relative;
}
.discount-radio-container {
    width: 9rem;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
    padding: 0.1rem 0.2rem;
    gap: 0.5rem;
    background-color: var(--color-small-box);
    transition: background-color 0.3s ease;
}
.discount-radio-container > *:first-child {
    grid-column: 1 / -1;
}
#main-price h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0rem;
    display: inline-block;
}
#main-price h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0rem;
    display: inline-block;
}
#pri-sidebar {
    width: 12rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    transition: background-color 0.4s ease;
    position: absolute;
    right: -12.5rem;
    top: 0;
}
#pri-sidebar:hover {
    background-color: var(--color-button-bg);
}
#pri-sidebar-sum-all-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#pri-sidebar p {
    width: 80%;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: #fff;
    padding: 0.2rem 0.2rem;
    border-radius: 0.1875rem;
    border: 1px solid #ccc;
}
#pri-include-panel {
    width: 60%;
    display: none;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    gap: 0.2rem;
    margin-top: 1.5rem;
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.2rem;
    border-radius: 0.1875rem;
    background-color: var(--color-small-box);
    transition: background-color 0.3s ease;
}
#pri-sidebar:hover #pri-include-panel {
    background-color: var(--color-small-box-hover);
}
#pri-include-panel label {
    font-size: 1.1rem;
    font-weight: 600;
}
.pri-include-checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 0.2rem;
    margin-left: 2rem;
}
#pri-space-filler1, #pri-space-filler2 {
    height: 10rem;
}
.pri-glasses-section, .pri-cl-section {
    width: 100%;
    height: 15rem;
    background-color: var(--color-surface-alt);
    border: 2px inset var(--color-border-strong);
    margin-bottom: 1.25rem;
    transition: background-color 0.4s ease;
    position: relative;
}
.pri-glasses-section:hover, .pri-cl-section:hover {
    background-color: var(--color-surface-hover);
/*    background-color: #a2e6b4;*/
}
.pri-glasses-section:hover .discount-radio-container, .pri-cl-section:hover .discount-radio-container {
    background-color: var(--color-small-box-hover);
/*    background-color: #b7e8c3;*/
}
.pri-section-title {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    position: absolute;
    top: 0.7rem;
    right: 2.7rem;
}
.pri-section-title h2 {
    position: static;
}
.pri-section-title input {
    width: 14rem;
    height: 1.6rem;
    background-color: #fff;
}
.pri-content-holder {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
}
.pri-glasses-left-side {
    width: 70%;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem / 2fr 1fr 1fr 1fr;
    grid-gap: 0rem;
    margin-top: 2.2rem;
}
.pri-glasses-right-side {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin-top: 2.2rem;
}
.pri-cl-upper-side {
    width: 90%;
    margin-top: 0.5rem;
    margin-left: 1rem;
    display: grid;
    grid-template: 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem 1.25rem / 3fr 0.75fr 0.5fr 0.75fr 1fr;
    grid-gap: 0rem;
    margin-top: 2.4rem;
}
.pri-cl-bottom-left-side {
    width: 70%;
}
.pri-cl-bottom-right-side {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -0.5rem;
}
.pri-nav-button {
    width: 8.125rem;
    height: 1.875rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    border-radius: 0.1875rem;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border-strong);
    transition: background-color 0.3s ease;
    padding-top: 0.12rem;
    cursor: pointer;
}
.pri-nav-button:hover {
    background-color: var(--color-accent);
}
.pri-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: -0.5rem;
}
@media (max-width: 768px) {
    #pri-sidebar {
        width: 100vw;
        height: auto;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        transition: background-color 0.4s ease;
        position: relative;
        right: auto;
        top: auto;
        margin: 2rem 2.5vw 0 2.5vw;
    }
    #pri-include-panel {
        grid-row: 1 / span 7;
        grid-column: 2;
        display: flex;
    }
    #main-price h2, .pri-glasses-section h2, .pri-cl-section h2 {
        padding: 0.4rem 5vw 0 0;
    }
    .pri-glasses-section, .pri-cl-section {
        height: auto;
        border: none;
        border-top: 2px inset var(--color-border-strong);
        border-bottom: 2px inset var(--color-border-strong);
    }
    .pri-section-title {
        top: 3.3rem;
        left: 2.5rem;
    }
    .pri-glasses-section .pri-content-holder {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
        margin-left: 0.3rem;
    }
    .pri-content-holder label {
        line-height: 1.0;
    }
    .pri-glasses-left-side {
        width: 100%;
        display: grid;
        grid-template: 2rem 1.95rem 1.95rem 1.95rem 1.95rem 1.95rem 1.95rem 1.95rem 1.95rem / 2fr 1fr 1fr 1fr;
        grid-gap: 0rem;
        margin-top: 2.2rem;
    }
    .pri-glasses-right-side {
        width: 100%;
        display: grid;
        grid-template: 1.5rem 1.5rem 1.5rem / 1fr 1fr;
        gap: 0.2rem;
        margin-top: 0.2rem;
        margin-bottom: 0.5rem;
    }
    .pri-glasses-right-side .discount-radio-container {
        grid-row: 1 / span 3;
        width: 100%;
        padding: 0.3rem 0.5rem;
        gap: 0.5rem;
    }
    .pri-glasses-right-side .pri-sum-line, .pri-glasses-right-side .pri-discount-line, .pri-glasses-right-side .pri-total-line {
        justify-self: center;
    }
    .pri-cl-upper-side {
        width: 100%;
        display: grid;
        grid-template: 2rem 1.95rem 1.95rem 1.95rem 1.95rem 1.95rem / 2fr 0.75fr 0.5fr 0.75fr 1fr;
        grid-gap: 0rem;
        margin-top: 3.7rem;
        margin-left: 0.1rem;
    }
    .pri-cl-section .pri-content-holder {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        margin-top: 1.5rem;
        margin-left: 0.3rem;
        margin-bottom: 0.5rem;
    }
    .pri-cl-upper-side label {
        line-height: 1.0;
    }
    .pri-cl-bottom-left-side {
        width: 100%;
    }
    .pri-cl-bottom-left-side .discount-radio-container {
        width: 100%;
        padding: 0.3rem 0.5rem;
        gap: 0.5rem;
    }
    .pri-cl-bottom-right-side {
        width: 100%;
    }
    .pri-nav {
        width: 95vw;
        justify-content: space-between;
        margin-top: -0.5rem;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    .pri-nav-button {
        width: 30vw;
        height: 2.8rem;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1;
        color: black;
        align-items: center;
    }
}

/* Graphics */

.graphics-button {
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.graphics-button:hover {
    transform: scale(1.05);
}
.graphics-button-box {
    transition: all 0.1s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.graphics-button-box:active {
    fill: var(--color-accent-strong);
    transform: scale(0.98);
}
.graphics-svg-text {
    font-size: 1.3rem;
    font-weight: 700;
    fill: black;
}
.is-marked {
    fill: var(--color-accent);
}

/* IPD SVG -----------------------------------------------------------------*/
#ipd-section {
    height: 32.3rem;
    min-height: 0;
}
#ipd-section h2 {
    font-size: 1.3rem;
    left: 33%
}
#ipd-svg {
    width: 120%;
    background-color: #e8e8e8;
    margin-left: -10%;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-strong);
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    margin-top: -0.1rem;
    padding-top: 1rem;
}
@media (max-width: 768px) {
    #ipd-section {
        height: auto;
    }
    #ipd-section h2 {
        top: 0;
        left: 18%;
        font-size: 1.4rem;
    }
    #ipd-svg {
        width: 100%;
        margin-left: 0;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 1.5rem;
        height: auto;
        display: block;
    }
}
#ipd-operator-right-eye, #ipd-operator-left-eye {
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.ipd-lid {
    transition: all 0.2s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.ipd-lid-upper {
    transition: all 0.2s ease;
    transform-box: fill-box;
    transform-origin: top;
    transform: scaleY(0);
}
#ipd-operator-right-eye:active .ipd-lid-upper, #ipd-operator-left-eye:active .ipd-lid-upper, .ipd-closed-lid {
    transform: scaleY(1);
}
.ipd-buttons {
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.ipd-buttons:hover {
    transform: scale(1.05);
}
#ipd-mono-buttons-right-box:active, #ipd-mono-buttons-left-box:active, #ipd-bino-buttons-1-box:active, #ipd-bino-buttons-2-box:active, #ipd-c-button-box:active {
    fill: var(--color-accent-strong);
}
#ipd-ruler {
    transition: all 0.6s ease;
    transform-box: fill-box;
    transform-origin: center;
    transform: translate(0, 30px);
}
#ipd-ruler.ipd-ruler-bino {
    transform: translate(156px, 20px) rotate(180deg);
}
#ipd-operator-right-eye:active #ipd-ruler, #ipd-operator-left-eye:active #ipd-ruler, .ipd-ruler.ipd-closed-ruler {
    transform: scaleX(1);
}
#ipd-mono-pd-right, #ipd-mono-pd-left, #ipd-bino-pd-step-1, #ipd-bino-pd-step-2, #ipd-vision-line1, #ipd-vision-line2 {
    transition: all 0.7s ease;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}
#ipd-mono-pd-right.ipd-visible-graphic, #ipd-mono-pd-left.ipd-visible-graphic, #ipd-bino-pd-step-1.ipd-visible-graphic, #ipd-bino-pd-step-2.ipd-visible-graphic, #ipd-vision-line1.ipd-visible-graphic, #ipd-vision-line2.ipd-visible-graphic {
    opacity: 1;
}
#ipd-svg-right-eye-irispupil, #ipd-svg-left-eye-irispupil {
    transition: transform 0.6s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#ipd-svg-right-eye-irispupil.ipd-move-left {
    transform: translate(10px, 0px);
}
#ipd-svg-left-eye-irispupil.ipd-move-right {
    transform: translate(-10px, 0px);
}
.cover-ipd-text {
    font-size: 1.3rem;
    font-weight: 700;
    fill: black;
}

/* Cover test SVG -----------------------------------------------------------------*/
#cot-section {
    height: 31rem;
    min-height: 0;
}
#cot-section h2 {
    font-size: 1.3rem;
    left: 40%
}
#cover-svg {
    width: 120%;
    background-color: #e8e8e8;
    margin-left: -10%;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-strong);
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    margin-top: -0.1rem;
    padding-top: 1rem;
}
@media (max-width: 768px) {
    #cot-section {
        height: auto;
    }
    #cot-section h2 {
        top: 0;
        left: 30%;
        font-size: 1.4rem;
    }
    #cover-svg {
        width: 110%;
        margin-left: -5%;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 1.5rem;
        height: auto;
        display: block;
    }
}
.cover-svg-button {
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.cover-svg-button:hover {
    transform: scale(1.05);
    stroke-width: 7;
}
.cover-svg-text {
    font-size: 1.3rem;
    font-weight: 700;
    fill: black;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#cover-svg-cover {
    transition: all 0.2s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.cover-right-eye {
    transform: translate(-460px, -25px);
}
.cover-left-eye {
    transform: translate(-160px, -25px);
}
#cover-svg-right-pupil, #cover-svg-left-pupil {
    transition: transform 0.8s ease-out;
}
.cover-button-marked {
    fill: var(--color-accent);
}
#cover-right-eye-button-box:active, #cover-left-eye-button-box:active, #cover-uncover-button-box:active, #cover-orthophoria-button-box:active, #cover-esophoria-button-box:active, #cover-exophoria-button-box:active, #cover-esotropia-button-box:active, #cover-exotropia-button-box:active, #cover-right-hyperphoria-button-box:active, #cover-right-hypophoria-button-box:active, #cover-right-hypertropia-button-box:active, #cover-alternating-exotropia-button-box:active {
    fill: var(--color-accent-strong);
}
.cover-svg-look-right {
    transform: translate(-20px, 0px);
}
.cover-svg-look-left {
    transform: translate(20px, 0px);
}
.cover-svg-look-up {
    transform: translate(0px, -13px);
}
.cover-svg-look-down {
    transform: translate(0px, 13px);
}

/* NPC Near point of convergence SVG -----------------------------------------------------------------*/
#npc-section {
    height: 34.2rem;
    min-height: 0;
    position: relative;
}
#npc-section h2 {
    font-size: 1.3rem;
    left: 30%
}
#npc-graphic-wrapper {
    position: relative;
    width: 120%;
    margin-left: -10%;
}
#npc-svg {
    width: 100%;
    height: 34.2rem;
    display: block;
    margin-top: -0.1rem;
    margin-left: 0;
    background-color: #e8e8e8;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-strong);
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
#npc-svg-right-eye-irispupil, #npc-svg-left-eye-irispupil {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.5s ease;
}
#npc-slider {
    position: absolute;
    top: 57.3%;
    left: 50%;
    accent-color: black;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    width: 22rem;
    cursor: pointer;
    appearance: none;
    background: #00000009;
}
#npc-value-text {
    font-size: 1.8rem;
    font-weight: 700;
    fill: black;
}
#npc-result-input {
    font-size: 1.3rem;
    font-weight: 700;
    position: absolute;
    top: 53.5%;
    left: 11%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    width: 6rem;
    height: 2rem;
}

@media (max-width: 768px) {
    #npc-section {
        height: auto;
    }
    #npc-section h2 {
        left: 10%;
        font-size: 1.4rem;
        top: 0;
    }
    #npc-graphic-wrapper {
        width: 100%;
        margin-left: 0;
    }
    #npc-svg {
        width: 100%;
        margin-left: 0;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top: 0;
        height: auto;
        display: block;
        padding-bottom: 1.5rem;
    }
    #npc-result-input {
        width: 3rem;
        height: 1.3rem;
        font-size: 1rem;
        top: 49.5%;
    }
    #npc-slider {
        transform: translate(-50%, 100%) rotate(180deg);
        width: 80%;
    }
}

/* Motility SVG -----------------------------------------------------------------*/
#mot-section {
    height: 38rem;
    min-height: 0;
}
#mot-section h2 {
    font-size: 1.3rem;
    left: 40%
}
#motility-svg {
    width: 120%;
    background-color: #e8e8e8;
    margin-left: -10%;
    margin-top: -0.1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-strong);
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1),
}
@media (max-width: 768px) {
    #mot-section {
        height: auto;
    }
    #mot-section h2 {
        left: 30%;
        font-size: 1.4rem;
        top: 0;
    }
    #motility-svg {
        width: 100%;
        margin-left: 0;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding-top: 0;
        height: auto;
        display: block;
        padding-bottom: 1.5rem;
    }
    .motility-svg-arrow {
        stroke-width: 12;
    }
    .motility-svg-arrow:hover {
        stroke-width: 15;
    }
}
#motility-svg-right-pupil, #motility-svg-left-pupil {
    transition: transform 1s ease;
}
#motility-svg-right-inferior-oblique-background,
#motility-svg-right-medial-rectus-background,
#motility-svg-right-superior-oblique-background,
#motility-svg-right-inferior-rectus-background,
#motility-svg-right-temporal-rectus-background,
#motility-svg-right-superior-rectus-background,
#motility-svg-right-inferior-oblique-text,
#motility-svg-right-medial-rectus-text,
#motility-svg-right-superior-oblique-text,
#motility-svg-right-inferior-rectus-text,
#motility-svg-right-temporal-rectus-text,
#motility-svg-right-superior-rectus-text,
#motility-svg-left-superior-rectus-background,
#motility-svg-left-medial-rectus-background,
#motility-svg-left-inferior-rectus-background,
#motility-svg-left-superior-oblique-background,
#motility-svg-left-temporal-rectus-background,
#motility-svg-left-inferior-oblique-background,
#motility-svg-left-superior-rectus-text,
#motility-svg-left-temporal-rectus-text,
#motility-svg-left-inferior-rectus-text,
#motility-svg-left-superior-oblique-text,
#motility-svg-left-medial-rectus-text,
#motility-svg-left-inferior-oblique-text {
    opacity: 0;
    transition: all 0.3s ease-out;
    transform-origin: center;
    transform-box: fill-box;
    cursor: default;
}
#motility-right-superior-oblique-muscle,
#motility-right-inferior-oblique-muscle,
#motility-right-superior-rectus-muscle,
#motility-right-medial-rectus-muscle,
#motility-right-inferior-rectus-muscle,
#motility-right-temporal-rectus-muscle,
#motility-left-superior-oblique-muscle,
#motility-left-inferior-oblique-muscle,
#motility-left-superior-rectus-muscle,
#motility-left-medial-rectus-muscle,
#motility-left-inferior-rectus-muscle,
#motility-left-temporal-rectus-muscle {
    opacity: 0.05;
}
#motility-svg-right-inferior-oblique-background.look-up-left,
#motility-svg-right-inferior-oblique-text.look-up-left,
#motility-right-inferior-oblique-muscle.look-up-left,
#motility-svg-left-superior-rectus-background.look-up-left,
#motility-svg-left-superior-rectus-text.look-up-left,
#motility-left-superior-rectus-muscle.look-up-left,
#motility-svg-right-medial-rectus-background.look-left,
#motility-svg-right-medial-rectus-text.look-left,
#motility-right-medial-rectus-muscle.look-left,
#motility-svg-left-temporal-rectus-background.look-left,
#motility-svg-left-temporal-rectus-text.look-left,
#motility-left-temporal-rectus-muscle.look-left,
#motility-svg-right-superior-oblique-background.look-down-left,
#motility-svg-right-superior-oblique-text.look-down-left,
#motility-right-superior-oblique-muscle.look-down-left,
#motility-svg-left-inferior-rectus-background.look-down-left,
#motility-svg-left-inferior-rectus-text.look-down-left,
#motility-left-inferior-rectus-muscle.look-down-left,
#motility-svg-right-inferior-rectus-background.look-down-right,
#motility-svg-right-inferior-rectus-text.look-down-right,
#motility-right-inferior-rectus-muscle.look-down-right,
#motility-svg-left-superior-oblique-background.look-down-right,
#motility-svg-left-superior-oblique-text.look-down-right,
#motility-left-superior-oblique-muscle.look-down-right,
#motility-svg-right-temporal-rectus-background.look-right,
#motility-svg-right-temporal-rectus-text.look-right,
#motility-right-temporal-rectus-muscle.look-right,
#motility-svg-left-medial-rectus-background.look-right,
#motility-svg-left-medial-rectus-text.look-right,
#motility-left-medial-rectus-muscle.look-right,
#motility-svg-right-superior-rectus-background.look-up-right,
#motility-svg-right-superior-rectus-text.look-up-right,
#motility-right-superior-rectus-muscle.look-up-right,
#motility-svg-left-inferior-oblique-background.look-up-right,
#motility-svg-left-inferior-oblique-text.look-up-right,
#motility-left-inferior-oblique-muscle.look-up-right {
    opacity: 1;
}
#motility-svg-right-muscle-eye.look-up-left,
#motility-svg-right-muscle-eye.look-down-left,
#motility-svg-left-muscle-eye.look-up-right,
#motility-svg-left-muscle-eye.look-down-right {
    opacity: 0.5;
}
#motility-svg-right-inferior-oblique-background, #motility-svg-left-superior-rectus-background {
    transform: rotate(155deg);
    transform-box: fill-box;
    transform-origin: center;
}
#motility-svg-right-superior-oblique-background, #motility-svg-left-inferior-rectus-background {
    transform: rotate(-155deg);
    transform-box: fill-box;
    transform-origin: center;
}
#motility-svg-right-inferior-rectus-background, #motility-svg-left-superior-oblique-background {
    transform: rotate(155deg);
    transform-box: fill-box;
    transform-origin: center;
}
#motility-svg-right-superior-rectus-background, #motility-svg-left-inferior-oblique-background {
    transform: rotate(-155deg);
    transform-box: fill-box;
    transform-origin: center;
}
#motility-svg-right-pupil.look-up-left, #motility-svg-left-pupil.look-up-left {
    transform: translate(10.6px, -8px);
}
#motility-svg-right-pupil.look-left, #motility-svg-left-pupil.look-left {
    transform: translate(20px, 0px);
}
#motility-svg-right-pupil.look-down-left, #motility-svg-left-pupil.look-down-left {
    transform: translate(10.6px, 9px);
}
#motility-svg-right-pupil.look-down-right, #motility-svg-left-pupil.look-down-right {
    transform: translate(-10.6px, 9px);
}
#motility-svg-right-pupil.look-right, #motility-svg-left-pupil.look-right {
    transform: translate(-20px, 0px);
}
#motility-svg-right-pupil.look-up-right, #motility-svg-left-pupil.look-up-right {
    transform: translate(-10.6px, -8px);
}

.motility-svg-text {
    font-size: 1.3rem;
    font-weight: 700;
    fill: #880a3c;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.motility-svg-arrow {
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
    cursor: pointer;
}
.motility-svg-arrow:hover {
    transform: scale(1.1);
    stroke-width: 10;
}


/* STV - Standard values ----------------------------------------------- */
#main-standard-values {
    position: relative;
    height: auto;
}
#stv-standard-values {
    height: auto;
    text-align: left;
    background-color: #e9e9e9;
}
#stv-standard-values:hover {
    background-color: #e9e9e9;
}
#stv-thumb-line {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color-text-muted);
    background-color: #e9e9e9;
    margin-top: 1rem;
    gap: 0.2rem;
}
#stv-thumb-line-whole, #stv-thumb-line-anterior, #stv-thumb-line-div, #stv-thumb-line-refraction, #stv-thumb-line-equations {
    width: 6rem;
    height: auto;
    cursor: pointer;
}
#stv-important-info-button {
    display: none;
}
@media (max-width: 768px) {
    #stv-thumb-line {
        width: 100vw;
        margin-left: 1vw;
        margin-right: 1vw;
        padding-left: 0;
        gap: 0.5vw;
        align-items: auto;
        justify-content: flex-start;
    }
    #stv-thumb-line-whole, #stv-thumb-line-anterior, #stv-thumb-line-div, #stv-thumb-line-refraction, #stv-thumb-line-equations {
        width: 19.2vw;
    }
    #stv-important-info-button {
        display: block;
        width: 100%;
        height: 1.5rem;
        border-radius: 0rem;
        border: 1px solid rgba(105, 105, 105, 0.2);
        font-size: 0.9rem;
        background-color: #ccc;
    }
    #stv-important-info-button:hover {
        background-color: #bfbfbf;
        scale: 1.02;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    }
    #stv-important-info-button:active {
        background-color: var(--color-accent-strong);
        scale: 0.98;
        box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
    }
    #main-standard-values .source {
        top: auto;
        bottom: -0.8rem;
        right: 0.3rem;
    }
    .popup-background-frame-parent {
        padding-bottom: 1rem;
    }
}
#stv-thumb-line-whole:hover, #stv-thumb-line-anterior:hover, #stv-thumb-line-div:hover, #stv-thumb-line-refraction:hover, #stv-thumb-line-equations:hover {
    transform: scale(1.1);
    border: 2px solid var(--color-accent-strong);
}
#stv-thumb-line-whole:active, #stv-thumb-line-anterior:active, #stv-thumb-line-div:active, #stv-thumb-line-refraction:active, #stv-thumb-line-equations:active {
    border: 2px solid var(--color-accent-strong);
    transform: scale(0.98);
}
.stv-mobile-navigation-dropdown {
    display: none;
}
@media (max-width: 768px) {
    .stv-mobile-navigation-dropdown {
        position: absolute;
        top: 21rem;
        right: 0vw;
        width: 100vw;
        height: 2.9rem;
        padding: 0rem 0.2rem 1rem 0.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        background-color: rgba(168, 168, 168, 0.9);
        border-radius: 0rem;
        overflow: hidden;
        z-index: 600;
        transition: all 0.4s ease;
    }
    .stv-mobile-navigation-dropdown-row {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 0.1rem;
    }
    .stv-mobile-navigation-dropdown-item {
        font-size: 0.93rem;
        font-weight: 600;
        text-align: left;
        background-color: #ccc;
        border: 1px solid rgba(105, 105, 105, 0.2);
        border-radius: 1rem;
        padding: 0.25rem 0.4rem;
        width: auto;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: all 0.2s ease;
        cursor: pointer;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    }
    .header-row {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        padding-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
    }

    .stv-mobile-navigation-dropdown,
    .stv-mobile-navigation-dropdown * {
        -webkit-tap-highlight-color: transparent;
    }
}
#stv-whole {
    width: 100%;
    min-height: 25rem;
    margin: 1rem 0rem 1.5rem 0rem;
    background-color: #e9e9e9;
    position: relative;
    cursor: pointer;
    padding-top: 25rem;
}
#stv-whole-box {
    width: 100%;
    height: 25rem;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 768px) {
    #stv-whole-box {
        width: 120vw;
        left: -6vw;
        top: -1rem;
    }
    #stv-whole-retina,
    #stv-whole-axiallength,
    #stv-whole-lensthickness,
    #stv-whole-pupildiameter,
    #stv-whole-globeheight,
    #stv-whole-vitreousdepth,
    #stv-whole-angledegrees,
    #stv-whole-corneacloseup,
    #stv-whole-anteriorchamberdepth,
    #stv-whole-tearfilm {
        stroke-width: 20;
    }



    #stv-anterior-box path,
    #stv-anterior-box ellipse {
      stroke-width: 30;
    }
}
/*
#stv-whole-bulbus {
    position: absolute;
    top: 0rem;
    left: 9rem;
    scale: 0.8;
}
#stv-whole-cornea {
    position: absolute;
    top: 3.85rem;
    left: 1rem;
    scale: 0.8;
}
#stv-whole-lens {
    position: absolute;
    top: 6.6rem;
    left: 10.4rem;*/
#stv-whole-lens {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 499;
}
#stv-whole-lens.is-pulsed {
    transform: scale(1.2, 0.9);
}
#stv-whole-iris-upper {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-iris-upper.is-pulsed {
    transform: scale(1.15, 1);
}
#stv-whole-iris-lower {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-iris-lower.is-pulsed {
    transform: scale(1.15, 1);
}
#stv-whole-ciliarybody-upper {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-ciliarybody-upper.is-pulsed {
    transform: scale(0.9, 0.8);
}
#stv-whole-ciliarybody-lower {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-ciliarybody-lower.is-pulsed {
    transform: scale(0.9, 0.8);
}
#stv-whole-zonula-upper {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-zonula-upper.is-pulsed {
    transform: scale(1.05, 1.3);
}
#stv-whole-zonula-lower {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 500;
}
#stv-whole-zonula-lower.is-pulsed {
    transform: scale(1.05, 1.3);
}
#stv-whole-zonula {
    position: absolute;
    top: 4.5rem;
    left: 12rem;
    transform: scale(0.7, 0.8);
    transition: transform 0.3s ease;
    z-index: 490;
}
#stv-whole-zonula.is-pulsed {
    transform: scale(0.8);
}
#stv-whole-axiallength {
    opacity: 0.3;
    z-index: 501;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-anteriorchamberdepth {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-lensthickness {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-pupildiameter {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-angledegrees {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-globeheight {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-conjunctiva {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 400;
    opacity: 0.7;
}
#stv-whole-retina {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 500;
    opacity: 0.8;
}
#stv-whole-choroid {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 500;
    opacity: 0.9;
}
#stv-whole-retina:hover, #stv-whole-choroid:hover {
    opacity: 1;
    transform: scale(2);
}
#stv-whole-opticnerve {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 500;
    opacity: 0.99;
}
#stv-whole-opticnerve:hover {
    opacity: 1;
    transform: scale(1.4);
}
#stv-whole-info-opticnerve sup,
.data-value sup {
    line-height: 0;
}
#stv-whole-vitreousdepth {
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#stv-whole-corneacloseup {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 500;
    opacity: 0.7;
}
#stv-whole-corneacloseup:hover {
    opacity: 1;
    transform: scale(1.5);
}
#stv-whole-tearfilm {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s ease;
    z-index: 500;
    opacity: 0.5;
}
#stv-whole-tearfilm:hover {
    transform: scale(1.5);
    opacity: 0.7;
}
#stv-whole-info, #stv-anterior-info {
    display: none;
    position: relative;
    width: 100%;
    height: auto;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-text-strong);
    background-color: var(--color-bg);
    border: 1px solid var(--color-text-muted);
    padding: 0rem 1rem 1rem 1rem;
    z-index: 500;
    cursor: default;
}
/*
#stv-whole::before {
    content: "";
    display: block;
    height: 24rem;
}*/
#stv-whole-info {
    width: 90%;
    margin-left: 1.7rem;
}
@media (max-width: 768px) {
    #stv-whole-info, #stv-anterior-info {
        width: 90%;
        margin-left: 5vw;
    }
}
#stv-standard-values h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 5rem;
    border-bottom: 1px solid var(--color-text-muted);
}
#stv-standard-values h4 {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    width: auto;
    margin: 1rem 0 0.5rem 0;
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--color-text-muted);
}
#stv-standard-values h5 {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    width: auto;
    margin: 0.3rem 0 0.2rem 0;
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--color-text-muted);
}
#stv-standard-values h6 {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    width: auto;
    margin: 0.6rem 0 0.2rem 0;
    padding: 0 1.5rem 0 1.5rem;
    border-bottom: 1px solid var(--color-text-muted);
    display: inline-block;
}
#stv-standard-values p {
    margin-top: 0.5rem;
    width: 90%;
    font-size: 0.95rem;
}
.standard-emphasis {
    font-weight: 700;
    font-size: 1rem;
}
#stv-standard-values footer {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding-left: 1rem;
}
#etdrs-grid {
    width: 90%;
    margin-top: 1rem;
    margin-left: 1rem;
    height: auto;
}
.etdrs-cell-text {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    justify-self: center;
    align-self: center;
    pointer-events: none;
}
#etdrs-grid-info-box {
    width: 98%;
    margin-left: 1%;
    margin-top: 1rem;
    background-color: var(--color-small-box);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding: 0.25rem 0.5rem 0.7rem 0.5rem;
    border: 1px solid var(--color-border);
    position: relative;
    min-height: 3rem;
}
#etdrs-grid-info-box .source {
    top: 0rem;
    right: 3rem;
    max-width: 7rem;
}
@media (max-width: 768px) {
    #etdrs-grid-info-box .source {
        top: auto;
        bottom: -1.5rem;
        right: 0.3rem;
    }
}
.etdrs-grid-info-box-item {
    display: none;
}
#etdrs-grid-info-box-intro {
    display: block;
}
#stv-anterior-frame {
    display: none;
    width: 90%;
    min-height: 25rem;
    margin: 1rem 0rem 1.5rem 1.7rem;
    background-color: #e9e9e9;
    position: relative;
    cursor: pointer;
    padding-top: 25rem;
}
@media (max-width: 768px) {
    #stv-anterior-frame {
        width: 100%;
        margin-left: 0;
    }
}
#stv-anterior-box {
    position: absolute;
    top: 0rem;
    left: 0rem;
    width: 100%;
    height: 25rem;
    z-index: 500;
}
#stv-anterior-tearmeniscus {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
}
#stv-anterior-hvid {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
}
#stv-anterior-pupildiameter {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
}
#stv-anterior-globe {
    opacity: 0.05;
    z-index: 2;
}
#stv-anterior-transverse {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.3;
    z-index: 500;
    transition: all 0.3s ease;
}
#stv-whole-axiallength:hover, #stv-whole-anteriorchamberdepth:hover, #stv-whole-vitreousdepth:hover, #stv-whole-lensthickness:hover, #stv-anterior-hvid:hover, #stv-anterior-transverse:hover {
    opacity: 1;
    z-index: 5001;
    transform: scale(1, 1.5);
}
#stv-whole-pupildiameter:hover, #stv-whole-globeheight:hover, #stv-anterior-pupildiameter:hover {
    opacity: 1;
    transform: scale(1.5, 1);
}
#stv-whole-angledegrees:hover {
    opacity: 1;
    transform: scale(1.5);
}
#stv-whole-conjunctiva:hover {
    opacity: 1;
    scale: 1.2;
}
#stv-anterior-tearmeniscus:hover {
    opacity: 1;
    stroke-width: 16;
}
/*
#stv-refraction-frame {
    display: none;
    width: 100%;
    height: auto;
} */
#stv-refraction-frame, #stv-div-frame, #stv-equations-frame {
    margin: 1rem 0rem 1.5rem 0rem;
    display: none;
    position: relative;
    height: auto;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    width: 100%;
    color: var(--color-text-strong);
    padding: 0.5rem 1rem 1rem 1rem;
    cursor: default;
}

#stv-footer {
    position: absolute;
    width: 20rem;
    top: 0rem;
    left: 37rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    padding: 1rem;
    background-color: var(--color-surface-alt);
}
#stv-footer p {
    margin-bottom: 0.5rem;
}
#stv-footer-close-button {
    display: none;
}
@media (max-width: 768px) {
    #stv-footer {
        display: none;
        left: 2.5vw;
        top: 5.2rem;
        width: 95vw;
        z-index: 110;
        border: 1px solid var(--color-border);
        border-top: none;
        padding-top: 2.2rem;
    }
    #stv-footer-close-button {
        display: block;
    }
    #stv-footer .x-button {
        top: 0.5rem;
        padding-top: 0.02rem;
    }
}

.data-value-wrapper {
    display: inline-block;
    position: relative;
}
.data-value {
    display: inline-block;
    background: rgba(120, 160, 220, 0.15);
    border: 1px solid rgba(80, 120, 180, 0.6);
    border-radius: 0.4rem;
    padding: 0 0.25rem 0 0.25rem;
    text-underline-offset: 2px;
    line-height: 1.2;
    cursor: pointer;
}
.data-value:hover {
    background-color: var(--color-accent);
    scale: 1.02;
}
.data-value:active {
    background-color: var(--color-accent-strong);
    scale: 0.98;
}
.data-value-popup {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: -7.5rem;
    width: 25rem;
    height: auto;
    background-color: var(--color-popup-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.1rem;
    line-height: 1.2;
    z-index: 1000;
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1),
    0 0.125rem 0.75rem rgba(0, 0, 0, 0.15); 
}
.data-value-popup-item {
    padding: 0.5rem 1rem;
    display: inline-block;
    width: 94%;
}
@media (max-width: 768px) {
    .data-value-popup {
        width: 80vw;
        position: fixed;
        left: 10vw;
    }
}
.equation-container {
    align-items: center;
    justify-content: flex-start;
    width: 90%;
    display: flex;
    color: black;
    margin: 0.7rem 5% 0 5%;
}
.equation-medium {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1rem 0.5rem 1rem;
}
.equation-small {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.equation-operator {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1rem 0.5rem 1rem;
}
.equation-fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0rem 1rem 0rem 1rem;
}
.equation-fraction .equation-small, .equation-fraction .equation-medium {
    padding: 0 0.5rem 0 0.5rem;
}
.equation-fraction-line {
    width: 100%;
    height: 0;
    border-top: 2px solid black;
    margin: 2px 0;
}
.equation-parenthesis-around-fraction {
    display: inline-block;
    margin: 0 -1rem;
}
@media (max-width: 768px) {
    .equation-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #equation-snellen-fraction-left-side {
        width: 20%;
    }
    #equation-snellen-fraction-right-side {
        width: 75%;
    }
    #equation-prentices-rule-left-side {
        width: 20%;
    }
    #equation-prentices-rule-right-side {
        width: 75%;
    }
    #stv-equations-source {
        top: -1.5rem !important;
        bottom: auto !important;
    }
}
/* Calculator section 5-CASH: Cash registry counter */
#cash-section {
    height: 15rem;
    overflow: hidden;
}

#cash-content {
    display: flex;
    flex-direction: row;
    margin-top: 2.7rem;
    width: 98%;
    margin-left: 0.5rem;
    gap: 1rem;
}
.cash-form-column {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.2rem;
    height: auto;
}
.cash-form-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 10rem;
    gap: 0.1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.1rem;
}
.cash-form-item input {
    flex: 0 0 3rem;
}
.cash-input-1 {
    width: 3rem;
    padding-right: 0.1rem;
}
.cash-input-2 {
    width: 3rem;
    padding-left: 0.1rem;
}
.cash-result-label {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}
#cash-total-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 2rem;
    gap: 1rem;
    margin-top: 0.5rem;
}
#cash-section .footer-box {
    padding-bottom: 0;
    margin-bottom: -0.2rem;
}
@media (max-width: 768px) {
    #cash-section {
        height: auto;
    }
    #cash-content {
        width: 100vw;
        display: grid;
        grid-template: 1fr 1fr / 1fr 1fr;
        position: relative;
        gap: 0;
        margin-left: 1vw;
        margin-right: 1vw;
    }
    .cash-form-column {
        padding: 0.05rem;
    }
    #cash-form-column-2 {
        grid-column: 1;
    }
    #cash-form-column-3 {
        grid-column: 2;
        grid-row: 1;
    }
    #cash-total-container {
        position: absolute;
        top: 14rem;
        left: 50vw;
        width: 47vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .cash-form-item {
        width: 45vw;
    }
    #cash-section .footer-box {
        display: none;
    }
}


/* Calculator section 5-1: DCO - Conversion meter, feet, inches */
.dco-content {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    gap: 1rem;
}
.dco-content label {
    font-size: 1rem;
}
#dco-meter-input-container {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-left: 1rem;
}
#dco-feet-input-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-right: 2rem;
}
.dco-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5rem;
}
#feet-inches-separate-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    gap: 1rem;
}
#feet-inches-combined-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.3fr 1fr 0.3fr;
    align-items: center;
    justify-content: center;
    gap: 0rem;
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.5rem 0.5rem 0.5rem;
    border-radius: 0.1875rem;
    background-color: var(--color-small-box);
    transition: background-color 0.3s ease;
}
#feet-inches-combined-container > *:first-child {
    grid-column: 1 / -1;
}
#dco-section:hover #feet-inches-combined-container {
    background-color: var(--color-small-box-hover);
}
#feet-inches-combined-container input {
    margin-right: 0.2rem;
}
#dco-section .footer-box {
    height: 2rem;
    margin-right: 16rem;
}
@media (max-width: 768px) {
    .dco-content label {
        font-size: 1.1rem;
    }
    .dco-content {
        margin-top: 2.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    #dco-section .footer-box {
        position: relative;
        margin: 2rem 0 0 0;
    }
    .dco-filler {
        display: none;
    }
    #dco-meter-input-container {
        width: auto;
        gap: 1rem;
        margin-left: 0;
    }
    #dco-feet-input-container {
        width: auto;
        gap: 1rem;
        margin-right: 0;
    }
    #feet-inches-combined-container {
        width: 70%;
        padding: 0.2rem 1.5rem 0.5rem 1.5rem;
    }
}

/* Calculator section 5-2: WCO - Weight converter */
.wco-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
    gap: 2rem;
}
.wco-content label {
    font-size: 1rem;
}
.wco-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
}
@media (max-width: 768px) {
    .wco-content {
        margin-top: 2.5rem;
        display: grid;
        grid-template: 1fr 1fr / 1fr 1fr;
        gap: 1rem 3rem;
        justify-self: center;
    }
    #wco-section .footer-box {
        position: relative;
        margin-top: 2rem;
    }
    .wco-content label {
        font-size: 1.1rem;
    }
}

/* Calculator section 5-3: VCO - Volume converter */
.vco-content {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin-top: 0rem;
    margin-left: 1rem;
    margin-right: 1rem;
    gap: 0rem;
}
.vco-content label {
    font-size: 0.85rem;
}
.vco-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
}
.vco-form-item label {
    margin-top: 0.1rem;
    line-height: 1.2;
}
.vco-form-item input {
    margin-top: 0;
}
#vco-section .footer-box {
    height: 1.5rem;
    background-color: transparent;
}
@media (max-width: 768px) {
    .vco-content {
        margin-top: 2.5rem;
        display: grid;
        grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
        gap: 1rem 0.7rem;
        justify-self: center;
    }
    #vco-section .footer-box {
        position: relative;
        margin: 2rem 0 0.5rem 0;
    }
    .vco-filler {
        display: none;
    }
    .vco-content label {
        font-size: 1.1rem;
    }
}

/* Calculator section 5-4: TCO - Temperature converter */
.tco-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
    gap: 4rem;
}
.tco-form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
}
.tco-form-item label {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    justify-self: center;
    align-self: center;
}
.va-submit-hidden {
    display: none;
}
@media (max-width: 768px) {
    .tco-content {
        margin-top: 2.5rem;
        gap: 1rem;
        justify-self: center;
    }
    #tco-section .footer-box {
        position: relative;
        margin-top: 2rem;
    }
    .tco-form-item {
        gap: 0.2rem;
    }
    .tco-form-item label {
        font-size: 1.1rem;
    }
}



/* Put in the end to avoid being overridden by other styles */
.calculate-button:hover, #va-show-table-button:hover {
background-color: var(--color-accent);
scale: 1.03;
}
.reset-button:hover, .x-button:hover, .background-button:hover, .popup-background-button:hover, .background-close-button:hover, .popup-background-close-button:hover {
    background-color: var(--color-accent) !important;
    scale: 1.1 !important;
}
.nav-button:active, .language-button:active, .calculate-button:active, .reset-button:active, .x-button:active, .background-button:active, .popup-background-button:active, .background-close-button:active, .popup-background-close-button:active, .pri-nav-button:active, #va-show-table-button:active {
    background-color: var(--color-accent-strong) !important;
    transform: scale(0.99) !important;
}

.main-footer {
    width: 38rem;
    padding: 1.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    margin-top: 4rem;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
    .main-footer {
        width: 100vw;
    }
}