@charset "utf-8";
@keyframes selected {
    0%, to {
        transform:scale(1)
    }

    50% {
        transform:scale(1.05)
    }
}


/* custom changes 
#303181
*/

:root {
    --selected-fg-color: #000;
    --selected-bg-color: #ddaa;
}

.question .text .fa-keyboard {
    position: absolute;
    top: 12px;
    right: 15px;
}

/* Stil för textarea-question-sektionen */
section.textarea-question p {
    color: #666;
    margin: 5px 0 15px;
}


/* Stil för textarea inuti sektionen */
section.textarea-question textarea {
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 10px 15px;
    line-height: 1.2rem;
    color: #333;
    border: 1px solid #ced4da; /* Återställa standardram */
    border-radius: 3px;
    background-color: #fff;
    resize: none; /* Förhindra att användaren kan ändra storlek */
    box-sizing: border-box;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Fokus-effekt för textarean */
section.textarea-question textarea:focus {
    background: #e5e5e5;
    box-shadow: none;
    outline: none; /* Ta bort standardfokus */
}

/* Placeholder-stil för textarea */
section.textarea-question textarea::placeholder {
    color: #aaa; /* Ljusare grå färg */
}


    #survey .main .in .holder .slider .question.textarea-question .sizer .answers .list .limit {
    font-size: 11px;
    padding: 2px 0 0;
    opacity: .8;
    text-align:right;
}


/* general for survey.css */


body .gray_blue_700 {
    color:#202124
}

body .gray_blue_600 {
    color:#3d4144
}

#survey-template .template-review .in .slides .list .item .author span, body .gray_blue_500 {
    color:#5f6368
}

body .gray_blue_400 {
    color:#80868b
}

body .gray_blue_300 {
    color:#a2a8ad
}

body .gray_blue_200 {
    color:#ced0d5
}

body .gray_blue_100 {
    color:#e3e4e9
}

body .gray_blue_50 {
    color:#f1f3f3
}

body .gray_400 {
    color:#ebebeb
}

body .gray_300 {
    color:#f2f2f2
}

body .gray_200 {
    color:#f8f8f8
}

body .active_blue_700 {
    color:#0065ae
}

body .active_blue_600 {
    color:#0081de
}

body .active_blue_500 {
    color:#0098fd
}

body .active_blue_400 {
    color:#00c0fd
}

body .active_blue_200 {
    color:#81d7fc
}

body .active_blue_100 {
    color:#e3f7ff
}

body .yellow_500 {
    color:#fa0
}

body .yellow_400 {
    color:#ffc700
}

body .yellow_300 {
    color:#ffe16b
}

body .yellow_200 {
    color:#ffeca7
}

body .yellow_100 {
    color:#fff3c8
}

body .gold_700 {
    color:#8f5f00
}

body .gold_600 {
    color:#9b6400
}

body .gold_500 {
    color:#ca9a43
}

body .gold_400 {
    color:#e3c77d
}

body .gold_300 {
    color:#f1deab
}

body .gold_200 {
    color:#f6efdb
}

body .gold_100 {
    color:#f8f5ef
}

body .pro_gold_500 {
    color:#bd944a
}

body .pro_gold_600 {
    color:#a67516
}

body .pro_gold_700 {
    color:#8f5f00
}

body .brand_600 {
    color:#0e44aa
}

body .brand_500 {
    color:#1b54d6
}

body .brand_400 {
    color:#2169d8
}

body .brand_300 {
    color:#00a5ff
}

body .brand_200 {
    color:#c6d7ff
}

body .brand_100 {
    color:#e6efff
}

body .black {
    color:#000
}

body .black_90 {
    color:#1a1a1a
}

body .black_80 {
    color:#333
}

body .black_70 {
    color:#4d4d4d
}

body .black_50 {
    color:gray
}

body .black_20 {
    color:#ccc
}

body .black_10 {
    color:#e0e0e0
}

body .ink_500 {
    color:#031647
}

body .ink_400 {
    color:#4a526e
}

body .ink_300 {
    color:#757e9a
}

body .ink_200 {
    color:#929bb2
}

body .cloud_600 {
    color:#8293aa
}

body .cloud_500 {
    color:#c3ccd9
}

body .cloud_400 {
    color:#d7dbe3
}

body .cloud_300 {
    color:#e9e9e9
}

body .cloud_200 {
    color:#edeff0
}

body .cloud_100 {
    color:#f2f3f4
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.selected.text input, body .white {
    color:#fff
}

body .green_600 {
    color:#088585
}

body .green_500 {
    color:#00c0b4
}

body .green_400 {
    color:#00dccf
}

body .green_300 {
    color:#bbeadc
}

body .green_200 {
    color:#daf4e6
}

body .green_100 {
    color:#e8f9f0
}

body .persian_green {
    color:#01846e
}

body .red_600 {
    color:#a5283b
}

body .red_500 {
    color:#e82140
}

body .red_400 {
    color:#ff5372
}

body .red_300 {
    color:#ff8295
}

body .red_200 {
    color:#ffadba
}

body .red_100 {
    color:#ffced6
}

body .ice_100 {
    color:#dbeaee
}

body .blue_500 {
    color:#056efc
}

body .blue_500_app {
    color:#006cff
}

#survey a, #survey abbr, #survey acronym, #survey address, #survey applet, #survey article, #survey aside, #survey audio, #survey b, #survey big, #survey blockquote, #survey body, #survey canvas, #survey caption, #survey center, #survey cite, #survey code, #survey dd, #survey del, #survey details, #survey dfn, #survey div, #survey dl, #survey dt, #survey em, #survey embed, #survey fieldset, #survey figcaption, #survey figure, #survey footer, #survey form, #survey h1, #survey h2, #survey h3, #survey h4, #survey h5, #survey h6, #survey header, #survey hgroup, #survey html, #survey i, #survey iframe, #survey img, #survey ins, #survey kbd, #survey label, #survey legend, #survey li, #survey mark, #survey menu, #survey nav, #survey object, #survey ol, #survey output, #survey p, #survey pre, #survey q, #survey ruby, #survey s, #survey samp, #survey section, #survey small, #survey span, #survey strike, #survey strong, #survey summary, #survey table, #survey tbody, #survey td, #survey tfoot, #survey th, #survey thead, #survey time, #survey tr, #survey tt, #survey u, #survey ul, #survey var, #survey video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align:baseline
}

#survey img {
    width: 100%;
    vertical-align:bottom
}

#survey article, #survey aside, #survey details, #survey figcaption, #survey figure, #survey footer, #survey header, #survey hgroup, #survey menu, #survey nav, #survey section, #survey-template .template-page .in .workflow .item .image a {
    display:block
}

#survey body {
    line-height:1
}

#survey ol, #survey ul {
    list-style:none
}

#survey blockquote, #survey q {
    quotes:none
}

#survey blockquote:after, #survey blockquote:before, #survey q:after, #survey q:before {
    content:none
}

#survey table {
    border-collapse: collapse;
    border-spacing:0
}

#survey em {
    font-style:italic
}

#survey hr, #survey-template .template-cats .in .categories .list ul li:before, #survey-template .template-content .device-toggle, #survey-template .template-content .mobile-loader, #survey-template .template-content .mobile-survey, #survey-template .template-description .in .content .desc ul li:before, #survey-template .template-description .in .content p.cta, #survey-template .template-review .in.cta-only h2 {
    display:none
}

#survey-template {
    color: #000;
    display: flex;
    flex-wrap: wrap;
}

#survey-template h2, #survey-template h3 {
    color: #000;
    letter-spacing:-.03em
}

#survey-template h3 {
    letter-spacing:-.02em
}

#survey-template .button {
    color: #fff;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 56px;
    justify-content: center;
    text-align: center;
    transition: background .5s;
    padding: 0 24px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 10px;
    background:var(--selected-bg-color);
}

#survey-template .template-content {
    /*height:calc(100vh - 72px)*/
}

#survey-template .template-content .cta {
    flex: 0 1 100%;
    box-sizing: border-box;
    padding: 12px;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items:center
}

#survey-template .template-description .in {
    padding: 32px 24px 0 48px;
    text-align:left
}

#survey-template .template-description .in h2 {
    font-size: 32px;
    padding: 16px 0 0;
    line-height:119%
}

#survey-template .template-description .in .breadcrumbs {
    padding: 0;
    font-size: 12px;
    line-height:133%
}

#survey-template .template-description .in .breadcrumbs a {
    color: #5f6368;
    text-decoration:none
}

#survey-template .template-description .in .breadcrumbs a:last-child {
    background: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-arrow-breadcrumbs.svg) no-repeat 4px center;
    background-size: 16px 16px;
    display: inline-block;
    padding:0 0 0 24px
}

#survey-template .template-description .in .used {
    font-size: 13px;
    padding: 8px 0 0;
    line-height: 154%;
    color:#5f6368
}

#survey-template .template-description .in .used strong {
    color: #000;
    display: inline-block;
    padding: 0 0 0 19px;
    position:relative
}

#survey-template .template-description .in .used strong:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    display: block;
    border-radius: 100%;
    background: #ced0d5;
    top: calc((100% - 3px) /2);
    left:6px
}

#survey-template .template-description .in .content p {
    font-size: 16px;
    padding: 24px 0 0;
    line-height: 150%;
    color:#202124
}

#survey-template .template-description .in .content .desc {
    margin:0
}

#survey-template .template-description .in .content .desc p {
    padding: 24px 0 0;
    font-size: 13px;
    color: #3d4144;
    line-height:154%
}

#survey-template .template-description .in .content .desc p:first-child {
    font-size: 16px;
    line-height: 138%;
    padding: 32px 0 0;
    letter-spacing: -.02em;
    color:#000
}

#survey-template .template-description .in .content .desc p:nth-child(3) {
    background: #f8f8f8;
    margin: 32px 0 0;
    padding: 24px 24px 0;
    border-top-left-radius: 16px;
    border-top-right-radius:16px
}

#survey-template .template-description .in .content .desc p:nth-child(4) {
    background: #f8f8f8;
    padding: 24px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius:16px
}

#survey-template .template-description .in .content .desc ul {
    padding:12px 0 0
}

#survey-template .template-description .in .content .desc ul li {
    padding: 0;
    font-size: 14px;
    line-height: 157%;
    color:#5f6368
}

#survey-template .template-cats .in {
    text-align: left;
    padding:0 24px 0 48px
}

#survey .main .in .holder .slider .question.text .sizer p, #survey-template .template-cats .in .all {
    padding:24px 0 0
}

#survey-template .template-cats .in .all a, #survey-template .template-page .in .workflow .item h4 a {
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

#survey-template .template-cats .in .all a {
    border: 1px dashed #ced0d5;
    border-radius: 16px;
    height: 72px;
    line-height: 150%;
    align-items:center
}

#survey-template .template-cats .in .all a span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    padding:0 0 0 40px
}

#survey-template .template-cats .in .categories h3 {
    font-size: 16px;
    padding: 32px 0 0;
    line-height:150%
}

#survey-template .template-cats .in .categories .list ul {
    padding: 16px 0 0;
    display: flex;
    flex-wrap:wrap
}

#survey-template .template-cats .in .categories .list ul li {
    padding: 8px 8px 0 0;
    display:inline-flex
}

#survey-template .template-cats .in .categories .list ul li a {
    display: inline-flex;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    line-height: 143%;
    height: 40px;
    color: #000;
    align-items: center;
    padding: 0 16px;
    justify-content: center;
    background:#f8f8f8
}

#survey-template .template-cats .in .trustpilot {
    padding:80px 0 0
}

#survey-template .template-cats .in .trustpilot p {
    color: #5f6368;
    line-height: 143%;
    font-size: 14px;
    display: flex;
    padding: 8px 0 0;
    align-items: center;
    justify-content:center
}

#survey-template .template-cats .in .trustpilot p span strong {
    line-height: 143%;
    letter-spacing: -.01em;
    color:#000
}

#survey-template .template-cats .in .trustpilot p span.logo {
    display: flex;
    padding:0 0 0 8px
}

#survey-template .template-cats .in .trustpilot p span.logo img {
    width:94px
}

#survey-template .template-cats .in .trustpilot .rating {
    display: flex;
    justify-content:center
}

#survey-template .template-cats .in .trustpilot .rating img {
    width:132px
}

#survey-template .template-page {
    margin: 56px 0 0;
    text-align: left;
    border-top:1px solid #e3e4e9
}

#survey-template .template-page .in {
    padding:32px 24px 0 48px
}

#survey-template .template-page .in h2 {
    font-size: 32px;
    line-height:119%
}

#survey-template .template-page .in .parex {
    font-size: 16px;
    padding: 24px 0 0;
    line-height:175%
}

#survey-template .template-page .in .workflow {
    padding: 24px 0 0;
    position: relative;
    width: calc(100% + 56px);
    left:-40px
}

#survey-template .template-page .in .workflow .item {
    margin: 8px 0 0;
    border-radius: 24px;
    overflow:hidden
}

#survey-template .template-page .in .workflow .item h4 {
    line-height: 115%;
    text-align: center;
    padding:0
}

#survey-template .template-page .in .workflow .item h4 a {
    padding: 40px 40px 24px;
    position:relative
}

#survey-template .template-cats .in .all a span, #survey-template .template-page .in .workflow .item h4 a:after {
    background: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-arrow-circle.svg) no-repeat left center;
    background-size: 24px 24px;
}

#survey-template .template-page .in .workflow .item h4 a:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    display: block;
    bottom:-12px
}

#survey-template .template-page .in .workflow .item .image a picture {
    display:flex
}

#survey-template .template-page .in .workflow .item.build {
    background:#f2f2f2
}

#survey-template .template-page .in .workflow .item.collect {
    background: #c9dfe8;
}

#survey-template .template-page .in .workflow .item.analyze {
    background:#ecd86e
}

#survey-template .template-review {
    margin: 50px 0 0;
    border-top:1px solid #e3e4e9
}

#survey-template .template-review .in {
    padding: 56px 24px 0 48px;
    text-align:left
}

#survey-template .template-review .in h2 {
    font-size: 28px;
    padding: 0;
    line-height: 121%;
    letter-spacing:-.02em
}

#survey-template .template-review .in .image {
    margin: 40px 0 0;
    width: 100%;
    left:auto
}

#survey-template .template-review .in .image picture img {
    border-radius:0
}

#survey-template .template-review .in .slides {
    background: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-quote.svg) no-repeat left 9px;
    background-size:40px 40px
}

#survey-template .template-review .in .slides .list .item .content {
    padding:72px 0 0
}

#survey-template .template-review .in .slides .list .item .content p {
    font-size: 18px;
    padding: 0;
    line-height: 167%;
    color:#202124
}

#survey-template .template-review .in .slides .list .item .author {
    padding: 24px 0 0;
    font-size:14px
}

#survey-template .template-review .in .slides .list .item .author strong {
    display: inline-block;
    margin:0 24px 0 0
}

#survey-template .template-review .in .slides .nav {
    display: flex;
    padding: 40px 0 0;
    justify-content:flex-end
}

#survey-template .template-review .in .slides .nav span {
    display: block;
    cursor: pointer;
    width: 40px;
    height:40px
}

#survey-template .template-review .in .slides .nav span span {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: background .5s, border-color .5s;
    height: 100%;
    border: 1px solid #e3e4e9;
    box-sizing: border-box;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position:center center
}

#survey-template .template-review .in .slides .nav span.prev span {
    background-image: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-arrow-left-black.svg);
    background-size:16px 16px
}

#survey-template .template-review .in .slides .nav span.next {
    margin:0 0 0 8px
}

#survey-template .template-review .in .slides .nav span.next span {
    background-image: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-arrow-right-black.svg);
    background-size:16px 16px
}

#survey-template .template-review .in .cta {
    margin: 56px 0 0;
    box-sizing: border-box;
    padding: 80px 0 68px;
    position:relative
}

#survey-template .template-review .in .cta:before {
    display: block;
    width: 10000px;
    content: '';
    height: 1px;
    position: absolute;
    top: 0;
    left: -5000px;
    background:#e3e4e9
}

#survey-template .template-review .in .cta h3 {
    padding: 0;
    font-size: 32px;
    line-height: 119%;
    letter-spacing:-.03em
}

#survey-template .template-review .in .cta .button {
    height: 64px;
    margin: 45px 0 0;
    font-size:16px
}

#survey-template .template-background, #survey-template .template-review .in.cta-only .cta:before, #survey-template .template-review .in.cta-only .image, #survey-template .template-review .in.cta-only .slides, .hidenav #header {
    display:none
}

#survey-template .template-review .in.cta-only .cta {
    margin: 0;
    padding-top:24px
}

.no-touch #survey-template .button:hover {
    background:#424394
}

.no-touch #survey-template .button:active {
    background:var(--selected-bg-color)
}

.no-touch #survey a:hover, .no-touch #survey-template .template-description .in .breadcrumbs a:hover {
    color:#000
}

.no-touch #survey-template .template-cats .in .all a:hover, .no-touch #survey-template .template-cats .in .categories .list ul li a:hover {
    background:#ebebeb
}

.no-touch #survey-template .template-cats .in .all a:active {
    background: #e0e0e0;
    border-color:#e0e0e0
}

.no-touch #survey-template .template-cats .in .categories .list ul li a:active {
    background:#e0e0e0
}

.no-touch #survey-template .template-review .in .slides .nav span:hover span {
    background-color: #ebebeb;
    border-color:#ebebeb
}

.no-touch #survey-template .template-review .in .slides .nav span:active span {
    background-color: #e0e0e0;
    border-color:#e0e0e0
}

.hidenav #survey-template .template-content {
    height:auto
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list li:before, #survey .main .in .holder .slider .question .sizer .answers .list ul li.selected.text .icon, #survey .main .in .holder .slider .question .sizer .answers .list ul li:before, .hidenav #footer, .hidenav #survey-template .template-background, .hidenav #survey-template .template-cats, .hidenav #survey-template .template-content .cta, .hidenav #survey-template .template-content .device-toggle, .hidenav #survey-template .template-content .mobile-loader, .hidenav #survey-template .template-content .mobile-survey, .hidenav #survey-template .template-description, .hidenav #survey-template .template-page, .hidenav #survey-template .template-review, .no-touch #survey select {
    display:none
}

@media only screen and (min-width: 480px) {
    #survey-template .template-cats .in, #survey-template .template-content .cta, #survey-template .template-description .in, #survey-template .template-page .in, #survey-template .template-review .in {
        padding-left: 0;
        padding-right: 0;
        width: 400px;
        margin:0 auto
    }

    #survey-template .template-cats, #survey-template .template-description, #survey-template .template-page, #survey-template .template-review {
        width:100%
    }

    #survey-template .template-page .in .workflow {
        left: auto;
        width:100%
    }
}

@media only screen and (min-width: 768px) {
    #survey-template .template-content {
        position: relative;
        /*height:calc(100vh - 88px)*/
    }

    #survey-template .template-content .device-toggle {
        position: absolute;
        top: 24px;
        display: block;
        right: 24px;
        z-index:2
    }

    #survey-template .template-content .device-toggle ul {
        display: flex;
        padding: 0;
        flex-direction:column
    }

    #survey-template .template-content .device-toggle ul li {
        padding:0
    }

    #survey-template .template-content .device-toggle ul li:before {
        display:none
    }

    #survey-template .template-content .device-toggle ul li:last-child {
        padding:8px 0 0
    }

    #survey-template .template-content .device-toggle ul li span {
        display: block;
        cursor: pointer;
        width: 40px;
        height:40px
    }

    #survey-template .template-content .device-toggle ul li span.desktop, #survey-template .template-content .device-toggle ul li span.mobile {
        background-image: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-mobile.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position:center center
    }

    #survey-template .template-content .device-toggle ul li span.mobile.active {
        background-image:url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-mobile-filled.svg)
    }

    #survey-template .template-content .device-toggle ul li span.desktop {
        background-image:url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-desktop.svg)
    }

    #survey-template .template-content .device-toggle ul li span.desktop.active {
        background-image:url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/icon-desktop-filled.svg)
    }

    #survey-template .template-content .mobile-survey {
        height: calc(100vh -(80px + 88px));
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 0;
        background: #f2f2f2;
        display: none;
        justify-content: center;
        align-items:center
    }

    #survey-template .template-content .mobile-survey .device {
        width: 320px;
        padding: 8px 11px 7px;
        height: 646px;
        background-image: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/bg-mobile.png);
        background-size: cover;
        box-sizing:border-box
    }

    #survey-template .template-content .mobile-survey .device iframe {
        width: 100%;
        height: 100%;
        border-radius:41px
    }

    #survey-template .template-content .mobile-loader {
        background: rgba(0, 0, 0, .25);
        width: 100%;
        height: calc(100vh -(80px + 88px));
        top: 0;
        position: absolute;
        left: 0;
        z-index:1
    }

    #survey-template .template-content .mobile-loader i {
        display: block;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        background: url(https://prod-8f86.kxcdn.com/s1/web-templates-2022/images/loader-blue.svg) no-repeat center center;
        top:calc((100% - 55px)/2)
    }

    #survey-template .template-content .cta {
        width:600px
    }

    #survey-template .template-cats .in, #survey-template .template-description .in {
        width:700px
    }

    #survey-template .template-page {
        width: 100%;
        border: 0;
        margin: 0;
    }

    #survey-template .template-page .in {
        text-align: center;
        width: 100%;
    }

    #survey-template .template-page .in h2 {
        font-size: 42px;
        padding: 0;
        line-height:114%
    }

    #survey-template .template-page .in .workflow {
        display: flex;
        padding: 0 0 0;
        justify-content:space-between
    }

    #survey-template .template-page .in .workflow .item {
        flex: 0 1 31.5%;
        margin: 0;
    }

    #survey-template .template-page .in .workflow .item .image {
        margin:24px 0 0
    }

    #survey-template .template-review {
        margin: 88px 0 0;
        border:0
    }

    #survey-template .template-review .in {
        display: flex;
        border-top: 1px solid #e3e4e9;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        width:700px
    }

    #survey-template .template-review .in h2 {
        flex: 0 1 100%;
        padding: 0 0 56px;
        font-size: 32px;
        line-height:119%
    }

    #survey-template .template-review .in .image {
        flex: 0 1 47%;
        margin:0
    }

    #survey-template .template-review .in .slides {
        flex: 0 1 47%;
        text-align:left
    }

    #survey-template .template-review .in .cta {
        padding: 120px 0 0;
        margin: 80px 0 0;
        display: flex;
        align-items:center
    }

    #survey-template .template-review .in .cta:before {
        width: 100%;
        left:0
    }

    #survey-template .template-review .in .cta h3 {
        text-align:left
    }

    #survey-template .template-review .in .cta .button {
        display: inline-flex;
        width: auto;
        margin: 0 0 0 72px;
        white-space:nowrap
    }
}

@media only screen and (min-width: 1152px) {
    #survey-template {
        display: flex;
        margin: 0 auto;
        padding: 16px 0 0;
        justify-content: center;
        width: 100%;
    }

    #survey-template .template-content {
        height: auto;
        width: 768px;
        min-height:802px
    }

    #survey-template .template-content .mobile-survey {
        border-radius: 36px;
        height: 100%;
        align-items: baseline;
        padding:48px 0 0
    }

    #survey-template .template-content .mobile-loader {
        border-radius: 36px;
        height:100%
    }

    #survey-template .template-content .cta {
        display:none
    }

    #survey-template .template-description {
        width:calc(100% -(768px + 64px))
    }

    #survey-template .template-description .in {
        width: 100%;
        padding-top:24px
    }

    #survey-template .template-description .in .content p.cta {
        display:block
    }

    #survey-template .template-cats .in, #survey-template .template-page .in, #survey-template .template-review .in {
        width:100%
    }

    #survey-template .template-cats .in .all {
        padding:32px 0 0
    }

    #survey-template .template-cats .in .categories {
        display: flex;
        padding:24px 0 0
    }

    #survey-template .template-cats .in .categories h3 {
        padding: 8px 72px 0 0;
        white-space:nowrap
    }

    #survey-template .template-cats .in .categories .list ul {
        padding:0
    }

    #survey-template .template-page .in .workflow .item.collect {
        background:#c2d8e3
    }

    #survey-template .template-review .in .image {
        flex:0 1 480px
    }

    #survey-template .template-review .in .slides {
        flex: 0 1 448px;
        margin:0 96px 0 0
    }

    #survey-template .template-review .in .cta {
        flex:0 1 100%
    }

    #survey-template .template-background {
        display: block;
        position: absolute;
        width: 1680px;
        top: -88px;
        left: 736px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 906px;
        z-index:-1
    }
}

#survey {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background:#f2f2f2
}

#survey div {
    box-sizing:border-box
}

#survey p, #survey ul li {
    line-height:140%
}

#survey a {
    text-decoration: underline;
    color: #333d60;
    transition:color .5s
}

#survey input, #survey select {
    display: block;
    box-shadow: none;
    outline: 0;
    position: relative;
    width: 100%;
    height: 100%;
    margin:0
}

#survey, #survey input {
    box-sizing: border-box;
    color:#000
}

#survey input {
    resize: none;
    padding: 0 40px 0 14px;
    border: 0;
    background: 0 0;
    line-height: 40px;
    border-radius:4px
}

#survey select {
    border-radius: 0;
    padding: 0;
    opacity:0
}

#survey ::-webkit-input-placeholder {
    color: #aaa;
    opacity: 1;
}

#survey ::-moz-placeholder {
    color: #aaa;
    opacity: 1;
}

#survey :-ms-input-placeholder {
    color: #aaa;
    opacity: 1;
}

#survey :-moz-placeholder {
    color: #aaa;
    opacity: 1;
}

#survey .header {
    position: relative;
    width: 100%;
    flex:0 1 100%
}

#survey .header .in, #survey .main .in {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 12px 0;
    max-width: 636px;
    margin:0 auto
}

#survey .header .in .holder {
    display: flex;
    flex-wrap: wrap;
    justify-content:center
}

#survey .header .in .holder .content {
    text-align:center;
    color: #000;
    line-height: 1.3em;
    font-size:1.1em;
}

#survey .header .in .holder .content h1 {
    font-size: 21px;
    position:relative
}

#survey .header .in .holder .content .enter-text {
    display:block
}

#survey .header .in .holder .content .enter-text p {
    padding:25px 0 0
}

#survey .main .in {
    box-sizing: border-box;
    padding:20px 0 45px
}

#survey .main .in .holder {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse
}

#survey .main .in .holder .slider {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    position:relative
}

#survey .main .in .holder .slider .group {
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    position: relative;
    display:flex
}

#survey .main .in .holder .slider .group section {
    flex: 0 0 100%;
    padding: 0 12px;
    box-sizing:border-box
}

#survey .footer, #survey .main {
    position: relative;
    width: 100%;
    flex:0 1 100%
}

#survey .footer .in {
    justify-content: flex-start;
    padding: 0 12px 30px;
    max-width: 636px;
    margin:0 auto
}

#survey .footer .in, #survey .footer .in .holder .content {
    display: flex;
    align-items:center
}

#survey .footer .in .holder .content strong {
    display: inline-block;
    margin:0 12px 0 0
}

#survey .footer .in .holder .content a {
    display: flex;
    overflow:hidden
}

#survey .footer .in .holder .content a .title {
    position: absolute;
    top:-10000px
}

.hidenav #survey {
    height:auto
}

@media only screen and (min-width: 480px) {
    #survey .header .in {
        margin:0 auto
    }

    #survey .footer .in, #survey .header .in, #survey .main .in {
        padding-left: 0;
        padding-right: 0;
        width:400px
    }

    #survey .main .in .holder .slider .group section {
        padding:0
    }

    #survey .footer .in {
        margin:0 auto
    }
}

@media only screen and (min-width: 768px) {
    #survey {
        height:calc(100vh -(80px + 88px))
    }

    #survey .header .in {
        justify-content: flex-start;
        padding:48px 0 0
    }

    #survey .header .in .holder .content h1 {
        font-size:24px
    }

    #survey .header .in, #survey .main .in {
        width: 600px;
        max-width:none
    }

    #survey .footer .in {
        width:600px
    }
}

@media only screen and (min-width: 1152px) {
    #survey {
        height: 100%;
        min-height: calc(100vh -(48px + 88px));
        border-radius: 36px;
        font-size:15px
    }

    #survey input, #survey select {
        line-height: 43px;
        font-size:15px
    }

    #survey ::-webkit-input-placeholder {
        font-size:15px
    }

    #survey ::-moz-placeholder {
        font-size:15px
    }

    #survey :-ms-input-placeholder {
        font-size:15px
    }

    #survey :-moz-placeholder {
        font-size:15px
    }

    #survey .header .in {
        padding: 56px 0 0;
        margin:0 auto
    }

    #survey .header .in .holder .content h1 {
        font-size:28px
    }

    #survey .header .in .holder .content .enter-text {
        padding:15px 0 0
    }

    #survey .footer .in {
        font-size: 13px;
        padding: 16px 0 50px;
        margin:0 auto
    }
}

#survey .main .in .holder .slider .question {
    position: relative;
    text-align: left;
    width:100%
}

#survey .main .in .holder .slider .question .sizer h2 {
    padding: 30px 0 0;
    font-size: 17px;
    line-height: 140%;
}

#survey .main .in .holder .slider .question .sizer .hint {
    padding: 8px 0 0;
    opacity:.8
}

#survey .main .in .holder .slider .question .sizer .answers {
    padding:8px 0 0
}

#survey .main .in .holder .slider .question .sizer .answers .list ul {
    position:relative
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li {
    border: 1px solid #e5e5e5;
    padding: 10px 36px 10px 14px;
    border-radius: 4px;
    margin: 7px 0 0;
    min-height: 40px;
    background: #fff;
    transition: border-color .5s, background .5s;
    position: relative;
    color: #000;
    box-sizing: border-box;
    cursor:pointer
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select, #survey .main .in .holder .slider .question .sizer .answers .list ul li.text {
    padding: 0;
    height:40px
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .current {
    position: absolute;
    line-height: normal;
    width: 100%;
    height: 100%;
    user-select: none;
    box-sizing: border-box;
    top: 0;
    cursor: pointer;
    left: 0;
    padding: 10px 36px 10px 14px;
    display:block
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .current span {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    display:inline-block
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .current:before {
    position: absolute;
    right: 9px;
    top: 10px;
    font-size:17px
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list {
    position: absolute;
    display: none;
    width: calc(100% + 2px);
    top: 42px;
    left: -1px;
    padding: 0;
    background: #e5e5e5;
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    border-radius: 4px;
    max-height: 150px;
    overflow-y: scroll;
    z-index:2
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list li {
    min-height: auto;
    background: 0 0;
    border: 0;
    box-sizing: border-box;
    padding: 8px 36px 8px 14px;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    user-select:none
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list li:first-child {
    padding-top: 10px;
    border-top-left-radius: 3px;
    border-top-right-radius:3px
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list li:last-child {
    padding-bottom: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius:3px
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.text .input {
    position: relative;
    z-index: 1;
    display: block;
    height:100%
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.text .icon {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 26px;
    opacity:.35
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.selected {
    color: var(--selected-fg-color);
    background: var(--selected-bg-color);
    border-color: var(--selected-bg-color);
    animation:selected .3s linear
}

#survey .main .in .holder .slider .question .sizer .answers .list ul li.selected:before {
    display: block;
    position: absolute;
    top: 12px;
    right: 8px;
    color: #fff;
    left:auto
}

#survey .main .in .holder .slider .question.choice.ordering .sizer .answers .list ul li {
    cursor: ns-resize;
    padding:10px 14px 10px 36px
}

#survey .main .in .holder .slider .question.choice.ordering .sizer .answers .list ul li:before {
    display: block;
    position: absolute;
    top: 10px;
    color: #000;
    left: 8px;
    font-size:18px
}

#survey .main .in .holder .slider .question.choice.select .sizer .answers .list ul li.other, #survey .main .in .holder .slider .question.choice.select .sizer .answers .list ul li.selected:before {
    display:none
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul {
    flex-wrap: wrap;
    display:flex
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul li {
    padding: 5px;
    flex: 0 1 48.5%;
    margin-right:3%
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul li:nth-child(2n + 0) {
    margin-right:0
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul li img {
    border-radius:3px
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul li.selected:before {
    z-index: 1;
    top: 6px;
    right:5px
}

#survey .main .in .holder .slider .question.image-choice .sizer .answers .list ul li.selected:after {
    width: 0;
    height: 0;
    position: absolute;
    top: 1px;
    right: 1px;
    content: '';
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color:transparent #303181 transparent transparent
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers {
    padding:8px 0 27px
}

#survey .main .in .holder .slider .question.nps .sizer .answers .list ul, #survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul {
    display: flex;
    width:100%
}

#survey .main .in .holder .slider .question.nps .sizer .answers .list ul li, #survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    border-radius: 0;
    border-right:0
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:before {
    display: block;
    position: absolute;
    bottom: -31px;
    left: 0;
    text-align: center;
    width: 100%;
    top: auto;
    transition: opacity .5s;
    font-size: 13px;
    color:#333d60
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:after {
    position: absolute;
    background: #e5e5e5;
    transition: opacity .5s;
    bottom: -9px;
    left: 50%;
    width: 1px;
    height: 8px;
    content: ''
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius:4px
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:last-child {
    border-right: 1px solid #e5e5e5;
    border-top-right-radius: 4px;
    border-bottom-right-radius:4px
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(1):before {
    content: '1'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(2):before {
    content: '2'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(3):before {
    content: '3'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(4):before {
    content: '4'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(5):before {
    content: '5'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(6):before {
    content: '6'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(7):before {
    content: '7'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(8):before {
    content: '8'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(9):before {
    content: '9'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li:nth-child(10):before {
    content: '10'
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li i {
    font-size:15px
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li.selected:before {
    top:auto
}

#survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li.inactive:after, #survey .main .in .holder .slider .question.star-rating .sizer .answers .list ul li.inactive:before {
    opacity:0
}

#survey .main .in .holder .slider .question.nps .sizer .answers .list ul li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius:4px
}

#survey .main .in .holder .slider .question.nps .sizer .answers .list ul li:last-child {
    border-right: 1px solid #e5e5e5;
    border-top-right-radius: 4px;
    border-bottom-right-radius:4px
}

#survey .main .in .holder .slider .question.nps .sizer .answers .list ul li:first-child:after, #survey .main .in .holder .slider .question.nps .sizer .answers .list ul li:last-child:after {
    position: absolute;
    background: #e5e5e5;
    bottom: -9px;
    left: 50%;
    width: 1px;
    height: 8px;
    content: ''
}

#survey .main .in .holder .slider .question.matrix .sizer .answers .list .head, #survey .main .in .holder .slider .question.nps .sizer .answers .list ul li.selected:before, #survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .scale ul li:before {
    display:none
}

#survey .main .in .holder .slider .question.nps .sizer .answers .desc {
    display: flex;
    justify-content:space-between
}

#survey .main .in .holder .slider .question.nps .sizer .answers .desc p {
    padding: 11px 0 0;
    flex:0 1 48%
}

#survey .main .in .holder .slider .question.nps .sizer .answers .desc p:first-child {
    text-align:left
}

#survey .main .in .holder .slider .question.nps .sizer .answers .desc p:last-child, #survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc p:last-child {
    text-align:right
}

#survey .main .in .holder .slider .question.matrix .sizer .answers .list .row h3 {
    padding: 15px 0 0;
    font-size: 13px;
    line-height: 140%;
}

#survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul {
    padding:5px 0 0
}

#survey .main .in .holder .slider .question.text-question .sizer .answers .list .limit {
    font-size: 11px;
    padding: 4px 0 0;
    opacity: .8;
    text-align:right
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list p {
    padding:7px 0 0
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li {
    border: 0;
    background: 0 0;
    padding: 0;
    border-radius: 0;
    margin: 25px 0 0;
    min-height: auto;
    cursor: default;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li p {
    padding: 0;
    flex: 0 1 100%;
    color:#333d60
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider {
    margin: 25px 12px 0;
    flex: 0 1 100%;
    border-radius: 0;
    border: 0;
    background:#2169d8
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider:before {
    background: #2169d8;
    content: '';
    height: 100%;
    width: 12px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    top: 0;
    left: -12px;
    position:absolute
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider .ui-widget-header {
    background: #fff;
    border-radius: 0;
    border: 1px solid #e5e5e5;
    border-right:0
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider .ui-widget-header:before {
    background: #fff;
    content: '';
    height: 100%;
    border: 1px solid #e5e5e5;
    border-left: 0;
    width: 12px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    top: -1px;
    right: -12px;
    position:absolute
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider .ui-slider-handle {
    background: #2169d8;
    border-radius: 100%;
    width: 28px;
    top: -10px;
    cursor: ew-resize;
    outline: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left:-13px
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .slider .ui-slider-handle i, #survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .ui-slider-handle i {
    color: #fff;
    position: relative;
    top:1px
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .max, #survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .min, #survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .value {
    padding: 22px 0 0;
    box-sizing: border-box;
    flex: 0 1 33.33333%;
    position:relative
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .max:before, #survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .min:before, #survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .value:before {
    width: 1px;
    height: 15px;
    background: #e5e5e5;
    content: '';
    position: absolute;
    top:0
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .min {
    text-align:left
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .min:before {
    left:10px
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .value {
    text-align:center
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .value:before {
    left:calc((100% - 1px)/2)
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .max {
    text-align:right
}

#survey .main .in .holder .slider .question.divide .sizer .answers .list ul li .max:before {
    right:10px
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .scale {
    padding:28px 0
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc, #survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .scale ul {
    display: flex;
    width: 100%;
    justify-content:space-between
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .scale ul li {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0 0;
    min-height: auto;
    border-radius:0
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .bar {
    float: right;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background: #fff;
    border:1px solid #e5e5e5
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .bar:before {
    position: absolute;
    background: #e5e5e5;
    top: -5px;
    left: calc((100% - 1px) /2);
    width: 1px;
    height: 21px;
    content: ''
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .bar div {
    width: 50%;
    height: 100%;
    float:right
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .bar .min span {
    background-color: #2169d8;
    width: 0;
    height: 100%;
    float:left
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .bar .max span {
    background-color: #2169d8;
    width: 0;
    height: 100%;
    float:right
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .slider .ui-slider-handle {
    background: #2169d8;
    border-radius: 100%;
    width: 28px;
    top: -10px;
    cursor: ew-resize;
    outline: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left:-13px
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc p {
    position: relative;
    flex: 0 1 45%;
    text-align: left;
    padding:22px 0 0
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc p:first-child:after, #survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc p:last-child:after {
    position: absolute;
    background: #e5e5e5;
    top: 0;
    left: 10px;
    width: 1px;
    height: 15px;
    content: ''
}

#survey .main .in .holder .slider .question.semantic .sizer .answers .list .item .desc p:last-child:after {
    left: auto;
    right:10px
}

.no-touch #survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list li:hover {
    background: var(--selected-bg-color);
    color:#fff
}

.no-touch #survey .main .in .holder .slider .question .sizer .answers .list ul li:hover {
    background: #e5e5e5;
    border-color:#d3d3d3
}

.no-touch #survey .main .in .holder .slider .question .sizer .answers .list ul li:hover.selected {
    background: var(--selected-bg-color);
    border-color:var(--selected-bg-color);
}

.no-touch #survey .main .in .holder .slider .question.divide .sizer .answers .list ul li:hover {
    background:0 0
}

@media only screen and (min-width: 768px) {
    #survey .main .in .holder .slider .question .sizer h2 {
        font-size: 22px;
        padding:40px 0 0
    }

    #survey .main .in .holder .slider .question .sizer .answers {
        padding:8px 0 0
    }

    #survey .main .in .holder .slider .question .sizer .answers .list ul li {
        min-height:43px
    }

    #survey .main .in .holder .slider .question .sizer .answers .list ul li.select, #survey .main .in .holder .slider .question .sizer .answers .list ul li.text {
        height:43px
    }

    #survey .main .in .holder .slider .question .sizer .answers .list ul li.select .current:before {
        top:12px
    }

    #survey .main .in .holder .slider .question .sizer .answers .list ul li.select .list {
        top:45px
    }

    #survey .main .in .holder .slider .question .sizer .answers .list ul li.text .icon {
        top:11px
    }

    #survey .main .in .holder .slider .question.choice.cols .sizer .answers .list ul {
        display: flex;
        flex-wrap:wrap
    }

    #survey .main .in .holder .slider .question.choice.cols .sizer .answers .list ul li {
        width: 49.5%;
        margin:7px 1% 0 0
    }

    #survey .main .in .holder .slider .question.choice.cols .sizer .answers .list ul li:nth-child(2n + 0) {
        margin-right:0
    }

    #survey .main .in .holder .slider .question.image-choice .sizer .answers .list.three ul li {
        flex: 0 1 32%;
        margin:7px 2% 0 0
    }

    #survey .main .in .holder .slider .question.image-choice .sizer .answers .list.three ul li:nth-child(2n + 0) {
        margin-right:2%
    }

    #survey .main .in .holder .slider .question.image-choice .sizer .answers .list.three ul li:nth-child(3n + 0) {
        margin-right:0
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .head {
        display: flex;
        justify-content: flex-end;
        padding:7px 0 10px
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .head ul {
        flex: 0 1 70%;
        display:flex
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .head ul li {
        margin: 0 7px 0 0;
        flex: 1 1 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        text-align: center;
        cursor: default;
        font-size: 13px;
        background: 0 0;
        min-height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        word-break:break-word
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .head ul li:last-child, #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li:last-child {
        margin:0
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row {
        display: flex;
        align-items: center;
        margin:7px 0 0
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row h3 {
        flex: 0 1 30%;
        word-break: break-word;
        font-size: 15px;
        font-family: 'Inter Regular', sans-serif;
        padding: 0 10px 0 0;
        box-sizing:border-box
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul {
        display: flex;
        padding: 0;
        flex:0 1 70%
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li {
        margin: 0 7px 0 0;
        flex:1 1 0
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li i, #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li span {
        display:none
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li span.input {
        display:block
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li span.input input {
        padding:0 14px
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li.selected:before {
        right:calc((100% - 15px)/2)
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li.text.selected:before {
        right:8px
    }

    #survey .main .in .holder .slider .question.matrix .sizer .answers .list .row ul li.text.selected span.input input {
        padding: 0 40px 0 14px
    }
}