/**
 * Style - NPS
 */

/**
 * Theme 2
 */

.nps-single.theme-2 ul.liquidpoll-nps-options li {
    border: 1px dashed #5f64eb;
    border-radius: 999999px;
}

.nps-single.theme-2 ul.liquidpoll-nps-options li:hover,
.nps-single.theme-2 ul.liquidpoll-nps-options li.active {
    background: linear-gradient(138.32deg, #5F64EB 23.82%, #946EE6 88.62%);
}

.nps-single.theme-2 ul.liquidpoll-nps-options li:last-child {
    margin-right: 0;
}

.nps-single.theme-2 ul.liquidpoll-nps-options li:hover label,
.nps-single.theme-2 ul.liquidpoll-nps-options li.active label {
    color: #FFFFFF;
}

.nps-single.theme-2 .liquidpoll-comment-box textarea {
    background: #FBFBFB;
    height: 210px;
}

/**
 * Theme 3
 */


.nps-single.theme-3 .rangeslider,
.nps-single.theme-3 input[type=range] {
    margin-bottom: 50px;
}

.nps-single.theme-3 .rangeslider__ruler {
    cursor: pointer;
    padding: 25px 0;
    position: relative;
    text-align: justify;
    font-size: 16px;
    color: #CCCCD1;
}

.nps-single.theme-3 .rangeslider__ruler:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.nps-single.theme-3 .liquidpoll-nps-score-labels {
    margin-top: 60px;
}

.nps-single.theme-3 .liquidpoll-comment-box textarea {
    background: #FFFFFF;
    height: 210px;
    border: 1px solid #C9C9C9;
}


/**
 * Theme 4
 */
:root {
    --bgcolor: #866de1;
}

.nps-single.theme-4 #nps_score {
    display: block;
    margin: 70px auto 30px auto;
}

.nps-single.theme-4 #nps_score .rs-handle {

    background-color: transparent;
    border: 8px solid transparent;
    border-right-color: #424f6b;
    margin: -10px 0 0 31px !important;
    border-width: 6px 225px 10px 25px;;
    /* position: relative; */
}

.nps-single.theme-4 #nps_score .rs-border,
.nps-single.theme-4 #nps_score .rs-seperator {
    border: none !important;
}

.nps-single.theme-4 #nps_score .rs-handle:before {
    display: block;
    content: " ";
    position: absolute;
    height: 44px;
    width: 44px;
    background: #ffffff;
    right: -22px;
    bottom: -22px;
    border-radius: 50%;
    border: 10px solid #424f6b;
    outline: 10px solid #eeeeee;
    z-index: -5;
}

.nps-single.theme-4 #nps_score .rs-handle:after {
    display: block;
    position: absolute;
    height: 30px;
    width: 30px;
    background: var(--bgcolor);
    top: -13px;
    left: 0;
    border-radius: 50%;
    border: none;
    z-index: -5;
}

.nps-single.theme-4 #nps_score[val^="yes-"] .rs-handle:after {
    content: " ";
}

.nps-single.theme-4 .rs-handle[aria-valuenow="100"]:after {
    display: none !important;
}


.nps-single.theme-4 #nps_score .rs-tooltip {
    top: 75%;
    font-size: 12px;
}

.nps-single.theme-4 #nps_score .rs-range-color {
    background: linear-gradient(76.51deg, #6165EB 4.74%, #916FDD 100.97%);
}

.nps-single.theme-4 #nps_score .rs-path-color {
    border: 70px solid #f1f3f5;
}

.nps-single.theme-4 #nps_score span.rs-number {
    position: absolute;
    top: -8px;
    left: -25px;
    font-size: 15px;
    color: #7E6BE3;
    cursor: pointer;
}


/**
 * Theme 5
 */

.nps-single.theme-5 .nps-container {
    width: 657px;
}

.nps-single.theme-5 ul.liquidpoll-nps-options {
    margin-top: 30px;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li {
    position: relative;
    margin-bottom: 0;
    margin-right: 0;
    width: 65px;
    background-color: #EFF0FF;
    border: none;
    border-radius: 0;
    border-top: 1px solid #5f64eb;
    border-bottom: 1px solid #5f64eb;
    transition: .3s;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li:first-child {
    border-left: 1px solid #5f64eb;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li:last-child {
    border-right: 1px solid #5f64eb;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}

.nps-single.theme-5 ul.liquidpoll-nps-options li:hover,
.nps-single.theme-5 ul.liquidpoll-nps-options li.active {
    background: #5F64EB;
    color: #FFFFFF;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li:hover::before,
.nps-single.theme-5 ul.liquidpoll-nps-options li.active::before {
    opacity: 1;
    visibility: visible;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li span.liquidpoll-nps-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    line-height: 58px;
    transition: .3s;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li > label > span:first-child {
    color: #5f64eb;
}

.nps-single.theme-5 ul.liquidpoll-nps-options li span.liquidpoll-nps-tooltip::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #5f64eb;
    clip-path: polygon(0 0, 0% 80%, 4% 85%, 48% 100%, 52% 100%, 96% 85%, 100% 80%, 100% 0);
    border-radius: 5px;
    z-index: -1;
}


.nps-single.theme-5 ul.liquidpoll-nps-options li:hover span.liquidpoll-nps-tooltip,
.nps-single.theme-5 ul.liquidpoll-nps-options li.active span.liquidpoll-nps-tooltip {
    top: -60%;
    visibility: visible;
    opacity: 1;
}

/**
 * Mobile Responsive
 */
@media (max-width: 460px) {
    .nps-single .nps-form {
        width: 100%;
        padding: 0 5px;
    }

    .nps-single.theme-2 ul.liquidpoll-nps-options li:last-child {
        margin-right: 10px;
    }

    .nps-single.theme-4 #nps_score,
    .nps-single.theme-4 #nps_score .rs-container {
        height: 160px !important;
        width: 320px !important;
    }

    .nps-single.theme-4 #nps_score .rs-handle {
        border-width: 6px 90px 10px 25px;
    }

    .nps-single.theme-5 ul.liquidpoll-nps-options {
        display: flex;
        justify-content: space-between;
    }

    .nps-single.theme-5 ul.liquidpoll-nps-options li {
        /*width: 30px;*/
    }

    .nps-single ul.liquidpoll-nps-options li label {
        font-size: 20px !important;
    }
}