:root {
    --nhs-black: #231f20;
    --nhs-dark-blue: #003087;
    --nhs-blue: #005EB8;
    --nhs-bright-blue: #0072CE;
    --nhs-light-blue: #41B6E6;
    --nhs-aqua-blue: #00A9CE;
    --nhs-dark-grey: #425563;
    --nhs-mid-grey: #768692;
    --nhs-pale-grey: #E8EDEE;
    --nhs-dark-green: #006747;
    --nhs-green: #009639;
    --nhs-light-green: #78BE20;
    --nhs-aqua-green: #00A499;
    --nhs-purple: #330072;
    --nhs-dark-pink: #7C2855;
    --nhs-pink: #AE2573;
    --nhs-dark-red: #8A1538;
    --nhs-emergency-services-red: #DA291C;
    --nhs-orange: #ED8B00;
    --nhs-warm-yellow: #FFB81C;
    --nhs-yellow: #FAE100;
    --nhs-white: #FFFFFF;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--nhs-pale-grey);
}

footer {
    margin-top: auto;
    background-color: var(--nhs-white);
}

footer p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0;
}

footer img {
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    padding-left: 0px !important;
}

ul {
  list-style-position: inside;
}

ol {
  list-style-position: inside;
}

.blockquote {
    font-size: 14px;
}

.primary-link {
  color: var(--nhs-bright-blue);
  text-decoration: none;
}

.primary-link:hover {
  text-decoration: underline;
}

.alt-info {
    color: var(--nhs-white);
}

.alt-info:hover {
    color: var(--nhs-aqua-green);
}

.search-box {
    font-size: 14px;
}

.card-800 { 
    width: min(100%, 800px);
}

.card-1000 { 
    width: min(100%, 1000px);
}

.ml-50 { 
    margin-left: 50px;
}

/* Nav bar */
.navbar-bg-nhs {
    background-color: var(--nhs-blue);
}

.nav-block {
    min-width: clamp(160px, 25vw, 250px);
}

.navbar-brand {
    padding-left: 12px;
    font-size: 26px;
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
}

.navbar-brand:hover {
    text-decoration: none;
}

.main-search-input {
    width: 300px;
}

.beta-banner {
  background-color: var(--nhs-aqua-green);
  color: var(--nhs-white);
  font-size: 0.875rem;
}

/* Tables */

/* Overwrite of the bootstrap-table classes */
.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding-left:.25rem;
    padding-right:.25rem;
    padding-top:.5rem;
    padding-bottom:.5rem;
}

.bootstrap-table .fixed-table-container .table thead th .sortable {
    padding-right: 15px; 
}

.bootstrap-table .fixed-table-container .table thead th .sortable.sortable-center {
    padding-left: 5px;
    padding-right: 15px;
}

.bootstrap-table .table>:not(:first-child) {
    /* Removes default black border under the header */
    border-top: 0px;
}

.bootstrap-table .page-item.active .page-link {
    background-color: var(--nhs-bright-blue);
    border-color: var(--nhs-bright-blue);
}

/* Overwrite of bootstrap-table filter-control extension classes*/
.fht-cell {
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
}

.search-input {
    font-size: 12px;
}

.form-select {
    font-size: 12px;
}

/* Custom table classes */
.table-variants {
    font-size: 12px;
    border-collapse: collapse;
    font-family: Verdana, sans-serif;
}

.table-hover>tbody>tr.detail-view:hover {
    background-color: inherit;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.0);
}

tr.primary {
    background-color: var(--nhs-bright-blue);
    color: var(--nhs-white);
}

tr.secondary,
tr.secondary:hover,
th.secondary,
td.secondary {
    background-color: var(--nhs-dark-grey);
    color: var(--nhs-white);
}

tr.secondary th,
tr.secondary td,
th.secondary,
td.secondary {
    text-align: center;
    border: 1px solid var(--nhs-white);
    padding-right: 10px;
    padding-left: 10px;
}

.col-max-width-500 {
    max-width: clamp(150px, 25vw, 500px);
    overflow-wrap: anywhere;
    word-wrap: break-word; /* legacy alias */
}

/* Double position filter input field width when focused 
   to fit the start-end coordinates range. */
.bootstrap-table-filter-control-pos:focus {
    width: 200% !important;
    z-index: 1000;
    position: relative;
}

.form-check-input:checked {
    border: 0;
}

.form-check-input:focus, 
label.form-check-label:focus, 
.form-check-input::after, 
.form-check-input:not(:disabled):not(.disabled):active:focus {
    color: var(--nhs-black);
    outline: 0;
    border: 0;
}

.form-check-input-red:checked {
    background-color: var(--nhs-emergency-services-red);
    
}

.form-check-input-red:focus,
label.form-check-label-red:focus, 
.form-check-input-red::after, 
.form-check-input-red:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.1rem var(--nhs-emergency-services-red);
}

.form-check-input-yellow:checked {
    background-color: var(--nhs-warm-yellow);
}

.form-check-input-yellow:focus, 
label.form-check-label-orange:focus, 
.form-check-input-yellow::after, 
.form-check-input-yellow:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.1rem var(--nhs-warm-yellow);
}

.form-check-input-green:checked {
    background-color: var(--nhs-green);
}

.form-check-input-green:focus, 
label.form-check-label-green:focus, 
.form-check-input-green::after, 
.form-check-input-green:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.1rem var(--nhs-green);
}

.form-check-input-grey:checked {
    background-color: var(--nhs-mid-grey);
}

.form-check-input-grey:focus, 
label.form-check-label-grey:focus, 
.form-check-input-grey::after, 
.form-check-input-grey:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.1rem var(--nhs-mid-grey);
}

.form-check-input-blue:checked {
    background-color: var(--nhs-bright-blue);
}

.form-check-input-blue:focus, 
label.form-check-label-blue:focus, 
.form-check-input-blue::after, 
.form-check-input-blue:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.1rem var(--nhs-bright-blue);
}

.static-control {
    pointer-events: none;
}

.btn-outline-gray {
    font-size: 11px;
    color: var(--nhs-black);
    background-color: var(--nhs-white);
    border: 1px solid var(--nhs-pale-grey);
    margin-left: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.btn-outline-gray:hover,
.btn-outline-gray:focus,
.btn-outline-gray:active {
    border: 1px solid var(--nhs-mid-grey);
    box-shadow: 0 0 0 0.1rem var(--nhs-pale-grey);
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}