.tx-ddf-feedback-simple {
    position: relative;
    background-color: #375a6e;
    color: #fff;
    padding: 1em;
    height: 23px;
}

.tx-ddf-feedback-simple .thankyou-container,
.tx-ddf-feedback-simple .feedback-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.tx-ddf-feedback-simple .feedback-container {
    min-width: 380px;
}

.tx-ddf-feedback-simple .feedback-container a {
    color: #fff;
    padding: 0.5em;
}

.tx-ddf-feedback-simple .feedback-container a.active {
    background-color: #193c50;
}

.tx-ddf-feedback-simple .feedback-container .rating-text {
    padding-right: 2em;
    display: inline-block;
}

.tx-ddf-feedback-simple .feedback-container .label-first {
    padding-right: 1em;
}

.tx-ddf-feedback-simple .feedback-container .label-second {
    padding-left: 1em;
}

.tx-ddf-feedback-simple .feedback-container .slider-bar {
    width: 60px;
    border-top: 2px solid #80929e;
    height: 3px;
    overflow: visible;
    display: inline-block;
    position: relative;
}

.tx-ddf-feedback-simple .feedback-container .slider-bar .knot {
    background: #fff;
    width: 12px;
    height: 12px;
    position: absolute;
    top: -7px;
    left: 40%;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.tx-ddf-feedback-simple .thankyou-container {
    background-color: #d8ddde;
    padding: 1em;
    color: #000;
    bottom: 60px;
    display:none;
}

.tx-ddf-feedback-simple .thankyou-container.arrow-bottom::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: #d8ddde transparent transparent transparent;
}

/* Extended */

.tx-ddf-feedback-extended {
    padding: 2em;
    background-color: #ebeeee;
}

.tx-ddf-feedback-extended .chart-container {
    position: relative;
}

.tx-ddf-feedback-extended .rating-text {
    text-align: center;
    padding-bottom: 4em;
}

.tx-ddf-feedback-extended .voted .rating-text {
    display: none;
}

.tx-ddf-feedback-extended .feedback-cta {
    margin-left: 0px;
    text-align: center;
    align-items: center;
}

.tx-ddf-feedback-extended .voted .feedback-cta {
    align-items: baseline;
}

.tx-ddf-feedback-extended .feedback-cta .slider-container {
    margin-top: 0px;
    position: relative;
}

.tx-ddf-feedback-extended .feedback-cta .label {
    padding-left: 0px;
    color: #193c50;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    top: 55px;
}

.tx-ddf-feedback-extended .voted .feedback-cta .label {
    position: relative;
    bottom: 10px;
    top: unset;
}

.tx-ddf-feedback-extended input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height:25px;
    width: 100%; 
    background: #b2bcbe url('../Icons/bg_tacho.png') no-repeat center !important;
    background-color: #b2bcbe !important;
    background-size: cover;
    cursor: pointer;
    padding-left: 0;
    padding: 0.25em;
    border-radius: 25px;
    border: none;
    opacity: 0.5;
}

.tx-ddf-feedback-extended input[type=range]:disabled {
    opacity: 0.5; /* Adjust the opacity as needed */
    cursor: not-allowed; /* Change cursor style */
    /* Add any other styles you want for the disabled state */
    margin-top: 0;
    border: none !important;
  }

.tx-ddf-feedback-extended input[type=range]::focus {
    outline: none;
    outline-color: green;
}

.tx-ddf-feedback-extended input[type="range"]::-webkit-slider-runnable-track,
.tx-ddf-feedback-extended input[type="range"]::-moz-range-track {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
}

.tx-ddf-feedback-extended input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 2em;
    width: 2em;
    border-radius: 50px;
    border: 3px solid #d8ddde;
}

.tx-ddf-feedback-extended input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 1.5em;
    width: 1.5em;
    border-radius: 50px;
    border: 3px solid #d8ddde;
}

.tx-ddf-feedback-extended input[type="range"]::-ms-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 2em;
    width: 2em;
    border-radius: 50px;
    border: 3px solid #d8ddde;
}

.tx-ddf-feedback-extended .voted input[type="range"]::-webkit-slider-thumb::after {
    content: "";
    background-color: green;
    width: 4px;
    height: 100%;
}

.tx-ddf-feedback-extended .tooltip {
    background-color: #193c50;
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 1em;
    border-radius: 5px;
    position: relative;
    width: 100px;
    top: 20px;
    font-weight: 600;
    text-indent: 7px;
}

.tx-ddf-feedback-extended .voted .tooltip {
    visibility: hidden;
    display: none;
}

.tx-ddf-feedback-extended .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: #193c50 transparent transparent transparent;
}


/* Chart */

.feedback-cta {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.feedback-cta div:nth-child(2) {
    padding-left: 0 !important;
}

.feedback-cta #chart {
    display: none !important;
}

.voted .feedback-cta #chart {
    display: block !important;
    width:100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* thankyou  */

.feedback-container .rating-thankyou {
    text-align: center;
    display: none;
}

.feedback-container.voted .rating-thankyou {
    display: block;
}


.feedback-container .rating-thankyou .headline {
    font-size: 20px;
    font-weight: 600;
    color: #193c50 !important;
}

#normal-page .feedback-container .rating-thankyou p {
    margin-top: 15px;
    margin-bottom: 15px;
}

.feedback-container.voted .slider-container,
.feedback-container.voted .feedback-cta .label.first,
.feedback-container.voted .feedback-cta .label.second {
    margin-bottom: 0px;
}

/* feedback percentage */

.percentage-container {
    text-align: center;
    color: #818989;
}


.feedback-percentage {
    margin-top: 0px !important;
    color: #193c50 !important;
}