.bg-grey {background-color: #FAFAFA;}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #B4B4B4 !important; font-size: 1.125rem; line-height: 1.2222em;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #B4B4B4 !important; font-size: 1.125rem; line-height: 1.2222em;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #B4B4B4 !important; font-size: 1.125rem; line-height: 1.2222em;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #B4B4B4 !important; font-size: 1.125rem; line-height: 1.2222em;
}


.weValueYourFeedbackHeader {margin-top: 15px; padding: 5px 40px; background: #2356AA; border: 1px solid #707070}
    .weValueYourFeedbackHeader h2 {margin-bottom: 0; font-size: 1.375rem; line-height: 1.6875em; color: #FFF}
    .weValueYourFeedbackHeader button, .feedback-accordion-btn {position: absolute; right: 5px; top: 50%; transform: translateX(-50%); margin-top: -14px; background: none; border: none;}
      .weValueYourFeedbackHeader button:hover, .feedback-accordion-btn:hover {opacity: 0.8;}
    .feedback-accordion-btn {display: none; margin-bottom: 0; padding: 0}
    .feedback-accordion-btn .openAccordion {display: none}
    .feedback-accordion-btn.collapsed .openAccordion {display: block}
    .feedback-accordion-btn.collapsed .closedAccordion {display: none}

#feedback-pages #feedbackRatings {display: block !important}
#feedbackRatings {display: block; background: white; /*padding-bottom: 10px*/}
    #feedbackRatings .flex-column {width: 20%; padding-left: 15px; padding-right: 15px}
        #feedbackRatings h3 {font-size: 1.375rem; line-height: 1.2272em; font-weight: 600; color: #000000;}
        #feedbackRatings p {max-width: 225px; font-size: 1.125rem; line-height: 1.2222em; text-align: center}
        #feedbackRatings ul {display: flex; margin-bottom: 0; flex-wrap: wrap; padding: 0; list-style: none; justify-content: center}
        #feedbackRatings ul li {padding-left: 5px; padding-right: 5px}
            #feedbackRatings ul li img.happyFaceActive {display: none;}
            #feedbackRatings ul li.active img.happyFaceNotActive {display: none}
            #feedbackRatings ul li.active img.happyFaceActive {display: block}

            #feedbackRatings .further-feedback label {margin-bottom: 3px; font-size: 1.125rem; line-height: 1.2222em}
            #feedbackRatings .further-feedback textarea {padding: 10px 15px; border: 1px solid #707070; font-size: 1.125rem; line-height: 1.2222em;}
            #feedbackRatings .further-feedback p {width: 100%; max-width: none; margin-bottom: 22px; color: #989898; font-style:italic}
        
        #feedbackRatings input[type=submit] {min-width: 160.16px}

        #feedbackRatings .feedback-selector {display: flex; flex-wrap: wrap; height: 100%; flex-direction: column; align-content: space-between}

    #feedbackRatings .feedback-icons {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#feedbackRatings .feedback-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

#feedbackRatings .checkout-buttons .cancelFeedback {padding-left: 30px; padding-right: 30px; background: #dcdcdc !important; border-color: #dcdcdc !important; color: #808080 !important}
    #feedbackRatings .checkout-buttons .cancelFeedback strong {
        font-size: 0.9rem !important
    }

#feedbackRatings .feedback-selector input:checked +.feedback-label{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
#feedbackRatings .feedback-label{
    margin-bottom: 0;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    width:43px;height:43px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: contrast(0%) opacity(.3);
       -moz-filter: contrast(0%) opacity(.3);
       filter: contrast(0%) opacity(.3);
}
#feedbackRatings .feedback-label:hover{
    -webkit-filter: contrast(100%) opacity(1);
       -moz-filter: contrast(100%) opacity(1);
            filter: contrast(100%) opacity(1);
}


    #feedbackRatings .feedback-thanks img {margin-bottom: 20px;}
    #feedbackRatings .feedback-thanks p {max-width: none; font-size: 1.1875rem; line-height: 1.2105em}
    #feedbackRatings .feedback-thanks p:last-child {margin-bottom: 0; width: 100%;}


@media only screen and (max-width : 1024px) {
    #feedbackRatings .flex-column {width: 33.33%}
    .weValueYourFeedbackHeader button {display: none}
    .feedback-accordion-btn {display: block}
    #feedbackRatings {display: none}
    #feedbackRatings.show {display: block !important}
}

@media only screen and (max-width : 640px) {
    #feedbackRatings .flex-wrap .flex-column {
        width: 100% !important;
    }
    #feedbackRatings .further-feedback .col-6 {flex: 100%; max-width: none; padding: 1rem !important} 
    #feedbackRatings ul {width: 100%}
}

#feedbackRatings .further-feedback .feedbackTextCol {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
}

@media only screen and (max-width : 767px) {
    #feedbackRatings .further-feedback .feedbackTextCol {
        width: 100% !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        text-align: center;
    }

    #feedbackRatings .flex-wrap .flex-column {
        width: 50%
    }
        #feedbackRatings .flex-wrap .flex-column:nth-last-child(1):nth-child(odd) {
            width: 100%;
        }
}

@media only screen and (max-width: 1024px) {
    #feedbackRatings .flex-column {
        width: 33.33%;
        align-items: center;
    }
}

#feedbackRatings p {
    max-width: 280px;
    font-size: 1.125rem;
    line-height: 1.2222em;
    text-align: center;
}