#wpsTab {
	margin-bottom: 10px;
}

#wpsPanel.ui-layout-pane {
	background-color: #333;
	padding: 0px 5px;
	color: white;
}
#wpsPanel a.whiteLink { color: white }
#wpsPanel a.whiteLink:hover { color: #eee; }
#wpsPanel .whiteLinks a { color: white }
#wpsPanel .whiteLink a:hover { color: #eee; }


#wpsPanel > h4 {
	border-bottom: 1px solid gray;
	color: white;
}

#wpsPanel .tab-content {
    overflow: initial;
}

#servicesList {
	min-height: 200px;
	padding-bottom: 90px;
}

#servicesList .serviceItem {
	width: 102px;
	height: 110px;
	display: inline-block;
	font-size: 10px;
	line-height: 11px;
	padding: 10px 18px;
	position: relative;
	color: white;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#servicesList .serviceItem:hover {
	cursor: pointer;
}

#servicesList .serviceItem:hover  {
}

#servicesList .serviceItem > .icon {
	width: 100px;
	height: 100px;
	border-radius: 6px;
	font-size: 81px;
	text-align: center;
	position: absolute;
	z-index: 200;
	
    background-size: cover;
    background-position: 50% 50%;
    
    overflow: hidden;
    
/* 	box-shadow: 0px 0px 13px #333;
    background-color: white;
 */
}

#servicesList .serviceItem > .icon > .watermark {
    background-color: #FF9800;
    transform: rotate(-34deg);
    left: -21px;
    top: 12px;
    position: absolute;
    padding: 2px 17px;
}

#servicesList .serviceItem > .icon > i { margin-top: 10px; }
#servicesList .serviceItem > .icon > span { display: block; font-size: 36px; font-weight: bold; margin-top: 42px; }

#servicesList .serviceItem > .title {
	position: absolute;
	top: 114px;
	text-align: center;
	display: block;
	height: 13px;
	left: 4px;
	right: 4px;
	width: auto;
}
#servicesList .serviceItem:hover > .title{ display:none; }

#servicesList .serviceItem > .hoverBlack {
	background: black;
	border-radius: 5px 5px 0px 0px;
	position: absolute;
	z-index: 100;
	top: 0px;
	left: -5px;
	top: -5px;
	right: -5px;
	bottom: 17px;
	display: none;
	/* box-shadow: 0px 0px 20px black; */
}
#servicesList .serviceItem:hover > .hoverBlack { display: block; }

#servicesList .serviceItem > .hoverDescription {
	position: absolute;
	background: black;
	left: -5px;
	right: -5px;
	top: 113px;
	z-index: 300;
	border-radius: 0px 0px 5px 5px;
	padding: 6px;
	display: none;
	/* box-shadow: 0px 0px 20px black; */
}
#servicesList .serviceItem:hover > .hoverDescription { display: block; }

#servicesList .serviceItem > .hoverDescription > .title {
	font-size: 12px;
	line-height: 14px;
}
#servicesList .serviceItem > .hoverDescription > .description {
	color: #C9C9C9;
}

#servicesList .servicesListForm{
    color: black;
    font-size: 13px;
    font-size: 12px;
    line-height: 10px;
	padding-bottom: 20px;
	display: flex;
}
#servicesList .servicesListForm > div:not(.buttons) {
	flex-grow: 1;
    flex-basis: 185px;
    padding: 5px;
}
#servicesList .servicesListForm > div.buttons {
	padding: 5px;
	white-space: nowrap;
}
#servicesList .servicesListForm > div.buttons > button {
	width: 25px;
	height: 25px;
}

/* services list - list view */
#servicesList.listView .serviceItem {
	display: block;
	width: 100%;
	font-size: 15px;
	box-sizing: border-box;
	border-bottom: 1px solid #444;
	margin: 0px;
	height: 47px;
	padding: 6px 9px;
}
#servicesList.listView .serviceItem > .icon {
	width: 35px;
	height: 35px;
	position: static;
	float: left;
}
#servicesList.listView .serviceItem > .title {
	position: static;
	text-align: left;
	height: auto;
	margin: 8px 0px 0px 40px;
	line-height: 34px;
}
#servicesList.listView .serviceItem:hover { background-color: black; }
#servicesList.listView .serviceItem:hover > .title { display: block; }
#servicesList.listView .serviceItem:hover > .hoverBlack { display: none; }
#servicesList.listView .serviceItem:hover > .hoverDescription {
	top: 39px;
	height: auto;
	pointer-events: none;
	margin: 5px;
	padding: 7px 7px 0px 7px;
	line-height: 16px;
}
#servicesList.listView .serviceItem > .hoverDescription > .title { display: none; }



/* process details */

#processDetails {
	display: none;
	margin: 0px 5px 10px 5px;
}
#processDetails .back {
	float: left;
}
#processDetails h3 {
	margin-bottom: 16px;
	line-height: 24px;
}
#processDetails .identifier {
	font-size: 10px;
	color: #ccc;
	/* border-bottom: 1px solid rgb(243, 156, 0); */
	margin-bottom: 5px;
}
#processDetails .cleanFieldContainer {
	color: #ccc; margin-left: 5px;
}
#processDetails .version {
	font-weight: 200;
    font-size: 16px;
    margin-bottom: 12px;
}
#processDetails .icon {
	float: left;
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 31px;
	line-height: 48px;
	border-radius: 6px;
	margin: 0px 10px 0px 10px;
	background-size: cover;
	background-position: 50% 50%;
	/* background-color: white; */
}
#processDetails .icon > span {
    font-size: 18px;
    font-weight: bold;
    display: block;
}
#processDetails .description {
	font-size: 17px;
	line-height: 23px;
	margin-bottom: 5px;
}
#processDetails .description > a {
    color: #59e7ff;
}
#processDetails .processDetails .form {
	background: #B4B4B4;
	display: block;
	margin: 30px 17px 0px 17px;
	padding: 15px;
	color: black;
	border-radius: 6px;
	position: relative;
}
#processDetails .processDetails .form:before {
	content: "Execution";
	color: white;
	position: absolute;
	top: -17px;
	background-color: #B4B4B4;
	padding: 5px 10px;
	left: 0px;
}

/* dropdown */
/* #processDetails .getFromClipboard { font-size: 10px; }
#processDetails .getFromClipboard>a { background: none; border: none; }
 */
#processDetails .getFromClipboard>.dropdown-menu { background: #333; min-width: 50px; }
#processDetails .getFromClipboard>.dropdown-menu > li > a { font-size: 12px; line-height: 12px; padding: 3px 10px; }
#processDetails .getFromClipboard>.dropdown-menu > li > a > span { color: #FFC107; font-size: 85%; margin-right: 5px; }
#processDetails .getFromClipboard>.dropdown-menu > li.divider { margin: 2px 0px; border: none; background-color: gray; }
#processDetails .getFromClipboard>.dropdown-menu > li:not(.disabled) > a:hover {
	background: #777;
}

/* wps form field */
.addMoreFields {
	display: inline-block;
}

.removeFields {
	display: inline-block;
}
.addMoreFields:hover, .removeFields:hover, .getFromSearchFields:hover {
	cursor: pointer;
}
#processDetails .fieldContainer {
	position: relative;
	margin-top: 5px;
	margin-bottom: 10px;
}
#processDetails .fieldContainer > .dropMessage {
	display: none;
	background: rgba(255, 255, 255, 0.6);
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: 1000;
	border-radius: 5px;
	color: #555;
	text-align: center;
	line-height: 33px;
	bottom: 0px;
	padding-top: 10px;
}
#processDetails .fieldContainer > fieldset{
	margin-top: 5px;
}
#processDetails .fieldContainer > .dropMessage > span { font-size: 20px }
#processDetails .fieldContainer.dropActive > .dropMessage{ display: block; }
#processDetails .fieldContainer.dropHover > .dropMessage{
	display: block;
	background: rgba(255, 255, 255, 0.8);
	color: black;
}

#processDetails .fieldContainer .tooltip{
	white-space: initial;
}


#processDetails .fieldContainer label.error {
/* 	color: rgb(255, 203, 0); */
/* 	margin-top: -11px; */
	font-size: 11px;	
	font-weight: initial;
	margin-left: -40px;
	background: red;
	padding: 0px 5px;
	color: white;
	border-radius: 2px;
}
#processDetails .fieldContainer .input-group-addon, #processDetails .fieldContainer .input-group-btn {
	vertical-align: top;
}

#processDetails .fieldContainer .wpsInput.wpsInput-select {
	width: 200px;
}

/* wps jobs list */
#wpsPanel .jobsList { color: white; }
#wpsPanel .pagination { text-align: center; }
#wpsPanel .showDropdown { margin-bottom: 10px; }
#wpsPanel .showDropdown > a { height: 26px; line-height: 1.9; }
#wpsPanel .showDropdown li>a { font-size: 12px; line-height: 15px; }
#jobsTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 5px;
}
#jobsTable>.wpsJob {
	background: black;
	border-radius: 5px;
	display: table;
	width: 100%;
	margin-bottom: 6px;
	position: relative;
}
#jobsTable>.wpsJob.wpsJob-isMine {
}
#jobsTable .titleCell {
	width: 66%;
	display: table-cell;
	padding-left: 8px;
}
#jobsTable .statusCell {
	width: 34%;
	display: table-cell;
	vertical-align: middle;
	padding-right: 10px;
}
#jobsTable .statusCell .statusErrorMessage {
	color: rgb(221, 81, 76);
	font-size: 9px;
	margin: 0px;
	padding: 5px 0px 0px 5px;
	line-height: 11px;
}
.jobProgress {
	margin: 0px 8px 0px 5px;
	height: 15px;
	line-height: 16px;
}
.jobProgress .jobProgressMessage {
	width: 100%; line-height: 14px;font-size: 11.844px; font-weight: bold;
}
.jobProgress > .progress-bar.active {
	line-height: 14px;
	font-size: 11px;
	font-weight: bold;
}

#jobsTable .titleCell>small>span {
	font-size: 9px;
	margin-left: 7px;
	color: gray;
}

/* wps job details */
.jobDetails dl { margin-bottom: 10px }
.jobDetails dd{	margin-bottom: 0px; }
.jobDetails .percentage { margin-bottom: 10px; }
.jobDetails .jobResult > .alert.resultMessage {
	overflow: scroll;
	font-size: 11px;
	line-height: 14px;
}

.jobDetails .alert.resultMessage { word-break: break-all; }

.jobDetails .resetDownloadOriginMessage { line-height: 13px; margin: 8px; color: #ffa100; }

.jobDetails .parametersTable {
	color: white;
	font-size: 12px;
	border-color: gray;
	table-layout:fixed;
	width:100%
}

.jobDetails .parametersTable .keyCol{
	width: 25%;
	word-wrap: break-word;
}
.jobDetails .parametersTable .valueCol{
	width: 75%;
	word-wrap: break-word;
}

.jobDetails .jobResults .panel-body {
	line-height: 35px;
}

/* bootstrap */

#wpsPanel .nav-tabs {
	border-bottom: 1px solid #333;
}
#wpsPanel .nav-tabs > li > a {
	padding: 3px 8px;
	color: #eee;
}
#wpsPanel .nav-tabs a:hover {
	background-color: #999;
	border-color: #999;
}
#wpsPanel .nav-tabs > .active > a, #wpsPanel .nav-tabs > .active > a:hover {
	color: white;
	background-color: #7C7C7C;
	border: 1px solid #333;
}

#jobsTable>.wpsJob .delete {
	position: absolute;
	top: 3px;
	right: 3px;
}
#jobsTable .delete>a {
	color: gray;
	display: none;
}
#jobsTable>.wpsJob:hover .delete>a {
  	display: block;
}

.jobtitle{
  	font-family: inherit;
  	font-weight: bold;
  	font-size: 24.5px;
  	color: inherit;
  	text-rendering: optimizelegibility;
  	padding-left:10px;
 }

.jobcontent{
 	font-weight: italic;
 	color: inherit;
 }

.visibilityButton {
	position: relative;
}
.visibilityButton > i { vertical-align: middle; }
.visibilityButton:hover { text-decoration: none; }
.visibilityButton:after {
	content: attr(data-share-tip);
	margin-left: 2px;
	font-size: 10px;
	display: none;
	position: absolute;
	white-space: nowrap;
	top: 0px;
	line-height: 13px;
}
.visibilityButton.shareGrayTip:after {
	background-color: #ddd;
	padding: 0px 3px;
	border-radius: 3px;
}
.visibilityButton:hover:after {
	display: inline-block;
}

.fieldSetIndex {
    font-size: 12px;
    color: lightgray;
}


/* collapsible panels */
#wpsPanel .panel-collapsible {
	border-radius: 6px;
	margin-bottom: 20px;
}
#wpsPanel .panel-collapsible > .panel-header {
	border-radius: 6px 6px 0px 0px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	background-color: rgb(174, 159, 152);
	margin-bottom: 1px;
}
#wpsPanel .panel-collapsible.commercial > .panel-header {
	background-color: #1e87cc;
}
#wpsPanel .panel-collapsible > .panel-body {
	padding: 5px;
	border-radius: 0px 0px 6px 6px;
	background-color: rgb(37 37 37);
}
#wpsPanel .panel-collapsible.panel-closed > .panel-header {	border-radius: 6px 6px 6px 6px; }
#wpsPanel .panel-collapsible.panel-closed > .panel-body { display: none; }
#wpsPanel .panel-collapsible > .panel-header > i.fa {
	float: right;
	font-size: 22px;
}


/* ADD JOB INPUT AND OUTPUT TO DATA PACKAGES */
.addCatalogUrlsDialog table>tbody tr>td:nth-child(2) {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.addCatalogUrlsDialog table>tbody tr>td:nth-child(4), .addCatalogUrlsDialog table>tbody tr>td:nth-child(4)>a {
	word-wrap: break-word;
}