body {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    background-color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
}

p {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom: 1em;
}

a, span.a {
    text-decoration: none;
    color: #009ee3;
    cursor: pointer;
}

a:hover, span.a:hover {
    text-decoration: underline;
}

h1 {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
}

h2 {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom: 1em;
}

h3 {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 0.5em;
    border-bottom: 2px dotted rgba(0,0,0,0.25);
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom: 1em;
}

h4 {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #999999;
    margin-bottom: 2em;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom: 1em;
}

h5 {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    margin: 0;
    padding-top: 1em;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom: 1em;
}

.space {
    position: relative;
    padding: 1em;
    padding-top: 2em;
    padding-bottom: 2em;
}

.white-space {
    position: relative;
    height: 3em;
    width: 100%;
    float: left;
}

/* Progress */
.progress-bar {
    position: relative;
    width: calc(100% - 2em);
    padding: 1em;
    padding-top: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.progress {
    position: relative;
    width: 100%;
    height: 6px;
    background: #f7f7f7;
    border-radius: 5px;
    overflow: hidden;
}

.progress span {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: #009ee3;
}

/* Splash screen */

#splash-screen {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#splash-screen h2 {
    line-height: 46px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

#splash-screen tr {
    opacity: 0.2;
}

#splash-screen tr.active {
    opacity: 1;
    transition: all 0.35s ease-out 0.5s;
}

#splash-screen td:first-child {
    padding-left: 1em;
    padding-right: 1em;
}

.splash-screen-check {
    position: relative;
    width: 1.75em;
    height: 1.75em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.splash-screen-icon-border {
    fill:#FFFFFF;
    stroke:#F0F0F0;
    stroke-width:10;
    stroke-miterlimit:10;
}

.splash-screen-icon-check {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    fill:#459a00;
}

.active .splash-screen-icon-check {
    opacity: 1;
    transform: scale(1);
    transition: all 0.35s ease-out 0.5s;
}

/* Survey */
#survey-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    background-color: #ffffff;
    min-height: 512px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    min-height: 320px;
    display: table;
}

#question-wrapper {
    position: relative;
    display: table;
    width: 100%;
}

#survey-wrapper-inner {
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    min-height: 320px;
}

.company-logo {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    max-width: 90px;
    margin-bottom: 1em;
    height: auto;
    filter: grayscale(1);
}

.question {
    margin-top: 0;
}

.hint {
    color: #999999;
    margin-bottom: 2em;
}

span#charNum {
    position: relative;
    display: inline;
    left: 0;
    top: 0;
}

.survey-safe-feedback {
    color: #aaaaaa;
    text-decoration: underline;
    float: right;
    font-size: 0.8em;
}

#question-wrapper textarea {
    border: 1px solid #cccccc;
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.5%;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
}

#other-input {
    display: none;
}

#question-wrapper .communication-preferences {
    position: relative;
    padding: 1rem;
    background-color: #fff8e1;
    box-shadow: inset 0px 0px 0px 1px #FFCE0A;
}

/* Smiley */

.smiley {
    color: inherit;
    margin-right: 0.5em;
}

/* Button */
button {
    position: relative;
    height: 42px;
    line-height: 42px;
    border: 0px;
    font-size: 100%;
    padding: 0em;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #009ee3;
    box-shadow: inset 0px -2px 0px rgba(0,0,0,0.15);
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
    transition: all 0.15s ease-in-out;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
}

button:hover {
    filter: brightness(1.05);
}

button#previous {
    background-color: rgba(255,255,255,0);
    color: #222222;
    box-shadow: inherit;
    padding-left: 0;
    padding-right: 0;
    border-radius: inherit;
    float: left;
    text-shadow: none;
    /*display: none;*/
}

button#previous:hover {
    text-decoration: underline;
    background-color: inherit;
}

button#next, button#finish {
    float: right;
    font-weight: bold;
    padding-left: 2.5em;
}

@keyframes next-complete {
    0% {transform: scale(1);}
    50% {transform: scale(1.75);}
    100% {transform: scale(1);}
}

button#next.complete, button#finish.complete {
    opacity: 1;
    transition: all 0.15s ease-in-out;
}

button#next span, button#finish span {
    position: absolute;
    display: inline-block;
    width: 2.5em;
    height: 2.6em;
    left: 0;
    top: 0;
    padding: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 5px;
    background-size: 1em;
    opacity: 0.25;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFhZ18xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iLTM3IDM5IDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC0zNyAzOSAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xNi43LDQxLjVMLTI4LDUzLjFsLTUuMy01bC0zLjcsMy43bDksOC43bDE1LTE1LjNMLTE2LjcsNDEuNXoiLz4NCjwvc3ZnPg0K);
}

button#next.complete span, button#finish.complete span {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
    animation: next-complete 0.35s ease-in-out 1;
}

button#finish {
    float: right;
    /*display: none;*/
    font-weight: bold;
}

button:disabled {
    cursor: default;
    background-color: #cccccc;
    cursor: default;
}

/* Text, Tel */
input[type="text"], input[type="tel"] {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    border: 1px solid #e3e3e3;
    padding: 0 0.25em;
    text-indent: 0.25em;
    height: 2em;
    background: #ffffff;
    width: 100%;
    max-width: 128px;
    box-sizing: border-box;
}

input[type="number"] {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    border: 1px solid #e3e3e3;
    padding: 0 0.25em;
    text-indent: 0.25em;
    height: 2.5em;
    background: #ffffff;
    width: 100%;
    max-width: 128px;
    box-sizing: border-box;
}

/* Select */
select {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    border: 1px solid #e3e3e3;
    padding: 0.25em;
    text-indent: 0.25em;
    height: 2em;
    background: #ffffff;
    width: 100%;
    max-width: 128px;
    box-sizing: border-box;
}

/* Checkbox */
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: calc(50% - 1em);
    padding-right: 1em;
    display: inline-block;
    float: left;
}

input[type="checkbox"]:checked + label {

}

input[type="checkbox"] + label span {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background-color: #f0f0f0;
    margin-right: 0.75em;
    margin-bottom: 0.25em;
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

input[type="checkbox"]:disabled + label span:hover {
    background-color: #f0f0f0;
    cursor: default;
}

input[type="checkbox"] + label {
    cursor: pointer;
}

input[type="checkbox"]:checked + label span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gaWQ9ImNoZWNrLW1hcmstaWNvbiIgcG9pbnRzPSI0MjYuNjYxLDYwLjM4MiAxODguNDc1LDI5OC41NjkgODUuMzA1LDE5NS4zNzEgOC44LDI3MS44OTEgMTg4LjQ3OSw0NTEuNjE3IDUwMy4xOTksMTM2Ljg3MSANCgkiLz4NCjwvc3ZnPg0K);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-size 0.05s ease-out;
}

/* Radiobutton */
input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: calc(50% - 1em);
    padding-right: 1em;
    display: inline-block;
    float: left;
}

input[type="radio"]:checked + label {

}

input[type="radio"] + label span {
    display: table;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: #f0f0f0;
    margin-right: 0.75em;
    margin-bottom: 0.25em;
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

input[type="radio"]:disabled + label span:hover {
    background-color: #f0f0f0;
    cursor: default;
}

input[type="radio"] + label {
    cursor: pointer;
}

input[type="radio"]:checked + label span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFhZ18xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTIuOCIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-size 0.1s ease-out;
}

/* 5 Star rating */
.five-star-rating {
    position: relative;
    display: block;
    width: 100%;
    max-width: 20rem;
    float:  left;
}

.five-star-rating input[type="radio"] {
    display: none;
}

.five-star-rating .star {
    position: relative;
    display: block;
    float: left;
    height: 3rem;
    width: 3.5rem;
    margin: 0;
    transition: transform 0.15s ease-out;
}

.five-star-rating .star:hover {
    transform: scale(1.15);
    transition: transform 0.05s ease-out;
}

.five-star-rating input[type="radio"] + label {
    position: relative;
    display: block;
    width: 1.75rem;
    height: 3rem;
    padding: 0;
    margin: 0;
}

.five-star-rating input[type="radio"] + label span {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 3rem;
    margin: 0;
    background-color: inherit;
    box-shadow: inherit;
    background-size: 3rem;
    background-position: left center;
    border-radius: 0;
    transition: none;
    cursor: pointer;
    background-image:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7fQoJLnN0MXtvcGFjaXR5OjAuNTtmaWxsOiMyMjIyMjI7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjYuNywxNC45IDEuMSw5LjUgOC43LDguNSAxMiwxLjcgMTUuMyw4LjUgMjIuOSw5LjUgMTcuMywxNC45IDE4LjcsMjIuMyAxMiwxOC43IDUuMywyMi4zICIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEuOCw5LjdoMC41djFoLTAuNVY5Ljd6IE0xMS44LDE2LjdoMC41di0xaC0wLjVWMTYuN3ogTTExLjgsMTMuN2gwLjV2LTFoLTAuNVYxMy43eiBNMTEuOCw3LjdoMC41di0xaC0wLjUKCVY3Ljd6IE0xNy4zLDE0LjlsMS40LDcuNEwxMiwxOC43bC02LjcsMy42bDEuNC03LjRMMS4xLDkuNWw3LjYtMUwxMiwxLjdsMy4zLDYuOGw3LjYsMUwxNy4zLDE0Ljl6IE0xNi4zLDE1LjFsLTAuMS0wLjVsMC40LTAuNAoJbDQuMS00bC01LjUtMC43bC0wLjUtMC4xbC0wLjItMC41TDEyLDRMOS42LDguOUw5LjQsOS40TDguOCw5LjVsLTUuNSwwLjdsNC4xLDRsMC40LDAuNGwtMC4xLDAuNWwtMSw1LjNsNC45LTIuNmwwLjUtMC4zbDAuNSwwLjMKCWw0LjksMi42TDE2LjMsMTUuMXoiLz4KPC9zdmc+Cg==);
}

.five-star-rating input[type="radio"]:nth-child(4n+1) + label span {
    margin-left: 0.25rem;
}

.five-star-rating input[type="radio"]:nth-child(4n+3) + label span {
    margin-right: 0.25rem;
    background-position: right center;
}

.five-star-rating input[type="radio"] + label.animate-in span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNEN0Q3RDc7fQoJLnN0MXtvcGFjaXR5OjAuNTtmaWxsOiMyMjIyMjI7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNi43LDE0LjkgMS4xLDkuNSA4LjcsOC41IDEyLDEuNyAxNS4zLDguNSAyMi45LDkuNSAxNy4zLDE0LjkgMTguNywyMi4zIDEyLDE4LjcgNS4zLDIyLjMgIi8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMS44LDkuN2gwLjV2MWgtMC41VjkuN3ogTTExLjgsMTYuN2gwLjV2LTFoLTAuNVYxNi43eiBNMTEuOCwxMy43aDAuNXYtMWgtMC41VjEzLjd6IE0xMS44LDcuN2gwLjV2LTFoLTAuNQoJVjcuN3ogTTE3LjMsMTQuOWwxLjQsNy40TDEyLDE4LjdsLTYuNywzLjZsMS40LTcuNEwxLjEsOS41bDcuNi0xTDEyLDEuN2wzLjMsNi44bDcuNiwxTDE3LjMsMTQuOXogTTE2LjMsMTUuMWwtMC4xLTAuNWwwLjQtMC40CglsNC4xLTRsLTUuNS0wLjdsLTAuNS0wLjFsLTAuMi0wLjVMMTIsNEw5LjYsOC45TDkuNCw5LjRMOC44LDkuNWwtNS41LDAuN2w0LjEsNGwwLjQsMC40bC0wLjEsMC41bC0xLDUuM2w0LjktMi42bDAuNS0wLjNsMC41LDAuMwoJbDQuOSwyLjZMMTYuMywxNS4xeiIvPgo8L3N2Zz4K);
}

.five-star-rating[data-stars="detractor"] input[type="radio"].active + label span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNEODAwMDA7fQoJLnN0MXtvcGFjaXR5OjAuNTtmaWxsOiMyMjIyMjI7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjYuNywxNC45IDEuMSw5LjUgOC43LDguNSAxMiwxLjcgMTUuMyw4LjUgMjIuOSw5LjUgMTcuMywxNC45IDE4LjcsMjIuMyAxMiwxOC43IDUuMywyMi4zICIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEuOCw5LjdoMC41djFoLTAuNVY5Ljd6IE0xMS44LDE2LjdoMC41di0xaC0wLjVWMTYuN3ogTTExLjgsMTMuN2gwLjV2LTFoLTAuNVYxMy43eiBNMTEuOCw3LjdoMC41di0xaC0wLjUKCVY3Ljd6IE0xNy4zLDE0LjlsMS40LDcuNEwxMiwxOC43bC02LjcsMy42bDEuNC03LjRMMS4xLDkuNWw3LjYtMUwxMiwxLjdsMy4zLDYuOGw3LjYsMUwxNy4zLDE0Ljl6IE0xNi4zLDE1LjFsLTAuMS0wLjVsMC40LTAuNAoJbDQuMS00bC01LjUtMC43bC0wLjUtMC4xbC0wLjItMC41TDEyLDRMOS42LDguOUw5LjQsOS40TDguOCw5LjVsLTUuNSwwLjdsNC4xLDRsMC40LDAuNGwtMC4xLDAuNWwtMSw1LjNsNC45LTIuNmwwLjUtMC4zbDAuNSwwLjMKCWw0LjksMi42TDE2LjMsMTUuMXoiLz4KPC9zdmc+Cg==);
}

.five-star-rating[data-stars="passive"] input[type="radio"].active + label span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkRCMjE7fQoJLnN0MXtvcGFjaXR5OjAuNTtmaWxsOiMyMjIyMjI7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjYuNywxNC45IDEuMSw5LjUgOC43LDguNSAxMiwxLjcgMTUuMyw4LjUgMjIuOSw5LjUgMTcuMywxNC45IDE4LjcsMjIuMyAxMiwxOC43IDUuMywyMi4zICIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEuOCw5LjdoMC41djFoLTAuNVY5Ljd6IE0xMS44LDE2LjdoMC41di0xaC0wLjVWMTYuN3ogTTExLjgsMTMuN2gwLjV2LTFoLTAuNVYxMy43eiBNMTEuOCw3LjdoMC41di0xaC0wLjUKCVY3Ljd6IE0xNy4zLDE0LjlsMS40LDcuNEwxMiwxOC43bC02LjcsMy42bDEuNC03LjRMMS4xLDkuNWw3LjYtMUwxMiwxLjdsMy4zLDYuOGw3LjYsMUwxNy4zLDE0Ljl6IE0xNi4zLDE1LjFsLTAuMS0wLjVsMC40LTAuNAoJbDQuMS00bC01LjUtMC43bC0wLjUtMC4xbC0wLjItMC41TDEyLDRMOS42LDguOUw5LjQsOS40TDguOCw5LjVsLTUuNSwwLjdsNC4xLDRsMC40LDAuNGwtMC4xLDAuNWwtMSw1LjNsNC45LTIuNmwwLjUtMC4zbDAuNSwwLjMKCWw0LjksMi42TDE2LjMsMTUuMXoiLz4KPC9zdmc+Cg==);
}

.five-star-rating[data-stars="promotor"] input[type="radio"].active + label span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMwMDk2Mjk7fQoJLnN0MXtvcGFjaXR5OjAuNTtmaWxsOiMyMjIyMjI7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjYuNywxNC45IDEuMSw5LjUgOC43LDguNSAxMiwxLjcgMTUuMyw4LjUgMjIuOSw5LjUgMTcuMywxNC45IDE4LjcsMjIuMyAxMiwxOC43IDUuMywyMi4zICIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEuOCw5LjdoMC41djFoLTAuNVY5Ljd6IE0xMS44LDE2LjdoMC41di0xaC0wLjVWMTYuN3ogTTExLjgsMTMuN2gwLjV2LTFoLTAuNVYxMy43eiBNMTEuOCw3LjdoMC41di0xaC0wLjUKCVY3Ljd6IE0xNy4zLDE0LjlsMS40LDcuNEwxMiwxOC43bC02LjcsMy42bDEuNC03LjRMMS4xLDkuNWw3LjYtMUwxMiwxLjdsMy4zLDYuOGw3LjYsMUwxNy4zLDE0Ljl6IE0xNi4zLDE1LjFsLTAuMS0wLjVsMC40LTAuNAoJbDQuMS00bC01LjUtMC43bC0wLjUtMC4xbC0wLjItMC41TDEyLDRMOS42LDguOUw5LjQsOS40TDguOCw5LjVsLTUuNSwwLjdsNC4xLDRsMC40LDAuNGwtMC4xLDAuNWwtMSw1LjNsNC45LTIuNmwwLjUtMC4zbDAuNSwwLjMKCWw0LjksMi42TDE2LjMsMTUuMXoiLz4KPC9zdmc+Cg==);
}

/* Values checkbox */
.values {
    position: relative;
    text-align: center;
}

.values input[type="checkbox"] {
    display: none;
}

.values input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    padding: 1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    background-color: #f7f7f7;
    margin-top: 0;
    margin: 0.25em;
    margin-bottom: 0.5em;
    border-radius: 16px;
    width: inherit;
    float: inherit;
    cursor: pointer;
}

.values input[type="checkbox"] + label span {
    display: table;
    vertical-align: middle;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background-color: #f0f0f0;
    margin-right: 1em;
    margin-bottom: 0.25em;
    cursor: pointer;
}

.values input[type="checkbox"]:disabled + label span:hover {
    background-color: #f0f0f0;
    cursor: default;
}

.values input[type="checkbox"] + label {
    cursor: pointer;
}

@keyframes values-checked {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-1.5deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(1.5deg);}
    100% {transform: rotate(0deg);}
}

.values input[type="checkbox"]:checked + label {
    background-color: #09b597;
    color: #ffffff;
    animation: values-checked 0.2s ease-in-out 1;
}

/* Ranking */
.ranking {
    position: relative;
    display: table;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.ranking input[type="checkbox"] {
    display: none;
}

.ranking input[type="checkbox"] + label {
    display: block;
    width: 100%;
    margin-bottom: 1em;
    text-align: left;
    border: 0;
    background: #f0f0f0;
    box-shadow: none;
    height: 1.5em;
    line-height: 1.5em;
    text-indent: 1em;
    border-radius: 16px;
    cursor: default;
}

.ranking input[type="checkbox"].clear + label {
    color: #222222;
    cursor: pointer;
}

.ranking input[type="checkbox"] + label span {
    float: right;
    margin: 0;
    border-radius: inherit;
    margin-right: 1em;
    background-color: inherit;
    box-shadow: none;
    cursor: default;
    vertical-align: initial;
    border: initial;
    display: inline-block;
    width: initial;
    height: initial;
}

@keyframes ranking-checked {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-0.35deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(0.35deg);}
    100% {transform: rotate(0deg);}
}

.ranking input[type="checkbox"]:checked + label {
    color: #ffffff;
    background: #555555;
    animation: ranking-checked 0.2s ease-in-out 1;
}

.ranking input[type="checkbox"]:checked + label span {
    background-image: inherit;
}

#clear-ranking {

}

/* Range slider */
.range {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 100px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.range .result {
    position: relative;
    display: table-cell;
    width: 100px;
    height: 100px;
    text-align: center;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center 5px;
}

.range .result span {
    position: absolute;
    background: #ffffff;
    font-weight: bold;
    display: block;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    opacity: 0;
}

.range .input {
    position: relative;
    display: table-cell;
    float: left;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.range .label {
    position: relative;
    display: inline-block;
    float: left;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.range .input input {
    position: relative;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}

.range .label span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-weight: bold;
    line-height: 20px;
}

.range .result {
    background-image: url('img/range/happy-none.png');
}

.range .result.f-0 {
    background-image: url('img/range/happy-0.png');
}

.range .result.f-1 {
    background-image: url('img/range/happy-1.png');
}

.range .result.f-2 {
    background-image: url('img/range/happy-2.png');
}

.range .result.f-3 {
    background-image: url('img/range/happy-3.png');
}

.range .result.f-4 {
    background-image: url('img/range/happy-4.png');
}

.range .result.f-5 {
    background-image: url('img/range/happy-5.png');
}

.range .result.f-6 {
    background-image: url('img/range/happy-6.png');
}

.range .result.f-7 {
    background-image: url('img/range/happy-7.png');
}

.range .result.f-8 {
    background-image: url('img/range/happy-8.png');
}

.range .result.f-9 {
    background-image: url('img/range/happy-9.png');
}

.range .result.f-10 {
    background-image: url('img/range/happy-10.png');
}

.range input[type=range]{
    -webkit-appearance: none;
}

.range input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: #e3e3e3;
    border: none;
    cursor: pointer;
}

.range input[type=range]::-ms-track {
    height: 8px;
    border-radius: 4px;
    background: #e3e3e3;
    border: none;
    cursor: pointer;
}

.range input[type=range]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: #e3e3e3;
    border: none;
    cursor: pointer;
}

input[type=range]::-ms-fill-lower {
  background: none;
}

input[type=range]:focus::-ms-fill-lower {
  background: none;
}

input[type=range]::-ms-fill-upper {
  background: none;
}

input[type=range]:focus::-ms-fill-upper {
  background: none;
}

.range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 22px;
    width: 12px;
    border-radius: 4px;
    background: #222222;
    margin-top: -6px;
    cursor: pointer;
}

.range input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #222222;
    margin-top: 0px;
    cursor: pointer;
}

.range input[type=range]:focus {
    outline: none;
}

.range input[type=range]:focus::-webkit-slider-runnable-track {

}

.range .label span.left {
    float: left;
}

.range .label span.right {
    float: right;
}

/* Popup */
#overlay-background {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.0);
    display: none;
    z-index: 6;
}

#overlay-background.active {
    background-color: rgba(0,0,0,0.5);
    transition: all 0.3s linear;
}

#overlay-wrapper {
    position: absolute;
    left: 50%;
    top: 10%;
    height: 80%;
    max-height: 600px;
    width: 600px;
    background-color: #FFF;
    margin-left: -300px;
    display: block;
    border-radius: 8px;
    transform-origin: center center;
    transform: scale(0.5);
    opacity: 0;
}

#overlay-wrapper.active {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.3s ease-out, opacity 0.15s linear;
}

#overlay {
    position: absolute;
    width: 90%;
    height: 85%;
    top: 10%;
    left: 5%;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#overlay::-webkit-scrollbar {
    width: 8px;
}

#overlay::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #f0f0f0;
}

#overlay::-webkit-scrollbar-thumb {
    background-color: #999999;
    outline: none;
    border-radius: 6px;
}

.overlay-clickout {
    position: absolute;
}

.clickout-left {
    height: 1000%;
    width: 500%;
    top: -500%;
    right: 100%;
}

.clickout-right {
    height: 1000%;
    width: 500%;
    top: -500%;
    left: 100%;
}

.clickout-top {
    height: 1000%;
    width: 100%;
    bottom: 100%;
    left: 0;
}

.clickout-bottom {
    height: 1000%;
    width: 100%;
    top: 100%;
    left: 0;
}

#overlay-close {
    transition: all 0.1s ease-in-out;
    background-color: rgba(0,0,0,0);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjYxMnB4IiBoZWlnaHQ9IjYxMnB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyIDYxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9ImNyb3NzIj4NCgkJPGc+DQoJCQk8cG9seWdvbiBwb2ludHM9IjYxMiwzNi4wMDQgNTc2LjUyMSwwLjYwMyAzMDYsMjcwLjYwOCAzNS40NzgsMC42MDMgMCwzNi4wMDQgMjcwLjUyMiwzMDYuMDExIDAsNTc1Ljk5NyAzNS40NzgsNjExLjM5NyANCgkJCQkzMDYsMzQxLjQxMSA1NzYuNTIxLDYxMS4zOTcgNjEyLDU3NS45OTcgMzQxLjQ1OSwzMDYuMDExIAkJCSIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
    background-size: 12px;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 0px solid rgba(0,0,0,0.25);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    right: 24px;
    top: 16px;
    cursor: pointer;
    z-index: 2;
}

#overlay-close:hover {
    background-color: #f3f3f3;
}

#contact-form textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.25%;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
}

#contact-form input {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.25%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
    margin-bottom: 1em;
}

#unsubscribe-form input {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.25%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
    margin-bottom: 1em;
}

#survey-support-form textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.25%;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
}

#survey-support-form input {
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    width: 95%;
    padding: 2.25%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    resize: none;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-appearance: inherit;
    margin-bottom: 1em;
}

/* Notification */
#notification {
   position: fixed;
   top: 0;
   width: 100%;
   background: rgba(255, 200, 50, 0.975);
   box-shadow: inset 0px -1px 0px rgba(0,0,0,0.05);
   color: #222222 ;
   font-weight: bold;
   text-align: center;
   padding-top: 1em;
   padding-bottom: 1em;
   transform: translateY(-100%);
   transition: transform 0.75s ease-in;
   opacity: 0;
}

#notification.show {
    transform: translateY(0);
    transition: transform 0.35s ease-out;
    opacity: 1;
}

/* Animate */
#question-wrapper, #question-wrapper .question-inner, #question-wrapper h2, #question-wrapper .hint, #question-wrapper .button {
    opacity: 0;
}

#question-wrapper, #question-wrapper .question-inner.show, #question-wrapper h2.show, #question-wrapper .hint.show, #question-wrapper .button.show {
    transition: opacity 0.1s ease-out;
    opacity: 1;
}

#question-wrapper button {
    opacity: 0;
    transition: opacity 0s linear 0s;
}

#question-wrapper button.show {
    transition: opacity 0.1s linear;
    opacity: 1;
}

/* Footer */
#survey-footer {
    position: relative;
}

#survey-footer p {
    font-size: 11px;
    line-height: 16px;
    color: #aaaaaa;
    text-align: center;
}

#survey-footer a {
    color: #aaaaaa;
    text-decoration: underline;
}

#survey-footer .survey-change-language span,  #survey-footer .notification-preferences span {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
    margin: 0 0.5em -0.5em 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#survey-footer .survey-change-language span {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNBQUFBQUE7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIsMEM1LjQsMCwwLDUuNCwwLDEyczUuNCwxMiwxMiwxMnMxMi01LjQsMTItMTJTMTguNiwwLDEyLDB6IE0xMywxNi4xVjEzaDNjLTAuMSwxLjEtMC4yLDIuMi0wLjUsMy4zCglDMTQuNywxNi4yLDEzLjksMTYuMSwxMywxNi4xeiBNMTUsMTguMmMtMC41LDEuMy0xLjIsMi41LTIsMy41di0zLjZDMTMuNywxOC4xLDE0LjMsMTguMSwxNSwxOC4yeiBNMTMsMTFWOGMwLjksMCwxLjctMC4xLDIuNS0wLjIKCWMwLjIsMSwwLjQsMi4xLDAuNCwzLjJIMTN6IE0xMyw2VjIuM2MwLjgsMSwxLjUsMi4yLDIsMy41QzE0LjMsNS45LDEzLjcsNiwxMyw2eiBNMTUuNywyLjdjMS4yLDAuNSwyLjQsMS4yLDMuMywyLjEKCWMtMC42LDAuMi0xLjMsMC40LTIsMC42QzE2LjYsNC41LDE2LjIsMy42LDE1LjcsMi43eiBNOC41LDE2LjNjLTAuMi0xLTAuNC0yLjEtMC41LTMuM2gzdjMuMUMxMC4xLDE2LjEsOS4zLDE2LjIsOC41LDE2LjN6CgkgTTExLDE4LjF2My42Yy0wLjgtMS0xLjUtMi4xLTItMy41QzkuNywxOC4xLDEwLjMsMTguMSwxMSwxOC4xeiBNOCwxMWMwLjEtMS4xLDAuMi0yLjIsMC40LTMuMkM5LjMsNy45LDEwLjEsOCwxMSw4djNIOHogTTksNS44CgljMC41LTEuMywxLjItMi41LDItMy41VjZDMTAuMyw2LDkuNyw1LjksOSw1Ljh6IE03LDUuNUM2LjMsNS4zLDUuNiw1LjEsNSw0LjljMC45LTAuOSwyLjEtMS43LDMuMy0yLjFDNy44LDMuNiw3LjQsNC41LDcsNS41egoJIE02LjUsNy40QzYuMiw4LjUsNiw5LjcsNiwxMUgyLjFjMC4yLTEuNywwLjctMy4yLDEuNi00LjVDNC41LDYuOCw1LjUsNy4yLDYuNSw3LjR6IE02LjUsMTYuN2MtMSwwLjItMS45LDAuNS0yLjgsMC45CgljLTAuOS0xLjMtMS41LTIuOS0xLjYtNC42SDZDNiwxNC4zLDYuMiwxNS41LDYuNSwxNi43eiBNNywxOC42YzAuMywxLDAuOCwxLjksMS4zLDIuN0M3LjEsMjAuOCw2LDIwLjEsNSwxOS4yCglDNS43LDE4LjksNi4zLDE4LjcsNywxOC42eiBNMTcsMTguNmMwLjcsMC4yLDEuNCwwLjQsMiwwLjZjLTAuOSwwLjktMiwxLjYtMy4zLDIuMUMxNi4yLDIwLjQsMTYuNiwxOS41LDE3LDE4LjZ6IE0xNy41LDE2LjcKCWMwLjMtMS4yLDAuNC0yLjQsMC41LTMuN2gzLjljLTAuMiwxLjctMC43LDMuMi0xLjYsNC42QzE5LjQsMTcuMiwxOC41LDE2LjksMTcuNSwxNi43eiBNMTgsMTFjLTAuMS0xLjMtMC4yLTIuNS0wLjUtMy42CgljMS0wLjIsMS45LTAuNSwyLjgtMC45YzAuOSwxLjMsMS41LDIuOSwxLjYsNC41QzIxLjksMTEsMTgsMTEsMTgsMTF6Ii8+Cjwvc3ZnPgo=);
}

#survey-footer .notification-preferences span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYWFhYWFhIiBkPSJNMjAgOS4zNTJjMC00Ljg1Mi00Ljc1LTguMzUyLTEwLTguMzUyLTUuMjgxIDAtMTAgMy41MjctMTAgOC4zNTIgMCAxLjcxLjYxNSAzLjM5IDEuNzA1IDQuNjk1LjA0NyAxLjUyNy0uODUgMy43MTktMS42NiA1LjMxMiAyLjE2OC0uMzkxIDUuMjUyLTEuMjU4IDYuNjQ4LTIuMTE1IDcuNjk4IDEuODc3IDEzLjMwNy0yLjg0MiAxMy4zMDctNy44OTJ6bS0xMy45MiAyLjIxYy0uMzQ3LjI3NS0uODMuNDEzLTEuNDUuNDEzLS41MyAwLTEuMDAxLS4xMDItMS40MDgtLjMwNmwuMjI4LS45MDJjLjQxMi4yMDguODI4LjMxMiAxLjI1MS4zMTIuMjQ0IDAgLjQzNS0uMDQ2LjU3MS0uMTM5LjI2Mi0uMTc5LjI3OC0uNTM5LjAyLS43NDMtLjEyNS0uMDk3LS4zMzctLjE5Ny0uNjQxLS4yOTgtLjkxNS0uMzA1LTEuMzcxLS43ODEtMS4zNzEtMS40MyAwLS40Mi4xNjctLjc2NS41MDMtMS4wMzYuMzM3LS4yNzEuNzg2LS40MDcgMS4zNDQtLjQwNy40ODggMCAuOTEzLjA4MyAxLjI3OS4yNDlsLS4yNDguODczYy0uMzM0LS4xNTYtLjY4NC0uMjMzLTEuMDQ1LS4yMzMtLjIyMSAwLS4zOTYuMDQzLS41MjIuMTI4LS4yNS4xNjktLjI0NS40NzUtLjAzLjY1NS4xMDYuMDg5LjM1Ni4yMDUuNzU5LjM0Ny40NDIuMTU2Ljc2Ny4zNS45NzMuNTgxLjIwNS4yMzEuMzA4LjUxOC4zMDguODYxIDAgLjQ0MS0uMTc1Ljc5OS0uNTIxIDEuMDc1em01LjUzMS4zMzRjLS4wNzYtMS45MDEtLjExMy0zLjE5MS0uMTEzLTMuODY4aC0uMDIzYy0uMTE0LjUwOS0uNTAzIDEuNzczLTEuMTY1IDMuNzg5aC0uODU5Yy0uMzk3LTEuMzkxLS45ODEtMy43ODktLjk4MS0zLjc4OWgtLjAxNWwtLjE2OSAzLjg2OGgtMS4wMjVsLjMwNS00Ljc5MmgxLjQ5MmwuODQ1IDMuMzA2IDEuMDI0LTMuMzA2aDEuNTA5bC4yNTcgNC43OTJoLTEuMDgyem00LjYzNy0uMzE0Yy0uMzQ4LjI3Ny0uODQyLjQxOC0xLjQ2NS40MTgtLjUwNiAwLS45ODMtLjA4OS0xLjQzOS0uMzE3bC4yNDEtLjk1NmMuNC4yMDUuODExLjMyNSAxLjI2OS4zMjUuMjM3IDAgLjQyNS0uMDQ0LjU1NS0uMTM1LjI1Mi0uMTY5LjI2Mi0uNTA4LjAyLS43LS4xMjItLjA5NS0uMzM0LS4xOTMtLjYzMi0uMjk0LS45MjMtLjMwNi0xLjM5Mi0uNzk0LTEuMzkyLTEuNDU0IDAtLjQyNS4xNzQtLjc4MS41MTYtMS4wNTYuMzM4LS4yNzUuNzk2LS40MTMgMS4zNTgtLjQxMy40OSAwIC45MjQuMDg0IDEuMjkxLjI1bC4wMi4wMS0uMjY0LjkyNmMtLjMzNy0uMTU5LS42NzQtLjI0Ni0xLjA2MS0uMjQ2LS4yMTUgMC0uMzg3LjA0Mi0uNTA5LjEyNC0uMjM0LjE2MS0uMjI5LjQ0NC0uMDI2LjYxNS4xMDMuMDg1LjM1NC4yMDEuNzUuMzQyLjQ0NS4xNTYuNzc1LjM1NS45ODIuNTg4LjIwOS4yMzYuMzE2LjUzLjMxNi44NzkuMDAxLjQ0Ny0uMTc4LjgxNS0uNTMgMS4wOTR6bTYuNjM2IDcuOTM5Yy0uMDI5IDEuMDAxLjU1OCAyLjQzNSAxLjA4OCAzLjQ3OS0xLjQxOS0uMjU4LTMuNDM4LS44MjQtNC4zNTItMS4zODUtMy4yNzkuNzk4LTYuMDY0LS4yMjMtNy41NzctMi4xLjU5Ni0uMDg2IDEuMTc4LS4yMDUgMS43NC0uMzY0IDEuODI0IDEuNTUyIDMuOTYyIDEuMzc0IDYuMDg5Ljg1NS42ODcuNDIyLjc3My41MDcgMS42NjUuODEzLS4xODctLjgxNi0uMTU4LTEuMTItLjEzOC0xLjg2NSAxLjc5My0yLjE0IDEuMjEzLTQuMTA0LS40NjQtNS4zNjUuMjM5LS40NTUuNDM5LS45MjguNjAxLTEuNDE2IDIuODkxIDEuOTEzIDMuMTAzIDUuMjUxIDEuMzQ4IDcuMzQ4eiIvPjwvc3ZnPg==);
}

#survey-footer .notification-preferences {
    margin-left: 1em;
}

/* Misc */
.privacy-statement h5 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0.5em;
}

.privacy-statement p, .privacy-statement li {
    font-size: 13px;
    line-height: 20px;
    text-align: justify;
}

.privacy-statement ul {
    margin: 0;
    padding: 0;
    list-style: disc;
    padding-left: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}

#id_mobile_phone_number_0 {
    width: 4rem;
}

.privacy-statement li {

}

/* Browser fixes */
*:focus {
  outline:0;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media only screen and (max-width: 768px) {

    body {
        background-color: #ffffff;
    }

    #survey-wrapper {
        border: none;
        box-shadow: none;
    }

    #survey-wrapper-inner {
        min-height: inherit;
    }

    .question {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    .hint {
        margin-top: 0;
        margin-bottom: 1em;
    }

    input[type="checkbox"] + label {
        position: relative;
        display: block;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        width: 100%;
        padding-right: 0;
        display: block;
    }

    input[type="radio"] + label {
        position: relative;
        display: block;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        width: 100%;
        padding-right: 0;
        display: block;
    }

     #overlay-wrapper {
        height: 100%;
        top: 0;
        width: 100%;
        margin-left: -50%;
        max-height: inherit;
        border-radius: 0;
    }

}