{
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    font-family: Calibri, sans-serif;;
}

main {
    width: 90%;
    margin: 0 auto 145px;
    max-width: 800px;
}

#surveyForm {
    background-color: #ffffff;
    margin: 100px auto;
    padding: 40px;
    width: 80%;
    max-width: 560px;
    min-width: 300px;
}

p#errorMsg {
    color:#CD0F50;
    margin: 0.2em 0;
    font-weight: bold;
}

.form-block {
    padding: 0.5em 0;
    display: flex;
    flex-flow: row nowrap;
}

.form-block > label {
    flex: 1 0 95%;
    text-align: left;
}

.form-block input {
    flex: 1 0 0;
    /*margin: 0.3em 0.7em 0 0;*/
    padding: 8px;
}

table.nutzung {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-y: hidden;
    /*text-align: center;*/
    border-spacing: 0;
    /*table-layout: fixed;*/
    /*width: 100%;*/
}
table.aussage {
    text-align: center;
    border-spacing: 0;
    width: 100%;
}

tr.lightGrey {
    background-color: #f5f5f5;
}

tr.grey {
    background-color: #f1f1f1;
}

th {
    font-size: 15px;
    padding: 6px 1px;
    min-width: 55px;
    font-weight: normal;
    width: 14%;
}

th#NutzungTitleLeft {
    text-align: left;
    width: 16.6%;
    max-width: 85px;
    font-size: 15px;
    padding: 6px 4px;
    min-width: 55px;
    /*font-weight: lighter;*/
    font-weight: normal;
}

th#AussageTitleLeft {
    text-align: left;
    max-width: 160px;
    font-size: 15px;
    padding: 6px 4px;
    min-width: 140px;
    /*font-weight: lighter;*/
    font-weight: normal;
}


td > label {
    padding: 15px;
}

input.radio {
    margin: 0;
}

textarea#Allgemeines_Feedback {
    margin: 0;
    resize: none;
    width: 100%;
}

 textarea#Allgemeines_Feedback:focus-within {
     border: .5px solid #0e4194;
 }

 h1 {
    font-size: 2.1em;
    text-align: left;
    letter-spacing: -1px;
    font-weight: lighter;
    margin: 0 0 0.3em;
 }

h3.missingJSMsg {
 font-weight: lighter;
 color: #CD0F50;
}

h3.question {
    font-size: 1.4em;
    font-weight: lighter;
    margin: .6em 0 .2em;
}

h4.instructions {
    font-size: .9em;
    font-weight: lighter;
    margin: 0 0 .5em;
}


img.logo {
    margin: 40px 0 10px;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

button {
    background-color: #0e4194;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 17px;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #0e4194;
}

 @media screen and (max-width: 650px) {
     #surveyForm {
         background-color: #ffffff;
         margin: 0 auto;
         padding: 20px;
         width: 90%;
         max-width: 560px;
         min-width: 300px;
     }
     h1 {
         font-size: 1.6em;
         text-align: left;
         letter-spacing: -1px;
         font-weight: lighter;
         margin: 0 0 0.3em;
     }
 }

 /* Customize the label (the container) for checkbox and radio buttons */
 .container {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-bottom: 5px;
     cursor: pointer;
     font-size: 17px;
     /*text-align: center;*/
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* Hide the browser's default checkbox and radio buttons */
 .container input, .matrixContainer input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 /* Create a custom checkbox */
 .checkmarkBox {
     position: absolute;
     margin-right: auto;
     margin-left: auto;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #eee;
}

 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmarkBox {
     background-color: #ccc;
 }

 /* When the checkbox is checked, add a blue background */
 .container input:checked ~ .checkmarkBox {
     background-color: #0e4194;
 }

 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmarkBox:after {
     content: "";
     position: absolute;
     display: none;
 }

 /* Show the checkmark when checked */
 .container input:checked ~ .checkmarkBox:after {
     display: block;
 }

 /* Style the checkmark/indicator */
 .container .checkmarkBox:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }


 /* Create a custom radio button */
 .checkmark {
     position: absolute;
     margin-right: auto;
     margin-left: auto;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #eee;
     border-radius: 50%;
 }

 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmark {
     background-color: #ccc;
 }

 /* When the radio button is checked, add a blue background */
 .container input:checked ~ .checkmark {
     background-color: #0e4194;
 }

 /* Create the indicator (the dot/circle - hidden when not checked) */
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 /* Show the indicator (dot/circle) when checked */
 .container input:checked ~ .checkmark:after {
     display: block;
 }

 /* Style the indicator (dot/circle) */
 .container .checkmark:after {
     top: 9px;
     left: 9px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: white;
 }

 /*Matrix Radio Buttons*/

 /* Customize the label (the container) for checkbox and radio buttons */
 .matrixContainer {
     display: flex;
     position: relative;
     /*padding-left: 35px;*/
     /*margin-bottom: 12px;*/
     cursor: pointer;
     font-size: 17px;
     /*text-align: center;*/
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .matrixCheckmark {
     position: inherit;
     margin-right: auto;
     margin-left: auto;
     /*top: 0;*/
     /*left: 0;*/
     height: 25px;
     width: 25px;
     background-color: #eee;
     border-radius: 50%;
     border: .5px solid darkgrey;
 }

 /* On mouse-over, add a grey background color */
 .matrixContainer:hover input ~ .matrixCheckmark {
     background-color: #ccc;
 }

 /* When the radio button is checked, add a blue background */
 .matrixContainer input:checked ~ .matrixCheckmark {
     background-color: #0e4194;
 }

 /* Create the indicator (the dot/circle - hidden when not checked) */
 .matrixCheckmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 /* Show the indicator (dot/circle) when checked */
 .matrixContainer input:checked ~ .matrixCheckmark:after {
     display: block;
 }

 /* Style the indicator (dot/circle) */
 .matrixContainer .matrixCheckmark:after {
     top: 8.5px;
     left: 8.5px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: white;
 }