#Umfrage input.invalid {
  border-color: red;
}
#Umfrage fieldset.invalid {
  border: 2px solid red;
}
#Umfrage input:invalid {
  border: 2px dashed red;
}
#Umfrage input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}
#Umfrage input:valid {
  border: 2px solid black;
}
.UmfrageHeader {
  margin-bottom: 30px;
}
.HL1 {
  font-family: "Palatino LT W04 Italic";
  color: black;
  font-weight: 400;
}
.Ergebnisse {
  margin: 30px 0;
}
.Ergebnisse h2 {
  font-family: "Palatino LT W04 Italic";
  color: black;
}
.Umfragenheadline {
  font-family: "Palatino LT W04 Italic";
  color: black;
  font-weight: 400;
}
.UmfragenText {
  font-size: 0.9rem;
}
.Frage {
  margin: 10px 0;
}
.MyQuestion {
  padding-right: 1px;
}
.MyQuestionAnswer {
  display: block;
  padding-left: 1px;
  padding-right: 1px;
  font-family: "Palatino LT W04 Italic";
  font-size: 0.9rem;
}
.MyQuestionText, .MyQuestionRadio, .MyQuestionMainHint, .MyQuestionMainText {
  display: block;
  height: 60px;
  padding-top: 15px;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
  border-bottom: 1px solid white;
}
.MyQuestionMainHint, .MyQuestionMainText {
  padding-left: 15px;
}
.QuestionOdd .MyQuestionText, .QuestionOdd .MyQuestionRadio, .QuestionOdd .MyQuestionMainHint, .QuestionOdd .MyQuestionMainText {
  background-color: #b4c849;
}
.QuestionEven .MyQuestionText, .QuestionEven .MyQuestionRadio, .QuestionEven .MyQuestionMainHint, .QuestionEven .MyQuestionMainText {
  background-color: #e0e9b2;
}
.MyQuestionMainText {
  font-weight: bold;
}
.MyQuestionMainHint {
  font-family: "Palatino LT W04 Italic";
}
.col-10p {
  flex: 0 0 10%;
  max-width: 10%;
}
#Umfrage input[type="submit"] {
  background-color: #b4c849;
  margin: 20px 0;
  padding: 20px;
  border: none;
  border-radius: 15px;
}
.CustomRadioContainer {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.CustomRadioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom radio button */
/*
.checkmark {
  position: absolute;
  top: 65px;
  left: 45px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
*/
.checkmark {
  position: absolute;
  top: 75px;
  left: 45px;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */
.CustomRadioContainer:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.CustomRadioContainer input:checked ~ .checkmark {
  background-color: #87aff0;
  display: block;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  color: white;
}
/* Show the indicator (dot/circle) when checked */
.CustomRadioContainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
/*
.CustomRadioContainer .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
*/
/* Style the checkmark/indicator */
.checkmark:after {
  left: 9px;
  top: 5px;
  width: 8px;
  height: 17px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.kleiner {
  font-size: 0.9rem;
}
@media (max-width: 767.98px) {
  .col-md-20p {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .MyQuestionAnswerMD1 {
    padding-left: 15px;
  }
}
.UmfrageFehlermeldung {
  display: none;
  color: red;
}
.UmfrageFehlermeldungFieldset {
  display: none;
  color: red;
}
.Ergebnisseheadline {
  background-color: #b4c849;
  padding: 10px;
  color: black;
}
.Umfragesubmit {
  text-align: center;
}
.row.QuestionOdd, .row.QuestionEven {
  margin-right: 0px;
}