/*###########################################################################
       =# base settings
  ###########################################################################*/

.bar--positive {
  /*fill: steelblue;*/
  fill: #0066CC;
}

.bar--negative {
  fill: darkorange;
}

#profiling_flex_container {
	width: 1080px;
	/*display: inline-block;
	clear:both;*/
}
#footer {
	display:none;
}

/*###########################################################################
       =# The dynamic user input elements
  ###########################################################################*/
.flexUserInputWrapper {
	margin-bottom: 5px;
}

.flexUserInputWrapper .removeUserInput, .flexUserInputWrapper .deselectAll {
	padding: 0 5px;
}

.flexUserInputWrapper .singleUserSelection {
	width: 100%;
}

/* Make sure, datepicker is not hidden behind e.g. a leaflet map */
.ui-datepicker{
	z-index: 9999 !important;
}

.coloredBackground {
	background-color: #eee;
}

.flexUserInputWrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}

.flexUserInputWrapper .userInputLabel {
    order: 0;
    flex: 0 1 40%;
    align-self: auto;
}

.flexUserInputWrapper .userInput_1 {
    order: 0;
    flex: 0 1 40%;
    align-self: auto;
}

.flexUserInputWrapper .userInput_1_1, .flexUserInputWrapper .userInput_1_2 {
    order: 0;
    flex: 0 1 20%;
    align-self: auto;
}

.flexUserInputWrapper .controlsForOneUserInput {
    order: 0;
    flex: 0 1 30%;
    align-self: auto;
	display: flex;
}

#controlArea {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: black solid thin;
	display: flex;
}

.spinnerLayerWrapper {
	display: block;
	margin-left: 20px;
}

#outputControls .dimensionBox {
	width: 98%;
}
.sortTypeChooseBox {
	width: 98%;
}
.selectedRegions {
	display: none;
}

.dimensionBox .dimension {
	width: 50%;
}
.dimensionBox span {
	width: 10%;
}

.simple_table_data {
	font-size: 120%;
	clear: both;
    border-collapse: collapse;
}
table.simple_table_data td, table.simple_table_data th {
	padding: 5px 10px;
}
table.simple_table_data tr.head {
	padding-bottom: 10px;
}
table.simple_table_data th {
	font-size: 120%;
}
table.simple_table_data tr.odd, table.shapeRelatedTable tr.odd {
	/* #EEEEEE  Hellgrau */
	background-color: #EEEEEE;
}
table.simple_table_data th.sortedByThisColumnDescending {
	background-image: linear-gradient(0deg, #EEEEEE 0%, #CCCCCC 50%)
}
table.simple_table_data th.sortedByThisColumnAscending {
	background-image: linear-gradient(180deg, #EEEEEE 0%, #CCCCCC 50%)
}
.selectedRow {
	/* orange. We need this rule to be important to overwrite the default background color */
	background-color: #ff9933 !important;
}
.bgYellow {
	background-color: yellow;
}
.areaOkay {
	background-color: green;
}
.areaWorking {
	background-color: yellow;

}
.areaError {
	background-color: red;
}

/*
*/

.sortTypeChooseBox {
	margin: 15px 0;
	font-size: 120%;
}
.chartInfoWrapper {
	margin: 15px 0;
	font-size: 150%;
}
.sortTypeChooseBox .labelText {
	padding-right: 5px;
}

.sortTypeChooseBox .buttonGroupDescription {
	float: left;
	padding: 0 1em 1em 0;
}
.chartInfoWrapper .chartWarning {
	color: red;
}
.chartTypeChooser, .fieldSelect {
	margin-bottom: 20px;
}
.chartTypeChooser, #dataExplorerDataFields, #chooseIndex, #showImportFunctions {
	width: auto;
}
.feedbackUnit {
	padding-left: 5em;
	color: red;
}
.feedbackSquare {
	width: 20px;
	height: 20px;
}

.specialDimensionUnit select, .specialDimensionUnit option {
	background-color: #CCCCCC;
}

/*
.collapsible {
	display: none;
}
.iconForCollapsible {
	margin-left: 5px;
	margin-right: 10px;
	width: 8px;
	height: 8px;
	background: url(../images/mobile/arrow.gif) no-repeat;
	display: inline-block;
}
.iconIsOpen {
	background: url(../images/mobile/arrow_down.gif) no-repeat;
}
*/

button#go, button.showBoxPlot, div#feedback {
	margin-left: 20px;
}

button.closeBoxPlot {
	padding: 5px;
	margin: 20px;
	float: right;
}
#floatingWrapperForMapAndBoxplot {
	position: absolute;
	z-index: 10000;
	left: -5000px;
	background-color: white;
	width: 1600px;
	height: auto;
	top: 30px;
	padding-top: 10px;
	padding-right: 10px;
	box-shadow: 2px 3px 4px rgba(0,0,0,.5);
}
#flexWrapperForMapAndBoxplot {
	clear: right;
	display: flex;
	flex-flow: row wrap;
}

#wrapperForOutputList h2 {
	margin: 20px 10px 2px 0;
    display: flex;
    align-items: center;
}

/*
*/

.containerForDuration {
	padding-left: 5px;
}

.infoIconStandalone {
	padding-left: 10px;
}


/* DataExplorer stuff */

.innerOfMulti {
	height: 700px;
	width: 700px;
}

#graphicsWrapper {
	display: flex;
	flex-flow: row wrap;
}

.oneOfMulti {
	/*
	min-width:800px;
	max-width:1000px;
	min-height:800px;
	max-height:1000px;
	 */
}
.adjustSize {
	margin-right: 5px;
}
.inputMap {
	width:800px;
	height:600px;
}
.aggregationOptionsControl {
	display: inline-flex;
	padding: 0px 10px;
}

.aggregationTypeSelection {
	margin-right: 5px;
}

.input-field input {
	margin: 0;
}

/* Materialize_Overwrite: We work with materialize, some settings need to be overwritten */
select {
	display: block;
}
/* ... but flatpickr needs a different setting */
.flatpickr-current-month select {
	display: inline;
}

.oneDimensionUnit, .specialDimensionUnit {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* This will center horizontally:  justify-content: center; */
}

.sortTypeChooseBox [type="radio"]:not(:checked), .sortTypeChooseBox [type="radio"]:checked {
	position: unset;
	opacity: 1;
}
.sortTypeChooseBox .buttonDescription {
	font-size: 110%;
	padding-left: 5px;
}

.container {
	width: 80%;
}

.inputMapWrapper {
	width: 100%;
	margin-top: 10px;
}

span.infoIcon {
	font-size: 24px;
	margin-right: 20px;
	cursor: pointer;
	color: green;
}

.controlsForOneUserInput .limitBoundingBox {
	margin: 0;
	display: flex;
    align-items: center;
    justify-content: center;
}
.controlsForOneUserInput .limitBoundingBox span {
	width: 50%;
	padding: 0 5px;
	text-align:center;
}
.controlsForOneUserInput input.maxAggregationSize {
	min-width: 60px;
	padding: 5px;
	height: 100%;
}

/* Materialize sets height to 3rem but this is not helpful in multivalue selectboxes */
select {
    height: unset;
}

/* nice trick to force a flex item to the next row. Prerequsite: the container has flex-wrap: wrap;
.flexBreak {
  flex-basis: 100%;
  height: 0;
}
*/
.withWrap {
	flex-wrap: wrap;
}
.predefinedQueryText,.infoIcon {
	cursor: pointer;
}
.predefinedQuery.selected {
	background-color: lightgrey;
}

.filterExplanationCollapsible, .outputExplanationCollapsible {
	margin-bottom: 40px;
}
.filterExplanationCollapsible .collapsible-header,.filterExplanationCollapsible .collapsible-body,
.outputExplanationCollapsible .collapsible-header,.outputExplanationCollapsible .collapsible-body {
	background-color: rgba(16, 72, 37, 0.10);
}

.importRegion {
	margin: 50px 0;
}

.draggable-marker-icon {
        background: url(../images/marker_draggable.png) no-repeat;
        width: 86px;
        height: 87px;
}

.complete {
	/* content: "\1F44D   ";  Hexadecimal for Unicode thumb up */
	color: green;
}
.notComplete {
	/* content: "\1F44E   ";  Hexadecimal for Unicode thumb down */
	color: red;
}
.oneCheckMappingResult {
	display: flex;
}
.oneCheckResult {
	padding-left: 30px;
}
.oneCheckResultHeader {
	padding-left: 10px;
}
.checkResultHeader {
	margin-top: 20px;
}
.lineOfDump {
	font-family: monospace;
}
.buttonWrapper {
	margin-top: 20px;
}

.standardOuputMap {
	width: 1280px;
	height: 1024px;
}
.topControlWrapper {
	padding: 10px 10px;
}
#outerCollapsible .topControlWrapper {
	border-bottom: 1px solid #ddd;
}
.topControlWrapper label span {
	padding-right: 30px;
}
.helpText .fieldName {
	font-style: italic;
	font-weight: bold;
}
.helpText .artistName {
	font-style: italic;
}
.helpText ul.examples li {
	text-indent: 1em;
	margin-left: 10px;
	margin-bottom: 10px;
}

.actionButton {
	margin-left: 10px;
}
#permanentFeedback {
	margin-left: 20px;
}
.singleCharacters {
	font-weight: bold;
	background-color: #eee;
	padding-left: 3px;
	padding-right: 3px;
}

.topOfPage {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#chooseLanguage{
	width: auto;
	align-self: flex-end;
}

/* Plausibility check */
.singleIndent {
	padding-left: 15px;
}
.doubleIndent {
	padding-left: 30px;
}
#plausibilityCheck.doNotDisplay {
	display: none;
}

.landingPageImage {
	width: 288px;
}
.landingPageList li {
	font-size: x-large;
	min-width: 500px;
	max-width: 600px;
}
.landingPageList h4 {
	margin-bottom: 20px;
}
.landingPageList {
	display: flex;
	flex-wrap: wrap;
}

span.snapshotDate {
	padding-right: 15px;
}
li.oneDocumentOfKosisIndex {
	font-size: large;
	margin: 15px 0;
	display: flex;
}
li.oneDocumentOfKosisIndex.isSelected {
	background-color: rgba(255, 0, 0, 0.2);
}

.oneResult, .oneShortResult {
    cursor: pointer;
}
.oneResult, .oneShortResult, .theDetailedResult {
    margin: 10px 0;
    padding: 5px;
    border: black solid thin;
}
.oneResult, .oneShortResult, .theDetailedResult {
    display: flex;
    flex-flow: row wrap;
    align-content: stretch;
}
.oneResult div, .oneShortResult div {
	margin: 2px 5px;
	font-weight: bold ;
}
.minus {
	color: red;
}
.plus {
	color: green;
}