/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;  
    src: local('Open Sans Regular'), local('OpenSans-Regular'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */                     
  }
  /* open-sans-italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;  
    src: local('Open Sans Italic'), local('OpenSans-Italic'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-italic.woff2') format('woff2'); /* Super Modern Browsers */                     
  }
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;  
    src: local('Open Sans Bold'), local('OpenSans-Bold'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-700.woff2') format('woff2'); /* Super Modern Browsers */       
  }
  /* open-sans-700italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;  
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-700italic.woff2') format('woff2'); /* Super Modern Browsers */       
  }
  /* open-sans-800 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;  
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-800.woff2') format('woff2'); /* Super Modern Browsers */       
  }
  /* open-sans-800italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;  
    src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),       
         url('/ts/scripts/fonts/open-sans-v17-latin-800italic.woff2') format('woff2'); /* Super Modern Browsers */       
  }
  
  
  /* ================= general ============ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    
    }
  
  html {    
      height : 100%;
      font: normal 100.01% Open Sans, Arial, sans-serif;
  }
  
  body {
      font: normal 100.01% Open Sans, Arial, sans-serif;
      color: #35424b;
      height: 100%;     
  }
  
  .clear {
      clear : both;
  }
  
  div[contenteditable] {
      outline: none;
  }
  
  
  .stepsavecontainer.canSave{display: block; right: 1%;}
  .commentsavecontainer.canSave{display: block; right: -2px;}
  .stepShort .stepcontent .commentsavecontainer.canSave{display: block; right: 5px; bottom: 5px;}
  .stepcomment ul, .stepname ul,
  .stepcomment ol, .stepname ol {list-style-position: outside; padding: 0 0 0 30px;}
  
  
  
  
  
  /* ==== TS EDITOR ===== */
  
  
  
  #ajaxLoadingContainer{
      display: none;
      position: absolute;    
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.25);
  }
  
  #ajaxLoadingImage{  
      position: absolute;        
  }
  
  #loadingScreen{
      display: block;
      position: absolute;
      background: white url("/ts/images/loadingScreen.gif") no-repeat;
      width: 100%;
      height: 100%;
      min-height: 2000px;
      z-index: 99999;
    
  }
  
  #pageContainer{
      background: white;
      width: 100%;
      min-height: 100%;
      position: relative;
      /*transition: 0.5s;*/
  }
  
  #pageContainer.activityLogOpen{
      width: 80%;
  }
  
  #bottomButtons{
      bottom: 25px;
      position: fixed;  
      right: 25px;  
      z-index: 10;
  }
  
  #groupstaskssteps:not(.activityLogOpen) #bottomButtons{
      right: 25px;    
  }
  
  #groupstaskssteps.activityLogOpen #bottomButtons{
      right: 21%;    
  }
  
  .bottomButton{
      display: block;
      cursor: pointer;
      width: 35px;
      height: 35px;       
      float: left;
      margin: 0 5px 0 0;
  }
  
  #goToTopButton{     
      background: url("/ts/images/icon_goToTop.png") no-repeat;
      background-size: 35px;
  }
  
  
  
  
  .tsError{
      margin: 150px auto 0 auto;
      padding: 25px;
      background-color: #DADADA;
      font-size: 18pt;
      color: red;   
      width: 800px;    
      text-align: center;
  }
  
  .tsdialog input{width: 180px;}
  
  .ts-disabled{
      opacity: 0.5;
  }
  

  /* ======================== NEXT GEN tsDialog =================================== */

  #tsDialog, #tsDialog.inactive{display: none;}
  #tsDialog.active{display: block;}

  #tsDialog{
      position: fixed;         
      z-index: 99999;        
  }

  #tsDialogBorder{
    border-top: 3px solid #8b8b8b;  
    border-bottom: 3px solid #8b8b8b;  
    max-height: 80vh;     
    overflow-y: scroll;    
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */   
  }

  #tsDialogBorder::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

  #tsDialogContent{
    padding: 2em;
    background: white;
    border-left: 3px solid #8b8b8b;  
    border-right: 3px solid  #8b8b8b;  
   
  }

  #tsDialog.isCentered{  
    top: 10%;
    width: 100%; 
    padding: 0 1em;   
  }

  .tsDialogButtonPane{
      display: flex;
      justify-content: space-between;
      padding: 2em 2em 0 2em;
  }

  .tsDialogCancelButton{
      margin-left: auto;
  }

  .tsDialogConfirmButton{
      margin-right: auto;
  }

  #tsDialog input[type=text]:not(.datepicker){
      background: transparent;
      border: none;
      border-bottom: 2px solid #8b8b8b;
      min-width: 300px;;
  }
    
  
  @media screen and (max-width: 800px){
    #tsDialog.isCentered{ 
        top: 10%;                
      }
}






  /*==================== TOP MENU BAR =========================================================================*/
  
  .ts-menu{position: absolute; font-size: 8pt;}
  .ts-menu-header{font-style: italic; font-weight: bold; margin: 0 0 2px 2px;}
  
  .ts-topmenu, .ts-menu{
      display: block;        
      list-style: outside none none;
      background: white;
      border: 1px solid #222; 
      z-index: 9999;
  }
  
  .ts-topmenu a, .ts-menu a {
      display: block;
      min-width: 120px;
      padding: 4px 20px 4px 4px;
      text-decoration: none;
      color: #35424b;
  }
  
  .ts-topmenu .ts-hasSubmenu > a, .ts-menu .ts-hasSubmenu > a {    
      background: url("/ts/images/icon_MenuTriangle.png") no-repeat;    
      background-position: 95% .6em;
      background-size: 10px 10px;    
  }
  
  
  
  
  #topmenuContainer {
      width: 100%;
      height: 40px;
      position: fixed;
      z-index: 9995;
      background: white;    
      font-size: 10pt;    
  }
  
  #topmenuContainer a{
      text-decoration: none;
      color: #35424b;
  }
  
  ul#topmenu{
      display: block;        
      list-style: outside none none;
      border: none;
  }
  
  ul#topmenu a{
      min-width: 0;
      padding: 0;
  }
  
  ul#topmenu.ts-topmenu > .ts-hasSubmenu > a{    
      background: white;
  }
  
  
  .ts-submenu .ts-hasSubmenu > a{    
      background: url("/ts/images/icon_MenuTriangle.png") no-repeat;    
      background-position: 95% .6em;
      background-size: 10px 10px;    
  }
  
  ul#topmenu  > li {
      display: block;
      float: left;
      padding: 10px 20px 0 15px;    
      position: relative;
  }
  
  ul#topmenu > li:last-child{
      padding: 10px 23px 0 15px;
  }
  
  
  .ts-topmenu li ul {   
      position: absolute;    
      background: white;
      border: 1px solid #222;  
      list-style: outside none none;    
  }
  
  ul#topmenu li ul li {
      position: relative;    
      
      
      
  }
  
  ul#topmenu li ul li a {
      float: none; 
      display: block;    
      padding: 4px 20px 4px 6px;
      min-width: 100px;
      font-size: 9pt;   
  }
  
  html:lang(jp) ul#topmenu li ul li a{min-width: 120px;}
  
  
  ul#topmenu li ul li ul  {
      max-height: 400px;  
  }
  
  ul#topmenu li ul li ul li ul {
      max-height: 400px;    
      overflow-y : auto;
      overflow-x: hidden;
  }
  
  
  
  ul#topmenu li ul li ul li a { 
      width: 150px;    
  }
  
  
  #topMenuListName {
      float: left;
      border-left: 1px solid black;
      margin: 6px 0 0 0;
      padding: 1px 0 3px 41px;   
      font-size: 13pt;
      font-weight: bold;    
  }
  
  #topMenuListSearch{    
      float: left;
      margin: 6px 0 0 45px;
      padding: 4px 0 3px 0;  
      position: relative;
  }
  #topMenuListSearch input{
      width: 100px;
      padding: 0 20px 0 0;
	  border: 1px solid #CCC;
  }
  
  #topMenuListSearchButton{
      position: absolute;
      right: 0;
      top: 3px;
      background-image: url("/ts/images/icon_search.png");
      background-size: contain;
      background-repeat: no-repeat;
      display: block;
      width: 20px;
      height: 20px;    
  }
  
  span.highlight{background-color: #45B7E7;}
  
  
  .topMenuUserInvite{cursor: pointer;}
  
  #topMenuButtons{
      float: right;
      padding: 5px 0 0 0;
  }
  
  ul#topmenu li.tsHome{padding: 0;}
  ul#topmenu a.tsHome{padding: 4px 20px 11px 15px;}
  
  ul#topmenu a.tsHome img {width: 30px; height: 30px;}
  ul#topmenu a.tsHome .tsLogo{display: block;}
  ul#topmenu a.tsHome .tsLogoHover{display: none;}
  ul#topmenu a.tsHome:hover .tsLogo{display: none;}
  ul#topmenu a.tsHome:hover .tsLogoHover{display: block;}
  
  ul#topmenu li.tsHome:hover {background: none;}
  
  
  #topActivityLog {
      float: right;    
      margin: 0 25px 0 0;
      text-align: right;
      font-size: 8pt;    
  }
  
  #activityLogTrigger, #topListError, #topFavorites {   
      float: right;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: block;  
      margin: 0 5px 0 0;
      position: relative;
      z-index: 9997;
  }
  #topFilterBlinkBg{
      position: absolute;
      z-index: 9998;
      width: 25px;
      height: 25px;
      cursor: pointer;
      display: block; 
      background-image:url("/ts/images/topmenuFilter.png");    
      background-size: contain;
      left: 10px;
      top: 10px;
  }
  #topFilterBlinkie{
      position: absolute;
      z-index: 9999;
      width: 25px;
      height: 25px;
      cursor: pointer;
      display: block; 
      background-image:url("/ts/images/topmenuFilter.png");    
      background-size: contain;
      left: 10px;
      top: 10px;
  }
  
  #topFilter{
      float: right;
      width: 25px;
      height: 25px;
      cursor: pointer;
      display: block;
      margin: -3px 0 0 -7px;
      position: relative;
      z-index: 9997;
  }
  
  #topFavorites {
      background-image:url("/ts/images/icon_favoriteRemove.png");    
      background-size: contain;
  }
  
  #filtermenu{
      padding: 2px;
  }
  
  #filtermenu li, #filtermenu a, #filtermenu span{
      min-width: 85px;
  }
  
  #filtermenu span{    
      display: block;
      padding: 4px 20px 4px 4px;
      color: #35424b;
  }
  
  #filtermenu .divisor{
      display: block;
      height: 1px;
      padding: 10px;
      margin: 0 0 10px 0;
      border-bottom: 1px solid black;
  }
  
  #filtermenu .divisor.divisor-type2{
      padding: 3px;
  }
  
  #filtermenu .topMenuSetStatusFilter{
      float: left;
      min-width: 25%;
      padding: 4px;
      cursor: pointer;
  }
  
  #filtermenu .topMenuSetUserFilter{
      padding: 4px 20px 4px 12px;
  }
  
  #filtermenu li:hover{background-color: white;}
  #filtermenu li.userli:hover {background-color: #8dd3f0; cursor: pointer;}
  
  
  
  #activityLogTrigger.warning {background-image:url("/ts/images/activityLogActive.png");    
      background-size: contain;}
  #activityLogTrigger {background-image:url("/ts/images/activityLogNeutral.png");    
      background-size: contain;}
  
  
  #topFilter.inactive{background-image:url("/ts/images/topmenuFilter.png");    
      background-size: contain;}
  
  
  
  .filterIconBlink{opacity: 0;}
  
  
  #topMenuLoggedInLogout{
      float: right;
      padding: 0 5px 0 0;
      font-size: 8pt;    
  }
  
  
  #topMenuLogout{
      float: right;
      font-weight: bold;
  }
  
  #topmenuMobile{
      display: none;
      position: fixed;
      top: 0;    
      width: 100%;
      background: white;
      z-index: 999;    
      border-bottom: 2px solid #45B7E7; 
      padding: .5em 0;
      
  }
  
  .mobileMenu{
      display: flex;
      padding: 0 1em;
      justify-content: space-between;
      list-style: none;
  }
  
  .mobileMenu a{
      text-decoration: none;
      font-weight: bold;
      color: inherit;
  }
  
  .mobileFilterActiveIcon{
      background: url("/ts/themes/standard/images/topmenuFilterActive.png");
      background-size: contain;
      display: block;
      width: 20px;
      height: 20px;
  }
  
  
  
  
  @media screen and (max-width: 800px){
      #topmenuContainer{
          display: none;
      }
      #topmenuMobile{
          display: block;
      }
  }
  
  
  
  
  
  /* ======================== CONTEXT MENUS ======================= */
  
  
  
  .ts-menu-iconitem {float: left; padding: 0 5px 0 0; }
  .ts-menu-iconitem a {cursor: pointer;}
  .ts-menu-item a {cursor: pointer;}
  .ts-topmenu-item a {cursor: pointer;}
  
  
  .ts-menu li ul , #manageStepsSelectmenu li ul{
      max-height: 400px;    
      overflow-y : auto;
      overflow-x: hidden;
      position: fixed !important;
  }
  .ts-menu li ul li a, #manageStepsSelectmenu li ul li a{ width: 150px;    }
  
  
  
  
  
  .menuIconCopy{background-image: url("/ts/images/icon_copy.png");}
  .menuIconMove{background-image: url("/ts/images/icon_move.png");}
  .menuIconDelete{background-image: url("/ts/images/icon_delete.png");}
  .menuIconReset{background-image: url("/ts/images/icon_reset.png");}
  .menuIconMedia{background-image: url("/ts/images/icon_media.png");}
  .menuIconDeactivate{background-image: url("/ts/images/icon_deactivate.png");}
  .menuIconAssign{background-image: url("/ts/images/icon_assign.png");}
  .menuIconNotify{background-image: url("/ts/images/icon_notify.png");}
  .menuIconSelectDetail{background-image: url("/ts/images/icon_selectDetail.png");}
  .menuIconManage{background-image: url("/ts/images/icon_menu.png");}
  
  
  /*== ACTIVITY LOG == */
  
  #notificationCount{
      color: white;
      font-size: 8pt;
      font-weight: bold;
      display: block;      
      padding: 1px;
      text-align: center;
      width: 18px;       
      border-radius: 33%;
      margin: 0 20px;
  
  }
  
  #activityLogContainer{    
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
  }
  
  #activityLog{float: right; width: 20%; padding: 50px 0 0 0; height: 100%; overflow-y: scroll; overflow-x:hidden;}
  #activityLog{background: #FFFFFF;
             background: linear-gradient(to right, #AFAFAF 0%,#FFFFFF 20%);
             background: -webkit-linear-gradient(to right, #AFAFAF 0%,#FFFFFF 20%);
             background: -moz-linear-gradient(to right, #AFAFAF 0%,#FFFFFF 20%);
  }
  /*#activityLog.open{display: block;}
  #activityLog.closed{display: none;}*/
  /*#notifications.hidden{visibility: hidden;}*/
  #activityLog.hidden{display:none;}
  
  #notification {z-index: 1;}
  #activityNotification{z-index: 10; position: fixed; top: 10%; right: 10%; background: white; display: none;}
  #activityNotificationCLOSE{position: absolute; top: 2px; right: 5px; display: block; cursor: pointer;}
  #activityNotificationCONTENT{padding: 20px 40px 20px 20px;}
  #activityNotificationCONTENT a {text-decoration: none; font-family: Open Sans, Arial, sans-serif; font-weight: bold;}
  #activityNotificationCONTENT .ntime {display: none; }
  #activityLog #activityLogHeadline {display: block; margin: 15px 10px 0 0; padding: 0 5px 25px 20px; font-size: 14pt;}
  #activityLog .timeSeparator{display: block; font-size: 7pt; font-weight: bold; margin: 5px 10px 0 5px; padding: 5px 5px 5px 15px; font-family: Open Sans, Arial, sans-serif; text-transform: uppercase;}
  #activityLog .event{display: block; font-size: 10pt; font-weight: bold; margin: 5px 10px 0 0; padding: 0 5px 25px 20px; text-decoration: none; color: #4f4f4f; font-family: Open Sans, Arial, sans-serif; }
  
  #activityLog .event .ntime{font-weight: normal; font-size: 8pt;}
  #activityLog .event.unread .ntime{color: #00ACE8;}
  
  #markAllAsRead{cursor: pointer; border-top: 2px dotted #145A94; display: block; font-size: 10pt; margin: 20px 10px 0 0; padding: 10px 5px 5px 20px; text-decoration: none; color: #4f4f4f; font-family: Open Sans, Arial, sans-serif; }
  #markAllAsRead.allUnread{color: #145A94;}
  
  
  
  /* =========================== DIALOG WINDOWS ========================== */
  
  .ts-front {z-index: 120;}
  .ts-dialog {background: white; border: 3px solid #8b8b8b; padding: 10px; position: fixed;}
  
  .ts-dialog input[type=text]:not(.datepicker) {
      margin-top: 10px;
      background: transparent;
      border: none;
      border-bottom: 2px solid #8b8b8b;
      min-width: 250px;
      min-width: 100%;;
  }
  
  .ts-dialog input[type=checkbox]{
      float: left;
  }
  
  .tsDialogCheckboxLabel{
      font-size: 8pt;
      float: left;
      margin: 0 0 0 3px;
  }
  
  .requestPermissionsForm{font-size: 9pt; margin: 20px 0 20px 0;}
  
  .tsDialogSubline{font-size: 8pt; margin: 5px 0 10px 0;}
  
  .tsDialogWarning{margin: 0 0 0 40%;}
  .tsDialogWarningHeadline{font-size: 12pt;}
  
  .ts-button {
      -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
      -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
      box-shadow:inset 0px 1px 0px 0px #ffffff;
      background-color:#f9f9f9;
      /*-moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius:6px;*/
      border:1px solid #dcdcdc;
      display:inline-block;
      cursor:pointer;
      color:#666666;	
          font: normal 100.01% Open Sans, Arial, sans-serif;
          font-size: 8pt;
      padding:3px 12px;
      text-decoration:none;
      text-shadow:0px 1px 0px #ffffff;               
  }
  .ts-button:hover {
      background-color:#e9e9e9;
  }
  .ts-button:active {
      position:relative;
      top:1px;
  }
  .ts-buttontype-cancel {
      float: right;
      margin-right: 2px;    
  }
  
  .ts-buttontype-delete,  .ts-buttontype-mail{
      margin: 0 0 0 10px;   
  }
  
  button.createPreview{margin: 20px 0;}
  
  
  /*new*/
  #mediaUploads{padding: 100px 20px 150px 50px;}
  #allMediaDialog .shadow {background: #FBFBFB; height: 36px; width: 99%; position: absolute; box-shadow: 1px -15px 35px -10px #A4A4A4; left: 0;}
  #allMediaDialog .allMediaTile{margin: 30px 50px 0 20px; font-size: 8pt; 
               word-wrap: break-word;  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
               display: inline-block; 
               width: 200px;
  }
  #allMediaDialog .tsDialogHeadline{float: left; margin: 5px 0 0 20px;}
  #allMediaDialog .listSpace{margin: 0 0 0 10px; font-style: italic;}
  #allMediaDialog .allMediaPath {text-transform: uppercase; font-style: italic; font-size: 7pt;}
  #allMediaDialog .allMediaFilePreview.image{border: 3px solid #909090; padding: 2px; width: 200px; height: 200px; margin: 5px 0 0 0; cursor: pointer;}
  #allMediaDialog .allMediaFilePreview.image:hover{border: 3px solid #45B7E7;}
  #allMediaDialog .allMediaFilePreview.image.selected{border: 3px solid #45B7E7; opacity: 0.25;}
  #allMediaDialog .allMediaSortButtons{float: right; font-size: 8pt; margin: 5px 50px 0 0;}
  #allMediaDialog .allMediaPath a {height: 22px; overflow: hidden; text-decoration: none;}
  #allMediaDialog .allMediaStep {display: block; height: 46px; overflow: hidden; font-weight: bold;}
  #allMediaDialog .allMediaFile {display: block; min-height: 34px; max-height: 32px;}
  
  #allMediaDialog .allMediaButtons {display: flex; justify-content: space-between;}
  #allMediaDialog .allMediaButtons .ts-button{text-transform: uppercase; text-align: center;}

  
  #allMediaFooter {position: fixed; bottom:0; width: 100%; height: 25px; background: white; box-shadow: 1px -15px 35px -10px #A4A4A4;
                  padding: 20px 50px 20px 50px;}
  
  
  .ts-buttontype-createAllPreviews{float: left;}
  .ts-buttontype-deleteSelected{float: left; margin: 0 0 0 25px;}
  .ts-buttontype-backToList{float: right; margin: 0 100px 0 0;}
  
  
  
  table.setAF{font-size: 8pt; vertical-align: bottom;}
  table.setAF td {min-width: 70px; vertical-align: bottom;}
  table.setAF input{width: 200px; min-width: 200px !important;}
  
  #manageStepsCheckOptions img{float: left; height: 15px; width: 15px; margin: -2px 9px 0 3px;}
  
  .formLabel{margin: 30px 0 0 0; position: relative;}
  .formLabel.chooseTileLabel {margin: 40px 0 0 0;}
  
  select.tsDashTile{width: 250px; height: 30px; line-height: 30px; background: #F8F8F8; border: 1px solid #BABABA; border-radius: 5px 5px;}
  .tsListDesc {
              width: 100%; 
              min-height: 120px;             
              background: url('/ts/images/background_lines.png') repeat-y;                        
              line-height: 30px;
              padding: 0 2px;
              
  }
  input.tsListPrivate{margin: 5px 0 0 0;}
  .tsListPrivateLabel span{margin: 0 0 0 7px;}
  
  
  .newListDialogTable {width: 650px;}
  .newListDialogTable tr td {padding: 0 0 0 10px; vertical-align: top;}
  .flexWrapper{display: flex;}
  .flexLeft{margin-right: 5em;}
  
  .tsDialogTable{border-spacing: 10px;}
  .tsDialogTable tr td {vertical-align: top;}
  .tagWrapperWrapper{text-align: center; }
  .tagWrapper{padding: 1px 30px 1px 5px; margin: 0 auto; background: white; position: relative; display: inline-block; cursor: pointer; color: #35424b; text-decoration: none;}
  .tagWrapper{border: 1px solid #45B7E7;}
  .tagWrapper.display{padding: 1px 5px 1px 5px; margin: 0 5px 0 0;}
  .tagWrapper.display{color: #45B7E7;}
  .tagWrapper .inMenu{color: #45B7E7;}
  .selectedTags{height: 100px; width: 250px;}
  .selectedTags .tagWrapper{margin: 2px 0 0 5px;}
  .tsListTags{border-bottom: 2px solid #8b8b8b; width: 250px; height: 20px; margin: 5px 0 0 0; position: relative;}
  .deleteTag{height:20px; width: 20px; margin: 0 5px 0 5px; position: absolute; top: 2px; cursor: pointer;}
  td.alignTop{vertical-align: top;}
  .suggestedTags{background: white;  display: block; border: 1px solid #00ACE8; list-style: none; position: absolute; top: 60px; left: 5px; z-index: 200;}
  .suggestedTag{background: white; padding: 2px; }
  .suggestedTag:hover{background: #00ACE8; color: white; display: block; cursor: pointer; }
  #newListDialog .tsDialogHeadline, #copyListDialog .tsDialogHeadline{font-size: 20px; margin: 5px 0 0 10px;}
  
  
  @media screen and (max-width: 800px){
      .flexLeft{margin-right: 0;}    
      .flexWrapper{flex-direction: column;}
      .selectedTags{height: 30px;}
      .ts-dialog{max-width: 375px;}
      .tsListDesc{min-height: 60px;}
      .tsListPrivateLabel{margin: 30px 0;}
  }
  
  
  /*==================== GROUPS, TASKS CONTAINER ================================================================*/
  
  #tsWorkGrid{
      grid-template-columns: 20px 300px 60px 1fr;
      display: grid;
      padding-top: 20px;
      min-height: 100vh;
  }
  
  
  
  #groupstaskssteps{min-height: 100%; z-index: 1; position: relative; width: 100%; /*transition: 0.5s;*/}
  #groupstaskssteps.activityLogOpen{width: 80%;}
  #groupstaskssteps:not(.activityLogOpen){width: 100%;}
  #tsBranding{display: block; width: 170px; height: 70px; margin: 0 0 30px 40px;}
  
  
  #toMetaContainer{
      position: fixed;   
      width: 20px;
      height: 99%;
      top: 35px;
      left: 0;    
  }
  
  #toMetaContainer #toMetaClickArea { 
      position: absolute;
      width: 20px;
      top: 40%;
      height: 86px;
      left: 0;    
      display: none; 
      background: url("/ts/images/icon_goLeft.png") ;
      background-size: 17px;
      background-repeat: repeat-y;
      background-position-x: center;
      cursor: pointer;
  }
  #toMetaContainer:hover{background: #45B7E7;}
  #toMetaContainer:hover #toMetaClickArea {display: block;}
  
  #toMetaContainer #toMetaClickArea #toMetaMockup{
      display: none;
      position: absolute;
      top: 44px;
      left: 25px;
      width: 100px;
      height: 54px;  
      background: url("/ts/images/mockup_ListInfo.png");    
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 1;
  }
  
  
  #toMetaContainer #toMetaClickArea:hover #toMetaMockup{
      display: block;    
  }
  
  
  #groupstasks{  
     /* position: fixed;    
      width: 298px;
      height: 99%;
      top: 35px;
      left: 20px;
      overflow: hidden;  
      z-index: -1;*/
      position: relative;
      grid-column: 2;
  }
  
  #groupstaskscontent{    
      position: absolute;    
      /*width: 298px;*/
      width: 95%;
      height: 100%;
      top: 0;
      left: 5px;
      padding-right: 15px;
      overflow: scroll;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* IE 10+ */
  }
  
  #groupstaskscontent::-webkit-scrollbar {
      width: 0px;
      background: transparent; /* Chrome/Safari/Webkit */
  }
  
  
  #groupstasks a{
      color: #35424b;
      text-decoration: none;    
      padding: 2px 2px 2px 2px;
  }
  
  
  #groupstasks a:visited{
      color: #35424b;
  }
  
  
  @media screen and (max-width: 800px){
      #tsWorkGrid{
          grid-template-columns: 10px 1fr 10px;
      }
      #groupstaskscontent{
          position: static;
      }
  }
  
  /*==================== GROUPS =========================================================================*/
  
  .group{position: relative; padding: 0 0 20px 0; margin: 0 0 10px 0;}
  
  .groupname{       
      font-size: 11pt;
      font-weight: bold;
      float: left;
      width: 172px;
      margin: 0 0 0 20px;
      position: relative;
  }
  
  .groupname a{
      display: block;
  }
  
  /*.groupstatus{position: relative; float: left; margin: 0 0 0 0; display: block; width: 35px; height: 35px;}*/
  .groupstatus{position: absolute; right: 0; margin: 0 0 0 0; display: block; width: 35px; height: 35px;}
  .groupstatus:hover{cursor: pointer;}
  
  .groupeditmenu{
      /*margin: 10px 0 0 20px;*/
      /*width: 230px;*/
      font-size: 7pt;
      font-weight: normal;
      visibility: hidden;
      position: absolute;    
      top: -15px;
     /* right: -10px;*/
     right: -8px;
      z-index: 3;
  }
  
  .groupaddbutton {background: url("/ts/images/icon_add.png") no-repeat;}
  .groupeditbutton {background: url("/ts/images/icon_edit.png") no-repeat;}
  .groupmenubutton {background: url("/ts/images/icon_menu.png") no-repeat;}
  .groupaddbutton:hover {background: url("/ts/images/icon_add_hover.png") no-repeat;}
  .groupeditbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat;}
  .groupmenubutton:hover {background: url("/ts/images/icon_menu_hover.png") no-repeat;}
  .groupaddbutton, .groupeditbutton, .groupmenubutton,  .groupaddbutton:hover, .groupeditbutton:hover, .groupmenubutton:hover {display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 0 0 5px;}
  
  
  .groupdropdown{display: block; width: 10px; height: 10px; position: absolute; left:-20px; top: 2px; font-size: 14pt;}
  .groupdropdown:hover{cursor: pointer;}
  .grouphover:hover .groupeditmenu{visibility: visible;}
  .groupeditmenu button{float: right;}
  .groupdragdrop{height: 30px;}
  .grouphover{background: white; border: 1px solid #45B7E7;}
  
  #scrollspacer{display: block; height: 250px;}
  .gtSpacer{display: block; height: 250px;}
  
  
  @media screen and (max-width: 800px){
      .groupaddbutton, .groupeditbutton, .groupmenubutton,  .groupaddbutton:hover, .groupeditbutton:hover, .groupmenubutton:hover {display: none;}
      .gtSpacer{display: none;}
  }
  
  
  /*==================== TASKS =========================================================================*/
  
  .tasks{position: relative;}
  .tasks.hiddenTask{display:none;}
  .tasksLineStart{position: absolute; display: block; width: 6px; height: 6px; top: -2px; left: 18px; z-index: 2;}
  .tasksLineEnd{position: absolute; display: block; width: 6px; height: 6px; bottom: -2px; left: 18px; z-index: 2;}
  
  .edittaskoverlay {
      background: linear-gradient(to right, silver, LightSalmon);
      margin: -40px 0 0 -5px;
      min-width: 220px;
      position: absolute;    
      display: none;  
      border: 1px solid grey;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      min-height: 45px;    
      z-index: -1;    
  }
  
  .taskeditmenu{    
      display: none;       
      font-size: 7pt;
      font-weight: normal;
      position: absolute;    
      z-index: 3;        
      right: -10px;
      top: -10px;
  }
  
  .taskaddbutton {background: url("/ts/images/icon_add.png") no-repeat;}
  .taskeditbutton {background: url("/ts/images/icon_edit.png") no-repeat;}
  .taskmenubutton {background: url("/ts/images/icon_menu.png") no-repeat;}
  .taskaddbutton:hover {background: url("/ts/images/icon_add_hover.png") no-repeat;}
  .taskeditbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat;}
  .taskmenubutton:hover {background: url("/ts/images/icon_menu_hover.png") no-repeat;}
  .taskaddbutton, .taskeditbutton, .taskmenubutton, .taskaddbutton:hover, .taskeditbutton:hover, .taskmenubutton:hover {display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 0 0 5px;}
  
  .taskname:hover .edittaskoverlay{
     display: block;
  }
  
  .taskname:hover .taskeditmenu{
    display: block;  
  }
  
  .taskname:hover {
      z-index: 2;        
  }
  
  
  .taskname{
      margin : 0 0 0 30px;
      font-size: 10pt;    
      float: left;    
      /*width: 160px;        */
      width: 215px;
      position: relative;    
      border: 2px solid transparent;
  }
  
  /*.taskstatus{position: relative; display: block; float: left; margin: 5px 0 0 12px; width: 20px; height: 20px;}*/
  .taskstatus{position: absolute; display: block; margin: 5px 0 0 12px; width: 20px; height: 20px; right: 2px;}
  .taskstatus:hover{cursor:pointer;}
  .taskname a{display: block;}    
  
  
  .task.ui-state-disabled .taskstatus img {
        visibility: hidden;
  }
  
  
  .statusSummaryDialog {font-size: 10pt}
  .statusSummaryDialog a {display: block; margin: 0 0 20px 0; text-decoration: none; color: inherit;}
  .statusSummaryDialog table {margin: 10px 0 10px 0;}
  .statusSummaryDialog table tr td {font-weight: bold; text-align: center; cursor: pointer;}
  .statusSummaryDialog table tr td.statusSummaryUsername {min-width: 90px; text-align: left;}
  .statusSummaryDialog table tr td.statusSummarySymbol{min-width: 60px; }
  .statusSummaryDialog table tr td.completionRate{text-align: right;}
  .statusSummaryDialog table tr td img {width: 15px; height: 15px;}
  
  
  .ignoreHiddenGroupsForListSummary{margin: 5px 0 5px 0;}
  .ignoreHiddenGroupsForListSummary.nothingHidden{display : none;}
  #currentFilterDialog {font-size: 8pt}
  
  
  @media screen and (max-width: 800px){
  
      .taskname:hover .edittaskoverlay{
          display: none;
      }
      
      .taskname:hover .taskeditmenu{
          display: none;  
      }
  
  }
  
  /*=================================== STEPS ================================================*/
  
  #steps{    
      /*position: relative;
      /*left: 310px;
      top: 40px;*/
      /*margin-left: 310px;*/
      /*margin-left: 360px;
      padding-top: 40px;
      z-index: 1;*/
      grid-column: 4;;
  }
  
  
  .stepPath{font-size: 8pt; font-style:italic; text-transform: uppercase; margin: 2px 0 0 0; }
  .pathList{font-size: 20pt;}
  .pathGroup{font-size: 16pt;}
  .pathTask{font-size: 12pt; min-width: 45px;}
  
  .taskheaderlist{
      display: none;   
  }
  
  /*.taskheaderelement {position: relative;}*/
  /*.taskheaderelement:first-child{padding: 5px 20px 5px 0px; margin: 5px 20px 5px 0;}*/
  /*.taskheaderborder {position: absolute; width: 1px; height: 25px; right: 0; display: block; background: #838383; top: 16px;}*/
  /*.stepTaskPath{position: absolute; top: -19px;}*/
  
  #taskheader{
      border-bottom: 1px solid #838383; 
      margin: 40px 0 40px 0;
      display: grid;
      grid-template-columns: minmax(min-content, 15%) minmax(min-content,30%) 1fr 1fr;   
     
  }
  
  .taskheaderList{grid-column: 1; grid-row: 1; display: none;}
  .taskheaderListName{grid-column: 1; grid-row: 1; margin-bottom: 20px; display: none;}
  
  .taskheaderGroup{grid-column: 1; grid-row: 1; }
  .taskheaderGroupName{grid-column: 1; grid-row: 2;}
  
  .taskheaderTask{grid-column: 2; grid-row: 1;}
  .taskheaderTaskName{grid-column: 2; grid-row: 2;}
  
  .viewNavButtons{grid-column: 3; grid-row: 1 / 3; align-self: center}
  
  .taskheaderGroup, .taskheaderTask{min-width: 50px; align-self: end; margin-top: 5px;}
  .taskheaderGroupName, .taskheaderTaskName{align-self: baseline; margin-bottom: 5px; }
  .taskheaderTask, .taskheaderTaskName{padding: 0 10px;}
  .taskheaderGroup, .taskheaderGroupName{padding: 0 10px 0 0; border-right: 1px solid black;}
  
  
  
  
  
  #noStepsFound{font-size: 12pt; margin: 50px 0 0 0; display: none;}
  #noStepsFound.badFilter{display: block;}
  
  .step {
      /*display: table;
      table-layout: fixed;  */
      border-collapse:separate;    
      font-size: 10pt;    
      margin: 10px 0 0 -10px;    
      padding: 30px 10px 30px 10px;
      position: relative;  
      display: grid;
      grid-template-columns: 30% 2% 1fr 1% 5%;
      position: relative;
  }
  
  .stepnamecontainer{
      grid-column: 1;
  }
  
  .stepcommentcontainer{
      grid-column: 3;
  }
  
  .stepstatus{
      grid-column: 5;
  }
  
  
  /*.stepheader, */
  /*.stepcontent { display: table-cell; }*/
  /*.row {display : table-row;}*/
  
  .stepheader, .stepcommentheader {font-style: italic; font-size: 8pt;}
  .stepcommentheader.syscomment .icon_isSys {width: 20px; height: 20px; float: left; margin: -2px 5px 0 0;}
  .deletecomment{float: right; display: none; cursor: pointer; text-transform: uppercase;}
  .stepcomment:hover .deletecomment{display: block;}
  .deletecomment:hover{text-decoration: underline;}
  .stepheader { padding: 5px 0 0 10px;}
  .showcomments, .hidecomments{text-align: center; cursor: pointer;}
  .showcomments:hover, .hidecomments:hover{text-decoration: underline;}
  .oldcomment{display: none;}
  .hidecomments{display: none;}
  .editedComment{font-size: 6pt;}
  
  .stepcommentcontainer, .stepnamecontainer, .stepusercontainer { border: 1px solid #35424b;}
  .stepdatecontainer {border-top: 1px solid #35424b; border-left: 1px solid #35424b; border-right:  1px solid #35424b;}
  /*.stepusercontainer {border-bottom: 1px solid #35424b; border-left: 1px solid #35424b; border-right:  1px solid #35424b;}*/
  .stepnamecontainer { position: relative; /*width: 205px;*/}
  .stepcommentcontainer{ position: relative; /*width: 370px; margin: 0 0 0 20px;*/}
  .stepstatus { 
      height: 100%; 
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
  }
  .stepnamecontainer, .stepcommentcontainer { background: white;  min-height: 30px;}
  .stepdatecontainer{background: #444; color: white; font-weight: bold; font-size: 9pt; position: absolute; top: -20px; left: 12px;}
  .stepdate{padding: 2px 0 0 3px;}
  .stepusercontainer{background: white; position: absolute; bottom: -20px; left: 6px;}
  .stepuser{font-size: 9pt; margin: 2px 0 0 0; padding: 0 3px 0 3px; display: block;}
  .stepuser:hover{cursor: pointer;}
  .spacer20{width: 20px;}
  .spacer10{width: 10px;}
  .stepusercontainer { min-width: 150px; max-width: 200px; height: 20px;} 
  #stepusermenu .setStepUser { min-width: 150px; max-width: 200px; height: 20px} 
  .stepdate { width: 150px; height: 18px}
  .showstepdate {color: white;}
  #ui-datepicker-div{z-index: 99999 !important;}
  .stepname{ padding: 5px 5px 10px 10px; /*display: inline-block; */word-wrap: break-word;  min-height: 15px;  -webkit-hyphens: auto;   -moz-hyphens: auto;    hyphens: auto;}
  /*.stepname{width: 190px; }*/
  .stepcomment{position: relative; padding: 5px 0 5px 0; margin: 0 0 0 10px; /*width: 350px;*/}
  .stepcomment:last-child{border-bottom: 0 none; }
  .stepcommentname{/*width: 340px;*/ min-height: 15px;/*display: inline-block;*/ word-wrap: break-word;   min-height: 15px;  -webkit-hyphens: auto;   -moz-hyphens: auto;    hyphens: auto;}
  .stepstatus img {height: 35px; width: 35px; cursor: pointer;}
  .stepstatussymbol{display: block; height: 35px; width: 35px; margin: auto auto 0 auto;}
  .stepstatussymbol.deactivated{background-image: url("images/deactivated.png");}
  .stepmedia{position: absolute; right: -7px; top: -7px; z-index: 9;}
  .stepstatuseditable{cursor: pointer;}
  .stepaf  {display: block; width: 35px; height: 35px; margin: 10px auto auto auto;}
  .stepaf.none{background: none; width: 0px; height: 0px;}
  .mediabutton{display: block; width: 30px; height: 60px; cursor: pointer; }
  
  .listStatusSummary{position: absolute; right: 70px; top: 50px; display: block; width: 30px; height: 30px; cursor: pointer; }
  .step, .step .row, .stepname, .stepcommentname, .stepcommentcontainer, .stepcomment {word-break: normal; word-wrap: break-word; overflow-wrap: break-word; }
  
  
  form.hiddenform{
      display: none;
  }
  
  .removeStepdate {
      visibility: hidden;
      position: absolute;
      right: 5px;
      cursor: pointer;
  }
  
  .removeStepdate img{height: 15px; width: 15px;}
  
  
  
  .stepeditmenu{        
      font-size: 7pt;
      font-weight: normal;
      visibility: hidden;
      position: absolute;    
      top: -10px;
      right: -20px;
      z-index: 3;
  }
  
  .stepaddbutton {background: url("/ts/images/icon_add.png") no-repeat;}
  .stepmenubutton {background: url("/ts/images/icon_menu.png") no-repeat;}
  .stepaddbutton:hover {background: url("/ts/images/icon_add_hover.png") no-repeat;}
  .stepmenubutton:hover {background: url("/ts/images/icon_menu_hover.png") no-repeat;}
  .stepfavbutton {background: url("/ts/images/icon_favoriteAdd.png") no-repeat;}
  
  .stepaddbutton, .stepmenubutton, .stepfavbutton, 
  .stepaddbutton:hover, .stepmenubutton:hover, stepfavbutton:hover {
      display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 10px 0 0;
  }
  .stepsavecontainer, .commentsavecontainer, .addcommentcontainer {    
      position: absolute;   
      display: none;    
  }
  
  .stepsavecontainer, .commentsavecontainer{
      z-index: 4;
  }
  
  .addcommentcontainer{bottom: -25px; right: 0; z-index: 2; top: auto;}
  .addcommentcontainer.moveToTop{bottom: auto; top: -35px;}
  .stepShort .addcommentcontainer.moveToTop{top: -30px;}
  
  
  .step:hover .stepeditmenu{  visibility: visible; }
  .step:hover .addcommentcontainer{display: block;}
  .currentStep{transition: 0.75s;}
  
  #stepmenu a.ui-state-disabled {  text-decoration : none; }
  /*.step.ui-state-disabled .stepstatus a { visibility: hidden; }
  .step.ui-state-disabled .stepstatusdetail { visibility: hidden; }
  */
  
  #uploadMediaFileIEHackLabel{cursor: pointer;}
  
  #stepMediaUploadForm{float: left;}
  #stepMediaDialog .tsDialogHeadline{margin-bottom: 20px;}
  .currentMediaFile{min-height: 60px; height: 90%;}
  /*.currentMediaFile.image{height: 510px; overflow: hidden; } /*old 385*/
  .currentMediaFilePreview {min-height: 150px;}
  .currentMediaFilePreview button.createPreview{margin: 60px 0 0 30px;}
  /*.currentMediaFilePreview.image {width: 200px; height: 150px;}
  .currentMediaFileHugePreview.image {width: 100%; height: 500px; cursor: pointer; cursor: -webkit-zoom-in;} /*old 385*/
  /*.currentMediaFileHugePreviewZoomContainer {height: 510px; overflow: scroll; position: relative;} /*old 350*/
  /*.currentMediaFileHugePreviewZoom.image {width: 200%; height: 750px; display: none; cursor: pointer; position: absolute; left: 0; top: 0;}*/
  
  .currentMediaFilePreview.image {width: 200px; height: 150px;}
  .currentMediaFileHugePreview.image {width: 100%; height: 85%; cursor: pointer; cursor: -webkit-zoom-in;} /*old 385*/
  .currentMediaFileHugePreviewZoomContainer {height: 100%; overflow: scroll; position: relative; visibility: hidden; /*display: none;*/} /*old 350*/
  .currentMediaFileHugePreviewZoom.image {width: 200%; height: 170%; display: none; cursor: pointer; position: absolute; left: 0; top: 0;}
  
  
  .currentMediaFileInfo{font-size: 8pt; margin: 5px 0 10px 0;}
  #closeStepMediaDialog{float: right;}
  #removeStepMedia, #stepMediaReplaceButton {margin: 0 0 0 20px;}
  
  #progress, #progressProcessing{
    display:none; 
    position:relative; 
    width:98%; 
    border: 1px solid #ddd;   
    margin: 2px 0 10px 0;
  }
  #progress.active, #progressProcessing.active{display: block;}
  #progress #bar, #progressProcessing #barProcessing
  { 
    background-color: #B4F5B4; 
    width:0%; 
    height:20px;   
  }
  #progress #percentage, #progressProcessing #percentageProcessing
  { 
    position:absolute; 
    display:inline-block; 
    top:0; 
    left:48%; 
  }
  
  
  #createAllMediaPreviewsDialog #progress{display: block;}
  .createAllPreviewsInfo, .inviteUserInfo{font-size: 10pt;}
  #inviteUserDialog form input {min-width: 200px; margin: 20px 0 50px 50px;}
  
  .userselect, .dateselect{
      visibility: hidden;
      position: absolute;
      height: 15px; 
      width: 60px;
      font-size: 8pt;
      z-index: 200;
  }
  
  
  .stepselect{position: absolute; left: -15px; top: 50px; display:none;}
  
  .manageStepsFilter{float: left; margin: 2px 10px 15px 0; font-size: 2em;}
  
  .moveCopyDialogHeader{text-align: center; padding: 10px 0 30px 0;}
  
  ul.moveCopyTiles {max-height: 300px; min-width: 600px; overflow-y: scroll; list-style: none; font-size: 0.7em;}
  ul.moveCopyTiles a {cursor: pointer; display: block;}
  ul.moveCopyTiles a.moveCopyTile{font-weight: bold;}
  ul.moveCopyTiles .moveCopyLists{margin: 0 0 0 25px; list-style: none; display: none;}
  ul.moveCopyTiles .moveCopyGroups{margin: 0 0 0 25px; list-style: none; display: none;}
  ul.moveCopyTiles .moveCopyTasks{margin: 0 0 0 25px; list-style: none; display: none;}
  ul.moveCopyTiles .moveCopyLists.open {display: block;}
  ul.moveCopyTiles .moveCopyGroups.open{display: block;}
  ul.moveCopyTiles .moveCopyTasks.open{display: block;}
  ul.moveCopyTiles .currentSource{font-style: italic;}
  
  #manageStepsDialog{font-size: 8pt;}
  #stepEndSpacer{display: block; height: 250px;}
  
  
  
  @media screen and (max-width: 800px){
  
      .taskheaderlist{display: block;}
  
      #steps{
          grid-column: 2;
          grid-row: 2;
      }
      .stepnamecontainer{
          grid-row: 1;
          grid-column: 1/4;
      }
      .stepcommentcontainer{
          grid-row: 2;
          grid-column: 1/4;
          border-top: none;
          width: 95%;
          margin-left: auto;       
      }
  
      .stepusercontainer{
          right: 12px;
          top: -22px;
          bottom: auto;
          left: auto;
      }
  
      .stepstatus{
          grid-row: 1/3;
      }
  
      .stepaddbutton, .stepmenubutton, .stepfavbutton, 
      .stepaddbutton:hover, .stepmenubutton:hover, stepfavbutton:hover {
      display: none; 
      }
  
      #taskheader{
          margin: 40px 0 40px 0;
      }
  
    
      .step:hover .addcommentcontainer{display: none;}   
      .mobileEditModeDisabled .addcommentcontainer {display: none;}    
      .mobileEditModeEnabled .addcommentcontainer,
      .mobileEditModeEnabled .step:hover .addcommentcontainer {display: block;}
  
      
      
      .taskheaderList{grid-column: 1; grid-row: 1; display: block;}
      .taskheaderListName{grid-column: 1/3; grid-row: 2;  display: block;}
      
      .taskheaderGroup{grid-column: 1; grid-row: 3; }
      .taskheaderGroupName{grid-column: 1; grid-row: 4;}
      
      .taskheaderTask{grid-column: 2; grid-row: 3;}
      .taskheaderTaskName{grid-column: 2; grid-row: 4;}
      
      .viewNavButtons{grid-column: 4; justify-self: end;}
      
      .viewNavButtons #openTasksAndSteps{display:none;}
      .viewNavButtons #manageList{display:none;}
      .viewNavButtons #toAgileBoard{display:none;}
  
  }
  
  
  
  
  /* ============ DASHBOARD =================== */
  
  #dashboard{background: white; position: relative; font-size: 10pt; padding: 35px 0 0 0;} 
  #dashBranding{display: block; width: 260px; height: 105px; position: absolute; top: 40px; left: 44px;}
  #dashMenu {position: relative; float: right; color: white; padding: 40px 0 60px 40px; width: 455px;}
  #dashFullname{margin: 0 0 0 30px; font-weight: bold; font-size: 28pt;}
  #dashWelcome{margin: 0 0 0 30px; font-size: 14pt;}
  #dashTS{font-weight: bold; font-size: 16pt;}
  #dashMenuItems{margin: 20px 0 0 130px; font-size: 12pt;}
  #dashMenuItemsHeader{font-weight: bold;}
  #dashMenu ul {list-style: none;}
  #dashMenu ul a {display: block; color: white; text-decoration: none; padding: 3px; margin: 2px 0 0 0; width: 200px;}
  #dashMenu ul a:hover {border: 2px solid white; padding: 1px;}
  a.dashTileLink {color: inherit; text-decoration: none;}
  #myLists{position: relative; margin: 200px 0 0 80px; width: 355px; }
  /*#numMyLists{ position: absolute; left: -20px; top: -75px; width:130px; height:130px; border-radius:50%; text-align:center;}*/
  #numMyLists{ position: absolute; left: -50px; top: -50px; width:100px; height:100px; border-radius:50%; text-align:center;}
  #dashDevelopedBy {display: block; width: 105px; height: 45px; position: absolute; left: -80px; top: 400px; background: url("/ts/images/logo_interlogue.jpg"); background-size: contain; }
  /*#countMyLists{font-size:40pt; font-weight: bold; color:white; line-height: 130px;}*/
  #countMyLists{font-size:32pt; font-weight: bold; color:white; line-height: 100px;}
  
  #numSystemListsContainer, #numMyOpenTasksContainer {position: absolute; color: white; font-weight: bold; font-size: 10pt; padding: 0 6px 2px 30px; right: 15px; top: -10px}
  #numSystemLists, #numMyOpenTasks{position: absolute;  top: -3px; left: -7px; width:25px; height:25px;  border-radius:50%; text-align:center; background:white;}
  #countSystemLists, #countMyOpenTasks {line-height: 25px;}
  
  #myListsList{position: relative; padding: 60px 0 30px 125px;}
  #myListsVertical{position: absolute; top: 65px; display: block; width: 100px; height: 326px; }
  #myListsHeader, #myStepsHeader{font-size: 20pt; font-weight: bold;}
  
  #myListsArchiveHeader {font-size: 18pt; margin: 25px 0 0 0; opacity: 0.7;}
  
  #myStepsHeader {padding: 5px 10px;}
  #myListsList ul {list-style: none;}
  #myListsList .myActiveLists {margin: 35px 0 0 0;}
  #myListsList .myArchiveLists {margin: 10px 0 0 0;}
  #myListsList .dashTSList {width: 211px; padding: 5px 0 5px 0; font-size: 12pt; display: block; margin: 0 0 0 0;}
  #myListsList .dashTSList:hover{background: white; cursor: pointer; padding: 3px 0 3px 3px; margin: 0 0 0 -3px;}
  #myListsList a.tslistLink {text-decoration: none; color: inherit; display: block;}
  #myListsList .myArchiveLists .tslist {opacity: 0.5;}
  a#findMoreSteps {display: block; cursor: pointer; text-transform: uppercase; font-style: italic;}
  
  a#findMoreSteps {width: 40px; height: 40px; 
                   background: url("/ts/images/icon_Fullscreen.png") no-repeat; background-size: contain;
  }
  
  
  #numMySteps, #numMyAFSteps, #numMyReminderSteps, #numMyFavoriteSteps{ position: absolute; left: -50px; top: -50px; width:100px; height:100px; border-radius:50%; text-align:center;}
  #countMySteps, #countMyAFSteps, #countMyReminderSteps, #countMyFavoriteSteps{font-size:32pt; font-weight: bold; color: white; line-height: 100px;}
  #dashMySteps, #dashMyAFSteps, #dashMyReminders, #dashMyFavorites{clear: right; float: right; position: relative; margin: 150px 25px 0 0; width: 395px; padding:40px 25px 25px 25px;}
  #myStepsList .criticalTask {
          display: block;
          text-decoration: none;
          color: #35424b;
      margin: 15px 0 0 0;
      width: 375px;
      padding: 5px 2px 5px 10px;
      font-size: 8pt;	
      line-height: 11pt;	
  }
  
  #myStepsList .criticalTask:hover {background: white; cursor: pointer; padding: 3px 0 3px 8px;}
  .dashDeadline{font-style: italic; text-transform: uppercase;}
  .dashPath{font-style:italic; text-transform: uppercase;}
  .dashStep{margin: 1px 0 0 0; font-size: 10pt; font-weight: bold;}
  .dashComment{margin: 1px 0 0 0; font-size: 10pt; font-weight: normal; line-height: 17px;}
  a#findMoreSteps {position: absolute; top: 38px; right: 42px;  display: block;}	
  a#findMoreSteps:hover {text-decoration: underline;}
  
  
  #myLists, .dashStep{line-height: 15pt;}
  #myLists{min-height: 465px;}
  /*#myListsLineWrapper{position: relative; margin: 0 0 0 -20px; z-index: 1;}
  #myListsLineStart{position: absolute; display: block; width: 6px; height: 12px; top: 0; z-index: 2;}
  #myListsLineEnd{position: absolute; display: block; width: 6px; height: 12px; bottom: -8; z-index: 2;}
  */
  .dashOwner, .dashHidden, .listDeactivate, .listActivate{display: inline-block; width: 13px; height: 13px; margin: 0 0 0 3px;}
  .listbuttons{display: none; padding: 0 0 0 7px;}
  .dashTSList:hover .listbuttons{display:inline;}
  .dashOwner{background: url("/ts/images/icon_listOwner.png") 0 0 / 13px 13px  no-repeat; }
  .dashHidden{background: url("/ts/images/icon_dashHidden.png") 0 0 / 13px 13px  no-repeat; }
  .listDeactivate, .listActivate{background: url("/ts/images/icon_deactivate.png"); background-size: 13px 13px; background-repeat: no-repeat; }
  #myListsList ul li:hover .listbuttons{display: inline-block;}
  .dashTSList{position: relative; width: 215px; }
  
  .listeditmenu{    
      display: none;       
      font-size: 7pt;
      font-weight: normal;
      position: absolute;    
      z-index: 3;        
      right: -10px;
      top: -10px;
  }
  
  .listaddbutton {background: url("/ts/images/icon_add.png") no-repeat;}
  .listeditbutton {background: url("/ts/images/icon_edit.png") no-repeat;}
  .listmenubutton {background: url("/ts/images/icon_menu.png") no-repeat;}
  .listaddbutton:hover {background: url("/ts/images/icon_add_hover.png") no-repeat;}
  .listeditbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat;}
  .listmenubutton:hover {background: url("/ts/images/icon_menu_hover.png") no-repeat;}
  .listaddbutton, .listeditbutton, .listmenubutton, .listaddbutton:hover, .listeditbutton:hover, .listmenubutton:hover {display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 0 0 5px;}
  
  
  .dashTSList:hover .listeditmenu{
    display: block;  
  }
  
  #myStepsList .criticalTask:hover {background: white; cursor: pointer; padding: 3px 0 3px 8px;}
  
  #dashMySteps.responsive{
      position: absolute;
      top: 86px;
      left: 540px;
  }
  
  
  @media screen and (max-width: 1500px) {        
      #dashMySteps.responsive{
          position: relative;
          top: 0;
          left: 0;
      }
  }  
  
  /* NEW MODULAR DASHBORD ELEMENTS */
  #dashTiles{
      margin: 125px 0 0 0 ;
      display: flex;
      flex-wrap: wrap;
  }
  .dashTile{/*display: inline-block;*/ min-height: 450px;}
  .dashTile{margin: 70px 0 0 100px; vertical-align: top;}
  
  .dashTile .counterContainer{ position: absolute; left: -50px; top: -50px; width:100px; height:100px; border-radius:50%; text-align:center;}
  .dashTile .counterContainer .counterNumeral{font-size:32pt; font-weight: bold; color: white; line-height: 100px;}
  .dashTile {position: relative; width: 350px; padding:30px 25px 25px 37px;}
  .dashTileHeader {position: relative; font-size: 20pt; font-weight: bold; padding: 5px 10px;}
  .dashTileHeader:hover{cursor: pointer; padding: 3px 8px;}
  .dashTile.tslistsTile .dashTileHeader{margin: 0 0 10px 0;}
  .dashTile .tileStep  {        
          display: block;
          text-decoration: none;
          color: #35424b;		
      
      font-size: 8pt;	
      line-height: 11pt;	
  }
  .dashTile .tileStepWrapper{position: relative; margin: 15px 0 0 0; padding: 5px 10px 5px 8px;}
  
  .dashTile .tileStepWrapper .removeStepFromFavorites{display: block; background: url("/ts/images/icon_favoriteRemove.png") no-repeat; background-size: 20px; 
                                                      position: absolute; top: 33%; left: -25px; width: 20px; height: 20px; cursor: pointer;}
  .dashTile .tileStepWrapper .removeStepFromFavorites{left: -19px;  }
  .dashTile .tileStepWrapper:hover .removeStepFromFavorites{left: -21px;  }
  
  .dashTile .stepsList {margin: 5px 0 0 0;}
  .dashTile .tileStep:hover {background: white; cursor: pointer; }
  .dashTile .tileStepWrapper:hover {padding: 3px 0 3px 6px;}
  .dashTile .tileTopInfo {position: absolute; color: white; font-weight: bold; font-size: 10pt; padding: 0 6px 2px 30px; right: 15px; top: -10px}
  .dashTile .tileTopInfo .numeral {position: absolute;  top: -3px; left: -7px; width:25px; height:25px;  border-radius:50%; text-align:center; background:white;}
  .dashTile .tileTopInfo .numeral .text {line-height: 25px;}
  
  .dashTile {min-width: 400px;}
  .dashTile .tslistsList{margin: 7px 0 0 15px; min-height: 400px;}
  .dashTile.tslistsTile .dashTSList {width: 250px; padding: 5px 2px 5px 5px; font-size: 12pt; display: block; margin: 0 0 0 0;}
  .dashTile.tslistsTile .dashTSList:hover{background: white; cursor: pointer; padding: 3px 0 3px 3px; }
  .dashTile.tslistsTile a.tslistLink {text-decoration: none; color: inherit; display: block;}
  
  /*.dashTile.addTile{opacity: 0.25; }
  .dashTile.addTile:hover {opacity: 1;}
  .dashTile.addTile .counterContainer {opacity: 0.5; }
  .dashTile.otherTile.addTile {border: 1px dashed #AAA; background: white; /*url("/ts/images/icon_addTile.png") no-repeat;}
  */
  .dashTile.otherTile.addTile {background: url("/ts/images/icon_addTile.png") 105px 152px/200px 200px no-repeat; opacity: 0.45; border:1px dotted #A5A5A5;}
  .dashTile.otherTile.addTile .addTileMenuItem{display: none;}
  .dashTile.addTile .counterContainer{display:none;}
  
  .dashTile.otherTile.addTile:hover {border: 1px dashed #AAA; background: white; opacity: 1;}
  .dashTile.otherTile.addTile:hover .addTileMenuItem{display: block;}
  .dashTile.addTile:hover .counterContainer{display:block;}
  
  .addTileMenuItem{display: block; cursor: pointer; opacity: 1.5;  
                  text-align: center; text-transform: uppercase; font-size: 20px;
                  margin: 50px 0 0 0; padding: 25px 0 25px 0;}
  .dashTSList.emptyTile{height: 365px;}
  .dashTile.stackedTile{background-size: 30px 30px; background-position: 0;}
  
  .tileeditmenu{    
      display: none;       
      font-size: 7pt;
      font-weight: normal;
      position: absolute;    
      z-index: 3;        
      right: -10px;
      top: -10px;
  }
  .tilemenubutton {background: url("/ts/images/icon_menu.png") no-repeat;}
  .dashTileHeader:hover .tileeditmenu{display: block;}
  .tileeditbutton {background: url("/ts/images/icon_edit.png") no-repeat;}
  .tileeditbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat;}
  .tilemenubutton:hover {background: url("/ts/images/icon_menu_hover.png") no-repeat;}
  
  .tsmenubutton, .tsmenubutton:hover {display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 0 0 5px;}
  
  .tileShowMore, .tileHideMore{font-style: italic; cursor: pointer; margin: 20px 0 0 0 ; padding: 0 2px 5px 8px;}
  
  .tileStep.hidable.hidden, .dashTSList.hidable.hidden{display: none;}
  .tileStep.hidable.expanded, .dashTSList.hidable.expanded{display: block;}
  .tileStepWrapper.hidable.hidden, .dashTSList.hidable.hidden{display: none;}
  .tileStepWrapper.hidable.expanded, .dashTSList.hidable.expanded{display: block;}
  .tileShowMore.expanded, .tileHideMore.hidden  {display: none;}
  .tileShowMore.hidden, .tileHideMore.expanded {display: block;}
  
  .tileStepButtons {display: none; position: absolute; right: -7px; top: -7px;}
  .tileStepButtons .addToFavorites{background: url("/ts/images/icon_favoriteAdd.png"); background-size: 20px; display: block; height: 20px; width: 20px; cursor: pointer;}
  .tileStepWrapper:hover .tileStepButtons{display: block;}
  
  .tslistIsFav{position: absolute; top: 5px; left: -20px;}
  .dashTSList:hover .tslistIsFav {top: 3px; left: -22px;}
  .listunfavbutton {background: url("/ts/images/icon_favoriteRemove.png"); background-size: 20px;}
  .listunfavbutton {display: block; width: 20px; height: 20px; cursor: pointer; }
  .listfavbutton {background: url("/ts/images/icon_favoriteAdd.png") no-repeat;}
  .listfavbutton, .listfavbutton:hover {display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; }
  
  .addTileDialogTilePreviews{padding: 25px;}
  #addInfoTileDialog .tsDialogHeadline, #restoreHiddenTileDialog .tsDialogHeadline{display: block; text-align: center; padding: 25px 0 25px 0; font-size: 20px; font-weight: bold;}
  .tilepreview{
      display: inline-block; 
      vertical-align: top;       
      min-width: 225px; 
      max-width: 400px;
      position: relative; 
      padding: 25px 25px 25px 40px; 
      margin: 25px;
}
  .tilepreview .numcontainer{position:absolute; top: -25px; left: -25px; width:50px; height:50px;  border-radius:50%; text-align:center; background:white;}
  .tilepreview .numcontainer .numeral {line-height: 50px; font-size: 25px;}
  .tilepreview .headline{font-weight: bold; font-size: 20px;}
  .tilepreview .description{margin: 20px 0 0 0; font-size: 15px; }
  .tilepreview:hover{cursor: pointer; }
  .tilepreview .tslists {margin: 10px 0 0 0; font-size: 10px; list-style: none;}
  
  .dashTile.addTile.otherTile.addInfoTilePreview .counterContainer .counterNumeral, 
  .dashTile.addTile.otherTile.addListTilePreview .counterContainer .counterNumeral{color: white;}
  
  

  
  @media screen and (max-width: 800px){
      #dashboard{
          padding: 0;
      }
      #dashBrandingContainer{
          display: none;
      }
      #dashMenu{
          display: none;
      }
      #dashTiles{
          margin: 7em 0 0 0;
          justify-content: center;
      }    
      .dashTile, .dashTile.criticalTile, .dashTile.tslistsTile, .dashTile.otherTile{
          margin: 5em 0 0 0;        
          min-height: 0;
          min-width: 0;
          width: 80%;
          padding: 5em 25px 25px 37px;
          
      }    
      .dashTileHeader{
          padding: 0;
          margin-bottom: 1em;
      }
      .dashTSList{
          width: 100%;
      }
      .dashTile .tslistsList{
          min-height: 0;
      }
      .dashTile .counterContainer{
          left: -5px;
          top: -50px;
      }
      .tileTopInfo{
          display: none;
      }
  
      a#findMoreSteps{
          display: none;
      }
  
      .addTile{
          display: none;
      }
  
      
  
  }
  
  
  /* ================== SEARCH ================== */
  
  #searchContainer{padding: 25px 0; }
  input[name='keywords']{width: 300px; margin: 0 10px 0 0 ; line-height: 19px; margin: 0 10px 0 0; border: 1px solid #CCC;}
  
  
  .searchStep {table-layout: fixed; border-collapse:separate; border-spacing: 0; background: white; border: 1px solid #35424b;  padding: 15px; position: relative;}
  .searchStep:hover{cursor: pointer;}
  .searchStepNameContainer{min-width: 240px; }
  .searchStepCommentContainer{min-width:480px; }
  .searchStepNameContainer, .searchStepCommentContainer{border-top: 1px solid #35424b; padding: 15px 0 0 0; vertical-align: top;}
  p.searchStepCategory{font-size: 8pt; font-weight: bold; font-style: italic;}
  p.searchStepList{font-size: 20pt;}
  p.searchStepGroup{font-size: 16pt;}
  p.searchStepTask{font-size: 12pt; padding: 0 0 15px 0;}
  p.searchStepContent{font-size: 11pt;}
  
  
  .searchOptionBlock{width: 215px; padding: 25px 10px 25px 10px; display: inline-block; vertical-align: top; text-align: left;}
  
  .searchOptionBigBlock{width: 330px; padding: 25px 10px 50px 10px; display: inline-block; vertical-align: top; text-align: left;}
  
  .searchCheck{margin: 0 20px 0 0;}
  .searchStep p {margin: 3px 0 0 0;}
  .searchStepDuedate{background: #444; color: white; font-weight: bold; font-size: 9pt; padding: 2px 4px; width: 130px; margin: 40px 0 0 15px ;}
  .searchStepUser{background: white; padding: 2px 4px; border-left: 1px solid #35424b; border-bottom: 1px solid #35424b;  border-right: 1px solid #35424b; margin: 0 0 0 10px; font-size: 9pt; width: 170px;}
  .searchOption .datepicker {visibility: visible;}
  
  .searchResults{width: 95%; margin: 0 auto;}
  .searchResult{font-weight: bold; font-style: italic; color: #45b7e7;}
  .searchResultHeader{margin: 20px 0 0 0;}
  
  
  .searchOptionTile{margin: 30px 0 2px 30px; font-style: italic;}
  
  .searchResultHeadline{font-size: 14pt; }
  .searchResultHeadline.noResult{width: 300px; margin: 50px auto; display: block;}
  .searchOptionLabel{font-size: 16px; font-weight: bold;}
  
  form#search {width: 780px; margin: 0 auto; text-align: center;}
  .moreSearchOptions.show{display: block; border: 2px solid #666;}
  .moreSearchOptions.hide{display: none;}
  
  .searchStepHeaderWrapper{position: relative;}
  .searchStepStatus{position: absolute; right: 0; top: 0;}
  
  .searchOption img{height: 15px; width: 15px;}
  
  /* ================PRINT =======================*/ 
  
  #printPage{width: 100%; padding: 0 0 30px 0; background: #ebf2fc;}
  #printContent {position: relative; margin: 0 auto 0 auto; width: 201mm; background: white;}
  #printBranding{position: absolute; right: 9mm; top: 3mm; width: 30mm; height: 9mm;}
  #printTaskBranding{float: right; margin: 0 -4mm 0 0;}
  #printMenuContainer{position: fixed; top: 160px; left: 30px; z-index: 5;}
  #printButton{margin: 20px 0 0 0; padding: 5px; font-weight: bold; font-size: 11pt; }
  
  p.printHeadlineCategory{font-style: italic; font-weight: bold; font-size: 7pt; }
  p.printHeadlineList{font-size: 17pt;}
  p.printHeadlineGroup{font-size: 14pt;}
  p.printHeadlineTask{font-size: 10pt;}
  
  /*
  #printContent .stepnamecontainer{ width: 55mm;}
  #printContent .stepname{ width: 55mm;}
  #printContent .stepcommentcontainer{ width: 100mm;}
  #printContent .stepcomment{ width: 100mm;}
  #printContent .step:hover{ background: white;}
  #printContent .spacer20 {min-width: 6mm;}
  #printContent .spacer10 {min-width: 3mm;}
*/

#printContent .step{
    grid-template-columns: 85% 15%;
}
#printContent .stepnamecontainer{
    grid-row: 1;
    grid-column: 1;
}
#printContent .stepcommentcontainer{
    grid-row: 2;
    grid-column: 1;
}
#printContent .stepstatus{
    grid-row: 1 / 3;
    grid-column: 2;
    justify-content: center;
    justify-self: center;
}

  #printContent .stepname{ width: 55mm;}
  #printContent .stepcommentcontainer{ margin-left: 2%;}
  #printContent .stepusercontainer{
      top: -20px;
      right: 6px;
      left: auto;
      bottom: auto;
  }
  #printContent .step:hover{ background: white;}



  #printContent * {cursor: default;}
  
  #printDevelopedBy{margin: 0 0 0 150mm;}
  
  #printContentwrapper{
        position: relative;
        padding: 22mm 9mm 22mm 10mm;
  }
  
  #printMenu{font-size: 9pt;}
  
  @media print {
    body * {
      visibility: hidden;
    }
      
    /*.row    { page-break-inside:avoid; page-break-after:always; page-break-before: always; }*/
    .row    { page-break-inside:avoid; }
    
    #printContent, #printContent * {
      visibility: visible;
    }
    #printContent {
      position: absolute;
      left: 0;
      top: 0;
    }
    
    .printContent, .printContent * {visibility: visible;}
    .printContent {position: absolute; left: 0; top: 0; padding: 0}
    
    
    #printContentwrapper {      
        padding: 0; 
        /*margin: 0;*/
  }
    #printBranding{right: 25mm; top: 0;}
    #printTaskBranding{margin: 0 20mm 0 0;}
    
    
  
  }
  
  
  
  
  /*=================== SETTINGS ====================== */
  
  #settingsBranding {display: block; width: 160px; height: 65px; margin: 0 0 30px 50px;}
  
  #settingsContainer{
      width: 1000px;
      margin: 50px 0 0 0;
      padding: 25px 0 100px 145px;     
  }
  
  #settings{width: 420px;}
  
  
  .pageheadline{font-size: 35pt; line-height: 30pt;}
  .pageheadline.errorheadline{color: red;}
  .pageh2 {margin: 50px 0 15px 0; font-size: 20pt; font-weight: bold;}
  .settingsItem{font-size: 10pt; width: 180px; float: left;}
  #settings select {width: 185px; text-align: center; float: right;}
  #settings option {float: left;}
  .settingsInput {width: 185px; float: right;}
  .settingsItem, .settingsInput {margin: 5px 0 0 0;}
  .settingsCheck {width: auto !important;}
  .settingsSubmit{margin: 5px 0 0 0; float: right;}
  #settingsDevelopedBy{display: block; width: 105px; height: 45px; margin: 20px 0 0 -145px; background: url("/ts/images/logo_interlogue.jpg"); background-size: contain;}
  .settingsExplanation{font-size: 12px; }
  .settingsItemAPI{float: left; width: 100px; font-size: 12px;}
  .settingsInputAPI{float: right; width: 320px; font-size: 12px;}
  .APITable{font-size: 12px; word-break: break-all; vertical-align: top;}
  .APITable tr td:first-child {width: 75px;}
  
  .eyecontainer{
      position: relative;
  }
  
  #pw .passwordeye{
      display: block;
      width: 20px;
      height:20px;
      position: absolute;
      right: 0;
      top: 5px;
  
  }
  
  
  
  /*=========== SET PERMISSIONS  ===================== */
  
  #permissions{width: 750px;}
  .listsettings {display: table; table-layout: fixed; border-collapse:separate; border-spacing:5px; font-size: 8pt; margin: 10px 0 0 0;}
  .listsettingsheader {position: relative; font-size: 20pt; font-weight: bold; margin: 30px 0 0 0; cursor: pointer; width: 650px;}
  #permissions .setPermissionsTileSubline{font-size: 24pt; font-weight: bold; margin: 50px 0 50px 0; text-align: center;}
  .settingsheader, .settingslist {display: table-cell; width: 150px;}
  .settingsheader{font-size: 6.5pt;}
  .settingsheader p.h{font-size: 9pt; margin: 2px 0 1px 0;}
  .settingsheader p.d{font-size: 6.5pt; font-weight: bold; font-style: italic; text-transform: uppercase;}
  .setPermissionsGoToList{margin: -25px 0 0 0; float: right; z-index: 50;}
  .settingslist ul{list-style: none; border: 1px solid #eee; }
  .settingslist ul li{ background: white; border: 1px solid #35424b; padding: 5px; margin: 3px 0; }
  .togglePermissionList{position: absolute; top: -2px; left: -40px; cursor: pointer;}
  .whatArePermissions td{background: white; border: 1px solid #35424b; padding: 5px; width: 150px; text-align: center;}
  .otherLists{margin: 50px 0 10px 0; font-size: 15pt;}
  .nonAdminLists td {padding: 10px;}
  
  
  #permissions .permissionsTable{margin: 2% 0 0 1%;}
  #permissions .permColumn {font-size: 0.6em; width: 150px; display: table-cell; vertical-align: top; border: 5px solid white;}
  #permissions .permColumnHeader {background: white; padding: 2px;}
  #permissions .permColumnHeader p.h{font-size: 9pt; margin: 2px 0 1px 0;}
  #permissions .permColumnHeader p.d{font-size: 6.5pt; font-weight: bold; font-style: italic; text-transform: uppercase; height: 25px;}
  
  
  #permissions .permColumn .permUser, #permissions .permColumn .permUserNo{ background: white; border: 1px solid #35424b; padding: 5px; margin: 3px 0; }
  #permissions .permUser{cursor: move;}
  
  
  
  /*=========== ABOUT PAGES ================= */
  #about{width: 500px; font-size: 10pt; line-height: 14pt;}
  #about .pageheadline {margin: 20px 0 40px 0;}
  
  
  /* === GROWL, CHANGE == */
  .tsGrowls {
      position: fixed;
      z-index: 800;
      width: 15%;
      padding: 10px;
  }
  
  .tsGrowl {
      border-radius: 5px;
      padding: 10px;
      display: flex;
  }
  
  .tsGrowls > .tsGrowl:not(:last-child) {
      margin-bottom: 10px;
  }
  
  .tsGrowl .left {
      /*float: left;*/
      display: flex;
  }
  
  .left .circle {
      margin-left: 5px;
      margin-top: 0 !important;
      border-radius: 50%;
      height: 13px;
      width: 13px;
      align-self: center;
  }
  
  .tsGrowl .right {
      margin-left: 20%;
      word-wrap: break-word;
  }
  
  @media all and (max-width: 800px){
      .tsGrowls {        
          width: auto;        
      }
  
  }
  
  
  
  /*@media screen and (max-width: 1300px) and (min-width: 520px) {*/
  /*@media screen and (max-width: 1200px) {
      .stepcontent.stepcommentcontainer{width: 200px;}
      .stepcomment{width: 200px;}
      #activityLog{width: 200px;}
      #groupstaskscontent{width: 225px;}
      #groupstasks{width: 227px; left: 10px;}
      .taskname{width: 150px;}
      #steps {margin-left: 267px;}
      #tsBranding{margin: 0 0 30px 15px;}
      #bottomButtons{right: 15%;}    
  }
  */
  
  /*.step{width: 80%;}*/
  #printContent .step {width: auto;}
  /*
  .stepname{width: 92%;}
  .spacer10{width: 1%;}
  .spacer20{width: 2%;}
  .stepcomment{width: 96%;}
  .stepeditmenu{right: 1%;}
  .stepnamecontainer{width: 30%;}
  .stepcommentcontainer{width: 66%;}
  .stepcommentname{width: 98%;}*/
  /*
  @media screen and (max-width: 1366px) {        
      #groupstaskssteps.activityLogOpen .stepnamecontainer{width: 42%;}
      #groupstaskssteps.activityLogOpen .stepcommentcontainer{width: 55%;}
      #groupstaskssteps.activityLogOpen #bottomButtons{display: none;}
  }  
  
  @media screen and (max-width: 1200px) {    
      #activityLog{width: 200px;}
      #bottomButtons{display: none;}
      .step{width: 90%;}
      .stepnamecontainer{width: 36%;}
      .stepname{width: 90%;}
      .stepcommentcontainer{width: 60%;}
      #groupstaskssteps.activityLogOpen .stepnamecontainer{width: 42%;}
      #groupstaskssteps.activityLogOpen .stepcommentcontainer{width: 55%;}
  }   
  
  @media screen and (max-width: 1024px) {    
      #activityLog{width: 125px;}    
      #groupstaskscontent{width: 225px;}
      #groupstasks{width: 227px; left: 10px;}
      .taskname, .groupname{width: 150px;}
      #steps {margin-left: 267px;}
      #tsBranding{margin: 0 0 30px 15px;}
      #bottomButtons{display: none;}
      .step{width: 92%;}
      .stepnamecontainer{width: 42%;}
      .stepname{width: 90%;}
      .stepcommentcontainer{width: 55%;}
  }   
  */
  
  /*========================= ALL LISTS =================== */
  #allLists{padding: 65px 10px 10px 10px;}
  .allListsSubline{font-weight: bold; margin: 0 10px; }
  .allListsTable {display: inline-table; margin: 15px 0 0 0; padding: 25px; border-collapse: collapse;}
  .allListsTable .allListsTableHeaderRow{display: table-row; font-weight: bold; border-bottom: 1px dotted #AAA; text-align: left;}
  .allListsTable .allListsTableRow{display: table-row;}
  .allListsTable .allListsTableHeaderRow .cell{display: table-cell; padding: 10px; cursor: pointer;}
  .allListsTable .allListsTableHeaderRow .cell.ltags{cursor:not-allowed;}
  .allListsTable .allListsTableRow .cell{display: table-cell; padding: 10px; border-bottom: 1px dotted #AAA; text-align: left; vertical-align: middle;}
  .allListsTable .cell.lname{width: 200px;}
  .allListsTable .cell.lname{width: 200px;}
  .allListsTable .cell.lname a {color: #45B7E7;}
  .allListsTable .cell.ldesc{width: 200px;}
  .allListsTable .cell.lowner{width: 160px;}
  .allListsTable .cell.lperm{width: 150px;}
  .allListsTable .cell.lactions{width: 150px; text-align: right;}
  .allListsTable .cell.ltags{width: 150px; }
  
  .sortButtons{position : absolute; top: 60px; right: 60px; font-size: 8pt;}
  .ts-button.requestAccess{width: 85%; text-align: center;}
  .ascDescTri{margin: 0 0 0 5px;}
  
  /*========================= ADMIN CENTER =================== */
  #ts-admin{padding: 65px 10px 10px 10px;}
  .ts-admin-usertable {margin: 20px 0 0 0; border-collapse: collapse;} 
  .ts-admin-usertable td{padding: 5px 5px 5px 10px ; border-bottom: 1px dotted #AAA;}
  .ts-admin-usertable .header td{font-weight: bold;}
  .ts-admin-usertable td.center{text-align: center;}
  .ts-admin-button{display: inline-block; width: auto; cursor: pointer; border-radius: 25%; font-weight: bold; text-transform: uppercase; padding: 7px;color: white;}
  .ts-admin-add{ background: #45B7E7;}
  .ts-admin-delete{ background: #9d2537; }
  .ts-admin-lock{ background: #AAAA00; }
  .ts-admin-unlock{ background: green; }
  .ts-admin-checkok{color: green;}
  .ts-admin-resetpw{background: grey;}
  .ts-admin-errorlist{color: #9d2537;}
  
  /*========================= MANAGE LISTS =================== */
  #manageLists .tileSeparator {
      display: block;
      font-family: Open Sans,Arial,sans-serif;
      font-size: 11pt;
      font-weight: bold;
      margin: 20px 10px 24px 0;
      padding: 5px 0 9px 0;
      text-transform: uppercase;
      width: 99.5%;
      
  }
  
  
  #manageLists{padding: 3% 0 0 1%;}
  .allListsTile{width: 320px; 
               display: inline-block;
               vertical-align: top;
               margin: 80px 40px 40px 80px;
               padding: 0.5%; 
               position: relative;
               min-height: 300px;}
  
  .listOwnerName{position: absolute; top: -10px; right: 15px; font-weight: bold; color: white; padding: 1% 4%; font-size: 0.8em;}
  .listOwnerName{background: #45b7e7;}
  .listTileCloseButton, .listTileCloseButton:active{position: absolute; top: 25px; right: 23px; }
  
  .listTileName{width: 65%; height: 60px; margin: 10% 0 0 20%; font-size: 1.4em; display: block; text-decoration: none; color: inherit; overflow: hidden;}
  .listMetaViewSeparator{border-bottom: 1px solid #666; margin: 20px;}
  
  .listMetaViewSeparator.fullscreen{border-bottom: 1px solid #666; margin: 40px 10px;}
  .openListMetaView{position: absolute; right: 20px; width: 30px; height: 30px; top: 30px; cursor: pointer; display: block; 
                   background: url("/ts/images/icon_Fullscreen.png") no-repeat; background-size: contain;
  }
  
  
  .listTileStats{font-size: 0.7em;  margin: 10% 3% 3% 8%; width: 85%;}
  .listTileStats.fullscreen{width: 100%;}
  .listTileStats img{height: 15px; width: 15px;}
  .listTileStats td{min-width: 10%; text-align: center;}
  .listTileStats td:hover{cursor: pointer; background: white;}
  .listTileStats tr td:first-child{min-width: 25%; text-align: left;}
  .listTileStats tr td.groupStatName{min-width: 35%; width: 35%;}
  .listTileStats tr td.groupStatVisual{min-width: 45%; width: 45%;}
  .listTileStats tr td.groupStatNumber{min-width: 20%; width: 20%;}
  .groupStatBar{width: 93%; height: 20px; margin: 0 0 0 7%;}
  .listTileSeparator {margin: 5% auto 5% auto; width: 85%; display: block; border-bottom: 1px solid #b0b0b0;}
  .listTileStatsContainer {min-height: 90px;}
  .listTileCriticals.noActiveSteps{min-height: 120px;}
  .listTileCriticals{min-height: 45px;}
  .listTileCriticals{padding: 0 5% 0 5%; }
  
  .listTileCriticals .tileCriticalStep.hiddenStep{display:none;}
  .tileHideMoreSteps.tileCriticalStep{display: none;}
  .listTileCriticalsHeadline{margin: 0 0 0 3%; display: inline-block; text-decoration: none; color: inherit; cursor: pointer;}
  .tileCriticalStep{margin: 2% 0 0 0; padding: 4%; display: block; font-size: 0.6em; text-decoration: none; color: inherit;}
  .tileCriticalStep:hover {cursor: pointer; background: white;}
  .tileCriticalDuedate {text-transform: uppercase;font-style: italic;}
  .tileCriticalPath{text-transform: uppercase;font-style: italic;}
  .tileCriticalDesc{font-weight: bold;}
  .tileHideMoreSteps, .tileShowMoreSteps {text-transform: uppercase;font-style: italic; padding: 1% 4% 1% 4%; display: inline-block;}
  .tileHideMoreSteps:hover, .tileShowMoreSteps:hover {text-decoration: underline;}
  .tileCriticalPath {color: #45b7e7;}
  .tileHideMoreSteps, .tileShowMoreSteps {color: #45b7e7;}
  .listTileCriticals a.listTileCriticalsHeadline:hover {text-decoration: underline;}
  
  .meterContainer{height: 150px; width: 100%; padding: 10% 0 5% 0;}
  .meterContainer.fullscreen{height: 150px; width: 100%; padding: 0 ;}
  .meter{ 
          position: relative;
          height: 100%; 
          width: 100%;
          cursor: pointer;}
  
  .meter.noActivity{ background-image: url("/ts/images/allLists_meterInactive.png"); 
          background-repeat:no-repeat;
          background-size:contain;
          background-position:center;
          position: relative;
          height: 100%; 
          width: 100%;
          cursor: default;}
  
  
  .meterNeedleContainer{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .meterNeedle{ background: url("/ts/images/allLists_meterNeedle.png") no-repeat center center / contain;
          position: absolute;         
          height: 100%;
          left: 0;
          bottom: 0;
          position: absolute;  
          width: 100%;
          transform-origin: 50% 85%;
          -ms-transform-origin: 50% 85%;        
          -webkit-transform-origin: 50% 85%; 
          
          
  }
  .meterWeek, .meterMonth{
      position: absolute; 
      display: block;
      text-align: center; 
      bottom: 8%; 
      left: 0;
      font-weight: bold;
      font-size: 1em;
      line-height: 1em;
      color: white;
      z-index: 999;
      width: 100%;
  }
  
  .meterWeek.fullscreen{width: 100%;}
  
  /*.meterWeek{left: 45%;}
  .meterMonth{left: 78%;}*/
  .labelMeter{
      color: #222;
      position: absolute; 
      display: block;
      text-align: center; 
      bottom: -30%; 
      left: 45px;
      font-weight: bold;
      font-size: 1em;
      line-height: 1em;    
      z-index: 999;
      width: 200px;
  }
  
  
  
  
  
  
  .allListsTile{border: 1px solid #CCC; }
  .listPieBackground{background-color: #9d2537;}
  
   .pieChart{position: absolute; left: -50px; top: -50px;}
   .pieContainer {
            height: 100px;
            width: 100px;
            position: relative;
            color: white;
            font-size: 2em;
       }
       .pieBackground {          
            position: absolute;
            width: 100px;
            height: 100px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            -o-border-radius: 50px;
            border-radius: 50px;          
       } 
       
       .pie {
            position: absolute;
            width: 100px;
            height: 100px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            -o-border-radius: 50px;
            border-radius: 50px;
            clip: rect(0px, 50px, 100px, 0px);
       }
       .hold {
            position: absolute;
            width: 100px;
            height: 100px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            -o-border-radius: 50px;
            border-radius: 50px;
            clip: rect(0px, 100px, 100px, 50px);
       }
  
    .pieSliceBlue .pie {
            background-color: #45b7e7 ;         
       }
       .pieSliceBlue2 {
            -webkit-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -o-transform:rotate(180deg);
            transform:rotate(180deg);
       }
      .pieSliceBlue2 .pie {background-color: #45b7e7;}
      .pieText{position: absolute; top: 23%; text-align: center; width: 100px;}
      
  #allListsFullscreen{padding: 3% 0 0 1%;}
  #listMetaViewInner{margin: 50px 50px 20px 50px; border: 1px solid #666; display: inline-block; position: relative; width: 85%;  z-index: 1;}
  #listMetaView {position: relative; width: 97%;}
  #listMetaView .listOwnerName{position: absolute; top: -14px; right: 25px; padding: 5px 15px 5px 15px;}
  #listMetaView .pieChart{position: absolute; left: -50px; top : -50px;}
  #listMetaView .listTileName{margin: 15px 0 0 25px; font-size: 24px; padding: 0 0 0 50px; height: auto; text-align: left; max-width: 75%; width: auto; display: inline-block;}
  #listMetaView .listMetaTabs{color: #35424b; width: 800px; bottom: -60px; right: 76px;
      margin: 0 0 0 0; transform: rotate(270deg); transform-origin: 100% 0%; position: absolute; z-index: 3; }
  #listMetaView .listMetaTabs a {/*display: inline-block;*/ text-decoration: none; float: right;}
  #listMetaView .listMetaTabs li {display: block; list-style: outside none none; cursor: pointer; background: white; 
                                  font-size: 10px; text-align: center; font-weight: lighter; text-transform: uppercase;
                                  margin: 2px 0 0 6px; padding: 4px 8px; 
                                  border: 1px solid #666;  }
  #listMetaView .listMetaTabs .tsTab.active li{border-bottom: none; }
  #listMetaView .listTileStats {margin: 20px 0 0 10px;}
  
  #listMetaView .tsTabContent{display: none;}
  #listMetaView .tsTabContent.active{display:block; padding: 20px;}
  #listMetaView .tsTabContentHeadline{font-size: 16px; margin: 0 0 30px 0; text-align: center; padding: 2px;}
  #listMetaView .tsTabContentHeadline.editable:hover{padding: 0;}
  .tsTabColumn {display: inline-block; width: 40%; padding: 0 5%; vertical-align: top;}
  #listMetaView .tsTabContentText.desc{padding: 0 10px;}
  
  #listMetaView .tileCriticalPath{font-size: 0.7em; margin: 3% 0 0 1%;}
  #listMetaView .tileAF{font-size: 0.7em; margin: 0 0 0 1%;}
  #listMetaView .tileAF{color: #9d2537;}
  
  #listMetaView .stepShort{margin: 10px 0 0 0;}
  #listMetaView .fullLogEvent{margin: 3% 0 0 1%;}
  #listMetaView .timeSeparator{display:block; padding: 0 1%; margin: 1% 0; font-size: 0.6em; text-transform: uppercase; width: 98%; font-weight: bold;}
  
  #listMetaView .settingsheader{font-size: 0.5em;}
  #listMetaView .settingsheader p.d{font-size: 1em; font-weight: normal;}
  
  #listMetaView .fullLogDuplicateSorted{margin: 0;}
  
  #listMetaView .permissionsTable{margin: 2% 0 0 1%;}
  #listMetaView .permColumn {font-size: 0.6em; width: 150px; display: table-cell; vertical-align: top; border: 5px solid white;}
  #listMetaView .permColumnHeader {background: white; padding: 2px;}
  #listMetaView .permColumnHeader p.h{font-size: 9pt; margin: 2px 0 1px 0;}
  #listMetaView .permColumnHeader p.d{font-size: 6.5pt; font-weight: bold; font-style: italic; text-transform: uppercase; height: 25px;}
  
  
  #listMetaView .permColumn .permUser, #listMetaView .permColumn .permUserNo{ background: white; border: 1px solid #35424b; padding: 5px; margin: 3px 0; }
  #listMetaView .permUser{cursor: move;}
  
  
  .bottomButtonPanel{position: fixed; padding: 0 20% 2% 5%; bottom: 0; background: white; width: 90%;}
  
  
  
  #goToListContainer{
      position: fixed;   
      width: 25px;
      height: 99%;
      top: 35px;
      right: 0; 
      cursor: pointer;
  }
  
  
  #goToListContainer #goToListClickArea { 
      position: absolute;
      width: 20px;
      top: 40%;
      height: 86px;
      right: 0;    
      display: none; 
      background: url("/ts/images/icon_goRight.png") ;
      background-size: 17px;
      background-repeat: repeat-y;
      background-position-x: center;
      cursor: pointer;
  }
  
  #goToListContainer:hover{background: #45B7E7;}
  #goToListContainer:hover #goToListClickArea {display: block; }
  
  
  #goToListContainer #goToListClickArea #goToListMockup{
      display: none;
      position: absolute;
      top: 44px;
      right: 25px;
      width: 100px;
      height: 54px;  
      background: url("/ts/images/mockup_TS.png");    
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 1;
  }
  
  
  #goToListContainer #goToListClickArea:hover #goToListMockup{
      display: block;    
  }
  .tsTabContentHeadline{position: relative;}
  .tsTabContentHeadline.tsTabListDesc, .tsTabContentHeadline.tsTabListTags{padding: 5px 0 5px 0; font-size: 12pt; display: block; margin: 0 0 0 0;}
  .tsTabContentHeadline.tsTabListDesc:hover, .tsTabContentHeadline.tsTabListTags:hover{background: white; cursor: pointer; padding: 3px 0 3px 3px; margin: 0 0 0 -3px;}
  .tiledescmenu, .tiletagsmenu{    
      display: none;       
      font-size: 7pt;
      font-weight: normal;
      position: absolute;    
      z-index: 3;        
      right: -10px;
      top: -10px;
  }
  .editdescbutton, .edittagsbutton {background: url("/ts/images/icon_edit.png") no-repeat; background-size: 20px; }
  .editdescbutton:hover, .edittagsbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat; background-size: 20px; }
  .tsTabContentHeadline.tsTabListDesc:hover .tiledescmenu{display: block;}
  .tsTabContentHeadline.tsTabListTags:hover .tiletagsmenu{display: block;}
  .makeListPrivate{margin: 30px 5px 0 10px;}
  .makeListPrivateLabel{font-size: 8pt; }
  
  
  
  /*========================= ACTIVITY LOG (FULL) =================== */
  
  .tsMGMHeadline{font-size: 14pt; margin: 10px auto 0 auto;}
  
  #logFullScreen{display: block; float: right; width: 30px; height: 30px;
                 background: url("/ts/images/icon_Fullscreen.png") no-repeat; background-size: contain;
  }
  #logFullScreen{color: #00ace8;}
  
  #activityLogFull{padding: 60px 0 0 25px;}
  .fullLogEvent{margin: 10px 0 0 0; width: 100%;}
  .fullLogEvent.unread .fullLogAction{color: #00ace8;}
  .fullLogEventHeader, .searchResultHeader{font-size: 0.7em; text-transform: uppercase; font-style: italic;}
  .fullLogEventHeader, .searchResultHeader{color: #00ace8;}
  .fullLogAction{font-weight: bold; font-size: 0.8em; }
  
  .fullLogEvent.fullLogDuplicate{margin: 0;}
  .fullLogEvent.fullLogDuplicateSorted{margin: 0; display:none}
  .fullLogEvent.fullLogDuplicateSorted.unread .fullLogAction{color: #00ace8;}
  .fullLogEvent.fullLogDuplicateSorted.isRead .fullLogAction{color: inherit;}
  .showMoreEvents{display: inline-block; cursor: pointer; } 
  .showMoreEvents {color: #00ace8; margin: 0 0 0 1%; text-transform: uppercase; font-weight: normal; font-style: italic;}
  .showMoreEvents.noEvents {display: none;}
  
  #activityLogFull .timeSeparator {
      display: block;
      font-family: Open Sans,Arial,sans-serif;
      font-size: 11pt;
      font-weight: bold;
      margin: 20px 10px 24px 0;
      padding: 5px 0 9px 0;
      text-transform: uppercase;
      width: 99.5%;
      
  }
  
  .markAllAsReadFull{margin: 15px 0 0 0; display: none;}
  
  #activityLogFull .stepName, 
  #activityLogFull .stepComments, 
  #activityLogFull .stepInfo
  {padding: 40px 0 0 0; margin : 0 0 0 0; width: 30%; font-size: 0.6em; float: left;}
  #activityLogFull .stepInfo{width: 15%;}
  #activityLogFull .stepNameHeader{color: #00ace8; text-transform: uppercase; font-style: italic; }
  #activityLogFull .stepUserHeader{margin: 10px 0 0 0 ;}
  
  
  
  .stepShort {
      /*display: table;
      table-layout: fixed;  
      border-collapse:separate;    */
      /*font-size: 8pt;    
      margin: 10px 0 0 0;    
      padding: 20px 0 20px 0;
      position: relative;*/
     /* float: left;*/
     /* width: 95%;*/
     grid-template-columns: 30% 2% 1fr 1% 5% 35px;
  }
  
   
  .stepShort .row {display : table-row; }
  
  
  .stepShort .stepcontent .stepname {width: 99%; height: auto;}
  .stepShort .stepcontent .stepname.compact {height: 24px; overflow: hidden;}
  
  /*.stepShort .stepcontent.stepnamecontainer {width: 33%;}*/
  .stepShort .stepcontent.stepcommentcontainer {/*width: 51%;*/ position: relative;}
  .stepShort .stepcontent.spacer20 {width: 2%;}
  .stepShort .stepcontent.spacer10 {width: 1%;}
  .stepShort .stepcontent.stepshortbuttons {/*width: 7%;*/ grid-column: 5;}
  .stepShort .stepcontent.stepshortbuttons .stepButtons .ts-button {width: 95%; padding: 2% 2%; text-align: center;}
  .stepShort .stepcontent.stepshortbuttons .stepButtons{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
  }
  
  .stepShort .stepcontent.stepstatus {/*width: 5%;*/ grid-column: 6; align-self: center;}
  .stepShort .stepeditmenu{                
      position: absolute;    
      top: -10px;
      right: -20px;    
  }
  .stepShort .stepheader, .stepShort .stepcommentheader {font-size: 6pt;}
  .stepShort .stepdatecontainer{font-size: 7pt; height: 17px; top: -18px;}
  .stepShort .stepusercontainer {/*height: auto;*/ bottom: -19px;}
  .stepShort .stepuser {font-size: 7pt; margin: 1px 0 0; height: 17px; bottom: -18px;}
  .stepShort .stepcomment {margin: 0 0 0 1%; width: 95%; height: auto;}
  .stepShort .stepcommentname {/*width: 95%; */width: 100%;}
  .stepShort .stepcomment.compact {/*height: 40px; */overflow: hidden; position: static;}
  .stepcomment.compact{border: none;}
  .stepShort .stepcommentheader.syscomment .icon_isSys {margin: -4px 5px 0 0;}
  .stepShort .addcommentcontainer{bottom: -25px; right: 0;}
  #activityLogFull .stepShort .addcommentbutton{width: 100px;}
  .stepShort.empty .stepcontent{width: 87%;}
  .stepShort.empty .stepShortSpacer.empty{width: 5%; display: table-cell;}
  .stepShort.empty .stepButtons.empty{width: 7%; display: table-cell;}
  .stepShort.empty .stepButtons.empty .ts-button{width: 95%; padding: 2% 2%; text-align: center;}
  
  
  .sortLogButtons, .sortManageListButtons{
      font-size: 8pt; 
      margin: 70px 100px 0 auto;
      float: right;
    }
  
  
  .eventHeaderPathLabel{ font-size: 0.75em;
      margin: 0 2px 0 0;
  }
  
  /*.stepShort .stepExpand{display: block; height: 15px; width: 15px; position: absolute; right: 10px; }*/
  .expandStep.unneccessary{display: none;}
  .expandStep{display: block; height: 20px; width: 20px; position: absolute; left: 60%; bottom: 10px; cursor: pointer;}
  .expandStep {background: url("/ts/images/icon_expandStep.png"); background-size: 20px;}
  .expandStep.contractStep {background: url("/ts/images/icon_expandStep.png") 20 20 repeat;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
      }
  .expandStepTop{top: 10px; bottom: auto; display: none;}
  .expandStepTop.contractStep{display: block; 
               background: url("/ts/images/icon_expandStep.png"); 
               background-size: 20px; 
               -webkit-transform: rotate(-180deg); 
               transform: rotate(-180deg);
  }
  
  .expandTSStepTop{top: -10px; left: 47%; display: none;}
  .expandTSStepTop.contractStep{display: block; 
               background: url("/ts/images/icon_expandStep.png"); 
               background-size: 20px; 
               -webkit-transform: rotate(-180deg); 
               transform: rotate(-180deg);
  }
    
  #bottomButtonsLog{
      width: 100%;
      height: 40px;
      bottom: 25px;
      right: 25px;
      position: fixed;        
      z-index: 10;    
  }
  
  #bottomButtonsLog .bottomButton{
      float: right;
  }
  
  #pageContainer.activityLogOpen #bottomButtonsLog {display: none;}
  
  #goToUnreadButton{     
      background: url("/ts/images/icon_goToUnread.png") no-repeat;
      background-size: 35px;
  }
  
  .fullLogHeader{
      display: flex;
  }
  
  .stepShort .stepstatus .ts-button{
      display:none;
  }
  
  
  @media screen and (max-width: 800px){
      #activityLogFull{padding: 60px 0 0 10px;}
      .tsMGMHeadline{ margin: 10px 0 50px 0;}
  
      .stepShort .stepcontent.stepshortbuttons{
          display: none;
      }
      .stepShort .stepstatus .ts-button{
          display:block;
      }
      .stepShort .stepcontent.stepstatus{
          grid-row: 1 / 3;
          grid-column: 5 / 7;
      }
      .stepstatussymbol{
          margin: 0 auto;
      }
  
      #unreadNotifications{color: #9D2537;}
  
  
  
  
  }
  
  
  /*========================= FAVORITES & REMINDERS =================== */
  #remindersPage{padding: 100px 50px 100px 50px;}
  #favoritesPage .openColumns{padding: 100px 0 0 50px; float: left;}
  #favoritesPage .doneColumn{float: right; background: #45b7e7; padding: 0 20px 0 20px;}
  
  
  .favItem{margin: 1% 0 0 0;}
  .favItemHeader{font-size: 0.7em; text-transform: uppercase; font-style: italic;}
  .favItemHeader .remindDate{font-weight: bold;}
  .favItemHeader .npath{color: #00ace8;}
  .favItemHeader .remindDate{color: #9d2537;}
  .favItemHeader .favPos{color: #00ace8;}
  .reminderHeadline{margin: 2% 0;}
  .toggleFutureReminders{text-transform: uppercase;  margin: 2% 0; font-style: italic;}
  .toggleFutureReminders{color: #00ace8;}
  
  .stepIsFav{position: absolute; top: -11px; left: -11px;}
  .unfavbutton {background: url("/ts/images/icon_favoriteRemove.png"); background-size: 20px;}
  .unfavbutton {display: block; width: 20px; height: 20px; cursor: pointer; }
  .stepfavbutton {background: url("/ts/images/icon_favoriteAdd.png") no-repeat;}
  .stepfavbutton, stepfavbutton:hover {
      display: block; height: 20px; width: 20px; background-size: 20px; float: right; cursor: pointer; margin: 0 10px 0 0;
  }
  .stepReminderButton{position: absolute; top: -7px; left: -10px;}
  .stepReminderButton {background: url("/ts/images/icon_reminder.png"); background-size: 20px;}
  .stepReminderButton {display: block; width: 20px; height: 20px; cursor: pointer; }
  .stepReminderButton.isAlsoFavorite{top: 10px;}
  
  .tsHelper{width: 15px; height: 15px; margin: 0 0 5px 2px; cursor: pointer;}
  .helperDialogText{font-size: 0.8em; line-height: 1.1em;}
  
  .addFavButton{display: block; width: 580px; height: 125px; background: url("/ts/images/icon_addTile.png") 200px 10px/100px 100px no-repeat; border: 1px dotted #A5A5A5;}
  .addFavButtonText{display: none;}
  .addFavButton:hover{background: white; border: 1px dashed #00ace8; cursor: pointer;}
  .addFavButton:hover .addFavButtonText{display: block; color: #00ace8; font-size: 20px; padding: 50px 0 20px 0;
                   text-align: center; text-transform: uppercase; font-weight: bold;
  }
  
  @media screen and (max-width: 800px){
      .stepfavbutton, stepfavbutton:hover {
          display: none;
      }
  }
  
  
  /*============================ AGILE BOARDS ========================== */
  
  #agileBoardWrapper{margin: 25px 0 0 0;}
  .agileBoard{padding: 70px 0 0 0;  white-space: nowrap;}
  .agileColumn {display: inline-block; vertical-align: top; margin: 0 50px 0 0; min-height: 500px; padding: 10px 0 0 0;}
  
  .doneColumn .agileColumn {margin: 125px 0 0 0;}
  .doneColumn .agileColumnTitle {color: white; position: relative; }
  .doneColumn .agileColumnTitle:hover{cursor: pointer; border: 1px solid white; padding: 1px;}
  #agileBoardOpen{width: auto; overflow-x: visible;}
  #agileBoardOpen.scrolling{overflow-x: scroll;}
  
  
  
  .agileColumnTitle{margin: 0 0 40px 0; padding: 2px;}
  .listColumnTitle{margin: 0;}
  .agileColumnTitle{text-transform: uppercase; font-weight: bold; text-align: center;}
  .agileBoardHeader h2{float: left;}
  .userMarkerMenu{float: left; margin: 0 0 0 25px; font-weight: bold; padding: 5px 20px; border-radius: 15px; cursor: pointer; position: relative;}
  .userMarkerMenu{border: 1px solid #9D2537;}
  .userMarkerMenu:hover, .userMarkerMenu.open{color: white; background: #9D2537;}
  .userMarkerMenu .userList{position: relative; left: 0; top: 50px; width: 300px; border: 1px solid #9D2537; background: white; padding: 15px 10px; z-index: 10;}
  .userMarkerMenu .userListOuter{display: none; position: absolute; top: 0; left:0;}
  .userMarkerMenu:hover .userListOuter{display: block;}
  .userMarkerMenu .coloredUser {margin: 5px 0 0 0; padding: 3px 0 3px 0; border: 2px solid #CCC; color: #333;}
  .userMarkerMenu .coloredUser span {display: inline-block; margin: 1px 0 0 5px;}
  
  .userMarkerMenu .coloredUser .checkboxInput{visibility: hidden;}
  .userMarkerMenu .coloredUser .checkbox{width: 20px; position: relative; display: inline-block; vertical-align: middle;}
  .userMarkerMenu .coloredUser label {  cursor: pointer;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 0;
      left: 0;
      background: white;
      border:1px solid #9D2537;}
  .userMarkerMenu .coloredUser label:after {    
      content: "";
      color: #9D2537;
      position: absolute;
      font-size: 13px;
      left: 3px;
      top: -1px;
  }
  /*.userMarkerMenu .userList{display: block;}*/
  
  .userMarkerMenu .coloredUser .checkbox input[type=checkbox]:checked + label:after {
      content: "X";
  }
  
  
  .agileGroup {margin: 40px 0 0 0;  position: relative;}
  .agileGroupDropdown,.agileTaskDropdown{font-size: 10px; display: inline-block; vertical-align: middle; height: 16px; margin: 0 5px 0 0;}
  .agileGroupName{cursor: pointer;}
  .agileTask{width: 95%; margin: 0.2em 0 0 1em; position: relative;}
  .agileTaskName{display: block; /*border: 1px solid #ccc; */padding: 0 20px 0 0; cursor: pointer; }
  .agileTaskName .tName{width: 180px;}
  .agileTask .taskstatus{top : -4px;}
  .agileGroup .agileTasks{margin: 15px 0 0 0;}
  .agileGroup .groupstatus{top : -5px;}
  .agileTasks.hiddenTasks{display:none;}
  .agileStep{position: relative; margin: 10px 0 2px 0; padding: 10px; border: 2px solid #ccc; font-size: 0.8em; cursor: pointer; }
  .agileStep:hover{border: 2px solid #45B7E7;}
  .agileGroup, .agileTask, .agileStep{white-space:initial; word-wrap: break-word;}
  .agileTask .agileStep{margin: 2px 0 2px 15px;}
  .agileStepName {font-weight: bold;}
  
  #stepShortDialog .stepShort{margin: 0 0 30px 0; padding: 20px 20px 20px 20px;}
  #stepShortDialog .scrollBox{max-height: 90%; overflow-y: scroll;}
  #stepShortDialog .npath{font-size: 0.7em; text-transform: uppercase; font-style: italic;margin: 0 0 30px 0; padding: 20px 20px 0 20px; display: block;}
  #stepShortDialog .npath{color: #00ace8;}
  
  .agileStepPath{font-size: 0.7em; text-transform: uppercase; font-style: italic;margin: 0 0 0 0; padding: 0; display: block; position: relative;}
  .agileStepPath{color: #00ace8;}
  .agileStepStatus{position: absolute; right: -7px; top: -7px; height: 12px; width: 12px;}
  
  
  
  .viewNavIcon{height: 25px; width: 25px; display: inline-block; margin: 0 0 0 5px;}
  .viewNavIcon:first-child{margin: 0 0 0 25px;}
  #listMetaViewInner .viewNavIcons{vertical-align: bottom; margin: 0 0 7px 0; display: inline-block;}
  
  #myAgileBoard{cursor: pointer; display: inline-block; background: url("/ts/images/topmenuStats.png") no-repeat; background-size: 25px; }
  #myFavoriteSteps,
  #backToList{cursor: pointer; display: inline-block; background: url("/ts/images/icon_listTop_manage.png") no-repeat; background-size: 25px; }
  #toAgileBoard{cursor: pointer; display: inline-block; background: url("/ts/images/icon_listTop_agile.png") no-repeat; background-size: 25px;}
  #topListStats{cursor: pointer; display: inline-block; background-image:url("/ts/images/icon_listTop_stats.png"); background-size: contain; background-size: 25px; }
  #manageList{cursor: pointer; display: inline-block; background: url("/ts/images/icon_listTop_manage.png") no-repeat; background-size: 25px; }
  #openTasksAndSteps{cursor: pointer; display: inline-block; background: url("/ts/images/icon_listTop_work.png") no-repeat; background-size: 25px;}
  
  #backToList:hover, #backToList.act{background: url("/ts/images/icon_listTop_work_act.png") no-repeat; background-size: 25px; }
  #toAgileBoard:hover, #toAgileBoard.act{background: url("/ts/images/icon_listTop_agile_act.png") no-repeat; background-size: 25px;}
  #topListStats:hover, #topListStats.act{background: url("/ts/images/icon_listTop_stats_act.png") no-repeat; background-size: 25px;}
  #manageList:hover, #manageList.act{background: url("/ts/images/icon_listTop_manage_act.png") no-repeat; background-size: 25px;}
  #openTasksAndSteps:hover, #openTasksAndSteps.act{background: url("/ts/images/icon_listTop_work_act.png") no-repeat; background-size: 25px;}
  
  .agileColumnTitle{position: relative;}
  .agileColumnTitle:hover{cursor: pointer; border: 1px solid #45B7E7; padding: 1px;}
  
  .agilecolumneditmenu{    
      display: none;       
      font-size: 7pt;
      font-weight: normal;
      position: absolute;    
      z-index: 3;        
      right: -5px;
      top: -7px;
  }
  .agilecolumnaddbutton {background: url("/ts/images/icon_add.png") no-repeat;}
  .agilecolumndeletebutton {background: url("/ts/images/icon_delete.png") no-repeat;}
  
  .agileColumnTitle:hover .agilecolumneditmenu{display: block;}
  
  
  
  .agilecolumneditbutton {background: url("/ts/images/icon_edit.png") no-repeat;}
  .agilecolumnaddbutton:hover {background: url("/ts/images/icon_add_hover.png") no-repeat;}
  .agilecolumneditbutton:hover {background: url("/ts/images/icon_edit_hover.png") no-repeat;}
  .agilecolumndeletebutton:hover {background: url("/ts/images/icon_delete.png") no-repeat;}
  
  .agilecolumnhidebutton {background: url("/ts/images/icon_hide.png") no-repeat;}
  .agilecolumnhidebutton:hover {background: url("/ts/images/icon_hide.png") no-repeat;}
  
  
  .agilecolumnbutton, .agilecolumnbutton:hover {display: block; height: 15px; width: 15px; background-size: 15px; float: right; cursor: pointer; margin: 0 0 0 5px;}
  
  .agileBoard .addFavButton {margin: 25px 0 0 0; max-width: 100%; background: url("/ts/images/icon_addTile.png") center center/100px 100px no-repeat;}
  .agileBoard .addFavButton:hover {background:white;}
  .agileBoard.columns-3 .addFavButton {min-width: 27%; }
  .agileBoard.columns-4 .addFavButton {min-width: 20%; }
  .agileBoard.columns-5 .addFavButton {min-width: 15%; }
  .agileBoard.columns-over .addFavButton {min-width: 12%; }
  
  
  /*.currentAgileStepBlinking {box-shadow: -2px -2px 30px #45B7E7;}*/
  .currentAgileStepBlinking {border: 20px solid #45B7E7;}
  
  
  
  .agileStepEditMenu{        
      font-size: 7pt;
      font-weight: normal;
      visibility: hidden;
      position: absolute;    
      top: -7px;
      right: -12px;
      z-index: 3;
  }
  
  .stepdeletebutton{background: url("/ts/images/icon_delete.png") no-repeat;}
  /*.stepdeletebutton:hover{background: url("/ts/images/icon_delete_hover.png") no-repeat;}*/
  
  
  .stepunfavbutton {background: url("/ts/images/icon_favoriteRemove.png") no-repeat;}
  
  .stepdeletebutton, .stepunfavbutton,
  .stepdelete:hover, .stepunfavbutton:hover {
      display: block; height: 15px; width: 15px; background-size: 15px; float: right; cursor: pointer; margin: 0 5px 0 0;
  }
  .agileStep:hover .agileStepEditMenu{  visibility: visible; }
  .favoriteStepsHeaderIcon{float: left; height: 40px; width: 40px; margin: -5px 12px 0 0px;}
  
  .agileColumn.receiving{background: #EBF2FC;}
  
  .agileFixedMenu {position: fixed; z-index: 9933; top: 42px; display: none;}
  .agileFixedMenu .agileFixedMenuColumn{width: 200px; display: inline-block; text-transform: uppercase; font-weight: bold; text-align: center;
                                          padding: 10px 0 10px 0; margin: 0 50px 0 0; vertical-align: top;}
  
  .agileFixedMenu .agileFixedMenuOpenColumns {background: white; float: left; margin: 0 0 0 50px; height: 40px; overflow: hidden;}
  .agileFixedMenu .agileFixedMenuDoneColumn {color: white; background: #45b7e7; float: right; 
                            margin: 0; padding: 10px 20px 10px 20px; right: 50px;}
  .agileFixedMenu.scrolled{display: block;}
  
  
  .agileColumnTitle, .agileFixedMenuColumn{white-space: nowrap; }
  .hiddenagilecolumn, .hiddenFixedMenuColumn {color: #8b8b8b; font-size: 13px; }
  .hiddenagilecolumn .agileColumnTitle,
  .agileFixedMenuColumn.hiddenFixedMenuColumn  {white-space: normal; }
  
  
  /* ============ SUMMERNOTE ============ *//*
  .stepname, .stepcomment {cursor: pointer;}
  #summernoteOverlay{display: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:117; }
  #summernoteOverlay.active{display: block;}
  #summernoteOverlayInner{margin: 0; background: white; width: 500px; padding: 10px 5px 30px 5px;}
  
  #groupstaskssteps.overlayActive,
  #pageContainer.overlayActive{opacity: 0.25;}
  .note-modal-backdrop{display: none !important;}
  #summernoteButtons .ts-button {float: right; margin: 5px 0 0 10px; }
  .stepname a:hover,
  .stepcommentname a:hover {color: #92D392; cursor: pointer;}
  
  
  #summernoteOverlay .note-editable{font-family: "Open Sans", Arial, sans-serif; font-size: 10pt;}
  #summernoteOverlay .note-editable ul, 
  #summernoteOverlay .note-editable ol {list-style-position: outside; padding: 0 0 0 30px;}
  */
  
  
  #oneStepShortOverlay{display: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:112; }
  #oneStepShortOverlay.active{display: block;}
  #oneStepShortOverlayInner{margin: 0; background: white; width: 500px; padding: 30px; border: 2px solid #CCC;}
  
  
  #oneStepShortOverlayInner .stepShort{margin: 0 0 30px 0; padding: 20px 20px 20px 20px;}
  #oneStepShortOverlayInner .scrollBox{max-height: 90%; overflow-y: scroll;}
  #oneStepShortOverlayInner .npath{font-size: 0.7em; text-transform: uppercase; font-style: italic;margin: 0 0 30px 0; padding: 20px 20px 0 20px; display: block;}
  #oneStepShortOverlayInner .npath{color: #00ace8;}
  
  
  
  
  /* ===================== trumbowyg ====================== */
  
  .trumbowyg-box,
  .trumbowyg-editor{
      min-height: auto;
      border: none;
  }
  
  .trumbowyg-editor,
  .trumbowyg-textarea{
      padding: 0;
  }
  
  .trumbowyg-editor.stepname{
      padding: 5px 0 10px 0;
      width: 95%;
  }
  
  .trumbowyg-editor.stepcommentname{    
      width: 100%;
  }
  
  .stepShort .trumbowyg-editor.stepname{padding: 5px 0 10px 5px;}
  
  
  .step .trumbowyg-button-pane{
      display :none;
  }
  
  .trumbowyg-button-pane.showEditorButtons{
      display: block;
      padding: 0;
      min-height: auto;
  }
  
  
  .trumbowyg-button-pane .trumbowyg-button-group::after,
  .trumbowyg-button-pane::after{
      height: 0;
      background: none;    
  }
  
  
  .trumbowyg-button-pane button{
      padding: 0;
      height: 25px;
      width: 25px;
  }
  
  
  
  
  
  /* ====================== MOBILE MENUS ===================== */
  
  .toggleMobileEditMode.mobileEditModeEnabled{color: #9D2537;}
  
  #mobileLeftMenuContainer{
      position: fixed;
      left: 0;
      top: 0;
      background:#EEE;
      padding-top: 50px;
      height: 100vh;
      overflow: scroll;
  }
  
  #mobileLeftMenuContainer.mobileLeftMenuDisabled{
      display: none;
  }
  #mobileLeftMenuContainer.mobileLeftMenuEnabled{
      display: block;
  }
  
  .openMobileMenu{
      position: absolute;    
      left: 0;
      top: 0;    
  }
  
  .mobileEditModeDisabled .openMobileMenu{
      visibility: hidden;
  }
  
  .mobileEditModeEnabled .openMobileMenu{
      visibility: visible;
  }
  
  .group .openMobileMenu{left: -20px;}
  .task .openMobileMenu{left: -50px;}
  .step .openMobileMenu{left: -10px; top: 30px;}
  .dashTile .dashTSList .openMobileMenu{left: -50px; top: 5px;}
  .dashTile .openMobileMenu{left: -30px; top: -10px;}
  
  .openMobileMenu::before{
      content: "\2630";
  }
  
  .openMobileMenu.openMobileMenuOpen{
      color: #9D2537;   
  }
  
  #pageContainer.mobileLeftMenuDisabled.mobileEditModeEnabled{
      width: 95%;
      margin-left: auto;    
  }
  #groupstaskssteps.mobileLeftMenuDisabled.mobileEditModeEnabled{
      width: 95%;
      margin-left: auto;    
  }
  
  #pageContainer.mobileLeftMenuEnabled,
  #groupstaskssteps.mobileLeftMenuEnabled{
      width: 66%;
      margin-left: auto;  
  }
  
  #groupstaskssteps.mobileEditModeEnabled #groupstaskscontent{
      overflow: visible;
  }
  
  #pageContainer.mobileLeftMenuDisabled,
  #groupstaskssteps.mobileLeftMenuDisabled,
  #pageContainer.mobileEditModeDisabled,
  #groupstaskssteps.mobileEditModeDisabled
  {
      width: 100%;
      margin: 0;
  }
  
  .mobileLeftMenu li{
      font-size: 0.9em;
      padding: 0.75em 0.5em;
      border-bottom: 1px dotted #CCC;
  }
  
  .mobileLeftMenu li:first-child{
      border-top: 1px dotted #CCC;
  }
  

  @media screen and (min-width: 800px){
    #pageContainer.activityLogOpen,
    #groupstaskssteps.activityLogOpen    
    {
      width: 80%;      
    }
  }


  
  /*================ GERMANINFO ===================*/
  
  .germanInfoBulletPoints{      
      margin-left: 1.25em;
      padding-left: 0;
      /*list-style-position: outside;*/
  }

  .germanInfoBulletPoints li{   
    padding-left: 1em;    
}
  
  
  
  
@media screen and (min-width: 800px) {
  #groupstasks {
    position: fixed;
    height: 97vh;
    top: 3vh;
    overflow-y: hidden;  
    left: 0;
    width: 300px;
  }
}