/***
 * Including file: fonts
 */

/* vietnamese */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/afc5ccf2569c42560ad46a4f3ce3a370/font/questrial) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/3bd0d1446306e96802b41e78a37d8bd3/font/questrial2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/e2492b9f4ece42462e443cdc0d02934e/font/questrial3) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Nunito font */

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/7e68df2bfd57eb3ecbb82d14a041a0de/font/nunito) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* JOST */

/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/42b5c066b0bca4fd384ea45ed2ae3617/font/jost) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/****** Montserrat */

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://m-booksystems.co.uk/app/Apps_font/v/50900d729039f381b1f2abe6d010a6dd/font/montserrat) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* End of include: fonts */


/***
 * Including file: colours
 */

/* Some of the colours will go in here to allow
 * easy experimentation.
 * Only a few for now which I'm experimenting with
 * but maybe more later.
 */

/* Set up the palette */
:root {
    --colour-Background: white;
    --colour-Primary1: #DBD5EC;
    --colour-Primary2: #9588BD;
    --colour-Primary3: #5D4C91;
    --colour-Primary4: #332267;
    --colour-Primary5: #110533;
    --colour-Secondary1: #FFFAE3;
    --colour-Secondary2: #FFF2AF;
    --colour-Secondary3: #D3C062;
    --colour-Secondary4: #968324;
    --colour-Secondary5: #4B3E00;
    --colour-MainFontColour: #110533;
    --colour-MenuFontColour: white;
    --colour-Error1: red;
    --colour-Error2: #d73e02;
    --colour-WebsiteBackground: #f4f0ff;
    --colour-WebsiteBackgroundTwo: #fffced;
    }

/* Main colours of panes */

body {
    background-color: var(--colour-Background);
    }

html.page_bookings_home body,
html.page_mobile_bookings_home body {
    background-color: var(--colour-Background);
    }

.MainView.TwoPane {
    background-color: var(--colour-Background);
    }

.MainView>.Pane1 {
    background: var(--colour-Primary5);
    border-right: 0.1rem solid var(--colour-Primary5);
    }

.MainView>.Pane2 {
    background: var(--colour-Background);
}

/* Sidemenu - menuitems */
.MainView>.SideMenuPane .Tree li,
.MainView>.SideMenuPane ul.ActiveList li {
    background: none;
    }

.MainView>.SideMenuPane .Tree>ul>li a,
.MainView>.SideMenuPane ul.ActiveList li span {
    background: none;
    }

.MainView>.SideMenuPane .Tree>ul>li>ul>li,
.MainView>.SideMenuPane ul.ActiveList li {
    background: var(--colour-Primary5);
    }

/* Sidemenu - menu items 3rd level */
.MainView>.SideMenuPane .Tree>ul ul ul li {
    background: var(--colour-Primary5);
    }

/* Sidemenu - menu items 4th level (Is there a 4th level?) */
.MainView>.SideMenuPane .Tree>ul ul ul ul li {
    background: var(--colour-Primary5);
    }

/* Datepicker background */
.ui-datepicker,
.ui-datepicker  div.ui-datepicker-header,
.ui-datepicker  div.ui-datepicker-buttonpane {
    background: var(--colour-Primary5);
    }

.Dialog .ui-datepicker,
.Dialog .ui-datepicker  div.ui-datepicker-header,
.Dialog .ui-datepicker  div.ui-datepicker-buttonpane {
    background: var(--colour-Primary4);
    }




/* Sidemenu "active" item on mobile */
html.Mobile div.BookingsSideMenu,
html.Mobile div.BookingsSideMenu p.Selected,
html.Mobile div.BookingsSideMenu p.Selected:active,
html.Mobile div.BookingsSideMenu p.Selected:hover {
    background-color: var(--colour-Primary5) !important;
    }

html.Mobile div.BookingsCalendar.ButtonContainer {
    background-color: var(--colour-Primary5);
    }


.TimeGrid .TimeGrads {
    background-color: var(--colour-Background);
    }

/* Font colours, which are different in different contexts 
 */

form.Login td,
form.Login th,
form.Login h1 {
    color: var(--colour-Secondary1);
    }

/* Assuming all "main" twopanes will be the same colourscheme... */
.Wrap>.TwoPane .Pane2 p,
.Wrap>.TwoPane .Pane2 h1,
select, option, button span,
a {
    color: var(--colour-MainFontColour);
    }

/* SideMenu colours  */
.MainView>.Pane1,
.MainView>.Pane1 a {
    color: var(--colour-MenuFontColour);
    }

.MainView>.SideMenuPane .Tree li,
.MainView>.SideMenuPane ul.ActiveList li {
    color: var(--colour-MenuFontColour);
    }

/* Active Item highlighting for sidemenu */
.MainView>.SideMenuPane .Tree a.jstree-clicked,
.MainView>.SideMenuPane ul.ActiveList li.Active span {
    color: var(--colour-Secondary2) !important;
    }


/* Buttons */

/* Standard buttons */
.PopupForm.Button,
.RemotePrintButton,
.Button,
.ui-button,
.ui-button:hover,
.ui-button:focus,
ul.ActiveList li.AddNew,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane button,
input[type='submit'],
button,
form input[type='submit'] {
    background-color: var(--colour-Secondary2);
    color: var(--colour-Primary5) !important;
    }

.PopupForm.Button:hover,
.RemotePrintButton:hover,
.RemotePrintButton:hover span,
.Button:hover,
input[type='submit']:hover,
form input[type='submit']:hover,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover,
.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background-color: var(--colour-Secondary3) !important;
    }

/* Action Buttons */
/* Some ActionButtons can be set as "Active" in a data-sensitive way.
 * This style of ActionButton is used for "Flag" style values where the
 * button has a "toggle" effect.
 */
.ActionButton.Active {
    background-color: var(--colour-Secondary3);
    }

.ActionButton.DeletePayment {
    /* Fix for payments, where actionbutton is in a table with alt colours */
    background-color: transparent !important;
    }

/* Specific ActionButton under Contracts */
.MyAccountTabs #Contract .Contract .Product .ActionButton {
    background-color: transparent;
    }
.MyAccountTabs #Contract .Contract .Product .ActionButton:hover {
    background-color: transparent !important;
    }

/* "Jump to Today" button in Datepicker */
.ui-datepicker .ui-icon {
    background-color: var(--colour-Primary1);
    }


/* Time/date pickers */
.TimePicker .ui-widget-header {
    background-color: var(--colour-Primary4);
    }

/* jQueryUI tweaks */
.ui-autocomplete {
    background-color: white !important;
    }
.ui-menu-item a {
    color: black !important;
    }
.ui-menu-item a:hover {
    background-color: var(--colour-Primary3) !important;
    }
.ui-menu-item:hover {
    background-color: var(--colour-Primary3) !important;
    }
.ui-menu-item:hover a {
    background-color: var(--colour-Primary3) !important;
    }

/* DivTable colours */
div.Table>p.Odd {
    background-color: var(--colour-Secondary2);
    }
div.Table>p.Even {
    background-color: var(--colour-Primary1);
    }

.dataTable a {
    color: var(--colour-Primary5);
    }
.NoteCount {
    color: var(--colour-Secondary4);
    }

.NoteCount.HasNotes {
    color: var(--colour-Secondary4);
    }

/* DataTable colours */

/* Row colours */
.EditTable tr.odd,
.WITDataTable tr.odd {
    background-color: var(--colour-Secondary2);
    }
.EditTable tr.even,
.WITDataTable tr.even {
    background-color: var(--colour-Primary1);
    }

/* Not sure what this one is */
table.EditTable tr.Active td {
    background-color: #D3C062;
    }

/* Dropdown and filter input */
.dataTables_wrapper .dataTables_filter input,
table.dataTable tbody tr,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--colour-Secondary2);
    }

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--colour-Secondary2);
    }


/* Misc */
h1.StatusBanner {
    background-color: white;
    }

/* Activity */
.Activity.FullScreen {
    background-color: rgba(0,0,0,0.6);
    }
.Activity.FullScreen .Wrap {
    background-color: rgba(255,255,255,0.8);
    }

/* jQuery tabs */
.ui-tabs .ui-tabs-nav li {
    background-color: var(--colour-Primary1);
    }
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background-color: var(--colour-Primary4);
    }


/* Mobile sidemenu */
html.Mobile div.ButtonBar.BookingsCalendar {
    background-color: var(--colour-Primary5);
    }
html.Mobile div.ButtonBar.BookingsCalendar .Button {
    background-color: var(--colour-Primary3);
    }
html.Mobile div.ButtonBar.BookingsCalendar .Button:hover {
    background-color: var(--colour-Primary5) !important;
    }
html.Mobile div.ButtonBar.BookingsCalendar div.Menu .Button:hover {
    background-color: var(--colour-Primary3) !important;
    color: var(--colour-Secondary3) !important;
    }
html.Mobile div.ButtonBar.BookingsCalendar .Button {
    background-color: var(--colour-Primary5);
    color: var(--colour-Primary1) !important;
    }


/* Timegrid main widget */
.TimeGrid .ScrollWrap {
    background-color: white;
    }
.TimeGrid .TimeIndicator.Time1,
.TimeGrid .TimeIndicator.Time2 {
    background-color: var(--colour-Primary5);
    color: var(--colour-Primary1);
    }

.TimeGrid h1.ColHeader {
    background: var(--colour-Background);
    color: var(--colour-Primary5) !important;
    }
/* Highlight the column when hovered */
.TimeGrid h1.ColHeader.ColHighlight {
    background: var(--colour-Secondary2);
    }

/* Timegrid Objects */
.TimeGrid .CalObject.AdHocBooking .StartBlock,
.TimeGrid .CalObject.AdHocBooking .EndBlock {
    background: repeating-linear-gradient(
      45deg,
      var(--colour-Secondary3),
      var(--colour-Secondary3) 0.3rem,
      var(--colour-Secondary4) 0.3rem,
      var(--colour-Secondary4) 0.6rem
    );
    }

.TimeGrid .CalObject.Event .StartBlock,
.TimeGrid .CalObject.Event .EndBlock {
    background: repeating-linear-gradient(
      45deg,
      var(--colour-Primary3),
      var(--colour-Primary3) 0.3rem,
      var(--colour-Primary4) 0.3rem,
      var(--colour-Primary4) 0.6rem
    );
    }

.TimeGrid .CalObject.AdHocBooking,
.TimeGrid .CalObject.BookingPlaceholder,
.TimeGrid .CalObject.EventBooking {
    background-color: var(--colour-Secondary2);
    }

.TimeGrid .CalObject.PrivateReservation,
.TimeGrid .CalObject.PrivateEvent,
.TimeGrid .CalObject.PrivateBooking {
    background-color: var(--colour-Primary1);
    }

.TimeGrid .CalObject.AdHocBooking:hover,
.TimeGrid .CalObject.BookingPlaceholder:hover,
.TimeGrid .CalObject.EventBooking:hover {
    background: var(--colour-Secondary3);
    }

    /* Reservations: */
.TimeGrid .CalObject.Reservation {
    background: var(--colour-Primary4);
    }

.TimeGrid .CalObject.Reservation .Legend h1 {
    color: var(--colour-Secondary1);
    }

.TimeGrid .CalObject.Reservation:hover {
    background: var(--colour-Primary5);
    }

.TimeGrid .CalObject.Reservation .Legend p {
    color: var(--colour-Secondary1);
    }

    /* Events */
.TimeGrid .CalObject.Event {
    background: var(--colour-Primary1);
    }
.TimeGrid .CalObject.Event:hover {
    background: var(--colour-Primary2);
    }

.TimeGrid .CalObject.GridNote {
    background-color: #92ff97;
    }

.TimeGrid .CalObject.Gap {
    background: none;
    }

.TimeGrid .CalObject.CalOff {
    background-color: rgba(200, 200, 200, 0.7);
    }

.AdminCalendar.TimeGrid .CalObject.CalOff {
    background-color: var(--colour-Secondary2);
    }

.AdminCalendar.TimeGrid .CalObject.CalOff.CalParentOff {
    background-color: rgba(200, 200, 200, 0.7);
    }

.TimeGrid .CalObject.CalOn {
    background-color: rgba(255, 255, 255, 0.9);
    }

@-webkit-keyframes pulse {
    0% {background-color: #c7ffc4;}
    50% {background-color: #9ab5e7;}
    100% {background-color: #c7ffc4;}
    }

.TimeGrid .CalObject.PrivateThing {
    background: rgba(180, 180, 180, 0.7);
    color: white;
    }

.TimeGrid .CalObject.OnlineBookingSlot {
    background-color: rgb(75, 62, 0, 0.5);
    }

.TimeGrid .CalObject.OnlineBookingSlot p {
    color: var(--colour-Primary5);
    }

/* Provisional Bookings */
@keyframes color {
  0% {
    background-color: var(--colour-Primary1);
  }
  50% {
    background-color: var(--colour-Primary2);
  }
  100 {
    background-color: var(--colour-Primary1);
  }
}

.TimeGrid .CalObject.ProvisionalBooking {
    background-color: var(--colour-Primary1);
    animation-name: color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    }

.TimeGrid .RangeGap {
    background-color: black;
    }

.TimeGrid .CalObject[paidinfull='1'] {
    background: #00f2af;
    }

.TimeGrid .CalObject[paidinfull='1'] .StartBlock,
.TimeGrid .CalObject[paidinfull='1'] .EndBlock {
    background: repeating-linear-gradient(
      45deg,
      #2dc062,
      #2dc062 0.3rem,
      #2d8324 0.3rem,
      #2d8324 0.6rem
    );
    }


/* "Website" products page.
 */
html.page_products body {
    background: var(--colour-Background);
    color: var(--colour-Primary5);
    }

/* Not needed, leaving for reference... 
html.page_products div.TopInfo {
    background: var(--colour-Background);
    color: var(--colour-Primary5);
    }

html.page_products ul.Features {
    background: var(--colour-Background);
    }

html.page_products li.FeatureBlock {
    color: var(--colour-Primary5);
    }

html.page_products li.FeatureBlock h1 {
    color: var(--colour-Secondary5);
    }

html.page_products div.ProductsBlock {
    background: var(--colour-Background);
    color: var(--colour-Primary5);
    }

html.page_products li.ProductBlock {
    color: var(--colour-Primary5);
    }

html.page_products li.ProductBlock div.Content {
    color: var(--colour-Primary5);
    }

*/

/* "Checkout" */
.Checkout {
    color: var(--colour-Primary5);
    }

form.Checkout.PaymentDetails input[type='submit'].Disabled,
form.Checkout.PaymentDetails input[type='submit'].Disabled:hover {
    background: var(--colour-Tertiary1) !important;
    color: var(--colour-Tertiary3) !important;
    }

.Checkout .MobileWarning {
    color: var(--colour-Secondary3);
    }

.Checkout .TermsLink {
    color: var(--colour-Secondary5);
    }

.Checkout div.Error { 
    color: var(--colour-Error1);
    }

form.Checkout.PaymentDetails div.ErrorMessages,
form.AddNewCard div.ErrorMessages {
    color: var(--colour-Error1);
    }


/* Tooltips / popovers */
.webui-popover .webui-popover-title,
.webui-popover-content .Info {
##    background: var(--colour-Background);
    }
.webui-popover-content .PopoverButtons {
##    background: var(--colour-Primary3)
    }

.webui-popover-content .PopoverButtons>* {
    color: var(--colour-Primary5);
    }

.webui-popover-content .PopoverButtons>*:hover {
    color: var(--colour-Primary4);
    }
.webui-popover a {
    color: var(--colour-Primary4);
    }


/* UserMenu (Top-right) */
div.UserMenu>h1.Active {
    background: var(--colour-Primary5);
    }

div.UserMenu ul.UserMenu {
    background: var(--colour-Primary5);
    color: var(--colour-Primary1);
    }

div.UserMenu ul.UserMenu li a {
    color: #DBD5EC;
    }

div.UserMenu>h1 span.Label {
    color: var(--colour-MenuFontColour);
    }


/* Topmenu */
ul.TopMenu>li>a {
    color: var(--colour-MenuFontColour);
    }

/* Top Submenu (Help etc) */
ul.TopMenu ul.SubMenu {
    background: var(--colour-Primary5);
    }

body.Mobile ul.SubMenu {
    background: var(--colour-Primary5);
    }

html.NotLoggedIn ul.TopMenu ul.SubMenu {
    background: var(--colour-Primary4);
    }

ul.TopMenu li span,
ul.SubMenu li a {
    color: var(--colour-MenuFontColour);
    }


/* MOBILE SideMenu
 * These colours are kept in mobile/sideMenu.css 
 */


/* Forms and validation */
select, input, textarea {
    color: var(--colour-Primary5);
    background-color: var(--colour-MenuFontColour);
    }

.wit-combobox .ACButton {
//    background: var(--colour-Secondary1) !important;
    }


b.ValErr {
    color: var(--colour-Error1) !important;
    }

/* On various dropdowns, custom data written as attributes may put in
 * 'active'.  If the item isn't active, it gets grey'd.
 * This is used for, eg, rooms which do not support a particular Service
 * but which are still selectable (to give flexibility in the case of, say,
 * a temporary massage table being used)
 */
select option[active='0'] {
    color: #aaaaaa !important;
    }

div.ErrorsArea li {
    color: var(--colour-Secondary3) !important;
    }

/* FIXME: Not sure if this should be global or just login */
form.LoginForm div.ErrorsArea li {
    color: var(--colour-Error1) !important;
    }


html.page_demologin .Wrap.demologin {
//    color: var(--colour-Primary1);
    }

.LoginRegister {
    color: var(--colour-Primary5);
    }

.LoginRegisterBox {
    color: var(--colour-Primary5);
    }

/* FIXME: Remove.  
.LoginRegisterBox form div.ErrorsArea li {
    color: red !important;
    }
*/
.LoginRegisterBox a {
    color: var(--colour-Primary5);
    }

a.ForgotPasswordLink {
    color: var(--colour-Primary5);
    }






/* Online Bookings / Customer Bookings */
div.NewOnlineAdHocBooking,
div.NewOnlineAdHocBooking,
div.NewOnlineAdHocBooking p,
div.NewOnlineAdHocBooking .Content,
div.NewOnlineAdHocBooking .Content p,
div.NewOnlineAdHocBooking .Content a {
    }

div.NewOnlineAdHocBooking .OBSearchResults p {
    color: var(--colour-Primary5);
    }

div.YourBooking {
    background: var(--colour-Primary1);
    }

div.YourBooking a {
    color: var(--colour-Primary5);
    }

div.NewOnlineAdHocBooking .TabSet,
div.NewOnlineAdHocBooking .TabSet .Tabs {
    }


/* Online Bookings search results */
.OnlineBookingSearchResults ul.TimeSlots li {
    background: var(--colour-Primary1);
    }

.OnlineBookingSearchResults ul.TimeSlots li:hover {
    background: var(--colour-Primary2);
    }


.OnlineBookingSearchResults ul.TimeSlots li.Active {
    background: var(--colour-Primary3);
    color: var(--colour-Secondary1);
    }

.OnlineBookingSearchResults div.TabSet>div.ui-tabs-panel,
.OnlineBookingSearchResults div.TabSet>ul.Tabs li.ui-tabs-active {
    background: var(--colour-Secondary1);
    }

.OnlineBookingSearchResults div.TabSet>ul.Tabs li.ui-tabs-active a {
    color: var(--colour-Primary5);
    }

/* Help/Quickstart */
div.ParsedownHelp {
    background: var(--colour-Background);
    }

div.ParsedownHelp .ParsedownHelpTOC {
    background: var(--colour-Background);
    }

div.ParsedownHelp .ParsedownHelpBody {
    background: var(--colour-Background);
    }

div.ParsedownHelp .ParsedownHelpTOC ul li a {
    color: var(--colour-Primary4);
    }

div.ParsedownHelp .ParsedownHelpTOC ul li a:hover {
    color: var(--colour-Primary5);
    }

div.ParsedownHelp .ParsedownHelpBody h1,
div.ParsedownHelp .ParsedownHelpBody h2,
div.ParsedownHelp .ParsedownHelpBody h3,
div.ParsedownHelp .ParsedownHelpBody h4 {
    color: var(--colour-Primary5);
    }

div.ParsedownHelp .ParsedownHelpBody p {
    color: var(--colour-Primary5);
    }

div.ParsedownHelp .ParsedownHelpBody li {
    color: var(--colour-Primary5);
    }

div.ParsedownHelpTOC a.IsInViewport {
    color: var(--colour-Error1) !important;
    }

/* Mobile: Error when access Admin pages */
div.AdminNotAvailable {
    color: var(--colour-Primary5);
    }
div.AdminNotAvailable p a {
    color: var(--colour-Primary5);
    }


/* End of include: colours */


/***
 * Including file: icons
 */

/* Icons for various buttons.
 * Note the selector for the EditTables, .Wrap increases specificity
 * Comments for each explain where to find one example, for maintenance.
 */


/* Fixme: Where is OK button used? */
.Button.Yes,
.Button.OK {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/4c142f913986f799d2bc37676d784d0d/img/iconset%253Aok.svg/repl/NONE");
    }

/* Usage: Edit Details on any admin popup */
.Button.Save,
.Wrap .EditTable a.button1[title='Save'] {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/d48aa5891c5f31b8196fa9189862bcff/img/iconset%253Asave.svg/repl/NONE");
    }

/* Usage: Create Booking popup */
.Button.Cancel,
.Button.Close,
.Wrap .EditTable a.button2[title='Cancel'] {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/06664e14db8b1e3304f8b02a467695d0/img/iconset%253Acancel.svg/repl/NONE");
    }

/* Usage: Admin buttons, "Add Premises" */
.Button.Add {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/45256d67e4e5bd45105fc81666211c72/img/iconset%253Aadd.svg/repl/NONE");
    }

/* Usage: Create Booking button */
.Button.Create {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/92c3c8cc4925bbfce31934c991c00dfa/img/iconset%253Acreate.svg/repl/NONE");
    }

/* Usage: Create Booking on Mobile */
html.Mobile .ButtonBar.BookingsCalendar .Button.Create {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/92c3c8cc4925bbfce31934c991c00dfa/img/iconset%253Acreate.svg/repl/Secondary2");
    }

/* Usage: Edit Business on Admin */
.Button.Edit,
.Wrap .EditTable a.button1[title='Edit'] {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/e8158b6ae932e65b464ea59e8a332c33/img/iconset%253Aedit.svg/repl/NONE");
    }

/* Usage: Remove Service on Admin */
.Button.Remove,
.Button.Delete,
.Wrap .EditTable a.button2[title='Delete'] {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/004a8ad9d8c738f225e12525f63401de/img/iconset%253Adelete.svg/repl/NONE");
    }

/* Usage: Print Receipt on Booking Details after payment-in-full */
.Button.RemotePrintButton,
.Button.PrintButton {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/258d8d64be3f04b6165d58541145df68/img/iconset%253Aprint.svg/repl/NONE");
    background-size: 1.3rem;
    }

/* Usage: Cancel Booking dialog */
.Button.No {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/fd5310b230e5176177629d791918f299/img/iconset%253Ano.svg/repl/NONE");
    }

/* Usage: BookingDetails buttonbar */
.Button.ViewInCalendar {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/b253f36c2a33fcf75485f613a4e34bc5/img/iconset%253AviewInCalendar.svg/repl/NONE");
    }

/* Placeholder icon for "copy" button in "Edit Cal Item" */
.Button.CopytoallmyotherClinics {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/b253f36c2a33fcf75485f613a4e34bc5/img/iconset%253AviewInCalendar.svg/repl/NONE");
    }

/* Usage: BookingDetails Buttonbar: NoShow */
.Button.Error {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/39e43bd884f5828b8969fe6cb0056abf/img/iconset%253Aerror.svg/repl/NONE");
    background-size: 1.3rem;
    }

/* Usage: BookingDetails buttonbar */
/* Reusing Create Booking icon */
.Button.Rebook {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/37dfc53f65c0f275dff3e5e4d065e487/img/iconset%253Arebook.svg/repl/NONE");
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/92c3c8cc4925bbfce31934c991c00dfa/img/iconset%253Acreate.svg/repl/NONE");
    }

/* Usage: BookingsCalendar buttonbar: Search And Book */
.Button.SlotSearch,
.Button.Search {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/6128168a5d5728ec758e6c2cdf876105/img/iconset%253Asearch.svg/repl/NONE");
    }
html.Mobile .ButtonBar.BookingsCalendar .Button.SlotSearch {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/6128168a5d5728ec758e6c2cdf876105/img/iconset%253Asearch.svg/repl/Secondary2");
    }

/* Usage: BookingsCalendar buttonbar: Find Bookings and Clients */
.Button.SearchForThingsForm {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/bf3c3612c0f40ddaad3aed1926587176/img/iconset%253Afind.svg/repl/NONE");
    }
html.Mobile .ButtonBar.BookingsCalendar .Button.SearchForThingsForm {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/bf3c3612c0f40ddaad3aed1926587176/img/iconset%253Afind.svg/repl/Secondary2");
    }


/* Usage: BookingsCalendar buttonbar */
.Button.PractitionerAvailability {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/e55475dffb947c5447fd621529fc0799/img/iconset%253Aavailability.svg/repl/NONE");
    background-size: 1.3rem;
    }
html.Mobile .Button.PractitionerAvailability {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/e55475dffb947c5447fd621529fc0799/img/iconset%253Aavailability.svg/repl/Secondary2");
    }

/* Usage: Bookings Calendar datepicker "Jump to Today" */
.ui-datepicker .ui-datepicker-buttonpane button[type='button'].ui-datepicker-current {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/05c802a7a678803806c189d3aa892b20/img/iconset%253AjumpToToday.svg/repl/NONE");
    background-position: 0.3rem 60% !important;
    }

/* Usage: BookingDetails buttonbar */
.Button.HasArrived {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/0010e984b3a0858a4a66d5a6c3f734f8/img/iconset%253AclientHasArrived.svg/repl/NONE");
    }

/* Usage: Calendars WorkingWeekWizard */
.Button.Next {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/093e02cb7d9cbc337f5cc033c1547236/img/iconset%253Anext.svg/repl/NONE");
    }

/* Usage: Calendars WorkingWeekWizard */
Button.AddAvailability {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/031fefbb8f6be9c2e0c093e2af05521d/img/iconset%253AaddAvailability.svg/repl/NONE");
    }

/* Usage: Calendars WorkingWeekWizard: "Done" */
.ui-datepicker-buttonpane .ui-datepicker-close {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/4c142f913986f799d2bc37676d784d0d/img/iconset%253Aok.svg/repl/NONE");
    }

/* Usage: BookingForm: Clear Form */
.Button.Reset,
.Button.DowngradeContract,
.Button.DowngradeNow {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/a2aedd8082c0c82714916c88fe8a73fa/img/iconset%253Areset.svg/repl/NONE");
    }

/* Usage: BookingForm: AddToWaitingList */
.Button.AddtoWaitingList {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/ec7b34027f956a57d8b84deceb7d4ea0/img/iconset%253AaddToWaitingList.svg/repl/NONE");
    }

/* Usage: BookingCalendar Bookings popover: Details button */
.Button.Details {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/141ee4ab0cc64aad809e7eee399dac5f/img/iconset%253Adetails.svg/repl/NONE");
    }

/* Usage: Login page */
.Button.Login {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/7dc5d65536ee62b9c17e53f5ba4a7a74/img/iconset%253Alogin.svg/repl/NONE");
    }

/* Usage: Demo, login/register page, register button */
.Button.Register,
.Button.CustomerRegister,
.Button.CreateDemoClinic {
    /* "Register For Demo Clinic" */
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/176da63d32b94b23f630052c30d1750d/img/iconset%253AdemoRegister.svg/repl/NONE");
    }

/* Usage: Main site, add product to cart (pre-checkout) */
.Button.Buy {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/38b319c2bdf99c4b5402d36e1459688d/img/iconset%253AaddToCart.svg/repl/NONE");
    }

/* Usage: Main site, checkout "Complete Purchase" */
.Button.Checkout {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/768ddb2b2a1dc373ae6e9af66b7a1852/img/iconset%253Acheckout.svg/repl/NONE");
    }


.Button.Calendar {
/* Not sure where this button is, removing to make it obvious */
/*    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/b63374b4185c96d2a92000d0f9a9b5d7/img/silk%253Acalendar.png/repl/NONE");
 *    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/38f22692873bb10311340b41ab167bdf/img/icons8mb4%253Aicons8-calendar-16.png/repl/NONE");
 */
    }

.PopupForm.EditDetails {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/e8158b6ae932e65b464ea59e8a332c33/img/iconset%253Aedit.svg/repl/NONE");
    }



/* End of include: icons */


/***
 * Including file: commonForms
 */

/* Styles which are common to all forms.  Should avoid 
 * any kind of "generic position" styling as there is rarely such
 * a thing.
 */

form {
    margin-left: 1rem;
//    max-width: 65rem;
    }


label {
    display: block;
    text-align: left;
    margin-bottom: 1rem;
    }

label>span.Legend:first-of-type {
    display: block;
    padding-bottom: 0.2rem;
    }

label.TickBox.TickLeft span.Legend {
    display: inline-block;
    }

label>span,
label>input,
label>select {
    vertical-align: middle;
    }

label.TickBox>span.Legend {
    margin: 0;
    padding: 0 0 0 0.5rem;
    }
    
label>* {
    vertical-align: middle;
    }

label>input[type='checkbox'] {
    margin-left: 0;
    margin: 0;
    }

label.Submit {
    text-align: center;
    }

input[type='text'],
input[type='number'],
input[type='password'],
textarea,
select.WITSelect,
label.WITWidget.PasswordStrengthIndicator .Widget,
span.wit-combobox,
div.Radio div.Items {
    width: 20rem;
    min-width: auto;
    display: inline-block;
    text-align: left;
    }

input[type='text'],
input[type='number'],
input[type='password'],
textarea,
select.WITSelect,
label.WITWidget.PasswordStrengthIndicator .Widget,
span.wit-combobox input,
span.wit-combobox .ACButton,
span.wit-combobox .ACButtonText,
div.Radio div.Items {
    padding: 0.4rem 0.3rem 0.3rem 0.3rem;
    }
span.wit-combobox input {
    font-size: 1rem;
    }

body.Mobile input[type='text'],
body.Mobile input[type='number'],
body.Mobile input[type='password'],
body.Mobile textarea,
body.Mobile select.WITSelect,
body.Mobile label.WITWidget.PasswordStrengthIndicator .Widget,
html.Mobile span.wit-combobox,
body.Mobile div.Radio div.Items {
    }

.wit-combobox>input.wit-combobox-input,
.wit-combobox>a.ACButton {
    height: 2rem;
    }


/* Any label with the class "RequiredField" needs a "required" highlight.
 * RequiredField was added by Model_HTML
 */ 
label.RequiredField,
div.RequiredField {
    vertical-align: bottom;
    position: relative;
    }

/* For non-required fields, do similar, because the font-size
 * of the 'after' affects the padding
 */
label span.Legend:after,
div span.Legend:after {
    content: " ";
    color: red;
    vertical-align: middle;
    font-size: 1.6rem; 
    line-height: 1.6rem;
    padding: 0 0 0 0.3rem;
    position: absolute;
    }

/* Required Field has a star in the After */
label.RequiredField span.Legend:after,
div.RequiredField span.Legend:after {
    content: "*";
    }

/* Fixup for radio answers which (incorrectly) reuse .Legend */
label.RequiredField label.Item span.Legend:after,
div.RequiredField label.Item span.Legend:after {
    content: "";
    }

/* Fixup for Show/Hide Password */
label.RequiredField span.Legend.ShowHideText:after {
    content: "";
    }

textarea {
    min-height: 3.1rem;
    }

div.Radio div.Items {
    position: relative;
    height: auto;
    width: auto;
    }
div.Radio label.Main {
    display: block;
    text-align: left;
    }
div.Radio label.Main>span {
    vertical-align: middle;
    text-align: left;
    }

div.Radio label.Item {
    display: inline-block;
    margin: 0 1rem 0 0;
    vertical-align: middle;
    }
div.Radio label.Item:first-of-type {
    margin-left: 2rem;
    }
html.Mobile div.Radio label.Item:first-of-type {
    margin-left: 0;
    }
div.Radio label.Item>* {
    vertical-align: middle;
    }
div.Radio label.Item>input[type='radio'] {
    display: inline-block;
    margin: 0 0.3rem 0 0;
    }

div.Radio label.Item span.Extra {
    margin: 0;
    vertical-align: middle;
    display: inline-block;
    }

div.Radio label.Item span.Legend {
    display: inline-block;
    }

select {
    padding: 0.1rem;
    }

/* Error messages are written in to the form - style these nicely */
b.ValErr {
    display: block;
    font-size: 1rem !important;
    margin: 0.3rem 0.6rem 0.6rem 0;
    }


/* Form errors */
div.ErrorsArea.FormErrs {
    display: block;
    }
div.ErrorsArea.FormErrs ul {
    list-style: none;
    margin: 0.3rem 0 0.3rem 0.3rem;
    padding: 0;
    }

div.ErrorsArea li {
    text-align: center;
    font-weight: bold;
    }

b.ValErr {
    display: inline-block;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0.3rem 0;
    }


fieldset.UnresolvedRange {
    opacity: 0.4;
    }
fieldset.UnresolvedRange.Active {
    opacity: 1;
    }





span.HoursMinsPicker {
##    width: 10.9rem;
    display: inline-block;
    }
span.HoursMinsPicker span.HoursLegend {
    padding-right: 0.9rem;
    padding-left: 0.1rem;
    }
span.HoursMinsPicker span.MinsLegend {
    padding-left: 0.1rem;
    }
span.HoursMinsPicker select {
    width: 3rem !important;
    appearance: auto;
    background: var(--colour-MenuFontColour);
    }

select.ui-timepicker-select {
    padding: 0.1rem 0.3rem;
    appearance: auto;
    }


/* End of include: commonForms */


/***
 * Including file: skin
 */

/* Basic things to do with layout, fonts and colours on all pages.
 * Widgets style internally only; if widgets always have a certain
 * external margin, say, that should go here.  If tweaks are needed
 * for certain pages, they should go in page-specific css files.
 * If tweaks are needed to lay out a widget generically, put here or in a
 * layout file.  Try to keep CSS /short/.
 */

.Clearfix:after {
    content: "";
    display: block;
    clear: both;
    }

html.LoggedIn {
    font-size: 10pt;
    }

html.Mobile.LoggedIn {
    font-size: 12pt;
    }

body {
    padding: 0;
    margin: 0;
    position: relative;
    }

html.page_mobile_bookings_home body {
    font-size: 1.2rem;
    }

*, .jstree a {
    font-family: 'Montserrat', sans-serif !important;
    // font-family: 'Jost', sans-serif !important;
    box-sizing: border-box;
    }

h1 {
    font-size: 1.5rem;
    margin: 0 0 1.5rem 0;
    }

h2 {
    font-size: 1.2rem;
    }

p.Important {
    font-weight: bold;
    }

.hidden {
    display: none;
    }

.Header {
    }

.Wrap {
    padding: 0;
    margin: 0;
    position: relative;
    }

.InfoBox {
    margin: 0 5rem 5rem 0;
    }
.InfoBox h1 {
    font-size: 1.2rem;
    }

.StrongItem {
    margin: 0 0 0 !important;
    }
.StrongItem>.Legend {
    margin-right: 0.5rem;
    display: inline-block;
    line-height: 1.6rem;
    }

/* Activity spinner location */
.Activity {
    position: fixed;
    right: 0;
    bottom: 0;
    display: none;
    margin: 0 0.6rem 0.6rem 0;
    }
.Activity .Wrap {
    overflow: hidden;
    padding: 0 0 0 1.3rem;
    }

.Activity.FullScreen {
    position: absolute;
    z-index: 999999;
    top: 0; left: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    }
.Activity.FullScreen .Wrap {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0; padding: 0;
    border-bottom: 0.1rem solid var(--colour-Primary5);
    border-top: 0.1rem solid var(--colour-Primary5);
    box-shadow: 0 0 0.3rem 0.1rem var(--colour-Primary5);
    padding: 0 0 0.8rem 0;
    margin: 2.5rem 0 0 0;
    }
.Activity.FullScreen .Wrap span {
    color: var(--colour-Primary5);
    }

/* .MainView tweaks */
.MainView.TwoPane {
    overflow: hidden;
    height: 100%;
    }

.MainView>.Pane1 {
    font-size: 1.1rem;
##    padding-top: 1rem;
##    min-width: 19rem;
    }

.bookings_home .MainView>.Pane1 {
##    min-width: 19rem;
    }

   
/* Tweaks to the jqueryui styles */


.ui-menu {
    width: 13.8rem !important;
    }
html.Mobile .ui-menu {
    width: 48vw !important;
    }
.ui-menu-item {
    font-size: 1.1rem;
    }
.ui-menu-item a:hover {
    border: none;
    }
.ui-menu-item:hover a {
    border: none;
    }

.ui-menu .ui-menu-divider {
    border: none;
    display: none;
    }

.ui-widget-header {
    font-weight: normal;
    }

.dataTable b.Bool {
    font-size: 0;
    }
.dataTable .Bool.False {
    /* Show the default "cross" for "Off".
     * Have experimented with cross or nothing
     * and cross works better
    background: none !important;
     */
    }

.dataTables_info {
    padding-left: 0.6rem;
    font-size: 1rem;
    }

ul.ActiveList li.AddNew {
    margin-left: 0.3rem;
    }

/* In a .Pane2, add a little left-margin to h1/ps */
.Pane2>h1,
.Pane2>p {
    margin-left: 0.3rem;
    }

div.Centre {
    text-align: center;
    }


.AdminMainPane>h1 {
    margin: 0.3rem 0.6rem;
    }
.AdminMainPane>p {
    margin-left: 0.6rem;
    }

/* Items which have popup help built in to them will be .HasHelp.
 * Make them appear clickable.
 */
.HasHelp {
    }
.HasHelp>span.Legend>* {
    vertical-align: middle;
    }

.HasHelp>span.Legend>.HelpIcon {
    background: url("https://m-booksystems.co.uk/app/Apps_img/v/f3ca234a4f68a5d9c87a05950c9aa006/img/iconset%253Ahelp.svg/repl/NONE") 0 0 no-repeat;
    display: inline-block;
    width: 1.6rem;
    height: 1.57rem;
    background-size: 1.4rem;
    cursor: help;
    }

.Dialog .HasHelp>span.Legend>.HelpIcon {
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/f3ca234a4f68a5d9c87a05950c9aa006/img/iconset%253Ahelp.svg/repl/Secondary2");
    }


/* Items which should stick to the top of the page on scroll */
.Sticky {
    margin-top: 0 !important;
    position: fixed !important;
    top: 0;
    z-index: 100;
    }

div.PageBreak {
    page-break-after: always;
    }

h1.StatusBanner {
    text-align: center;
    margin: 0; padding: 0;
    padding: 0.3rem 0;
    }

ul.Tabs.ui-tabs-nav {
    border-bottom: 0.1rem solid var(--colour-Primary3);
    margin-left: 0.2rem;
    }

ul.Tabs.ui-tabs-nav li.ui-state-default a {
    padding: 0.6em 1em 0.5em 1em;
    }

.ui-dialog {
    z-index: 9999;
    }


.BoxHighlight {
    border: 0.1rem solid var(--colour-Primary1);
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    }

span.spanSet.EventTemplates_ServiceServiceType,
span.spanSet.RoomFullName {
    display: block;
    padding: 0.2rem 0;
    }
    
.JQSortable li {
    font-size: 1.2rem !important;
    }

.ui-datepicker th {
    font-weight: normal;
    }

.page_checkout .Wrap>p {
    color: var(--colour-Primary5);
    margin: 0.6rem;
    }

html.Mobile .InfoBox {
    display: block;
    width: 100%;
    margin-bottom: 4rem;
    }
html.Mobile .InfoBox h1 {
    border-bottom: 0.1rem solid var(--colour-Primary1);
    }

p.Error {
    padding: 1rem;
    }


/* Desktop, > 10inches */
@media (width > 960px) {
}

/* Tablets/screens, less than 10inches */
@media (width < 960px) {
    html.IsLoggedIn ul.TopMenu>li {
        margin-right: 0.5em !important;
        margin-left: 0.5em !important;
        }

    ul.TopMenu ul.SubMenu {
        margin-left: -4.2rem !important;
        }
}

/* Phones */
@media (width < 576px) {
    html {
        font-size: 14px !important;
        }
    body,
    main header,
    main section,
    html body header,
    div.CheckoutBlock,
    html.Site div.CheckoutSuccess,
    div
    {
        max-height: 999999px;
        }

    div.Header div.UserMenu {
        top: 0;
        }


}



/* End of include: skin */


/***
 * Including file: businessSwitcher
 */

div.BusinessSwitcher {
    color: var(--colour-Primary1);
    list-style: none;
    clear: both;
    text-align: left;
    margin: 0;
    margin: 0.6rem 0 0 0;
    }

html.Mobile div.BusinessSwitcher {
    }

div.BusinessSwitcher label.BusinessSwitcher {
    margin: 0.2rem 0;
    display: inline-block;
##    width: 18rem;
    padding-bottom: 1.4rem;
    }
html.Mobile div.BusinessSwitcher label.BusinessSwitcher {
    width: 100%;
    padding-left: 0.2rem;
    overflow: hidden;
    text-align: right;
    padding-bottom: 0;
    }

div.BusinessSwitcher label.BusinessSwitcher select {
    color: var(--colour-Primary5);
    padding: 0.2rem 0.6rem 0.2rem 0;
    font-size: 1.2rem;
    vertical-align: middle;
    width: 18.3rem;
    background: var(--colour-MenuFontColour);
    appearance: auto;
    }

html.Mobile div.BusinessSwitcher label.BusinessSwitcher select {
    width: 70%;
    }

div.BusinessSwitcher label.BusinessSwitcher span {
    margin-right: 0.7rem;
    font-size: 1.2rem;
    }
html.Mobile div.BusinessSwitcher label.BusinessSwitcher span {
    margin-right: 1rem;
    display: inline-block;
    width: 20%;
    text-align: left;
    float: left;
    position: relative;
    top: 0.3rem;
    }

div.BusinessSwitcher label.BusinessSwitcher select option {
    color: var(--colour-Primary5);
    width: 100%;
    }

/* End of include: businessSwitcher */


/***
 * Including file: buttons
 */

.PopupForm.Button,
.RemotePrintButton,
.Button,
.ui-button,
.ui-button:hover,
.ui-button:focus,
ul.ActiveList li.AddNew,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane button,
input[type='submit'],
button,
form input[type='submit'] {
    display: inline-block;

    padding: 0.3em 0.4em 0.3em 2.5em;
    background-position: 0.4em 50%;
    background-repeat: no-repeat;
    background-size: 1.5em auto;

    border: max(1px, 0.1em) solid #4B3E00;
    font-weight: normal;

    box-shadow: inset 0 0 0.1em var(--colour-Primary1),
                0 0 0.1em var(--colour-Primary1);

    box-shadow: none;
    font-size: 1em;
    border-radius: 0.3em;
    float: none;
    opacity: 1;
    }

.Button:focus-visible {
    outline: none;
    }

html.Mobile .PopupForm.Button,
html.Mobile .RemotePrintButton,
html.Mobile .Button,
html.Mobile .ui-button:hover,
html.Mobile .ui-button:focus,
html.Mobile ul.ActiveList li.AddNew,
html.Mobile input[type='submit'],
html.Mobile form input[type='submit'] {
    background-position: 0.3rem 55%;
    padding-left: 2.3em !important;
    }

.Button.SmallButton {
    padding: 0.4em 0.5em 0.4em 2.5em;
    background-position: 0.5em 0.3em;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0.3em;
    font-size: 1em;
    font-weight: normal;
    }
html.Mobile .Button.SmallButton {
    padding: 0.4em 0.5em 0.3em 2em !important;
    }





/* These are for the Bookings Tooltips buttonbar */
/* Weird override needed to vertically center icons in Bookings ButtonBar */
.PopoverButtons.ButtonBar .PopupForm.Button,
.PopoverButtons.ButtonBar .RemotePrintButton,
.PopoverButtons.ButtonBar .Button,
.PopoverButtons.ButtonBar ul.ActiveList li.AddNew,
.PopoverButtons.ButtonBar input[type='submit'],
.PopoverButtons.ButtonBar form input[type='submit'] {
--    background-position: 0.3rem 52%;
    }

.ui-dialog .ui-dialog-buttonpane button:last-of-type {
    margin-right: 0;
    }

.ui-dialog .ui-dialog-buttonpane button {
    font-size: 1em;
    }
html.NotLoggedIn .ui-dialog .ui-dialog-buttonpane button {
    }
html.Mobile .ui-dialog .ui-dialog-buttonpane button {
    font-size: 1rem;
    padding: 0.6rem 1rem 0.4rem 1rem;
    }



.Button.SmallButton.ResetAdHocForm {
#    padding-bottom: 0.3em !important;
    }


a.Button {
    text-decoration: none;
    }

/* EditTable add button */
.Button.AddRow {
    margin-right: 0.1rem;
    margin-top: 0.5rem;
    float: right;
}


/* Desktop version doesn't have a legend */
html.Desktop .ActionButton.DeletePayment {
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem auto;
    background-position: 0rem;
    }


/* The pencil icon used all over Admin to conjour the popup edit form */
.PopupForm.EditDetails {
    height: 1.5rem;
    background-size: 1.5rem auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    margin: 0 0.3rem 0 0;
    border: none;
    background-color: transparent;
    }

.PopupForm.EditDetails:focus-visible {
    outline: none;
    }

/* This is "Remove Bolton" in Contracts tab.  Image comes from .Delete */
.MyAccountTabs #Contract .Contract .Product .ActionButton {
    display: inline-block;
    height: 0.6rem;
    background-position: center;

    width: 1.8rem;
    height: 1.8rem;
    background-size: 1.8rem auto;
    padding: 0 0.5rem 0 0 !important;
    margin: 0 0.5rem 0 0;
    display: inline-block;
    position: relative;
    top: 0.4rem;
    border: none;
    }

/* Specific styling for the ad-hoc booking controls */
.Pane2 div.AdHocBook label.ClearButton>span {
    display: none;
    }

button.Disabled span,
button.Disabled:hover span,
.PopupForm.Disabled,
.PopupForm.Disabled:hover {
    background: #EEEEEE !important;
    color: #AAAAAA !important;
    }

/* Minor adjustments for dialog buttons */
.ui-dialog .ui-dialog-buttonpane button {
    margin-right: 0.6rem;
    }

button[disabled='disabled'] span {
    color: var(--colour-Primary3);
    }
button[disabled='disabled']:hover {
    background-color: var(--colour-Secondary2) !important;
    }


/* End of include: buttons */


/***
 * Including file: header
 */

div.Header {
    margin:0; padding: 0;
    background: var(--colour-Primary5);
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    position: relative;
    }

html.NotLoggedIn div.Header {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    background: var(--colour-Primary4);
    }

html.Mobile.NotLoggedIn div.Header {
    top: 0;
    z-index: 100;
    }

div.HeaderWrap {
    margin: 0;
    position: relative;
    }

div.Header div.Logo,
div.Header div.TopMenu,
div.Header div.UserMenu {
    vertical-align: top;
    box-sizing: border-box;
    }

div.Header div.Logo,
div.Header div.BusinessSwitcher {
    background: var(--colour-Primary5);
    }

html.NotLoggedIn div.Header div.Logo {
    background: var(--colour-Primary4);
    position: relative;
    top: 0.2rem;
    }
html.LoggedIn div.Header div.Logo {
    display: inline-block;
    padding-right: 2rem;
    }

div.Header div.Logo {
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    margin-right: 5em;
    }


div.Header div.Logo a.Logo {
    text-decoration: none;
    color: #FFFAE3;
    font-size: 3em;
    padding: 0;
    }

div.Header div.UserMenu {
    display: inline-block;
    margin: 0; padding: 0;
    position: absolute;
    right: 0;
    top: 0.3rem;
    margin-right: 0.1rem;
    }

div.UserMenu h1 {
    font-size: 1rem;
    font-weight: normal;
    }

html.LoggedIn.Mobile div.Header div.UserMenu {
    top: 1.3rem;
    }






/* End of include: header */


/***
 * Including file: help/quickstart
 */

div.ParsedownHelp {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: none;
    width: 100%;
    }



html.Mobile div.ParsedownHelp {
    padding-top: 0.2rem;
    }


div.ParsedownHelp .ParsedownHelpTOC li.TOCH1 {
    margin-top: 0.8rem;
    margin-bottom: 0;
    padding-bottom: 1.3rem;
    border-bottom: 0.1rem solid var(--colour-Primary3);
    }
html.Mobile div.ParsedownHelp .ParsedownHelpTOC li.TOCH1:first-of-type {
    margin-top: 0;
    }
div.ParsedownHelp .ParsedownHelpTOC li.TOCH1:last-of-type {
    border-bottom: none;
    }

div.ParsedownHelp .ParsedownHelpTOC,
div.ParsedownHelp .ParsedownHelpBody {
    box-sizing: border-box;
    height: calc(200vh - 3.1rem);
    overflow-y: scroll;
    }
html.Mobile div.ParsedownHelp .ParsedownHelpTOC,
html.Mobile div.ParsedownHelp .ParsedownHelpBody {
    height: auto;
    overflow-y: auto;
    }

div.ParsedownHelp .ParsedownHelpTOC {
    float: left;
    padding-right: 0.6rem;
    max-width: 30%;
    box-sizing: border-box;
#    font-size: 1.4rem;
    line-height: 1.8rem;
    padding-bottom: 1.9rem;
    background-color: var(--colour-Secondary1);
    font-weight: 500;
    }

html.Mobile div.ParsedownHelp .ParsedownHelpTOC {
    float: none;
    height: auto;
    padding: 0;
    max-width: 100%;
    text-align: center;
    }

html.Mobile div.ParsedownHelp .ParsedownHelpTOC  div.HelpTOC {
    text-align: left;
    }

html.Mobile p.HelpTOC.Button.Selected {
    margin: 0.3rem 0.3rem 0rem 0;

    display: inline-block;
    font-weight: normal;

    background-position: 1rem 50% !important;
    background-repeat: no-repeat;
    background-size: 1.5rem auto;

    position: relative;
    top: 0.1rem;

    font-size: 1.5rem;

    color: var(--colour-Primary5) !important;
    background-color: var(--colour-Primary1);
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/3254fc413b16c85758dea59f7118fe30/img/iconset%253Amenu.svg/repl/Primary5");
    border: none;
    padding: 1rem 1rem 1rem 3.5rem !important;
    margin: 1rem 0 1rem 0;
    }

html.Mobile p.HelpTOC.Button.Selected:hover {
    background-color: var(--colour-Primary1) !important;
    }



div.ParsedownHelp .ParsedownHelpBody {
    padding: 1rem 0.6rem 5rem 1rem;
    margin: 0;
    box-sizing: border-box;
    margin-left: 20%;
#    font-size: 1.4rem;
    line-height: 1.8rem;
    }
html.Mobile div.ParsedownHelp .ParsedownHelpBody {
    margin-left: 0;
    }

div.ParsedownHelp .ParsedownHelpTOC ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
html.Mobile div.ParsedownHelp .ParsedownHelpTOC div.HelpTOC {
    margin-top: 0.5rem;
    }
div.ParsedownHelp .ParsedownHelpTOC li ul {
    margin-left: 0.6rem;
    }

div.ParsedownHelp .ParsedownHelpTOC ul li {
    margin: 0.6rem;
    }
html.Mobile div.ParsedownHelp .ParsedownHelpTOC ul li {
    margin-left: 1rem;
    }

div.ParsedownHelp .ParsedownHelpTOC ul li a {
    text-decoration: none;
    width: 100%;
    display: inline-block;
    }

/* Some extra padding between top-level LIs */

div.ParsedownHelp .ParsedownHelpBody h1,
div.ParsedownHelp .ParsedownHelpBody h2,
div.ParsedownHelp .ParsedownHelpBody h3,
div.ParsedownHelp .ParsedownHelpBody h4 {
    }

div.ParsedownHelp .ParsedownHelpBody h1 {
    margin-top: 3.1rem;
    padding-top: 3.1rem;
    border-top: 0.1rem solid var(--colour-Primary5);
    }
div.ParsedownHelp .ParsedownHelpBody div.h1:first-of-type h1 {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border:none;
    }

div.ParsedownHelp .ParsedownHelpBody div.h1 p:last-of-type {
    padding-bottom: 1.6rem;
    }

div.ParsedownHelp .ParsedownHelpBody div.h2 {
    padding-left: 0rem;
    padding-bottom: 0rem;
    }

div.ParsedownHelp .ParsedownHelpBody h1 {
    font-size: 2rem;
    }
div.ParsedownHelp .ParsedownHelpBody h2 {
    font-size: 1.8rem;
    }
div.ParsedownHelp .ParsedownHelpBody h3 {
    font-size: 1.6rem;
    }
div.ParsedownHelp .ParsedownHelpBody h4 {
    font-size: 1.4rem;
    }

div.ParsedownHelp .ParsedownHelpBody p {
    padding-left: 0.9rem;
    }

div.ParsedownHelpBody img {
    padding: 0.2rem 0.3rem;
    border: 0.1rem solid var(--colour-Primary4);
    display: block;
    margin-left: 1.3rem;
    }


div.ParsedownHelp .ParsedownHelpBody li {
    margin: 0.3rem 0;
    }
div.ParsedownHelp .ParsedownHelpBody ol li {
    margin: 0.5rem 0;
    }


/* End of include: help/quickstart */


/***
 * Including file: loginRegister
 */

html.page_demologin .TopInfo {
    font-size: 1.4em;
    }
html.page_demologin .TopInfo h1 {
    font-size: 1.6em;
    }

html.page_demologin .ButtonBar .Button {
    }
html.Mobile.page_demologin .ButtonBar .Button {
    }

html.page_login .Wrap.login {
    padding: 1rem;
    }

html.page_mobile_login div.LoginBox.Login h1,
html.page_login div.LoginBox.Login h1 {
    }
html.page_mobile_login div.LoginBox.Login,
html.page_login div.LoginBox.Login {
    }

html.page_demologin .Wrap.demologin {
    padding: 1rem;
    }

.LoginRegister {
    margin: 1rem;
    }
.LoginRegister h1 {
    font-weight: normal;
    }

.LoginBox a.ForgotPasswordLink {
    margin: 1rem 0 0 0;
    }

html.page_demologin .LoginRegister {
    margin-left: 0;
    }

html.page_customerloginregister .LoginRegisterBox {
    margin-top: 2rem;
    }

html.Mobile .LoginRegister {
    margin-top: 2rem;
    margin-left: 1rem;
    }
html.Mobile .LoginRegister.ButtonBar {
    text-align: center;
    }
html.Mobile .LoginRegister.ButtonBar .Button:first-of-type {
    margin-right: 2em;
    }

.LoginRegisterBox {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    }

.LoginRegisterBox h1 {
    font-weight: normal;
    margin: 0 0 0.9rem 0;
    }

.LoginRegisterBox  form {
    margin-left: 1rem;
    }

/* FIXME: Move these to commonforms */
.LoginRegisterBox form div.ErrorsArea {
    display: none;
    margin: 0;
    padding: 0;
    }
.LoginRegisterBox form div.ErrorsArea.FormErrs {
    display: inline-block;
    }

.LoginRegisterBox form div.ErrorsArea ul {
    margin: 0; padding: 0;
    display: inline-block;
    margin: 0 0 1rem 0;
    }
.LoginRegisterBox form div.ErrorsArea li {
    text-align: left;
    margin: 0; padding: 0;
    font-weight: normal;
    }


.LoginRegisterBox.Register form 
  label.CheckboxItem > *{
    vertical-align: middle;
    }
.LoginRegisterBox.Register form 
  label.CheckboxItem span.Checkbox {
    width: 9.4rem;
    text-align: right;
    margin-right: 1.3rem;
    }

.LoginRegisterBox.Register form label.CheckboxItem span.Text {
    width: 11.3rem;
    text-align: left;
    }
.LoginRegisterBox.Register form label.CheckboxItem input {
    width: auto;
    }

.LoginRegisterBox.Register label.SelectClinic {
    margin: 1rem 0;
    }

.LoginRegisterBox.Register label.Submit {
    width: 20rem;
    margin: 2rem 0 0 0;
    }


.LoginRegisterBox p.MBookDisclaimer {
    width: 20rem;
    text-align: left;
    padding: 0;
    margin: 0;
    }
.LoginRegisterBox p.MBookDisclaimer strong {
    font-weight: normal;
    }
    

.LoginRegisterBox label.RegEmailMarketingContact {
    padding: 1.3rem 0;
    }
.LoginRegisterBox label.RegEmailMarketingContact span {
    display: inline-block;
    max-width: 20rem;
    }
    
.LoginRegisterBox label.RegEmailMarketingContact input {
    width: auto;
    }

a.ForgotPasswordLink {
    display: block;
    text-decoration: none;
    }



.LoginRegisterBox.Hidden {
    display: none;
    }

div.Dialog div.RegisterBox fieldset {
    width: 22rem;
    margin-bottom: 2rem;
    display: inline-block;
    vertical-align: top;
    min-height: 32rem;
    margin-top: 1rem;
    margin-right: 1rem;
    }
div.Dialog div.RegisterBox fieldset:last-of-type {
    margin-bottom: none;
    margin-right: 0;
    }


/* End of include: loginRegister */


/***
 * Including file: topMenu
 */

html.NotLoggedIn ul.TopMenu {
    line-height: 2.5rem;
    margin-bottom: 1rem;
    margin-left: 0em;
    }

ul.TopMenu {
    display: inline-block;
    margin: 0.3rem 0 0rem 0rem;
    padding: 0;
    list-style: none;
    border-bottom: none;
    position: relative;
    }
html.NotLoggedIn ul.TopMenu {
    margin-top: 1rem;
    }
html.Desktop.LoggedIn ul.TopMenu {
##    bottom: 0.5rem;
    }

html.Mobile ul.TopMenu {
    margin-left: 0.2rem;
    }

ul.TopMenu>li {
    display: inline-block;
    position: relative;
    margin: 0 1em 0 1em;
    font-size: 1.1em;
    padding: 0.2rem 0.5rem;
    }

ul.TopMenu>li:first-of-type {
    margin-left: 0;
    padding-left: 0;
    }

html.Mobile ul.TopMenu>li {
    margin: 0 0.5em 0 0.6em;
    }

html.NotLoggedIn ul.TopMenu>li {
    padding: 0;
    }

ul.TopMenu>li.Active {
    border: 0.15rem solid var(--colour-Primary3);
    }
   
ul.TopMenu>li>a {
    display: inline-block;
    height: 100%;
    width: 100%;
    }
 
ul.TopMenu>li img {
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
    display: inline-block;
    padding-left: 0rem;
    width: 2rem;
    }
ul.TopMenu>li img.Hidden {
    margin: 0;
    padding: 0;
    display: none;
    }
ul.TopMenu>li span {
    vertical-align: middle;
    display: inline-block;
    }



/* End of include: topMenu */


/***
 * Including file: topSubMenu
 */

ul.TopMenu ul.SubMenu {
    list-style: none;
    width: 17rem;
    margin: 0;
    padding: 0;
    margin-top: 0.1rem;
    z-index: 100;
    margin-left: -0.6rem;
    margin-left: -0.2rem;
    padding: 0.5rem 0rem 0rem 0rem;
    position: absolute;
    }

ul.TopMenu ul.SubMenu>li {
    padding: 0.5rem 0.3rem 0.7rem 1rem;
    }

ul.TopMenu ul.SubMenu>li a {
    text-decoration: none;
    }

ul.TopMenu li.HasSubMenu {
    position: relative;
    overflow: visible;
    cursor: pointer;
    }
ul.SubMenu.Visible {
    display: block !important;
    }

ul.SubMenu {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    }

ul.SubMenu li {
    margin: 0;
    Padding: 0;
    }

body.Mobile ul.SubMenu {
    margin: 0;
    padding-bottom: 1rem;
    }

body.Mobile ul.SubMenu li:last-of-type {
    padding-bottom: 0;
    }

/* End of include: topSubMenu */


/***
 * Including file: userMenu
 */

div.UserMenu>h1 {
    margin: 0;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    padding-top: 0.5rem;
    text-align: right;
    font-weight: normal;
    font-size: 1.2rem;
    }
html.Mobile div.UserMenu>h1 {
    padding-top: 0.1rem;
    font-size: 1.5rem;
    }
div.UserMenu>h1 span.Label {
    display: inline-block;
    margin: 0 0 0 0.2rem;
    text-align: right;
    position: relative;
    vertical-align: middle;
    }
html.Mobile div.UserMenu>h1 span.Label {
    vertical-align: middle;
    }

div.UserMenu>h1:hover {
    cursor: pointer;
    }
div.UserMenu>h1.Active {
    cursor: pointer;
    }

div.UserMenu>h1 span.Icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/3254fc413b16c85758dea59f7118fe30/img/iconset%253Amenu.svg/repl/Secondary2");
    background-size: 1.5rem auto;
    margin-right: 0.4rem;
    position: relative;
    vertical-align: middle;
    }

html.Mobile div.UserMenu ul.SubMenu {
    padding-left: 2rem;
    width: 100%;
    }



div.UserMenu ul.UserMenu {
    display: none;
    margin: 0;
    padding: 0 0 0 0.3rem;
    box-sizing: border-box;
    /* Fixed, otherwise it has to respect its parent's Overflow:hidden */
    position: fixed;
    right: 0;
    z-index: 10;
    list-style: none;
    text-align: left;
    padding-top: 0.6rem;
    }


div.UserMenu ul.UserMenu li {
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    }

div.UserMenu ul.UserMenu li img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    }
div.UserMenu ul.UserMenu li span {
    display: inline-block;
    vertical-align: middle;
    }

div.UserMenu ul.UserMenu li a {
    padding: 0.5rem 0.3rem 0.7rem 0.6rem;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    }

body.Mobile div.UserMenu ul.UserMenu {
    border: none;
    }



/* End of include: userMenu */


/***
 * Including file: customers/regSuccess
 */

div.registrationsuccessful {
    display: inline-block;
    margin: 0.6rem;
    vertical-align: top;
    }

div.registrationsuccessful h1 {
    font-weight: normal;
    }

div.registrationsuccessful strong {
    font-size: 1.2rem;
    padding-left: 0.6rem;
    }

/* End of include: customers/regSuccess */


/***
 * Including file: termsandconditions
 */

html.page_termsandconditions div.ParsedownHelpTOC,
html.page_cookiepolicy div.ParsedownHelpTOC {
    display: none;
    }
html.page_termsandconditions div.ParsedownHelpBody,
html.page_cookiepolicy div.ParsedownHelpBody {
    margin: 0;
    padding: 1.5rem 1rem;
    }

/* End of include: termsandconditions */


/***
 * Including file: contactUs
 */

form.ContactUsForm input[type='text'] {
    height: 2em;
    width: 600px;
    }
form.ContactUsForm input[name='ContactUsSubject'] {
    }


form.ContactUsForm textarea[name='ContactUsMessage'] {
    height: 15rem;
    width: 600px;
    }


html.Mobile form.ContactUsForm input[name='ContactUsSubject'],
html.Mobile form.ContactUsForm textarea[name='ContactUsMessage'] {
    margin-top: 0.3rem;
    }

html.Mobile form.ContactUsForm .WITWidget {
    margin-top: 1.3rem;
    }


@media (width < 576px) {
    form.ContactUsForm textarea[name='ContactUsMessage'],
    form.ContactUsForm input[type='text'] {
        width: 280px;
        }

    form.ContactUsForm input[type='submit'] {
        width: 280px;
        }
    
} 

/* End of include: contactUs */


/***
 * Including file: site/forms
 */

form label {
    display: block;
    margin: 0.3rem 0 0.6rem 0;
    }

form label>* {
    vertical-align: middle;
    }

form b.ValErr {
    display: block;
    font-weight: bold;
    color: red;
    text-align: center;
    margin: 0.3rem;
    }

form label>span {
    display: inline-block;
    }

/* End of include: site/forms */


/***
 * Including file: site/products
 */


html.Site main ul.ProductsList {
    list-style: none;
    padding: 0;
    }
html.Site main ul.ProductsList li.ProductBlock {
    padding: 0 0 4rem 0;
    display: block;
##    padding-right: 4rem;
    }

html.Site main li.ProductBlock ul.ProductFeatures {
    margin: 0;
    list-style: none;
    padding: 0rem 0 1rem 2rem;
    }
html.Site main li.ProductBlock ul.ProductFeatures li {
    padding: 0 0 0.5rem 1rem;
    list-style-position: outside;
    list-style-type: "\2713";
    }
html.Site main li.ProductBlock ul.ProductFeatures li.No {
    list-style-type: "\2715";
    }

html.Site main li.ProductBlock form.BuyProduct {
    margin: 0;
    }

html.Site main ul.ProductsList li.ProductBlock p.ProductInfo span.Spacer {
    display: block;
    height: 1rem;
    }


html.Site main ul.ProductsList li.ProductBlock 
   form.BuyProduct input.Button.Buy {
    width: 20rem;
    height: 3rem;
    padding-left: 0;
    }

/* End of include: site/products */


/***
 * Including file: site/features
 */

html.Site.page_product-features main header {
    padding: 0;
    }
html.Site.page_product-features main header h2 {
    font-size: 2rem;
    padding: 0rem 0;
    }

html.Site main ul.Features {
    margin: 0;
    padding: 0;
    list-style: none;
    }

html.Site main ul.Features li.FeatureBlock {
    margin: 0;
    padding: 4rem;
    }
html.Site main ul.Features li.FeatureBlock h2 {
    padding-bottom: 0.8rem;
    }

html.Site main ul.Features li:nth-child(even) {
    background: var(--colour-WebsiteBackground);
    margin: 0;
    }


html.Site main ul.Features li.FeatureBlock {
    overflow: hidden;
    }

html.Site main ul.Features li.FeatureBlock img.Marker {
    float: left;
    }


html.Site main ul.Features li.FeatureBlock div.FeatureContents {
    padding-left: 14rem;
    vertical-align: middle;
    }



/* End of include: site/features */


/***
 * Including file: site/checkout
 */


html.Site .Checkout h1 {
    font-weight: normal;
    font-weight: 600;
    }

html.Site .CheckoutBlock {
    background: var(--colour-WebsiteBackgroundTwo);
    padding: 1rem;
    }
html.Site .CheckoutBlock:nth-child(even) {
    background: var(--colour-WebsiteBackground);
    }

html.Site .Checkout form.EditCheckoutProduct fieldset {
    display: inline-block;
    padding: 1rem 2rem;
    vertical-align: top;
    margin-right: 4rem;
    min-height: 31rem;
    }

html.Site .Checkout form.EditCheckoutProduct fieldset:first-of-type {
    margin-bottom: 2rem;
    }

html.Site .Checkout form.EditCheckoutProduct input.Save.Button {
    display: block;
    margin: 2rem 0;
    width: 52.6rem;
    }

html.Site .Checkout div.CheckoutBlock.Basket p.StrongItem strong.Legend {
    width: 18rem;
    }
html.Site .Checkout div.CheckoutBlock.Basket p.StrongItem.Total {
    margin-top: 0.8rem !important;
    }

html.Site .Checkout div.CheckoutBlock 
   label.PasswordStrengthIndicator span.Widget {
    border: 1px solid #110533;
    padding: 0;
    }


html.Site .Checkout .ProductConfigSummary .ContentBlock {
    display: inline-block;
    width: 30rem;
    vertical-align: top;
    }

html.Site .Checkout .ProductConfigSummary p.StrongItem span.Legend {
    display: inline-block;
    width: 16rem;
    }

html.Site .Checkout form.PaymentDetails input[type='text'],
html.Site .Checkout span.StripeElement {
    width: 20rem;
    height: 2rem;
    padding: 0.5rem;
    font-size: 1rem;
    } 

html.Site .Checkout span.StripeElement .InputElement {
    color: black;
    }

html.Site .Checkout form.PaymentDetails p.Terms {
    width: 20rem;
    text-align: center;
    }
html.Site .Checkout form.PaymentDetails label.Terms {
    text-align: left;
    }
html.Site .Checkout form.PaymentDetails label.Terms input {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 1rem;
    }

html.Site .Checkout form.PaymentDetails label.Submit {
    display: block;
    text-align: left;
    margin: 2rem 0;
    }

html.Site .Checkout form.PaymentDetails label.Submit input.Submit.Button {
    width: 20rem;
    }


@media (width < 960px) {
    html.Site .Checkout form.EditCheckoutProduct fieldset {
        min-height: auto;
        }
    html.Site .Checkout form.EditCheckoutProduct input.Save.Button {
        width: 24.3rem;
        }
}

@media (width < 576px) {
    html.Site .Checkout form.EditCheckoutProduct {
        margin-left: 0;
        }
    html.Site .Checkout form.EditCheckoutProduct fieldset {
        margin-right: 0;
        }
    html.Site .Checkout form.EditCheckoutProduct fieldset select,
    html.Site .Checkout form.EditCheckoutProduct fieldset 
       .PasswordStrengthIndicator,
    html.Site .Checkout form.EditCheckoutProduct fieldset 
       .PasswordStrengthIndicator .Widget,
    html.Site .Checkout form.EditCheckoutProduct fieldset input[type='text'],
    html.Site .Checkout form.EditCheckoutProduct fieldset 
       input[type='password'] {
        width: 17rem;
        }

    html.Site .Checkout form.EditCheckoutProduct input.Save.Button {
        width: 21.3rem;
        }

    html.Site .Checkout .ProductConfigSummary .ContentBlock {
        width: auto;
        }
    
    html.Site .Checkout .ProductConfigSummary .ContentBlock  
       p.StrongItem {
        margin: 1rem 0 0 1rem !important;

        }
    html.Site .Checkout .ProductConfigSummary .ContentBlock  
       p.StrongItem>strong {
        display: block;
        margin-left: 2rem;
        }

    html.Site .Checkout form.PaymentDetails label.Terms>span {
        width: 17rem;
        line-height: 1.5rem;
        }

}






/* End of include: site/checkout */


/***
 * Including file: site/skin
 */


html.Site .Strong {
    font-weight: bold;
    }

html.Site main {
    margin:0;
    padding:0;
    }

html.Site main p {
    line-height: 2rem;
    }
    
html.Site main * {
    color: var(--colour-Primary5);
    }

html.Site main header,
html.Site main section {
    background: var(--colour-WebsiteBackgroundTwo);
    padding: 0rem 2rem 2rem 1.6rem;
    margin: 0;
    }
html.Site main section {
    padding-top: 1rem;
    }

/* Section Colours */
html.Site section:nth-child(even) {
    background: var(--colour-WebsiteBackground);
    }
/* /Section Colours */



html.Site main header h2, 
html.Site main section h2 {
    margin: 0;
    padding: 1rem 0;
    }

html.Site main header p.TopStrap,
html.Site main header h2,
html.Site main section h2 {
    font-size: 1.8rem;
    text-align: left;
    margin: 0;
    padding: 1.8rem 0;
    font-weight: normal;
    }

html.Site main header p.TopStrap {
    font-size: 1.8rem;
    line-height: 2.4rem;
    }

html.Site main header h1.MainHeading {
    line-height: 1.8rem;
    font-weight: 600;
    padding: 1rem 0;
    }


html.Site main header span.HeaderBlurb {
    display: block;
    }

html.Site main header span.HeaderBlurb h1,
html.Site p,
html.Site main,
html.Site main p,
html.Site main section p,
html.Site main header span.HeaderBlurb p {
    font-size: 1rem;
    }

/* Footer */
html.Site footer {
    font-size: 1rem;
    padding: 2rem;
    background: var(--colour-Primary5);
    background: var(--colour-Primary4);
    color: var(--colour-Primary1);
    overflow: hidden;
    }
html.Site footer * {
    color: var(--colour-Primary1);
    }

html.Site footer div.Logo,
html.Site footer div.FooterLinks {
    display: inline-block;
    vertical-align: top;
    }

html.Site footer div.Logo {
    max-width: 40%;
    }
html.Site footer div.Logo a.Logo {
    text-decoration: none;
    font-size: 1.5rem;
    color: white;
    }
html.Site footer div.Logo p {
    line-height: 1.5rem;
    }

html.Site footer div.FooterLinks {
    float: right;
    }

html.Site footer div.FooterLinks .LinkList {
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 3rem;
    margin: 0;
    list-style: none;
    }
html.Site footer div.FooterLinks .LinkList:first-of-type {
    padding-left: 0;
    }

html.Site footer div.FooterLinks .LinkList a {
    text-decoration: none;
    }

html.Site section.TopSpeedTour video {
    width: 60rem;
    }

html.Site footer div.FooterLinks .LinkList li {
    line-height: 1.8rem;
    }
html.Site footer div.FooterLinks .LinkList li.ColTitle {
    padding-bottom: 1rem;
    font-size: 1.1rem;
    color: white;
    }

html.Site ul.MyList {
    margin: 0 0 0 2rem;
    padding: 0;
    }
html.Site ul.MyList li {
    list-style-position: outside;
    list-style-type: "\21D2";
    padding-left: 0.5rem;
    }


html.Site.page_login main {
    padding: 1rem;
    padding-bottom: 4rem;
    }

html.Site.page_login main input.Login {
    margin-top: 2rem;
    }
html.Mobile.page_login main input.Login {
    width: 100%;
    }
html.Mobile.page_login main a.ForgotPasswordLink {
    text-align: center;
    }
html.Mobile.mobile_forgotpassword input.Submit {
    width: 100%;
    }

html.Site div.ForgotPassword div.LoginRegisterBox {
    max-width: 430px;
    }

html.Site main p.Error {
    padding: 1rem;
    }

html.Site main div.ContactUs {
    padding: 1rem;
    }

html.Site form.ContactUsForm .ValErr {
    text-align: left;
    margin-bottom: 2rem;
    }

/* Desktop, > 10inches */
@media (width > 960px) {
    html {
        font-size: 18px;
    }

//    div.Header div.Logo {
//        display: inline-block;
//        box-sizing: border-box;
//        text-align: left;
//        margin-right: 5em;
//        }

}

/* Tablets/screens, less than 10inches */
@media (width < 960px) {
    html {
        font-size: 16px;
    }

    html.NotLoggedIn ul.TopMenu {
        text-align: center;
        font-size: 1rem;
        width: 100%;
        }

    html.NotLoggedIn ul.TopMenu li {
        text-align: center;
        margin: 0 1.2rem 0 1.2rem;
        }

    html div.Header div.Logo {
        display: block;
        text-align: center;
        margin:0; padding: 0;
        }

    html.NotLoggedIn ul.TopMenu ul.SubMenu {
        width: 130vw;
        left: 0;
        margin-left: -1.25em;
        }
    html.NotLoggedIn ul.TopMenu>li {
        position: unset;
        }

    html.Site main ul.ProductsList li.ProductBlock 
       form.BuyProduct input.Button.Buy {
        width: 100%;
        }

}

/* Phones */
@media (width < 576px) {
    html {
        font-size: 14px;
        }

    /* Fix to stop browsers from auto-adjusting from small font-size.
     * I'm not using that small a font size, but this "feature" was
     * somehow making font-size different between areas of the screen!
     */
    body,
    main header,
    main section,
    html.NotLoggedIn body header,
    div.CheckoutBlock,
    html.Site div.CheckoutSuccess
    {
        max-height: 999999px;
        }

    html.NotLoggedIn ul.TopMenu li {
        margin: 0 0.5em 0 0.5em;
        }



    html.Site main ul.Features li.FeatureBlock img.Marker {
        width: 4rem;
        padding-top: 0.3rem;
        }
    html.Site main ul.Features li.FeatureBlock div.FeatureContents {
        padding-left: 5rem;
        }
    html.Site main ul.Features li.FeatureBlock {
        padding: 1rem;
        }
    html.Site main ul.Features li.FeatureBlock h2 {
        font-size: 1.5rem;
        padding-top: 1.2rem;
        }

    html.Site footer div.Logo {
        max-width: 100%;
        }
    html.Site footer div.FooterLinks {
        float: none;
        display: block;
        }
    html.Site footer div.FooterLinks .LinkList {
        padding-left: 0;
        display: block;
        }
}







/* End of include: site/skin */


/***
 * Including file: loginRegister
 */

html.page_demologin .TopInfo {
    font-size: 1.4em;
    }
html.page_demologin .TopInfo h1 {
    font-size: 1.6em;
    }

html.page_demologin .ButtonBar .Button {
    }
html.Mobile.page_demologin .ButtonBar .Button {
    }

html.page_login .Wrap.login {
    padding: 1rem;
    }

html.page_mobile_login div.LoginBox.Login h1,
html.page_login div.LoginBox.Login h1 {
    }
html.page_mobile_login div.LoginBox.Login,
html.page_login div.LoginBox.Login {
    }

html.page_demologin .Wrap.demologin {
    padding: 1rem;
    }

.LoginRegister {
    margin: 1rem;
    }
.LoginRegister h1 {
    font-weight: normal;
    }

.LoginBox a.ForgotPasswordLink {
    margin: 1rem 0 0 0;
    }

html.page_demologin .LoginRegister {
    margin-left: 0;
    }

html.page_customerloginregister .LoginRegisterBox {
    margin-top: 2rem;
    }

html.Mobile .LoginRegister {
    margin-top: 2rem;
    margin-left: 1rem;
    }
html.Mobile .LoginRegister.ButtonBar {
    text-align: center;
    }
html.Mobile .LoginRegister.ButtonBar .Button:first-of-type {
    margin-right: 2em;
    }

.LoginRegisterBox {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    }

.LoginRegisterBox h1 {
    font-weight: normal;
    margin: 0 0 0.9rem 0;
    }

.LoginRegisterBox  form {
    margin-left: 1rem;
    }

/* FIXME: Move these to commonforms */
.LoginRegisterBox form div.ErrorsArea {
    display: none;
    margin: 0;
    padding: 0;
    }
.LoginRegisterBox form div.ErrorsArea.FormErrs {
    display: inline-block;
    }

.LoginRegisterBox form div.ErrorsArea ul {
    margin: 0; padding: 0;
    display: inline-block;
    margin: 0 0 1rem 0;
    }
.LoginRegisterBox form div.ErrorsArea li {
    text-align: left;
    margin: 0; padding: 0;
    font-weight: normal;
    }


.LoginRegisterBox.Register form 
  label.CheckboxItem > *{
    vertical-align: middle;
    }
.LoginRegisterBox.Register form 
  label.CheckboxItem span.Checkbox {
    width: 9.4rem;
    text-align: right;
    margin-right: 1.3rem;
    }

.LoginRegisterBox.Register form label.CheckboxItem span.Text {
    width: 11.3rem;
    text-align: left;
    }
.LoginRegisterBox.Register form label.CheckboxItem input {
    width: auto;
    }

.LoginRegisterBox.Register label.SelectClinic {
    margin: 1rem 0;
    }

.LoginRegisterBox.Register label.Submit {
    width: 20rem;
    margin: 2rem 0 0 0;
    }


.LoginRegisterBox p.MBookDisclaimer {
    width: 20rem;
    text-align: left;
    padding: 0;
    margin: 0;
    }
.LoginRegisterBox p.MBookDisclaimer strong {
    font-weight: normal;
    }
    

.LoginRegisterBox label.RegEmailMarketingContact {
    padding: 1.3rem 0;
    }
.LoginRegisterBox label.RegEmailMarketingContact span {
    display: inline-block;
    max-width: 20rem;
    }
    
.LoginRegisterBox label.RegEmailMarketingContact input {
    width: auto;
    }

a.ForgotPasswordLink {
    display: block;
    text-decoration: none;
    }



.LoginRegisterBox.Hidden {
    display: none;
    }

div.Dialog div.RegisterBox fieldset {
    width: 22rem;
    margin-bottom: 2rem;
    display: inline-block;
    vertical-align: top;
    min-height: 32rem;
    margin-top: 1rem;
    margin-right: 1rem;
    }
div.Dialog div.RegisterBox fieldset:last-of-type {
    margin-bottom: none;
    margin-right: 0;
    }


/* End of include: loginRegister */


/***
 * Including file: site/loginRegister
 */

.Wrap.demologin {
    margin: 1rem;
    }

.demologin label.Submit {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    }
.demologin span.Submit {
    padding: 0;
    }
.demologin form.EditCheckoutProduct input[type='submit'],
.demologin form[name='LoginForm'] span.Submit,
.demologin form[name='LoginForm'] input[type='submit'] {
    width: 100% !important;
    display: inline-block;
    position: relative;
    }

.LoginRegister {
    text-align: left;
    }

.LoginRegisterBox {
    display: inline-block;
    margin: 0.6rem;
    padding: 0.6rem;
    border: 0.1rem solid var(--colour-Primary3);
    border-radius: 0.3rem;
    vertical-align: top;
    background: var(--colour-Primary1);
    }

.ForgotPassword {
    margin-bottom: 4rem;
    }

.LoginRegisterBox div.ErrorsArea.FormErrs li {
    color: red !important;
    padding-top: 0.6rem;
    }

.LoginRegisterBox.Login {
    margin-right: 2.5rem;
    }

.LoginRegisterBox form label {
    margin: 0.3rem;
    }

.LoginRegisterBox form label span {
    display: inline-block;
    }

.LoginRegisterBox form div.ErrorsArea {
    width: 18.8rem;
    margin-left: auto;
    margin-right: auto;
    }

.LoginRegisterBox form div.ErrorsArea li {
    text-align: center;
    }


.LoginRegisterBox.Register form label span {
    }

.LoginRegisterBox.Register form 
  label.CheckboxItem > *{
    vertical-align: middle;
    }
.LoginRegisterBox.Register form 
  label.CheckboxItem span.Checkbox {
    width: 9.4rem;
    text-align: right;
    margin-right: 1.3rem;
    }

.LoginRegisterBox.Register form 
  label.CheckboxItem span.Text {
    width: 11.3rem;
    text-align: left;
    }
.LoginRegisterBox.Register form 
  label.CheckboxItem input {
    width: auto;
    }

.LoginRegisterBox form input.Submit,
.LoginRegisterBox form span.Submit {
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    }

html.Mobile .LoginRegisterBox form input,
html.Mobile .LoginRegisterBox form span.Submit {
    width: 17rem;
    }

.LoginRegisterBox form input,
.LoginRegisterBox form select {
    display: inline-block;
    }

.LoginRegisterBox form input[type='submit'] {
    margin-top: 0.6rem;
    }

.LoginRegisterBox p.MBookDisclaimer {
    width: 18.8rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

.LoginRegisterBox a {
    color: var(--colour-Primary5);
    }

.LoginRegisterBox b.ValErr {
    max-width: 12.5rem !important;
    }


/* End of include: site/loginRegister */


/***
 * Including file: mobile/help/quickstart
 */



/* End of include: mobile/help/quickstart */


/***
 * Including file: site/demosystem
 */

html.Site div.DemoInfo {
    padding: 1rem;
    }

html.Site div.DemoInfo button {
    margin: 0 1rem 1rem 0;
    }

/* End of include: site/demosystem */


/***
 * Including file: site/videos
 */

html.page_products video  {
    width: 70vw;
    height: auto;
    }

html.page_demologin div.DemoVideos {
    padding-bottom: 5rem;
    text-align: center;
    }

html.page_demologin div.DemoVideos>h1 {
    text-align: center;
    margin: 2rem 0 0 0;
    padding: 2rem 0 2rem 0;
    border-top: 1px solid #aaaaaa;
    }

html.page_demologin div.VideoContainer {
    display: inline-block;
    text-align: center;
    padding: 1rem;
    }
html.page_demologin div.VideoContainer h1 {
    font-size: 1.2rem;
    margin: 1rem 0 0 0;
    padding: 0;
    }
html.page_demologin div.VideoContainer p {
    font-size: 1rem;
    }
html.page_demologin div.VideoContainer video {
    width: 30rem;
    height: auto;
    }

/* End of include: site/videos */