.bi-info-circle-fill::before {    
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23005dff' xmlns='http://www.w3.org/2000/svg'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2' /></svg>");
}

.text-heading {
    color: var(--black); /*Colour 1 - main colour for background and titles*/
}

a, #content h1, #content ul, .col h4, .box table th, .form .row label, .step .row label,
.form .row .area a, .tabset .active p, .tabset a p:hover, .box.small-print .holder .subTitle, .box .term p a {
    color: var(--black); /*Colour 1 - main colour for background and titles*/
}

.nav .active a, .nav a:hover, .heading, .paging ul a:hover, .paging ul span {
    background-color: var(--black); /*Colour 1 - main colour for background and titles*/
}

.h1:after {
    background-color: var(--black);
}

#nav .active a, #nav a:hover {
    /*Colour 2 - active and hover of items in the left menu (subnavigation) - slightly lighter than colour 1*/
    background: var(--grey1);
    color: var(--black);
}

    #nav .active a:after {
        border-left-color: var(--black);
    }

.nav a {
    /*Colour 3 - items not selected in the top menu */
    background: var(--blue1);
}

.box .container-fluid {
    border: none;
    background: var(--grey1);
}

.bg-box {
    background: var(--grey1);
}

.lightBox .container-fluid  {
    border: none;
    background: -moz-linear-gradient(top, var(--white) 0%, var(--grey3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--white)), color-stop(100%,var(--grey3)));
    background: -webkit-linear-gradient(top, var(--white) 0%,var(--grey3) 100%);
    background: -o-linear-gradient(top, var(--white) 0%,var(--grey3) 100%);
    background: linear-gradient(to bottom, var(--white) 0%,var(--grey3) 100%);
    border-radius: 6px;
}


.tabset .active p, .tabset a p:hover, .tabset .active p:after, .tabset a p:hover:after, .btn, .buttons .area button,
.form .row input[type="submit"], .step .row input[type="submit"], .form .row input[type="button"],
.step .row input[type="button"], .step button, .navigateButton, .buttonStyle, .registration-breadcrumb-circle.active  {
    background-color: var(--blue1); /*Colour 3 - the second main colour: for buttons, hover and active steps in the registration*/
}


    .btn:hover, .buttons .area button:hover, .navigateButton:hover, .buttonStyle:hover, .form .row input[type="submit"]:hover, .step .row input[type="submit"]:hover,
    .form .row input[type="button"]:hover, .step .row input[type="button"]:hover, .step button:hover {
        /*Colour 1 - hover of the buttons*/
        background: var(--black);
    }

.buttons .area button, .btn, .form .row .area a.btn, .form .row input[type="submit"], .step .row input[type="submit"], .form .row input[type="button"],
.step .row input[type="button"], .step button, .navigateButton, .col .btn, .buttonStyle {
    color: var(--white); /*Colour 4 - text colour for the buttons*/
    border-radius: 500px;
}


/* Overwrite Bootstrap Button Primary Styling for Colours and Shadows  */
.btn-primary, .btn-primary:disabled  {
    color: var(--white);
    background-color: var(--blue1);
    border-color: var(--blue1);
    border-radius: 500px;
    border: 0;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus{
    color: var(--white);
    background-color: var(--black);
    border-color: var(--blue1);
}

.btn-primary:focus {
    outline: 0;
    box-shadow: none;
}

.btn-primary.active:focus, .btn-primary:active:focus {
    box-shadow: none;
}

.btn-primary:hover {
    color: var(--white);
    border-color: var(--blue1);
    background: var(--black);
}
/* Overwrite Bootstrap Button Primary Styling END */

.yesNoRadioInput + label {
    background-color: white;
    color: black;
    border-color: var(--black);
  }

  .yesNoRadioInput + label:hover {
    color: var(--white);
  }

  .yesNoRadioInput:checked + label {
    background-color: var(--blue1);
    color: var(--white);
    cursor: default !important;
  }

  .bg-lightbox {
    background: -moz-linear-gradient(top, var(--white) 0%, var(--grey3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--white)), color-stop(100%,var(--grey3)));
    background: -webkit-linear-gradient(top, var(--white) 0%,var(--grey3) 100%);
    background: -o-linear-gradient(top, var(--white) 0%,var(--grey3) 100%);
    background: linear-gradient(to bottom, var(--white) 0%,var(--grey3) 100%);
}