While trying to automate my application, one of the webpage has three toggle button and i need to select the same.

Below the HTML code:

```
 <div class="row">
                        <div class="col-md-12 ">
                            <label class="control-label dl-padding-top-5" for="consentToBureau">Do you give consent for Capitec to do a credit bureau enquiry?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" checked="checked" value="false" name="consentToBureau" id="BureauConcentInput" required="" onchange="hideErrorById('BureauConcent')" class="dl-border-red">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                            <span class="col-md-12 dl-error-msg dl-top-border-red" id="BureauConcentError">Tick to accept the Bureau Concent</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label class="control-label dl-padding-top-5" for="acceptTerms">Do you accept these terms of use?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" checked="checked" name="acceptTerms" id="TermsAndConditionsInput" required="" onchange="hideErrorById('TermsAndConditions')" class="dl-border-red">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                            <span class="col-md-12 dl-error-msg dl-top-border-red" id="TermsAndConditionsError" style="">Tick to accept the term of use</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label class="control-label dl-padding-top-5">Salary paid into Capitec account?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" name="CapitecClient" id="isCapitecClientInput" required="" onchange="hideError(this)">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                        </div>
                    </div> 

```

The click on the each toggle button lands on span class="pull-right dl-padding-top-5" but this class is similar for all three toggle buttons. But each toggle button has unique 'for' attribute and ID.

Below is the code tried but getting error as unable to locate element.

```
IWebElement Toggle = driver.FindElement(By.CssSelector("input[id='BureauConcentInput']>span[class='dl-slider dl-round']"));
            Toggle.Click();
(or)
            IWebElement Toggle = driver.FindElement(By.XPath("//*[@id='BureauConcentInput']/span"));
            Toggle.Click();

```

Kindly suggest the right way to locate the element.