html, body {
   font-family: Roboto, Arial, sans-serif !important;
   overflow: hidden;
}

.content {
   padding-top: 1.1rem;
}

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

.invalid {
   outline: 1px solid red;
}

.validation-message {
   color: red;
}

@media (min-width: 1000px) {
   .mail-vorschau-container {
      min-width: 60%;
   }

   .mail-liste-container {
      width: 33%;
      min-width: 320px;
   }
}

@media (max-width: 1000px) {
   .mail-vorschau-container {
      display: none;
   }

   .mail-liste-container {
      width: 100%;
   }
}

#blazor-error-ui {
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
   display: none;
   left: 0;
   padding: 0.6rem 1.25rem 0.7rem 1.25rem;
   position: fixed;
   width: 100%;
   z-index: 1000;
}

   #blazor-error-ui .dismiss {
      cursor: pointer;
      position: absolute;
      right: 0.75rem;
      top: 0.5rem;
   }

.my-toolbar-cell {
   padding: 0px 2px;
   display: table-cell;
}

   .sidebar-tree > .nav-pills > .nav-item:first-of-type {
      padding-top: 0.5rem;
   }

   .sidebar-tree > .nav-pills > .nav-item:last-of-type {
      padding-bottom: 1rem;
   }

   .sidebar-tree .nav-pills > .nav-item a {
      border-radius: 0px;
      display: flex;
      align-items: center;
   }

   .sidebar-tree > .nav-pills > .nav-item > a {
      font-size: 1rem !important;
      font-weight: 600 !important;
      padding: .25rem 1rem .25rem .125rem;
   }

      .sidebar-tree > .nav-pills > .nav-item > a[aria-expanded] ~ ul {
         margin: 0;
      }

   .sidebar-tree .nav-pills > .nav-item a:not(.active) {
      color: inherit !important;
   }

   .sidebar-tree .nav-pills .nav-item .nav-link {
      text-transform: none;
   }

      .sidebar-tree .nav-pills .nav-item .nav-link > span:not(.expand-btn):not(.image):not(.badge) {
         flex: 1;
      }

      .sidebar-tree .nav-pills .nav-item .nav-link > span.expand-btn {
         margin-right: 4px;
      }

   .sidebar-tree > .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
      background-color: var(--org-theme-sidebar-selection-bg);
      color: var(--org-theme-sidebar-selection-fg);
   }

   .dxbs-tree.sidebar-tree > ul.nav ul.nav {
      margin: 0 !important;
   }

   .dxbs-tree.sidebar-tree > ul.nav ul.nav .nav-item {
      padding-bottom: 0;
   }

   .dxbs-tree.sidebar-tree > ul.nav ul.nav .nav-link {
      font-size: 0.825rem;
      font-weight: 400;
      padding: 0 1rem;
   }

.dxbs-tree.sidebar-tree .badge {
   margin: 0;
   padding: 3px 4px;
   color: var(--org-theme-primary) !important;
   background-color: transparent !important;
   font-size: 0.75rem;
   font-weight: 500;
   border: none;
}

.sidebar .nav-pills .nav-item {
   margin: 0;
}

.sidebar-tree .nav-pills > .nav-item > a:not(.active) {
   background-image: none !important;
}

.sidebar-tree .nav-pills > .nav-item > a {
   border: none !important;
}

td.bg-primary {
   background-color: var(--org-theme-toolbar-bg-hover) !important;
}

.dxbs-modal-header {
   background-color: var(--org-theme-popup-color) !important;
   border-color: var(--org-theme-popup-color);
   color: var(--cx-grey-a100) !important;
   height: 56px;
   border-radius: 0px !important;
}

   .dxbs-modal-header > .modal-title {
      font-size: 18px;
      margin-top: auto;
      margin-bottom: auto;
   }

dxbl-modal > .dxbs-modal > .dxbs-popup .dxbs-popup-header-button > .dxbs-popup-header-button-image {
   width: 24px !important;
   height: 24px !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup .dxbs-popup-header-button {
   margin-top: auto !important;
   margin-bottom: auto !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup > .dxbs-modal-content > .dxbs-modal-footer {
   height: 55px;
}

.container-fluid {
   padding: unset;
}

.row-spacing {
   margin-bottom: var(--org-theme-dialog-row-spacing);
}

/* Workaround um Column-Header auszublenden
   https://supportcenter.devexpress.com/ticket/details/t1076596/grid-for-blazor-how-to-hide-column-headers/
*/
#CustomMailGrid .dxbs-grid-header-row {
   display: none;
}

/*
   Row-Selection-Color in Grids anpassen:
   https://supportcenter.devexpress.com/ticket/details/t991798/datagrid-for-blazor-change-conditionally-the-color-of-the-selected-row
*/
tr.dxbs-grid-selected-row {
   background-color: var(--org-theme-sidebar-selection-bg);
}

/*
   Badge-Text korrigieren
*/
.dxbs-tree.sidebar-tree > ul.nav ul.nav .nav-link {
   padding-right: 0.625rem !important;
}

.btn-primary {
   color: var(--cx-grey-a100) !important;
   background-color: var(--org-theme-primary) !important;
   border-color: var(--org-theme-primary) !important;
}

.default-dialog-padding {
   padding-top: var(--org-theme-dialog-padding-top);
   padding-left: var(--org-theme-dialog-padding-left);
   padding-right: var(--org-theme-dialog-padding-right);
   padding-bottom: var(--org-theme-dialog-padding-bottom);
}

.dialog-containing-grid {
   height: 80%;
}

.dialog-container-mailreader {
   height: 80%;
}

.body-section:has(.mailwriter-body) 
{
    height: 100vh !important;
}

.cx-drawer-panel:has(.mailwriter-body)
{
    height: 100% !important;
}

.cx-appframe-sub-wrapper:has(.mailwriter-body) 
{
    height: 100dvh !important;
}

.mailwriter-body {
   height: 100%;
}