body {
  background-color: #282C34;
  font-family: sans-serif;
  color: #ABB2BF;
  margin-left: 2%;
  margin-right: 2%;

  display: flex;
  flex-direction: column;
}

a {
  color: #ABB2BF;
}
/* Header Elements*/
header {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: stretch;
}
header a {
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

header img{
  width: 12em;
  padding-left: 1%;
}
/* End Header Elements*/

/* Footer Elemente*/
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 98%;
  padding-left: 2%;
  padding-bottom: 0.2%;
  padding-top: 0.2%;
  background-color: #21252B;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer a {
  text-decoration: none;
  font-size: 0.8em;
  color: #ABB2BF;
}

footer .buttonSet {
  width: 33%;
  justify-content: flex-start;
}

footer .buttonSet a {
  padding-right: 5%;
}

.footerSpan {
  padding-right: 2%;
  width: 33%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.footerSpan img {
  width: 6em;
  vertical-align: bottom;
}

.warnField {
  color: #DA6A72;
  font-weight: bold;
  font-size: 1em;
  align-self: center;
}
/* - footer end - */


.banner_div {
  color: #21252B;
  font-weight: bold;
  font-family: monospace;
  padding-left: 3%;
  padding-right: 1%;
  border-radius: 4px;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  margin-bottom: 0.1%;
  cursor: pointer;
  /*visibility: hidden;*/
}

.red_div {
  background-color: #DA6A72;
}

.green_div {
  background-color: #5BB783;
}

.x_div {
  float: right;
  cursor: pointer;
  padding-left: 0.3%;
  padding-right: 0.3%;
}
.x_div:hover {
  border: 1px solid #ABB2BF;
  border-radius: 4px;
}

.mainPage {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*right und left section noch irgendwo existenst? - ersetzen und löschen*/
.rightSection {
  width: 48%;
}

.leftSection {
  width: 48%;
}

#dropzone {
  background-color: #21252B;
  border-radius: 4px;
}



button {
  border: none;
  background-color: #555555;
  color: white;

  padding: 0.5% 1%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  border-radius: 4px;
  cursor: pointer;
}
.button {
  border: none;
  background-color: #555555;
  color: white;
  padding: 1% 1.5%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  font-family: sans-serif;
  border-radius: 4px;
  cursor: pointer;
  min-width: 1.5em;
  min-height: 1.5em;
}

input {
  background-color: #21252B;
  color: #ABB2BF;
  border: none;
  border-radius: 4px;
  padding: 0.5%;
  font-size: 0.8em;
}

textarea {
  background-color: #21252B;
  color: #ABB2BF;
  border: none;
  border-radius: 4px;
  padding: 0.5%;
  margin-top: 2%;
  width: 99%;
  max-width: 99%;
  height: 20em;
  font-size: 1.2em;
}

select {
  width: 40%;
  background-color: #21252B;
  color: #ABB2BF;
  border-radius: 4px;
  border-color: #21252B;
}

ul {
  list-style-type: none;
  padding-left: 0px;
  width: 100%;
}
li {
  padding-bottom: 1%;
  width: inherit;
}





.inlineSvg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: bottom;
}

.buttonSvg {
  height: 1.5em;
  width: 1.5em;
  vertical-align: bottom;
  border: 1px solid #282C34;
  border-radius: 4px;
  cursor: pointer;
}
.buttonSvg:hover {
  border: 1px solid black;
  border-radius: 4px;
}

/* ???? separator kann gelöscht werden - existiert nicht mehr in html?*/
.separator {
  display: inline-block;
  width: 5%;
}

/* Right Section*/
.uploadSection {
  display: flex;
  flex-direction: column;
}

.fileSection {
  font-family: monospace;
  font-size: 1.2em;

  display: flex;
  flex-direction: column;
}

.fileForm {
  display: flex;
  flex-direction: column;
}

.fileContent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.info_span {
  width: 33%;
  text-align: center;
}

.fileLink {
  height: 1.2em;
  text-align: left;
  overflow: hidden;
  width: 33%;
}
.deleteButtonBox {
  width: 33%;
  display: flex;
  justify-content: flex-end;
}


/*-- Left Section ---*/
/* Notes */
.noteSection {
  display: flex;
  flex-direction: column;
}

.noteForm {
  display: flex;
  flex-direction: column;
}

.noteHeader {
  display: flex;
  justify-content: space-between;
}

.lastSaved {
}

.saveNoteButton {
  padding-left: 6%;
  padding-right: 6%;
}

/* Strings */
.stringSection {
  display: flex;
  flex-direction: column;
}

.copyStringLine {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.copyStringInput {
  width: 77%;
}

.buttonSet {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.buttonSet .button {
  min-width: 2em;
}

.copyStringLine .buttonSet {
  margin-left: 2%;
}

.copyButton {
  cursor: copy;
}

.fillButton {
  width: 100%;
}


/* Login */

.loginPage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputFieldBox {
  border: 1px dotted black;
  border-radius: 4px;
  width: 30%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 1%;
  margin-bottom: 3%;

  display: flex;
  flex-direction: column;
}

.inputFieldBox input {
  width: 100%;
  margin-bottom: 2%;
}
.inputFieldBox button {
  width: 50%;
  position: relative;
  left: 50%;

}

.loginBox {
  margin-top: 10%;
}

/* Admin mit test flexbox */
.rightSection-flex {
  flex-basis: 0;
  align-self: stretch;
  flex-grow: 1;
}

.leftSection-flex {
  flex-basis: 0;
  align-self: stretch;
  flex-grow: 1;

  display: flex;
  flex-direction: column;
}

.rowFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.columnFlex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}



/*own element fieldBox*/
.fieldBox {
  border: 1px dotted black;
  border-radius: 4px;
  padding: 1%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-bottom: 2%;
}
.fieldBox > h3 {
  margin-top: 0%;
  font-size: 1em;
}
.fieldBoxInput {
  flex-grow: 1;
  min-height: 2em;
}
.fieldBox .button {
  flex-grow: 1;
  min-height: 2.5em;
}
.fieldBoxChild {
  display: flex;
  flex-direction: row;
  flex-basis: 0;
  margin-bottom: 2%;
}




.subContainer {
  width: 49%;
  margin-bottom: 2%;
}


.adminBox {
  border: 1px dotted black;
  border-radius: 4px;
  /*
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 1%;
  margin-bottom: 3%;
  */
  margin: 2%;
  padding: 2%;
}

.adminBox fieldset {
  width: auto;

}

.adminBox select {
  width: 100%;
}

.string_input {
  background-color: #21252B;
  color: #ABB2BF;
  border: none;
  border-radius: 4px;
  padding: 1%;
  font-size: 0.8em;
}

.disabledUser {
  text-decoration: line-through;
}

.admLogoChild {
  margin-bottom: 1em;
}


/* Info Page */
.infoPage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.infoField {
  display: flex;
  flex-direction: column;
  width: 25%;
  border: 1px dotted #ABB2BF;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
}

.infoField h2 {
  text-align: center;
}

.infoField hr {
  width: 100%;
}

.infoField ul {
  padding-left: 4%;
  font-style: italic;
}

.autorSection {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

.infoField img {
  width: 25%;
}
.infoField a{
  text-decoration: none;
}

.firstStartBox input {
  margin-bottom: 2%;
  margin-top: 2%;
}
.firstStartBox h3 {
  margin: 0%;
}

.greenString {
  color: #5BB783;
}

.redString {
  color: #DA6A72;
}