md-sidenav.md-locked-open-remove-active,
md-sidenav.md-locked-open-add-active {
    transition: none !important;
}

.orientationChangeing body.dialogOpened md-dialog:not(.keepSizeOnOrientationChange) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

.orientationChangeing div {
    transition: none !important;
}

input,
button,
textarea,
select,
md-chips,
md-list-item,
md-select {
    -webkit-transform: translate3d(0, 0, 0);
}

termin-details-edit-einladungen .md-subheader,
termin-details-edit-einladungen .md-list-item-text {
    -webkit-transform: translate3d(0, 0, 0);
}

body.dialogStillOpened > md-content > div {
    /* Nicht Display NONE: da die elemente Da sein müssen um z.B. die Kacheln richtig zu berechnen, es soll halt nur nicht sichtbar sein*/
}

@media (max-width: 960px) {
    body.dialogStillOpened > md-content > div {
        /* Nicht Display NONE: da die elemente Da sein müssen um z.B. die Kacheln richtig zu berechnen, es soll halt nur nicht sichtbar sein*/
        opacity: 0.0;
        transition: opacity 0.3s ease-out !important;
    }
}

.hideWhileRefreshing {
    /* Nicht Display NONE: da die elemente Da sein müssen um z.B. die Kacheln richtig zu berechnen, es soll halt nur nicht sichtbar sein*/
    opacity: 0.0;
    transition: opacity 0.3s ease-out !important;
}

img:focus {
    /*Damit beim klicken auf ein Bild kein haesslicher Rahmen angezeigt wird*/
    outline: none;
}

.nakl-kachelable {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: balance;
    column-gap: 0px;
    margin-bottom: 8px;
}

.nakl-kachelable > * {
    break-inside: avoid-column;
    /* Genau Null darf nicht, dann verutschen die Items in den Columns, aber bei mehr als einen sieht es schief aus!*/
    margin-top: 0.5px;
    float: left;
    display: inline-block;
    width: 100%;
}

.nakl-kachelable button {
    /* Achtung: in der Rechten spalte "verschwinden" sonst die Icons*/
    overflow: visible !important;
}

.kachelnNotLoaded {
    opacity: 0 !important;
    color: transparent !important;
}

@media (max-width: 400px) {
    .nakl-kachelable {
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
    }

    .einheiten-ebene-auswahl {
        flex-wrap: wrap;
    }
}

@media (orientation: portrait) {
    .nakl-kachelable {
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
    }
}

.HideKeyboardInput {
    background-color: transparent;
    font-size: 1px;
    position: fixed;
    top: 0px;
}

@media (max-height: 400px) {
    .md-datepicker-calendar-pane {
        top: 0px !important;
    }
}

.feedbackbar {
    position: fixed;
    bottom: 0;
    height: 75px;
    width: 100%;
    background-color: white;
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: #fafafa;
    z-index: 13;
}

.feedbackbar .md-button.md-raised {
    box-shadow: none !important;
}

@media (min-width: 959px) {
    .feedbackbar {
        /* das Menü ist 320px breit*/
        width: calc(100% - 320px) !important;
        left: 320px !important;
    }
}

.md-datepicker-input-mask,
input.md-datepicker-input {
    display: none;
}

.md-datepicker-triangle-button {
    top: -18px !important;
}

.md-nakl-date-input {
    position: relative;
    top: -14px;
    display: block;
}

.md-nakl-date {
    align-items: baseline;
}

.md-datepicker-triangle-button {
    right: -100px;
    top: -8px;
}

.nakl-long-text-with-breaks {
    width: 80%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

bookmark {
    text-decoration: underline;
    cursor: pointer;
}

/***************************/
/* Termine / Kalender */
/***************************/
.MyKalmitErfassung .md-button {
    padding-left: 0 !important;
}

/* Angular Material stößt mit den Farben an seine Grenzen. Man kann die Farben nur auf Buttons vergeben. Daher hier auch für md-card.*/
/* Darstellung der Familienadresse in der Ansicht eines Mitgliedes
    diese Besteht aus den Daten in "h2" und der "überschrift" in "p"
*/
/* Username im Navigationsmenü*/
/* Counter im Navigationsmenü*/
html {
    height: 100%;
}

body {
    height: 100%;
}

body div[ng-view] {
    height: 100%;
}

.radient-background {
    background: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
    background-image: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
    background-repeat: repeat-y !important;
    background-attachment: scroll;
}

.slider {
    height: 100% !important;
}

.slide {
    width: 100%;
    z-index: 1000 !important;
}

.nav .wrapper {
    margin: 0 auto;
    width: 100%;
    padding: 1em 0 .8em;
}

.nav ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav .dot {
    display: inline-block;
    zoom: 1;
}

.nav .dot a {
    display: inline-block;
    zoom: 1;
}

.dots .dot {
    position: relative;
    margin: 0 8px;
    width: 12px;
    height: 12px;
}

.dots .dot a {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.54);
    border: 1px solid transparent;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color 0.25s, border-color 0.25s;
    -moz-transition: background-color 0.25s, border-color 0.25s;
    -ms-transition: background-color 0.25s, border-color 0.25s;
    -o-transition: background-color 0.25s, border-color 0.25s;
    transition: background-color 0.25s, border-color 0.25s;
}

.dots .dot a.active {
    border-color: rgba(0, 0, 0, 0.54);
    background-color: transparent;
}

[ng\:cloak] {
    display: none !important;
}

[ng-cloak] {
    display: none !important;
}

[data-ng-cloak] {
    display: none !important;
}

[x-ng-cloak] {
    display: none !important;
}

.ng-cloak {
    display: none !important;
}

.x-ng-cloak {
    display: none !important;
}

.infoVersion {
    margin: 0;
    padding: 0;
    font-size: small;
    color: grey;
}

.nakl-line-break {
    white-space: pre-wrap !important;
}

.nakl-slideable {
    overflow: hidden;
    width: 0;
    -webkit-transition-property: width;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transition-property: width;
    -ms-transition-property: width;
    -o-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -moz-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.nakl-slideable-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 450px;
    overflow-x: hidden;
    overflow-y: visible;
}

.overflow-visible {
    overflow: visible;
}

.dialog {
    position: absolute;
    width: 100%;
}

/* Da wir nicht mit einer festen höhe arbeiten können, muss der Hintergrund über den hintergrund des Dialoes erfolgen
   I.D.r ist der Hintergrund ein Farbverlauf, ausser bei "bearbeitungs" Dialogen, dieses muss beim Show über options.backgroundTyp == "edit" explizit gesetzt werden
*/
@media (max-width: 960px) {
    body.dialogOpened:not(.editDialogOpened) > md-backdrop {
        background: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
        background-image: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll;
        opacity: unset;
    }

    body.dialogOpened:not(.editDialogOpened) md-dialog,
    body.dialogOpened:not(.editDialogOpened) md-dialog div.radient-background,
    body.dialogOpened:not(.editDialogOpened) md-dialog md-content {
        background: unset !important;
    }
}

@media (min-width: 959px) {
    body.dialogOpened:not(.editDialogOpened) md-dialog {
        background: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
        background-image: radial-gradient(circle farthest-corner at 200px 100px, #eeeeee, #90a4ae) !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll;
    }
}

@media (max-width: 960px) {
    body.dialogOpened.editDialogOpened > md-backdrop {
        background-color: #fafafa;
        opacity: unset;
    }
}

md-dialog:not(.md-default-theme):not(.dynamicWidth) {
    background-color: #fafafa;
    width: 100%;
    /* MDVL-454: Workaround: durch die Abgerundeten Ecken scheint beim Dialog der nicht auf Vollbild angzeigt wird der weisse hintergrund am Rechten rand durch.
        Nun wird in diesesm Fall dann der Hintegrund auf Grau gesetzt, so passt dieses dann zum grauen Schatten der Karte
        Auf Großen Monitoren, wird die Karte nicht vollbild, sondern liegt als Modaldialog über dem Rest:
            : gross = gt-sm = (width >= 960px) dann backcolor grey*/
}

@media (min-width: 959px) {
    md-dialog:not(.md-default-theme):not(.dynamicWidth) {
        background-color: gray !important;
    }
}

@media (max-width: 959px) {
    md-dialog.md-dialog-fullscreen {
        overflow: visible !important;
        top: 0px !important;
        left: 0px !important;
        box-shadow: none !important;
    }

    md-dialog.md-dialog-fullscreen md-content {
        border-radius: 4px;
    }
}

md-dialog:not(.radient-background):not(.md-default-theme) {
    /* Statt einfache farbe*/
    /*background-color: @defaultDialogBackbackground !important;*/
    /* Bekommt der Hintergrund einen Farbferlauf mit der farbe der Toolbar und dem default da sonst der weisse hintergrund durchschimmert*/
    background: #fafafa !important;
}

@media (min-width: 960px) {
    md-dialog:not(.radient-background):not(.md-default-theme) {
        background: -moz-linear-gradient(top, #5793c9 0%, #5793c9 64px, #fafafa 64px, #fafafa 100%) !important;
        background: -webkit-linear-gradient(top, #5793c9 0%, #5793c9 64px, #fafafa 64px, #fafafa 100%) !important;
        background: linear-gradient(to bottom, #5793c9 0%, #5793c9 64px, #fafafa 64px, #fafafa 100%) !important;
    }
}

md-dialog md-content {
    background-color: unset !important;
}

@media (max-width: 960px) {
    md-dialog md-content {
        width: 100% !important;
        /* Sinst muckt das Iphone mit der Toolbar des browsers*/
        overflow: visible !important;
    }
}

@media (min-width: 959px) {
    md-dialog md-content {
        overflow: auto !important;
    }
}

md-dialog md-content > div {
    padding-top: 1px;
    padding-bottom: 8px;
}

.md-dialog-container md-dialog {
    z-index: 15;
}

body.dialogOpened .md-dialog-container {
    width: 100% !important;
    /* height: 100%;*/
    /* Sinst muckt das Iphone mit der Toolbar des browsers*/
    overflow-x: visible !important;
    overflow-y: visible !important;
}

@media (max-width: 960px) {
    body.dialogOpened .md-dialog-container {
        height: unset !important;
    }
}

/* Std. Rückrage und Alert Dialge (z.B. Wirklich Abbrechen?)*/
body:not(.dialogOpened) .md-dialog-container {
    position: fixed !important;
    height: 100% !important;
    top: 0 !important;
}

body.dialogOpened > .feedbackbar,
body.dialogOpened > md-toolbar,
body.dialogOpened > md-content,
body.dialogOpened > .md-fab-bottom-right {
    /* Wenn ein Dialog auf einem kleinem Gerät geöffnet ist (also der Dialog im Vollbild angezeigt wird).
       Dann muss der anderen Content (der Hauptcontent) unsichtbar geschaltet werden, da dieser sonst die höhe vorgibt
       und man daher dann nicht mehr scrolen kann. Wird über den app.config gesetzt!
       Dieses hat auch den Vorteil, dass beim Schnellen hin und her Scrollen der hintergrund (z.B der FabButton) "durchschimmert"
    */
}

@media (max-width: 959px) {
    body.dialogOpened > .feedbackbar,
    body.dialogOpened > md-toolbar,
    body.dialogOpened > md-content,
    body.dialogOpened > .md-fab-bottom-right {
        display: none !important;
    }
}

@media (min-width: 960px) {
    body.dialogOpened > .feedbackbar,
    body.dialogOpened > md-toolbar,
    body.dialogOpened > md-content,
    body.dialogOpened > .md-fab-bottom-right {
        overflow: hidden !important;
        touch-action: none;
    }

    body.dialogOpened > .feedbackbar div.md-virtual-repeat-scroller,
    body.dialogOpened > md-toolbar div.md-virtual-repeat-scroller,
    body.dialogOpened > md-content div.md-virtual-repeat-scroller,
    body.dialogOpened > .md-fab-bottom-right div.md-virtual-repeat-scroller {
        position: fixed;
        overflow: hidden;
    }
}

/* Wenn ein Dialog auf einen Großen Gerät sichtbar ist, muss der dhinterliegende Conent fixiert werden, sonst bounced dieser, wenn neben den dialog gescrollt wird*/
@media (min-width: 960px) {
    body.dialogOpened > md-content {
        position: fixed;
    }
}

.toolbar-transparent {
    background-color: transparent !important;
    background-image: linear-gradient(to top, rgba(179, 179, 179, 0) 75%, #b3b3b3 95%);
    position: absolute;
}

.toolbar-mit-bild {
    background: -moz-linear-gradient(top, rgba(87, 147, 201, 0.25) 0%, rgba(87, 147, 201, 0.25) 40%, rgba(87, 147, 201, 0.2) 67%, rgba(87, 147, 201, 0.15) 77%, rgba(87, 147, 201, 0.1) 85%, rgba(87, 147, 201, 0.05) 92%, rgba(87, 147, 201, 0.01) 99%, rgba(87, 147, 201, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(87, 147, 201, 0.25) 0%, rgba(87, 147, 201, 0.25) 40%, rgba(87, 147, 201, 0.2) 67%, rgba(87, 147, 201, 0.15) 77%, rgba(87, 147, 201, 0.1) 85%, rgba(87, 147, 201, 0.05) 92%, rgba(87, 147, 201, 0.01) 99%, rgba(87, 147, 201, 0) 100%);
    background: linear-gradient(to bottom, rgba(87, 147, 201, 0.25) 0%, rgba(87, 147, 201, 0.25) 40%, rgba(87, 147, 201, 0.2) 67%, rgba(87, 147, 201, 0.15) 77%, rgba(87, 147, 201, 0.1) 85%, rgba(87, 147, 201, 0.05) 92%, rgba(87, 147, 201, 0.01) 99%, rgba(87, 147, 201, 0) 100%);
}

.nakl-search-title {
    cursor: default;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.nakl-no-margin-bottom {
    margin-bottom: 0 !important;
}

.nakl-no-margin-top {
    margin-top: 0 !important;
}

md-virtual-repeat-container {
    height: 100%;
}

.md-select-menu-container {
    /* Bugfix: Sonst wird die Dropdown ganz breit und der (lange) Text dortdrin wird nicht mit ... abgeschnitten*/
    max-width: 79%;
}

.nakl-listview-titel {
    padding-left: 16px;
}

.nakl-listview-titel md-icon {
    margin-right: 16px !important;
    margin-top: 22px !important;
}

.nak-listview-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nakl-listview-items {
    padding-left: 65px !important;
    padding-right: 16px;
}

.nakl-listview-items p {
    margin-top: 16px;
    margin-bottom: 16px;
}

.nakl-listview-items.ng-enter {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -ms-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    -ms-opacity: 0;
    opacity: 0;
}

.nakl-listview-items.ng-enter.ng-enter-active {
    -ms-opacity: 1;
    opacity: 1;
}

.nakl-listview-items.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -ms-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    -ms-opacity: 1;
    opacity: 1;
}

.nakl-listview-items.ng-leave.ng-leave-active {
    -ms-opacity: 0;
    opacity: 0;
}

[nakl-header-bild] {
    position: relative;
    width: 100%;
    overflow: hidden;
    -ms-background-size: 160%;
    background-size: 160%;
    background-position: 50% 50%;
    margin-bottom: -4px;
}

.max-bild-hoehe-xs {
    max-height: 150px;
}

.max-bild-hoehe-sm {
    max-height: 400px;
}

[animiert-beim-scrollen] {
    position: fixed;
    top: 0;
}

[nakl-header-titel] {
    z-index: 1000;
    padding-left: 18px;
    position: relative;
    -webkit-transform-origin: 24px;
    -moz-transform-origin: 24px;
    -ms-transform-origin: 24px;
    -o-transform-origin: 24px;
    transform-origin: 24px;
}

section {
    height: 1600px;
}

.md-tools {
    width: 40px;
}

.nakl-label-required:after {
    content: ' *';
    vertical-align: top;
}

.md-input-focused .nakl-label-required:after {
    color: #9b3636;
}

md-input-container.md-input-has-placeholder:not(.md-input-focused) .nakl-edit-label-hasValue {
    /*color: rgba(0,0,0,0.54) !important;*/
}

.nakl-nachricht-edit-button-empfaenger {
    margin-top: 4px !important;
}

.nakl-nachricht-input-container {
    width: 100%;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: text-bottom !important;
}

.nakl-nachricht-input-container > label {
    margin-left: 13px;
    width: 90% !important;
}

.nakl-nachricht-divider {
    margin-bottom: 30px;
}

.nakl-nachricht-details-icon {
    margin-top: 20px !important;
}

.nakl-nachricht-unread {
    /* Da ungelesene nachricten Fett sind siehe oben, sieht es schöner aus,
      wenn der Text "bzw die ..." nicht ganz zum rechten rand gehen,
      das hamoniert dann mehr mit den gelesenen Nachrichten  */
    margin-right: 1px !important;
}

.nakl-nachricht-unread h3 {
    font-weight: bolder !important;
}

.nakl-toolbar-header {
    font-size: 14px;
    line-height: 24px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.nakl-form-padding {
    padding-top: 16px;
}

.nakl-form-padding > div,
.nakl-form-padding > md-input-container {
    margin-left: 16px;
    margin-right: 16px;
}

.nakl-overflow-hidden {
    overflow: hidden;
}

.nakl-overflow-scroll {
    overflow: visible;
}

.nakl-fixed {
    position: fixed !important;
}

.nakl-relative {
    position: relative;
}

.nakl-top-56 {
    top: 56px !important;
}

.nakl-top-48 {
    top: 48px !important;
}

.nakl-top-112 {
    top: 112px !important;
}

.nakl-position-relative {
    position: relative;
}

.nakl-nachricht-zitat {
    color: white;
    -webkit-transform: translate3d(0, 0, 0);
    width: 100%;
}

.nakl-suchfeld {
    color: white !important;
    margin-bottom: 24px;
    margin-top: 8px;
}

.nakl-suchfeld::-ms-clear {
    display: none;
}

.nakl-input-container {
    height: 30px;
}

.nakl-nachrichten-details {
    width: 100% !important;
}

.nakl-login-header {
    color: #F9FCFE;
    min-height: 80px;
}

.nakl-login-header md-card-header-text {
    display: flex;
    white-space: normal;
}

md-card md-input-container {
    margin-bottom: 0 !important;
}

.nakl-login-buttons-group {
    margin-top: 16px !important;
}

.nakl-login-button {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#login-fehler,
#login-info {
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
    color: white;
}

#login-incompatibleBrowser {
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
    color: white;
}

#login-fehler md-icon,
#login-info md-icon {
    line-height: 24px;
    white-space: nowrap;
    height: 30px;
    width: 30px;
}

#login-fehler md-icon,
#stdEinhStartseite md-icon,
#einladungGemeindeCard md-icon {
    fill: white;
}

#einladungGemeindeCard h3 {
    color: white;
}

#einladungGemeindeCard p {
    color: rgba(255, 255, 255, 0.87);
}

md-card.md-warn {
    color: white !important;
}

md-card.md-warn md-icon {
    fill: white !important;
}

.nakl-animation-show-hide {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.nakl-animation-show-hide.ng-hide {
    -ms-opacity: 0;
    opacity: 0;
}

.nakl-no-padding {
    padding: 0 !important;
}

.nakl-overflow-y-hidden {
    -ms-overflow-y: hidden;
    overflow-y: hidden;
}

.md-tall {
    padding: 8px 2px;
}

.withBreak {
    white-space: pre-wrap !important;
    word-break: break-word;
    word-wrap: break-word;
}

.withBreakAll {
    white-space: normal !important;
    word-break: break-all;
    word-wrap: break-word;
}

md-list-item h3 md-icon.firstInLine {
    height: 12px;
    min-height: 12px;
    width: 12px;
    min-width: 12px;
    margin-right: 3px;
    vertical-align: baseline;
}

md-list-item.abwesenheit {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    margin-top: 4px;
    /*Wenn der EditBtn wieder eingeblendet werden soll, dass muss das margin wieder rein!*/
    /*margin-right: 16px;*/
    margin-bottom: 4px;
}

/* Die HTML Anzeige der AbwesenheitsNotiz hat in der Regel paragrapfen im Text, Paragraphen haben im margin, da es ja neue abstätze sind, damit dieses denoch OBEN bündig beginnt,
   den Margin des ersten Paragraphen entfernen.
*/
#AbwesenheitNotizAnzeige p:first-child {
    margin-top: 0px;
}

.ButtonIconMitText {
    font-size: 16px;
    margin-left: 8px;
    text-transform: none;
}

.ButtonIconMitText md-icon {
    margin-right: 4px;
    margin-top: -4px;
}

md-list-item .md-list-item-inner {
    width: 100%;
    min-width: 100%;
}

md-list-item .nakl-list-item-n-buttons {
    overflow: visible;
    margin-right: 5px;
}

md-list-item .nakl-list-item-n-buttons .md-icon-button {
    margin: 0;
    overflow: visible;
    /*position: unset;*/
}

md-list-item .nakl-list-item-2-buttons {
    overflow: visible;
    margin-right: 5px;
    min-width: 85px;
}

md-list-item .nakl-list-item-2-buttons .md-icon-button {
    margin: 0;
    overflow: visible;
    /*position: unset;*/
}

md-list-item .nakl-list-item-1-button {
    overflow: visible;
    margin-right: 5px;
    min-width: 41px;
}

md-list-item .nakl-list-item-1-button .md-icon-button {
    margin: 0;
    overflow: visible;
    /*position: unset;*/
}

md-list-item.md-2-line .nakl-list-item-2-buttons {
    margin-top: 12px;
}

.md-list-item-text p,
.md-list-item-text span,
.md-list-item-text div,
.md-list-item-text h1,
.md-list-item-text h2,
.md-list-item-text h3,
.md-list-item-text h4,
.md-list-item-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.nowrapEllipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.inline,
.inline * {
    display: inline !important;
}

.withOverflow {
    overflow: visible !important;
    padding: 8px 0;
    word-break: break-all;
}

.withOverflow h3 {
    white-space: normal !important;
}

.withOverflow span {
    white-space: normal !important;
    margin-bottom: 8px;
}

.termin-details .md-title {
    padding-top: 5px;
}

.abwesenheit-details,
.termin-details {
    max-height: none;
}

.abwesenheit-details md-icon,
.termin-details md-icon {
    margin-top: 0;
}

.abwesenheit-details md-list-item button,
.termin-details md-list-item button {
    padding: 0 8px;
}

.abwesenheit-details .nakl-abstand-fuer-icon-mit-liste,
.termin-details .nakl-abstand-fuer-icon-mit-liste {
    margin-top: 8px !important;
}

.abwesenheit-details .nakl-abstand-fuer-span,
.termin-details .nakl-abstand-fuer-span {
    margin-top: 8px !important;
}

.abwesenheit-details .nakl-extra-padding-fuer-liste,
.termin-details .nakl-extra-padding-fuer-liste {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 0;
}

.abwesenheit-details .nakl-extra-padding-fuer-liste .md-caption,
.termin-details .nakl-extra-padding-fuer-liste .md-caption {
    padding-left: 8px;
}

.abwesenheit-details .nakl-abstand-label,
.termin-details .nakl-abstand-label {
    margin-bottom: 16px;
}

.nachricht-details md-icon {
    margin-top: 0;
}

.nachricht-details md-list-item button {
    padding: 0 8px;
}

.nachricht-details .nakl-extra-padding-fuer-liste {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 0;
}

.nachricht-details .nakl-abstand-datums {
    margin-bottom: 16px;
}

.nachricht-details .nakl-abstand-personen {
    margin-bottom: 16px;
}

.nachricht-details .nakl-abstand-divider {
    margin-bottom: 16px;
}

.nakl-abstand-none {
    padding: 0 !important;
    margin: 0 !important;
}

.md-caption {
    color: #000D11;
}

.editEingeladeneGemeinden {
    margin-bottom: 16px;
    -webkit-transform: translate3d(0, 0, 0);
}

.nakl-abstand-ueberschrift-auflistung {
    margin: 0 !important;
    padding: 0 !important;
}

.nakl-abstand-item-auflistung {
    margin-left: -16px;
}

.einheit-kalender i {
    font-size: 16px;
}

.einheit-noimage {
    background-color: #5793c9;
    text-align: center;
}

.search-results {
    padding-left: 16px !important;
}

.search-results > span {
    padding: 0px !important;
}

.einladungsart-icon,
.mitglied-icon {
    margin-bottom: 4px;
    margin-right: 4px;
    font-size: 16px;
    height: 16px;
    min-height: 0;
    max-width: 16px;
    width: 16px;
    min-width: 16px;
}

.famAdress h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.010em;
    line-height: 24px;
    margin-bottom: 0;
}

.famAdress p {
    margin-top: 0;
    color: grey !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6em;
}

.KontaktVertraulich h1,
.KontaktVertraulich h2,
.KontaktVertraulich h3,
.KontaktVertraulich h4 {
    color: #0F6FC8 !important;
}

#loggedinUser {
    min-height: 64px;
    padding: 16px;
}

md-sidenav {
    height: 100%;
    position: fixed !important;
    z-index: 15;
}

.nakl_highlight {
    color: black;
    z-index: 10;
    vertical-align: middle;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -ms-background-clip: padding-box;
    background-clip: padding-box;
    overflow: hidden;
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    -ms-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    -ms-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: background-color, box-shadow, -webkit-transform;
    transition-property: all;
    transition-property: background-color, box-shadow, -webkit-transform;
    transition-property: background-color, box-shadow, transform;
    transition-property: background-color, box-shadow, transform, -webkit-transform;
    font-size: smaller;
    text-align: center;
    border-radius: 32px;
    max-height: 32px;
    min-height: 32px;
}

.nakl-highlight-alter-geburtstage {
    min-width: 32px;
    max-width: 32px;
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
}

span.nakl_navCounter {
    margin-left: 5px;
    margin-right: 8px;
    padding-left: 6px;
    padding-right: 6px;
    min-width: 0;
    font-size: 10px;
}

span.nakl_tabCounter {
    margin-left: 5px;
    padding: 8px;
    min-width: 0;
}

span.nakl_farbKennzeichnung {
    border: 1px dashed rgba(0, 0, 0, 0.87);
}

.nakl_farbKennzeichnungOhneAbstand {
    border: 1px dashed rgba(0, 0, 0, 0.87);
    margin-left: 0 !important;
}

#monatauswahl {
    width: 100%;
    padding-top: 0;
    padding-bottom: 16px;
}

#monatauswahl md-grid-tile {
    font-size: smaller;
    padding: 0 6px;
    text-align: center;
    border-radius: 11px;
    height: 28px;
    line-height: 28px;
    min-width: 0;
}

#monatauswahl #monate {
    padding-left: 16px;
    padding-right: 16px;
}

md-content.monatauswahlGeoeffnet {
    /* Wenn die Monatsauswahl geöffnet wird, muss der gesamte Content weiter nach unten verschoben werden,
        damit die Monatsauswahl nichts überdeckt.
    */
}

@media (min-width: 600px) {
    md-content.monatauswahlGeoeffnet {
        margin-top: 108px;
    }
}

@media (max-width: 599px) {
    md-content.monatauswahlGeoeffnet {
        margin-top: 162px;
    }
}

.AufgeklappteCardAufStartSeite {
    /*gross = gt-sm = (width >= 960px) dann soll IN den Karten gescrollt werden*/
}

@media (min-width: 959px) {
    .AufgeklappteCardAufStartSeite md-list {
        max-height: 460px !important;
    }

    .AufgeklappteCardAufStartSeite .CardAufStartSeiteContent {
        max-height: 400px;
        overflow-y: auto;
    }
}

#willkommenNachricht {
    text-align: center;
}

.startseiteIcons {
    padding-right: 16px;
    padding-left: 0;
}

.nak-abwbearbeitung-label-uhrzeitwerte {
    padding-right: 16px;
    padding-left: 0;
    min-width: 54px;
}

.nak-abwbearbeitung-label-datumwerte {
    position: relative;
    top: 6px;
    padding-right: 0px;
    padding-left: 0;
    min-width: 38px;
}

.nak-gdbearbeitung-label-uhrzeitwerte {
    padding-top: 24px;
    padding-left: 0;
    min-width: 48px;
    margin-left: 3px;
}

.nak-gdbearbeitung-label-datumwert {
    padding-right: 8px;
    padding-left: 0;
    min-width: 36px;
    margin-top: 4px;
    margin-left: 3px;
}

.nakl-abstand-bearbeitung-gdwerte-ohne-inputfeld,
.nakl-abstand-einnahme-belegnummer {
    padding: 8px 0;
}

.nakl-einheitendetails-content {
    padding-bottom: 11px;
}

.nakl-background-transparent {
    background: transparent !important;
}

md-list-item div.nakl-listItem-Text {
    padding: 3px;
}

.nakl-lastDiv-InCard {
    padding-bottom: 1px !important;
}

@media (min-width: 959px) {
    .nakl-einheitendetails-toolbar-menu {
        /* das Menü ist 320px breit*/
        width: calc(100% - 320px) !important;
        left: 320px !important;
    }
}

@media (max-width: 960px) {
    .nakl-einheitendetails-toolbar-menu {
        left: 0px !important;
    }
}

.nakl-einheitendetails-toolbar {
    width: 100%;
}

.nakl-button-in-toolbar {
    background-color: transparent !important;
    border: none !important;
    color: white !important;
    padding: 0 !important;
}

.nakl-button-in-card {
    /* der größere Margin ist wichtig, damit die Icons in der Selben Flucht sind, wie andere Buttons in anderen list items
        wie z.B. in der Einheite Suche wenn der Verlauf unter der Std/Zugeh Gem ist
    */
    margin-right: 30px !important;
}

@media screen and (max-width: 960px) {
    .nakl-entity-content {
        position: absolute;
        top: 180px;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

@media screen and (min-width: 960px) {
    .nakl-entity-content {
        position: absolute;
        top: 180px;
        width: 450px;
        bottom: 0;
        overflow-y: scroll;
    }

    .opfereinnahmenDialog:not(.radient-background):not(.md-default-theme) {
        background: #fafafa !important;
    }

    md-dialog.betreuer-dialog {
        max-width: 480px;
        max-height: 100%;
    }

    .betreuer__content iframe {
        border: 0;
        left: 0;
        position: absolute;
        top: 0;
        height: max(600px, 55vh);
    }

    .betreuer__content {
        height: max(600px, 55vh);
    }
}

@media screen and (max-width: 480px) {
    md-dialog.betreuer-dialog {
        max-width: 350px;
    }

    .betreuer__content iframe {
        width: 350px;
    }
}

@media screen and (max-width: 959px) {
    .opfereinnahmenDialog__content {
        width: unset !important;
        overflow: hidden;
        position: relative;
    }

    .opfereinnahmenDialog__content embed {
        border: 0;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .betreuer__content iframe {
        border: 0;
        left: 0;
        position: absolute;
        top: 0;
        width: 480px;
        height: 600px !important;
    }

    .betreuer__content {
        height: 100vh;
        width: unset !important;
        overflow: hidden;
        position: relative;
    }
}


.betreuer__content iframe {
    border: 0;
    left: 0;
    position: absolute;
    top: 0;
    height: 600px;
}

.betreuer__content md {
    background-color: #0f6fc8;
}

.betreuer__content {
    width: 480px;
    overflow: hidden !important;
}

.custom-dialog-container .mat-dialog-container {
    width: 480px;
}

.opfereinnahmenDialog__content embed {
    height: 100%;
}

.opfereinnahmenDialog__content {
    height: 100dvh;
    overflow: hidden !important;
}

.dateityp-icon {
    margin-right: 24px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

.dateityp-icon img {
    height: 36px;
    width: 36px !important;
    font-size: 36px;
}

md-toolbar {
    z-index: 13;
}

body > md-toolbar {
    position: fixed !important;
    top: 0 !important;
}

md-dialog md-toolbar {
    position: sticky !important;
    position: -webkit-sticky !important;
    /* Sonst hat das Ipad einen mini mini rand oben*/
    top: -0.1px !important;
    z-index: 15 !important;
}

@media (min-width: 959px) {
    md-dialog md-toolbar {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
}

md-toolbar h2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

md-progress-linear {
    z-index: 999999;
    position: fixed;
    top: 0;
}

md-dialog md-progress-linear {
    position: sticky;
    top: 0;
}

@media (max-width: 960px) {
    md-dialog md-progress-linear {
        display: none;
    }
}

@media (min-width: 959px) {
    body.dialogOpened .md-progress-linear-footer {
        display: none;
    }
}

/* das Menü ist 320px breit*/
@media (min-width: 959px) {
    body > md-content:not(#loginContent),
    body > md-toolbar {
        width: calc(100% - 320px) !important;
        margin-left: 320px;
    }
}

body:not(.dialogOpened) * {
    -webkit-overflow-scrolling: touch !important;
}

.md-dialog-focus-trap,
body.dialogOpened {
    -webkit-overflow-scrolling: auto !important;
}

@media (min-width: 959px) {
    .md-dialog-focus-trap,
    body.dialogOpened {
        overflow: hidden !important;
    }
}

md-dialog {
    -webkit-overflow-scrolling: touch !important;
}

.appleFix {
    /* Traurig aber wahr: das Ipad mag manchmal nicht touch von vornherin gesetzt zu haben, daher wird es nach dem drehen auf auto gesetzt und kurz danac wieder auf touch*/
    -webkit-overflow-scrolling: auto !important;
}

body > md-content {
    width: 100% !important;
    height: 100% !important;
}

body > md-content > div.radient-background {
    /*min-height: 100%; - Toolbarhöhe   -  sonst endet der Hintergrund mitten auf der seite bei wenic content*/
    min-height: calc(100% - 64px);
    /* das reicht, damit beim Iphone die letzte Kachel noch mit in den "hintergrund" passt, sonst gibt es einen dünnen (weißen / hintegrund) Streifen*/
    padding-bottom: 0.1px;
}

@media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
    body > md-content > div.radient-background {
        min-height: calc(100% - 56px);
    }
}

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
    body > md-content > div.radient-background {
        min-height: calc(100% - 48px);
    }
}

body:not(.dialogOpened) > md-content:not(#loginContent) {
    /* Sinst muckt das Iphone mit der Toolbar des browsers (ja auch das X muss Visible SEIN !!!!)*/
    overflow-x: visible !important;
    overflow-y: visible !important;
}

body > md-content:not(.withOwnToolbar):not(#loginContent) > div:not(.kacheln) {
    /*Offset der Toolbar, da diese je nach auflösung größer bzw kleiner ist -> https://stackoverflow.com/questions/38164716/angular-material-toolbar-height-issue*/
    padding-top: 64px;
    /*offsetLarge*/
}

@media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
    body > md-content:not(.withOwnToolbar):not(#loginContent) > div:not(.kacheln) {
        padding-top: 56px;
        /*offsetSmall*/
    }
}

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
    body > md-content:not(.withOwnToolbar):not(#loginContent) > div:not(.kacheln) {
        padding-top: 48px;
        /*offsetMedium*/
    }
}

body > md-content:not(.withOwnToolbar):not(#loginContent) > div.kacheln {
    /*Offset der Toolbar, da diese je nach auflösung größer bzw kleiner ist -> https://stackoverflow.com/questions/38164716/angular-material-toolbar-height-issue*/
    margin-top: 64px !important;
    /*offsetLarge*/
}

@media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
    body > md-content:not(.withOwnToolbar):not(#loginContent) > div.kacheln {
        margin-top: 56px !important;
        /*offsetSmall*/
    }
}

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
    body > md-content:not(.withOwnToolbar):not(#loginContent) > div.kacheln {
        margin-top: 48px !important;
        /*offsetMedium*/
    }
}

#loginContent > div {
    padding: 16px;
}

.std-termin-container {
    padding-top: 0 !important;
}

.std-termin-container .std-termin .std-termin-zeit {
    padding-right: 16px;
}

.std-termin-container .std-termin .std-termin-zeit div {
    width: 50px;
}

.std-termin-container .std-termin .std-termin-zeit p {
    font-size: 25px !important;
    line-height: 25px;
    margin-top: 15px;
    margin-bottom: 0;
}

.std-termin-container .std-termin .std-termin-beschreibung {
    margin-top: 4px;
}

.std-termin-container .std-termin .std-termin-beschreibung md-list-item h3 {
    white-space: normal;
}

.std-termin-container .std-termin .std-termin-beschreibung md-list-item h4,
.std-termin-container .std-termin .std-termin-beschreibung md-list-item p {
    color: grey !important;
}

/* Confirm Dialog: Hier darf der Inhalt umbrechen*/
.md-dialog-content > .md-title {
    overflow: unset;
    white-space: unset;
    text-overflow: unset;
    display: unset;
    padding-top: unset;
}

.md-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: unset;
    padding-top: 15px;
}

.md-subheader {
    background-color: transparent;
}

.fixed-maxheight-128px {
    max-height: 128px !important;
}

.fixed-maxheight-88px {
    max-height: 88px !important;
}

md-tabs-wrapper {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.margin-listitem-in-card {
    margin: 0 16px;
}

.gdeinnahme {
    font-size: 25px !important;
    font-weight: bold;
}

#heutigeTermine .padding-keine-termine,
#tuaBearbeiterTermine .padding-keine-termine,
#favorisierteMitglieder .padding-keine-favorisierten-mitglieder,
#Seelsorger .padding-keine-seelsorger,
#WeitereAmtstraeger .padding-keine-amtsbeauftragungen,
#letzteAnmeldung .letzteAnmeldung,
.keineDatenInCard {
    margin-top: -4px;
    padding-top: 0;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
}

.padding-goto-details-icon {
    margin-left: 16px;
}

.gespeicherte-einheitensuche > md-card-content,
.gespeicherte-mitgliedersuche > md-card-content {
    padding-bottom: 24px;
}

.ohne-padding {
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

md-card .maxListHoehe {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#heutigeTermine .hinweis-card-actions,
#favorisierteMitglieder .hinweis-card-actions,
#geburtstagsListe .hinweis-card-actions,
#tuaBearbeiterTermine .hinweis-card-actions,
#Aemter .hinweis-card-actions,
#Untereinheiten .hinweis-card-actions,
#nachrichtenHinweise .hinweis-card-actions {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.010em;
    margin-left: 8px;
}

#Mitgliedersuchen md-grid-tile {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.010em;
    line-height: 36px;
}

#Mitgliedersuchen md-grid-tile .md-button {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#einnahmeWert {
    max-height: 74px;
}

#einnahmeWaehrung {
    min-width: 160px;
}

.DokumListItemNeuUndUngelesen h4 {
    font-weight: bold !important;
}

.rotateLeft {
    transition: transform 0.3s;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.rotateStart {
    transition: transform 0.3s;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.empfaengerMaximized md-chip,
.empfaengerMinimized md-chip,
.empfaengerMaximized md-chip md-icon,
.empfaengerMinimized md-chip md-icon {
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
}

.md-autocomplete-suggestions-container li {
    height: 60px !important;
    line-height: 60px !important;
    padding: 0 !important;
}

.md-autocomplete-suggestions-container .md-list-item-text p {
    color: rgba(0, 0, 0, 0.54) !important;
}

.empfaengerMinimized {
    /*Chips als normalen Text darstellen*/
}

.empfaengerMinimized md-chip,
.empfaengerMinimized md-chip.md-focused {
    font-size: 12px;
    letter-spacing: 0.020em;
    background-color: unset !important;
    color: #5793c9 !important;
    height: 24px;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 4px !important;
}

.empfaengerMinimized md-chip md-icon,
.empfaengerMinimized md-chip.md-focused md-icon {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.empfaengerMinimized md-chip md-chips-wrap,
.empfaengerMinimized md-chip.md-focused md-chips-wrap {
    padding: 0;
}

.empfaengerMinimized .md-chip-input-container div {
    display: none !important;
}

md-chips-wrap {
    /* Notwendig, da sonst bei leeren Chips die trennlinie nach oben orientiert*/
    min-height: 27px;
}

.md-subheader {
    font-weight: 600 !important;
}

#heutigeGeburtstage md-divider,
#vorherigeGeburtstage md-divider,
#spaetereGeburtstage md-divider,
#Seelsorger md-divider,
#eingeladeneGemeinden md-divider,
#lieder md-divider,
#bemerkung md-divider,
#handlungen md-divider,
#anwesende md-divider {
    position: relative !important;
    margin-right: 16px;
}

#Seelsorger md-divider,
#eingeladeneGemeinden md-divider,
#lieder md-divider,
#bemerkung md-divider,
#handlungen md-divider,
#anwesende md-divider,
#heutigeGeburtstage md-divider,
#vorherigeGeburtstage md-divider,
#spaetereGeburtstage md-divider {
    margin-left: 16px;
}

[md-swipe-left],
[md-swipe-right] {
    touch-action: pan-y;
}

.move-to-left-60px {
    transform: translateX(-60px);
}

.move-to-left-80px {
    transform: translateX(-80px);
}

.move-to-left-80px .move-to-left-on-card-on-swipe {
    transition: transform 0.3s ease-out !important;
    transform: translateX(80px) !important;
}

.move-to-left-on-card-on-swipe {
    transition: transform 0.3s ease-out;
    transform: translateX(32px);
}

.swipable-list-item {
    transition: transform 0.3s ease-out;
    background-color: white;
    z-index: 12;
    box-shadow: 20px 0px 10px -10px rgba(0, 0, 0, 0.1);
}

md-dialog .swipable-list-item {
    background-color: #fafafa;
}

.deletable-list-item {
    transition: transform 0.6s ease-out;
    transform-origin: top;
}

.einnahme-list-item.deleting {
    padding-right: 0px !important;
}

.einnahme-list-item {
    transition: transform 0.3s ease-out;
    background-color: white;
    z-index: 12;
}

.einnahme-list-item md-divider {
    transition: none !important;
    transform: none !important;
    left: 16px;
    width: calc(100% - 32px);
}

.einnahme-loeschen {
    height: 48px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px inset;
}

.einnahme-loeschen-button {
    width: 80px;
    height: 48px;
}

.einnahme-loeschen-button md-icon {
    fill: white;
}

.nachricht-loeschen {
    position: fixed;
    left: 0;
    right: 0;
    height: 88px;
    z-index: 11;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px inset;
}

.einladung-loeschen,
.anhang-loeschen {
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 11;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px inset;
}

.nachricht-loeschen-button {
    position: fixed;
    right: 0;
    width: 60px;
    height: 88px;
}

.einladung-loeschen-button,
.anhang-loeschen-button {
    position: absolute;
    right: 0;
    width: 60px;
    height: 70px;
}

.einladung-loeschen-button md-icon,
.nachricht-loeschen-button md-icon,
.anhang-loeschen-button md-icon {
    fill: white;
}

.einladung-loeschen-deaktiviert.line.firstLine {
    fill: red;
}

.einladung-loeschen-deaktiviert.line.lastLine {
    fill: yellow;
}

#einstellungen md-slider,
#einstellungen md-select {
    margin-right: 40px;
}

.nakl-abstand-top-0 {
    margin-top: 0;
}

.nakl-abstand-top-8px {
    margin-top: 8px;
}

.nakl-abstand-links-24px, .eingerueckt {
    margin-left: 24px;
}

.nakl-abstand-links-72px, .eingerueckt-lang {
    margin-left: 72px;
}

#einstellungen .md-subheader {
    margin-left: 56px;
}

#einstellungen md-switch {
    padding-right: 8px;
}

#einstellungen md-switch,
#einstellungen md-list-item {
    margin-right: 16px;
}

#einstellungen p {
    white-space: normal !important;
}

#stdEinhStartseite {
    word-break: break-word;
}

#stdEinhStartseite .md-title {
    padding-top: 8px;
    display: table-cell;
    white-space: unset;
}

#stdEinhStartseite .md-subhead {
    margin-top: 0;
}

.MitgliedAnzeigeBlue {
    color: #0f6fc8 !important;
}

.MitgliedAnzeigeGrey {
    color: #90a4ae !important;
}

.MitgliedAnzeigeStrikeThrough {
    text-decoration: line-through !important;
    color: #90a4ae !important;
}

.favorisierte-suche {
    margin: 0 4px !important;
}

#einnahmenContainer {
    margin: 0 16px 8px 16px;
}

#anwesendenZahlenContainer {
    margin: 0 16px 20px 16px;
}

#anwesendenZahlenContainer div {
    min-width: 100%;
}

#anwesendenZahlenContainer #perTelefon {
    padding-top: 1em;
}

#anwesendenZahlenContainer .gesamtZahl {
    min-width: 33px;
    text-align: end;
    padding-right: 16px;
}

#anwesendenZahlenContainer .weitereZahlen {
    min-width: 29px;
    text-align: end;
    padding-right: 16px;
}

.md-fab-fixed {
    position: fixed !important;
}

.md-fab:disabled {
    box-shadow: none;
}

.md-fab:enabled {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12) !important;
}

.md-fab:hover:enabled {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12) !important;
}

.hint {
    left: 2px;
    right: auto;
    bottom: 7px;
    font-size: 12px;
    line-height: 14px;
    color: grey;
    padding-top: 35px !important;
}

.OverflowerEllipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

#mitdienende {
    padding: 0;
}

.md-chip-input-container {
    /* Chips sollen immer über die gesamte BReite gehen, so ist auch die Dropdown automatisch groß*/
    width: 100%;
}

md-select#einladungsartenEdit > md-select-value {
    padding-left: 0;
}

md-select#einladungsartenEdit > md-select-value .md-text {
    /*Notwendig da hier ein Icon drin ist, dass höher ist als der Text, mit dem maring ist der Abstand vom text zu Lienie dann
      wieder gleich wie in den benutzereinstellungen */
    display: block;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icons in DropDowns grau belassen, wenn das Dropdown den Fokus hat */
md-select:not([disabled]):focus .md-select-value md-icon {
    color: rgba(0, 0, 0, 0.54);
}

/* Workaround für Auswahl Weiterleitungsemailadressen*/
md-select-menu.md-default-theme md-content md-option[selected],
md-select-menu md-content md-option[selected] {
    color: #6fbaff !important;
}

md-backdrop.md-sidenav-backdrop {
    z-index: 14;
    position: fixed;
}

md-backdrop.md-select-backdrop {
    opacity: 0 !important;
}

.nak-geburtstage-filter {
    flex-direction: column;
}

.nak-geburtstage-filter-einrueckung {
    margin-left: 28px !important;
}

.nak-geburtstage-filter-Titel {
    margin-bottom: 14px;
}

.filter-neben-einander {
    display: flex;
    flex-wrap: wrap;
    gap: 0 72px;
}

.einheiten-ebene-auswahl {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 24px;
}

.nak-geburtstage-filter-ebene {
    margin: 0;
}

.label, .key {
    flex-basis: 50%;
}

.label {
    height: 29px;
    line-height: 29px;
    white-space: nowrap;
}

.einstellungen-row {
    display: flex;
}

.einstellungen_first-column {
    flex-basis: 72px;
    flex-shrink: 0;
}

.einstellungen_aktive_amtstraeger {
    display: flex;
    flex-direction: column;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #63a5e3 #ddefff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 13px;
}

*::-webkit-scrollbar-track {
    background: #ddefff;
}

*::-webkit-scrollbar-thumb {
    background-color: #63a5e3;
    border-radius: 2px;
    border: 2px solid #ddefff;
}

.betrag-bestaetigung {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

.betrag-bestaetigung header {
    height: 64px;
    display: flex;
    justify-content: space-around;
    background-color: #5793c9;
    color: white
}

.betrag-bestaetigung header div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.betrag-bestaetigung h1 {
    margin: 0;
}

.betrag-bestaetigung__form {
    display: flex;
    justify-content: space-around;
}

.betrag-bestaetigung__form__content {
    min-width: 400px;
    border-spacing: 20px;
}

.betrag-bestaetigung__form__actions {
    display: flex;
    justify-content: space-between;
}

.betrag-bestaetigung__form__actions__action {
    border: none;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #5793c9;
    min-width: 64px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.betrag-bestaetigung__form__actions__action.action-cancel {
    background-color: #90a4ae;
}

.betrag-bestaetigung__form__actions__action:hover {
    opacity: 50%;
}

.betrag-bestaetigung__form__content tr > td:first-child {
    text-align: right;
}

md-list-item .daten-container {
    display: flex;
    align-items: start;
    flex-direction: column;
    padding: 10px;
    text-transform: none;
}

.mitgliedlist-daten-container {
    display: flex;
    justify-content: space-between;
}

.kontakt-list-item-container {
    padding: 0 10px !important;
}

.mitgliedlist-item-container {
    padding: 0 0 !important;
}

.md-list-item-text .betreuer-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    text-transform: none;
    padding-left: 10px;
    align-items: center;
}

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