/** 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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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/1787839984/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: block; src: url(https://m-booksystems.co.uk/app/Apps_Font/v/1787839984/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; } /** Including file: jqueryui **/ /*! jQuery UI - v1.13.2 - 2023-03-07 * http://jqueryui.com * Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23123481&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23123480&iconColorError=%23123479&fcError=%23123478&borderColorError=%23123477&bgTextureError=flat&bgColorError=%23123476&iconColorHighlight=%23123475&fcHighlight=%23123474&borderColorHighlight=%23123473&bgTextureHighlight=flat&bgColorHighlight=%23123472&iconColorActive=%23123471&fcActive=%23123470&borderColorActive=%23123469&bgTextureActive=flat&bgColorActive=%23123468&iconColorHover=%23123467&fcHover=%23123466&borderColorHover=%23123465&bgTextureHover=flat&bgColorHover=%23123464&iconColorDefault=%23123463&fcDefault=%23123462&borderColorDefault=%23123461&bgTextureDefault=flat&bgColorDefault=%23123460&iconColorContent=%23123459&fcContent=%23123458&borderColorContent=%23123456&bgTextureContent=flat&bgColorContent=%23123455&iconColorHeader=%23123454&fcHeader=%23123453&borderColorHeader=%23123452&bgTextureHeader=flat&bgColorHeader=%23123451&cornerRadius=0&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif * Copyright jQuery Foundation and other contributors; Licensed MIT */ .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; -ms-filter: "alpha(opacity=0)"; /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .ui-icon { display: inline-block; vertical-align: middle; margin-top: -.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; font-size: 100%; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px .4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { padding: .4em 1em; display: inline-block; position: relative; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Support: IE <= 11 */ overflow: visible; } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2em; box-sizing: border-box; text-indent: -9999px; white-space: nowrap; } /* no icon support for input elements */ input.ui-button.ui-button-icon-only { text-indent: 0; } /* button icon element(s) */ .ui-button-icon-only .ui-icon { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: .4em 1em; } /* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup { vertical-align: middle; display: inline-block; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-controlgroup .ui-controlgroup-label { padding: .4em 1em; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } /* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input { /* Support: IE8 only, Android < 4.4 only */ width: 75%; width: calc( 100% - 2.4em ); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: .12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-checkboxradio-disabled { pointer-events: none; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Icons */ .ui-datepicker .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; left: .5em; top: .3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0; } .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; -ms-filter: "alpha(opacity=25)"; /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: pointer; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: .222em 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 2em; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #5D4C91; } .ui-widget-content { border: 1px solid #5D4C91; background: white; color: #110533; } .ui-widget-content a { color: #110533; } .ui-widget-header { border: 1px solid none; background: white; color: #110533; font-weight: bold; } .ui-widget-header a { color: #110533; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, /* We use html here because we need a greater specificity to make sure disabled works properly when clicked or hovered */ html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #5D4C91; background: #FFFAE3; font-weight: normal; color: #110533; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #110533; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #332267; background: #FFFAE3; font-weight: normal; color: #110533; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #110533; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #332267; background: #110533; font-weight: normal; color: #DBD5EC; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #332267; background-color: #DBD5EC; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #DBD5EC; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #9588BD; background: #D3C062; color: #110533; } .ui-state-checked { border: 1px solid #9588BD; background: #D3C062; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #110533; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #123477; background: #123476; color: #123478; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #123478; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #123478; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; -ms-filter: "alpha(opacity=70)"; /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; -ms-filter: "alpha(opacity=35)"; /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { -ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123459_256x240.png/repl/NONE"); } .ui-widget-header .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123454_256x240.png/repl/NONE"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123467_256x240.png/repl/NONE"); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123471_256x240.png/repl/NONE"); } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123475_256x240.png/repl/NONE"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123479_256x240.png/repl/NONE"); } .ui-button .ui-icon { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/jqueryui%252Fui-icons_123463_256x240.png/repl/NONE"); } /* positioning */ /* Three classes needed to override `.ui-button:hover .ui-icon` */ .ui-icon-blank.ui-icon-blank.ui-icon-blank { background-image: none; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0; } /* Overlays */ .ui-widget-overlay { background: #123480; opacity: .3; -ms-filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { -webkit-box-shadow: 0px 0px 5px #123481; box-shadow: 0px 0px 5px #123481; } /** 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-PaidInFullH1: #2dc062; --colour-PaidInFullH2: #2d8324; --colour-WebsiteBackground: #f4f0ff; --colour-WebsiteBackgroundTwo: #fffced; --colour-SiteInk: #1b0c46; --colour-SiteAccent: #8657ed; --colour-SiteAccentBackground: #f0e9fd; --colour-SiteBackground: #fdfaf7; --colour-SiteCTA: #ffd55c; --colour-SiteSurface: #ffffff; --colour-PricingPurple: #5227e6; --colour-PricingPurplePale: #f1ebff; --colour-PricingPurpleBorder: #d8ccf7; --colour-PricingBlue: #0758d5; --colour-PricingBluePale: #eaf0ff; --colour-PricingBlueBorder: #c9d9f5; --colour-PricingRule: #e5e3ec; --colour-PricingCTAEnd: #6738e9; --colour-FinalCTADark: #0b0228; --colour-FinalCTAMid: #241057; --colour-FinalCTABright: #9b5cf6; --colour-FinalCTACream: #fffdf4; --colour-FinalCTAGlow: rgba(134, 87, 237, 0.22); } /* 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-Primary5); } /* 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, .ui-menu-item.ui-state-active { background-color: var(--colour-Primary3) !important; color: var(--colour-Secondary1) !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); } /* ButtonBar Button Colours*/ div.ButtonBar { background-color: var(--colour-Primary5); } div.ButtonBar .Button, div.ButtonBar .Button span { background-color: var(--colour-Primary5); color: var(--colour-Primary1) !important; } div.ButtonBar .Button.Active, div.ButtonBar .Button.Active span { background-color: var(--colour-Primary4); } div.ButtonBar .Button.Active:hover { background-color: var(--colour-Primary4) !important; } div.ButtonBar .Button:hover { background-color: var(--colour-Primary5) !important; } div.ButtonBar div.Menu .Button:hover, div.ButtonBar.BookingDetails div.Menu .Button:hover span { background-color: var(--colour-Primary3) !important; color: var(--colour-Secondary3) !important; } /* ToolTip Buttonbar colours */ div.ButtonBar.PopoverButtons { border-radius: 0 0 0.5rem 0.5rem; padding-left: 1rem; } div.ButtonBar.PopoverButtons { background-color: var(--colour-Primary4); } div.ButtonBar.PopoverButtons .Button, div.ButtonBar.PopoverButtons .Button span { background-color: var(--colour-Primary4); color: var(--colour-Primary1) !important; } div.ButtonBar.PopoverButtons .Button.Active, div.ButtonBar.PopoverButtons .Button.Active span { background-color: var(--colour-Primary3); } div.ButtonBar.PopoverButtons .Button.Active:hover { background-color: var(--colour-Primary3) !important; } div.ButtonBar.PopoverButtons .Button:hover { background-color: var(--colour-Primary4) !important; } div.ButtonBar.PopoverButtons div.Menu .Button:hover, div.ButtonBar.PopoverButtons.BookingDetails div.Menu .Button:hover span { background-color: var(--colour-Primary3) !important; color: var(--colour-Secondary3) !important; } /* Demo System */ div.ButtonBar.DemoLogin { background: var(--colour-Secondary1); } div.ButtonBar.DemoLogin .Button { background-color: var(--colour-Secondary2); color: var(--colour-Primary5) !important; } div.ButtonBar.DemoLogin .Button:hover { background-color: var(--colour-Secondary3) !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); } /* "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); } /** 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/1787839984/img/iconset%252Fok.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/1787839984/img/iconset%252Fsave.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/1787839984/img/iconset%252Fcancel.svg/repl/NONE"); } .ButtonBar .Button.Cancel { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcancel.svg/repl/Secondary2"); } /* Usage: Admin buttons, "Add Premises" */ .Button.Add { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fadd.svg/repl/NONE"); } .ButtonBar .Button.Add { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fadd.svg/repl/Secondary2"); } /* Usage: Create Booking button */ .Button.Create { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcreate.svg/repl/NONE"); } .ButtonBar .Button.Create { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcreate.svg/repl/Secondary2"); } /* Usage: Create Booking on Mobile */ html.Mobile .ButtonBar.BookingsCalendar .Button.Create { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcreate.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/1787839984/img/iconset%252Fedit.svg/repl/NONE"); } .ButtonBar .Button.Edit { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fedit.svg/repl/Secondary2"); } /* 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/1787839984/img/iconset%252Fdelete.svg/repl/NONE"); } .ButtonBar .Button.Remove, .ButtonBar .Button.Delete { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fdelete.svg/repl/Secondary2"); } /* 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/1787839984/img/iconset%252Fprint.svg/repl/NONE"); background-size: 1.3rem; } .ButtonBar .Button.RemotePrintButton, .ButtonBar .Button.PrintButton { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fprint.svg/repl/Secondary2"); background-size: 1.3rem; } /* Usage: Cancel Booking dialog */ .Button.No { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fno.svg/repl/NONE"); } /* Usage: BookingDetails buttonbar */ .Button.ViewInCalendar { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FviewInCalendar.svg/repl/Secondary2"); } html.Mobile .Button.ViewInCalendar { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FviewInCalendar.svg/repl/Secondary2"); } /* Placeholder icon for "copy" button in "Edit Cal Item" */ .Button.CopytoallmyotherClinics { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FviewInCalendar.svg/repl/NONE"); } /* Usage: BookingDetails Buttonbar: NoShow */ .Button.Error { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Ferror.svg/repl/NONE"); background-size: 1.3rem; } .ButtonBar .Button.Error { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Ferror.svg/repl/Secondary2"); } /* Usage: BookingDetails buttonbar */ /* Reusing Create Booking icon */ .Button.Rebook { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Frebook.svg/repl/NONE"); background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcreate.svg/repl/NONE"); } .Button.Rebook { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcreate.svg/repl/Secondary2"); } /* Usage: BookingsCalendar buttonbar: Search And Book */ .Button.SlotSearch, .Button.Search { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fsearch.svg/repl/NONE"); } .ButtonBar .Button.SlotSearch, .ButtonBar .Button.Search { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fsearch.svg/repl/Secondary2"); } /* Usage: BookingsCalendar buttonbar: Find Bookings and Clients */ .Button.SearchForThingsForm { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Ffind.svg/repl/NONE"); } .ButtonBar .Button.SearchForThingsForm { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Ffind.svg/repl/Secondary2"); } /* Usage: BookingsCalendar buttonbar */ .Button.PractitionerAvailability { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Favailability.svg/repl/NONE"); background-size: 1.3rem; } .ButtonBar .Button.PractitionerAvailability { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Favailability.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/1787839984/img/iconset%252FjumpToToday.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/1787839984/img/iconset%252FclientHasArrived.svg/repl/Secondary2"); } html.Mobile .Button.HasArrived { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FclientHasArrived.svg/repl/Secondary2"); } /* Usage: Calendars WorkingWeekWizard */ .Button.Next { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fnext.svg/repl/NONE"); } /* Usage: Calendars WorkingWeekWizard */ Button.AddAvailability { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FaddAvailability.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/1787839984/img/iconset%252Fok.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/1787839984/img/iconset%252Freset.svg/repl/NONE"); } /* Usage: BookingForm: AddToWaitingList */ .Button.AddtoWaitingList { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FaddToWaitingList.svg/repl/NONE"); } /* Usage: BookingCalendar Bookings popover: Details button */ .Button.Details { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fdetails.svg/repl/NONE"); } .ButtonBar .Button.Details { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fdetails.svg/repl/Secondary2"); } /* Usage: Login page */ .Button.Login { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Flogin.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/1787839984/img/iconset%252FdemoRegister.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/1787839984/img/iconset%252FaddToCart.svg/repl/NONE"); } /* Usage: Main site, checkout "Complete Purchase" */ .Button.Checkout { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fcheckout.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/1787839545/img/silk%252Fcalendar.png/repl/NONE"); * background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839545/img/icons8mb4%252Ficons8-calendar-16.png/repl/NONE"); */ } .PopupForm.EditDetails { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fedit.svg/repl/NONE"); } /** 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; } label.RequiredField span.Legend::before, div.RequiredField label.Main>span.Legend::before { content: "*"; color: red; vertical-align: middle; padding-right: 0.3rem; } ## /* 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; text-align: center; margin: 0.3rem 0; } form b.ValErr { width: 20rem; } /* 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; } 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; } /** 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 { font-size: 14px; } body { padding: 0; margin: 0; position: relative; } html.page_mobile_bookings_home body { font-size: 1rem; } *, .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%; } /* Tweaks to the jqueryui styles */ .ui-menu { width: 13.8rem !important; } html.Mobile .ui-menu { width: 48vw !important; } .ui-menu-item { } .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/1787839984/img/iconset%252Fhelp.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/1787839984/img/iconset%252Fhelp.svg/repl/Primary5"); } /* Items which should stick to the top of the page on scroll */ .Sticky { margin-top: 0 !important; position: fixed !important; top: 0; z-index: 10; } 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: 99999; } .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; } .MakeSticky { z-index: 100 !important; } h1.TodaysBookings .DateArrow.Left { padding: 0 0.5em 0 0; } h1.TodaysBookings .DateArrow.Right { padding: 0 0 0 0.5em; } /* Desktop, > 10inches */ @media (width > 1025px) { } /* Tablets/screens, less than 10inches */ @media (width < 1025px) { html.IsLoggedIn ul.TopMenu>li { margin-right: 0.5em !important; margin-left: 0.5em !important; } ul.TopMenu ul.SubMenu { margin-left: -4.2rem !important; } div.ButtonBar.BookingDetails a, div.ButtonBar.BookingDetails button, div.ButtonBar.BookingsCalendar a, div.ButtonBar.BookingsCalendar button { margin-right: 2rem; } } /* Phones */ @media (width < 577px) { html { font-size: 14px; } body, main header, main section, html body header, div.CheckoutBlock, html.Site div.CheckoutSuccess, div { max-height: 999999px; } div.Header div.UserMenu { top: 0; } } /** Including file: statusBanner **/ div.SystemStatusBanner { background: #FFF2AF; text-align: center; margin: 0; padding: 0.3rem 0 0.6rem 0; color: var(--colour-Primary5); width: 100%; font-size: 1.2rem; } div.SystemStatusBanner h1, div.SystemStatusBanner p { margin: 0 0 0.3rem 0; padding: 0; } div.SystemStatusBanner p:last-of-type { margin-bottom: 0; } /** Including file: businessSwitcher **/ div.BusinessSwitcher { color: var(--colour-Primary1); text-align: left; margin: 0.5rem 0 0 0; } div.BusinessSwitcher label.BusinessSwitcher { margin-bottom: 0; } div.BusinessSwitcher label.BusinessSwitcher select { color: var(--colour-Primary5); padding: 0.2rem 0.6rem 0.2rem 0; vertical-align: middle; background: var(--colour-MenuFontColour); appearance: auto; width: 14rem; } div.BusinessSwitcher label.BusinessSwitcher span { margin-right: 0.7rem; width: 4rem; } /** 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: 1px solid var(--colour-Secondary4); font-weight: normal; box-shadow: none; font-size: 1rem; float: none; opacity: 1; cursor: pointer; } .Button:focus-visible { outline: none; } a.Button { text-decoration: none; } .ButtonBar a.Button { padding-top: 0.9em; } .Button.SmallButton { padding: 0.4em 0.5em 0.4em 2.5em; ## background-position: 0.5em 0.3em; margin: 0; box-sizing: border-box; font-size: 1em; font-weight: normal; } html.Mobile .Button.SmallButton { padding: 0.4em 0.5em 0.3em 2em !important; } .ui-dialog .ui-dialog-buttonpane button:last-of-type { margin-right: 0; } .ui-dialog .ui-dialog-buttonpane button { font-size: 1em; } html.Mobile .ui-dialog .ui-dialog-buttonpane button { font-size: 1em; padding: 0.6em 1em 0.4em 2.5em; } /* EditTable add button */ .Button.AddRow { margin-top: 0.5em; margin-left: 0.5em; } /* 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; font-size: 0.6rem; left: -0.1rem; vertical-align: bottom; margin: 0 0rem 0 0; padding-right: 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; } /** Including file: header **/ div.Header { margin:0; padding: 0; background: var(--colour-Primary5); box-sizing: border-box; width: 100%; padding: 0.5rem 0.5rem 1rem 0.5rem; position: relative; font-size: 1rem; } html.NotLoggedIn div.Header { 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 ul.TopMenu, div.Header div.UserMenu { vertical-align: top; box-sizing: border-box; position: relative; } div.Header ul.TopMenu { vertical-align: bottom; position: relative; bottom: 0.1rem; } 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; padding: 0; } div.Header div.UserMenu { display: inline-block; margin: 0; padding: 0; position: absolute; right: 0; top: 0.1rem; } div.UserMenu h1 { font-size: 1rem; font-weight: normal; } /** 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.page_termsandconditions div.ParsedownHelp .ParsedownHelpTOC, html.page_termsandconditions div.ParsedownHelp .ParsedownHelpBody { overflow: visible; } 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/1787839984/img/iconset%252Fmenu.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; } /** 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 h1 { font-weight: normal; } html.Mobile .LoginBox input[type='text'], html.Mobile .LoginBox input[type='password'] { width: 100%; } .LoginBox a.ForgotPasswordLink { margin: 1rem 0 0 0; } html.page_demologin .LoginRegister { margin-left: 0; } header>div.LoginRegister { padding: 1rem 0; } div.LoginRegister .ButtonBarAlt .Button { margin: 1rem; } html.Mobile div.LoginRegister .ButtonBarAlt .Button { width: 100%; display: block; margin-top: 2rem; } .LoginRegisterBox { display: inline-block; margin: 0; vertical-align: top; } .LoginRegisterBox h1 { font-weight: normal; margin: 0 0 0.9rem 0; } /* 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; } /** Including file: pointAndHover **/ /* Colours and transitions of things as they * become active, focussed, pointed at. * * Copied from WIT and adapted for this skin. */ /* #.IsPointable:hover, #a:hover, #select:hover, #label:hover { # color: #968324 !important; # transition: color .5s ease; # } */ .IsPointable:hover { cursor: pointer; } input, select, span.StripeElement { color: var(--colour-MainFontColour); border: 1px solid #110533; } span.StripeElement { width: 10.7rem; background: white; display: inline-block; } input:hover, select:hover { /* border: 0.1rem solid #FFFAE3;*/ /* transition: border .5s ease;*/ } input:focus, select:focus { outline: none; /* transition: background-color 1s ease;*/ } /** Including file: topMenu **/ html.NotLoggedIn ul.TopMenu { line-height: 2rem; } ul.TopMenu { display: inline-block; margin: 0.3rem 0 0rem 0rem; padding: 0; list-style: none; border-bottom: none; position: relative; } html.Desktop ul.TopMenu { min-width: 44rem; } html.Mobile ul.TopMenu { margin-left: 0.2rem; } ul.TopMenu>li { display: inline-block; position: relative; margin: 0 1em 0 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.Bookings img { position: relative; top: 0.1rem; } ul.TopMenu>li img.Hidden { margin: 0; padding: 0; display: none; } ul.TopMenu>li span { vertical-align: middle; display: inline-block; } /** Including file: topSubMenu **/ ul.TopMenu ul.SubMenu { list-style: none; width: 20rem; 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; } /** 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; } html.Mobile div.UserMenu>h1 { padding-top: 0.1rem; font-size: 1.5rem; } div.UserMenu>h1 span.Label { display: inline-block; margin: 0; 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: 2rem; height: 2rem; background-position-y: -0.3rem; background-position-x: 0.1rem; background-repeat: no-repeat; background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fmenu.svg/repl/Secondary2"); background-size: 2.5rem 2.5rem; position: relative; vertical-align: middle; } div.UserMenu.WithLabel>h1 span.Label { padding-left: 0.7rem; } html.Mobile div.UserMenu ul.SubMenu { padding-left: 2rem; width: 100%; } div.UserMenu ul.UserMenu { display: none; margin: 0.5rem 0 0 0; padding: 0 0 0 0.3rem; box-sizing: border-box; /* Fixed, otherwise it has to respect its parent's Overflow:hidden */ position: absolute; right: 0; z-index: 10000; list-style: none; text-align: left; padding-top: 0.6rem; } html.Mobile div.UserMenu ul.UserMenu { width: 100%; position: fixed; } 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; } div.UserMenu li.Logout img { position: relative; left: 0.2rem; } /** 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; } /** 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; } /** 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'], form.ContactUsForm input[type='submit'] { width: 100%; } } /* Public Contact page */ html.Site.page_contact main header.ContactPage { overflow: hidden; box-sizing: border-box; min-height: 55rem; padding: 3rem max(2rem, calc((100% - 90rem) / 2)) 5rem; background: var(--colour-SiteBackground); } html.Site.page_contact main header.ContactPage .ContactPageInner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(22rem, 0.75fr); align-items: center; gap: 5rem; max-width: 90rem; margin: 0 auto; } html.Site.page_contact main header.ContactPage .ContactPageHeading { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 2.75rem; } html.Site.page_contact main header.ContactPage .ContactPageHeading > img { display: block; width: 8rem; height: 8rem; } html.Site.page_contact main header.ContactPage h1.MainHeading { position: relative; margin: 0; padding: 0 0 2.25rem; color: var(--colour-SiteInk); font-size: 4rem; line-height: 1.15; } html.Site.page_contact main header.ContactPage h1.MainHeading:after { position: absolute; bottom: 0; left: 0; width: 5rem; height: 0.3rem; border-radius: 1rem; background: var(--colour-PricingPurple); content: ''; } html.Site.page_contact main header.ContactPage .ContactPageBlurb { margin: 1.5rem 0 2.75rem 10.75rem; } html.Site.page_contact main header.ContactPage .ContactPageBlurb p { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1.05rem; line-height: 1.75rem; } html.Site.page_contact main header.ContactPage .ContactPageBlurb p:last-child { position: relative; padding-left: 3.25rem; } html.Site.page_contact main header.ContactPage .ContactPageBlurb p:last-child:before { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-email.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site.page_contact main header.ContactPage .ContactPageBlurb a { color: var(--colour-PricingPurple); font-weight: 600; } html.Site.page_contact main header.ContactPage form.ContactUsForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; } html.Site.page_contact main header.ContactPage form.ContactUsForm label.WITWidget { display: block; min-width: 0; margin: 0; } html.Site.page_contact main header.ContactPage form.ContactUsForm label.WITWidget:nth-child(n+3) { grid-column: 1 / -1; } html.Site.page_contact main header.ContactPage form.ContactUsForm span.Legend { display: block; margin: 0 0 0.6rem; color: var(--colour-SiteInk); font-size: 1rem; font-weight: bold; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[type='text'], html.Site.page_contact main header.ContactPage form.ContactUsForm textarea { display: block; box-sizing: border-box; width: 100%; border: 1px solid var(--colour-PricingPurpleBorder); border-radius: 0.5rem; background-color: var(--colour-SiteSurface); background-position: 0.75rem 50%; background-repeat: no-repeat; background-size: 1.75rem 1.75rem; color: var(--colour-SiteInk); font: inherit; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[type='text'] { height: 3.5rem; padding: 0.75rem 1rem 0.75rem 3.5rem; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[name='ContactUsFrom'] { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-user.svg/repl/NONE"); } html.Site.page_contact main header.ContactPage form.ContactUsForm input[name='ContactUsFromEmail'] { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-email.svg/repl/NONE"); } html.Site.page_contact main header.ContactPage form.ContactUsForm input[name='ContactUsSubject'] { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-subject-tag.svg/repl/NONE"); } html.Site.page_contact main header.ContactPage form.ContactUsForm textarea[name='ContactUsMessage'] { width: 100%; height: 14rem; padding: 1rem 1rem 1rem 3.5rem; background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-message-pencil.svg/repl/NONE"); background-position: 0.75rem 0.8rem; resize: vertical; } html.Site.page_contact main header.ContactPage form.ContactUsForm input::placeholder, html.Site.page_contact main header.ContactPage form.ContactUsForm textarea::placeholder { color: var(--colour-Primary2); opacity: 1; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[type='submit'] { box-sizing: border-box; width: 14rem; height: 3.5rem; padding: 0.75rem 1.25rem 0.75rem 3.5rem; border: 0; border-radius: 0.5rem; background-color: var(--colour-PricingPurple); background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcontactus%252Fcontact-send-plane.svg/repl/NONE"); background-position: 0.75rem 50%; background-repeat: no-repeat; background-size: 2rem 2rem; color: var(--colour-SiteSurface) !important; font-size: 1.1rem; font-weight: bold; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[type='submit']:hover { background-color: var(--colour-PricingCTAEnd) !important; } html.Site.page_contact main header.ContactPage .ContactPageIllustration img { display: block; width: min(30rem, 100%); height: auto; margin: 0 auto; } @media (width < 900px) { html.Site.page_contact main header.ContactPage .ContactPageInner { grid-template-columns: 1fr; } html.Site.page_contact main header.ContactPage .ContactPageContent { width: 100%; max-width: 52rem; margin: 0 auto; } html.Site.page_contact main header.ContactPage .ContactPageIllustration { display: none; } } @media (width < 576px) { html.Site.page_contact main header.ContactPage { min-height: 0; padding: 3rem 1.25rem; } html.Site.page_contact main header.ContactPage .ContactPageHeading { display: block; text-align: center; } html.Site.page_contact main header.ContactPage .ContactPageHeading > img { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; } html.Site.page_contact main header.ContactPage h1.MainHeading { font-size: 2.5rem; text-align: center; } html.Site.page_contact main header.ContactPage h1.MainHeading:after { left: 50%; transform: translateX(-50%); } html.Site.page_contact main header.ContactPage .ContactPageBlurb { margin: 2rem 0; } html.Site.page_contact main header.ContactPage form.ContactUsForm { display: block; } html.Site.page_contact main header.ContactPage form.ContactUsForm label.WITWidget { margin-bottom: 1.25rem; } html.Site.page_contact main header.ContactPage form.ContactUsForm input[type='submit'] { width: 100%; } } /** 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; } /** 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; } /* Products page header and shared Products snippet */ html.Site main :is(header.ProductsHero, section.Products) { position: relative; overflow: hidden; padding: 2.25rem 2rem 1.5rem; background: linear-gradient(135deg, var(--colour-WebsiteBackgroundTwo), var(--colour-WebsiteBackground)); } html.Site main :is(header.ProductsHero, section.Products):before, html.Site main :is(header.ProductsHero, section.Products):after { position: absolute; z-index: 0; content: ''; background: rgba(255, 255, 255, 0.42); transform: rotate(-8deg); } html.Site main :is(header.ProductsHero, section.Products):before { top: -15rem; left: -12rem; width: 42rem; height: 34rem; border-radius: 0 0 70% 0; } html.Site main :is(header.ProductsHero, section.Products):after { top: 7rem; right: -13rem; width: 30rem; height: 25rem; } html.Site main :is(header.ProductsHero, section.Products) > * { position: relative; z-index: 1; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction { text-align: center; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction p.ProductsEyebrow { margin: 0 0 0.8rem; color: var(--colour-SiteAccent); font-size: 0.9rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction :is(h1, h2) { margin: 0; color: var(--colour-SiteInk); font-size: 2.6rem; line-height: 1.2; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction > p:last-child { margin: 1rem auto 1.1rem; color: var(--colour-SiteInk); font-size: 1.1rem; line-height: 1.5; } html.Site main :is(header.ProductsHero, section.Products) ul.ProductsList { display: flex; align-items: stretch; gap: 2.25rem; width: min(67rem, 100%); margin: 0 auto; } html.Site main :is(header.ProductsHero, section.Products) ul.ProductsList li.ProductBlock { display: flex; flex: 1 1 0; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 1.2rem 1.6rem 1.5rem; border-radius: 0.8rem; background: var(--colour-SiteSurface); box-shadow: 0 0.35rem 1.2rem rgba(27, 12, 70, 0.12); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock h3 { margin: 0; text-align: center; color: var(--colour-SiteInk); font-size: 1.9rem; line-height: 1.2; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.Price { margin: 0.35rem 0 0.8rem; color: var(--colour-SiteInk); line-height: 1.5; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.Price:first-of-type { text-align: center; font-size: 1.05rem; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.Price:first-of-type .Highlight { color: var(--colour-PricingCTAEnd); font-size: 2rem; font-weight: bold; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.ProductInfo { min-height: 3rem; margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.5rem; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.ProductInfo strong, html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.Price .Highlight { color: var(--colour-SiteInk); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock:first-child p.ProductInfo strong { color: var(--colour-PricingPurple); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.ProductInfo span.Spacer { height: 0.65rem; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock ul.ProductFeatures { margin: 1rem 0 0.5rem; padding: 0 0 0 2rem; } html.Site main :is(header.ProductsHero, section.Products) .SoloBookingOffer { margin-bottom: 1rem; } html.Site main :is(header.ProductsHero, section.Products) .SoloBookingOffer p { margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.5rem; } html.Site main :is(header.ProductsHero, section.Products) .SoloBookingOffer p.FreeBookings { padding: 1rem 0; } html.Site main :is(header.ProductsHero, section.Products) .SoloBookingOffer p.FreeBookings strong { color: var(--colour-PricingPurple); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock ul.ProductFeatures li { padding: 0 0 0.35rem 0.6rem; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.25rem; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock ul.ProductFeatures li.Yes { color: var(--colour-PricingPurple); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock ul.ProductFeatures li.No { color: var(--colour-Tertiary3); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock ul.ProductFeatures li span { color: var(--colour-SiteInk); } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock form.BuyProduct { margin-top: auto; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock form.BuyProduct input.Button.Buy { width: 100%; border: 0; border-radius: 0.55rem; background-color: var(--colour-PricingPurple); background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FaddToCartLight.svg/repl/NONE"); color: var(--colour-SiteSurface) !important; font-weight: bold; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock form.BuyProduct input.Button.Buy:hover { background-color: var(--colour-PricingCTAEnd) !important; } html.Site main :is(header.ProductsHero, section.Products) p.VATNotice { margin: 1.6rem 0 0; text-align: center; color: var(--colour-SiteInk); font-size: 1rem; } @media (width < 760px) { html.Site main :is(header.ProductsHero, section.Products) { padding: 2rem 1rem 1.5rem; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction :is(h1, h2) { font-size: 2rem; } html.Site main :is(header.ProductsHero, section.Products) .ProductsIntroduction > p:last-child br { display: none; } html.Site main :is(header.ProductsHero, section.Products) ul.ProductsList { display: block; } html.Site main :is(header.ProductsHero, section.Products) ul.ProductsList li.ProductBlock { margin-bottom: 1.25rem; padding: 1.25rem; } html.Site main :is(header.ProductsHero, section.Products) li.ProductBlock p.ProductInfo { min-height: 0; } } /** Including file: site.features **/ html.Site.page_product-features main header { padding: 0; background: var(--colour-SiteBackground); } html.Site.page_product-features main header ul.Features { margin: 0; padding: 0; list-style: none; } html.Site.page_product-features main header ul.Features li.FeatureBlock { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 6rem; box-sizing: border-box; min-height: 25rem; margin: 0; padding: 4rem max(2rem, calc((100% - 76rem) / 2)); overflow: hidden; } html.Site.page_product-features main header ul.Features li.FeatureBlock:nth-child(even) { background: var(--colour-WebsiteBackground); } html.Site.page_product-features main header ul.Features li.FeatureBlock:nth-child(even) img.Marker { order: 2; } html.Site.page_product-features main header ul.Features li.FeatureBlock:nth-child(even) div.FeatureContents { order: 1; } html.Site.page_product-features main header ul.Features li.FeatureBlock img.Marker { float: none; width: min(22rem, 100%); height: auto; justify-self: center; } html.Site.page_product-features main header ul.Features li.FeatureBlock div.FeatureContents { max-width: 34rem; padding: 0; vertical-align: middle; } html.Site.page_product-features main header ul.Features li.FeatureBlock h2 { position: relative; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1.7rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site.page_product-features main header ul.Features li.FeatureBlock h2 img.FeatureIcon { display: block; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; } html.Site.page_product-features main header ul.Features li.FeatureBlock h2:after { position: absolute; bottom: 0; left: 4rem; width: 4rem; height: 0.15rem; background: linear-gradient(90deg, var(--colour-SiteAccent), transparent); content: ''; } html.Site.page_product-features main header ul.Features li.FeatureBlock p.FeatureContent { margin: 0 0 1.25rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.75rem; } html.Site.page_product-features main header ul.Features li.FeatureBlock p.FeatureInfoButton { margin: 0; line-height: 1.5rem; } html.Site.page_product-features main header ul.Features li.FeatureBlock .FeatureInfoButton a { color: var(--colour-PricingPurple); font-weight: 600; } html.Site.page_product-features main header ul.Features li.FeatureBlock .FeatureInfoButton a:after { margin-left: 0.5rem; content: '\2192'; } @media (width < 800px) { html.Site.page_product-features main header ul.Features li.FeatureBlock { display: block; min-height: 0; padding: 3rem 1.5rem; } html.Site.page_product-features main header ul.Features li.FeatureBlock img.Marker { display: block; width: 16rem; margin: 0 auto 2rem; } html.Site.page_product-features main header ul.Features li.FeatureBlock div.FeatureContents { width: 100%; max-width: 38rem; margin: 0 auto; padding: 0; } html.Site.page_product-features main header ul.Features li.FeatureBlock h2 { font-size: 1.5rem; } } @media (width < 576px) { html.Site.page_product-features main header ul.Features li.FeatureBlock img.Marker { display: none; } } /* Individual feature pages */ html.Site main header.FeatureDetailPage { position: relative; isolation: isolate; box-sizing: border-box; width: calc(100% - 4rem); max-width: 77.5rem; margin: 3rem auto; padding: 1rem 5.25rem 4.5rem; border-radius: 0.75rem; background: var(--colour-SiteSurface); box-shadow: 0 0.2rem 1rem rgba(27, 12, 70, 0.06); } html.Site main header.FeatureDetailPage:before { position: absolute; z-index: -1; top: -3rem; right: -100vw; bottom: -3rem; left: -100vw; background: var(--colour-SiteBackground); content: ''; } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 3.5rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.5rem; } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb a, html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb span { color: inherit; } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb a { color: var(--colour-PricingPurple); } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb span[aria-hidden='true'] { color: var(--colour-PricingPurple); font-size: 1.5rem; line-height: 1rem; } html.Site main header.FeatureDetailPage h1.MainHeading { margin: 0 0 2rem; padding: 0; color: var(--colour-SiteInk); font-size: 3.25rem; font-weight: bold; line-height: 1.2; } html.Site main header.FeatureDetailPage > p, html.Site main header.FeatureDetailPage > ul { max-width: 61rem; color: var(--colour-SiteInk); font-size: 1.25rem; line-height: 1.65; } html.Site main header.FeatureDetailPage > p { margin: 0 0 1.75rem; } html.Site main header.FeatureDetailPage > ul { margin-top: -0.75rem; margin-bottom: 1.75rem; } html.Site main header.FeatureDetailPage > p:last-child { margin-top: 3rem; margin-bottom: 0; } html.Site main header.FeatureDetailPage > p:last-child a { color: var(--colour-PricingPurple); } html.Site main header.FeatureDetailPage > p:last-child a:after { margin-left: 0.6rem; content: '\2192'; } @media (width < 800px) { html.Site main header.FeatureDetailPage { width: calc(100% - 3rem); margin: 2.5rem auto; padding: 0.5rem 3rem 3rem; } html.Site main header.FeatureDetailPage:before { top: -2.5rem; bottom: -2.5rem; } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb { margin-bottom: 2.5rem; } html.Site main header.FeatureDetailPage h1.MainHeading { font-size: 2.5rem; } } @media (width < 576px) { html.Site main header.FeatureDetailPage { width: calc(100% - 2rem); margin: 1.5rem auto; padding: 0.5rem 1.5rem 2.5rem; border-radius: 0.5rem; } html.Site main header.FeatureDetailPage:before { top: -1.5rem; bottom: -1.5rem; } html.Site main header.FeatureDetailPage nav.FeatureBreadcrumb { gap: 0.45rem; margin-bottom: 2rem; font-size: 0.85rem; line-height: 1.35rem; } html.Site main header.FeatureDetailPage h1.MainHeading { margin-bottom: 1.5rem; font-size: 2rem; } html.Site main header.FeatureDetailPage > p, html.Site main header.FeatureDetailPage > ul { font-size: 1rem; line-height: 1.75; } html.Site main header.FeatureDetailPage > p { margin-bottom: 1.25rem; } html.Site main header.FeatureDetailPage > p:last-child { margin-top: 2rem; } } /** Including file: site.dataSecurity **/ html.Site main header.DataSecurityPage { margin: 0; padding: 3.5rem 2rem 2rem; background: var(--colour-SiteSurface); } html.Site main header.DataSecurityPage .DataSecurityInner { max-width: 55rem; margin: 0 auto; } html.Site main header.DataSecurityPage .DataSecurityIntroduction { max-width: 36rem; margin-bottom: 2.5rem; } html.Site main header.DataSecurityPage h1.MainHeading { margin: 0 0 1.25rem; padding: 0; color: var(--colour-SiteInk); font-size: 2.5rem; font-weight: bold; line-height: 1.2; } html.Site main header.DataSecurityPage p { margin: 0 0 1.25rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.6; } html.Site main header.DataSecurityPage section.SecurityPrinciple { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) 20.5rem; gap: 2rem; align-items: start; margin: 0; padding: 1.5rem 0; border-bottom: 0.1rem solid var(--colour-PricingPurpleBorder); background: transparent; } html.Site main header.DataSecurityPage section.SecurityPrinciple:first-of-type { padding-top: 0; } html.Site main header.DataSecurityPage section.SecurityPrinciple:last-of-type { border-bottom: 0; } html.Site main header.DataSecurityPage img.PrincipleIcon { display: block; width: 5.25rem; height: 5.25rem; } html.Site main header.DataSecurityPage .PrincipleCopy h2 { margin: 0 0 1.25rem; padding: 0; color: var(--colour-SiteInk); font-size: 1.5rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site main header.DataSecurityPage .PrincipleCopy p:last-child { margin-bottom: 0; } html.Site main header.DataSecurityPage aside.TechnicalDetails { box-sizing: border-box; padding: 1.25rem 1.75rem 0.75rem; border-radius: 0.75rem; background: var(--colour-PricingPurplePale); } html.Site main header.DataSecurityPage aside.TechnicalDetails h3 { margin: 0 0 0.75rem; color: var(--colour-SiteInk); font-size: 1rem; font-weight: bold; } html.Site main header.DataSecurityPage aside.TechnicalDetails dl { margin: 0; } html.Site main header.DataSecurityPage aside.TechnicalDetails dl > div { position: relative; padding: 0 0 0.75rem 1.9rem; margin: 0 0 0.75rem; border-bottom: 0.1rem solid var(--colour-PricingPurpleBorder); } html.Site main header.DataSecurityPage aside.TechnicalDetails dl > div:last-child { margin-bottom: 0; border-bottom: 0; } html.Site main header.DataSecurityPage aside.TechnicalDetails dl > div:before { position: absolute; top: -0.15rem; left: 0; width: 1.25rem; height: 1.25rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fdatasecurity%252Ftechnical-check.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site main header.DataSecurityPage aside.TechnicalDetails dt, html.Site main header.DataSecurityPage aside.TechnicalDetails dd { color: var(--colour-SiteInk); font-size: 0.8rem; line-height: 1.45; } html.Site main header.DataSecurityPage aside.TechnicalDetails dt { font-weight: bold; } html.Site main header.DataSecurityPage aside.TechnicalDetails dd { margin: 0; } html.Site main header.DataSecurityPage aside.SecurityContact { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: 2rem; box-sizing: border-box; margin: 0.25rem 0 0; padding: 1.25rem 2.25rem; border-radius: 0.65rem; background: var(--colour-PricingPurplePale); } html.Site main header.DataSecurityPage aside.SecurityContact img { display: block; width: 5.25rem; height: 5.25rem; } html.Site main header.DataSecurityPage aside.SecurityContact h2 { margin: 0 0 0.15rem; padding: 0; color: var(--colour-SiteInk); font-size: 1rem; font-weight: bold; line-height: 1.4; text-align: left; } html.Site main header.DataSecurityPage aside.SecurityContact p { max-width: 38rem; margin: 0; } html.Site main header.DataSecurityPage aside.SecurityContact a { color: var(--colour-PricingPurple); text-decoration: underline; } @media (width < 850px) { html.Site main header.DataSecurityPage section.SecurityPrinciple { grid-template-columns: 5.25rem minmax(0, 1fr); } html.Site main header.DataSecurityPage aside.TechnicalDetails { grid-column: 2; width: 100%; } } @media (width < 576px) { html.Site main header.DataSecurityPage { padding: 2.5rem 1rem 1.5rem; } html.Site main header.DataSecurityPage h1.MainHeading { font-size: 2rem; } html.Site main header.DataSecurityPage .DataSecurityIntroduction { margin-bottom: 1.5rem; } html.Site main header.DataSecurityPage section.SecurityPrinciple { display: block; padding: 2rem 0; } html.Site main header.DataSecurityPage img.PrincipleIcon { width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; } html.Site main header.DataSecurityPage .PrincipleCopy h2 { font-size: 1.35rem; } html.Site main header.DataSecurityPage aside.TechnicalDetails { margin-top: 1.5rem; padding-right: 1.25rem; padding-left: 1.25rem; } html.Site main header.DataSecurityPage aside.SecurityContact { display: block; padding: 1.5rem; } html.Site main header.DataSecurityPage aside.SecurityContact img { width: 4rem; height: 4rem; margin-bottom: 1rem; } } /** 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.5rem; } html.Site .Checkout label.PasswordStrengthIndicator span.IndicatorText { color: white !important; } html.Site .Checkout label.PasswordStrengthIndicator.Perc0 span.Widget { background: var(--colour-Primary5); color: white; } html.Site .Checkout label.PasswordStrengthIndicator.Perc25 span.Widget { background: var(--colour-Primary5); } html.Site .Checkout label.PasswordStrengthIndicator.Perc50 span.Widget { background: var(--colour-Primary5); color: white; } html.Site .Checkout label.PasswordStrengthIndicator.Perc75 span.Widget { background: #110533; color: white; } html.Site .Checkout label.PasswordStrengthIndicator.Perc100 span.Widget { background: #110533; color: white; } html.Site .Checkout .ProductConfigSummary .ContentBlock { display: inline-block; 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: 23.4rem; } } @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: 23.4rem; } 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 { margin-left: 2rem; } html.Site .Checkout form.PaymentDetails label.Terms>span { width: 17rem; line-height: 1.5rem; } html.Site .Checkout .ProductConfigSummary p.StrongItem span.Legend { width: 15rem; } } /* Checkout: clinic summary and payment */ html.Site.page_checkout main > .Checkout > .Checkout.CheckoutPart2 > .CheckoutBlock.ProductSummary, html.Site.page_checkout main > .Checkout > .Checkout.CheckoutPart2 > .CheckoutBlock:not(.ProductSummary) { box-sizing: border-box; padding: 1.4rem 1.25rem; border: 0.1rem solid var(--colour-PricingRule); border-radius: 0.45rem; background: var(--colour-SiteSurface); box-shadow: 0 0.2rem 0.7rem rgba(27, 12, 70, 0.08); } html.Site.page_checkout main > .Checkout > .Checkout.CheckoutPart2 > .CheckoutBlock.ProductSummary { margin-bottom: 1.25rem; } html.Site.page_checkout main > .Checkout .ProductConfigSummary h1, html.Site.page_checkout main > .Checkout .PaymentDetails h1 { margin: 0 0 1.25rem; color: var(--colour-SiteInk); font-size: 1.35rem; font-weight: bold; line-height: 1.3; } html.Site.page_checkout main > .Checkout .ProductConfigSummary .Content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } html.Site.page_checkout main > .Checkout .ProductConfigSummary .ContentBlock { display: block; min-width: 0; } html.Site.page_checkout main > .Checkout .ProductConfigSummary .ContentBlock p.StrongItem { display: grid; grid-template-columns: minmax(10rem, 1.35fr) minmax(0, 1fr); gap: 1rem; margin: 0 0 0.5rem; color: var(--colour-SiteInk); font-size: 0.85rem; line-height: 1.4; } html.Site.page_checkout main > .Checkout .ProductConfigSummary p.StrongItem span.Legend { width: auto; } html.Site.page_checkout main > .Checkout .ProductConfigSummary .ContentBlock p.StrongItem > :last-child { color: var(--colour-SiteInk); font-weight: bold; overflow-wrap: anywhere; } html.Site.page_checkout main > .Checkout .PaymentDetails > .Content > p { margin: 0 0 1.25rem; color: var(--colour-SiteInk); font-size: 0.85rem; line-height: 1.5; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails { width: 100%; max-width: none; margin: 1.8rem 0 0; padding: 0; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails .Container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.15rem; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.WITWidget { display: block; min-width: 0; margin: 0; color: var(--colour-SiteInk); font-size: 0.85rem; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.WITWidget > span.Legend { display: block; margin: 0 0 0.4rem; padding: 0; color: var(--colour-SiteInk); } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails input[type='text'], html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails span.StripeElement { display: block; box-sizing: border-box; width: 100%; height: 2.5rem; margin: 0; padding: 0.6rem 0.65rem; border: 0.1rem solid var(--colour-Primary2); border-radius: 0.3rem; background: var(--colour-SiteSurface); color: var(--colour-SiteInk); font-size: 1rem; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails div.ErrorMessages, html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails p.Terms, html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Terms, html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit { grid-column: 1 / -1; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails div.ErrorMessages { color: var(--colour-Error2); font-size: 1rem; text-align: center; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails p.Terms { width: auto; margin: 0.25rem 0 0; text-align: left; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails p.Terms a { color: var(--colour-PricingPurple); text-decoration: underline; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Terms { display: flex; align-items: center; width: auto; margin: -0.15rem 0 0; color: var(--colour-SiteInk); font-size: 0.85rem; text-align: left; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Terms input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0 0.6rem 0 0; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Terms span { width: auto; line-height: 1.4; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit { margin: 0.15rem 0 0; text-align: left; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit input.Submit.Button { box-sizing: border-box; width: 15.5rem; height: 2.7rem; margin: 0 !important; padding: 0.6rem 1rem 0.6rem 3.5rem !important; border: 0; border-radius: 0.35rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FaddToCartLight.svg/repl/NONE") 0.75rem 50% / 1.5rem no-repeat, var(--colour-PricingPurple); color: var(--colour-SiteSurface) !important; font-size: 0.95rem; font-weight: normal; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit input.Submit.Button:hover { background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FaddToCartLight.svg/repl/NONE") 0.75rem 50% / 1.5rem no-repeat, var(--colour-PricingPurple) !important; color: var(--colour-SiteSurface) !important; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit input.Submit.Button.Disabled { width: 21rem; max-width: 100%; } @media (width < 800px) { html.Site.page_checkout main > .Checkout .ProductConfigSummary .Content { grid-template-columns: 1fr; gap: 0; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails .Container { grid-template-columns: 1fr; } } @media (width < 576px) { html.Site.page_checkout main > .Checkout > .Checkout.CheckoutPart2 > .CheckoutBlock.ProductSummary, html.Site.page_checkout main > .Checkout > .Checkout.CheckoutPart2 > .CheckoutBlock:not(.ProductSummary) { padding: 1.25rem 1rem; } html.Site.page_checkout main > .Checkout .ProductConfigSummary .ContentBlock p.StrongItem { grid-template-columns: 1fr; gap: 0.15rem; margin-bottom: 0.8rem; } html.Site.page_checkout main > .Checkout form.Checkout.PaymentDetails label.Submit input.Submit.Button { width: 100%; } } /* Checkout: product configuration */ html.Site.page_checkout main > .Checkout { box-sizing: border-box; width: 100%; max-width: 64rem; margin: 0 auto; padding: 2rem 2.4rem 1.5rem; color: var(--colour-SiteInk); } html.Site.page_checkout main > .Checkout > .Checkout { width: auto; max-width: none; margin: 0; padding: 0; } html.Site.page_checkout main > .Checkout p.Error { box-sizing: border-box; margin: 2rem 0; padding: 1.25rem; border-left: 0.25rem solid var(--colour-Error1); border-radius: 0.4rem; background: var(--colour-PricingPurplePale); } html.Site.page_checkout main > .Checkout .CheckoutBlock, html.Site.page_checkout main > .Checkout .CheckoutBlock:nth-child(even) { box-sizing: border-box; margin: 0 0 1.25rem; padding: 0; background: transparent; } html.Site.page_checkout main > .Checkout .CheckoutBlock h1 { margin: 0 0 0.75rem; padding: 0; color: var(--colour-SiteInk); font-size: 1.4rem; font-weight: bold; line-height: 1.3; } html.Site.page_checkout main > .Checkout .CheckoutBlock p { color: var(--colour-SiteInk); font-size: 0.85rem; line-height: 1.55; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket { margin-bottom: 1.3rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket .Content { overflow: hidden; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 0.45rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket p.StrongItem { display: flex; justify-content: space-between; gap: 2rem; margin: 0; padding: 0.35rem 1.25rem; line-height: 1.4; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket p.StrongItem strong.Legend { width: auto; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket p.StrongItem.Total { margin-top: 0.6rem !important; padding-top: 0.9rem; padding-bottom: 0.9rem; border-top: 0.1rem solid var(--colour-PricingPurpleBorder); font-weight: bold; } html.Site.page_checkout main > .Checkout .CheckoutBlock.ImportantInfo { margin-bottom: 1.6rem; padding: 1rem 1.25rem 0.8rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-left: 0.25rem solid var(--colour-PricingPurple); border-radius: 0.45rem; background: var(--colour-PricingPurplePale); } html.Site.page_checkout main > .Checkout .CheckoutBlock.ImportantInfo h1 { font-size: 1.2rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.ImportantInfo p { margin: 0 0 0.9rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Products { margin-bottom: 0; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Products > .Content > p { margin: 0 0 0.9rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct { width: 100%; margin: 0; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct .FieldsetContainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset { display: block; box-sizing: border-box; min-width: 0; min-height: 31.5rem; margin: 0; padding: 1.1rem 1.2rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 0.45rem; background: var(--colour-SiteSurface); } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset:first-of-type { margin-bottom: 0; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct legend { display: block; width: 100%; margin: 0 0 1rem; padding: 0; color: var(--colour-SiteInk); font-size: 1rem; font-weight: bold; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.WITWidget { display: block; width: 100%; margin: 0 0 0.8rem; color: var(--colour-SiteInk); font-size: 0.85rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.WITWidget > span.Legend:first-of-type { display: block; margin-bottom: 0.3rem; padding: 0; color: var(--colour-SiteInk); } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.ShowPassword { display: flex; align-items: center; gap: 0.45rem; margin-top: -0.25rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.ShowPassword > span.Legend { display: inline-block; margin: 0; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input[type='text'], html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input[type='password'], html.Site.page_checkout main > .Checkout form.EditCheckoutProduct select.WITSelect, html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator span.Widget { display: block; box-sizing: border-box; width: 100%; height: 2.1rem; padding: 0.4rem 0.65rem; border: 0.1rem solid var(--colour-Primary2); border-radius: 0.25rem; background: var(--colour-SiteSurface); color: var(--colour-SiteInk); font: inherit; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct select.WITSelect { appearance: auto; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input[type='checkbox'] { box-sizing: border-box; width: 0.85rem; height: 0.85rem; margin: 0; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator span.IndicatorText { box-sizing: border-box; height: 100%; padding: 0.4rem 0.65rem; background: var(--colour-SiteBackground); color: var(--colour-Primary2) !important; text-align: left; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct b.ValErr { box-sizing: border-box; width: 100%; margin: 0.35rem auto 0; color: var(--colour-Error2) !important; font-size: 1rem !important; font-weight: normal; line-height: 1.4; text-align: center; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator.Perc0 span.IndicatorText { color: var(--colour-Error2) !important; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator.Perc25 span.IndicatorText { color: var(--colour-Secondary4) !important; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator.Perc50 span.IndicatorText { color: var(--colour-Secondary5) !important; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator.Perc75 span.IndicatorText { color: var(--colour-PaidInFullH1) !important; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct label.PasswordStrengthIndicator.Perc100 span.IndicatorText { color: var(--colour-PaidInFullH2) !important; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input.Save.Button { display: block; box-sizing: border-box; width: 22rem; height: 2.7rem; margin: 0.75rem auto 0; padding: 0.6rem 3.5rem; border: 0; border-radius: 0.35rem; background-color: var(--colour-PricingPurple); background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fsave.svg/repl/SiteSurface"), url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcheckout%252Farrow-right.svg/repl/NONE"); background-position: 0.75rem 50%, calc(100% - 0.75rem) 50%; background-repeat: no-repeat; background-size: 1.5rem, 1.4rem; color: var(--colour-SiteSurface) !important; font-size: 0.9rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input.Save.Button:hover { background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Fsave.svg/repl/SiteSurface") 0.75rem 50% / 1.5rem no-repeat, url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcheckout%252Farrow-right.svg/repl/NONE") calc(100% - 0.75rem) 50% / 1.4rem no-repeat, var(--colour-PricingPurple) !important; color: var(--colour-SiteSurface) !important; } @media (width < 800px) { html.Site.page_checkout main > .Checkout { padding-right: 1.5rem; padding-left: 1.5rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct .FieldsetContainer { grid-template-columns: 1fr; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset { min-height: 0; } } @media (width < 576px) { html.Site.page_checkout main > .Checkout { padding: 1.5rem 1rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket p.StrongItem { gap: 1rem; padding-right: 0.85rem; padding-left: 0.85rem; } html.Site.page_checkout main > .Checkout .CheckoutBlock.Basket p.StrongItem.Total { align-items: flex-end; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset { padding-right: 1rem; padding-left: 1rem; } html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset select, html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset .PasswordStrengthIndicator, html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset .PasswordStrengthIndicator .Widget, html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset input[type='text'], html.Site.page_checkout main > .Checkout form.EditCheckoutProduct fieldset input[type='password'], html.Site.page_checkout main > .Checkout form.EditCheckoutProduct input.Save.Button { width: 100%; } } /** 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 2rem; 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: center; 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; } html.Site ul { list-style-position: outside; } html.Site li { padding: 0.2rem 0 0.2rem 0.5rem; } html.Site ul.TrustBenefit { list-style-type: "โœ”"; } /* Contact us snippet */ html.Site main section.ContactUs { overflow: hidden; box-sizing: border-box; min-height: 49rem; padding: 8rem 2rem; background: var(--colour-SiteBackground); } html.Site section.ContactUs .ContactUsInner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(29rem, 1fr); align-items: center; gap: 7rem; max-width: 82rem; margin: 0 auto; } html.Site section.ContactUs .ContactUsHeading { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 3rem; } html.Site section.ContactUs .ContactUsHeading > img { width: 8rem; height: 8rem; } html.Site main section.ContactUs .ContactUsHeading h2 { position: relative; margin: 0; padding: 0 0 2.25rem; color: var(--colour-SiteInk); font-size: 3.25rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site section.ContactUs .ContactUsHeading h2:after { position: absolute; bottom: 0; left: 0; width: 19rem; max-width: 90%; height: 0.4rem; border-radius: 50%; background: linear-gradient(90deg, var(--colour-SiteAccentBackground), transparent); content: ''; } html.Site section.ContactUs .SectionContent { max-width: 30rem; margin: 2.75rem 0 0 11rem; } html.Site section.ContactUs .SectionContent p { margin: 0 0 2rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 2.15rem; } html.Site section.ContactUs .SectionContent a { color: var(--colour-PricingPurple); font-weight: 600; } html.Site section.ContactUs .SectionContent p.ButtonLink { margin-bottom: 0; } html.Site section.ContactUs .SectionContent p.ButtonLink a:after { margin-left: 0.6rem; content: '\2192'; } html.Site section.ContactUs .ContactUsIllustration { position: relative; width: 35rem; max-width: 100%; justify-self: center; } html.Site section.ContactUs .ContactUsIllustration img.ContactMain { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.6rem 0.5rem rgba(82, 39, 230, 0.08)); } html.Site section.ContactUs .ContactUsIllustration img.ContactHeadset { position: absolute; right: -1rem; bottom: -1rem; width: 8rem; height: 8rem; filter: drop-shadow(0 0.5rem 0.4rem rgba(82, 39, 230, 0.1)); } @media (width < 1050px) { html.Site section.ContactUs .ContactUsInner { grid-template-columns: 1fr; gap: 4rem; } html.Site section.ContactUs .ContactUsCopy { width: 100%; max-width: 48rem; margin: 0 auto; } } @media (width < 576px) { html.Site main section.ContactUs { min-height: 0; padding: 3rem 1.25rem; } html.Site section.ContactUs .ContactUsHeading { display: block; text-align: center; } html.Site section.ContactUs .ContactUsHeading > img { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; } html.Site main section.ContactUs .ContactUsHeading h2 { font-size: 2.2rem; text-align: center; } html.Site section.ContactUs .ContactUsHeading h2:after { left: 50%; transform: translateX(-50%); } html.Site section.ContactUs .SectionContent { margin: 2.25rem 0 0; } html.Site section.ContactUs .ContactUsIllustration { display: none; } } /* Try before you buy snippet */ html.Site main section.DemoSystem { overflow: hidden; box-sizing: border-box; min-height: 49rem; padding: 8rem 2rem; background: var(--colour-SiteBackground); } html.Site section.DemoSystem .DemoSystemInner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 1fr); align-items: center; gap: 6rem; max-width: 82rem; margin: 0 auto; } html.Site section.DemoSystem .DemoSystemHeading { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 3rem; } html.Site section.DemoSystem .DemoSystemHeading > img { width: 8rem; height: 8rem; } html.Site main section.DemoSystem .DemoSystemHeading h2 { position: relative; margin: 0; padding: 0 0 2.25rem; color: var(--colour-SiteInk); font-size: 3.25rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site section.DemoSystem .DemoSystemHeading h2:after { position: absolute; bottom: 0; left: 0; width: 18rem; max-width: 90%; height: 0.4rem; border-radius: 50%; background: linear-gradient(90deg, var(--colour-SiteAccentBackground), transparent); content: ''; } html.Site section.DemoSystem .DemoSystemIntroduction { max-width: 29rem; margin: 2.75rem 0 2.5rem 11rem; } html.Site section.DemoSystem .DemoSystemIntroduction p { margin: 0 0 2rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 2.15rem; } html.Site section.DemoSystem .DemoSystemIntroduction a { color: var(--colour-PricingPurple); } html.Site section.DemoSystem p.ButtonLink.DemoButton { width: 29rem; max-width: calc(100% - 11rem); margin: 0 0 0 11rem; } html.Site section.DemoSystem p.ButtonLink.DemoButton a, html.Site section.DemoSystem:nth-child(even) p.ButtonLink.DemoButton a { box-sizing: border-box; padding: 1.2rem 1.5rem; border: 2px solid var(--colour-SiteInk); border-radius: 0.6rem; background: var(--colour-WebsiteBackgroundTwo); color: var(--colour-SiteInk); font-size: 1.15rem; } html.Site section.DemoSystem .DemoSystemIllustration { position: relative; width: 34rem; max-width: 100%; justify-self: center; } html.Site section.DemoSystem .DemoSystemIllustration:after { position: absolute; top: 6rem; right: -2rem; z-index: 0; width: 8rem; height: 6rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsnippet-trybeforeyoubuy%252Fdots-pattern.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site section.DemoSystem .DemoSystemIllustration > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 0.6rem 0.5rem rgba(82, 39, 230, 0.1)); } @media (width < 1050px) { html.Site section.DemoSystem .DemoSystemInner { grid-template-columns: 1fr; gap: 4rem; } html.Site section.DemoSystem .DemoSystemCopy { max-width: 48rem; margin: 0 auto; } } @media (width < 576px) { html.Site main section.DemoSystem { min-height: 0; padding: 3rem 1.25rem; } html.Site section.DemoSystem .DemoSystemInner { display: block; width: 100%; } html.Site section.DemoSystem .DemoSystemCopy { width: 100%; max-width: none; margin: 0; } html.Site section.DemoSystem .DemoSystemHeading { display: block; text-align: center; } html.Site section.DemoSystem .DemoSystemHeading > img { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; } html.Site main section.DemoSystem .DemoSystemHeading h2 { font-size: 2.2rem; text-align: center; } html.Site section.DemoSystem .DemoSystemHeading h2:after { left: 50%; transform: translateX(-50%); } html.Site section.DemoSystem .DemoSystemIntroduction { width: 100%; max-width: none; margin: 2.25rem 0; } html.Site section.DemoSystem p.ButtonLink.DemoButton { width: 100%; max-width: none; margin: 0; } html.Site section.DemoSystem .DemoSystemIllustration { display: none; } } /* Data security snippet */ html.Site main section.DataSafety { overflow: hidden; box-sizing: border-box; min-height: 49rem; padding: 8rem 2rem; background: var(--colour-SiteBackground); } html.Site section.DataSafety .DataSafetyInner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(25rem, 1fr); align-items: center; gap: 5rem; max-width: 86rem; margin: 0 auto; } html.Site section.DataSafety .DataSafetyHeading { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 3rem; } html.Site section.DataSafety .DataSafetyHeading > img { width: 8rem; height: 8rem; } html.Site main section.DataSafety .DataSafetyHeading h2 { position: relative; margin: 0; padding: 0 0 2.25rem; color: var(--colour-SiteInk); font-size: 3.25rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site section.DataSafety .DataSafetyHeading h2:after { position: absolute; bottom: 0; left: 0; width: 27rem; max-width: 90%; height: 0.4rem; border-radius: 50%; background: linear-gradient(90deg, var(--colour-SiteAccentBackground), transparent); content: ''; } html.Site section.DataSafety .DataSafetyCopy > p:not(.ButtonLink) { max-width: 36rem; margin: 2.75rem 0 2.5rem 11rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 2.15rem; } html.Site section.DataSafety p.ButtonLink { margin: 0 0 0 11rem; } html.Site section.DataSafety p.ButtonLink a { color: var(--colour-PricingPurple); font-size: 1.1rem; font-weight: 600; } html.Site section.DataSafety p.ButtonLink a:after { margin-left: 0.6rem; content: '\2192'; } html.Site section.DataSafety .DataSafetyIllustration { position: relative; width: 30rem; height: 30rem; justify-self: center; border: 2.5rem solid rgba(240, 234, 254, 0.65); border-radius: 50%; box-sizing: border-box; } html.Site section.DataSafety .DataSafetyIllustration:after { position: absolute; top: 3rem; right: -2.75rem; width: 8rem; height: 8rem; background-image: radial-gradient(var(--colour-PricingPurpleBorder) 0.15rem, transparent 0.18rem); background-size: 1.25rem 1.25rem; content: ''; opacity: 0.8; } html.Site section.DataSafety .DataSafetyIllustration img { position: absolute; z-index: 1; filter: drop-shadow(0 0.5rem 0.5rem rgba(82, 39, 230, 0.12)); } html.Site section.DataSafety .DataSafetyIllustration img.SafetyShield { top: 2rem; left: 3.25rem; width: 17rem; height: 17rem; } html.Site section.DataSafety .DataSafetyIllustration img.SafetyServer { bottom: -1.5rem; left: -4rem; width: 12rem; height: 12rem; } html.Site section.DataSafety .DataSafetyIllustration img.SafetyCloud { right: -4.5rem; bottom: -1rem; width: 14rem; height: 14rem; } html.Site section.DataSafety .DataSafetyIllustration img.SafetyLock { bottom: -2.5rem; left: 5rem; width: 5rem; height: 5rem; } @media (width < 1050px) { html.Site section.DataSafety .DataSafetyInner { grid-template-columns: 1fr; gap: 4rem; } html.Site section.DataSafety .DataSafetyCopy { max-width: 48rem; margin: 0 auto; } html.Site section.DataSafety .DataSafetyIllustration { margin-bottom: 2rem; } } @media (width < 576px) { html.Site main section.DataSafety { min-height: 0; padding: 3rem 1.25rem; } html.Site section.DataSafety .DataSafetyHeading { display: block; text-align: center; } html.Site section.DataSafety .DataSafetyHeading > img { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; } html.Site main section.DataSafety .DataSafetyHeading h2 { font-size: 2.2rem; text-align: center; } html.Site section.DataSafety .DataSafetyHeading h2:after { left: 50%; transform: translateX(-50%); } html.Site section.DataSafety .DataSafetyCopy > p:not(.ButtonLink), html.Site section.DataSafety p.ButtonLink { margin-right: 0; margin-left: 0; } html.Site section.DataSafety .DataSafetyIllustration { display: none; } } /* Fair, flat-rate pricing snippet */ html.Site main section.FairPricing { position: relative; overflow: hidden; box-sizing: border-box; padding: 4rem 2rem 5rem; background: var(--colour-SiteBackground); } html.Site section.FairPricing:after { position: absolute; right: 2%; top: 18%; width: 34rem; height: 34rem; border: 2rem solid var(--colour-SiteAccentBackground); border-radius: 50%; content: ''; opacity: 0.45; } html.Site section.FairPricing .FairPricingInner { position: relative; z-index: 1; max-width: 82rem; margin: 0 auto; } html.Site section.FairPricing header.FairPricingHeading { display: flex; align-items: center; max-width: 46rem; margin-top: 0; margin-bottom: 2.5rem; padding: 0; background: transparent; } html.Site section.FairPricing header.FairPricingHeading img { flex: 0 0 auto; width: 8rem; height: 8rem; margin-right: 2.5rem; } html.Site main section.FairPricing header.FairPricingHeading h2 { position: relative; padding: 0 0 1.6rem; color: var(--colour-SiteInk); font-size: 3rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site section.FairPricing header.FairPricingHeading h2:after { position: absolute; bottom: 0; left: 0; width: 19rem; height: 0.35rem; border-radius: 50%; background: linear-gradient(90deg, var(--colour-SiteAccentBackground), transparent); content: ''; } html.Site section.FairPricing .FairPricingLayout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr); align-items: center; gap: 5rem; } html.Site section.FairPricing .SectionContent { max-width: 44rem; } html.Site section.FairPricing .SectionContent p { margin: 0 0 1.25rem; color: var(--colour-SiteInk); line-height: 1.75rem; } html.Site section.FairPricing .SectionContent p.PricingBenefit { position: relative; margin: 0 0 0.5rem; padding-left: 2.75rem; line-height: 2rem; } html.Site section.FairPricing .SectionContent p.PricingBenefit:before { position: absolute; top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsnippet-fairpricing%252Fcheck-circle.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site section.FairPricing .SectionContent p.Strong { margin: 1rem 0 1.5rem; color: var(--colour-PricingPurple); font-size: 1.1rem; } html.Site section.FairPricing .SectionContent p.ButtonLink { margin-bottom: 0; } html.Site section.FairPricing .SectionContent p.ButtonLink a { color: var(--colour-PricingPurple); font-weight: 600; } html.Site section.FairPricing .SectionContent p.ButtonLink a:after { margin-left: 0.5rem; content: '\2192'; } html.Site section.FairPricing aside.FairPricingSummary { padding: 1rem 2rem 0; border-radius: 0.8rem; background: var(--colour-SiteSurface); box-shadow: 0 0.35rem 1.2rem rgba(27, 12, 70, 0.12); } html.Site section.FairPricing .FairPricingSummary h3 { margin: 0; padding: 0.8rem 0 1.2rem; color: var(--colour-PricingPurple); font-size: 1rem; text-align: center; } html.Site section.FairPricing .FairPricingSummary ul { margin: 0; padding: 0; list-style: none; } html.Site section.FairPricing .FairPricingSummary li { display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: center; gap: 1rem; min-height: 5.25rem; padding: 0.5rem 0; border-top: 1px solid var(--colour-PricingRule); color: var(--colour-SiteInk); } html.Site section.FairPricing .FairPricingSummary li > img:first-child { width: 3rem; height: 3rem; } html.Site section.FairPricing .FairPricingSummary li img.SuccessCheck { width: 1.5rem; height: 1.5rem; } @media (width < 900px) { html.Site section.FairPricing .FairPricingLayout { grid-template-columns: 1fr; gap: 2.5rem; } html.Site section.FairPricing .SectionContent, html.Site section.FairPricing aside.FairPricingSummary { width: 100%; max-width: 44rem; box-sizing: border-box; margin-right: auto; margin-left: auto; } } @media (width < 576px) { html.Site main section.FairPricing { padding: 3rem 1.25rem; } html.Site section.FairPricing header.FairPricingHeading { display: block; margin-bottom: 2rem; text-align: center; } html.Site section.FairPricing header.FairPricingHeading img { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; } html.Site main section.FairPricing header.FairPricingHeading h2 { font-size: 2.2rem; text-align: center; } html.Site section.FairPricing header.FairPricingHeading h2:after { left: 50%; max-width: 80%; transform: translateX(-50%); } html.Site section.FairPricing aside.FairPricingSummary { padding-right: 1.25rem; padding-left: 1.25rem; } html.Site section.FairPricing .FairPricingSummary li { grid-template-columns: 2.75rem 1fr 1.25rem; gap: 0.75rem; } } html.Site p.ButtonLink.DemoButton { margin: 4rem auto; text-align: center; width: 20rem; } html.Site p.ButtonLink.DemoButton a { border: 1px solid #110533; background: var(--colour-WebsiteBackground); padding: 1rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold; text-wrap: pretty; display: block; } html.Site section:nth-child(even) p.ButtonLink.DemoButton a { background: var(--colour-WebsiteBackgroundTwo); } html.Site ul.SpotlightList { list-style: none; margin: 0; padding: 0; } html.Site ul.SpotlightList li { padding: 0.2rem 0 0.2rem 0.1rem; } /* Public site header */ html.NotLoggedIn div.Header { padding: 1.2rem 3rem; background: var(--colour-SiteInk); } html.NotLoggedIn div.HeaderWrap { display: flex; align-items: center; max-width: 100rem; margin: 0 auto; } html.NotLoggedIn div.Header div.Logo { flex: 0 0 auto; top: 0; margin: 0 4rem 0 0; background: var(--colour-SiteInk); } html.NotLoggedIn div.Header div.Logo img { display: block; width: 12rem; height: auto; } html.NotLoggedIn div.Header ul.TopMenu { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; margin: 0; line-height: normal; } html.NotLoggedIn div.Header ul.TopMenu>li { margin: 0 0.8rem; } html.NotLoggedIn div.Header ul.TopMenu>li>a, html.NotLoggedIn div.Header ul.TopMenu>li>a span { color: var(--colour-SiteSurface); text-decoration: none; } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu { top: 100%; left: 0; box-sizing: border-box; width: max-content; margin-left: 0; padding: 0.5rem 0; background: var(--colour-SiteInk); } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu>li { display: block; box-sizing: border-box; margin: 0; padding: 0.5rem 1rem; text-align: left; white-space: nowrap; } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu>li>a { display: block; } html.NotLoggedIn div.Header ul.TopMenu>li.Login { margin-left: auto; } html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA { margin-left: 1.5rem; } html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA>a { padding: 1rem 1.8rem; border-radius: 1.5rem; background: var(--colour-Secondary2); white-space: nowrap; } html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA>a span { color: var(--colour-SiteInk); font-weight: 700; } /* /Public site header */ /* Home page hero */ html.Site.page_home main header.Hero { padding: 0; overflow: hidden; background: radial-gradient(circle at 92% 48%, var(--colour-SiteAccentBackground) 0, var(--colour-SiteAccentBackground) 25%, transparent 50%), var(--colour-SiteBackground); } html.Site.page_home main header.Hero * { color: var(--colour-SiteInk); } html.Site.page_home .HeroMain { display: flex; align-items: center; gap: 4rem; max-width: 100rem; min-height: 48rem; margin: 0 auto; padding: 4rem 4.5rem; } html.Site.page_home .HeroContent { flex: 0 1 45rem; min-width: 0; } html.Site.page_home main header.Hero p.HeroEyebrow { display: inline-block; margin: 0 0 1.5rem; padding: 0.6rem 1.2rem; border-radius: 2rem; background: var(--colour-SiteAccentBackground); color: var(--colour-SiteAccent); font-size: 0.85rem; font-weight: 700; line-height: 1.2rem; text-transform: uppercase; } html.Site.page_home main header.Hero p.MainHeading { max-width: 43rem; margin: 0 0 1.8rem; padding: 0; font-size: clamp(2.6rem, 4vw, 4.2rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.04em; } html.Site.page_home main header.Hero p.MainHeading span { color: var(--colour-SiteAccent); } html.Site.page_home main header.Hero h1.HeroIntroduction { max-width: 43rem; margin: 0 0 1.8rem; font-size: 1.15rem; font-weight: normal; line-height: 1.7rem; } html.Site.page_home ul.HeroBenefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.5rem; margin: 0 0 2rem; padding: 0; list-style: none; } html.Site.page_home ul.HeroBenefits li { position: relative; min-height: 2.8rem; padding: 0.75rem 0 0.5rem 3.2rem; } html.Site.page_home ul.HeroBenefits li:before, html.Site.page_home ul.HeroTrust li:before { content: ""; position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--colour-SiteAccentBackground); color: var(--colour-SiteInk); } html.Site.page_home ul.HeroBenefits li:before { left: 0; top: 0.3rem; width: 2.5rem; height: 2.5rem; } html.Site.page_home ul.HeroBenefits li:after, html.Site.page_home ul.HeroTrust li:after, html.Site.page_home .HeroReassurance span.ShieldIcon, html.Site.page_home .HeroActions span.ArrowIcon { content: ""; display: block; background-color: var(--colour-SiteInk); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site.page_home ul.HeroBenefits li:after, html.Site.page_home ul.HeroTrust li:after { position: absolute; width: 1.35rem; height: 1.35rem; } html.Site.page_home ul.HeroBenefits li:after { left: 0.575rem; top: 0.875rem; } html.Site.page_home ul.HeroBenefits li.Scheduling:after, html.Site.page_home ul.HeroBenefits li.Demo:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcalendar.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcalendar.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.Contracts:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fdocument.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fdocument.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.Reminders:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fbell.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fbell.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.Support:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fheadset.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fheadset.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.OnlineBooking:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fglobe.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fglobe.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.Security:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); } html.Site.page_home ul.HeroBenefits li.Practitioners:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fusers.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fusers.svg/repl/NONE); } html.Site.page_home .HeroActions { display: flex; align-items: center; gap: 1.5rem; } html.Site.page_home .HeroActions p { margin: 0; } html.Site.page_home .HeroActions p.ButtonLink.DemoButton { width: auto; text-align: left; } html.Site.page_home .HeroActions p.ButtonLink.DemoButton a { min-width: 22rem; padding: 1.2rem 1.6rem; border: 0; background: var(--colour-Secondary2); box-shadow: 0 0.5rem 1.5rem rgba(51, 34, 103, 0.12); } html.Site.page_home .HeroActions p.ButtonLink.DemoButton a span.ArrowIcon { float: right; width: 1.5rem; height: 1.5rem; background-color: var(--colour-SiteInk); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); } html.Site.page_home main header.Hero p.HeroReassurance { margin: 1.3rem 0 0; font-size: 0.9rem; line-height: 1.4rem; } html.Site.page_home p.HeroReassurance b { margin: 0 0.6rem; } html.Site.page_home .HeroReassurance span.ShieldIcon { display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: 0.3rem; vertical-align: -0.2rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); } html.Site.page_home .HeroImage { position: relative; flex: 1 1 50rem; min-width: 0; } html.Site.page_home .HeroImage>a, html.Site.page_home .HeroImage>a>img { display: block; width: 100%; } html.Site.page_home .HeroImage>a>img { box-shadow: 0 1.5rem 4rem rgba(51, 34, 103, 0.25); } html.Site.page_home ul.HeroTrust { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 100rem; margin: 0 auto; padding: 2rem 4.5rem; background: var(--colour-SiteSurface); box-shadow: 0 0 0 100vmax var(--colour-SiteSurface); list-style: none; } html.Site.page_home ul.HeroTrust li { position: relative; min-height: 4rem; padding: 0.3rem 2rem 0.3rem 5rem; border-right: 0.1rem solid var(--colour-Primary1); } html.Site.page_home ul.HeroTrust li:last-child { border: 0; } html.Site.page_home ul.HeroTrust li:before { left: 1rem; top: 0; width: 3.5rem; height: 3.5rem; } html.Site.page_home ul.HeroTrust li:after { left: 2rem; top: 1rem; width: 1.5rem; height: 1.5rem; } html.Site.page_home ul.HeroTrust li.Secure:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fshield-check.svg/repl/NONE); } html.Site.page_home ul.HeroTrust li.Support:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fheadset.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fheadset.svg/repl/NONE); } html.Site.page_home ul.HeroTrust li.Improving:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcloud-upload.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fcloud-upload.svg/repl/NONE); } html.Site.page_home ul.HeroTrust li.Trusted:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fusers.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fusers.svg/repl/NONE); } html.Site.page_home ul.HeroTrust strong, html.Site.page_home ul.HeroTrust span { display: block; } html.Site.page_home ul.HeroTrust span { margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.35rem; } /* /Home page hero */ /* Not complicated */ html.Site main section.NotComplicated { padding: 3rem 2rem 5rem; background: var(--colour-SiteAccentBackground); } html.Site main section.NotComplicated p.SectionEyebrow { margin: 0 0 1rem; color: var(--colour-SiteAccent); font-size: 1rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.4rem; text-align: center; text-transform: uppercase; } html.Site main section.NotComplicated h2 { margin: 0; padding: 0; color: var(--colour-SiteInk); font-size: clamp(2.8rem, 4.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; } html.Site main section.NotComplicated h2 span { color: var(--colour-SiteAccent); } html.Site main section.NotComplicated p.SectionIntroduction { max-width: 62rem; margin: 1.5rem auto 3rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.8rem; text-align: center; } html.Site section.NotComplicated .NotComplicatedGrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 1fr); gap: 1.75rem; max-width: 104rem; margin: 0 auto; } html.Site section.NotComplicated ul.Benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; } html.Site section.NotComplicated ul.Benefits li { position: relative; min-height: 18rem; padding: 8rem 1.5rem 1.5rem; border-radius: 0.9rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.06); } html.Site section.NotComplicated ul.Benefits li:before { content: ""; position: absolute; left: 1.5rem; top: 2rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--colour-SiteAccentBackground); } html.Site section.NotComplicated ul.Benefits li:after { content: ""; position: absolute; left: 2.6rem; top: 3.1rem; width: 2.3rem; height: 2.3rem; background-color: var(--colour-SiteAccent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.NotComplicated ul.Benefits li.DoubleBookings:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fcalendar.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fcalendar.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits li.NoShows:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fbell.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fbell.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits li.SaveTime:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fclock.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fclock.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits li.Team:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fteam.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fteam.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits li.Growth:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fgrowth.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fgrowth.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits li.Security:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fshield-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-notcomplicated%252Fshield-check.svg/repl/NONE); } html.Site section.NotComplicated ul.Benefits h3 { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1.05rem; line-height: 1.4rem; } html.Site section.NotComplicated ul.Benefits p { margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.7rem; } html.Site section.NotComplicated div.Image, html.Site section.NotComplicated div.Image a, html.Site section.NotComplicated div.Image img { display: block; width: 100%; height: 100%; } html.Site section.NotComplicated div.Image img { border-radius: 0.9rem; object-fit: cover; } /* /Not complicated */ /* Designed for growing clinics */ html.Site main section.DesignedFor { padding: 2rem 3rem 4rem; background: var(--colour-SiteBackground); } html.Site main section.DesignedFor p.SectionEyebrow { margin: 0 0 0.5rem; color: var(--colour-SiteAccent); font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.4rem; text-align: center; text-transform: uppercase; } html.Site main section.DesignedFor h2 { margin: 0; padding: 0; color: var(--colour-SiteInk); font-size: clamp(2.8rem, 4.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; } html.Site main section.DesignedFor h2 span { color: var(--colour-SiteAccent); } html.Site main section.DesignedFor p.SectionIntroduction { max-width: 62rem; margin: 0.75rem auto 0; padding-bottom: 10px; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.8rem; text-align: center; } html.Site section.DesignedFor ul.ClinicFeatures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; max-width: 100rem; margin: 0 auto 1.75rem; padding: 0; list-style: none; } html.Site section.DesignedFor ul.ClinicFeatures li { position: relative; min-height: 21rem; padding: 8rem 1.5rem 1.5rem; border-radius: 0.9rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.08); } html.Site section.DesignedFor ul.ClinicFeatures li:before, html.Site section.DesignedFor .GrowthContent h3:before { content: ""; position: absolute; border-radius: 50%; background: var(--colour-SiteAccentBackground); } html.Site section.DesignedFor ul.ClinicFeatures li:before { left: 1.5rem; top: 1.5rem; width: 4.5rem; height: 4.5rem; } html.Site section.DesignedFor ul.ClinicFeatures li:after, html.Site section.DesignedFor .GrowthContent h3:after, html.Site section.DesignedFor ul.GrowthStages li:before { content: ""; position: absolute; background-color: var(--colour-SiteAccent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.DesignedFor ul.ClinicFeatures li:after { left: 2.6rem; top: 2.6rem; width: 2.3rem; height: 2.3rem; } html.Site section.DesignedFor li.BookingManagement:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fcalendar.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fcalendar.svg/repl/NONE); } html.Site section.DesignedFor li.Scheduling:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fteam.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fteam.svg/repl/NONE); } html.Site section.DesignedFor li.ClientManagement:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fclient.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fclient.svg/repl/NONE); } html.Site section.DesignedFor li.Reminders:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fmessage.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fmessage.svg/repl/NONE); } html.Site section.DesignedFor li.Reporting:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fend-of-month-reporting.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fend-of-month-reporting.svg/repl/NONE); } html.Site section.DesignedFor ul.ClinicFeatures h3 { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.45rem; } html.Site section.DesignedFor ul.ClinicFeatures p { margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.7rem; } html.Site section.DesignedFor .GrowthPanel { display: grid; grid-template-columns: minmax(30rem, 2fr) minmax(0, 3fr); max-width: 102rem; margin: 0 auto; border: 0.1rem solid var(--colour-SiteAccentBackground); border-radius: 0.9rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.08); overflow: hidden; } html.Site section.DesignedFor .GrowthContent { padding: 2rem 1.5rem 1.5rem; } html.Site section.DesignedFor .GrowthContent>h3 { position: relative; margin: 0 0 1rem; padding: 0.8rem 0 0.8rem 5rem; color: var(--colour-SiteInk); font-size: 1.3rem; line-height: 1.6rem; } html.Site section.DesignedFor .GrowthContent h3:before { left: 0; top: 0; width: 4rem; height: 4rem; } html.Site section.DesignedFor .GrowthContent h3:after { left: 1rem; top: 1rem; width: 2rem; height: 2rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fsprout.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fsprout.svg/repl/NONE); } html.Site section.DesignedFor .GrowthContent>p { margin: 0 0 2rem; color: var(--colour-SiteInk); font-size: 0.95rem; line-height: 1.6rem; } html.Site section.DesignedFor ul.GrowthStages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 0 3.5rem; list-style: none; } html.Site section.DesignedFor ul.GrowthStages:after { content: ""; position: absolute; left: 2.5rem; right: 2.5rem; bottom: 1.2rem; height: 0.15rem; background: var(--colour-SiteAccent); } html.Site section.DesignedFor ul.GrowthStages li { position: relative; min-width: 0; padding: 5rem 0.6rem 0; border-right: 0.1rem solid var(--colour-SiteAccentBackground); text-align: center; } html.Site section.DesignedFor ul.GrowthStages li:last-child { border: 0; } html.Site section.DesignedFor ul.GrowthStages li:before { left: 50%; top: 0; width: 3.5rem; height: 3.5rem; transform: translateX(-50%); } html.Site section.DesignedFor ul.GrowthStages li:after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -2.9rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--colour-SiteAccent); transform: translateX(-50%); } html.Site section.DesignedFor ul.GrowthStages li.Solo:before { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fsolo-practitioner.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fsolo-practitioner.svg/repl/NONE); } html.Site section.DesignedFor ul.GrowthStages li.Team:before { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fteam.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fteam.svg/repl/NONE); } html.Site section.DesignedFor ul.GrowthStages li.Growing:before { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fgrowing-clinic.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fgrowing-clinic.svg/repl/NONE); } html.Site section.DesignedFor ul.GrowthStages li.MultiLocation:before { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fmulti-location.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-designedforgrowingclinics%252Fmulti-location.svg/repl/NONE); } html.Site section.DesignedFor ul.GrowthStages strong, html.Site section.DesignedFor ul.GrowthStages span { display: block; } html.Site section.DesignedFor ul.GrowthStages strong { margin-bottom: 1rem; color: var(--colour-SiteAccent); font-size: 0.8rem; line-height: 1.1rem; } html.Site section.DesignedFor ul.GrowthStages span { color: var(--colour-SiteInk); font-size: 0.72rem; line-height: 1.25rem; } html.Site section.DesignedFor .GrowthPanel div.Image, html.Site section.DesignedFor .GrowthPanel div.Image a, html.Site section.DesignedFor .GrowthPanel div.Image img { display: block; width: 100%; height: 100%; } html.Site section.DesignedFor .GrowthPanel div.Image img { object-fit: cover; object-position: left center; } /* /Designed for growing clinics */ /* Everything you need */ html.Site main section.CoreFeatures { padding: 2rem 3rem 4rem; background: var(--colour-SiteBackground); } html.Site main section.CoreFeatures p.SectionEyebrow { margin: 0 0 0.5rem; color: var(--colour-SiteAccent); font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.4rem; text-align: center; text-transform: uppercase; } html.Site main section.CoreFeatures h2 { margin: 0; padding: 0; color: var(--colour-SiteInk); font-size: clamp(2.8rem, 4.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; } html.Site main section.CoreFeatures h2 span { color: var(--colour-SiteAccent); } html.Site main section.CoreFeatures p.SectionIntroduction { max-width: 62rem; margin: 0.75rem auto 0.5rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.8rem; text-align: center; } html.Site section.CoreFeatures ul.FeatureCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 82rem; margin: 0 auto 1rem; padding: 0; list-style: none; } html.Site section.CoreFeatures ul.FeatureCards li { position: relative; min-height: 13rem; padding: 6.5rem 1.25rem 1.25rem; border-radius: 0.7rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.07); } html.Site section.CoreFeatures ul.FeatureCards li:before { content: ""; position: absolute; left: 1.25rem; top: 1.25rem; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--colour-SiteAccentBackground); } html.Site section.CoreFeatures ul.FeatureCards li:after, html.Site section.CoreFeatures .SummaryContent>h3:before, html.Site section.CoreFeatures .SummaryContent li:before, html.Site section.CoreFeatures .SummaryContent span.ArrowIcon { content: ""; position: absolute; background-color: var(--colour-SiteAccent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.CoreFeatures ul.FeatureCards li:after { left: 2.15rem; top: 2.15rem; width: 2rem; height: 2rem; } html.Site section.CoreFeatures li.Calendar:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-calendar.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-calendar.svg/repl/NONE); } html.Site section.CoreFeatures li.Practitioners:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-practitioners.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-practitioners.svg/repl/NONE); } html.Site section.CoreFeatures li.Clients:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-client.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-client.svg/repl/NONE); } html.Site section.CoreFeatures li.Payments:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-payments.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-payments.svg/repl/NONE); } html.Site section.CoreFeatures li.Notifications:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-notifications.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-notifications.svg/repl/NONE); } html.Site section.CoreFeatures li.Reporting:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-reporting.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-reporting.svg/repl/NONE); } html.Site section.CoreFeatures li.Templates:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-templates.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-templates.svg/repl/NONE); } html.Site section.CoreFeatures li.Security:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-security.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-security.svg/repl/NONE); } html.Site section.CoreFeatures ul.FeatureCards h3 { margin: 0 0 0.6rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.35rem; } html.Site section.CoreFeatures ul.FeatureCards p { margin: 0; color: var(--colour-SiteInk); font-size: 0.82rem; line-height: 1.45rem; } html.Site section.CoreFeatures .FeatureSummary { display: grid; grid-template-columns: minmax(24rem, 1fr) minmax(0, 2fr); max-width: 82rem; margin: 0 auto; border-radius: 0.7rem; background: var(--colour-SiteAccentBackground); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.07); overflow: hidden; } html.Site section.CoreFeatures .SummaryContent { display: flex; flex-direction: column; padding: 1.2rem 1.5rem 0; } html.Site section.CoreFeatures .SummaryContent>h3 { position: relative; margin: 0 0 1.5rem; padding-left: 4rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 2.5rem; } html.Site section.CoreFeatures .SummaryContent>h3:after { content: ""; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--colour-SiteAccent); } html.Site section.CoreFeatures .SummaryContent>h3:before { z-index: 1; left: 0.65rem; top: 0.65rem; width: 1.2rem; height: 1.2rem; background-color: var(--colour-SiteSurface); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-check.svg/repl/NONE); } html.Site section.CoreFeatures .SummaryContent>p { margin: 0 0 1.5rem; color: var(--colour-SiteInk); font-size: 0.85rem; line-height: 1.55rem; } html.Site section.CoreFeatures .SummaryContent>ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; } html.Site section.CoreFeatures .SummaryContent li { position: relative; padding-left: 1.8rem; font-size: 0.75rem; } html.Site section.CoreFeatures .SummaryContent li:after { content: ""; position: absolute; left: 0; top: 0.1rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--colour-SiteAccent); opacity: 0.35; } html.Site section.CoreFeatures .SummaryContent li:before { z-index: 1; left: 0.25rem; top: 0.35rem; width: 0.5rem; height: 0.5rem; background-color: var(--colour-SiteAccent); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-everythingyouneed%252Ficon-check.svg/repl/NONE); } html.Site section.CoreFeatures .SummaryContent p.DemoButton { width: auto; margin: auto 0 0; } html.Site section.CoreFeatures .SummaryContent p.DemoButton a { padding: 1.2rem 1.5rem; border: 0; background: var(--colour-SiteAccent); color: var(--colour-SiteSurface); } html.Site section.CoreFeatures .SummaryContent span.ArrowIcon { position: static; float: right; width: 1.5rem; height: 1.5rem; background-color: var(--colour-SiteSurface); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); } html.Site section.CoreFeatures .FeatureSummary div.Image, html.Site section.CoreFeatures .FeatureSummary div.Image a, html.Site section.CoreFeatures .FeatureSummary div.Image img { display: block; width: 100%; } html.Site section.CoreFeatures .FeatureSummary div.Image img { height: auto; } /* /Everything you need */ /* Why clinics */ html.Site main section.WhyChoose { padding: 2rem 3rem 3rem; background: var(--colour-SiteBackground); } html.Site main section.WhyChoose p.SectionEyebrow { margin: 0 0 0.5rem; color: var(--colour-SiteAccent); font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; line-height: 1.4rem; text-align: center; text-transform: uppercase; } html.Site main section.WhyChoose h2 { margin: 0; padding: 0; color: var(--colour-SiteInk); font-size: clamp(2.8rem, 4.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; } html.Site main section.WhyChoose h2 span, html.Site section.WhyChoose blockquote.Testimonial span.QuoteMark, html.Site section.WhyChoose blockquote.Testimonial span.Business { color: var(--colour-SiteAccent); } html.Site main section.WhyChoose p.SectionIntroduction { margin: 1rem auto 1.5rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.8rem; text-align: center; } html.Site section.WhyChoose .WhyChooseGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(32rem, 1.05fr); gap: 2rem; max-width: 82rem; margin: 0 auto 1.5rem; } html.Site section.WhyChoose ul.Reasons { margin: 0; padding: 0; list-style: none; } html.Site section.WhyChoose ul.Reasons li { position: relative; min-height: 7rem; padding: 1rem 0 1rem 6rem; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.WhyChoose ul.Reasons li:last-child { border: 0; } html.Site section.WhyChoose ul.Reasons li:before { content: ""; position: absolute; left: 0; top: 1rem; width: 4.5rem; height: 4.5rem; border-radius: 0.8rem; background: var(--colour-SiteAccentBackground); } html.Site section.WhyChoose ul.Reasons li:after, html.Site section.WhyChoose ul.ClinicTrust li:after { content: ""; position: absolute; background-color: var(--colour-SiteAccent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.WhyChoose ul.Reasons li:after { left: 1.15rem; top: 2.15rem; width: 2.2rem; height: 2.2rem; } html.Site section.WhyChoose li.BusyClinics:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-clock.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-clock.svg/repl/NONE); } html.Site section.WhyChoose li.EasyToUse:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-person.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-person.svg/repl/NONE); } html.Site section.WhyChoose li.Reliable:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-shield.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-shield.svg/repl/NONE); } html.Site section.WhyChoose li.RealPeople:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-people.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-people.svg/repl/NONE); } html.Site section.WhyChoose li.Confidence:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-growth.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-growth.svg/repl/NONE); } html.Site section.WhyChoose li.FairPricing:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-pound.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-pound.svg/repl/NONE); } html.Site section.WhyChoose ul.Reasons h3 { margin: 0 0 0.4rem; color: var(--colour-SiteInk); font-size: 1.15rem; line-height: 1.4rem; } html.Site section.WhyChoose ul.Reasons p { margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.55rem; } html.Site section.WhyChoose blockquote.Testimonial { position: relative; margin: 0; padding: 5rem 2rem 2rem; border-radius: 1rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.08); } html.Site section.WhyChoose blockquote.Testimonial span.QuoteMark { position: absolute; left: 2rem; top: 1rem; height: 4rem; font-family: Georgia, serif !important; font-size: 5rem; font-weight: bold; line-height: 5rem; } html.Site section.WhyChoose blockquote.Testimonial>p { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.65rem; } html.Site section.WhyChoose blockquote.Testimonial footer { padding: 1rem 0 0; border-top: 0.1rem solid var(--colour-SiteAccentBackground); background: none; } html.Site section.WhyChoose blockquote.Testimonial footer strong, html.Site section.WhyChoose blockquote.Testimonial footer span { display: block; color: var(--colour-SiteInk); } html.Site section.WhyChoose blockquote.Testimonial footer strong { margin-bottom: 0.3rem; font-size: 1rem; } html.Site section.WhyChoose blockquote.Testimonial footer span { margin-bottom: 0.2rem; font-size: 0.9rem; } html.Site section.WhyChoose ul.ClinicTrust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 86rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.8rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.06); list-style: none; } html.Site section.WhyChoose ul.ClinicTrust li { position: relative; min-height: 4rem; padding: 0.4rem 1rem 0.4rem 5rem; border-right: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.WhyChoose ul.ClinicTrust li:last-child { border: 0; } html.Site section.WhyChoose ul.ClinicTrust li:before { content: ""; position: absolute; left: 1rem; top: 0; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--colour-SiteAccentBackground); } html.Site section.WhyChoose ul.ClinicTrust li:after { left: 2rem; top: 1rem; width: 1.8rem; height: 1.8rem; } html.Site section.WhyChoose li.Protected:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-lock.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-lock.svg/repl/NONE); } html.Site section.WhyChoose li.Backups:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-backup.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-backup.svg/repl/NONE); } html.Site section.WhyChoose li.UKSupport:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-support.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-support.svg/repl/NONE); } html.Site section.WhyChoose li.Dedicated:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-shield.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-whyclinics%252Ficon-shield.svg/repl/NONE); } html.Site section.WhyChoose ul.ClinicTrust strong, html.Site section.WhyChoose ul.ClinicTrust span { display: block; } html.Site section.WhyChoose ul.ClinicTrust strong { margin-bottom: 0.3rem; color: var(--colour-SiteInk); font-size: 0.85rem; } html.Site section.WhyChoose ul.ClinicTrust span { color: var(--colour-SiteInk); font-size: 0.75rem; line-height: 1.2rem; } /* /Why clinics */ /* Get started */ html.Site main section.GetStarted { padding: 3rem 3rem 2rem; background: var(--colour-SiteBackground); } html.Site section.GetStarted .GetStartedMain { display: grid; grid-template-columns: minmax(28rem, 1fr) minmax(24rem, 0.9fr); gap: 5rem; align-items: center; max-width: 88rem; margin: 0 auto 3rem; } html.Site main section.GetStarted p.SectionEyebrow { margin: 0 0 1rem; color: var(--colour-SiteAccent); font-size: 1rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.4rem; text-transform: uppercase; } html.Site main section.GetStarted h2 { margin: 0 0 1.5rem; padding: 0; color: var(--colour-SiteInk); font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; text-align: left; } html.Site main section.GetStarted h2 span { color: var(--colour-SiteAccent); } html.Site main section.GetStarted p.SectionIntroduction { max-width: 38rem; margin: 0 0 2rem; color: var(--colour-SiteInk); font-size: 1.1rem; line-height: 1.8rem; } html.Site section.GetStarted ul.Steps { margin: 0 0 1.5rem; padding: 0; list-style: none; } html.Site section.GetStarted ul.Steps li { position: relative; min-height: 7.5rem; padding: 1.25rem 0 1.25rem 7rem; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.GetStarted ul.Steps li:last-child { border: 0; } html.Site section.GetStarted ul.Steps li:before, html.Site section.GetStarted ul.GetStartedTrust li:before { content: ""; position: absolute; border-radius: 1.2rem; background: var(--colour-SiteAccentBackground); } html.Site section.GetStarted ul.Steps li:before { left: 0; top: 1.25rem; width: 5rem; height: 5rem; } html.Site section.GetStarted ul.Steps li:after, html.Site section.GetStarted ul.GetStartedTrust li:after, html.Site section.GetStarted .GetStartedActions span.ArrowIcon, html.Site section.GetStarted .GetStartedActions p.NoCard>span { content: ""; position: absolute; background-color: var(--colour-SiteAccent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.GetStarted ul.Steps li:after { left: 1.25rem; top: 2.5rem; width: 2.5rem; height: 2.5rem; } html.Site section.GetStarted li.Setup:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-setup.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-setup.svg/repl/NONE); } html.Site section.GetStarted li.OnlineBooking:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-online-booking.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-online-booking.svg/repl/NONE); } html.Site section.GetStarted li.AnyDevice:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-any-device.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-any-device.svg/repl/NONE); } html.Site section.GetStarted li.Support:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-support.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-support.svg/repl/NONE); } html.Site section.GetStarted ul.Steps h3 { margin: 0 0 0.4rem; color: var(--colour-SiteInk); font-size: 1.1rem; line-height: 1.4rem; } html.Site section.GetStarted ul.Steps p { max-width: 34rem; margin: 0; color: var(--colour-SiteInk); font-size: 0.9rem; line-height: 1.6rem; } html.Site section.GetStarted .GetStartedActions { display: flex; align-items: center; gap: 1.5rem; } html.Site section.GetStarted .GetStartedActions p.DemoButton { width: auto; margin: 0; } html.Site section.GetStarted .GetStartedActions p.DemoButton a { min-width: 20rem; padding: 1.2rem 1.5rem; border: 0; background: var(--colour-SiteAccent); color: var(--colour-SiteSurface); } html.Site section.GetStarted .GetStartedActions span.ArrowIcon { position: static; float: right; width: 1.4rem; height: 1.4rem; background-color: var(--colour-SiteSurface); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); } html.Site section.GetStarted .GetStartedActions p.NoCard { position: relative; margin: 0; padding-left: 1.8rem; color: var(--colour-SiteAccent); font-size: 0.85rem; line-height: 1.4rem; white-space: nowrap; } html.Site section.GetStarted .GetStartedActions p.NoCard>span { left: 0; top: 0.1rem; width: 1rem; height: 1rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-check.svg/repl/NONE); } html.Site section.GetStarted .Device { justify-self: center; max-width: 30rem; padding: 0.2rem; border: 0.2rem solid var(--colour-SiteInk); background: var(--colour-SiteInk); box-shadow: 0 1.5rem 4rem rgba(27, 12, 70, 0.2); overflow: hidden; } html.Site section.GetStarted .Device a, html.Site section.GetStarted .Device img { display: block; width: 100%; } html.Site section.GetStarted ul.GetStartedTrust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 88rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.8rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.06); list-style: none; } html.Site section.GetStarted ul.GetStartedTrust li { position: relative; min-height: 4rem; padding: 0.4rem 1rem 0.4rem 5.5rem; border-right: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.GetStarted ul.GetStartedTrust li:last-child { border: 0; } html.Site section.GetStarted ul.GetStartedTrust li:before { left: 1rem; top: 0; width: 4rem; height: 4rem; border-radius: 50%; } html.Site section.GetStarted ul.GetStartedTrust li:after { left: 2rem; top: 1rem; width: 2rem; height: 2rem; } html.Site section.GetStarted li.Demo:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-demo.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-demo.svg/repl/NONE); } html.Site section.GetStarted ul.GetStartedTrust li.NoCard:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-no-card.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-no-card.svg/repl/NONE); } html.Site section.GetStarted li.Cancel:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-cancel-anytime.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-cancel-anytime.svg/repl/NONE); } html.Site section.GetStarted li.Protected:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-data-protected.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-getstarted%252Ficon-data-protected.svg/repl/NONE); } html.Site section.GetStarted ul.GetStartedTrust strong, html.Site section.GetStarted ul.GetStartedTrust span { display: block; } html.Site section.GetStarted ul.GetStartedTrust strong { margin-bottom: 0.3rem; color: var(--colour-SiteInk); font-size: 0.9rem; } html.Site section.GetStarted ul.GetStartedTrust span { color: var(--colour-SiteInk); font-size: 0.75rem; line-height: 1.2rem; } /* /Get started */ /* Pricing philosophy page */ html.Site.page_flat-rate-pricing main header.PricingPage { margin: 0; padding: 0; background: var(--colour-SiteBackground); } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageTitle { padding: 3rem 2rem 1.5rem; text-align: center; } html.Site.page_flat-rate-pricing main header.PricingPage h1.MainHeading { position: relative; margin: 0; padding: 0 0 1.5rem; color: var(--colour-SiteInk); font-size: 2.8rem; line-height: 1.2; text-transform: uppercase; } html.Site.page_flat-rate-pricing main header.PricingPage h1.MainHeading:after { position: absolute; bottom: 0; left: 50%; width: 5rem; height: 0.2rem; background: var(--colour-SiteAccent); content: ''; transform: translateX(-50%); } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageTitle p { margin: 1.25rem auto 0; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.6; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPhilosophyBlock, html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 6rem; box-sizing: border-box; min-height: 30rem; padding: 4rem max(2rem, calc((100% - 76rem) / 2)); } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion:nth-child(odd) { background: var(--colour-WebsiteBackground); } html.Site.page_flat-rate-pricing main header.PricingPage img.PricingGraphic { display: block; width: min(25rem, 100%); height: auto; justify-self: center; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy { max-width: 38rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy > p { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.75rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy p.PricingBenefit { position: relative; min-height: 2rem; margin-bottom: 0.5rem; padding-left: 2.75rem; line-height: 2rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy p.PricingBenefit:before { position: absolute; top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fpricing%252Fcheck-circle.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy p.Strong { margin: 1rem 0 1.5rem; color: var(--colour-PricingPurple); font-size: 1.1rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion h2 { position: relative; display: flex; align-items: center; gap: 1rem; margin: 0 0 1.75rem; padding: 0 0 1.25rem; color: var(--colour-SiteInk); font-size: 1.75rem; font-weight: bold; line-height: 1.25; text-align: left; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion h2:after { position: absolute; bottom: 0; left: 4.75rem; width: 5rem; height: 0.15rem; background: linear-gradient(90deg, var(--colour-SiteAccent), transparent); content: ''; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion h2 img { display: block; flex: 0 0 auto; width: 3.75rem; height: 3.75rem; } html.Site.page_flat-rate-pricing main header.PricingPage p.ButtonLink { margin: 1.5rem 0 0; } html.Site.page_flat-rate-pricing main header.PricingPage p.ButtonLink a { color: var(--colour-PricingPurple); font-weight: 600; } html.Site.page_flat-rate-pricing main header.PricingPage p.ButtonLink a:after { margin-left: 0.5rem; content: '\2192'; } @media (width < 850px) { html.Site.page_flat-rate-pricing main header.PricingPage .PricingPhilosophyBlock, html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion { display: block; min-height: 0; padding: 3.5rem 2rem; } html.Site.page_flat-rate-pricing main header.PricingPage img.PricingGraphic { width: 18rem; margin: 0 auto 2.5rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion.UpfrontCosts img.PricingGraphic, html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion.ContractTerm img.PricingGraphic { margin-top: 2.5rem; margin-bottom: 0; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageCopy { max-width: 42rem; margin: 0 auto; } } @media (width < 576px) { html.Site.page_flat-rate-pricing main header.PricingPage .PricingPageTitle { padding: 2.5rem 1.25rem 1rem; } html.Site.page_flat-rate-pricing main header.PricingPage h1.MainHeading { font-size: 2.15rem; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingPhilosophyBlock, html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion { padding: 3rem 1.25rem; } html.Site.page_flat-rate-pricing main header.PricingPage img.PricingGraphic { display: none; } html.Site.page_flat-rate-pricing main header.PricingPage .PricingQuestion h2 { font-size: 1.5rem; } } /* Pricing */ html.Site main section.PricingT { padding: 6.5rem 2rem 5rem; background: var(--colour-SiteBackground); text-align: center; } html.Site main section.PricingT p.SectionEyebrow { display: block; margin: 0 0 1.25rem; color: var(--colour-PricingPurple); font-size: 0.95rem; line-height: 1.3rem; font-weight: bold; letter-spacing: 0.15em; text-transform: uppercase; } html.Site main section.PricingT h2 { margin: 0 0 2rem; padding: 0; color: var(--colour-SiteInk); font-size: clamp(3rem, 4.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } html.Site main section.PricingT h2 span { color: var(--colour-PricingPurple); } html.Site main section.PricingT p.SectionIntroduction { max-width: 48rem; margin: 0 auto 4rem; color: var(--colour-SiteInk); font-size: 1.1rem; line-height: 1.8rem; } html.Site section.PricingT .PricingPlans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 78rem; margin: 0 auto 3.5rem; text-align: left; } html.Site section.PricingT article.PricingPlan { --pricing-plan-colour: var(--colour-PricingPurple); --pricing-plan-pale: var(--colour-PricingPurplePale); --pricing-plan-border: var(--colour-PricingPurpleBorder); display: flex; flex-direction: column; min-height: 40rem; padding: 2rem 2.25rem; border: 0.1rem solid var(--pricing-plan-border); border-radius: 1.25rem; background: var(--colour-SiteSurface); box-shadow: 0 0.75rem 2.5rem rgba(27, 12, 70, 0.06); } html.Site section.PricingT article.PricingPlan.Growing { --pricing-plan-colour: var(--colour-PricingBlue); --pricing-plan-pale: var(--colour-PricingBluePale); --pricing-plan-border: var(--colour-PricingBlueBorder); } html.Site section.PricingT article.PricingPlan header { display: flex; align-items: center; gap: 1.75rem; height: 7.5rem; min-height: 7.5rem; margin: 0 0 1.5rem; padding: 0 0 1.75rem; border-bottom: 0.1rem solid var(--colour-PricingRule); background: transparent; box-sizing: border-box; } html.Site section.PricingT article.PricingPlan header div { flex: 1; min-width: 0; } html.Site section.PricingT article.PricingPlan h3, html.Site section.PricingT article.PricingPlan header p { margin: 0; color: var(--colour-SiteInk); } html.Site section.PricingT article.PricingPlan h3 { margin-bottom: 0.65rem; font-size: 1.75rem; line-height: 2rem; } html.Site section.PricingT article.PricingPlan header p { color: var(--pricing-plan-colour); font-size: 0.95rem; line-height: 1.45rem; } html.Site section.PricingT .PlanIcon { position: relative; width: 5rem; height: 5rem; flex: 0 0 5rem; border-radius: 50%; background-color: var(--pricing-plan-pale); } html.Site section.PricingT .PlanIcon:after { content: ""; position: absolute; left: 1.05rem; top: 1.05rem; width: 2.9rem; height: 2.9rem; background-color: var(--pricing-plan-colour, var(--colour-PricingPurple)); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.PricingT article.Solo .PlanIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-solo.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-solo.svg/repl/NONE); } html.Site section.PricingT article.Growing .PlanIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-clinic.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-clinic.svg/repl/NONE); } html.Site section.PricingT p.PlanPrice { display: flex; align-items: baseline; flex: 0 0 auto; gap: 0.3rem; margin: 0 0 0 0.5rem; color: var(--colour-SiteInk); white-space: nowrap; } html.Site section.PricingT p.PlanPrice strong { color: var(--pricing-plan-colour); font-size: 3.5rem; font-weight: 600; line-height: 1; } html.Site section.PricingT p.PlanPrice span { color: var(--colour-SiteInk); font-size: 1.05rem; } html.Site section.PricingT .BookingAllowance { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 7.5rem; min-height: 7.5rem; margin-bottom: 1.5rem; padding: 0 0 1.5rem; border-bottom: 0.1rem solid var(--colour-PricingRule); background: transparent; box-sizing: border-box; } html.Site section.PricingT .IntroductoryOffer .PlusIcon, html.Site section.PricingT .PricingActions span.ArrowIcon, html.Site section.PricingT .PricingActions p.NoCard>span, html.Site section.PricingT ul.PlanFeatures li:after { content: ""; display: block; background-color: var(--pricing-plan-colour, var(--colour-PricingPurple)); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.PricingT .BookingAllowance .AllowanceDetail { display: flex; align-items: center; gap: 1.2rem; } html.Site section.PricingT .BookingAllowance .AllowanceDetail>span { position: relative; width: 4.25rem; height: 4.25rem; flex: 0 0 4.25rem; border-radius: 50%; background: var(--pricing-plan-pale); } html.Site section.PricingT .BookingAllowance .AllowanceDetail>span:after { content: ""; position: absolute; left: 1rem; top: 1rem; width: 2.25rem; height: 2.25rem; background-color: var(--pricing-plan-colour); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.PricingT .BookingIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-bookings.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-bookings.svg/repl/NONE); } html.Site section.PricingT .InfinityIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-infinity.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-infinity.svg/repl/NONE); } html.Site section.PricingT .BookingAllowance p, html.Site section.PricingT .BookingAllowance strong, html.Site section.PricingT .BookingAllowance p span { display: block; margin: 0; color: var(--colour-SiteInk); } html.Site section.PricingT .BookingAllowance strong { margin-bottom: 0.45rem; font-size: 1.1rem; } html.Site section.PricingT .BookingAllowance p span { font-size: 0.9rem; line-height: 1.35rem; } html.Site section.PricingT p.IntroductoryOffer { display: flex; align-items: center; gap: 1rem; position: relative; margin: 0; padding: 1rem 1.25rem; min-width: 13.5rem; border-radius: 0.7rem; background: var(--pricing-plan-pale); color: var(--colour-SiteInk); font-size: 0.85rem; line-height: 1.2rem; } html.Site section.PricingT .IntroductoryOffer .PlusIcon { position: static; width: 2rem; height: 2rem; flex: 0 0 2rem; background-color: var(--pricing-plan-colour); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-plus.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-plus.svg/repl/NONE); } html.Site section.PricingT .BookingAllowance p.IntroductoryOffer strong { display: inline; margin: 0; font-size: inherit; line-height: inherit; } html.Site section.PricingT p.IncludedHeading { margin: 0 0 0.75rem; padding-top: 0.25rem; color: var(--pricing-plan-colour); font-size: 1rem; font-weight: bold; } html.Site section.PricingT ul.PlanFeatures { margin: 0 0 1.5rem; padding: 0; list-style: none; } html.Site section.PricingT ul.PlanFeatures li { position: relative; height: 2.4rem; min-height: 2.4rem; padding: 0.45rem 2.75rem 0.45rem 0; border-bottom: 0.1rem solid var(--colour-PricingRule); color: var(--colour-SiteInk); font-size: 0.95rem; line-height: 1.35rem; box-sizing: border-box; } html.Site section.PricingT ul.PlanFeatures li:after { position: absolute; right: 0.4rem; top: 0.5rem; width: 1.5rem; height: 1.5rem; opacity: 1; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-cross.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-cross.svg/repl/NONE); } html.Site section.PricingT ul.PlanFeatures li.Included:after { content: "โœ“"; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pricing-plan-colour); color: var(--colour-SiteSurface); font-family: Arial, sans-serif; font-size: 0.9rem; font-weight: bold; line-height: 1; opacity: 1; -webkit-mask-image: none; mask-image: none; } html.Site section.PricingT p.FeatureLink { margin: auto 0 0.25rem; padding-top: 0.75rem; text-align: left; } html.Site section.PricingT p.FeatureLink a { color: var(--colour-SiteInk); font-size: 0.9rem; font-weight: normal; text-decoration: none; } html.Site section.PricingT p.FeatureLink a span { margin-left: 0.5rem; color: var(--pricing-plan-colour); font-size: 1.2rem; } html.Site section.PricingT ul.PricingTrust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 82rem; margin: 0 auto 5rem; padding: 2.25rem 1rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 2rem rgba(27, 12, 70, 0.06); list-style: none; text-align: left; } html.Site section.PricingT ul.PricingTrust li { display: flex; align-items: center; gap: 1.25rem; position: relative; min-height: 6rem; padding: 0.5rem 1.75rem; border: 0; } html.Site section.PricingT ul.PricingTrust li:not(:last-child):after { content: ""; position: absolute; right: 0; top: 50%; width: 0.1rem; height: 4.5rem; background: var(--colour-PricingRule); transform: translateY(-50%); } html.Site section.PricingT .PricingTrust span.TrustIcon { position: relative; width: 4rem; height: 4rem; flex: 0 0 4rem; border-radius: 50%; background: var(--colour-PricingPurplePale); } html.Site section.PricingT .PricingTrust span.TrustIcon:after { content: ""; position: absolute; left: 1rem; top: 1rem; width: 2rem; height: 2rem; background-color: var(--colour-PricingPurple); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.PricingT .PricingTrust li.Practitioners .TrustIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-tag.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-tag.svg/repl/NONE); } html.Site section.PricingT .PricingTrust li.Users .TrustIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-user.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-user.svg/repl/NONE); } html.Site section.PricingT .PricingTrust li.Locations .TrustIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-location.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-location.svg/repl/NONE); } html.Site section.PricingT .PricingTrust li.Contracts .TrustIcon:after { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-contract.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-contract.svg/repl/NONE); } html.Site section.PricingT ul.PricingTrust strong, html.Site section.PricingT ul.PricingTrust span { display: block; color: var(--colour-SiteInk); } html.Site section.PricingT ul.PricingTrust strong { margin-bottom: 0.45rem; font-size: 0.95rem; white-space: nowrap; } html.Site section.PricingT ul.PricingTrust span { font-size: 0.85rem; line-height: 1.45rem; } html.Site section.PricingT .PricingActions { display: flex; justify-content: center; align-items: center; gap: 2rem; } html.Site section.PricingT .PricingActions p { margin: 0; } html.Site section.PricingT .PricingActions p.DemoButton { width: 27rem; flex: 0 0 27rem; } html.Site section.PricingT .PricingActions p.DemoButton a { width: 100%; min-width: 0; padding: 1.4rem 2rem; border: 0; background: linear-gradient(135deg, var(--colour-PricingPurple), var(--colour-PricingCTAEnd)); color: var(--colour-SiteSurface); box-sizing: border-box; } html.Site section.PricingT .PricingActions span.ArrowIcon { float: right; width: 1.4rem; height: 1.4rem; margin-left: 1.5rem; background-color: var(--colour-SiteSurface); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); } html.Site section.PricingT .PricingActions p.NoCard { position: relative; padding-left: 2rem; color: var(--colour-PricingPurple); font-size: 0.95rem; white-space: nowrap; } html.Site section.PricingT .PricingActions p.NoCard>span { position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-shield.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-shield.svg/repl/NONE); } /* /Pricing */ /* Free setup */ html.Site main section.FreeSetup { padding: 5rem 2rem 3rem; background: var(--colour-SiteBackground); text-align: center; } html.Site main section.FreeSetup p.SectionEyebrow { margin: 0 0 0.8rem; color: var(--colour-PricingPurple); font-size: 0.95rem; font-weight: bold; letter-spacing: 0.16em; line-height: 1.3rem; text-transform: uppercase; } html.Site main section.FreeSetup h2 { margin: 0 0 0.8rem; padding: 0; color: var(--colour-SiteInk); font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } html.Site main section.FreeSetup p.SectionIntroduction { margin: 0 0 2rem; color: var(--colour-PricingPurple); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 600; line-height: 1.2; } html.Site section.FreeSetup .SetupPanel { display: grid; grid-template-columns: minmax(0, 1.08fr) 7.5rem minmax(0, 0.92fr); gap: 0; max-width: 88rem; margin: 0 auto 1rem; min-height: 38rem; padding: 1.75rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 1rem; background: var(--colour-SiteSurface); text-align: left; } html.Site section.FreeSetup .SetupDetails { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; min-width: 0; } html.Site section.FreeSetup .SetupProcess { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.9fr); gap: 2rem; flex: 1; } html.Site section.FreeSetup ol.SetupSteps { margin: 0; padding: 0; list-style: none; } html.Site section.FreeSetup ol.SetupSteps li { display: grid; grid-template-columns: 4.5rem 3.5rem minmax(0, 1fr); align-items: start; gap: 1rem; position: relative; min-height: 9rem; padding: 0.75rem 0 1.5rem; border-bottom: 0.1rem solid var(--colour-PricingRule); } html.Site section.FreeSetup ol.SetupSteps li:last-child { border: 0; } html.Site section.FreeSetup ol.SetupSteps li:not(:last-child):after { content: ""; position: absolute; left: 2.2rem; top: 5rem; height: 3.25rem; border-left: 0.2rem dotted var(--colour-PricingPurpleBorder); } html.Site section.FreeSetup .StepNumber { display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 50%; background: var(--colour-PricingPurplePale); color: var(--colour-PricingPurple); font-size: 2rem; font-weight: 600; } html.Site section.FreeSetup .StepIcon, html.Site section.FreeSetup .SetupPromise>span, html.Site section.FreeSetup .MigrationIcon, html.Site section.FreeSetup .ReplyIcon, html.Site section.FreeSetup .FinalSetupPromise>span, html.Site section.FreeSetup .Questionnaire li:before { display: block; background-color: var(--colour-PricingPurple); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.FreeSetup .StepIcon { width: 2.75rem; height: 2.75rem; margin-top: 0.7rem; } html.Site section.FreeSetup li.ChoosePlan .StepIcon { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-choose-plan-calendar.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-choose-plan-calendar.svg/repl/NONE); } html.Site section.FreeSetup li.ClinicDetails .StepIcon { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-clinic-details-person.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-clinic-details-person.svg/repl/NONE); } html.Site section.FreeSetup li.BuildSetup .StepIcon { -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-build-setup-gear.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-build-setup-gear.svg/repl/NONE); } html.Site section.FreeSetup .SetupSteps h3, html.Site section.FreeSetup .SetupSteps p { margin: 0; color: var(--colour-SiteInk); } html.Site section.FreeSetup .SetupSteps h3 { margin: 0.35rem 0 0.45rem; font-size: 1.15rem; line-height: 1.5rem; } html.Site section.FreeSetup .SetupSteps p { font-size: 0.9rem; line-height: 1.55rem; } html.Site section.FreeSetup .Questionnaire { align-self: start; margin-top: 0.4rem; padding: 1.75rem 1.5rem; border-radius: 0.7rem; background: var(--colour-SiteSurface); box-shadow: 0 0.25rem 1.2rem rgba(27, 12, 70, 0.14); } html.Site section.FreeSetup .Questionnaire h3 { margin: 0 0 1rem; color: var(--colour-SiteInk); font-size: 1rem; } html.Site section.FreeSetup .Questionnaire ul { margin: 0; padding: 0; list-style: none; } html.Site section.FreeSetup .Questionnaire li { position: relative; padding: 0.55rem 0 0.55rem 1.8rem; color: var(--colour-SiteInk); font-size: 0.82rem; line-height: 1.25rem; } html.Site section.FreeSetup .Questionnaire li:before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 1rem; height: 1rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-questionnaire-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-questionnaire-check.svg/repl/NONE); } html.Site section.FreeSetup p.SetupPromise { display: flex; align-items: center; gap: 1.25rem; margin: 0.75rem 0 0; min-height: 5.75rem; padding: 1.25rem 1.5rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 0.7rem; background: var(--colour-PricingPurplePale); color: var(--colour-PricingPurple); font-size: 0.95rem; line-height: 1.45rem; box-sizing: border-box; grid-column: 1; grid-row: 2; } html.Site section.FreeSetup .SetupFlow { align-self: center; grid-column: 2; grid-row: 1 / span 2; width: 9rem; height: 12rem; margin: 0 -0.75rem; background: linear-gradient(90deg, var(--colour-PricingPurpleBorder), var(--colour-PricingPurple)); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Fmbook-questionnaire-flow.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Fmbook-questionnaire-flow.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; opacity: 0.82; z-index: 2; } html.Site section.FreeSetup .SetupPromise>span { width: 3rem; height: 3rem; flex: 0 0 3rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-setup-promise-hand-heart.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-setup-promise-hand-heart.svg/repl/NONE); } html.Site section.FreeSetup .SetupScreenshot { position: relative; align-self: center; grid-column: 3; grid-row: 1 / span 2; min-width: 0; margin-left: 0.5rem; box-shadow: 0 0.8rem 2rem rgba(27, 12, 70, 0.15); } html.Site section.FreeSetup .SetupScreenshot a, html.Site section.FreeSetup .SetupScreenshot img { display: block; width: 100%; } html.Site section.FreeSetup .SetupScreenshot img { height: 32rem; object-fit: cover; object-position: left center; } html.Site section.FreeSetup .MigrationPanel { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 2.5rem; max-width: 88rem; min-height: 11rem; margin: 0 auto 1.5rem; padding: 1.75rem 2rem; border: 0.1rem solid var(--colour-PricingPurpleBorder); border-radius: 1rem; background: var(--colour-PricingPurplePale); text-align: left; box-sizing: border-box; } html.Site section.FreeSetup .MigrationIcon { position: relative; width: 7rem; height: 7rem; border-radius: 50%; background: var(--colour-SiteSurface); } html.Site section.FreeSetup .MigrationIcon:after { content: ""; position: absolute; left: 1rem; top: 1rem; width: 5rem; height: 5rem; background-color: var(--colour-PricingPurple); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-migration-cloud-upload.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-migration-cloud-upload.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.FreeSetup .MigrationIntroduction { padding-right: 2.5rem; border-right: 0.1rem solid var(--colour-PricingPurpleBorder); } html.Site section.FreeSetup .MigrationIntroduction h3, html.Site section.FreeSetup .MigrationIntroduction p, html.Site section.FreeSetup .MigrationInstructions p { margin: 0; color: var(--colour-SiteInk); } html.Site section.FreeSetup .MigrationIntroduction h3 { margin-bottom: 0.6rem; font-size: 1.5rem; } html.Site section.FreeSetup .MigrationIntroduction strong { display: block; margin-bottom: 0.5rem; color: var(--colour-PricingPurple); font-size: 1rem; } html.Site section.FreeSetup .MigrationIntroduction p, html.Site section.FreeSetup .MigrationInstructions p { font-size: 0.95rem; line-height: 1.55rem; } html.Site section.FreeSetup .MigrationInstructions { position: relative; padding-left: 5rem; } html.Site section.FreeSetup .MigrationInstructions p:first-of-type { margin-bottom: 0.5rem; } html.Site section.FreeSetup .MigrationInstructions strong { color: var(--colour-PricingPurple); } html.Site section.FreeSetup .ReplyIcon { position: absolute; left: 0; top: 0; width: 4rem; height: 4rem; border-radius: 50%; background: var(--colour-SiteSurface); } html.Site section.FreeSetup .ReplyIcon:after { content: ""; position: absolute; left: 0.65rem; top: 0.65rem; width: 2.7rem; height: 2.7rem; background-color: var(--colour-PricingPurple); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-reply-email.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-reply-email.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.FreeSetup p.FinalSetupPromise { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 0; padding: 1rem 0; color: var(--colour-SiteInk); font-size: 1.1rem; } html.Site section.FreeSetup .FinalSetupPromise>span { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-final-check.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-freesetup%252Ficon-final-check.svg/repl/NONE); } /* /Free setup */ /* Final call to action */ html.Site main section.HomepageFinalCTA { width: calc(100% - 2rem); min-height: 58rem; margin: 1rem; padding: 6rem 2rem 5rem; border-radius: 1.4rem; background: var(--colour-FinalCTADark); box-shadow: 0 0.75rem 1.5rem rgba(27, 12, 70, 0.22); text-align: center; box-sizing: border-box; } html.Site main section.HomepageFinalCTA p.SectionEyebrow { margin: 0 0 2.5rem; color: var(--colour-FinalCTABright); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.17em; line-height: 1.5rem; text-transform: uppercase; } html.Site main section.HomepageFinalCTA h2 { margin: 0 0 2rem; padding: 0; color: var(--colour-FinalCTACream); font-size: clamp(4rem, 6.5vw, 6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; } html.Site main section.HomepageFinalCTA h2 span { color: var(--colour-FinalCTABright); background: linear-gradient(180deg, var(--colour-FinalCTABright), var(--colour-SiteAccent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.Site main section.HomepageFinalCTA p.SectionIntroduction { margin: 0 auto 3.5rem; color: var(--colour-FinalCTACream); font-size: 1.6rem; line-height: 2.2rem; } html.Site section.HomepageFinalCTA p.DemoButton { width: 49rem; max-width: 100%; margin: 0 auto 4rem; } html.Site section.HomepageFinalCTA p.DemoButton a, html.Site section:nth-child(even).HomepageFinalCTA p.DemoButton a { position: relative; display: block; padding: 1.85rem 3rem; border: 0; border-radius: 0.7rem; background: linear-gradient(105deg, var(--colour-PricingPurple), var(--colour-PricingCTAEnd)); box-shadow: none; color: var(--colour-FinalCTACream); font-size: 1.8rem; font-weight: bold; text-decoration: none; box-sizing: border-box; } html.Site section.HomepageFinalCTA .ArrowIcon { position: absolute; right: 2.25rem; top: 50%; display: block; float: none; width: 2rem; height: 2rem; margin: 0; background-color: var(--colour-FinalCTACream); transform: translateY(-50%); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-finalcta%252Ficon-arrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-finalcta%252Ficon-arrow-right.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.HomepageFinalCTA ul.FinalTrust { display: flex; justify-content: center; max-width: 64rem; margin: 0 auto 3.5rem; padding: 0; list-style: none; } html.Site section.HomepageFinalCTA ul.FinalTrust li { position: relative; min-width: 0; padding: 0.6rem 2.75rem 0.6rem 5rem; color: var(--colour-FinalCTACream); font-weight: 500; font-size: 1.1rem; line-height: 2.2rem; white-space: nowrap; } html.Site section.HomepageFinalCTA ul.FinalTrust li:not(:last-child) { border-right: 0.1rem solid var(--colour-Primary3); } html.Site section.HomepageFinalCTA ul.FinalTrust li:before { content: ""; position: absolute; left: 2rem; top: 0.45rem; width: 2.5rem; height: 2.5rem; background-color: var(--colour-Secondary2); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-finalcta%252Ficon-check-circle.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-finalcta%252Ficon-check-circle.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.HomepageFinalCTA p.SetupOffer { margin: 0; color: var(--colour-FinalCTACream); font-size: 1.35rem; line-height: 2rem; } html.Site section.HomepageFinalCTA p.SetupOffer strong { color: var(--colour-FinalCTABright); font-weight: normal; } /* /Final call to action */ /* Demo videos */ html.Site main section.DemoVideos { padding: 5rem 2rem 3rem; background: var(--colour-SiteBackground); text-align: center; } html.Site main section.DemoVideos p.SectionEyebrow { margin: 0 0 0.8rem; color: var(--colour-SiteAccent); font-size: 0.95rem; font-weight: bold; letter-spacing: 0.16em; line-height: 1.3rem; text-transform: uppercase; } html.Site main section.DemoVideos h2 { margin: 0 0 1rem; padding: 0; color: var(--colour-SiteInk); font-size: clamp(2.8rem, 4vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; } html.Site main section.DemoVideos p.SectionIntroduction { margin: 0 auto 2.5rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.55rem; } html.Site section.DemoVideos div.HomepageDemoVideos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 70rem; margin: 0 auto 1.25rem; padding: 0; text-align: left; } html.Site section.DemoVideos .HomepageDemoVideos .VideoContainer { position: relative; display: block; margin: 0; padding: 0.75rem 0.75rem 1.25rem; border-radius: 0.9rem; background: var(--colour-SiteSurface); box-shadow: 0 0.5rem 1.5rem rgba(27, 12, 70, 0.08); text-align: left; box-sizing: border-box; } html.Site section.DemoVideos .VideoPreview { position: relative; margin-bottom: 0.7rem; overflow: hidden; border-radius: 0.6rem; } html.Site section.DemoVideos .VideoPreview:before { content: ""; position: absolute; left: 50%; top: 50%; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: linear-gradient(135deg, var(--colour-SiteAccent), var(--colour-PricingPurple)); box-shadow: 0 0.4rem 1rem rgba(27, 12, 70, 0.18); transform: translate(-50%, -50%); pointer-events: none; z-index: 2; } html.Site section.DemoVideos .VideoPreview:after { content: ""; position: absolute; left: 50%; top: 50%; margin-left: 0.2rem; border-top: 0.85rem solid transparent; border-bottom: 0.85rem solid transparent; border-left: 1.3rem solid var(--colour-SiteSurface); transform: translate(-50%, -50%); pointer-events: none; z-index: 3; } html.Site section.DemoVideos .HomepageDemoVideos video { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; padding: 0; object-fit: cover; } html.Site section.DemoVideos .VideoDuration { position: absolute; right: 0.45rem; bottom: 0.45rem; padding: 0.25rem 0.45rem; border-radius: 0.3rem; background: var(--colour-SiteInk); color: var(--colour-SiteSurface); font-size: 0.75rem; line-height: 1rem; z-index: 3; } html.Site section.DemoVideos .HomepageDemoVideos h3, html.Site section.DemoVideos .HomepageDemoVideos p { margin: 0; color: var(--colour-SiteInk); } html.Site section.DemoVideos .HomepageDemoVideos h3 { margin: 0 0.5rem 0.3rem; font-size: 1rem; line-height: 1.3rem; } html.Site section.DemoVideos .HomepageDemoVideos p { margin: 0 0.5rem; font-size: 0.82rem; line-height: 1.3rem; } html.Site section.DemoVideos .VideoDemoCTA { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 15rem; align-items: center; gap: 1rem; max-width: 70rem; margin: 0 auto; padding: 1rem 1.5rem; border-radius: 0.7rem; background: var(--colour-SiteAccentBackground); text-align: left; box-sizing: border-box; } html.Site section.DemoVideos .VideoDemoIcon { width: 2.5rem; height: 2.5rem; background-color: var(--colour-SiteAccent); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Ficon-video-demo.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Ficon-video-demo.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.DemoVideos .VideoDemoCTA strong, html.Site section.DemoVideos .VideoDemoCTA p { margin: 0; color: var(--colour-SiteInk); } html.Site section.DemoVideos .VideoDemoCTA strong { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; } html.Site section.DemoVideos .VideoDemoCTA div p { font-size: 0.8rem; line-height: 1.2rem; } html.Site section.DemoVideos .VideoDemoCTA p.ButtonLink { width: auto; margin: 0; } html.Site section.DemoVideos .VideoDemoCTA p.ButtonLink a { display: block; padding: 1rem 1.25rem; border-radius: 0.5rem; background: linear-gradient(105deg, var(--colour-PricingPurple), var(--colour-PricingCTAEnd)); color: var(--colour-SiteSurface); font-size: 0.8rem; font-weight: bold; text-align: center; text-decoration: none; } html.Site section.DemoVideos .VideoDemoCTA .ArrowIcon { float: right; width: 1rem; height: 1rem; background-color: var(--colour-SiteSurface); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* /Demo videos */ /* Footer */ html.Site footer { font-size: 1rem; padding: 0; border: 0; background: var(--colour-FinalCTADark); color: var(--colour-FinalCTACream); overflow: hidden; } html.Site footer * { color: var(--colour-FinalCTACream); } html.Site footer .FooterMain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; max-width: 106rem; min-height: 31rem; margin: 0 auto; padding: 5.25rem 2rem 3rem; box-sizing: border-box; } html.Site footer .FooterBrand a.Logo, html.Site footer .FooterBrand a.Logo img { display: block; } html.Site footer .FooterBrand a.Logo { width: 16rem; margin-bottom: 2.5rem; text-decoration: none; } html.Site footer .FooterBrand a.Logo img { width: 100%; height: auto; } html.Site footer .FooterBrand>p { margin: 0 0 2.5rem; color: var(--colour-FinalCTACream); font-size: 1.15rem; line-height: 2.5rem; } html.Site footer .FooterBrand p.Location { position: relative; margin: 0; padding-left: 4rem; line-height: 2.5rem; } html.Site footer .FooterBrand p.Location>span { position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; background-color: var(--colour-SiteAccent); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-location.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Fsection-pricing%252Ficon-location.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site footer .FooterLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; margin-top: 1rem; } html.Site footer .FooterLinks .LinkList { margin: 0; padding: 0 0 0 4.5rem; margin: 0; list-style: none; } html.Site footer .FooterLinks .LinkList:first-of-type { padding-left: 0; padding-right: 4.5rem; border-right: 0.1rem solid var(--colour-Primary3); } html.Site footer .FooterLinks .LinkList a { position: relative; display: block; padding-right: 2.5rem; color: var(--colour-FinalCTACream); text-decoration: none; } html.Site footer .FooterLinks .LinkList a:after { content: ""; position: absolute; right: 0; top: 0.35rem; width: 1.25rem; height: 1.25rem; background-color: var(--colour-SiteAccent); -webkit-mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); mask-image: url(https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Farrow-right.svg/repl/NONE); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } html.Site section.TopSpeedTour video { width: 60rem; } html.Site footer .FooterLinks .LinkList li { margin: 0 0 2rem; padding-left: 0; color: var(--colour-FinalCTACream); font-size: 1.1rem; line-height: 1.6rem; } html.Site footer .FooterLinks .LinkList li.ColTitle { margin-bottom: 2.5rem; color: var(--colour-Secondary2); font-size: 1.35rem; font-weight: bold; } html.Site footer .FooterBottom { display: flex; align-items: center; gap: 2rem; min-height: 7rem; padding: 1.25rem max(2rem, calc((100% - 103rem) / 2)); border-top: 0.1rem solid var(--colour-Primary3); box-sizing: border-box; } html.Site footer .FooterBottom p { margin: 0; font-size: 1rem; } html.Site footer .FooterBottom p.Copyright>span { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: 0.75rem; border: 0.15rem solid var(--colour-SiteAccent); border-radius: 50%; color: var(--colour-SiteAccent); font-size: 0.85rem; line-height: 1; } html.Site footer .FooterBottom ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; } html.Site footer .FooterBottom li { position: relative; padding: 0 0 0 1.5rem; } html.Site footer .FooterBottom li:before { content: "ยท"; position: absolute; left: 0; color: var(--colour-SiteAccent); } html.Site footer .FooterBottom a { color: var(--colour-SiteAccent); text-decoration: none; } 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 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 main p.Error { padding: 1rem; } html.Site main div.ContactUs { padding: 1rem; } html.Site form.ContactUsForm .ValErr { text-align: left; margin-bottom: 2rem; } html.Site .ContentContainer { text-align: center; max-width: 80%; margin: 0 auto; } html.Site .ContentContainer .Content { text-align: left; } html.Site .ContentContainer .Content, html.Site .ContentContainer .Image, html.Site .ContentContainer .Image img { display: inline-block; width: 49%; vertical-align: middle; } html.Site section.FinalCTA .ContentContainer .Content { max-width: none; width: auto; padding: 0; } html.Site .ContentContainer .Image { text-align: center; } html.Site .ContentContainer .Image img { width: auto; max-height: 250px; max-width: 400px; margin-right: 3rem; } html.Site .ContentContainer .Image a:last-of-type img { margin-right: 0; } html.Site .ContentContainer .Content { padding: 0 2rem 0 0; } figcaption { color: white; font: italic smaller sans-serif; padding: 3px; text-align: center; width: 100%; } figcaption a { color: white !important; } /* Desktop, > 10inches */ @media (width > 960px) { } /* Tablets/screens, less than 10inches */ @media (width < 1024px) { html.NotLoggedIn div.Header { padding: 1rem 2rem; } html.NotLoggedIn div.HeaderWrap { flex-wrap: wrap; justify-content: center; } html.NotLoggedIn div.Header div.Logo { width: 100%; margin: 0 0 1rem; } html.NotLoggedIn div.Header ul.TopMenu { flex-wrap: wrap; justify-content: center; } html.NotLoggedIn div.Header ul.TopMenu>li.Login, html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA { margin-left: 0.8rem; } html.Site.page_home .HeroMain { display: block; min-height: 0; padding: 3rem 3rem 4rem; background-color: var(--colour-SiteBackground); } html.Site.page_home .HeroContent { max-width: 48rem; margin: 0 auto 3rem; background-color: var(--colour-SiteBackground); } html.Site.page_home .HeroImage { max-width: 60rem; margin: 0 auto; } html.Site.page_home ul.HeroTrust { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; padding: 2rem 3rem; } html.Site.page_home ul.HeroTrust li:nth-child(2) { border: 0; } html.Site section.NotComplicated .NotComplicatedGrid { display: block; } html.Site section.NotComplicated ul.Benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2rem; } html.Site section.NotComplicated ul.Benefits li { min-height: 15rem; } html.Site section.NotComplicated div.Image { height: 36rem; } html.Site section.DesignedFor ul.ClinicFeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.Site section.DesignedFor ul.ClinicFeatures li { min-height: 16rem; } html.Site section.DesignedFor .GrowthPanel { display: block; } html.Site section.DesignedFor .GrowthPanel div.Image { height: auto; } html.Site section.CoreFeatures ul.FeatureCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.Site section.CoreFeatures ul.FeatureCards li { min-height: 12rem; } html.Site section.CoreFeatures .FeatureSummary { display: block; } html.Site section.WhyChoose .WhyChooseGrid { display: block; } html.Site section.WhyChoose ul.Reasons { margin-bottom: 2rem; } html.Site section.WhyChoose ul.ClinicTrust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; } html.Site section.WhyChoose ul.ClinicTrust li:nth-child(2) { border: 0; } html.Site section.GetStarted .GetStartedMain { display: block; } html.Site section.GetStarted .GetStartedContent { max-width: 48rem; margin: 0 auto 3rem; } html.Site section.GetStarted ul.GetStartedTrust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; } html.Site section.GetStarted ul.GetStartedTrust li:nth-child(2) { border: 0; } html.Site section.PricingT ul.PricingTrust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; } html.Site section.PricingT .PricingPlans { grid-template-columns: minmax(0, 42rem); justify-content: center; } html.Site section.PricingT ul.PricingTrust li:nth-child(2) { border: 0; } html.Site section.PricingT ul.PricingTrust li:nth-child(2):after { display: none; } html.Site section.FreeSetup .SetupPanel { display: block; } html.Site section.FreeSetup .SetupDetails { margin-bottom: 2rem; } html.Site section.FreeSetup .SetupFlow { display: block; width: 7rem; height: 8rem; margin: 0 auto 2rem; transform: rotate(90deg); } html.Site section.FreeSetup .SetupScreenshot { max-width: 52rem; margin: 0 auto; } html.Site section.FreeSetup .MigrationPanel { grid-template-columns: 7rem minmax(0, 1fr); } html.Site section.FreeSetup .MigrationInstructions { grid-column: 2; } html.Site section.FreeSetup .MigrationIntroduction { border: 0; } html.Site footer .FooterMain { display: block; min-height: 0; padding: 4rem 2rem; } html.Site footer .FooterBrand { max-width: 38rem; margin-bottom: 4rem; } html.Site footer .FooterLinks { max-width: 42rem; } html.Site footer .FooterBottom { flex-wrap: wrap; padding: 2rem; } html.Site main section.HomepageFinalCTA { min-height: 0; padding: 5rem 2rem; } html.Site main section.HomepageFinalCTA h2 { font-size: 4.5rem; } html.Site section.HomepageFinalCTA ul.FinalTrust { flex-wrap: wrap; max-width: 48rem; } html.Site section.HomepageFinalCTA ul.FinalTrust li { flex: 1 1 20rem; box-sizing: border-box; } html.Site section.HomepageFinalCTA ul.FinalTrust li:nth-child(2) { border: 0; } html.Site .ContentContainer { max-width: none; } html.Site .ContentContainer .Content, html.Site .ContentContainer .Image { display: block; width: 100%; height: auto; } html.Site .ContentContainer .Image img { max-width: 100%; } html.Site .ContentContainer .Content { padding: 0 0 1rem 0; } 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.Site main ul.ProductsList li.ProductBlock form.BuyProduct input.Button.Buy { width: 100%; } html.Desktop ul.TopMenu { min-width: none; } } /* Tablet navigation can wrap the final call-to-action onto a new row. */ @media (576px <= width < 1024px) { html.NotLoggedIn div.Header ul.TopMenu { row-gap: 1rem; } } /* Phones */ @media (width < 576px) { html.NotLoggedIn div.Header { position: relative; padding: 1rem; } html.NotLoggedIn div.Header div.Logo img { margin: 0 auto; } html.NotLoggedIn div.Header ul.TopMenu>li, html.NotLoggedIn div.Header ul.TopMenu>li.Login, html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA { margin: 0.25rem 0.5rem; } html.NotLoggedIn div.Header ul.TopMenu>li.DemoCTA>a { padding: 0.6rem 1rem; border-radius: 1rem; } html.NotLoggedIn div.Header ul.TopMenu>li.HasSubMenu { position: relative; } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu { position: fixed; top: auto; right: 0; left: 0; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0.5rem 1rem; box-shadow: none; clip-path: none; transform: none; } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu>li { display: flex; justify-content: center; width: 100%; margin: 0; padding: 0.6rem 1rem; text-align: center; white-space: normal; } html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu>li>a, html.NotLoggedIn div.Header ul.TopMenu ul.SubMenu>li>a span { display: block; width: auto; text-align: center; } html.Site.page_home .HeroMain { padding: 2rem 1.25rem 3.5rem; } html.Site.page_home main header.Hero p.MainHeading { font-size: 2.4rem; } html.Site.page_home ul.HeroBenefits { display: block; } html.Site.page_home .HeroActions { display: block; } html.Site.page_home .HeroActions p.ButtonLink.DemoButton a { min-width: 0; width: 100%; } html.Site.page_home ul.HeroTrust { display: block; padding: 2rem 1.25rem; } html.Site.page_home ul.HeroTrust li, html.Site.page_home ul.HeroTrust li:nth-child(2) { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border: 0; border-bottom: 0.1rem solid var(--colour-Primary1); } html.Site.page_home ul.HeroTrust li:last-child { margin-bottom: 0; border: 0; } html.Site main section.NotComplicated { padding: 3rem 1.25rem; } html.Site main section.NotComplicated h2 { font-size: 2.6rem; } html.Site main section.NotComplicated p.SectionIntroduction { margin-bottom: 2rem; } html.Site main section.NotComplicated br.DesktopOnly { display: none; } html.Site section.NotComplicated ul.Benefits { display: block; } html.Site section.NotComplicated ul.Benefits li { min-height: 0; margin-bottom: 1rem; } html.Site section.NotComplicated div.Image { height: auto; } html.Site main section.DesignedFor { padding: 3rem 1.25rem; } html.Site main section.DesignedFor h2 { font-size: 2.6rem; } html.Site main section.DesignedFor br.DesktopOnly { display: none; } html.Site section.DesignedFor ul.ClinicFeatures { display: block; } html.Site section.DesignedFor ul.ClinicFeatures li { min-height: 0; margin-bottom: 1rem; } html.Site section.DesignedFor .GrowthContent { padding: 1.5rem 1rem; } html.Site section.DesignedFor ul.GrowthStages { display: block; padding-bottom: 0; } html.Site section.DesignedFor ul.GrowthStages:after, html.Site section.DesignedFor ul.GrowthStages li:after { display: none; } html.Site section.DesignedFor ul.GrowthStages li { min-height: 5.5rem; padding: 0.5rem 0 1rem 5rem; border: 0; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); text-align: left; } html.Site section.DesignedFor ul.GrowthStages li:last-child { border: 0; } html.Site section.DesignedFor ul.GrowthStages li:before { left: 0.5rem; top: 0.5rem; transform: none; } html.Site section.DesignedFor ul.GrowthStages strong { margin-bottom: 0.4rem; } html.Site main section.CoreFeatures { padding: 3rem 1.25rem; } html.Site main section.CoreFeatures h2 { font-size: 2.6rem; } html.Site main section.CoreFeatures br.DesktopOnly { display: none; } html.Site section.CoreFeatures ul.FeatureCards { display: block; } html.Site section.CoreFeatures ul.FeatureCards li { min-height: 0; margin-bottom: 1rem; } html.Site section.CoreFeatures .SummaryContent { padding: 1.5rem 1rem; } html.Site section.CoreFeatures .SummaryContent>ul { display: block; } html.Site section.CoreFeatures .SummaryContent li { margin-bottom: 0.8rem; } html.Site section.CoreFeatures .SummaryContent p.DemoButton { width: auto; max-width: none; margin: 1rem 0; } html.Site section.CoreFeatures .SummaryContent p.DemoButton a { width: 78%; max-width: 20rem; margin-right: auto; margin-left: auto; flex: 0 0 auto; align-self: center; box-sizing: border-box; } html.Site main section.WhyChoose { padding: 3rem 1.25rem; } html.Site main section.WhyChoose h2 { font-size: 2.6rem; } html.Site main section.WhyChoose br.DesktopOnly { display: none; } html.Site section.WhyChoose ul.Reasons li { padding-left: 5.5rem; } html.Site section.WhyChoose blockquote.Testimonial { padding: 5rem 1.25rem 1.5rem; } html.Site section.WhyChoose ul.ClinicTrust { display: block; padding: 1.25rem; } html.Site section.WhyChoose ul.ClinicTrust li, html.Site section.WhyChoose ul.ClinicTrust li:nth-child(2) { margin-bottom: 1rem; padding-bottom: 1rem; border: 0; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.WhyChoose ul.ClinicTrust li:last-child { margin-bottom: 0; border: 0; } html.Site main section.GetStarted { padding: 3rem 1.25rem 2rem; } html.Site main section.GetStarted h2 { font-size: 3.2rem; } html.Site section.GetStarted ul.Steps li { min-height: 6.5rem; padding-left: 5.5rem; } html.Site section.GetStarted ul.Steps li:before { width: 4rem; height: 4rem; } html.Site section.GetStarted ul.Steps li:after { left: 1rem; top: 2.25rem; width: 2rem; height: 2rem; } html.Site section.GetStarted .GetStartedActions { display: block; } html.Site section.GetStarted .GetStartedActions p.DemoButton a { min-width: 0; width: 100%; } html.Site section.GetStarted .GetStartedActions p.NoCard { display: inline-block; margin-top: 1rem; } html.Site section.GetStarted ul.GetStartedTrust { display: block; padding: 1.25rem; } html.Site section.GetStarted ul.GetStartedTrust li, html.Site section.GetStarted ul.GetStartedTrust li:nth-child(2) { margin-bottom: 1rem; padding-bottom: 1rem; border: 0; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.GetStarted ul.GetStartedTrust li:last-child { margin-bottom: 0; border: 0; } html.Site main section.PricingT { padding: 3rem 1.25rem; } html.Site main section.PricingT h2 { font-size: 2.7rem; } html.Site section.PricingT .PricingPlans { display: block; } html.Site section.PricingT article.PricingPlan { margin-bottom: 1.25rem; padding: 1.5rem 1.25rem; } html.Site section.PricingT article.PricingPlan header { flex-wrap: wrap; height: auto; min-height: 0; } html.Site section.PricingT article.PricingPlan header p.PlanPrice { width: 100%; padding-left: 5.25rem; } html.Site section.PricingT .BookingAllowance { align-items: stretch; flex-direction: column; height: auto; min-height: 0; } html.Site section.PricingT p.IntroductoryOffer { align-self: stretch; min-width: 0; } html.Site section.PricingT ul.PlanFeatures li { height: auto; min-height: 2.4rem; } html.Site section.PricingT ul.PricingTrust { display: block; padding: 1.25rem; } html.Site section.PricingT ul.PricingTrust li, html.Site section.PricingT ul.PricingTrust li:nth-child(2) { margin-bottom: 1rem; padding-bottom: 1rem; border: 0; border-bottom: 0.1rem solid var(--colour-SiteAccentBackground); } html.Site section.PricingT ul.PricingTrust li:last-child { margin-bottom: 0; border: 0; } html.Site section.PricingT ul.PricingTrust li:after { display: none; } html.Site section.PricingT ul.PricingTrust strong { white-space: normal; } html.Site section.PricingT .PricingActions { display: block; } html.Site section.PricingT .PricingActions p.DemoButton a { min-width: 0; width: 100%; } html.Site section.PricingT .PricingActions p.DemoButton { width: 100%; } html.Site section.PricingT .PricingActions p.NoCard { display: inline-block; margin-top: 1rem; } html.Site main section.FreeSetup { padding: 3rem 1.25rem; } html.Site main section.FreeSetup h2 { font-size: 2.8rem; } html.Site main section.FreeSetup p.SectionIntroduction { font-size: 1.7rem; } html.Site section.FreeSetup .SetupPanel { display: flex; flex-direction: column; padding: 1.25rem; } html.Site section.FreeSetup .SetupDetails { display: block; order: 1; margin-bottom: 0; } html.Site section.FreeSetup .SetupProcess { display: block; } html.Site section.FreeSetup .Questionnaire { width: 100%; margin: 1rem 0; box-sizing: border-box; } html.Site section.FreeSetup .SetupFlow { order: 2; } html.Site section.FreeSetup .SetupScreenshot { order: 3; } html.Site section.FreeSetup p.SetupPromise { order: 4; margin: 1.5rem 0 0; } html.Site section.FreeSetup ol.SetupSteps li { grid-template-columns: 3.5rem 2.5rem minmax(0, 1fr); gap: 0.65rem; } html.Site section.FreeSetup .StepNumber { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; } html.Site section.FreeSetup .StepIcon { width: 2.25rem; height: 2.25rem; margin-top: 0.5rem; } html.Site section.FreeSetup ol.SetupSteps li:not(:last-child):after { left: 1.65rem; top: 3.8rem; } html.Site section.FreeSetup .SetupSteps br, html.Site section.FreeSetup .MigrationPanel br, html.Site section.FreeSetup .SetupPromise br { display: none; } html.Site section.FreeSetup .SetupScreenshot img { height: auto; object-fit: contain; } html.Site section.FreeSetup .MigrationPanel { display: block; padding: 1.5rem; text-align: center; } html.Site section.FreeSetup .MigrationIcon { margin: 0 auto 1rem; } html.Site section.FreeSetup .MigrationIntroduction { margin-bottom: 1.5rem; padding: 0; } html.Site section.FreeSetup .MigrationInstructions { padding: 5rem 0 0; } html.Site section.FreeSetup .ReplyIcon { left: 50%; transform: translateX(-50%); } html.Site section.FreeSetup p.FinalSetupPromise { align-items: flex-start; text-align: left; } html.Site main section.HomepageFinalCTA { width: calc(100% - 1rem); margin: 0.5rem; padding: 4rem 1.25rem; border-radius: 1rem; } html.Site main section.HomepageFinalCTA p.SectionEyebrow { margin-bottom: 1.5rem; font-size: 0.9rem; } html.Site main section.HomepageFinalCTA h2 { margin-bottom: 1.5rem; font-size: 3rem; } html.Site main section.HomepageFinalCTA p.SectionIntroduction { margin-bottom: 2.5rem; font-size: 1.15rem; line-height: 1.7rem; } html.Site section.HomepageFinalCTA p.SectionIntroduction br { display: none; } html.Site section.HomepageFinalCTA p.DemoButton { margin-bottom: 2.5rem; } html.Site section.HomepageFinalCTA p.DemoButton a, html.Site section:nth-child(even).HomepageFinalCTA p.DemoButton a { padding: 1.4rem 1.25rem; font-size: 1.2rem; } html.Site section.HomepageFinalCTA .ArrowIcon { right: 1.25rem; width: 1.5rem; height: 1.5rem; } html.Site section.HomepageFinalCTA ul.FinalTrust { display: block; margin-bottom: 2.5rem; text-align: left; } html.Site section.HomepageFinalCTA ul.FinalTrust li, html.Site section.HomepageFinalCTA ul.FinalTrust li:not(:last-child) { margin: 0; padding: 0.75rem 1rem 0.75rem 4rem; border: 0; white-space: normal; } html.Site section.HomepageFinalCTA ul.FinalTrust li:last-child { border: 0; } html.Site section.HomepageFinalCTA ul.FinalTrust li:before { left: 0.75rem; top: 0.6rem; } html.Site section.HomepageFinalCTA p.SetupOffer { font-size: 1.1rem; } html.Site main section.DemoVideos { padding: 3rem 1.25rem; } html.Site main section.DemoVideos h2 { font-size: 2.6rem; } html.Site main section.DemoVideos p.SectionIntroduction br { display: none; } html.Site section.DemoVideos div.HomepageDemoVideos { display: block; } html.Site section.DemoVideos .HomepageDemoVideos .VideoContainer { margin-bottom: 1rem; } html.Site section.DemoVideos .VideoPreview:before { width: 4rem; height: 4rem; } html.Site section.DemoVideos .VideoDemoCTA { display: block; padding: 1.25rem; text-align: center; } html.Site section.DemoVideos .VideoDemoIcon { margin: 0 auto 0.75rem; } html.Site section.DemoVideos .VideoDemoCTA p.ButtonLink { margin-top: 1rem; } /* 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; } html.Site footer .FooterMain { padding: 3rem 1.5rem; } html.Site footer .FooterBrand a.Logo { width: 14rem; margin-bottom: 2rem; } html.Site footer .FooterBrand>p { font-size: 1rem; line-height: 1.8rem; } html.Site footer .FooterBrand>p br { display: none; } html.Site footer .FooterLinks { display: block; margin-top: 3rem; } html.Site footer .FooterLinks .LinkList, html.Site footer .FooterLinks .LinkList:first-of-type { padding: 0; border: 0; } html.Site footer .FooterLinks .LinkList:first-of-type { margin-bottom: 2.5rem; padding-bottom: 0.5rem; border-bottom: 0.1rem solid var(--colour-Primary3); } html.Site footer .FooterLinks .LinkList li { margin-bottom: 1.25rem; } html.Site footer .FooterLinks .LinkList li.ColTitle { margin-bottom: 1.5rem; } html.Site footer .FooterBottom { display: block; padding: 2rem 1.5rem; } html.Site footer .FooterBottom p { margin-bottom: 1rem; } } /** 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 h1 { font-weight: normal; } html.Mobile .LoginBox input[type='text'], html.Mobile .LoginBox input[type='password'] { width: 100%; } .LoginBox a.ForgotPasswordLink { margin: 1rem 0 0 0; } html.page_demologin .LoginRegister { margin-left: 0; } header>div.LoginRegister { padding: 1rem 0; } div.LoginRegister .ButtonBarAlt .Button { margin: 1rem; } html.Mobile div.LoginRegister .ButtonBarAlt .Button { width: 100%; display: block; margin-top: 2rem; } .LoginRegisterBox { display: inline-block; margin: 0; vertical-align: top; } .LoginRegisterBox h1 { font-weight: normal; margin: 0 0 0.9rem 0; } /* 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; } /** Including file: site.authPages **/ .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; vertical-align: top; } .LoginRegisterBox div.ErrorsArea.FormErrs li { color: red !important; padding-top: 0.6rem; } .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; } /* Public login and password recovery pages */ html.Site.page_login main header.LoginPage, html.Site.page_forgotpassword main header.ForgotPasswordPage { box-sizing: border-box; min-height: 32rem; padding: 2rem 4rem; background: var(--colour-SiteBackground); } html.Site.page_login main header.LoginPage > .LoginBox.Login, html.Site.page_forgotpassword main header.ForgotPasswordPage > .LoginRegister { display: block; box-sizing: border-box; width: 100%; max-width: 90rem; margin: 0 auto; padding: 2rem 3rem 2.5rem; border-radius: 0.6rem; background: var(--colour-SiteSurface); box-shadow: 0 0.2rem 1rem rgba(27, 12, 70, 0.1); } html.Site.page_login main header.LoginPage .LoginBox.Login, html.Site.page_forgotpassword main header.ForgotPasswordPage .LoginRegisterBox { position: relative; display: block; width: 100%; } html.Site.page_login main header.LoginPage .LoginPageHeading { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 2.5rem; } html.Site.page_login main header.LoginPage .LoginPageHeading:before, html.Site.page_forgotpassword main header.ForgotPasswordPage .LoginRegisterBox:before { display: block; width: 7rem; height: 7rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fheadset.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site.page_forgotpassword main header.ForgotPasswordPage .LoginRegisterBox:before { position: absolute; top: 0; left: 0; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fheadset.svg/repl/NONE") center / contain no-repeat; content: ''; } html.Site.page_forgotpassword main header.ForgotPasswordPage .PasswordResetSentPage .LoginRegisterBox:before { display: none; } html.Site.page_login main header.LoginPage .LoginPageHeading h1, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail h1 { margin: 0 0 0.5rem; color: var(--colour-SiteInk); font-size: 2.5rem; font-weight: bold; line-height: 1.2; } html.Site.page_login main header.LoginPage .LoginPageHeading p, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail > p:first-of-type { max-width: 32rem; margin: 0; color: var(--colour-Primary3); font-size: 1rem; line-height: 1.6; } html.Site.page_login main header.LoginPage form.LoginForm, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail { width: 42rem; max-width: calc(100% - 9.5rem); margin: 1.5rem 0 0 9.5rem; } html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail { margin-top: 0; } html.Site.page_login main header.LoginPage form.LoginForm label.WITWidget, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail label.WITWidget { display: block; width: 100%; margin: 0 0 1rem; } html.Site.page_login main header.LoginPage form.LoginForm label.WITWidget > span.Legend, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail label.WITWidget > span.Legend { display: block; margin: 0 0 0.5rem; color: var(--colour-SiteInk); font-weight: 600; } html.Site.page_login main header.LoginPage form.LoginForm label.RequiredField > span.Legend:after, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail label.WITWidget > span.Legend:after { margin-left: 0.2rem; color: var(--colour-Error1); content: '*'; } html.Site.page_login main header.LoginPage form.LoginForm input[type='text'], html.Site.page_login main header.LoginPage form.LoginForm input[type='password'], html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[type='text'] { display: block; box-sizing: border-box; width: 100%; height: 3rem; padding: 0.6rem 3rem; border: 1px solid var(--colour-PricingPurpleBorder); border-radius: 0.4rem; background-color: var(--colour-SiteSurface); background-position: 0.65rem 50%; background-repeat: no-repeat; background-size: 1.5rem 1.5rem; color: var(--colour-SiteInk); font: inherit; } html.Site.page_login main header.LoginPage form.LoginForm input[name='username'], html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[name='email'] { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Femail.svg/repl/NONE"); } html.Site.page_login main header.LoginPage form.LoginForm input[name='password'] { background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fpassword-lock.svg/repl/NONE"), url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fshow-password-eye.svg/repl/NONE"); background-position: 0.65rem 50%, calc(100% - 0.65rem) 50%; } html.Site.page_login main header.LoginPage form.LoginForm input::placeholder, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input::placeholder { color: var(--colour-Primary2); opacity: 1; } html.Site.page_login main header.LoginPage form.LoginForm label.ShowPassword { display: flex; align-items: center; width: auto; margin: 0.25rem 0 1rem; } html.Site.page_login main header.LoginPage form.LoginForm label.ShowPassword input { width: 1rem; height: 1rem; margin: 0 0.5rem 0 0; } html.Site.page_login main header.LoginPage form.LoginForm label.ShowPassword span { color: var(--colour-SiteInk); } html.Site.page_login main header.LoginPage form.LoginForm input[type='submit'], html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[type='submit'] { display: block; box-sizing: border-box; width: 17rem; height: 3rem; margin: 0.5rem 0 1rem; padding: 0.6rem 1rem 0.6rem 3rem; border: 0; border-radius: 0.4rem; background-color: var(--colour-PricingPurple); background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Flogin.svg/repl/NONE"); background-position: 0.75rem 50%; background-repeat: no-repeat; background-size: 1.5rem 1.5rem; color: var(--colour-SiteSurface) !important; font-weight: bold; } html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[type='submit'] { width: 21rem; background-image: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fsend-reset-link.svg/repl/NONE"); } html.Site.page_login main header.LoginPage form.LoginForm input[type='submit']:hover, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[type='submit']:hover { background-color: var(--colour-PricingCTAEnd) !important; } html.Site.page_login main header.LoginPage a.ForgotPasswordLink, html.Site.page_forgotpassword main header.ForgotPasswordPage p.BackToLogin a { color: var(--colour-PricingPurple); } html.Site.page_forgotpassword main header.ForgotPasswordPage p.BackToLogin { margin: 1.5rem 0 0; } html.Site.page_forgotpassword main header.ForgotPasswordPage p.BackToLogin a:before { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/siteicons%252Flogin%252Fback-arrow.svg/repl/NONE") center / contain no-repeat; content: ''; vertical-align: middle; } @media (width < 576px) { html.Site.page_login main header.LoginPage, html.Site.page_forgotpassword main header.ForgotPasswordPage { min-height: 0; padding: 1.5rem 1rem; } html.Site.page_login main header.LoginPage > .LoginBox.Login, html.Site.page_forgotpassword main header.ForgotPasswordPage > .LoginRegister { padding: 1.5rem; } html.Site.page_login main header.LoginPage .LoginPageHeading { display: block; text-align: center; } html.Site.page_login main header.LoginPage .LoginPageHeading:before, html.Site.page_forgotpassword main header.ForgotPasswordPage .LoginRegisterBox:before { position: static; width: 5rem; height: 5rem; margin: 0 auto 1rem; } html.Site.page_login main header.LoginPage form.LoginForm, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail { width: 100%; max-width: none; margin: 1.5rem 0 0; } html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail h1, html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail > p:first-of-type { text-align: center; } html.Site.page_login main header.LoginPage form.LoginForm input[type='submit'], html.Site.page_forgotpassword main header.ForgotPasswordPage form.passwordresetemail input[type='submit'] { width: 100%; } } .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; } /** Including file: mobile.help.quickstart **/ /** Including file: site.demosystem **/ html.Site div.DemoInfo { } html.Site div.DemoInfo button { margin: 0 1rem 1rem 0; } html.Site.Mobile div.RegisterBox { text-align: center; } html.Site.page_demologin main header.DemoLoginPage { box-sizing: border-box; width: calc(100% - 4rem); max-width: 82rem; margin: 1.75rem auto; padding: 2rem; border-radius: 0.5rem; background: var(--colour-SiteSurface); box-shadow: 0 0.2rem 1rem rgba(27, 12, 70, 0.1); } html.Site.page_demologin main header.DemoLoginPage div.DemoInfo { width: 100%; } html.Site.page_demologin main header.DemoLoginPage div.DemoInfo h1.MainHeading { margin: 0 0 1.5rem; padding: 0; color: var(--colour-SiteInk); font-size: 2rem; font-weight: bold; line-height: 1.25; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin { display: flex; align-items: center; gap: 1rem; box-sizing: border-box; width: 100%; margin: 0 0 2rem; padding: 0.75rem; background: var(--colour-Secondary1); } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Button { box-sizing: border-box; min-height: 2.8rem; margin: 0; padding: 0.6rem 1rem 0.6rem 3.3rem; border: 0.1rem solid var(--colour-Secondary4); border-radius: 0.25rem; background-color: var(--colour-Secondary2); background-position: 0.9rem 50%; background-repeat: no-repeat; background-size: 1.5rem; color: var(--colour-SiteInk) !important; font-size: 1rem; font-weight: normal; white-space: nowrap; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Button:hover { background-color: var(--colour-Secondary2) !important; color: var(--colour-SiteInk) !important; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Login:hover { background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252Flogin.svg/repl/NONE") 0.9rem 50% / 1.5rem no-repeat, var(--colour-Secondary2) !important; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Register:hover { background: url("https://m-booksystems.co.uk/app/Apps_img/v/1787839984/img/iconset%252FdemoRegister.svg/repl/NONE") 0.9rem 50% / 1.5rem no-repeat, var(--colour-Secondary2) !important; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Login { min-width: 7.5rem; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Register { min-width: 18rem; } html.Site.page_demologin main header.DemoLoginPage div.DemoInfo > p { margin: 0 0 1.45rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.65; } html.Site.page_demologin main header.DemoLoginPage div.DemoInfo > p:last-child { margin-bottom: 0; } html.Site.page_demologin main header.DemoLoginPage div.DemoInfo > p strong { color: var(--colour-SiteInk); font-weight: bold; } @media (width < 700px) { html.Site.page_demologin main header.DemoLoginPage { width: calc(100% - 2rem); margin: 1rem auto; padding: 1.5rem; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin { align-items: stretch; flex-direction: column; } html.Site.page_demologin main header.DemoLoginPage div.ButtonBar.DemoLogin button.Button { width: 100%; min-width: 0; } } /** Including file: site.videos **/ html.page_products video { width: 70vw; height: auto; } html.Site 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 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; } div.VideoContainer video { width: 100%; max-width: 30rem; height: auto; padding: 2rem 0 1rem 0; } /** Including file: site.checkoutSuccess **/ html.Site .CheckoutSuccess { box-sizing: border-box; width: calc(100% - 4rem); max-width: 74rem; margin: 0 auto; padding: 1.75rem 0; } html.Site .CheckoutSuccess .SuccessBlock { box-sizing: border-box; margin: 0 0 1.6rem; padding: 1.6rem; border: 0.1rem solid var(--colour-PricingRule); border-radius: 0.5rem; color: var(--colour-SiteInk); } html.Site .CheckoutSuccess .SuccessBlock h1 { margin: 0 0 1.15rem; padding: 0; color: var(--colour-SiteInk); font-size: 1.5rem; font-weight: bold; line-height: 1.3; } html.Site .CheckoutSuccess .SuccessBlock p { color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.6; } html.Site .CheckoutSuccess .SuccessBlock.Success { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1.5rem; padding: 1.5rem 1.75rem; border-color: var(--colour-Secondary2); background: var(--colour-Secondary1); } html.Site .CheckoutSuccess .SuccessBlock.Success:before { display: flex; grid-row: 1 / 3; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--colour-Secondary2); color: var(--colour-SiteInk); content: '\2713'; font-size: 2.25rem; font-weight: bold; line-height: 1; } html.Site .CheckoutSuccess .SuccessBlock.Success h1, html.Site .CheckoutSuccess .SuccessBlock.Success .Content { grid-column: 2; } html.Site .CheckoutSuccess .SuccessBlock.Success h1 { align-self: end; margin-bottom: 0.75rem; } html.Site .CheckoutSuccess .SuccessBlock.Success .Content p { margin: 0 0 1.2rem; } html.Site .CheckoutSuccess .SuccessBlock.Success .Content p:last-child { margin-bottom: 0; } html.Site .CheckoutSuccess .SuccessBlock.Details { margin-bottom: 0; padding: 1.75rem 1.5rem; border-color: var(--colour-PricingPurpleBorder); background: var(--colour-PricingPurplePale); } html.Site .CheckoutSuccess .SuccessBlock.Details h1 { margin-bottom: 1.5rem; } html.Site .CheckoutSuccess .SuccessBlock.Details p.StrongItem { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; max-width: 32rem; margin: 0 0 0.45rem; color: var(--colour-SiteInk); font-size: 1rem; line-height: 1.4; } html.Site .CheckoutSuccess .SuccessBlock.Details p.StrongItem .Legend { width: auto; color: var(--colour-SiteInk); } html.Site .CheckoutSuccess .SuccessBlock.Details p.StrongItem strong { color: var(--colour-SiteInk); font-weight: bold; overflow-wrap: anywhere; } @media (width < 700px) { html.Site .CheckoutSuccess { width: calc(100% - 3rem); } html.Site .CheckoutSuccess .SuccessBlock.Success { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; } html.Site .CheckoutSuccess .SuccessBlock.Success:before { width: 4.5rem; height: 4.5rem; font-size: 2rem; } } @media (width < 576px) { html.Site .CheckoutSuccess { width: calc(100% - 2rem); padding: 1.25rem 0; } html.Site .CheckoutSuccess .SuccessBlock { margin-bottom: 1rem; padding: 1.25rem; } html.Site .CheckoutSuccess .SuccessBlock.Success { display: block; padding: 1.25rem; } html.Site .CheckoutSuccess .SuccessBlock.Success:before { width: 4rem; height: 4rem; margin-bottom: 1rem; } html.Site .CheckoutSuccess .SuccessBlock.Success h1 { margin-bottom: 0.75rem; } html.Site .CheckoutSuccess .SuccessBlock.Details { padding: 1.25rem; } html.Site .CheckoutSuccess .SuccessBlock.Details p.StrongItem { grid-template-columns: 1fr; gap: 0.15rem; margin-bottom: 0.8rem; } }