html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.detailHeadingTextColor {
    color: #258cfb; /*Colour of detail headings */
    font-weight: bold;
}

.AnimalPanel {
    background-color: #258cfb; /*Colour of main page box */
    color: #ffffff;
}
.AnimalPanelLighter {
    background-color: #258cfb; /*Colour of matching considerations are on main page box */
    filter: brightness(90%);
    max-height: 200px;
    height: 140px;
    font-size: 10pt;
}

.card-header h5 {
    font-weight: bold;
    text-decoration: none;
    color: yellow; /*Text colour for header of each box on main page*/
}
.matchingConsiderationsList {
    column-count: 2; /*Sets main page  matching considerations to appear int two columns*/
    padding-left: 1em;
}



.matchingConsiderationsList li {
    list-style: none;
    padding-left: 1em;
    text-indent: -1em;
}

.matchingConsiderationsListDetail {
    column-count: 2; /*Sets detail page maching considerations to appear int two columns*/
    padding-left: 1em;
}

.matchingConsiderationsListDetail li {
    list-style: none;
    padding-left: 1em;
    text-indent: -1em;
}



.matchingConsiderationsList li:before {
    content: '✓ ';
    color: yellow; /*These are the ticks for matching consideration on the main screen, colour can be changed here*/
}

.matchingConsiderationsListDetail li:before {
    content: '✓ ';
    color: #258cfb; /*These are the ticks for matching consideration on detail screen, colour can be changed here*/
}

.GalleryImage {
    max-width: 100%;
    height: 100%;
    border: 2px solid#fff;
}

.GalleryImageSelected {
   
    border: 2px solid#000 !important
}

.col-form-label {
    font-weight:bold;
}

#ContactDetailsPanel {
    background-color: #ffffff;
    padding: 5px;
    margin: 2px;
}

#AnimalOfInterestPanel {
    background-color: #258cfb;
    padding: 5px;
    margin: 2px;
}

#ExtraQuestionsPanel {
    background-color: #ffffff;
    padding: 5px;
    margin: 2px;
}

#MarketingPreferencesPanel {
    background-color: #ffffff;
    padding: 5px;
    margin: 2px;
}

/*Add class to give links the disabled button appearance*/
.disabledLink {
    pointer-events: none;
    opacity: 0.65;
}