form {
  width: 80%;
  margin: 0 auto;
}
input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
footer {
  text-align: center;
  margin-top: 20px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
    margin: 20px;
    background: #fff;
}

.question {
  margin-bottom: 20px !important;
}

.question-focused {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.question-unfocused {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.question-used {
  opacity: 1.0;
  transition: 0.5s;
}

/* only if unused unfocused */
.question-unused.question-unfocused {
  /*Gray the question out and make it less noticeable, by making it darrker*/
  filter: grayscale(100%) opacity(0.8) brightness(0.95);
  transition: 0.5s;
}

.subquestionlist {
  padding: 20px!important;
  background: #f7f7f7!important;
  min-height: 40px;
  margin: 0!important;
}

.addQuestionButton {
  padding: 20px;
}

.QuestionListQuickView {
  /*make this component float in the center left of the screen*/
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.hidden {
    display: none;
}

.impressum_link, .datenschutzerklaerung_link {
    color: #000;
    text-decoration: underline;
}
.impressum_link:hover, .datenschutzerklaerung_link:hover {
    color: #000;
    text-decoration: underline;
}
.impressum_container {
    width: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    text-align: left;
}