/******************************************************
  Copyright IT-Conductor 2001-2024 All Rights Reserved
 ******************************************************/

html, body
{
  /* 
  height:        100%;
  */
  margin:        0;
  padding:       0;
  border-width:  0;
  border-style:  none;
  overflow:      hidden;
}

iframe body
{
  width:         fit-content;
  height:        fit-content;
}

html, body, input, select, option, a
{
  font-family:    var(--fonts);
  font-size:      var(--font-size);
}

html, body, a
{
  color:          var(--main-color);
}

input, select, textarea, option
{
  background-color: var(--form-input-bg-color);
  color:            var(--form-color);
  border-color:     var(--form-input-border-color);
}

div.hidden
{
  height:         0;
  margin:         0;
  padding:        0;
  visibility:     hidden;
  border-width:   0;
  border-style:   none;
  font-size:      0;
  /*
  zoom:          1;
  */
}

div
{
  max-height:     inherit;
}

/* buttons */
button.object-form-attribute-field,
input.object-form-attribute-field[type=button],
input.object-form-attribute-field[type=submit],
input.object-form-attribute-field[type=reset],
input.object-form-attribute-field[type=file]::file-selector-button,
button.control,
input.control[type=button],
input.control[type=submit],
input.control[type=reset],
input.control[type=file]::file-selector-button
{
  background-color: var(--background-color);
  color:            var(--button-color);
  padding:          0 1em;
  height:           1.7em;
  border:           none;
  cursor:           pointer;
}

button.object-form-attribute-field:hover,
input.object-form-attribute-field[type=button]:hover,
input.object-form-attribute-field[type=submit]:hover,
input.object-form-attribute-field[type=reset]:hover,
input.object-form-attribute-field[type=file]::file-selector-button:hover,
button.control:hover,
input.control[type=button]:hover,
input.control[type=submit]:hover,
input.control[type=reset]:hover,
input.control[type=file]::file-selector-button:hover
{
  color:            var(--button-hover-color);
  background-color: var(--button-bg-hover-color);
}

input.object-form-attribute-field[type=checkbox],
input.control[type=checkbox]
{
  height:           auto;
}

/************************
 * Welcome Page
 ***********************/
table.welcome
{
  width:            100%;
  height:           100%;
  text-align:       center;
}

tr.welcome-name
{
  vertical-align:   bottom;
}

.welcome-name table
{
  vertical-align:   bottom;
  margin-left:      auto;
  margin-right:     auto;
}

.welcome-image img
{
  width:            9em;
}

.welcome-logo
{
  text-align:       center;
  vertical-align:   middle;
  color:            var(--logo-color);
  padding:          5px;
  margin:           0;
}

.welcome-logo *
{
  vertical-align:   middle;
}

.welcome-text
{
  font-size:        xxx-large;
  font-weight:      bold;
  color:            var(--welcome-color);
}

.welcome-motto td
{
  vertical-align:   top;
}

.welcome-motto td
{
  font-size:        smaller;
  color:            var(--welcome-color);
}

tr.welcome-description
{
  vertical-align:   bottom;
}

.welcome-description td
{
  font-size:        small;
}

tr.welcome-login
{
  vertical-align:   middle;
}

.welcome-login td
{
  font-size:        larger;
  color:            var(--link-color);
}

.welcome-spacer
{
  height:           50%;
}

div.spinner
{
  z-index:              15000;
  left:                 50%;
  top:                  50%;
  width:                4em;
  height:               4em;

  color:                var(--spinner-color);
  border-color:         currentColor;
  border-style:         dotted;
  border-width:         1em;
  border-radius:        50%;
  transition:           .5s color, .5s border, .5s transform, .5s opacity;
  animation:            2s spinner linear infinite;
  transform:            translate(-50%, -50%);
  /*
  transform:            translate(-50%, -50%);
  transform:            translate(-50%, -50%);
  background-image:     var(--spinner-bg-image);
  background-repeat:    no-repeat;
  background-position:  center center;
  */
}

@keyframes spinner {
  from {transform: rotate(0deg);}
  to   {transform: rotate(360deg);}
}

div.spinner-global
{
  display:              none;
  position:             absolute;
  /*
  background-attachment: fixed;
 */
}

div.spinner-local
{
  display:              inline-block;
  position:             relative;
}

div.toggle[expansion="collapse"]:after
{
  content:              var(--expansion-char-collapse);
  padding-left:         0.3em;
}

div.toggle[expansion="expand"]:after
{
  content:              var(--expansion-char-expand);
  padding-left:         0.3em;
}

/*************************
 * Login Form            *
 *************************/

div.login-form
{
  display:            block;
  position:           relative;
  min-width:          40em;
  min-height:         20em;
  width:              100%;
}

table.login-form-table
{
  padding-left:       1em;
  padding-right:      1em;
}

div.login-form-table
{
  height:             inherit;
  overflow:           auto;
}
div.login-form-content
{
  border-style:       outset;
  border-width:       1px;
  border-color:       var(--login-form-border-color);
  border-radius:      0.5em;
  background-color:   var(--login-form-bg-color);
  padding:            2em;
  margin:             auto;
}

table.login-form-content
{
  border-style:       outset;
  border-width:       thin;
  border-color:       var(--login-form-border-color);
  border-radius:      0.5em;
  background-color:   var(--login-form-bg-color);
  padding:            2em;
  margin:             auto;
}

div.login-form-title
{
  font-size:           large;
  font-weight:         bolder;
  white-space:         nowrap;
  padding-top:         1em;

}

td.login-form-label
{
  display:            flex;
  flex-direction:     column;
  align-items:        flex-end;
  text-align:         right;
  white-space:        nowrap;
}

div.login-form-attr
{
  display:             block;
  position:            relative;

  padding-top:         1em;
  padding-left:        2em;
  padding-right:       3em;
  white-space:         nowrap;
}

div.login-form-label
{
  display:             inline;
  position:            relative;
  white-space:         nowrap;
}

div.login-form-mandatory
{
  display:            inline;
  position:           relative;
  padding-left:       1ch;
}

.login-form-mandatory
{
  text-align:         center;
  width:              1ch;
  min-width:          1ch;
  max-width:          1ch;
}


.login-form-mandatory div
{
  display:            inline;
  vertical-align:     middle;
}

td.login-form-field
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  flex-wrap:          nowrap;
  gap:                0.5ch;

  text-align:         left;
}

div.login-form-field
{
  display:            block;
  position:           relative;
}

div.login-form-message
{
  display:            block;
  position:           relative;
  white-space:        normal;
}

.login-form-field input[type=text],
.login-form-field input[type=number],
.login-form-field input[type=file],
.login-form-field input[type=url],
.login-form-field input[type=email],
.login-form-field input[type=password],
.login-form-field textarea
{
  min-width:           10em !important;
  max-width:           calc(100% - 1em) !important;
}

.login-form-field input[type=text],
.login-form-field input[type=number],
.login-form-field input[type=file],
.login-form-field input[type=url],
.login-form-field input[type=email],
.login-form-field input[type=password]
{
  width:               20em !important;
}

.login-form-field input[type=checkbox]
{
  width:               auto;
  border-radius:       3px;
}

.login-form-field .object-form-attribute-field
{
  text-align:       left;
  margin:           0; /* 0 0.5ch 0 0; */
  box-sizing:       border-box;
}

.login-form-buttons
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  flex-wrap:        nowrap;
  gap:              0.5ch;

  padding-top:      1em;
  padding-left:     0;
  padding-right:    0;
}

div.login-form-buttons
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  column-gap:       1ch;
  padding-left:     2em !important;
  padding-bottom:   1em;
}

.login-form-buttons table
{
  margin:           auto;
}

.login-form-buttons ul
{
  list-style-type:  none;
  margin:           0;
  padding:          0;
}

.login-form-buttons li
{
  display:          inline;
  cursor:           pointer;
  vertical-align:   top;
  float:            left;
  padding-right:    1em;
}

/************************
 * Main Page
 ************************/

div.main
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  flex-wrap:        nowrap;
  width:            100%;
  height:           calc(100vh);
  padding:          0;
  margin:           0;
  border-style:     none;
  border-collapse:  collapse;
  border-width:     0;
}

div.main-content
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  flex-wrap:        nowrap;
  align-items:      stretch;
  flex:             1;
  overflow:         hidden;

  vertical-align:   top;
  color:            var(--main-color);
  background-color: var(--main-bg-color);

  border-width:     0px;
  border-style:     none;
  border-collapse:  collapse;
  margin:           0;
}

div.main-content-iframe
{
  background-color: transparent;
  overflow:         visible;
}

div.main-content form
{
  margin:           0;
  padding:          0;
  width:            calc(100%);
  height:           calc(100%);
}

div1.main-bottom
{
  height: 100%;
}
/*
body
{
  background-image:      url('iconShow?iconName=Wallpaper');
  background-repeat:     no-repeat;
  background-attachment: fixed;
  background-position:   center center;
}
*/
/*************************
 * Header                *
 *************************/

div.main-header
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  background-color: var(--background-color);
  color:            var(--main-header-color);
  font-size:        var(--font-size);
  width:            100%;
  height:           initial;
  margin:           0;
  border-width:     0;
  border-style:     none;
}

div.main-header span
{
  padding-left:     0;
}

div.main-header *
{
  position:         relative;
  display:          inline;
  vertical-align:   middle;
  white-space:      nowrap;
}

div.main-header a
{
  white-space:      nowrap;
  font-size:        var(--font-size);
  color:            var(--main-header-color);
  text-align:       left;
  line-height:      3em;
  padding-right:    1em;
}

div.main-header div
{
  /* height:           3em; */
}

div.main-header-product
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  flex:             1;
}

div.main-header-product img
{
  WIDTH:            1.5em;
  HEIGHT:           1.5em;
  BORDER-STYLE:     none;
  vertical-align:   middle;
  padding-left:     0.3em;
  padding-right:    0.3em;
}

div.main-header-product a
{
  text-decoration:  none;
}
/*
a.main-header-product-name
{
}

a.main-header-product-version
{
}
*/

div.main-header-session
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
}

a.main-header-user,
a.main-header-tz
{
  font-style:       italic;
}

a.main-header-spacer
{
  width:            5em;
}

a.main-header-user,
a.main-header-logout
{
  cursor:           pointer;
  /*text-decoration:  underline;*/
}

/*************************
 * Session Info          *
 *************************/

/*************************
 * Top Menu              *
 *************************/
div.main-menu
{
  position:             relative;
  display:              flex;
  flex-direction:       row;
  align-items:          center;
  /*
  background-image:     url('iconShow?iconName=MenuBackground');
  background-repeat:    repeat-x;
   */
  width:                100%;
  margin:               0;
  border-width:         0;
  border-style:         none;
  background-color:     var(--background-color);
  background:           var(--main-menu-bg);
}

div.main-menu,
ul.topMenu
{
  padding-left:     0;
  padding-top:      0;
  padding-bottom:   0;
  margin:           0;
}

ul.topMenu
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      stretch;
  text-align:       left;
  list-style-type:  none;
  user-select:      none;
}

.topMenuItem
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
}

.topMenuItem > a
{
  text-decoration:  none;
  cursor:           default;
  font-weight:      bolder;
  white-space:      nowrap;
  cursor:           default;
  padding-left:     10px;
  padding-right:    10px;
  padding-top:      3px;
  padding-bottom:   3px;
  color:            var(--top-menu-color);
  user-select:      none;
}

.topMenuItem > img
{
  padding-left:     10px;
  padding-right:    10px;
  padding-top:      3px;
  padding-bottom:   3px;
}

.topMenuItem a:visited
{
  color:             var(--top-menu-color);;
}

.topMenuItem:hover
{
  color:            var(--top-menu-active-color);
  background-color: var(--top-menu-active-bg-color);
  background-image: none;
}

.topMenuItem:hover > ul.menu
{
  display:              flex;
}

ul.menu
{
  position:             absolute;
  display:              none;
  flex-direction:       column;
  align-items:          stretch;
  list-style-type:      none;
  padding:              0;
  margin:               0;
  top:                  calc(100%); /* show under top menu item */

  background-color:     var(--menu-bg-color);
  border-style:         none; /*       thin threedhighlight outset; */
  box-shadow:           2px 3px 3px 2px var(--box-shadow-color);
  /*
  border-radius:     0 0 10px 10px;
  overflow-y:           auto;
  overflow-x:           hidden;
   */

  padding-top:          2px;
  padding-bottom:       1em;

  user-select:          none;
}

div.menu
{
  position:          absolute;
  visibility:        hidden;
  display:           inline;
  background-color:  var(--menu-bg-color);
  border-style:      none; /*       thin threedhighlight outset; */
  box-shadow:        2px 3px 3px 5px var(--box-shadow-color);
  overflow-y:        auto;
  overflow-x:        hidden;
  padding-top:       2px;
  padding-bottom:    1em;
  user-select:       none;
}

.menuItem
{
  position:         relative;
  cursor:           pointer;
  display:          block;
  white-space:      nowrap;
  padding:          0.3em;
  font-weight:      normal;
  color:            var(--link-color);
  text-align:       left;
  padding-left:     0.3em;
  clear:            both;
}

.menuItem:hover
{
  background-color: var(--top-menu-active-bg-color);
}

.subMenuItem:hover > ul.menu
{
  display:          block;
  top:              5px;
  left:             calc(100% - 1em);
}

div.menuItem div
{
  position:         relative;
}

div.menuItemText
{
  display:          inline-block;
  white-space:      nowrap;
  text-align:       left;
  margin-left:      0.3em;
  margin-right:     2em;
}

div.menuItemIcon
{
  display:          inline;
  vertical-align:   middle;
}

div.menuItemIcon input
{
  vertical-align:   middle;
}

div.menuItemIcon img
{
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

div.menuItemCtrl
{
  display:          inline;
  float:            right;
  vertical-align:   middle;
  margin-left:      -1em;
}

div.menuItemCtrl img
{
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  vertical-align:   middle;
}

.more
{
  font-family:      WebDings;
  text-align:       right;
  position:         absolute;
}
/*****************
 * Main Toolbar  *
 *****************/

div.main-toolbar
{
  display:          flex;
  position:         relative;
  flex-direction:   row-reverse;
  align-items:      center;
  flex:             1;
  padding:          0.3em;
}
/***************
 * Popup Menu  *
 ***************/
div.popup
{
  position:           relative;
  display:            inline-flex;
  visibility:         hidden;
  flex-direction:     column;
  align-items:        stretch;
  background-color:   var(--popup-bg-color);
  background:         var(--popup-bg);
  border-style:       none; /*       thin threedhighlight outset; */
  box-shadow:         1px 2px 2px 3px var(--box-shadow-color);
  border-radius:      var(--popup-border-radius);
  width:              auto;
  min-width:          10em;
  /*
  min-height:         5em;
  */
  max-width:          calc(100vw - 3px);
  max-height:         calc(100vh - 3px);
}

div.popup ax
{
  color:            var(--link-color);
}

table.popup-window
{
  background-color: var(--popup-bg-color);
  border:           thin var(--popup-border-color) outset;
  width:            auto;
  height:           auto;
}

div.popup-window
{
  background-color: var(--popup-bg-color);
  border:           thin var(--popup-border-color) outset;
  border-radius:    var(--popup-border-radius);
}

.popup-window tr
{
  height:           auto;
}

.popup-decoration
{
  background-color: var(--popup-header-bg-color);
  border-style:     none;
}

td.popup-decoration
{
  vertical-align:   middle;
  height:           1em;
  width:            100%;
}

div.popup-decoration
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  vertical-align:   middle;
  line-height:      1.5em;
  padding:          0.3em;
  /*
  margin:           2px;
   */
  border-radius:    var(--popup-border-radius) var(--popup-border-radius) 0 0;
  white-space:      nowrap;
  /*
  overflow:         hidden;
   */
  flex:             0;
}

td.popup-decoration table
{
  height:           10px;
  /*
  width:            100%;
   */
  padding:          2px;
}

td.popup-title
{
  font-weight:      normal;
  color:            var(--popup-header-color);
  text-align:       left;
  vertical-align:   middle;
  width:            100%;
}

td.popup-ctrl
{
  text-align:       right;
}

div.popup-icon
{
  position:         relative;
  display:          inline !important;
}

div.popup-icon img
{
  width:            1em;
  height:           1em;
  vertical-align:   middle;
  padding-right:    0.3em;
}

div.popup-title
{
  position:         relative;
  display:          inline !important;
  flex:             1;
  font-weight:      bolder;
  color:            var(--popup-title-color);;
  vertical-align:   middle;
  white-space:      nowrap;
  width:            10em; /* make sure it does not stretch the pop-up */
  overflow:         hidden;
  text-overflow:    ellipsis;
}


div.popup-ctrl
{
  display:          inline !important;
  /*float:               right;*/
  vertical-align:   middle;
  padding-left:     5px;
  font-size:        larger;
  color:            var(--popup-ctrl-color);
  text-rendering:   optimizeLegibility;
}

.popup-ctrl img
{
  /*
  background-color: #eee;
  border:           thin threedhighlight outset;
   */
  width:            1em;
  height:           1em;
  padding:          0 2px;
}

td.popup-body
{
  text-align:       left;
  /*
  width:             100%;
   */
}

div.popup-body
{
  position:         relative;
  /*
  display:          block;
   */
  /* make sure it sized to fit into the popup */
  display:          inline-flex;
  flex-direction:   column;
  flex:             1;
  min-height:       0;
  min-width:        0;
  overflow:         hidden;
}

.popup-body hr
{
  width:            100%;
}

div.popup-header /* only needed for rounded popup corners */
{
  position:         relative;
  display:          block;
  flex:             0;
  /*
  overflow:         hidden;
  width:            100%;
  min-height:       var(--popup-border-radius);
   */
}

div.popup-footer
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  flex:             0;
  /* 
  overflow:         hidden;
  width:            100%;
  min-height:       var(--popup-border-radius);
 */
}

a.popup-resize
{
  text-align:       right;
  width:            1em;
  height:           1em;
  float:            right;
}

a.popup-resize img
{
  text-align:       right;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

div.popup-resize
{
  position:         relative;
  display:          block;
  align-self:       flex-end;
  flex:             0;
  padding:          0;
}

div.popup-resize img
{
  position:         relative;
  display:          block;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

.objectPopupIcon
{
  display:          inline;
  cursor:           pointer;
  vertical-align:   middle;
}

.objectPopupIcon img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  margin:           auto;
  user-select:      none;
}

img.objectPopupIcon
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  /* margin:           auto; */
  user-select:      none;
}

table.objectMenu
{
  border-style:     none;
  border-collapse:  collapse;
  width:            100%;
}

div.objectMenu
{
  position:         relative;
  display:          block;
  margin:           0;
  padding-top:      2px;
  overflow:         auto;
  height:           calc(100%);
}

.objectMenuItem td
{
  vertical-align:   middle;
  padding:          5px;
  FONT-WEIGHT:      normal;
  color:            var(--link-color);
  background-color: var(--menu-bg-color);
  cursor:           pointer;
  width:            100%;
}


tr.objectMenuItem
{
  color:            var(--link-color);
  cursor:           pointer;
  text-decoration:  none;
}

.objectMenuItem IMG
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

td.objectMenuImage
{
  width:            auto;
}

td.objectMenuText
{
  padding-right:    1em;
}


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

div.content
{
  position:         relative;
  display:          block;
}

.content td
{
  padding:          0;
}

div.content-header
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  align-items:      stretch;
  flex:             none;
  user-select:      none;
  background-color: var(--content-header-bg-color);
  background:       var(--content-header-bg);
}

tr.content-toolbar
{
  width:            100%;
  border:           2px outset;
}

div.content-title
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  align-items:      center;
  gap:              0.5ch;
  font-weight:      bolder;
  text-align:       left;
  white-space:      nowrap;
  vertical-align:   middle;
  padding:          0.5ch;
  line-height:      1em;
  /*background-color: #1df;*/
  /*
  background-color:   #eee;
  background:         linear-gradient(to right, #eee, white);
   */
}

/*
div.content-title img
{
  vertical-align:   middle;
}
*/
div.content-title a
{
  vertical-align:   middle;
}

div.breadcrumb-sep
{
  display:          block;
  width:            1ch;
  font-smooth:      auto;
 -webkit-font-smoothing: antialiased;
}

div.breadcrumb-sep:before
{
  vertical-align:   middle;
  display:          inline-block;
  content:          var(--crumb-delim-char);
  color:            var(--crumb-delim-color);
  font-style:       normal;
}

div.breadcrumb-sep-clickabe:hover:before
{
  cursor:           pointer;
  content:          var(--crumb-delim-down-char);
}

.content-toolbar td
{
  padding-bottom:   5px;
  text-align:       left;
  cursor:           pointer;
}

div.content-toolbar
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  /*width:            100%;*/
  margin:           0;
  padding:          0;
  border-width:     0;
  border-style:     none;
  /*background-color: #1df;*/
  /*
  background-color:   #eee;
  background:         linear-gradient(to right, #eee, white);
   */
}

/*
div.content-toolbar div.control-panel
{
  display:          inline !important;
  float:            left;
}
*/
div.control-panel
{
  position:         sticky;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  column-gap:       0.3em;
  flex:             0;
  left:             0;
  padding:          0.3em;
  /*line-height:      2em;*/
  border-width:     0;
  border-style:     none;
}

table.control-panel
{
  border-collapse:  collapse;
  border-spacing:   0;
}

ul.control-panel
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  align-items:        center;
  list-style-image:   none;
  list-style-position:inside;
  list-style-type:    none;
  margin:             0;
  padding:            0; /*0 0 5px 0;;*/
  /*line-height:        2em; */
  white-space:        nowrap;
  user-select:        none;
}

ul.search-panel
{
}


div.content-controls
{
  position:           relative;
  display:            inherit;
  overflow:           hidden;
  margin:             0;
  border-width:       0;
  border-style:       none;
  text-align:         center;
  width:              100%;
}

div.content-navigation
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        center;
  overflow:           hidden;
  width:              calc(100% - 1em);
  /* padding-bottom:     0.5ch; */
}

.control,
.control-shift,
.control-shift-field,
.control-shift-set
{
  white-space:        nowrap;
}

.control-spacer,
.control-shift,
.control-shift-field,
.control-shift-set
{
  float:              right!important;
}

.control-spacer
{
  flex:               1 !important;
}

div.control-icon
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  flex-wrap:          nowrap;
}

.control
{
  position:         relative;
  display:          flex;
  align-items:      center;
  flex-direction:   row;
  flex-wrap:        nowrap;
  white-space:      nowrap;
  flex:             0;
  user-select:      none;
  /*
  border-style:     none;
  float:            left;
  vertical-align:   middle;
  text-align:       center;
  line-height:      1em;
   */
}

.control input,
.control select
{
  vertical-align:   middle;
}

li.control-spacer
{
  flex:             1;
}
.control-shift-field input[type=text]
{
  width:            12em;
}

.control img, input[type=image]
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           pointer;
  user-select:      none;
  background-color: transparent;
}

img.control
{
  /* vertical-align:   middle; */
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           pointer;
  user-select:      none;
}

span.control
{
  vertical-align:   middle;
  width:            1em;
  height:           1em;
  border-style:     none;
  padding:          0;
  user-select:      none;
}

a.control
{
  cursor:           pointer;
  color:            var(--link-color);
  text-decoration:  none;
  user-select:      none;
}

input[type=image].control
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           pointer;
  user-select:      none;
}

a > .control
{
  padding-right:    0.3em;
}

.control-close:after
{
  content: var(--control-char-close);
}
.control-collapse:after
{
  content: var(--control-char-collapse);
}

.control-expand:after
{
  content: var(--control-char-expand);
}

.control-reload:after
{
  content:  var(--control-char-reload);
}

.control-copy:after
{
  content:  var(--control-char-reload);
}

/*
td.control:hover
{
  border:           1px grey outset;
}
*/

div.form-body-transparent
{
  /* overflow:         auto; */
}

div.form-body-popup
{
  position:         relative;
  display:          block;
  background-color: var(--form-bg-color);
  width:            inherit;
  margin:           0;
  /*
  border-top-width: 1px;
  border-top-style: outset;
   */
}

div.content-body
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  /*
  align-items:      stretch;
  display:          block;
   */
  flex:             auto;
  min-width:        10em;
  margin:           0;
  padding:          0;
  border-width:     0;
  border-style:     none;
  vertical-align:   top;
  text-align:       left;
  box-sizing:       border-box;
  height:           calc(100%);
  width:            calc(100%);
}

div.content-scrollable
{
  overflow:         auto;
}

div.content-no-scroll
{
  overflow:         hidden!important;
}

.content-body img
{
  padding:          0;
  border-style:     none;
/*  vertical-align:   middle; */
}

.content-form
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  flex-wrap:        nowrap;
  position:         relative;
  align-items:      stretch;
  padding:          0;
  margin:           0;
  width:            inherit;
  height:           inherit;
  overflow:         auto;
}

div.content-form-hidden
{
  display:          none;
  height:           0;
  margin:           0;
  padding:          0;
  clear:            both;
  visibility:       hidden;
  border-width:     0;
  border-style:     none;
}

/****************************
* Controls                  *
*****************************/

table.interval-control-table
{
  vertical-align:   middle;
  margin-left:      auto;
  margin-right:     auto;
  margin-top:       0px;
  margin-bottom:    0px;
}

td.interval-control-prev
{
  text-align:       right;
  cursor:           pointer;
}

td.interval-control-current
{
  text-align:       center;
}

td.interval-control-next
{
  text-align:       left;
  cursor:           pointer;
}

/************************
* Object List           *
*************************/

table.object-list-table
{
  width:            100%;
  vertical-align:   top;
  border-width:     0px;
  border-style:     none;
  border-color:     var(--table-border-color);;
  border-collapse:  collapse;
  background-color: var(--table-bg-color);
}

div.content-table
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        stretch;
  flex:               1;
  /*
  width:              calc(100%);
   */
  height:             calc(100%);
  min-height:         0;

  vertical-align:     middle;
  margin:             0;
  padding:            0;
  border-width:       0;
  border-style:       none;
  /* overflow:           auto; */
}

div.popup-body > div.content-table
{
  overflow:          auto;
  background-color:  var(--form-bg-color);
  width:             inherit;
}

table.content-table
{
  width:            calc(100%);
  vertical-align:   top;
  border-width:     0;
  border-spacing:   1px 0;
  white-space:      nowrap;
}

th.table-header-column
{
  background-color: var(--table-header-bg-color);
  FONT-WEIGHT:      normal;
  border-style:     outset;
  border-color:     var(--table-header-border-color);
  border-width:     1px;
  padding-right:    5px;
  padding-left:     5px;
  overflow:         clip;
  /*
  padding-bottom:   2px;
  padding-top:      1px;
  position:         sticky;
  top:              0px;
  z-index:          10;
   */
}

th.table-header-column span
{
  cursor:           default;
}

.table-header-column table
{
  width:            100%;
  border-spacing:   0 0;
  border-collapse:  collapse;
  text-decoration:  none;
}

.table-header-column a
{
  text-decoration:  none;
  white-space:      nowrap;
  color:            var(--link-color);
  cursor:           pointer;
}

col.table-header-column-name
{
}

.table-header-column-name a
{
  text-decoration:  none;
}

td.table-header-column-sortorder
{
  text-align:       right;
  padding:          0;
  width:            auto;
}

div.table-header-column-sortorder
{
  float:            right;
  display:          inline-block;
}

.table-header-column.sorted-desc:after
{
  content:          var(--table-header-sort-char-desc);
}

.table-header-column.sorted-asc:after
{
  content:          var(--table-header-sort-char-asc);
}

.table-header-column-sortorder img
{
  padding-left:     1em;
  width:            0.5em;
  height:           0.5em;
}

.content-table-footer
{
  position:         sticky;
  bottom:           0;
  background-color: transparent;
  user-select:      none;
}

.content-table-footer span
{
  position:         sticky;
  left:             0;
  padding-right:    1ch;
  background-color: var(--table-row-normal-bg-color);
}

.content-table-body td
{
  white-space:      nowrap;
  padding:          0 0.3em;
  line-height:      2em;
  /*
  height:           2em;
   */
  box-sizing:       border-box;
}
/*
.content-table-body a
{
  vertical-align:  middle;
}
*/
td.table-cell-id
{
  text-align:       left;
}

.table-cell-id a
{
  text-decoration:  none;
}

div.table-cell input
{
  border-width:     thin;
}

td.table-cell-number
{
  text-align:       right;
}

td.table-cell-img
{
  text-align:       center;
  padding:          0;
  width:            1em;
}

.table-cell-img img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

.table-cell-form td
{
  vertical-align:   top;
  white-space:      nowrap;
}

.table-cell-data a
{
  text-decoration:  none;
}

.table-cell-multiline
{
  overflow:         auto;
  white-space:      pre-wrap;
}

div.table-cell-bar
{
  position:         relative;
  cursor:           pointer;
  text-decoration:  none;
  margin:           1px 0;
}

div.table-cell-bar-label
{
  position:         absolute;
  left:             5px;
  top:              0;
  white-space:      nowrap;
}

a.table-cell-attr-link
{
  text-decoration:  none;
  color:            var(--link-color);
  cursor:           pointer;
}
/* Action */
a.table-cell-attr-action
{
  text-decoration:  none;
  color:            var(--link-color);
  cursor:           pointer;
}

.class-attr-restricted
{
  text-align:       center;
  user-select:      none;
}

.class-attr-restricted img
{
  text-align:       center;
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           default;
}

.class-attr-type-1 img
{
  text-align:       center;
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           default;
}

.class-attr-type-1
{
  text-align:       left;
}

td.class-attr-type-1 input[type='text']
{
  /* border-style: none; */
  width: calc(100% - 1em) !important;
}

div.table-cell-attr-img
{
  text-align:       center;
  width:            100%;
  vertical-align:   middle;
}

.class-attr-type-1 img
{
  text-align:       center;
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           default;
}

/* number */
.class-attr-type-3
{
  text-align:       right;
  width:            0; /* fit content */
}

.class-attr-type-3 img
{
  text-align:       center;
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           default;
}

/* ObjectID */
.class-attr-type-6 a:link,
.class-attr-type-6 a:visited
{
  text-decoration:    none;
  color:              var(--link-color);
  cursor:             pointer;
}

/* Timestamp */
.class-attr-type-8
{
  text-align:        center;
  width:             12em;
}
/* Color */
div.class-attr-type-10
{
  display:            inline-block!important;
  position:           relative;
  height:             1.5em;
  width:              4em!important;
  max-width:          10em!important;
  vertical-align:     middle;
  border-style:       inset;
  border-width:       1px;
}

.class-attr-type-10 div.table-cell-attr 
{
  WIDTH:            100%;
  max-width:        4em;
}
/* boolean */
.class-attr-type-11
{
  text-align:        center;
  width:             2em;
}

.class-attr-type-11 input[type='checkbox']
{
  vertical-align:    middle;
}

.class-attr-type-14
{
  text-align:        left;
  width:             8em;
}

.class-attr-type-16
{
  text-align:       center;
  cursor:           pointer;
  padding-left:     0.3em;
  padding-right:    0.3em;
  width:            1em;
  user-select:      none;
}

.class-attr-type-16 img
{
  text-align:       center;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

/*
 *  Status ID
 */
.class-attr-type-17
{
  text-align:       center;
  padding:          0px !important;
  border-style:     none;
  border-width:     0px;
  width:            8em;
  max-width:        8em;
  line-height:      2em;
  /*color:            var(--status-color); */
}

/* .class-attr-type-17 div */

div.object-form-attribute-value-div
{
  padding:            3px 0.5em;
  margin:             1px;
}

div.object-form-attribute-value-content
{
  position:           relative;
  display:            block;
  width:              100%;
  height:             100%;
  /*
  resize:             vertical;
  */
  overflow:           auto;
}

div.object-form-attribute-value-table
{
  display:            flex;
  flex-direction:     row;
  align-items:        flex-start;
  column-gap:         1ch;
  width:              100%;
  overflow:           hidden;
}

div.object-form-attribute-value-column
{
  display:        inline-block;
}

.object-form-attribute-value-prompt
{
  width:          calc(60vw)!important;
  min-width:      10em;
}
/*
  Right allign Numeric
*/
.class-attr-type-25
{
  text-align:       right;
  width:            4em;
}

/* interval */
.class-attr-type-33
{
  text-align:       right;
  width:            8em;
}
/* Severity */
.class-attr-type-36
{
  text-align:       center;
  width:            3em;
}

.class-attr-type-36 img
{
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

.class-attr-type-40
{
  text-align:       left;
  margin:           auto;
}

td.class-attr-type-40
{
  width:            1em;
}

.class-attr-type-41
{
  text-align:       center;
  margin:           auto;
}

.class-attr-type-41 img
{
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  cursor:           pointer;
}

.class-attr-type-45
{
  text-align:      left;
  width:           40em;
}

.row-top td
{
  vertical-align:   top;
  padding:          5px;
}

.row-normal
{
  background-color: var(--table-row-normal-bg-color);
}

.row-alternate
{
  background-color: var(--table-row-alt-bg-color);
}
/*
tr.row-alternate>td,
tr.row-normal>td
{
  display:          table-cell;
}
*/
.row-selected
{
  background-color: var(--table-row-select-bg-color);
}

.row-search
{
  position:         sticky;
  top:              2em;
  background-color: var(--table-row-normal-bg-color);
  z-index:          10;
}

.row-normal input[type='text']
{
  background-color: var(--table-row-normal-bg-color);
}

.row-alternate input[type='text']
{
  background-color: var(--table-row-alt-bg-color);
}

.row-selected input[type='text']
{
  background-color: var(--table-row-select-bg-color);
}

.row-normal input:focus,
.row-alternate input:focus
{
  outline-style:      none;
  outline-width:      0;
}

div.row-toolbar
{
  min-width:          unset;
  min-height:         unset;
}

tr.content-table-header
{
  position:           sticky;
  top:                0;
  z-index:            10;
  user-select:        none;
}

tr.highlight
{
  background-color: var(--table-row-highlight-bg-color);
}

#object-table-row-selected td,
#object-table-row-selected div,
#object-table-row-selected input[type='text']
{
  color:              var(--table-row-select-color) !important;
  background-color:   var(--table-row-select-bg-color) !important;
}

col.table-column-elastic
{
  /*max-width:        100%;*/
  width:                calc(100%);
}

td.table-column-elastic
{
  max-width:            0!important; /* makes it elastic */
  min-width:            10em;
  width:                calc(100%);
}

div.table-column-elastic
{
  max-width:            0!important; /* makes it elastic */
  min-width:            10em;
  width:                calc(100%);
}

div.table-cell-elastic
{
  width:                calc(100%);
}

div.table-cell-attr
{
  position:             relative;
  display:              block;
  /*
  vertical-align:       middle;  
  margin:               2px;*/
}

div.table-cell-attr-clip
{
  position:             relative;
  display:              block;
  /* max-width:            fit-content; */
  /*margin:               2px;*/
  /*vertical-align:       middle; */
  overflow:             hidden;
  text-overflow:        ellipsis;
  -o-text-overflow:     ellipsis;
  -icab-text-overflow:  ellipsis;
  -khtml-text-overflow: ellipsis;
}

input.table-cell-attr-clip
{
  border-style:         none;
  border-width:         0;
  width:                100%;
  vertical-align:       middle;
}

div.table-cell-attr-wrap
{
  position:             relative;
  display:              block;
  padding:              0;
  overflow-wrap:        anywhere;
}

/**
 *  Audit Trail Content
 */
.object-audit-trail td
{
  white-space:          normal;
}
/************************
* Object Log            *
*************************/

td.object-log-entry-name
{
  padding:          5px;
  vertical-align:   top;
}

td.object-log-entry-value
{
  padding:          5px;
  vertical-align:   top;
  overflow:         auto;
}

td.object-log-entry-value div
{
  padding:          0;
  margin:           0;
  overflow:         auto;
  white-space:      normal;
}


/***********************
 * Process Chart
 **********************/

.process-chart-activity
{
  cursor:      pointer;
}

/***********************
 * Chart
 **********************/
div.chart-container
{
  position:         relative;
  /*
  display:          flex;
  flex-direction:   column;
  align-items:      stretch;
  */
  display:          block;
  width:            inherit;
  background-color: var(--chart-bg-color);
  clear:            left;
  padding:          0;
  margin:           0;
  overflow:         auto;
}

div.stream div.chart-container
{
  overflow:         visible !important;
}

div.popup div.chart-container
{
  overflow:         unset !important;
}

table.chart-container
{
  /* width:            100%; */
  vertical-align:   top;
  border-style:     none;
  border-collapse:  collapse;
  overflow:         auto;
}

div.chart-title
{
  position:         relative;
  display:          block;
  text-align:       center;
  font-weight:      bolder;
  padding:          1em 0 0 0;
  margin:           0;
}

div.chart-title a
{
  color:            var(--link-color);
  text-decoration:  none;
  cursor:           pointer;
  white-space:      normal;
  width:            calc(100% - 2em);
}

div.chart-panel-title
{
  width:            100%;
  text-align:       center;
  font-weight:      bolder;
}

.chart-panel div.chart-panel-title
{
  padding-top: 1em;
}

div.chart-panel-content
{
  cursor:         pointer;
}

td.chart-body
{
  vertical-align:   top;
}

td.chart-legend
{
  /*width:            100%;*/
  white-space:      nowrap;
  vertical-align:   middle;
  /*padding-top:      1em; */
}

div.chart-legend
{
  display:          flex;
  flex-direction:   column;
  flex-wrap:        nowrap;
  row-gap:          0.5ch;
  align-items:      start;
  max-height:       inherit;
  overflow:         auto;
}

div.chart-legend-item
{
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  align-items:      center;
  column-gap:       0.5ch;
  border-style:     none;
}

div.chart-legend-item input
{
  margin-top:       0.5ch;
}

.chart-legend a
{
  text-decoration:  none;
  white-space:      inherit;
}

div.chart-legend-image
{
  border-radius:    0.5ch;
  user-select:      none;
  width:            1em;
  height:           1em;
}


div.chart-legend-text
{
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  align-items:      center;
  text-align:       left;
  white-space:      nowrap;
  padding-left:     0.5ch;
  line-height:      1.5em;
}

div.chart-legend-text a
{
  text-decoration:  none;
  color:            var(--link-color);
  cursor:           pointer;
}

div.chart-legend-text span
{
}

div.chart-block
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  flex-wrap:        nowrap;
  align-items:      center;
  position:         relative;
  /*padding:          1ch; */
  margin:           1ch;
  min-height:       min-content;
  cursor:           pointer;
}

div.chart-block a
{
  margin:           auto 0;
}

div.chart-block span
{
  margin:           auto 0;
}

/***********************
* Graph
***********************/
div.graph
{
  text-align:       right;
  margin-left:      auto;
}

div.graph-container
{
  position:         relative;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       right;
  max-height:       unset;
}

img.graph-image
{
  border-width:     0;
  border-style:     none;
  user-select:      none;
}

area.chart-value-shape
{
  cursor:           pointer;
}

area.chart-time-value
{
  cursor:           zoom-in;
}

table.chart-table-container
{
  width:            100%
}

table.chart-table
{
  width:            calc(100%);
  white-space:      nowrap;
}

table.chart-table td
{
  vertical-align:   top;
  margin-left:      auto;
  margin-right:     auto;
}

table.graph-table
{
  width:            calc(100%);
  white-space:      nowrap;
}

div.graph-table
{
  position:         relative;
  display:          flex;
  flex-direction:   row; /* default */
  align-items:      center;
  overflow:         auto;
}

div.graph-table.right
{
  flex-direction:   row;
} 

div.graph-table.bottom
{
  flex-direction:   column;
} 

.graph-table > div.chart-legend
{
  overflow:         visible;
}

.graph-table th
{
  position:         sticky;
  top:              0px;
  background-color: var(--table-header-bg-color);
  padding:          3px;
  border-width:     1px;
  border-style:     outset;
  z-index:          10;
}

th.graph-table-time
{
  cursor:           pointer;
  text-align:       center;
}

td.graph-table-collector
{
  text-align:       left;
  font-weight:      bolder;
}

td.graph-table-collector a
{
  text-decoration:  none;
  color:            var(--link-color);
  cursor:           pointer;
}

.graph-table-category
{
  position:         sticky;
  text-align:       left;
  left:             0;
  z-index:          20 !important;
}

th.graph-table-category
{
   z-index:         30 !important;
}

td.graph-table-category
{
  background-color: inherit;
  font-weight:      bolder;
  white-space:      nowrap;
  padding:          3px;
}

td.graph-table-category-excluded
{
  text-align:       left;
  font-weight:      normal;
  color:            var(--chart-category-exclude-color);
  padding:          3px;
  white-space:      nowrap;
}

.graph-table-category a
{
  text-decoration:  none;
  color:            var(--link-color);
  cursor:           pointer;
}

td.graph-table-value
{
  text-align:      right;
  padding:         3px;
  width:           4em;
}

td.graph-table-value a
{
  text-decoration: none;
  color:           var(--link-color);
  cursor:          pointer;
}

td.graph-table-icon
{
  text-align:     center;
  width:          3em;
}

td.graph-table-boolean
{
  text-align:      center;
  padding:         3px;
  width:           1em;
}

div.graph-time-start
{
  float:          left;
}

div.graph-time-end
{
  float:          right;
}
/***********************
 * Matrix
 **********************/
th.matrix-time
{
  text-align:     center;
  vertical-align: middle;
  cursor:         pointer;
}
td.matrix-cell
{
  text-align: center;
}
.matrix-cell div
{
  width:          1.5em;
  height:         1.5em;
  padding:        0;
  margin:         0;
  border-radius:  25%;
  display:        inline-block;
  text-align:     center;
  vertical-align: middle;
  cursor:         pointer;
}

/***********************
 * BLOB
 **********************/
.blob-attribute-view td
{
  background-color: var(--blob-bg-color);
  padding:          10px;
}

/**************************
 *  Object Edit/View
 *************************/

table.object-form-table
{
  border-width:       0;
  border-style:       none;
  border-collapse:    collapse;
  width:              100%;
  height:             100%;
}

div.object-form-table
{
  position:          relative;
  display:           flex; /* block; */
  flex-direction:    column;
  padding:           0;
  margin:            0;
  width:             calc(100%);
  height:            calc(100%);
}

div.object-form-table-compact
{
  height:            fit-content!important;
}

div.object-form-tabs-area
{
  position:           sticky;
  display:            block;
  user-select:        none;
  top:                0;
  padding:            0;
  border-bottom:      1px inset var(--tabs-border-color);
  z-index:            100;
}

#object-form-tabs-area
{
  background:         var(--tabs-bg);
}

ul.object-form-tabs
{
  position:          relative;
  display:           inline-block;
  text-align:        left;
  list-style-type:   none;
  padding:           0;
  margin:            1px 0 1px 0;
  border-width:      0;
  border-style:      none;
  border-collapse:   collapse;
}

.object-form-tabs li
{
  position:          relative;
  display:           inline;
  padding:           0px;
  line-height:       2em;
}

.object-form-tabs div
{
  position:          relative;
  display:           inline;
}
/*
td.object-form-tab-disabled,
td.object-form-tab-spacer
{
  box-shadow:          0px 0px 10px rgba(0,0,0,0.5);
  -moz-box-shadow:     0px 0px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow:  0px 0px 10px rgba(0,0,0,0.5);
}
*/

li.object-form-tab-active div.object-form-tab-body
{
  background-color:    var(--tabs-active-bg-color);
  border-bottom:       3px solid var(--tabs-active-bg-color);
  bottom:              -1px;
}

li.object-form-tab-disabled div.object-form-tab-body
{
  color:               var(--tabs-disable-color);
  background-color:    var(--tabs-disable-bg-color);
  /*
  border-bottom:       1px inset var(--tabs-disable-bg-color);
   */
}

li.object-form-tab-spacer div
{
  width:              100%;
}

div.object-form-tab-body
{
  border-radius:       1ch 1ch 0 0;
  border-right:        1px outset var(--tabs-border-color);
  border-left:         1px outset var(--tabs-border-color);
  border-top:          1px outset var(--tabs-border-color);

  cursor:              pointer;
  color:               var(--tabs-color);
  white-space:         nowrap;
  padding:             0.5ch 1ch 0.6ch 1ch;
  font-weight:         bolder;
  text-decoration:     none;
  user-select:         none;
}

div.object-form-prompt-area
{
  position:            relative;
  display:             block;
  padding-top:         0;
  padding-bottom:      0;
  padding-left:        1em;
}

td.object-form-fields-area
{
  border-width:        0;
  border-style:        none;
  vertical-align:      top;
  padding-top:         1em;
  padding-right:       1em;
  background-color:    var(--form-bg-color);
  width:               100%;
  height:              100%;
}

div.object-form-fields-area
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        stretch;
  vertical-align:     top;
  margin:             0;
  padding:            0;
  padding-top:        1em;

  background-color:   var(--form-bg-color);

  border-style:       none;
  box-sizing:         border-box;
}

div.object-form-fields-area.stretchy 
{
  width:              calc(100%)!important;
  /*
  height:             calc(100%)!important;
  */
  overflow:           auto;
  flex:               1;
}

div.popup-body > div.object-form-fields-area
{
  overflow:           overlay;
}

table.panel
{
  background-color:   var(--form-bg-color);
  width:              100%;
}

div.panel
{
  background-color:   var(--form-bg-color);
  width:              100%;
}

.object-form-tab-panel-filler td
{
  height:             calc(100%);
}

div.object-form-tab-panel-active
{
  position:         relative;
  display:          block;
  /*
  width:            100%;
   */
  height:           calc(100%);
  background-color: var(--form-bg-color);
}

div.object-form-tab-panel-disabled
{
  display:          none;
}

table.object-form-tab-panel
{
  border-spacing:    0 0.5em;
  text-align:        left;
  user-select:       none;
  line-height:       1.5em;
  padding-right:     3em;
  width:             100%;
}

div.object-form-attribute 
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      flex-start;
  padding-bottom:   0.5em;
  white-space:      nowrap;
  line-height:      1.5em;
}

.object-form-attribute-label
{
  color:            var(--form-label-color);
}

div.object-form-attribute-label
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  align-items:      center;
}

div.object-form-attribute-label>label
{
  flex:             1; 
}

label.object-form-attribute-versioned
{
  font-weight:      bolder;
}

.object-form-attribute-mandatory
{
  color:            var(--form-mandatory-color);
}

td.object-form-attribute-mandatory
{
  text-align:       center;
  vertical-align:   top;
  width:            1ch;
  min-width:        1ch;
}

td.object-form-attribute-mandatory div
{
  vertical-align:   middle;
  display:          inline;
}

td.object-form-attribute-mandatory span
{
  vertical-align:   middle;
}

.object-form-attribute .placeholder:after
{
  content:          '...';
}

.object-form-attribute-link
{
  cursor:           pointer;
  color:            var(--link-color);
}

col.object-form-attribute-name
{
  /*
  width:           12em;
   */
}

col.object-form-attribute-mandatory
{
  width:            1em;
  min-width:        1em;
}

col.object-form-attribute-value
{
  max-width:        calc(100%);
}

td.object-form-attribute-name
{
  text-align:      right;
  vertical-align:  top;
  white-space:     nowrap;
  user-select:     text;
  /*
  padding-left:    0.5em;
  padding-right:   0.5em;
   */
  max-width:       12em;
  width:           12em;
  min-width:       5em;
  overflow-x:      clip;
}

/*
.object-form-attribute-name>label
{
  line-height:      1.5em;
}
div.object-form-attribute-name,
div.object-form-attribute-mandatory
{
  display:        inline-block;
  padding-left:   0.5em;
}
*/

div.object-form-attribute-value
{
  position:       relative;

  display:        flex;
  flex-direction: row;
  flex-wrap:      nowrap;
  column-gap:     0.4ch;

  padding-left:   0.5em;

  flex:           1;
  width:          100%;
}
/*
.object-form-attribute-name label
{
  vertical-align:   middle;
}

.object-form-attribute-value span
{
  vertical-align:   middle;
}
*/

.object-form-attribute-group
{
  text-align:       left !important;
  vertical-align:   middle;
  white-space:      normal;
  font-weight:      bolder;
  font-size:        larger;
}

td.object-form-attribute-value
{
  position:         relative;
  display:          block;
  /*
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  column-gap:       0.4ch;
  align-items:      center;
  min-height:       1.5em;
  */
  padding-top:      0;
  user-select:      text;

  text-align:       left;
  white-space:      nowrap;
  vertical-align:   middle;
  /*
  overflow:         hidden;
  width:            100%;
  max-width:        calc(100vw - 19em);
  */
}

/*
.object-form-attribute-value
{
  display:        flex;
  flex-direction: row;
  align-content:  center;
  flex-wrap:      nowrap;
  place-items:    center;
}
*/
div.object-form-fields-area.stretchy div.object-form-attribute-field
{
  width:          calc(100% - 1ch) !important;
  height:         calc(100% - 1ch) !important;
  overflow:       auto;
}

div.object-form-fields-area.stretchy textarea.object-form-attribute-field
{
  width:          calc(100% - 1em)  !important;
  height:         calc(100% - 1em)  !important;
}

div.popup-body td.object-form-attribute-value
{
  overflow: visible !important;
}

.object-form-attribute-value .object-form-attribute-field
{
  text-align:       left;
  margin:           0; /* 0 0.5ch 0 0; */
  box-sizing:       border-box;
}

.object-form-attribute-value .object-form-attribute-value-uom
{
  /*
  vertical-align:   middle;
   */
}

td.object-form-attribute-value .object-form-attribute-field
{
  max-width:        calc(100vw - 14em);
}

input.object-form-attribute-field
{
  /* vertical-align:   middle; */
  white-space:      nowrap;
  text-overflow:    ellipsis !important;
  overflow:         hidden;
  width:            auto;
}

input.object-form-attribute-field[type='text'],
input.object-form-attribute-field[type='password'],
input.object-form-attribute-field[type='email'],
input.object-form-attribute-field[type='url']
{
  width:            100%;
}

input.object-form-attribute-field[type='date']
{
  width:            20em;
}

input.object-form-attribute-field[type='button']
{
  text-align:       center;
}
/*
input.object-form-attribute-field[isEditable=false]
{
  border-style:    none;
}
*/
div.object-form-attribute-value-column *.object-form-attribute-field[displayOnly='true']
{
  width:            initial;
}

a.object-form-attribute-field
{
  /*
  border-width:     1px;
  border-style:     inset;
   */
  border-style:     none;
  text-decoration:  none;
}

textarea.object-form-attribute-field
{
  resize:           vertical;
  overflow:         auto;
  width:            100%;
  font-family:      var(--form-textarea-font);/*var(--fonts); */
  font-size:        var(--font-size);
}

img.object-form-attribute-field
{
  WIDTH:            1em!important;
  HEIGHT:           1em!important;
  border-width:     1px;
  border-style:     inset;
  user-select:      none;
  /*
  vertical-align:   middle;
  padding-left:      5px;
  padding-right:     5px;
   */
}

img.object-form-attribute-values-button
{
  /* vertical-align:   middle; */
  align-self:       center;
  cursor:           pointer;
  user-select:      none;
  padding:          0;
  margin:           0;
  WIDTH:            1em;
  HEIGHT:           1em;
}

div.object-form-attribute-value-clear
{
  display:          inline;
}

td.object-form-attribute-version
{
  text-align:       right;
  padding-right:    1em;
  vertical-align:   middle;
  width:            3em;
}

.object-form-attribute-version a
{
  text-decoration:  none;
}
/**
 *   Miltipart Field
 */
table.object-form-attribute-multipart
{
  padding:          0px;
  border-spacing:   0px;

}
.object-form-attribute-multipart tr
{
  padding:          0px;
}
.object-form-attribute-multipart td
{
  padding-top:      0px;
}

div.object-form-attribute-multipart
{
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  column-gap:       0.4ch;
  align-items:      center;
}

div.object-form-attribute-part
{
  display:          inline;
}
/**
 * Table Attributes
*/

div.object-form-attribute-table-div
{
  width:           100%;
}

div.object-form-attribute-field
{
  display:          flex;
  flex-direction:   row;
  align-items:      flex-start;
  column-gap:       1ch;
  width:            100%;
}

div.object-form-attribute-field[richtext=true]
{
  position:           relative;
  display:            inline-block;
  border-style:       inset;
  border-width:       1px;
  background-color:   var(--input-bg-color);
  resize:             vertical;
  overflow:           auto;
  -moz-appearance:    textfield-multiline;
  -o-appearance:      textarea;
  appearance:         textarea;
  white-space:        normal;
  padding:            0 0.5em;
  min-width:          10em;
}

div.popup div.object-form-attribute-field[richtext=true]
{
  min-width:          40vw;
}

table.object-form-attribute-table
{
  vertical-align:     top;
  width:              100%;
  border-collapse:    collapse;
}

.object-form-attribute-table-header th
{
  border-style:       outset;
  border-width:       1px;
  padding-left:       5px;
  padding-right:      5px;
}

td.object-form-attribute-table-body
{
  width:              100%;
  vertical-align:     top;
  padding-top:        0px;
}

div.object-form-attribute-table-body
{
  display:            inline-block;
  border-style:       inset;
  border-width:       1px;
  resize:             vertical;
  min-height:         4em;
  max-height:         80vh;
  overflow:           auto;
  width:              100%;
  height:             inherit;
}

div.object-form-attribute-table-body .stream
{
  overflow:           visible !important;
  max-height:         initial !important;
  max-width:          initial !important;
  height:             initial !important;
  width:              initial !important;
}

div.object-form-attribute-table-body .main-content
{
  overflow:          visible !important;
  max-height:        initial !important;
  max-width:         initial !important;
  height:            initial !important;
  width:             initial !important;
}

td.object-form-attribute-table-button
{
  cursor:           pointer;
  vertical-align:   top;
}

td.object-form-attribute-table-button img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

div.object-form-attribute-table-button
{
  display:          inline-block;
  vertical-align:   top;
  max-width:        2em;
}

ul.object-form-attribute-table-button
{
  list-style-type:  none;
  margin:           0;
  padding:          0;
}

li.object-form-attribute-table-button
{
  cursor:           pointer;
  vertical-align:   top;
}

img.object-form-attribute-table-button
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  user-select:      none;
}

div.object-form-attribute-table-button img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

/****************
*  Calendar Controls
****************/

.object-form-attribute-calendar-controls
{
  width:            100%;
}

.object-form-attribute-calendar-controls table
{
  vertical-align:    middle;
  width:            100%;
}

.object-form-attribute-calendar-controls td
{
  vertical-align:   middle;
}

div.object-form-attribute-calendar-controls
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  align-items:      center;
}

.object-form-attribute-calendar-control-prev,
.object-form-attribute-calendar-control-next
{
  text-align:       center;
  cursor:           pointer;
  border-style:     outset;
  border-radius:    50%;
  border-width:     1px;
  background-color: var(--cal-ctrl-bg-color);
}

.object-form-attribute-calendar-control-prev:after
{
  content:      var(--control-char-prev);
  float:        left;
  width:        1.5em;
  height:       1.5em;
}

.object-form-attribute-calendar-control-next:after
{
  content:      var(--control-char-next);
  float:        right;
  width:        1.5em;
  height:       1.5em;
}

.object-form-attribute-calendar-control-curr
{
  text-align:       center;
  overflow:         hidden;
  width:            100%;
  font-weight:      bolder;
}

div.object-form-attribute-calendar-control-curr
{
  flex:             1;
}

.object-form-attribute-calendar-control-curr span
{
  width:           100%;
  text-align:      center;
  vertical-align:  middle;
}

div.object-form-attribute-calendar-panel
{
  display:         inline-block;
}

table.object-form-attribute-calendar-panel
{
  padding:         1em;
}

table.object-form-attribute-calendar
{
  border:          inset 1px;
  padding:         1em;
}

ul.object-form-attribute-calendar-weekdays
{
  margin:          0;
  padding:         0;
}

td.object-form-attribute-calendar-weekday
{
  text-decoration: none;
  text-align:      right;
  color:           var(--cal-day-color);
  min-width:       2em;
  padding:         0px 5px 0px 5px;
}

td.object-form-attribute-calendar-day
{
  text-decoration: none;
  text-align:      right;
  color:           var(--link-color);
  padding:         0px 5px 0px 5px;
  border-color:    var(--cal-day-border-color);
  border-style:    solid;
  border-radius:   1em;
  border-width:    0px;
}

td.object-form-attribute-calendar-day
{
  border-color:    var(--cal-day-border-color);
}

td.object-form-attribute-calendar-day:hover
{
  background-color: var(--cal-day-hover-color);
}

li.object-form-attribute-calendar-day
{
  display:          inline-flex;
  list-style:       none;
  padding:          5px;
  border-radius:    50%;
  margin-right:     5px;
  width:            2em;
  height:           2em;
  justify-content:  center;
  align-items:      center;
  cursor:           pointer;
  flex-grow:        1;
  font-size:        smaller;
  user-select:      none;
}

.object-form-attribute-calendar-day div
{
  cursor:          pointer;
  width:           100%;
}

.object-form-attribute-calendar-day a
{
  cursor:          pointer;
}

.object-form-attribute-calendar-day[on="1"]
{
  background-color: var(--cal-day-on-bg-color);
}

.object-form-attribute-calendar-today
{
  color:           var(--cal-day-today-color);
}

div.object-form-attribute-comments
{
  white-space:        normal;
  width:              100%;
}

span.middle
{
  vertical-align:     middle;
}

/***************
 * Value Object Card
 ***************/
div.cards-view
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          wrap;
  margin:             0;
  padding:            0;
  border-width:       0;
  border-style:       none;
  vertical-align:     top;
  text-align:         left;
  box-sizing:         border-box;
}

div.object-card
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        flex-start;
  padding:            0.5em;
  white-space:        normal;
  background-color:   var(--menu-bg-color);
  width:              10em;
  height:             10em;
  min-height:         10em;
}

div.card-cell.drag-source
{
  opacity:            0.5;
}

div.object-card-title
{
  display:            block;
  position:           relative;
  color:              var(--link-color);
  font-size:          larger;
  flex:               1;
  overflow:           hidden;
  width:              calc(100%);
  max-height:         unset !important;
}

div.object-card-title span
{
  color:              var(--link-color);
  cursor:             pointer;
}

div.object-card-descr
{
  display:            block;
  position:           relative;
  font-size:          smaller;
  color:              var(--tip-color);
  padding:            0.5em;
  overflow:           hidden;
  width:              calc(100%);
}

div.object-card-icon
{
  display:            block;
  position:           relative;
  text-align:         right;
  align-self:         flex-end;
}

div.object-card-icon img
{
  width:              1.5em;
  height:             1.5em;
}

div.object-card-toolbar
{
  display:            block;
  position:           relative;
  overflow:           hidden;
  width:              calc(100%);
}
/***************
 * Board
 ***************/
div.card-cell
{
  display:            inline-block;
  position:           relative;
  vertical-align:     top;
  background-color:   var(--dashboard-body-bg-color);
  box-shadow:         1px 1px 1px var(--box-shadow-color);
  border-style:       none;
  border-spacing:     0;
  margin-top:         5px;
  margin-right:       5px;
  padding:            0;
}
/***************
 * Value List
 ***************/

table.value-list-table
{
  width:            calc(100%);
}

div.value-list-table
{
  width:            calc(100%);
  display:          flex;
  flex-direction:   column;
  align-items:      stretch;
}

li.value-list-section
{
  cursor:            none;
  margin-bottom:     1em;
}

div.value-list-section
{
  font-weight:      bolder;
  font-size:        larger;
  text-decoration:  none;
  white-space:      nowrap;
  cursor:           pointer;
}

.value-entry-description img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
  padding-left:     0;
  padding-right:    5px;
  border-collapse:  collapse;
}

td.value-entry-description
{
  
}

div.value-entry-description
{
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  flex-wrap:        nowrap;
  /*
  width:            100%;
  padding:          2px;
  padding-left:     1px;
  padding-right:    1em;
  */
  text-align:       left;
  white-space:      nowrap;
  cursor:           pointer;
  margin-top:       2px;
  padding:          3px;
}

li.value-entry-description
{
  padding:           2px;
  padding-left:      1px;
  padding-right:     1em;
  margin:            2px;
  text-align:        left;
  white-space:       nowrap;
  cursor:            pointer;
}

.value-entry-description:hover
{
  color:            var(--value-select-color)    !important;
  background-color: var(--value-select-bg-color) !important;
}

td.value-entry-color
{
  padding-right:    2em;
  cursor:           pointer;
  user-select:      none;
}
/*************
* Request
*************/
.request-header
{
  text-align:     center;
  vertical-align: middle;
  padding:        10px;
}

table.request-body
{
  width:        100%;
  background-color: var(--background-color);
}

.request-body tr
{
  padding:      10px;
}

.request-attributes table
{
  border:       1px inset;
}

.request-attributes td
{
  text-align:   left;
}

.request-buttons table
{
  text-align:   center;
}

td.request-buttons
{
  text-align:         center;
  padding:            10px;
}

.request-buttons td
{
  padding-left:       20px;
}

/*************
* Response
*************/
div#popup-message-id
{
  display:            none;
}

table.response
{
  width:              100%;
}

div.response
{
  display:            flex;
  flex-direction:     column;
  height:             calc(100%);
}
/*
.response tr,
.response div
{
  text-align:          left;
  padding:             0.5em;
}
*/

div.response-confirm-message
{
  text-align:         center;
  padding:            1em;
}
/*
.response-message div,
.response-message td,
.response-message a
{
  color:              var(--link-color);
}
*/
.response-error-message div,
.response-error-message td,
.response-error-message a
{
  color:              var(--error-msg-color);
}

div.response-message
{
  position:           relative;
  display:            block;
  overflow:           auto;
  height:             calc(100%);
  padding:            0.5em;
}

td.response-buttons-panel
{
  width:              100%;
}

div.response-buttons-panel
{
  position:           relative;
  display:            block;
  text-align:         center;
  padding:            0.5em;
}

.response-buttons-panel table
{
  margin-left:        auto;
  margin-right:       auto;
}

.response-button
{
  padding:            5px;
}

div.response-button 
{
  display:            inline-block;
}

/*********
* Dashboard
*********/

div.dashboard-view
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        stretch;
  width:              inherit;
  height:             inherit;;
  overflow:           auto;
  background-color:   var(--dashboard-bg-color);
  box-sizing:         border-box;
}

div.dashboard-view-title
{
  position:             relative;
  display:              flex;
  flex-direction:       column;
  align-items:          center;
  flex:                 1;
  padding:              1ch;
  font-size:            larger;
  font-weight:          bolder;
  border-bottom-style:  inset;
  border-bottom-width:  thin;
}

div.dashboard-view-title *
{
  border-style:         unset;
}

div.dashboard-view-column
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  flex:               0;
  align-items:        stretch;

  height:             inherit;

  background-color:   inherit;
  box-sizing:         border-box;
  overflow-x:         visible;

  border-right:       solid 1px var(--dashboard-border-color);
}

/* Last column always takes the rest */
div.dashboard-view-column-last
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  flex:               1;
  align-items:        stretch;

  width:              100vw;
  height:             inherit;

  background-color:   inherit;
  box-sizing:         border-box;
}

table.dashboard-view
{
  vertical-align:     top;
  width:              100%;
  height:             100%;
  background-color:   var(--dashboard-bg-color);
  border-spacing:     0px;
  margin-bottom:      auto;
}

td.dashboard-view-column
{
  vertical-align:     top;
}

/* Last column always takes the rest */
td.dashboard-view-column-last
{
  vertical-align:     top;
  width:              100%;
}


div.dashboard-view-row
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  flex:               0;
  align-items:        stretch;
  max-width:          inherit;
  box-shadow:         0px 1px 0px var(--box-shadow-color);
}

table.dashboard-view-column-cells
{
  width:              100%;
}

div.dashboard-view-section
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        center;
  flex:               1;
  padding:            1ch;
  font-size:          larger;
  font-weight:        bolder;
  color:              var(--background-color);
}

div.cell-movable
{
  display:            flex;
  flex-direction:     column;
  align-items:        stretch;
  flex:               1;
  padding-top:        2px;
  vertical-align:     top;
  max-width:          inherit;
  /*
  max-height:         fit-content;
  width:              calc(100%);
  overflow:           hidden;
  */
}

table.dashboard-view-cell
{
  border-style:       outset;
  border-width:       1px;
  border-radius:      10px 10px 10px 10px;
  border-spacing:     0;
  margin:             0;
  padding:            0;
  width:              100%;
  height:             inherit;
  background-color:   var(--dashboard-body-bg-color);
}

div.dashboard-view-cell
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  flex-wrap:          nowrap;
  flex:               1;
  align-items:        stretch;
  border-style:       none;
  border-spacing:     0;
  margin:             2px;
  padding:            0;
  height:             inherit;
  background-color:   var(--dashboard-body-bg-color);
  box-sizing:         border-box;
}

td.dashboard-view-cell-link
{
  border-style:       none;
  border-width:       0px;
  padding:            2px;
  width:              100%;
  vertical-align:     middle;
  background-color:   var(--dashboard-link-bg-color);
}

div.dashboard-view-cell-link
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  flex:               0;
  align-items:        center;

  width:              initial;
  white-space:        nowrap;
  
  border-style:       none;
  border-width:       0px;
  /*
  margin:             2px;
  background-color:   #eee;
  background:         linear-gradient(#eee, white);
   */
  padding-left:       5px;
  padding-right:      5px;
  line-height:        2em;

  user-select:        none;
}

.dashboard-view-cell-link table
{
  width:              100%;
}

td.dashboard-view-cell-move
{
  width:              100%;
}

div.dashboard-view-cell-move
{
  position:           relative;
  display:            inline !important;
  /*float:              left;*/
  vertical-align:     middle;
  line-height:        inherit;
}

div.dashboard-view-cell-toolbar
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  flex:               0;
  align-items:        center;
  margin-left:        auto;
}

div.dashboard-view-cell-ctrl
{
  position:           relative;
  display:            inline; /*  !important; */
  float:              right;
  vertical-align:     middle;
  padding:            2px;
  font-size:          larger;
  line-height:        inherit;
  color:              var(--dashboard-ctrl-color);
  text-rendering:     optimizeLegibility;
  cursor:             pointer;
}

div.dashboard-view-cell-ctrl:hover
{
  background-color:   var(--dashboard-ctrl-bg-hover-color);
}

.dashboard-view-cell-ctrl img.control
{
  vertical-align: baseline;
}

.dashboard-view-cell-link a
{
  cursor:             pointer;
  color:              var(--background-color);
  font-weight:        bolder;
  text-decoration:    none;
  white-space:        nowrap;
  vertical-align:     middle;
  line-height:        inherit;
}

.dashboard-view-cell-link img
{
  vertical-align:     middle;
  WIDTH:              1em;
  HEIGHT:             1em;
  BORDER-STYLE:       none;
  padding-right:      3px;
}


td.dashboard-view-cell-content
{
  padding-bottom:     3px;
}

div.dashboard-view-cell-content
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  /*
  align-items:        middle;
  */
  flex:               1;
  height:             inherit;
  overflow:           auto;
}

div.dashboard-view-cell-content > div.stream
{
  width:                calc(100%);
  /*
  overflow:             auto;
  */
}

div.dashboard-view-cell-content div.graph-table
{
  overflow:             visible;
}
/*********
* Tree
*********/

div.tree-content
{
  overflow:             auto;
  flex:                 1;
  text-align:           right;
}

div.popup-body > div.tree-trunk
{
  overflow:             auto;
  min-width:            inherit;
}

.tree-trunk
{
  margin-top:           0;
  margin-left:          0;
  padding-left:         1em;
  padding-right:        0;
  margin-right:         0;
  white-space:          nowrap;
  min-width:            fit-content;
}

ul.tree-trunk
{
  list-style-image:     none;
  list-style-position:  inside;
  list-style-type:      none;
}

ul.tree-trunk li
{
  margin-top:           2px;
  margin-bottom:        2px;
}

.tree-trunk .tree-node
{
  margin-top:           2px;
  margin-bottom:        2px;
}

li.tree-node
{
}

div.tree-node
{
}


.tree-node-control
{
  position:           relative;
  display:               inline-block;
  cursor:                pointer;
  width:                 1em;
  height:                1em;
  line-height:           1em;
  vertical-align:        middle;
  background-repeat:     no-repeat;
  background-attachment: scroll;
  background-position:   center center;
  background-size:       1em;
}

.tree-node-expanded .tree-node-control
{
  background-image:      url('iconShow?iconName=TreeExpanded');
}

.tree-node-collapsed .tree-node-control
{
  background-image:      url('iconShow?iconName=TreeCollapsed');
}

.tree-node-empty     .tree-node-control 
{
  background-image:      none;
}

.tree-node-collapsed  .tree-trunk
{
  display: none;
}

div.tree-node-header
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  flex-wrap:          nowrap;
  text-align:         left;
  /*
  width:              100%;
  line-height:        1.3em;
  vertical-align:     middle;
   */
}

div.tree-node-draggable
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  flex-wrap:          nowrap;
  white-space:        nowrap;
  padding:            5px 5px 5px 5px;
  vertical-align:     middle;
  column-gap:         3px;
  user-select:        none;
}

a.tree-node-label
{
  cursor:             pointer;
  text-decoration:    none;
  color:              var(--link-color);
  /*
  vertical-align:     middle;
   */
}

a.tree-node-label div.copy-value:hover
{
  background-image: url(iconShow?iconName=Copy);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 0;
  background-size: 1em;
  background-clip: border-box;
}

a.tree-node-label .copy-value
{
  width: 1em;
  height: 1em;
  margin-left: 2px;
}

a.tree-node-icon
{
  /*
  vertical-align:     middle;
   */
  cursor:             pointer;
  height:             1em;
  overflow:           hidden;
}

.tree-node-icon img
{
  /* vertical-align:     initial; */
  width:              1em;
  height:             1em;
}

img.tree-node-icon 
{
  /* vertical-align:     middle; */
  width:              1em;
  height:             1em;
  cursor:             pointer;
  padding-right:      5px;
  user-select:        none;
}

div.tree-node-content
{
  margin:             0;
  width:              calc(100%);
} 

div.tree-node-content > div.stream
{
  display:            block;
  width:              calc(100%);
} 

/*************************
 * Grid                  *
 *************************/
table.grid
{
  align-self:         flex-start;
  border-style:       none;
  border-width:       0px;
  border-collapse:    separate;
  border-spacing:     2px;
  
  /*
  margin-left: -2px;
   */
  user-select:        none;
}

tr.grid-row
{
}

td.grid-cell
{
  padding:            5px;
  white-space:        nowrap;
}

div.grid-cell-body
{
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  white-space:        nowrap;
  align-items:        center;
}

div.grid-cell-text
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  align-items:        center;
  flex:               1;
  white-space:        nowrap;
  margin-right:       1em;
}

div.grid-cell-text img
{
  /* vertical-align:  middle; */
  padding-right:      0.3ch;
}

div.grid-cell-text > a.tree-node-label
{
  max-width:         25em;
  overflow-x:        hidden;
  text-overflow:     ellipsis;
}

div.grid-cell-active
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  align-items:        center;
  margin-right:       0.5ch;
}

div.grid-cell-active img
{
  width:              1em;
  height:             1em;
}

div.grid-cell-preview
{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  align-items:        center;
  /*
  display:             inline-block;
  float:               right;
  vertical-align:      middle;
  line-height:         1.2em;
  margin-left:         1em;
  width:               1em;
  height:              1em;
  line-height:         1em;
   */
 }

div.grid-cell-preview img
{
  width:              1em;
  height:             1em;
  cursor:             pointer;
/*    vertical-align:     middle;*/
}

div.grid-cell-empty
{
  position:           relative;
  display:            block;
  width:              1em;
  height:             1em;
}

div.grid-cell-stream
{
  position:           absolute!important;
  overflow:           visible!important;
  display:            flex!important;
  flex-direction:     row;
  flex-wrap:          nowrap;
  align-items:        center;
}

div.grid-cell-value
{
  position:           absolute;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  left:               2.5ch;
  cursor:             pointer;
}

div.grid-cell-value span
{
  padding-left:       0.5ch;
}
/*************************
 * Double Panel         *
 *************************/
div.panel-view-split
{
  display:              flex;
  flex-direction:       row;
  flex-wrap:            nowrap;
  align-items:          stretch;

  height:               inherit;
  width:                inherit;
}

div.panel-view-left
{
  position:           relative;
  display:            block;
  vertical-align:     top;
  flex-grow:          0;
  flex-shrink:        0;
  margin:             0;
  width:              min-content;
  height:             inherit;
  overflow:           auto;
  user-select:        none;
}

div.panel-handler-vertical
{
  position:          relative;
  display:           inline-block;
  width:             5px;
  height:            inherit;
  margin:            0;
  padding:           0;
  overflow:          hidden;
  cursor:            ew-resize;
  border-left-style: ridge;
  border-left-width: 4px;
}

div.panel-handler-horizontal
{
  position:          relative;
  display:           inline-block;
  width:             calc(100%);
  height:            5px;
  margin:            0;
  padding:           0;
  overflow:          hidden;
  cursor:            ns-resize;
  border-top-style:  ridge;
  border-top-width:  4px;
}

div.panel-view-content
{
  position:          relative;
  display:           block;
  margin:            0;
  /*   padding-top:       0.5em; */
  border-width:      0;
  border-style:      none;
  /*
  width:             calc(100%);
  */
  height:            inherit;
  overflow:          auto;
  box-sizing:        border-box;
}

div.panel-view-right
{
  position:           relative;
  display:            block;
  vertical-align:     top;
  flex-grow:          1;
  flex-shrink:        1;
  margin:             0;
  width:              calc(100%);
  height:             inherit;
  overflow:           unset;
  min-width:          0;
}

div#dynamicPanelId
{
  display:          block;
  position:         relative;
  margin:           0;
  padding:          0;
  width:            calc(100%);
  height:           calc(100%);
  overflow:         auto;
}

/*************************
 * Engine Status          *
 *************************/
.system-dump td
{
  padding:  0.5em;
}

td.system-dump-label
{
  max-width: 0em;
}
 /*
system-dump-label
system-dump-data
*/

/*************************
 * Movable Cells         *
 *************************/
div.cell-wireframe
{
  width:            100%;
  height:           100%;
  border:           dashed 1px gray;
  border-radius:    10px 10px 10px 10px;
  background-color: transparent;
}

/***************************
 * Canvas Based Graphs
 **************************/

div.topology-content
{
  position:         relative; /*absolute; */
  margin:           1em;
  user-select:      none;
}

div.graph-node
{
  position:         absolute;
  display:          flex;
  flex-direction:   row;
  align-items:      stretch;
  font-size:        smaller;
  z-index:          1000;
  overflow:         visible;
  width:            var(--diagram-node-width);
  height:           var(--diagram-node-height);
}

div.graph-node div
{
  position:         relative;
}

canvas.graph-arc
{
  position:         absolute;
}

canvas.graph-node-shape
{
  position:        absolute;
  left:            0px;
  top:             0px;
  width:           100%;
  height:          100%;
}

div.graph-node-connector
{
  cursor:               pointer;
  position:             absolute !important;
  display:              inline-block;
  /*
  border-style:     solid;
  border-color:     lightgray;
  border-width:     2px;
  border-radius:    50%;
   */
  background-image:     var(--diagram-conn-bg-image);
  background-repeat:    no-repeat;
  background-position:  center;
  background-size:      100% 100%;

  width:                var(--diagram-conn-width);
  height:               var(--diagram-conn-height);
  z-index:              10000;
}

div.graph-node-connector:hover
{
  border-color:         var(--diagram-conn-border-hover-color);
  background-image:     var(--diagram-conn-bg-hover-image);
}

div.graph-node-connector[side=NORTH]
{
  top:              -1ch;
  left:             calc(50% - 1ch);
}

div.graph-node-connector[side=SOUTH]
{
  top:              calc(100% - 1ch);
  left:             calc(50% - 1ch);
}

div.graph-node-connector[side=WEST]
{
  top:              calc(50% - 1ch);
  left:             -1ch;
}

div.graph-node-connector[side=EAST]
{
  top:              calc(50% - 1ch);
  left:             calc(100% - 1ch);
}

div.graph-node-controls
{
  position:         relative;
  display:          block;
  padding-left:     0.5ch;
  margin:           auto;
}

div.graph-node-icon
{
  float:            left;
}

div.graph-node-suspended
{
  float:            right;
}

div.graph-node-link,
div.graph-arc
{
  position:         relative;
  display:          inline-block;;
  flex:             1;
  text-align:       center;
  white-space:      normal;
  width:            100%;
  margin:           auto;
  padding:          2px;
  overflow:         hidden;
}

div.graph-node-link .table-cell-attr-link
{
  font-size:        smaller;
}

textarea.log-view
{
  overflow:         auto;
  width:            100%;
}

pre.log-view
{
  padding:          0;
  margin:           1em;
  text-align:       left;
}

/***************************
 * Rotation
 **************************/

div.box-rotate
{
        float: left;
     position: relative;
    transform: rotate(270deg);
}

/***************************
 * Streams
 **************************/
div.stream
{
  display:           block;
  position:          relative;
  overflow:          auto;
  background-color:  transparent;
  height:            inherit;
}

div.stream[itconductor\.enabled=false]
{
  display:          none;
}

div.content-body > div.stream
{
  width:            calc(100%);
}

ul.stream
{
  padding:         0.5em;
  margin:          0;
  text-align:      left;
  list-style-type: none;
}

table.stream
{
  width:            100%;
}

li.stream-item
{
  white-space:      nowrap;
  cursor:           default;
  padding-left:     10px;
  padding:          5px;
  clear:            both;
}

tr.stream-item
{
  width:            100%;
}

ul.stream-item
{
  position:             relative;
  display:              flex;
  flex-direction:       row;
  flex-flow:            wrap;
  align-items:          center;

  text-align:           left;

  list-style-type:      none;
  list-style-position:  outside;

  margin:               0;
  padding:              1em;

  border-bottom-style:  solid;
  border-bottom-width:  1px;
  border-bottom-color:  var(--stream-item-border-color);
  clear:                both;
}
/*
ul.stream-item li.stream-item-attr:first-child
{
  list-style-type:  none !important;
  margin:           0;
}
*/
ul.stream-item.highlight
{
  background-color:     var(--stream-item-highlight-bg-color);
}


li.stream-item-attr
{
  /*
  float:            left;
  vertical-align:   middle;
  line-height:      2em;
   */
  padding:          0;
  white-space:      nowrap;
  cursor:           default;
/*
  list-style-type:  var(--stream-item-separator-char);
  margin-left:      1ch;
  padding-left:     0.5ch;
*/
}

li.stream-item-attr a
{
  white-space:      nowrap;
  text-decoration:  none;
  cursor:           default;

  color:            var(--stream-attr-color);
  font-weight:      bolder;
  padding-left:     0.3ch;
  padding-right:    0.5ch;
}

li.stream-item-attr a:hover
{
  background-color: var(--stream-attr-hover-bg-color);
}

li.stream-item-attr img
{
  white-space:      nowrap;
  text-decoration:  none;
  vertical-align:   middle;
  width:            1em;
  padding-right:    0.2ch;
}

li.stream-item-attr>div
{
}

li.stream-item-body
{
  display:          block;
  white-space:      normal;
  flex-basis:       100%;
  /*padding-top:      0.5em;
  width:            calc(100%);
  clear:            both; */
}

div.stream-item-body-line
{
  white-space:      nowrap;
}

div.stream-link a
{
  color:             var(--link-color);
  text-decoration:   none;
  cursor:            pointer;
}

div.stream-link img
{
  vertical-align:   middle;
  WIDTH:            1em;
  HEIGHT:           1em;
  BORDER-STYLE:     none;
}

div.stream-group
{
  position:         relative;
  display:          block;
}

div.stream-group-label
{
  position:         relative;
  display:          flex;
  flex-direction:   row;
  flex-wrap:        nowrap;
  align-items:      center;
  user-select:      none;
}

div.stream-group-label>span
{
  font-weight:      bolder;
}

div.stream-group-label>a
{
  font-weight:      bolder;
}

div.stream-group-label>img
{
  padding-right:    0.3ch;
}

iframe.stream-item-body
{
  position:         relative;
  display:          block;

  width:            calc(100%);
  height:           calc(100%);

  min-width:        40em;

  border-style:     none;
  border-width:     0;

  padding:          0;
  margin:           0;

  overflow:         visible;
}

iframe.stream-item-body body
{
  overflow:         visible;
}
/*********************
 *  Blobs
 ********************/
span.blob-search
{
  width:            100%;
  padding:          1ch;
}
/*********************
 *  Errors
 ********************/

div.error-message a,
div.error-message p
{
  color:  var(--error-msg-color);
}

.object-form-attribute-error
{
  color:  var(--error-msg-color);
}

/*********************
 *  Show Message
 ********************/

p.content-text
{
  padding:              0.5em;
  font-size:            larger;
}

div.content-text
{
  /* 
  padding:              1em; 
  width:              fit-content;
  */
  width:              inherit;
  height:             inherit;
  white-space:        normal;
  word-break:         keep-all;
}

/*********************
 *  Wizard
 ********************/

a.wizard-step-pending
{
  background-color:   var(--wizard-step-pending-bg-color);
  color:              var(--wizard-step-pending-color);
  padding:            5px;
  padding-right:      0.5em;
  border-radius:      1ch 1ch 0 0;
  cursor:             default;
}

span.wizard-step
{
  color:              var(--wizard-step-color);
}

div.wizard-step
{
  height:             2em;
  line-height:        2em;
  vertical-align:     middle;
  position:           relative;
  /*
  display:            -moz-inline-box;
   */
  display:            inline-block;
  padding-left:       0.5em;
  padding-right:      0.5em;
  float:              left;
  overflow:           hidden;
}

div.wizard-step-arrow-head
{
  /*
   * In Internet Explorer, The"border-style: dashed" will never be
   * rendered unless "(width * 5) >= border-width" is true.
   * Since "width" is set to "0", the "dashed-border" remains
   * invisible to the user, which renders the border just like how
   * "border-color: transparent" renders.
   */
  border-style:        dashed;
  border-color:        transparent;
  /*
  #display:             -moz-inline-box;
   */
  display:             inline-block;
  float:               left;
  height:              0;
  width:               0;
  line-height:         0;
  position:            relative;
  vertical-align:      middle;
  border-top-width:    1em;
  border-bottom-width: 1em;
  border-right-width:  0;
  border-left-width:   1em;
  border-left-style:   solid;
}

div.wizard-step-arrow-tail
{
  border-style:        dashed;
  border-color:        transparent;
  /*
  #display:             -moz-inline-box;
   */
  display:             inline-block;
  float:               left;
  line-height:         0;
  position:            relative;
  vertical-align:      middle;
  border-top-width:    1em;
  border-bottom-width: 1em;
  border-top-style:    solid;
  border-bottom-style: solid;
  border-right-width:  0;
  border-left-width:   1em;
  margin-left:         -1ch;
}

/***************************
 * Severity Slider
 **************************/
div.slider-scale
{
  /*
  width:   100%;
  */
}

div.slider
{
  position:             relative;
  display:              inline-block;
  width:                40em;
  height:               1em;
  white-space:          nowrap;
  /*
  list-style-image:    none;
  list-style-position: inside;
  list-style-type:     none;
   */
  vertical-align:       middle;
  margin:               0;
  margin-bottom:        1em;
}


div.slider-color
{
  display:              inline-block;
  float:                right;
  margin:               0;
  height:               1em;
  list-style-image:     none;
  vertical-align:       middle;
}

div.slider-control
{
  display:              inline;
  margin:               0;
  width:                0.5em;
  height:               1em;
  vertical-align:       top;
}

div.slider-control img
{
  display:              inline;
  vertical-align:       top;
  margin:               0;
}


div.slider-selector
{
  display:              inline-block;
  position:             relative;

  top:                  5px;
  content:              ".";
  vertical-align:       middle;
  background-color:     transparent;

  border-style:         dashed;
  border-color:         transparent;
  height:               0px;
  width:                0px;
  line-height:          0;
  border-top-width:     0;
  border-left-width:    0.5em;
  border-right-width:   0.5em;
  border-bottom-width:  1.5ch;
  border-bottom-style:  solid;
  border-bottom-color:  var(--slider-border-color);
}

/***************************
 * Help
 **************************/
div.help-content
{
  display:              block;
  position:             relative;
  margin:               0.5em;
}

ul.help
{
  text-align:           left;
  list-style-type:      square;
  margin:               0.5em;
}

ol.help
{
  text-align:           left;
  list-style-type:      decimal;
  margin:               0.5em;
}

*.help li
{
  padding-bottom:       1em;
}

dl.help-where
{
  display:              block;
  position:             relative;
  margin:               0.5em;
}

dl.help-where dt
{
  font-weight:          bolder;
}

/***************************
 * Ads
 **************************/
div#content-ias
{
  display:              inline;
  position:             relative;
  float:                right;
  width:                15em;
  max-width:            15em;
  visibility:           visible;
  overflow-x:           hidden;
}

div.ia-item
{
  display:              block;
  padding:              0.5em;
  word-wrap:            normal;
  border-bottom:        1px solid var(--link-color);
}

div.ia-item a
{
  cursor:               pointer;
  color:                var(--link-color);
  text-decoration:      none;
}

div.ia-item img
{
  max-width:            8em;
}

/***************************
 * EULA
 **************************/
div.eula-title
{
  display:              block;
  margin:               1em;
  text-align:           center;
}

div.eula-content
{
  display:              block;
  position:             relative;
}

div.eula-content div.stream
{
  margin:               1em;
  border-style:         inset;
  border-width:         2px;
  border-color:         var(--eula-border-color);
  overflow:             auto;
  min-height:           10ch
}


ul.eula-controls
{
  display:            inline-block;
  list-style-type:    none;
}

ul.eula-controls li
{
  float:              left;
  white-space:        nowrap;
  padding-right:      0.5em;
}

div.eula-controls
{
  display:            inline-block;
  text-align:         center;
  width:              calc(95%);
}
/***************************
 * Bulletin Board
 **************************/
div.bulletin-notice
{
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  flex-wrap:      nowrap;
  width:          100%;
  height:         inherit;
}

div.bulletin-message
{
  padding:        1em;
  overflow:       auto;
  text-align:     left;
  flex:           1;
  white-space:    normal !important; /* make sure it is not overwritten */
}

div.bulletin-control
{
  margin:         0 auto;
  text-align:     center;
}
/***************************
 * 2FA
 **************************/
div.tfa-instructions
{
  position:       relative;
  display:        block;
  text-align:     left;
  white-space:    normal;
  width:          100%;
}

div.tfa-image
{
  position:       relative;
  display:        block;
  text-align:     center;
  width:          100%;
}

div.tfa-image img
{
  padding:        1em;
  display:        inline-block;
}

div.tfa-image span
{
  padding:        1em;
  display:        block;
}

div.tfa-controls
{
  position:       relative;
  display:        block;
  text-align:     center;
  width:          100%;
}

/***************************
 * TimeZone Chooser...
 **************************/
img.timezone
{
  width:        600px;
  height:       300px;
  user-select:  none;
}

svg.timezone polygon,rect
{
  fill:         var(--tz-map-fill-color);
  stroke-width: 0;
  opacity:      0;
}

svg.timezone rect:hover
{
  opacity:      0.7;
}

svg.timezone polygon:hover
{
  opacity:      0.7;
}

svg.timezone
{
  position:     absolute;
  display:      inline;
  top:          0;
  left:         0;
  width:        100%;
  height:       100%;
}

select.timezone
{
  width:      100%;
}
/***************************
 **************************/
div.health-saved-node
{
  position:           relative;
  display:            flex;
  flex-direction:     column;
  align-items:        flex-start;
  width:              calc(100% - 1em);
  vertical-align:     top;
}

div.health-saved-node-path {
    position:         relative;
    display:          flex;
    flex-direction:   row;
    column-gap:       0.3ch;
    align-items:      center;
    /*
    white-space:      nowrap;
     vertical-align: middle;
      */
    line-height:      1em;
    text-align:       left;
}

.health-saved-node-path a
{
  vertical-align:     middle;
}
/***************************
 * IFrame (live-chat)
 **************************/
iframe.live-chat
{
  position:           relative;
  display:            block;

  width:              100%;
  height:             100%;

  min-width:          40em;
  min-height:         30em;

  overflow:           hidden;
  padding:            0;
  margin:             0;
}

/***************************
 * Next thing...
 **************************/