@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: url("/shared/fonts/ubuntu-l-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-l-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: url("/shared/fonts/ubuntu-r-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-r-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: url("/shared/fonts/ubuntu-b-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-b-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 300;
    src: url("/shared/fonts/ubuntu-li-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-li-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 400;
    src: url("/shared/fonts/ubuntu-ri-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-ri-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 700;
    src: url("/shared/fonts/ubuntu-bi-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntu-bi-webfont.woff") format("woff")
}
@font-face {
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 400;
    src: url("/shared/fonts/ubuntumono-r-webfont.woff2") format("woff2"),
         url("/shared/fonts/ubuntumono-r-webfont.woff") format("woff")
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("/shared/fonts/fa-brands-400.eot");
  src: url("/shared/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("/shared/fonts/fa-brands-400.woff2") format("woff2"),
       url("/shared/fonts/fa-brands-400.woff") format("woff"),
       url("/shared/fonts/fa-brands-400.ttf") format("truetype"),
       url("/shared/fonts/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: 'Font Awesome 5 Regular';
  font-style: normal;
  font-weight: 400;
  src: url("/shared/fonts/fa-regular-400.eot");
  src: url("/shared/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
       url("/shared/fonts/fa-regular-400.woff2") format("woff2"),
       url("/shared/fonts/fa-regular-400.woff") format("woff"),
       url("/shared/fonts/fa-regular-400.ttf") format("truetype"),
       url("/shared/fonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("/shared/fonts/fa-solid-900.eot");
  src: url("/shared/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
       url("/shared/fonts/fa-solid-900.woff2") format("woff2"),
       url("/shared/fonts/fa-solid-900.woff") format("woff"),
       url("/shared/fonts/fa-solid-900.ttf") format("truetype"),
       url("/shared/fonts/fa-solid-900.svg#fontawesome") format("svg");
}

.fab { font-family: 'Font Awesome 5 Brands'; }
.far {
  font-family: 'Font Awesome 5 Regular';
  font-weight: 400;
}
.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

:root {
    --background-yellow: #fffec8;
    --background-white: #fff;
    --background-color: #0051e5;
    --border-black: #000;
    --border-color: #ccc;
    --footer-back: #252525;
    --footer-text: #fff;
    --line-color: #a1a1a1;
    --text-inactive: #d1d1d1;
    --text-white: #fff;
    --text-color: #000;
    --nav-line: #fff;
    --nav-text: #fff;
    --button-success-back: #2f8c1e;
    --button-success-line: #1a4d11;
    --button-success-text: #fff;
    --button-primary-back: #0051e5;
    --button-primary-line: #0038a0;
    --button-primary-text: #fff;
    --button-danger-back: #8c1e2f;
    --button-danger-line: #a11d1b;
    --button-danger-text: #fff;
    --button-text-dark: #000;
    --button-text: #000;
    --button-back: #f9f2f4;
    --input-back: #fff;
    --highlight-back: #5a3b86;
    --highlight-text: #5a3b86;
    --selected-back: #e5edfc;
    --selected-text: #000;
    --inactive-text: #ccc;
    --required-back: #caf6cd;
    --header-back: #1e2f8c;
    --header-text: #fff;
    --code-back: #f9f2f4;
    --code-text: #c7254e;
    --link-text: #fff;

    --berlitz-border: #0038a0;
    --berlitz-blue: #0051e5;
    --berlitz-text: #fff;
    --berlitz-tint: #e5edfc;
    --berlitz-logo: url("/shared/images/berlitz_logo.svg");

    --pin-yellow: #ffff00;
    --pin-orange: #ffa500;
    --pin-green: #00b400;
    --pin-blue: #0051e5;
    --pin-red: #b40000;
    --pin-black: #000;
}

:root .dark {
    --background-yellow: #333;
    --background-white: #000;
    --background-color: #000;
    --border-color: #f9f2f4;
    --text-color: #bebebe;
    --text-white: #000;
    --nav-color: #000;
    --odd-color: #333;
    --button-primary-back: #5f6265;
    --button-primary-line: #3a3c3e;
    --button-text-dark: #000;
    --button-text: #fff;
    --button-back: #54575a;
    --input-back: #eeeff0;
    --navigation-text: #01cd74;
    --highlight-back: #686868;
    --highlight-text: #686868;
    --selected-back: #54575a;
    --code-back: #000;
    --code-text: #bebebe;
    --link-text: #ff4e00;
    --line-color: #586e75;

    --berlitz-border: #f9f2f4;
    --berlitz-blue: #bebebe;
    --berlitz-text: #fff;
    --berlitz-tint: #586e75;
    --berlitz-logo: url("/shared/images/berlitz_logo_dark.svg");

    --pin-black: #fff;
    --pin-blue: #bebebe;
    --pin-red: #ff4e00;
}

:root .solar {
    --background-white: #fdf6e3;
    --background-color: #fdf6e3;
    --text-color: #586e75;
    --nav-color: #fdf6e3;
    --odd-color: #eee8d5;
    --border-color: #839496;
    --button-primary: #839496;
    --button-primary-back: #268bd2;
    --button-success-back: #859900;
    --button-danger: #dc322f;
    --button-danger-text: #fff;
    --button-danger-back: #dc322f;
    --button-text-dark: #fdf6e3;
    --button-text: #586e75;
    --button-back: #eee8d5;
    --input-back: transparent;
    --navigation-text: #01cd74;
    --highlight-back: #657b83;
    --highlight-text: #657b83;
    --selected-back: #eee8d5;
    --code-back: #fdf6e3;
    --code-text: #586e75;
    --link-text: #268bd2;
    --line-color: #586e75;

    --berlitz-border: #f9f2f4;
    --berlitz-blue: #268bd2;
    --berlitz-text: #fff;
    --berlitz-tint: #586e75;
    --berlitz-logo: url("/shared/images/berlitz_logo_solar.svg");

    --pin-yellow: #d33682;
    --pin-green: #859900;
    --pin-blue: #268bd2;
    --pin-red: #dc322f;
}

html { height: 100%; }
body {
    background-color: var(--background-color, #fff);
    border-spacing: 0;
    color: var(--text-color, #000);
    font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: normal;
    overflow-x: hidden;
    overflow-y: scroll;
    word-break: break-word;
    word-wrap: break-word;
    max-width: 100%;
    min-height: 100%;
    padding: 0 0 75px;
    margin: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

a,
a:hover,
a:active,
a:focus {
    color: var(--link-text, #337ab7);
    font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif;
    text-decoration: none;
    outline: none;
}
b, strong { font-weight: bold; }
button { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }
code,
kbd,
pre,
samp {
    font-family: 'Ubuntu Mono', 'Lucida Console', Monaco, monospace;
    font-size: 0.95rem;
    color: var(--code-text, #c7254e);
    white-space: pre-wrap;
}
blockquote {
    padding: 0.5rem 0 1rem 1rem;
    margin: 0 0 2rem;
    font-size: 1em;
    border-left: 5px solid #eee;
    color: #333;
}

body .size-xs, body.size-xs { font-size: 12px; }
body .size-sm, body.size-sm { font-size: 14px; }
body .size-md, body.size-md { font-size: 16px; }
body .size-lg, body.size-lg { font-size: 18px; }
body .size-xl, body.size-xl { font-size: 20px; }
body .nodots, body.nodots { background-image: none; }

body.font-mono,
body.font-mono a, body.font-mono a:hover, body.font-mono a:active, body.font-mono a:focus,
body.font-mono button { font-family: 'Ubuntu Mono', 'Lucida Console', Monaco, monospace; }
body.font-sans,
body.font-sans a, body.font-sans a:hover, body.font-sans a:active, body.font-sans a:focus,
body.font-sans button { font-family: -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }
body.font-serif,
body.font-serif a, body.font-serif a:hover, body.font-serif a:active, body.font-serif a:focus,
body.font-serif button { font-family: 'Garamond', 'Georgia', 'Times New Roman', serif; }

.force-hidden,
.req-hidden,
.hidden { display: none !important; }
.no-margin,
.nomargin { margin: 0 auto !important; }
.nopadding { padding: 0 !important; }
.nopadd {
    padding: 0;
    margin: 0;
}
.flexbox { display: flex !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.footer {
    color: #ccc;
    font-size: 0.75rem;
    padding: 5px 0 3px;
    text-align: center;
}

::-webkit-input-placeholder { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }
::-moz-placeholder { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }
:-ms-input-placeholder { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }
:-moz-placeholder { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif; }

::-webkit-input-placeholder { color: var(--placeholder-color, #93a1a1); }
::-moz-placeholder { color: var(--placeholder-color, #93a1a1); }
:-ms-input-placeholder { color: var(--placeholder-color, #93a1a1); }
:-moz-placeholder { color: var(--placeholder-color, #93a1a1); }

::-webkit-input-placeholder { text-align: center; }
::-moz-placeholder { text-align: center; }
:-ms-input-placeholder { text-align: center; }
:-moz-placeholder { text-align: center; }

button {
    background-color: transparent;
    border-radius: 5px;
    border-style: solid;
    color: var(--button-text, #000);
    cursor: pointer;
    display: inline-block;
    font-size: 0.95em;
    padding: 0 15px;
    margin: 0 5px 5px 0;
    min-height: 33px;
}
button .btn-success,
button.btn-success {
    border-color: var(--button-success-line, #1a4d11);
    background-color: var(--button-success-back, #2f8c1e);
    color: var(--button-success-text, #fff);
    font-weight: normal;
}
button .btn-primary,
button.btn-primary,
button .selected,
button.selected {
    border-color: var(--button-primary-line, #0038a0) !important;
    background-color: var(--button-primary-back, #0051e5) !important;
    color: var(--button-primary-text, #fff) !important;
    font-weight: normal;
}
button .btn-danger,
button.btn-danger {
    border-color: var(--button-danger-line, #a11d1b);
    background-color: var(--button-danger-back, #dc322f);
    color: var(--button-danger-text, #fff);
    font-weight: normal;
}
button .btn-clear,
button.btn-clear {
    border-color: transparent;
    background-color: transparent;
    color: var(--text-color, #000);
    font-weight: normal;
}
button.btn-primary:disabled,
button:disabled {
    background-color: transparent !important;
    border-color: var(--border-color, #ccc) !important;
    color: var(--border-color, #ccc) !important;
    cursor: not-allowed;
}
button.font-default { font-family: 'Ubuntu', -apple-system, 'メイリオ', 'Meiryo', 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif !important; }
button.font-sans { font-family: -apple-system, 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif !important; }
button.font-mono { font-family: 'Ubuntu Mono', 'Lucida Console', Monaco, monospace !important; }
button.font-serif { font-family: 'Garamond', 'Georgia', 'Times New Roman', serif !important; }

label {
    color: var(--text-color, #000);
    display: inline-block;
    vertical-align: text-top;
    padding: 5px 10px;
    margin: 0;
}
mark { background-color: transparent; }
textarea,
input,
pre {
    background-color: var(--input-back, #fff);
    border: 1px solid var(--border-color, #ccc);
    display: inline-block;
    font-family: 'Ubuntu', -apple-system, 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif;
    font-size: 0.95rem;
    outline: none;
    vertical-align: text-top;
    padding: 5px 10px;
    margin: 0 0 10px;
}
input.disabled { pointer-events: none; }
select {
    background-color: var(--input-back, #fff);
    border: 1px solid var(--border-color, #ccc);
    display: inline-block;
    font-family: 'Ubuntu', -apple-system, 'DejaVu Sans', 'Helvetica', 'Tahoma', 'Arial', sans-serif;
    outline: none;
    vertical-align: text-top;
    padding: 5px 10px;
    margin: 0 0 10px;
}
select.error,
input.error,
pre.error {
    background-color: rgba(255, 0, 0, 0.33) !important;
    color: var(--text-white, #fff) !important;
}
input.error::placeholder { color: var(--text-white, #fff) !important; }
pre[placeholder]:empty::before { color: var(--text-white, #fff) !important; }
pre::-webkit-scrollbar { display: none; }
pre[placeholder][placeholder]:empty::before,
pre[placeholder]:empty::before,
pre:empty:not(:focus):before {
    align-content: center;
    content: attr(data-placeholder);
    color: var(--placeholder-color, #93a1a1);
    font-weight: normal;
    justify-content: center;
    text-align: center;
}
pre.no-edit, pre.noedit { cursor: not-allowed !important; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
input[type=range] {
    appearance: none;
    background-color: var(--selected-back, #e5edfc);
    border: 1px solid var(--line-color, #0051e5);
    border-radius: 10px;
    border-spacing: 0;
    outline: none;
    transition: opacity .2s;
    vertical-align: text-top;
    -webkit-appearance: none;
    -webkit-transition: .2s;
    padding: 0;
    margin: 10px 0 0;
    height: 0.5em;
    max-width: calc(100% - 13.5em);
}
input[type=range]::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--line-color, #0051e5);
    border: 1px solid var(--line-color, #0051e5);
    border-radius: 2em;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    height: 1.75em;
    width: 1.75em;
}
input[type=range]::-moz-range-thumb {
    background-color: var(--line-color, #0051e5);
    border: 1px solid var(--line-color, #0051e5);
    border-radius: 2em;
    cursor: pointer;
    height: 25px;
    width: 25px;
}
input[type="checkbox"] { display: none !important; }
input[type="radio"] { display: none !important; }
input[type="checkbox"]:checked + span:before,
input[type="radio"]:checked + span:before {
    content: '\2714';
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -9px;
}
input[type="radio"]:checked + span:before {
    font-size: 2.5em;
    left: 0.125em;
    top: -0.25em;
}
span.check-square {
    background-color: var(--background-white, #fff);
    border: 1px solid var(--border-color, #ccc);
    color: var(--berlitz-blue, #0051e5);
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0 5px 0 1em;
    position: relative;
    height: 2em;
    width: 2em;
}
span.check-square.disabled {
    border-color: var(--text-inactive, #c7254e);
    color: var(--text-inactive, #c7254e);
    cursor: not-allowed;
}
dd.error {
    color: var(--pin-red, #b40000);
    font-weight: bold;
    font-style: italic;
}

/** ************************************************************************ **
 *  Section Elements
 ** ************************************************************************ */
section {
    display: block;
    vertical-align: text-top;
    padding: 0 10px;
    margin: 0 auto 15px;
    max-width: 1220px;
    width: calc(100% - 3em);
}
body.nolabels section { max-width: calc(100% - 100px); }

section.spring-menu {
    display: block;
    width: 100%;
}
section.spring-menu h3.group-name {
    border-bottom: 2px solid var(--berlitz-blue, #0051e5);
    display: inline-block;
    padding: 5px 0;
    margin: 25px 0 5px;
    min-width: 725px;
}
section.spring-menu ol,
section.spring-menu ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
section.spring-menu ol li,
section.spring-menu ul li {
    background-color: var(--background-white, #fff);
    border: 1px solid var(--berlitz-blue, #0051e5);
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    vertical-align: text-top;
    width: calc((100% / 6) - 36px);
}
section.spring-menu li h1,
section.spring-menu li h2,
section.spring-menu li h3,
section.spring-menu li h4 {
    display: block;
    padding: 0;
    margin: 0;
}
section.spring-menu li h1 { padding: 15px 0 5px; }
section.spring-menu li h3 { padding: 5px 0 15px; }
section.spring-menu li a {
    color: var(--berlitz-blue, #0051e5);
    text-decoration: none;
}
section.spring-menu li i { font-size: 1.75em; }

@media screen and (max-width: 850px) {
    section { width: calc(100% - 50px); }
}

/** ************************************************************************ **
 *  Navigation
 ** ************************************************************************ */
nav {
    background-color: var(--background-color, #fff);
    border-bottom: 1px solid var(--line-color, #a1a1a1);
    color: var(--nav-text, #fff);
    display: block;
    text-align: center;
    z-index: 1000;
    position: fixed;
    padding: 10px 0;
    width: 100%;
    right: 0;
    left: 0;
    top: 0;
}
nav span {
    display: inline-block;
    vertical-align: text-top;
    padding: 0;
    margin: 0;
}
nav span.spring-menu {
    color: var(--berlitz-blue, #0051e5);
    cursor: pointer;
    font-size: 36px;
    padding: 0 5px 0 20px;
    margin: 5px 0 0;
}
nav span.logo {
    background-image: var(--berlitz-logo, url("/shared/images/berlitz_logo.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0;
    margin: 0;
    min-height: 36px;
    max-width: 130px;
    min-width: 130px;
}
nav span.language-list {
    text-align: right;
    padding: 0;
    margin: 0;
    max-width: 1080px;
    width: calc(100% - 165px);
}
nav span a,
nav span a:hover,
nav span a:visited {
    border: 1px solid var(--link-text, #fff);
    border-radius: 5px;
    display: inline-block;
    font-size: 0.9em;
    color: var(--link-text, #fff);
    text-align: center;
    vertical-align: text-top;
    padding: 3px 0;
    margin: 0;
    min-width: 75px;
}

@media screen and (max-width: 850px) {
    nav span.logo { max-width: 100px; }
    nav span.language-list { max-width: calc(100% - 175px); }
}

/** ************************************************************************ **
 *  Page Header
 ** ************************************************************************ */
header {
    display: block;
    margin: 75px auto 0;
}

header h1 {
    color: var(--text-white, #fff);
    display: block;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
    margin: 1em 0 0.5em;
}
header h2 {
    color: var(--text-white, #fff);
    display: block;
    font-size: 1.25em;
    font-weight: 100;
    text-align: center;
    padding: 0;
    margin: 0;
}

/** ************************************************************************ **
 *  Page Footer
 ** ************************************************************************ */
footer {
    background-color: var(--footer-back, #252525);
    color: var(--footer-text, #fff);
    display: block;
    z-index: 1000;
    position: fixed;
    padding: 10px 0;
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
}

footer ul {
    display: block;
    max-width: 1220px;
    padding: 0;
    margin: 0 auto;
    width: 100%;
}
footer ul li {
    display: inline-block;
    font-weight: 100;
    padding: 0 2em 0 0;
    margin: 0;
}
footer ul li:last-child { padding: 0; }

@media screen and (max-width: 850px) {
    footer ul { max-width: calc(100% - 50px); }
    footer ul li {
        text-align: center;
        padding: 0;
        margin: 0;
        width: calc((100% / 2) - 5px);
    }
}

/** ************************************************************************ **
 *  Error Formatting
 ** ************************************************************************ */
section.idle-block {
    margin: 10vh auto 0 !important;
    min-height: auto !important;
}
section.idle-block h1,
section.idle-block h2,
section.idle-block h3,
section.idle-block p { text-align: center !important; }

section.system-message {
    background: var(--background-yellow, #ffffc0);
    border: 2px solid var(--border-black, #000);
    border-radius: 10px;
    text-align: center;
    padding: 1.25em 0;
    margin: 65px auto -40px;
    max-width: 1220px;
    width: calc(100% - 25px);
}
section.system-message button {
    border-color: transparent;
    font-size: 1.25em;
    margin: -15px 0 0;
    float: right;
}
section.system-message h1,
section.system-message h2,
section.system-message h3 {
    font-size: 1.25em;
    text-align: center;
    padding: 0;
    margin: 0 0 0.5em;
}
section.system-message p {
    color: var(--text-color, #000);
    padding: 0;
    margin: 0;
}

.error-message {
    color: var(--pin-red, #b40000);
    text-align: center !important;
    padding: 0;
    margin: 15px auto 0;
}
h1.error-message { font-size: 2em !important; }
p.error-message { font-size: 1.1em !important; }

/** ************************************************************************ **
 *  Page Content
 ** ************************************************************************ */
section.content {
    background-color: var(--background-white, #fff);
    border-radius: 10px;
    display: block;
    padding: 25px 10px;
    margin: 0 auto;
    min-height: 10.5em;
}
section.content h1 {
    display: block;
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
    max-width: 1000px;
    width: calc(100% - 35px);
}
section.content h3 {
    display: block;
    font-size: 1.25em;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
    width: calc(100% - 35px);
}
section.content p {
    display: block;
    line-height: 1.5em;
    text-align: justify;
    padding: 0;
    margin: 0.5em auto;
    max-width: 1000px;
    width: calc(100% - 35px);
}
section.content p label {
    display: inline-block;
    font-weight: bold;
    text-align: right;
    vertical-align: text-top;
    padding: 0;
    margin: 0;
    min-width: 8em;
}
section.content p span {
    display: inline-block;
    vertical-align: text-top;
    padding: 0 0 0 5px;
    margin: 0;
}
section.content a,
section.content a:hover,
section.content a:visited {
    color: var(--berlitz-blue, #0051e5);
}

@media screen and (max-width: 425px) {
    section.content p.result label {
        display: block;
        text-align: left;
        width: calc(100% - 25px);
    }
    section.content p.result span {
        display: block;
        padding: 0 0 0 1em;
        width: calc(100% - 2em);
    }
}

/** ************************************************************************ **
 *  Survey Content
 ** ************************************************************************ */
section.content h2.welcome,
section.content h3.welcome {
    display: block;
    vertical-align: text-top;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
    width: calc(100% - 10px);
}
section.content h3.welcome {
    font-size: 1.1em;
    font-weight: normal;
    padding: 0.5em 0;
}
section.content h3.welcome.attendance-a {
    color: var(--pin-red, #b40000);
    font-weight: bold;
    font-size: 1.2em;
    font-style: italic;
    padding: 2em 0 1em;
}
section.content p.lesson.detail { width:calc(100% - 15px); }
section.content p.lesson.detail label { min-width: 6em; }
section.content p.lesson.detail span { width: calc(100% - 7em) }
section.content p.lesson.detail span br { display: none; }
section.content p.zero-questions {
    color: var(--pin-red, #b40000);
    font-size: 1.5em;
    text-align: center;
}

@media screen and (max-width: 425px) {
    section.content p.lesson.detail span br { display: block; }
}

/** ************************************************************************ **
 *  Page Summary
 ** ************************************************************************ */
section.content article {
    display: block;
    font-size: 1.1em;
    padding: 0;
    margin: 0 auto 1em;
    max-width: 1000px;
    width: calc(100% - 15px);
}
section.content article h4 {
    display: block;
    text-align: left !important;
    padding: 0;
    margin: 0;
}
section.content article i.required { color: var(--pin-red, #b40000); }
section.content article input[type="checkbox"]:checked + span:before {
    content: '\2714';
    font-size: 2.5em;
    position: absolute;
    left: 0.15em;
    top: -0.25em;
}
section.content article button.question-option {
    border: 1px solid var(--border-color, #ccc);
    border-radius: 3em;
    color: var(--berlitz-blue, #0051e5);
    display: inline-block;
    padding: 0;
    margin: 0.5em 0.125em 0;
    height: 2.5em;
    width: 2.5em;
}
section.content article button.btn-primary:disabled,
section.content article button.selected:disabled {
    border-color: var(--text-inactive, #c7254e) !important;
    background-color: var(--text-inactive, #c7254e) !important;
    color: var(--text-white, #fff) !important;
    cursor: not-allowed;
}
section.content article label.question-option {
    cursor: pointer;
    display: block;
    padding: 0;
    margin: 1em auto 0;
    width: calc(100% - 3em);
}
section.content article label.question-option span {
    vertical-align: middle;
}
section.content article label.question-option span.check-square {
    border-radius: 0;
    margin: 0 1em 0 0;
    height: 2em;
    width: 2em;
}
section.content article label.question-option span.check-square.radio { border-radius: 2em; }
section.content hr.clear-spacer {
    border: 1px solid transparent;
    color: transparent;
    display: block;
}
section.content article textarea {
    display: block;
    resize: none;
    margin: 1em auto 0;
    height: 5.5em;
    width: calc(100% - 5em);
}
section.content article textarea::placeholder {
    font-style: italic;
    text-align: center;
    padding: 2em 0 0;
}
section.content hr.response-list {
    border: 1px solid var(--berlitz-blue, #0051e5);
    color: transparent;
    padding: 0;
    margin: 2em auto;
    max-width: 1000px;
    width: calc(100% - 50px);
}
section.content p.question { font-weight: bold; }
section.content p.question span {
    display: inline-block;
    vertical-align: text-top;
    padding: 0 5px;
    margin: 0;
}
section.content p.question span.index {
    text-align: center;
    width: 1em;
}
section.content p.question span.detail {
    max-width: calc(100% - 1em - 25px);
    width: 95%;
}
section.content p.question-definition span {
    text-align: right;
    min-width: 1.5em;
}
section.content p.answer {
    padding: 0 0 0 4em;
    width: calc(100% - 4em);
}
section.content p.answer span {
    vertical-align: middle;
    padding: 0 5px;
}
section.content p.answer i.far {
    font-size: 2em;
}
section.content article strong.detail-add,
section.content article label.detail-add {
    display: block;
    font-style: italic;
    padding: 0 3em;
    margin: 1em auto 0;
    max-width: 1000px;
    width: calc(100% - 5.5em - 15px);
}
section.content article label.detail-add { cursor: pointer; }
section.content article label.detail-add span.check-square {
    border-radius: 0;
    margin: 0 0.5em 0 0;
    height: 1em;
    width: 1em;
}
section.content article label.detail-add input[type="checkbox"]:checked + span:before {
    content: '\2714';
    font-size: 1.5em;
    position: absolute;
    left: 0.1em;
    top: -0.25em;
}
section.content article input.other {
    font-size: 1.25em;
    vertical-align: middle;
    margin: 0;
}
section.content article textarea.detail-add {
    display: block;
    resize: none;
    margin: 0.5em auto 0;
    max-height: 6.5em;
    min-height: 6.5em;
    height: 6.5em;
    max-width: 1000px;
    width: calc(100% - 7.5em - 15px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
section.content article textarea.detail-add::-webkit-scrollbar { display: none; }

@media screen and (max-width: 425px) {
    section.content article strong.detail-add,
    section.content article label.detail-add {
        text-align: justify;
        padding: 0;
        width: calc(100% - 15px);
    }
    section.content article textarea.detail-add { width: calc(100% - 15px); }
    section.content article label.detail-add span {
        display: inline-block;
        vertical-align: text-top;
        max-width: calc(100% - 3em);
    }
    section.content article.slider { text-align: center; }
    section.content article button.question-option {
        margin: 0.75em 0.125em 0;
        height: calc(100vw / 8);
        width: calc(100vw / 8);
    }
}

/** ************************************************************************ **
 *  Action Buttons
 ** ************************************************************************ */
section.content h2.thanks,
section.content h3.thanks,
section.content hr.thanks {
    display: block;
    text-align: center;
    margin: 0 auto;
    max-width: 1000px;
    width: calc(100% - 35px);
}
section.content h2.thanks { margin: 2em auto 1em; }
section.content h3.thanks { font-style: italic; }
section.content hr.thanks {
    border: none;
    border-bottom: 1px dotted var(--berlitz-blue, #0051e5);
    margin: 2em auto 0;
}

/** ************************************************************************ **
 *  Action Buttons
 ** ************************************************************************ */
section.content p.button-action {
    text-align: center;
    padding: 0;
    margin: 50px auto 0;
}
section.content p.button-action button {
    font-size: 1.1em;
    padding: 0.5em 1em;
    min-width: 8em;
}

/** ************************************************************************ **
 *  Related Lessons
 ** ************************************************************************ */
div.related-surveys {
    display: block;
    padding: 0;
    margin: 2em auto 0;
    max-width: 1000px;
    width: 100%;
}
div.related-surveys h3 { margin: 0 auto 0.5em; }
div.related-surveys ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: calc(100% - 35px);
}
div.related-surveys ul li {
    border-bottom: 1px dotted var(--berlitz-blue, #0051e5);
    font-size: 1.1em;
    padding: 0.5em 0;
    margin: 0;
}
div.related-surveys ul li:last-child { border: none; }
div.related-surveys ul li.available { cursor: pointer; }
div.related-surveys ul li.time {
    text-align: center;
    min-width: 5.5em;
}
div.related-surveys ul li span {
    display: inline-block;
    vertical-align: text-top;
    padding: 0 0.5em 0 0;
    margin: 0;
}
div.related-surveys ul li span.instructor { min-width: 7em; }
div.related-surveys ul li span.goal {
    padding: 0;
    width: calc(100% - 18em);
}

@media screen and (max-width: 425px) {
    div.related-surveys { margin: 2em 0 1em; }
    div.related-surveys ul li span.goal {
        display: block;
        padding: 0.25em 0 0 1.75em;
        width: calc(100% - 2em);
    }
}

/** ************************************************************************ **
 *  Initial Message
 ** ************************************************************************ */
section.content h1.initial-message {
    color: var(--berlitz-blue, #0051e5);
    font-size: 64px;
    text-align: center;
    padding: 0;
    margin: 36px auto 0;
}
section.content p.initial-message {
    font-style: italic;
    text-align: center;
    margin: 0 auto 24px;
}