/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */


/* Document
   ========================================================================== */


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}


/* Sections
   ========================================================================== */


/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}


/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/* Text-level semantics
   ========================================================================== */


/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}


/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}


/* Forms
   ========================================================================== */


/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}


/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}


/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}


/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}


/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}


/* Interactive
   ========================================================================== */


/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}


/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}


/* Misc
   ========================================================================== */


/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}


/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 100;
    font-style: normal;
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 100;
    font-style: italic;
    src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-style: italic;
    src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: italic;
    src: url('../fonts/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    font-style: italic;
    src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-style: italic;
    src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 900;
    font-style: normal;
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 900;
    font-style: italic;
    src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-BlackItalic';
    src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Italic';
    src: url('../fonts/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-MediumItalic';
    src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-LightItalic';
    src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
}

html {
    height: 100%;
}

body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

@font-face {
    font-family: 'i-DOS';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Typedos-23.2.1.otf') format('opentype');
}

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.ttf') format('opentype');
}

.icon {
    display: inline-block;
    font-family: 'i-DOS';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon--edit::before {
    content: "\e036";
}

.icon--upload::before {
    content: "\f002";
}

.icon--download::before {
    content: "\e000";
}

.icon--close::before {
    content: "\e001";
}

.icon--new::before {
    content: "\e002";
}

.icon--spinner-close::before {
    content: "\e003";
}

.icon--spinner-open::before {
    content: "\e004";
}

.icon--help::before {
    content: "\e005";
}

.icon--more::before {
    content: "\e006";
}

.icon--delete::before {
    content: "\e007";
}

.icon--selection::before {
    content: "\e008";
}

.icon--check::before {
    content: "\e009";
}

.icon--index::before {
    content: "\e00a";
}

.icon--share::before {
    content: "\e00b";
}

.icon--search::before {
    content: "\e00c";
}

.icon--minus::before {
    content: "\e00d";
}

.icon--close-menu::before {
    content: "\e00e";
}

.icon--burger-menu::before {
    content: "\e00f";
}

.icon--calendar::before {
    content: "\e010";
}

.icon--share-with-me::before {
    content: "\e010";
}

.icon--anchor-navigation::before {
    content: "\e012";
}

.icon--filter::before {
    content: "\e013";
}

.icon--group::before {
    content: "\e014";
}

.icon--pulldown-arrow::before {
    content: "\e015";
}

.icon--save::before {
    content: "\e016";
}

.icon--back::before {
    content: "\e017";
}

.icon--copy::before {
    content: "\e018";
}

.icon--open::before {
    content: "\e019";
}

.icon--folder::before {
    content: "\e01a";
}

.icon--next::before {
    content: "\e01b";
}

.icon--before::before {
    content: "\e01c";
}

.icon--last-page::before {
    content: "\e01d";
}

.icon--first-page::before {
    content: "\e01e";
}

.icon--refresh::before {
    content: "\e01f";
}

.icon--sort::before {
    content: "\e020";
}

.icon--info::before {
    content: "\e021";
}

.icon--warning::before {
    content: "\e022";
}

.icon--error::before {
    content: "\e023";
}

.icon--success::before {
    content: "\e024";
}

.icon--register::before {
    content: "\e025";
}

.icon--selection-circle::before {
    content: "\e026";
}

.icon--radiobutton-select::before {
    content: "\e027";
}

.icon--hook-selected::before {
    content: "\e028";
}

.icon--document::before {
    content: "\e029";
}

.icon--dashboard::before {
    content: "\e02a";
}

.icon--search::before {
    content: "\e02b";
}

.icon--responsive::before {
    content: "\e02c";
}

.icon--archive::before {
    content: "\e02d";
}

.icon--administration::before {
    content: "\e02e";
}

.icon--client::before {
    content: "\e02f";
}

.icon--photo::before {
    content: "\e030";
}

.icon--create-folder::before {
    content: "\e031";
}

.icon--different-clients::before {
    content: "\e032";
}

.icon--collaborative-work::before {
    content: "\e033";
}

.icon--audit-proof-archiving::before {
    content: "\e034";
}

.icon--heart::before {
    content: "\e035";
}

.icon--check-in::before {
    content: "\e037";
}

.icon--check-out::before {
    content: "\e038";
}

.icon--view::before {
    content: "\e039";
}

.icon--space::before {
    content: "\e03a";
}

.icon--system::before {
    content: "\e03b";
}

.icon--profil::before {
    content: "\e03c";
}

.icon--logout::before {
    content: "\e03d";
}

.icon--send-verification::before {
    content: "\e03e";
}

.icon--error-x::before {
    content: "\e03f";
}

.icon--report::before {
    content: "\e040";
}

.icon--email::before {
    content: "\e041";
}

.icon--information::before {
    content: "\e042";
}

.icon--usp::before {
    content: "\e043";
}

.icon--cost::before {
    content: "\e044";
}

.icon--test::before {
    content: "\e045";
}

.icon--question::before {
    content: "\e046";
}

.icon--login::before {
    content: "\e047";
}

.icon--transition-up::before {
    content: "\e048";
}

.icon--transition-down::before {
    content: "\e049";
}

.icon--attachment::before {
    content: "\e04a";
}

.icon--facebook::before {
    content: "\e04b";
}

.icon--linkedin::before {
    content: "\e04c";
}

.icon--twitter::before {
    content: "\e04d";
}

.icon--printerest::before {
    content: "\e04e";
}

.icon--submission::before {
    content: "\e04f";
}

.icon--break::before {
    content: "\e050";
}

.icon--entry-delete::before {
    content: "\e051";
}

.icon--minimize::before {
    content: "\e052";
}

.icon--maximize::before {
    content: "\e053";
}

.icon--function-flyout::before {
    content: "\e054";
}

.icon--disconnect::before {
    content: "\e055";
}

.icon--rework::before {
    content: "\e056";
}

.icon--draft-px::before {
    content: "\e057";
}

.icon--inbox-px::before {
    content: "\e058";
}

.icon--task-done-px::before {
    content: "\e059";
}

.icon--send-px::before {
    content: "\e05a";
}

.icon--inbox::before {
    content: "\e05b";
}

.icon--report-px::before {
    content: "\e05c";
}

.icon--payment-px::before {
    content: "\e05d";
}

.icon--working-hours-px::before {
    content: "\e05e";
}

.icon--support-px::before {
    content: "\e05f";
}

.icon--deadline-px::before {
    content: "\e060";
}

.icon--news-pw::before {
    content: "\e061";
}

.icon--back-px::before {
    content: "\e062";
}

.icon--down-px::before {
    content: "\e063";
}

.icon--basis::before {
    content: "\e064";
}

.icon--sofortmeldung::before {
    content: "\e065";
}

.icon--pkw-e-fahrrad::before {
    content: "\e066";
}

.icon--ag-darlehen::before {
    content: "\e067";
}

.icon--bav::before {
    content: "\e068";
}

.icon--pfändung::before {
    content: "\e069";
}

.icon--au-meldung::before {
    content: "\e06a";
}

.icon--stammdaten::before {
    content: "\e06b";
}

.icon--zusaetzliches::before {
    content: "\e06c";
}

.icon--beschaeftigung::before {
    content: "\e06d";
}

.icon--export::before {
    content: "\e06e";
}

.icon--neu-nachricht::before {
    content: "\e06f";
}

.icon--aufgabe-oeffnen::before {
    content: "\e070";
}

.icon--pruefung::before {
    content: "\e071";
}

.icon--in-bearbeitung::before {
    content: "\e072";
}

.icon--versand::before {
    content: "\e078";
}

.icon--angebotvertrag::before {
    content: "\e07b";
}

.icon--auswahl-30::before {
    content: "\e07f";
}

.icon--auswahl-60::before {
    content: "\e080";
}

.icon--auswahl-all::before {
    content: "\e010"
}

.icon--posteingang::before {
    content: "\e081";
}

.icon--krankmeldungen::before {
    content: "\e086";
}

.icon--vml::before {
    content: "\e087";
}

.icon--schwerbehinderung::before {
    content: "\e088";
}

.icon--address::before {
    content: "\e08a";
}

.icon--bank::before {
    content: "\e08b";
}

.icon--working_time::before {
    content: "\e05e";
}

.icon--salary::before {
    content: "\e05d";
}

.icon--certificate::before {
    content: "\e08c";
}

.icon--a1-request::before {
    content: "\e08d";
}

.icon--print::before {
	content:"\e08e"
}

.icon--portal::before {
	content:"\e08f"
}

.icon--manual::before {
	content:"\e090"
}

.icon--support::before {
	content:"\e091"
}

.icon--child::before {
	content:"\e092"
}

.badge {
    padding: 12px;
    background-color: #3384CA;
    width: 24px;
    height: 24px;
}

@media ( min-width: 481px) {
    .badge {
        padding: 6px;
    }
}

.badge:hover,
.badge:focus {
    cursor: pointer;
}

.badge__icon {
    font-size: 24px;
    color: white;
}

.button {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    font-family: Roboto;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 22px;
    padding: 6px 8px 6px 8px;
    border-radius: 0;
    margin: 8px 8px;
    border: 0;
    outline: none;
}

.button:disabled {
    opacity: 0.5;
    box-shadow: none;
}

.button:hover,
.button:focus {
    cursor: pointer;
}

.button:active {
    box-shadow: none;
}

@media ( min-width: 961px) {
    .button {
        padding: 7px 8px 7px 8px;
        font-size: 18px;
        margin: 12px 8px;
    }
}

.button--primary {
    background-color: #3384CA;
    color: #FFFFFF;
}

.button--primary:disabled {
    color: rgba(255, 255, 255, 0.5);
    background-color: #266398;
}

.button--primary:hover,
.button--primary:focus {
    background-color: #266398;
}

.button--secondary {
    background-color: #EFEFEF;
    color: #484848;
}

.button--secondary:disabled {
    color: rgba(72, 72, 72, 0.5);
    background-color: #DDDDDD;
}

.button--secondary:hover,
.button--secondary:focus {
    background-color: #DDDDDD;
}

.button--fullwidth {
    width: 100%;
}

.iconbutton {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-family: Roboto;
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
    background-color: transparent;
}

.iconbutton:hover,
.iconbutton:focus {
    cursor: pointer;
}

.iconbutton__text {
    display: block;
    margin-left: 4px;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: #484848;
}

.iconbutton__icon {
    display: block;
    font-size: 1.5rem;
    color: #484848;
}

.iconbutton--sidenavigation .iconbutton__icon {
    margin-left: 8px;
    margin-right: 8px;
}

@media ( min-width: 481px) {
    .iconbutton--sidenavigation .iconbutton__icon {
        margin-left: 0;
    }
}

.iconbutton--sidenavigation .iconbutton__text {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}

@media ( min-width: 481px) {
    .iconbutton--sidenavigation .iconbutton__text {
        font-weight: 500;
        font-size: 0.875rem;
    }
}

.buttonbar {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    border-top: 1px solid #DDDDDD;
}

.buttonbar--no-divider {
    border-top-width: 0;
}

@media ( min-width: 481px) {
    .buttonbar {
        padding: 8px;
    }
}

.buttonbar .button {
    flex: 1 0 auto;
}

@media ( min-width: 481px) {
    .buttonbar .button {
        flex: 0;
        justify-content: flex-end;
    }
}

.checkbox {
    font-family: Roboto;
    padding: 24px 8px 16px;
}

@media ( min-width: 961px) {
    .checkbox {
        padding: 0px 12px 16px;
    }
}

.checkbox:after {
    content: '';
    display: block;
    clear: both;
}

.checkbox__headline {
    display: block;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #B9B9B9;
    font-size: 0.75rem;
    line-height: 130%;
    color: #7B7B7B;
}

@media ( min-width: 961px) {
    .checkbox__headline {
        font-size: 0.875rem;
    }
}

.checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 8px 0 0;
    border: 1px solid #B9B9B9;
    border-radius: 0;
    vertical-align: bottom;
    font-size: 0.875rem;
    cursor: pointer;
    background-color: #FFF;
    text-align: center;
    float: left;
}

.checkbox__input+.checkbox__label {
    cursor: pointer;
    margin: 4px 0;
    padding: 8px 0 8px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #7B7B7B;
    letter-spacing: 0;
    display: contents;
}

@media ( min-width: 961px) {
    .checkbox__input+.checkbox__label {
        font-size: 0.875rem;
    }
}

.checkbox__input:hover {
    border: 1px solid #3384CA;
}

.checkbox__input:checked {
    border: 1px solid #3384CA;
}

.checkbox__input:checked:before {
    content: "\e009";
    font-family: 'i-DOS';
    font-weight: normal;
    font-style: normal;
    line-height: 1rem;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    text-rendering: auto;
    text-align: center;
    color: #3384CA;
    font-size: 1.2rem;
}

.checkbox__input:checked:after {}

.checkbox--datatable-filter {
    padding: 16px 8px;
}

.ui-datepicker {
    padding: 4px 4px 0;
    border-radius: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
    font-family: Roboto, sans-serif;
}

.ui-datepicker.ui-widget-content {
    border: 0;
}

.ui-datepicker .ui-datepicker-header {
    padding: 8px 0 7px;
    border: 0;
    border-radius: 0;
    background: #3384CA;
    color: #FFFFFF;
    font-size: 1.125rem;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 1.375rem;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 6px;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: none;
    border: none;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    display: inline-block;
    font-family: 'i-DOS';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.5rem;
    color: #ffffff;
}

.ui-datepicker .ui-datepicker-prev {
    left: 4px;
}

.ui-datepicker .ui-datepicker-prev::after {
    content: '\e01c';
}

.ui-datepicker .ui-datepicker-next {
    right: 4px;
}

.ui-datepicker .ui-datepicker-next::after {
    content: '\e01b';
}

.ui-datepicker th {
    font-weight: 500;
    font-size: 0.9rem;
}

.ui-datepicker td {
    font-size: 0.875rem;
}

.ui-datepicker-calendar {
    table-layout: fixed;
    color: #484848;
}

.ui-datepicker-calendar .ui-state-default {
    border: 0;
    background: none;
}

.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-calendar .ui-state-focus {
    background: #F7F7F7;
}

.ui-datepicker-calendar .ui-state-active {
    background: #3384CA;
    color: #FFFFFF;
}

.ui-datepicker-calendar .ui-state-highlight {
    background: #FFFFFF;
    border: 1px solid #3384CA;
    color: #3384CA;
}

.divider {
    position: relative;
    width: 1px;
    height: 100%;
    background-color: #DDDDDD;
}

.divider__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -10px;
    font-size: 24px;
    line-height: 24px;
    color: #484848;
    background: #FEFEFE;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    border-radius: 12px;
}

@media ( min-width: 961px) {
    .divider__icon {
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        cursor: pointer;
    }
}

.divider--open .divider__icon:before {
    content: "\e01c";
}

.divider--close .divider__icon:before {
    content: "\e01b";
}

.field {
    position: relative;
    padding: 0 8px 16px;
}

@media ( min-width: 961px) {
    .field {
        padding: 0 12px 16px;
    }
}

.field__label {
    display: block;
    margin-bottom: 4px;
    color: #7B7B7B;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    line-height: 130%;
}

@media ( min-width: 961px) {
    .field__label {
        font-size: 0.875rem;
    }
}

.field__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 2px 6px 7px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.field__input:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

@media ( min-width: 961px) {
    .field__input {
        padding: 7px 2px 7px 7px;
        font-size: 1rem;
    }
}

.field__icon {
    position: absolute;
    bottom: 16px;
    right: 8px;
    margin: 4px;
    font-size: 1.5rem;
    pointer-events: none;
    color: #484848;
}

@media ( min-width: 961px) {
    .field__icon {
        margin: 6px;
        right: 12px;
    }
}

.field--disabled .field__input {
    opacity: 0.76;
}

.field--readonly .field__input {
    border-color: #F7F7F7;
    background-color: #F7F7F7;
    color: rgba(72, 72, 72, 0.72);
}

.field--duty .field__label {
    color: #000000;
}

.field--duty .field__input {
    border-color: #000000;
    color: #484848;
}

.field--duty-filled .field__input {
    border-color: #B9B9B9;
}

.field--error .field__input {
    border-color: #DC1B00;
    color: #DC1B00;
}

.col {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
}

.col--no-gutters {
    padding: 0;
}

.grid {
    box-sizing: border-box;
}

.grid--container {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.grid--modal {
    padding: 1rem 1.5rem 0 1.5rem;
}

.grid--form {
    padding: 0 8px;
}

@media ( min-width: 481px) {
    .grid--form {
        padding: 0 8px 0 44px;
    }
}

@media ( min-width: 961px) {
    .grid--form {
        padding: 0 12px 0 44px;
    }
}

.grid--dashboard {
    background-image: linear-gradient(45deg, #ADD5CE 0%, #4D6D97 100%);
    padding: 4px;
    height: 100%;
}

@media ( min-width: 481px) {
    .grid--dashboard {
        padding: 8px;
    }
}

@media ( min-width: 621px) {
    .grid--dashboard {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media ( min-width: 961px) {
    .grid--dashboard {
        padding: 12px;
    }
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    align-items: flex-start;
    z-index: 0;
}

.text--left {
    text-align: left;
}

.text--center {
    text-align: center;
}

.text--right {
    text-align: right;
}

.row--xs-top {
    align-items: flex-start;
}

.row--xs-center {
    align-items: center;
}

.row--xs-bottom {
    align-items: flex-end;
}

.col--xs-align-top {
    align-self: flex-start;
}

.col--xs-align-center {
    align-self: center;
}

.col--xs-align-bottom {
    align-self: flex-end;
}

.col--xs-first {
    order: -1;
}

.col--xs-last {
    order: 1;
}

.col--xs-reset {
    order: 0;
}

.row--xs-reverse {
    flex-direction: row-reverse;
}

.col--xs-flex {
    display: flex;
}

.text--xs-right {
    text-align: right;
}

.text--xs-left {
    text-align: left;
}

.text--xs-center {
    text-align: center;
}

.col--xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    padding: 1rem .5rem 0 .5rem;
}

.col--xs-1 {
    width: 8.33333333%;
    flex: none;
}

.col--xs-2 {
    width: 16.66666667%;
    flex: none;
}

.col--xs-3 {
    width: 25%;
    flex: none;
}

.col--xs-4 {
    width: 33.33333333%;
    flex: none;
}

.col--xs-5 {
    width: 41.66666667%;
    flex: none;
}

.col--xs-6 {
    width: 50%;
    flex: none;
}

.col--xs-7 {
    width: 58.33333333%;
    flex: none;
}

.col--xs-8 {
    width: 66.66666667%;
    flex: none;
}

.col--xs-9 {
    width: 75%;
    flex: none;
}

.col--xs-10 {
    width: 83.33333333%;
    flex: none;
}

.col--xs-11 {
    width: 91.66666667%;
    flex: none;
}

.col--xs-12 {
    width: 100%;
    flex: none;
}

.col--xs-offset-1 {
    margin-left: 8.33333333%;
}

.col--xs-offset-2 {
    margin-left: 16.66666667%;
}

.col--xs-offset-3 {
    margin-left: 25%;
}

.col--xs-offset-4 {
    margin-left: 33.33333333%;
}

.col--xs-offset-5 {
    margin-left: 41.66666667%;
}

.col--xs-offset-6 {
    margin-left: 50%;
}

.col--xs-offset-7 {
    margin-left: 58.33333333%;
}

.col--xs-offset-8 {
    margin-left: 66.66666667%;
}

.col--xs-offset-9 {
    margin-left: 75%;
}

.col--xs-offset-10 {
    margin-left: 83.33333333%;
}

.col--xs-offset-11 {
    margin-left: 91.66666667%;
}

.col--xs-offset-12 {
    margin-left: 100%;
}

@media ( min-width: 481px) {
    .row--sm-top {
        align-items: flex-start;
    }
    .row--sm-center {
        align-items: center;
    }
    .row--sm-bottom {
        align-items: flex-end;
    }
    .col--sm-align-top {
        align-self: flex-start;
    }
    .col--sm-align-center {
        align-self: center;
    }
    .col--sm-align-bottom {
        align-self: flex-end;
    }
    .col--sm-first {
        order: -1;
    }
    .col--sm-last {
        order: 1;
    }
    .col--sm-reset {
        order: 0;
    }
    .row--sm-reverse {
        flex-direction: row-reverse;
    }
    .col--sm-flex {
        display: flex;
    }
    .text--sm-right {
        text-align: right;
    }
    .text--sm-left {
        text-align: left;
    }
    .text--sm-center {
        text-align: center;
    }
    .col--sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: 1rem .5rem 0 .5rem;
    }
    .col--sm-1 {
        width: 8.33333333%;
        flex: none;
    }
    .col--sm-2 {
        width: 16.66666667%;
        flex: none;
    }
    .col--sm-3 {
        width: 25%;
        flex: none;
    }
    .col--sm-4 {
        width: 33.33333333%;
        flex: none;
    }
    .col--sm-5 {
        width: 41.66666667%;
        flex: none;
    }
    .col--sm-6 {
        width: 50%;
        flex: none;
    }
    .col--sm-7 {
        width: 58.33333333%;
        flex: none;
    }
    .col--sm-8 {
        width: 66.66666667%;
        flex: none;
    }
    .col--sm-9 {
        width: 75%;
        flex: none;
    }
    .col--sm-10 {
        width: 83.33333333%;
        flex: none;
    }
    .col--sm-11 {
        width: 91.66666667%;
        flex: none;
    }
    .col--sm-12 {
        width: 100%;
        flex: none;
    }
    .col--sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col--sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col--sm-offset-3 {
        margin-left: 25%;
    }
    .col--sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col--sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col--sm-offset-6 {
        margin-left: 50%;
    }
    .col--sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col--sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col--sm-offset-9 {
        margin-left: 75%;
    }
    .col--sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col--sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col--sm-offset-12 {
        margin-left: 100%;
    }
}

@media ( min-width: 621px) {
    .row--md-top {
        align-items: flex-start;
    }
    .row--md-center {
        align-items: center;
    }
    .row--md-bottom {
        align-items: flex-end;
    }
    .col--md-align-top {
        align-self: flex-start;
    }
    .col--md-align-center {
        align-self: center;
    }
    .col--md-align-bottom {
        align-self: flex-end;
    }
    .col--md-first {
        order: -1;
    }
    .col--md-last {
        order: 1;
    }
    .col--md-reset {
        order: 0;
    }
    .row--md-reverse {
        flex-direction: row-reverse;
    }
    .col--md-flex {
        display: flex;
    }
    .text--md-right {
        text-align: right;
    }
    .text--md-left {
        text-align: left;
    }
    .text--md-center {
        text-align: center;
    }
    .col--md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: 1rem .5rem 0 .5rem;
    }
    .col--md-1 {
        width: 8.33333333%;
        flex: none;
    }
    .col--md-2 {
        width: 16.66666667%;
        flex: none;
    }
    .col--md-3 {
        width: 25%;
        flex: none;
    }
    .col--md-4 {
        width: 33.33333333%;
        flex: none;
    }
    .col--md-5 {
        width: 41.66666667%;
        flex: none;
    }
    .col--md-6 {
        width: 50%;
        flex: none;
    }
    .col--md-7 {
        width: 58.33333333%;
        flex: none;
    }
    .col--md-8 {
        width: 66.66666667%;
        flex: none;
    }
    .col--md-9 {
        width: 75%;
        flex: none;
    }
    .col--md-10 {
        width: 83.33333333%;
        flex: none;
    }
    .col--md-11 {
        width: 91.66666667%;
        flex: none;
    }
    .col--md-12 {
        width: 100%;
        flex: none;
    }
    .col--md-offset-1 {
        margin-left: 8.33333333%;
    }
    .col--md-offset-2 {
        margin-left: 16.66666667%;
    }
    .col--md-offset-3 {
        margin-left: 25%;
    }
    .col--md-offset-4 {
        margin-left: 33.33333333%;
    }
    .col--md-offset-5 {
        margin-left: 41.66666667%;
    }
    .col--md-offset-6 {
        margin-left: 50%;
    }
    .col--md-offset-7 {
        margin-left: 58.33333333%;
    }
    .col--md-offset-8 {
        margin-left: 66.66666667%;
    }
    .col--md-offset-9 {
        margin-left: 75%;
    }
    .col--md-offset-10 {
        margin-left: 83.33333333%;
    }
    .col--md-offset-11 {
        margin-left: 91.66666667%;
    }
    .col--md-offset-12 {
        margin-left: 100%;
    }
}

@media ( min-width: 961px) {
    .row--lg-top {
        align-items: flex-start;
    }
    .row--lg-center {
        align-items: center;
    }
    .row--lg-bottom {
        align-items: flex-end;
    }
    .col--lg-align-top {
        align-self: flex-start;
    }
    .col--lg-align-center {
        align-self: center;
    }
    .col--lg-align-bottom {
        align-self: flex-end;
    }
    .col--lg-first {
        order: -1;
    }
    .col--lg-last {
        order: 1;
    }
    .col--lg-reset {
        order: 0;
    }
    .row--lg-reverse {
        flex-direction: row-reverse;
    }
    .col--lg-flex {
        display: flex;
    }
    .text--lg-right {
        text-align: right;
    }
    .text--lg-left {
        text-align: left;
    }
    .text--lg-center {
        text-align: center;
    }
    .col--lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: 1rem .5rem 0 .5rem;
    }
    .col--lg-1 {
        width: 8.33333333%;
        flex: none;
    }
    .col--lg-2 {
        width: 16.66666667%;
        flex: none;
    }
    .col--lg-3 {
        width: 25%;
        flex: none;
    }
    .col--lg-4 {
        width: 33.33333333%;
        flex: none;
    }
    .col--lg-5 {
        width: 41.66666667%;
        flex: none;
    }
    .col--lg-6 {
        width: 50%;
        flex: none;
    }
    .col--lg-7 {
        width: 58.33333333%;
        flex: none;
    }
    .col--lg-8 {
        width: 66.66666667%;
        flex: none;
    }
    .col--lg-9 {
        width: 75%;
        flex: none;
    }
    .col--lg-10 {
        width: 83.33333333%;
        flex: none;
    }
    .col--lg-11 {
        width: 91.66666667%;
        flex: none;
    }
    .col--lg-12 {
        width: 100%;
        flex: none;
    }
    .col--lg-offset-1 {
        margin-left: 8.33333333%;
    }
    .col--lg-offset-2 {
        margin-left: 16.66666667%;
    }
    .col--lg-offset-3 {
        margin-left: 25%;
    }
    .col--lg-offset-4 {
        margin-left: 33.33333333%;
    }
    .col--lg-offset-5 {
        margin-left: 41.66666667%;
    }
    .col--lg-offset-6 {
        margin-left: 50%;
    }
    .col--lg-offset-7 {
        margin-left: 58.33333333%;
    }
    .col--lg-offset-8 {
        margin-left: 66.66666667%;
    }
    .col--lg-offset-9 {
        margin-left: 75%;
    }
    .col--lg-offset-10 {
        margin-left: 83.33333333%;
    }
    .col--lg-offset-11 {
        margin-left: 91.66666667%;
    }
    .col--lg-offset-12 {
        margin-left: 100%;
    }
}

@media ( min-width: 1441px) {
    .row--xl-top {
        align-items: flex-start;
    }
    .row--xl-center {
        align-items: center;
    }
    .row--xl-bottom {
        align-items: flex-end;
    }
    .col--xl-align-top {
        align-self: flex-start;
    }
    .col--xl-align-center {
        align-self: center;
    }
    .col--xl-align-bottom {
        align-self: flex-end;
    }
    .col--xl-first {
        order: -1;
    }
    .col--xl-last {
        order: 1;
    }
    .col--xl-reset {
        order: 0;
    }
    .row--xl-reverse {
        flex-direction: row-reverse;
    }
    .col--xl-flex {
        display: flex;
    }
    .text--xl-right {
        text-align: right;
    }
    .text--xl-left {
        text-align: left;
    }
    .text--xl-center {
        text-align: center;
    }
    .col--xl {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: 1rem .5rem 0 .5rem;
    }
    .col--xl-1 {
        width: 8.33333333%;
        flex: none;
    }
    .col--xl-2 {
        width: 16.66666667%;
        flex: none;
    }
    .col--xl-3 {
        width: 25%;
        flex: none;
    }
    .col--xl-4 {
        width: 33.33333333%;
        flex: none;
    }
    .col--xl-5 {
        width: 41.66666667%;
        flex: none;
    }
    .col--xl-6 {
        width: 50%;
        flex: none;
    }
    .col--xl-7 {
        width: 58.33333333%;
        flex: none;
    }
    .col--xl-8 {
        width: 66.66666667%;
        flex: none;
    }
    .col--xl-9 {
        width: 75%;
        flex: none;
    }
    .col--xl-10 {
        width: 83.33333333%;
        flex: none;
    }
    .col--xl-11 {
        width: 91.66666667%;
        flex: none;
    }
    .col--xl-12 {
        width: 100%;
        flex: none;
    }
    .col--xl-offset-1 {
        margin-left: 8.33333333%;
    }
    .col--xl-offset-2 {
        margin-left: 16.66666667%;
    }
    .col--xl-offset-3 {
        margin-left: 25%;
    }
    .col--xl-offset-4 {
        margin-left: 33.33333333%;
    }
    .col--xl-offset-5 {
        margin-left: 41.66666667%;
    }
    .col--xl-offset-6 {
        margin-left: 50%;
    }
    .col--xl-offset-7 {
        margin-left: 58.33333333%;
    }
    .col--xl-offset-8 {
        margin-left: 66.66666667%;
    }
    .col--xl-offset-9 {
        margin-left: 75%;
    }
    .col--xl-offset-10 {
        margin-left: 83.33333333%;
    }
    .col--xl-offset-11 {
        margin-left: 91.66666667%;
    }
    .col--xl-offset-12 {
        margin-left: 100%;
    }
}

.header {
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    border-bottom: 1px solid #DDDDDD;
}

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

@media ( min-width: 481px) {
    .header {
        padding: 16px 0;
        border: none;
    }
}

.header__title {
    /*   display: none; */
    width: 100%;
    padding: 6px 15px;
    font-size: 0.75rem;
    line-height: 130%;
    color: #979797;
    text-align: center;
}

.header__title--visible\@xs {
    display: block;
}

@media ( min-width: 481px) {
    .header__title--visible\@sm {
        display: block;
    }
}

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

@media ( min-width: 481px) {
    .header__title {
        width: auto;
        flex: 1 0 auto;
        order: 2;
        font-size: 1.125rem;
    }
}

.header__secondary_info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    font-size: 0.875rem;
    line-height: 1.6875rem;
    padding: 11px 0;
    font-weight: 400;
    margin-left: 8px;
    background-image: linear-gradient(90deg, #484848 0%, #484848 63%, #FFFFFF 86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    /*required*/
    flex: 1 1 auto;
}

@media ( min-width: 481px) {
    .header__secondary_info {
        order: 1;
        padding: 6px 0;
    }
}

.header__button-menu {
    margin-left: 8px;
    display: flex;
}

.header__button-menu-grid {
    margin-left: 8px;
    display: grid;
}

@media ( min-width: 481px) {
    .header__button-menu {
        order: 1;
    }
}

.header__button {
    margin: 0 4px;
    padding: 12px;
    font-size: 1.5rem;
    float: left;
}

@media ( min-width: 481px) {
    .header__button {
        padding: 6px;
    }
}

.header__button:hover,
.header__button:focus {
    cursor: pointer;
}

@media ( min-width: 481px) {
    .header__button--back {
        display: none;
    }
}

@media ( min-width: 481px) {
    .header__badge {
        order: 3;
    }
}

.link {
    margin: 24px 0 24px 24px;
    font-family: 'Roboto', sans-serif;
}

.link__header {
    margin-bottom: 16px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #3384CA;
    text-decoration: none;
}

.link__text {
    font-size: 0.6875rem;
    line-height: 0.75rem;
    color: #484848;
}

.ui-dialog {
    padding: 0;
    border-radius: 0;
    font-family: Roboto, sans-serif;
}

.ui-dialog.ui-widget-content {
    border: 0;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 16px;
    background-color: white;
    border: 0;
}

.ui-dialog .ui-dialog-title {
    margin: 0;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.3125rem;
    color: #484848;
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 8px;
    top: 8px;
    height: 1.5rem;
    width: 1.5rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-indent: 0;
    color: #484848;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar-close:focus {
    outline: none;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    display: inline-block;
    font-family: 'i-DOS';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.5rem;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    content: "\e001";
}

.ui-dialog .ui-dialog-content {
    padding: 0;
}

.ui-widget-overlay {
    opacity: .70;
    background-color: #000000;
}

.ui-monthpicker .ui-datepicker-title {
    height: 1.5rem;
}

.ui-monthpicker .ui-datepicker-select {
    display: inline-block;
    position: relative;
    width: 88px;
}

.ui-monthpicker .ui-datepicker-select select {
    display: block;
    width: 100%;
    padding: 0 36px 0 9px;
    border: 1px solid #3384CA;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ui-monthpicker .ui-datepicker-select select:focus {
    outline: none;
}

.ui-monthpicker .ui-datepicker-select .ui-datepicker-select-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 4px;
    color: #484848;
    font-size: 1rem;
    pointer-events: none;
}

.ui-monthpicker .ui-datepicker-calendar {
    display: none;
}

.ui-monthpicker .ui-datepicker-buttonpane {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}

.ui-monthpicker .ui-datepicker-buttonpane button {
    float: none;
}

.ui-monthpicker .ui-datepicker-buttonpane .ui-state-default {
    min-width: 102px;
    margin: 8px 8px;
    padding: 6px 8px;
    border: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    background-color: #35BAF6;
    color: #FFFFFF;
}

.ui-monthpicker .ui-datepicker-buttonpane .ui-state-default:hover,
.ui-monthpicker .ui-datepicker-buttonpane .ui-state-default:focus {
    outline: none;
    background-color: #288BB9;
}

.ui-monthpicker .ui-datepicker-buttonpane .ui-state-default:active {
    outline: none;
    box-shadow: none;
}

.ui-monthpicker .ui-datepicker-buttonpane .ui-datepicker-current {
    display: none;
}

.page {
    width: 100%;
    height: 100%;
    min-width: 300px;
    display: flex;
    flex-direction: column-reverse;
    background: white;
}

@media ( min-width: 481px) {
    .page {
        flex-direction: row;
    }
}

.page__navigation {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 0 0 auto;
}

.page__divider {
    display: none;
}

@media ( min-width: 481px) {
    .page__divider {
        display: initial;
        padding-top: 16px;
    }
}

.page__app-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 0px;
}

.page__content {
    flex: 1 0 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.pager {
    display: flex;
    justify-content: space-between;
    height: 53px;
    border-top: 1px solid #DDDDDD;
}

.pager__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.pager__refresh {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pager__icon {
    font-size: 1.5rem;
    margin: 0 4px;
    color: #484848;
    cursor: pointer;
}

@media ( min-width: 961px) {
    .pager__icon {
        margin: 0 12px;
    }
}

.pager__label {
    margin-left: 8px;
    margin-right: 8px;
    color: #000000;
    font-size: 0.875rem;
}

.pager__label--input {
    margin: 0;
}

@media ( min-width: 961px) {
    .pager__label--input {
        display: none;
    }
}

.pager__label--first {
    margin-left: 12px;
}

.pager__label--last {
    margin-left: 0;
    margin-right: 12px;
}

.pager__input {
    display: none;
    max-width: 52px;
    width: 100%;
    padding: 6px 7px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF;
    color: #484848;
    font-size: 0.875rem;
    line-height: 130%;
    white-space: nowrap;
    overflow: hidden;
}

@media ( min-width: 961px) {
    .pager__input {
        display: block;
        padding: 7px;
        font-size: 1rem;
    }
}

.pager__input:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

.pager__input--disabled {
    border: 0;
}

.panel {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    height: 360px;
    padding: 4px;
}

.panel-button {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex: 1 1 0;
    margin: 4px;
    padding: 8px 40px 8px 16px;
    border: 1px solid #484848;
    background-color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    text-align: left;
    outline: none;
    cursor: pointer;
}

.panel-button__icon {
    font-size: 3rem;
}

.panel-button__content {
    flex-grow: 1;
    height: 3rem;
    margin-left: 8px;
}

.panel-button__headline {
    display: block;
    margin: 0 0 2px;
    color: #484848;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.panel-button__text {
    margin: 0;
    color: #000000;
    font-size: 0.6875rem;
    line-height: 1.1;
}

.panel-button__notice {
    position: absolute;
    right: 8px;
    top: 8px;
    color: #E53D26;
    font-size: 0.875rem;
}

.panel-button--mail {
    border-color: #7CC33E;
}

.panel-button--mail .panel-button__icon {
    color: #7CC33E;
}

.panel-button--form {
    border-color: #4090D0;
}

.panel-button--form .panel-button__icon {
    color: #4090D0;
}

.panel-button--info {
    border-color: #DB8628;
}

.panel-button--info .panel-button__icon {
    color: #DB8628;
}

.pulldown {
    position: relative;
    padding: 0 8px 16px;
}

@media ( min-width: 961px) {
    .pulldown {
        padding: 0 12px 16px;
    }
}

.pulldown__label {
    display: block;
    margin-bottom: 4px;
    color: #7B7B7B;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    line-height: 130%;
}

@media ( min-width: 961px) {
    .pulldown__label {
        font-size: 0.875rem;
    }
}

.pulldown__select {
    display: block;
    width: 100%;
    padding: 6px 37px 6px 7px;
    border: 1px solid #B9B9B9;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pulldown__select:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

@media ( min-width: 961px) {
    .pulldown__select {
        padding: 7px 37px 7px 7px;
        font-size: 1rem;
    }
}

.pulldown__icon {
    position: absolute;
    bottom: 16px;
    right: 8px;
    margin: 4px;
    font-size: 1.5rem;
    pointer-events: none;
    color: #484848;
}

@media ( min-width: 961px) {
    .pulldown__icon {
        margin: 6px;
        right: 12px;
    }
}

.radiobutton {
    margin: 0;
    padding: 0 8px 16px;
    border: none;
    font-family: Roboto;
}

@media ( min-width: 961px) {
    .radiobutton {
        padding: 0 12px 16px;
    }
}

.radiobutton__headline {
    display: block;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #B9B9B9;
    font-size: 0.75rem;
    line-height: 130%;
    color: #7B7B7B;
}

@media ( min-width: 961px) {
    .radiobutton__headline {
        font-size: 0.875rem;
    }
}

.radiobutton__field {
    display: inline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    width: auto;
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

.radiobutton__field+.radiobutton__label {
    position: relative;
    margin: 4px 0 4px 1.25rem;
    padding: 8px 0 8px 8px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    cursor: pointer;
    color: #7B7B7B;
}

@media ( min-width: 961px) {
    .radiobutton__field+.radiobutton__label {
        font-size: 0.875rem;
    }
}

.radiobutton__field:checked,
.radiobutton__field:not(:checked) {
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

.radiobutton__field:checked+.radiobutton__label::before,
.radiobutton__field:not(:checked)+.radiobutton__label::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background: white;
    border-radius: 50%;
    vertical-align: bottom;
}

.radiobutton__field:checked+.radiobutton__label::before {
    border: 1px solid #3384CA;
}

.radiobutton__field:not(:checked)+.radiobutton__label::before {
    border: 1px solid #B9B9B9;
}

.radiobutton__field:hover+.radiobutton__label::before {
    border: 1px solid #3384CA;
}

.radiobutton__field:checked+.radiobutton__label::before {
    background: #3384CA;
    box-shadow: inset 0 0 0 3px white;
    content: "\f111";
    font-family: FontAwesome;
    line-height: 1.2rem;
    text-align: center;
    color: #3384CA;
    box-sizing: content-box;
}

.radiobutton--vertical .radiobutton__label {
    display: block;
}

.separator {
    font-family: Roboto;
    margin: 16px 0;
    cursor: pointer;
    color: #484848;
}

.separator--open .separator__icon:before {
    content: "\e004";
}

.separator--open+.separator__content {
    display: block;
}

.separator__icon {
    margin-left: 24px;
    font-size: 1.5rem;
    margin-right: 4px;
}

@media ( min-width: 961px) {
    .separator__icon {
        margin-right: 8px;
    }
}

.separator__icon:before {
    content: "\e003";
}

.separator__label {
    font-size: 1rem;
    cursor: pointer;
}

@media ( min-width: 961px) {
    .separator__label {
        font-size: 1.125rem;
        line-height: 1.25rem;
    }
}

.separator__content {
    display: none;
}

.tabbar__back-button {
    display: none;
    width: 100%;
    margin: 8px 0;
    padding: 8px;
}

@media ( min-width: 481px) {
    .tabbar__back-button {
        display: flex;
    }
}

.tabbar__list {
    font-family: Roboto;
    font-weight: 700;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    color: #484848;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: row;
    border-top: 1px solid #DDDDDD;
}

@media ( min-width: 481px) {
    .tabbar__list {
        width: 190px;
        flex-direction: column;
        border-top: 0;
        padding-right: 8px;
    }
}

.tabbar__item {
    height: 46px;
    margin-bottom: 0;
    cursor: pointer;
    display: block;
    flex: 1 1 auto;
    text-align: center;
    width: 0;
}

.tabbar__item--selected {
    color: #3384CA;
    border-bottom: 2px solid #3384CA;
}

.tabbar__item--selected .tabbar__item-icon {
    color: #3384CA;
}

.tabbar__item--selected .tabbar__item-text {
    font-weight: 500;
}

@media ( min-width: 481px) {
    .tabbar__item {
        width: 100%;
        height: 36px;
        margin-bottom: 4px;
        text-align: left;
    }
    .tabbar__item--selected {
        height: 33px;
        border-bottom: 3px solid #3384CA;
    }
}

.tabbar__item-icon {
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    margin-top: 2px;
    margin-bottom: 2px;
    color: #484848;
}

@media ( min-width: 481px) {
    .tabbar__item-icon {
        display: none;
    }
}

.tabbar__item-text {
    display: block;
    margin: 0 8px 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 13px;
    font-size: 10px;
    font-weight: 300;
}

@media ( min-width: 481px) {
    .tabbar__item-text {
        display: block;
        margin: 0 8px 0 8px;
        line-height: 36px;
        font-size: 14px;
        font-weight: 500;
    }
}

@media ( min-width: 481px) {
    .tabbar--collapsed .tabbar__back-button {
        padding-left: 11px;
    }
    .tabbar--collapsed .tabbar__back-button .iconbutton__icon {
        width: 100%;
    }
    .tabbar--collapsed .tabbar__back-button .iconbutton__text {
        display: none;
    }
    .tabbar--collapsed .tabbar__list {
        width: 48px;
        padding: 0;
    }
    .tabbar--collapsed .tabbar__item {
        height: 40px;
        width: 45px;
        border-bottom-width: 0;
        margin: 0;
        border-left: 3px solid transparent;
    }
    .tabbar--collapsed .tabbar__item--selected {
        border-left-color: #3384CA;
    }
    .tabbar--collapsed .tabbar__item-text {
        display: none;
    }
    .tabbar--collapsed .tabbar__item-icon {
        display: inline-block;
        text-align: center;
        margin-top: 8px;
        width: 100%;
    }
}

.table {
    background: #FFFFFF;
}

.table--desktop {
    display: none;
    width: 100%;
    border-collapse: collapse;
}

@media ( min-width: 621px) {
    .table--desktop {
        display: table;
    }
}

.table--desktop .table__header-row {
    color: #484848;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.table--desktop .table__header-cell {
    padding: 5px 8px 4px;
    border: 0;
    border-bottom: 1px solid rgba(72, 72, 72, 0.5);
    text-align: left;
    font-weight: 400;
}

.table--desktop .table__header-cell:not(:last-child) {
    border-right: 1px solid rgba(72, 72, 72, 0.5);
}

.table--desktop .table__data-row {
    color: #000000;
    font-size: 1rem;
    line-height: 1.25rem;
}

.table--desktop .table__data-row--unread {
    font-weight: 700;
}

.table--desktop .table__data-row--unread .table__data-cell:first-child {
    position: relative;
}

.table--desktop .table__data-row--unread .table__data-cell:first-child::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF0000;
}

.table--desktop .table__data-cell {
    padding: 8px 8px 7px;
    border: 0;
    border-bottom: 1px solid #979797;
}

.table--desktop .table__data-cell--icon {
    padding: 6px 8px 5px;
    font-size: 1.5rem;
    text-align: center;
}

.table--desktop.table--with-read-states .table__header-cell:first-child,
.table--desktop.table--with-read-states .table__data-cell:first-child {
    padding-left: 16px;
}

.table--mobile {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media ( min-width: 621px) {
    .table--mobile {
        display: none;
    }
}

.table--mobile .table__element {
    position: relative;
    padding: 8px 48px 7px 8px;
    border-bottom: 1px solid #979797;
}

.table--mobile .table__element--unread {
    font-weight: 700;
}

.table--mobile .table__element--unread .table__data-icon {
    top: 37px;
}

.table--mobile .table__element--unread::before {
    content: '';
    position: absolute;
    top: 13px;
    right: 16px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF0000;
}

.table--mobile .table__data-sorted {
    margin: 5px 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: #000000;
}

.table--mobile .table__data-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 24px;
}

.table--mobile .table__content {
    display: flex;
    font-size: 0.75rem;
    line-height: 0.875rem;
}

.table--mobile .table__data {
    margin-left: 8px;
}

.table--mobile .table__header-cell {
    margin: 2px 0;
    color: #484848;
}

.table--mobile .table__data-cell {
    margin: 2px 0;
    color: #000000;
}

.datatable {
    width: 100%;
    border-collapse: collapse !important;
    background: #FFFFFF;
    border-bottom: 1px solid #979797 !important;
}

.datatable .datatable__header-row {
    color: #484848;
    font-size: 0.75rem;
    line-height: 1rem;
}

@media ( min-width: 621px) {
    .datatable .datatable__header-row {
        font-size: 0.875rem;
        line-height: 1.125rem;
    }
}

.datatable .datatable__header-cell {
    padding: 5px 8px 4px;
    border: 0;
    border-bottom: 1px solid #979797;
    text-align: left;
    font-weight: 400;
}

.datatable .datatable__header-cell:not(:first-child) {
    border-left: 1px solid #979797;
}

.datatable .datatable__data-row {
    color: #000000;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@media ( min-width: 621px) {
    .datatable .datatable__data-row {
        font-size: 1rem;
    }
}

.datatable .datatable__data-row--unread {
    font-weight: 700;
}

.datatable .datatable__data-row--unread .datatable__data-cell:first-child {
    position: relative;
}

.datatable .datatable__data-row--unread .datatable__data-cell:first-child::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF0000;
}

.datatable .datatable__data-row.parent .datatable__data-cell {
    padding-bottom: 4px;
}

.datatable .datatable__data-cell {
    padding: 8px 8px 7px;
    border: 0;
    border-top: 1px solid #979797;
}

.datatable .datatable__data-cell--icon {
    padding: 6px 8px 5px;
    font-size: 1.5rem;
    text-align: center;
}

.datatable.datatable--with-read-states .datatable__header-cell:first-child,
.datatable.datatable--with-read-states .datatable__data-cell:first-child,
.datatable.datatable--with-read-states td.child {
    padding-left: 16px;
}

.datatable .datatable__search {
    display: table-header-group;
}

tbody{
	display: table-footer-group;
}

.datatable .datatable__search th,
.datatable .datatable__search td {
    padding: 8px;
    border: none;
}

.datatable .datatable__search-field {
    position: relative;
}

.datatable .datatable__search-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 37px 6px 7px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.datatable .datatable__search-input:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

@media ( min-width: 961px) {
    .datatable .datatable__search-input {
        padding: 7px 38px 7px 7px;
        font-size: 1rem;
    }
}

.datatable .datatable__search-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 4px;
    font-size: 1.5rem;
    pointer-events: none;
    color: #484848;
}

@media ( min-width: 961px) {
    .datatable .datatable__search-icon {
        margin: 6px;
    }
}

.datatable .datatable__details {
    font-size: 0.75rem;
    line-height: 0.875rem;
}

@media ( min-width: 621px) {
    .datatable .datatable__details {
        font-size: 0.875rem;
        line-height: 1rem;
    }
}

.datatable .datatable__details-header {
    padding: 2px 0;
    color: #484848;
}

.datatable .datatable__details-data {
    padding: 2px 0 2px 8px;
    color: #000000;
}

.datatable td.child {
    padding: 0 8px 8px;
}

.dataTables_filter {
    margin: 0 !important;
    padding: 0 8px 8px;
}

@media ( min-width: 961px) {
    .dataTables_filter {
        padding: 8px;
    }
}

@media ( max-width: 960px) {
    .dataTables_filter {
        float: none !important;
        text-align: left !important;
    }
}

.dataTables_filter input {
    box-sizing: border-box;
    padding: 6px 7px 6px 7px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF !important;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

@media ( min-width: 961px) {
    .dataTables_filter input {
        padding: 7px 38px 7px 7px;
        font-size: 1rem;
    }
}

.textarea {
    position: relative;
    padding: 0 8px 16px;
}

@media ( min-width: 961px) {
    .textarea {
        padding: 0 12px 16px;
    }
}

.textarea__label {
    display: block;
    margin-bottom: 4px;
    color: #7B7B7B;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    line-height: 130%;
}

@media ( min-width: 961px) {
    .textarea__label {
        font-size: 0.875rem;
    }
}

.textarea__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 37px 6px 7px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.textarea__input:focus {
    outline: none;
    border-color: #484848 !important;
    color: #000000 !important;
}

@media ( min-width: 961px) {
    .textarea__input {
        padding: 7px 38px 7px 7px;
        font-size: 1rem;
    }
}

.textarea--disabled .textarea__input {
    opacity: 0.76;
}

.textarea--readonly .textarea__input {
    border-color: #F7F7F7;
    background-color: #F7F7F7;
    color: rgba(72, 72, 72, 0.72);
}

.textarea--duty .textarea__label {
    color: #000000;
}

.textarea--duty .textarea__input {
    border-color: #000000;
    color: #484848;
}

.textarea--duty-filled .textarea__input {
    border-color: #B9B9B9;
}

.textarea--error .textarea__input {
    border-color: #DC1B00;
    color: #DC1B00;
}

.tooltip__content {
    display: none;
    pointer-events: none;
}

.tooltip__icon {
    padding: 4px;
    float: right;
    border-radius: 50%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    background: #30A7DD;
    color: #FFFFFF;
    font-size: 1rem;
}

@media ( min-width: 961px) {
    .tooltip__icon {
        box-shadow: none;
        background: none;
        color: #484848;
    }
}

.tooltip--active .tooltip__icon {
    background: #FFFFFF;
    color: #30A7DD;
}

@media ( min-width: 961px) {
    .tooltip--active .tooltip__icon {
        background: none;
    }
}

.tooltip--error .tooltip__icon {
    background: #E53D26;
    color: #FFFFFF;
}

@media ( min-width: 961px) {
    .tooltip--error .tooltip__icon {
        background: none;
        color: #E53D26;
    }
}

.tooltip--field {
    position: relative;
    top: -3px;
}

.ui-tooltip {
    padding: 8px;
    border-radius: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background: #EFFAFF;
    color: #30A7DD;
    font-size: 14px;
    line-height: 18px;
}

.ui-tooltip.ui-widget-content {
    border: 0;
}

.ui-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    right: 13px;
    box-sizing: border-box;
    border: 5px solid;
    border-color: transparent transparent #EFFAFF #EFFAFF;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -2px 2px 2px -1px rgba(0, 0, 0, 0.16);
}

.ui-tooltip--field {
    max-width: none;
}

.ui-tooltip--error {
    background: #FFF0EE;
    color: #E53D26;
}

.ui-tooltip--error::after {
    border-color: transparent transparent #FFF0EE #FFF0EE;
}

.attachment_area {
    display: block;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.attachment_item {
    display: block;
    margin-top: 8px;
    height: 32px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    padding: 8px;
}

.attachment_item__file_icon {
    color: #484848;
    float: left;
    font-size: 2rem;
}

.attachment_item__close_icon {
    color: #484848;
    float: right;
    font-size: 1.5rem;
    margin: 4px;
}

.attachment_item__file_information {
    float: left;
    margin-left: 8px;
}

.file__name {
    margin-bottom: 2px;
    line-height: 1.125rem;
    font-size: 0.875rem;
    width: max-content;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    max-width: 100%;
}

.attachment_item.fileuploader-item .file__name:hover {
    text-decoration: underline;
}

.file__size {
    color: rgba(0, 0, 0, 0.72);
    width: 100%;
    font-weight: 400;
    line-height: 0.75rem;
    font-size: 0.6875rem;
}

.upload {
    font-family: 'Roboto';
    padding: 12px 40px 12px 8px;
    background-color: white;
    margin: 16px 0 8px 0;
    border: 1px dashed #979797;
    text-align: center;
    position: relative;
    display: block;
    color: #484848;
}

@media ( min-width: 961px) {
    .upload {
        margin: 8px 0 8px 0;
    }
}

.upload:hover,
.upload:focus {
    cursor: pointer;
}

.upload.fileuploader-dragging {
    border-style: solid;
}

.upload.fileuploader-dragging .upload__button {
    box-shadow: none;
    background-color: #266398;
}

.upload__headline_first,
.upload__headline_second {
    display: block;
    font-weight: 300;
}

.upload__close_icon {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 1.5rem;
}

@media ( min-width: 961px) {
    .upload__close_icon {
        right: 12px;
        top: 12px;
    }
}

.upload__headline_second {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1rem;
}

.upload__button {
    display: inline-block;
}

.upload--no-close-icon {
    padding: 12px 8px 12px 8px;
}

.upload--no-close-icon>.upload__close_icon {
    display: none;
}

.fileuploader-theme-custom {
    margin: 0;
    padding: 0 8px 16px;
    background: none;
}

@media ( min-width: 961px) {
    .fileuploader-theme-custom {
        padding: 0 12px 16px;
    }
}

.fileuploader-theme-custom * {
    box-sizing: content-box;
}

.flyout {
    position: relative;
}

.flyout:hover {
    cursor: pointer;
}

.flyout__list {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding: 10px 0;
}

.flyout__list_item {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    margin: 0;
    border: 0;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
    background-color: transparent;
}

@media ( min-width: 481px) {
    .flyout__list_item {
        padding: 8px 16px;
    }
}

.flyout__list_item:hover,
.flyout__list_item:focus {
    cursor: pointer;
}

.flyout__list_item_text {
    display: block;
    margin-left: 8px;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: #484848;
    white-space: nowrap;
}

.flyout__list_item_icon {
    display: block;
    font-size: 1.5rem;
    color: #484848;
    min-width: 24px;
    min-height: 24px;
}

.flyout__list_item_divider {
    padding: 0;
    margin: 8px 16px;
    border-color: #DEDEDE;
    border-left-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
}

.flyout__list_item:hover {
    background-color: #DEDEDE;
}

.flyout__overlay {
    position: fixed;
    top: 79px;
    left: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    background-color: white;
    z-index: 99;
    display: none;
    width: 100%;
}

@media ( min-width: 481px) {
    .flyout__overlay {
        width: auto;
        position: absolute;
        top: 100%;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.24);
    }
}

.flyout__overlay--visible {
    display: block;
}

.flyout__icon {
    display: block;
    font-size: 1.5rem;
    color: #484848;
}

.flyout--open .flyout__icon {
    color: #3384CA;
}

.tile {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 62px;
    height: 47px;
    padding: 16px 4px 7px 4px;
    box-shadow: 3px 4px 12px 0 rgba(0, 0, 0, 0.24);
    margin: 4px;
    font-family: 'Roboto', sans-serif;
    background-color: #FFFFFF;
}

@media ( min-width: 481px) {
    .tile {
        margin: 8px;
        display: flex;
        flex-direction: row;
        padding: 24px 24px 16px 16px;
        height: 160px;
        width: 100%;
    }
}

@media ( min-width: 961px) {
    .tile {
        margin: 12px;
    }
}

.tile:hover {
    cursor: pointer;
    box-shadow: 3px 4px 16px 0 rgba(0, 0, 0, 0.16);
}

.tile:hover .tile__label {
    text-decoration: underline;
}

.tile:hover .tile__icon {
    color: #484848;
}

.tile__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
}

@media ( min-width: 481px) {
    .tile__wrapper {
        margin-top: 0;
    }
}

.tile__icon {
    width: 100%;
    font-size: 22px;
    color: #DB8628;
    padding-bottom: 8px;
    text-align: center;
}

@media ( min-width: 481px) {
    .tile__icon {
        position: absolute;
        right: 27px;
        top: 27px;
        font-size: 42px;
        width: auto;
        padding-bottom: 0;
    }
}

.tile__infowrapper {
    align-self: flex-end;
    width: 100%;
}

.tile__label {
    font-weight: 300;
    font-size: 0.6875rem;
    color: #484848;
    text-align: center;
    line-height: 0.9375rem;
    width: 100%;
}

@media ( min-width: 481px) {
    .tile__label {
        text-align: left;
        font-size: 1rem;
        line-height: 1.125rem;
    }
}

.tile__hint {
    display: none;
}

@media ( min-width: 481px) {
    .tile__hint {
        font-weight: 700;
        font-size: 1rem;
        color: #DB8628;
        line-height: 1.225rem;
        width: 100%;
        /*     display: block; */
        padding-bottom: 4px;
    }
}

.tile__hintcount {
    font-size: 0.625rem;
    line-height: 0.875rem;
    min-width: 6px;
    text-align: center;
    padding: 2px 6px;
    background-color: #DB8628;
    color: white;
    position: absolute;
    right: -4px;
    top: -4px;
}

@media ( min-width: 481px) {
    .tile__hintcount {
        display: none;
    }
    .tile__hintcount_intern {
        display: none;
    }
}

.sidenavigation {
    display: block;
    width: 100%;
}

@media ( min-width: 481px) {
    .sidenavigation {
        width: 30%;
        float: left;
        height: 100%;
        overflow-y: auto;
    }
}

.sidenavigation__wrapper {
    display: flex;
    flex-direction: column-reverse;
}

@media ( min-width: 481px) {
    .sidenavigation__wrapper {
        height: 100%;
        flex-direction: row;
        display: block;
    }
}

@media ( min-width: 481px) {
    .sidenavigation__content {
        height: 100%;
    }
}

.sidenavigation__back-button {
    width: 100%;
    margin: 8px 0;
    padding: 8px;
    display: flex;
}

.sidenavigation__divider {
    border-top: 1px solid #DDDDDD;
    width: calc(100% - 32px);
    margin-left: 16px;
}

@media ( min-width: 481px) {
    .sidenavigation__divider {
        margin-left: 2px;
        width: calc(100% - 24px);
    }
}

.sidenavigation__list {
    font-family: Roboto;
    list-style-type: none;
    margin: 0;
    padding: 8px 0 0 0;
    width: 99%;
    color: #484848;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 3px;
}

.sidenavigation__item {
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.sidenavigation__header {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    font-weight: bold;
    padding-top: 0.5em;
}

.sidenavigation__item-text {
    margin: 15px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.125rem;
    font-weight: 700;
}

@media ( min-width: 481px) {
    .sidenavigation__item-text {
        margin: 9px 8px;
        font-weight: 500;
        font-size: 0.875rem;
    }
}

.sidenavigation__item-icon {
    font-size: 24px;
    line-height: 24px;
    color: #484848;
    margin: 15px 16px;
    margin-left: auto;
}

.sidenavigation__header-icon {
    font-size: 24px;
    line-height: 24px;
    color: #484848;
    margin: 15px 16px;
    margin-left: auto;
}

@media ( min-width: 481px) {
    .sidenavigation__item-icon {
        display: none;
    }
}

.functionbar {
    position: relative;
    float: left;
    display: flex;
}

.functionbar:hover {
    cursor: pointer;
}

.functionbar__list {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding: 10px 0;
    overflow-y: scroll;
    height: 400px;
}

.functionbar__list_item {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    margin: 0;
    border: 0;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
    background-color: transparent;
}

@media ( min-width: 481px) {
    .functionbar__list_item {
        padding: 8px 16px;
    }
}

.functionbar__list_item:hover,
.functionbar__list_item:focus {
    cursor: pointer;
}

.functionbar__list_item_text {
    display: block;
    margin-left: 8px;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: #484848;
    white-space: nowrap;
}

@media ( min-width: 481px) {
    .functionbar__list_item_text {
        line-height: 1.25rem;
    }
}

.functionbar__list_item_divider {
    padding: 0;
    margin: 8px 16px;
    border-color: #DEDEDE;
    border-left-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
}

.functionbar__list_item:hover {
    background-color: #C5E5F3;
}

.functionbar__header_item {
    padding: 10px 8px;
    margin: 0;
    border: 0;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
    background-color: transparent;
}

@media ( min-width: 481px) {
    .functionbar__header_item {
        padding: 8px 8px;
    }
}

.functionbar__header_item:hover,
.functionbar__header_item:focus {
    cursor: pointer;
}

.functionbar__header_item_text {
    display: block;
    margin-left: 0;
    font-size: 1.125rem;
    line-height: 1.3125rem;
    font-weight: 500;
    color: #484848;
    white-space: nowrap;
}

@media ( min-width: 481px) {
    .functionbar__header_item_text {
        font-weight: 700;
        font-size: 0.875rem;
        line-height: 1.125rem;
    }
}

.functionbar__overlay {
    position: fixed;
    top: 79px;
    left: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    background-color: white;
    z-index: 99;
    display: none;
    width: 100%;
}

@media ( min-width: 481px) {
    .functionbar__overlay {
        width: auto;
        position: absolute;
        top: 100%;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.24);
    }
}

.functionbar__overlay--visible {
    display: block;
}

.functionbar__icon {
    display: block;
    font-size: 2.5rem;
    color: #484848;
    margin: 0px 15px;
}

.functionbar__label {
    font-size: 1.0rem;
    margin: auto;
}

.functionbar__filter_info {
    font-size: 0.875rem;
    color: gray;
    margin: auto
}

.functionbar--open .functionbar__icon {
    color: #3384CA;
}

.header__button_length {
    margin: 2px 10px;
    padding: 2px;
}

.header__button_length label{
    font-size: 1.0rem;
    font-weight: 400;
}

.header__button_filter {
    padding: 2px;
}

.header__button_filter label{
    padding: 1px 1px;
}

.custom_pulldown {
    position: relative;
    padding: 0px 10px 18px 76px;
}

.custom_pulldown__select {
    display: block;
    width: 90%;
    padding: 6px 37px 6px 7px;
    border: 1px solid #B9B9B9;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #484848;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 130%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom_pulldown__icon {
    position: absolute;
    bottom: 16px;
    right: 65px;
    margin: 7px;
    font-size: 1.5rem;
    pointer-events: none;
    color: #484848;
}

.attachmentcount {
    display: none;
    padding-top: 5px;
}

.attachmentcount .icon{
    font-size: 27px;
    padding-top: 25px;
}

.attachmentcount .text, .attachmentcount .counter{
    font-size: 20px;
    font-weight: bold;
}