/*
                                                                 ______
                                                                /     /\
                                                               /     /##\
                                                              /     /####\
                                                             /     /######\
                                                            /     /########\
                                                           /     /##########\
                                                          /     /#####/\#####\
                                                         /     /#####/++\#####\
                                                        /     /#####/++++\#####\
                                                       /     /#####/\+++++\#####\
                                                      /     /#####/  \+++++\#####\
                                                     /     /#####/    \+++++\#####\
                                                    /     /#####/      \+++++\#####\
                                                   /     /#####/        \+++++\#####\
                                                  /     /#####/__________\+++++\#####\
                                                 /                        \+++++\#####\
                                                /__________________________\+++++\####/
                                                \+++++++++++++++++++++++++++++++++\##/
                                                 \+++++++++++++++++++++++++++++++++\/

*/

/********************************* Fonts ****************************************/

/* white-labeling affected */
@font-face {
    font-family: 'Roboto-Regular';
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: auto
}

/* white-labeling affected */
@font-face {
    font-family: 'Roboto Mono';
    src: url("fonts/RobotoMono-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: auto
}

/* white-labeling affected */
@font-face {
    font-family: 'Roboto-Regular';
    src: url("fonts/Roboto-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: auto
}

/* white-labeling affected */
@font-face {
    font-family: 'Roboto-Regular';
    src: url("fonts/Roboto-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 510;
    font-display: auto
}

/* white-labeling affected */
@font-face {
    font-family: 'Roboto-Regular';
    src: url("fonts/Roboto-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 520;
    font-display: auto
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* white-labeling affected */
:root {
    --ct-blue: #00abd9 !important;
    --ct-indigo: #00abd9 !important;
    --ct-purple: #00abd9 !important;
    --ct-primary: #00abd9 !important;
    --ct-link-color: #00abd9 !important;
    --ct-link-hover-color: #00abd9 !important;
    --ct-component-active-bg: #00abd9 !important;
    --ct-input-border-color: #b3b6ba !important;
}

.bg-primary {
    background-color: #00abd9 !important;
}

.greyText {
    color: #d3d3d3;
}

.DarkGreyText {
    color: #474747;
}


h1 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 500;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h2 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 500;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h3 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 600;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h4 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 600;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h5 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 600;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h6 {
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: 500;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.headline {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 5px;
    padding-right: 20px;
    margin: 0.73em 0 !important;
    font-family: 'Roboto-Regular', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: #474747;
    gap: 0.75rem;
}

    .headline:after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #eaeaea;
        content: "";
        pointer-events: none;
    }

.headline-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headline-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .headline {
        flex-wrap: nowrap;         
        padding-right: 12px;
    }

    .headline-left {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .headline-right {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

.headline-right .mode-switch-button {
    min-width: 42px;
    padding-left: 4px;
    padding-right: 4px;
}

.mode-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 8px;
    border-radius: 50%;
    box-sizing: content-box;
}

.mode-switch-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50% !important;
    margin-left: 8px !important;
}

.mode-switch-button .k-button-text,
.mode-switch-button .k-icon-text,
.mode-switch-button .k-button-content {
    display: none !important;
    background: transparent !important;
}

.mode-switch-button i,
.mode-switch-button svg,
.mode-switch-button .k-icon,
.mode-switch-button .k-button-icon {
    color: #00abd9 !important;
    background: transparent !important;
    font-size: 30px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 1;
}

.mode-switch-button:hover,
.mode-switch-button:active {
    background: transparent !important;
    box-shadow: none !important;
}

.mode-switch-button:focus-visible,
.mode-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11,100,145,0.08) !important;
    border-radius: 50% !important;
}

.mode-switch-button.k-state-selected i,
.mode-switch-button.k-state-selected svg,
.mode-switch-button.k-state-selected .k-icon {
    color: #00abd9 !important;
    background: transparent !important;
}

.headline-right .mode-switch-button {
    min-width: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
    padding-right: 0 !important;
}

@media (max-width: 480px) {
    .mode-switch { padding: 10px; }
    .mode-switch-button i,
    .mode-switch-button svg,
    .mode-switch-button .k-icon { font-size: 32px !important; width:32px; height:32px; }
}

.toolbar--applying {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.headlinewindow {
    width: fit-content !important;
    font-family: 'Roboto-Regular', sans-serif;
    line-height: 1.7rem;
    font-weight: 510;
    margin-block-start: 0.73em;
    margin-block-end: 0.73em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-size: .9rem;
}

.headline-subsection {
    width: fit-content !important;
    font-family: 'Roboto-Regular', sans-serif;
    font-weight: 600;
    margin-block-start: 0.73em;
    margin-block-end: 0.63em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-size: .84rem;
}

.help-area-window {
    -webkit-box-shadow: 0px 0px 47px 13px rgba(71,71,71,0.52);
    box-shadow: 0px 0px 47px 13px rgba(71,71,71,0.52);
}

.k-window {
    color: #474747 !important;
}

.k-window-titlebar-action > span {
    font-size: 1rem !important;
}

span, p, label {
    font-size: 0.8rem;
}

.longlabel > label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -4px;
    width: 100%;
}

.dialog-selected-item {
    border: 1px solid;
    padding: 3px;
    border-radius: .375rem;
}

.medium {
    font-size: .9rem;
}

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

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

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

.vertical-align {
    display: flex;
    align-items: center;
}

.text-vertical-center {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.text-danger {
    color: #fd6c3e !important;
}

.form-group > .text-danger {
    display: block;
    position: relative;
    font-size: 0.8rem;
    color: #fff !important;
    margin-top: -3px;
    padding-top: 3px !important;
    padding-left: 4px;
    padding-bottom: 2px;
    background: #fd6c3e;
    width: 100% !important;
    border: 1px solid #b3b6ba;
    -webkit-border-bottom-right-radius: .2rem;
    -webkit-border-bottom-left-radius: .2rem;
    -moz-border-radius-bottomright: .2rem;
    -moz-border-radius-bottomleft: .2rem;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: .2rem;
    z-index: 10005 !important;
}

.text-warning {
    color: #fece42 !important;
}

.form-group > .text-warning {
    display: block;
    position: relative;
    font-size: 0.8rem;
    color: #fff !important;
    margin-top: -3px;
    padding-top: 3px !important;
    padding-left: 4px;
    padding-bottom: 2px;
    background: #fece42;
    width: 100% !important;
    border: 1px solid #b3b6ba;
    -webkit-border-bottom-right-radius: .2rem;
    -webkit-border-bottom-left-radius: .2rem;
    -moz-border-radius-bottomright: .2rem;
    -moz-border-radius-bottomleft: .2rem;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: .2rem;
    z-index: 10005 !important;
}

.text-success {
    color: #4d9e4a !important;
}

.form-group > .text-success {
    display: block;
    position: relative;
    font-size: 0.8rem;
    color: #fff !important;
    margin-top: -3px;
    padding-top: 3px !important;
    padding-left: 4px;
    padding-bottom: 2px;
    background: #4d9e4a;
    width: 100% !important;
    border: 1px solid #b3b6ba;
    -webkit-border-bottom-right-radius: .2rem;
    -webkit-border-bottom-left-radius: .2rem;
    -moz-border-radius-bottomright: .2rem;
    -moz-border-radius-bottomleft: .2rem;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: .2rem;
    z-index: 10005 !important;
}

b, strong {
    font-weight: 600;
}

.amount-positive {
    color: #4d9e4a;
    float: right;
    font-weight: bold;
    margin: 5px 0 2px 0;
    font-size: 0.8rem;
}

.amount-negative {
    color: #fd6c3e;
    float: right;
    font-weight: bold;
    margin: 5px 0 2px 0;
    font-size: 0.8rem;
}

.amount-negative-color {
    color: #fd6c3e !important;
}

.font-normal {
    font-weight: normal;
}

.font-bold {
    font-weight: bold;
}

.font-italic {
    font-style: italic;
}

.font-underline {
    text-decoration: underline;
}

.font-size-07rem {
    font-size: .7rem;
}

.font-size-1rem {
    font-size: 1rem;
}

.font-size-60 {
    font-size: 60%;
}

.font-size-80 {
    font-size: 80%;
}

.font-size-100 {
    font-size: 100%;
}

.font-size-120 {
    font-size: 120% !important;
}

.font-size-200 {
    font-size: 200%;
}

span.small {
  font-size: smaller;
}

span.small.mb-1 {
  display: inline-block;
  margin-bottom: 10px !important;
}


/********************************* Login **************************************/

.authentication-bg {
    background: url(/Img/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 10px;
    opacity: 0.6;
}

    .strike > span {
        position: relative;
        display: inline-block;
    }

        .strike > span:before, .strike > span:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: #d3d3d3;
        }

        .strike > span:before {
            right: 100%;
            margin-right: 15px;
        }

        .strike > span:after {
            left: 100%;
            margin-left: 15px;
        }

.generatePasswordIcon {
    margin-left: -15px !important;
    z-index: 999;
    margin-right: -50px;
    margin-top: 8px;
    cursor: pointer;
}

.showPasswordIcon {
    margin-left: -25px !important;
    z-index: 999;
    margin-right: -25px;
    margin-top: 8px;
    cursor: pointer;
}

/* Targets <li> elements when the <div> has the class "weak" */
.password-strength-indicator.weak .k-progressbar-chunks .k-progressbar-chunk.k-selected {
    background-color: #fd6c3e !important; /* Red for weak */
}

/* Targets <li> elements when the <div> has the class "medium" */
.password-strength-indicator.medium .k-progressbar-chunks .k-progressbar-chunk.k-selected {
    background-color: #fece42 !important; /* Orange for medium */
}

/* Targets <li> elements when the <div> has the class "strong" */
.password-strength-indicator.strong .k-progressbar-chunks .k-progressbar-chunk.k-selected {
    background-color: #74d171 !important;
}

.password-weak {
    color: #fd6c3e;
}

.password-medium {
    color: #fece42;
}

.password-strong {
    color: #74d171;
}

.password-strength-indicator {
    height: 8px !important;
}

/* Hides the default browser "password eye" for inputs */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

/* Used on the login page. Prevents the input from "shrinking" when the error messages are displayed and adds the missing borders to the right*/
.login-input {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

 .announcement-area {
        position: fixed;
        top: 3rem;
        z-index: 9999;
        max-width: 500px;
        width: 500px;
        border-radius: 8px;
    }

  .announcement-list {
        /* Force Bootstrap list-group background locally (your theme likely overrides it globally) */
        --bs-list-group-bg: rgba(255, 255, 255, 0.92);
        --bs-list-group-color: #212529;
        /* Optional: nice glass effect on top of the login background */
        backdrop-filter: blur(6px);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
        border-radius: .5rem;
        overflow: hidden;
    }

        .announcement-list .list-group-item {
            /* Fallback in case vars are still getting overridden */
            background-color: #ffffff;
            color: var(--bs-list-group-color);
            margin: 2px;
            border: 1px solid #000000;
            border-radius: 8px;
        }

        .announcement-list .list-group-item.list-group-item-warning {
            border-color: #9E6C00;
            border-left: 4px solid #9E6C00;
        }

        .announcement-list .list-group-item.list-group-item-info {
            border-color: #3A5BC7;
            border-left: 4px solid #3A5BC7;
        }

        .announcement-list .list-group-item.list-group-item-error {
            border-color: #CE2C31;
            border-left: 4px solid #CE2C31;
        }

    .announcement-ts {
        white-space: nowrap;
        font-size: 14px;
        opacity: .85;
        margin-left: 1rem;
        line-height: 20px;
    }

    .list-group-item.announcement-list-group-item {
        padding: 4px 8px 4px 12px;
    }

    .announcement-inner {
        padding: 8px 0;
    }

    .announcement-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .announcement-title {
        margin-top: 0px;
        margin-bottom: 0px;
        line-height: 20px;
        font-size: 14px;
        text-align: left;
        flex: 1;                  
    }

    .announcement-message {
        text-align: left;
        margin-bottom: 0;
        font-size: 14px;
    }

    .icon-circle {
        width: 32px;
        height: 32px;
        min-width: 32px;           
        min-height: 32px;
        border-radius: 50%;      
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .icon-circle > i {
        font-size: 20px;
        line-height: 20px;
    }

    .icon-circle-gap {
        margin-right:16px;
    }

    .icon-circle.warning {
        background-color: #FFFAB8;   
        color: #9E6C00;              
    }

    .icon-circle.info {
        background-color: #EDF2FE;   
        color: #3A5BC7;              
    }

    .icon-circle.error {
        background-color: #FEEBEC;   
        color: #CE2C31;              
    }



/********************************* Navigation **************************************/

.leftside-menu {
    margin-top: 20px !important;
}

.logo-login-screen {
    width: 100%;
    max-width: 300px;
    margin-bottom: 13%;
}

.logo-admin-screen {
    width: 100%;
    max-width: 300px;
    margin-bottom: 13%;
}

.logo-start-screen {
    text-align: center;
    width: 645px;
    height: 404px;
}

.logo-lg {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 20px;
    width: unset !important;
}

#logo-lg {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    max-width: 100%;
    height: auto;
    max-width: 190px !important;
    max-height: 64px !important;
}

#logo-lg-dark {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    width: 100%;
    height: auto;
    max-width: 190px !important;
    max-height: 64px !important;
}

#logo-lg-admin {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    max-width: 100%;
    height: auto;
    max-width: 190px !important;
    max-height: 64px !important;
}


#logo-sm, #logo-sm-dark {
    max-width: 100% !important;
    max-height: 64px !important;
    height: auto !important;
    padding: 5px !important;
}

.simplebar-content {
    padding-top: 20px !important;
}

.side-nav > .side-nav-item > a > span {
    font-size: 0.9rem !important;
}

.side-nav > .side-nav-item > a > i {
    font-size: 1rem !important;
    line-height: 0.6rem !important;
}

.side-nav-item > a > i {
    vertical-align: middle !important;
    padding-top: 6px !important;
}

.nav-bookmark {
    margin-top: 1px !important;
}

.admin-bookmark {
    color: #474747 !important;
}

/* Darkmode Sidenav */
.side-nav-item > a {
    color: #dbdbdb !important;
}

    /* white-labeling affected */
    .side-nav-item > a:hover {
        color: #00abd9 !important;
    }

/* white-labeling affected */
.side-nav-item > .nav-menu-item-active {
    color: #00abd9 !important;
}

.side-nav-second-level > li > a {
    color: #dbdbdb !important;
}

    /* white-labeling affected */
    .side-nav-second-level > li > a:hover {
        color: #00abd9 !important;
    }

/* white-labeling affected */
.side-nav-second-level > li > .nav-menu-item-active {
    color: #00abd9 !important;
}

.admin-sub-nav > div {
    color: #474747 !important;
}

/* Standardmenü Navigation */
html[data-sidenav-color=dark][data-sidenav-size=condensed] .side-nav .side-nav-item:hover .side-nav-link {
    background: #485567;
    color: #f2f2f2 !important;
}

/* Sub Nav */
.side-nav-second-level li a, .side-nav-second-level li .side-nav-link, .side-nav-third-level li a, .side-nav-third-level li .side-nav-link, .side-nav-forth-level li a, .side-nav-forth-level li .side-nav-link {
    padding: 8px 30px 8px 65px;
    font-size: 0.79rem;
}

/* Admin Navigation */
/* white-labeling affected */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link:hover i {
    color: #00abd9;
}

/* Standardmenü Navigation Icon, Hover, Farbe*/
/* white-labeling affected */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link span:hover {
    color: #00abd9 !important;
}

/* white-labeling affected */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-second-level:hover i {
    color: #00abd9;
}

/* white-labeling affected */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link:hover i {
    color: #00abd9;
}

/* Text Hover-Color Standardmenü Navigation Hauptmenüpunkt */
/* white-labeling affected */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link span:hover {
    color: #00abd9 !important;
}

/* Icon Hover-Color zugeklapptes Navigation */
/* white-labeling affected */
div .collapse {
    color: #00abd9 !important;
}

/* Hauptmenüpunkt Fav-Icon Position Farbe, Hover*/
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link:hover .menu-fav {
    display: none;
    margin-top: 5px !important;
    right: 0px !important;
}

html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link span:not(.badge, .menu-fav) {
    color: #ababab;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1rem;
}

html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link .menu-arrow {
    display: none !important;
}

/* Hauptmenüpunkt Sub Nav Favoriten */
.FavSubMenu > a {
    padding-left: 20px !important;
}

.FavSubMenuSortIcon {
    color: #989CA2 !important;
    padding-right: 15px;
    opacity: 0.7;
}

.FavSubMenuPoint {
    padding-left: 45px;
}

.FavSubMenuIcon {
    position: absolute;
    top: 8px;
    right: 31px;
}

.FavSubMenuIconAdd {
    position: absolute !important;
    top: 8px;
    right: 31px;
}

.HideFavMenuList > span {
    display: none;
}

.HideFavMenuList:hover > span {
    display: block;
    opacity: 0.5;
}

/* Zusammengeklappte Nav - SubMenu Position */
html[data-sidenav-size=condensed]:not(.authentication-bg) .side-nav .collapse > ul > li > a > .FavSubMenuPoint {
    padding-left: 0;
}

.navigation-title-design {
    width: 90%;
}

.side-nav .menu-fav {
    display: none;
}

.navbar-custom .app-search form {
    padding-top: 7px !important;
    height: 40px !important;
}

.top-nav-spinner {
    margin-bottom: 2px;
}

.top-nav-full-width {
    left: 0 !important;
}

.navbar-custom {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
    padding-top: 5px !important;
}

    .navbar-custom .topbar-menu li {
        height: 40px !important;
        max-height: 40px !important;
    }

.nav-user {
    height: 55px !important;
    max-height: 55px !important;
    min-height: 55px !important;
    padding-top: 15px !important;
}

.nav-user-setup {
    height: 53px !important;
    max-height: 53px !important;
    min-height: 53px !important;
    padding-top: 15px !important;
}


    .nav-user .account-user-avatar {
        top: 10px !important;
    }

    .nav-menu-item-active {
        color: whitesmoke !important;
    }

    .nav-menu-item-active > span {
        padding-top: 2px;
    }

.nav-user > .flex-column > h5 {
    font-size: 13px !important;
    margin-top: 5px;
}

.nav-user > .flex-column > h6 {
    font-size: 11px !important;
}

.nav-user .account-user-avatar img {
    height: 24px !important;
    width: 24px !important;
}

.navbar-custom .topbar-menu .nav-link {
    top: -9px !important;
    height: 45px !important;
    line-height: 45px !important;
}

/* white-labeling affected */
.side-nav-link:is(.nav-menu-item-active) span {
    margin-top: -1px !important;
    vertical-align: middle !important;
    color: #00abd9 !important;
}

.side-nav-link > i {
    width: 30px;
    height: 30px;
    padding: 5px 0px;
}

/* white-labeling affected */
.nav-menu-item-active > i:before {
    background: #00abd9 !important;
    padding: 6px 6px 5px 6px !important;
    border-radius: 50%;
    color: #FFF;
    width: 25px !important;
    height: 25px;
    font-size: 90% !important;
    margin-left: -4px !important;
    margin-top: -5px !important;
}

.menu-arrow {
    margin-top: 4px;
}

.side-nav .side-nav-item > a[aria-expanded=true] > span.menu-arrow {
    margin-top: 4px !important;
}

/*Fav Icon Hauptmenüpunkt */
.side-nav a:hover .menu-fav {
    display: block;
    transition: transform 0.15s;
    color: #989ca2 !important;
    position: absolute;
    right: 15px;
    top: 12px;
    display: inline-block;
    font-family: "Material Design Icons";
    text-rendering: auto;
    line-height: 1.5rem;
    font-size: 10px !important;
    transform: translate(0, 0);
}

.sub-nav-point-design {
    color: #fff !important;
}

.topnav-user-dropdown > a {
    padding-top: 20px !important;
}

.button-toggle-menu {
    margin-top: -3px !important;
    height: 50px !important;
    line-height: 55px !important;
}

.dropdown-menu {
    z-index: 90000 !important;
}

.profile-dropdown {
    margin-top: 5px !important;
}

    .profile-dropdown i, .profile-dropdown span {
        vertical-align: inherit !important;
    }

.k-table-body > ul > li > span {
    font-size: .8rem !important;
    line-height: 1rem !important;
}

.k-table-body > ul > li {
    font-size: .8rem !important;
    line-height: 1rem !important;
}

.account-user-name {
    margin-top: -1px;
    padding-bottom: 2px;
}

.SideNavIconColor {
    color: #dbdbdb !important;
}

.fs-i {
    font-style: italic;
}


/************************************ Search *******************************************/

.app-search > form > div > span {
    border-radius: .375rem !important;
}

.k-clear-value {
    position: static !important;
    display: flex !important;
}

.quick-nav {
    height: 30px !important;
    top: 3px !important;
}

.quick-nav > .k-clear-value {
    position: absolute !important;
    top: 3px !important;
    right: 10px !important;
}

.app-search .form-control {
    margin-left: 2px !important;
    border: 1px solid #e9e9e9 !important;
}

/* Quicksearch Ergebnis Header - Ggf. Auswirkung auf andere Stellen*/
.k-list-group-item > .k-list-item-text {
    font-family: 'Roboto-Regular', sans-serif !important;
    line-height: 1em !important;
    letter-spacing: 0px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.padding-searchbox {
    padding: 3px 6px !important;
}


/********************************* Admin Navigation *********************************/

.admin-navbar, .admin-logo {
    color: #474747 !important;
    background: #d3d3d3 !important;
}

#logo-sm-admin {
    max-width: 100% !important;
    max-height: 64px !important;
    height: auto !important;
    padding: 5px !important;
}

body[data-leftbar-theme=dark] .admin-navbar .side-nav .side-nav-link {
    color: #474747 !important;
    background: #d3d3d3;
}

.side-nav-item > .admin-navbar .nav-menu-item-active > span {
    color: #00abd9 !important;
}

/* white-labeling affected */
.admin-navbar .nav-menu-item-active > div {
    color: #00abd9 !important;
}

.Admin-SubNav {
    color: #7a7a7a !important;
}

.admin-sub-nav {
    color: #7a7a7a !important;
}

.admin-sub-nav {
    color: #474747 !important;
}

.admin-navbar .nav-menu-item-active {
    color: #000 !important;
    font-weight: 500 !important;
}

.ExitAdminNav {
    background: #c2c2c2 !important;
}


/********************************* Notification Area *********************************/

.notification-bg-area {
    margin: 5px 5px 0px 25px;
    background: #ffffff;
    color: #98a6ad;
    padding: 10px 0px;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
}

.notification-bg {
    margin: 5px 5px 0px 25px;
    background: #ffffff;
    color: #98a6ad;
    padding: 10px 0px;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
}

.notification-area {
    background: #FFF;
    position: absolute;
    top: 70px;
    right: -425px;
    width: 400px;
    z-index: 99999;
    font-size: 85%;
    padding: 0px 5px 15px 5px;
    margin: 0 24px 0 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-left: 1px solid #e7ebf0;
    border-right: 1px solid #e7ebf0;
    border-bottom: 1px solid #e7ebf0;
    z-index: 9999;
    overflow: hidden;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    box-shadow: var(--ct-box-shadow);
}

.notification-area-show {
    right: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.list-group-item {
    padding: 0;
    background-color: transparent;
}

.list-in-dialog {
    padding-left: 3rem;
}

    .list-in-dialog > li {
        margin-bottom: 10px;
        line-height: 1.2;
    }

.NotificationTextWrapped {
    white-space: normal;
}

.iziToast-message {
    word-break: break-word !important;
}

.NotificationTextOverflow {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .NotificationTextOverflow:hover {
        width: 100%;
        white-space: normal;
    }

.notification-success {
    margin: 10px !important;
    border-left: 20px solid #4d9e4a !important;
    color: #272727 !important;
    background-color: #fff !important;
}

.notification-error {
    margin: 10px !important;
    border-left: 20px solid #b72d01 !important;
    color: #272727 !important;
    background-color: #fff !important;
}

.notification-warning {
    margin: 10px !important;
    border-left: 20px solid #fece42 !important;
    color: #272727 !important;
    background-color: #fff !important;
}

.jq-toast-loader {
    height: 8px !important;
}

.NoNotificationsInArea {
    padding: 13px 0 0px 0px !important;
    text-align: center;
    border-radius: .375rem;
}

.bg-success {
    background: #00abd9 !important;
}

.notification-link, .notification-link:hover {
    color: white !important;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0 rgba(255, 0, 0, 0.9);
    }

    70% {
        box-shadow: 0 0 60px rgba(255, 0, 0, 0.7); /* Increased size and visibility */
    }

    100% {
        box-shadow: 0 0 120px rgba(255, 0, 0, 0.1); /* Even larger and fades out */
    }
}

@keyframes pulse-opacity {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.pulsing-icon {
    animation: pulse-opacity 1.5s ease-in-out infinite;
}


.notification-list .noti-icon-badge {
    height: 9px;
    width: 9px;
    background-color: #E03E5B;
    top: 22px !important;
    right: 5px !important;
    animation: glow 2.0s infinite;
}

.notification-list .noti-icon {
    line-height: 60px !important;
    font-size: 18px !important;
}


.noti-list-icon {
    height: 10px;
    width: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border-radius: .375rem;
}

.noti-icon-not-dismissable {
    background-color: #fd6c3e !important;
}

.notification-area-notification-list {
    overflow-y: auto !important;
}

.nl-item {
    margin: 0px 15px 15px 15px;
}

.nl-separator {
    width: 90% !important;
    margin-top: 0px;
    margin-bottom: 15px;
    border: 0.1rem solid #CBD1D8 !important;
}

.notification-list-item {
    border: 0.1px solid #DDE1E5;
    border-radius: .375rem;
    padding: 5px 8px 5px 8px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
    font-size: 95%;
    word-wrap: break-word;
}

.warning-item {
    border-left: 7px solid #fece42 !important;
}

.error-item {
    border-left: 7px solid #fd6c3e !important;
}

.info-item {
    border-left: 7px solid #74d171 !important;
}

.permanent-item {
    background-color: #F6F7FB !important;
}

.badge-permanent-item {
    width: 10px;
    height: 10px;
    border-radius: .375rem;
    background: #fd6c3e;
    float: right;
    margin-top: 8px;
    margin-right: 10px;
}


/********************************* Content ****************************************/

html, body {
    font-family: 'Roboto-Regular', sans-serif !important;
    background-color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    outline: none !important;
}

::-moz-selection {
    color: #fff;
    background: #00abd9;
}

/* white-labeling affected */
::selection {
    color: #fff;
    background: #00abd9;
}

:focus {
    outline: none !important;
}

/* Scrollleiste */
* {
    scrollbar-width: thin;
    scrollbar-color: #d3d3d3 #fcfcfc;
}

    *::-webkit-scrollbar {
        width: 10px;
    }

::-webkit-scrollbar:horizontal {
    height: 10px;
}

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

*::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 0px;
    border: 1px solid #d3d3d3;
}

.k-window-content {
    padding-block: 10px !important;
    padding-inline: 10px !important;
    overflow-x: hidden !important;
}

.content-div {
    background: #f4f4f4;
    border: 1px solid #DDE1E5;
    padding: 10px;
    border-radius: .375rem;
}

.loading-indicator {
    z-index: 99999;
    margin-top: 25px;
    width: 1.2rem;
    height: 1.2rem;
    border-width: 0.15em;
}

.k-loader-container-panel {
    border: none !important;
}

.k-loader-container-inner > .\!k-text-primary {
    margin-top: 10px;
    font-size: .9rem !important;
    color: #474747 !important;
    opacity: .8;
}

.k-dropzone-hint {
    text-align: center;
}

.UploadPicInfo {
    position: relative;
    z-index: 999 !important;
    font-size: 80%;
    opacity: 0.7;
}

.k-upload .k-file-icon-wrapper {
    margin-top: -13px;
}

.k-file-invalid {
    opacity: 0.7;
}

.k-text-error {
    color: #fd6c3e !important;
}

.k-file-success > div > .k-file-validation-message {
    color: #74d171 !important;
}

.content-page {
    padding: 50px 12px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #fd6c3e;
}

.validation-message {
    font-size: 0.8rem;
    color: #fd6c3e;
}

.attention-message {
    position: relative;
    font-size: 0.8rem;
    padding: 5px;
    color: #fd6c3e;
    width: auto !important;
    border: 1px solid #fd6c3e;
    border-radius: .2rem;
}

.parent-div {
    justify-content: center;
    padding-top: 10%;
    display: flex;
    height: 100%;
    width: 100%;
}

.child-div {
    align-self: center;
    padding: 1rem;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.grid-info-panel {
    font-size: 82%;
}

.grid-info-panel > li {
    padding: 2px 4px;
    display: flex;
    align-items: center; /* Vertically centers the icon and text */
    gap: 4px; /* Adds some space between the icon and the text */
}

.grid-info-panel-header {
    background: #EDEFF0;
}

.outer-container {
    display: flex;
    height: 100%; /* Take 100% of the available height */
}

.left-column {
    flex: 1; /* Take the remaining width */
}

.right-column {
    width: 200px; /* Fixed width for the right column */
    margin-left: 10px;
}

.TelerikGridIndex {
    z-index: 4 !important;
}

.clearfix {
    overflow: auto;
}

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

.leftBorderLightGrey {
    border-left: 2px solid #f1f3fa;
    padding-left: 20px;
}

hr {
    color: #cfcfcf;
    width: 60% !important;
    margin: 15px auto 30px auto;
}

.circle {
    font-weight: bold;
    border-radius: 100%;
    border: 2px solid #d3d3d3;
    padding: 5px 11px;
    margin-right: 10px;
    color: #d3d3d3;
}

.circle2 {
    font-weight: bold;
    border-radius: 100%;
    border: 2px solid rgba(211, 211, 211, 0.4);
    padding: 5px 7px;
    margin-right: 10px;
    color: #b72d01;
    background-color: rgba(211, 211, 211, 0.4);
}

.iconHeight {
    height: 20px;
    width: auto;
}

.roundicon {
    background: #f4f6fb;
    padding: 5px;
    border-radius: 10px;
    color: #98a6ad;
    margin-left: 5px;
}

    .roundicon > i:before {
        top: 5px;
    }

.roundiconBig {
    width: 32px;
    padding-top: 10px;
}

.licheck {
list-style: none;
}

.licheck li:before {
    content: '✓';
    margin-right: 10px;
    margin-left: -5px;
    color: #00abd9;
}

.konfipaySyncStatus {
    margin-left: 10px;
    margin-top: 30px;
    padding: 5px;
    border-radius: .375rem;
    background: #dae7d9;
    color: #46b642;
    font-size: 90%
}

.konfipaySyncStatusExpired {
    margin-left: 10px;
    margin-top: 30px;
    padding: 5px;
    border-radius: .375rem;
    background: #fae5df;
    color: #e75c30;
    font-size: 90%
}

.k-separator {
    display: none !important;
}

.InfoBox {
    position: relative;
    bottom: 20px;
    padding: 10px;
    border: 2px dotted #d3d3d3;
    text-align: left;
}

.fixed-modal-window {
    display: flex;
    min-height: 100vh;
    padding-bottom: 5px !important;
}

.error-window {
    width: 95%;
    max-width: 50rem;
}

.text-panel {
    background: transparent;
    display: flex;
    border-radius: .375rem;
    margin: 5px 0px 5px 0px;
    padding: 5px;
    width: 100%;
}

.text-panel-text-box {
    color: #474747;
    font-size: 0.8rem;
    background: #fff;
    white-space: normal;
    word-wrap: break-word;
}

.text-panel-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    float: left;
    font-size: 1.1rem;
}

/* white-labeling affected */
.text-panel-info {
    border: 1px solid rgba(0, 171, 217, 1) !important;
}

.text-panel-icon-box-info {
    color: rgba(0, 171, 217, 1);
}

.text-panel-warning {
    border: 1px solid rgba(254, 206, 66, 1) !important;
}

.text-panel-icon-box-warning {
    color: rgba(254, 206, 66, 1);
}

.text-panel-error {
    border: 1px solid rgba(253, 108, 62, 1) !important;
}

.text-panel-icon-box-error {
    color: rgba(253, 108, 62, 1);
}

.text-panel-success {
    border: 1px solid rgba(116, 209, 113, 1) !important;
}

.text-panel-icon-box-success {
    color: rgba(116, 209, 113, 1);
}

.text-panel-in-progress {
    border: 1px solid #d3d3d3 !important;
}

.text-panel-icon-box-in-progress {
    color: #d3d3d3;
}

.bg-warning {
    background-color: #fece42 !important;
}

.bg-danger {
    background-color: #fd6c3e !important;
}

/* MultiColumnCombobox */
.k-popup .k-data-table {
    font-size: 90% !important;
}

.k-popover-body {
    padding-bottom: 6px !important;
}

.k-popover-header {
    padding-block: 0.6rem !important;
    font-size: 90% !important;
}

.k-popover-body {
    font-size: 82% !important;
    padding-block: 0.6rem !important;
    padding-bottom: 0 !important;
}

.k-wizard {
    line-height: 1rem !important;
    padding: 0 !important;
}

/*prevents scrollbar in wizard content area*/
.k-wizard-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.enabled-text {
    margin-left: 10px;
    padding: 5px;
    border-radius: .375rem;
    background: #dae7d9;
    color: #46b642;
    font-size: 70%
}

.disabled-text {
    margin-left: 10px;
    padding: 5px;
    border-radius: .375rem;
    background: #fae5df;
    color: #e75c30;
    font-size: 70%
}

/*** nicht löschen!!! umsetzung von readonly in TelerikTreeView ***/
.disabled-treeview input[type='checkbox']:active,
.disabled-treeview .k-treeview-leaf:active {
    pointer-events: none;
}

.disabled-treeview input[type='checkbox'],
.disabled-treeview .k-treeview-leaf {
    cursor: default;
}

.short-term .k-treeview .parent {
    padding-top: 0.5rem !important;
}

.info-text {
    margin-left: 10px;
    padding: 5px;
    border-radius: .375rem;
    border: 1px solid #d3d3d3;
    background: transparent;
    color: #474747;
    font-size: 70%
}

span > .k-chip-action > .k-icon {
    color: #474747 !important;
}

.k-chart > svg > g > path[fill="rgb(255, 255, 255)"] {
    fill: transparent;
}

.ri-information-line {
    position: relative;
}

.text-panel > .text-panel-icon-box > .ri-information-line {
    position: relative;
    top: 0px !important;
    left: 2px !important;
}

.k-table-td > span > .ri-information-line {
    top: 2px !important;
}

/* white-labeling affected */
.variable-in-dialog {
    color: #028FB5 !important;
    border-radius: 3px 6px;
    border: 1px solid #00ABD9;
    padding: 3px 7px 3px 7px;
    margin-top: -3px;
    background: #f2f2f2;
    display: inline-block;
}

.bank-info-box {
    border: 0 solid;
    padding: 1px 2px 1px 2px;
    width: 100%;
    border-radius: .375rem;
    background: transparent;
    font-size: .8rem;
    line-height: 0.8rem;
    opacity: 0.8;
}

@media (max-width: 575.98px) {
   .bank-info-box {
        margin-top: 10px;
    }
}

@media (min-width: 576px) {
   .bank-info-box {
        margin-top: 17px;
    }
}

.bank-info-box > span {
    font-size: .73rem;
    padding: 0px;
    margin: 0px;
    line-height: 0.75rem;
}

.bank-info-box.hidden {
    height: 0px;
}

.neweditIconPos {
    font-size: .8rem !important;
    position: absolute;
    margin-top: 2px !important;
}

.neweditIconPos2 {
    font-size: .8rem !important;
    position: absolute;
    margin-top: 7px !important;
}

.hidden {
    visibility: hidden;
}

.k-chip:hover > .k-chip-content > .k-chip-label {
    color: #484848 !important;
}

.k-chip-label:hover {
    color: #484848 !important;
}

.form-divider {
    color: #434343 !important;
    opacity: 0.5 !important;
    font-size: .6rem !important;
    margin-top: 15px !important;
}

    .form-divider > span {
        color: #434343 !important;
        font-size: .7rem !important;
        opacity: 1 !important;
    }

.program .k-checkbox.k-checked,
.program .k-checkbox:indeterminate,
.program .k-checkbox:checked {
    background-color: #6b6b6b;
    border-color: #6b6b6b;
}

.searchbox .k-icon {
    position: absolute;
    z-index: 1;
    top: .4rem;
}

.searchbox .magnifier.k-icon {
    left: 0.4rem;
}

.searchbox .close .k-icon {
    right: .3rem;
    cursor: pointer;
}

.searchbox input {
    padding-left: 27px !important;
    padding-right: 25px !important;
}

.font-small input {
    height: 1.7rem;
}

.administration span, .program span {
    font-size: 12.8px;
}

.description {
    line-height: 1.4;
    padding: 0.3rem 0.4rem;
    border: 1px solid #e4e7eb;
    border-radius: .375rem;
}

.noevents {
    pointer-events: none;
}

#lengthOk {
    vertical-align: middle !important;
    line-height: 1rem;
    margin-bottom: 10px;
}

    #lengthOk > i {
        font-size: 1rem !important;
        vertical-align: middle !important;
        margin-top: -1px;
    }

    #lengthOk > span {
        margin-top: 2px !important;
        vertical-align: middle !important;
    }

#lengthFail {
    vertical-align: middle !important;
    line-height: 1rem;
    margin-bottom: 10px;
}

    #lengthFail > i {
        font-size: 1rem !important;
        vertical-align: middle !important;
        margin-top: -1px;
    }

    #lengthFail > span {
        margin-top: 2px !important;
        vertical-align: middle !important;
    }

.leftside-menu-skeleton {
    padding-top: 0 !important;
}

.payment-partner-grid-multiselect {
    min-width: 700px !important;
    border-width: 0 1px 0 0 !important;
    border-radius: 0 !important;
}

.form-date-picker {
    height: 32.38px !important;
}

.ci-windata-blue-dark-background {
    background-color: #009AC3 !important;
}

.ci-background-windata-grey-d3 {
    background-color: #d3d3d3;
}

.BankBalanceContainer {
    font-size: 80%;
    margin-left: 0px;
    line-height: 15px;
}

.BankBalanceRow {
    height: 30px;
    width: calc(100vw - 284px);
    background: #eceff0;
    border: 1px solid #cbcecf;
    border-radius: .3rem;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1216) {
    .BankBalanceContainer {
        font-size: 70% !important;
    }

    .BankBalanceRow {
        width: calc(100vw - 284px);
    }
}

@media (max-width: 1141px) {
    .BankBalanceRow {
        width: calc(100vw - 94px);
    }
}

@media (max-width: 768px) {
    .BankBalanceRow {
        width: calc(100vw - 24px);
    }
}

.balance-panel {
    height: 35px;
    padding-top: 8px;
    padding-bottom: 3px;
    font-size: 14.8px !important;
    margin: 0;
    margin-bottom: -3px;
    background: #dedfdf;
    color: #484848;
    border-top: 1px solid #c0c3c4;
    border-left: 1px solid #c0c3c4;
    border-right: 1px solid #c0c3c4;
    -webkit-border-top-left-radius: .37rem;
    -webkit-border-top-right-radius: .37rem;
    -moz-border-radius-topleft: .37rem;
    -moz-border-radius-topright: .37rem;
    border-top-left-radius: .37rem;
    border-top-right-radius: .37rem;
}

    .balance-panel > div > span {
        margin-left: -8px;
        font-size: 14px !important;
    }

        .balance-panel > div > span > span {
            font-size: 14px !important;
        }

.Balance-Panel-Toolbar > .k-toolbar {
    border-radius: unset !important;
}

.label-icon-right {
    margin-left: 3px;
    vertical-align: bottom;
}

.form-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.form-divider-name {
    background-color: transparent;
    padding: 0 10px;
    margin: 0 5px;
}

.form-divider::before,
.form-divider::after {
    content: "";
    flex-grow: 1;
    height: 0.5px;
    background-color: #7E7A78;
}

.form-divider::before {
    margin-right: 10px;
}

.form-divider::after {
    margin-left: 10px;
}

.payment-entries-grid {
    min-height: 300px;
}

.selection-highlight:focus {
    border: 0.5px solid #00abd9 !important;
}

.input-required {
    border: #798189 1.5px solid !important;
    height: 34.6px;
}

.label-required::after {
    color: #9fa2a5
}

/* Positioning for different layout options on start-screen */
.top-left .widget {
    top: 0;
    left: 0;
}

.top-half .widget {
    top: 0;
    left: 0;
    width: 54px;
    height: 27px;
}

.left-half .widget {
    top: 0;
    left: 0;
    width: 27px;
    height: 54px;
}

.full-screen .widget {
    top: 0;
    left: 0;
    width: 54px;
    height: 54px;
}

.tile-scroll-y > .k-tilelayout-item-body.k-card-body.k-overflow-hidden {
    overflow-y: auto; /* Enable vertical scrolling */
}

.k-tilelayout-item-body .k-card-body .k-overflow-hidden {
    padding: 6px 6px 0px 6px !important;
}

.tile-start-screen {
    border: none !important;
    text-align: center !important;
}

    .tile-start-screen > .k-tilelayout-item-body.k-card-body.k-overflow-hidden {
        align-content: center !important;
        justify-content: center !important;
        display: flex;
        flex-wrap: wrap !important;
    }

/* white-labeling affected */
.layout-button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    border: 1.5px solid #ccc;
    border-radius: .375rem;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

/* CSS for page div */
.page {
    width: 100%;
    height: 100%;
    background-color: white;
    position: relative;
    padding: 10px;
    border-radius: .375rem;
}

/* CSS for widget divs */
/* white-labeling affected */
.widget {
    width: 50%;
    height: 50%;
    background-color: lightblue;
    position: absolute;
    border: 1.5px solid #0070c0;
    margin: 1.5px;
    border-radius: .375rem;
}

.trialinfo {
    z-index: 99999 !important;
    position: fixed;
    top: -7px;
    left: 43.5%;
    background: #00abd9;
    padding: 8px 10px 1px 10px;
    color: #fff;
    border-radius: .375rem;
    font-size: 10px;
    width: 121px;
    max-width: 121px;
    height: auto;
    transition: 1s;
    text-align: center !important;
}

    .trialinfo > .trialinfo_content {
        display: none;
        font-size: 12px;
        transition: 1s;
    }

    .trialinfo:hover {
        z-index: 999;
        position: fixed;
        top: -7px;
        left: 43.5%;
        background: #00abd9;
        padding: 15px 10px 1px 10px;
        color: #fff;
        border-radius: .375rem;
        font-size: 10px;
        width: 121px;
        max-width: 121px;
        height: auto;
        transition: 1s;
    }

        .trialinfo:hover > .trialinfo_content {
            display: block;
            font-size: 9px;
            padding-top: 5px;
            padding-bottom: 8px;
            width: 100%;
            transition: 1s;
        }

.ProfilPicUpload {
    display: none;
}

.ProfilPicUploadTrue {
    display: block;
    animation: fadeIn 1s;
    animation: fadeOut 1s;
}

.editProfilPic {
    margin-right: -250px !important;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.warningIcon {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 3px;
    color: #FF0000;
}

.konfipaySync-ico {
    height: 33px;
    width: auto;
    margin: 0 10px 0 0;
}

.konfipaySync-pic {
    height: 166px;
    width: auto;
    margin: 0 10px 10px 0;
}

.AccountEditWindow {
    display: flow-root;
    background: #F8F9FA;
}

.MSLogin-pic {
    width: 100%;
    max-width: 300px;
    margin-bottom: 13%;
}

.konfipay-logo {
    width: 100%;
    max-width: 300px;
    margin-bottom: 13%;
}

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


/********************************* Homescreen  ***********************************/

.home-screen-customize-panel {
    width: 100%;
    height: 80%;
    margin: 0 !important;
}

.home-screen-customize-panel-close-btn {
    border: none;
    background: transparent;
}

.tile-layout-subtle-header {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 10px;
}

    .tile-layout-subtle-header .k-tilelayout-item-header {
        border: none !important;
        background: transparent !important;
    }

.k-tilelayout {
    height: auto !important;
}


/********************************* PDF Viewer *************************/

.k-pdf-viewer {
    border-radius: 5px;
}

    .k-pdf-viewer > div > div > .k-pager-numbers-wrap {
        padding-top: 5px;
        height: 38.67px !important;
    }

    .k-pdf-viewer > .k-toolbar {
        background: #eceff0 !important;
    }


/********************************* Paymentform *************************/

.transfer-form {
    background: rgba(0,171,217,0.2) !important;
    border: 1px solid #DDE1E5;
}

.direct-debit-form {
    background: rgba(254,206,66,0.2) !important;
    border: 1px solid #DDE1E5;
}

.foreign-payment-form {
    background: rgba(253,108,62,0.1) !important;
    border: 1px solid #DDE1E5;
}

.neutral-form {
    background: rgba(211,211,211,0.4) !important;
    border: 1px solid #DDE1E5;
}

.payment-amount-input {
    border: 1px solid #6C757D !important;
    border-radius: .375rem !important;
}

.splitter-subtle {
    border: none !important;
    background: transparent;
}

/* Add scroll to the left part of the splitter for the payment form */
.splitter-scroll > .k-pane-static {
    overflow-y: scroll !important;
    overflow-x: auto !important;
}

/* white-labeling affected */
.k-splitbar {
    background: url('../Img/Splitter.png') !important;
    background-position: center !important;
    background-repeat: repeat-x !important;
    cursor: s-resize;
}


/* Vertical Splitter */
/* white-labeling affected */
.k-splitter.k-splitter-flex.k-splitter-vertical .k-splitbar.k-splitbar-vertical.k-splitbar-draggable-vertical {
    background: url('../Img/Splitter.png') !important;
    background-position: center !important;
    background-repeat: repeat-x !important;
    cursor: s-resize;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.k-splitbar-draggable-vertical > div > span {
    display: none;
}

    /* Zusammengeklappt */
.k-splitbar-vertical > div > .k-i-caret-alt-down::before {
    content: "" !important;
}

/* Horizontal Splitter */
/* white-labeling affected */
.k-splitter.k-splitter-flex.k-splitter-horizontal .k-splitbar.k-splitbar-horizontal.k-splitbar-draggable-horizontal {
    background: url('../Img/SplitterH.png') !important;
    background-position: left !important;
    background-repeat: repeat-y !important;
    cursor: w-resize;
    margin-left: 10px !important;
    margin-right: 5px !important;
}

/* Account Balance Splitter */
.AccountBalanceSplitter > .k-splitbar > .k-collapse-next {
    display: none;
}

.AccountBalanceSplitter > .k-splitbar {
    margin-bottom: 10px;
}

.APICommunicationSplitter > .k-splitbar-vertical > .k-collapse-prev > k-i-caret-alt-down {
    margin-top: -2px !important;
    height: 30px;
}

.APICommunicationSplitter > .k-splitbar {
    margin-top: 25px;
    margin-bottom: 10px;
}

.APICommunicationStatHeight {
    height: calc(100vh - 380px);
}

.APICommunicationStat > .splitter-pane > div > table > tbody {
    background: #f2f2f2 !important;
}

.k-resize-handle {
    display: none !important;
}

.payment-transfer-container {
    height: calc(100% - 5px);
    margin-top: 10px;
}

@media (min-width: 576px) {
    .payment-form {
        max-width: 800px;
        min-width: 500px;
    }

    .payment-form.tax-office-payment {
        max-width: unset; 
        min-width: 800px;
    }
}


/********************************* Tabs *****************************************/

.nav-tabs {
    border-bottom: 1px var(--ct-nav-tabs-border-color) solid;
    line-height: 2.5em;
    padding: 0 5px;
}

    .nav-tabs:hover {
        color: #474747;
    }

    .nav-tabs > span {
        font-size: 0.9rem !important;
        line-height: 1rem !important;
    }

.k-tabstrip {
    font-size: 0.8rem;
}

    .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-active {
        border: 1px solid #dde1e5;
        outline: none !important;
        box-shadow: none !important;
        user-select: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item:focus, .k-item:active {
        outline: none !important;
        box-shadow: none !important;
        user-select: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

.active {
    color: #00abd9;
    border-bottom: 1px #00abd9 solid;
    line-height: 2.5em;
    padding: 0 5px;
}

    .active:Hover {
        color: #00abd9;
    }

.k-tabstrip-items-wrapper .k-item {
    color: #474747 !important;
}

.LightGreyBadge {
    background: #d3d3d3 !important;
    color: #474747 !important;
}

.k-card .k-card-header {
    padding: 1rem 1rem 0 1rem !important;
    font-weight: 600 !important;
}

/* Payment details */
.tab-max-w-100 .k-tabstrip-content {
    max-width: 100vh !important;
    font-size: unset;
}


/********************************* Grid ****************************************/

@media (min-width: 576px) {
    .k-grid {
        border-radius: .375rem;
        border: #c0c3c4 1px solid !important;
        min-width: 300px;
    }
}

@media (max-width: 575.99px) {
    .k-grid {
        border-radius: .375rem;
        border: #c0c3c4 1px solid !important;
    }
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
    padding: 0 1px 0 1px;
}

    .box .header {
        flex: 0 1 auto;
    }

    .box .content {
        height: 100% !important;
    }

.main-content-fill-size {
    height: calc(100vh - 140px) !important;
}

.k-grid .k-toolbar.k-grid-toolbar {
    padding-left: 0.5rem;
}

.grid-toolbar-dropdown {
    padding: 3px;
}

    .grid-toolbar-dropdown > button {
        height: 27px;
        background: none;
    }

.k-master-row {
    cursor: default;
}

.spinner-border-ty {
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.1em;
}

.spinner-grow-ty {
    width: .8rem;
    height: .8rem;
}

.spinner-border-frame {
    padding: 7px 1px !important;
    margin: 0 6px !important;
    display: inline-flex;
}

.telerik-grid-defaults {
    min-height: 260.09px !important;
}

.k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row > td {
    vertical-align: middle !important;
}

.k-grid-footer td, .k-group-footer td, .k-grouping-row td {
    font-weight: normal !important;
    font-size: 80% !important;
}

.k-pager .k-pager-sizes.k-label .k-dropdownlist .k-input-inner .k-input-value-text {
    width: 2rem !important;
    padding: .1rem .0rem !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
}

.k-grid > .k-grouping-header {
    font-size: 80%;
}

.k-grid th.center-me {
    text-align: center;
}

.k-grid .center-cell {
    text-align: center !important;
}

th.center-me .k-cell-inner > .k-link {
    justify-content: center;
}

.k-grid th.align-right {
    text-align: right;
}

th.align-right .k-cell-inner > .k-link {
    justify-content: right;
}

.k-grid-header th.align-right.right-padding {
    padding-right: 12px;
}

    .k-grid-header th.align-right.right-padding > .k-cell-inner {
        margin-right: 0;
    }

.k-grid-toolbar > .k-grid-search > input {
    height: 1.6rem !important;
    font-size: 0.8rem !important;
    line-height: 1rem !important;
    padding: .3rem .2rem .2rem .2rem !important;
}

.k-grid-search > input {
    font-size: 0.8rem !important;
    line-height: 1rem !important;
    padding: .2rem .2rem .1rem .2rem !important;
}

.k-pager-numbers-wrap {
    height: 28px !important;
    border-radius: .375rem !important;
}

.k-pager-input {
    vertical-align: middle !important;
    line-height: 20px !important;
    padding-top: 13px;
}

    .k-pager-input > span {
        min-height: 2.2em !important;
        max-height: 2.2em !important;
    }

.k-numerictextbox {
    height: 34.25px;
    padding-top: -13px !important;
}

.k-grid {
    border: #c0c3c4 1px solid !important;
}

.k-grid-aria-root > .k-grid-header {
    background: #eceff0 !important;
}

.k-grid-aria-root > .k-grid-footer {
    background: #eceff0 !important;
}

.k-grid > .k-toolbar {
    background-color: #eceff0 !important;
}

.k-table-thead {
    background-color: #eceff0 !important;
}

.k-grid-footer {
    padding-right: 0 !important;
}

.k-table-tfoot {
    background-color: #eceff0 !important;
}

    .k-table-tfoot > tr > td > .ri-information-line {
        padding-bottom: 5px !important;
    }

.k-pager {
    -webkit-border-bottom-right-radius: .375rem;
    -webkit-border-bottom-left-radius: .375rem;
    -moz-border-radius-bottomright: .375rem;
    -moz-border-radius-bottomleft: .375rem;
    border-bottom-right-radius: .375rem;
    border-bottom-left-radius: .375rem;
    background-color: #eceff0 !important;
}

/* benutzer tabelle : Authentifizierung symbol */
.user-authentication-icon {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-left: 3px;
}

/* e-mail adresse in benutzer tabellen*/
.user-grid .email, .email {
    opacity: 0.75;
    font-size: 85%;
}

.grid-toolbar-button {
    padding: 2px 1px 2px 1px !important;
    border: none !important;
    background: none !important;
    margin: 0 5px 0 5px !important;
}

.grid-toolbar-actions {
    height: 30px !important;
    display: flex;
    align-items: center;
}

.grid-toolbar-actions > button > .k-button-text {
    display: flex;
    justify-content: center;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem;
    padding: 4px;
}

.grid-toolbar-actions > div {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem;
    padding-bottom: -5px !important;
    padding: 4px !important;
}

/*Hide the expand button in grid for hierarchy if there are no children*/
tr.no-children .k-hierarchy-cell * {
    display: none !important; /* your original rule */
}

tr.no-children .k-hierarchy-cell {
    pointer-events: none; /* new: ignore clicks */
    cursor: default; /* optional */
}

tr.has-children .k-hierarchy-cell * {
    cursor: pointer;
}

.statement-entry-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    width: 100%;
}

.details-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.telerik-grid-wrapper {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 10px;
    height: 100%;
}

@media (min-width: 600px) {
   .open-orders-confirmation-grid {
        max-height: 150px;
        overflow-y: auto;
   }
}

@media (max-width: 599.98px) {
   .open-orders-confirmation-grid {
        overflow-y: auto;
   }
}

.mobile-grid {
    display: grid;
    gap: 5px;
}


/********************************* Table ****************************************/

table {
    border-spacing: -10px;
    border-radius: .375rem !important;
}

tbody tr {
    border-left: 1px solid #eaeaea !important;
    border-right: 1px solid #eaeaea !important;
}

tr {
    border-bottom: 1px solid #eaeaea;
    padding: 10px !important;
}

th {
    text-align: left;
    padding: 10px 5px;
}

td {
    padding: 10px 5px;
    vertical-align: middle !important;
    border: transparent !important;
}

th:first-child {
    border-top-left-radius: .375rem !important;
}

th:last-child {
    border-top-right-radius: .375rem !important;
}

.Settings .table > :not(caption) > * > * {
    padding: 0;
}

.k-grid-header, .k-grid-footer {
    padding-inline-end: var(--kendo-scrollbar-width, 17px) !important;
}

.k-column-title {
    font-weight: 600 !important;
    opacity: 0.9;
    margin-bottom: 5px !important;
}

.table-sm tr td {
    padding: 2px 5px 2px 5px;
}

.table-sm tr th {
    padding: 2px 5px 2px 5px;
}

.table-darkgrey {
    --ct-table-color: #fff;
    --ct-table-bg: #474747;
    --ct-table-border-color: #404954;
    --ct-table-striped-bg: #3b444f;
    --ct-table-striped-color: #fff;
    --ct-table-active-bg: white;
    --ct-table-active-color: #313a46;
    --ct-table-hover-bg: white;
    --ct-table-hover-color: #313a46;
    color: var(--ct-table-color);
    border-color: var(--ct-table-border-color);
}

.table-grey {
    --ct-table-color: #474747;
    --ct-table-bg: #e2e2e2;
    --ct-table-border-color: #474747;
    --ct-table-striped-bg: #3b444f;
    --ct-table-striped-color: #fff;
    --ct-table-active-bg: white;
    --ct-table-active-color: #313a46;
    --ct-table-hover-bg: white;
    --ct-table-hover-color: #313a46;
    color: var(--ct-table-color);
    border-color: #474747;
}

tbody {
    background: #fdfdfd;
}

.td-t {
    text-decoration: line-through !important;
}

.tt-uc {
    text-transform: uppercase;
}

.table-bottom-border {
    border-bottom: solid 1px #F6F7FB !important;
}

.table-inner {
    border-radius: .375rem;
    border: 1px solid #f2f2f2;
}

.table-inner-headline {
    background: #f2f2f2;
    color: #474747;
    padding: 5px;
    border-radius: .375rem;
}

.table-inner-content {
    padding: 5px;
    word-break: break-word;
}


/********************************* Links ****************************************/

/* white-labeling affected */
a {
    color: #00abd9;
    text-decoration: none !important;
}

    /* white-labeling affected */
    a:hover {
        color: #00abd9 !important;
    }

    a:focus {
        outline: none;
    }

    a > btn-link {
        color: #0366d6;
        text-decoration: none !important;
    }

/* white-labeling affected */
.blueLink {
    color: #00abd9 !important;
    text-decoration: none !important;
}

.greyLink {
    color: #b1b5b7 !important;
}

    .greyLink:hover {
        color: #b1b5b7 !important;
    }

.blackLink {
    color: #272727 !important;
}

    .blackLink:hover {
        color: #272727 !important;
    }

.white-link {
    color: #f2f2f2 !important;
}

.clickable {
    cursor: pointer;
}

:focus {
    outline: none;
}

a > i::before {
    vertical-align: middle;
}


/********************************* Cards ****************************************/

.card {
    border: 1px #eaeaea solid !important;
}

.card-pricing-plan-tag {
    background-color: rgba(0, 171, 217, 0.2) !important;
    color: #00abd9 !important;
}

.k-selected {
    background-color: rgba(0,171,217,.3) !important;
}

.k-grid .k-table-row.highlight-row:nth-child(odd)  {
    background-color: #f7f9ff;
}

.k-grid .k-table-row.highlight-row:nth-child(even) {
    background-color: #edf2fe;
}

.k-grid .k-table-row.highlight-row:hover {
    background-color: #d2deff;
}

.k-grid .k-table-row:hover > .k-table-td {
  background-color: inherit;
}

#ExistingExternalEmails {
    height: 32.6px !important;
}

.k-chip-list.k-chip-list-md .k-chip.k-selected.k-chip-solid-base {
    background-color: #00abd9 !important;
}

.k-table-tbody .k-table-row.k-selected > .k-table-td {
    background-color: unset !important;
}

.k-table-row {
    height: 1.4rem !important;
    line-height: .8rem !important;
}


/********************************* Buttons / Inputs ****************************************/

/* white-labeling affected */
.btn {
    color: #f2f2f2 !important;
    background-color: #00abd9 !important;
    box-shadow: none;
    border-radius: .375rem;
    font-size: 0.8rem;
    outline: none;
    text-transform: uppercase;
    font-weight: 500 !important;
}

    .btn > span > i::before {
        vertical-align: middle !important;
    }

    /* white-labeling affected */
    .btn:hover {
        color: #f2f2f2 !important;
        box-shadow: none;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
    }

    .btn:focus {
        box-shadow: none !important;
    }

    .btn.disabled, .btn:disabled, fieldset:disabled {
        color: #FFF !important;
        border: 0;
        box-shadow: none;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
        cursor: not-allowed;
        font-weight: 400 !important;
        cursor: not-allowed !important;
    }

button:disabled {
    background: #d3d3d3;
    cursor: not-allowed !important;
    color: #878787 !important;
}

    button:disabled > span > i::before {
        color: #878787 !important;
    }

button > i {
    vertical-align: middle !important;
}

.btn-corner-right {
    position: relative;
    width: 50px;
    height: 100%;
    background: #00abd9;
    float: right;
    right: 0px;
    height: auto !important;
    padding: 9px 10px 9px 40px;
    margin-right: -50px !important;
    color: #fff;
    font-size: 24px !important;
    font-weight: 700;
    border: 0px solid #e9e9e9;
    -webkit-border-top-left-radius: 0.25rem;
    -webkit-border-bottom-left-radius: 0.25rem;
    -moz-border-radius-topleft: 0.25rem;
    -moz-border-radius-bottomleft: 0.25rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    cursor: pointer;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.btn-border {
    border: 1px #dee2e6 solid;
}

.btn-border-dark {
    border: 1px #dee2e6 solid;
}

.sameheight {
    flex: 1 !important;
    align-items: stretch;
}

.firststeps:hover .btn-corner-right {
    width: 120px;
    padding: 9px 40px 9px 0px;
    text-align: center;
}

/* white-labeling affected */
.btn-flat {
    color: #f2f2f2 !important;
    background-color: #00abd9 !important;
    box-shadow: none;
    border-radius: .375rem;
    font-size: 0.8rem;
    outline: none;
    height: 35px;
    padding: 5px 10px;
    cursor: pointer;
}

    .btn-flat:hover {
        color: #f2f2f2 !important;
        box-shadow: none;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
        cursor: pointer;
    }

.btn-edit {
    color: #212529 !important;
    background-color: #fcfcfc !important;
    box-shadow: none;
    border-radius: .375rem;
    outline: none;
    height: 35px;
    padding: 5px 5px !important;
    cursor: pointer;
    margin-top: -5px;
}

    .btn-edit:hover {
        color: #212529 !important;
        box-shadow: none;
        border-radius: .375rem;
        outline: none;
        height: 35px;
        padding: 5px 5px !important;
        cursor: pointer;
    }

.btn-primary {
    color: #f2f2f2;
    background-color: #00abd9;
    box-shadow: none;
    border: 0;
    border-radius: .375rem;
    font-size: 0.8rem;
    outline: none;
}

    .btn-primary:hover {
        color: #474747;
        background-color: #d3d3d3;
        box-shadow: none;
        border: 0;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
    }

.btn-white {
    color: #484848;
    background-color: #eaeaea !important;
    box-shadow: none;
    border: 0;
    border-radius: .375rem;
    font-size: 0.8rem;
    min-width: 30px;
}

    .btn-white:hover {
        color: #484848;
        background-color: #eaeaea !important;
        box-shadow: none;
        border: 0;
        border-radius: .375rem;
        font-size: 0.8rem;
    }

    .btn-white:focus {
        color: #484848;
        background-color: #eaeaea !important;
        box-shadow: none;
        border: 0;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
    }

    .btn-white:active {
        color: #484848;
        background-color: #eaeaea !important;
        box-shadow: none;
        border: 0;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
    }

.btn-grey {
    color: #474747 !important;
    background-color: #d3d3d3 !important;
    box-shadow: none;
    border-radius: .375rem;
    font-size: 0.8rem;
    outline: none;
    text-transform: uppercase;
    font-weight: 500 !important;
}

    .btn-grey:hover {
        color: #474747 !important;
        background-color: #d3d3d3 !important;
        border-color: #00abd9;
        box-shadow: none;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
        text-transform: uppercase;
        font-weight: bold;
    }

.btn-dark, .btn-dark:disabled {
    color: #f2f2f2;
    background-color: #464646 !important;
    box-shadow: none;
    border: 0;
    border-radius: .375rem;
    font-size: 0.8rem;
    border-color: #464646 !important;
    cursor: not-allowed !important;
}

.btn-outline {
    color: #00abd9 !important;
    background-color: transparent !important;
    border: 1px solid #00abd9;
    box-shadow: none;
    border-radius: .375rem;
    font-size: 0.8rem;
    outline: none;
    text-transform: uppercase;
    font-weight: 500 !important;
}


    .btn-outline:hover {
        color: #f2f2f2 !important;
        background-color: #00abd9 !important;
        border: 1px solid #00abd9;
        box-shadow: none;
        border-radius: .375rem;
        font-size: 0.8rem;
        outline: none;
        text-transform: uppercase;
        font-weight: 500 !important;
    }

.btn-outline-secondary {
    color: #484848 !important;
    background-color: #edeff1 !important;
    background-image: none !important;
    border-color: #e3e3e3 !important;
    height: 100% !important;
}

    .btn-outline-secondary:hover {
        color: #484848 !important;
        background-color: #edeff1 !important;
        background-image: none !important;
        border-color: #cfcfcf !important;
        height: 100% !important;
    }

/* white-labeling affected */
.nav-tabs.active > i {
    background: #00abd9 !important;
    padding: 5px 5px !important;
    border-radius: 50%;
    color: #FFF;
}

.nav-tabs > i {
    padding: 5px 5px !important;
    border-radius: 50%;
}

/* white-labeling affected */
.settings-nav-tab.active > i:before {
    background: #00abd9 !important;
    padding: 5px 5px !important;
    border-radius: 50%;
    width: 50px !important;
    color: #FFF;
}

.toggleBTNwrapper {
    border: 2px #f1f1f1 solid !important;
    border-radius: .375rem;
    padding: 5px;
}

.toggleBTN {
    color: #474747 !important;
    border: none !important;
    border-radius: .375rem;
    padding: 5px 10px !important;
    box-shadow: 1px 11px 24px -11px rgba(71,71,71,0.32);
    -webkit-box-shadow: 1px 11px 24px -11px rgba(71,71,71,0.32);
    -moz-box-shadow: 1px 11px 24px -11px rgba(71,71,71,0.32);
}

.toggleBTNOff {
    color: #777777 !important;
    background: #f1f1f1 !important;
    border: none !important;
    border-radius: .375rem !important;
    padding: 5px 10px !important;
}

.listview-item {
    height: 150px;
    width: 550px;
    display: inline-block;
    margin: 10px;
    border: 1px solid black;
    border-radius: .375rem;
    padding: 10px;
}

.uppercase {
    text-transform: uppercase !important;
}

.form-check-input:checked {
    background-color: #00abd9 !important;
    border-color: #00abd9;
}

.SelectMandant {
    background-color: #fcfcfc !important;
    border: 1px #484848 solid;
    border-radius: .375rem;
    width: 100%;
    height: auto;
    padding: 5px 3px;
}

.k-grid-search {
    width: 100px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 1.8rem !important;
    -webkit-transition: width .5s ease-in-out;
    -moz-transition: width .5s ease-in-out;
    -o-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}

  @media (min-width: 422.98px) and (max-width: 599.98px) {
        .k-grid-search { width: 200px !important; }
  }

    @media (max-width: 422.98px) {
        .k-grid-search { width: 135px !important; }
  }

    .k-grid-search:focus-within {
        width: 200px !important;
        overflow: hidden;
        -webkit-transition: width .5s ease-in-out;
        -moz-transition: width .5s ease-in-out;
        -o-transition: width .5s ease-in-out;
        transition: width .5s ease-in-out;
    }

.custom-dropdown-content {
    display: flex;
    align-items: center;
    flex-flow: row wrap !important;
    column-gap: 5px;
    row-gap: 2px;
    word-break: break-word;
}

.custom-chip-content {
    display: inline-flex;
    flex-flow: row wrap !important;
    row-gap: 2px;
    word-break: break-word;
}

.k-chip-label {
    font-size: 0.8rem;
    padding: 0;
}

.k-numerictextbox.k-input {
    min-width: 2.8rem;
    min-height: 1.8rem;
    height: 34.25px !important;
}

    .k-numerictextbox > .k-input-inner {
        background-color: #fff;
        padding: 0.57rem 0.75rem !important;
    }

    .k-numerictextbox.k-input.numerictextbox-paragraph {
        min-height: 10px;
        height: 20px !important;
    }

.k-datepicker {
    height: 34.25px;
}

    .k-datepicker > .k-input-inner {
        background: #fbfbfb !important;
        font-size: .7rem !important;
        line-height: .7rem !important;
    }

.k-datepicker-small {
    height: 1.6rem !important;
}

.k-dropdowngrid {
    height: 34.25px;
    padding: 0 !important;
}

.k-dropdownlist {
    height: 34.25px;
}

    .k-dropdownlist:focus,
    .k-dropdownlist:active {
        outline: none !important;
        box-shadow: none !important;
        user-select: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

.k-combobox {
    padding: 0 !important;
}

.k-upload {
    border-width: 0 !important;
    border-style: none !important;
    background: #fefefe !important;
    border: 3px dotted #dee2e6 !important;
    border-radius: .375rem !important;
}

    .k-upload .k-dropzone {
    }

.k-upload-button {
    border-radius: .375rem !important;
    color: #474747 !important;
}

.k-dropzone-hint {
    margin-left: 10px;
}

.k-numerictextbox:has(.k-input-spinner, .k-spin-button) {
    padding: 0 !important;
}

.k-button-flat-primary {
    color: #00abd9 !important;
}

.k-pager > span > span {
    font-size: 0.8rem !important;
    line-height: 1rem !important;
}

.k-pager-numbers-wrap > span {
    font-size: 0.8rem !important;
    line-height: 1rem !important;
}

.k-input-md .k-input-values, .k-picker-md .k-input-values {
    padding: 0px !important;
    padding-left: 2px !important;
}

.k-list-ul > li > span {
    font-size: 0.8rem !important;
    line-height: 1rem !important;
}

.k-pager-input .k-numerictextbox {
    width: 3.1rem;
    font-size: 0.8rem !important;
    line-height: 1rem !important;
    margin-top: -13px !important;
}

.form-switch .form-check-input {
    width: 3.3rem !important;
    height: 1.8rem !important;
}

.form-label.clickable {
    line-height: 1rem !important;
}

btn-primary {
    background: #00abd9 !important;
}

.form-label {
    font-size: .8rem !important;
    font-weight: 400 !important;
    margin-bottom: 0px;
    color: #474747;
    opacity: 0.7;
}

.form-control-sm {
    border-radius: .375rem !important;
}

.form-control:not(.quick-nav, .k-input) {
    background: #FFF;
    color: #474747;
    padding: 0.54rem 0.75rem !important;
    font-family: Roboto-Regular;
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: 400;
}

.form-control:is(.k-input) {
    padding: unset !important;
}

.form-control:is(.quick-nav) {
    padding: 0.375rem 1.5rem !important;
}

/* white-labeling affected */
.form-control:focus {
    background: #FFF !important;
    border-color: #00abd9;
    box-shadow: none;
}

.input-group-sm > .input-group-text {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

/* white-labeling affected */
.btn-cancel {
    float: right;
    background: none !important;
    border: 1px solid transparent !important;
    border-radius: .375rem;
    box-shadow: none;
    color: #535353 !important;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 10px;
    margin-top: 14px !important;
    outline: none;
    font-size: 0.8rem;
    line-height: .9rem;
    border: 1px solid transparent;
}

    /* white-labeling affected */
    .btn-cancel:hover {
        background: none !important;
        float: right;
        border-radius: .375rem;
        box-shadow: none;
        color: #535353 !important;
        text-transform: uppercase;
        font-weight: 500;
        margin-right: 10px;
        margin-top: 12px;
        outline: none;
        font-size: 0.8rem;
        line-height: .9rem;
        border: 1px solid #cfcfcf !important;
    }

.btn-primary.disabled, .btn-primary:disabled, fieldset:disabled .btn-primary {
    background-color: #B0B3B9 !important;
    cursor: not-allowed !important;
}

.btn-grid-toolbar {
    background: transparent !important;
    border: none !important;
    color: #484848 !important;
    padding: 0px 6px 0 6px;
    height: 100%;
    margin: 0px !important;
}

    .btn-grid-toolbar:hover {
        color: #484848 !important;
        border-radius: 0 !important;
        background: #EEEEEE !important;
        color: #00abd9 !important;
    }

.btn-submit-row {
    width: 100%;
    border-top: 1px solid #F0F2F4;
    margin-top: 10px;
}

.k-wizard-buttons-right .k-button-solid-primary {
    background-color: #00abd9 !important;
    box-shadow: none !important;
    border-radius: .375rem !important;
    padding: 0.45rem 0.9rem;
}

    .k-wizard-buttons-right .k-button-solid-primary .k-button-text {
        background-color: #00abd9 !important;
        font-weight: 600 !important;
        color: #f2f2f2 !important;
        font-size: 0.8rem !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: .375rem !important;
        text-transform: uppercase;
    }

.k-wizard-buttons-right .k-button-solid-base {
    background: none !important;
    border: solid 1px transparent;
    box-shadow: none;
    color: #4f4f4f;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    margin-right: 10px;
    margin-top: 1px;
}

    .k-wizard-buttons-right .k-button-solid-base:hover {
        background: none !important;
        border: solid 1px #DEE2E6;
        color: #4f4f4f;
        text-transform: uppercase;
        font-weight: 500;
        padding: 0.45rem 0.9rem;
        margin-right: 10px;
        margin-top: 1px;
    }

    .k-wizard-buttons-right .k-button-solid-base .k-button-text {
        background-color: none !important;
        color: #3d3d3d !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: .375rem !important;
        text-transform: uppercase;
    }

.k-wizard {
    font-size: inherit;
}

.k-wizard-horizontal .k-wizard-steps {
    margin-top: 0 !important;
    padding-bottom: 0;
}

.toolbar-button > .k-button-text {
    display: inline-flex;
    align-items: center;
}

    .toolbar-button > .k-button-text > i {
        font-size: 1.0rem !important;
    }

    .toolbar-button > .k-button-text > span {
        font-size: 0.82rem;
    }

.k-toolbar > button:disabled {
    background: #fff !important;
}

.readonly-input {
    background: #f7f7f7 !important;
    pointer-events: none !important;
    color: #777777 !important;
    opacity: 0.8;
}

    .readonly-input:focus {
        background: #f7f7f7 !important;
        pointer-events: none !important;
        color: #777777 !important;
        opacity: 0.8;
    }

.k-textbox > input {
    padding: 0.54rem 0.75rem !important;
}

[type="checkbox"] + label {
    margin-left: 5px;
}

.BigCheckbox {
    transform: scale(1.5);
    margin-left: 4px !important;
}

.ExecuteDatetimePicker > div {
    justify-content: end !important;
}

.FloatBTNright > div > div > button {
    float: right !important;
    text-align: right !important;
    align-self: flex-end !important;
}

#DateRangePickerSubmit {
    border: none !important;
}

.k-button.k-button-flat {
    border: none !important;
}

input[readonly] {
    border: 1px solid #dee2e6 !important;
}

.k-searchbox > span > .k-input-inner {
    border: 1px solid #fff !important;
}

.k-checkbox:focus {
    box-shadow: none !important;
    border: 1px solid #00abd9 !important;
}

.k-checkbox:checked:focus, .k-checkbox.k-checked.k-focus {
    box-shadow: none !important;
    border: 1px solid #00abd9 !important;
}

/* white-labeling affected */
.k-focus {
    box-shadow: none !important;
    outline: 0 !important;
}

/* white-labeling affected */
.k-input-solid:focus-within {
    box-shadow: none !important;
    border: 1px solid #00abd9 !important;
}

.btn-menu-light {
    background: #E8ECED !important;
    color: #474747 !important;
}

.btn-menu-dark {
    background: #313A46 !important;
}

    .btn-menu-dark > .k-button-text {
        color: #A6A6A7 !important;
    }

/*the content of the date range picker is changing on click (switching between an static icon and an animated loading icon)
    if the height is not fixed, the height of the button will change dynamically depending on the current content */
.btn-date-range-picker {
    height: 1.6rem !important;
}

/* white-labeling affected */
.grid-cell-button {
    background: none;
    border: none !important;
    padding: 0;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 25px;
    font-size: 125%;
    color: #00ABD9;
}

.k-split-button {
    height: 30px !important;
    padding: 1px 0 !important;
}

.DebtorBTN {
    border: 1px solid #00ABD9;
    border-radius: .375rem;
    padding: 2px 5px !important;
    line-height: 0.8rem;
    margin-bottom: 2px !important;
}

.BankAccountBTN {
    position: absolute !important;
    top: 50px;
    border: 1px solid #00ABD9;
    border-radius: .375rem;
    padding: 2px 5px !important;
    margin-top: -5px !important;
    line-height: 0.8rem;
}


.copy-to-clipboard-button {
    border: none;
    background: transparent;
    font-size: 90%;
    padding: 0;
    color: #858585;
}

.SameHeight > span > input {
    height: 32.6px !important;
    border-color: #b3b6ba !important;
}

.InputSameHeight {
    height: 34.6px;
}

.SensitiveInfoBox {
    height: 35.26px;
    background-color: #f2f2f2;
    border-radius: .375rem;
    border: 1px solid rgb(222, 226, 230);
    color: grey;
}

    .SensitiveInfoBox > div > div {
        margin-left: 14px;
        margin-top: -3px;
    }

    .SensitiveInfoBox:hover {
        cursor: not-allowed;
    }

.layout-button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: .375rem;
    max-width: 60px; /* Limit the maximum width */
    max-height: 60px; /* Limit the maximum height */
    overflow: hidden; /* Hide overflow if content exceeds the limit */
}

.k-chip-solid-base {
    background: #d3d3d3 !important;
}

.input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select, .input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-color: #b3b6ba;
}

input.input-required + span.input-group-text {
    border-top: #798189 1.5px solid !important;
    border-right: #798189 1.5px solid !important;
    border-bottom: #798189 1.5px solid !important;
}

.k-button-solid-base {
    border-color: #b3b6ba;
}

.LoginInput {
    border-color: #b3b6ba !important;
}

.form-check-label {
    font-weight: normal !important;
}

.k-checkbox-wrap {
    display: unset !important;
}

    .k-checkbox-wrap > .form-label {
        position: absolute;
        padding-top: 5px !important;
    }

td.center-cell > span > .k-checkbox-wrap {
    display: inline-flex !important;
}

th.k-header > .k-checkbox-wrap {
    display: inline-flex !important;
}

#PaymentStatusChangesId > div > div > div > span {
    display: inline-flex !important;
}

.LabelHeight > .k-checkbox-wrap {
    display: inline-flex !important;
}

.inline-Tooltip {
    margin-top: -19px;
    margin-left: 185px;
}

.AddNewCheckboxTooltip {
    top: -16.5px !important;
    left: 215px !important;
}

.PartentMulitSelect > div > div > input {
    height: 33px !important;
}

.ToolbarBTN {
    height: 1.6rem !important;
    background: transparent !important;
}

.k-dropdownlist > .k-button-md {
    padding-inline: .375rem !important;
}

.k-pager-md {
    padding-block: unset !important;
}

input[type='checkbox'] {
    position: relative;
    margin-top: -3.5px;
    margin-right: 5px;
}

.input-iban-borderradius {
    -webkit-border-top-right-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
    -moz-border-radius-topright: 0 !important;
    -moz-border-radius-bottomright: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-iban-check {
    width: 29px;
    -webkit-border-top-right-radius: .375rem !important;
    -webkit-border-bottom-right-radius: .375rem !important;
    -moz-border-radius-topright: .375rem !important;
    -moz-border-radius-bottomright: .375rem !important;
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}


.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: 1px solid #9bd7e7;
}

/* Grid Search Inputs */
.k-grid-toolbar > div > .k-split-button {
    height: 30px !important;
    padding: 1px 0 !important;
    margin-right: 10px !important;
    margin-left: 5px;
}

.k-toolbar-item > .k-split-button {
    height: 1.6rem !important;
    padding: 0px !important;
}

    .k-toolbar-item > .k-split-button > button {
        border-left: 1px solid #d3d3d3 !important;
        background: none !important;
    }

        .k-toolbar-item > .k-split-button > button > .k-button-text {
            display: flex;
            min-width: fit-content;
        }

            .k-toolbar-item > .k-split-button > button > span > i {
                float: left !important;
            }

.k-grid-toolbar > .k-menu-button {
    height: 1.6rem !important;
}


/********************************* Toast **********************************/

.topmost {
    z-index: 10005 !important;
    margin-right: 25px;
    margin-bottom: 50px;
}

.jq-toast-single {
    margin-top: 25px !important;
}

.lose-jq-toast-single {
    background: #474747 !important;
}

.toast-header {
    color: #fff !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-size: 95%;
}

.notify-icon {
    float: left;
    height: 26px;
    width: 26px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.btn-close-notification {
    background: unset !important;
    border: none !important;
    float: right;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background: #00abd9 !important;
}

#FilterBankAccountsWithoutBalanceCheckbox {
    padding: 0 !important;
    margin: 0 !important;
}


/********************************* Import **********************************/

.import-content {
    border: 3px dotted #fd6c3e;
    border-radius: 10px;
}

.import-cardbody {
    padding: 10px;
    text-align: justify;
}


/********************************* Prism **********************************/

code[class*=language-], pre[class*=language-] {
    color: #000;
    background: 0 0;
    font-family: 'Roboto-Regular','Roboto Mono';
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: 0;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    text-shadow: none !important;
    border-radius: 5px !important;
}

pre[class*=language-] {
    border-radius: .375rem;
    border: 0 !important;
    box-shadow: 1px 1px 0.5em #000 inset;
    margin: 0.5em 0;
    overflow: auto;
    padding: 1em;
}

pre[class*=language-] {
    position: relative;
    margin: .5em 0;
    overflow: visible;
    padding: 1px
}

    pre[class*=language-] > code {
        position: relative;
        z-index: 1;
        border-left: 10px solid #00abd9;
        box-shadow: -1px 0 0 0 #00abd9,0 0 0 1px #dfdfdf;
        background-color: #fdfdfd;
        background-image: linear-gradient(transparent 50%,rgba(69,142,209,.04) 50%);
        background-size: 3em 3em;
        background-origin: content-box;
        background-attachment: local;
        font-weight: 300 !important;
    }

code[class*=language-] {
    max-height: inherit;
    height: inherit;
    padding: 0 1em;
    display: block;
    overflow: auto
}

:not(pre) > code[class*=language-], pre[class*=language-] {
    background-color: #fdfdfd;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 1em
}

:not(pre) > code[class*=language-] {
    position: relative;
    padding: .2em;
    border-radius: .375rem;
    color: #c92c2c;
    border: 1px solid rgba(0,0,0,.1);
    display: inline;
    white-space: normal
}

pre[class*=language-]:after, pre[class*=language-]:before {
    content: '';
    display: block;
    position: absolute;
    bottom: .75em;
    left: .18em;
    width: 40%;
    height: 20%;
    max-height: 13em;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

pre[class*=language-]:after {
    right: .75em;
    left: auto;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg)
}

.token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
    color: #7d8b99
}

.token.punctuation {
    color: #5f6364
}

.token.boolean, .token.constant, .token.deleted, .token.function-name, .token.number, .token.property, .token.symbol, .token.tag {
    color: #c92c2c
}

.token.attr-name, .token.builtin, .token.char, .token.function, .token.inserted, .token.selector, .token.string {
    color: #2f9c0a
}

.token.entity, .token.operator, .token.url, .token.variable {
    color: #a67f59;
    background: rgba(255,255,255,.5)
}

.token.atrule, .token.attr-value, .token.class-name, .token.keyword {
    color: #1990b8
}

.token.important, .token.regex {
    color: #e90
}

.language-css .token.string, .style .token.string {
    color: #a67f59;
    background: rgba(255,255,255,.5)
}

.token.important {
    font-weight: 400
}

.token.bold {
    font-weight: 700
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

.token.namespace {
    opacity: .7
}

@media screen and (max-width:767px) {
    pre[class*=language-]:after, pre[class*=language-]:before {
        bottom: 14px;
        box-shadow: none
    }
}

@media screen and (max-width: 991.5px) {
    .k-toolbar-item > .k-split-button > button > span {
        min-width: 0 !important;
    }
}

pre[class*=language-].line-numbers.line-numbers {
    padding-left: 0
}

    pre[class*=language-].line-numbers.line-numbers code {
        padding-left: 3.8em;
    }

    pre[class*=language-].line-numbers.line-numbers .line-numbers-rows {
        left: 0
    }

pre[class*=language-][data-line] {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0
}

pre[data-line] code {
    position: relative;
    padding-left: 4em
}

pre .line-highlight {
    margin-top: 0
}

pre[class*=language-].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber
}

    pre[class*=language-].line-numbers > code {
        position: relative;
        white-space: inherit
    }

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.APICommunicationRequestHeader > .code-toolbar > pre > .language-plain > .line-numbers-rows {
    line-height: 1.35rem !important;
}

.APICommunicationRequestHeader > .code-toolbar > pre > .language-javascript > .line-numbers-rows {
    line-height: 1.35rem !important;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber
}

    .line-numbers-rows > span:before {
        content: counter(linenumber);
        color: #999;
        display: block;
        padding-right: .8em;
        text-align: right
    }

.token a {
    color: inherit
}

div.code-toolbar {
    position: relative;
    border-radius: 5px !important;
}

    div.code-toolbar > .toolbar {
        position: absolute;
        z-index: 10;
        top: .3em;
        right: .2em;
        transition: opacity .3s ease-in-out;
        opacity: 0
    }

    div.code-toolbar:hover > .toolbar {
        opacity: 1
    }

    div.code-toolbar:focus-within > .toolbar {
        opacity: 1
    }

    div.code-toolbar > .toolbar > .toolbar-item {
        display: inline-block
    }

        div.code-toolbar > .toolbar > .toolbar-item > a {
            cursor: pointer
        }

        div.code-toolbar > .toolbar > .toolbar-item > button {
            background: 0 0;
            border: 0;
            color: inherit;
            font: inherit;
            line-height: normal;
            overflow: visible;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none
        }

        div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
            color: #bbb;
            font-size: .8em;
            padding: 0 .5em;
            background: #f5f2f0;
            background: rgba(224,224,224,.2);
            box-shadow: 0 2px 0 0 rgba(0,0,0,.2);
            border-radius: .375rem
        }

            div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > button:focus, div.code-toolbar > .toolbar > .toolbar-item > button:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover {
                color: inherit;
                text-decoration: none
            }

.language-plain::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-markup::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-markup > span::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-markup > span > span::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-markup > span > span > span::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-javascript::selection {
    color: #fff;
    background: #00abd9 !important;
}

.language-javascript > span::selection {
    color: #fff;
    background: #00abd9 !important;
}


/********************************* Stepper *********************************/

.k-stepper {
    margin-top: 10px !important;
    margin-bottom: 40px !important;
}

.k-step-done > .k-step-link > .k-step-indicator > .k-step-indicator-icon {
    color: #F2F2F2 !important;
}

.k-step-indicator > .k-step-indicator-icon {
    display: none !important;
}


/********************************* Toolbar *********************************/

.k-toolbar {
    -webkit-border-top-left-radius: .37rem;
    -webkit-border-top-right-radius: .37rem;
    -moz-border-radius-topleft: .37rem;
    -moz-border-radius-topright: .37rem;
    border-top-left-radius: .37rem;
    border-top-right-radius: .37rem;
    justify-content: flex-start !important;
}

.k-toolbar-md {
    padding: 0 0 0 2px !important;
}

.toolbar-button[title="Hilfe"] {
    margin-left: 10px !important;
}

.toolbar-button[title="Help"] {
    margin-left: 10px !important;
}

.k-popup > .k-menu-group > .k-disabled > span > span > i {
    color: grey !important;
    font-size: 90%;
}

.k-popup > .k-menu-group > .k-disabled > span > span > span {
    color: grey !important;
    font-size: 0.82rem;
}

.toolbar-frame {
    height: 2rem !important;
    background: none !important;
    border: none !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin: 0 0 2px 0 !important;
}

.toolbar-highlight {
    border: 2px solid #00abd9 !important;
    border-radius: .375rem !important;
}

.k-toolbar-button {
    background: transparent !important;
    border: none !important;
}

    .k-toolbar-button:hover {
        background: transparent;
        border: none;
    }

    .k-toolbar-button:is(.k-disabled) > span > i {
        color: grey !important;
    }

.toolbar-btn-secondary {
    height: 1.6rem !important;
    border: 1px solid #d3d3d3 !important;
}

    .toolbar-btn-secondary > span {
        padding-top: 1.43px;
        padding-bottom: 1.43px;
    }

.toolbar-btn-primary {
    height: 25.29px !important;
    border-left: 15px solid #00abd9 !important;
    border-right: 1px solid #00abd9 !important;
    border-top: 1px solid #00abd9 !important;
    border-bottom: 1px solid #00abd9 !important;
    padding-left: 2px !important;
    padding-right: 6px !important;
}

    .toolbar-btn-primary > .k-button-text > span {
        padding-top: 2px !important;
    }

.toolbar-mobile-button {
    border: 1px solid #d3d3d3 !important;
    min-height: 40px;
    height: fit-content;
    white-space: normal !important;
    word-wrap: break-word;
}

    .toolbar-mobile-button:is(.k-disabled) > span > div > i {
        color: grey !important;
    }

.button-inner-content {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
}

.button-inner-content > i {
    flex: 0 0 auto;
}

.only-icon-button {
    align-items: center;
    font-size: medium;
    flex: 1 1 0;
    min-width: 0;
}

.button-text {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-mobile-button .k-button-text {
    display: flex;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
}

.SkipBTN {
    margin-top: 10px !important;
}

    .SkipBTN > button {
        border: none !important;
    }

        .SkipBTN > button:first-child {
            padding-left: 0px;
        }

/* Remove all borders from both buttons */
.toolbar-split-button .telerik-blazor.k-button.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
    border: none !important;
}

/* Add a left border to the second button only */
.toolbar-split-button .telerik-blazor.k-button.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base:nth-child(2) {
    border-left: 1px solid #ccc !important; /* Adjust the color and width as needed */
}

.custom-toolbar {
    margin-bottom: 5px !important;
}


/********************************* Ribbons **********************************/

.ribbon-box .ribbon-two-success span {
    background: #74d171;
}

.ribbon-box .ribbon-two-secondary span {
    background: #d3d3d3;
    color: #474747;
}


/********************************* Crawler **********************************/

.disallowed-for-crawlers {
    display: none;
}


/********************************* Helpers **********************************/

/* white-labeling affected */
.ci-windata-blue {
    color: #00abd9 !important;
}

.ci-windata-text {
    color: #474747 !important;
}

.ci-windata-gray {
    color: #313A46
}

.ci-windata-white {
    color: #f2f2f2 !important;
}

.nowrap {
    white-space: nowrap
}

/* white-labeling affected */
.ci-background-windata-blue {
    background: #00abd9 !important;
}

.ci-background-windata-grey {
    background: #d3d3d3 !important;
}

.ci-background-windata-lightgrey {
    background: #f2f2f2 !important;
}

.ci-background-windata-whitegrey {
    background: #f1f1f1 !important;
}

.ci-background-windata-middlegrey {
    background: #f5f5f5 !important;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
    justify-content: flex-end;
}

.flex-float-right {
    float: right;
    justify-content: flex-end;
}

.text-right .k-input-inner {
    text-align: right;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-middle {
    vertical-align: middle !important;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.opacity08 {
    opacity: 0.8;
}

.opacity07 {
    opacity: 0.7;
}

.opacity06 {
    opacity: 0.6;
}

.opacity05 {
    opacity: 0.5;
}

.opacity-05 {
    opacity: 0.5;
}

.ml-0 {
    margin-left: 0px;
    overflow-x: hidden;
}

.ml-05 {
    margin-left: 5px;
}

.ml-1 {
    margin-left: 10px;
}

.mt-05 {
    margin-top: 5px;
}

.mt-08 {
    margin-top: 8px !important;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px !important;
}

.mt-3 {
    margin-top: 30px;
}

.mt-3-5 {
    margin-top: 28px;
}

.mt-5 {
    margin-top: 2.5rem !important;
}

.mt-025rem {
  margin-top: .25rem !important;
}

.mb-05 {
    margin-bottom: 5px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-5 {
    margin-bottom: 2.5rem !important;
}

.ml-2 {
    margin-left: 20px;
}

.mr-0 {
    margin-right: 0px;
}

.mr-05 {
    margin-right: 5px;
}

.mr-1 {
    margin-right: 10px;
}

.mr-2 {
    margin-right: 20px;
}

.pl-05 {
    padding-left: 5px;
}

.pl-1 {
    padding-left: 10px;
}

.pl-2 {
    padding-left: 20px;
}

.plr-01 {
    padding-left: 1px;
    padding-right: 1px;
}

.pr-1 {
    padding-right: 10px;
}

.pr-2 {
    padding-right: 20px;
}

.pr-1-5-rem {
    padding-right: 1.5rem
}

.text-icon-left {
    margin-right: 5px;
}

.text-icon-right {
    margin-left: 5px;
}

.text-margin-left {
    margin-left: 5px;
}

.k-svg-i-caret-alt-down {
    color: #808182 !important;
}

.dropdown-item .badge {
    margin-left: 5px;
}

.DevisenmarktDropdown {
    height: 30px;
}

.badge {
    margin-left: 5px !important;
    margin-bottom: 2px !important;
}

.badge-big {
    margin-top: -3px !important;
    padding-top: 5px !important;
    line-height: 1rem !important;
}

.fontweight500 {
    font-weight: 500 !important;
}

.fontweight600 {
    font-weight: 600 !important;
}

.material-icons {
    vertical-align: bottom !important;
}

.icon-toolbar {
    font-size: 0.9rem !important;
}

.w-600 {
    width: 600px !important;
}

.w-250 {
    width: 250px !important;
}

.w-200 {
    width: 200px !important;
}

.w-150 {
    width: 150px !important;
}

.w-100px {
    width: 100px;
}

.w-100 {
    width: 100% !important;
}

.w-90 {
    width: 90% !important;
}

.w-80 {
    width: 80% !important;
}

.w-70 {
    width: 70% !important;
}

.w-60 {
    width: 60% !important;
}

.w-50-rem {
    width: 50rem;
}

.w-50 {
    width: 50% !important;
}

.w-40-rem {
    width: 40rem;
}

.w-40 {
    width: 40% !important;
}

.w-25 {
    width: 25% !important;
}

.w-10 {
    width: 10% !important;
}

.w-25px {
    width: 25px !important;
}

.min-width-550 {
    min-width: 550px;
}

.h-100 {
    height: 100% !important;
}

.h-100px {
    height: 100px !important;
}

.h-50 {
    height: 50% !important;
}

.h-multiselect{
    min-height: 34.25px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.min-height-380 {
    min-height: 380px !important;
}

.max-h-700 {
    max-height: 700px !important;
}

.max-h-600 {
    max-height: 600px !important;
}

.max-h-450 {
    max-height: 450px !important;
}

.min-height-150 {
    min-height: 150px !important;
}

.text-tiny {
    font-size: 70% !important;
}

.text-small {
    font-size: 90% !important;
}

.text-medium {
    font-size: 95% !important;
}

.text-large {
    font-size: 115% !important;
}

.text-x-large {
    font-size: 130% !important;
}

.text-xx-large {
    font-size: 150% !important;
}

.text-xxx-large {
    font-size: 160% !important;
    line-height: normal !important;
}

.icon-xxx-large {
    font-size: 200% !important;
    line-height: normal !important;
}

.shadows {
    -webkit-box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.32) !important;
    box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.32) !important;
}

.v-center {
    display: flex;
    align-items: center;
}

.align-flex-end {
    display: flex;
    align-items: flex-end;
}

.right-align {
    margin-left: auto !important;
}

.m-h-100 {
    min-height: 100px;
}

.k-tabstrip-content {
    overflow-x: hidden !important;
}

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

.position-relative {
    position: relative;
}

.vertical-top {
    vertical-align: top !important;
}

.vertical-middle {
    vertical-align: middle !important;
}

.line-height-normal {
    line-height: normal;
}

.truncated-div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-margin-bottom-no-border {
    margin-bottom: 3px;
    border: 0;
}

.input-group-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.row > span.transactions-view {
    padding-left: 0px;
    margin-bottom: 5px;
}

.row > span:first-child {
  margin-right: 20px; /* z. B. anderer Abstand */
}

.transactions-view.transactions-checkbox.text-muted {
    margin-bottom: 2px;
    margin-top: 2px;
}

.row > .centered-checkbox {
    padding-left: 0px;
    display: block;
}

ul.transactions-radio {
    padding-bottom: 2px;
}


/********************************* Responsive ***********************/

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar {
        height: 96.6vh;
        position: sticky;
        top: 0;
        overflow: hidden;
    }

    .main > div {
        margin-bottom: 1rem !important;
        */ padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.statement-entry-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    width: 100%;
}

@media (min-width: 449.98px) {
    .headlinewindow { letter-spacing: 1px; }
}

@media (max-width: 599.98px) {
    .headlinewindow {
        width:auto !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.mobile-toolbar {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.mobile-toolbar > .col-6{
    flex: 1 1 0;
}

@media (max-width: 575.98px) {
    .k-stepper .k-step-list .k-step {
        margin-top: 0px !important;
    }

    .k-wizard-vertical .k-wizard-steps {
        margin-left: 5px !important;
    }

    .k-wizard .k-wizard-buttons {
        margin-top: 10px !important;
    }

    .k-wizard .k-wizard-step {
        padding: 0px !important;
    }

    .k-wizard-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .k-button-md {
        padding: 3px 12px !important;
    }

    .k-list-ul li:nth-child(odd), .list-group li:nth-child(odd) {
      background-color: #fdfdfd;
    }

    .k-list-ul li:nth-child(even), .list-group li:nth-child(even) {
      background-color: #ececec;
    }

    .k-list-ul li + li,
    .list-group li + li {
      border-top: 1px solid #474747 !important;
    }

    .mobile-dropdown-button {
        font-size: 1.2rem !important;
        padding: 0.5rem !important;
    }

    .mobile-refresh-button {
        font-size: 1.2rem !important;
        padding: 0.5rem !important;
    }

    .k-animation-container {
        max-width: 95vw !important;
        min-width: 80vw !important;
    }

    .mobile-searchbox {
        height: 33px !important;
    }

    .k-item {
        padding: 1rem;
    }

    .amount-positive {
        float: none;
   }

    .amount-negative {
        float: none;
    }
}

@media (min-width: 576px) {
    .edit-ebics-key {
        width: 400px;
    }
}

.k-listbox.mobile {
    width: 100%;
    height: 100%;
    border-radius: 0.375rem, 0.375rem;
}

/* Mobilelist */
.list-scroll-container {
    flex: 1 1 auto;
    background-color: #FDFDFD;
    overflow-y: auto;
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 0.5rem;
}

.list-toolbar {
    background: #EDEFF0;
    padding: 5px;
    flex: 0 0 auto;
}

.list-container {
    border: #c0c3c4 1px solid;
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
}

.list-group-item {
    padding: 5px;
}

.list-group-item.active {
    background-color: #b1e5f3 !important;
    color: #474747;
    border-color: #eaeaea;
}

.mobile-date-range-picker {
    display: flex;
    flex-direction: column;
    row-gap: .25rem;
}

.mobile-datepicker {
    width: 250px !important;
}

.date-row {
    display: flex;
    align-items: center;
    column-gap: .4rem;
}


/********************************* Progressive Web App Button **********************************/

/* 29.11.22 bug_le in css/hyper/app-saas ... .css : min-height: 1700px; */
html[data-sidenav-size=condensed]:not(.authentication-bg), html[data-sidenav-size=condensed]:not(.authentication-bg) .wrapper {
    min-height: 600px !important;
}


/********************************* Jumbotron ****************************************/

.my-4 {
    margin-left: 0;
}


/********************************* Status ****************************************/

/* white-labeling affected */
.status-kon-accepted {
    color: rgba(0,171,217, .5)
}

.status-kon-rejected {
    color: rgba(253,108,62, 1)
}

/* white-labeling affected */
.status-kon-accepted-and-queued {
    color: rgba(0,171,217, 1)
}

/* white-labeling affected */
.status-fin-upload-succeeded {
    color: rgba(0,171,217, 1)
}

.status-fin-upload-unclear {
    color: rgba(253,108,62, .5)
}

.status-fin-upload-failed {
    color: rgba(253,108,62, 1)
}

/* white-labeling affected */
.status-fin-veu-forwarded {
    color: rgba(0,171,217, .5)
}

.status-fin-veu-canceled {
    color: rgba(253,108,62, .5)
}

/* white-labeling affected */
.status-fin-accepted {
    color: rgba(0,171,217, .5)
}

/* white-labeling affected */
.status-fin-confirmed {
    color: rgba(0,171,217, 1)
}

/* white-labeling affected */
.status-fin-partially-accepted {
    color: rgba(0,171,217, .5)
}

.status-fin-rejected {
    color: rgba(253,108,62, 1)
}

.status-fin-processing-stoped {
    color: rgba(253,108,62, 1)
}

/* white-labeling affected */
.status-fin-processing {
    color: rgba(0,171,217, 1)
}


/********************************* Quick Search Results *********************************/

.search-result-content {
    display: flex;
    justify-content: flex-start;
}

.search-result-col-1 {
    width: 20px;
    margin-left: 3px;
    opacity: .8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 3px;
}

.search-result-col-2 {
    width: 185px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 5px;
}

.search-result-col-3 {
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-result-col-4 {
    width: 90px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 3px;
}

.search-result-col-4-amount-positive {
    width: 90px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 3px;
    font-weight: bold;
    color: #4d9e4a !important;
}

.search-result-col-4-amount-negative {
    width: 90px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 3px;
    font-weight: bold;
    color: #fd6c3e !important;
}

.search-result-col-5 {
    width: 40px;
    overflow: hidden;
    white-space: nowrap;
}

.search-result-col-6 {
    width: 60px;
    opacity: .8;
    white-space: nowrap;
}

.link-label {
    color: #00abd9 !important;
    text-decoration: underline !important;
}

.k-popup > .k-list > .k-list-group-sticky-header {
    border-bottom: none !important;
}

.k-menu-group .k-item.k-focus > .k-link {
    box-shadow: none !important;
}

.k-list-content > .k-list-ul > .k-list-group-item[role="group"] {
    padding-top: 10px !important;
}

.k-list-item + div .show-all-row {
    margin: 5px 0 !important;
}

.card {
    height: fit-content;
    padding: 10px;
    box-shadow: none;
}

.k-menu-group-md .k-menu-link {
    padding-inline-end: var(--kendo-spacing-4, 1rem) !important;
}

.k-menu-link-text {
    max-width: fit-content;
}


/********************************* DropDowns ****************************************/

.dropdown-item-top-nav {
    display: flex;
    align-items: center;
}

    .dropdown-item-top-nav > span > i {
        padding-right: 5px;
    }

.k-dropdownlist.dropdown-list > .k-input-inner {
    background-color: #DEE2E6;
}

.k-dropdownlist.dropdown-list > button {
    background-color: #DEE2E6 !important;
}

.contact-filter-select{
    width: 10rem !important;
    height: 1.6rem;
}

.k-dropdownlist.contact-filter-select.k-focus {
    border-color: #b3b6ba !important;
}

@media (max-width: 575.98px) {
    .contact-filter-select{
           height: 2rem;
    }
}

.dropdown-payment-form {
    height: 1.6rem;
}


/********************************* Centered Things ****************************************/

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

.centered-datepicker {
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.centered-datepicker .small{
    display: flex;
    align-items: center;
    padding: 0;
}

.k-datepicker-small.float-left{
    float:none !important;
}

.centered-checkbox {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.centered-checkbox > i {
    margin-top: 0px !important;
}

.spacing-rows-checkbox {
   display: grid;
   gap: 5px;
}

.spacing-top-nav-user {
    gap: 2px;
}

.centered-text {
    display: flex;
    align-items: center;
}

.centered-text-icon {
    display: flex;
    gap: 5px;
}

.align-items-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


/********************************* Drawer ****************************************/

.drawer-container {
    margin: 0px auto;
    width: 100%;
}

.k-drawer-container {
    position: relative;
    width: 100%;
    border-bottom: inset;
    border-bottom-width: 1px;
    padding: 3px 8px;
    color: #656565;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.k-drawer {
    width: fit-content;
}

.k-drawer-wrapper {
    width: fit-content !important;
}

li > .k-drawer-item {
    width: fit-content;
}

.k-drawer-item {
    align-items: center;
}

.item-badge {
    display: flex;
}

.badge-drawer-collapsed {
    margin-left: 5px;
    height: fit-content;
    margin-top: 7px;
}

.drawer-page {
    margin: 0px;
}

.drawer-content {
    margin-left: 5px;
}

.drawer-card {
    border: none !important;
    padding-top: 2px !important;
}

.drawer-body {
    padding: 0px 10px;
}

.drawer-text-panel{
    margin-top: -5px;
    margin-left: 5px;
}

.drawer-toolbar-button {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 14px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
}

.k-drawer-expanded > .k-drawer-content > .drawer-page > .drawer-content > .mobile-toolbar > .col-6 > button > span > span {
    display: none;
}


/********************************* Too Small for View ****************************************/

.small-mobile-view { display: none; }

@media (max-width: 333.98px) {
    .small-mobile-view { display: block; }
    .normal-view { display: none !important; }
    .k-overlay { display: none !important; }
}

/********************************* First Steps Screen ****************************************/

.firststeps-background {
    background:#f6f7fb
}

 @media (max-width: 575.98px) {
    .firststeps-padding { padding: 15px 10px !important; }
 }

.firststeps-padding {
    padding:25px 0px 20px 10px;
}

.firststeps-border {
    border:1px solid #f2f2f2;
    border-radius:.25rem;
    overflow:hidden;
}

.firststeps-icon {
    width:44.3px;
    padding-top:5px;
    border:1px solid #e0dede;
}