.ion-page {
    align-items: center;
}

.web ion-header,
.web ion-content {
    max-width: 480px;
}

.toolbar-hidden ion-header {
    display: none !important;
}

ion-toolbar {
    --min-height: 40px!important;
}

ion-toolbar ion-menu-button {
    height: 30px !important;
    width: 35px !important;
}

.top-header {
    display: none;
}

.column-header {
    display: none;
}

.lang-ddl-container ion-button {
    --background: rgb(47, 85, 151) !important;
    min-width: 250px;
}

#surveyForm {
    padding: 0 !important;
}

.buttons button {
    background-color: rgb(84, 130, 53)!important;
    // animation: glowing 1300ms infinite;
}

.buttons button:active,
.buttons button:focus {
    background-color: rgb(105, 159, 68)!important;
}

@keyframes glowing {
    0% {
        --background: #2ba805;
        box-shadow: 0 0 5px #2ba805;
    }
    50% {
        --background: #49e819;
        box-shadow: 0 0 20px #49e819;
    }
    100% {
        --background: #2ba805;
        box-shadow: 0 0 5px #2ba805;
    }
}

.width-30vw {
    width: 30vw;
}

.center-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome {
    padding: 0 !important;
    position: relative;
    justify-content: start !important;
}

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome-box .blue1 {
    font-size: 1.5rem;
    font-weight: bold;
    padding: .5rem;
    background-color: rgb(47, 85, 151);
    color: #fff;
    font-style: italic;
    width: 100%;
}

.welcome-box .blue2 {
    font-size: 1.2rem;
    padding: .5rem;
    background-color: rgb(47, 85, 151);
    color: #fff;
    width: 100%;
}

.welcome .finish-line {
    max-width: 80%;
    margin: 1rem;
}

.start-button {
    font-weight: bold;
    font-size: 1.1rem;
    padding: 1rem;
    background-color: rgb(84, 120, 53) !important;
    margin-top: 0 !important;
    margin-bottom: 0;
}

.p-10 {
    padding: 1rem;
}


/****************Progress Pages*********************88*/

.progress-bg .survey {
    background: url(progress.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.progress-bg .question-text>div.main-text {
    text-align: center;
    font-family: "Bradley Hand ITC";
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 30%;
}

.progress-bg .question-text>div.lower-text {
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    top: 60%;
    left: 0;
    text-align: center;
    width: 100%;
}

.progress-bg .question-text>div.lower-text>div {
    color: maroon;
}

.p-bar {
    height: 25px;
    position: relative;
    background: transparent;
    overflow: hidden;
    border: solid 1px #ca4f0a;
    border-radius: 10px;
    position: absolute;
    left: 5%;
    top: 45%;
    width: 90%;
    height: 30px;
}

.p-bar span {
    display: block;
    height: 100%
}

.p-label {
    position: absolute;
    color: #fff;
    z-index: 1;
    position: absolute;
    top: calc(45% - 11px);
}

.p-label-10 {
    left: 6%;
}

.p-label-20 {
    left: 10%;
}

.p-label-40 {
    left: 25%;
}

.p-label-60 {
    left: 35%;
}

.p-label-75 {
    left: 50%;
}

.p-label-85 {
    left: 50%;
}

.p-label-100 {
    left: 50%;
}

.progress {
    background-color: #ca4f0a;
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode: both;
}

@-webkit-keyframes progressBar {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.rabit {
    position: absolute;
    left: 5%;
    top: calc(45% - 100px);
    width: 100px;
    -webkit-animation-fill-mode: both;
}

.move-20 {
    -webkit-animation: move-20 3s ease;
}

.move-40 {
    -webkit-animation: move-40 3s ease-in-out;
}

.move-60 {
    -webkit-animation: move-60 3s ease-in-out;
}

.move-75 {
    -webkit-animation: move-75 3s ease-in-out;
}

.move-85 {
    -webkit-animation: move-85 3s ease-in-out;
}

.move-100 {
    -webkit-animation: move-100 3s ease-in-out;
}

@-webkit-keyframes move-20 {
    0% {
        left: 5%;
    }
    100% {
        left: 20%;
    }
}

@-webkit-keyframes move-40 {
    0% {
        left: 5%;
    }
    100% {
        left: 30%;
    }
}

@-webkit-keyframes move-60 {
    0% {
        left: 5%;
    }
    100% {
        left: 40%;
    }
}

@-webkit-keyframes move-75 {
    0% {
        left: 5%;
    }
    100% {
        left: 55%;
    }
}

@-webkit-keyframes move-85 {
    0% {
        left: 5%;
    }
    100% {
        left: 65%;
    }
}

@-webkit-keyframes move-100 {
    0% {
        left: 5%;
    }
    100% {
        left: 70%;
    }
}

.speak-instr {
    font-style: italic;
}

.orange-box {
    background-color: #f48139;
    color: #ffffff;
    padding: 4px;
    font-size: small;
    margin-left: 24px;
    margin-right: 24px;
}

ion-grid .media-title {
    font-weight: bold;
    word-break: break-all;
}

ion-grid .clickable {
    border: 1px solid #c5c4c4;
    justify-content: center;
}

ion-grid .clickable.active {
    border: 2px solid green !important;
}

grid-quest .rating-quest .row-header span {
    display: block !important;
    border: 1px solid #c5c4c4 !important;
    padding: .5rem !important;
    text-align: center;
}

grid-quest .rating-quest .row-header {
    padding: 0 0 .5rem 0!important;
}

single-select-quest .choice,
multi-select-quest .choice,
single-select-quest .choice.active,
multi-select-quest .choice.active {
    --background: none !important;
    --background-hover: none !important;
    border-left: none!important;
}

.inline-btns ion-list {
    display: flex!important;
    justify-content: center!important;
}

.inline-btns ion-item {
    margin-bottom: 1rem !important;
    display: flex;
    max-width: 150px !important;
    --color: #000;
}

.inline-btns ion-item.active {
    --border-color: green !important;
    --color: #000!important;
}

.inline-btns ion-item:not(:last-child) {
    margin-right: .5rem;
}

.inline-btns ion-item ion-label {
    flex-direction: column;
    font-weight: bold;
    white-space: normal !important;
    text-align: center;
}

.no-borders ion-item {
    --border-style: none!important;
}

.borders-active ion-item.active {
    --border-style: solid!important;
}

.mobile .survey {
    background: url(reg-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.mobile #surveyForm {
    padding: 80px 1rem 1rem 2rem !important;
}

.mobile .question-text>div {
    margin-bottom: 1rem;
}

.mobile .heading {
    text-align: center;
    padding: 1.5rem;
    background-color: rgb(255, 242, 204);
    width: auto;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.mobile .suffix {
    margin-left: 0!important;
    white-space: normal!important;
    font-size: 1rem!important;
}

.mobile .openend-container {
    flex-wrap: wrap;
}

.reg-page #surveyForm {
    padding: 1rem !important;
}

.reg-page .survey {
    background: url(reg-bg1.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.reg-page,
.reg-page .question-text {
    font-size: .9rem!important;
    margin-bottom: .5rem!important;
}

.reg-page .info {
    font-size: .9rem!important;
}

.reg-page .info.suffix {
    margin-top: 0 !important;
}

#RegTitle_Container {
    margin-top: 4rem;
}

#RegTitle .question-text {
    text-align: center;
    font-size: 1.2rem!important;
    font-weight: bold;
}

.reg {
    display: flex;
    margin-bottom: 0;
}

.reg.question {
    flex-direction: row !important
}

.reg ion-item,
.reg ng-select {
    padding-bottom: 0
}

#S4 .question-text {
    margin-bottom: 0!important;
}

#S4 ion-item img {
    width: 70px !important;
}

.htp .question-text {
    text-align: center;
}

.htp img:first-child {
    max-width: 80%;
    margin-bottom: 3rem;
}

#II1 .question-text {
    margin-top: 3rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}

#II2 .question-text {
    margin-top: 0;
}

#II2 .main-text {
    padding: 1rem;
    background-color: rgb(255, 242, 204);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

#II2 .big-little {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#II2 .img-container {
    display: flex;
    justify-content: space-around;
}

#II2 .img-container:first-child {
    margin-top: 1rem;
}

#II2 .img-container img {
    height: 20vh;
}

.iii2 .survey,
.q8 .survey,
.q20 .survey {
    background: url(alpha-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#III2 .question-text {
    padding: 2rem 1rem;
    background-color: rgb(255, 242, 204);
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.ii2 .survey,
.q6 .survey,
.q19a .survey {
    background: url(dots-bg.png);
    background-repeat: repeat;
    background-size: 100% 100%;
}

.q1 .survey {
    background: url(noodles-corner.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
}

.qIPL3 .survey {
    background: url(ipl.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.q1 .question {
    line-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 1rem;
}

.q1 .question-text {
    margin-top: 20vh;
    font-size: 1.1rem;
    font-weight: bold;
    position: relative;
}

.q1 .question-text>div {
    font-weight: normal;
    margin-top: .5rem;
}

.q1 .question-text img {
    position: absolute;
    right: 0;
    top: 45%;
    width: 80px;
}

.q1 .col-header {
    display: none;
}

.q1 grid-quest th,
.q1 grid-quest td {
    border: none !important;
}

.q1 .mobile-view .content-cell {
    display: flex !important;
}

.q1 .mobile-view .content-cell img {
    width: 70% !important;
}

.q1 .column-header {
    display: none;
}

.q2 .survey {
    background: url(q2-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q2 .question-text {
    display: flex;
    align-items: center;
}

.q2 .question-text>img {
    width: 100px;
    margin: 0 1rem;
}

.q2 .question-text>div {
    padding: 1rem;
    background-color: rgb(32, 56, 100);
    color: #fff;
    margin-right: 1rem;
    width: auto;
    border-radius: 0 1rem;
}

.Q20x1xC1 .survey {
    background: url(q2-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% 80%;
}

.Q20x1xC1 .question-text {
    display: flex;
    align-items: center;
}

.Q20x1xC1 .question-text>img {
    width: 100px;
    margin: 0 1rem;
}

.Q20x1xC1 .question-text>div {
    padding: 1rem;
    background-color: rgb(32, 56, 100);
    color: #fff;
    margin-right: 1rem;
    width: 10%;
    border-radius: 0 1rem;
}

.q15d .survey {
    background: url(q2-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q15d .question-text {
    display: flex;
    align-items: center;
}

.q15d .question-text>img {
    width: 100px;
    margin: 0 1rem;
}

.q15d .question-text>div {
    padding: 1rem;
    background-color: rgb(255, 192, 0);
    color: #fff;
    margin-right: 1rem;
    width: auto;
    border-radius: 0 1rem;
}

.q3 .survey {
    background: url(home-work.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.q3 .question-text {
    padding: 1rem;
    background-color: rgb(255, 192, 0);
    margin: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem !important;
    width: auto;
    border-radius: 0 1rem;
}

.q4 .survey {
    background: url(q4-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q4 .question-text,
.q5 .question-text,
.q7 .question-text,
.q13 .question-text {
    display: flex;
    align-items: center;
}

.q4 .question-text>img,
.q5 .question-text>img,
.q7 .question-text>img,
.q13 .question-text>img {
    width: 100px;
    margin: 0 .5rem;
}

.q4 .question-text>div,
.q5 .question-text>div,
.q7 .question-text>div,
.q13 .question-text>div {
    padding: 1rem;
    background-color: rgb(255, 192, 0);
    font-weight: bold;
    margin-right: .5rem;
    width: auto;
    border-radius: 0 1rem;
}

.q5 .survey,
.q19 .survey {
    background: url(q5-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q5 .question-text div,
.q19 .question-text {
    background-color: rgb(251, 155, 155);
}

.q19 .question-text {
    padding: 1rem;
    background-color: rgb(251, 155, 155);
    margin: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem !important;
    width: auto;
    border-radius: 0 1rem;
}

.q6 .question-text,
.q19a .question-text {
    display: flex;
    align-items: center;
    margin-top: 0
}

.q6 .question-text>img,
.q19a .question-text>img {
    width: 30vw;
    margin: 0 .5rem;
}

.q6 .question-text>div,
.q19a .question-text>div {
    padding: 1rem;
    background-color: rgb(226, 240, 217);
    font-size: 1.1rem !important;
    font-weight: bold;
    width: auto;
}

.q7 .survey {
    background: url(q7-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 70%;
}

.q7 .question-text div {
    background-color: rgb(226, 240, 217);
}

.ia1 .big-little {
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
}

.ia1 .survey,
.ia2 .survey {
    background: url(bubble-stars.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.QBx1 .survey,
.QBx1 .survey {
    background: url(ipl.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.QBx2 .survey,
.QBx2 .survey {
    background: url(ipl.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.QBx1 .question-text,
.QBx1 .question-text {
    margin-top: 0;
}

.ia1 .question-text,
.ia2 .question-text {
    margin-top: 0;
}

.ia1 li {
    margin-bottom: 1rem;
}

.ia1 .question-text>div:first-child {
    padding: .5rem;
    background-color: rgb(255, 192, 0);
    margin-bottom: 1rem;
}

.ia2 {
    padding: 0 1rem;
}

.ia2 .text {
    padding: .5rem;
    background: rgb(252, 242, 218);
    margin-bottom: 1rem;
}

.q8 .question-container,
.q20 .question-container {
    padding: 1rem;
}

#Q8 .question-text,
#Q20 .question-text {
    margin-top: 0;
}

#Q8 ul,
#Q20 ul {
    list-style: none;
    padding-left: 0;
    font-size: .9rem;
}

#Q8>div.answer>grid-quest>div>table>tr.col-header,
#Q20>div.answer>grid-quest>div>table>tr.col-header {
    display: none;
}

#Q8 table td,
#Q8 table th,
#Q20 table td,
#Q20 table th {
    border: none !important;
}

#Q8 table th,
#Q20 table th {
    width: 30vw;
}

#Q8>div.answer>grid-quest>div>table>tr>th>span>div,
#Q20>div.answer>grid-quest>div>table>tr>th>span>div {
    text-align: center;
    font-size: .9rem;
    font-weight: normal;
}

.q9 .question-text {
    margin-top: 0;
}

.q9 .question-text>div {
    display: flex;
    margin-top: .5rem;
    align-items: center;
    justify-content: center;
}

.q9 .question-text>img {
    width: 100%;
    height: 100%;
}

.q9 .question-text>div>div {
    background-color: rgb(255, 192, 0);
    padding: .5rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.q9 .question-text>div>img {
    width: 100px;
    margin-left: .5rem;
    margin-right: .5rem;
}

.i2 .question-text .container1 {
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(255, 199, 77);
    height: 20vh;
    width: 100%;
}

.i2 .question-text .container2 {
    position: absolute;
    top: 5vh;
    left: 0;
    text-align: center;
    overflow-y: auto;
    max-height: calc(100% - 110px);
}

.i2 .question-text .container2 img {
    width: 90%;
}

.i2 .question-text .container2 div:nth-child(2) {
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 1.2rem;
}

.i2 .question-text .container2 div:nth-child(3) {
    padding: 1rem;
    background: rgb(255, 199, 77);
    margin: 1rem;
    font-size: 1.1rem;
}

.ia3 .survey {
    background: url(ia3-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#ia3 {
    padding: 1rem
}

.ia3 .question-text {
    margin-top: 0
}

.ia3 .disabled {
    opacity: 1;
}

#ia3 ion-grid ion-col:first-child .clickable img {
    width: 50px;
}

#ia3 .div1 {
    font-weight: bold;
    font-style: italic;
    text-align: center;
    margin: .5rem 0;
}

.ia4 .survey {
    background: url(ia4-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ia4 #surveyForm {
    display: flex;
    align-items: center;
}

.q10 .question-text {
    margin-top: 0;
}

.q10 .question-text .div2 {
    display: flex;
    align-items: center;
}

.q10 .question-text .div2 img {
    width: 120px;
    margin: 0 .5rem;
}

.q10 .question-text .div2 div {
    padding: .5rem;
    margin: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem !important;
    width: auto;
    border: solid 2px #7cb43c;
    word-break: break-all;
}

.q10a .survey {
    background: url(q10a-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q10a .question-text {
    color: #000000;
    margin: 1rem;
    text-align: center;
    font-size: 1.2rem !important;
    width: auto;
}

.ii3 .question-text {
    margin-top: 0;
    text-align: center;
}

.ii3 .question-text div:nth-child(1) {
    padding: 1rem;
    background-color: rgb(47, 70, 156);
    color: #fff;
    position: relative;
    height: 20vh;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
}

.ii3 .question-text div:nth-child(1) div {
    background-color: #000;
    padding: 2rem;
    position: absolute;
    left: 0;
    margin: 0 1rem;
    top: 10vh;
    font-weight: bold;
    font-style: italic;
    font-size: 1rem;
    height: auto;
}

.ii3 .question-text img {
    margin-top: 20vh;
}

.ii4 .survey {
    background-color: rgb(247, 216, 145);
}

.ii4 .question-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ii4 .question-text div:nth-child(1) {
    padding: 1rem;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.ii4 .question-text {
    margin-top: 0;
}

.ii4 .question-text img {
    margin-top: 2rem;
}

.q11 .disabled {
    opacity: 1;
}

.q11 .question-text {
    margin-bottom: 0 !important;
}

.QBx2 .question-text {
    margin-bottom: 0 !important;
}

.q11 .question-text div {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1rem;
}

.q11 ion-item:first-child,
.q11 ion-item:nth-child(2) {
    width: 100%;
}

.q11 ion-list {
    padding: 1rem !important;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.q11 ion-item:nth-child(3) {
    width: fit-content;
}

.QBx2 ion-item:first-child,
.QBx2 ion-item:nth-child(2) {
    width: 100%;
}

.QBx2 ion-list {
    padding: 1rem !important;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.QBx2 ion-item:nth-child(3) {
    width: fit-content;
}

.q12 .survey {
    background: url(q12-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q12 .question-container {
    padding: 1rem !important;
}

.q12 img {
    margin-bottom: 2rem;
}

.q13 .survey {
    background: url(q13-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q13 #surveyForm {
    padding: 1rem!important;
}

.q13 .question-text {
    margin-top: 0!important;
}

.q13 .question-text div {
    background-color: rgb(250, 228, 211);
}

.q13 ion-item,
.q13 ion-item.active {
    --background: rgb(47, 85, 151) !important;
    --color: #fff !important;
    border-radius: 1rem !important;
    border: solid 1px #fff !important;
    margin-bottom: .5rem;
}

.q13 ion-item.active {
    --background: #4CAF50 !important;
}

.q13a .survey {
    background: url(q13a-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q13a .question-container {
    padding: 1rem !important;
}

.q13a .question-text {
    text-align: center;
    color: #fff;
    font-size: 1.2rem !important;
    padding: 1rem;
    background-color: rgb(145, 105, 11);
    border-radius: 0 1rem;
    margin-top: 0;
}

.q13a ion-item img,
.q15b ion-item img {
    width: 140px !important;
    height: 220px !important;
}

.q14 .question-container {
    padding: .5rem;
}

.q14 .question-text {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.q14 .question-text img {
    max-width: 100px;
}

.q14 .question-text div {
    padding: .5rem;
    background: rgb(84, 130, 53);
    color: #fff;
}

.q14 ion-item,
.q14 ion-item.active {
    --background: rgb(102 147 76) !important;
    --color: #fff;
    border-radius: .5rem;
    margin-bottom: .5rem;
}

.q15a .survey {
    background: url(q15a-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q15a #surveyForm,
.q15b #surveyForm {
    display: flex;
    justify-content: center;
}

.q15a .question-text,
.q15b .question-text {
    text-align: center;
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
    margin-top: 0;
}

.q15a .question-text div,
.q15b .question-text div {
    margin-bottom: 1rem;
    background-color: rgb(232, 119, 34);
    padding: 2rem 1rem;
    color: #fff;
}

.q15a img {
    max-width: 100px;
}

.q15b .survey {
    background: url(q15b-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q15b .question-text div {
    background-color: rgb(84, 130, 53);
}

.q15c .survey {
    background: url(q15c-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q15c .question-container {
    padding: 1rem;
}

.q15c .question-text {
    text-align: center;
    font-size: 1.2rem !important;
    padding: 1rem;
    background-color: rgb(255, 192, 0);
    border-radius: 0 1rem;
}

.q15c .choice ion-label {
    display: flex;
    align-items: center;
    margin-bottom: .5!important;
}

.q15c .choice img {
    width: 100px;
    margin: .5rem 0;
    margin-right: 1rem;
}

.q15d .choice ion-label {
    display: flex;
    white-space: break-spaces;
    align-items: center;
    margin-bottom: .5!important;
}

.q15d .choice ion-label div {
    white-space: break-spaces;
    background-color: #fcf2da;
    color: #000000;
    padding: 6px;
    align-items: center;
    margin-bottom: .5!important;
}

.q15d .choice ion-label div b {
    display: block;
}

.q15d .choice img {
    width: 100px;
    margin: .5rem 0;
    margin-right: 1rem;
}

.ii5 .question-text {
    margin-top: 0;
}

.ii5 .question-text div {
    text-align: center;
    color: #fff;
    font-size: 1.2rem !important;
    padding: 2rem 1rem;
    font-weight: bold;
    margin-bottom: 2rem;
    background-color: rgb(47, 70, 156);
}

.ii6 .survey {
    background: url(ii6-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ii6 .question-text {
    text-align: center;
    font-size: 1.2rem !important;
    padding: 2rem 1rem;
    margin-top: 4rem;
    background-color: rgb(255, 242, 204);
}

.ii6 .big-little {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.q16 .survey {
    background: url(q16-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#Q16 .question-text {
    margin: 1rem;
    color: #fff;
    text-align: center;
    font-size: 1.2rem !important;
    background-color: rgb(32, 56, 100);
    border-radius: 0 1rem;
    padding: 1rem;
}

#Q16Other_Container {
    padding: 1rem;
}

.q17 .survey,
.q18 .survey {
    background: url(q17-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#Q17 .question-text,
#Q18 .question-text {
    margin-top: 0;
    color: #fff;
    text-align: center;
    font-size: 1.2rem !important;
    background-color: rgb(32, 56, 100);
    padding: 1rem;
}

#Q17 ion-row,
#Q18 ion-row {
    display: flex;
    justify-content: center;
}

#Q17 .media-title,
#Q18 .media-title {
    padding: .2rem;
    border-radius: .2rem;
    margin-top: .5rem;
    color: #fff;
    text-align: center;
    min-width: 100%;
    font-weight: normal!important;
}

#Q17 .media-title {
    white-space: nowrap;
}

#Q17>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(1)>div>div,
#Q18>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(4)>div>div {
    background: rgb(241, 140, 85);
}

#Q17>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(2)>div>div,
#Q18>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(1)>div>div {
    background: rgb(0, 99, 222);
}

#Q18>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(2)>div>div {
    background: rgb(112, 173, 71);
}

#Q18>div.answer>multi-select-quest>ion-grid>ion-row>ion-col:nth-child(3)>div>div {
    background: rgb(255, 217, 102);
    color: #000;
}

#Q17Other_Container,
#Q18Other_Container {
    padding: 1rem;
}

#Q17Other .question-text,
#Q18Other .question-text {
    display: none;
}

.q21 .survey {
    background: url(q21-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.q21 .question-text {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.2rem !important;
    background-color: rgb(242, 242, 242);
    padding: 1rem;
}

#Q21>div.answer>single-select-quest>ion-list>ion-item {
    color: #fff;
    --background: rgb(47, 70, 156)!important;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    margin-left: 2rem;
    margin-right: 2rem;
}

#Q21>div.answer>single-select-quest>ion-list>ion-item.active {
    --background: var(--ion-color-primary)!important;
}

.thanks {
    background: url(game-over.jpg);
    justify-content: start !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.thanks-message {
    padding: 1rem;
    background: rgba(255, 255, 255, .5);
    border-radius: 1.5rem;
}

.thanks-message div:first-child {
    font-size: 2rem;
    font-weight: bold;
}

.thanks-message div:nth-child(2) {
    font-family: "Bradley Hand ITC";
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.thanks-message .big-little {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.thanks .buttons {
    position: fixed;
    bottom: 0;
    padding: .5rem;
}