/*
  Colour schemes (css-demo, 2026-10-27).
  Loaded after the Telerik "Metro" base skin and css/Metro.css, followed by one colour file
  (HarbourBlue.css, Evergreen.css, Slate.css, Midnight.css, Plum.css) that sets the --s-* variables.
  Every colour below comes from those variables, so a new scheme is a new colour file only.
  !important is used where the Telerik skin's own rules would otherwise win.
*/

/* Fallback values (Harbour Blue), in case no colour file is loaded */
:root {
    --s-page: #f4f7fa;
    --s-surface: #ffffff;
    --s-surface-2: #eef3f8;
    --s-text: #1b2a38;
    --s-muted: #5d6b78;
    --s-line: #d5e0ea;
    --s-main: #1f5f99;
    --s-main-hover: #184d7d;
    --s-main-text: #ffffff;
    --s-tint: #e6eff7;
    --s-head: #1f5f99;
    --s-head-text: #ffffff;
    --s-slot: #2f7fc0;
    --s-slot-hover: #1f5f99;
    --s-closed: #e9eef3;
    --s-closed-line: #dde4eb;
    --s-error: #b42318;
    --s-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --s-radius: 8px;
}

/* Scrollbars (lists, calendar, page) in the scheme's colours */
html body * {
    scrollbar-color: var(--s-line) var(--s-surface);
}

html body ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html body ::-webkit-scrollbar-track {
    background: var(--s-surface);
}

html body ::-webkit-scrollbar-thumb {
    background: var(--s-line);
    border-radius: 5px;
    border: 2px solid var(--s-surface);
}

html body ::-webkit-scrollbar-button {
    display: none;
}

/* Page and text */
html, body,
.content, .contentImg, .winContent {
    background-color: var(--s-page) !important;
    color: var(--s-text) !important;
}

html body,
html body td,
html body input,
html body select,
html body textarea,
html body button {
    font-family: var(--s-font) !important;
    font-size: 14px;
}

a:link, a:visited, a:active {
    color: var(--s-link, var(--s-main)); /* --s-link only where links need their own colour (Midnight) */
    font-weight: 600;
}

a:hover {
    color: var(--s-link, var(--s-main-hover));
    text-decoration: none;
}

.smalltext, .copytext {
    font-family: var(--s-font) !important;
    color: var(--s-muted) !important;
}

/* Headings in the pop-up pages (common.css makes them black) */
.title, .subtitle, .subsubtitle, .phonetitle {
    font-family: var(--s-font) !important;
    color: var(--s-text) !important;
}

.pagelines {
    background-color: var(--s-line) !important;
}

hr {
    border-color: var(--s-line) !important;
}

/* Header bar (clinic name, Help & Support) */
table.header,
table.header .RadMenu,
table.header .rmRootGroup {
    background: var(--s-head) !important;
    border: 0 !important;
}

table.header td.rmText a,
table.header .rmText,
table.header .rmLink {
    color: var(--s-head-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

table.header .rmLink:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Don't keep the Metro skin's blue "selected" or "focused" box on a menu item after it's clicked */
table.header .RadMenu .rmSelected .rmLink,
table.header .RadMenu .rmFocused .rmLink,
table.header .RadMenu .rmLink.rmSelected,
table.header .RadMenu .rmLink.rmFocused {
    background: transparent !important;
}

/* The menu items have a fixed width (115px), so keep their text a little smaller than the clinic name */
table.header .RadMenu .rmLink,
table.header .RadMenu .rmText {
    font-size: 13px !important;
    white-space: nowrap;
}

/* Panel boxes (Practitioner Type, Appointment Type, Practitioner): flat cards instead of image corners */
td.TopLeft, td.TopRight,
td.MiddleLeft, td.MiddleRight,
td.BottomLeft, td.BottomCenter, td.BottomRight {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

td.TopCenter {
    background: var(--s-head) !important;
    color: var(--s-head-text) !important;
    font-family: var(--s-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    height: auto !important;
    padding: 9px 12px !important;
    border-radius: var(--s-radius) var(--s-radius) 0 0;
}

td.TopCenter img {
    display: none !important;
}

/* List boxes */
html body .RadListBox {
    background: var(--s-surface) !important;
    border: 1px solid var(--s-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--s-radius) var(--s-radius);
    overflow: hidden;
}

html body .RadListBox .rlbGroup {
    background: var(--s-surface) !important;
    border: 0 !important;
}

html body .RadListBox .rlbItem,
html body .RadListBox .rlbText {
    color: var(--s-text) !important;
    background: transparent !important;
    border: 0 !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

html body .RadListBox .rlbItem {
    padding: 6px 12px !important;
    border-bottom: 1px solid var(--s-surface-2) !important;
}

html body .RadListBox .rlbHovered {
    background: var(--s-tint) !important;
}

html body .RadListBox .rlbSelected,
html body .RadListBox .rlbSelected.rlbHovered,
html body .RadListBox .rlbSelected.rlbActive {
    background: var(--s-main) !important;
    color: var(--s-main-text) !important;
}

html body .RadListBox .rlbSelected td,
html body .RadListBox .rlbSelected .rlbText {
    color: var(--s-main-text) !important;
}

/* Calendar (RadScheduler) */
html body .RadScheduler {
    border: 1px solid var(--s-line) !important;
    border-radius: var(--s-radius);
    overflow: hidden;
    background: var(--s-surface) !important;
}

html body .RadScheduler .rsTopWrap,
html body .RadScheduler .rsContent {
    background: var(--s-surface) !important;
    border: 0 !important;
}

html body .RadScheduler .rsHeader {
    background: var(--s-head) !important;
    border: 0 !important;
}

html body .RadScheduler .rsHeader h2,
html body .RadScheduler .rsHeader a,
html body .RadScheduler .rsHeader em {
    color: var(--s-head-text) !important;
    font-family: var(--s-font) !important;
}

html body .RadScheduler .rsHeader h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important; /* the Metro skin shows the dates in lowercase */
}

/* Empty corner cells above the time column and beside the scrollbar */
html body .RadScheduler .rsSpacerCell,
html body .RadScheduler .rsHorizontalHeaderWrapper,
html body .RadScheduler .rsVerticalHeaderWrapper {
    background: var(--s-surface-2) !important;
    border-color: var(--s-line) !important;
}

html body .RadScheduler .rsHorizontalHeaderTable th,
html body .RadScheduler .rsVerticalHeaderTable th,
html body .RadScheduler .rsHorizontalHeaderWrapper,
html body .RadScheduler .rsVerticalHeaderWrapper {
    background: var(--s-surface-2) !important;
    background-image: none !important;
    color: var(--s-text) !important;
    border-color: var(--s-line) !important;
}

html body .RadScheduler .rsHorizontalHeaderTable th a,
html body .RadScheduler .rsVerticalHeaderTable th,
html body .RadScheduler .rsVerticalHeaderTable th div {
    color: var(--s-text) !important;
    font-family: var(--s-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Closed times: a soft stripe drawn in CSS instead of the skin's background picture */
html body .RadScheduler .rsContentTable {
    background-color: var(--s-closed) !important;
    background-image: repeating-linear-gradient(135deg,
        var(--s-closed) 0, var(--s-closed) 6px,
        var(--s-closed-line) 6px, var(--s-closed-line) 7px) !important;
}

html body .RadScheduler .rsContentTable td {
    border-color: var(--s-line) !important;
}

/* Open times */
html body .RadScheduler .rsApt .rsAptOut,
html body .RadScheduler .rsApt .rsAptMid,
html body .RadScheduler .rsApt .rsAptIn,
html body .RadScheduler .rsApt .rsAptContent {
    background: var(--s-slot) !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--s-main-text) !important;
}

html body .RadScheduler .rsApt .rsAptOut {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

html body .RadScheduler .rsApt:hover .rsAptOut,
html body .RadScheduler .rsApt:hover .rsAptMid,
html body .RadScheduler .rsApt:hover .rsAptIn,
html body .RadScheduler .rsApt:hover .rsAptContent {
    background: var(--s-slot-hover) !important;
}

/* "Available" legend square (the footer cell also has class Available, so match the legend by id) */
td[id$="tdAvailable"] {
    background-color: var(--s-slot) !important;
    border-color: var(--s-slot) !important;
    border-radius: 3px;
}

/* Pop-up windows (booking form, terms, support) */
html body .RadWindow td.rwCorner,
html body .RadWindow td.rwBodyLeft,
html body .RadWindow td.rwBodyRight,
html body .RadWindow td.rwFooterLeft,
html body .RadWindow td.rwFooterCenter,
html body .RadWindow td.rwFooterRight {
    background: var(--s-surface) !important;
    background-image: none !important;
}

html body .RadWindow td.rwTitlebar,
html body .RadWindow td.rwTopLeft,
html body .RadWindow td.rwTopRight {
    background: var(--s-head) !important;
    background-image: none !important;
}

html body .RadWindow .rwTitleRow em,
html body .RadWindow .rwTitleRow .rwTitleWrapper em {
    color: var(--s-head-text) !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important; /* the Metro skin shows window titles in capitals */
}

html body .RadWindow .rwControlButtons a,
html body .RadWindow a.rwCloseButton {
    background-color: transparent !important;
    color: var(--s-head-text) !important;
    border-radius: 4px;
}

html body .RadWindow .rwControlButtons a:hover,
html body .RadWindow a.rwCloseButton:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

html body .RadWindow td.rwWindowContent,
html body .RadWindow td.rwStatusbar {
    background: var(--s-surface) !important;
    border-color: var(--s-line) !important;
}

html body .RadWindow {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    border-radius: var(--s-radius);
    overflow: hidden;
}

/* Form fields (inside the booking and contact windows) */
html body input.rfdTextInput,
html body textarea,
html body .RadInput .riTextBox,
html body .RadComboBox .rcbInner,
html body .RadComboBox .rcbInput {
    background: var(--s-surface) !important;
    color: var(--s-text) !important;
    border: 1px solid var(--s-line) !important;
    border-radius: 6px !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

html body input.rfdTextInput,
html body .RadInput .riTextBox {
    padding: 5px 8px !important;
    height: auto !important;
}

html body .RadComboBox .rcbInner {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

html body .RadComboBox .rcbInput {
    border: 0 !important;
}

html body input.rfdTextInput:focus,
html body textarea:focus,
html body .RadInput .riTextBox:focus,
html body .RadComboBox .rcbFocused .rcbInner {
    border-color: var(--s-main) !important;
    outline: 2px solid var(--s-tint) !important;
}

html body .RadComboBoxDropDown {
    background: var(--s-surface) !important;
    border: 1px solid var(--s-line) !important;
    border-radius: 6px;
}

html body .RadComboBoxDropDown .rcbItem,
html body .RadComboBoxDropDown .rcbHovered {
    color: var(--s-text) !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
}

html body .RadComboBoxDropDown .rcbHovered {
    background: var(--s-tint) !important;
}

/* Required-field labels: normal text with a red asterisk, instead of whole labels in red.
   Labels have no id, or an id ending in lbl...; validator messages have other ids and stay red. */
span.Req:not([id]),
span.Req[id*="_lbl"] {
    color: var(--s-text) !important;
    font-weight: 600;
}

span.Req:not([id])::after,
span.Req[id*="_lbl"]::after {
    content: " *";
    color: var(--s-error);
}

span.Req[id]:not([id*="_lbl"]) {
    color: var(--s-error) !important;
}

/* Drop-down list arrow buttons */
html body .RadComboBox .rcbActionButton {
    background: var(--s-surface-2) !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 1px solid var(--s-line) !important;
    color: var(--s-text) !important;
}

html body .RadComboBox .rcbActionButton .p-icon,
html body .RadComboBox .rcbActionButton span {
    color: var(--s-text) !important;
}

/* Chosen time bar at the top of the booking form */
.ApptTimes {
    background: var(--s-tint) !important;
    border: 1px solid var(--s-line) !important;
    border-radius: 6px;
}

.ApptTimes span,
.ApptTimes label {
    color: var(--s-text) !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
}

/* Buttons */
html body input[type="submit"],
html body input[type="button"],
html body a.rfdSkinnedButton,
html body .rfdSkinnedButton button,
html body button.rfdDecorated {
    background: var(--s-main) !important;
    background-image: none !important;
    color: var(--s-main-text) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 18px !important;
    height: auto !important;
    font-family: var(--s-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body a.rfdSkinnedButton:hover,
html body button.rfdDecorated:hover {
    background: var(--s-main-hover) !important;
}

/* Phone page: the Back / Next bar is 70px tall (css/mobile/frm.css); tighten the line above the buttons so they fit above the copyright bar */
html body footer:has([id$="cmdPrev"]) hr {
    margin: 6px 0 10px !important;
}

/* Phone page: the email confirmation checkbox's asterisk sits in a column of its own, which stacks above the checkbox at phone width; hang it in front of the checkbox instead */
@media (max-width: 767px) {
    html body .row:has(> .col-sm-2 > [id$="cvchkApptEmailConfirmYN"]) {
        position: relative;
    }

    html body .row:has(> .col-sm-2 > [id$="cvchkApptEmailConfirmYN"]) > .col-sm-2 {
        position: absolute;
        left: 4px;
        top: 16px;
        width: auto;
        padding: 0;
        font-size: 0;
    }

    html body .row:has(> .col-sm-2 > [id$="cvchkApptEmailConfirmYN"]) > .col-sm-2 > span {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Footer */
table.footer {
    background: var(--s-surface-2) !important;
    border-top: 1px solid var(--s-line);
    color: var(--s-muted) !important;
}

table.footer td,
table.footer span {
    color: var(--s-muted) !important;
}

table.footer td.Available {
    background: var(--s-surface-2) !important;
}

table.footer td.pagelines {
    background: var(--s-line) !important;
}

/* Loading cover while the calendar updates */
.LoadingPanel {
    background-color: var(--s-page) !important;
}