/* Do a find and replace on the variable names and replace with the required colour */
/* eg. replace --banner-background-color with rgba(158, 157, 113, 0.3) */
/* Note the existing colours on this page are examples and are from the Tidbinbilla site */

/* --banner-background-color: rgba(158, 157, 113, 0.3);
  --hover-color: rgba(240, 243, 245, 1);
  --accent-color: rgba(51, 48, 146, 1);
  --accent--hover-color: rgba(51, 48, 146, .91);

  These are for use when custom banner colours are used
  --gradient-left: rgba(158, 157, 113, 0.3);
  --gradient-right: rgba(163, 168, 107, 1);



/* ! This next section is for use when custom banner colours are used */
/* Start gradient banner*  */
/* Uncomment the two css rules below when required */
/* Change the value of 'gradient-***-custom' below, where *** can be any value but should generally be the site name (eg. gradient-tidbinbilla-custom) */
/* This value must then be entered at 'SPF *.*.* - Master' (design customisation file) -> 'template_options' (Design Area) ->breadcrumbs_banner_colour (Declared Variables field) */

/* .spf-body .spf-text-banner.spf-text-banner--gradient-planning-custom {
  background: linear-gradient(to right, --gradient-left, --gradient-right);
  color: #f0f3f5;
}

.spf-body .spf-text-banner.spf-text-banner--gradient-planning-custom a,
.spf-body .spf-text-banner.spf-text-banner--gradient-planning-custom span {
  color: #f0f3f5;
} */

/* End gradient banner*  */


/*Start accent colour overrides SC*/

.kss-modifier__example a,
.uikit-body a {
  border-bottom: solid 1px rgba(51, 48, 146, 1);
}

/* ! Removed from above to keep breadcrumb link border-bottom white */
/* .spf-body .uikit-breadcrumbs .home,
.spf-body .uikit-breadcrumbs a */

.ie8 .kss-modifier__example a[rel~="external"]:after,
.ie8 .uikit-body a[rel~="external"]:after,
.lt-ie8 .kss-modifier__example a[rel~="external"]:after,
.lt-ie8 .uikit-body a[rel~="external"]:after,
.spf-body .spf-tile span.icon,
.spf-download-link::after,
.spf-body .spf-side-nav--first .spf-side-nav--second > li > a::after,
.spf-body .spf-side-nav--first > a::after {
  color: rgba(51, 48, 146, 1);
}

.kss-modifier__example kbd,
.uikit-body kbd {
  border: solid 1px rgba(51, 48, 146, 1);
  box-shadow: 0 1px 0 0 rgba(51, 48, 146, 1);
}

.uikit-btn,
.palette__color--primary,
.contrast-box--primary,
.colorbox__colour-Primary,
.spf-body .spf-text-banner.spf-text-banner--primary,
.spf-body .spf-table > thead > tr > th,
.spf-body table > thead > tr > th,
.spf-body table > tbody > tr > th,
.spf-body .spf-block .spf-block--title,
.spf-body .spf-key-tasks-icon-set,
.spf-body .mobile-menu-button,
.spf-body input[type="button"],
.spf-body input[type="submit"],
.spf-body input[type="reset"] {
  background-color: rgba(51, 48, 146, 1);
}

.uikit-btn--tertiary {
  border: 1px solid rgba(51, 48, 146, 1);
}

.uikit-callout {
  border-left: 6px solid rgba(51, 48, 146, 1);
}

.uikit-header {
  background: rgba(51, 48, 146, 1);
}

.uikit-tags__item,
.spf-body .spf-tabs-menu hr,
.spf-top-nav hr,
.spf-body .spf-sub-nav hr {
  border: 1px solid rgba(51, 48, 146, 1);
}

.palette__color--primary:after,
.colorbox__colour-Primary > span:after {
  content: "Primary: rgba(51, 48, 146, 1)";
}

.spf-body .spf-tile,
.spf-body.kss-modifier__example .spf-pagination .uikit-link-list > li:active,
.spf-body.kss-modifier__example .spf-pagination .uikit-link-list > li:hover,
.spf-body.uikit-body .spf-pagination .uikit-link-list > li:active,
.spf-body.uikit-body .spf-pagination .uikit-link-list > li:hover,
.spf-body .spf-block,
.spf-top-nav-mobile .spf-top-nav-mobile--item,
.spf-top-nav-mobile .spf-top-nav-mobile--title,
.spf-top-nav-mobile
  .spf-top-nav-mobile--items
  .spf-top-nav-mobile--item:last-child,
.spf-body .spf-tabs-content,
.spf-body .spf-side-nav--first,
.spf-body .spf-side-nav--first .spf-side-nav--second > li,
.spf-body .spf-side-nav--first .spf-side-nav--second > li,
.spf-body
  .spf-side-nav--first
  .spf-side-nav--second
  > li
  .spf-side-nav--second
  > li:first-child,
.spf-body .spf-side-nav--first .spf-side-nav--second > li:first-child,
.primary-nav ul a:hover,
.local-nav ul a:hover,
.primary-nav ul a:active,
.local-nav ul a:active {
  border-color: rgba(51, 48, 146, 1);
}

.spf-body .spf-search-box .spf-group-element,
.spf-body .spf-search-box .spf-group-element:first-child,
.spf-body .spf-search-box .spf-group-element:last-child {
  border: solid 2px rgba(51, 48, 146, 1);
}

.spf-body .spf-tabs-menu .uikit-link-list > li a:active,
.spf-body .spf-tabs-menu .uikit-link-list > li a:hover,
.spf-top-nav .uikit-link-list > li a:active,
.spf-top-nav .uikit-link-list > li a:hover,
.spf-body
  .spf-tabs-menu
  .uikit-link-list
  > .spf-tabs-menu---item-wrapper
  > .spf-tabs-menu---item
  .active:hover,
.spf-body
  .spf-tabs-menu
  .uikit-link-list
  > .spf-tabs-menu---item-wrapper
  > .spf-tabs-menu---item:hover {
  border-bottom: solid 4px rgba(51, 48, 146, 1);
}

.spf-top-nav-mobile
  .spf-top-nav-mobile--items
  .spf-top-nav-mobile--item
  > a:active,
.spf-top-nav-mobile
  .spf-top-nav-mobile--items
  .spf-top-nav-mobile--item
  > a:focus,
.spf-top-nav-mobile
  .spf-top-nav-mobile--items
  .spf-top-nav-mobile--item
  > a:hover {
  border-left-color: rgba(51, 48, 146, 1);
}

.spf-body
  .spf-tabs-menu
  .uikit-link-list
  > .spf-tabs-menu---item-wrapper
  > .spf-tabs-menu---item {
  border-top-color: rgba(51, 48, 146, 1);
  border-right-color: rgba(51, 48, 146, 1);
}

.spf-body
  .spf-tabs-menu
  .uikit-link-list
  > .spf-tabs-menu---item-wrapper:first-child
  > .spf-tabs-menu---item {
  border-left-color: rgba(51, 48, 146, 1);
}

.spf-body .spf-side-nav--first .spf-side-nav--second > li:first-child,
.spf-body .spf-side-nav--first:first-child {
  border-top-color: rgba(51, 48, 146, 1);
}

.spf-body .spf-side-nav--first .spf-side-nav--second > li > a:active,
.spf-body .spf-side-nav--first .spf-side-nav--second > li > a:focus,
.spf-body .spf-side-nav--first .spf-side-nav--second > li > a:hover,
.spf-body .spf-side-nav--first > a:active,
.spf-body .spf-side-nav--first > a:focus,
.spf-body .spf-side-nav--first > a:hover,
.spf-body .spf-side-nav--first .spf-side-nav--second > li.open > a,
.spf-body .spf-side-nav--first.open > a {
  border-left: solid 0.48em rgba(51, 48, 146, 1);
}

/* End accent colour overrides */

/* Start accent hover colour overrides SC */
.uikit-btn:focus,
.uikit-btn:hover,
.mobile-menu-button:hover,
/*.spf-body .spf-key-tasks-icon-set .spf-key-tasks-icon-set--task:hover,*/
.spf-body .mobile-menu-button:hover,
.spf-body input[type="button"]:hover,
.spf-body input[type="submit"]:hover,
.spf-body input[type="reset"]:hover {
  background-color: rgba(51, 48, 146, .91);
}

/* End accent hover colour overrides */

/* Start hover colour overrides SC */
.kss-modifier__example a:focus,
.kss-modifier__example a:hover,
.uikit-body a:focus,
.uikit-body a:hover,
.spf-top-nav ul.uikit-link-list li ul li:hover,
.uikit-body .spf-top-nav .uikit-link-list ul li a:focus,
.uikit-body
  .spf-top-nav
  .uikit-link-list
  ul
  li
  a:hover
  .uikit-link-list.uikit-link-list--inverted
  > li
  > a:focus,
.uikit-link-list.uikit-link-list--inverted > li > a:hover,
.uikit-skip-link__link:active,
.uikit-skip-link__link:focus,
.uikit-tags__item > a:focus,
.uikit-tags__item > a:hover,
.spf-body .spf-tile:hover,
.spf-body.kss-modifier__example .spf-pagination .uikit-link-list > li:active,
.spf-body.kss-modifier__example .spf-pagination .uikit-link-list > li:hover,
.spf-body.uikit-body .spf-pagination .uikit-link-list > li:active,
.spf-body.uikit-body .spf-pagination .uikit-link-list > li:hover {
  background-color: rgba(240, 243, 245, 1);
}

/*.spf-body .spf-key-task .spf-key-tasks--title > a,*/
.spf-body .spf-key-task .spf-key-tasks--title > a:active,
.spf-body .spf-key-task .spf-key-tasks--title > a:focus,
.spf-body .spf-key-task .spf-key-tasks--title > a:hover,
.spf-top-nav ul.uikit-link-list li ul li a:hover,
.spf-top-nav ul.uikit-link-list li ul li:hover,
.spf-side-nav ul li.spf-side-nav--first:hover {
    color:#313131;
  background-color: rgba(240, 243, 245, 1);
}

/* End hover colour overrides */