body {background:-webkit-gradient(linear, left top, left bottom, from(teal), to(white)) fixed;} /* fixed, damit gradient über gesamte höhe */


.bodyWrapper{padding-top:7em;font-weight: 300;}

button.abschicken{border: 1px solid;color: white;padding: 10px;float: right;text-align: center;width: 200px;margin-bottom: .5em;cursor: pointer;border-radius: 5px;background: teal;}
span.description{float: right;font-size: 0.8em;cursor: pointer;}
div.card-header.teal{background: teal;color: white; border:none;}
div.card-body{font-weight: 300;font-size: 17px;} /* border:1px solid teal; */
div.questions{display: table-cell;}
div.overall_rating{-webkit-box-align: center;align-items: center;display: flex;-webkit-box-pack: center;justify-content: center;font-weight: bold;font-size: 2em;height: 3.5em;width: 3.5em;border-radius: .2em;box-shadow: 0px 5px 11px 1px lightgrey;background-color: lightgray;color: white;}
span.allgemeinRating{align-items: center;float: left;display: flex;margin:1px 0px;justify-content: center;font-weight: bold;font-size: 12px;height: 2em;width: 2em;border-radius: .2em;background-color: lightgray;box-shadow: 0px 5px 11px 1px lightgrey;color: white;}
input#headlineRating{display: block;margin-bottom: 10px;width: 100%;border-radius: .3em;padding: 10px;outline: none;border: 1px solid lightgray;}
input#headlineRating:focus {border: 1px solid teal;}
input#headlineRating::placeholder{font-size:.9em;}
.overall_rating_comment{align-items: center;float: left;display: flex;-webkit-box-pack: left;justify-content: center;font-weight: bold;font-size: 14px;height: 30px;width: 30px;background-color: rgb(190, 234, 15);color: white;border-radius: .2em;}
span.ratingHeadline{font-weight: 600;}
span.ratingBody{font-size:1em;}
div.card-fixed{padding:15px 15px 15px 25px;margin-bottom: 20px;font-weight: 300;font-size: 18px;border: 1px solid rgba(0,0,0,.125);border-radius: .5em;}
div.card-fixed:hover{box-shadow:0px 5px 11px 1px lightgrey}
#kompZusammenfassung{font-size: 12px; margin-left: 10px;}
div.mehrKriterien{border: 1px solid;color: teal;padding: 10px 5px;cursor: pointer;border-radius: 5px;text-align: center;}
div.mehrKriterien:hover{color:white; background:teal;}

textarea#bodyRating {min-height: 150px;width: 100%;border: 1px solid #D0CFCE;outline: none;border-radius: .3em;padding: 10px;}
textarea#bodyRating:focus {border: 1px solid teal;}
textarea#bodyRating::placeholder{font-size:.9em;}

.textLeft{text-align: left;}
.rating.noShadow{box-shadow:0 0 black !important;padding: 0 !important;}
.next{border: 1px solid;background:teal;color: white;padding: 10px;text-align: center;cursor: pointer;border-radius: 5px;max-width:300px;}
.next:hover{border: 1px solid teal;background: teal;color: white;text-decoration: none;}
.previous{border: 1px solid;color: teal;padding: 10px;text-align: center;max-width: 300px;margin-bottom: .5em;cursor: pointer;border-radius: 5px;}
.previous:hover{border: 1px solid teal;background: teal;color: white;text-decoration: none;}
div.rating{float: left;position: relative;display: flex;flex-direction: column;min-width: 0;word-wrap: break-word;}
.rating:not(:checked)>input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.rating:not(:checked)>label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:200%;line-height:1.2;color:#ddd;}
.rating:not(:checked)>label:before {content: '★ ';}
.rating > input:checked ~ label {color: gold;text-shadow:1px 1px #c60, 2px 2px #940, }
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover ~ label {color: gold;}
textarea#bodyRating {min-height: 150px;width: 100%;border: 1px solid #D0CFCE;outline: none;border-radius: .3em;padding: 10px;}
textarea#bodyRating:focus {border: 1px solid teal;}
textarea#bodyRating::placeholder{font-size:.9em;}

.rating>label:active{position:relative;top:2px;left:2px;}

.submitRating {color: teal;font-weight: 300;background-color:white;border: 1px solid gray;padding: 10px;}
.submitRating:hover {cursor: pointer;background-color: teal;color: white;}
.squares {display: flex;justify-content: center;}
.ratingval {position: fixed;z-index: 2;width: 120px;height: 120px;background: #F5F8FA;border: 1px solid lightgray;display: flex;align-items: center;justify-content: center;}


@media only screen and (max-device-width: 991px) {
  textarea#bodyRating{width: 100%;}
  nav#history {margin-top: 0px;}
  .fas.fa-backspace{padding-right: .5em;}
  .bodyWrapper{padding-top: 5em;}
  div.mehrKriterien{padding: 10px 0px;}
}

@media only screen and (max-device-width: 540px) {
  #kompZusammenfassung{font-size:10px;}
  div.card-fixed{padding:10px;}
  #progressbar{margin-bottom: 1em !important;}
  button.abschicken{margin-top: 1em;} 
  div.next{margin:auto;}
  div.previous{margin:auto;}

}

/* Desktop Version */
div.card-body{border:1px solid teal;font-weight: 300;padding:1em;font-size: 1em;}