@font-face{
  font-family: "Roboto-Regular";
  src: url("../public/Roboto-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto-Bold";
  src: url("../public/Roboto-Bold.ttf") format("truetype");
}

body {
   padding                    : 0px;
   margin                     : 0px;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;
   background-color           : #F4F6FA;
}

.dynamicsui-toolbar-clearfix::after {
    content                 : "";
    display                 : block;
    clear                   : both;
}

:root{
  --blue:#2f78a8;
  --blue2:#3f8fbe;
  --border:#1f5f86;
  --accent:#f0a000;
  --accent2:#ffb21a;
  --text:#fff;
  --inputBorder:#cfd6dd;
  --radius:0; /* Screenshot wirkt eher eckig */
}

.dynamicsui-toolbar {
  display:flex;
  align-items:stretch;
  gap:0;
  font-family: Arial, sans-serif;
}

.dynamicsui-toolbar-search{
  display:flex;
  align-items:stretch;
}

.dynamicsui-toolbar-search input{
  height:34px;
  width:260px;
  padding:0 12px;
  border:1px solid var(--inputBorder);
  border-right:0;
  outline:none;
  font-size:14px;
}

.dynamicsui-toolbar-btnbar{
  display:flex;
  align-items:stretch;
}

.dynamicsui-toolbar-btn, .dynamicsui-toolbar-search .dynamicsui-toolbar-btn{
  height:34px;
  min-width:36px;
  padding:0 10px;
  border:1px solid var(--border);
  background:var(--blue2);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.dynamicsui-toolbar-btn:hover{ filter:brightness(1.05); }
.dynamicsui-toolbar-btn:active{ filter:brightness(0.95); }

.dynamicsui-toolbar-btn + .dynamicsui-toolbar-btn{ border-left:0; }               
.dynamicsui-toolbar-btnbar > * + *{ margin-left:0; }         


.dynamicsui-toolbar-btn-clear{
  border:1px solid var(--border);
  background:var(--blue2);
  font-size:18px;
  line-height:1;
}


.dynamicsui-toolbar-btn-accent{
  background:var(--accent2);
  border-color:#c98500;
  color:#fff;
  font-weight:bold;
}
.dynamicsui-toolbar-btn-accent:hover{ filter:brightness(1.03); }


.dynamicsui-toolbar-split{
  display:flex;
  align-items:stretch;
}
.dynamicsui-toolbar-split .dynamicsui-toolbar-btn{ border-left:0; } 
.dynamicsui-toolbar-split .dynamicsui-toolbar-btn:first-child{
  border-left:1px solid var(--border); 
}
.dynamicsui-toolbar-btn-caret{
  min-width:26px;
  padding:0 6px;
  font-size:11px;
}


.dynamicsui-toolbar-toolbar .dynamicsui-toolbar-search input{ border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius); }
.dynamicsui-toolbar-toolbar .dynamicsui-toolbar-btnbar > :last-child .btn:last-child{ border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius); }


.dynamicsui-toolbar-ico                                        { font-size:14px; line-height:1; }




























.dynamicsui-page-header-userbox {
   position                    : relative;
}

.dynamicsui-page-header-user-dropdown {
   position                    : absolute;
   top                         : 54px;
   right                       : 0;
   width                       : 160px;
   background                  : #ffffff;
   border                      : 1px solid #e5e5e5;
   box-shadow                  : 0 4px 14px rgba(0,0,0,0.12);
   border-radius               : 4px;
   display                     : none;
   z-index                     : 4000;
   padding                     : 6px 0;
}

.dynamicsui-page-header-user-dropdown-open {
   display                     : block;
}

.dynamicsui-page-header-user-dropdown-item {
   display                     : block;
   padding                     : 9px 14px;
   color                       : #4a5568;
   text-decoration             : none;
   font-size                   : 14px;
}

.dynamicsui-page-header-user-dropdown-item:hover {
   background                  : #f3f6fb;
   color                       : #000000;
}

  
.dynamicsui-sidebar-menu {
   list-style: none;
   margin: 0;
   padding: 10px 0;
}

.dynamicsui-sidebar-item {
   margin: 0;
   padding: 0;
}

.dynamicsui-sidebar-link {
   height: 42px;
   display: flex;
   align-items: center;
   padding: 0 14px;
   color: #dbe2ef;
   text-decoration: none;
   font-size: 14px;
   box-sizing: border-box;
   border-left: 3px solid transparent;
}

.dynamicsui-sidebar-link:hover {
   background: rgba(255,255,255,0.08);
   color: #ffffff;
}

.dynamicsui-sidebar-item-selected .dynamicsui-sidebar-link {
   background: rgba(255,255,255,0.12);
   color: #ffffff;
   border-left-color: #1dc4e9;
}

.dynamicsui-sidebar-icon-img {
   width: 20px;
   height: 20px;
   margin-right: 12px;
   object-fit: contain;
   flex-shrink: 0;
}

.dynamicsui-sidebar-icon-ascii,
.dynamicsui-sidebar-icon-empty {
   width: 20px;
   height: 20px;
   margin-right: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.dynamicsui-sidebar-icon-ascii {
   font-size: 17px;
}
   
.dynamicsui-page-header-logo-button {
   border: 0;
   background: transparent;
   padding: 0;
   margin: 0 10px 0 0;
   cursor: pointer;
   display: flex;
   align-items: center;
}

.dynamicsui-sidebar {
   position: fixed;
   top: 54px;
   left: 0;
   width: 240px;
   height: calc(100vh - 54px);
   background: #3f4d67;
   transform: translateX(0);
   transition: transform 0.2s ease;
   z-index: 1500;
}

.dynamicsui-content {
   margin-top: 54px;
   margin-left: 240px;
   padding                                   : 20px;
   transition: margin-left 0.2s ease;
}


body.dynamicsui-sidebar-closed .dynamicsui-sidebar {
   transform: translateX(-240px);
}

body.dynamicsui-sidebar-closed .dynamicsui-content {
   margin-left: 0;
}

/* Mobile */
@media (max-width: 768px) {

   .dynamicsui-page-header-brand {
      width: 70px;
   }

   .dynamicsui-page-header-title,
   .dynamicsui-page-header-username {
      display: none;
   }

   .dynamicsui-sidebar {
      transform: translateX(-240px);
      z-index: 2500;
   }

   body.dynamicsui-sidebar-open .dynamicsui-sidebar {
      transform: translateX(0);
   }

   .dynamicsui-content {
      margin-left: 0;
   }
}

.dynamicsui-page-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 54px;
   display: flex;
   align-items: stretch;
   background: #ffffff;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 1px 4px rgba(0,0,0,0.08);
   z-index: 3000;

}

.dynamicsui-page-header-brand {
   width: 240px;
   height: 54px;
   flex: 0 0 240px;
   display: flex;
   align-items: center;
   background: #3f4d67;
   color: #ffffff;
   padding: 0 12px;
   box-sizing: border-box;
}



.dynamicsui-page-header-title {
   display                     : flex;
   align-items                 : center;
   white-space                 : nowrap; 
}

.dynamicsui-page-header-main {
   flex: 1 1 auto;
   height: 54px;
   display: flex;
   align-items: center;
   padding: 0 18px;
   box-sizing: border-box;
   background: #ffffff;
}

.dynamicsui-page-header-spacer {
   flex: 1;
}



.dynamicsui-page-header-img {
   display                     : block;
   width                       : 32px;
   height                      : 32px;
   border                      : 0;
}


.dynamicsui-page-header-notification {
   position                    : relative;
   width                       : 38px;
   height                      : 38px;
   display                     : flex;
   align-items                 : center;
   justify-content             : center;
   font-size                   : 17px;
   color                       : #4a5568;
   margin-left                 : 8px;
   cursor                      : pointer;
}

.dynamicsui-page-header-badge {
   position                    : absolute;
   top                         : 4px;
   right                       : 3px;
   min-width                   : 16px;
   height                      : 16px;
   border-radius               : 8px;
   color                       : #ffffff;
   font-size                   : 10px;
   line-height                 : 16px;
   text-align                  : center;
   font-weight                 : bold;
}

.dynamicsui-page-header-badge.red {
   background                  : #ff6b81;
}


.dynamicsui-page-header-userbox {
   height                      : 54px;
   display                     : flex;
   align-items                 : center;
   margin-left                 : 18px;
   color                       : #4a5568;
   font-size                   : 14px;
   cursor                      : pointer;
}

.dynamicsui-page-header-avatar {
   width                       : 28px;
   height                      : 28px;
   border-radius               : 4px;
   background                  : #d8d8d8;
   margin-right                : 8px;
}

.dynamicsui-page-header-user-arrow {
   margin-left                 : 6px;
   font-size                   : 12px;
   color                       : #777777;
}



  
   
.dynamicsui-listingtable {
   margin                     : 5px;
   margin-bottom              : 30px;
   border-collapse            : collapse;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   position                   : relative;
}

.dynamicsui-listingtable th {
   border-left                : 0;
   border-bottom              : 2px #808080 solid;
   border-right               : 0;
   border-top                 : 0;
   padding                    : 3px 8px;
   white-space                : nowrap;
   position                   : relative;
}

.dynamicsui-listingtable td {
   padding                    : 3px 8px;
   border-right               : 1px solid #dddddd;
   border-bottom              : 1px solid #eeeeee;
   white-space                : nowrap;
   overflow                   : hidden;
   text-overflow              : ellipsis;
}


.dynamicsui-listingtable td:last-child {
   border-right               : 0;
}


.dynamicsui-listingtable tr:hover td {
   background-color           : #f3f6fb;
}

.dynamicsui-listingtable-actionicon {
   border                     : 0px;
   height                     : 22px;
   width                      : 22px;
   margin-left                : 2px;
   margin-right               : 2px;
}

.dynamicsui-listingtable-containerdiv {
   width                      : 98%;
   margin                     : 5px;
   overflow-x                 : auto;
   overflow-y                 : hidden; 
   background-color           : #FFFFFF;
   margin-top                 : 30px;
   margin-bottom              : 30px;
   padding                    : 10px;
   border-radius: 5px;
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
    border: none;
}

.dynamicsui-listingtable-column-resizer {
   position                   : absolute;
   top                        : 0;
   right                      : 0;
   width                      : 6px;
   height                     : 100%;
   cursor                     : col-resize;
   user-select                : none;
}

.dynamicsui-listingtable-resize-active {
   cursor                     : col-resize !important;
}

.dynamicsui-listingtable-pagination {
   display                    : flex;
   justify-content            : space-between;
   align-items                : center;
   margin                     : 10px 5px 0 5px;
   font-size                  : 11pt;
}

.dynamicsui-listingtable-pagination-pages a,
.dynamicsui-listingtable-pagination-current {
   margin-right               : 4px;
   text-decoration            : none;
}

.dynamicsui-listingtable-pagination-current {
   font-weight                : bold;
}

.dynamicsui-listingtable-pagination-limitform {
   margin                     : 0;
}


.dynamicsui-popup-overlay {
   position: fixed;
   inset: 0;
   z-index: 2000;
   background: rgba(0,0,0,0.5);
}

.dynamicsui-popup {
   position                    : fixed;
   left                        : 50%;
   top                         : 50%;
   z-index                     : 5010;
   background: #ffffff;
   border-radius: 18px;
   padding: 15px;
   box-shadow: 0 12px 40px rgba(0,0,0,0.25);
   transform: translate(-50%, -50%);
   transition: width 0.3s, height 0.3s;
   box-sizing: border-box;
   max-width: calc(100vw - 30px);
   max-height: calc(100vh - 30px);

   overflow: auto;
}

.dynamicsui-popup-content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px;
    background: #ffffff;
}



.dynamicsui-tabs {
    display:flex;
    gap:4px;
    border-bottom:1px solid #d0d0d0;
    margin-bottom:20px;
}

.dynamicsui-tab {
    display:inline-block;
    padding:10px 18px;
    text-decoration:none;
    color:#444;
    background:#f5f5f5;
    border:1px solid #d0d0d0;
    border-bottom:none;
    border-radius:8px 8px 0 0;
    transition:all 0.15s;
}

.dynamicsui-tab:hover {
    background:#ececec;
}

.dynamicsui-tab-active {
    background:#ffffff;
    color:#000;
    font-weight:bold;
    position:relative;
    top:1px;
}











.dynamicsui-popup-field {
    margin-bottom: 16px;
}

.dynamicsui-popup-field label {
    display                                                        : block;
    margin-bottom                                                  : 6px;
    font-size                                                      : 13px;
    font-weight                                                    : 600;
    color                                                          : #333333;
}

.dynamicsui-popup-input {
    width: 100%;
    height: 40px;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background: #ffffff;
}

.dynamicsui-popup-input:focus {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}

.dynamicsui-popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #eeeeee;
}

.dynamicsui-popup-submit {
    border                : none;
    border-radius         : 8px;
    padding               : 10px 18px;
    background: #2f6fed;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dynamicsui-popup-submit:hover {
    background: #245bd0;
}



.dynamicsui-popupform {
    width: 100%;
    max-width: 520px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.dynamicsui-popup-header {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid #eeeeee;
    background: #f8f8f8;
}

.dynamicsui-popup-headertitle {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.dynamicsui-popup-close {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555555;
}

.dynamicsui-popup-close:hover {
    color: #000000;
}

.dynamicsui-popup-loading {
    display: block;
    width: 75px;
    height: 75px;
    margin: 40px auto;
}

.dynamicsui-popup-error {
    padding: 20px;
    color: #9b1c1c;
    background: #fdecec;
    border: 1px solid #f4b4b4;
    border-radius: 8px;
}










.dynamicsui-tree {
    font-size: 14px;
    color: #222;
    user-select: none;
}

.dynamicsui-tree-children {
    display: none;
}

.dynamicsui-tree-children.open {
    display: block;
}

.dynamicsui-tree > .dynamicsui-tree-children {
    display: block;
}

.dynamicsui-tree-row {
    display: flex;
    align-items: center;
    min-height: 26px;
    padding-left: calc(var(--level) * 18px);
    cursor: default;
}

.dynamicsui-tree-row:hover {
    background: #eef4ff;
}

.dynamicsui-tree-toggle,
.dynamicsui-tree-toggle-empty {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    margin-right: 3px;
}

.dynamicsui-tree-toggle::before {
    content: "▶";
    font-size: 10px;
    color: #555;
}

.dynamicsui-tree-toggle.open::before {
    content: "▼";
}

.dynamicsui-tree-title {
    color: #222;
    text-decoration: none;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.dynamicsui-tree-title:hover {
    background: #dcecff;
}

.dynamicsui-contextmenu {
    position: absolute;
    z-index: 10000;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 5px 0;
    font-size: 14px;
}

.dynamicsui-contextmenu div {
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.dynamicsui-contextmenu div:hover {
    background: #eef4ff;
}








.dynamicsui-login-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: #f4f6f8;
}

.dynamicsui-login-box {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #dcdfe3;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 32px;
    box-sizing: border-box;
}

.dynamicsui-login-header {
    text-align: center;
    margin-bottom: 24px;
}

.dynamicsui-login-title {
    font-size: 26px;
    font-weight: 700;
    color: #1f2933;
}

.dynamicsui-login-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: #6b7280;
}

.dynamicsui-login-error {
    background: #fdecea;
    color: #b42318;
    border: 1px solid #f5c2c0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
}

.dynamicsui-login-form {
    width: 100%;
}

.dynamicsui-login-field {
    margin-bottom: 18px;
}

.dynamicsui-login-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.dynamicsui-login-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #cfd6dd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    background: #ffffff;
}

.dynamicsui-login-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.dynamicsui-login-button {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.dynamicsui-login-button:hover {
    background: #1d4ed8;
}

.dynamicsui-login-links {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
}

.dynamicsui-login-links a {
    color: #2563eb;
    text-decoration: none;
}

.dynamicsui-login-links a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .dynamicsui-login-page {
        padding: 16px;
        align-items: flex-start;
        padding-top: 10vh;
    }

    .dynamicsui-login-box {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .dynamicsui-login-title {
        font-size: 23px;
    }
}