.feedback-container {
    background: var(--cs-feedback-bg, #fff);
    border: 1px solid var(--cs-feedback-fg);
    width: min-content;
    padding: 15px;
    font-size: 16px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 4px 4px 0px 1px;
    line-height: 1.5;
}

.feedback-container h2 {
    margin-top: 0;
}
.feedback-container .form-group + .form-group{
    margin-top: 20px;
}

.steps .step:not(.active) {
    display: none;
}

.feedback-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.feedback-content {
    min-width: var(--cs-feedback-width, 260px);
    min-height: var(--cs-feedback-height, 0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feedback-footer {
    margin-top: 25px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.feedback-footer .left,
.feedback-footer .right {
    flex: 1;
}

.feedback-footer .left {
    display: flex;
    justify-content: flex-start;
}

.feedback-footer .right {
    display: flex;
    justify-content: flex-end;
}

.step-pills {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.step-pill {
    position: relative;
    overflow: hidden;
    height: 7px;
    border-radius: 7px;
    border: 1px solid var(--cs-feedback-fg);
    flex: 1;
}
.step-pill::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cs-feedback-fg);
    transform: translateX(100%);
    transition: transform 0.4s ease;
}
.step-pill.active ~ .step-pill::before {
    transform: translateX(-100%);
}
.step-pill.active::before {
    transform: translateX(0);
}

.feedback-close {
    cursor: pointer;
    align-self: flex-end;
    color: var(--cs-feedback-fg);
    height: 24px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}
.feedback-close > svg {
    height: 100%;
    width: auto;
}
.step-pills .feedback-close {
    align-self: center;
}

.feedback-container input,
.feedback-container select,
.feedback-container textarea {
    width: 100%;
    appearance: none;
    border: 1px solid var(--cs-feedback-fg);
    border-radius: 6px;
    background-color: #fff;
    padding: 0.5em 1em;
    font-family: inherit;
    font-size: 1em;
    margin: 5px 0;
    resize: vertical; 
}
.feedback-container p,
.feedback-container fieldset {
    margin: 0;
}
.feedback-container label,
.feedback-container fieldset legend {
    font-size: inherit;
    font-weight: 600;
}
.feedback-container label .not-required {
    font-weight: 300;
    margin-left: 0.25em;
}
.feedback-container .btn-cta {
    border-color: #003257;
    background-color: #fff;
    color: #003257;
}

cs-feedback-survey {
    --cs-feedback-fg: #003257;
    --cs-feedback-bg: #fff;
    --cs-feedback-width: 260px;
    --cs-feedback-height: 0px;

    color: var(--cs-feedback-fg);
}

cs-feedback-survey .btn-cta {
    padding: 6px 10px;
    font-size: 16px;
}
.cs-feedback-response-banner{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    border: 0;
    padding: 15px 0;
    text-align: center;
    font-size: 18px;
}
.admin-bar .cs-feedback-response-banner {
    top: 32px;
}
.cs-feedback-response-banner[data-status="success"] {
    background-color: #25b234;
    color: #fff;
}
.cs-feedback-response-banner[data-status="error"] {
    background-color: #cc4801;
    color: #fff;
}

/* Radio boxes */
.radio-boxes {
    padding-top: 6px;
}
.radio-boxes input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    width: 0;
    padding: 10px;
    border: 2px solid var(--cs-feedback-fg);
    border-radius: 100%;
    background: #fff;
    margin: 0;
    margin-right: 8px;
}
.radio-boxes input[type=radio]:checked {
    background-color: var(--cs-feedback-fg);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.89163 13.2687L9.16582 17.5427L18.7085 8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");
    /*) no-repeat 51% 50% #981967;*/
}
.radio-boxes .radio-group {
    margin-top: 6px;
    display: flex;
    align-items: center;
}
.radio-boxes .radio-group label {
    font-weight: 500;
}
/*
.radio-boxes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.radio-boxes.vertical {
    flex-direction: column;
    align-items: stretch;
}
.radio-boxes.vertical label {

}
.radio-boxes label {
    position: relative;
    cursor: pointer;
}

.radio-boxes input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-boxes div {
    padding: 0.5em 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f8f8f8;
    transition: all 0.2s ease;
}

.radio-boxes input[type="radio"]:checked + div {
    background-color: #1964a2;
    border-color: #1964a2;
    color: white;
}

.radio-boxes input[type="radio"]:focus + div {
    outline: 2px solid var(--cs-feedback-fg);
    outline-offset: 2px;
}
*/

/* Radio buttons */
.radio-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.radio-buttons.vertical {
    flex-direction: column;
    align-items: stretch;
}
.radio-buttons.vertical label {

}
.radio-buttons label {
    position: relative;
    cursor: pointer;
}

.radio-buttons input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-buttons div {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f8f8f8;
  transition: all 0.2s ease;
}

.radio-buttons input[type="radio"]:checked + div {
  background-color: var(--cs-feedback-fg);
  border-color: var(--cs-feedback-fg);
  color: white;
}

.radio-buttons input[type="radio"]:focus + div {
  outline: 2px solid var(--cs-feedback-fg);
  outline-offset: 2px;
}

.g-recaptcha {
    align-self: stretch;
}
.g-recaptcha .tac_activate {
    background-color: transparent !important;
    font-size: initial;    
    margin: 15px 0;
}
.g-recaptcha .tac_activate .tac_float {
    text-align: left;
}
.g-recaptcha .tac_activate .tarteaucitronAllow {
    font-size: initial;
    margin-top: 10px;
}

/*
@media screen and (min-width: 768px) {
    .grow-animation {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    .grow-animation.animate {
        opacity: 1;
    }

    @media not (prefers-reduced-motion: reduce) {
        .grow-animation {
            transform: scale(0.9);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .grow-animation.animate {
            transform: scale(1);
        }        
    }
}
*/

.feedback-container {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}
.feedback-container.animate {
    opacity: 1;
}

@media not (prefers-reduced-motion: reduce) {
    .feedback-container {
        transform: translateY(100%);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .feedback-container.animate {
        transform: translateY(0);
    }
}

cs-feedback-survey {
    position: fixed;
    bottom: 30px;
    right: 30px;
}

@media screen and (max-width: 767px) {
    cs-feedback-survey {
        bottom: 5px;
        right: 5px;
        left: 5px;
    }
    /*
    .feedback-container {
        width: 100%;
    }
    cs-feedback-survey {
        align-items: stretch;
        min-width: 0 !important;
    }
    */
}


:root {
    --star-rating-size: 2em;
    --unchecked-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 48 48' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' d='M21 5.8q3-6.6 6 0l3.8 8q.8 1.9 2.8 2.1l8.9 1q7.2 1 1.9 5.9l-6.6 6q-1.4 1.4-1 3.4l1.7 8.7q1.4 7.1-5 3.6l-7.8-4.3q-1.7-1-3.4 0l-7.8 4.3Q8 48 9.5 41l1.8-8.7q.3-2-1.1-3.3l-6.6-6.1q-5.3-5 2-5.8l8.8-1q2-.3 2.8-2.1Z' stroke-width='1.6'/%3e%3c/svg%3e");
    --checked-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 48 48' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFFF66' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' d='M21 5.8q3-6.6 6 0l3.8 8q.8 1.9 2.8 2.1l8.9 1q7.2 1 1.9 5.9l-6.6 6q-1.4 1.4-1 3.4l1.7 8.7q1.4 7.1-5 3.6l-7.8-4.3q-1.7-1-3.4 0l-7.8 4.3Q8 48 9.5 41l1.8-8.7q.3-2-1.1-3.3l-6.6-6.1q-5.3-5 2-5.8l8.8-1q2-.3 2.8-2.1Z' stroke-width='1.6'/%3e%3c/svg%3e");
    --max-stars: 5;
}

.star-rating {
    width: max-content;
}

.star-rating > div {
    position: relative;
    height: var(--star-rating-size);
    width: calc(var(--star-rating-size) * var(--max-stars));
    background-image: var(--unchecked-image); 
    background-size: var(--star-rating-size) var(--star-rating-size);
    margin: 5px auto;
}

.star-rating label {
    position: absolute;
    cursor: pointer;
    height: 100%;
    background-size: var(--star-rating-size) var(--star-rating-size);
}

.star-rating label:nth-of-type(1) {
    z-index: 10;
    width: calc(100% / var(--max-stars) * 1);
}

.star-rating label:nth-of-type(2) {
    z-index: 9;
    width: calc(100% / var(--max-stars) * 2);
}

.star-rating label:nth-of-type(3) {
    z-index: 8;
    width: calc(100% / var(--max-stars) * 3);
}

.star-rating label:nth-of-type(4) {
    z-index: 7;
    width: calc(100% / var(--max-stars) * 4);
}

.star-rating label:nth-of-type(5) {
    z-index: 6;
    width: calc(100% / var(--max-stars) * 5);
}

.star-rating label:nth-of-type(6) {
    z-index: 5;
    width: calc(100% / var(--max-stars) * 6);
}

.star-rating label:nth-of-type(7) {
    z-index: 4;
    width: calc(100% / var(--max-stars) * 7);
}

.star-rating label:nth-of-type(8) {
    z-index: 3;
    width: calc(100% / var(--max-stars) * 8);
}

 .star-rating label:nth-of-type(9) {
    z-index: 2;
    width: calc(100% / var(--max-stars) * 9);
}

 .star-rating label:nth-of-type(10) {
    z-index: 1;
    width: calc(100% / var(--max-stars) * 10);
}

.star-rating label.checked,
.star-rating label:hover,
.star-rating input:checked + label,
.star-rating input:focus + label {
    background-image: var(--checked-image); 
}
.star-rating label:hover ~ label {    
    background-image: var(--unchecked-image); 
}
.star-rating label.half-checked {
    background-image: var(--half-checked--image); 
}    
.star-rating > div:has(:focus-visible) {
    outline: medium dashed currentColor;
    outline-offset: 4px;
    border-radius: 8px;
}

.star-rating input,
.star-rating label>span{
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
.star-rating-average-value {
    font-weight: bold;
    font-size: large;
}