.nps-area { padding: 75px; }

.nps-area .start,
.nps-area .finish {
    margin: 0 auto;
    max-width: 500px;
}
.nps-area .start ul li,
.nps-area .finish ul li {
    background: linear-gradient(180deg, #FDF0E5 0%, #FBD3C0 100%);
    border-radius: 100px;
    padding: 15px 25px;
    width: fit-content;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin: 20px 0;
}

.nps-area .quest { margin: 50px 0; }
.nps-area .quest .title { color: #000; font-size: 16px; margin-bottom: 15px; }
.nps-area .quest .title span { color: rgba(108, 117, 125, 1); }
.nps-area .quest .error { color: #DD1F21; display: block; height: 15px; }
.nps-area .quest .description { font-size: 12px; margin-top: 10px; color: rgba(108, 117, 125, 1); }

.nps-area .navigation {
    margin: 50px 0 0;
}

.nps-area .navigation button {
    background: rgba(248, 249, 250, 1);
    border-radius: 100px;
    font-size: 14px;
    color: #000;
    font-weight: bold;
    padding: 12px 20px;
    border: 0;
    outline: 0;
    transition: 0.3s all;
    display: none;
}

.nps-area .navigation button:hover {
    background: rgba(236, 110, 0, 1);
    color: #fff;
}

.nps-area .navigation button svg {
    font-size: 10px;
    margin-top: -3px;
}

.nps-area .navigation .prev button svg {
    margin-right: 15px;
    transform: rotate(-180deg);
}

.nps-area .navigation .next button svg {
    margin-left: 15px;
}


.nps-area .nps-radio { position: relative; }
.nps-area .nps-radio .nps-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.nps-area .nps-radio .nps-label {
    background: rgba(253, 240, 229, 1);
    border-radius: 8px;
    color: rgba(236, 110, 0, 1);
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 17px;
    transition: 0.3s all;
}
.nps-area .nps-radio .nps-input:hover ~ .nps-label,
.nps-area .nps-radio .nps-input:checked ~ .nps-label {
    background: rgba(236, 110, 0, 1);
    color: #fff;
}

.nps-area .nps-checkbox {
    position: relative;
    margin: 5px 0 5px 35px;
    cursor: pointer;
}
.nps-area .nps-checkbox .nps-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.nps-area .nps-checkbox .nps-label {
    font-size: 16px;
    color: #000;
    cursor: pointer;
}
.nps-area .nps-checkbox .nps-label::before,
.nps-area .nps-checkbox .nps-label::after {
    position: absolute;
    top: -2px;
    left: -35px;
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    content: "";
    background-color: rgba(253, 240, 229, 1);
    border-radius: 8px;
}
.nps-area .nps-checkbox .nps-input:checked~.nps-label::after {
    background-color: rgba(236, 110, 0, 1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    background-size: 65% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.nps-area .nps-textarea,
.nps-area .nps-textarea-other {
    display: block;
    border: 1px solid rgba(233, 236, 239, 1);
    background: rgba(248, 249, 250, 1);
    font-size: 14px;
    color: #000;
    line-height: 18px;
    padding: 10px;
    width: 100%;
    outline: 0;
    resize: none;
}

#colorbox.nps-modal {
    border-radius: 40px;
}
#colorbox.nps-modal .nps-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}
#colorbox.nps-modal .nps-close .icon-nps-close {
    background: rgba(248, 249, 250, 1);
    border-radius: 50%;
}

@media (max-width: 1024px) {
    .nps-area { padding: 30px; }
    .nps-area .quest ul.nav li { margin: 5px 0; }
}