* {
  box-sizing : border-box;
}

body {
  margin : 0px;
  padding : 0px;
  font-family : sans-serif;
  box-sizing : border-box;
}

/* ------------------ HEADER AREA ------------------------ */

div#header {
  text-align : right;
  padding-right : 20px;
  height : 40px;
  border-bottom: 1px solid gray;
  background-color: #e8e8e8;
  position : fixed;
  top : 0px;
  left : 0px;
  right : 0px;
}

div#header div.header-icon {
  display : inline-block;
  position : relative;
  top : 50%;
  transform: translateY(-50%);
  font-size : 1.2em;
}

div#header div.header-icon div.notification-num {
  display : inline-block;
  margin : 0px;
  padding : 0px;
  position : absolute;
  border : 1px solid #e8e8e8;
  text-align : center;
  width : 14px;
  height : 14px;
  font-size : 10px;
  border-radius : 7px;
  background-color : #555;
  color : white;
  top : 50%;
  right : -15%;
}

/* ------------------- SIDE NAV AREA ----------------- */

div#sidenav {
  position : fixed;
  width : 180px;
  left : 0px;
  top : 41px;
  bottom : 0px;
  border-right: 1px solid gray;
  background-color: #e8e8e8;
  text-align: center;
  color : #2F79B9;
  padding-top : 10px;
}

div#sidenav a {
  /* text-decoration : inherit; */
  color : inherit;
}

div#sidenav div.side-icon {
  margin-bottom: 10px;
}

div#sidenav div.side-icon i.fa {
  font-size : 3em;
}

/* ------------ MAIN CONTENT AREA ------------------------------ */

div#main {
  position : fixed;
  top : 41px;
  left : 181px;
  right : 0px;
  bottom : 0px;
  padding : 10px;
  overflow : auto;
}

div#main div#searchheader {
  position : relative;
  border-bottom : 1px solid black;
  margin-bottom : 1em;
  height : 30px;
}

div#main div#searchheader div.search {
  position : absolute;
  right : 0px;
  top : 0px;
}

div.search input {
  border : 0px;
  background-color : #aaa;
  padding : 3px;
  padding-left : 1em;
  padding-right : 2.5em;
  border-radius : 15px;
  color : white;
  outline : none;
}

div.search i.fa-search {
  color : white;
  position : absolute;
  right : 0.8em;
  top : 2px;
}

/* --------------- Quick Tasks -------------------------------- */

div#main div#quicktasks div.qt-icon {
  border : 1px solid gray;
  padding : 5px;
  display: inline-block;
  text-align : center;
  background-color : #e8e8e8;
  color : #2F79B9;
  width : 30%;
  position : relative;
}

div#main div#quicktasks div.qt-icon:nth-child(3) {
  position : absolute;
  left : 50%;
  transform: translateX(-50%);
}

div#main div#quicktasks div.qt-icon:last-child {
  float : right;
}

div#main div#quicktasks div.qt-icon i.fa {
  font-size : 3em;
}

div#main div#quicktasks {
  width : 49%;
  float : left;
}

/* --------------- Workflows -------------------- */

div#main div#workflows {
  width : 49%;
  float : right;
}

div#main div#workflows div.workflow {
  border : 1px solid gray;
  padding : 0.8em;
  background-color : #e8e8e8;
  margin-bottom : 0.5em;
}

div#main div#workflows div.workflow:last-child {
  margin-bottom : 0px;
}

div#main div#workflows div.details {
  float : left;
  width : 60%;
}

div#main div#workflows div.progress {
  float : right;
  width : 35%;
  text-align : center;
  position : relative;
}

div#main div#workflows div.progress.completed {
  text-align : right;
}

div#main div#workflows div.progress.completed div.links {
  display : inline-block;
  text-align : left;
}

div#main div.progress progress {
  width : 100%;
}

div#main div#workflows div.progress.running progress::-webkit-progress-value {
  background-color : orange;
}

div#main div#workflows div.progress.running progress::-moz-progress-bar {
  background-color : orange;
}

div#main div#workflows div.progress.running {
  color : #b36b00;
}

div#main div#workflows div.progress.failed progress::-webkit-progress-value {
  background-color : red;
}

div#main div#workflows div.progress.failed progress::-moz-progress-bar {
  background-color : red;
}

div#main div#workflows div.progress.failed {
  color : red;
}

div#main div#workflows div.progress div.textindicator {
  color : black;
  font-size : 10px;
  font-weight : bolder;
  position : absolute;
  left : 50%;
  top : 5px;
  transform: translateX(-50%);
}

/* --------------- Recent ----------------------- */

div#main div#recent {
  float : left;
  margin-top : 0.5em;
  padding-top : 1.6em;
  padding-bottom : 0.3em;
  width : 49%;
}

div#main div#recent table {
  width : 100%;
  border-spacing : 0 10px;
}

div#main div#recent table td {
  border : 1px solid gray;
  margin : 0px;
  background-color : #e8e8e8;
}

div#main div#recent table td {
  border-left : 0px;
  border-right : 0px;
  padding : 8px 8px;
  white-space: nowrap;
}

div#main div#recent table td:first-child {
  border-left : 1px solid gray;
  width : 1%;
}

div#main div#recent table td:last-child {
  border-right : 1px solid gray;
  width : 1%;
}

/* -------------- ACTIVITY STREAM ---------------- */

div#main div#activitystream {
  float : right;
  width : 49%;
  margin-top : 0.5em;
  padding-top : 1.6em;
  padding-bottom : 0.3em;
}

div#main div#activitystream table {
  width : 100%;
  border-spacing : 0 10px;
}

div#main div#activitystream table td {
  border : 1px solid gray;
  margin : 0px;
}

div#main div#activitystream table td {
  border-left : 0px;
  border-right : 0px;
  padding : 8px 8px;
  white-space: nowrap;
  background-color : #e8e8e8;
}

div#main div#activitystream table td:first-child {
  border-left : 1px solid gray;
}

div#main div#activitystream table td:last-child {
  border-right : 1px solid gray;
  width : 1%;
}

/* --------------- MAIN PAGE ----------------------- */

div.mainleftpane {
  position : fixed;
  top : 125px;
  bottom : 10px;
  width : 250px;
}

div.mainrightpane {
  position : fixed;
  top : 125px;
  bottom : 10px;
  right : 10px;
  left : 450px;
  border : 1px solid gray;
  padding : 5px 10px;
  overflow : auto;
}

div.mainleftpane div.addnew {
  border : 1px solid gray;
  padding : 3px;
  background-color : #e8e8e8;
  margin-bottom : 3px;
}

div.mainleftpane div.selectionds {
  position : absolute;
  z-index : 2000;
  background-color : white;
  padding : 3px;
  width : 100%;
  border : 1px solid gray;
  display : none;
}

div.mainleftpane div.list {
  position : absolute;
  top : 60px;
  left : 5px;
  right : 5px;
  bottom: 5px;
  overflow : auto;
  border : 1px solid gray;
}

div.listpane {
  border : 1px solid gray;
  padding : 5px;
  height : calc(100% - 30px);
}

div.listpane div.search {
  white-space: nowrap;
}

div.listpane div.search i.fa-search {
  position : relative;
  left : -25px;
  top : 1px;
}

div.listpane div.search input {
  width : 100%;
}

div.list div.link {
  white-space: nowrap;
  padding : 2px;
  padding-left : 5px;
  cursor : pointer;
}

div.list div.link:nth-child(odd) {
  background-color : #eee;
}

div.list div.link:nth-child(even) {
  background-color : #ddd;
}

div.list div.link.selected, div.list div.treeitem.selected {
  background-color : black;
  color : white;
}

div.mainrightpane div.icons {
  float : right;
}

div.mainrightpane div.icons div.icon {
  display : inline-block;
  text-align: center;
  font-size : 70%;
  width : 40px;
}

div.mainrightpane div.icons div.icon:first-child {
  display : inline-block;
  text-align: center;
  font-size : 70%;
  width : 70px;
}

div.mainrightpane div.icons div.icon button {
  font-size : 180%;
}

div.mainleftpane.anal div.addnew {
  display : none;
}

div.mainleftpane.anal div.listpane {
  height : 100%;
}

div.mainleftpane.anal div.list {
  top : 30px;
}

div.mainrightpane div.workflowitems {
  border : 1px solid gray;
  height : calc(100% - 100px);
  overflow : auto;
}

div.mainrightpane div.workflowitems div.workflowitem {
  white-space: nowrap;
  padding : 2px;
  padding-left : 5px;
}

div.mainrightpane div.workflowitems div.workflowitem:nth-child(odd) {
  background-color : #eee;
}

div.mainrightpane div.workflowitems div.workflowitem:nth-child(even) {
  background-color : #ddd;
}

div.newdsdialogue {
  width : 40vw;
  min-width : 350px;
}

div.newdsdialogue div.dsheader {
  display : inline-block;
  width : 150px;
  overflow : hidden;
  white-space : nowrap;
}

div.newdsdialogue div.dsheader span {
  cursor : default;
  -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 not supported by any browser */
}

div.newdsdialogue input,div.newdsdialogue textarea,div.newdsdialogue select {
  width : 100%;
}

div.newdsdialogue textarea {
  height : 4em;
  font-family : sans-serif;
}

div.newdsdialogue input[type=checkbox] {
  width : auto;
}

/* --------------- GENERAL ------------------------ */

h1,h2,h3,h4,h5,h6 {
  margin-top : 0px;
}

div.tabs div.tab {
  display : inline-block;
  border : 1px solid #aaa;
  border-bottom : 0px;
  border-right : 0px;
  border-top-left-radius: 3px;
  border-top-right-radius : 3px;
  background-color : #e8e8e8;
  padding: 3px 10px;
  font-weight : bold;
  cursor : pointer;
}

div.search ::-webkit-input-placeholder {
   color: #eee;
}

div.search :-moz-placeholder { /* Firefox 18- */
   color: #eee;
}

div.search ::-moz-placeholder {  /* Firefox 19+ */
   color: #eee;
}

div.search :-ms-input-placeholder {
   color: #eee;
}

div.tabs div.tab.selected {
  background-color : white;
}

div.tabs div.tab:last-child {
  border-right : 1px solid #aaa;
}

div.window {
  border : 1px solid gray;
  padding : 0.8em;
  padding-top : 2.5em;
  position : relative;
}

div.window div.title {
  position : absolute;
  top : 0px;
  left : 0px;
  right : 0px;
  background-color : #e8e8e8;
  border-bottom: 1px solid gray;
  padding : 4px;
}

div.circleoverlay {
  width : 1em;
  height : 1em;
  border-radius : 0.5em;
  color : white;
  background-color : #2F79B9;
  display : inline-block;
}

div.clear {
  clear : both;
}

div.featherlight-content {
  border : 4px solid gray !important;
  padding-bottom : 1em !important;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   height : 1em;

   border : none;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg,
	                           transparent 33%, rgba(0, 0, 0, .1) 33%,
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top,
	                           rgba(255, 255, 255, .25),
	                           rgba(0, 0, 0, .25));
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    );

  border-radius: 2px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}