/* General style */

.order-top-mobile {
    order: 1;
}

.order-bottom-mobile {
    order: 2;
}

@media only screen and (min-width: 1080px) {
    .order-top-mobile {
        order: 2;
    }

    .order-bottom-mobile {
        order: 1;
    }
}


/* General style */

html {
    scroll-behavior: smooth;
}

.highlight {
    background-color: pink;
}

.highlight-look-at {
    background-color: yellow;
}

.column-width {
    width: 100%;
}

@media only screen and (min-width: 1080px) {
    .column-width {
        width: 90%;
    }
}

.boiler-svg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.boiler-svg svg {
    width: 100% !important;
}

.margin-zero {
    margin: 0 !important;
}

.padding-zero {
    padding: 0;
}

.spacing-02 {
    margin-top: 2rem;
}

.spacing-03 {
    margin-top: 3rem;
}

ns-appointment-picker {
    width: 100%;
}

#stepTwo {
    display: none;
}

#stepThree {
    display: none;
}

#stepFive {
    display: none;
}

#stepSix {
    display: none;
}

/* Playback */

#playbackDetails {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#playbackTwo,
#playbackThree,
#playbackFour,
#playbackFive,
#playbackSix,
#playbackSeven,
#playbackEight,
#playbackOneLogin,
#playbackOneLoginTwo,
#loginAddresses {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}


#changePhoneNumberInput {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Playback end */

/* Address finder */

#addressStepTwo {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#productHighlight {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#postcodeNotSupported {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}


#loginNextStep {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Address finder end */


#marketingPreferences {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#createAccount {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#worldPay {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Direct Debt */

#optedOut,
#optedIn {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#directDebitDate,
#directDebitDateYearly {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#directDebt {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Confirmation screen */
#confirmationScreen {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Review and continue */

#reviewAndContinue {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#newDirectDebt {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}


#directDebtAddressShow {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Review and continue end */

/* Your details  */

/* Fuel type */

#fuelType {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
    margin-top: 32px;
}

#noAppointments {
    display: none;
}

/* Fuel type end */


/* Animations  */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.next-steps-list li {
    display: flex;
    justify-content: top !important;
    margin-bottom: 2rem !important;
}

.next-steps-list li ns-illustration {
    margin-right: 1rem !important;
}

#appointmentPicker {
    display: none;
}

#appointmentDetails {
    display: none;
}

.fade-away {
    display: none;
    -webkit-animation: fadeAway 0.5s ease-in;
    animation: fadeAway 0.5s ease-in;
}

@-webkit-keyframes fadeAway {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeAway {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes slide-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.smile {
    -webkit-animation: smile 5s ease-in-out infinite alternate;
    animation: smile 5s ease-in-out infinite alternate;

}

.warm-stroke-1 {
    -webkit-animation: warm-stroke-1 5s ease-in-out infinite alternate;
    animation: warm-stroke-1 5s ease-in-out infinite alternate;

}

.warm-stroke-2 {
    -webkit-animation: warm-stroke-2 5s ease-in-out infinite alternate;
    animation: warm-stroke-2 5s ease-in-out infinite alternate;
}

.warm-stroke-3 {
    -webkit-animation: warm-stroke-3 5s ease-in-out infinite alternate;
    animation: warm-stroke-3 5s ease-in-out infinite alternate;
}

.warm-fill-1 {
    -webkit-animation: warm-fill-1 5s ease-in-out infinite alternate;
    animation: warm-fill-1 5s ease-in-out infinite alternate;
}

.warm-fill-2 {
    -webkit-animation: warm-fill-2 5s ease-in-out infinite alternate;
    animation: warm-fill-2 5s ease-in-out infinite alternate;
}

.gas {
    -webkit-animation: gas 5s ease-in-out infinite alternate;
    animation: gas 5s ease-in-out infinite alternate;
    transform-origin: center;
}

.smile-once {
    -webkit-animation: smile-2 3s ease-in forwards;
    animation: smile-2 3s ease-in forwards;

}

.warm-stroke-1-once {
    -webkit-animation: warm-stroke-1 3s ease-in forwards;
    animation: warm-stroke-1 3s ease-in forwards;
}

.warm-stroke-2-once {
    -webkit-animation: warm-stroke-2 3s ease-in forwards;
    animation: warm-stroke-2 3s ease-in forwards;
}

.warm-stroke-3-once {
    -webkit-animation: warm-stroke-3 3s ease-in forwards;
    animation: warm-stroke-3 3s ease-in forwards;
}

.warm-fill-1-once {
    -webkit-animation: warm-fill-1 3s ease-in forwards;
    animation: warm-fill-1 3s ease-in forwards;
}

.warm-fill-2-once {
    -webkit-animation: warm-fill-2 3s ease-in forwards;
    animation: warm-fill-2 3s ease-in forwards;
}

@-webkit-keyframes warm-stroke-1 {
    0% {
        stroke: #005EB8;
    }

    80% {
        stroke: #EE781A;
    }

    100% {
        stroke: #EE781A;
    }

}

@keyframes warm-stroke-1 {
    0% {

        stroke: #005EB8;
    }

    80% {

        stroke: #EE781A;
    }

    100% {

        stroke: #EE781A;
    }

}

@-webkit-keyframes warm-stroke-2 {
    0% {
        stroke: #8ED8F8;
        stroke-dasharray: 600;
        stroke-dashoffset: 1000;
        opacity: 0;
    }

    80% {
        stroke: #FFDD57;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke: #FFDD57;
        stroke-dashoffset: 0;
        opacity: 1;
    }

}

@keyframes warm-stroke-2 {
    0% {
        stroke: #8ED8F8;
        stroke-dasharray: 600;
        stroke-dashoffset: 1000;
        opacity: 0;
    }

    80% {
        stroke: #FFDD57;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke: #FFDD57;
        stroke-dashoffset: 0;
        opacity: 1;
    }

}

@-webkit-keyframes warm-fill-1 {
    0% {

        fill: #8ED8F8;
    }

    80% {

        fill: #FFDD57;
    }

    100% {

        fill: #FFDD57;
    }

}

@keyframes warm-fill-1 {
    0% {

        fill: #8ED8F8;
    }

    80% {

        fill: #FFDD57;
    }

    100% {

        fill: #FFDD57;
    }

}

@-webkit-keyframes warm-stroke-3 {
    0% {
        stroke: #003C71;
    }

    80% {
        stroke: #EE781A;
    }

    100% {
        stroke: #EE781A;
    }

}

@keyframes warm-stroke-3 {
    0% {
        stroke: #003C71;
    }

    80% {
        stroke: #EE781A;
    }

    100% {
        stroke: #EE781A;
    }

}

@-webkit-keyframes smile {
    0% {
        d: path("M173 217C181 217 188 217 202 217");
        stroke: #003C71;

    }

    80% {
        d: path("M173 213C177.105 218.282 188.652 225.678 202 213");
        stroke: #EE781A;
    }


    100% {
        d: path("M173 213C177.105 218.282 188.652 225.678 202 213");
        stroke: #EE781A;
    }

}

@keyframes smile {
    0% {
        d: path("M173 217C181 217 188 217 202 217");
        stroke: #003C71;

    }

    80% {
        d: path("M173 213C177.105 218.282 188.652 225.678 202 213");
        stroke: #EE781A;
    }


    100% {
        d: path("M173 213C177.105 218.282 188.652 225.678 202 213");
        stroke: #EE781A;
    }

}

@-webkit-keyframes smile-2 {
    0% {
        d: path("M125 218C133 218 140 218 154 218");
        stroke: #003C71;

    }

    80% {
        d: path("M125 218C133 226 146 226 154 218");
        stroke: #EE781A;
    }


    100% {
        d: path("M125 218C133 226 146 226 154 218");
        stroke: #EE781A;
    }

}

@keyframes smile-2 {
    0% {
        d: path("M125 218C133 218 140 218 154 218");
        stroke: #003C71;

    }

    80% {
        d: path("M125 218C133 226 146 226 154 218");
        stroke: #EE781A;
    }


    100% {
        d: path("M125 218C133 226 146 226 154 218");
        stroke: #EE781A;
    }

}

@-webkit-keyframes gas {
    0% {
        -webkit-filter: blur(2px);
        filter: blur(2px);


    }


    100% {
        -webkit-filter: blur(1px);
        filter: blur(1px);

    }

}

@keyframes gas {
    0% {
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }

    100% {
        -webkit-filter: blur(1px);
        filter: blur(1px);
    }

}

/* Reduced animation  */

@media (prefers-reduced-motion: reduce) {
    .smile {
        -webkit-animation: smile 10s ease-in-out infinite alternate;
        animation: smile 10s ease-in-out infinite alternate;

    }

    .warm-stroke-1 {
        -webkit-animation: warm-stroke-1 10s ease-in-out infinite alternate;
        animation: warm-stroke-1 10s ease-in-out infinite alternate;

    }

    .warm-stroke-2 {
        -webkit-animation: warm-stroke-2 10s ease-in-out infinite alternate;
        animation: warm-stroke-2 10s ease-in-out infinite alternate;


    }

    .warm-stroke-3 {
        -webkit-animation: warm-stroke-3 10s ease-in-out infinite alternate;
        animation: warm-stroke-3 10s ease-in-out infinite alternate;

    }

    .warm-fill-1 {
        -webkit-animation: warm-fill-1 10s ease-in-out infinite alternate;
        animation: warm-fill-1 10s ease-in-out infinite alternate;

    }

    .warm-fill-2 {
        -webkit-animation: warm-fill-2 10s ease-in-out infinite alternate;
        animation: warm-fill-2 10s ease-in-out infinite alternate;
    }



    .gas {
        -webkit-animation: gas 10s ease-in-out infinite alternate;
        animation: gas 10s ease-in-out infinite alternate;
        transform-origin: center;

    }


    .smile-once {
        -webkit-animation: smile-2 6s ease-in forwards;
        animation: smile-2 6s ease-in forwards;

    }

    .warm-stroke-1-once {
        -webkit-animation: warm-stroke-1 6s ease-in forwards;
        animation: warm-stroke-1 6s ease-in forwards;

    }

    .warm-stroke-2-once {
        -webkit-animation: warm-stroke-2 6s ease-in forwards;
        animation: warm-stroke-2 6s ease-in forwards;


    }

    .warm-stroke-3-once {
        -webkit-animation: warm-stroke-3 6s ease-in forwards;
        animation: warm-stroke-3 6s ease-in forwards;

    }

    .warm-fill-1-once {
        -webkit-animation: warm-fill-1 6s ease-in forwards;
        animation: warm-fill-1 6s ease-in forwards;

    }

    .warm-fill-2-once {
        -webkit-animation: warm-fill-2 6s ease-in forwards;
        animation: warm-fill-2 6s ease-in forwards;
    }
}

/* End  */

.border50 {
    border-radius: 50%;
}

.new-landmark {
    padding: 5%;
    z-index: 1;
}

.new-landmark article {
    margin: 0 auto;
    max-width: 1440px;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media (min-width: 720px) {
    .new-landmark article {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 2rem;
    }
}

.infomation-box-small {
    display: flex;
    justify-content: first baseline;
    gap: 0.5rem;
}

.infomation-box-small>svg {
    fill: #209CEE !important;
}

/* Modal */

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 3;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 180, 245);
    /* Fallback color */
    background-color: rgba(0, 180, 245, 0.9);
    /* Black w/ opacity */
    -webkit-animation: fadeInDown 0.5s ease-in;
    animation: fadeInDown 0.5s ease-in;
}

.modal-content__headline {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.modal-content__links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
}

.modal-content svg {
    min-width: 32px;
    min-height: 32px;
    display: inline;
    fill: #FF7A00;

}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

.modal-content p {
    max-width: 100%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    width: 32px;
    height: 32px;
    font-weight: bold;
}

.close svg {
    fill: #111518;
}

.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background-color: #002F87;
    border-radius: 50%;
    transition: background-color 0.3s ease-in-out;
}

.close svg:hover {
    fill: #ffffff;
    transition: fill 0.3s ease-in-out;
}

.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background-color: #002F87;
    transition: background-color 0.3s ease-in-out;
}

@media (min-width: 720px) {
    .modal-content__headline {
        flex-direction: row;
    }

    .modal-content__links {
        display: flex;
        gap: 2rem;
        flex-direction: row;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* One off repair animation */

.sad-face {
    -webkit-animation: sadden-face 8s ease-in-out infinite alternate;
    animation: sadden-face 8s ease-in-out infinite alternate;
}

@keyframes sadden-face {
    0% {
        d: path("m121.17,215.43c-2.15-1.91-4.97-6.51-14.61-6.54-8.03-.03-11.22,2.64-15.07,6.54");


    }

    50% {
        d: path("m91.49,208.89c3.85,3.9,7.05,6.58,15.07,6.54,9.64-.04,12.46-4.64,14.61-6.54");

    }


    100% {
        d: path("m121.17,215.43c-2.15-1.91-4.97-6.51-14.61-6.54-8.03-.03-11.22,2.64-15.07,6.54");
    }

}

.sad-to-smile {
    -webkit-animation: sad-to-smile-animation 2s ease-in forwards;
    animation: sad-to-smile-animation 2s ease-in forwards;
}

@keyframes sad-to-smile-animation {
    0% {
        d: path("m129.3,215.01c4.56-3.16,7.15-4.33,13.58-4.33,6.02,0,9.68,1.54,13.58,4.39");
    }

    100% {
        d: path("m129.3,210.74c4.56,3.16,7.15,4.33,13.58,4.33,6.02,0,9.68-1.54,13.58-4.39");
    }

}

.sad-to-smile-repair-and-cover {
    -webkit-animation: sad-to-smile-repair-and-cover 3s ease-in infinite alternate;
    animation: sad-to-smile-repair-and-cover 3s ease-in-out infinite alternate;
}



@keyframes sad-to-smile-repair-and-cover {
    0% {
        d: path("m175.33,216.45c2.61-3.07,8.16-5.19,14.59-5.19s12.05,2.15,14.64,5.25");
    }

    100% {
        d: path("m204.56,211.26c-2.59,3.1-8.21,5.25-14.64,5.25s-11.98-2.12-14.59-5.19");
    }

}

.sad-to-smile-repair-and-cover-confirmation {
    -webkit-animation: sad-to-smile-repair-and-cover-confirmation 2s ease-in forwards;
    animation: sad-to-smile-repair-and-cover-confirmation 2s ease-in forwards;
}


@keyframes sad-to-smile-repair-and-cover-confirmation {
    0% {
        d: path("m123.05,216.45c2.61-3.07,8.16-5.19,14.59-5.19s12.05,2.15,14.64,5.25");
    }

    100% {
        d: path("m152.28,211.26c-2.59,3.1-8.21,5.25-14.64,5.25s-11.98-2.12-14.59-5.19");
    }

}



/* .warm-fill-to-smile {
    -webkit-animation: warm-fill-1 3s ease-in forwards ;
            animation: warm-fill-1 3s ease-in forwards ;
 
}

@keyframes warm-fill-1 {
    0% {
        
        fill: #002b88;
    }
   
    100% {
       
        fill: #FF7A00;
    }
  
} */


#changeFuelTypeWarning {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#changeTimeSlotWarning {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

#changeAddressWarning {
    display: none;
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}



/*  One off electric repair !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


.light-switch-sad-face {
    -webkit-animation: light-switch-sad-face 2s ease-in infinite alternate;
    animation: light-switch-sad-face 2s ease-in-out infinite alternate;
}



@keyframes light-switch-sad-face {
    0% {
        d: path("m169.25,222.69c4.84,5.81,28.94,11.28,41.39,0");
    }

    100% {
        d: path("m169.25,229.26c4.84-5.81,28.94-11.28,41.39,0");
    }

}

.light-switch-sad-face-confirmation {
    -webkit-animation: light-switch-sad-face-confirmation 2s ease-in forwards;
    animation: light-switch-sad-face-confirmation 2s ease-in forwards;
}



@keyframes light-switch-sad-face-confirmation {
    0% {
        d: path("m122.02,213.08c4.21-5.06,25.2-9.83,36.05,0");
    }

    100% {
        d: path("m122.02,213.08c4.21,5.06,25.2,9.83,36.05,0");
    }

}


.label-with-image__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

#electricMoreDetailsTextArea {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

#electricMoreDetailsCTA {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

:host(.inline) .inputter-container:not(.is-single) ::slotted(label) {
    padding: 0.2rem;
}


.ndsn ns-inputter.inline.label-with-image input[type=radio]+label::before,
.ndsn ns-inputter.inline.label-with-image input[type=radio]+label::after {
    top: 3.1em !important;
    left: 1.75em;
}

@media (min-width: 720px) {
    .label-with-image__content {
        justify-content: start;
    }

    .ndsn ns-inputter.inline.label-with-image input[type=radio]+label::before,
    .ndsn ns-inputter.inline.label-with-image input[type=radio]+label::after {
        top: 2.8em !important;
    }
}

#iHaveHomecare,
#triageClaimType,
#triageRepairType,
#triageProductTypeService,
#triageProductTypeRepair,
#triageApplianceType,
#iNeedAHeatRepair,
#iNeedAApplianceRepair,
#triageServiceType,
#iNeedAService,
#triageInstallationType,
#iNeedAInstallation,
#iNeedAElectricalRepair,
#iNeedAHeatingRepair,
#iNeedAPlumbingRepair,
#iNeedACookingRepair,
#iNeedAWashingRepair,
#iNeedARefrigerationRepair,
#iNeedABoilerService,
#iNeedAGasCheckService,
#iNeedAInstallation {
    display: none;
    animation: fadeIn 0.5s ease-in;

}

#greenButton {
    background-color: orange;
}

/* Triage Blue Blue sky !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.ns-visual-button {
    background-color: #fff;
    color: #fff;
    border-radius: 6px;
    padding: 6px 24px 6px 24px;
    font-size: 16px;
    border: 2px solid #004ecc;
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-top: 2rem;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out;
    width: 100%;
    margin: 0 !important;
    text-decoration: none !important;
    height: 96px;
}

.ns-visual-button .h5 {
    margin: 0 !important;
    /* display: flex !important; */

}

.ns-visual-button:hover {
    background-color: #F3F5F7 !important;
}

.ns-visual-button.selected {
    background-color: #004ECC;
    border: 2px solid #002f87;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #004ECC;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s linear;
    width: 100%;
    z-index: 1;
    padding: 6px 24px 6px 24px;
}

.ns-visual-button.selected .h5 {
    margin: 0 !important;
    display: flex;
    color: #fff !important;
}

.ns-visual-button.selected .overlay {
    opacity: 1;
    pointer-events: auto;
}

#showHomeCareQuestionRepair,
#showHomeCareQuestionService,
#listOfAppliances {
    display: none;
    animation: fadeIn 0.5s ease-in;

}

/* Triage Animations */

.triage-animation-container {
    position: relative;
    height: 80px;
    width: 100%;
}

.van,
.spanner-repair {
    position: absolute;
    top: 0;
    left: 0;

}

/* GB Van  animation */


.van-body {
    animation: bounce 3s ease-in-out forwards;
}

.brake {
    animation: brake-light ease-in-out 3s forwards;
}

.drive-1 {
    animation: drive-1 3s ease-in-out forwards;
}

.drive-2 {
    animation: drive-2 3s ease-in forwards;
}

@media (prefers-reduced-motion) {
    .van-body {
        animation: none;
    }

    .brake {
        animation: none;
    }

    .drive-1 {
        animation: none;
    }

    .drive-2 {
        animation: none;
    }
}

@keyframes drive-1 {
    0% {
        transform: translateX(-200px);
    }

    40% {
        transform: translateX(60%);
    }

    70% {
        transform: translateX(60%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes drive-2 {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(2000px);
    }
}

@keyframes drive-3 {
    0% {
        transform: translateX(-200px);
    }

    40% {
        transform: translateX(100%);
    }

    70% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}




@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-2px);
    }

    40% {
        transform: translateY(1px);
    }

    50% {
        transform: translateY(0px);
    }

    70% {
        transform: translateY(-1px);
    }

    80% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes brake-light {
    0% {
        fill: #D50032;
    }

    50% {
        fill: #D50032;
    }

    70% {
        fill: #FFF5EB;
    }

    95% {
        fill: #FFF5EB;
    }

    100% {
        fill: #D50032;
    }
}

/* Repairs spanner animation */

.spanner-repair {
    overflow: visible;
}

.spanner {
    animation: spanner 4s ease-in-out forwards;
}

.spanner-bolt {
    animation: spanner-bolt 4s ease-in-out forwards;
    transform-origin: 101px 29px;
}

.bolt {
    animation: bolt 8s ease-in-out forwards;
    transform-origin: 101px 29px;
}

.spanner-leak {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: spanner-leak 2s ease-in-out forwards;
    animation-delay: 4s;
}

@keyframes spanner {
    0% {
        transform: translateX(-200px);
    }

    20% {
        transform: translateX(0px);
    }

    40% {
        transform: translateX(0px);
    }

    60% {
        transform: translateX(-8px);
    }

    80% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0px);
    }

}

@keyframes spanner-bolt {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(26deg);
    }

    60% {
        transform: rotate(26deg);
    }

    80% {
        transform: rotate(26deg);
    }

    100% {
        transform: rotate(-27deg);
    }
}



@keyframes spanner-leak {
    from {
        stroke-dashoffset: 1200;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion) {
    .spanner-repair {
        overflow: visible;
    }

    .spanner {
        animation: none;
    }

    .spanner-bolt {
        animation: none;

    }

    .bolt {
        animation: none;
    }

    .spanner-leak {
        animation: none;
    }
}

/* Services checklist animation */



.tick-1 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ticking-list 2s ease-in forwards;
    animation-delay: 1s;
}

.tick-2 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ticking-list 2s ease-in forwards;
    animation-delay: 1.5s;
}

.tick-3 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ticking-list 2s ease-in forwards;
    animation-delay: 2s;
}

.tick-board {
    animation: tick-board 1s ease-in forwards;
}

.service-checklist-animation {
    overflow: visible;
}

@media (prefers-reduced-motion) {
    .tick-1 {
        animation: none;
    }

    .tick-2 {
        animation: none;
    }

    .tick-3 {
        animation: none;
    }

    .tick-board {
        animation: none;
    }
}



@keyframes ticking-list {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes tick-board {
    0% {
        transform: translateX(-200px) rotate(-32deg);

    }

    100% {
        transform: translateX(0px) rotate(0deg);
    }
}

/* Installation badge animation */

/* .install-badge {} */

.install-badge-house {

    animation: install-badge-house 2s ease-in-out forwards;
    transform-origin: center center;

}

.install-badge-tick {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: install-badge-tick 2s ease-in-out forwards;
    animation-delay: 3s;
}

.install-badge-boiler {
    animation: install-badge-boiler 2s ease-in-out forwards;
    transform-origin: center center;
    animation-delay: 1s;
}

@media (prefers-reduced-motion) {
    .install-badge-house {
        display: none;
    }

    .install-badge-tick {
        display: none;
    }
}

@keyframes install-badge-boiler {
    0% {
        transform: scale(1);

    }

    80% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes install-badge-house {
    from {
        transform: scale(0);
        display: block;
    }

    to {
        transform: scale(1);

    }
}

@keyframes install-badge-tick {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.service-include {
    background-color: #00A33E;
    /* border-radius: 8px;  */
    padding: 5%;
}

/* .service-include h2 {} */

@media (min-width: 720px) {
    .icon-list-first-child {
        margin-top: 1em !important;
    }
}

.icon-list {
    display: flex;
    gap: 1em;
    margin-top: 0.5em;
}

/* Product page progress bar */


.process-container {
    width: 100%;

}

.process-van {
    position: absolute;
    top: -44px;
    right: 0;
    width: 63px;
    height: 32px;
}


.process-van-body {
    animation: bounce 6s ease-in-out infinite;
}

.process-bar-line {
    position: relative;
    width: 78%;
    height: 6px;
    border-radius: 3px;
    background: #47B6FF;
    bottom: 96px;
    left: 12%;
    z-index: 0;
}



.process-bar-line-progress {
    width: 0;
    height: 100%;
    background: #005EB8;
    position: absolute;
    border-radius: 3px;
    left: 0;
    bottom: 0;
    z-index: 1;
    transition: width 2s ease-in-out;
}

.process-bar {
    display: flex;
    justify-content: space-between;
    max-width: 100% !important;
    align-items: flex-start;
    flex-direction: row;
    gap: 2em;

}

.process-bar-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    width: 74px;
}

.process-bar-item p span.h5 {
    margin-bottom: 0 !important;
}

.process-bar-item svg {
    width: 48px;
    height: 48px;
    /* z-index: -2; */
}

.process-bar-item p {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 0.8em;
}

.process-bar-item p .process-number {
    background-color: #47B6FF;
    border: 4px solid #005EB8;
    padding: 0.3em 0.8em;
    border-radius: 50%;
    color: #005EB8;
    margin: 0.5em;
    z-index: 3;
    position: relative;
}

@media (min-width: 480px) {
    .process-bar-line {
        bottom: 82px;

    }

    .process-bar-item {

        width: auto;
    }

    .process-bar-line-progress {
        transition: width 2s ease-in-out;
    }

}

@media (min-width: 720px) {
    .process-container {
        width: 80%;

    }

    .process-bar-line {
        bottom: 86px;
        width: 100%;
        left: 0%;
    }

    .process-bar-item svg {
        width: 56px;
        height: 56px;

    }

    .process-van {
        top: -52px;
        right: 10px;
        width: 80px;
        height: 40px;
    }

    .process-bar-line-progress {
        transition: width 3s ease-in-out;
    }
}

@media (min-width: 900px) {

    .process-bar-line {
        bottom: 84px;
    }

    .process-bar-line-progress {
        transition: width 4s ease-in-out;
    }
}

@media (min-width: 1079px) {

    .process-bar-line-progress {
        transition: width 5s ease-in-out;
    }

}


/* Engineer block */



.engineer-says {
    background-color: #47B6FF;
    border-radius: 8px !important;
    display: grid;
    position: relative;
    grid-template-columns: 1fr;

}

.engineer-says-image {
    display: flex;
    justify-content: center;
    margin: 0% 5% 0% 5%;
}

.engineer-says-text { padding: 5% 5% 0% 5%; }

.engineer-says-image figure {
    position: relative;
    width: 90%;
    margin: 0;
    display: flex;
    justify-content: center;
}

.engineer-says-image img {
    width: 100%;
}

.engineer-says-image figcaption {
    position: absolute;
    bottom: 12px;
    color: #fff !important;
    margin: 0 !important;

}


@media (min-width: 719px) {
    .engineer-says-image img {
        width: 336px;
        height: 387px;

    }

    .process-bar-item svg {
        width: 76px;
        height: 76px;

    }


}

@media (min-width: 1079px) {
    .engineer-says {
        grid-template-columns: 1fr 1fr;
    }

    .engineer-says-image {
        display: flex;
        justify-content: center;
        margin: 5% 5% 0% 5%;
    }

    .engineer-says-text {
        padding: 5%;
    }
}


/* British gas why use us stats */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3em;

    margin-bottom: 5%;
    color: #fff;

}

@media (min-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (min-width: 720px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* Uk animation - ignore this  */
.uk-map-container {
    display: flex;
    justify-content: center;
    height: 100%;
}

.uk-map {
    width: 50%;
    text-align: center;
    overflow: visible;
}

@keyframes moveVan {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(10px, 30px);
    }

    20% {
        transform: translate(30px, 50px);
    }

    30% {
        transform: translate(50px, 80px);
    }

    40% {
        transform: translate(80px, 70px);
    }

    50% {
        transform: translate(40px, 100px);
    }

    60% {
        transform: translate(20px, 120px);
    }

    70% {
        transform: translate(30px, 140px);
    }

    80% {
        transform: translate(20px, 200px);
    }

    90% {
        transform: translate(40px, 230px);
    }

    100% {
        transform: translate(10px, 250px);
    }
}

.uk-map-van {
    animation: moveVan 10s infinite;
}

.product-hero-animation-container {
    position: relative;
    height: 72px;
    width: 100%;
}

.product-cta-animation-container {
    position: relative;
    height: 48px;
    width: 100%;
}

.product-van-drive {
    animation: drive-2 3s ease-in forwards;
}

@keyframes drive-product-page {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(2000px);
    }
}

/* Partner logos  */

.partner-logo {
    margin: 2em 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
}

@media (min-width: 480px) {
    .partner-logo { grid-template-columns: 1fr 1fr 1fr; }
}

@media (min-width: 720px) {
    .partner-logo { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}

/* Comparison table ignore this */

.comparison-table {
    width: 100%;
}

@media (min-width: 720px) {
    .comparison-table {
        width: 66%;
    }
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.content.show {
    max-height: 500px;
    /* Set an appropriate max-height */
}


.toggleIcon {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.rotateUp {
    transform: rotate(180deg);
}


.comparison-table {
    background-color: #fff;
}



/* Sale flash  */

.sale-flash {
    background-color: #D50032;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 5%;
    padding-right: 5%;
}

.sale-flash p { margin: 0 !important; }

.sale-flash-content {
    display: flex;
    color: #fff;
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

@media(min-width: 1620px) {
    .sale-flash-content { 
        max-width: 1440px;
        margin: 0 auto;
    }
}

/* Trust pilot thing  */


.trust-pilot {

    display: flex;
    justify-content: baseline;
    align-items: flex-end;
    gap: 1em;
    font-size: 1rem !important;
    color: white !important;
}

.trust-pilot img {
    margin-top: 1em !important;
    width: 140px;
    height: auto;
}

.inner-panel {
    border-radius: 8px;
    padding: 5%;
}

.lime-decoration {
    background-color: rgb(127, 204, 0);
}

/* new Comparison table  */

.comparison-table-border-right {
    border-right: none;
}

.comparison-table-border-right-block {
    border-right: 1px solid #F3F5F7;
}

.comparison-table-border-right-alternative {
    border-right: none;
}

.comparison-table-max-width {
    max-width: 100% !important;
}

.comparison-table-text-center {
    text-align: center;
}

.comparison-table-padding-large {
    padding: 16px;
}

.comparison-table-row-alternative {
    background-color: #F3F5F7;
}

.comparison-table-row-alternative-mobile {
    background-color: #FFF;
}

.comparison-table-tableContainer {
    width: 100%;
}

.comparison-table-border-top-left-radius {
    border-top-left-radius: 8px !important;
}

.comparison-table-border-top-right-radius {
    border-top-right-radius: 8px;
}

.comparison-table-border-bottom-left-radius {
    border-bottom-left-radius: 8px;
}

.comparison-table-border-bottom-right-radius {
    border-bottom-right-radius: 8px;
}

.comparison-table-sale {
    background-color: #D50032 !important;
    color: #FFF !important;
}

.comparison-table-sale .h5 {
    color: #FFF !important;
    margin-bottom: 0.25em !important;
}

.comparison-table-sale-with-border { border-bottom: 1px solid #F3F5F7; }

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    text-align: center;
    padding: 8px;
    min-width: 100px;
    background: #ffffff;
}

td, th {
    padding: 16px;
}

td {
    width: 50%;
}

th span, th span.h5 {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center;
    max-width: 100% !important;
    text-align: center !important;
    color: #111518 !important;
}

th .h4 {
    margin-bottom: 0 !important;

}

.comparison-table-border-right {
    border-right: 1px solid #F3F5F7;
}

.comparison-table-alternative-theme {
    background-color: #004ECC !important;
    color: #ffffff !important;
}

.comparison-table-border-right-alternative {
    border-right: 1px solid #F3F5F7;
}

.comparison-table-mobileColumnGroup th {
    background-color: #F3F5F7;

}

@media(min-width: 1020px) {
    .comparison-table-mobileColumnGroup {
        display: none;
    }

    .comparison-table-text-alignment {
        text-align: center !important;
    }

    .comparison-table-border-right-alternative {
        border-right: 1px solid #fff;
    }

    .comparison-table-row-alternative-mobile {
        background-color: #F3F5F7;
    }

    .comparison-table-tableContainer {
        width: 66%;
    }

    td, th {
        padding: 24px;
        text-align: left;
    }

    td {
        width: 28%;
    }

    th span, th span.h5 {
        justify-content: flex-start;
        text-align: left !important;
  }

}

@media(max-width: 1020px) {

    .comparison-table-rowHeader,
    .comparison-table-emptyCell {
        display: none;
    }
}


/* Valley mock up with theme */

.ns-prototype-valley {
    display: grid;
    margin-right: auto;
    margin-left: auto;
    justify-self: center;
    max-width: 1440px;
    grid-template-rows: repeat(2, auto);
}

.ns-prototype-valley-image { order: 1; }

.ns-prototype-valley-content { order: 2; }

@media (min-width: 720px) {
    /* .ns-prototype-valley {} */
}

@media (min-width: 1079px) {
    .ns-prototype-valley {

        grid-template-columns: 60% 40%;
    }

    .ns-prototype-valley-image {
        order: 2;
    }

    .ns-prototype-valley-content {
        order: 1;
    }
}

/* Dark button css */

.darkmode-button  {
    color: rgb(0, 47, 135) !important;
    background-color: rgb(255, 255, 255) !important;
    border: 0.125rem solid rgb(255, 255, 255) !important;
    font-size: 1em;
    letter-spacing: normal;
    font-family: "Centrica Stabil Grotesk Medium", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: calc(0.625rem) calc(0.875rem) calc(0.625rem) calc(1.125rem);
    display: inline-flex;
    cursor: pointer;
    border-radius: 0.25rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.darkmode-button:hover  { background-color: rgb(211, 211, 211) !important; }

.darkmode-button svg  {
    transition: transform 0.3s ease;
    transform: translateX(0);
}

.darkmode-button:hover svg  { transform: translateX(4px); }

.darkmode-button-arrow-right {
    width: 28px;
    height: 28px;
    fill: #002F87;
    margin-left: 0.5rem;
    transform: translateX(0);
}

@media (min-width: 720px) {

  .darkmode-button {
    font-size: 1.125em;
    letter-spacing: normal;
    line-height: 1.5;
    margin-bottom: 0px;
  }

}

/* Round corners of image */

.rounded-corners { border-radius: 8px !important; }

/* Yusaf's css */

.center-text { text-align: center; }

.blue-icons { color: #0093F5; }

.blue-icon-text {
    color: #002F87; 
    max-width: 100%;
}

.red-text { color: #D50032; }