html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: 'Open Sans', Verdana, arial, sans-serif;
font-size: clamp(14px, calc(.32vw + 12px), 18px);
color: #000;
width: 100%;
min-width: fit-content;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-SemiboldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
}
#header, #footer, #main {
flex-shrink: 0;
}
#main {
flex-grow: 1;
}
#header {
width: 100%;
border-bottom: solid 2px rgba(255,129,2,.2);
background: #F5910F no-repeat;
background-image: url("data:image/svg+xml;utf8, ");
background-position: right -2em center;
background-size: auto clamp(9em, 50vw - 80px, 24em);
height: clamp(50px, calc(1.6vw + 40px), 70px);
}
#header .logo {
width: auto;
height: 100%;
background: url("data:image/svg+xml;utf8,") left center no-repeat;
background-size: contain;
}
#header-left, #header-right {
height: clamp(50px, calc(1.6vw + 40px), 70px);
border-bottom: solid 2px rgba(255,129,2,.2);
background: #F5910F no-repeat;
}
#header-right {
background-image: url("data:image/svg+xml;utf8, ");
background-position: left -26.5em center;
background-size: auto 24em;
}
#footer {
font-size: 10px;
color: #666;
padding: 1em;
text-align: center;
margin-top: 5em;
}
#footer a {
text-decoration: none;
color: #666;
}
#cawi .question {
margin: 1em 1em 0em 1em;
}
#cawi .q_text {
border: none;
background: none;
border-bottom: none;
padding: 1em 0em;
font-weight: 600;
margin: 0;
}
#cawi .question:nth-child(n+3) .q_text {
border-top: 1px solid rgba(0,0,0,.1);
}
#cawi .question.error {
margin: 1em 1em 0em 1em;
border: 2px solid #FF4000;
border-radius: 1em;
background: rgba(255, 246, 242, 0.3);
}
#cawi .question.error .q_text {
margin: 0;
}
#cawi .radio.hover, #cawi .checkbox.hover {
background: none;
}
#cawi .radio .radio-img {
background-image: url('img/radio_v3.svg');
margin-top: calc(-12px + 0.75em);
}
#cawi .checkbox .check-img {
background-image: url('img/check_v3.svg');
margin-top: calc(-12px + 0.75em);
}
#cawi .question[type="multi"] .checkbox, #cawi .question[type="single"] .radio {
border-left: none;
}
#cawi .question[type="matrix"] .answer_table td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#cawi .question[type="matrix"] .answer_table td .m_text {
padding-left: 5px;
}
#cawi .question[type="matrix"] .answer_table td .m_text::before,
#cawi .question[type="matrix"] .answer_table td .m_second_text::before {
content: attr(text-content);
white-space: nowrap;
display: block;
user-select: none;
height: 0;
max-width: clamp(0em,20vw,16em);
overflow: hidden;
visibility: hidden;
}
#cawi #progress_bar {
background: rgba(0,0,0,.1);
top: 3em;
position: inherit;
}
#cawi .q_answer {
margin-left: 0;
margin-right: 0;
}
#cawi .q_answer td {
padding: 0px;
}
#cawi select {
color: #000;
}
#cawi #nav_bar {
border-top: none;
white-space: nowrap;
text-align: center;
}
#cawi #back_button, #cawi #next_button {
background: #F5910F;
color: #FFF;
margin: 2em 0.5em 1em 0.5em;
padding: 0.3em;
width: 8em;
height: auto;
text-transform: none;
text-align: center;
font-weight: bold;
border-radius: 0.5em;
display: inline-block;
float: none;
}
#cawi #next_button.locked {
background: rgba(0,0,0,.1);
}
#cawi #back_button {
margin-right: 0em;
}
#cawi .q_error {
color: #F16A0E;
background: none;
margin-left: 0.5em;
}
#cawi .question.error {
margin: 1em 1em 0em calc(0.5em - 2px);
border: none;
border-left: 2px solid #F5910F;
border-radius: 0em;
background: none;
padding-left: 0.5em;
}
#cawi .question.error .answer_table thead {
background: none;
}
#cawi .question[type="single"] .radio, #cawi .question[type="multi"] .checkbox {
padding: 0.4em 0.4em 0.4em 25px;
}
#cawi .question[type="single"] .radio .radio-img, #cawi .question[type="multi"] .checkbox .check-img{
margin-left: -26px;
}
#cawi .question[type="single"] select {
margin-left: 0;
}
#cawi .question[type="matrix"] .answer_table tr:hover .m_text {
background: none;
}
#cawi .question[type="matrix"] .answer_table tr:hover td:nth-child(1) {
background: rgba(0, 0, 0, 0.05);
}
#cawi .question[type="matrix"] .q_answer {
margin-left: 0em;
}
#cawi .question[type="matrix"] .answer_table thead td {
vertical-align: top;
border-bottom: none;
padding: 0.2em;
}
#cawi .question[type="explanation"] .q_text {
border-bottom: none;
}
#cawi .questions-flex-container {
display: flex;
}
#cawi .questions-flex-left, #cawi .questions-flex-right {
flex-grow: 1;
/*min-width: 1em;
flex-basis: clamp(0px, calc(56vw - 480px), 30vw);*/
flex-basis: 0;
min-width: 0;
flex-shrink: 1;
}
#cawi .questions-flex-center {
flex-basis: 60em;
}
#cawi .radio.checked, #cawi .checkbox.checked {
color: #F5910F;
}
#cawi .answer_table thead {
font-weight: 600;
}
#cawi #progress_bar > div {
background: #F5910F;
}
/*@media screen and (max-width : 700px) {
#header {
background-size: auto 18em;
}
}*/
@media screen and (max-width : 500px) {
select {
width: 100%;
}
textarea {
width: 75vw !important;
}
.questions-flex-left, .questions-flex-right {
width: .5em;
min-width: 0;
flex-grow: 0;
}
#cawi #back_button, #cawi #next_button {
margin-left: 1.5em;
}
#cawi #back_button {
margin-right: -1em;
}
}