body {
    position: relative;
}

body a {
    /* entfaellt wegen chat Nachricht anna vom 3.8.2022 - alles wie auf Seite 1 vom Design */
    /* text-decoration: none;*/

}

body a:active {
    text-decoration: none;
}

.flash, alert.flash, body .alert{
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 7px;
}

.flash-info {
    background-color: #d1ecf1;
    border: 1px solid #82b0b7;
    color: #0c5460;
    max-height: 50vh;
    overflow: auto;
}

.flash-danger {
    /*background-color: var(--ayred);*/
    background-color: #f8d7da;
    border: 1px solid #c38c91;
    color: #721c24;
}

.dbi-councelorcount {
    display: none;
    opacity: 0.8;
    font-size: 18px;
    line-height: 18px;
}

.mobile .dbi-councelorcount {
    font-size: 12px;
    line-height: 12px;
}

input.form-checkbox {
    width: auto;
    margin-right: 10px;
}

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

.db-date {
    color: var(--rahmenfarbe);
    font-size: 0.8em;
}

.db-topmenu-links a {
    margin-left: 15px;
}

.db-tinymce {
    height: 500px;
}

.form-group {
    padding-top: 20px;
}


form.db-terminformular .db-no-bottom-margin {
    margin-bottom: 0px;
}


form.db-terminformular .form-group .db-radiogroup-radioicons label {
    margin-bottom: 0px;
}


.form-group.db-fileuploadform {
    padding-top: 0;
}

.db-hide {
    display: none;
}


/*.db-departmentSelected {*/
/*    display:none;*/
/*}*/
/*.db-departmentSelection:checked ~ .db-departmentSelected {*/
/*    display:block;*/
/*}*/


.db-toggleShow {
    display: block;
}

.db-toggleHide {
    display: none;
}


.db-mail-message-outer.db-shortenedMessage {
    overflow: hidden;
    max-height: 55rem;
    margin-bottom: 5px;
}

body.mobile .db-mail-message-outer.db-shortenedMessage {
    max-height: 44rem;
    margin-bottom: 10px;
}

.db-shortenedMessage .db-link.db-shortenedMessage {
    padding-top: 20px;
}

.db-shortenedMessage .db-mail-message-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



.db-fullMessage {
    padding-bottom: 20px;
}


.dbi-message.db-link.db-shortenedMessage {
    display: block;
}

.dbi-message.db-link.db-fullMessage {
    display: none;
}


span[slot="heading-right"] > img {
    margin-top: -10px;
    margin-left: 10px;
}

div[slot="slot-right"] > h2 > img {
    margin-top: -10px;
    margin-left: 10px;
}

.form-group > label > img.helpInfoSymbol {
    margin-top: -8px;
}

.form-check > label.form-check-label {
    vertical-align: bottom;
    line-height: 20rem;
}

.helpInfoSymbolTooltip {
    max-width: 250px;
    position: absolute;
    z-index: 99999;
    border: solid 1px var(--rahmenfarbe);
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 0.8em;
    padding: 3px 8px;

    position: absolute;
    background-color: #EDF0F4;
    color: #222E3E;
    font-size: 16rem;
    line-height: 21rem;
    border: 1px solid #EDF0F4;
    border-radius: 5px;
    padding: 6px 14px;
    box-shadow: 0px 3px 6px #222E3E27;
}

.flashoverlayAll {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba(0, 0, 0, 0.70);
}

.flashoverlay {
    position: absolute;
    top: 200px;
    right: 20%;
    left: 20%;
    min-height: 200px;
    max-height: 60vh;
    overflow: auto;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 1);
    border: solid 2px var(--rahmenfarbe);
    border-radius: 28px;
    padding: 50px;
    text-align: center;
}

@media (max-width: 500px) {
    .flashoverlay {
        top: 50px;
        right: 5%;
        left: 5%;
        min-height: 200px;
    }
}

/*
.flashoverlay button {
    position: absolute;
    bottom: 40px;
    right: 50px;
}
*/
.db-message-draftlabel {
    float: right;
    color: var(--linkfarbe);
}


.developInfo {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    background-color: rgba(200, 200, 200, 0.9);
    font-size: 0.8em;
}

.mail-bubble-folded-message {
    border: solid 1px var(--rahmenfarbe-hell);
    border-radius: 15px;
    padding: 20px;
    background-color: var(--rahmenfarbe-hell);
}


.db-mail-inner-div {
    border: solid 1px var(--rahmenfarbe);
    border-radius: 15px;
    padding: 20px;
}


.db-mailanswer {
    /*   display:none;*/
}


.db-stream-pagination {
    padding: 20px;
    text-align: center;
}

.db-fileattachments {
    display: none;
}

.db-mail-empfaenger {
    max-width: 300px;
}

.db-mail-no-stream-block {
    text-align: center;
    margin-top: 65px;
}

.db-stream-overview-header ~ .dbi-streams-list .db-mail-no-stream-block {
    margin-top: 100px;
}


.db-bottom-margin {
    height: 50px;
}


.db-head-margin {
    height: 200px;
}

@media (max-width: 1200px) {
    .db-head-margin {
        height: 100px;
    }
}


.db-newreq-mail {
    border: solid 1px var(--rahmenfarbe);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
}

.db-newreq-dep {
    text-align: right;
    height: 0;
    position: relative;
    top: -10px;
}

.db-newreq-body {
    max-height: 50px;
    overflow: hidden;
    margin-bottom: 5px;
}

.db-newreq-list-user {
    text-align: center;
}

.db-userimage {
    line-height: 0;
}

body.desktop .db-userimage {
    margin-bottom: 10px;
}

.db-user-profile-image-special {
    width: 50rem;
    height: 50rem;
    margin-top: 0;
    margin-right: 0;
    border: solid 2px var(--rahmenfarbe);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.db-user-profile-image-special > img {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 50rem;
    height: 50rem;
    object-fit: cover;
}


.db-mpb-bubble > img {
    height: 48px;
    margin-top: 11px;
}

.db-person-box .db-user-profile-image-special {
    margin-right: 15rem;
}

.db-newreq-dep-title {
    text-align: right;
    height: 0;
    position: relative;
    top: -10px;
}

.db-newreq-client {
    background-color: var(--rahmenfarbe-hell);
    border-radius: 15px;
    padding: 15px;
}

.db-newreq-fullmsg {
    border: solid 1px var(--rahmenfarbe);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
}

.db-newreq-sender {
    text-align: center;

}

.db-newreq-msginner {
    border: solid 1px var(--rahmenfarbe);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
}

.db-newreq-links {
    text-align: right;

}

.db-unavailableMessage {
    border: solid 1px red;
    padding: 10px;
    margin: 10px 0;
}


.db-stream-new-message-box {
    display: none;

}

.dbi-folded {
    display: none;
}

.dbi-eingeklappte {
    background-color: var(--rahmenfarbe-hell);
    border-radius: 30px;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: inline-block;
}

.db-systemmessage-in-stream-parent {
    display: flex;
    align-items: start;
    gap: 13px;
    justify-content: center;
    margin-bottom: 30px;
}

.db-systemmessage-in-stream {
    background-color: var(--rahmenfarbe-hell);
    border-radius: 30px;
    padding: 21px 35px;
    display: inline-block;
    flex-grow: 0;
    max-width: 723px;

    word-wrap:break-word;

}

.db-systemmessage-in-stream span {
    color: var(--schriftfarbe-hell);
}

@media screen and (max-width: 992px) {
    .db-systemmessage-in-stream-parent {
        justify-content: space-between;
        margin-bottom: unset;
    }
    .db-systemmessage-in-stream {
        flex-grow: 1;
        max-width: 50%;
    }
}


.db-systemmessage-in-stream-parent img {
    width: 44px;
    height: auto;
    margin-left: 0;
    margin-top: 1px;
}

.db-output-wysiwyg-text ul, .db-output-wysiwyg-text ol {
    padding-top: 20px;
    padding-left: revert;
}

.db-output-wysiwyg-text li {
    padding-top: 10px;

}


.db-mailinner-attachment-link {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
}

/*
.db-mailinner-attachment-link:before {
    display: inline-block;
    content: ' ';
    background-image: url('/resources/icons/Download.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    margin-right: 8px;
    margin-top: 5px;

}
*/

.underline {
    text-decoration: underline;
}

.flashmessages {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 180px;
    left: 50px;
    right: 50px;
}

.flashmsgactive {
    display: block;
}

.dbi-close-flashmessage {
    float: right;
    padding: 10px;
    color: #666666;
    position:relative;
    top: -35px;
}

.db-below-crudlist-info {
    text-align: center;
}

.db-below-crudlist-info span {
    padding: 5px 10px;
    display: inline-block;
    border-left: solid 1px silver;
    border-bottom: solid 1px silver;
    border-right: solid 1px silver;

}

.dbi-crud-count-page-total {
    /*height:0;
    text-align:right;
    padding-right:20px;

     */
}

input[type=checkbox] {
    width: auto;
}

*::placeholder {
    color: var(--rahmenfarbe) !important;
}

select.focusleft:invalid, input.focusleft:invalid, textarea.focusleft:invalid {
    border-color: red !important;
    /*
    background-image: linear-gradient(to right, lightcoral, lightcoral);
    color: white;

     */
}

.dbi-evaluation-field:invalid {
    border-color: red !important;
}

.ccPathChange, .depPathChange {
    font-size: 0.8em;
    position: relative;
    /*top:-10px;*/
    color: red;
}

.db-formbslogo img {
    max-height: 50px !important;
}

.db-formbsbgimage img {
    max-width: 150px !important;
}

.dbi-message-expand {
    display: none;
}

.db-redbubble {
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    left: -20px;
    top: -15px;
}

.db-redbubble-dot {
    width: 8px;
    height: 8px;
    background-color: var(--farbe-1);
    border-radius: 50%;
}

.db-bluebubble-dot {
    width: 8px;
    height: 8px;
    background-color: var(--farbe-2);
    border-radius: 50%;
}


.db-bubble-hide {
    display: none;
}

.db-forminput-below-infotext {
    font-size: 0.8em;
    position: relative;
    /*    top: -27px;*/
    left: 25px;
}

.db-mpb-username {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-mpb-userrole {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20rem;
    line-height: 25rem;
}

body.mobile .db-mpb-userrole {
    font-size: 16rem;
    line-height: 20rem;
}


.db-suib-username {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-header-username {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18rem;
    margin-top: 3px;
}

body.intern {
    background-color: var(--internal-background-color);

}

.dbi-notice-text {
    white-space: pre-line;
}

.db-userimagepreview {
    border: solid 1px gray;
    border-radius: 50%;
    overflow: hidden;
}

/* hier rausgenommen, weil es im tinymce Probleme mit dem Dropdown fuer link target gab
.tox .tox-dialog-wrap, .tox.tox-tinymce-aux {
    z-index: 50011 !important;
}*/

.multilangtext .ml-wahl {
    background-color: #efefef;
    padding: 1px 4px;
    cursor: pointer;
}

.multilangtext .ml-wahl.ml-active {
    font-weight: bold;
    color: white;
    background-color: gray;
}

.dbi-stream-mails {
    min-height: 360px;
}


body.mobile .dbi-stream-mails {
    min-height: 300px;
}


.db-emptyresult {
    text-align: center;
    padding: 50px;
    /*min-height: 500px;*/
    color: var(--schriftfarbe-hell);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

body.mobile .db-emptyresult {
    padding: 20px;
    min-height: 300px;
}

form ~ div > div.db-emptyresult {
    min-height: auto;
}

.db-emptyresult .db-emptyimage {
    flex-grow: 13;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.db-emptyresult img {
    max-height: 130px;
}


/* wuerde anderen title hover anzeigen, aber der originale kommt trotzdem */
/*
*[title]:hover:after {
    content: attr(title);
    font-style: italic;
}
*/

.db-message-row.db-systemmessage-in-stream-parent {
    margin-top: 30px;
}


.db-admin-subpath .db-active {
    font-weight: bold;
}


.dbi-cat img ~ div {
    margin-left: 5px;
}
.dbi-cat img.visible-when-cat-active {
    display: none;
}
.dbi-cat img.invisible-when-cat-active {
    display: block;
}

.db-cat-active img.visible-when-cat-active {
    display: block;
}
.db-cat-active img.invisible-when-cat-active {
    display: none;
}

.dbi-input-info {
    width: 0px;
    display: inline;
    position:relative;
    right: 44px;
    top:44px;
    cursor: pointer;
    float: right;
}

body.mobile .dbi-input-info {
    top:38px;
}

.db-paginate-page {
    cursor: pointer;
}

.dbi-open-appointment-detail {
    cursor: pointer;
}

.tox.tox-tinymce.tox-fullscreen {
    background-color: white !important;
    z-index: 12000 !important;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}


.dbi-app-bookabletime {
    display: none;
}

.db-dot {
    border-radius: 50%;
    background-color: gray;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    position:relative;
    top: -10px;
}

.db-dot-wichtig {
    background-color: #dc606e;
}

.db-dot-followup {
    background-color: #f2ac5b;
}

.db-dot-kategorie {
    background-color: #6cbc91;
}

.db-register-evaluation {
    display: none;
}

.dbi-ev-felder .dbi-ev-field-block:first-child .dbi-ev-move-field-up {
    display:none;
}

.dbi-ev-felder .dbi-ev-field-block:last-child .dbi-ev-move-field-down {
    display:none;
}

.dbi-evaluation-block-title {
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: silver;
    border-radius: 15px;
}

.dbi-evaluation-block-title.dbi-invalid-block {
    border: 2px solid red;
}


.db-evaluationanonymous {
    display: inline-block;
    background-color: #767676;
    color: white;
    border-radius: 10px;
    font-size: 0.8em;
    padding: 2px 4px;
}

.db-statistics-box {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
    width: 31%;
    float: left;
    padding: 10px;
    margin-bottom: 30px;
    margin-right: 30px;
    border: solid 1px #efefef;
    height: 410px;
}


.db-break-long-lines {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    text-wrap:avoid;
}


img.db-sponsortlogo {
    max-height: 80px;
    max-width: 80vw;
    margin: 0 10px 10px 0;
}
/*
img.db-sponsortlogo {
    filter: grayscale(100%);
    opacity: 0.6;
    max-height: 80px;
    margin: 0 10px 10px 0;
}

img.db-sponsortlogo:hover {
    filter: grayscale(0%);
    opacity: 1;
}
*/

/*img.db-sponsortlogo:hover {*/
/*    transform: scale(1.06);*/
/*    transition: .3s ease all;*/
/*}*/

.db-sponsor-block {
    text-align: center;
    float:left;
    margin-bottom: 20px;

}
.db-sponsor-block-1 {
    width: 100%;
}
.db-sponsor-block-2 {
    width: 50%;
}
.db-sponsor-block-3 {
    width: 33%;
}
.db-sponsor-block-4 {
    width: 25%;
}
.db-sponsor-block-5 {
    width: 20%;
}
.db-sponsor-block-6 {
    width: 16.6%;
}

@media (max-width: 500px) {
    .db-sponsor-block-2 {
        width: 100%;
    }
    .db-sponsor-block-3 {
        width: 100%;
    }
    .db-sponsor-block-4 {
        width: 50%;
    }
    .db-sponsor-block-5 {
        width: 50%;
    }
    .db-sponsor-block-6 {
        width: 50%;
    }
}


/* Sponsoren HoverEffekt */

.sponsorcolumn {
    margin: 15px 15px 0;
    padding: 0;
}
.sponsorcolumn:last-child {
    padding-bottom: 60px;
}
.sponsorcolumn::after {
    content: '';
    clear: both;
    display: block;
}
.sponsorcolumn div {
    position: relative;
    float: left;
    /*width: 300px;*/
    /*height: 200px;*/
    margin: 0 0 0 25px;
    padding: 0;
}
.sponsorcolumn div:first-child {
    margin-left: 0;
}
.sponsorcolumn div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    /*width: 300px;*/
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 18rem;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure.sponsor {
    /*width: 300px;*/
    /*height: 200px;*/
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure.sponsor:hover+span {
    bottom: -36px;
    opacity: 1;
}

/* Flashing */
.hover13 figure.sponsor:hover img {
    opacity: 1;
    -webkit-animation: flash 1.8s;
    animation: flash 1.8s;
}
@-webkit-keyframes flash {
    0% {
        opacity: .6;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .6;
    }
    100% {
        opacity: 1;
    }
}

.db-flexselect-option.disabled{
    opacity: 0.5;
    pointer-events: none;
}

.db-hide-on-empty {
    display: none;
}

.dbi-draft-notice-txt{
    background-color: #edf0f4;
    border-radius: 20px;
    padding-left: 10px;
    padding-top: 10px;
    /*margin-left: 53px; !*25px;*!*/
    margin-bottom: 5px;
}

.dbi-inline-draft-notice {
    display: none;
}

/* Stil für den roten Punkt */
.recording-dot-outer {
    border: solid 1px #dd2e44;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 4px;
}
.recording-dot {
    width: 20px;
    height: 20px;
    background-color: #dd2e44;
    border-radius: 50%;
    /* Animation zum Blinken */
    animation: blink 2s infinite;
    display: inline-block;
}

/* Animation */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

/* ********************************************************** */

/* Custom Audio Player
----------------------------- */

.audioplayer2 {
    margin-bottom: 15px;
}

.audio {
    --primary: var(--audioplayer);
    --progress-bg: rgba(255, 255, 255, 0.2);
    --progress-before-width: 0%;
    --volume-before-width: 75%;
    --buffered-width: 0%;
    background-color: var(--audioplayer);
    border-radius: 5px;
    color: white;
    padding: 10px 15px 5px 15px;
    position: relative;
    width: 100%;
    max-width: 660px;
    @media (min-width: 420px) {
        padding: 10px 15px;
    }
}
.audio__controls {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.audio__btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: .1s;
    svg {
        color: white;
        display: block;
    }
}
.audio__btn--back,
.audio__btn--forward {
    padding: 5px;
    opacity: .75;
    &:hover, &:focus {
        opacity: 1;
    }
}
.audio__btn--mute {
    opacity: .75;
    @media (min-width: 420px) {
        margin-left: auto;
    }
    &:hover, &:focus {
        opacity: 1;
    }
    &.is-muted {
        svg {
            opacity: .5;
        }
    }
}
.audio__btn--play {
    &:hover, &:focus {
        transform: scale(1.1);
    }
    &.is-paused {
        .pause-icon {
            display: none;
        }
        .play-icon {
            display: block;
        }
    }
    .pause-icon {
        display: block;
    }
    .play-icon {
        display: none;
    }
}
.audio__time {
    color: white;
    display: flex;
    margin: 0 15px;
    > * {
        margin: 0 5px;
    }
}

/* Range Inputs
----------------------------- */
.range-container {
    position: relative;
    width: 100%;
    &.range-container--volume {
        margin-left: 10px;
        width: 50px;
    }
}
.range {
    background-color: var(--audioplayer);
    position: relative;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 12px;
    float: left;
    outline: none;
}

.range--progress::before {
    width: var(--progress-before-width);
}
.range--volume {
    + .range-current-value {
        width: var(--volume-before-width);
    }
    &::before {
        width: var(--volume-before-width);
        border-radius: 4px;
    }
}
.range-current-value {
    position: absolute;
    pointer-events: none;
    content: "";
    top: 3px;
    left: 0;
    width: var(--progress-before-width);
    height: 6px;
    border-radius: 4px;
    background-color: white;
}

.range::-webkit-slider-runnable-track {
    background: var(--progress-bg);
    border-radius: 4px;
}
.range::-moz-range-track {
    background: var(--progress-bg);
    border-radius: 4px;
}
.range::-ms-fill-upper {
    background: var(--progress-bg);
    border-radius: 4px;
}

.range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
}
.range::-moz-range-track {
    width: 100%;
    height: 6px;
}
.range::-ms-track {
    width: 100%;
    height: 6px;
}

.range::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 2px solid var(--audioplayer);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
    margin: -4px 0 0 0;
    z-index: 30;
}

.range::-moz-range-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 2px solid var(--audioplayer);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
}
.range::-ms-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 2px solid var(--audioplayer);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
}

.range:active::-webkit-slider-thumb {
    background-color: white;
    transform: scale(1.25);
}
.range:active::-moz-range-thumb {
    background-color: white;
    transform: scale(1.25);
}
.range:active::-ms-thumb {
    background-color: white;
    transform: scale(1.25);
}

.range::-moz-range-progress {
    background-color: white;
}
.range::-moz-focus-outer {
    border: 0;
}
.range::-ms-track {
    background: transparent;
    border: solid transparent;
    color: transparent;
}
.range::-ms-fill-lower {
    background-color: var(--audioplayer)var(--audioplayer);
}


.range--progress:hover::-webkit-slider-thumb,
.range--progress:focus::-webkit-slider-thumb {
       transform: scale(1.25);
}
.range--progress:hover::-moz-range-thumb,
.range--progress:focus::-moz-range-thumb {
    transform: scale(1.25);
}
.range--progress:hover::-ms-thumb,
.range--progress:focus::-ms-thumb {
    transform: scale(1.25);
}
.range--volume::-webkit-slider-thumb {
    transform: scale(0);
}
.range--volume::-moz-range-thumb {
    transform: scale(0);
}
.range--volume::-ms-thumb {
    transform: scale(0);
}
.range--volume:hover::-webkit-slider-thumb,
.range--volume:focus::-webkit-slider-thumb {
    transform: scale(1);
}
.range--volume:hover::-moz-range-thumb,
.range--volume:focus::-moz-range-thumb {
    transform: scale(1);
}
.range--volume:hover::-ms-thumb,
.range--volume:focus::-ms-thumb {
    transform: scale(1);
}

input.range--progress, input.range--volume {
    border: 0 !important;
}

.db-cursor-pointer {
    cursor: pointer;
}

.db-dateivorlagen-items {
    background-color: white;
    position:absolute;
    border: var(--rahmenfarbe) solid 2px;
    border-radius: 28px;
    overflow: auto;
    max-height: 200px;
    z-index: 999;
}

.db-dateivorlagen-items .dbi-dateivorlagen-item {
    padding: 7px 20px 7px 30px;
    border-bottom: 2px solid var(--rahmenfarbe);
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.db-dateivorlagen-items .dbi-dateivorlage-tag-title {
    padding: 7px 20px;
    border-bottom: 2px solid var(--rahmenfarbe);
    cursor: pointer;
    white-space: nowrap;
}

.viewoutput {
    word-wrap: break-word; /* Bricht Wörter am Rand um, wenn sie zu lang sind */
    overflow-wrap: break-word; /* Moderne Alternative zu word-wrap */
    word-break: break-word; /* Stellt sicher, dass lange Wörter am Rand umbrochen werden */
    white-space: normal; /* Ermöglicht normales Umbrechen von Text */
}

.db-neuanfrage-anderer-liest {
    display:none;
}

.dbi-wird-gelesen {
    display: none;
    position: relative;
    top: -5px;
    width: 30px;
    margin-left: 3px;
}

.desktop .db-bstitel-info {
    margin-bottom: 15px;
    line-height: 45rem;
}

.mobile .db-bstitel-info {
    margin-bottom: 15px;
    line-height: 40rem;
}

.inchat-number {
    position: absolute;
    right: 2px;
    top: -10px;
    background-color: #222e3e;
    padding: 3px 5px;
    border-radius: 50%;
    border: 1px solid black;
    width: 25px;
    height: 25px;
    line-height: 15px;
    color: #fff;
    text-align:center;

    display: none;
}

@media (max-width: 500px) {
    .db-inchat-box {
        display: block;
        background-color: var(--linkfarbe);
        border-radius: 50%;
        padding: 5px 10px;
    }
    .db-inchat-box i.fa-comments {
        color: white;
    }
}

.db-mailtag {
    display: inline-block;
    margin:0 5px 5px 0;
    padding:3px 7px;
    border-radius: 10px;
    background-color: var(--rahmenfarbe-hell);
    font-size:0.8em;
}

.db-mailtag .dbi-remove-mailtag {
    opacity: 0.2;
    cursor: pointer;
}

.db-mailtag:hover .dbi-remove-mailtag {
    opacity: 1;
}

.db-stream-action-circle {
    /*width: 38px;
    height: 38px;*/
    text-align:center;
    display:inline-block;
    /*border: solid 1px #eceff3;
    background-color: #eceff3;*/
    border-radius: 50%;
    /*line-height: 38px;
    margin-right: 10px;*/
}



.db-stream-action-circle:hover {
    border: solid 1px var(--primaere-farbe);
}

/*
.db-own-message-tools .db-stream-action-circle {
    width: 27px;
    height: 27px;
    line-height: 27px;
    font-size: 0.8em;
}*/

.db-mailtag-outer {
    position: absolute;
    z-index: 999;
    border-radius: 15px;
    background-color: var(--rahmenfarbe-hell);
    padding: 10px;
    min-width: 150px;
    border: 1px solid var(--rahmenfarbe);
}

.dbi-count-value {
    position: absolute;
    top: -10px;
}
.dbi-count-value-inner {
    position: relative;
    left: -25px;

    background-color: var(--primaere-farbe);
    padding: 1px 3px;
    border-radius: 50%;
    border: 1px solid var(--primaere-farbe);
    width: 15px;
    height: 15px;
    line-height: 11px;
    color: #fff;
    text-align: center;
    font-size: 12rem;
}

.db-flexselect-nowrap .db-flexselect-option {
    white-space: nowrap;
    width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1200px) {
    /*.db-stream-action-circle {
        width: 27px;
        height: 27px;
    }*/
    .dbi-count-value {
        position: absolute;
        top: -5px;
        left: 35px;
    }

    .db-draft-comment-box .dbi-count-value {
        left: 25px;
    }

    .db-other-message-tools .dbi-count-value {
        left: 25px;
    }

    .db-other-message-tools .dbi-markieren-outer .dbi-markieren > .db-icon-text-row > div:last-of-type {
        display: none;
    }
    .dbi-markieren-outer .dbi-markieren > .db-icon-text-row.db-flex-right > div:first-of-type {
        display: none;
    }

    .db-draft-message-row .db-own-message-tools .dbi-markieren-outer .dbi-markieren > .db-icon-text-row > div:last-of-type {
        display: none;
    }

    .db-own-message-tools .dbi-markieren-outer .db-icon-text-row {
        justify-content: flex-start;
    }

    .dbi-count-value-inner {
        left: -5px;
    }

    .db-mailtags {
        max-width: 49px;
        overflow: visible;
    }

    .db-mailtags .db-category-line-outer {
        min-width: 50px;
    }

    .db-mailtag {
        width: max-content;
        max-width: 200px;
    }


}

.db-mailtags .db-mailtag {
    font-size: calc(16rem * 0.8);
}

.desktop-sticky .db-kontrastwechsler-container {
    display: none;
}