/*************************
 *                       *
 *      Variables        *
 *                       *
 *************************/


:root {

  /*Farben*/
  --jup-color-hover:               #e6e2f9;
  --jup-color-focus:               #e6e2f9;
  --jup-color-active:              #DBD5CD;
  --jup-color-bg-active:           #000000;
  --jup-body-color:                #F1EEEB;
  --jup-icons-color:               #0b5ed7;
  --jup-formular-color-infobox:    #D7D2F0;
  --jup-formular-color-infobox2:   #FFF8B3;
  --jup-formular-color-captionBox: #DBD5CD;
  --jup-button1-color:             #ffffff;
  --jup-button1-bg-color:          #0b5ed7;
  --jup-button1-color-hover:       #ffffff;
  --jup-button1-color-focus:       #ffffff;
  --jup-button1-bg-color-hover:    #0d6efd;
  --jup-button1-bg-color-focus:    #0d6efd;
  --jup-button2-color:             #000000;
  --jup-button2-bg-color:          #ffffff;
  --jup-important-background:      #DBD5CD;
  --jup-menu-bg:                   #F8F7F5;
  --bs-table-hover-bg:             #DBD5CD;
  --jup-font-color-h1:             #000000;
  --jup-font-color-h2:             #e74c3c;
  --jup-font-color-h3:             #e74c3c;
  --jup-sepo-color:                #E6E2DC;
  --jup-sepo-color-login:          #1D0B40;
  --jup-sepo-color-hover:          #ffffff;
  --jup-sepo-color-focus:          #ffffff;
  --jup-font-color-a:              #0b5ed7;
  --jup-font-color-a-hover:        #0b5ed7;
  --jup-font-color-a-focus:        #0b5ed7;
  --jup-font-color-important:      #1D0B40;
  --jup-navbar1-bg-color:          #1D0B40;
  --jup-navbar2-bg-color:          #1D0B40;
  --jup-navbar3-bg-color:          #1D0B40;
  --jup-navbar-color:              #E6E2DC;
  --jup-navbar-color-hover:        #ffffff;
  --jup-color-1:                   #0b5ed7;
  --jup-color-2:                   #0d6efd;
  --jup-color-3:                   #1D0B40;
  --jup-color-black:               #000000;
  --jup-color-white:               #ffffff;
  --jup-color-grey-20:             #F8F7F5;
  --jup-color-grey-40:             #F1EEEB;
  --jup-color-grey-60:             #E6E2DC;
  --jup-color-grey-80:             #DBD5CD;
  --jup-color-grey-dark:           #808080;
  --jup-color-attention:           #e74c3c;

  /*Properties and Colors*/
  --jup-field-border-focus:        4px solid var(--jup-color-2);
  --jup-navbar-color-hover-bg:     inset 0 -3px 0 0 #ffffff;
}

red {
  color: var(--jup-font-color-h3) !important;
}


/*************************
 *                       *
 *      HTML / BODY      *
 *                       *
 *************************/

@font-face {
  font-family: 'it-icons';
  font-style:  normal;
  font-weight: 400;
  src:         url(../img/svg/icons.eot); /* For IE6-8 */
  src:         local("it-icons"),
               local("it-icons"),
               url(../img/svg/icons.woff2)    format("woff2"),
               url(../img/svg/icons.woff)     format("woff"),
               url(../itsp/img/svg/icons.ttf) format("truetype");
}

@font-face {
  font-family: 'regularFont';
  src:         url('fonts2/nova-round-v10-latin-regular.ttf');
}

@font-face {
  font-family: 'boldFont';
  src:         url('fonts2/nova-round-v10-latin-regular.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'slabFont';
  src:         url('fonts2/nova-round-v10-latin-regular.ttf');
}

html {
  overflow-x: auto;
  overflow-y: auto;
}

body {
  font-family:      'regularFont';
  background-color:  var(--jup-color-white);
  color:             var(--jup-color-black);
  font-size:         0.95em;
}

b {
  font-family: 'boldFont';
}

.itServicePortal {
  position:       relative;
  display:        inline-block;
  font-size:      2.0em;
  vertical-align: baseline;
  color:          var(--jup-sepo-color);
  margin-top:     10px;

}

.itServicePortalLogin {
  position:       relative;
  display:        inline-block;
  font-size:      2.0em;
  vertical-align: baseline;
  color:          var(--jup-sepo-color-login);
  margin-top:     10px;
}

#navbar2caption:hover .itServicePortal {
  color: var(--jup-sepo-color-hover);
}

#navbar2caption:focus .itServicePortal {
  color: var(--jup-sepo-color-focus);
}

h1 {
  font-family: 'slabFont';
  color:       var(--jup-font-color-h1) !important;
  font-size:   2.5em !important;
  line-height: 1.5;
}

h2 {
  font-family: 'slabFont';
  color:       var(--jup-font-color-h2) !important;
  font-size:   2.1em !important;
  line-height: 1.5;
  margin-top:  1.5em;
}

h3 {
  font-family: 'boldFont';
  color:       var(--jup-font-color-h3) !important;
  font-size:   1.7em !important;
  line-height: 1.5;
}

h4 {
  font-family: 'boldFont';
  color:       var(--jup-color-black) !important;
  font-size:   1.7em !important;
  line-height: 1.5;
}

select {
  background-color: var(--jup-color-white) !important;
}

.dlgButtonX {
  margin-left:   2em;
  margin-right:  2em;
  padding-left:  2em;
  padding-right: 2em;
  height:        40px;
  min-width:     60px;
  min-height:    40px;
  margin-bottom: 20px;
}

#welcome1 {
  display:    block;
  text-align: center;
}

#welcome2 {
  display:    none;
  text-align: center;
}

#divSmilingTomato {
  margin-left:  auto;
  margin-right: auto;
  width:        90%;
  text-align:   center;
}

#divSmilingTomato img {
  border-radius: 10px;
  width:         50%;
}

.swrLogoNavbar {
  vertical-align:  bottom;
  margin-bottom:   17px;
  margin-right:    10px;
  margin-top:      23px;
  height:          2em;
}

.swrLogoLogin{
  margin-left:     auto;
  margin-right:    auto;
  margin-top:      10px;
  height:          2em;
}

.swrLogoHelp{
  vertical-align:  bottom;
  margin-bottom:   17px;
  margin-right:    10px;
  margin-top:      23px;
  height:          3em;
}

#gotoHomeView, #gotoStatus {
    color:           var(--jup-color-1) !important;
    text-decoration: underline;
    font-size:       1em !important;
    font-family:     'boldFont';
}

#lblNumApprovals,
#lblNumRequests,
#lblNumInvoices {
   margin-left: 0.8em;
}

input[type=checkbox] {
  -webkit-appearance: checkbox;
}

.footerContent {
  width:        90%;
  margin-left:  auto;
  margin-right: auto;
}

/*************************
 *                       *
 *       jQuery          *
 *      (Override)       *
 *                       *
 *************************/

.ui-widget {
  font-family: "boldFont";
}



/*************************
 *                       *
 *       Bootstrap       *
 *      (Override)       *
 *                       *
 *************************/

.noscript {
  background-color: var(--jup-color-white);
  color:            var(--jup-color-attention);
  padding-left:     65px;
  padding-right:    65px;
  padding-top:      20px;
}

.footer {
  background:  linear-gradient(to bottom, var(--jup-color-grey-80), var(--jup-color-grey-60));
  height:      40px;
  white-space: nowrap;
}

#footerLeft {
  margin-left: 5em;
  display:     inline-block;
  padding-top: 9px;
  font-size:   0.8em;
}

#footerRight {
  margin-right:   5em;
  margin-top:     3px;
  vertical-align: bottom;
  float:          right;
}

.nav-link {
  color:          var(--jup-navbar-color);
  font-size:      1em;
  padding-top:    0.8em !important;
  padding-bottom: 0.2em !important;
  font-family:    'regularFont';

}

.nav-link:hover, .nav-link:focus {
  color: var(--jup-navbar-color-hover);
}

.modal-dialog {
  padding: 10px;
}

.dropdown-menu {
  --bs-dropdown-spacer:    0px;
  --bs-dropdown-bg:        var(--jup-menu-bg);
  --bs-dropdown-padding-y: 0;
  font-size:               1em;
  background-clip:         unset;
  border-radius:           0px;
}

.dropdown-submenu {
    filter: brightness(106%);
}

.dropdown-item {
  border-top:     1px solid var(--jup-color-white);
  font-family:    'regularFont';
}

#auto-menu {
  padding-left:  6em;

}

.dropdown-item:hover,
.dropdown-item:focus {
  color:              var(--jup-color-black);
  text-decoration:    none;
  background-color:   var(--jup-color-grey-80);
}

a {
  color:           var(--jup-font-color-a);
  text-decoration: underline;
  cursor:          pointer;
  font-family:     'boldFont';
}

a:hover {
  color: var(--jup-font-color-a-hover);
}

a:not([href]):not([class]) {
  color:           var(--jup-font-color-a);
  cursor:          pointer;
  text-decoration: underline;
  font-family:    'boldFont';
}

a:not([href]):not([class]):hover {
  color:           var(--jup-font-color-a);
  text-decoration: underline;
  cursor:          pointer;
}

.nav-link:hover {
  text-decoration: none;
}

#mobileLogout {
  color: var(--jup-color-white);

}

#btnMobileLogout,
#btnMobileHome {
 display: none;
}

.itsp-icon-dark {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 1);
}

.itsp-icon-light {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 1);
}

.itsp-navbar-toggler-dark {
   border: 1px solid var(--jup-color-black);
}

.itsp-navbar-toggler-light {
    border: 1px solid var(--jup-color-white);
}

.fixed-top {
  position: sticky;
}

.navbar {
  --bs-navbar-padding-y: 0em;
  margin-bottom:         0px;
}

#navbar4 {
  margin-top: 1em;
}


.btn-outline-primary {
  color:            var(--jup-color-3);
  background-color: var(--jup-color-grey-40);
  border:           none;
  border-radius:    0px;
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color:            var(--jup-color-white);
  background-color: var(--jup-color-1);
  border:           none;
  border-radius:    0px;
}

.btn-check + .btn:hover,
.btn-check + .btn:focus {
  color:            var(--jup-color-3);
  background-color: var(--jup-color-2);
  border:           none;
  border-radius:    0px;
}

.form-control:focus {
  box-shadow: none;
  border: var(--jup-field-border-focus);
}

.btn-secondary {
  color:            var(--jup-color-grey-60);
  background-color: var(--jup-color-3);
  border:           none;
  border-radius:    0px;
}

.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:active  {
  color:            var(--jup-color-white);
  background-color: var(--jup-color-3);
  border:           none;
  border-radius:    0px;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--jup-color-active);
  color:            var(--jup-color-bg-active);
}

.bg-danger {
  background-color: var(--jup-color-attention) !important;
}

.table-hover td {
  cursor: pointer;
}

#txtApacheErrorLog {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
  min-height: 100px;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  background-color: white;
  white-space: pre-line;
}

/*************************
 *                       *
 *   APP - Grundgerüst   *
 *                       *
 *************************/

.waitCursor {
  cursor: wait !important;
}

#divTop{
  background-color: var(--jup-color-grey-60);
}

#divCenter{
  background-color: var(--jup-color-white);
}

#divBottom{
  position: fixed;
  height:   40px;
  bottom:   0;
  width:    100%;
}

#forceEndSession {
  background-color: var(--jup-color-white);
  width:            60%;
  margin:           auto;
  border-radius:    6px;
}

#forceEndSession div {
  padding:   50px;
}

#loginDiv {
  margin-left:      auto;
  margin-right:     auto;
  margin-top:       20px;
  margin-bottom:    300px;
  text-align:       center;
  background-color: var(--jup-color-white);
  border-radius:    6px;
}

#loginDiv input,
#loginDiv select {
  margin-left:  auto;
  margin-right: auto;
}

#loginText {
  display:       block;
  margin-top:    20px;
  margin-bottom: 30px;
}

#loginFooter {
  margin-top: 20px;
}

#navbar1parent {
  padding:          0px;
  background-color: var(--jup-navbar1-bg-color) !important;
  min-height:       0px;
  border:           none;
}

#navbar1 {
  background-color: var(--jup-navbar2-bg-color);
}

#navbarNavTop{
  padding-right: 4em;
}

.nav1divider {
  width:        1px;
  height:       34px;
  margin-left:  8px;
  margin-right: 8px;
}

.nav1button {
  border:           none;
  margin-top:       6px;
  background-color: inherit;
  outline:          none;
}

.nav1button:hover {
  background-color:  var(--jup-color-hover) !important;
}

.nav1LoginUser {
  margin-right:     10px;
  margin-left:      10px;
  background-color: inherit;
  display:          none;
  cursor:           default;
  white-space:      nowrap;
}

#navbar2parent {
  box-shadow: none;
  padding:    0px;
  border:     0px;
}

#navbar2 {
  background-color: var(--jup-navbar2-bg-color);
  padding-left:    6em;
}

#navbar2searchField {
  margin-left: 30px;
  padding-bottom: 0px;
}

#navbar3parent {
  background-color: var(--jup-navbar3-bg-color);
  background-image: none;
  padding:          0px;
  border:           0px;
  border-radius:    unset;
}

#mainCaption {
  font-size: 3em;
}

#mainApp {
  border-radius:           0px !important;
  background-color:        var(--jup-color-white) !important;
  margin-bottom:           0px !important;
  height:                  100% !important;
  padding-left:            65px;
  padding-right:           65px;
  overflow:                auto;
  outline:                 none;
}

#helpCOntainer {
  width:        90%;
  margin-left:  auto;
  margin-right: auto;
  margin-top:   40px;
}

#mainHeader {
  position:         fixed !important;
  z-index:          1000;
  background-color: var(--jup-navbar3-bg-color);
  width:            100%;
  height:           30px;
  min-height:       30px;
  max-height:       30px;
  color:            var(--jup-color-grey-20);
  font-size:        1em;
  font-family: 'boldFont';
  text-decoration:  none;
  text-shadow:      none;
  padding-top:      3px;
  padding-right:    4px;
}

#mainHeaderTable {
  width: 100%;
}

#mainHeaderTableTd1 {
  width:        300px;
  padding-left: 12px;
  color:        var(--jup-color-grey-20);
  font-size:    1em;
}

#mainHeaderTableTd2 {
  text-align:   left;
  padding-left: 0px;
}

#txtFormularSearch, #txtSearchX {
  height:                     35px;
  width:                      332px;
  color:                      var(--jup-color-black);
  background-color:           var(--jup-color-white);
  border:                     0px;
  border-top-left-radius:     4px;
  border-bottom-left-radius:  4px;
  border-top-right-radius:    0px;
  border-bottom-right-radius: 0px;
  outline:                    none;
  box-shadow:                 none;
  vertical-align:             bottom;
  padding-left:               6px;
  padding-right:              6px;
  border-right-style:         solid;
  border-right-color:         var(--jup-color-grey-60);
  border-width:               0px;
}

#txtSearchX {
   border-top-right-radius:    4px;
  border-bottom-right-radius: 4px;
}

#btnGlobalSearch {
  height:                     35px;
  font-size:                  0.9em;
  color:                      var(--jup-color-black);
  background-color:           var(--jup-color-white);
  border:                     0px;
  border-top-right-radius:    4px;
  border-bottom-right-radius: 4px;
  text-decoration:            none;
  text-shadow:                none;
  outline:                    none;
  box-shadow:                 none;
}

#btnGlobalSearch:hover, #btnGlobalSearch:focus-within, #btnGlobalSearch:active {
  background-color:           var(--jup-color-hover);
}

#txtFormularSearch2 {
  height:                     50px;
  width:                      400px;
  color:                      var(--jup-color-black);
  background-color:           var(--jup-color-white);
  border-left:                1px solid var(--jup-color-black);
  border-right:               0px;
  border-top:                 1px solid var(--jup-color-black);
  border-bottom:              1px solid var(--jup-color-black);
  border-top-left-radius:     6px;
  border-bottom-left-radius:  6px;
  border-top-right-radius:    0px;
  border-bottom-right-radius: 0px;
  outline:                    none;
  vertical-align:             bottom;
  margin-top:                 20px !important;
  margin-bottom:              20px !important;
  padding-left:               6px;
  padding-right:              6px;
}

#txtFormularSearch:focus,
#txtFormularSearch2:focus,
#txtSearchX:focus {
  border: var(--jup-field-border-focus);
}

#btnGlobalSearch2 {
  height:                     50px;
  width:                      50px;
  font-size:                  1.8em;
  color:                      var(--jup-color-black);
  background-color:           var(--jup-color-white);
  border-left:                0px;
  border-right:               1px solid var(--jup-color-black);
  border-top:                 1px solid var(--jup-color-black);
  border-bottom:              1px solid var(--jup-color-black);
  border-top-right-radius:    6px;
  border-bottom-right-radius: 6px;
  text-decoration:            none;
  text-shadow:                none;
  outline:                    none;
  margin-left:                -4px;
  margin-bottom:              20px;
}

#btnGlobalSearch2 i {
  margin-top: 3px;
}

#showFavoritesIcon {
  display:        inline-block;
  cursor:         pointer;
  vertical-align: middle;
  margin-right:   10px;
}

#showFavoritesIcon:hover {
  color: var(--jup-color-attention);
}

#favoritesContainer {
  top:    0px;
  left:   0px;
  right:  unset !important;
  bottom: unset !important;
}

#favoritesContainer div {
  background-color: var(--jup-color-white);
}

#mainHeaderTableTd3 {
  text-align: right;
}

#welcomeText {
  margin-top:       20px;
  margin-left:      auto;
  margin-right:     auto;
  text-align:       center;
  background-color: var(--jup-color-white);
  border:           3px solid var(--jup-color-grey-60);
  border-radius:    6px;
}

#formularHint {
  width:        500px;
  margin-left:  auto;
  margin-right: auto;
  text-align:   center;
}

#maintenance {
  border:           3px solid var(--jup-color-attention);
  border-radius:    6px;
  color:            var(--jup-color-attention);
  text-align:       center;
  background-color: var(--jup-color-white);
  padding:          20px;
}

#btnContact {
  color:      var(--jup-color-black);
  background: transparent none repeat scroll 0 0;
  border:     1px solid var(--jup-color-grey-60);
  border-radius: 6px;
}

#btnContact:focus {
  outline:       none;
  border:        1px dashed var(--jup-color-black);
  border-radius: 6px;
  box-shadow:    none;
}

#btnHelp {
  color:      var(--jup-color-black);
  background: transparent none repeat scroll 0 0;
  border:     1px solid var(--jup-color-grey-60);
  border-radius: 6px;
}

#btnHelp:focus {
  outline:       none;
  border:        1px dashed var(--jup-color-black);
  border-radius: 6px;
  box-shadow:    none;
}

#btnProfile {
  color:      var(--jup-color-black);
  background: transparent none repeat scroll 0 0;
  border:     1px solid var(--jup-color-grey-60);
  border-radius: 6px;
}

#btnProfile:focus {
  outline:       none;
  border:        1px dashed var(--jup-color-black);
  border-radius: 6px;
  box-shadow:    none;
}

#btnImpress {
  color:         var(--jup-color-black);
  background:    transparent none repeat scroll 0 0;
  border:        1px solid var(--jup-color-grey-60);
  border-radius: 6px;
}

#btnImpress:focus {
  outline:       none;
  border:        1px dashed var(--jup-color-black);
  border-radius: 6px;
  box-shadow:    none;
}

#btnLogoff {
  color:         #F8F7F5;
  background:    transparent none repeat scroll 0 0;
  border:        1px solid var(--jup-color-grey-60);
  border-radius: 6px;
  font-size:     1.5em;
}

#btnLogoff:focus, #btnLogoff:hover {
  outline:          none;
  color:            var(--jup-color-black);
  border-radius:    6px;
  box-shadow:       none;
}

.errorLoginMessage{
  text-align: center;
}

.menu2-folder {
  cursor:        pointer;
  display:       inline-block;
  margin:        10px;
  height:        30px;
  border:        3px solid var(--jup-color-2);
  border-radius: 4px;
}

.menu2-folder:focus {
  /* outline: dashed; */
  outline:    0;
  box-shadow: 0 0 14px var(--jup-color-2);
}

.menu2-form {
  cursor:        pointer;
  display:       inline-block;
  margin:        10px;
  height:        30px;
  border:        3px solid #00b000;
  border-radius: 4px;
}

.menu2-form:focus {
  /* outline: dashed; */
  outline:    0;
  box-shadow: 0 0 14px #00b000;
}

#messageCaption {
  font-size:  3em;
  font-style: italic;
}

.backLink {
  cursor: pointer;
  color:  var(--jup-color-1);
}

.backLink:hover {
  text-decoration: underline;
}

.navAccessibility {
  position:         absolute;
  top:              0;
  left:             0;
  height:           34px;
  background-color: var(--jup-color-grey-60);
  font-size:        1.3em;
  text-align:       center;
  padding:          5px;
  font-family: 'boldFont';
  outline:          none;
}

.navAccessibility:focus {
  border: 1px dashed var(--jup-color-black);
}

.tdEmpty {
  background-color: white;
}

#ulLoginNameAndId2 {
  font-size:      1em;
  margin:         0em 1em;
  padding-bottom: 0.5em;
}

#liLoginNameAndId2 {
  list-style-type: none;
}


/*************************
 *                       *
 *         Login         *
 *                       *
 *************************/

#lblUser {
  width:       200px;
  text-align:  left;
  font-family: 'boldFont';
}

#txtUser {
  display:       block;
  border:        1px solid var(--jup-color-black);
  border-radius: 6px;
  height:        40px;
  width:         200px;
  padding:       4px;
  margin-bottom: 4px;
}

#txtUser:focus {
  border:  var(--jup-field-border-focus);
  outline: none;
}

#lblPasswd {
  width:       200px;
  text-align:  left;
  margin-top:  10px;
  font-family: 'boldFont';
}

#txtPasswd {
  display:       block;
  border:        1px solid var(--jup-color-black);
  border-radius: 6px;
  height:        40px;
  width:         200px;
  padding:       4px;
  margin-bottom: 20px;
}

#txtPasswd:focus {
  border:  var(--jup-field-border-focus);
  outline: none;
}

#btnLogin {
  width:          200px;
  margin-bottom:  4px;
  padding-top:    5px;
  padding-bottom: 5px;
  border-radius:  6px;
}

.userAndPwdLbl {
  width:       300px;
  text-align:  left;
  margin-top:  10px;
  font-family: 'boldFont';
}

.userAndPwdTxt {
  display:       block;
  border:        1px solid var(--jup-color-black);
  border-radius: 6px;
  height:        40px;
  width:         300px;
  padding:       4px;
  margin-bottom: 4px;
}

.userAndPwdSel {
  display:       block;
  border:        1px solid var(--jup-color-black);
  border-radius: 6px;
  height:        40px;
  width:         300px;
  padding:       4px;
  margin-bottom: 4px;
}

.userAndPwdChk {
  display:       block;
  border:        1px solid var(--jup-color-black);
  border-radius: 6px;
  height:        40px;
  width:         300px;
  padding:       4px;
  margin-bottom: 4px;
}

.captchaHint {
  font-size: 0.8em;
  color:     var(--jup-font-color-a);
}


/*************************
 *                       *
 *   Formulargestaltung  *
 *                       *
 *************************/

.it-icons {
  font-family:    "it-icons";
  font-style:     normal;
  font-size:      24px; /* Preferred icon size */
  display:        inline-block;
  line-height:    1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap:      normal;
  white-space:    nowrap;
  direction:      ltr;
  color:          var(--jup-icons-color);

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

.it-delete-icons {
  font-family:    "it-icons";
  font-style:     normal;
  display:        inline-block;
  line-height:    1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap:      normal;
  white-space:    nowrap;
  direction:      ltr;
  color:          var(--jup-icons-color);
  font-size:      20px;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

.it-icons.size-14{
  font-size: 14px;
}

.it-icons.size-18 {
  font-size: 18px;
}

.it-icons.size-20 {
  font-size: 20px;
}

.it-icons.size-22 {
  font-size: 22px;
}

.it-icons.size-24 {
  font-size: 24px;
}

.it-icons.size-28 {
  font-size: 28px;
}

.it-icons.size-36 {
  font-size: 36px;
}

.it-icons.size-40 {
  font-size: 40px;
}

.it-icons.size-48 {
  font-size: 48px;
}

.it-icons.size-160 {
  font-size: 160px;
}

.glyphicon-asterisk {
  content:        url(../img/svg/asterisk.svg);
  vertical-align: bottom;
}

.glyphicon-info-sign {
  content:        url(../img/svg/info_outline.svg);
  vertical-align: bottom;
}

.glyphicon-paperclip {
  content:        url(../img/svg/attach_file.svg);
  vertical-align: bottom;
}

.glyphicon-text-background {
  content:        url(../img/svg/autocomplete.svg);
  vertical-align: bottom;
}

.formular {
  padding-top:     20px;
  padding-bottom:  10em;
  width:           90%;
  margin-left:     auto;
  margin-right:    auto;
}

.formularCaption {
  display: inline;
}

.frmButtonsInMenuBar {
  color:           var(--jup-color-white);
  background:      transparent none repeat scroll 0 0;
  border:          0 none;
  box-shadow:      none;
  font-size:       1.3em;
  padding-top:     15px;
  padding-bottom:  0px;
  padding-left:    10px;
  padding-right:   10px;
  text-decoration: none;
  text-shadow:     none;
}

.itspSmallImage {
  max-height:    80px;
  max-width:     100px;
  border-radius: 4px;
}

.pointerImage {
  max-height: 12px;
}

.itspCheckboxImage {
  max-height:     34px;
  max-width:      34px;
  border-radius:  4px;
  vertical-align: text-bottom;
}

.formularTitle {
  margin-top:    20px;
  margin-bottom: 40px;
  margin-left:   auto;
  margin-right:  auto;
}

.formularHeader {
  color:            var(--jup-color-black);
  width:            100%;
  margin-bottom:    40px;
  margin-left:      auto;
  margin-right:     auto;
  /* text-align:       justify; */
  padding-top:      16px;
  padding-bottom:   16px;
  border-radius:    0px;
  border-top:       2px solid var(--jup-color-grey-40);
  border-bottom:    2px solid var(--jup-color-grey-40);
  overflow:         auto;
}

.formularHeader2 {
  color:          var(--jup-color-black);
  width:          100%;
  margin-top:     0px;
  margin-bottom:  0px;
  margin-left:    auto;
  margin-right:   auto;
  padding-top:    0px;
  padding-bottom: 0px;
  white-space:    normal;
}

#injectedFormularHeader {
  padding:          10px;
  outline:          none;
/*  background-color: #f8f8f8;*/
}

.formularHeaderDiv {
  vertical-align: top;
}

.formularHeaderImgDiv {
  margin:         1em;
  vertical-align: top;
  float:          right;
}

.formularBody {
  background-color: var(--jup-body-color);
  border-radius:    6px;
  padding:          20px;
  margin-bottom:    200px;
  margin-left:      auto;
  margin-right:     auto;
  overflow-x:       auto;
}

.internalLink {
  cursor:          pointer;
  color:           var(--jup-font-color-a);
  display:         inline-block;
  text-decoration: underline;
  font-family:     'boldFont';
}

.externalLink {
  cursor:          pointer;
  color:           var(--jup-font-color-a) !important;
  opacity:         1 !important;
  font-family:     'boldFont';
}

.formularTable:not(.getOpenServiceRequestsResultTable) {
  width:        100%;
  table-layout: fixed;
}

.formularTable input[type='text'] {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         100%;
  height:        30px;
  padding:       4px;
  border:        4px solid transparent;
  box-shadow:    0 0 3px var(--jup-color-black);
}

.formularTable input[type='number'] {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         10%;
  height:        30px;
  padding:       4px;
  border:        4px solid transparent;
  box-shadow:    0 0 3px var(--jup-color-black);
}

.formularTable input[type='password'] {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         100%;
  height:        30px;
  padding:       4px;
}

.formularTable input[type='text']:focus {
  outline: none;
  border:  var(--jup-field-border-focus);
}

.formularTable input[type='number']:focus {
  outline: none;
  border:  var(--jup-field-border-focus);
}

.formularTable input[type='checkbox'] {
  appearance:         none;
  -moz-appearance:    none;
  -webkit-appearance: none;
  -o-appearance:      none;
  border:             1px solid var(--jup-color-grey-dark);
  border-radius:      6px;
  width:              30px;
  height:             30px;
  border:             4px solid transparent;
  box-shadow:         0 0 3px var(--jup-color-black);
}

.formularTable input[type='checkbox']:focus {
  outline: none;
  border:  var(--jup-field-border-focus);
}

.formularTable input[type='checkbox']:checked {
  background-image:    url("../img/checked.png");
  background-position: center;
}

.formularTable textarea {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         100%;
  height:        100px;
  min-height:    100px;
  resize:        vertical;
  padding:       4px;
  border:        4px solid transparent;
  box-shadow:    0 0 3px var(--jup-color-black);
}

.formularTable textarea:focus {
  outline: none;
  border:  var(--jup-field-border-focus);
}

.formularTable select {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         100%;
  padding-left:  4px;
  border:        4px solid transparent;
  box-shadow:    0 0 3px var(--jup-color-black);
}

.formularTable select:focus {
  outline: none;
  border:  var(--jup-field-border-focus);
}

.formularTable table tr td :not(.getOpenServiceRequestsResultTable table tr td) {
  padding: 4px;
}

.gridTable td :not(.getOpenServiceRequestsResultTable td) {
  padding: 0px !important;
  margin:  0px !important;
}

.tableWrapper {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  width:         70%;
  min-width:     30%;
  height:        600px;
  min-height:    200px;
  overflow:      auto;
  resize:        both;
}

.formularTable select[multiple] {
  max-height: 280px;
}

.formularTable select:not([multiple]) {
  height:  30px;
}

.formularTable select[size]:not([multiple]) {
  height:     280px;
  min-height: 280px;
}

.formularColumn {
  padding:        6px;
  vertical-align: top;
}

.infoBox {
  border-radius:    6px;
  background-color: var(--jup-formular-color-infobox);
  padding:          10px;
  white-space:      pre-line;
}

.infoBox2 {
  border-radius:    6px;
  background-color: var(--jup-formular-color-infobox2);
  padding:          10px;
  white-space:      pre-line;
}

.captionBox {
  border-radius:    6px;
  background-color: var(--jup-formular-color-captionBox);
  padding:          10px;
  white-space:      pre-line;
}

.footnote {
  font-size:   80%;
  padding:     0px 10px 10px 10px;
  white-space: pre-line;
}

.autocompleteInfo{
  cursor:          pointer;
  text-decoration: underline;
  color:           var(--jup-font-color-a);
  position:        relative;
  top:             -7px;
  left:            -5px;
  font-family:     'boldFont';
}

.formularFooter {
  width: 60%;
}

.formularFooter hr {
  height:        12px;
  border:        0;
  box-shadow:    inset 0 12px 12px -12px var(--jup-color-1);
  border-radius: 6px;
}

.footerButtons {
  border-left:            2px solid #bac2cf;
  border-top:             2px solid #bac2cf;
  border-top-left-radius: 6px;
}

.bundleFormSeparator {
  border:     0px;
  width:      60%;
  height:     0px;
  margin:     20px 0px 20px 0px;

}

.sendButton {
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 20px;
  height:        32px;
  width:         90px;
}

.sendButton:focus {
  outline: none;
}

.formIconInfo {
  cursor: pointer;
  color:  var(--jup-icons-color);
}

.formIconAtt {
  cursor: pointer;
  color:  var(--jup-icons-color);
}

.formIconAutocomplete {
  cursor: default;
  color:  var(--jup-color-green);
}

.formIconRequired {
  cursor: default;
  color: #800000;
}

#btnSend,
#btnInfoOk {
  border:           1px solid var(--jup-button1-bg-color);
  border-radius:    4px;
  color:            var(--jup-button1-color);
  background-color: var(--jup-button1-bg-color);
  height:           34px;
  font-family: 'boldFont';
  padding-left:     4em;
  padding-right:    4em;
}

#btnSend:hover,
#btnInfoOk:hover {
  background-color: var(--jup-button1-bg-color-hover);
  color:            var(--jup-button1-color-hover);
}
#btnSend:focus,
#btnInfoOk:focus {
  background-color: var(--jup-button1-bg-color-focus);
  color:            var(--jup-button1-color-focus);
  text-decoration:  underline;
}

#btnCancelSend,
#btnMakeTemplate {
  border:           1px solid var(--jup-color-black);
  border-radius:    4px;
  color:            var(--jup-button2-color);
  background-color: var(--jup-button2-bg-color);
  height:           34px;
  font-family: 'boldFont';
  padding-left:     4em;
  padding-right:    4em;
}

#btnCancelSend:focus,
#btnMakeTemplate:focus {
  text-decoration: underline;
}

#btnCancelSend:hover,
#btnMakeTemplate:hover {
  background-color: var(--jup-color-hover);
}

#btnSendOnForm,
#btnInfoOkOnForm {
  border:           0px solid;
  color:            #00b000;
  background-color: transparent;
  height:           34px;
  font-family: 'boldFont';
}

#btnCancelSendOnForm {
  border:           0px solid;
  color:            #d00000;
  background-color: transparent;
  height:           34px;
  font-family: 'boldFont';
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin:     0px;
}

::-webkit-scrollbar-thumb {
  background:    #888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#formular ::-webkit-scrollbar {
  width: 10px;
}

#formular ::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin:     3px;
}

#formular ::-webkit-scrollbar-thumb {
  background:    #888;
  border-radius: 6px;
}

#formular ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.justAMomentPlease {
  color:       var(--jup-font-color-important);
  font-family: 'boldFont';
}

.rTable {
  display: table;
  width:   100%;
}

.rTableHeaderRow {
  display: table-row;
}

.rTableRow {
  display: table-row;
}

.rTableRow:hover {
  background-color: var(--jup-color-hover);
  cursor:           pointer;
}

.rTableHeading {
  display:          table-header-group;
  background-color: #ddd;
}

.rTableCell {
  display:     table-cell;
  padding:     3px 10px;
  border:      1px solid #999999;
  white-space: pre-line;
}

.rTableHead {
  display:     table-cell;
  padding:     3px 10px;
  border:      1px solid #999999;
  font-family: 'boldFont';
  white-space: pre-line;
}

.rTableHeading {
  display:          table-header-group;
  background-color: #ddd;
  font-family: 'boldFont';
}

.rTableFoot {
  display:          table-footer-group;
  font-family: 'boldFont';
  background-color: #ddd;
}

.rTableBody {
  display: table-row-group;
}

.btnRefNo {
  border:     none;
  outline:    none;
  background: none;
}

.btnRefNo:focus {
  border:        var(--jup-field-border-focus);
  border-radius: 4px;
}

#frmDropzone {
  background-image:    url(../img/dropzoneInfo.png) !important;
  background-repeat:   no-repeat;
  background-position: center;
}

.dropzone {
  background:     var(--jup-color-grey-20);
  border-radius:  6px;
  border:         2px dashed #bac2cf;
  border-image:   none;
  padding-top:    30px;
  padding-bottom: 30px;
}

.dropzone div {
  display: inline-block;
}

.dz-remove {
  position:    absolute;
  font-family: 'boldFont';
}

.dz-image {
  margin-left: 20px;
}
.dz-image img {
  border-radius: 6px;
}

.starterGridTable {
  border-collapse: collapse;
}

.starterGridCell {
  min-width:      100px;
  min-height:     24px;
  height:         24px;
  border:         1px dashed var(--jup-color-grey-dark);
  vertical-align: top;
  padding:        4px;
}

.gridStaticText {
  border: none !important;
}

.getProcessStateOfServiceRequestProperties {
  background-color: #F8F7F5;
}

.getProcessStateOfServiceRequestPropertyName {
  vertical-align: top;
  font-family: 'boldFont';
  padding:        4px;
  max-width:      160px !important;
  width:          160px !important;
}

.getProcessStateOfServiceRequestPropertyValue {
  vertical-align: top;
  padding:        4px;
  width:          100%;
  background-color: #F8F7F5;
}

#getProcessStateOfServiceRequestServiceDescription {
  display:          inline-block;
  white-space:      pre-line;
  border-radius:    4px;
}

#getProcessStateOfServiceRequestPropertyValueFormularName {
  font-family: 'boldFont';
  color:       #00b000;
}

.getProcessStateOfServiceRequestStatusLineCaption {
  vertical-align: top;
  font-family: 'boldFont';
  padding:        4px;
}

.getProcessStateOfServiceRequestStatusLineState {
  vertical-align: top;
  padding:        4px;
}

.getProcessStateOfServiceRequestActiveState {
  display:     inline-block;
  font-family: 'boldFont';
  color:       var(--jup-color-attention);
}

.getProcessStateOfServiceRequestInactiveState {
  display:     inline-block;
}

.getProcessStateOfServiceRequestDone {
  font-family: 'boldFont';
  color:       var(--jup-color-black);
}

.getProcessStateOfServiceRequestOngoing {
  font-family: 'boldFont';
  color:       var(--jup-color-black);
}

.getProcessStateOfServiceRequestDoneIcon {
  vertical-align: middle;
  padding-right:  20px;
}

.getProcessStateOfServiceRequestOngoingIcon {
  vertical-align: middle;
  padding-right:  20px;
}

.getProcessStateOfServiceRequestStates {
  padding-top: 10px;
}

.getProcessInfosOfServiceRequestCaption {
  vertical-align: top;
  font-family: 'boldFont';
  padding:        4px;
}

.getApprovalData {
  background-color: #F8F7F5;
}

.getApprovalDataPropertyName {
  font-family: 'boldFont';
  vertical-align: top;
  padding:        4px;
}

.getApprovalDataPropertyValue {
  vertical-align:   top;
  max-height:       500px;
  overflow:         auto;
  padding:          4px;
  width:            100%;
  background-color: #F8F7F5;
}

#getApprovalDataActivity{
  display:          inline-block;
  white-space:      pre-line;
  color:            blue;
  border-radius:    4px;
}

#getApprovalDataQuestion {
  display:          inline-block;
  white-space:      pre-line;
  color:            red;
  border-radius:    4px;
}

#getApprovalDataPropertyValueFormularName {
  font-family: 'boldFont';
  color:       #0b5ed7;
}

#getApprovalDataPropertyValueFormData {
  border-radius:    4px;
  padding:          4px;
}

#getApprovalDataPropertyValueAnswer {
  font-family: 'boldFont';
  color:       var(--jup-color-1);
}

#getApprovalDataPropertyValueReason {
  border-radius: 4px;
  border:        1px solid #c8c8c8;
  margin:        0px;
  height:        60px;
  min-height:    40px;
  max-height:    180px;
  width:         100%;
  resize:        vertical;
}

#formularFeedback {
  border-radius: 4px;
  border:        1px solid #c8c8c8;
  margin:        0px;
  height:        180px;
  min-height:    40px;
  max-height:    250px;
  width:         100%;
  resize:        vertical;
}

.feedbackLink{
  display:         inline;
  text-decoration: underline;
  cursor:          pointer;
  color:           var(--jup-color-1);
}

.getApprovalDataAnswers {
  background-color: var(--jup-important-background);
  margin-bottom:    2em;
}

.getApprovalDataAnswersCaption {
  padding:     10px;
  font-family: 'boldFont';
}

.getApprovalDataAnswer {
  cursor:           pointer;
  border:           0px;
  color:            var(--jup-button1-color);
  background-color: var(--jup-button1-bg-color);
  border-radius:    4px;
  outline:          none;
  margin-left:      10px;
  margin-bottom:    2em;
  font-family:      'boldFont';
  padding-left:     4em;
  padding-right:    4em;
  height:           34px;
}

.getApprovalDataAnswer:hover {
  position:         relative;
  background-color: var(--jup-button1-bg-color-hover);
  color:            var(--jup-button1-color-hover);
  border-radius:    4px;
}

.getApprovalDataAnswer:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.getApprovalDataAnswer:focus {
  text-decoration: underline;
}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

#txtOtrsMigrationTodos {
  font-size:   20px;
  font-family: monospace;
  min-height:  500px;
}

#txtFormularRights {
  background-color: #f8f8f8;
}

.tabbed tabContent {
  display:     block;
  margin-left: 0;
  clear:       both;
}

.tabbed > input,
.tabbed tabContent > div {
  display: none;
}

.tabbed tabContent > div {
  width:         100%;
  background:    var(--jup-color-grey-40);
  border:        1px solid #9d9d9d;
  border-radius: 8px;
  margin-bottom: 20px;
}

#tab1:checked ~ tabContent .tab1,
#tab2:checked ~ tabContent .tab2,
#tab3:checked ~ tabContent .tab3,
#tab4:checked ~ tabContent .tab4,
#tab5:checked ~ tabContent .tab5,
#tab6:checked ~ tabContent .tab6,
#tab7:checked ~ tabContent .tab7 {
  display: block;
}

tabNav label {
   float:                   left;
   padding:                 10px 10px;
   border-top:              1px solid silver;
   border-right:            1px solid silver;
   background:              #bfbcbc;
   color:                   #918e8e;
   margin-left:             5px;
   border-top-left-radius:  8px;
   border-top-right-radius: 8px;
}

tabNav label:nth-child(1) { border-left: 1px solid silver; }
tabNav label:active       { background:  var(--jup-color-white); }

#tab1:checked ~ tabNav label[for="tab1"],
#tab2:checked ~ tabNav label[for="tab2"],
#tab3:checked ~ tabNav label[for="tab3"],
#tab4:checked ~ tabNav label[for="tab4"],
#tab5:checked ~ tabNav label[for="tab5"],
#tab6:checked ~ tabNav label[for="tab6"],
#tab7:checked ~ tabNav label[for="tab7"] {
  background:    hsl(210,50%,50%);
  color:         #eee;
  position:      relative;
  border-bottom: none;
}

.searchResultItem {
  cursor:           pointer;
  padding:          10px 10px 10px 0px;;
  background-color: inherit;
  display:          block;
  border-bottom:    1px solid var(--jup-color-grey-80);
  border-top:       0px;
  border-left:      0px;
  border-right:     0px;
  width:            100%;
  text-align:       left;
  border-radius:    0px;
  outline:          none;
}

.searchResultItem:hover {
  background-color: var(--jup-color-hover) !important;
}

.searchResultItem:focus {
  background-color: var(--jup-color-focus) !important;
}

.searchResultsLegend {
  float:     right;
  position:  relative;
  top:       40px;
  height:    0px;
}

.frmLabel {
  box-shadow:       none !important;
  background-color: unset;
  border:           1px solid #808080 !important;
  padding:          4px !important;
}

.chkReadonly {
  box-shadow:       none !important;
  background-color: unset;
  border:           1px solid #808080 !important;
}

.autofillReadonly {
  background-color: inherit !important;
  border:           1px solid var(--jup-color-grey-dark) !important;
  box-shadow:       0 0 3px var(--jup-color-grey-dark) !important;
}

.autofillReadonly:focus {
  outline: var(--jup-color-black) !important;
  border:  1px solid var(--jup-color-grey-dark) !important;
}


/*************************
 *                       *
 *        Dialoge        *
 *                       *
 *************************/

.sysProfileTable {
  border-collapse: collapse;
  margin:     2em;
  margin-bottom:  4em;
}

.sysProfileTableDataParam {
  font-family: 'boldFont';
  vertical-align: top;
  float:          left;
  width:          50%;
}

.sysProfileTableDataValue {
  vertical-align: top;
  width:          50%;
  display:        inline-block;
}

.hrProfile {
  border:        none;
  border-bottom: var(--jup-color-grey-80) 2px solid;
  margin:        5px 0px 5px 0px;
  opacity:       1;
}

#sysProfileTableDataParamOptScreenReader{
  border: 0px !important;
}

#profileOptimizedAccessibility{
  cursor: pointer;
}

.sysProfileTableDataRemark {
  padding-right:  20px;
  padding-bottom: 4px;
  color:          var(--jup-color-grey-dark);
  vertical-align: top;
  border-bottom:  var(--jup-color-grey-80) 2px solid;
  padding:        1em;

}

#confirmSubmitFormData {
  width:       100%;
  overflow:    auto;
  white-space: nowrap;
}

.confirmSubmitFormDataTable {
  border-collapse: collapse;
  width:           100%;
}

.tableProcessInfo {
  border-collapse: collapse;
}

.tableProcessInfoCurrentStep {
  color: var(--jup-color-attention);
}

.tableProcessInfoValue {
  padding-right:  4px;
  padding-top:    4px;
  padding-bottom: 4px;
  padding-left:   1em;
  white-space:    pre-line;
  vertical-align: top;
}

.confirmSubmitFormDataTableRow {
  border-bottom: 1px solid gray;
}

.confirmSubmitFormDataTableDataParam {
  padding-right:  20px;
  padding-top:    4px;
  padding-bottom: 4px;
  font-family:    'boldFont';
  /* max-width:      180px; */
  white-space:    pre-line;
  vertical-align: top;
}

.confirmSubmitFormDataTableDataValue {
  padding-right:  4px;
  padding-top:    4px;
  padding-bottom: 4px;
  white-space:    pre-line;
  vertical-align: top;
}

.dlgButtonsContainer {
  margin-right: auto;
  margin-left:  auto;
  white-space:  nowrap;
  text-align:   center;
}

.dlgButton {
  display:          inline-block !important;
  cursor:           pointer;
  border:           none;
  color:            var(--jup-button1-color);
  background-color: var(--jup-button1-bg-color);
  font-size:        1em;
  border-radius:    4px;
  outline:          none;
  height:           40px;
  min-width:        60px;
  min-height:       40px;
  margin-bottom:    20px;
}

.dlgButton:hover {
  position:         relative;
  background-color: var(--jup-button1-bg-color-hover);
  color:            var(--jup-button1-color-hover);
  border-radius:    4px;
}

.dlgButton:active {
  position: relative;
  top:      2px;
  left:     2px;
  background-color: var(--jup-button1-bg-color-focus);
  color:            var(--jup-button1-color-hover);
}

.dlgButton:focus {
  text-decoration: underline;
  background-color: var(--jup-button1-bg-color-focus);
  color:            var(--jup-button1-color-hover);
}

.dlgButtonSecondary {
  display:          inline-block !important;
  cursor:           pointer;
  border:           2px solid var(--jup-color-black);
  color:            var(--jup-button2-color);
  background-color: var(--jup-button2-bg-color);
  font-size:        1em;
  border-radius:    4px;
  outline:          none;
  height:           40px;
  min-width:        60px;
  min-height:       40px;
  margin-bottom:    20px;
}

.dlgButtonSecondary:hover {
  position:         relative;
  background-color: var(--jup-color-hover);
  border-radius:    4px;
}

.dlgButtonSecondary:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.dlgButtonSecondary:focus {
  text-decoration: underline;
}

#formularDataPrettyPrint {
  padding:          4px;
  display:          inline-block;
  width:            100%;
}

#formularDataPrettyPrintCaption {
  font-family: 'boldFont';
  margin-bottom: 10px;
  font-size:     1.3em;
}

#formularAdditionalInfos {
  padding:          4px;
  display:          inline-block;
  width:            100%;
}

#getApprovalDataPropertyValueInfos {
  padding:          4px;
  border-radius:    4px;
  display:          inline-block;
  width:            100%;
}

#sysMessagesPreview {
  text-align: left;
}

#sysMessagesListRowHeadline {
  padding:     4px;
  font-family: 'boldFont';
}

#sysMessagesListMessage {
  padding:   4px;
}

.stdButton {
  border-radius: 4px;
  outline:       none;
  border:        1px solid var(--jup-color-grey-dark);
  margin:        2px;
  padding:       4px 8px 4px 8px;
}

.stdButton:hover {
  position: relative;
  top:      -1px;
  left:     -1px;
}

.stdButton:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.stdButton:focus {
  text-decoration: underline;
}

.dlgDropDown {
  border-radius: 4px;
  width:         100%;
  height:        40px;
}

.dlgMultiSelect {
  border-radius: 4px;
  width:         100%;
}

.prettyPrintButtons {
  margin:           0.5em;
  color:            var(--jup-color-black);
  border-radius:    4px;
  border:           1px solid var(--jup-color-black);
  background-color: var(--jup-color-white);
  cursor:           pointer;
}

.prettyPrintButtonsAtt {
  margin:           0.5em;
  color:            var(--jup-color-white);
  border-radius:    4px;
  border:           1px solid var(--jup-button1-bg-color);
  background-color: var(--jup-button1-bg-color);
  cursor:           pointer;
}

.prettyPrintButtonsAtt:hover, .prettyPrintButtonsAtt:active {
  background-color: var(--jup-button1-bg-color-hover);
}

.prettyPrintButtonsAtt:focus {
  background-color: var(--jup-button1-bg-color-hover);
  text-decoration:  underline;
}

.prettyPrintButtons:hover {
  position:         relative;
  top:              -1px;
  left:             -1px;
  background-color: var(--jup-color-hover);
}

.prettyPrintButtons:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.prettyPrintButtons:focus {
  text-decoration: underline;
}

.nav-item-top-right:hover,
.nav-item-top-right:focus,
.underlineMenu:focus {
  /*border-bottom: 4px solid var(--jup-color-white);*/
  box-shadow: var(--jup-navbar-color-hover-bg);
}

.oneNews {
  margin-bottom:    20px;
  background-color: var(--jup-formular-color-infobox);
  border-radius:    10px;
  padding:          10px;
}

.suppressThisNews {
  font-size:      0.8em;
  vertical-align: top;
  margin-left:    5px;
}


/*************************
 *                       *
 *        Cards          *
 *                       *
 *************************/

 .welcomeMainDiv {
  width:      90%;
  max-width:  1200px;
  flex-flow:  row wrap;
  margin:     auto;
  margin-top: 20px;
}

.pricing-header {
  max-width: 700px;
}

.card {
  position:           relative;
  display:            -ms-flexbox;
  display:            flex;
  -ms-flex-direction: column;
  flex-direction:     column;
  min-width:          0;
  word-wrap:          break-word;
  background-color:   #fff;
  background-clip:    border-box;
  border:             1px solid var(--jup-color-grey-20);
  border-radius:      .25rem;
  margin:             20px;
}

.card-header {
  padding:          .75rem 1.25rem;
  margin-bottom:    0;
  background-color: rgba(0,0,0,.03);
  border-bottom:    1px solid var(--jup-color-grey-20);
}

.card-body {
  padding: 20px;
}

.card-deck .card {
  min-width: 220px;
  display:   inline-flex;
}

.cardButton {
  cursor:           pointer;
  border:           0px;
  color:            var(--jup-color-white);
  background-color: var(--jup-color-1);
  padding:          17px 0px;
  border-radius:    4px;
  outline:          none;
  margin-top:       20px;
  width:            100%;
}

.cardButton:hover {
  position:         relative;
  background-color: #3077c5;
  border-radius:    4px;
}

.cardButton:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.cardButton:focus {
  text-decoration: underline;
}


/*************************
 *                       *
 *   Buttons per PNGs    *
 *                       *
 *************************/

.pngButton {
  cursor:        pointer;
  border-radius: 4px;
}

.pngButton:hover {
  position:         relative;
  background-color: rgba(128, 0, 0, 0.5);
  border-radius:    4px;
}

.pngButton:focus {
  position:         relative;
  background-color: rgba(128, 0, 0, 0.5);
  border-radius:    4px;
}

.pngButton:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.pngButtonOnForm {
  cursor: pointer;
  border: none !important;
}

.pngButtonOnForm:hover {
  position:      relative;
  top:           -1px;
  left:          -1px;
  border:        1px solid black;
  border-radius: 6px;
}

.pngButtonOnForm:active {
  position: relative;
  top:      2px;
  left:     2px;
}


/*************************
 *                       *
 *      Login modal      *
 *                       *
 *************************/

.modal-big-loginmodal-container {
  left: -590px !important;
}

#taskAndDecisionDetailsBody {
  max-width: 100% !important;
  width:     100% !important;
}

.loginmodal {
  text-align:  center;
  font-family: 'boldFont';
  height:      36px;
  padding:     0 8px;
}

.loginmodal-submit {
  border:           0px;
  color:            var(--jup-color-white);
  background-color: var(--jup-color-1);
  padding:          17px 0px;
  border-radius:    4px;
  outline:          none;
}

.loginmodal-submit:hover {
  position: relative;
  top:      -1px;
  left:     -1px;
}

.loginmodal-submit:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.loginmodal-container a {
  text-decoration: none;
  color:           var(--jup-color-1);
  font-family: 'boldFont';
  text-align:      center;
  opacity:         0.6;
  transition:      opacity ease 0.5s;
}

.login-help {
  font-size: 12px;
}

.modalInfoText {
  background-color: #eae9ec;
  padding:          10px;
  border-radius:    10px;
}


/*************************
 *                       *
 *      Help             *
 *                       *
 *************************/

.helpContainer {
  font-size:    1.2em;
  margin:       auto;
  margin-top:   20px;
  width:        90%;
}

.helpUnit {
  margin-bottom: 60px;
}

.helpUnitCaption {
  font-size:     1.2em;
  font-family:   'boldFont';
  margin-bottom: 10px;
}

.helpUnitContent summary {
  font-family:   'boldFont';
  margin-bottom: 0.5%;
  cursor:        pointer;
  font-size:     1.5em;
}

.helpUnitContent summary:hover {
  background-color: var(--jup-color-hover);
}

.helpUnitContent summary:focus {
  background-color: var(--jup-color-focus);
}

.helpUnitContent li {
  margin-left: 2%;
}

.helpUnitContent a {
  text-decoration: underline;
}

.helpUnitContent details {
  margin-left: 2%;
}

.helpImage {
  padding:       4px;
  margin:        0.5% 0.5% 0.5% 5%;
  border:        2px solid #b0b0b0;
  border-radius: 6px;
  display:       inline-block;
  box-shadow:    5px 5px 5px #b0b0b0;
}

.helpUnitDefinition {
  margin-left:      3%;
  margin-bottom:    1%;
  margin-right:     5%;
  background-color: #f4f4f4;
  padding:          1%;
  padding-right:    5%;
  font-size:        1.5em;
}

.helpUnitDefinition li {
  padding-left: 2%;
}

#mainAppHelp {
  border-radius:    0px !important;
  background-color: var(--jup-color-white) !important;
  background-size:  cover;
  margin-bottom:    0px !important;
  height:           100% !important;
  padding-left:     65px;
  padding-right:    65px;
  overflow:         auto;
  outline:          none;
}


/*************************
 *                       *
 *     Startseite        *
 *                       *
 *************************/

.startText {
  margin-bottom: 1em;
}

.infosText {
  margin-bottom: 1em;
}

.subText, #sysMessagesPreviewExt {
  margin: 0em 2em;
}

.startLink {
  margin-bottom:   1.5em;
  margin-left:     2em;
  color:           var(--jup-font-color-a);
  cursor:          pointer;
  text-decoration: underline;
  font-family:     'boldFont';
}

.startLink:hover {
  color: var(--jup-font-color-a-hover);
}

.startLink:focus {
  color: var(--jup-font-color-a-focus);
}


/*************************
 *                       *
 *          Etc.         *
 *                       *
 *************************/

#tblRevisionDownloadList {
  width: 100%;
}

#tblRevisionDownloadList tr:nth-child(even) {
  background-color: #999999;
}

#tblRevisionDownloadList tr:nth-child(odd) {
  background-color: var(--jup-color-grey-40);
}

#tblRevisionDownloadList tr {
  border-bottom: 1px solid black;
}

#tblRevisionDownloadList tr th {
  padding: 4px;
}

#tblRevisionDownloadList tr td {
  padding: 4px;
}

#tblRevisionDownloadList tr:hover {
  background: rgba(0, 0, 0, .2);
}

.favoriteFormularCaption {
  font-size:      1.2em;
  border-bottom:  var(--jup-color-grey-80) 2px solid;
  padding-bottom: 0.5em;
  font-family:    'boldFont';
}

#favoritesPreviewExt {
  margin: 2em;
}

.favoriteMenuItem {
  width:         100%;
  padding:       6px;
  border-bottom: var(--jup-color-grey-80) 1px solid;
}

.favoriteMenuItem:hover {
  background-color: var(--jup-color-hover) !important;
}

.favoriteMenuItemCaption {
  background-color: transparent !important;
  cursor:           pointer;
  padding:          0.5em 1em;
}

.favoriteMenuItemDelete {
  background-color: transparent !important;
  display:          inherit;
  float:            right;
}

.templateFormularCaption {
  font-size:      1.2em;
  border-bottom:  var(--jup-color-grey-80) 2px solid;
  padding-bottom: 0.5em;
  font-family:    'boldFont';
}

#templatesPreviewExt {
  margin: 2em;
}

.templateMenuItem {
  width:         100%;
  padding:       6px;
  border-bottom: var(--jup-color-grey-80) 1px solid;
}

.templateMenuItem:hover {
  background-color: var(--jup-color-hover) !important;
}

.templateMenuItemCaption {
  background-color: transparent !important;
  cursor:           pointer;
  padding:          0.5em 1em;
}

.templateMenuItemDelete {
  background-color: transparent !important;
  display:          inherit;
  float:            right;
}

.lastFormularsFormularCaption {
  font-size:      1.2em;
  border-bottom:  var(--jup-color-grey-80) 2px solid;
  padding-bottom: 0.5em;
  font-family: 'boldFont';
}

#lastFormularsPreview {
  margin: 2em;
}

.lastFormularsMenuItem {
  width:         100%;
  border-bottom: var(--jup-color-grey-80) 1px solid;
  cursor:        pointer;
  padding:       6px;
}

.lastFormularsMenuItem:hover {
  background-color: var(--jup-color-hover) !important;
}

.lastFormularsItem {
  padding: 0.5em 1em;
}

#successfullySentCaption {
  font-size: 1.5em;
}

#successfullySentMessage {
  font-size: 1.5em;
}

#resultTicketNo {
  font-family: 'boldFont';
  color:       var(--jup-color-green);
  margin-top:  20px;
}

.badSearchResult {
  border-bottom: 1px solid var(--jup-color-grey-dark);
  margin-bottom: 4px;
}

.badSearchResult:hover {
  background-color: rgba(12, 162, 209, 0.3);
}

#startProcessViaServiceRequestErrorMsg {
  color: red;
}

#openAssystApprovals {
  margin-bottom: 20px;
}

#openOtrsApprovals {
  margin-bottom: 20px;
}

#openZnunyApprovals {
  margin-bottom: 20px;
}

#openDefaultApprovals {
  margin-bottom: 20px;
}

.adViewerGroupOuterDiv {
  width:         100%;
  padding:       6px;
  border-bottom: var(--jup-color-grey-80) 1px solid;
}

.adViewerGroupDiv {
  background-color: transparent !important;
  outline:          none;
}

.adViewerCaption {
  font-size:      1.2em;
  border-bottom:  var(--jup-color-grey-80) 2px solid;
  padding-bottom: 0.5em;
  font-family:    'boldFont';
}

#adViewerExt {
  margin: 2em;
}

.duplicatesNeutral {
  font-size: 12pt;
  color:     var(--jup-color-black);
}

.duplicatesYes {
  font-size: 12pt;
  color:     #bb0707;
}

.duplicatesNo {
  font-size: 12pt;
  color:     #00c000;
}

.divProtocol {
  background-color: #f0f0f0;
  border:           1px solid var(--jup-color-grey-dark);
  border-radius:    6px;
  height:           2000px;
  overflow:         auto;
  padding:          10px;
}

.btnEventOnFormularTypeA {

  border:           1px solid var(--jup-color-black);
  border-radius:    4px;
  color:            var(--jup-color-black);
  background-color: var(--bs-gray-500);
  height:           30px;
  font-family:      'boldFont';
  padding-left:     4em;
  padding-right:    4em;
}

.btnEventOnFormularTypeA:hover {
  background-color: var(--bs-gray-400);
  color:            var(--jup-color-black);
}

.btnEventOnFormularTypeA:focus {
  background-color: var(--bs-gray-500);
  color:            var(--jup-color-black);
}


.btnCalculator {
  background-color:   var(--jup-button1-bg-color);
  margin-top:         0.5em;
  margin-bottom:      0.5em;
  color:              var(--jup-button1-color);
  border-radius:      4px;
  border:             none;
  cursor:             pointer;
}

.btnCalculator:hover {
  background-color:  var(--jup-button1-bg-color-hover);
  color:             var(--jup-button1-color-hover);
}
.btnCalculator:focus {
  background-color:  var(--jup-button1-bg-color-hover);
  color:             var(--jup-button1-color-hover);
}

.tblPwdCharsHint,
.tblAliases {
  border-collapse: collapse;
  width:           100%;
}

.tblPwdCharsHint tr,
.tblAliases tr {}

.tblPwdCharsHint tr td {
  padding-right: 8px;
}

.tblAliases tr {
  line-height: 46px;
}

.tblAliases tr:hover {
  background-color: var(--jup-formular-color-infobox);
}

.tblAliases tr td {
  padding-right: 8px;
  line-height:   46px;
}

.tblAliases input[type=checkbox],
.tblAliases select {
  vertical-align: middle;
}

.selCmdbUserManagedMails {
  padding: 0px !important;
}

.microjupSpecs tr td {
  line-height:   26px;
  padding-right: 10px;
}


/******************************
 *                            *
 *          OpenMedia         *
 *                            *
 ******************************/

.omBaseRightsTable {
  min-height:       30px;
  width:            100%;
  background-color: white;
  border:           var(--jup-color-grey-80) 2px solid;
}

.omBaseRightsTableRow {
  border-top: var(--jup-color-grey-80) 1px solid;
}

.omBaseRightsTableCol {
  padding: 6px;
}

.omButton {
  background-color:   var(--jup-button1-bg-color);
  margin-left:        10%;
  margin-top:         1%;
  color:              var(--jup-button1-color);
  border-radius:      4px;
  height:             40px;
  padding-left:       60px;
  padding-right:      60px;
  border:             none;
  cursor:             pointer;
}

.omButton:hover {
  background-color:  var(--jup-button1-bg-color-hover);
  color:             var(--jup-button1-color-hover);
}
.omButton:focus {
  background-color:  var(--jup-button1-bg-color-hover);
  color:             var(--jup-button1-color-hover);
}

.omDialogCaption {
  padding-bottom:  20px;
}

.pngButtonOm {
  cursor:        pointer;
  border-radius: 4px;
  margin:        5px;
}

.pngButtonOm:hover {
  position:         relative;
  background-color: var(--jup-color-hover);
  color:            var(--jup-button1-color-hover);
  border-radius:    4px;
}

.pngButtonOm:focus {
  position:         relative;
  background-color: var(--jup-color-focus);
  color:            var(--jup-button1-color-focus);
  border-radius:    4px;
}

.pngButtonOm:active {
  position: relative;
  top:      2px;
  left:     2px;
}

#openMediaRedRightsUserId {
  font-family: 'boldFont';
}

.adViewerGroupDiv {
  padding: 6px;
}

.rolesTable {
  min-height:       30px;
  width:            100%;
  background-color: white;
  border:           var(--jup-color-grey-80) 2px solid;
}

.rolesTableRowHeader {
  font-family: 'boldFont';
}

.rolesTableColHeader {
  padding: 6px;
}

.rolesTableRow {
  border-top: var(--jup-color-grey-80) 1px solid;
}

.rolesTableRowGreen {
  border-top: var(--jup-color-grey-80) 1px solid;
  color:      #00c000;
}

.rolesTableRowRed {
  border-top: var(--jup-color-grey-80) 1px solid;
  color:      #cc0b0b;
}

.rolesTableCol {
  padding: 6px;
}

.omInfoTxt {
  padding:     1%;
}

.listSize10 {
  height: 186px !important;
}

.omButtonLeft {
  background-color:   var(--jup-button1-bg-color);
  margin-left:        10%;
  color:              var(--jup-button1-color);
  border-radius:      4px;
  height:             40px;
  padding-left:       60px;
  padding-right:      60px;
  border:             none;
  cursor:             pointer;
}

.omButtonLeft:hover {
  position:          relative;
  top:               -1px;
  left:              -1px;
  background-color:  var(--jup-button1-bg-color-hover);
  color:             var(--jup-button1-color-hover);
  border-radius:     4px;
}

.omButtonLeft:focus {
  position:         relative;
  background-color: var(--jup-button1-bg-color-focus);
  color:            var(--jup-button1-color-focus);
  border-radius:    4px;
}

.omButtonLeft:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.omButtonRight {
  float:            right;
  background-color: var(--jup-button1-bg-color);
  margin-right:     10%;
  color:            var(--jup-button1-color);
  border-radius:    4px;
  height:           40px;
  padding-left:     60px;
  padding-right:    60px;
  border:           none;
  cursor:           pointer;
}

.omButtonRight:hover {
  position:         relative;
  background-color: var(--jup-button1-bg-color-hover);
  color:            var(--jup-button1-color-hover);
  border-radius:    4px;
}
.omButtonRight:focus {
  position:         relative;
  background-color: var(--jup-button1-bg-color-focus);
  color:            var(--jup-button1-color-focus);
  border-radius:    4px;
}

.omButtonRight:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.rolesTableCheckedRows {
  min-height:       30px;
  width:            100%;
  background-color: white;
  border:           var(--jup-color-grey-80) 2px solid;
}

.omTableRowRed {
  color:      #cc0b0b;
  border-top: var(--jup-color-grey-80) 1px solid;
}

.omBaseRightsTableRowRed {
  color:      #cc0b0b;
  border-top: var(--jup-color-grey-80) 1px solid;
}

.colorRed {
  color: #cc0b0b;
}

.omTableAdd {
  min-height:       30px;
  width:            100%;
  background-color: white;
  border:           var(--jup-color-grey-80) 2px solid;
}

.omTableRowHeaderAdd {
  font-family: 'boldFont';
}

.omTableColAdd {
  padding: 6px;
}

.omTableRowAdd {
  border-top: var(--jup-color-grey-80) 1px solid;
}

.omTableColHeaderAdd {
  padding: 6px;
}

.omTableRowGreen {
  color:      #00c000;
  border-top: var(--jup-color-grey-80) 1px solid;
}

.omBaseRightsTableRowGreen {
  color:      #00c000;
  border-top: var(--jup-color-grey-80) 1px solid;
}

.colorGreen {
  color: #00c000;
}

.omDeactivated {
  background-color: grey;
}

.neueZeileTabelle {
  color: green;
}

.tblOpenMediaTr:hover {
  background-color: var(--jup-color-hover) !important;
  cursor:           pointer;
}

#tblOpenMediaConfigMain {
  width: 100%;
}

#tblOpenMediaConfigRoles {
  width: 100%;
}

#tblOpenMediaConfigRed {
  width: 100%;
}

.divAdGroupsEdit {
  overflow: auto;
  height:   500px;
}

.tblAdGroupsEdit {
  width: 100%;
}

#openMediaLegende {
  float: right;
}

#lstOpenMediaBeschreibung,
#lstOpenMediaMail,
#lstOpenMediaIni {
  height: 200px;
}


/******************************
 *                            *
 *          DB-Viewer         *
 *                            *
 ******************************/

#dbViewer {
  overflow-x:     auto;
  padding-bottom: 40px;
}

.dbViewerHeaderText {
  margin-bottom: 10px;
}

.dbViewerTxtPage {
  display:       inline-block;
  outline:       none;
  padding:       4px;
  width:         80px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-top:    10px;
  margin-bottom: 10px;
}

.dbViewerTxtDate {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
}

.dbViewerHr {
  border-bottom: 2px solid #cdcece;
}

.dbViewerNumResults {
  font-size: 20px;
}

.dbViewerRowsPerPage {
  width:       50%;
  display:     inline-block;
}

.dbViewerRowsPerPage select {
  width:         100px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  box-shadow:    none;
}

.dbViewerPdfDownload {
  margin-top:  1em;
  width:       50%;
  display:     inline-block;
}

.dbViewerPdfDownloadLink {
  cursor: pointer;
}

.dbViewerPlainHtml {
  width:       50%;
  display:     inline-block;
}

.dbViewerPage {
  width:       50%;
  display:     inline-block;
  text-align:  right;
}

.dbViewerTable {
  border-collapse: collapse;
  width:           100%;
}

.dbViewerTableCaptions {
  font-family: 'boldFont';
  border-bottom:    1px solid var(--jup-color-white);
  background-color: #cdcece;
}

.dbViewerTableCaption {
  padding:        4px;
  vertical-align: top;
  border-left:    1px solid var(--jup-color-white);
  border-right:   1px solid var(--jup-color-white);
}

.dbViewerTableDataRowA {
  background-color: var(--jup-color-grey-20);
}

.dbViewerTableDataRowA:hover {
  background-color: var(--jup-color-hover);
}

.dbViewerTableDataRowB {
  background-color: var(--jup-color-grey-60);
}

.dbViewerTableDataRowB:hover {
  background-color: var(--jup-color-hover);
}

.dbViewerTableData {
  padding:        4px;
  vertical-align: top;
  border-left:    1px solid var(--jup-color-white);
  border-right:   1px solid var(--jup-color-white);
  white-space:    pre;
}

.dbViewerCaption {
  font-family: 'boldFont';
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.dbViewerFilterTable tr td {
  white-space:   nowrap;
  padding-right: 20px;
}

#dbViewerFilter1Column {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter1Value {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter2Column {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter2Value {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter1Op {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter2Op {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

#dbViewerFilter2AndOr {
  height:        32px;
  outline:       none;
  padding:       4px;
  border:        1px solid var(--jup-color-grey-dark);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow:    none;
}

.dbViewerIcon {
  cursor:        pointer;
  vertical-align: sub;
}


/******************************
 *                            *
 *        HW/SW-Viewer        *
 *                            *
 ******************************/

.hwswViewerTable {
  border-collapse: collapse;
  width:           100%;
}

.hwswViewerTableCaptions {
  border-bottom:  var(--jup-color-grey-80) 3px solid;
  padding-bottom: 0.5em;
  font-family: 'boldFont';
}

.hwswViewerTableCaption {
  padding-bottom: 0.5em;
  padding-top:    2em;
}

.hwswViewerTableDataRowA {
  width:         100%;
  padding:       6px;
  border-bottom: var(--jup-color-grey-80) 1px solid;
}

.hwswViewerTableDataRowA:hover {
  background-color: var(--jup-color-hover);
  cursor:           pointer;
}

.hwswViewerTableDataRowB {
  width:         100%;
  padding:       6px 6px 6px 60px;
  border-bottom: var(--jup-color-grey-80) 1px solid;
}

.hwswViewerTableDataRowB:hover {
  background-color: var(--jup-color-hover);
}

.hwswViewerTableDataA {
  padding: 6px;
}

.hwswViewerTableDataB {
  padding: 6px 6px 6px 60px;
}


/*************************
 *                       *
 *        Profil          *
 *                       *
 *************************/

.profileExplanations {
 /* font-size: 1.2em;*/
  margin: 2em;
}


/*************************
 *                       *
 *      Objekt-Info      *
 *                       *
 *************************/

.objectInfoTab {
  cursor:                  pointer;
  color:                   var(--jup-color-black);
  background-color:        grey;
  box-sizing:              border-box;
  padding:                 2px 6px 3px;
  border-width:            0px;
  border-style:            solid;
  border-color:            var(--jup-color-black);
  border-image:            none;
  border-top-left-radius:  4px;
  border-top-right-radius: 4px;
  background-color:        var(--jup-color-grey-80);
  margin-right:            3px;
  margin-top:              3px;
  outline:                 none;
}

#divItspTodayAllRequests {
  margin-top:       20px;
  padding:          10px;
  background-color: var(--jup-color-white);
  border-radius:    4px;
}

#divItspTodayAllApprovals {
  margin-top:       20px;
  padding:          10px;
  background-color: var(--jup-color-white);
  border-radius:    4px;
}

.taskAndDecisionDetailsCaptionClose {
  float:            right;
  margin-bottom:    0.5em;
  cursor:            pointer;

}

.taskAndDecisionDetailsCaptionClose:hover {
  background-color: var(--jup-color-hover);
}

.taskAndDecisionDetailsCaptionClose:focus {
   background-color: var(--jup-color-focus);
}

.iconPositionMitte {
  display:         flex;
  align-items:     center;
  justify-content: center;
}


#divCurrentSupervisor {
  word-break: break-all;
  word-wrap:  break-word;
}


/*************************
 *                       *
 *         CMDB          *
 *                       *
 *************************/

.cmdbBtn {
  cursor:                     pointer;
  border-radius:              4px;
  height:                     30px;
  font-size:                  0.9em;
  font-family:                'boldFont';
  color:                      var(--jup-button1-color);
  background-color:           var(--jup-button1-bg-color);
  border:                     0px;
  border-top-right-radius:    4px;
  border-bottom-right-radius: 4px;
  text-decoration:            none;
  text-shadow:                none;
  outline:                    none;
}

.cmdbBtn:hover {
  position:         relative;
  background-color: rgba(128, 0, 0, 0.5);
  border-radius:    4px;
}
.cmdbBtn:focus {
  position:         relative;
  background-color: var(--jup-button1-bg-color-focus);
  border-radius:    4px;
}

.cmdbBtn:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.cmdbBtnBig {
  cursor:                     pointer;
  border-radius:              4px;
  height:                     40px;
  font-size:                  1.1em;
  color:                      var(--jup-button1-color);
  background-color:           var(--jup-button1-bg-color);
  border:                     0px;
  border-top-right-radius:    4px;
  border-bottom-right-radius: 4px;
  text-decoration:            none;
  text-shadow:                none;
  outline:                    none;
  margin-bottom:              12px;
}

.cmdbBtnBig:hover {
  position:         relative;
  background-color: rgba(128, 0, 0, 0.5);
  border-radius:    4px;
}
.cmdbBtnBig:focus {
  position:         relative;
  background-color: var(--jup-button1-bg-color-focus);
  border-radius:    4px;
}

.cmdbBtnBig:active {
  position: relative;
  top:      2px;
  left:     2px;
}

.cmdbResultListTh {
  padding-right:  4px;
  padding-bottom: 4px;
}

.cmdbResultListTdRow {
  cursor: pointer;
}

.cmdbResultListTdRow:hover {
  background-color: var(--jup-color-white);
  font-family:      'boldFont';
}

.cmdbResultListTd {
  padding-right:  10px;
  padding-bottom: 4px;
}

.cmdbRemoveTab:hover {
  color: red;
}

.cmdbTabFirstLine {
  font-size: 0.9em;
}

.cmdbTabSecondLine {
  font-size: 0.9em;
}

.cmdbCiDetailsTable {
  border-spacing:  10px;
  border-collapse: separate;
}

.cmdbCiDetailsTableTdCaption {
  padding-right: 10px;
}

.cmdbCiDetailsTableTdValue {
  white-space: nowrap;
}

.cmdbCiLinksCaption {
  font-family:   'boldFont';
  border-bottom: 1px solid;
}

.cmdbCiLinksTable {
  width:           100%;
  border-spacing:  10px;
  border-collapse: separate;
  display:         block;
}

.cmdbCiLinksTable tbody {
  width: 100%;
}

.cmdbCiLinksTableRowData:hover {
  background-color: var(--jup-color-grey-80);
  cursor:           pointer;
}

.cmdbCiLinksTableTd {
  vertical-align: top;
}

#cmdbDivResultList {
  height:           300px;
  overflow:         auto;
  background-color: aliceblue;
  padding:          20px;
  border-radius:    4px;
}

.cmdbCiDetailsTableTdValue input {
  width: 500px !important;
}

.cmdbCiDetailsTableTdValue select {
  width: 500px !important;
}

.cmdbCiDetailsTableTdValue textarea {
  width: 500px !important;
}

.cmdbChangedData {
  color:       red;
  font-family: 'boldFont';
}

#searchResultsForSubCis {
  height:           300px;
  overflow:         auto;
  background-color: white;
  padding:          6px;
}

#txtNote {
  width:         100%;
  height:        20em;
  border-radius: 6px;
}

.impressHeader {
  margin-bottom: 15px;
}

#tblOtrsStatsMenu {
  border-collapse: collapse;
}

#tblOtrsStatsMenu tr {
  border-bottom: 1px solid black;
}

#tblOtrsStatsMenu tr td {
  padding:        10px;
  vertical-align: top;
}

#tblOtrsStatsAdminsMenu {
  border-collapse: collapse;
}

#tblOtrsStatsAdminsMenu tr {
  border-bottom: 1px solid black;
}

#tblOtrsStatsAdminsMenu tr td {
  padding:        10px;
  vertical-align: top;
}

#tblCmdbStatsMenu {
  border-collapse: collapse;
}

#tblCmdbStatsMenu tr {
  border-bottom: 1px solid black;
}

#tblCmdbStatsMenu tr td {
  padding:        10px;
  vertical-align: top;
}

#tblWulStatsMenu {
  border-collapse: collapse;
}

#tblWulStatsMenu tr {
  border-bottom: 1px solid black;
}

#tblWulStatsMenu tr td {
  padding:        10px;
  vertical-align: top;
}

.tblAssystStatsMenu {
  border-collapse:  collapse;
  width:            100%;
}

.tblAssystStatsMenu tr {
  border-bottom: 1px solid black;
}

.tblAssystStatsMenu tr td {
  padding:        10px;
  vertical-align: top;
}

.tblAssystStatsMenuTicket {
  border-collapse:  collapse;
  width:            100%;
  background-color: #f1f1f1;
}

.tblAssystStatsMenuTicket tr {
  border-bottom: 1px solid black;
}

.tblAssystStatsMenuTicket tr td {
  padding:        10px;
  vertical-align: top;
}

#tblOtrsDiffMenu {
  border-collapse: collapse;
}

#tblOtrsDiffMenu tr {
  border-bottom: 1px solid black;
}

#tblOtrsDiffMenu tr td {
  padding:        10px;
  vertical-align: top;
}

#tblOtrsDiffTPMenu {
  border-collapse: collapse;
}

#tblOtrsDiffTPMenu tr {
  border-bottom: 1px solid black;
}

#tblOtrsDiffTPMenu tr td {
  padding:        10px;
  vertical-align: top;
}

.statsLineNo {
  font-family:   'boldFont';
  color:         #800000;
  padding-right: 7px;
}

.powTimetablePadding {
  padding:     0 15px 0 0;
  white-space: nowrap;
}

.powTimetableHeader {
  text-align: center;
}

#lstOpenMediaMedien, #lstOpenMediaFunktionen, #lstOpenMediaRollen, #lstOpenMediaAdGruppen {
  height: 100%;
}


/*************************
 *                       *
 *     OTRS - FAQs       *
 *                       *
 *************************/

.otrsFaqSubject {
  background-color: var(--jup-color-white);
  border-radius:    4px;
  padding:          10px;
}

.otrsFaqField {
  background-color: var(--jup-color-white);
  min-height:       200px;
  border-radius:    4px;
  padding:          10px;
}


/*************************
 *                       *
 *         Stats         *
 *                       *
 *************************/



/*************************
 *                       *
 *          Etc.         *
 *                       *
 *************************/

.eventCaption {
  color:       var(--jup-color-black) !important;
  font-family: 'boldFont' !important;
  font-size:   30px !important;
  line-height: 1.4;
}

.eventLink {
  text-decoration: underline !important;
  outline:         none !important;
  color:           var(--jup-color-black) !important;
  font-size:       1.2em;
}

.eventLink:focus {
  text-decoration: underline !important;
  outline:         none !important;
  color:           var(--jup-color-black) !important;
  cursor:          pointer;
  font-size:       1.2em;
}

.eventLink:hover {
  text-decoration: underline !important;
  outline:         none !important;
  color:           var(--jup-color-attention) !important;
  font-size:       1.2em;
}

#selConfirmSaveAsTemplate,
#selConfirmSaveAsTemplateNames,
#txtNameOfNewTemplate {
  border:        1px solid var(--jup-color-grey-80);
  border-radius: 6px;
  width:         100%;
  height:        30px;
  border:        4px solid transparent;
  box-shadow:    0 0 3px var(--jup-color-black);
  margin-bottom: 20px;
  margin-top:    10px;
}

#divConfirmSaveAsTemplateHint {
  color: red;
}

.divJiraTask {
  margin-left:   10px;
  margin-bottom: 10px;
  border:        1px solid var(--jup-color-grey-80);
  border-radius: 6px;
  cursor:        pointer;
}

.divJiraEpic {
  margin-left:      30px;
  margin-bottom:    30px;
  border:           0px;
  background-color: var(--jup-color-grey-60);
}

.jiraStatsSections {
  display:         inline-block;
  cursor:          pointer;
  text-decoration: underline;
}

input#max {
  background-color: var(--jup-color-grey-60) !important;
}

.table {
  --bs-table-bg: var(--jup-color-white);
}

.btnGroupTop, .btnGroupBottom {
  width:         300px;
  margin-bottom: 1em;
  border-radius: 0px;
  border-bottom: 1px solid var(--jup-color-3);
}

.page-link.active, .active > .page-link {
  z-index:          0;
  color:            var(--jup-color-white);
  background-color: var(--jup-color-3);
  border:           none;
}

.page-link {
  color:            var(--jup-color-black);
  border:           none;
  background-color: var(--jup-color-grey-40);
}

.page-link:hover {
  color:            var(--jup-color-black);
  border:           none;
  background-color: var(--jup-color-2);
  text-decoration:  none
}

#tblRequestsList tr {
  cursor: pointer;
}

#tblApprovalsList tr {
  cursor: pointer;
}

.tblPowProcessesControlMatrix {
  border-collapse: collapse;
}

.tblPowProcessesControlMatrix th {
  font-family:    'boldFont';
  vertical-align: bottom;
  width:          120px;
  min-width:      120px;
  max-width:      120px;
  padding:        4px;
  border:         1px solid #E6E2DC;
  font-size:      0.8em;
}

.tblPowProcessesControlMatrix td {
  font-family:    'regularFont';
  width:          120px;
  min-width:      120px;
  max-width:      120px;
  vertical-align: top;
  padding:        4px;
  border:         1px solid #E6E2DC;
  overflow-wrap:  anywhere;
}

.tblPowProcessesControlMatrix td.matrixInput {
  width:     60px;
  min-width: 60px;
  max-width: 60px;
}

.matrixLabel {
  font-size: 0.8em;
}

.powListsDataHealine {
  font-family:    'boldFont';
}

#txtFormularContent {
  white-space: pre;
  resize:      vertical;
  min-height:  400px;
  font-family: 'Courier New', Courier, monospace;
}

#jupStatsWwwCountries30d,
#jupStatsMailCountries30d,
#jupStatsTest {
  background:        url(../img/svg/world.svg);
  background-size:   cover;
  background-repeat: round;
  background-color:  cornflowerblue;
}


/*************************
 *                       *
 *        @media         *
 *                       *
 *************************/

@media only screen and (min-width: 1000px) {
  #loginDiv {
    min-width: 30em;
    top:       10%;
  }

  #auto-menu li.nav-item.dropdown:hover,
  #auto-menu li.nav-item.dropdown:focus,
  #auto-menu li.nav-item.dropdown:active,
  #auto-menu li.nav-item.dropdown:focus-within {
    box-shadow: inset 0 -3px 0 0 var(--jup-color-attention);
  }

  #lblLoginNameAndId {
    padding-left: 5em !important;
  }
}

@media only screen and (max-width: 1000px) {
  .userAndPwdLbl,
  .userAndPwdTxt,
  .userAndPwdSel,
  .userAndPwdChk {
    width: 270px;
  }

  #auto-menu {
    padding-left: 0em;
  }

  .nav-item:hover {
    background:       none;
    background-color: var(--jup-color-3);
  }

  #btnCancelSend,
  #btnMakeTemplate,
  #btnSend,
  #btnInfoOk  {
    padding-left:     1em;
    padding-right:    1em;
  }

  .dlgButtonX {
    margin-left:    0em;
    margin-right:   0em;
    padding-left:   0.3em;
    padding-right:  0.3em;
  }

  .fixed-top {
    position: static;
  }

  .dropend .dropdown-menu[data-bs-popper] {
    margin-left: 1em;
  }

  .itServicePortal {
    font-size: 1.5em;
  }

  .itServicePortalLogin {
    font-size:     1.5em;
    margin-bottom: 20px;
  }

  .swrLogoNavbar, .swrLogoHelp {
    height: 1.5em;
  }
}

@media only screen and (max-width: 780px) {
  .userAndPwdLbl,
  .userAndPwdTxt,
  .userAndPwdSel,
  .userAndPwdChk {
    width: 270px;
  }

  .modal-dialog {
    margin: auto;
  }

  #navbar1parent,
  #navbar2parent,
  #footerLeft,
  .searchResultsLegend {
    display: none;
  }

  #txtFormularSearch2 {
    width: 250px;
  }

  #btnGlobalSearch2 i {
    left:     -10px;
    position: relative;
  }

  .templateMenuItemCaption {
    width: 50%;
  }

  #mainApp,
  #mainAppHelp  {
    padding: 0px;
  }

  #btnCancelSend,
  #btnMakeTemplate,
  #btnSend,
  #btnInfoOk,
  .getApprovalDataAnswer  {
    padding-left:     revert;
    padding-right:    revert;
  }

  #btnMobileLogout,
  #btnMobileHome  {
    display: block;
  }

  #welcome1 {
    display: none;
  }

  #welcome2 {
    display: block;
  }

  #footerRight {
    margin-right: 1em;
  }

  #divSmilingTomato img {
    width: 70%;
  }
}

@media only screen and (max-width: 576px) {
  .userAndPwdLbl,
  .userAndPwdTxt,
  .userAndPwdSel,
  .userAndPwdChk {
    width: 270px;
  }

  .modal-dialog {
    margin: auto;
  }

  #loginDiv {
    box-shadow: none;
  }
}

@media only screen and (max-height: 400px) {
  .userAndPwdLbl,
  .userAndPwdTxt,
  .userAndPwdSel,
  .userAndPwdChk {
    width: 270px;
  }

  .modal-dialog {
    margin: auto;
  }

  #divCenter {
    background-color: #fffffe;
  }
}