#vue-survey{position:relative; top:130px;}

#vue-survey div { padding:0 2em}

#survey-head { margin: 10px auto 30px auto; }

#survey-head {font-family: 'Montserrat', sans-serif;text-align: center;background-color: #00A9A3;color: white;
    border-bottom-right-radius: .5em; border-bottom-left-radius: .5em; margin: 0 40%; width: 20%; height:5em}

#survey-head div {padding-top:1.5em; font-size:1.5em}

.head-details{text-align:center}

.head-details p{color:darkgray}

.head-details p span{font-weight: 600; font-size: larger; color:#F4783B}

.head-details p .thank{font-size:35px}

@media screen and (min-width: 961px) {
    #vue-survey { height: calc(100% - 130px); color:#58595B; }
    #vue-survey .flex { overflow-y: auto; }
}

@media screen and (max-width: 960px) {
    #vue-survey { width: 95%; margin: 0 auto; }
}

ul { list-style: none; padding:0;}

.h1-back{background-color:#00A9A3;}

li h1 {font-size:1.2em; color:white; font-weight:400; margin:1em 0; padding:.5em; padding-bottom:0; border:none}

li h1 i {font-size:.9em; line-height:2em}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}

li div{margin-bottom:.5em}

.firstQ div:first-child {align-self:center; border-bottom:0.5px solid #a967ab; color:#00A9A3}

.firstQ div input{border-radius: 3px; height: 2em; width:450px; outline-color: #a967ab; 
    color: #a967ab; font-family: 'Ubuntu', sans-serif; font-weight:600; padding-left: 5px; margin-bottom:10px}

.multiQ>div:first-child{border-bottom:0.5px solid #FF8B00; color:#00A9A3; margin-top:20px}

.acQ>div:first-child{border-bottom:0.5px solid #FF8B00; color:#00A9A3; margin-top:20px}

.AtoC{display:flex}

.AtoC input {margin-top:0; margin-left:20px}

.AtoC input:first-child { margin-left:5px}

.AtoC i {margin-left:5px}

#vue-survey .footer{ background-color:#00A9A3; text-align:right; padding:.5em 0}

.footer button { border-radius: 3em;
    background-color: rgba(255, 139, 0, .9);
    box-shadow: 0px 3px 0px 0px #00A9A3;
    padding: .1em 2em;
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-decoration: none;
    transition: color linear .2s; font-size:.9em; width:8em; height:2em }

.footer button:hover {color: #00A9A3;}

.reading h1 p,
.demographics h1 p,
.knowledge h1 p,
.challenges h1 p,
.style h1 p {background-color:#00A9A3;font-family: 'Montserrat', sans-serif; border-bottom-left-radius: .5em;  border-bottom-right-radius: .5em; 
    color:white; font-size:.8em; padding:.2em; padding-left:.8em}

li h1 {margin-top:0; margin-bottom:5px}

h1 h2{font-size:18px; color:#58595B; font-weight:600; margin:0}

h1 h4 {font-size:16px; font-style:italic; color:rgba(255, 139, 0, 1);
    font-weight:400; margin:0; margin-bottom:40px}

input[range]{width:450px}

.knowledge .subheader { display: flex; margin-bottom: 0; font-weight: bold; }

.knowledge .subheader > div:first-child { flex: 1; }

.knowledge .subheader > div:nth-child(2) { width: 360px; text-align: right; }

.knowledge .subheader > div:nth-child(2) > div { display: inline-block; padding: .7em !important; }

.knowledge .multiQ { display:flex; }

.knowledge .multiQ > div:first-child { padding-bottom: 5px; flex: 1; margin-left:20px; }

.knowledge .multiQ > div:nth-child(2) { align-self: flex-end; border-bottom: 0.5px solid #a967ab; width: 360px; }

.knowledge .multiQ > div:nth-child(2) div { padding: 0 1.5em !important; }

.knowledge .multiQ > div:nth-child(2) > div > div { display: inline-block; }

.knowledge .multiQ input { width: 1.5em; height: 1.5em; }

.syn-small #vue-survey div { padding: 0 .2em; }

.syn-small .knowledge .multiQ { display: block; }

.syn-small .knowledge .multiQ > div:nth-child(2) { text-align: right; width: auto; }