.survey__question-wrapper {
    padding: 3rem 3.5rem !important;
}

@media screen and (max-width: 600px) {
    .survey__question-wrapper {
        padding: 2rem 1.5rem !important;
    }
}

.survey__code-page-card-title{
    text-align: center;
}
.survey__code-page-card-message {
    text-align:center;
}

.survey__heading-title {
    font-size: 2rem !important;
    padding-top: 0 !important;
}

.survey__question-instruction,.survey__importance-instruction {
    padding: 0.75rem 1rem !important;
    background-color: #badfff69 !important;
    border-radius: 10px !important;
}

.survey__eucusa-question-container, .survey__scale-question-container {
    margin-left: 0;
    width: 100%;
}
.survey__scale-question-topper {
    background-color: transparent !important;
}
.survey__longtext--scale{
    font-size: 1rem !important;
    color: rgba(81, 81, 81, 0.87);
}
.survey__scale-question-topper,
.survey__scale-question-wrapper {
    padding: .5rem 0 !important;
}

.v-field {
    border-radius: 10px !important;

}

.survey__background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    /*background-color: #fffdee;*/
    background: url("https://eucusa-feedback.com/templates/EFEMODemo_278/img/gradient.jpg") !important;
    filter: opacity(0.7);
    background-size: cover !important;
}
.survey__background--desktop {
    display: none !important;
}
.survey__background--mobile {
    display: none !important;
}

.survey__progress > .v-progress-linear {
    height: 30px !important;
}

.v-progress-linear__background, .v-progress-linear__buffer{
    background: var(--primary);
}
.v-progress-linear__determinate, .v-progress-linear__indeterminate {
    background: var(--primary);
}

.survey__question-instruction-title, .survey__importance-instruction-title {
    margin-bottom: 0.5rem;
}
.survey__question-instruction,.survey__importance-instruction{
    background:
            radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 40%),
            linear-gradient(180deg, #badfff66, rgba(207, 237, 255, 0.93)) !important;
    box-shadow: 1px 3px 8px lightsteelblue
}

.comment-question-component .v-input {
    padding: 14px 0 0 0;
}
.comment-question-component .v-field__outline {
    --v-field-border-width: 0;
}

.scale-question-button-group-component .survey__question-instruction {
    margin-top: 1rem;
}
.scale-question-button {
    border-radius: 0.5rem !important;
}

.v-btn.btn-back {
    background: #7f73fc; // #4d6ae2; //rgba(75, 69, 255, 0.73);
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-right: 1.2em;
    font-size: 17px;
    font-weight: 600;
    border-radius: 0.9em !important;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em !important;
    padding-left: 3.3em;
    cursor: pointer;
}
.v-btn.btn-continue {
    background: #7f73fc; //#4d6ae2; //rgba(75, 69, 255, 0.73);
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 600;
    border-radius: 0.9em !important;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em !important;
    padding-right: 3.3em;
    cursor: pointer;
}
.v-btn.survey__nav-btn.survey__finalize-btn {
    background: #7f73fc; //#4d6ae2; //rgba(75, 69, 255, 0.73);
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 600;
    border-radius: 0.9em !important;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em !important;
    padding-right: 3.3em;
    cursor: pointer;
}

.v-btn .icon.icon-back {
    background: white;
    margin-right: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
    left: 0.3em;
    transition: all 0.3s;
    transform: rotate(180deg);
}
.v-btn .icon.icon-continue {
    background: white;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
    right: 0.3em;
    transition: all 0.3s;
}

.v-btn .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: #7b52b9;
}

.v-btn:hover .icon {
    width: calc(100% - 0.6em);
}

.v-btn:hover .icon svg {
    transform: translateX(0.1em);
}

.v-btn.btn-back:active .icon {
    transform: rotate(180deg) scale(0.95);
}
.v-btn.btn-continue:active .icon {
    transform: scale(0.95);
}