/*
 * CSS styles for flowjs
 * can be changed per instance
 */
.drop-and-actions {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.drop-zone {
	border: 2px #bbb dashed;
	background-color: #efefef;
	width: 100%;
	max-width: 695px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 86px;
}

.drop-zone.with-three-buttons {
	min-height: 134px;
}

.drop-zone .drop-faded {
	color: #bbb;
	font-size: 24px;
	/*margin-top: 16px;
	margin-bottom: 16px;*/
}

.drop-and-actions .drop-more {
	font-size: 10pt;
	height: 100%;
	flex-direction: column;
	justify-content: flex-end;
}

.flowUploadButtons {
	display: flex;
	justify-content: right;
}

.flowUploadButton {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: khaki;
	width: 215px;
	height: 40px;
	justify-content: flex-end;
	align-items: center;
	color: white;
	margin: 3px 0px 3px 10px;
	padding-right: 3px;
	cursor: pointer;
}

.flowUploadButton.emphasized {
	background-color: DarkOrange;
}

.flowUploadButton img {
	height: 32px;
	margin-left: 6px;
	margin-right: 3px;
}

.flowJsStandaloneButtons {
	/*background-color: khaki;*/
	width: 100%;
	display: flex;
	justify-content: center;
}

.flowUploadButton.secondary {
	background-color: #585858;
}

.flowUploadButton.warning {
	background-color: #f0ad4e;
}

.flowUploadButton.disabled {
	background-color: #bbb;
	cursor: default;
}

/* So the sendFile.xhtml font size in the button looks the same like in angular */
a.flowUploadButtonFontConsistency, 
a.flowUploadButtonFontConsistency:visited,
a.flowUploadButtonFontConsistency:hover {
	color: white;
	text-decoration: none;
	font-size: 12px;
}

.flowUploadButtonAbsolutePositioned {
	position: absolute;
	right: 15px;
	transform: translateY(64px);
}

.flowUploadButtonAbsolutePositioned.directoryButtonAlsoPresent {
	transform: translateY(110px);
}

.flowUploadButtonAbsolutePositioned.simpleSend {
	transform: translateY(24px);
}

.flowUploadButtonAbsolutePositioned.simpleUpload {
	transform: translateY(-15px);
}


.flowJsFeedbacks {
	/* background-color: cyan; */
	display: flex;
	justify-content: center;
	width: 100%;
}

.flowJsFeedback {
	background-color: #FFFFDD;
	color: #AAAA33;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: normal;
	flex: 1 1 auto;
	margin: 10px 0;
	height: 24px;
	padding: 4px 10px;
}

.flowJsFeedback img.smallIcon {
	width: 18px;
	height: 18px;
	margin-right: 2px;
	vertical-align: middle;
}

.flowJsFeedback-success {
	/* The A1 red used here */
	color: #FA1D00;
	background-color: #bcecb7;
}

.flowJsFeedback-warning {
	/* typical bootstrap colors used here */
	color: rgb(138, 109, 59);
	background-color: rgb(252, 248, 227);
}

.flowJsFeedback-failure {
	color: #d01e33;
	background-color: #eecccc;
}

table.flowFiles {
	width: 100%;
	margin: 24px 0 0 0;
}

table.flowFiles tr {
	height: 40px;
}

table.flowFiles td {
	background-color: #efefef;
	vertical-align: top;
	padding: 3px;
}

table.flowFiles td img {
	height: 32px;
}

td.flowFilesIndex {
	min-width: 36px;
	vertical-align: middle;
	text-align: center;
}

td.flowFilesStatus {
	min-width: 36px;
}

td.flowFilesFile {
	text-align: left;
	min-width: 36px;
}

td.flowFilesMain {
	width: 99%;
}

td.flowFilesActions {
	min-width: 72px;
}

td.flowFilesActions {
	min-width: 72px;
}

.flowFilesActionsButtons {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap-reverse;
}

.flowFileInfos {
	/* background-color: khaki; */
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-left: 3px;
}

.flowFileInfoNumerics {
	display: flex;
	width: 240px;
	min-width: 240px;
}

.flowFileInfoNumeric {
	text-align: right;
	/* background-color: tomato; */
	width: 120px;
}

.flowFileInfoProgress {
	width: 100%;
	/* background-color: cyan; */
	/* display: flex;
	flex-direction: column;
	justify-content: space-between; */
}

.flowBelowTableFooter {
	display: flex;
	justify-content: flex-end;
	min-height: 40px;
}

.flowBelowTableFooter a, .flowBelowTableFooter a:hover,
	.flowBelowTableFooter a:visited {
	text-decoration: none;
	font-size: 12px;
	color: black;
	cursor: pointer;
}

.flowBelowTableFooter img {
	padding-bottom: 4px;
	margin-left: 6px;
	margin-right: 5px;
	vertical-align: middle;
	height: 32px;
}
/* =============================================== style for the angular progress bar isteven-omni-bar.js */
.containerBar {
	display: inline-block;
	width: 100%;
	/* border-radius: 5px; */
	height: 15px;
}

.maxValue {
	position: relative;
	height: 100%;
	width: 100%;
	/* border-radius: 5px; */
	background-color: #585858;
	overflow: hidden;
}

.currentValue {
	position: absolute;
	left: 0px;
	z-index: 1;
	height: 100%;
	/* border-radius: 5px; */
	background-color: #FA1D00;
}

/* Sub value bar animation on change. You need to include ngAnimate module for this */
.currentValue {
	-webkit-transition: all ease-out 0.8s;
	transition: all ease-out 0.8s;
}

.infoText {
	/* font-weight: bold; */
	position: absolute;
	width: 100%;
	text-align: center;
	color: #fff;
	z-index: 2;
	/* padding-top: 5px; */
	/* text-shadow: 1px 1px #585858; */
}