/*


  07.12.2023 Versionierung


  Bedingungen:
  keine

*/

/*
  * Copyright Gordon Wenk
  * Sulzbacher Straße 39 - 65760 Eschborn
  * phone (06196) 9676760 - E-Mail info@itconsult24.de
  * http://www.itconsult24.de
  *
  * Diese Datei ist urheberrechtlich geschützt und Gedankengut von Gordon Wenk. Sie ist Bestandteil
  * des Content Management Systems "activity" das ebenfalls von Gordon Wenk entwickelt wurde. 
  *
  * Kein unerlaubter Verleih, Verkauf oder andere Arten der Veräußerungen!
  * Verwendung nur zum Zweck der Anwendung zu der diese Datei vom Urheber in
  * Projekte eingebunden wurde!
  * Mit Herausgabe bzw. Einbindung in andere Projekte durch den Urheber,
  * werden ausschließlich Nutzungsrechte übertragen.
  * Dieser Urheberrechtsvermerk darf nicht verändert oder entfernt werden.
*/


/* 
----------------------------------------------------------------------------------------------------
                                            VARIABLEN
----------------------------------------------------------------------------------------------------
*/


:root
{
    --basic-font-size: 13px;
 

    --z-fixed-background: -100;
    --z-fixed-client: 198;
    --z-fixed-top-menu: 199;
    --z-fixed-panels: 201;
    --z-fixed-client-overlay: 210;
    --z-fixed-burgermenu: 300;
    --z-menu: 1000;
    --z-popup: 2000;

    /* 
    z-index: var(--z-fixed-background);
    z-index: var(--z-fixed-client);
    z-index: var(--z-content);
    z-index: var(--z-fixed-panels);
    z-index: var(--z-burger);

    z-index: var(--z-fixed-top-menu);
    z-index: var(--z-menu);
    z-index: var(--z-popup);
    */
}

div, input { box-sizing: border-box; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

inline-data
{
    display: none;

}
/* .inline-data-show
{
    width: 700px; 
    word-wrap: break-word;
} */


.wc-site-fullsize-floatmenu-image-invert
{
    filter: invert(var(--wc-site-fullsize-floatmenusub-image-invert));
}
.wc-site-fullsize-floatmenusub-image-invert
{
    filter: invert(var(--wc-site-fullsize-floatmenusub-image-invert));
}
.wc-site-menu-image-invert
{
    filter: invert(var(--wc-site-menu-image-invert));
}
.wc-site-content-image-invert
{
    filter: invert(var(--wc-site-content-image-invert));
}


/* 
----------------------------------------------------------------------------------------------------
                                            WEBSEITENLAYOUT
----------------------------------------------------------------------------------------------------
*/


.wc-site-fixed-background
{
  /* z-index: -100; */
  z-index: var(--z-fixed-background);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  
  /* background-image: url('images/index-background.jpg'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-floatmenu-logo
{
  /* box-sizing: border-box; */
  height: 60px;
  margin-left: 20px;

  font-size: 26px;
  font-weight: bold;
  color: var(--wc-site-fullsize-floatmenu-logo-color);

  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-site-floatmenu-logo:hover
{
  color: var(--wc-site-fullsize-floatmenu-logo-hover-color);
  cursor: pointer;
}

/*  ---------------------  */

.wc-site-fullsize-floatmenu-bar
{
  /* z-index: 100; */
  z-index: var(--z-fixed-panels);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  left: 0px;
  width: 100%;
  height: 60px;
  background-color: var(--wc-site-fullsize-floatmenu-panel-background-color);
  padding-left: 5%;
  padding-right: 5%;
}
.wc-site-fullsize-floatmenu-bar-mobile
{
  /* background-color: black; */
  padding-left: 0px;
  padding-right: 0px;
}
@media screen and (max-width: 1600px) 
{
  .wc-site-fullsize-floatmenu-bar
  {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/*
@media screen and (max-width: 800px) 
{
  .wc-site-fullsize-floatmenu-bar
  {
    top: 0px;
  }
}
  */

.wc-site-fullsize-floatmenu-bar-left
{
  /* box-sizing: border-box; */
  float: left;
  /* background-color: white; */
  height: 100%;
  /* border: 1px solid red; */
  overflow: hidden;

  min-width: 50px;
  /* padding-left: 5%; */
  padding-right: 10px;
}

.wc-site-fullsize-floatmenu-bar-right
{
  /* box-sizing: border-box; */
  float: right;
  /* background-color: white; */
  height: 100%;
  /* border: 1px solid red; */
  overflow: hidden;

  min-width: 50px;
  /* padding-right: 5%; */
}

.wc-site-fullsize-floatmenu-bar-center
{
  float: left;
  margin-left: 1px;

  /* box-sizing: border-box; */
  /*
  position: absolute;
  display: table-cell;
  */
  /* box-sizing: border-box; */
  /* border: 3px solid white; */
  /* background-color: yellow; */
  height: 100%;
  /* border: 1px solid red; */
  overflow: hidden;

  /*
  left: 50%;
  transform: translateX(-50%);
  */

  display: flex;
  align-items: center;
  justify-content: center;

  /* padding-right: 5%; */
}

.wc-site-fullsize-floatmenu-bar-sub
{
    height: 50px;
}

.wc-site-fixed-top
{
  /* z-index: 100; */
  z-index: var(--z-fixed-panels);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  left: 50%;
  top: 0px;
  width: 100%;
  max-width: var(--wc-site-content-max-width); /* 1130px; */
  height: 60px;
  transform: translateX(-50%);
  background-color: var(--wc-site-fixed-panel-background-color);
}

.wc-site-fixed-top-menu
{
  /* z-index: 99; */
  z-index: var(--z-fixed-top-menu);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  left: 50%;
  top: 60px;
  width: 100%;
  max-width: var(--wc-site-content-max-width); /* 1130px; */
  min-height: 20px;
  transform: translateX(-50%);
  background-color: var(--wc-site-fixed-panel-background-color);
  padding-left: 10px;
}

.wc-site-fixed-top-burger-menu-frame
{
  /* z-index: 99; */
  /* z-index: var(--z-fixed-top-menu); */
  z-index: var(--z-fixed-burgermenu);
  display: none;
  position: fixed;
  border: 0px solid var(--wc-site-transparent);
  left: 50%;
  top: 60px;
  width: 100%;
  max-width: var(--wc-site-content-max-width); /* 1130px; */
  height: calc(100% - 110px);
  transform: translateX(-50%);
  background-color: var(--wc-site-fixed-top-burger-frame-background-color);
  pointer-events: none;
}
.wc-site-fixed-top-burger-menu-frame-fromfloat
{
  max-width: 100%;
}

.wc-site-fixed-top-burger-menu-panel
{
  float: right;
  /* box-sizing: border-box; */
  display: block;
  /* overflow: hidden; */
  border: 0px solid var(--wc-site-transparent);
  right: 100px;
  top: 0px;
  width: 250px;
  /* min-height: 20px;  */
  height: 100%;
  background-color: var(--wc-site-fixed-panel-background-color);
  /* padding-left: 10px; */
  pointer-events: all;
}

.wc-site-fixed-bottom
{
  /* z-index: 100; */
  z-index: var(--z-fixed-panels);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  left: 50%;
  top: calc(100% - 50px);
  width: 100%;
  max-width: var(--wc-site-content-max-width); /* 1130px; */
  height: 50px;
  transform: translateX(-50%);
  background-color: var(--wc-site-fixed-panel-background-color);
  padding-left: 10px;
}
  
.wc-site-fixed-left
{
  /* z-index: 100; */
  z-index: var(--z-fixed-panels);
  box-sizing: border-box;
  display: none;
  position: fixed;
  overflow: hidden;
  /* border: 0px solid var(--wc-site-transparent); */
  /* border: 1px solid red; */
  /* border-top-right-radius: 5px; */
  /* border-bottom-right-radius: 5px; */
  border-right: 1px solid #E0E0E0;
  left: 0px;
  top: 80px;
  width: 300px;
  height: calc(100% - 80px);
  background-color: var(--wc-site-fixed-panel-background-color);
}

.wc-site-fixed-right
{
  /* z-index: 100; */
  z-index: var(--z-fixed-panels);
  /* box-sizing: border-box; */
  display: none;
  position: fixed;
  overflow: hidden;
  border: 0px solid var(--wc-site-transparent);
  /* border-top-left-radius: 5px; */
  /* border-bottom-left-radius: 5px; */
  left: calc(100% - 200px);
  top: 80px;
  width: 200px;
  height: calc(100% - 160px);
  background-color: var(--wc-site-fixed-panel-background-color);
}

@media (max-width: 1550px) 
{
  .wc-site-fixed-left,
  .wc-site-fixed-right
  {
    display: none !important;
  }
}

.wc-site-fixed-client
{
  /* z-index: 99; */
  z-index: var(--z-fixed-client);
  box-sizing: border-box;
  display: none;
  position: fixed;
  overflow: hidden;
  /* border: 1px solid var(--wc-site-transparent); */
  /* border-radius: 5px; */
  left: 0px;
  top: 120px;
  width: calc(100% - 0px);
  height: calc(100% - 120px);
  background-color: rgba(0,0,0,0);
  padding: 0px;
}

/*  ---------------------  */

.wc-site-fixed-top-title
{
  position: absolute;
  /* box-sizing: border-box; */
  display: inline-block;
  font-size: 2rem;
  color: var(--wc-site-fixed-top-title-color);
  line-height: 100%;
  bottom: 14px;
  margin-left: 20px;
  margin-right: 20px;
}

.wc-site-menu-opener
{
  display: none;
  /* box-sizing: border-box; */
  margin-left: 14px;
  margin-right: 10px;
  margin-top: 7px;
  height: 48px;
  width: 48px;
}
.wc-site-menu-opener:hover
{
  background-color: var(--wc-site-fixed-top-menu-background-color);
  cursor: pointer;
}


.wc-site-burger-open
{
  float: right;
  /* background-image: url('images/burger-open.svg'); */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-burger-close
{
  float: right;
  /* background-image: url('images/burger-close.svg'); */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-apps-open
{
  float: left;
  /* background-image: url('images/apps-open.svg'); */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-apps-close
{
  float: left;
  /* background-image: url('images/apps-close.svg'); */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/*  ---------------------  */


.body-content-wrapper
{
  /* box-sizing: border-box; */
  width: 100%;
}
.body-content-frame
{
  /* box-sizing: border-box; */
  width: 100%;
}
.body-content-frame-100
{
  background-color: var(--wc-site-content-background-color);
}
.body-content-box
{
  width: 100%;
  max-width: var(--wc-site-content-max-width); /* 1130px; */
  padding: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: var(--wc-site-content-background-color);
  font-size: 1.0rem;
  line-height: 1.4rem;
}
.body-content-box-top
{
  height: 100px;
}
.body-content-box-bottom
{
  height: 20px;
}
.body-content-box-top-rounded
{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: 10px;
  padding: 10px;
}
.body-content-box-bottom-rounded
{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  min-height: 10px;
  padding: 10px;
  margin-bottom: 70px;
}
.body-content-frame-splitter
{
  
  /* box-sizing: border-box; */
  height: 10px;
  background-color: var(--wc-site-background-color);
  max-width: var(--wc-site-content-max-width);
  margin-left: 50%;
  transform: translateX(-50%);
}


.body-content-box-mobile
{
    width: 100%;
    max-width: 500px;
    margin-left: 50%;
    transform: translateX(-50%);
}

/*
.body-content-box-mobile
{
  padding-left: 200px;
  padding-right: 200px;
}
@media screen and (max-width: 800px) 
{
  .body-content-box-mobile
  {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media screen and (max-width: 500px) 
{
  .body-content-box-mobile
  {
    padding-left: 20px;
    padding-right: 20px;
  }
}
*/

/*  ---------------------  */

/*
.body-fixed-form-wrapper
{
  position: fixed;
  top: 50%;
  border-radius: 15px;
  overflow: auto;
}
*/

.body-fixed-content
{
  position: fixed;
  left: 0px;
  width: 100%;
  top: 120px;
  height: calc(100% - 120px);
}

/*  ---------------------  */

.wc-site-menu-left-logo
{
  /* box-sizing: border-box; */
  display: inline-block;
  height: 60px;
  margin: 10px;
  width: calc(100% - 20px);
  /* background-image: url('images/logo.png'); */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-menu-left-item
{
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--wc-site-border-color);
  padding-left: 30px;
}
.wc-site-menu-left-item:hover
{
  background-color: var(--wc-site-menu-left-item-hover-backgroundcolor);
  color: var(--wc-site-menu-left-item-hover-color);
}

.wc-site-menu-left-item-active
{
  background-color: var(--wc-site-menu-left-item-active-backgroundcolor);
  color: var(--wc-site-menu-left-item-active-color);
}

.wc-site-menu-left-line
{
  /* box-sizing: border-box; */
  width: 100%;
  height: 1px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid var(--wc-site-border-color);
}

.wc-site-menu-left-group
{
  display: inline-block;
  box-sizing: border-box;
  margin: 0px;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid var(--wc-site-border-color);
  padding: 10px;
  padding-left: 30px;

  background-color: #F8F8F8;
  background-size: 18px 18px;
  background-position: 5px center;
  background-repeat: no-repeat;
}

/*  ---------------------  */

/*
.wc-site-menu-burger-item
{
  width: 100%;
  margin: 0px;
  padding: 10px;
  cursor: pointer;
  background-color: var(--wc-site-menu-burger-item-backgroundcolor);
  color: var(--wc-site-menu-burger-item-color);
}
.wc-site-menu-burger-item:hover
{
  background-color: var(--wc-site-menu-burger-item-hover-backgroundcolor);
  color: var(--wc-site-menu-burger-item-hover-color);
}

.wc-site-menu-burger-item-active
{
  background-color: var(--wc-site-menu-burger-item-active-backgroundcolor);
  color: var(--wc-site-menu-burger-item-active-color);
}

.wc-site-menu-burger-line
{
  width: 100%;
  height: 1px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid var(--wc-site-border-color);
}

.wc-site-menu-top-item
{
  float: left;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.0rem;
  line-height: 2rem;
  cursor: pointer;
}
.wc-site-menu-top-item:hover
{
  background-color: var(--wc-site-menu-top-item-hover-backgroundcolor);
  color: var(--wc-site-menu-top-item-hover-color);
}

.wc-site-menu-top-item-active
{
  background-color: var(--wc-site-menu-top-item-active-backgroundcolor);
  color: var(--wc-site-menu-top-item-active-color);
}

.wc-site-menu-top-line
{
  float: left;
  width: 1px;
  height: 100%;
  border-right: 1px solid var(--wc-site-border-color);
}
*/


/*  ---------------------  */

.wc-site-footer-fixed-item
{
  /* box-sizing: border-box; */
  float: left;
  margin: 0px;
  margin-top: 7px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.0rem;
  line-height: 2rem;
  cursor: pointer;
}
.wc-site-footer-fixed-item:hover
{
  background-color: var(--wc-site-footer-fixed-item-hover-backgroundcolor);
  color: var(--wc-site-footer-fixed-item-hover-color);
}

.wc-site-footer-fixed-item-active
{
  background-color: var(--wc-site-footer-fixed-item-active-backgroundcolor);
  color: var(--wc-site-footer-fixed-item-active-color);
}

.wc-site-footer-fixed-line
{
  /* box-sizing: border-box; */
  float: left;
  width: 1px;
  margin-top: 8px;
  height: 30px;
  border-right: 1px solid var(--wc-site-footer-fixed-line-active-color);
}

/*  ---------------------  */

.wc-site-footer-page-item
{
  /* box-sizing: border-box; */
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.0rem;
  line-height: 2rem;
  cursor: pointer;
}
.wc-site-footer-page-item:hover
{
  background-color: var(--wc-site-footer-page-item-hover-backgroundcolor);
  color: var(--wc-site-footer-page-item-hover-color);
}

.wc-site-footer-page-item-active
{
  background-color: var(--wc-site-footer-page-item-active-backgroundcolor);
  color: var(--wc-site-footer-page-item-active-color);
}
.wc-site-footer-page-item-sub
{
  display: none;
  margin-left: 30px;
}

.wc-site-footer-page-line
{
  /* box-sizing: border-box; */
  width: 100%;
  height: 1px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid var(--wc-site-footer-page-line-active-color);
}

.wc-site-footer-page-space
{
  /* box-sizing: border-box; */
  width: 100%;
  height: 50px;
}

.wc-site-footer-page-arrow-open
{
  /* box-sizing: border-box; */
  float: right;
  height: 2em;
  width: 2em;
  background-image: url('images/arrow-open.svg');
  background-size: 70% 70%;
  background-position: center center;
  background-repeat: no-repeat;
}

.wc-site-footer-page-arrow-close
{
  /* box-sizing: border-box; */
  float: right;
  height: 2em;
  width: 2em;
  background-image: url('images/arrow-close.svg');
  background-size: 70% 70%;
  background-position: center center;
  background-repeat: no-repeat;
}

/*  ---------------------  */

.wc-dialog-body
{
  padding: 20px;
  padding-top: 40px;
}

.wc-dialog-inner-frame
{
  
  background-color: var(--wc-site-content-background-color);
  font-size: 1.0rem;
  line-height: 1.4rem;
}

#wc-dialog-close
{
  position: absolute;
  right: 15px;
  top: 10px;
  width: 40px;
  height: 40px;
  background: no-repeat center center;
  background-size: 40px 40px;
  background-image: url(images/dialog-close.svg);
  border-radius: 50%;
  cursor: pointer;
}
#wc-dialog-close:hover
{
  /*  border: 1px solid rgba(0,0,0,0.4); */
}


/*  ---------------------  */


/* 
----------------------------------------------------------------------------------------------------
                                            FORM
----------------------------------------------------------------------------------------------------
*/

.wc-form-mobile
{
    width: 100%;
    max-width: 500px;
    margin-left: 50%;
    transform: translateX(-50%);
}



/* 
----------------------------------------------------------------------------------------------------
                                            BUTTON
----------------------------------------------------------------------------------------------------
*/


.wc-button
{
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px;
    background-color: var(--wc-button-background);
    border: 1px solid var(--wc-button-border);

    /* height: 14px; */
    color: var(--wc-button-text);
    cursor: pointer;
    user-select: none;
    line-height: 1.1;
    
}
.wc-button-left
{
    float: left;
    margin-right: 20px;
}
.wc-button-right
{
    float: right;
    margin-left: 20px;
}

.wc-button:hover
{
    background-color: var(--wc-button-background-hover);
    color: var(--wc-button-text-hover);
    border-color: var(--wc-button-border-hover);
    text-shadow: 0 0 2px #303030;
}



.wc-button-signal
{
    color: var(--wc-button-signal-text);
    background-color: var(--wc-button-signal-background);
}
.wc-button-signal:hover
{
    background-color: var(--wc-button-signal-background-hover);
}


.wc-button-disabled
{
    color: var(--wc-button-disabled-text);
    background-color: var(--wc-button-disabled-background);
}
.wc-button-disabled:hover
{
    background-color: var(--wc-button-disabled-background-hover);
    cursor: not-allowed;
}


.wc-button-add
{
    color: var(--wc-button-add-text);
    background-color: var(--wc-button-add-background);
}
.wc-button-add:hover
{
    background-color: var(--wc-button-add-background-hover);
    cursor: not-allowed;
}

.wc-button-copy
{
    color: var(--wc-button-copy-text);
    background-color: var(--wc-button-copy-background);
}
.wc-button-copy:hover
{
    background-color: var(--wc-button-copy-background-hover);
    cursor: not-allowed;
}

.wc-button-edit
{
    color: var(--wc-button-edit-text);
    background-color: var(--wc-button-edit-background);
}
.wc-button-edit:hover
{
    background-color: var(--wc-button-edit-background-hover);
    cursor: not-allowed;
}

.wc-button-delete
{
    color: var(--wc-button-delete-text);
    background-color: var(--wc-button-delete-background);
}
.wc-button-delete:hover
{
    background-color: var(--wc-button-delete-background-hover);
    cursor: not-allowed;
}



.wc-button-hidden
{
    display: none;
}

.wc-button-readonly
{
    background-color: var(--wc-button-background-disabled);
}
.wc-button-readonly:hover
{
    background-color: var(--wc-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-button-fail
{
    border: 3px solid var(--wc-button-background-fail);
}

@media screen and (max-width: 360px) 
{
    .wc-button-left-mobile
    {
        margin-left: 0px;
    }

    .wc-button-right-mobile
    {
        margin-left: 0px;
    }
}


/* 
----------------------------------------------------------------------------------------------------
                                            CHECKBOX
----------------------------------------------------------------------------------------------------
*/

.wc-checkbox
{
    position: relative;
    padding: 0.6em;
    padding-right: 2.5em;
    width: calc(100% - 0em);
    border-radius: 3px;
    border: solid 1px var(--wc-checkbox-border);
    background-color: var(--wc-checkbox-background);
    cursor: pointer;
    display: table;
    user-select: none;
    color: var(--wc-checkbox-text);
}
.wc-checkbox:hover
{
    background-color: var(--wc-checkbox-background-hover);
}

.wc-checkbox-left
{
    padding-right: 0.5em;
    padding-left: 3em;
    /* width: calc(100% - 3.5em); */
    width: 100%;
}

.wc-checkbox-checker-left
{
    left: 5px;
}

.wc-checkbox-transparent
{
    background-color: var(--transparent);
    border: 1px solid var(--transparent);
}
.wc-checkbox-transparent:hover
{
    background-color: var(--transparent);
    /* border: 1px solid var(--transparent-low); */
}

.wc-checkbox-empty
{
    position: absolute;
    margin: 0px;
    /*
    right: 1px;
    top: 0px;
    */
    height: 1.7em; /* 18px; */
    width: 1.7em; /* 18px; */
    top: 0.3em;
    right: 0.4em;
    padding: 3px;
    border: 1px solid var(--wc-checkbox-text);
    /* opacity: 0.6;  */
    border-radius: 3px;
    display: table-cell;
    cursor: pointer;
    background-color: var(--wc-checkbox-arrow-background);
}

.wc-checkbox-arrow-off
{
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.wc-checkbox-arrow-off-asdenied
{
    background-image: url("images/do_not_disturb_on_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.wc-checkbox-arrow-on
{
    background-image: url("images/done-24px.svg");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.wc-checkbox-arrow-both
{
    background-image: url("images/star_rate_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.wc-checkbox-arrow-none
{
    background-image: url("images/question_mark_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

/*
.wc-checkbox-off
{
    background-image: url("images/empty-24px.svg");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
    */

.wc-checkbox-nobr
{
    float: left;
    margin-right: 20px;
}

.wc-checkbox-disabled
{
    background-color: var(--wc-checkbox-button-background-disabled);
    color: var(--input-text-disabled);
}
.wc-checkbox-disabled:hover
{
    background-color: var(--wc-checkbox-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-checkbox-hidden
{
    display: none;
}

.wc-checkbox-readonly
{
    background-color: var(--wc-checkbox-button-background-disabled);
}
.wc-checkbox-readonly:hover
{
    background-color: var(--wc-checkbox-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-checkbox-fail
{
    border: 3px solid var(--wc-checkbox-button-border-fail);
}

/* 
----------------------------------------------------------------------------------------------------
                                            CONTAINER
----------------------------------------------------------------------------------------------------
*/

.wc-container
{
    min-height: 100px;
}

/*
.wc-container-grid
{
    display: grid;
    border: 2px solid blue;
}
*/


.wc-container-items
{
    /* float: left; */
    /* width: 100%; */
    /* height: 40px; */
    background-color: var(--wc-container-bullets-background);
}

.wc-container-bullets
{
    /* float: left; */
    width: 100%;
    height: 50px; 
    background-color: var(--wc-container-bullets-background);
    /* background-color: #A0A0A0; */
    /* background-color: red; */
    display: none;

    justify-content: center;   
    align-items: center;
    
}

.wc-container-bullet-inner
{
    /* float: left; */
    display: inline-block;
    /* background-color: #D0D0D0; */
    /*
    height: 50px;
    width: 50px;
    border: 1px solid red;
    */
}

.wc-container-bullet
{
    display: inline-block;
    width: 20px;
    height: 20px; 
    margin-left: 5px;
    margin-right: 5px;
    background-color: var(--wc-container-bullet-background);
    border-radius: 50%; 
    cursor: pointer;
}

.wc-container-arrow-left
{
    display: inline-block;
    width: 40px;
    height: 40px; 
    margin-left: 5px;
    margin-right: 15px;
    background-color: var(--wc-container-arrow-background);
    border-radius: 50%; 
    cursor: pointer;

    background-image: url("images/arrow_back_black_24dp.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 70% 70%;
}

.wc-container-arrow-right
{
    display: inline-block;
    width: 40px;
    height: 40px; 
    margin-left: 15px;
    margin-right: 5px;
    background-color: var(--wc-container-arrow-background);
    border-radius: 50%; 
    cursor: pointer;

    background-image: url("images/arrow_forward_black_24dp.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 70% 70%;
}

.wc-container-bullet-active
{
    background-color: var(--wc-container-bullet-active-background);
}

.wc-container-hidden
{
    display: none;
}

/* 
----------------------------------------------------------------------------------------------------
                                            CONTENTBOX
----------------------------------------------------------------------------------------------------
*/

.wc-contentbox
{
    /* position: absolute; */
    min-height: 40px;
    /* background-color: silver; */
    margin-bottom: 10px;
    /* position: absolute; */

    overflow: hidden;
}

.wc-contentbox-hover-shadow:hover
{
  box-shadow: 5px 3px 3px var(--wc-contentbox-shadow-hover);
  /* cursor: pointer; */
}

.wc-contentbox-image
{
    width: 100%;
}

.wc-contentbox-headline
{
    font-size: smaller;
    color: var(--wc-contentbox-headline);
    font-weight: 800;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: uppercase;

    display: -webkit-box;
    overflow: hidden;
    line-clamp: 1;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
}

.wc-contentbox-title
{
    font-size: larger;
    font-weight: 800;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;

    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
}

.wc-contentbox-subtitle
{
    /* font-size: ; */
    color: var(--wc-contentbox-subtitle);
    font-weight: bold;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;

    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
}

.wc-contentbox-text
{
    /* font-size: 10px; */
    color: var(--wc-contentbox-text);
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;

}

.wc-contentbox-button
{
    /* float: right; */
    position: absolute;
    
    background-color: var(--wc-contentbox-button-background);
    color: var(--wc-contentbox-button-text);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.wc-contentbox-clicklayer
{
    position: absolute;
    /* left: 0px;
    top: 0px; */
    /* width: 100%;
    height: 100%; */
    /* background-color: rgba(0,0,0,0.5); */
}

.wc-contentbox-clicklayer-hover
{
    background-color: var(--wc-contentbox-clicklayer-hover);
}


/* 
----------------------------------------------------------------------------------------------------
                                            GEO
----------------------------------------------------------------------------------------------------
*/

.wc-geo
{
    position: relative;
    width: 100%;
    /* height: 44px; */
    height: 2.4em; 
    border-radius: 3px;
    border: solid 1px var(--wc-geo-border);
    background-color: var(--wc-geo-background);
    padding: 0px;
    display:table;
}

.wc-geolocation-input
{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    float: left;
    height: 100%;
    
    position: absolute;
    width: calc(100% - 0px);
    /* height: calc(100% - 4px); */
    padding-left: 7px;
    text-align:left;
    border: solid 0px var(--wc-geo-border);
    /* line-height: 20px; */
    /* font-family: Lato; */
    /* font-size: 14px; */
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    color: var(--wc-geo-text);
    /* background-color: #F0F0F0; */
    border-radius: 3px;
}
/*
.wc-geolocation-input-chrome
{
    height: calc(100% - 2px);   
    width: calc(100% - 16px);  
}
*/

.wc-geo-disabled
{
    background-color: var(--wc-geo-button-background-disabled);
}
.wc-geo-disabled:hover
{
    background-color: var(--wc-geo-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-geo-hidden
{
    display: none;
}

.wc-geo-readonly
{
    background-color: var(--wc-geo-button-background-disabled);
}
.wc-geo-readonly:hover
{
    background-color: var(--wc-geo-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-geo-fail
{
    border: 3px solid var(--wc-geo-border-fail);
}

/* 
----------------------------------------------------------------------------------------------------
                                            INPUT
----------------------------------------------------------------------------------------------------
*/

.wc-input
{
    position: relative;
    width: 100%;
    height: 2.4em; 
    border-radius: 3px;
    border: solid 1px var(--wc-input-border);
    background-color: var(--wc-input-background);
    padding: 0px;
    display: table;
    overflow: hidden;
}
.wc-input-inline
{
    float: left;
    margin-right: 10px;
}
.wc-input-currency, .wc-input-float-1, .wc-input-float-2, .wc-input-float-3, .wc-input-float-4, .wc-input-int, .wc-input-date, .wc-input-time, .wc-input-datetime, .wc-input-time
{
    max-width: 120px;
}
.wc-input-datetime
{
    max-width: 212px;
    border: 0px solid var(--wc-input-datetime-border);
    background-color: var(--transparent);
}
.wc-input-float-text
{
    float: left; 
    padding-right: 10px; 
    height: 2.4em; 
    line-height: 2.4em; 
    background-color: var(--transparent);
    border: 1px solid var(--transparent);
}
@media screen and (max-width: 460px) 
{
    .wc-input-float-text
    {
        width: 120px;  /* wie wc-input-float-text-label */
    }
}

.wc-input-float-text-label
{
    float: left; 
    padding-right: 10px; 
    height: 2.4em; 
    line-height: 2.4em; 
    background-color: var(--transparent); /* var(--input-background); */
    border: 1px solid var(--transparent);
    width: 120px;
}

.wc-input-input
{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    float: left;
    height: 100%;
    
    position: absolute;
    /*
    width: calc(100% - 20px);
    height: calc(100% - 4px);
    */
    width: 100%;
    height: 100%;

    padding-left: 7px;
    text-align:left;
    border: solid 0px var(--wc-input-border);

    color: var(--wc-input-text);
    /* border-radius: 3px; */

    /* background-color: red !important; */
}
.wc-input-input:focus
{
  /* outline:none; */
}
/*
input.wc-input-input:-webkit-autofill 
{
   -webkit-box-shadow: 0 0 0px 1000px var(--wc-input-background) inset !important;
}
   */



.wc-input-input-currency, .wc-input-input-float-1, .wc-input-input-float-2, .wc-input-input-float-3, .wc-input-input-float-4, .wc-input-input-int
{
    text-align: right;
}


.wc-input-input-datetime
{
    width: 115px;
    border: 1px solid var(--wc-input-border); 
    border-radius: 3px;
    text-align:center;
    padding-left: 0px;
    padding-right: 5px;
}

.wc-input-input-datetime-time
{
    width: 75px;
    /* max-width: 90px; */
    margin-left: 130px;
    text-align:center;
    padding-left: 0px;
    padding-right: 5px;
    border: 1px solid var(--wc-input-border); 
    border-radius: 3px;
    /* background-color: silver;  */
}


/*
.wc-input-input-currency, .wc-input-input-float-1, .wc-input-input-float-2, .wc-input-input-float-3, .wc-input-input-float-4, .wc-input-input-int, .wc-input-input-date, .wc-input-input-time, .wc-input-input-datetime
{
    text-align: right;
}
*/

.wc-input-input-chrome
{
    height: calc(100% - 2px);    
}

.wc-input-memo
{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    /* height: 100%; */
    
    width: calc(100% - 10px);
    /* height: calc(100% - 4px); */
    padding-left: 7px;
    text-align:left;
    border: solid 0px var(--wc-input-border);

    color: var(--wc-input-text);
    border-radius: 3px;
}

.wc-input-arrow
{
    float: right;

    /* position: absolute; */
    margin: 0px;
    right: 0px;
    top: 0px;
    height: calc(100% - 0px);
    width: 32px;
    border: 0px solid var(--wc-input-arrow-border);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    display: table-cell;
    cursor: pointer;

    /* pointer-events: none; */
    background-color: var(--wc-input-selector-background);
    background-image: url("images/arrow-down.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 20px 20px;
}
.wc-input-arrow-plus
{
    background-image: url("images/plus.svg");
}
/*
.wc-input-arrow-chrome
{
    height: calc(100% - 0px);
}
*/
.wc-input-reducer-for-arrow
{
    width: calc(100% - 33px);
}



.wc-input-disabled
{
    background-color: var(--wc-input-button-background-disabled);
    color: var(--wc-input-text-disabled);
}
.wc-input-disabled:hover
{
    /* background-color: var(--wc-input-button-background-disabled-hover); */
    cursor: not-allowed;
}
.wc-input-disabled::placeholder
{
    color: var(--wc-input-text-disabled);
}

.wc-input-hidden
{
    display: none;
}

.wc-input-readonly
{
    background-color: var(--wc-input-button-background-disabled);
    color: var(--wc-input-text-readonly);
    border-color: var(--wc-input-border-readonly);
}
.wc-input-readonly:hover
{
    background-color: var(--wc-input-button-background-disabled-hover);
    cursor: not-allowed;
}

.wc-input-fail
{
    border: 3px solid var(--wc-input-border-fail);
}

/* 
----------------------------------------------------------------------------------------------------
                                            LABEL
----------------------------------------------------------------------------------------------------
*/

.wc-label
{
    background-color: var(--wc-input-label-background);
    padding: 0px;
    padding-left: 4px;
}

.wc-label-title
{
    font-size: 1.5em;
    color: var(--wc-input-label-title);  
    padding: 0px;
    margin: 0px;
}

.wc-label-headline
{
    font-size: 1.2em;
    color: var(--wc-input-label-headline);  
    font-weight: 400;
    padding: 0px;
    margin: 0px;
}

.wc-label-subline
{
    margin-top: 0px;
    margin-bottom: 4px;
    color: var(--wc-input-label-subline);  
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
}

.wc-label-text
{
    margin-top: 18px;
    margin-bottom: 2px;
    color: var(--wc-input-label-text);
    font-size: 1em;
    padding: 0px;
    margin: 0px;
}

.wc-label-error
{
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 4px;
    color: var(--wc-input-label-error);    
    font-size: 0.8em;

}

.wc-label-warning  /* für html-inline  */
{
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 4px;
    color: var(--wc-input-label-warning);    
    font-size: 0.8em;

}

.wc-label-input-subline  /* für dynamisches formular */
{
    padding-top: 0px;
    margin-top: 0px;
    /* margin-bottom: 4px; */
    color: var(--wc-input-label-warning);    
    font-size: 0.8em;
}

.wc-label-input-subline-fix  /* für dynamisches formular */
{
    height: 1.2em;
}

.wc-label-float-left
{
    float: left;
}
.wc-label-float-right
{
    float: right;
}

.wc-label-text-left
{
    text-align: left;
}
.wc-label-text-right
{
    text-align: right;
}


/*
.wc-label-nobr
{
    float: left;
    margin-right: 20px;
}
*/


.wc-label-disabled
{
    color: var(--input-label-disabled);
}
.wc-label-hidden
{
    display: none;
}
.wc-label-readonly
{
    /* color: var(--input-label-disabled); */
}
.wc-label-fail
{
    border: 3px solid var(--wc-input-label-border-fail);
}




.wc-spacer
{
    padding: 0px;
    margin: 0px;
}

.wc-spacer-hidden
{
    display: none;
}



.wc-endfloat
{
    clear: both;
}

/* 
----------------------------------------------------------------------------------------------------
                                            LISTING
----------------------------------------------------------------------------------------------------
*/

.wc-listing
{
    top: 0px;
    left: 0px;
    width: 100%;
    
    padding: 0px;
    margin-top: 3px;
    margin-bottom: 10px;

    /*
    border: solid 1px var(--grey); 
    background-color: #F0F0F0;
    */
}

.wc-listing-hidden
{
    display: none;
}

.wc-listing-item
{
}

.wc-listing-item:hover
{
}

.wc-listing-bullets
{
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100px;
    float: left;
    width: calc(100% - 8px);
}

.wc-listing-bullets-item
{
    display: inline-flex;
    /*
    font-size: 13px;
    line-height: 17px;
    font-family: Lato;
    */
    font-size: 0.9em;
    color: var(--wc-listing-bullet-text);
    border-radius: 4px;
    background-color: var(--wc-listing-bullet-background);
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 1px;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
}


.wc-listing-bullets-item_:hover
{
    color: var(--wc-listing-bullet-text-hover);
    background-image: url("images/x.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 15px 15px;
}


.wc-listing-bullets-item-x
{
    position: absolute;
    opacity: 0;

    left: 0px;
    top: 0px;
    width: 100%; 
    height: 100%; 
    
    background-image: url("images/x.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 12px 12px;
}

.wc-listing-bullets-item-x:hover
{
    display: block;
    background-color: var(--wc-listing-bullet-background-hover);
    opacity: 0.7;
    border-radius: 4px;
}

/*
.wc-listing-bullets-item-x-readonly
{
    cursor: not-allowed;
    background-color: var(--wc-listing-bullet-background);
}
.wc-listing-bullets-item-x-readonly:hover
{
    cursor: not-allowed;
    background-color: var(--wc-listing-bullet-background);
}
*/


@media all and (max-width:455px)
{
    .wc-listing-bullets-item
    {
        /* font-size: 12px; */
    }
}

/* 
----------------------------------------------------------------------------------------------------
                                            MENU
----------------------------------------------------------------------------------------------------
*/

.wc-menu
{
  position: relative;
  top: 0px; 
  height: 50px;
  
  /* z-index: 1000;  */
  z-index: var(--z-menu);
  background-color: var(--wc-menu-background-color); 
  border-bottom-left-radius: 4px; 
  border-bottom-right-radius: 4px; 
  padding: 0px;
  padding-left: 0px;
  padding-right: 0px;

  float: left;
}

.wc-menu-button
{
  position: relative;
  margin: 2px;
  width: 44px;
  height: 44px;
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95% 95%;
  
  cursor: pointer;
  opacity: 1;
  border-radius: 4px;
}
.wc-menu-button:hover
{
  background-color: var(--wc-menu-button-background-color);
}


.wc-menu-pulldown
{
  position: relative;
  margin: 2px;
  width: 44px;
  height: 44px;
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95% 95%;
  
  cursor: pointer;
  opacity: 1;
  border-radius: 4px;

  /* border: 1px solid red; */
}
.wc-menu-pulldown:hover
{
  background-color: var(--wc-menu-button-background-color);
}

.wc-menu-button-active
{
  background-color: var(--wc-menu-button-active-background-color);
}

.wc-menu-splitter
{
  position: relative;
  margin: 4px;
  width: 1px;
  height: 42px;
  background-color: var(--wc-menu-splitter-background-color);
  opacity: 1;
}


/* ------------------------------------------------------------------------------------------------- */
/*                                                   POPUP                                           */
/* ------------------------------------------------------------------------------------------------- */

.wc-menu-popup
{
    display: none;
    position: fixed;
    min-width: 220px;
    max-width: 380px;
    background-color: var(--wc-menu-popup-background-color);
    padding-top: 10px;
    padding-bottom: 10px;
}

.wc-menu-popup-blocker
{
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--wc-menu-popup-blocker-background-color);
}

.wc-menu-popup-item
{
    width: calc(100% - 40px);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 3px;
    color: var(--wc-menu-popup-text);
    cursor: pointer;
}
.wc-menu-popup-item:hover
{
  background-color: var(--wc-menu-popup-item-hover-background-color);
}


.wc-menu-popup-splitter
{
    width: calc(100% - 20px);
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    background-color: var(--wc-menu-popup-splitter-background-color);
    
    
}





/* ------------------------------------------------------------------------------------------------- */
/*                                                   MOBILE-TYP                                      */
/* ------------------------------------------------------------------------------------------------- */


.wc-menu-mobile
{
  background-color: var(--wc-menu-popup-mobile-background-color);
  border-radius: 0px;
}

.wc-menu-button-mobile
{
  margin: 0px;
  width: 50px;
  height: 50px;
  border-radius: 0px;
}


/* 
----------------------------------------------------------------------------------------------------
                                            POPUP
----------------------------------------------------------------------------------------------------
*/

.wc-popup
{
    display: none;  /* block or none from jquery */

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    min-height: 50px;
    max-height: 250px;
    border-radius: 3px;
    padding: 0px;

    background-color: var(--wc-popup-background);
    border: 0px solid var(--wc-popup-border);
    box-shadow: 0 2px 6px 0 rgba(16, 38, 64, 0.20);
    
    overflow-x: auto;
    /* z-index: 9999; */
    z-index: var(--z-popup);
    user-select: none;

    /* display:table; */
}

.wc-popup-item
{
    font-size: 1.1em;
    line-height: 1.59;
    color: var(--wc-popup-item-text);
    background-color: var(--wc-popup-item-background);
    border: 0px solid;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: pointer;
}

.wc-popup-item:hover
{
    color: var(--wc-popup-item-text-hover);
    background-color: var(--wc-popup-item-background-hover);
}


.wc-popup-item-checked
{
    font-weight: 600;
    background-image: url("images/done-24px.svg");
    background-repeat:no-repeat;
    background-position: 94% center;
    background-size: 20px 20px;
}

/* 
----------------------------------------------------------------------------------------------------
                                            RADIO
----------------------------------------------------------------------------------------------------
*/

.wc-radio
{
    color: var(--wc-radio-input-text);
    margin-bottom: 10px;
    user-select: none;
}

.wc-radio-disabled
{
    color: var(--wc-radio-input-text-disabled) !important; 
    margin-right: 20px;
}
.wc-radio-disabled:hover
{
    cursor: not-allowed;
}

.wc-radio-hidden
{
    display: none;
}

.wc-radio-label
{
    color: var(--wc-radio-input-text);
    margin-right: 20px;
    
}
.wc-radio-label:hover
{
    cursor: pointer;
}



.wc-radio-group
{
    /*
    color: var(--wc-radio-input-text);
    margin-bottom: 10px;
    user-select: none;
    */
}

.wc-radio-group-button
{
    padding: 4px;
    color: var(--wc-radio-groupbutton-text);
    background-color: var(--wc-radio-groupbutton-background);
    border: 1px solid var(--wc-radio-groupbutton-border);
    display: inline-block;
}
.wc-radio-group-button:hover
{
    cursor: pointer;
}


.wc-radio-group-button-selected
{
    color: var(--wc-radio-groupbutton-selected-text);
    background-color: var(--wc-radio-groupbutton-selected-background);
    border: 1px solid var(--wc-radio-groupbutton-selected-border);;
}

/* 
----------------------------------------------------------------------------------------------------
                                            TABCONTROL
----------------------------------------------------------------------------------------------------
*/

.wc-tabcontrol-header
{
    background-color: var(--wc-tabcontrol-header-background);  
    padding-top: 20px; 
    padding-left: 20px;
}


.wc-tabcontrol
{
    background-color: var(--wc-tabcontrol-header-background); 
    height: 40px; 
    border-bottom: 1px solid var(--wc-tabcontrol-border);    
}


/* wird überflüssig  */
.wc-tabcontrol-bar
{
    background-color: var(--tabcontrol-header-background); 
    height: 40px; 
    border-bottom: 1px solid var(--wc-tabcontrol-border);    
}



.wc-tabcontrol-tabbuttons   /* über properties tabbuttons  */
{
    background-color: var(--transparent);  
    border-bottom: 1px solid var(--transparent);
}

.wc-tabcontrol-spacer
{
    position: relative; 
    float: left; 
    line-height: 39px; 
    display: table-cell; 
    font-size: 1em; 
    width: 20px;
}

.wc-tabcontrol-spacer-dialog
{
    width: 0px;
}

.wc-tabcontrol-tab
{
    box-sizing: border-box;
    position: relative; 
    float: left; 
    line-height: 33px; 
    top: 3px; 
    display: table-cell; 
    padding-left: 18px; 
    padding-right: 18px; 
    font-size: 1em; 
    border-radius: 4px;
    border: 1px solid var(--wc-tabcontrol-border); 
    border-bottom: 1px solid var(--wc-tabcontrol-tab-background); 
    background-color: var(--wc-tabcontrol-tab-background); 
    margin-right: 10px;                           
    cursor: pointer;

    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.wc-tabcontrol-tab:hover
{
    background-color: var(--wc-tabcontrol-tab-background-hover);
}

.wc-tabcontrol-tab-tabbuttons
{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.wc-tabcontrol-selected
{
    /* line-height: 40px; */
    padding-bottom: 1px;
    background-color: var(--wc-tabcontrol-selected-background); 
    border-bottom: 1px solid var(--wc-tabcontrol-selected-background);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.wc-tabcontrol-selected:hover
{
    background-color: var(--wc-tabcontrol-selected-background);
}

.wc-tabcontrol-selected-dialog
{
    top: 2px;
    background-color: var(--wc-tabcontrol-selected-background); 
    border-bottom: 1px solid var(--wc-tabcontrol-tab-background);
}

.wc-tabcontrol-selected-tabbuttons
{
    top: 2px;

    /*
    background-color: rgba(0,0,0,0); 
    border-bottom: 1px solid rgba(0,0,0,0);
    */


}


/* 
----------------------------------------------------------------------------------------------------
                                            TABLE
----------------------------------------------------------------------------------------------------
*/

.wc-table
{
    overflow: hidden;
    border: 1px solid var(--wc-table-border);

    /* overflow: auto;
    border: 1px solid var(--wc-table-border); */

    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--wc-table-header-background);
}

.wc-table-header-area
{
    position: relative; 
    /* width: 600px;  */
    height: 2.5em; 
    overflow: hidden; 
    border: 0px solid var(--wc-table-border);
    /* background-color: var(--wc-table-header-background); */
}
.wc-table-header-area-with-filter { height: 5em; }



.wc-table-client-area
{
    position: relative; 
    /* width: 600px; */
    width: 100%;
    height: calc(100% - 2.5em - 4px); 
    overflow: auto; 
    border-top: 1px solid var(--wc-table-border);
}
.wc-table-client-area-with-filter { height: calc(100% - 5em - 4px); }

.wc-table-hidden
{
    display: none;
}

.wc-table-header-lastcol:last-child
{
    /* padding-right: 20px; */
    /* background-color: yellow; */
    /* border: 0px solid white; */
}




.wc-table-frame
{
    background-color: var(--wc-table-background);
    padding: 0px;
    overflow: auto; 
    display: table;
    width: 100%;
    
    /* table-layout: auto;*/  /* automatische breite, mit Scrollbalken, kein width in spalte */
    table-layout: fixed;  /* feste breite, mit Scrollbalken, width in spalte möglich  */
    
}

.wc-table-header
{
    background-color: var(--wc-table-header-background);
    padding: 0px;
    height: 2.5em;
    display: table-row;
    font-weight: 600;
    color: var(--wc-table-header-color);
    /*  table-row kennt kein border  */
}

.wc-table-filter
{
    background-color: var(--wc-table-filter-background);
    padding: 0px;
    /* height: 2.5em; */
    display: table-row;
    /*  table-row kennt kein border  */
}

.wc-table-listitem
{
    padding: 0px;
    display: table-row;
    /*  table-row kennt kein border  */
}
.wc-table-listitem:hover
{
    background-color: var(--wc-table-row-background-hover)
}

.wc-table-listitem-selected { background-color: var(--wc-table-row-background-selected);  }
.wc-table-listitem-selected:hover { background-color: var(--wc-table-row-background-selected-hover);  }

/* .wc-table-listitem-focused {   } */


.wc-table-cell
{
    display: table-cell; 
    vertical-align: center; 
    line-height: 2.5em; 
    white-space: nowrap;  
    overflow: hidden; 
    text-overflow: ellipsis;
    border-right: 1px solid var(--wc-table-border);
    border-bottom: 1px solid var(--wc-table-border);
}
.wc-table-cell:last-child
{
    border-right: 0px;
}

.wc-table-header-blind
{
    display: table-cell; 
    /* line-height: 1em;  */
    white-space: nowrap; 
    overflow: hidden; 
    border-right: 1px solid var(--wc-table-border); 
    /* border-bottom: 1px solid var(--wc-table-border);  */
}

/*  ---------------------------------------   Zellenformate nach type  ---------------------------------------------- */

.wc-table-cell-text
{
    line-height: 2.5em;
    text-overflow: ellipsis;
}

.wc-table-cell-int
{
    text-align: right;    
}

.wc-table-cell-float
{
    text-align: right;    
}

.wc-table-cell-bool
{
    text-align: center;    
}

.wc-table-cell-icon
{
    /*
    padding: 0px;
    margin: 0px;
    background-color: red;
    */
}

.wc-table-cell-fonticon
{
    text-align: center;
    padding-left: 6px;
}


/* 
----------------------------------------------------------------------------------------------------
                                            TOOLBAR
----------------------------------------------------------------------------------------------------
*/

.wc-toolbar
{
    width: 100%;
    background-color: var(--wc-toolbar-background);
    padding: 0px;
    height: var(--wc-toolbar-height);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    margin-bottom: 10px;
}

.wc-toolbar-area
{
    background-color: var(--wc-toolbar-background);
    padding: 0px;
    height: 100%;
    display: cell;
    
}

/*
.wc-toolbar-dialogheader
{
    margin-bottom: 10px;
    background-color: var(--transparent);
}

.wc-toolbar-dialog
{
    margin-bottom: 10px;
    background-color: var(--transparent-low);
    border-radius: 4px;
}
*/

.wc-toolbar-item-button
{
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px;
    background-color: var(--wc-toolbar-button-background);
    border: 1px solid var(--wc-toolbar-button-border);
    color: var(--wc-toolbar-button-text);
    cursor: pointer;
    user-select: none;
}

.wc-toolbar-item-iconbutton
{
    height: var(--wc-toolbar-height);
    padding-left: 36px;
    padding-right: 10px;
    background: no-repeat 6px center;
    border-radius: 4px;
    background-color: var(--wc-toolbar-button-background); 
    border: 1px solid var(--transparent);
    color: var(--wc-toolbar-button-text);
    cursor: pointer;
    user-select: none;
}
.wc-toolbar-item-iconbutton:hover
{
    background-color: var(--wc-toolbar-button-background-hover);
    border: 1px solid var(--wc-toolbar-button-background-hover);
}


.wc-toolbar-item-icon
{
    height: var(--wc-toolbar-height);
    width: var(--wc-toolbar-height);
    background: no-repeat center center;
    background-size: 100%;
    background-color: var(--transparent);
    cursor: pointer;
    user-select: none;
}

.wc-toolbar-item-title
{
    /*
    height: var(--wc-toolbar-height);
    width: var(--wc-toolbar-height);
    */
    font-weight: 500;
    font-size: 1.2em;
    color: var(--text-h3);
    background-color: var(--transparent);
    user-select: none;
}

.wc-toolbar-left
{
    float: left;
    /* background-color: red;  */
    line-height: var(--wc-toolbar-height);
    margin-right: 10px; 
}

.wc-toolbar-right
{
    float: right;
    /* background-color: yellow; */
    line-height: var(--wc-toolbar-height);
    margin-left: 10px; 

}

.wc-toolbar-center    /* baustelle  */
{
    text-align: center;
    /* background-color: #E8E8E8; */
    display: cell;
    width: 50%;
    line-height: var(--wc-toolbar-height);

}

.wc-toolbar-hidden
{
    display: none;
}

/* ---------------------  SPECIAL LAYOUTS ------------------------------------------  */

.wc-toolbar-item-default
{
    color: black;
    background-color: var(--wc-toolbar-button-background-default);
}
.wc-toolbar-item-default:hover { background-color: var(--wc-toolbar-button-background-default-hover); }

.wc-toolbar-item-default-icon
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    color: black;
    background-color: var(--wc-toolbar-button-background-default);
}
.wc-toolbar-item-default-icon:hover { background-color: var(--wc-toolbar-button-background-default-hover); }

.wc-toolbar-item-add
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    background-color: var(--wc-toolbar-button-background-add);
}
.wc-toolbar-item-add:hover { background-color: var(--wc-toolbar-button-background-add-hover); }

.wc-toolbar-item-copy
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    background-color: var(--wc-toolbar-button-background-copy);
}
.wc-toolbar-item-copy:hover { background-color: var(--wc-toolbar-button-background-copy-hover); }

.wc-toolbar-item-edit
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    background-color: var(--wc-toolbar-button-background-edit);
}
.wc-toolbar-item-edit:hover { background-color: var(--wc-toolbar-button-background-edit-hover); }

.wc-toolbar-item-delete
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    background-color: var(--wc-toolbar-button-background-delete);
}
.wc-toolbar-item-delete:hover { background-color: var(--wc-toolbar-button-background-delete-hover); } 

.wc-toolbar-item-signal
{
    /* padding-left: 36px; */
    background: no-repeat 6px center;
    background-color: var(--wc-toolbar-button-background-signal);
}
.wc-toolbar-item-signal:hover { background-color: var(--wc-toolbar-button-background-signal-hover); }

/*
.wc-toolbar-item-transparent
{
    background: no-repeat 6px center;
  
}
.wc-toolbar-item-transparent:hover { background-color: var(--button-background); } 
*/

/* 
----------------------------------------------------------------------------------------------------
                                            UPLOAD
----------------------------------------------------------------------------------------------------
*/

.wc-upload
{
    display: none;
}

.wc-upload-dropzone
{
    display: block;
}

.wc-upload-dropzone-sample
{
    position: absolute; 
    width: 300px; 
    height: 80px; 
    background-color: var(--wc-upload-dropzone-background-color);
}

#wc-upload-window
{
    width: 600px;
    height: 70px; 
    position: fixed; 
    left: 50%; 
    margin-left: -300px;
    bottom: -80px;
    background-color: var(--wc-upload-background-color);
    /* z-index: 99; */
    border: 1px #E0E0E0 solid;
    border-radius: 4px;
}

#wc-upload-text
{
    float: left;
    padding: 0px; 
    margin: 0px;
    width: calc(100% - 75px);
  
    white-space: nowrap;  
    overflow: hidden;
    text-overflow: ellipsis; 
}

#wc-upload-size
{
    float: left;
    padding: 0px; 
    margin: 0px;
    width: 65px;
    /* background-color: silver; */
  
    white-space: nowrap;  
    overflow: hidden;
    text-overflow: ellipsis; 
}

#wc-upload-cancel
{
    display: table;
    width: calc(100% - 20px);
    margin: 0px;
    height: 45px;
    color: var(--wc-upload-button-text);
    background-color: var(--wc-upload-button-background);
    line-height: 45px;
    text-align: center;
    border-radius: 4px;
}
#wc-upload-cancel:hover
{
    background-color: var(--wc-upload-button-background-hover);
}

#wc-upload-progress
{
    margin-top:4px; 
    height: 20px; 
    width: 95%;
}


@media screen and (max-width: 640px) 
{
  #wc-upload-window
  {
    width: 90%;
    left: 5%;
    margin-left: 0px;
  }
}



/* 
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------

                                            COMPONENTS

----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------
*/

.dc-floatmenu-textbutton
{
    box-sizing: border-box;
    float: left;
    height: 40px;
        
    background-color: rgba(0,0,0,0);
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2px;
    margin-left: 8px;
    margin-right: 8px;
    text-align: center;
    cursor: pointer;
}
.dc-floatmenu-textbutton:hover
{
    /* background-color: rgba(180,180,180,0.4); */
    border-bottom: 3px solid orange;
}
.dc-floatmenu-textbutton-active
{
    /* border-bottom: 2px solid orange; */
    /* background-color: rgba(180,180,180,0.3); */
    border-bottom: 3px solid gold;
}

.dc-floatmenu-textbutton-text
{
    box-sizing: border-box;
    height: 50px;
    
    float: left;
    padding: 0px;
    margin: 0px;
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 16px;
    line-height: 40px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

.dc-floatmenu-textbutton-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    
    display: none;
    float: right;
    padding: 0px;
    margin-top: 12px;
    margin-left: 8px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}


/* ------------------------------------------------ */

.dc-floatmenu-iconbutton
{
    box-sizing: border-box;
    float: right;
    width: 50px;
    height: 50px;
    
    background-color: rgba(0,0,0,0);
    background-size: 34px 34px;
    background-position: center 9px;
    background-repeat: no-repeat;
        
    margin-right: 0px;
    /* margin-left: 10px; */
    margin-top: 6px;
    text-align: center;
    /* border: 2px solid red; */
    cursor: pointer;
    border-radius: 25px;
}
.dc-floatmenu-iconbutton:hover
{
    background-color: rgba(180,180,180,0.4);
    /* border-bottom: 3px solid orange; */
}
.dc-floatmenu-iconbutton-active
{
    /* border-bottom: 2px solid orange; */
    /* background-color: rgba(180,180,180,0.3); */
    border-bottom: 3px solid var(--wc-site-fullsize-floatmenu-item-active-color);
}

.dc-floatmenu-iconbutton-digit
{
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    
    display: none;
    padding: 0px;
    margin-top: 24px;
    margin-left: 26px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
}

/* ------------------------------------------------ */

.dc-floatmenu-texticonbutton
{
    box-sizing: border-box;
    float: right;
    /* width: 60px; */
    height: 40px;
        
    background-color: rgba(0,0,0,0);
    background-size: 28px 28px;
    background-position: 15px 6px;
    background-repeat: no-repeat;
    
    padding: 0px;
    padding-left: 50px;
    padding-right: 20px;
    padding-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    /* filter: invert(1); */
}
.dc-floatmenu-texticonbutton:hover
{
    cursor: pointer;
    border-radius: 20px;
    background-color: rgba(180,180,180,0.4);
}
.dc-floatmenu-texticonbutton-active
{
    cursor: pointer;
    border-radius: 20px;
    background-color: rgba(255,255,255,0.2);
}

.dc-floatmenu-texticonbutton-text
{
    box-sizing: border-box;
    /* width: 24px; */
    /* height: 30px; */
    
    float: left;
    /* display: inline-block; */
    /* position: sticky; */
    /* position: absolute; */
    padding: 0px;
    margin: 0px;
    margin-left: 6px;
    /* background-color: rgba(255, 80, 80, 1); */
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 13px;
    line-height: 36px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

.dc-floatmenu-texticonbutton-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    
    display: none;
    /* display: inline-block; */
    float: right;
    padding: 0px;
    margin-top: 12px;
    margin-left: 8px;
    /* margin-top: 24px; */
    /* margin-left: 26px; */
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* ------------------------------------------------ */

/*
.dc-floatmenu-texticonbuttonsub
{
    box-sizing: border-box;
    float: right;
    height: 45px;
       
    background-color: rgba(0,0,0,0);
    background-size: 26px 26px;
    background-position: 6px 12px;
    background-repeat: no-repeat;
    
    padding: 0px;
    padding-left: 40px;
    padding-right: 10px;
    padding-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.dc-floatmenu-texticonbuttonsub:hover
{
    border-bottom: 3px solid orange;
}
.dc-floatmenu-texticonbuttonsub-active
{
    border-bottom: 3px solid gold;
}

.dc-floatmenu-texticonbuttonsub-text
{
    box-sizing: border-box;
    height: 50px;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-left: 6px;
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 13px;
    line-height: 46px;
    pointer-events: none;
    z-index: 1;
}

.dc-floatmenu-texticonbuttonsub-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;
    float: right;
    padding: 0px;
    margin-top: 12px;
    margin-left: 8px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}
*/


.dc-floatmenu-texticonbuttonsub
{
    box-sizing: border-box;
    float: right;
    /* width: 60px; */
    height: 45px;
       
    /* display: inline-block;
    width: fit-content; */
    position: relative;

    /* background-color: rgba(0,0,0,0);
    background-size: 26px 26px;
    background-position: 6px 12px;
    background-repeat: no-repeat; */
    
    padding: 0px;
    padding-left: 40px;
    padding-right: 10px;
    padding-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;

    /* border: 1px solid red; */
    color: rgba(0,0,0,0);
}
.dc-floatmenu-texticonbuttonsub:hover
{
    border-bottom: 3px solid orange;
}
.dc-floatmenu-texticonbuttonsub-active
{
    border-bottom: 3px solid gold;
}

.dc-floatmenu-texticonbuttonsub-image
{
    box-sizing: border-box;
    left: 6px;
    top: 12px;
    width: 26px;
    height: 26px;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    /* border: 1px solid blue; */

    background-color: rgba(0,0,0,0);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.dc-floatmenu-texticonbuttonsub-text
{
    box-sizing: border-box;
    height: 50px;
    
    /* float: left; */
    position: absolute;

    left: 40px;
    padding: 0px;
    margin: 0px;
    /* margin-left: 6px; */
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 13px;
    line-height: 46px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    /* border: 1px solid yellow; */
}

.dc-floatmenu-texticonbuttonsub-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;

    /* float: right; */
    position: absolute;

    padding: 0px;
    left: 80px;
    top: 12px;
    /* margin-top: 12px;
    margin-left: 8px; */
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}



/* ------------------------------------------------ */

.dc-burgermenu-line
{
    width: 100%;
    height: 1px;
    margin-left: 0px;
    margin-right: 0px;
    border-bottom: 1px solid var(--wc-site-border-color);
}

/* ------------------------------------------------ */

.dc-burgermenu-iconbutton
{
    box-sizing: border-box;
    /* float: right; */
    /* width: 60px; */
    /* height: 45px; */
        
    background-color: var(--wc-site-menu-burger-item-backgroundcolor);
    background-size: 24px 24px;
    background-position: 10px 13px;
    background-repeat: no-repeat;
    
    padding: 0px;
    /* line-height: 40px; */
    padding-left: 40px;
    /* padding-right: 10px; */
    padding-top: 2px;
    /* margin-left: 4px;
    margin-right: 4px; */
    /* text-align: center; */
    cursor: pointer;
    font-size: 14px;
    color: var(--wc-site-menu-burger-item-color);
}
.dc-burgermenu-iconbutton:hover
{
    /* background-color: var(--wc-site-menu-burger-item-hover-backgroundcolor); */
    /* color: var(--wc-site-menu-burger-item-hover-color); */
    filter: invert(1);
}

.dc-burgermenu-iconbutton-active
{
    /* background-color: var(--wc-site-menu-burger-item-active-backgroundcolor);
    color: var(--wc-site-menu-burger-item-active-color); */
    border-bottom: 3px solid gold;
    /* color: gold; */
}

.dc-burgermenu-iconbutton-text
{
    box-sizing: border-box;
    /* width: 24px; */
    line-height: 40px;
    /* width: 100px; */
    
    /* float: left; */
    display: inline-block;
    /* position: sticky; */
    /* position: absolute; */
    /* padding: 0px; */
    /* padding-left: 40px; */
    /* padding-right: 10px; */
    /* margin: 0px; */
    /* margin-left: 6px; */
    /* background-color: rgba(255, 80, 80, 1); */
    /* color: white; */
    font-family: Tahoma;
    font-size: 14px;
    line-height: 26px;
    margin-top: 10px;
    margin-bottom: 10px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}


.dc-burgermenu-iconbutton-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    
    display: none;
    /* display: inline-block; */
    float: right;
    padding: 0px;
    margin-top: 12px;
    /* margin-left: 8px; */
    margin-right: 5px;
    /* margin-top: 24px; */
    /* margin-left: 26px; */
    /* padding-left: 4px; */
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    text-align: center;
    z-index: 2;
}

/* ------------------------------------------------ */

.dc-floatmenu-text-rounded
{
    box-sizing: border-box;
    float: right;
    height: 40px;
        
    padding: 0px;
    padding-left: 25px;
    padding-right: 25px;
    /* padding-top: 13px; */
    line-height: 40px;
    margin: 10px;
    margin-left: 10px;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--wc-site-fullsize-floatmenu-logout-color);

    font-weight: bold;
    background-color: var(--wc-site-fullsize-floatmenu-logout-background-color);
    border-radius: 20px;
  
}
.dc-floatmenu-text-rounded:hover
{
    background-color: var(--wc-site-menu-burger-item-hover-backgroundcolor);
    color: var(--wc-site-menu-burger-item-hover-color);

    cursor: pointer;
}

.dc-floatmenu-text-rounded-yellow:hover
{
    background-color: gold !important;
}


/* ------------------------------------------------ */

/*
.dc-bar-button-icon-text-below
{
    box-sizing: border-box;
    float: left;
    min-width: 30px;
    height: calc(100% - 1px);
    border: 2px solid #00000000;
    background-color: rgba(0,0,0,0);
    background-size: 30px 30px;
    background-position: center 4px;
    background-repeat: no-repeat;
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
}
.dc-bar-button-icon-text-below:hover
{
    cursor: pointer;
    background-color: var(--wc-toolbar-button-background-default-hover);
}
.dc-bar-button-icon-text-below-active
{
    border-bottom: 3px solid green;
}
.dc-bar-button-icon-text-below-text
{
    box-sizing: border-box;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-top: 35px;
    margin-left: 4px;
    margin-right: 4px;
    color: var(--wc-site-text);
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    text-align: center;
    z-index: 1;
}
.dc-bar-button-icon-text-below-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;
    float: right;
    padding: 0px;
    margin-top: 18px;
    right: 26px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
    text-align: center;
}
*/


.dc-bar-button-icon-text-below
{
    box-sizing: border-box;
    float: left;
    min-width: 30px;
    height: calc(100% - 1px);
    border: 2px solid #00000000;
    position: relative;
    
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
}
.dc-bar-button-icon-text-below:hover
{
    cursor: pointer;
    /* background-color: var(--wc-toolbar-button-background-default-hover); */
    background-color: rgba(180,180,180,0.4);
}
.dc-bar-button-icon-text-below-active
{
    border-bottom: 3px solid gold;
}
.dc-bar-button-icon-text-below-text
{
    box-sizing: border-box;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-top: 36px;
    margin-left: 4px;
    margin-right: 4px;
    color: var(--wc-site-text);
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}
.dc-bar-button-icon-text-below-digit
{
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    display: none;
    float: right;
    top: 12px;
    right: 6px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
    text-align: center;
}

.dc-bar-button-icon-text-below-image
{
    box-sizing: border-box;
    
    left: 0px;
    margin-top: 5px;
    width: 30px;
    height: 30px;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    /* border: 1px solid blue; */

    background-color: rgba(0,0,0,0);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ------------------------------------------------ */
/*
.dc-bar-button-icon-text-behind
{
    box-sizing: border-box;
    float: left;
    height: 40px;
    background-color: rgba(0,0,0,0);
    background-size: 28px 28px;
    background-position: 15px 6px;
    background-repeat: no-repeat;
    padding: 0px;
    padding-left: 50px;
    padding-right: 20px;
    padding-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.dc-bar-button-icon-text-behind:hover
{
    cursor: pointer;
    background-color: rgba(180,180,180,0.4);
}
.dc-bar-button-icon-text-behind-active
{
    cursor: pointer;
    border-bottom: 3px solid gold;
}

.dc-bar-button-icon-text-behind-text
{
    box-sizing: border-box;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-left: 6px;
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 13px;
    line-height: 36px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

.dc-bar-button-icon-text-behind-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;
    float: right;
    padding: 0px;
    margin-top: 6px;
    margin-left: 8px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}
    */




.dc-bar-button-icon-text-behind
{
    box-sizing: border-box;
    float: left;
    /* width: 60px; */
    height: 40px;
       
    /* display: inline-block;
    width: fit-content; */
    position: relative;

    /* background-color: rgba(0,0,0,0);
    background-size: 26px 26px;
    background-position: 6px 12px;
    background-repeat: no-repeat; */
    
    padding: 0px;
    padding-left: 40px;
    padding-right: 10px;
    padding-top: 10px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0,0,0,0);
}
.dc-bar-button-icon-text-behind:hover
{
    cursor: pointer;
    background-color: rgba(180,180,180,0.4);
}
.dc-bar-button-icon-text-behind-active
{
    border-bottom: 3px solid gold;
}

.dc-bar-button-icon-text-behind-image
{
    box-sizing: border-box;
    left: 2px;
    top: 6px;
    width: 30px;
    height: 30px;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    /* border: 1px solid blue; */

    background-color: rgba(0,0,0,0);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.dc-bar-button-icon-text-behind-text
{
    box-sizing: border-box;
    height: 30px;
    
    /* float: left; */
    position: absolute;
    
    top: 6px;
    left: 40px;
    /* width: 100px; */
    padding: 0px;
    margin: 0px;
    /* margin-left: 6px; */
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 14px;
    line-height: 30px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    /* background-color: yellow; */
}

.dc-bar-button-icon-text-behind-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;

    /* float: right; */
    position: absolute;

    padding: 0px;
    left: 80px;
    top: 8px;
    /* margin-top: 12px;
    margin-left: 8px; */
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}




/* ------------------------------------------------ */

/*
.dc-bar-button-icon-text-rounded
{
    box-sizing: border-box;
    float: left;
    height: 40px;
    background-color: rgba(0,0,0,0);
    background-size: 28px 28px;
    background-position: 15px 6px;
    background-repeat: no-repeat;
    padding: 0px;
    padding-left: 50px;
    padding-right: 20px;
    padding-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.dc-bar-button-icon-text-rounded:hover
{
    cursor: pointer;
    border-radius: 20px;
    background-color: rgba(180,180,180,0.4);
}
.dc-bar-button-icon-text-rounded-active
{
    border-radius: 20px;
    border-bottom: 3px solid gold;
}

.dc-bar-button-icon-text-rounded-text
{
    box-sizing: border-box;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-left: 6px;
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 13px;
    line-height: 36px;
    pointer-events: none;
    z-index: 1;
}

.dc-bar-button-icon-text-rounded-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;
    float: right;
    padding: 0px;
    margin-top: 6px;
    margin-left: 8px;
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}
    */

.dc-bar-button-icon-text-rounded
{
    box-sizing: border-box;
    float: left;
    /* width: 60px; */
    height: 40px;
       
    /* display: inline-block;
    width: fit-content; */
    position: relative;

    /* background-color: rgba(0,0,0,0);
    background-size: 26px 26px;
    background-position: 6px 12px;
    background-repeat: no-repeat; */
    
    padding: 0px;
    padding-left: 40px;
    padding-right: 10px;
    padding-top: 10px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0,0,0,0);
}
.dc-bar-button-icon-text-rounded:hover
{
    cursor: pointer;
    border-radius: 20px;
    background-color: rgba(180,180,180,0.4);
}
.dc-bar-button-icon-text-rounded-active
{
    border-radius: 20px;
    border-bottom: 3px solid gold;
}

.dc-bar-button-icon-text-rounded-image
{
    box-sizing: border-box;
    left: 2px;
    top: 6px;
    width: 30px;
    height: 30px;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    /* border: 1px solid blue; */

    background-color: rgba(0,0,0,0);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.dc-bar-button-icon-text-rounded-text
{
    box-sizing: border-box;
    height: 30px;
    
    /* float: left; */
    position: absolute;
    
    top: 6px;
    left: 40px;
    /* width: 100px; */
    padding: 0px;
    margin: 0px;
    /* margin-left: 6px; */
    color: var(--wc-site-fullsize-floatmenu-item-color);
    font-family: Tahoma;
    font-size: 14px;
    line-height: 30px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    /* background-color: yellow; */
}

.dc-bar-button-icon-text-rounded-digit
{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: none;

    /* float: right; */
    position: absolute;

    padding: 0px;
    left: 80px;
    top: 8px;
    /* margin-top: 12px;
    margin-left: 8px; */
    padding-top: 4px;
    background-color: rgba(255, 80, 80, 1);
    color: white;
    border-radius: 12px;
    font-family: Tahoma;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* ------------------------------------------------ */

.dc-bar-splitter
{
    box-sizing: border-box;
    height: 40px;
    margin-top: 10px;
    width: 1px;
    border-width: 0px;
    border-left: 1px solid #E0E0E0;
    float: left;
    padding: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

/* ------------------------------------------------ */