:root{
  /* create some color names */
  /* create some color names */
  --simplexBlue:#055DA9;
  --simplexLightBackground:#F8F9FA;
  --greyBorder:#00000033;
  /* overwrite bootstrap defaults */
  --blue: #055DA9;
  --primary: #055DA9;
}

html{
  background-color: var(--simplexLightBackground);
}

/* The header  */
.mainHeader {
  display: block;
  padding: 0 2rem;
  background: #FFFFFF;
  border-bottom: solid 1px var(--greyBorder);
}

.mainHeader .nav {
  align-items: center;
  min-height: 80px;
}

.mainHeader a {
  color:var(--simplexBlue);
}

.mainHeader a.aktiveLink {
  color:#000
}

.languageDropdown {
  margin-left: auto;
}

.btn-primary.addButton {
  background-color: var(--simplexBlue);
  border-radius: 4px;  
  border-color: var(--simplexBlue);
}
.addButton::before{
  /* content: url("/static/geodjango/importer/plus.svg"); */
  content: "+"
}


/* sources */

.sourcesContainer {
  max-width: 66vw;
  min-height: 60vh;
  background-color: #fff;
  border: solid 1px #00000033;
  margin: 1rem 0;
}
.sourceContainer {
  border-bottom: solid 1px #00000033
}

/* this will only apply, if javascript is activated */
.javascriptHidden {
  visibility: hidden;
}

.sourceGroup .arealButton {
  border-radius: 0;
}

.page-item.active .page-link {
  background-color: var(--simplexBlue);
}

.arealButton.activeButton::before{
  /* toDo: add a "->" here */
  /* content: 'active!'; */
  /* <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/></svg> */
}

.arealButton span {
  text-align: left;
  display: block;
}


a.page-link {
  color: var(--simplexBlue);
}


/* as we have bootstrap v4.0, this spinner part is taken from bootstrap 4.5.xx*/

main {
  padding: 2rem; 
  background-color: var(--simplexLightBackground);
}

.userInfo{
  border-bottom: 1px solid;
  max-height: 40vh;
  min-height: 20vh;
  padding-bottom: 1rem;
}

/* #content {
  max-height: 60vh; min-height: 20vh; border-bottom: 1px solid; overflow-y: scroll;
} */

/* classesListAll */

.js-only{
  display:none;
}

footer.show {
  margin-bottom: 25vh;
}

.dataSetContainer{
  border: 0.5rem solid #c4b4b4;
  margin-top: 1rem;
  border-radius: 0.3rem;
}

.dataSetReiter{
  border-bottom: 0.75rem dashed #c4b4b4;
  background-color: #c4b4b4;
  flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  margin-bottom: 2rem;
}

.row.odd, .row.even {
  border-bottom: 1rem solid #c4b4b4;
}

#show {
  background: #fff;
  border-top: 0.5rem solid black;
  margin: 0 2rem;
  max-height: 25vh;
  overflow: scroll;
}
#show h2{
  padding-top: 1rem;
}
.hideShowBox {
  position: absolute;
  left: 90%;
  top: 0rem;
}

.move {
	background-color: #007bff50;
	border-radius: .25rem;
}

/* DataLoad */

.area {
  margin: 2rem 0;
}

progress {
  display: block;
  min-height: 3vh;
  width: 100%;
}

#uploadProgressContainer{
  margin-top: 2rem;
  visibility: hidden
}

#uploadProgressContainer label{
  font-size: 1.5rem;
}

#spinner  {
  visibility: hidden
}

.spinner-border {
  animation: spinner-border .75s linear infinite;
	-webkit-animation: spinner-border .75s linear infinite;
	border: .25em solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	display: inline-block;
	height: 2rem;
	vertical-align: text-bottom;
	width: 2rem;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}


/* importScenarioChoose */
.fieldDefinitionsOfCurrentChoice {
  min-height: 20vh;
}
.hiddenDefinition{
  visibility: hidden;
  display: none;
  
}
.visibleDefinition{
  visibility: visible;
  display: block;
}


/* fieldsDefine */
.encodingOption {
  display: block;
}

.geometry {
	background-color: #909e90;
}

/* ??? where did that belong? */
.table td {
  border: none;
}