/* - survey_usability.css - */
/* https://www.enisa.europa.eu/portal_css/survey_usability.css?original=1 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* */
/* */
/* */
@keyframes buttonShake {
10%, 19% {
top: 49%;
}
12%, 20% {
top: 50%;
}
13%, 15%, 17% {
top: 48%;
}
14%, 16% {
top: 52%;
}
}
.styled-radio {
position: relative;
width: 20px;
height: 20px;
display: inline-block;
}
.styled-radio input {
visibility: hidden;
position: absolute;
}
.styled-radio .check {
display: block;
position: absolute;
border: 1px solid #626262;
border-radius: 100%;
height: 20px;
width: 20px;
z-index: 5;
transition: border .25s linear;
}
.styled-radio:hover .check {
border: 1px solid #626262;
}
.styled-radio:hover .check:before {
background: #d0d0d0;
}
.styled-radio .check:before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 12px;
width: 12px;
top: 4px;
left: 4px;
margin: auto;
transition: background 0.25s linear;
}
.styled-radio input:checked ~ .check {
border: 1px solid #626262;
}
.styled-radio input:checked ~ .check:before {
background: #626262;
}
.survey-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity;
opacity: 1;
animation: fadeIn 0.1s ease-in-out;
}
.survey-wrapper {
width: 80%;
max-height: 90%;
max-width: 800px;
position: fixed;
top: 3%;
left: 50%;
z-index: 100;
transform: translate(-50%, 0);
overflow-x: auto;
box-shadow: 2px 2px 8px 0px #424242;
transition: opacity;
opacity: 1;
animation: fadeIn 0.3s ease-in-out;
}
.survey-content {
background-color: #fff;
padding: 1em 2em;
}
.survey-button {
padding: 0.5em 1em;
position: fixed;
z-index: 100;
right: 0;
top: 50%;
background-color: #d02244;
color: #fff;
cursor: pointer;
user-select: none;
box-shadow: 2px 2px 8px 0px #424242;
transition: opacity;
opacity: 1;
animation: fadeIn 1s cubic-bezier(0.76, 0.07, 0.76, 1.13), buttonShake 5s cubic-bezier(.36,.07,.19,.97) 5s normal 3 both;
}
.multiple-fields {
display: flex;
justify-content: space-between;
}
.multiple-fields .field {
display: flex;
flex-flow: column;
width: 45%;
}
.survey-form-field {
display: flex;
flex-direction: column;
margin-bottom: 1.5em;
}
.survey-form-subfield {
display: flex;
flex-direction: column;
margin-left: 1em;
}
.survey-form-field-rating-list {
display: flex;
justify-content: space-around;
width: 40%;
position: relative;
}
.icon-layout {
border: 1px solid black;
height: 30px;
width: 20px;
position: relative;
display: inline-block;
}
.icon-layout:before {
content: '';
background: #d02244;
position: absolute;
}
.icon-header:before {
width: 16px;
height: 5px;
left: 2px;
top: 2px;
}
.icon-footer:before {
width: 16px;
height: 10px;
bottom: 2px;
left: 2px;
}
.icon-left:before {
width: 5px;
height: 12px;
top: 8px;
left: 2px;
}
.icon-right:before {
width: 5px;
height: 12px;
top: 8px;
right: 2px;
}
.survey-form-field-hard-header {
display: flex;
justify-content: flex-end;
}
.hard-header-labels {
width: 40%;
display: flex;
justify-content: space-around;
}
.hard-header-labels div {
width: 2em;
text-align: center;
}
.survey-form-field-hard-ul {
padding: 0;
}
.survey-form-field-hard-li {
padding: 0.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.survey-form-field-hard-li:nth-child(odd) {
background-color: #eaeaea;
}
.survey-form-field-rating-label {
}
.survey-form-field-rating-label span {
vertical-align: top;
margin-left: 1em;
}
.survey-form-field-rating-radio {
display: flex;
flex-direction: column;
align-items: center;
}
.survey-form-field-radio-span {
margin-left: 0.5em;
}
.survey-form-buttons {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.survey-thank-you {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 300px;
}
.survey-thank-you-wrapper {
display: flex;
flex-direction: column;
align-items: center;
height: 8rem;
justify-content: space-around;
height: 120px;
}
.survey-thank-you-text {
font-size: 18pt;
}
.privacy-notice {
margin: 1em 0;
text-align: center;
}