﻿
.bi-info-circle-fill::before {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%230079C7' 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(--blue2); /*Colour 1 - main colour for background and titles*/
}

a, #content h1, #content h3, .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, p a, .forminstruct p a,
.headerContainer .headerTitle, #attributeVerification label {
    color: var(--blue2); /*Colour 1 - main colour for background and titles*/
}


.nav .active a, .nav a:hover, .heading, #nav, .paging ul a:hover, .paging ul span {
    background-color: var(--blue2); /*Colour 1 - main colour for background and titles*/
}

#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(--blue3);
}

.nav a {
    /*Colour 3 - items not selected in the top menu - slightly lighter than colour 1 and colour 2*/
    background: var(--blue4);
}


.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(--blue2); /*Colour 4 - 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 5 - hover of the buttons (slightly lighter than colour 4)*/
    background: var(--blue3);
}

.btn:hover {
    color: var(--white);
}

.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, .buttonStyle {
    color: var(--white); /*Colour 6 - text colour for the buttons*/
    border-radius: 10px;
}

/* Overwrite Bootstrap Button Primary Styling for Colours and Shadows  */
.btn-primary, .btn-primary:disabled {
    color: var(--white);
    background-color: var(--blue2);
    border-color: var(--blue2);
    border-radius: 10px;
    border: 0;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus {
    color: var(--white);
    background-color: var(--blue3);
    border-color: var(--blue2);
}

.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(--blue2);
    background: var(--blue3);
}
/* Overwrite Bootstrap Button Primary Styling END */


.box .container-fluid, .tab-content {
    position: relative;
    border-radius: 6px;
    background: var(--white) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    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%);
}

.bg-box {
    background: var(--white) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    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%);
}


#attributeVerification .yesNoRadioInput + label {
    background-color: unset;
    color: var(--blue2);
    border-color: var(--blue2);
  }

  #attributeVerification .yesNoRadioInput + label:hover {
    color: var(--white);
    background-color: var(--blue3);
  }

  #attributeVerification .yesNoRadioInput:checked + label {
    background-color: var(--blue2);
    color: var(--white);
    cursor: default !important;
  }

