@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700); 
@font-face {
    font-family: VersusArthritis;
    src: url(/VersusArthritis-Display.ttf) format("truetype"),url(/vsarAssets/fonts/VersusArthritis-Display.woff) format("woff");
    font-weight: 400;
    font-style: normal
}


.bricolage-grotesque {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.tab-title {
    display: none;
}

html
{
    font-size: 10px
}

body {
    color: #333;
    /*font: 400 1.9rem/3.04rem Roboto,sans-serif*/
    font: 400 1.9rem/1.9rem Roboto,sans-serif
}

a,button,h1,h2,h3,h4,h5,h6,p,span {
    overflow-wrap: break-word
}

a[href^="mailto:"]
{
    text-decoration: underline !important;
}

.static-top.navbar-dark {
	background-color: #A00050;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a {
    display: block;
    position: relative;
    padding: 1rem 1rem;
    color: #fff;
    font: normal 2.8rem / 2.52rem Bricolage Grotesque, sans-serif;
    font-weight: 600px;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    overflow: hidden;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a:hover{
    background-color: none;
}

/*Sets the background of the items and dropdown items to black*/
.navbar-dark .navbar-nav .show {
    background-color: #A00050 !important;
    color: #fff !important;
}

/*Sets the dropdoan items underneath the login or user name to black font on white, on hover (but also everything else)*/
/*a:not(.btn):hover {
    color: #000 !important;
    text-decoration: underline !important;
}*/

.navbar-dark .navbar-nav > li > a:hover {
    color: #fff;
    background-color: #A00050;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /*height: 136px;*/
    min-height: 91px;
    padding: 2rem !important;
    background-color: #A00050;
    color: #fff;
    z-index: 11;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.navbar {
    min-height: 50px !important; /* Adjust as needed */
    margin-bottom: 0px !important;
}

.navbar-nav > li > a {
    padding-top: 10px !important; /* Adjust as needed */
    padding-bottom: 10px !important;
}

.navbar-brand {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: 50px !important;
}

.navbar-collapse style {
    width: min-content;
    max-height: 100%;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

/* Logo in the Nav Bar */
.navbar-brand img {
    height: 48px !important;
}

/*Drop down menu - hoving over the for profile dropdown*/
.static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
    background-color:#A00050 !important;
}

/*Drop down menu - the focus on the navbar links after selecting*/
.static-top.navbar .menu-bar > .navbar-nav > li > a:focus {
    /* background-color:#000 !important; */
    text-decoration: underline !important;
    outline: none;
}

/*Dropdown menu - items under profile dropdown*/
.navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover, .navbar-dark .navbar-nav .show.dropdown-menu > li > a:focus .navbar-dark .navbar-nav .show.dropdown-menu > .active > a, .navbar-dark .navbar-nav .show.dropdown-menu > .active > a:hover, .navbar-dark .navbar-nav .show.dropdown-menu > .active > a:focus {
    background-color: #A00050 !important;
    color: #fff !important;
    font-weight: bold;
}

/*Menu Burger normal colour on page when unselected*/
.navbar-dark .navbar-toggler {
    border: 0;
    background-color: #ffffff;
    border-radius: 300px;
}

.navbar-toggle-icon {
    color: #A00050;
    padding: 12px;
}

/*Menu Burger - collapsed menu on hover - CHANGE COLOUR*/
.navbar-dark .navbar-toggler:hover {
    background-color: #E0E231 !important;
    font-weight: bold !important;
}

/*Menu burger collapsed menu when selected - CHANGE COLOUR*/
.navbar-dark .navbar-toggler:focus {
    background-color: #E0E231 !important;
    font-weight: bold;
}

/*Sets colour of the selected radio buttons*/
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
    accent-color: #000;
}

/*Date on hover*/
.bootstrap-datetimepicker-widget tr td.active:hover button {
    background-color: #A00050 !important;
}

/*Selected Date*/
.bootstrap-datetimepicker-widget tr td.active button {
    color: #fff !important;
    background-color:#A00050;
}

/*Extra bit of colour round the edge of the date number, on top of the background of selected date*/
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #A00050;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

/*Border around the focused field */
.form-select:focus {
    border-color: #A00050;
    /*box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);*/
}

/*Active Page numbers at the bottom of a list*/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: #000000!important;
    color: #fff !important;
    font-size: 1.4rem;
}

/*Inactive page numbers at the bottom of a list*/
.pagination .page-link {
    color: #000;
    font-size: 1.4rem;
}

/*Fonts Desktop */

.title {
    color: #000 !important;
    font: normal 7rem/2.52rem Bricolage Grotesque,sans-serif;
}

.title a:hover, a:focus {
    color: #A00050;
    text-decoration: underline;
}

h1 {
    font: normal 7rem/6.2rem Bricolage Grotesque,sans-serif;
    padding: 3.6rem 0 4.8rem;
    font-weight: 800px;
    color: #A00050;
}

.h2, h2 {
    font: normal 5rem/4.4rem Bricolage Grotesque,sans-serif;
    padding: 2.7rem 0 3.6rem;
    font-weight: 800px;
    color: #A00050;
}

h3 {
    font: normal 4.2rem/4.12rem Bricolage Grotesque,sans-serif;
    padding: 2.16rem 0 2.88rem;
    font-weight: 800px;
    color: #A00050;
}

h4 {
    font: normal 3.8rem/3.42rem Bricolage Grotesque,sans-serif;
    padding: 1.71rem 0 2.28rem;
    font-weight: 800px;
    color: #A00050;
}

h5 {
    font: normal 2.8rem/2.52rem Bricolage Grotesque,sans-serif;
    padding: 1.26rem 0 1.68rem;
    font-weight: 800px;
    color: #A00050;
}

h6 {
    font: normal 2.2rem/1.98rem Bricolage Grotesque,sans-serif;
    padding: .99rem 0 1.32rem;
    font-weight: 800px;
    color: #A00050;
}

p {
    font: 400 1.9rem/2.04rem Roboto,sans-serif;
    margin: 0;
    /* padding: 0 0 2.28rem */
    padding: 0 0 1.28rem
}

p.small {
    font: 400 1.9rem/2.66rem Roboto,sans-serif;
    margin: 0;
    padding: 0 0 3.04rem
}

a {
    color: #333;
    text-decoration: none !important;
    font-size: 18px;
}

/*
a:hover {
    font-size: 18px;
}
*/

/* Fonts mobile */

@media (max-width: 768px) {

    .title {
        font-size: 3.2rem;
        line-height: 3.6rem;
    }

    h1 {
        font-size: 3.6rem;
        line-height: 4.2rem;
        padding: 2rem 0 2.4rem;
    }

    h2, .h2 {
        font-size: 3rem;
        line-height: 3.4rem;
        padding: 1.6rem 0 2rem;
    }

    h3 {
        font-size: 2.6rem;
        line-height: 3rem;
        padding: 1.4rem 0 1.8rem;
    }

    h4 {
        font-size: 2.2rem;
        line-height: 2.6rem;
        padding: 1.2rem 0 1.6rem;
    }

    h5 {
        font-size: 1.9rem;
        line-height: 2.3rem;
        padding: 1rem 0 1.4rem;
    }

    h6 {
        font-size: 1.6rem;
        line-height: 2rem;
        padding: 0.8rem 0 1.2rem;
    }

    p {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    p.small {
        font-size: 1.5rem;
        line-height: 2.1rem;
    }

    a {
        font-size: 1.6rem;
    }

    .event-details-column-gap {
        margin-bottom: 1.5rem;
    }

    .event-details-column-gap li {
        margin-bottom: 1.2rem;
        width: 80%;
        line-height: 2.5rem;
    }

    .navbar-brand img {
        height: 45px !important;
    }

    .event-search-banner {
        background-image: url(/joints-banner-mobile.jpg) !important;
        background-size: contain !important;
        background-position: top !important;
    }

    .event-search-margin-mobile {
        margin-top: 120px !important;
    }

    .events-search-title {
        padding-top: 0 !important;
    }
}

/* unvisited link */
a:link {
  color: #A00050;
  font-weight: bold;
  text-decoration: underline;
}

/* visited link */
a:visited {
  color: #A00050;
  font-weight: bold;
  text-decoration: underline;
}


/* mouse over link */
a:hover {
  color: #A00050 !important;
  font-weight: bold;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: #A00050 !important;
  font-weight: bold;
  text-decoration: underline;
  background-color: none;
}

/*Page Numbers on my events - highlight active*/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: #A00050!important;
}

.form-control
{
    color: #000;
    font: 400 1.9rem/3.04rem Roboto,sans-serif;
}

.btn-grid {
    color: white;
    background-color: #000;
    border-color: #000;
    font: normal 1.9rem / 2.1rem Bricolage Grotesque, sans-serif;
}

/*Button on list - keeps the chevron white on focus*/
.btn-default:focus {
    color:#fff !important;
}

/*Close button or cross for the closing of the modal pop up for cancelling an event (My Events).*/
.btn-close {
    font-size: 44px !important;
}

/*Close Button for Event Cost create modal pop up*/
.form-close {
    font-size: 44px !important;
}

/* TABLES */
/*Header of lists/column names in custom font*/
.table-striped th, .table-striped th a {
    font: normal 2.4rem / 2.16rem Bricolage Grotesque, sans-serif !important;
}

/*Results/records in list as roboto font*/
.table-striped, .table-striped a {
    font: normal 2.4rem / 2.16rem roboto, sans-serif !important;
    font-size: 1.8rem !important;
}

/*Hovering over the records in the list*/
.table-striped a:hover {
    color: #A00050;
}


/* SEARCH EVENTS */

/*Styling around the search box on event search page*/
#searchFields {
    border: 1px #A00050 solid;
    background-color: #A00050;
    padding-top: 1rem;
    font: normal 1.9rem / 2.1rem Bricolage Grotesque, sans-serif;
}

/*Labels on the search fields*/
#searchFields .form-row p b {
    color: white !important;
    font: Roboto !important; /*this is being over-written*/
}

/*Label on the Include Online Events Check box*/
input[type=checkbox] + label {
    color:#fff !important;
    font-weight: lighter;
    accent-color: black !important;
}

input[type="radio"], input[type="checkbox"] {
    height: 22px;
    width: 22px;
}

/*Hides the Back button or Start New Search button on the Event Details Page*/
.newSearchButton {
    display: none !important;
}

.attendance-button {
    display: inline-flex;
}

.dropdown-item {
    font: 400 1.9rem/3.04rem Roboto,sans-serif;
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-menu {
    font-size: 1em;
}

/* to pad from the fixed header */
.page-container {
    margin-top: 12px;
}

.datepicker-dropdown {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    margin-top: 102px;
}

.datepicker {
    padding: 0;
}

.datepicker td, .datepicker th {
    width: 2.5rem;
    height: 2.5rem;
    /*font-size: 0.85rem;*/
}

.datepicker-dropdown:after {
    border-bottom-color: #A00050;
}

.datepicker-days .table-condensed thead tr:nth-child(2), .datepicker-months .table-condensed thead tr:nth-child(2),
.datepicker-years .table-condensed thead tr:nth-child(2), .datepicker-decades .table-condensed thead tr:nth-child(2),
.datepicker-centuries .table-condensed thead tr:nth-child(2) {
    background: linear-gradient(to bottom,#A00050,#A00050);
    color: #fff;
}
.datepicker-days .table-condensed thead tr:nth-child(2) th:hover, .datepicker-months .table-condensed thead tr:nth-child(2) th:hover,
.datepicker-years .table-condensed thead tr:nth-child(2) th:hover,.datepicker-decades .table-condensed thead tr:nth-child(2) th:hover,
.datepicker-centuries .table-condensed thead tr:nth-child(2) th:hover {
    background: linear-gradient(to bottom,#A00050,#A00050);
    color: #fff;
}

.datepicker-days .table-condensed tfoot, .datepicker-months .table-condensed tfoot, .datepicker-years .table-condensed tfoot,
.datepicker-decades .table-condensed tfoot, .datepicker-centuries .table-condensed tfoot {
    border-top: solid 1px rgba(0,0,0,.15);
}

.event-search-item{
   border-bottom: 10px solid #A00050;
   padding: 20px;
}

footer .footer-bottom {
    background-color: #A00050;
}

.footer__disclaimer {
    font-size: 1.9rem;
    line-height: 1.9rem;
}

/*Link to main website in footer*/
.footerLink {
    color: white !important;
    font-size: 1.9rem;
    line-height: 1.9rem;
}

.skip-to-content a {
    top: -50px;
}

/*Loading spinner*/

.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.entitylist-download {
    font-size: 1em;
}

.tooltip {
    font-size: 0.7em;
}

.fa-check {
    border-bottom: 10px;
}

/* LOQATE*/
/*List of items in the results box*/
.pca .pcaitem {
    font-size: 1.6rem !important;
}

/*Item when hovered over in the results box*/
.pcaselected, .pca .pcaitem:hover {
    font-size: 2rem !important;
}

/*Entity lists have a min height so the dropdown menu on an item is visible without scrolling when only one item in list*/
.table-responsive {
    min-height: 15vh !important;
}

/*Button Formatting*/

.btn, .btn-default {
    color: #A00050;
    background-color: #E0E231;
    border: 0; 
    border-radius: 120px;
    font: normal 2.4rem / 2.16rem Bricolage Grotesque, sans-serif !important;
    font-weight: 800px;
    text-transform: none !important;
    padding: 20px 30px;
}

.btn:active, 
.btn-default:active,
.btn:focus, 
.btn-default:focus,
.btn:hover, 
.btn-default:hover {
    color: #A00050 !important;
    background-color: #E0E231 !important;
}

.btn::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('https://d23con86llypzs.cloudfront.net/89928f9e899cbc71d0f03072630132c0.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    margin-left: 12px;
    vertical-align: middle;
    margin-top: -3px;
}

.btn:hover::after {
    transform: scale(1.16);
    transition: transform 0.25s ease;
}

/*Remove nav bar divider */

.nav-item.divider-vertical {
    display: none;
}

/*Remove nav bar divider */
.page-header {
    color: #fff !important;
    background-color:  #A00050 !important;
}

/*Standardise spacer colours*/
.row.sectionBlockLayout {
    background-color: #F5F0EB !important;
}

/*Link hover colour */
a.anchor-hover-color-color12:hover {
    color: #A00050 !important;
}

/* Nav bar hover colour */
a.nav-link:hover {
    color: #ffffff !important;
}

/* Table formatting */
.entitylist {
    padding: 20px;
    border-radius: 16px;
}

.entitylist span.title {
    font-size: 2.5rem;
    color: #A00050 !important;
}

/* Form formatting */


.crmEntityFormView label {
    background-color: #fff;
    color: #000000;
}

div#EntityFormPanel {
    background-color: #fff;
    padding: 10px;
    border-radius: 16px;
}

span.input-group-addon.btn {
    height: 30px;
}

.input-group-addon.btn {
    display: flex;
    align-items: center;
}

.form-control {
    background-color: #FFFFFF !important;
    color: #000000;
}


/*JL CHANGES/ADDITIONS DURING REBRAND*/

/*Sets the boarders around the columns on the home page*/
.column-block {
    background-color: rgb(255, 255, 255);
    border-bottom-width: 8px;
    border-bottom-style: solid;
    border-bottom-color: rgb(160, 0, 80);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow-x: hidden;
    overflow-y: hidden;
}

/*Search Results Page*/
#searchFields {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: initial;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: rgb(160, 0, 80);
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-variant-alternates: normal;
    font-size-adjust: none;
    font-language-override: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-variant-position: normal;
    font-variant-emoji: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 1.9rem;
    line-height: 2.1rem;
    font-family: "Bricolage Grotesque", sans-serif;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.columnBlockLayout {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 16px;
}

/*Search form box font*/
.form-label {
    font-style: normal;
    font-variant-caps: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-variant-alternates: normal;
    font-size-adjust: none;
    font-language-override: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-variant-position: normal;
    font-variant-emoji: normal;
    font-weight: bold;
    font-stretch: normal;
    font-size: 18px;
    line-height: normal;
    font-family: "Bricolage Grotesque", sans-serif;
    color: rgb(255, 255, 255);
}

/*Select checkbox*/
#inputVirtual {
    accent-color: white;
    background-color: rgb(160, 0, 80);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(142, 143, 148);
    border-right-color: rgb(142, 143, 148);
    border-bottom-color: rgb(142, 143, 148);
    border-left-color: rgb(142, 143, 148);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

a:visited {
    color: #A00050;
    font-weight: bold;
    text-decoration: underline;
}

.list-group {
    --bs-list-group-color: #212529;
    --bs-list-group-bg: #fff;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-border-width: 1px;
    --bs-list-group-border-radius: 0.375rem;
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: 0.5rem;
    --bs-list-group-action-color: #495057;
    --bs-list-group-action-hover-color: #495057;
    --bs-list-group-action-hover-bg: #f8f9fa;
    --bs-list-group-action-active-color: #212529;
    --bs-list-group-action-active-bg: #e9ecef;
    --bs-list-group-disabled-color: #6c757d;
    --bs-list-group-disabled-bg: #fff;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #E0E231;
    --bs-list-group-active-border-color: #E0E231;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--bs-list-group-border-radius);
}

.event-search-item {
    background-color: #fff;
    border-radius: 16px;
    border-bottom: solid 8px #a00050;
    padding: 20px;
    margin: 10px;
}

.event-search-item > div {
    color: rgb(160, 0, 80) !important;
}

/*Colour of the hyperlink in events intro paragraph*/
.events-intro a {
    color: rgb(245, 240, 235);
}

a:hover {
    color: rgb(160, 0, 80) !important;
    text-decoration: underline !important;
}

.text-link:hover{
    color: rgb(160, 0, 80) !important;
    text-decoration: underline !important;
    font-weight: bold;
}

.list-group :hover {
    color: rgb(160, 0, 80) !important;
    text-decoration: underline !important;
}

a:focus  {
    background-color: transparent !important;
}

.view-grid a:hover {
    color: rgb(160, 0, 80) !important;
}

.event-details-column-gap li :hover {
    margin-bottom: 0.75rem;
    color: rgb(160, 0, 80) !important;
}

a.anchor-hover-color-color1:hover {
    color: rgb(160, 0, 80) !important;
    text-decoration: underline !important;
}

/* This puts the consents 'I have understood' text and checkboxes to the left, so they don't move around with responsiveness */
.table-info {
    padding-left: 0 !important;
    display: block !important;
}