/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*Theme fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');

/*@font-face {
    font-family: "AvenirNextBold";
    src: url("../files/51a56502-44d2-4d70-808f-fc822da45209.woff") format("woff");
}*/

body {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: var(--puheet-primary-darker) !important;
    background: #ffffff;
    /*linear-gradient(180deg, #FFFFFF -3%, #F1F1F1 100%) !important;*/
    font-weight: 300;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-weight: 400;
}


.fruity .survey-name {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 28px;
    color: var(--puheet-primary-darker);
}

.navbar-brand.logo-container {
    display: none !important;
}

#surveys-list-jumbotron {
    display: none !important;
}

#surveyListFooter>.container {
    display: none !important;
}

ul.nav.navbar-nav {
    margin-right: 0;
}

.fruity .language_change_container {
    height: auto;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

/*Link styling*/

.fruity a,
.fruity a:active,
.fruity a:focus {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: var(--puheet-primary-dark);
    text-decoration: none !important;
}

.fruity a:hover {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: var(--puheet-primary-darker);
}

.fruity .navbar a,
.fruity .navbar a:hover,
#puheetNav a,
#puheetNav a:hover {
    box-shadow: none;
}

.fruity .navbar a.animate:after {
    background-color: transparent;
}

.fruity .dropdown-menu>li>a {
    color: var(--puheet-primary-darker) !important;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

.fruity .nav .open>a,
.fruity .nav .open>a:hover,
.fruity .nav .open>a:focus,
.fruity .dropdown-menu>li>a:hover,
.fruity .dropdown-menu>li>a:focus {
    color: #FFFFFF !important;
    background-color: transparent;
    border-bottom: 0;
    opacity: 1;
}

/*default button styles */

.fruity .btn-default,
.fruity .btn-info {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.75px;
    line-height: 24px;
    color: var(--puheet-primary) !important;
    background: white;
    padding: 12px 16px;
    border: 2px solid var(--puheet-primary);
    border-radius: 24px;
}

.fruity .btn-default:hover,
.fruity .btn-default:focus,
.fruity .btn-info:hover,
.fruity .btn-info:focus {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    border: none;
    color: var(--puheet-primary-bg) !important;
    background: white;
    border: 2px solid var(--puheet-primary-bg);
}

.fruity .btn-default:active,
.fruity .btn-info:active {
    box-shadow: none;
    border: none;
    background-color: white;
    margin-top: 4px;
}



/*primary button style*/
.fruity .btn-primary {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 16px;
    /*text-transform: uppercase !important;*/
    letter-spacing: 0.75px;
    line-height: 24px;
    color: #000000 !important;
    background: var(--puheet-accent);
    padding: 12px 16px;
    border: none;
    border-radius: 24px;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .open .dropdown-toggle.btn-primary {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    border: none;
    color: #000000 !important;
    background: var(--puheet-primary-bg);
}

.fruity .btn-primary:active,
.fruity .btn-primary.active,
.fruity .btn-primary.active:focus {
    box-shadow: none;
    border: none;
    background-color: var(--puheet-accent-dark);
    color: var(--puheet-primary-darker) !important;
    margin-top: 4px;
}


.fruity .btn-primary[disabled],
.fruity .btn-primary[disabled]:hover {
    background: #D1D1D1;
    border: none;
    color: #9E9E9E !important;
}

/* button-item in a question */
.fruity form .button-item,
.fruity form .button-item:hover,
.fruity form .button-item:focus {
    background-color: #FFFFFF !important;
    border: 1px solid var(--puheet-primary) !important;
    color: var(--puheet-primary-darker) !important;
    box-shadow: none !important;
    text-transform: unset !important;
}

.fruity form .button-item.active,
.fruity form .button-item:active {
    background-color: #F1D5FF !important;
    border: 1px solid var(--puheet-primary) !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    text-transform: unset !important;
    color: var(--puheet-primary-darker) !important;
}

form .button-item label {
    margin: 0 !important;
}

.fruity form .button-item.active label,
.fruity form .button-item:active label {
    color: var(--puheet-primary-darker) !important;
}

/*FRONT PAGE*/
/*Adds space to the sides in the survey list page*/
#surveys-list-container {
    padding-right: 60px;
    padding-left: 60px;
}

.bg-color {
    background-color: #Ffffff !important;
}

/*HEROBANNER*/
.herobanner-container {
    position: relative;
}

.herobanner-lg {
    height: 70%;
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.herobanner-sm {
    display: none;
}

.herobanner-md {
    display: none;
}

.centered {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 200px;
}

.centered>p {
    text-align: center;
    color: var(--puheet-primary-darker);
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
    font-size: 24px;
    margin-top: 24px;
}

.centered>p>span {
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
    font-style: normal;
    font-size: 56px;
}

/* SURVEY CARD */

.card-container {
    display: grid;
    justify-content: center;
    margin: 0 64px;
    grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
}

.card-column {
    flex: 1 0 0
}

.survey-type-header {
    text-align: center;
    width: 100%;
    font-size: 32px;
    color: var(--puheet-primary-darker);
    margin-bottom: 56px;
    margin-top: 80px;
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
}

.has-margin-bottom {
    margin-bottom: 80px;
}

.survey-card {
    box-sizing: border-box;
    height: 600px;
    width: 384px;
    border-radius: 16px;
    box-shadow: 0px 2px 4px 0px rgba(224, 224, 224, 1);
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
    margin-left: 8px;
    margin-right: 8px;
}

.is-blocked {
    opacity: 0.5;
    filter: grayscale(60%);
    pointer-events: none;
}

.card-content {
    margin-left: 24px;
    margin-right: 24px;
    position: relative;
    overflow: hidden;
}

.card-title,
.card-text {
    color: var(--puheet-primary-darker);
    overflow: hidden;
    margin-top: 16px;
}

.card-title {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    display: -webkit-box;
    font-size: 28px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
}

.card-text {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: #707070;
    display: -webkit-box;
    font-size: 18px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card-info {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    text-transform: uppercase;
    margin-top: 24px;
    color: var(--puheettextcolor) !important;
    font-weight: 300;
}

.card-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.card-footer {
    width: 100%;
    position: absolute;
    bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
}

.no-surveys {
    width: 840px;
    color: #838383;
    border-radius: 16px;
    background-color: #FFFFFF;
    text-align: center;
    margin: 40px auto 120px;
}

.ph-text {
    font-size: 18px;
    text-align: center;
    padding-bottom: 40px;
}

.ph-image {
    width: 65px;
    height: 80px;
    margin-top: 40px;
    margin-bottom: 24px;
}

.card-btn-disabled {
    background-color: #E0E0E0 !important;
    border: 1px solid #E0E0E0 !important;
}

.progress-slider {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 8px !important;
    background-color: #E0E0E0;
}

/* CUSTOM SELECT */

.select-wrapper {
    position: relative;
    user-select: none;
    width: 260px;
    margin: 0 64px 24px auto;
}

.select {
    position: relative;
    display: flex;
    flex-direction: column;
}

.select__trigger {
    position: relative;
    display: flex;
    justify-content: end;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    height: 30px;
    line-height: 24px;
    background: #Ffffff;
    cursor: pointer;
}

.custom-options {
    position: absolute;
    display: block;
    margin-top: 8px;
    margin-right: 24px;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 0;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px #BABABA;
    border-radius: 16px;
    transition: all 0.2s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}

.select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-option {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    position: relative;
    display: block;
    padding: 0 22px 0 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--puheet-primary-darker);
    line-height: 24px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.blocked {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: #9E9E9E;
    margin-top: 20px;
    margin-bottom: 16px;
    pointer-events: none !important;
}

.last {
    margin-bottom: 20px !important;
}

.custom-option:hover {
    cursor: pointer;
    color: var(--puheet-primary);
}

.custom-option.selected {
    color: var(--puheet-primary);
}

/* ARROW FOR CUSTOM SELECT*/

.arrow {
    margin-left: 24px;
    position: relative;
    height: 10px;
    width: 10px;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    top: 6.5px;
    width: 0.3rem;
    height: 100%;
    transition: all 0.2s;
}

.arrow::before {
    left: -2.5px;
    transform: rotate(45deg);
    background-color: var(--puheet-accent-dark);
}

.arrow::after {
    left: 2.5px;
    transform: rotate(-45deg);
    background-color: var(--puheet-accent-dark);
}

.open .arrow::before {
    left: -2.5px;
    transform: rotate(-45deg);
}

.open .arrow::after {
    left: 2.5px;
    transform: rotate(45deg);
}

/* CUSTOM TICK MARK */

.tick-mark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
}

.tick-mark::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #fff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

.tick-mark::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #fff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

/*Adds space between language options and button*/
#firstpage-changelang>div>button {
    margin-left: 5px;
}

.survey-welcome.h4.text-primary {
    margin-top: 30px;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    text-align: center;
    font-size: 16px;
}

.survey-welcome.h4.text-primary img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    object-fit: contain;
}

.survey-description img {
    width: 100%;
    max-width: 600px;
}

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

.fruity .dropdown-menu {
    height: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fruity .dropdown-menu>li>a:hover,
.fruity .dropdown-menu>li>a:focus,
.fruity .dropdown-menu>li>a:active {
    background-color: rgba(240, 240, 240, 0.3);
    color: var(--puheet-primary) !important;
}

/*Privacy policies styling*/

div.privacy.row>div>div.row>.col-sm-12 {
    font-size: 16px;
    text-align: center;
}

.privacy .control-label a,
.privacy .control-label a:visited {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    text-decoration: underline;
}

input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
    border: solid 2px #D1D1D1;
    background: white;
}

input[type="checkbox"]:hover:after,
.checkbox input[type="checkbox"]:hover:after,
.checkbox-inline input[type="checkbox"]:hover:after {
    border: solid 2px var(--puheet-primary);
    background: white;
}

input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
    border: solid 2px var(--puheet-primary-dark);
    background: white;
}

input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
    border-color: white;
}

.fruity input[type="checkbox"]:checked:after,
.fruity .checkbox input[type="checkbox"]:checked:after,
.fruity .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: var(--puheet-primary);
    border: solid 2px var(--puheet-primary);
    /*box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);*/
}

.checkbox-item label::after {
    width: 16px;
    height: 16px;
    padding-left: 0;
}

input:focus,
textarea:focus {
    box-shadow: none;
    border-color: transparent;
}

#data-security-modal-193345 {
    margin-top: 20px;
}

.fruity .panel-primary {
    margin-top: 20px;
    border: 1px solid #EBEBEB;
    font-family: 'AvenirNextBold', 'Open Sans', sans-serif;
}

.fruity .panel-primary>.panel-heading {
    background-color: var(--puheet-primary);
    border: 1px solid var(--puheet-primary);
    color: var(--puheet-primary-darker);
}

.fruity .panel-primary>.panel-footer {
    background-color: white;
    border-top: 1px solid #EBEBEB;
}

/*Progress bar styles*/
.top-container .progress {
    height: 25px;
    box-shadow: 0 4px 8px 0 inset rgba(0, 0, 0, 0.2);
}

.fruity .progress {
    background-color: white;
}

.fruity .progress-bar {
    background-color: var(--puheet-accent);
    color: #ffffff !important;
    font-size: 12px;
    line-height: 24px;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

/*text styles*/
.fruity .text-primary {
    color: #282828;
}

.fruity .text-muted,
.privacy.row .ls-privacy-body {
    color: rgb(131, 131, 131) !important;
}

.group-title {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: #282828;
}

.text-muted.question-number {
    color: #282828;
    font-weight: 600;
}

label {
    color: var(--puheet-primary-darker);
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

.question-text {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 18px;
    color: #282828;
}

.fruity .text-info {
    margin-top: 16px;
    color: var(--puheet-primary-dark) !important;
    font-size: 16px;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

.fruity .text-info .ls-question-help,
.fruity .text-info .ls-questionhelp {
    color: #707070;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

/* mandatory asterisk style */
.input-error .asterisk {
    font-size: 0.7em;
    margin-top: 0;
}

.fruity .text-danger {
    margin-right: 2px;
    color: #C53826 !important;
}

/* mandatory question error style */
/* .fruity .question-container.input-error {
    box-shadow: 0px 4px 4px rgba(128, 60, 161, 0.25);
} */

/*warning text styling*/
.fruity .text-warning,
.fruity #block_error div h2 {
    color: #C53826 !important;
}

.fruity .alert-warning {
    background-color: #D9A236;
    border: 1px solid #D9A236;
    border-radius: 8px;
    color: var(--puheet-primary-darker);
}

.fruity .alert-warning .close {
    opacity: 1 !important;
    text-shadow: none !important;
}

/* text after sending the survey */
.completed-text {
    text-align: center;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 20px;
    color: var(--puheet-primary-darker);
}

/*question styles*/
.group-outer-container,
.group-container {
    margin-bottom: 0;
}

.question-container {
    border: none !important;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: none !important;
}

.question-help-container,
.question-valid-container {
    margin-top: 0 !important;
}

/*.group-description style*/
.fruity .well {
    background-color: var(--puheet-primary);
    border: none;
    color: white;
    box-shadow: none;
    border-radius: 8px;
    margin-bottom: 40px;
}

.fruity .well .text-info {
    color: white !important;
}

.fruity .well .text-warning {
    color: #F1D5ff !important;
}

/* backgrounded info text styling*/
.save-message .text-info,
.well.container-fluid .text-info {
    color: #282828;
}

/*radiobutton questions style*/
.ls-even,
.ls-odd {
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

.ls-even {
    background-color: #EEEEEE;
}

.ls-answers tbody .answertext {
    text-align: left;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    padding: 12px;
}

body .answer-item label::after,
checkbox-item input[type="checkbox"]:checked+label::after,
.checkbox-item input[type="radio"]:checked+label::after {
    background-color: var(--puheet-primary) !important;
}

/*slider question styles*/
.fruity .slider-handle {
    background-color: var(--puheet-primary);
}

/* text input style */
.fruity .form-control {
    border: 2px solid #D1D1D1;
    border-radius: 24px;
    min-height: 48px;
    color: var(--puheet-primary-darker);
    background-color: white;
    box-shadow: none;
}

.fruity .form-control:focus {
    border: 2px solid var(--puheet-primary);
    box-shadow: none !important;
    /*box-shadow: 0 4px 8px 0 inset rgba(0,0,0,0.2);*/
}

.fruity input[type="text"],
.fruity input[type="password"],
.fruity .ui-autocomplete-input {
    color: #282828;
}

/*header styles*/
/*hides Lime header from the interface*/
.fruity .navbar {
    /*display: none;*/
    background-color: var(--puheet-primary);
}

div.navbar.navbar-default.navbar-fixed-top>div.navbar-header {
    position: static !important;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: var(--puheet-primary-darker) !important;
    font-family: 'Poppins', 'Open Sans', sans-serif;
}

/* hamburger menu */
.fruity .navbar-toggle {
    border: 0;
    background-color: transparent;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
    border-radius: 3px;
}

.fruity .navbar-toggle .icon-bar {
    background-color: #313535;
}

/*Media queries -->*/
@media only screen and (max-width: 1477px) {
    .card-column {
        flex: 1 0 0;
    }

    .card-container {
        display: grid;
        justify-content: center;
        margin: 0 24px;
        grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
    }

}

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

    /*Radiobutton question styles */
    .dir-ltr .ls-answers td.radio-item,
    .dir-ltr .ls-answers td.checkbox-item {
        padding-left: 32px;
    }

    .ls-answers>tbody>tr>td.radio-item,
    .ls-answers>tbody>tr>td.checkbox-item {
        min-height: 48px;
        padding-top: 15px;
    }
}

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

    .centered>p {
        font-size: 16px;
        margin-top: 8px;
    }

    .centered>p>span {
        font-size: 32px;
    }

    .survey-type-header {
        text-align: center;
        width: 100%;
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 24px;
        margin-top: 0;
    }

    .card-container {
        display: grid;
        justify-items: center;
        margin: 0 8px;
        grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
    }

    .survey-card {
        height: 425px;
        width: 328px;
        margin-bottom: 16px;
    }

    .card-image {
        width: 100%;
        height: 160px;
        object-fit: fill;
    }

    .card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        margin-top: 10px;
    }

    .no-surveys {
        width: 100%;
    }

    .card-text {
        display: -webkit-box;
        font-size: 14px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10px;
    }

    .card-info {
        margin-top: 24px;
        color: #00735a;
        font-weight: 300;
        font-size: 14px;
    }

}

/* @media only screen and (min-width: 768px) {
    .top-container {
        width: 750px;
    }
}

@media only screen and (min-width: 992px) {
    .top-container {
        width: 970px;
    }
}

@media only screen and (min-width: 1200px) {
    .top-container {
        width: 1170px;
    }
} */



@media only screen and (max-width: 768px) {
    .herobanner-md {
        display: none;
    }

    .herobanner-sm {
        display: none;
    }

    h1,
    .h3 {
        font-size: 20px;
    }

    .no-surveys {
        width: 95%;
        margin: 40px auto 40px;
    }

    .survey-name {
        font-size: 22px;
    }

    .fruity .well {
        margin-bottom: 24px;
    }

    /*Adjusts the space in the survey list page to mobile devices*/
    #surveys-list-container {
        padding-right: 0;
        padding-left: 0;
    }


    .question-container {
        margin: 32px 0;
        padding: 16px 8px;
    }

    a.surveytitle {
        margin-right: 0 !important;

    }

    form .button-item {
        margin: 8px 0;
    }

    form .button-item.active,
    form .button-item:active {
        margin-top: 8px !important;
    }

    body .top-container {
        margin-top: 40px !important;
        margin-bottom: 0 !important;
    }

    /*Hides Lime navbar in mobile view*/
    .fruity .navbar {
        display: none !important;
    }

}

@media only screen and (max-width: 703px) {
    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 8px;
    }

    .card-column {
        flex: 0 0 0;
    }
}

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

    .herobanner-lg {
        display: none;
    }

    .herobanner-md {
        display: none;
    }

    .herobanner-sm {
        width: 100%;
        height: 320px;
        object-fit: cover;
        display: unset;
    }

    .centered {
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-25%, -50%);
        display: block;
        margin-right: -15px;
    }

    .centered>p {
        font-size: 16px;
        margin-top: 8px;
        margin-right: -15px;
    }

    .centered>p>span {
        font-size: 32px;
    }

    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 8px;
    }

    .card-column {
        flex: 0 0 0;
    }

    .select-wrapper {
        margin: 0 auto 24px;
    }

    .custom-options {
        margin-right: 0;
    }

    /*fits the survey name to the header */
    .navbar-default .navbar-brand {
        max-width: 350px;
    }

    .fruity .btn-default,
    .fruity .btn-primary {
        min-width: 120px;

    }

    #data-security-modal-193345 button {
        margin: 0;
    }

    /*Aligns the language change button in small screens*/
    #firstpage-changelang>div>button {
        margin-bottom: 4px;
        margin-left: 0;
    }

}

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

    /*fits the surbey name to the header */
    .navbar-default .navbar-brand {
        max-width: 260px;
    }
}