.page-nps-form .page-banniere {
    display: none;
}
.page-nps-form .content-page-centered {
    padding: 40px 30px;
    width: 90%;
    max-width: 800px;
    margin: 50px auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
   .paytone-one-regular {
        font-family: "Paytone One", sans-serif;
        font-weight: 400;
        font-style: normal;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .nps-title {
            text-align: center;
            color: #6f43d6;
            font-family: "Paytone One", sans-serif;
            font-weight: lighter;
            font-size: 26px;

        }
        .question {
            margin: 50px 0;
        }
        .question:last-of-type {
            margin: 50px 0 20px;
        }
        .question label {
            display: block;
            margin-bottom: 10px;
            color: #555;
        }
        .question textarea {
            width: calc(100% - 20px);
            height: 100px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .submit-btn {
            padding: 12px 20px;
            font-size: 14px;
            line-height: 18px;
            background-color: #6f43d6;
            border: .2rem solid #6f43d6;
            color: #fff;
            border-radius: 48px;
            min-height: 45px;
            display: block;
            text-align: center;
            margin: 0 auto; 
            font-family: "Paytone One", sans-serif;
            font-weight: lighter;
            cursor: pointer;
        }
        .submit-btn:hover {
            background-color: #6f43d6;
        }
        .rating {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: center;
        }
        .rating span {
            margin: 0 20px;
        }
        .rating input {
            opacity: 0;
            position: absolute;
            width: 35px;
            height: 35px;
            cursor: pointer;
            z-index: 2;
            color: red;
            background-color: red;
        }
        .rating label {
            font-size: 30px;
            cursor: pointer;
            color: gray;
            margin: 0 5px;
        }
        .rating label small {
            display: block;
            font-size: 12px;
            text-align: center;
            color: black;
        }
        .star {
    fill: gray;
    width: 30px;
    height: 30px;
    z-index: 1;
}
.rating-second {
  display: block;
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: center;
  min-width: 170px;
}
.rating .star {
  display: none;
}
.rating label {
  color: lightgray;
  display: inline-block;
  font-size: 22pt;
  margin: 0 5px;
  transition: transform .15s ease;
}
.rating label:hover {
  transform: scale(1.35, 1.35);
}
label[for="radio1"],label[for="radio2"], label[for="radio3"], label[for="radio4"], label[for="radio5"] {
    position: relative;
}
label[for="radio1"]::after {
    content: "5";
    position: absolute;
    font-size: 16px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 100%;

}
label[for="radio2"]::after {
    content: "4";
    position: absolute;
    font-size: 16px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 100%;

}
label[for="radio3"]::after {
    content: "3";
    position: absolute;
    font-size: 16px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 100%;

}
label[for="radio4"]::after {
    content: "2";
    position: absolute;
    font-size: 16px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 100%;

}
label[for="radio5"]::after {
    content: "1";
    position: absolute;
    font-size: 16px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    height: 100%;

}
.rating label:hover,
.rating label:hover ~ label {
  color: orange;
}
.rating .star:checked ~ label {
  color: orange;
}

        .emoji-rating {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .emoji-rating input {
            display: none;
        }
        .emoji-rating label {
            font-size: 24px;
            cursor: pointer;
        }
        .emoji-rating input:checked ~ label {
            color: #ffcc00;
        }
        .scale-rating {
            display: flex;
            justify-content: center;
            align-items: baseline;
            margin: 5px;
        }
        .scale-rating span {
            margin: 0 20px;
        }
        .scale-rating input {
            display: none;
        }
        .scale-rating label {
            padding: 5px 10px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            transition: all 0.3s linear;
        }
        .scale-rating input:checked + label {
            background-color: #6f43d6;
            color: #fff;
            transform: translateY(-5px);

        }
        .question textarea:focus-visible {
    outline: 2px solid #6f43d6;
}
        .red-text {
            color: red;
            font-family: "Paytone One", sans-serif;
            font-weight: lighter;
            font-size: 14px;
            line-height: 18px;

        }
        .green-text {
            color: green;
            font-size: 14px;
            font-family: "Paytone One", sans-serif;
            font-weight: lighter;
            line-height: 18px;

        }
        .scale-rating .red {
            background-color: red;
        }
        .scale-rating .orange {
            background-color: orange;
        }
        .scale-rating .yellow {
            background-color: gold;
        }
        .scale-rating .light-green {
            background-color: lightgreen;
        }
        .scale-rating .green {
            background-color: green;
        }
        table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

th, td {
    border: 1px solid #555 !important;
    padding: 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: #555 !important;
    min-width: unset !important;
    line-height: 18px !important;
}
tr td:first-of-type {
    text-align: left;

} 

th {
    background-color: #f2f2f2;
    color: #555;
    vertical-align: middle !important;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

td input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

td input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6f43d6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
textarea::placeholder {
    font-family: Arial, sans-serif;
    color: #555;
}

textarea::-webkit-input-placeholder {
    font-family: Arial, sans-serif;
}

textarea:-ms-input-placeholder {
    font-family: Arial, sans-serif;
}

textarea::-ms-input-placeholder {
    font-family: Arial, sans-serif;
}
.mentions {
    font-size: 12px;
    color: #555;
    margin-bottom: 20px;
}
.mentions a {
    color: #6f43d6;
    text-decoration: none;
}
@media screen and (max-width: 769px) {
        table {
        overflow-x: visible !important;
    }
    .page-nps-form .content-page-centered {
    padding: 40px 15px;
    width: 100%;
    margin: 10px auto 40px;
    box-shadow: none;
    border-radius: 0;
}
    h1 {
        font-size: 24px;
    }
    .scale-rating {
        position: relative;
        padding-top: 20px;
    }
    .scale-rating .red-text {
        position: absolute;
        left: 0;
        top: 0px;
        width: 40%;
    }
    .scale-rating .green-text {
        position: absolute;
        right: 0;
        top: 0px;
        width: 40%;
    }
    .red-text {
        margin: 0 10px 0 0 !important;
        text-align: center !important;
    }
    .green-text {
        margin: 0 0 0 10px !important;
        text-align: center !important;
    }
    .scale-rating label {
            padding: 5px 7px;
            margin: 3px;
            width: calc(100% / 10);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .rating label {
  margin: 0 0px;
}
}
@media screen and (max-width: 375px) {
    .scale-rating {
        padding-top: 40px;
    }
    
}