@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 300;
    src: url("../assets/fonts/ibm-plex-sans-v9-latin-300.eot");
    src: local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url("../assets/fonts/ibm-plex-sans-v9-latin-300.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/ibm-plex-sans-v9-latin-300.woff2") format("woff2"),url("../assets/fonts/ibm-plex-sans-v9-latin-300.woff") format("woff"),url("../assets/fonts/ibm-plex-sans-v9-latin-300.ttf") format("truetype"),url("../assets/fonts/ibm-plex-sans-v9-latin-300.svg#IBMPlexSans") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    src: url("../assets/fonts/ibm-plex-sans-v9-latin-600.eot");
    src: local("IBM Plex Sans SemiBold"),local("IBMPlexSans-SemiBold"),url("../assets/fonts/ibm-plex-sans-v9-latin-600.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/ibm-plex-sans-v9-latin-600.woff2") format("woff2"),url("../assets/fonts/ibm-plex-sans-v9-latin-600.woff") format("woff"),url("../assets/fonts/ibm-plex-sans-v9-latin-600.ttf") format("truetype"),url("../assets/fonts/ibm-plex-sans-v9-latin-600.svg#IBMPlexSans") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 400;
    src: url("../assets/fonts/ibm-plex-serif-v9-latin-italic.eot");
    src: local("IBM Plex Serif Italic"),local("IBMPlexSerif-Italic"),url("../assets/fonts/ibm-plex-serif-v10-latin-italic.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/ibm-plex-serif-v10-latin-italic.woff2") format("woff2"),url("../assets/fonts/ibm-plex-serif-v10-latin-italic.woff") format("woff"),url("../assets/fonts/ibm-plex-serif-v10-latin-italic.ttf") format("truetype"),url("../assets/fonts/ibm-plex-serif-v10-latin-italic.svg#IBMPlexSerif") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    src: url("../assets/fonts/ibm-plex-serif-v10-latin-600.eot");
    src: local("IBM Plex Serif SemiBold"),local("IBMPlexSerif-SemiBold"),url("../assets/fonts/ibm-plex-serif-v10-latin-600.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/ibm-plex-serif-v10-latin-600.woff2") format("woff2"),url("../assets/fonts/ibm-plex-serif-v10-latin-600.woff") format("woff"),url("../assets/fonts/ibm-plex-serif-v10-latin-600.ttf") format("truetype"),url("../assets/fonts/ibm-plex-serif-v10-latin-600.svg#IBMPlexSerif") format("svg");
    font-display: swap
}

:root {
    --mud-palette-black: #000 !important;
    --mud-palette-primary: #db0723 !important;
    --mud-palette-primary-darken: #bd0603 !important;
    --mud-palette-primary-text: #fff !important;
    --mud-palette-secondary: #DCE317 !important;
    /*--mud-palette-secondary-lighten: #f1f4a2 !important;*/
    --mud-palette-secondary-lighten: #f8f9d1 !important;
    --mud-palette-secondary-darken: #b0b612 !important;
    --mud-palette-secondary-text: #000 !important;
    --mud-palette-tertiary: #beefeb !important;
    --mud-palette-tertiary-lighten: #d8f5f3 !important;
    --mud-palette-tertiary-darken: #98bfbc !important;
    --mud-palette-tertiary-text: #000 !important;
    --mud-palette-error: #bd0603 !important;
    --mud-palette-error-lighten: #db0723 !important;
    --mud-palette-error-darken: #b40720 !important;
    --mud-palette-gray-default: #999 !important;
    --mud-palette-gray-light: #ececec !important;
    --mud-palette-gray-lighter: #f7f7f7 !important;
    --mud-palette-gray-dark: #666 !important;
    --mud-palette-gray-darker: #333 !important;
    --mud-palette-dark: #495c5b !important;
    --mud-palette-drawer-background: #d8f5f3 !important;
    --mud-palette-appbar-background: #DCE317 !important;
    --mud-palette-appbar-text: #000 !important;
}

body, html {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--mud-palette-gray-lighter);
    font-family: "IBM Plex Sans",sans-serif;
    font-weight: 300;
    line-height: 1.5;
}

* {
    font-family: "IBM Plex Sans",sans-serif;
}

#startup {
    margin: 0;
    flex: 1 1 auto;
    transition: margin 225ms cubic-bezier(0,0,.2,1) 0ms;
}

    #startup .container {
        width: 100%;
        display: block;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
        max-width: 1280px;
    }

    #startup .card {
        color: #424242;
        background-color: #fff;
        border-radius: 4px;
        transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
        box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    }

        #startup .card .card-header {
            display: flex;
            padding: 16px;
            align-items: center;
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }

            #startup .card .card-header .card-header-content {
                flex: 1 1 auto;
            }

        #startup .card h4 {
            font-weight: 600;
        }

        #startup .card h5 {
            font-weight: 400;
        }

        #startup .card .card-content {
            padding: 16px;
        }

        #startup .card h6 {
            font-weight: 500;
        }

.key-visual-wrap {
    position: fixed;
    top: 1rem;
    bottom: 1rem;
    left: 0;
    z-index: 100;
    width: 1rem;
    overflow: hidden;
}

.key-visual-wrap-small {
    position: fixed;
    bottom: 1rem;
    left: 0;
    z-index: 100;
    width: 1rem;
    overflow: hidden;
    top: calc(2rem + (var(--mud-appbar-height) - var(--mud-appbar-height)/8));
}

@media screen and (min-width: 75em) .key-visual-wrap {
    top: 3rem;
    bottom: 3rem;
    width: 1.5rem;
}

@media print, screen and (min-width: 48em) .key-visual-wrap {
    top: 2.5rem;
    bottom: 2.5rem;
    width: 0.75rem;
}

.logo {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

.key-visual {
    height: 100%;
    width: auto;
}

svg {
    display: block;
}

.login-card {
    width: 100%;
    background-color: var(--mud-palette-secondary-lighten);
}

    .login-card .mud-input-label-outlined {
        background-color: var(--mud-palette-secondary-lighten) !important;
    }

.menu-card {
    background-color: var(--mud-palette-drawer-background);
}

    .menu-card .mud-input-label-outlined {
        background-color: var(--mud-palette-drawer-background);
    }

.help-card {
    background-color: var(--mud-palette-dark-hover);
}

    .help-card .mud-input-label-outlined {
        background-color: var(--mud-palette-dark-hover);
    }

.success-card {
    background-color: var(--mud-palette-success-hover);
}

    .success-card .mud-input-label-outlined {
        background-color: var(--mud-palette-success-hover);
    }

.error-card {
    background-color: var(--mud-palette-error-hover);
}

    .error-card .mud-input-label-outlined {
        background-color: #FFF5F4 !important;
    }

.form {
    width: 100%;
    background-color: var(--mud-palette-secondary-lighten);
}

    .form .mud-input-label-outlined {
        background-color: var(--mud-palette-secondary-lighten) !important;
    }

.german-card {
    background-color: var(--mud-palette-secondary-lighten);
}

    .german-card .mud-input-label-outlined {
        background-color: var(--mud-palette-secondary-lighten) !important;
    }

.app-bar {
    background-color: #fff !important;
}

.letterfield-wrap {
    scroll-behavior: smooth;
    overflow-y: hidden;
    overflow-x: auto;
}

.letterfield {
    width: 38px;
}

    .letterfield .mud-input-root {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

.flip-text {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
    text-align: right;
}

.fixed-design-small {
    position: fixed;
    top: 1rem;
    bottom: 1rem;
    left: 0;
    right: 0;
}

.fixed-design {
    position: fixed;
    top: 2rem;
    bottom: 1rem;
    left: 0;
    right: 0;
}

.scroll-container {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

.buttons {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.eval-table-label {
    font-size: 0.8rem;
    text-align: center;
}

.scanner {
    position: relative;
    height: 500px;
    margin-bottom: 15px;
    margin-top: 15px;
}

video {
    top: 0px;
    left: 0px;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

mud-alert-icon {
    align-items: center;
}

/* Small to large phone */
@media only screen and (max-width: 600px) {
    body {
        --mud-typography-h4-size: 1.375rem !important;
        --mud-typography-h5-size: 1.25rem !important;
        --mud-typography-h6-size: 1.125rem !important;
        --mud-typography-h4-lineheight: 1.2 !important;
        --mud-typography-h5-lineheight: 1.2 !important;
        --mud-typography-h6-lineheight: 1.2 !important;
    }
}

/* Small to medium tablet */
@media only screen and (min-width: 600px) {
    body {
        --mud-typography-h4-size: 1.75rem !important;
        --mud-typography-h5-size: 1.5rem !important;
        --mud-typography-h6-size: 1.25rem !important;
        --mud-typography-h4-lineheight: 1.2 !important;
        --mud-typography-h5-lineheight: 1.2 !important;
        --mud-typography-h6-lineheight: 1.2 !important;
    }
}

/* Large tablet to laptop */
@media only screen and (min-width: 960px) {
    body {
        --mud-typography-h4-size: 2.125rem !important;
        --mud-typography-h5-size: 1.5rem !important;
        --mud-typography-h6-size: 1.25rem !important;
        --mud-typography-h4-lineheight: 1.235 !important;
        --mud-typography-h5-lineheight: 1.334 !important;
        --mud-typography-h6-lineheight: 1.4 !important;
    }
}

/* Desktop */
@media only screen and (min-width: 1280px) {
    body {
        --mud-typography-h4-size: 2.125rem !important;
        --mud-typography-h5-size: 1.5rem !important;
        --mud-typography-h6-size: 1.25rem !important;
        --mud-typography-h4-lineheight: 1.235 !important;
        --mud-typography-h5-lineheight: 1.334 !important;
        --mud-typography-h6-lineheight: 1.6 !important;
    }
}

/* HD and 4k */
@media only screen and (min-width: 1920px) {
}

/* 4K+ and ultra-wide */
@media only screen and (min-width: 2560px) {
}