@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: #ffffc0;
    --background-white: #fcfcfc;
    --background-color: #f9f8f7;
    --border-color: #ccc;
    --line-color: #004fef;
    --text-inactive: #c7254e;
    --text-black: #000;
    --text-white: #fff;
    --text-color: #1d1d1d;
    --nav-color: #fcfcfc;
    --odd-color: #eee;
    --button-success-back: #2f8c1e;
    --button-success-line: #257018;
    --button-success-text: #fff;
    --button-primary-back: #004fef;
    --button-primary-line: #0038a0;
    --button-primary-text: #fff;
    --button-danger-back: #8c1e2f;
    --button-danger-line: #a11d1b;
    --button-danger-text: #fff;
    --button-text-dark: #1d1d1d;
    --button-text: #1d1d1d;
    --button-back: #f9f2f4;
    --input-back: #fcfcfc;
    --navigation-text: #5a3b86;
    --highlight-back: #5a3b86;
    --highlight-text: #5a3b86;
    --selected-back: #e5edfc;
    --selected-text: #1d1d1d;
    --required-back: #caf6cd;
    --header-back: #1e2f8c;
    --header-text: #fff;
    --code-back: #f9f2f4;
    --code-text: #c7254e;
    --link-text: #004fef;

    --berlitz-border: #0038a0;
    --berlitz-blue: #004fef;
    --berlitz-text: #fff;
    --berlitz-tint: #e5edfc;
    --berlitz-logo: url(../img/berlitz_logo.svg);

    --pin-purple: #643ba2;
    --pin-yellow: #ffff00;
    --pin-orange: #ffa500;
    --pin-green: #3ddc97;
    --pin-blue: #004fef;
    --pin-red: #ff495c;
    --pin-black: #1d1d1d;
}

: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: #bebebe;
    --code-text: #000;
    --link-text: #ff4e00;
    --line-color: #586e75;

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

    --pin-red: #b40000;
    --pin-black: #fff;
}

: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: #586e75;
    --code-text: #fdf6e3;
    --link-text: #268bd2;
    --line-color: #586e75;

    --berlitz-border: #f9f2f4;
    --berlitz-blue: #268bd2;
    --berlitz-text: #fff;
    --berlitz-tint: #586e75;
    --berlitz-logo: url(../img/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%;
    margin: 0;
}
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,
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; }

.hidden { display: none !important; }
.nopadding { padding: 0 !important; }
.nopadd {
    padding: 0;
    margin: 0;
}
.nowrap { white-space: nowrap !important; }
.flexbox { display: flex !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.v-top { vertical-align: text-top !important; }
.v-middle { vertical-align: middle !important; }
.v-baseline { vertical-align: baseline !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;
    vertical-align: text-top;
    padding: 0 15px;
    margin: 0 5px 5px 0;
    min-height: 33px;
}
button span { margin: 0 0 0 0.5em; }
button .btn-success,
button.btn-success,
label .btn-success,
label.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-selected, button.btn-selected,
button .btn-primary, button.btn-primary,
button .selected, button.selected,
label .btn-selected, label.btn-selected,
label .btn-primary, label.btn-primary,
label .selected, label.selected {
    border-color: var(--button-primary-line, #111a4d);
    background-color: var(--button-primary-back, #337ab7);
    color: var(--button-primary-text, #fff);
    font-weight: normal;
}
button .btn-danger,
button.btn-danger,
label .btn-danger,
label.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,
label .btn-clear,
label.btn-clear {
    border-color: transparent;
    background-color: transparent;
    color: var(--text-color, #000);
    font-weight: normal;
}
button.btn-selected:disabled,
button.btn-primary:disabled,
button.selected:disabled,
button:disabled,
label.btn-selected:disabled,
label.btn-primary:disabled,
label.selected:disabled,
label:disabled {
    background-color: transparent !important;
    border-color: var(--border-color, #ccc) !important;
    color: var(--border-color, #ccc) !important;
    cursor: not-allowed;
}
button .btn-selected span,
button.btn-selected span,
button .selected span,
button.selected span {
    display: none;
}
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; }
button.btn-record-status {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-color: transparent !important;
    color: var(--text-white, #fff) !important;
    display: inline-block;
    font-size: 36px;
    padding: 18px 24px;
    position: fixed;
    bottom: 125px;
    right: 25px;
}
button.btn-record-status:disabled { cursor: not-allowed; }

label {
    color: var(--text-color, #000);
    display: inline-block;
    vertical-align: text-top;
    padding: 5px 10px;
    margin: 0;
}
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;
    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;
    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: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; }
pre {
    overflow-x: hidden;
    overflow-y: auto;
}

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, #004fef);
    border-radius: 10px;
    border-spacing: 0;
    outline: none !important;
    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, #004fef);
    border: 1px solid var(--line-color, #004fef);
    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, #004fef);
    border: 1px solid var(--line-color, #004fef);
    border-radius: 2em;
    cursor: pointer;
    height: 25px;
    width: 25px;
}
input[type=radio] {
    min-height: 1.25em;
    min-width: 1.25em;
}
input[type=password],
input[type=text] {
    outline: none !important;
}
input[type="checkbox"] { display: none !important; }
input[type="checkbox"]:checked + span:before {
    content: '\2714';
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -9px;
}
span.check-square {
    background-color: var(--background-white, #fff);
    border: 1px solid var(--border-color, #ccc);
    color: var(--berlitz-blue, #004fef);
    display: inline-block;
    vertical-align: text-top;
    padding: 0;
    margin: 0 5px 0 0;
    position: relative;
    height: 15px;
    width: 15px;
}
span.radio-wrap {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: text-top;
    padding: 0 1em 0 0;
    margin: 0;
}
span.radio-wrap input,
span.radio-wrap span {
    vertical-align: middle;
    padding: 0 0.25em;
    margin: 0;
}
button, strong, label, span, h1, h2, h3, h4, h5, h6, em, p, i, b {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** ************************************************************************ **
 *  Navigation Bar
 ** ************************************************************************ */
nav {
    background: var(--nav-color, #fff);
    position: fixed;
}
nav.header {
    border-bottom: 2px solid var(--line-color, #004fef);
    display: block;
    z-index: 1000;
    padding: 0;
    margin: 0;
    height: 50px;
    width: 100%;
    right: 0;
    left: 0;
    top: 0;
}
nav.header span {
    display: inline-block;
    vertical-align: middle;
}
nav.header span.spring-menu {
    color: var(--berlitz-blue, #004fef);
    cursor: pointer;
    font-size: 36px;
    padding: 0 5px 0 20px;
    margin: 5px 0 0;
}
nav.header span.logo {
    background-image: var(--berlitz-logo, url(../img/berlitz_logo.svg));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 5px 0 0 10px;
    min-height: 36px;
    max-width: 130px;
    min-width: 130px;
}
nav.header span.title {
    color: var(--berlitz-blue, #004fef);
    font-size: 32px;
    font-style: normal;
    padding: 0 10px 0 0;
    margin: 5px 0 0;
}
nav.header span.account {
    cursor: pointer;
    text-align: right;
    float: right;
    padding: 0;
    margin: 0 10px;
    max-width: 250px;
    min-width: 250px;
}
nav.header label.welcome {
    cursor: pointer !important;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px 0 0;
    margin: 5px 0 0;
    max-width: calc(100% - 60px);
}
nav.header span.avatar {
    background-image: url(../../avatars/default.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--line-color, #004fef);
    border-radius: 25px;
    padding: 2px;
    margin: 5px 0 0;
    max-height: 35px;
    min-height: 35px;
    max-width: 35px;
    min-width: 35px;
}
nav.header .nav-drop-menu {
    background-color: var(--nav-color, #fff);
    border-bottom: 2px solid var(--line-color, #004fef);
    border-right: 2px solid var(--line-color, #004fef);
    border-left: 2px solid var(--line-color, #004fef);
    vertical-align: text-top;
    position: absolute;
    padding: 0 10px;
    margin: 0;
    right: 5px;
    top: 50px;
    max-width: 350px;
    min-width: 275px;
}
nav.header .nav-drop-menu h4 {
    padding: 0;
    margin: 5px 0 0;
}
nav.header .nav-drop-menu ol,
nav.header .nav-drop-menu ul {
    display: inline-block;
    list-style: none;
    vertical-align: text-top;
    padding: 5px 10px;
    margin: 0;
}
nav.header .nav-drop-menu div {
    border-bottom: 1px dotted var(--border-color, #ccc);
    padding: 10px 0;
}
nav.header .nav-drop-menu div:first-child { padding-top: 0; }
nav.header .nav-drop-menu div:last-child { border-bottom: none; }
nav.header .nav-drop-menu .about {
    display: block;
    width: 100%;
    vertical-align: text-top;
}
nav.header .nav-drop-menu .about .avatar {
    vertical-align: text-top;
    max-height: 45px;
    min-height: 45px;
    max-width: 45px;
    min-width: 45px;
}

body .darkkkk nav.header span.logo,
body.darkkkk nav.header span.logo {
    background-image: url(../img/berlitz_logo_dark.svg);
}

@media screen and (max-width: 425px) {
    nav.header span.spring-menu { padding: 0 5px 0 10px; }
    nav.header span.title {
        font-size: 26px;
        padding: 0;
    }
    nav.header span.logo { display: none; }
    nav.header span.account {
        margin: 0 10px 0 0;
        max-width: 200px;
        min-width: 150px;
    }
}

/** ************************************************************************ **
 *  Core Content Elements
 ** ************************************************************************ */
div.content {
    background-color: var(--background-white, #fff);
    border-radius: 15px;
    display: block;
    vertical-align: text-top;
    padding: 15px 10px 15px;
    margin: 75px auto 25px;
    min-height: calc(100vh - 150px);
    max-width: 1200px;
    width: calc(100% - 40px);
}

@media screen and (max-width: 820px) {
    div.content {
        max-width: 800px;
        width: calc(100% - 20px);
    }
}

section {
    display: block;
    vertical-align: text-top;
    padding: 0 10px;
    margin: 0 auto;
    max-width: 1200px;
    width: calc(100% - 25px);
}

section.compat {
    display: block;
    position: relative;
    margin: 0 auto;
    min-height: calc(100% - 50px);
    max-width: 1024px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 50px;
    z-index: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
section.compat .message {
    background: var(--background-yellow, #ffffc0);
    border: 2px solid var(--text-color, #000);
    border-radius: 10px;
    display: block;
    padding: 0.5em 0 1em;
    margin: 150px auto 50px;
    max-width: calc(100% - 100px);
    width: 80%;
}
section.compat .message p {
    text-align: center;
    padding: 0;
    margin: 0;
}
section.compat .message p.head {
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 0 0.5em;
}
section.erroneous {
    text-align: center;
    padding: 5% 0 0;
    margin: 0 auto;
}
section.erroneous h1 { font-size: 5em; }
section.erroneous h2,
section.erroneous h3,
section.erroneous h4 { font-weight: normal !important; }
section.erroneous h4 { font-style: italic; }
section.message {
    font-size: 1.1em;
    text-align: center;
    padding: 0;
    margin: 65px auto 10px;
}

section.spring-menu {
    display: block;
    width: 100%;
}
section.spring-menu h3.group-name {
    border-bottom: 2px solid var(--berlitz-blue, #004fef);
    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, #004fef);
    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, #004fef);
    text-decoration: none;
}
section.spring-menu li i {
    font-size: 1.75em;
}

/** ************************************************************************ **
 *  Message Bubbles
 ** ************************************************************************ */
p.bubble {
    background-color: var(--background-white, #fff);
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    color: var(--text-color, #000);
    font-size: 1rem;
    position: absolute;
    padding: 10px 15px;
    margin: 0;
    max-width: calc(100% - 75px);
}
p.bubble.left::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 15px;
    border: .75rem solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
p.bubble.right::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    right: 15px;
    border: .75rem solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
p.bubble button {
    border: none;
    border-bottom: 1px dotted var(--berlitz-blue, #004fef);
    border-radius: 0;
    float: right;
    margin: 0;
}
p.bubble i {
    display: inline-block;
    vertical-align: text-top;
    padding: 0.05em 0.5em 0 0;
    margin: 0;
}
p.bubble span {
    display: inline-block;
    font-size: 1rem;
    vertical-align: text-top;
    padding: 0;
    margin: 0;
    max-width: 350px;
}

/** ************************************************************************ **
 *  Pop Menu
 ** ************************************************************************ */
section.pop-menu {
    background: rgba(0, 0, 0, 0.55);
    display: block;
    position: fixed;
    padding: 100px 0 0;
    margin: 0;
    max-height: none;
    height: 100vh;
    max-width: none;
    width: 100vw;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 900;
}
section.pop-menu .inside {
    background-color: var(--background-white, #fff);
    border: 2px solid var(--line-color, #004fef);
    border-radius: 15px;
    display: block;
    padding: 10px;
    margin: 0 auto;
    max-width: 650px;
    width: calc(100% - 50px);
}
section.pop-menu button {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0 1em;
    margin: 0;
}
section.pop-menu h3 {
    display: block;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}
section.pop-menu ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 90%;
}
section.pop-menu ul.view-options {
    text-align: right;
}
section.pop-menu ul.view-options li {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 0;
    margin: 0;
}
section.pop-menu ul.menu-items li {
    display: block;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    padding: 5px 10px;
}
section.pop-menu ul.menu-items li:last-child { border: none; }
section.pop-menu ul.menu-items li i {
    font-size: 1.5em;
    vertical-align: middle;
    min-width: 1.5em;
}
section.pop-menu ul.menu-items li button {
    font-size: 1.33em;
    vertical-align: middle;
    padding: 5px 0;
    margin: 0;
}
section.pop-menu p.bottom-button {
    font-size: 0.9em;
    text-align: right;
    padding: 0;
    margin: 0;
    width: 100%;
}
section.pop-menu p.bottom-button button { font-size: 1.1em; }
section.pop-menu p.bottom-button i { color: var(--pin-red, #b40000); }

@media screen and (max-width: 425px) {
    section.pop-menu ul { max-width: 100%; }
}

/** ************************************************************************* *
 *  Date Picker
 ** ************************************************************************* */
div.ui-picker {
    background-color: var(--background-white, #fff);
    border: 1px solid var(--berlitz-border, #0038a0);
    border-radius: 5px;
    display: block;
    position: absolute;
    margin-top: -5px;
    z-index: 1000;
}
div.ui-picker .header {
    display: block;
    white-space: nowrap;
    padding: 5px;
    width: 100%;
}
div.ui-picker .header h2 {
    color: var(--berlitz-blue, #004fef);
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    vertical-align: middle;
    padding: 0 1em 0 0;
    margin: 0;
    min-width: calc(100% - 5em);

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.ui-picker .header i {
    color: var(--berlitz-blue, #004fef);
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    padding: 0 0.25em;
    margin: 0;
    min-width: 1.5em;
}
div.ui-picker button.picker-dow {
    border: none !important;
    color: var(--berlitz-blue, #004fef);
    display: inline-block;
    font-size: 0.8em;
    text-align: center;
    text-transform: uppercase;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 1.5em;
    width: calc(100% / 7);
}
div.ui-picker button.picker-dow.no-click { cursor: default !important; }
div.ui-picker span.picker-dow {
    color: var(--berlitz-blue, #004fef);
    display: inline-block;
    font-size: 0.8em;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    min-width: 1.5em;
    width: calc(100% / 7);
}
div.ui-picker .footer {
    display: block;
    text-align: center;
    padding: 5px 0;
    margin: 0;
    width: 100%;
}
div.ui-picker .footer span.close {
    color: var(--pin-red, #ff495c);
    cursor: pointer;
    display: inline-block;
    padding: 0 0 5px;
}

div.modal .modal-body div.ui-picker {
    margin-top: 2px;
}