body, html {
    margin: 0;
    min-height: 100%;
    height: 100%;
}

wrapper {
    /*overflow: auto;*/

    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-areas: "header" "main" "footer";
    grid-template-rows: auto 1fr auto;
    /*grid-template-rows: 50px calc(100vh - 100px) 50px;*/
    grid-template-columns: 50% 50%;
    padding: 0 20px;
}

.wrapper > div {
    /*border: 1px solid rgba(191, 191, 191, 0.25);*/
    padding: 5px;
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex; 
    height: 100%;
    width: 100%;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1505;
}

.layout-footer {
    flex: 0 0 auto;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    /*position: fixed;
    position: sticky;
    position: -webkit-sticky;*/ /*For macOS/iOS Safari */
    /*bottom: 0;*/
    z-index: 1505;
}

.dx-toolbar .dx-toolbar-item.menu-button {
    width: 60px;
    text-align: center;
    padding: 0;
}

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

.dx-card.wide-card {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
}

.with-footer > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content {
    height: 100%;
}

.with-footer > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-scrollview-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.layout-body {
    background-color: #f2f2f2;
    flex: 1;
    height: 100%;
    min-height: 0;
}

.layout-body .menu-container {
    height: 100%;
    width: 250px;
    background-color: #fff;
}

.layout-body .content {
    flex-grow: 1;
    height: 100%;
    line-height: 1.5;
    margin: 20px 40px;
}

.layout-body .content h2 {
    font-size: 32px;
    line-height: 40px;
}

.layout-body .content-block {
    margin: 0 0 20px;
}

    .layout-body .content-footer {
        display: block;
        color: rgba(0,0,0,.609);
        border-top: 1px solid rgba(0,0,0,.1);
        padding-top: 20px;
        padding-bottom: 24px;
        margin: 0 40px;
        /*z-index: 1505;
        position: fixed;
        position: sticky;
        position: -webkit-sticky;*/ /*For macOS/iOS Safari */
        /*bottom: 0;*/
    }

.layout-body .responsive-paddings {
    padding: 20px;
}

.layout-body-hidden {
    visibility: hidden;
}

#layout-drawer.dx-drawer-shrink .dx-drawer-panel-content {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
}

@media screen and (max-width: 600px) {
    .layout-body .content {
        margin: 20px;
    }
}

@media screen and (min-width: 1280px) {
    .layout-body .responsive-paddings {
        padding: 40px;
    }
}

.menu-container .dx-widget {
    font-weight: 700;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif;
    line-height: 24px;
}

.menu-container .dx-treeview {
    white-space: nowrap;
}

.menu-container .dx-treeview .dx-treeview-item {
    padding-left: 0;
    flex-direction: row-reverse;
    border-radius: 0;
}

.menu-container .dx-treeview .dx-treeview-item .dx-icon {
    width: 60px !important;
    margin: 0 !important;
}

.menu-container .dx-treeview .dx-treeview-node {
    padding: 0 0 !important;
}

.menu-container .dx-treeview .dx-treeview-toggle-item-visibility {
    right: 10px;
    left: auto;
}

.menu-container .dx-treeview .dx-rtl .dx-treeview-toggle-item-visibility {
    left: 10px;
    right: auto;
}

.menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
    font-weight: bold;
}

.menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
    font-weight: normal;
    padding: 0 60px;
}

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

.pinbtn0 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-0_2431488.svg'); /*SAFARI => quotes ''*/
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
    -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
}

.pinbtn1 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-1_2431489.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn2 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-2_2431490.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn3 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-3_2431491.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn4 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-4_2431492.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn5 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-5_2431493.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn6 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-6_2431494.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn7 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-7_2431495.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn8 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-8_2431496.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtn9 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_number-9_2431497.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.pinbtnClear {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-image: url('../img/iconfinder_button-cancel_2431466.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}


.grid-navmnuheader1col {
    z-index: 1605;
    position: sticky;
    position: -webkit-sticky; /*For macOS/iOS Safari */
    top: 0;
    grid-area: header;
    z-index: 99;
    position: sticky;
    top: 0;
    /*funktioniert kein scrollen, wenn display: grid;und grid-template-columns: auto; einkommentiert ist */
    /*display: grid;
    grid-template-columns: auto;*/
    background-color: white; /*wichtig, sonst funktioniert sticky nicht*/
    grid-gap: 5px;
    padding: 2px;
    justify-self: start;
    /*width: 100%;*/
    max-width: 100%;
    /*float: left;*/
}


.divshadow {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    /*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
    /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
}

.ueberschrift {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
    font-size: 120%;
    font-weight: bold;
    border-bottom: 2px solid rgba(191, 191, 191, 0.25);
}

.btnhelp {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url('../img/iconfinder_maybe-12_330638.svg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.btnrefresh {
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 3px;
    background-image: url('../img/4600841_change_refresh_reload_icon.png');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.bst {
    color: #1b1919;
}

.fab-format-success .dx-fa-button-icon {
    background-color: #2ed573 !important;
    color: white;
}

.fab-format-danger .dx-fa-button-icon {
    background-color: #ff4757 !important;
    color: white;
}

.checkbox-container {
    display: inline-flex;
    align-items: center; /* Zentriert Box und Text vertikal */
    gap: 12px; /* Steuert den genauen Abstand */
}

/*advdatebox****************************************************************/

.btndategoback {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-image: url('../img/134948_button_backward_previous_icon.png');
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*background-size: cover;*/ /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.btndategoforward {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-image: url('../img/8612366_next_arrow_button_navigation_direction_icon.png');
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*background-size: cover;*/ /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.btndatetoday {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-image: url('../img/961990_calendar_date_event_schedule_today_icon.png');
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*background-size: cover;*/ /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.btndatesel {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-image: url('../img/134666_calendar_icon.png');
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*background-size: cover;*/ /* Resize the background image to cover the entire container */
    border: none;
    -webkit-box-shadow: none;
}

.seltext {
    font-size: small;
    font-family: Verdana;
    text-align: left;
    opacity: 0.75;
    font-weight: bold;
}