/**
* Based on
*
* - reset.css 2.0 by Eric Meyer
(public domain)
* http://meyerweb.com/eric/tools/css/reset/
*
* - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal
* (licensed under MIT)
* https://github.com/necolas/normalize.css
*
* - Reboot from Bootstrap 4.5.3
* (licensed under MIT)
* https://github.com/twbs/bootstrap
*/
/**
* IE10+ doesn't honor `` elements.
*/
body {
/* 1 */
line-height: 1;
/* 2 */
font-family: sans-serif;
/* 3 */
text-align: left;
}
/**
* Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
* on elements that programmatically receive focus but wouldn't normally show a visible
* focus outline. In general, this would mean that the outline is only applied if the
* interaction that led to the element receiving programmatic focus was a keyboard interaction,
* or the browser has somehow determined that the user is primarily a keyboard user and/or
* wants focus outlines to always be presented.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
* and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
*/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
/**
* Lists
*/
ol,
ul {
list-style: none;
}
/**
* Quotes
*/
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: '';
content: none;
}
/**
* Tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
caption-side: bottom;
}
/**
* Table Headers
* 1. Matches default ` ` alignment by inheriting from the ``, or the
* closest parent with a set `text-align`.
* 2. Fix alignment for Safari
*/
th {
/* 1 */
text-align: inherit;
/* 2 */
text-align: -webkit-match-parent;
}
/**
* Horizontal Lines
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
/* 1 */
box-sizing: content-box;
height: 0;
/* 2 */
overflow: visible;
}
/**
* Preformatted Text
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Don't allow content to break outside
* 3. We have @viewport set which causes scrollbars to overlap content in IE11
* and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to
* counteract.
*/
pre,
code,
kbd,
samp {
/* 1 */
font-family: monospace, monospace;
}
pre {
/* 2 */
overflow: auto;
/* 3 */
-ms-overflow-style: scrollbar;
}
/**
* Links
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
/* 1 */
background-color: transparent;
/* 2 */
-webkit-text-decoration-skip: objects;
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
* 3. Add explicit cursor to indicate changed behavior.
* 4. Prevent the text-decoration to be skipped.
*/
abbr[title] {
/* 1 */
border-bottom: 0;
/* 2 */
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 3 */
cursor: help;
/* 4 */
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
font-style: normal;
line-height: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/**
* Prevent `em` being affected from global reset
*/
em {
font-style: italic;
}
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/**
* Hide SVG overflow in IE
*/
svg:not(:root) {
overflow: hidden;
}
/**
* Remove the default `border-radius` that macOS Chrome adds.
* Details at https://github.com/twbs/bootstrap/issues/24093
*/
button {
border-radius: 0;
}
/**
* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
* Credit: https://github.com/suitcss/base/
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
/**
* form element resets
* 1. Remove the margin in Firefox and Safari
* 2. inherit font rules
*/
input,
button,
select,
optgroup,
textarea {
/* 1 */
margin: 0;
/* 2 */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="reset"],
[type="submit"],
[type="button"] {
/* 2 */
-webkit-appearance: button;
}
/**
* Remove the default appearance of temporal inputs to avoid a Mobile Safari
* bug where setting a custom line-height prevents text from being vertically
* centered within the input.
* See https://bugs.webkit.org/show_bug.cgi?id=139848
* and https://github.com/twbs/bootstrap/issues/11266
*/
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
/**
* 1. Remove the default vertical scrollbar in IE.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
overflow: auto;
resize: vertical;
}
/**
* Show the overflow in IE.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button,
select {
text-transform: none;
}
/**
* Set the cursor for non-`` buttons
* Details at https://github.com/twbs/bootstrap/pull/30562
*/
[role="button"] {
cursor: pointer;
}
/**
* Remove the inheritance of word-wrap in Safari.
* See https://github.com/twbs/bootstrap/issues/24990
*/
select {
word-wrap: normal;
}
/**
* Remove inner border and padding from Firefox, but don't restore the outline
* like Normalize.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* 1. Add the correct box sizing in IE 10-
* 2. Remove the padding in IE 10-
*/
input[type="radio"],
input[type="checkbox"] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0;
}
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
* Credit: https://github.com/suitcss/base
*/
[tabindex="-1"]:focus {
outline: 0 !important;
}
/**
* Browsers set a default `min-width: min-content` on fieldsets,
* unlike e.g. ``s, which have `min-width: 0` by default.
* So we reset that to ensure fieldsets behave more like a standard block element.
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
fieldset {
min-width: 0;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Set display to block for all browsers
*/
legend {
/* 1 */
max-width: 100%;
white-space: normal;
/* 2 */
color: inherit;
/* 3 */
display: block;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* 1. Remove the default vertical scrollbar in IE 10+.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
/* 1 */
overflow: auto;
/* 2 */
resize: vertical;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
/* 1 */
-webkit-appearance: textfield;
/* 2 */
outline-offset: -2px;
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
/* 1 */
-webkit-appearance: button;
/* 2 */
font: inherit;
}
/**
* Correct element display for output
*/
output {
display: inline-block;
}
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Always hide an element with the `hidden` HTML attribute (from PureCSS).
* Needed for proper display in IE 10-.
*/
[hidden] {
display: none;
}
/*
variables.less
*/
/* Breakpoints used in layouts */
/* Font sizes based on standard browser font size of 16px */
/* 20px */
/* 18px */
/* 16px */
/* 14px */
/* 12px */
/*
mixins.less
*/
/*
common.less
*/
/* prevent wrapping at whitespace - used in span for postcodes, telephone numbers etc */
.no-break {
white-space: nowrap;
}
a {
color: #e50846;
font-weight: bold;
}
a:hover {
color: black;
}
svg {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
.overflow-wrap {
overflow-wrap: break-word;
}
.disabled {
pointer-events: none;
cursor: default;
}
.show {
display: block;
}
.hide {
display: none;
}
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
.icon {
width: 24px;
height: 24px;
display: inline-block;
}
.bullet-list {
list-style-type: disc;
}
.margin-left-25px {
margin-left: 25px;
}
.margin-left-12px {
margin-left: 12px;
}
.margin-left-8px {
margin-left: 8px;
}
.inline {
display: inline;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-space-between {
display: flex;
justify-content: space-between;
}
.flex-grow-1 {
flex-grow: 1;
}
.max-width-fit-parent {
max-width: 100%;
}
.default-margin-left {
margin-left: 0.5rem;
}
.context-assistance {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
/*
siteLayout.less
The main layout containers for the site are
#pageHeader
#bodyContent
#navContent
#mainContent
#helpContent
#pageFooter
*/
body {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
box-sizing: border-box;
line-height: 1.5em;
}
#bodyContent {
position: relative;
width: 100%;
flex: 1 0 auto;
}
#mainContent {
margin: 0.3rem;
}
#pageFooter {
flex-shrink: 0;
}
#helpContent {
margin: 0.3rem;
}
#helpContent details:last-child {
margin-bottom: 0;
}
#threeDsWindow {
height: 400px;
width: 100%;
}
@media only screen and (min-width: 768px) {
#bodyContent.unauthenticated {
display: -ms-grid;
-ms-grid-columns: 1px 2fr 1fr;
display: grid;
grid-template-columns: 1px 2fr 1fr;
}
#bodyContent.unauthenticated > #navContent {
grid-column: 1;
}
#bodyContent.unauthenticated > #mainContent {
grid-column: 2;
margin: 0.6rem 0.3rem;
}
#bodyContent.unauthenticated > #helpContent {
grid-column: 3;
margin: 0.6rem 0.3rem;
}
#bodyContent.customer-layout {
display: -ms-grid;
-ms-grid-columns: 1px 2fr 1fr;
display: grid;
grid-template-columns: 1px 2fr 1fr;
}
#bodyContent.customer-layout > #navContent {
grid-column: 1;
}
#bodyContent.customer-layout > #mainContent {
grid-column: 2;
margin: 0.6rem 0.3rem;
}
#bodyContent.customer-layout > #helpContent {
grid-column: 3;
margin: 0.6rem 0.3rem;
}
#bodyContent.account-layout {
display: -ms-grid;
-ms-grid-columns: 1fr 2fr;
display: grid;
grid-template-columns: 1fr 2fr;
}
#bodyContent.account-layout > #navContent {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-column: 1;
grid-row: 1 / span 2;
margin: 0.6rem 0.3rem;
}
#bodyContent.account-layout > #mainContent {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
margin: 0.6rem 0.3rem;
}
#bodyContent.account-layout > #helpContent {
-ms-grid-column: 2;
-ms-grid-row: 2;
grid-column: 2;
grid-row: 2;
margin: 0.6rem 0.3rem;
}
#threeDsWindow {
height: 400px;
width: 100%;
}
}
@media only screen and (min-width: 992px) {
#bodyContent.unauthenticated {
display: -ms-grid;
-ms-grid-columns: 1fr 4fr 2fr 1fr;
display: grid;
grid-template-columns: 1fr 4fr 2fr 1fr;
}
#bodyContent.unauthenticated > #navContent {
grid-column: 1;
}
#bodyContent.unauthenticated > #mainContent {
grid-column: 2;
}
#bodyContent.unauthenticated > #helpContent {
grid-column: 3;
}
#bodyContent.customer-layout {
display: -ms-grid;
-ms-grid-columns: 1fr 4fr 2fr 1fr;
display: grid;
grid-template-columns: 1fr 4fr 2fr 1fr;
}
#bodyContent.customer-layout > #navContent {
grid-column: 1;
}
#bodyContent.customer-layout > #mainContent {
grid-column: 2;
}
#bodyContent.customer-layout > #helpContent {
grid-column: 3;
}
#bodyContent.account-layout {
display: -ms-grid;
-ms-grid-columns: 1fr 2fr 1fr;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
#bodyContent.account-layout > #navContent {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-row: 1;
}
#bodyContent.account-layout > #mainContent {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
}
#bodyContent.account-layout > #helpContent {
-ms-grid-column: 3;
-ms-grid-row: 1;
grid-column: 3;
grid-row: 1;
}
#threeDsWindow {
height: 600px;
width: 500px;
}
}
/*
pageHeader.less
*/
#pageHeader {
width: 100%;
min-height: 2rem;
background-color: #fff;
}
#banner {
text-align: left;
}
#banner img {
margin-top: 0.5rem;
max-height: 4rem;
}
#banner img {
margin-left: 0.5rem;
}
/*
footer.less
*/
#pageFooter {
text-align: left;
line-height: 1rem;
color: #ffffff;
background-color: #ec627e;
padding: 0.5em;
border-top: solid 4px black;
}
#pageFooter ul {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0.3rem;
}
#pageFooter ul li {
font-size: 0.875rem;
width: auto;
padding-bottom: 0.6rem;
}
#pageFooter ul a {
color: #ffffff;
text-decoration: none;
font-size: 0.875rem;
}
#pageFooter p {
font-size: 0.75rem;
margin-bottom: 0.3rem;
}
@media screen and (min-width: 768px) {
#pageFooter {
text-align: left;
}
#pageFooter ul {
flex-direction: row;
justify-content: center;
margin-bottom: 0.6rem;
}
#pageFooter ul li {
padding-right: 0.5rem;
padding-bottom: 0;
}
#pageFooter ul li + li {
padding-left: 0.5rem;
border-left: solid 1px #ffffff;
}
#pageFooter ul {
justify-content: flex-start;
}
}
/*
navigation.less
*/
#siteNav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-around;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
background-color: #fff;
border-bottom: solid 0px black;
}
#siteNav > li {
width: 30%;
}
.menu-container {
display: block;
text-align: center;
}
.menu-container > a {
border: none;
background-color: #fff;
color: #000;
font-size: 1rem;
font-weight: bold;
line-height: normal;
text-transform: uppercase;
}
.menu-container > a span {
display: block;
cursor: pointer;
}
.menu-container > a svg {
height: 1.4rem;
width: 1.4rem;
}
/* Position menus below the menu bar visually hidden */
.nav-menu {
display: block;
position: absolute;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
width: 90%;
margin-left: 5%;
left: 0;
z-index: 2;
text-align: center;
background-color: #e7e7e8;
border: solid 2px black;
border-radius: 0px;
box-shadow: 1px 1px 5px 6px #fff;
margin-top: 0.8rem;
}
.nav-menu a {
text-decoration: none;
color: #000;
font-weight: normal;
text-transform: none;
display: block;
width: 100%;
padding: 0.5rem 0;
padding-right: 0.5rem;
}
.nav-menu .menu-separator {
border-top: solid 2px black;
}
.nav-menu h4 {
background-color: #e50846;
color: #ffffff;
border-top: solid 2px black;
font-size: 1rem;
font-weight: bold;
padding: 0.5rem;
text-transform: none;
}
/* Reveal the menu when it's button has focus */
#siteNav > li > div > a:focus ~ ul {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
}
/* Or any of the links within the menu have focus */
#siteNav > li:focus-within > div > ul {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
}
.nav-menu a:hover {
background-color: #fb8baa;
}
@media only screen and (min-width: 768px) {
/* Menus relative to their position in the menu bar */
#contactNav,
#profileNav,
#accountsNav {
position: relative;
}
/* Width relative to parent nav bar item*/
.nav-menu {
width: 100%;
margin-left: 0;
}
}
@media only screen and (min-width: 992px) {
/* Remove the jump to Contact Details menu item on large view */
#contactMenu .menu-separator {
display: none;
}
#contactMenu a[href="#contactDetails"] {
display: none;
}
}
/* Class added by javascript for IE polyfill */
.menu-revealed {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
}
/*
AccountHeader.less
*/
#accountHeader {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e50846;
}
#accountHeader > div {
color: #ffffff;
padding: 0.5rem;
}
#accountHeader > div > span:first-child {
font-weight: bold;
}
#accountNav {
min-width: 6rem;
margin-right: 0.3rem;
}
#accountNav span {
color: #ffffff;
font-size: 0.75rem;
}
#accountNavButton svg {
height: 2em;
width: 2em;
margin: 0.6rem;
margin-bottom: 0.2rem;
}
#accountNavButton svg path {
fill: #ffffff;
}
/* Reveal the menu when it's button has focus */
#accountNav > a:focus ~ ul {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
}
/* Or any of the links within the menu have focus */
#accountNav:focus-within > ul {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
}
@media only screen and (min-width: 768px) {
#accountHeader {
justify-content: flex-start;
border: solid 1px black;
border-bottom: none;
border-radius: 0px;
border-bottom-left-radius: 0px;
margin: 0.4rem;
margin-bottom: 0px;
}
#accountHeaderAddress {
display: inline;
}
#accountNav {
min-width: 1px;
}
/* Hide the button from the banner */
#accountNavButton {
visibility: hidden;
position: relative;
}
/* Make the menu visible and positioned over the left hand column */
#accountMenu {
clip: auto;
clip-path: none;
height: auto;
overflow: auto;
white-space: inherit;
border: solid 1px black;
background-color: #fff;
width: 32%;
margin: 0;
z-index: 1;
left: 0.4rem;
margin-top: 0;
text-align: left;
padding: 0;
box-shadow: none;
border-top: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
#accountMenu a {
padding-left: 1rem;
}
#accountMenu h4 {
border-top: none;
}
}
@media only screen and (min-width: 992px) {
#accountMenu {
width: 24%;
}
}
/*
pageHelp.less
*/
#contactDetails {
border: solid 1px black;
border-radius: 0px;
background-color: #fff;
margin-bottom: 0.6rem;
overflow: hidden;
/* prevent background colour from overlapping rounded borders */
}
#contactDetails summary {
background-color: #fff;
color: #e50846;
font-weight: bold;
font-size: 1.125rem;
padding: 0.5rem;
}
#contactDetails > div {
text-align: center;
padding: 0.5rem;
border-top: solid 1px black;
}
#contactDetails div {
margin-top: 0.5rem;
}
#contactDetails .phone-number-link {
background-color: #e50846;
color: #000;
padding: 6px;
border-radius: 0px;
text-decoration: none;
}
#contactDetails svg {
width: 0.8rem;
height: 0.8rem;
padding-right: 0.3rem;
}
#contactDetails table {
width: 100%;
margin-top: 0.5rem;
}
#contactDetails table .opening-day {
max-width: 35%;
font-weight: bold;
}
#contactDetails table .opening-hour-start,
#contactDetails table .opening-hour-end {
max-width: 31%;
}
#contactDetails table .opening-hour-separator {
max-width: 3%;
}
.help-item {
border: solid 1px black;
border-radius: 0px;
background-color: #fff;
background-color: white;
overflow: hidden;
margin-bottom: 0.6rem;
}
.help-item summary {
background-color: #e50846;
color: #ffffff;
padding: 0.5rem;
}
.help-item > div {
padding: 0.5rem;
margin-top: 0.5rem;
}
/*
notificationBanner.less
*/
.notification-banner {
padding: 12px;
line-height: 1.3em;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.notification-banner.success {
background-color: #E1E8CC;
color: #4F504D;
}
.notification-banner.warn {
background-color: #FFD633;
color: black;
}
.notification-banner.failure {
background-color: #DC3545;
color: white;
}
.notification-banner.info {
background-color: #33CCFF;
color: black;
}
.notification-banner > p {
margin-bottom: 0.6rem;
}
.notification-banner > p:last-of-type {
margin-bottom: 0;
}
/*
progressBar.less
*/
#progressBar {
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
margin-top: 0.5rem;
}
#progressBar li {
width: 25%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.step-indicator {
text-align: center;
height: 2rem;
width: 2rem;
line-height: 2rem;
margin-left: auto;
margin-right: auto;
border: 1px #e50846 solid;
border-radius: 50%;
color: #ffffff;
background-color: #e50846;
font-size: 1.125rem;
}
.step-label {
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
padding: 0.3rem;
}
.current-step .step-indicator {
background-color: #e50846;
color: #ffffff;
border-color: #e50846;
}
.current-step .step-label {
font-weight: bold;
}
.completed-step .step-indicator {
background-color: #739600;
color: #ffffff;
border-color: #739600;
}
.incomplete-step .step-indicator {
background-color: #DC3545;
color: #ffffff;
border-color: #DC3545;
}
.disabled-step .step-indicator {
background-color: gray;
color: white;
border-color: #e50846;
}
/*
mainContent.less
*/
#jumpToMain {
position: absolute;
z-index: 1;
color: #000;
background-color: #fff;
padding: 0.5rem;
}
#jumpToMain:not(:focus) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
#mainContent hr {
margin-top: unset;
margin-bottom: unset;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
#contentHeader h1 {
color: #e50846;
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.content-panel {
border: solid 1px black;
border-radius: 0px;
background-color: #fff;
padding: 0.5rem;
}
.supplementary-text {
padding: 0.5rem;
}
.supplementary-text > p {
margin-bottom: 0.6rem;
}
.supplementary-text > p:last-of-type {
margin-bottom: 0;
}
.secondary-text {
margin: 0.5rem;
}
.required-text {
display: block;
margin: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
color: grey;
}
.required-text::before {
content: "* ";
color: #DC0000;
font-weight: 600;
}
.section-title {
color: #e50846;
font-size: 1.125rem;
/*line-height: 18px;*/
font-weight: 600;
margin-top: 0.6rem;
}
.title-text {
font-size: 1.25rem;
font-weight: 600;
color: black;
}
.title-text + .subtitle-text {
margin-top: 6px;
}
.subtitle-text {
font-size: 16px;
color: #404040;
}
.subtitle-large-text {
font-size: 18px;
color: #404040;
}
.warning-text {
color: red;
font-weight: bold;
}
/*
account list less
*/
#accountList a {
text-decoration: none;
}
.account-link-container {
border: solid 1px #e50846;
border-radius: 0px;
background-color: #fff;
color: #e50846;
overflow: hidden;
margin: 0.6rem;
padding: 0.4rem;
}
.account-link-container a {
color: #000;
font-weight: normal;
text-decoration: none;
}
.account-link-title {
color: #e50846;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
.account-link {
display: inline-block;
font-weight: normal;
color: #000;
text-decoration: none;
}
.account-details-section {
width: 95%;
display: inline-block;
}
.account-details-notification {
width: 5%;
display: inline-block;
float: right;
text-align: right;
}
/*
forms.less
*/
.field-container {
margin: 0.5rem;
/* Check boxes */
/* Radio buttons */
/* Other selects */
}
.field-container label {
display: block;
margin-top: 0.6rem;
color: black;
}
.field-container label.selectableInput {
margin-top: 0px;
}
.field-container .field-hint {
color: gray;
}
.field-container .form-input {
line-height: 1.5rem;
position: relative;
}
.field-container .form-input input {
border: 1px solid gray;
border-radius: 0px;
min-height: 3rem;
height: 3rem;
width: 100%;
padding-left: 0.5rem;
font-weight: bold;
}
.field-container .form-input input:focus {
border-width: 2px;
border-color: #e50846;
outline-color: #e50846;
}
.field-container .form-input input:hover {
border-width: 2px;
}
.field-container .form-input input::-moz-placeholder {
color: lightgray;
}
.field-container .form-input input::placeholder {
color: lightgray;
}
.field-container .form-input .input-small {
width: 50%;
}
.field-container .form-input .input-prefix {
position: absolute;
display: block;
transform: translate(0.5rem, -50%);
top: 50%;
pointer-events: none;
text-align: center;
font-weight: bold;
}
.field-container .form-input span.input-prefix ~ input {
padding-left: 1.3rem;
}
.field-container .field-validation-valid {
display: none;
}
.field-container .field-validation-error {
line-height: 1.5rem;
margin-top: 0.3rem;
padding: 0.6rem;
border: 1px solid #DC0000;
border-radius: 0px;
background-color: rgba(255, 0, 0, 0.1);
color: #DC0000;
}
.field-container .checkbox-input {
border: 1px solid #707070;
border-radius: 0px;
padding: 10px;
cursor: pointer;
min-height: 48px;
vertical-align: middle;
position: relative;
z-index: 0;
/* background div positioned "behind" the checkbox container */
}
.field-container .checkbox-input > .checkbox-background {
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: inherit;
}
.field-container .checkbox-input:hover {
background-color: #fb8baa;
border-color: #e50846;
}
.field-container .checkbox-input input {
margin-right: 0.5rem;
}
.field-container .checkbox-input input:checked ~ .checkbox-background {
background-color: #e50846;
}
.field-container .checkbox-input input:checked ~ span {
color: #ffffff;
font-weight: bold;
}
.field-container .radio-group .radio-option {
border: 1px solid #707070;
border-radius: 0px;
padding: 10px;
cursor: pointer;
min-height: 48px;
vertical-align: middle;
position: relative;
z-index: 0;
/* background div positioned absolutely "behind" the radio option container */
}
.field-container .radio-group .radio-option > .radio-background {
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: inherit;
}
.field-container .radio-group .radio-option:hover {
background-color: #fb8baa;
border-color: #e50846;
}
.field-container .radio-group .radio-option input {
margin-right: 0.5rem;
height: 1.1rem;
width: 1.1rem;
vertical-align: text-bottom;
}
.field-container .radio-group .radio-option input:checked ~ .radio-background {
background-color: #e50846;
}
.field-container .radio-group .radio-option input:checked ~ span {
color: #ffffff;
font-weight: bold;
}
.field-container .selectableInput-container {
display: flex;
flex-direction: column;
}
.field-container .selectableInput-container .selectableInput {
border: 1px solid #707070;
border-radius: 0px;
padding: 10px;
cursor: pointer;
display: flex;
position: relative;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-height: 48px;
vertical-align: middle;
}
.field-container .selectableInput-container .selectableInput:nth-child(n + 2) {
margin-top: 10px;
}
.field-container .selectableInput-container .selectableInput:hover {
background-color: #fb8baa;
border-color: #e50846;
}
.field-container .selectableInput-container .selectableInput .selectableInputBg {
background-color: #e50846;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: inherit;
display: none;
}
.field-container .selectableInput-container .selectableInput .selectableInput-input {
position: relative;
top: 4px;
cursor: inherit;
height: 18px;
width: 36px;
margin-right: 6px;
}
.field-container .selectableInput-container .selectableInput .selectableInput-input:checked ~ .selectableInputBg {
display: block;
}
.field-container .selectableInput-container .selectableInput .selectableInput-input:checked ~ span {
color: #ffffff;
font-weight: bold;
}
.field-container .selectableInput-container .selectableInput span {
color: #000;
margin-top: 3px;
}
@media screen and (min-width: 768px) {
.field-container .form-input .input-small {
width: 25%;
}
.field-container .form-input .input-medium {
width: 50%;
}
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
/*
buttons.less
*/
.one-button-cta-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.5rem;
}
.one-button-cta-container .button + .button {
margin-top: 0.6rem;
}
.two-button-cta-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.5rem;
}
.two-button-cta-container .button + .button {
margin-top: 0.6rem;
}
.multi-button-cta-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.5rem;
}
.multi-button-cta-container .button + .button {
margin-top: 0.6rem;
}
@media screen and (min-width: 768px) {
.one-button-cta-container {
flex-direction: column;
align-items: baseline;
}
.one-button-cta-container .button + .button {
margin-top: inherit;
}
.two-button-cta-container {
flex-direction: row-reverse;
align-items: baseline;
}
.two-button-cta-container .button + .button {
margin-top: inherit;
}
.multi-button-cta-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
flex-wrap: wrap;
}
.multi-button-cta-container .button + .button {
margin-top: inherit;
margin-right: 2rem;
}
}
/*.input-block {
.button {
height: 3rem;
}
}*/
a.button {
text-decoration: none;
}
.button {
display: flex;
align-items: center;
justify-content: center;
font-family: Arial;
height: 3rem;
line-height: 23px;
font-weight: normal;
cursor: pointer;
color: #ffffff;
background-color: #e50846;
border: 1px solid #e50846;
border-radius: 0px;
padding: 12px 16px 12px 16px;
}
.button svg {
height: 1em;
width: 1em;
margin-right: 0.5em;
}
.button svg path {
fill: #ffffff;
}
.button .right {
margin-left: 0.5em;
}
.button .left {
margin-right: 0.5em;
}
.button:hover {
background-color: #fb8baa;
}
.button-icon {
height: 24px;
width: 24px;
}
/*.left-icon-margin {
margin-right: 8px;
}
.right-icon-margin {
margin-left: 8px;
}*/
.button-image {
padding: 12px 10px 12px 16px;
}
.btn-primary {
color: #ffffff;
background: #e50846;
}
.btn-primary svg path {
fill: #ffffff;
}
.btn-primary:hover {
background-color: #fb8baa;
}
.btn-primary:disabled {
background-color: rgba(229, 8, 70, 0.4);
cursor: not-allowed;
}
.field-container {
margin: 0.5rem;
line-height: 1.5rem;
/*.field-label {
display: block;
margin-bottom: 10px;
color: @inputLabelColour;
}*/
}
.field-container .field-hint {
color: gray;
}
.field-help-container .field-help-trigger {
display: none;
}
.field-help-container .field-help-trigger:checked ~ .field-help-control {
display: none;
}
.field-help-container .field-help-trigger:checked ~ .field-help {
display: block;
}
.field-help-container .field-help-control {
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.field-help-container .field-help-control-icon {
display: block;
width: 24px;
height: 24px;
}
.field-help-container .pull-right {
float: right;
}
.field-help-container .field-help {
display: none;
padding: 12px;
border: 1px solid lightyellow;
background-color: lightgoldenrodyellow;
}
.required .field-label::after {
content: " *";
color: #DC0000;
font-weight: 600;
}
.disabled {
opacity: 0.4;
}
.disabled .input-container {
border-width: 1px !important;
}
.disabled [disabled] {
background-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.readonly .input-container {
border-width: 1px !important;
border-style: dashed !important;
}
.readonly .input-container .input-field {
font-weight: 600;
cursor: default;
}
.readonly [readonly] {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.input-block .single-input-container {
display: flex;
flex-direction: row;
align-items: center;
min-height: 48px;
height: 48px;
}
.input-block .single-input-container .single-input {
margin-right: 4px;
width: 12.5%;
min-width: 30px;
max-width: 48px;
height: 48px;
min-height: 48px;
border-radius: 0px;
border: 1px solid gray;
text-align: center;
}
.input-block .single-input-container .single-input::-moz-placeholder {
color: lightgray;
}
.input-block .single-input-container .single-input::placeholder {
color: lightgray;
}
.input-block .input-container {
background-color: #f0f0f0;
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: center;
border: 1px solid gray;
border-radius: 0px;
min-height: 48px;
height: 48px;
}
.input-block .input-container .input-field {
font-weight: 600;
}
.input-block .input-container:focus-within {
border-width: 2px;
border-color: #e50846;
}
.input-block .input-container.readonly {
border-width: 1px !important;
border-style: dashed !important;
}
.input-block .input-container.readonly .input-field {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.input-block .input-container.readonly [readonly] {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.input-block .input-container:hover {
border-width: 2px;
}
.input-block .input-container.field-type-base.field-type-cc {
width: 230px;
}
.input-block .input-container.field-type-base.field-type-date {
width: 80px;
}
.input-block .input-container.field-type-base.field-type-ccv {
width: 50px;
}
.input-block .input-container.field-type-base.field-type-ccv .input-field {
text-align: center;
}
.input-block .input-container.field-type-base.field-type-postcode {
width: 90px;
}
.input-block .input-container.field-type-base.field-type-halfSize {
width: 170px;
}
.input-block .input-container.field-type-base.field-type-quarterSize {
width: 85px;
}
.input-block .input-container.field-type-base .input-field {
width: 100%;
padding-right: 10px !important;
}
.input-block .input-container.has-prefix .input-prefix {
padding-right: 5px;
}
.input-block .input-container.has-prefix .input-field {
padding-left: 5px;
}
.input-block .input-container.has-suffix .input-field {
padding-right: 39px;
}
.input-block .input-container.has-suffix .input-suffix {
padding-left: 5px;
}
.input-block .input-container .input-prefix,
.input-block .input-container .input-field,
.input-block .input-container .input-suffix {
display: inline-block;
padding: 0 10px;
margin: 0;
font-size: inherit;
}
.input-block .input-container .input-prefix {
flex: none;
}
.input-block .input-container .input-field {
flex: auto;
border: none;
border-radius: 4px;
width: 100%;
height: 100%;
}
.input-block .input-container .input-field:focus {
outline-color: #e50846;
}
.input-block .input-container .input-field::-moz-placeholder {
color: lightgray;
}
.input-block .input-container .input-field::placeholder {
color: lightgray;
}
.input-block .input-container .input-suffix {
flex: none;
}
.input-block .field-validation-container {
display: none;
margin-top: 10px;
padding: 16px 10px;
border: 1px solid #DC0000;
border-radius: 0px;
background-color: rgba(255, 0, 0, 0.1);
font-size: 1rem;
line-height: 18px;
color: #DC0000;
}
.input-block .field-validation-container.has-validation-message {
display: flex;
}
.input-block .field-validation-container .field-validation-icon {
flex: none;
width: 24px;
height: 24px;
}
.input-block .cc-input-field-icon {
width: 50px;
margin: 5px;
}
.process-step .field-wrapper {
display: flex;
align-items: center;
}
.process-step .field-wrapper .readonly-field {
border-radius: 4px;
margin-left: 0.5rem;
font-weight: 600;
}
.process-step .field-wrapper .readonly-field img {
width: 45px;
margin: 2px;
}
.process-step .field-wrapper .readonly-field .text {
margin: 6px;
}
.process-step .field-wrapper .field-container label {
font-weight: 500;
}
label.required:after {
content: " *";
color: #DC0000;
}
.smallLinkText {
font-size: 0.75rem;
}
/*@import "~/../Styles/common/_mixins.less";*/
/*@import "~/../Styles/_branding.less";*/
.process-step {
font-size: 1rem;
font-weight: normal;
line-height: 1.5rem;
}
.process-step .field-columns-container .expiry-date-input ~ .field-main-column {
grid-column: 1/2;
}
.process-step .field-columns-container .security-code-input ~ .field-main-column {
grid-column: 1/2;
}
.process-step .field-columns-container .post-code-input ~ .field-main-column {
grid-column: 1/2;
}
.process-step .field-columns-container .input-block.field-main-column {
grid-column: 1/3;
}
/*@import "~/../Styles/common/_mixins.less";*/
/*@import "~/../Styles/_branding.less";*/
.validation-summary {
display: flex;
margin-top: 10px;
padding: 16px 10px;
border: 1px solid #DC0000;
border-radius: 4px;
background-color: #ffdcdc;
font-size: 1rem;
line-height: 18px;
color: #DC0000;
}
.validation-summary .validation-summary-content-container {
margin-left: 10px;
}
.validation-summary .validation-summary-content-container p:nth-last-of-type(n+2) {
margin-bottom: 10px;
}
.validation-summary .validation-summary-errors {
padding: 0 10px;
}
/*
Authentication.less
*/
.terms-info {
display: block;
margin: 0.5rem;
}
.passcode-index {
padding-right: 0.5rem;
margin-left: 1rem;
}
@media screen and (max-width: 768px) {
.passcode-index:first-of-type {
margin-left: 0;
}
}
#passcodeInput {
margin-left: -0.6rem;
margin-right: -0.6rem;
}
.passcode-input {
border: 1px solid gray;
border-radius: 0px;
min-height: 3rem;
height: 3rem;
width: 2.8rem;
padding-left: 0.8rem;
}
.passcode-input:focus-within {
border-width: 2px;
border-color: #e50846;
}
.passcode-input:focus {
outline-color: transparent;
}
@media screen and (min-width: 326px) {
#passcodeInput {
margin-left: 0;
margin-right: 0;
}
}
.complexity-rules {
margin: 1rem;
}
.complexity-rules svg {
height: 12px;
margin-right: 0.8em;
}
.complexity-rules li {
font-size: 0.875rem;
}
.complexity-rules li.valid {
color: #739600;
}
.complexity-rules li.valid svg path {
fill: #739600;
}
.complexity-rules li.invalid {
color: #DC0000;
}
.complexity-rules li.invalid svg path {
fill: #DC0000;
}
/*
cookieConsent.less
*/
/* Take up full height & width over top of all other content (z-index = 999) */
#screen-overlay {
z-index: 999;
position: fixed;
height: 100%;
width: 100%;
background-color: #e50846;
opacity: 0.75;
}
/* Display over top of overlay (z-index = 1000) */
#cookieConsentContainer {
background-color: #e50846;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1000;
width: 100%;
position: fixed;
padding: 12px;
}
#cookieConsentContainer #cookieConsentButton {
max-height: 48px;
margin: 0.5rem;
}
#cookieConsentContainer .cookieConsentText {
margin: 12px 12px;
}
#cookieConsentContainer a {
color: #ffffff;
cursor: pointer;
}
#cookieConsentContainer .btn-secondary {
color: #ffffff;
}
@media screen and (min-width: 576px) {
#cookieConsentContainer {
flex-direction: row;
}
}
/*
serviceAnnouncement.less
*/
.service-announcement {
border: solid 1px black;
border-radius: 0px;
background-color: #fff;
margin-bottom: 0.5rem;
overflow: hidden;
}
.service-announcement h1 {
background-color: #e50846;
color: #ffffff;
padding: 0.5rem;
font-size: 1.25rem;
}
.service-announcement div {
padding: 0.5rem;
}
/*
mortgageSummary.less
*/
#mortgageSummary {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
#mortgageSummary hr {
margin-left: 0;
margin-right: 0;
}
.mortgage-header {
padding: 0.5rem;
background-color: #e50846;
color: #fff;
}
#dd-details {
margin-top: 0.8rem;
}
#paymentAction {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0.5rem;
}
/* Ensure space below text when action button wraps below */
#paymentAction > div {
margin-bottom: 0.5rem;
}
#summaryBalances {
display: flex;
flex-direction: row;
justify-content: left;
margin: 0.5rem;
}
#summaryBalances > div {
flex: 1;
}
#summaryBalances span {
display: block;
}
#lastPayment {
margin: 0.5rem;
}
#mortgageAccounts h2 {
background-color: #e50846;
color: #fff;
font-size: 0.875rem;
font-weight: normal;
padding: 0.4rem 0.5rem;
margin: 0;
}
.mortgage-account {
border-bottom: solid 1px black;
padding: 0.5rem;
}
.mortgage-account:last-child {
border-bottom: none;
}
.account-header {
width: calc(100% - 20px);
display: inline-flex;
justify-content: space-between;
}
.account-detail {
padding-top: 0.4rem;
}
.account-detail > div {
padding-top: 0.8rem;
}
.mortgage-account span {
display: block;
}
.account-label {
font-size: 0.75rem;
}
.secondary-info {
font-size: 0.875rem;
margin-left: 0.5rem;
}
.pay-amt {
font-weight: bold;
}
.amt-due {
font-size: 1.125rem;
margin-left: 0.5rem;
}
.balance-amt {
font-weight: bold;
}
.balance-red-est {
font-size: x-large;
font-weight: bold;
margin-left: 0.5rem;
}
.arrears-amt {
font-size: 1.125rem;
font-weight: bold;
}
.account-value {
margin-left: 0.5rem;
white-space: nowrap;
}
.account-value-annotation {
font-size: 0.75rem;
}
.recent-payment {
padding-left: 0.5rem;
}
.recent-payment-right {
text-align: right;
padding-left: 0.5rem;
}
.account-value-with-annotation {
width: 100%;
display: flex;
justify-content: space-between;
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.mortgage-notification {
padding: 0.5rem;
background-color: #FFD633;
color: black;
}
.mortgageNotificationTitle {
font-weight: bold;
}
.mortgageNotificationLink {
font-weight: bold;
color: #fff;
}
.mortgage-details {
color: #fff;
}
.mortgageDetailsHeader {
background-color: #e50846;
padding: 0.5rem;
color: #fff;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.accountSummaryButtonContainer {
width: 10%;
padding-top: 5px;
text-align: center;
}
.rateChangeThead {
margin: 0.5rem;
padding: 0.5rem;
color: #000;
text-align: center;
font-weight: bold;
width: 25%;
}
.rateChangeTbody {
margin: 0.5rem;
padding: 0.5rem;
color: #000;
text-align: center;
}
/*
multiFactorAuthentication.less
*/
.mfaOtpValidForMessage {
font-weight: bold;
}
.mortgage-card-container {
border: solid 1px #e50846;
border-radius: 0px;
background-color: #fff;
color: #e50846;
overflow: hidden;
margin: 0.6rem;
padding: 0.4rem;
}
.mortgage-card-header {
color: #e50846;
font-weight: bold;
}
.mortgage-card-body {
font-weight: normal;
color: #000;
}
/*
secureMessaging.less
*/
.message-thread {
border: solid 1px black;
border-radius: 0px;
background-color: #fff;
overflow: hidden;
margin-bottom: 0.6rem;
width: 100%;
}
.message-thread summary {
background-color: #e50846;
color: #fff;
padding: 0.5rem;
font-weight: bold;
}
.thread-date {
float: right;
}
.thread-link {
text-decoration: none;
font-weight: normal;
}
.message-header {
display: flex;
justify-content: space-between;
font-weight: bold;
color: #e50846;
}
.message-summary {
text-decoration: none;
font-weight: normal;
padding: 0.5rem;
color: #fff;
}
.message-summary-internal {
text-decoration: none;
font-weight: normal;
background-color: #ddd;
}
.message-body {
padding: 0.2rem 0.5rem;
color: #000;
}
.message-body-bold {
padding: 0.2rem 0.5rem;
color: #000;
font-weight: bold;
}
.unread {
font-weight: bold;
}
.btn-message {
margin: 1rem 2rem;
}
.message-controls {
display: flex;
justify-content: space-between;
}
.message-controls a {
flex: 1;
margin-right: 0px;
text-align: center;
align-items: center;
justify-content: center;
font-family: Arial;
height: 3rem;
font-weight: normal;
cursor: pointer;
text-decoration: none;
padding-top: 0.9rem;
}
.message-summary > a:hover {
background-color: red;
}
.message-controls :first-child {
border-right: 1px solid black;
}
.message-controls :last-child {
border-left: 1px solid black;
}
.message-container {
padding: 0;
}
.message-action {
font-style: italic;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
.thread-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid black;
background-color: #e50846;
color: #fff;
font-weight: bold;
padding: 0.5rem;
}
.message-content {
margin: 0.3rem;
font-family: inherit;
white-space: pre-wrap;
color: #000;
}
.thread-list li {
padding-top: 0.3rem;
}
.thread-list li:nth-child(even) {
background: #fff;
border-top: 1px dashed black;
}
.message-reason {
font-weight: bold;
}
.message-detail {
padding: 0.5rem;
}
.message-review-container {
border: solid 1px black;
margin: 0.5rem;
border-radius: 0px;
}
.thread-content {
margin: 0.5rem 0rem 0.5rem 0rem;
border: solid 1px black;
border-radius: 0px;
}
.repayment-detail-value {
margin: 0.3rem;
font-family: inherit;
white-space: pre-wrap;
color: #000;
max-height: 10rem;
}
.repayment-detail-container {
width: 100%;
}
/*
siteMap.less
*/
#sitemap {
padding: 0.5rem;
}
#sitemap .sitemap-section {
font-weight: bold;
color: #e50846;
padding-bottom: 0.8em;
}
#sitemap .sitemap-link {
font-size: 1rem;
font-weight: normal;
padding-left: 1rem;
}
.ui-datepicker {
width: 17em;
padding: 0.2em 0.2em 0;
display: none;
z-index: 1;
background-color: #fff;
border: solid 1px black;
border-radius: 0px;
}
ui-state-active {
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: 0.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 {
left: 2px;
}
.ui-datepicker .ui-datepicker-next {
right: 1.1rem;
}
.ui-datepicker .ui-datepicker-prev-hover {
cursor: pointer;
}
.ui-datepicker .ui-datepicker-next-hover {
cursor: pointer;
}
.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: 0.9em;
border-collapse: collapse;
margin: 0 0 0.4em;
}
.ui-datepicker th {
padding: 0.7em 0.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: 0.2em;
text-align: right;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: 0.7em 0 0 0;
padding: 0 0.2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: 0.5em 0.2em 0.4em;
cursor: pointer;
padding: 0.2em 0.6em 0.3em 0.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 0.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;
}
.cc-input-field-icon {
position: absolute;
transform: translate(-5rem, -50%);
top: 50%;
width: 4rem;
}
.amt-cell {
font-weight: bold;
text-align: end;
padding-right: 0.3rem;
}
.cardHolderMessage {
background-color: #fff4d6;
border: solid black 1px;
border-radius: 6px;
padding: 0.5rem;
margin: 0 0.5rem 0.5rem 0.5rem;
}
.ico-modal {
display: none;
}
.ico-modal.ico-modal-show {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
}
.ico-modal.ico-modal-show .modal-content-container {
background: white;
width: 580px;
border-radius: 4px;
}
.ico-modal.ico-modal-show .modal-content-container .modal-header {
font-family: 1rem;
font-size: 1rem;
font-weight: 700;
color: #e50846;
padding: 15px;
}
.ico-modal.ico-modal-show .modal-content-container .modal-content {
padding: 15px;
}
.ico-modal.ico-modal-show .modal-content-container .modal-footer {
display: flex;
justify-content: space-between;
padding: 15px;
}
.obfuscated-card-details {
background-color: lightgoldenrodyellow;
border: 1px solid grey;
height: 100px;
border-radius: 6px;
padding: 15px;
display: flex;
justify-content: flex-start;
}
.obfuscated-card-details .card-number-container {
margin-right: 16px;
}
.obfuscated-card-details .card-number-container .obfuscated-card-number {
display: flex;
padding: 8px;
border: 1px dashed grey;
font-size: 18px;
font-weight: 600;
}
.obfuscated-card-details .card-number-container .obfuscated-card-number img {
margin-left: 80px;
width: 40px;
}
.obfuscated-card-details .expiry-date {
padding: 8px;
border: 1px dashed grey;
font-size: 18px;
font-weight: 600;
}
.input-container.triple-height {
height: 144px;
}
.input-container.triple-height textarea {
resize: none;
}