/* ============================================================
   platform.css
   Shared platform styles for the multi-tenant job-board platform.
   Theming is driven by:
     - Blazorise theme variables   --b-theme-primary, --b-theme-secondary
     - Per-site override variables --site-* (set in sites/{slug}/site.css)
   ============================================================ */

/* ------------------------------------------------------------
   Base / reset
   ------------------------------------------------------------ */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Employer-supplied images are uploaded at whatever size the employer had —
   one live logo is 21240x3668 — so without a global cap a single oversized
   asset breaks the layout of whatever card or column it lands in. This is the
   safety net; components that need a logo sized deliberately (e.g. the Latest
   Jobs carousel) constrain height and object-fit in their own scoped CSS. */
img {
    max-width: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Montserrat', sans-serif;
}

label {
    color: #3c3487;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}

h1 {
    font-size: 2em !important;
}

h2 {
    font-size: 1.5rem !important;
}

a, .btn-link {
    color: var(--b-theme-primary);
    font-weight: bold;
    text-decoration: none;
}

.job-description p > br:only-child {
    display: none;
}

/* ------------------------------------------------------------
   Quill editor sizing helpers
   ------------------------------------------------------------ */
.ql-size-large {
    font-size: 1.5em;
}

.ql-size-medium {
    font-size: 1.2em;
}

.ql-size-huge {
    font-size: 3.5em;
}

.ql-align-center {
    text-align: center;
}

.ql-align-left {
    text-align: left;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=medium]::before {
    font-size: 18px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=medium]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=medium]::before {
    content: 'Medium' !important;
}

.ql-editor {
    min-height: 200px;
}

/* ------------------------------------------------------------
   Links / form helpers
   ------------------------------------------------------------ */
.blue-link {
    color: #2196f3 !important;
    text-decoration: underline !important;
}

.custom-control-label {
    color: #e11580 !important;
    font-weight: bold;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-item .btn-primary {
    color: #fff !important;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #f00;
}

.validation-message {
    color: #f00;
}

#blazor-error-ui {
    background: #ffffe0;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ------------------------------------------------------------
   Container widths
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
    .container {
        width: 1205px;
    }
}

@media (min-width: 1300px) {
    .container {
        width: 1300px;
    }
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.main-content {
    width: 100%;
    min-height: 100%;
    padding-bottom: 230px;
    margin-bottom: 30px;
}

.site-branding {
    display: block;
}

@media (max-width: 992px) {
    .site-branding {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
}

.navigation-bar {
    min-height: 50px;
    display: inline-block;
}

.navigation-bar-block {
    min-height: 50px;
    display: inline-block;
    width: 88%;
}

@media (max-width: 991px) {
    .navigation-bar {
        display: block;
        width: 100%;
    }
}

@media (max-width: 769px) {
    .navigation-bar {
        margin-top: 0;
        min-height: 0;
    }
}

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
nav.navbar-default {
    box-shadow: none !important;
    background-image: none !important;
    border: 0 !important;
}

@media (min-width: 769px) {
    nav.navbar-default {
        display: none;
    }
}

.navbar {
    margin-bottom: 0;
}

.navbar-default .navbar-toggle {
    border: 2px solid #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #fff;
}

.navbar-toggle {
    margin-right: 25px;
}

@media (max-width: 600px) {
    .navbar-toggle {
        margin-right: 0;
        margin-left: 8px;
    }
}

.navbar-default .navbar-nav > li > a {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    font-weight: normal;
    text-align: left;
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
    margin-right: 0 !important;
}

.navbar-collapse {
    padding: 0;
    overflow-x: visible;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch;
    width: 80%;
}

.navbar-light .navbar-nav .nav-link {
    color: #000 !important;
    font-weight: 600 !important;
}

.nav-item a {
    color: #000 !important;
}

/* White suits the dark secondary most sites use, but sites with a light/pastel
 * secondary must be able to opt out — white on a pale button fails WCAG AA.
 * Such sites set --site-nav-btn-secondary-fg to a dark colour in their site.css. */
.nav-item .btn-secondary {
    color: var(--site-nav-btn-secondary-fg, #fff) !important;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 29px;
    height: 5px;
    border-radius: 20px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #616161;
}

.navbar-default .navbar-toggle {
    border: none !important;
}

.navbar-default {
    background-color: #fff !important;
    border-color: #fff !important;
}

.navbar-brand {
    min-width: 180px;
}

.navbar-brand .nav-item {
    display: inline-block !important;
}

/* ------------------------------------------------------------
   Sector / Location columns
   ------------------------------------------------------------ */
.sector-links {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

.sector-links li {
    padding-top: 20px !important;
    list-style: none;
}

.location-links {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

.location-links li {
    padding-top: 20px !important;
    list-style: none;
}

@media (max-width: 767px) {
    .sector-links {
        columns: 2 !important;
        -webkit-columns: 2 !important;
        -moz-columns: 2 !important;
    }

    .location-links {
        columns: 2 !important;
        -webkit-columns: 2 !important;
        -moz-columns: 2 !important;
    }
}

/* ------------------------------------------------------------
   Main nav
   ------------------------------------------------------------ */
.main-nav {
    text-align: center;
}

.main-nav ul {
    padding: 0;
}

.main-nav .active a {
    color: #e11580 !important;
}

@media (max-width: 992px) {
    .main-nav {
        text-align: center;
    }
}

@media (max-width: 769px) {
    .main-nav {
        display: none;
    }
}

.main-nav li {
    display: inline-block;
}

.main-nav a {
    font-size: 16px;
    color: #fff;
    padding: 20px 15px 4px 0;
    display: block;
    font-weight: 600;
}

@media (max-width: 1400px) {
    .main-nav a {
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .main-nav a {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .main-nav a {
        font-size: 16px;
        padding: 10px 4px;
    }
}

@media (max-width: 769px) {
    .main-nav li,
    .main-nav-rec li {
        display: block !important;
    }
}

.main-nav a:hover {
    color: #e11580;
    text-decoration: none;
}

.main-nav-rec {
    text-align: center;
}

@media (max-width: 769px) {
    .main-nav-rec {
        display: none;
    }
}

.main-nav-rec li {
    display: inline-block;
}

.main-nav-rec a {
    font-size: 13px;
    color: #4c5b52;
    padding: 10px 7px;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 992px) {
    .main-nav-rec a {
        font-size: 12px;
        padding: 10px 4px;
    }
}

@media (max-width: 400px) {
    .main-nav-rec a {
        font-size: 10px;
    }
}

.main-nav-rec a:hover {
    color: #dd7500;
    text-decoration: none;
}

nav.main-nav[data-state=open],
nav.main-nav-rec[data-state=open] {
    display: block;
}

nav.main-nav[data-state=open] li a,
nav.main-nav-rec[data-state=open] li a {
    text-align: left;
    display: block;
}

.nav-toggle {
    display: inline-block;
    padding: 4px 8px;
    max-width: 50px;
}

.nav-toggle i.fa {
    color: #4c5b52;
    font-size: 26px;
}

@media (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
}

@media (max-width: 769px) {
    .nav-toggle {
        display: inline-block;
    }

    .list-searches {
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
        column-count: 1 !important;
    }
}

/* ------------------------------------------------------------
   Header bar — themed (Blazorise secondary by default,
   per-site override via --site-header-bg)
   ------------------------------------------------------------ */
/* The band renders WHITE heading text, so its background must stay dark.
 * Resolution order:
 *   --site-title-bar-bg  explicit opt-in for the title band only
 *   --site-primary       most sites' brand colour is dark enough for white text
 *   #4D4D4D              the historic grey, so untouched sites look unchanged
 * NOTE: --site-header-bg is deliberately NOT in this chain. Several sites set
 * it to white to theme the top navbar, which would render white-on-white here. */
.header-bar {
    min-height: 60px;
    background-color: var(--site-title-bar-bg, var(--site-primary, #4D4D4D)) !important;
    /* Optional gradient, opt-in per site via --site-title-bar-gradient. The
       background-color above stays as the fallback, so a site that sets
       nothing keeps exactly the flat band it has today — this component is on
       every page of every site, so the default must not change. */
    background-image: var(--site-title-bar-gradient, none) !important;
    position: relative;
    display: flex;
    align-items: center;
}

/* The heading sits inside a Container Fluid inside the row, so vertical
   centring has to come from the row. */
.header-bar h1 {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Locate icon
   ------------------------------------------------------------ */
span.locate-icon {
    top: -40px;
    right: 10px;
    float: right;
    position: relative;
}

span.locate-icon i {
    color: var(--b-theme-primary);
    font-size: 32px;
}

span.locate-icon-adv {
    position: absolute;
    right: 120px;
    padding-top: 9px;
}

span.locate-icon-adv i {
    color: #3c3487;
    font-size: 32px;
}

@media (max-width: 1080px) {
    span.locate-icon-adv {
        position: absolute;
        right: 65px;
        padding-top: 13px;
    }
}

@media (max-width: 992px) {
    span.locate-icon-adv {
        right: 55px;
        padding-top: 0;
        top: 129px;
    }
}

.find-me-wrap {
    position: relative;
}

.s__location .find-me {
    position: absolute;
    top: -4px;
    right: 3px;
    color: #4c5b52;
    text-decoration: none;
}

.s__location .find-me:hover {
    color: #71c5e8;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Footer (legacy section.footer + modern footer)
   Modern footer is themed via --site-footer-bg (fallback to
   Blazorise primary).
   ------------------------------------------------------------ */
section.footer {
    width: 100%;
    margin-top: 30px;
    height: 180px;
    color: #fff;
}

section.footer .foot-bg {
    background-color: #a6a6a6;
    padding: 20px 0;
}

section.footer .foot-bg h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    text-align: left;
    margin: 0 0 10px 0;
    font-weight: 700;
}

@media (max-width: 992px) {
    section.footer .foot-bg h4 {
        font-size: 16px;
        margin: 20px 0 10px 0;
    }
}

section.footer .foot-bg a {
    color: #fff;
    font-size: 14px;
    display: block;
    text-align: left;
    line-height: 1.5;
    text-decoration: none;
}

@media (max-width: 992px) {
    section.footer .foot-bg a {
        font-size: 14px;
    }
}

section.footer .foot-bg a:hover {
    color: #dd7500;
    text-decoration: none;
}

section.footer .copyright-bg {
    background-color: #fff;
    padding: 10px 0;
    text-align: center;
}

.inline-block {
    display: inline-block;
}

section.footer .copyright-bg a {
    color: #073869;
    text-decoration: none;
    margin-right: 10px;
}

.copyright-bg img {
    width: 50px;
    height: 50px;
}

.copyright-bg h4 {
    float: left;
    color: #073869;
    margin-right: 50px;
    margin-top: 10px;
}

.copyright {
    color: #073869;
}

footer {
    padding-top: 60px;
    padding-bottom: 28px;
    background: var(--site-footer-bg, var(--b-theme-primary)) !important;
    color: #fff;
    margin-top: 25px;
}

footer img.logo {
    max-width: 150px;
    margin-bottom: 30px;
}

footer ul {
    margin-left: -40px;
    font-size: 14px;
}

footer ul li {
    list-style-type: none;
    margin-bottom: 5px;
}

footer ul li a {
    color: #fff;
    text-decoration: none;
}

footer .social,
footer .apps {
    text-align: right;
}

footer .social ul li {
    font-size: 28px;
    margin-bottom: 3px;
}

footer .social ul li a:hover {
    text-decoration: none;
}

footer .apps img {
    max-width: 120px;
}

footer .copyright {
    margin: 20px 15px 0;
    padding-top: 30px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #fff;
    color: #fff;
}

footer .copyright a {
    color: #fff !important;
}

.footer a {
    text-decoration: underline;
    margin-bottom: 1em;
}

.footer a:hover {
    color: #fff !important;
}

.footer h4 {
    margin-bottom: 1em !important;
}

.footer .social-links li {
    text-align: left;
    display: block;
    float: left;
    margin-right: 1%;
}

@media (max-width: 767px) {
    .footer .social-links li {
        display: inline-block;
        text-align: center;
        float: none;
    }
}

/* ------------------------------------------------------------
   Cookie / panel
   ------------------------------------------------------------ */
.cookie-bar {
    display: block;
}

.panel-cookies {
    background-color: #4c5b52;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.close-cookies {
    margin-top: 5px;
    float: right;
    background-color: #005eb8 !important;
    margin-right: 10px;
    -moz-appearance: none !important;
    -webkit-box-sizing: none !important;
    -moz-box-sizing: none !important;
    box-sizing: none !important;
    border: 0;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
    padding: 15px;
}

.panel-group {
    margin-bottom: 20px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}

.panel-group .panel + .panel {
    margin-top: 5px;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}

/* ------------------------------------------------------------
   Site search panel
   ------------------------------------------------------------ */
.site-search {
    background-color: #3c3487;
}

.site-search .side-icons,
.site-search .side-icons-right {
    position: relative;
}

.site-search .side-icons img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 0;
    width: 300px;
    opacity: 60%;
}

.site-search .side-icons-right img {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 0;
    width: 300px;
    opacity: 60%;
}

@media (max-width: 992px) {
    .site-search .side-icons-right img {
        bottom: 21px;
    }
}

@media (max-width: 770px) {
    .site-search .side-icons-right img,
    .site-search .side-icons img {
        display: none;
    }
}

@media (min-width: 770px) {
    .mobile-sector-icons {
        display: none;
    }
}

.site-search .inner {
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.2rem;
}

.site-search .page {
    display: block;
    position: relative;
    z-index: 3;
    margin: 0 auto;
    padding: 30px 15%;
}

@media (max-width: 992px) {
    .site-search .page {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .site-search .page {
        padding: 15px 10px;
    }

    h1, h2 {
        font-size: 1.2em !important;
    }
}

.site-search .page .search-title {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.site-search .page .search-title h1 {
    display: inline-block;
    font-size: 26px;
    font-weight: 600;
    height: 50px;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .site-search .page .search-title h1 {
        font-size: 15px;
    }
}

.site-search .page .search-title img {
    width: 4.5rem;
    margin-bottom: 20px;
    margin-right: 10px;
}

@media (max-width: 767px) {
    .site-search .page .search-title img {
        width: 3.5rem;
        margin-bottom: 0;
        margin-right: 3px;
    }

    .search-cta label {
        display: none !important;
    }
}

.site-search .page .form-search .search-cta {
    margin-top: 30px;
}

.site-search .page .form-search .search-cta a.btn {
    padding: 14px 22px;
    font-size: 14px;
}

@media (max-width: 767px) {
    .site-search .page .form-search .search-cta a.btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.form-search {
    border-radius: 5px;
    margin-bottom: 25px;
}

.form-search label {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

input::-webkit-input-placeholder {
    color: #adb3bb !important;
}

input:-moz-placeholder {
    color: #adb3bb !important;
}

input::-moz-placeholder {
    color: #adb3bb !important;
}

input:-ms-input-placeholder {
    color: #adb3bb !important;
}

.form-control {
    height: 50px !important;
    font-size: 14px !important;
    color: #4c5b52;
}

textarea.form-control {
    height: auto !important;
}

/* ------------------------------------------------------------
   File upload — dropzone variant (FileUpload Dropzone="true")
   ------------------------------------------------------------
   Large drop target with icon, primary label and a hint line, for places where
   the upload is a primary action rather than one field among many (e.g. the CV
   on /register). The file input is a transparent overlay so the whole block is
   clickable and keyboard focusable; the visible content is aria-hidden because
   the input itself carries the accessible name. */
.dts-dropzone {
    position: relative;
    display: block;
    width: 100%;
    padding: 2rem 1.25rem;
    text-align: center;
    background-color: #fbfcfd;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

/* Blazorise still emits its .custom-file wrapper and label inside the dropzone.
   The label is the plain bordered control styled further down, which would sit
   behind the dropzone content — hide it and let the wrapper collapse so only
   the dropzone chrome shows. */
.dts-dropzone .custom-file {
    position: static;
    height: auto;
}

.dts-dropzone .custom-file-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The label supplies the input's accessible name, so it is visually hidden
   rather than display:none — the latter would remove it from the
   accessibility tree and leave the file input unlabelled. */
.dts-dropzone .custom-file-label::after {
    content: none;
}

.dts-dropzone .dts-dropzone__input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.dts-dropzone__content {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.dts-dropzone__icon {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    color: var(--site-primary, #0b3b56);
}

.dts-dropzone__label {
    font-size: 1rem;
    font-weight: 600;
    color: #35414c;
    word-break: break-word;
}

.dts-dropzone__hint {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: #7b8794;
}

.dts-dropzone:hover {
    border-color: var(--site-primary, #adb3bb);
    background-color: #f6f9fc;
}

/* The real input is transparent, so mirror its focus onto the visible block. */
.dts-dropzone .dts-dropzone__input:focus-visible {
    outline: none;
}

.dts-dropzone:focus-within {
    border-color: var(--site-primary, #0b3b56);
    box-shadow: 0 0 0 0.2rem rgba(11, 59, 86, .2);
}

/* Once a file is chosen the zone confirms it rather than still inviting one. */
.dts-dropzone--filled {
    border-style: solid;
    border-color: #7ac29a;
    background-color: #f6fbf8;
}

.dts-dropzone--filled .dts-dropzone__icon {
    color: #3f9c68;
}

@media (max-width: 575px) {
    .dts-dropzone {
        padding: 1.5rem 1rem;
    }
}

/* ------------------------------------------------------------
   File upload (Blazorise FileEdit)
   ------------------------------------------------------------
   FileEdit renders Bootstrap 4's .custom-file pattern: a file input overlaid on
   a .custom-file-label that supplies the border and the "Choose file" button
   (via ::after). FileEdit also puts .form-control on the INPUT, and the
   `.form-control { height: 50px !important }` rule above forces that overlay
   out of shape, so the label chrome collapsed — the CV upload on /register
   rendered as bare placeholder text with no border and no visible control.

   Styled here rather than in FileUpload.razor.css because DTS.JobBoard.Components'
   scoped-CSS bundle is not served by the host: it is neither merged into
   DTS.JobBoard.Platform.Web.styles.css nor available at
   _content/DTS.JobBoard.Components/... (404), so rules placed there never reach
   the browser. */
.custom-file {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 0;
}

/* The input is the click target: transparent, on top, full size. */
.custom-file .custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 50px !important;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* The label is the visible control. */
.custom-file .custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 50px;
    padding: 0.75rem 1rem;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #4c5b52;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* "Choose file" button, label text from the data-browse attribute. */
.custom-file .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 100%;
    padding: 0.75rem 1.25rem;
    line-height: 1.5;
    color: #fff;
    content: "Choose file";
    background-color: var(--site-primary, #0b3b56);
    border-radius: 0 4px 4px 0;
}

.custom-file .custom-file-label[data-browse]::after {
    content: attr(data-browse);
}

/* The real input is transparent, so mirror keyboard focus onto the label the
   user actually sees — otherwise the control is unusable without a mouse. */
.custom-file .custom-file-input:focus-visible ~ .custom-file-label {
    border-color: var(--site-primary, #0b3b56);
    box-shadow: 0 0 0 0.2rem rgba(11, 59, 86, .25);
}

.custom-file .custom-file-input:hover ~ .custom-file-label {
    border-color: var(--site-primary, #adb3bb);
}

.custom-file .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Placeholder/filename text sits inside the label; keep it clear of the button. */
.custom-file .custom-file-label span {
    display: block;
    padding-right: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .custom-file .custom-file-label::after {
        padding: 0.75rem 0.85rem;
    }

    .custom-file .custom-file-label span {
        padding-right: 6rem;
    }
}

input[type="file"] {
    height: 50px !important;
}

input[type="file"]::-webkit-file-upload-button {
    height: 50px !important;
}

.form-group {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .form-group {
        margin-bottom: 10px !important;
    }

    .form-search {
        min-height: 400px;
        margin-top: 0 !important;
        padding-bottom: 20px !important;
    }
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
    border-radius: 0;
    font-weight: 600;
    display: inline-block;
    padding: .66667em 1.2em;
    margin-bottom: 0;
    font-style: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 0 .2rem rgba(0, 0, 0, .05);
}

.btn:hover {
    color: #fff;
    text-decoration: underline;
}

.btn-pink {
    background-color: #e11580;
    border: 2px solid #e11580;
    font-style: normal;
    border-radius: 5px;
    font-size: 12px;
}

@media (max-width: 769px) {
    .btn-pink {
        font-size: 10px;
    }
}

.btn-pink-outline {
    background-color: transparent;
    border: 2px solid #e11580;
    color: #e11580;
    font-style: normal;
    border-radius: 5px;
    font-size: 12px;
}

@media (max-width: 769px) {
    .btn-pink-outline {
        font-size: 10px;
    }
}

/* ------------------------------------------------------------
   Boxes
   ------------------------------------------------------------ */
.box {
    border-radius: 5px;
    padding: 30px;
    margin-top: 20px;
    font-size: 17px;
}

.box-lg {
    height: 400px;
}

.box-md {
    height: 220px;
}

.box a {
    color: #fff;
}

.box h4 {
    font-size: 40px;
    font-weight: 600;
}

.box ul {
    list-style: none;
    padding-left: 0;
}

.box ul li {
    padding-top: 5px;
}

.pink-box {
    background-color: #2196f3;
    border: 2px solid #2196f3;
}

.light-blue-box {
    background-color: #add8e6;
    border: 2px solid #add8e6;
}

.dark-green-box {
    background-color: #006400;
    border: 2px solid #006400;
}

.box-outline {
    border: 2px solid #000;
    height: 540px !important;
}

.box-outline a {
    color: #e11580 !important;
}

.box-outline ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.box-outline li {
    margin-top: 5px;
}

.box-outline img {
    width: 50px;
    margin-right: 10px;
}

.box-outline h4 {
    color: #3c3487 !important;
}

.orange-box {
    background-color: #ff7655;
    border: 2px solid #ff7655;
}

.green-box {
    background-color: #5cdb95;
    border: 2px solid #5cdb95;
}

.green-box ul {
    list-style: none;
}

.blue-box {
    background-color: #3c3487;
    border: 2px solid #00908b;
}

@media (max-width: 769px) {
    .box-outline {
        border: none;
        height: auto !important;
    }

    .box-outline ul {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

.box-text {
    font-size: 1.62em !important;
}

.box-number {
    font-size: 3em !important;
}

.box-grey {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #a3b6c8;
    border: 1px solid #a3b6c8;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    padding: 40px;
    text-align: center;
}

.box-blue {
    margin-bottom: 20px;
    background-color: #073869;
    border: 1px solid #073869;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    padding: 60px;
    text-align: center;
    color: #fff;
}

.box-mpu {
    margin-bottom: 20px;
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    padding: 60px;
    text-align: center;
    color: #fff;
}

.box-pink {
    margin-bottom: 20px;
    background-color: #e84784;
    border: 1px solid #e84784;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    padding: 60px;
    text-align: center;
    color: #fff;
}

/* ------------------------------------------------------------
   Selects
   ------------------------------------------------------------ */
.select select {
    border: none;
    padding-top: 8px;
    width: 100%;
    color: black;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none;
    background-color: #fff;
}

select::-ms-expand {
    display: none;
}

select {
    -moz-appearance: none;
    text-indent: .01px;
    text-overflow: '';
}

/* ------------------------------------------------------------
   Log/registration links
   ------------------------------------------------------------ */
.log-out {
    float: right;
    display: inline-block;
    width: 12%;
}

.log-reg {
    float: right;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}

@media (max-width: 992px) {
    .log-reg, .log-out {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 769px) {
    .log-reg, .log-out {
        text-align: right;
    }
}

.log-reg li,
.log-out li {
    display: inline-block;
}

.log-reg a,
.log-out a {
    font-size: 14px;
    color: #fff !important;
    padding: 12px 20px;
    display: block;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .log-reg a,
    .log-out a {
        padding: 10px 12px;
    }
}

@media (max-width: 992px) {
    .log-reg a,
    .log-out a {
        font-size: 12px;
        padding: 10px 4px;
    }
}

@media (max-width: 400px) {
    .log-reg a,
    .log-out a {
        font-size: 10px;
    }
}

.log-reg a.log,
.log-out a.log {
    background-color: #dd7500;
}

.log-reg a.log:hover,
.log-reg a.log:active,
.log-out a.log:active {
    color: #fff !important;
    text-decoration: underline;
    background-color: #dd7500;
}

.log-reg a.recs {
    background-color: #71c5e8;
}

.log-reg a.recs:hover,
.log-reg a.recs:active {
    color: #fff;
    text-decoration: underline;
    background-color: #46bfef;
}

/* ------------------------------------------------------------
   Refine search panel — themed (Blazorise secondary by default)
   ------------------------------------------------------------ */
/* The panel was a solid --b-theme-secondary slab with white text. On a site
   with a bright secondary (Dental Staff's cyan) that block dominates the page
   and fights the results beside it. Softened to a white panel with the brand
   colour kept for the heading, matching the card language used for the results
   themselves. Sites wanting the old solid fill can set --site-refine-bg. */
.refine-search-container {
    background-color: var(--site-refine-bg, #fff);
    padding: 1.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}

.refine-search-container h2 {
    color: var(--site-refine-heading, var(--site-primary, #35414c)) !important;
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: .75rem;
    border-bottom: 1px solid #eceef1;
}

/* Filter rows are the content, so they sit at normal weight — the uppercase
   section headings above provide the hierarchy. */
/* Filter value names were <label> elements (invalid — no associated control)
   and picked up this rule. They are spans now, so both selectors are listed
   here to keep the text identical and to cover any remaining labels in the
   panel (checkboxes etc). */
.refine-search-container label,
.refine-search-container .refine-filter-name {
    color: var(--site-refine-label, #4c5b52) !important;
    font-weight: 400;
    font-size: .875rem;
}

/* Inner Blazorise cards: the panel already provides the surrounding chrome, so
   nesting a second bordered/shadowed card inside it reads as boxes-in-boxes.
   Flatten them completely — the sidebar renders one card per facet group (8 on
   a typical search), so a divider under each produced a ladder of horizontal
   rules in a narrow column. Sections are separated by spacing instead, with
   the only rule being the one under the panel heading. */
.refine-search-container .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* The markup applies Blazorise Margin.Is3.FromBottom (mb-3 = 1rem) to each
       card, which stacked on top of the header/body padding and left large
       gaps between filters in a narrow column. Override it and let the
       header/body padding alone set the rhythm. */
    margin-bottom: 0 !important;
}

.refine-search-container .card-header {
    padding: .5rem 0 .25rem 0;
    background: transparent !important;
    border: 0 !important;
}

/* Section headings were 700 weight against 600-weight filter labels at a
   similar size, so they read as slightly-bolder body text rather than as
   headings. Differentiated by CASE and COLOUR instead of weight alone: a
   smaller uppercase muted label is unmistakably a section header next to
   normal-weight filter rows, without shouting in a narrow column. */
.refine-search-container .card-header .card-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a94a0;
    margin: 0;
}

.refine-search-container .card-body {
    padding: 0 0 .5rem 0;
}

/* Mobile: the panel collapses to just its heading, so the desktop padding and
   the rule under the heading left a large empty box with a line across it and
   nothing beneath. Tighten the panel and drop the divider while collapsed —
   it comes back once the panel is expanded and there is content under it. */
@media (max-width: 767px) {
    .refine-search-container {
        padding: .75rem 1rem;
        margin-bottom: 1rem;
    }

    .refine-search-container h2 {
        font-size: 1.0625rem;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* The heading is the collapse toggle, so make the whole row the target and
       put the chevron at the far end rather than floating it. */
    .refine-search-container > .panel-body > a[data-toggle="collapse"] {
        display: block;
        text-decoration: none;
    }

    .refine-search-container > .panel-body > a[data-toggle="collapse"] h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }

    /* Blazorise renders Float.End as Bootstrap's .float-right here; the float
       fights the flex row, so neutralise it and let flex place the chevron. */
    .refine-search-container > .panel-body > a[data-toggle="collapse"] h2 .fas {
        float: none !important;
        margin-top: 0 !important;
        font-size: .875rem;
    }

    /* Expanded: restore the divider so the heading separates from the filters. */
    .refine-search-container #refine-search.show {
        border-top: 1px solid #eceef1;
        padding-top: .75rem;
        margin-top: .75rem !important;
    }
}

.refine-search-container .form-group,
.refine-search-container .input-group {
    margin-bottom: .25rem;
}

/* Checkbox/radio filter rows: Bootstrap's default .form-check spacing is set
   for full-width forms and is loose in a sidebar list. */
.refine-search-container .form-check,
.refine-search-container .custom-control {
    min-height: auto;
    margin-bottom: .15rem;
}

/* Selected filter chips and the clear-all control sit above the filter list.
   The chips use Blazorise's badge-primary, which on a site with a light
   primary left white text and a white close "x" on a pale fill — barely
   legible. Give them a solid brand fill with guaranteed contrast, and space
   the clear-all control off the chips. */
.refine-search-container .badge-primary {
    background-color: var(--site-chip-bg, var(--site-primary, #0b3b56)) !important;
    color: var(--site-chip-fg, #fff) !important;
    font-size: .8125rem !important;
    font-weight: 600;
    padding: .4em .6em;
    border-radius: 4px;
}

.refine-search-container .badge-close {
    background-color: transparent !important;
    color: var(--site-chip-fg, #fff) !important;
    opacity: .85;
    margin-left: .35rem;
    cursor: pointer;
}

.refine-search-container .badge-close:hover {
    opacity: 1;
}

.refine-search-container .refine-clear-all {
    margin: .25rem 0 .75rem 0;
}

/* Filter value rows (Full Time 1, Peckham 1, ...). The label carried an inline
   colour and the row was followed by an <hr />; both are gone, so the row is
   styled here as a compact clickable line. */
.refine-search-container .refine-filter-row {
    margin-bottom: .15rem;
}

/* Label and count are separate inline elements, so with wrapping text the
   badge drifted away from its label and rows did not line up. Lay the row out
   as a flex line: label takes the space, badge sits tight after it on the
   first line, both centred on the same axis. */
/* Full-width row with the count pushed to the right edge — the standard
   faceted-search layout. The row was inline-flex (shrink-to-fit), so each
   badge landed wherever its label happened to end and the counts formed a
   ragged edge down the column. */
.refine-search-container .refine-filter-row .btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem .25rem !important;
    border: 0;
    border-radius: 4px;
    text-align: left;
    white-space: normal;
    text-decoration: none;
}

.refine-search-container .refine-filter-row .btn:hover {
    background-color: #f4f7fa;
}

.refine-search-container .refine-filter-row label {
    margin-bottom: 0;
    cursor: pointer;
    /* Take the free space so the count is pushed to the right. */
    flex: 1 1 auto;
}

/* Counts share one width so they form a straight right-hand column instead of
   each badge sizing to its own digits. */
.refine-search-container .refine-filter-row .badge {
    flex: 0 0 auto;
    min-width: 1.75rem;
    text-align: center;
    font-weight: 600;
}

/* .sectors was a white inset punched out of the old coloured slab. The panel is
   white now, so the inset is redundant — keep the padding, drop the fill. */
.refine-search-container .sectors {
    background-color: transparent !important;
    border-radius: 5px;
    padding: 0;
}

/* Was #fff for the coloured slab; on the white panel that was invisible. */
.refine-search-container .refine-link {
    color: var(--site-primary, #0b3b56);
}

.refine-search-container .refine-link:hover {
    text-decoration: underline;
}

.refine-min-salary {
    border-radius: .25rem .25rem 0 0 !important;
}

.refine-max-salary {
    border-radius: 0 !important;
}

.refine-per-salary {
    border-radius: 0 0 .25rem .25rem !important;
}

.text-secondary {
    color: #3c3487 !important;
}

/* ------------------------------------------------------------
   Social
   ------------------------------------------------------------ */
.social-links {
    padding: 0;
    margin-top: 5px;
}

.social-links img {
    max-width: 100%;
    vertical-align: bottom;
}

.social {
    display: inline-block;
    margin-left: 10px;
}

.social img {
    width: 32px;
}

/* ------------------------------------------------------------
   Inline SVG social icons (<SocialIcon>) — replaces the old
   /assets/img/*.png files and .icon-* font glyphs, both of which
   silently broke on sites that didn't ship those assets.
   fill="currentColor" means they inherit the link colour.
   ------------------------------------------------------------ */
.social-icon {
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.2s ease;
}

a:hover > .social-icon {
    opacity: 0.75;
}

/* The footer sizes its icons off the li font-size, so let the SVG
   scale with it rather than sticking at the 24px default attribute. */
footer .social ul li .social-icon {
    width: 1em;
    height: 1em;
}

.spinner-border {
    margin-right: 5px;
}

/* ------------------------------------------------------------
   Sign-in / register split panel
   ------------------------------------------------------------ */
.signin-reg-content {
    padding: 40px;
}

.signin-reg-left-panel {
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.signin-reg-left-panel::before {
    content: "";
    background-color: #242756;
    display: block;
    height: 100%;
    opacity: .1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

.signin-reg-left-panel.register {
    background-image: var(--site-img-register-bg, none);
}

.signin-reg-left-panel.signin {
    background-image: var(--site-img-signin-bg, none);
}

.signin-reg-left-panel h2 {
    color: #fff;
}

.signin-reg-left-panel h4 {
    color: #fff;
}

.left-panel-content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    text-align: center;
}

.left-panel-content .la {
    font-size: 144px;
}

.right-panel-content {
    background-color: #fff;
}

.contact-us-container img {
    width: 32px;
    height: auto;
}

.candidate-tips-container a {
    color: #3e3e6d;
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Social login buttons
   ------------------------------------------------------------ */
.social-login-container ul {
    margin: 0;
    font-size: 0;
}

.social-login-container ul li {
    padding: 0;
    width: calc(100% / 3);
}

.social-login-container button {
    text-decoration: none;
    color: #fff;
    height: 46px;
    display: block;
    padding: 12px;
    font-size: 16px;
    border-radius: 0;
    width: 100%;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.social-login-container button:hover,
.social-login-container button:focus {
    opacity: .9;
    color: #fff;
}

.social-google {
    background-color: #4285f4;
}

.social-facebook {
    background-color: #3b5998;
}

.social-linkedin {
    background-color: #4875b4;
}

.social-twitter {
    background-color: #1da1f2;
}

/* ------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------ */
.flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.equal-heights {
    width: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.equal-heights-content {
    width: 50%;
    height: auto;
}

@media (max-width: 767px) {
    .equal-heights {
        width: 100%;
        display: block !important;
    }

    .equal-heights-content {
        width: 100%;
    }
}

.absolute-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    display: table\9 !important;
}

.absolute-center-child {
    display: table-cell;
    vertical-align: middle;
}

.padding-5 {
    padding: 40px !important;
}

.padding-0 {
    padding: 0 !important;
}

.margin-b-0 {
    margin-bottom: 0 !important;
}

.green {
    color: #008000;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

/* ------------------------------------------------------------
   Recruiter/box
   ------------------------------------------------------------ */
.recruiters-container {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 767px) {
    .recruiters-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.recruiter-box {
    background-color: #fff;
    border: 1px solid #05386b;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 25px;
}

.recruiter-box-col:first-child {
    padding: 16px;
    margin: 24px 0;
    width: 100%;
}

.recruiter-box-col:last-child {
    padding: 0 24px;
    margin: 24px 0;
    width: 100%;
}

.recruiter-list {
    float: left;
}

.outer {
    position: relative;
}

.outer:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 75%;
}

.outer > .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ------------------------------------------------------------
   Hero — themed (per-site image via --site-hero-image)
   ------------------------------------------------------------ */
.hero-container {
    position: relative;
    background-image: var(--site-hero-image, none);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
}

.hero-container > .container {
    position: relative;
    height: 100%;
}

.hero-container .bg-white-transparent {
    background-color: rgba(255, 255, 255, .5);
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.hero-container .bg-black-transparent {
    background: var(--b-theme-secondary);
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 767px) {
    .hero-container {
        margin-top: 0 !important;
    }
}

/* ------------------------------------------------------------
   Hovercap
   ------------------------------------------------------------ */
.hoverwrap {
    position: relative;
}

.hoverwrap img {
    width: 100%;
}

.hovercap {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
    background-color: #073869;
    color: #fff;
}

/* ------------------------------------------------------------
   City image backgrounds (shared)
   ------------------------------------------------------------ */
.img-background {
    background-color: #204d74;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-edinburgh {
    background-image: var(--site-img-edinburgh, none);
}

.img-liverpool {
    background-image: var(--site-img-liverpool, none);
}

.img-oxford {
    background-image: var(--site-img-oxford, none);
}

.img-birmingham {
    background-image: var(--site-img-birmingham, none);
}

.img-manchester {
    background-image: var(--site-img-manchester, none);
}

/* ------------------------------------------------------------
   Slide-up thumbnail (job carousel/featured)
   Themed: summary backdrop = Blazorise primary
   ------------------------------------------------------------ */
.slide-up-thumbnail {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 24px;
    height: 190px;
    width: 100%;
    background-color: #fff;
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .19);
    border-radius: 5px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slide-up-thumbnail * {
    -webkit-transition: all .35s;
    transition: all .35s;
    box-sizing: border-box;
}

.slide-up-thumbnail h1,
.slide-up-thumbnail p {
    display: none;
    opacity: 0;
}

.slide-up-thumbnail a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.slide-up-thumbnail:hover .slide-up-thumbnail-summary,
.slide-up-thumbnail:focus .slide-up-thumbnail-summary {
    padding: 0 0 8px 0;
    max-height: 160px;
}

.slide-up-thumbnail:hover h1,
.slide-up-thumbnail:focus h1,
.slide-up-thumbnail:hover p,
.slide-up-thumbnail:focus p {
    display: block;
    opacity: 1;
}

.slide-up-thumbnail-summary {
    position: absolute;
    max-height: 70px;
    font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: hidden;
    opacity: .9;
    background-color: var(--b-theme-primary);
    border-radius: 2px;
    will-change: height, padding;
}

.slide-up-thumbnail-summary h1 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

.slide-up-thumbnail-summary p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}

.slide-up-thumbnail-summary h2,
.slide-up-thumbnail-summary h4 {
    color: #fff;
}

/* ------------------------------------------------------------
   Job/Candidate list
   ------------------------------------------------------------ */
.job-description {
    white-space: pre-line;
}

/* Job result cards. The old treatment was a hard #9c9c9c border with a heavy
   shadow and a 48px gap, which read as a boxed table row rather than a card and
   sat oddly against the softer cards used elsewhere on the site. Aligned with
   the shared card language: soft grey border, 8px radius, light shadow, and a
   tighter rhythm so the list scans as a set rather than isolated blocks. */
.job-list-container .job-list,
.job-list {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e2e5e9;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
    margin-bottom: 20px;
    border-radius: 8px;
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
}

/* Lift on hover so the whole card reads as the clickable unit it is. */
.job-list-container .job-list:hover,
.job-list:hover {
    border-color: var(--site-primary, #b9bfc6);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* Featured/Enhanced jobs are highlighted with a border. This was hardcoded red
   (#fa3c3b), which clashes on sites whose palette is nowhere near red — on
   Dental Staff (sky blue) a red-bordered card looked like an error state rather
   than a promoted listing.

   Sites can now set --site-featured-border, falling back to their brand colour
   via --site-primary, and finally to the original red so sites that define
   neither are unchanged. */
.job-list-container .job-list.enhanced,
.job-list.Enhanced {
    border: 2px solid var(--site-featured-border, var(--site-primary, #fa3c3b));
}

.list-footer {
    background-color: #f4f4f4;
    margin: 20px -20px -20px -20px;
    padding: 12px;
    border-radius: 0 0 2px 2px;
}

/* Salary was hardcoded #fa3c3b red — the same clash the featured border had,
   reading as an error rather than a highlight on a non-red palette. Themed,
   with the red kept as the fallback so sites that set nothing are unchanged. */
.candidate-list-container .candidate-list .job-salary,
.job-list-container .job-list .job-salary {
    color: var(--site-salary-color, var(--site-primary, #fa3c3b));
    margin-bottom: 4px;
    font-weight: 700;
}

/* Salary strings are long ("£90,000 - £120,000 Per Annum") and sit in a
   quarter-width right-aligned column, so at body size they wrapped mid-phrase
   and left ragged gaps — the column was not too small, the text was too big
   for it. Slightly smaller, tighter leading, and wrapping only at spaces
   rather than inside a figure. */
.job-list .job-salary {
    font-size: .9375rem;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* Keep each money figure and its period together so a break can only happen
   at the separating spaces. */
.job-list .job-location {
    font-size: .875rem;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   Modal flash on load
   ------------------------------------------------------------
   Blazorise renders a <Modal> into the server-side HTML with class="modal" and
   no inline display, relying on CSS/JS to hide it. Bootstrap's own
   `.modal { display: none }` lives in the CDN stylesheet, so between first
   paint and that stylesheet applying, every Save Job modal on the results page
   renders inline in the document flow — the page visibly grows and scrolls
   before they disappear.

   Hiding it here (same stylesheet as the rest of the page chrome) closes that
   gap. `.show` is what Blazorise adds when the modal is actually opened, so
   the modal still works normally. */
.modal:not(.show) {
    display: none !important;
}

/* ------------------------------------------------------------
   Job card internals
   ------------------------------------------------------------ */

/* The title link had class "pink-link", which is defined in no stylesheet —
   a leftover from another site — so titles fell back to default link styling. */
.job-list .job-title-link {
    color: var(--site-primary, #0b3b56);
    text-decoration: none;
}

.job-list .job-title-link:hover .job-title {
    text-decoration: underline;
}

.job-list .job-title {
    color: inherit;
    font-weight: 700;
}

/* "New" used Bootstrap 3's .label .label-warning, which do not exist in
   Bootstrap 4, so the badge rendered as unstyled inline text. */
/* The badge follows an inline <h3>, and a later `.job-status { line-height:
   25px }` rule pushed it off the title's baseline — most visible on mobile
   where the title wraps. Reset the line-height and align to the middle of the
   text it sits beside. */
.job-list .badge.job-status {
    background-color: var(--site-new-badge-bg, #f0ad4e);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1 !important;
    padding: .35em .6em;
    border-radius: 4px;
    vertical-align: middle;
    display: inline-block;
    margin-left: .5rem !important;
    white-space: nowrap;
}

/* Keep the title and its badge on a shared baseline when the title wraps. */
.job-list .job-title {
    vertical-align: middle;
}

/* The description carried an inline `border-top: solid 1px darkgrey`, a hard
   dark rule inside every card. Replaced with a lighter separator and spacing. */
.job-list .job-description {
    margin-top: .25rem;
    margin-bottom: 0;
    padding-top: .75rem;
    border-top: 1px solid #eceef1;
    color: #5b6672;
    font-size: .875rem;
    line-height: 1.55;
    /* Summaries are rendered with white-space:pre-line, so a feed job with a
       long shift list turned the card into a wall of text. Clamp to a few
       lines — the full text is on the job page. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Employer logo: uploads are arbitrary sizes (one live logo is 21240px wide),
   so cap it and keep it inside its column instead of dictating the row height. */
/* NOTE: a later `.img-responsive { width: 100% }` rule in this file overrides
   plain declarations here regardless of order in the source, so the cap has to
   be !important or the logo renders at full column width. */
/* Employer logos are whatever the employer uploaded — wide banners, square
   marks and tall portraits all arrive through the same field.

   Sizing by max-height alone protected against portraits but made wide
   banners tiny, because width was never the constraint. Instead give the
   image a fixed BOX (full column width, capped height) and let object-fit:
   contain fit either orientation inside it: a landscape banner fills the
   width, a portrait is limited by the height, and neither is distorted or
   allowed to set the row height.

   NOTE: a later `.img-responsive { width: 100% }` rule in this file overrides
   plain declarations here regardless of source order, so these have to be
   !important. */
.job-list .col-md-3 img,
.job-list .col-md-2 img,
.job-list .img-responsive {
    display: block;
    width: 100% !important;
    /* Uploaded logos range from 1:1 squares to 5.8:1 banners. object-fit
       contain fits the WHOLE image in the box, so whichever dimension runs out
       first decides the rendered size: in a wide, short box a 5.8:1 banner
       hits the width limit and renders at roughly half the box height, which
       is why some logos looked tiny while square ones filled it.

       A taller box (the column is ~200px wide, so 100px is about 2:1) lets a
       banner use the full width AND a useful height, while a square is still
       held to 100px. max-height keeps the tallest portraits in check. */
    height: 100px !important;
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
}

/* The card row was overflowing horizontally — the salary column used
   float-right on top of its grid width, which pushed the row wider than the
   card and clipped the title. The float is gone from the markup; this stops
   any remaining overflow escaping the card. */
.job-list > .row {
    margin-left: 0;
    margin-right: 0;
}

.job-list .row > [class*="col-"] {
    min-width: 0;
}

/* Mobile: the columns stack, so the logo sits directly above the title. Give
   it a little breathing room and keep it left-aligned with the text. */
/* ------------------------------------------------------------
   Job card — mobile
   ------------------------------------------------------------
   The desktop card is a 3-column split (logo | title | salary). On a narrow
   screen that leaves the logo squeezed into a third of the width and the
   salary right-aligned under a cramped title, so the card reads as
   disconnected fragments rather than one listing.

   On mobile the card becomes a single left-aligned column: logo on its own
   line at a readable size, then title, employer, salary and location in
   normal reading order. */
@media (max-width: 767px) {
    .job-list .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Same box approach as desktop. `width: auto` here repeated the original
       mistake: a WIDE logo constrained only by a 48px height stays small,
       because width is never the limit. Give it a box and let object-fit
       contain do the work — a banner uses the width, a square or portrait is
       held by the height. Capped at 220px so a wide banner does not dominate
       the card on a narrow screen. */
    .job-list .col-md-3 img,
    .job-list .col-md-2 img,
    .job-list .img-responsive {
        height: 64px !important;
        width: 100% !important;
        max-width: 200px !important;
        margin-bottom: .75rem;
    }

    /* Salary/location were right-aligned to sit opposite the title on desktop;
       stacked, that alignment fights the rest of the card. */
    .job-list .row > .text-right,
    .job-list .row > [class*="col-"].text-right {
        text-align: left !important;
    }

    .job-list .job-salary {
        margin-top: .5rem;
    }

    /* Footer: Save and Apply side by side is tight at this width, and Apply
       is the action that matters, so give it the full width under Save. */
    .job-list .list-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .job-list .list-footer > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
    }

    .job-list .list-footer .btn {
        width: 100%;
    }

    .job-list .list-footer .shortlist-btn {
        text-align: left;
    }
}

/* Salary / location column. The markup uses float-right + text-right, which
   fights the grid; keep the right alignment but drop the float so the column
   sits where the grid puts it. */
.job-list .col-md-4.float-right {
    float: none !important;
}

.job-list .job-location a {
    color: #5b6672;
}

.job-list .poster-name a {
    color: #5b6672;
    font-size: .875rem;
}

.job-list .job-posteddate {
    font-size: .8125rem;
}

/* The card wrapper carried inline `color:#666666`. */
.job-list {
    color: #5b6672;
}

/* Footer actions. The buttons use float-left/float-end, which leaves them
   vertically unaligned and ignores the gap; lay the row out with flex so Save
   and Apply sit on one line at opposite ends. */
.job-list .list-footer {
    background-color: #fafbfc;
    border-top: 1px solid #eceef1;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.job-list .list-footer > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.job-list .list-footer .btn {
    float: none !important;
}

/* Save and Apply were the same size and weight, so the card offered two
   equally loud actions when only one is the conversion — and the title is
   already a link, giving the card three competing targets. Demote Save to a
   quiet icon-led action and let Apply carry the weight.

   Scoped to .job-list so the two shared components (used on job detail, apply
   and elsewhere) keep their existing treatment. */
.job-list .list-footer .shortlist-btn {
    border-color: transparent;
    background-color: transparent;
    color: #6b7683;
    font-weight: 500;
    padding-left: .25rem;
    padding-right: .25rem;
}

.job-list .list-footer .shortlist-btn:hover,
.job-list .list-footer .shortlist-btn:focus {
    background-color: #eef2f6;
    border-color: transparent;
    color: var(--site-primary, #0b3b56) !important;
    text-decoration: none !important;
}

/* Saved state keeps the success colour so it still reads as "done", but stays
   quiet rather than becoming a second solid button. */
.job-list .list-footer .shortlist-btn--saved,
.job-list .list-footer .shortlist-btn--saved:hover {
    color: #2f7d54 !important;
}

.shortlist-btn__icon {
    margin-right: .35rem;
}

/* Apply is the primary action: solid, not outline, so it leads the card. */
.job-list .list-footer .btn-primary,
.job-list .list-footer .btn-outline-primary {
    background-color: var(--site-apply-bg, var(--site-primary, #0b3b56));
    border-color: var(--site-apply-bg, var(--site-primary, #0b3b56));
    color: var(--site-apply-fg, #fff) !important;
    font-weight: 600;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.job-list .list-footer .btn-primary:hover,
.job-list .list-footer .btn-outline-primary:hover {
    filter: brightness(.92);
    color: var(--site-apply-fg, #fff) !important;
    text-decoration: none !important;
}

/* A global `.btn:hover { text-decoration: underline }` earlier in this file
   underlines every button on hover, which reads as a link rather than a
   button. Cancelled for the result-card footer; left alone elsewhere so this
   change does not restyle every button on every site. */
.job-list .list-footer .btn:hover,
.job-list .list-footer .btn:focus {
    text-decoration: none !important;
}

/* Alert Me and other secondary buttons in page content: the existing white-text
   override is scoped to .nav-item, so in content they fell back to Bootstrap's
   default dark text on the theme's secondary. Sites whose secondary is light
   (Dental Staff's cyan) keep dark text for contrast — this just makes it a
   deliberate, readable button rather than an unstyled default. */
.btn-secondary {
    color: var(--site-btn-secondary-fg, #fff) !important;
}

/* Outline secondary (Save Job on result cards). Bootstrap's default hover
   fills with the theme secondary and sets DARK text, which on a site with a
   light secondary reads as the label turning black. Follow the same pattern
   the sites use for .btn-outline-primary: fill with the brand colour and go
   white. --site-btn-outline-hover-fg exists for a site whose brand colour is
   too light for white text. */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--site-btn-outline-hover-bg, var(--site-primary, #6c757d));
    border-color: var(--site-btn-outline-hover-bg, var(--site-primary, #6c757d));
    color: var(--site-btn-outline-hover-fg, #fff) !important;
}

.candidate-list-container .candidate-list .job-location,
.job-list-container .job-list .job-location {
    color: #9c9c9c;
    font-weight: 400;
}

.candidate-posteddate,
.job-posteddate {
    color: #9c9c9c;
    font-size: 14px;
    margin-top: 8px;
}

.candidate-list-container .candidate-list .candidate-title,
.candidate-list-container .candidate-list .job-title,
.job-list-container .job-list .candidate-title,
.job-list-container .job-list .job-title {
    font-size: 20px !important;
}

.job-status {
    margin-left: 10px;
    line-height: 25px;
}

.job-title {
    font-size: 120% !important;
}

/* ------------------------------------------------------------
   Labels
   ------------------------------------------------------------ */
.label {
    font-weight: 400;
    border-radius: 0;
    text-transform: none;
    color: #fff !important;
    transform: skewX(-10deg);
    display: inline-block;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.label-warning {
    background-color: #f0ad4e;
}

.label-error {
    background-color: #f00;
    margin-bottom: 5px !important;
}

.label-success {
    background-color: #008000;
    margin-left: 10px;
    margin-top: -5px;
}

/* ------------------------------------------------------------
   Drag-drop (Plk.DragDrop)
   ------------------------------------------------------------ */
.plk-dd-noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.plk-dd-inprogess > * {
    pointer-events: none;
}

.plk-dd-dropzone {
    min-height: 50px;
}

.plk-dd-spacing {
    height: 10px;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: #d3d3d3;
    opacity: .6;
    animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over > div {
    background-color: #d3d3d3;
    opacity: .6;
    animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over-denied {
    background-color: #f00;
    opacity: .6;
    animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0;
}

.plk-dd-in-transit > div {
    opacity: 0;
}

/* ------------------------------------------------------------
   Top reasons (numbered list)
   ------------------------------------------------------------ */
.top-reasons li {
    counter-increment: index;
    display: flex;
    align-items: center;
    padding: 12px 0;
    box-sizing: border-box;
}

.top-reasons li::before {
    content: counters(index, " ", decimal);
    font-size: 40px;
    text-align: right;
    font-weight: 700;
    padding-right: 12px;
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
    color: #fa3c3b;
    line-height: .9;
}

.top-reasons {
    counter-reset: index;
    padding: 0;
}

/* ------------------------------------------------------------
   Searches list
   ------------------------------------------------------------ */
.list-searches {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

@media (max-width: 992px) {
    .list-searches {
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-count: 2 !important;
    }
}

.list-searches li {
    margin-bottom: 8px;
    width: 100%;
}

.list-searches li a {
    font-size: 15px;
    display: inline-flex;
    color: #707070;
    font-weight: 600;
    width: 100%;
}

.long-list a {
    display: flex;
    padding: 8px 16px;
    border-radius: 23px;
    margin-bottom: 16px;
    min-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    padding: 0 16px;
}

/* ------------------------------------------------------------
   Misc utility / images
   ------------------------------------------------------------ */
.img-rounded {
    border-radius: 6px;
}

.img-responsive {
    max-width: 100%;
    width: 100%;
}

.BackgroundImage-Container {
    position: relative;
    width: 100%;
    height: 100%;
}

.BackgroundImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list {
    height: 550px !important;
}

@media (min-width: 992px) {
    #refine-search {
        display: block;
    }
}

/* ------------------------------------------------------------
   Responsive show/hide helpers (Bootstrap-3 style)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   Layout placeholders (prevent CLS)
   ------------------------------------------------------------ */
.b-layout-content {
    min-height: 700px;
}

/* Double scrollbar.
   Diagnosed in a real browser rather than from the stylesheet: the element that
   actually scrolled was the INNERMOST `.b-layout` (the one holding header,
   @Body and footer), measured at height 900px with 1827px of content.

   Two Blazorise rules combine to cause it:
     .b-layout-root { height: 100vh }  — pins the whole tree to the viewport
     .b-layout      { overflow-x: hidden }

   The second is the subtle half. Per the CSS overflow spec, `overflow-x: hidden`
   with a *visible* overflow-y forces the used value of overflow-y to `auto` —
   you cannot have one axis clipped and the other visible. So every .b-layout
   silently becomes a scroll container, and the fixed height gives it something
   to scroll.

   Fixes: let the root grow past the viewport (min-height keeps a sparse page's
   footer at the bottom), and let the inner layouts size to their content so
   nothing but the document scrolls. overflow-x stays hidden — it is there to
   stop horizontal bleed — but overflow-y is put back to visible explicitly. */
.b-layout-root {
    height: auto;
    min-height: 100vh;
}

/* The rule that applies to the scrolling element is Blazorise's
   `.b-layout.b-layout-has-sider .b-layout { overflow-x: hidden }` — three
   classes, so a bare `.b-layout` override loses the cascade and is silently
   ignored. Matched here at equal specificity.

   BOTH axes must be reset, and the height freed:

   * height — inherited from .b-layout-root's `100vh`, so the box was locked to
     the viewport while its content was taller. This is the main cause.
   * overflow-x — keeping `hidden` here was tried and regressed: on any page
     with horizontal overflow (a container-less Bootstrap .row on /jobs, for
     one) the clip produces an inner *horizontal* scrollbar, which is the
     second bar all over again.
   * overflow-y — per the CSS overflow spec, when one axis is `hidden` and the
     other `visible`, the visible one computes to `auto`. So overflow-x must go
     visible too or the scroll container comes straight back.

   Note this stops MASKING pre-existing horizontal overflow rather than causing
   it; /jobs bleeds ~15px at desktop and needs its own fix. Clipping it at the
   page scroller was hiding a layout bug at the cost of a permanent second
   scrollbar on every page. */
.b-layout.b-layout-has-sider .b-layout {
    height: auto;
    overflow-x: visible;
    overflow-y: visible;
}

.homepage-popularjobs {
    min-height: 523px;
}

.homepage-top-locations {
    min-height: 429px;
}

.homepage-description {
    min-height: 680px;
}

.browse-location-container {
    min-height: 220px;
}

div[class^='search-results'] {
    min-height: 700px;
}

.job-page {
    min-height: 800px;
}

.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: none;
}

/* ------------------------------------------------------------
   Tox (TinyMCE) tweaks
   ------------------------------------------------------------ */
.tox-promotion,
.tox-statusbar__branding {
    display: none;
}

.tox .tox-promotion + .tox-menubar {
    grid-column: 1 / -1 !important;
}

/* ------------------------------------------------------------
   Page image floats
   ------------------------------------------------------------ */
.page_image_wrap_left {
    float: left;
    margin: 0 10px 0 10px;
}

.page_image_wrap_right {
    float: right;
    margin: 0 0 10px 10px;
}

/* ------------------------------------------------------------
   Card image cap
   ------------------------------------------------------------ */
.card-img-top {
    height: 250px;
    object-fit: cover;
}

/* ------------------------------------------------------------
   Clearfix
   ------------------------------------------------------------ */
.cf:after {
    content: "";
    display: table;
    clear: both;
}

/* ------------------------------------------------------------
   Homepage candidate / employer panels — themed
   (background-color and image from per-site vars)
   ------------------------------------------------------------ */
.candidates {
    padding: 70px 0;
    color: #fff;
    background-color: var(--site-candidates-bg, transparent);
    background-image: var(--site-candidates-bg-image, none);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: center right;
}

.candidates h1 {
    color: #fff;
}

.candidates h1 span {
    color: #4fbcfd;
}

.candidates .btn-green {
    background-color: var(--b-theme-primary, #03b921);
    color: #fff;
    border-radius: 5px;
}

.employers {
    padding: 70px 0;
    color: #fff;
    background-color: var(--site-employers-bg, transparent);
    background-image: var(--site-employers-bg-image, none);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: center left;
}

.employers h1 {
    color: #fff;
}

.employers h1 span {
    color: #0b3b56;
}

.employers .btn-green {
    background-color: var(--b-theme-primary, #03b921);
    color: #fff;
    border-radius: 5px;
}

@media (max-width: 992px) {
    .candidates,
    .employers {
        background-size: cover !important;
        background-position: center !important;
    }

    .candidates .col-md-5 {
        background-color: rgba(11, 59, 86, .8) !important;
        padding: 30px !important;
    }

    .employers .col-md-5 {
        background-color: rgba(79, 188, 253, .9) !important;
        padding: 30px !important;
    }
}

/* ------------------------------------------------------------
   Packages (pricing)
   ------------------------------------------------------------ */
.packages {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.packages .card {
    padding: 2rem;
}

.packages .card-header {
    font-size: 2.5rem;
    background-color: #fff !important;
    border: #fff !important;
}

.packages .table td,
.packages .table th {
    border-top: none !important;
}

/* The 2.5rem on .packages .card-header sizes the tick image's line box; the
   heading inside it needs its own size or it renders enormous. */
.packages .card-header h2 {
    font-size: 1.5rem;
    margin: 0.75rem 0 0 0;
}

.packages .card-header img {
    max-width: 96px;
}

.package {
    max-width: 20rem !important;
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 1 100% !important;
    -ms-flex: 1 1 100% !important;
    flex: 1 1 100% !important;
    padding: 3rem !important;
}

/* Without the 3-up overlap the cards have no visible edge, so a lone package
   floated on the page background with nothing marking it as a card. Give every
   package ordinary card chrome... */
.packages .package {
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
    padding: 2rem !important;
}

/* ...then drop it again for the 3-up layout, which gets its look from the
   overlap and hero padding instead. (A combinator cannot live inside :not(),
   so this is expressed as an override rather than an exclusion.) */
.packages .package:nth-last-child(3):first-child,
.packages .package:nth-last-child(3):first-child ~ .package {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 3rem !important;
}

/* The raised-centre pricing layout below (hero padding on the first card, the
   other two tucked in behind it via order + translateX) only makes sense with
   exactly THREE packages. Sites can have any number: Dental Staff has one, and
   a lone card matches BOTH :first-child and :last-child, so it picked up the
   5rem hero padding AND a -2rem shift and rendered off-centre and oddly
   proportioned. With 4+ the rules styled only cards 1, 2 and the last, leaving
   the middle ones unordered and unshifted.

   `.package:nth-last-child(3):first-child` matches a first card that has
   exactly two siblings after it — i.e. only when the deck holds three — and
   `~ .package` extends that to the other two. Any other count falls through to
   the plain .package rule and renders as equal, centred, wrapping cards. */
.packages {
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.package:nth-last-child(3):first-child:not(.package--offer) {
    padding: 5rem 2rem !important;
}

.package:nth-last-child(3):first-child {
    -webkit-box-ordinal-group: 2 !important;
    -webkit-order: 1 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important;
    z-index: 1 !important;
}

.package:nth-last-child(3):first-child ~ .package:nth-child(2) {
    -webkit-transform: translateX(2rem) !important;
    -ms-transform: translateX(2rem) !important;
    transform: translateX(2rem) !important;
}

.package:nth-last-child(3):first-child ~ .package:last-child {
    -webkit-box-ordinal-group: 3 !important;
    -webkit-order: 2 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important;
    -webkit-transform: translateX(-2rem) !important;
    -ms-transform: translateX(-2rem) !important;
    transform: translateX(-2rem) !important;
}

.package:nth-last-child(3):first-child ~ .package:last-child h2 {
    margin-bottom: 4rem !important;
}

@media (max-width: 767px) {
    .package {
        max-width: 100% !important;
    }
}

.package-price {
    color: #fff;
    padding: 25px;
    background-color: #0b3b56;
    font-weight: bold;
}

.package-price td {
    border-radius: .25em;
}

.payment-summary .plan-features li {
    margin: 8px 0;
}

.payment-status-icon {
    font-size: 6em;
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.payment-info h2 {
    font-size: 24px;
    font-weight: normal !important;
}

.payment-info h5 {
    margin-top: 20px;
}

.plan-features {
    margin-bottom: 32px;
    text-align: left;
    padding-left: 24px;
    font-size: 14px;
}

.bg-info {
    background-color: #d9edf7;
    padding: 10px;
}

/* ------------------------------------------------------------
   Blog/news featured image
   ------------------------------------------------------------ */
.blog-post-featured-img,
.news-post-featured-img {
    float: right;
    width: 400px;
    background-color: #fff;
    border-radius: 10px;
    height: 250px;
    margin: 0 0 15px 15px;
    overflow: hidden;
    max-width: 400px;
    position: relative;
}

.blog-post-featured-img img,
.news-post-featured-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------
   Misc
   ------------------------------------------------------------ */
.b-tooltip .input-group-text {
    height: 50px !important;
}

/* An addon label wrapped in a Blazorise <Tooltip> (e.g. the password ⓘ on
   quick apply / register) sits inside a .b-tooltip element, so Bootstrap's
   `.input-group > .input-group-prepend > .input-group-text` rules that square
   off the corners where the label meets the input never match — the join was
   rounded on both sides. Square them here. */
.input-group > .input-group-prepend > .b-tooltip > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .b-tooltip > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--b-theme-secondary) !important;
    color: #fff !important;
}

.nav-link {
    padding: 0.7em 2em !important;
}

.hidden-to-purchase {
    cursor: help;
    -webkit-filter: blur(7px);
    filter: blur(7px);
}

iframe.ql-video {
    width: 100% !important;
    min-height: 500px !important;
}

.tab-content {
    margin-top: 15px;
}

.custom-form {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
}

/* ------------------------------------------------------------
   Site-icon font hook — sites can override --site-icon-font-family.
   The actual @font-face declaration lives in the per-site CSS so
   only that site downloads its glyph file.
   ------------------------------------------------------------ */
.icon-library, .icon-file, .icon-users, .page-title.user:before,
.icon-facebook, .icon-twitter, .icon-linkedin, .icon-target,
.icon-arrow-right, .btn-arrow:after, .icon-arrow-up,
.icon-checkmark, .icon-cancel, .icon-calendar-alt-stroke,
.icon-plus, .page-title.add:before, .icon-minus,
.page-title.edit:before, .icon-notice, .ic-cal {
    font-family: var(--site-icon-font-family, inherit);
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}