/*
	Defines styling of components and containers that are not specific to a page. This styling will apply across all 
	client projects unless overridden in client-specific stylesheet.
*/

/* ==========================================================================
   Header Components
   ========================================================================== */

#headerPanel {
    display: inline-block;
    width: 50%;
}

a#headerRedirectLink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.5em;
    z-index: 1000;
}

#telephoneNumberLink #telephoneNumber {
    font-size: 190%;
}

div#telephoneNumberPanel p {
    margin: 0;
    padding: 0;
}

#telephoneNumberLink #telephoneNumber {
    padding-bottom: 0.2em;
}

#telephoneNumberLink p#openingHours, #telephoneNumberLink p#description {
	font-weight: bold;
}

.chatButtonContainer {
	background-color: transparent;
    right: 0;
    margin-top: -1.25em;
    margin-bottom: 1em;
    text-align: right;
}

/* ==========================================================================
   Navigation Components
   ========================================================================== */

nav ul {
	height: 100%;
	margin: 0;
	padding: 0;
}

.subMenu.unselected {
    display: none;
}

.menuOption {
    display: table-cell;
}

.menuLink {
    display: block;
    font-size: 115%;
    text-align: center;
}


/* ==========================================================================
   Logout Button Component, Function Button Components/Containers
   ========================================================================== */

 #logoutButtonPanel a {
 	font-weight: bold;
 }

.printButtonPanel {
    float: right;
}

.messagesButtonPanel {
    float: left;
    margin-right: 1.5em;
}

.messageCount {
    margin-left: 0.5em;
}

.unreadMessagesInfoPanel {
  display: inline;
  float: left;
  position: relative;
  width: 50%;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

/* ==========================================================================
   Login Info Components/Containers
   ========================================================================== */

.staffUserPanel .detail {
    font-variant: small-caps;
}

.userDetailsPanel .pdfLabel {
	display: none;
}

/* ==========================================================================
   Page Title Components/Containers
   ========================================================================== */

.pageTitlePanel span, span.pageSectionTitle {
	line-height: 1.2;
}

.pageTitlePanel, 
span.pageSectionTitle, .web-flow h1  {
    font-size: 185%;
}


body.not-logged-in .pageTitlePanel {
    font-size: 265%;
}

.pageSectionTitle {
    margin-top: 1.5em;
}

/* ==========================================================================
   Content Selector Components
   ========================================================================== */

.pageFunctionButtons, .dataEntryPanel .pageFunctionButtons {
    padding-top: 0;
}

.accountUserNote {
    display: none;
}

#accountSelectorPanel > #accountSelectorPanel {
    margin-bottom: 0em;
}

.accountSelector {
   display: inline-block;
}

.accountCash {
    font-size: 125%;
    float: right;
}

.wicketExtensionsWizard .dataEntryPanel .accountSelector {
    padding: 0;
}

.subscriptionsPanel {
    position: relative;
}

.subscriptionsContainer {
    position: absolute;
    right: 0;
}

.subscriptionsContainer div {
	display: inline-block;
    margin-right: 1em;
}

.clientSelectorPanel a.buttonAction.searchFieldButton {
    background: white;
    color: inherit;
    font-weight: normal;
    text-align: left;
    padding-top: 0.35em;
    padding-bottom: 0.25em;
}

label.accountNameLabel {
    padding-right: 0.25em;
}

/* ==========================================================================
   Main Content - Timestamp
   ========================================================================== */

.dateAndTimeStampPanel {
    float: right;
}

/*Hide any timestamps added as part of page content - only the default page component
timestamp should be displayed, otherwise we get a duplicate. 
TODO Remove duplicate timestamp instances from BasePagesAndNavigationBuilder and then remove this */

section.mainContent div.dateAndTimeStampPanel {
    display: none;
}


/* ==========================================================================
   Main Content - Section Headings
   ========================================================================== */
   
/*TODO BLM Refactor all of these to use 'sectionSubHeading' or similar class, and a heading element e.g. h3*/
.sectionSubHeading, .msipHeadings, .marketDataHeading, .riskWarningHeading,
.wicket-modal .w_captionText, .web-flow h2, .ccmBankConfirmationPanel h3,
.ccm-page h3, .ccmProductDeclaration h3 {
    font-size: 115%;
}

/*TODO BLM Refactor all of these to use 'sectionSubHeading' or similar class, and a heading element e.g. h3*/
.defaultHeaderPanel,.headerDetails, .sectionSubHeading,
.marketInfoHeading, .marketInfoHeader, .summaryHeader,
.msipHeadings,  .marketDataHeading, .marketDataHeader, .ccm_update_select-template h3, #ddGuaranteeHeader, 
.portfolioRatesTotalPanel .dataRegularHeader div,  .portfolioTotalPanel .dataRegularHeader,
.portfolioCashBreakdownPanel .dataRegularHeader div {
	font-weight: bold;
}

.sectionSubHeading {
    padding-top: 1em;
    padding-bottom: 0.5em;
}

.sectionSubHeading:empty {
    display: none;
}

.msipHeadings {
    margin-top: 1em;
    margin-bottom: 1em;
}

.riskWarningHeading {
    display: block;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Main Content - Form Section Headings
   ========================================================================== */

form h3 {
    margin-top: 1.75em;
}

form h3.firstFormHeading { /*The first heading doesn't need space above*/
    display: block;
    margin-top: 0;
    padding-top: 0;
}

form h3.sectionSubHeading {
	padding-bottom: 0;
}

/* ==========================================================================
   Main Content - Body Panel Components/Containers 
   ========================================================================== */

.bodyPanel, .mainContentPanel {
	width: 100%;
    clear: both;
    margin-bottom: 1em;
}

.wideContentPanel {
    max-width: 100%;
    overflow-x: auto;
}

.pageLegend {
    display: none;
}

.bodyPanel + .bodyPanel > p:first-child {
    margin-top: 2em;
}

.bodyPanel.homeButtonPanel {
    margin-bottom: 2em;
}


/* ==========================================================================
   Main Content - Static Info Containers (e.g. Contact Us, Ts&Cs, Help Panel)
   ========================================================================== */

.staticInfoPanel {
	padding: 1em;
	box-sizing: border-box;
}

.staticInfoPanel.staticInfoAfterContentSelector {
    margin-top: 0.5em;
}

.staticInfoPanel a {
	font-weight: bold;
}

.staticInfoPanel > div + div {
	padding-top: 1em;
}

.staticInfoPanel > *:first-child {
    margin-top: 0;
    padding-top: 0;
}

.staticInfoPanel > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.infoPanel em, .infoPanel strong {
	display: inline;
}

.infoPanel a.infoLink {
	font-size: 105%;
	font-weight: bold;
}


/* ==========================================================================
   Main Content - Pseudo Forms 
   
   TODO Refactor so that all field labels so they are in forms and fieldsets - 
   then we can remove this styling and just use the base.css styling
   ========================================================================== */

.dataEntryPanel {
    margin: 0;
    display: inline-block;
}

.dataEntryPanel > div, .dataEntryPanel > span, .dataEntryPanel > label {
    padding: 1em;
}

.dataEntryPanel > label {
	padding-right: 0.75em;
}

.dataEntryPanel > div.formBox {
    padding: 0;
}

.dataEntryPanel form {
    margin-bottom: 0;
}

.deprecatedSplitDataEntryPanel {
	margin-bottom: 0;
	padding: 1em;
}

.deprecatedSplitDataEntryPanel + div {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

.deprecatedSplitDataEntryPanel > p {
    margin: 0;
}

.deprecatedSplitDataEntryPanel:empty {
    background-color: transparent;
    padding-bottom: 0;
}

/* ==========================================================================
   Main Content - Date Selector
   ========================================================================== */

div.formInputAreaPanel .dateSelectorPanel,
div.formInputAreaPanel .dateSelectorPanel div {
  	margin-bottom: 0em;
}

div.formInputAreaPanel .dateSelectorPanel + div {
    margin-top: 1em;
}

.dateSelectorPanel div {
    display: inline-block;
}

.dataEntryPanel label {
    min-width: 9em;
}

div.intervalDropDown + div.dateInputPanel label, div.dateInputPanel:last-child label {
    margin-left: 3em;
}

div.intervalDropDown + div.dateInputPanel label {
    min-width: 3em;
}

div.dateInputPanel:last-child label {
    min-width: 1.5em;
}


/* ==========================================================================
   File Input
   ========================================================================== */

input[type="file"].styledFileInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.styledFileInputOverlay {
    display: inline-block !important; /*Need !important due to inline styling; TODO remove inline styling and refactor non-modular client css to hide this*/
	position: relative;
	cursor: pointer;
	padding-left: 2.5em;
}

input[type="file"]:focus + .styledFileInputOverlay {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.styledFileInputOverlay.uploadIcon:before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
}


/* ==========================================================================
   Main Content - Inline Edit
   ========================================================================== */

.detailsInlineEditPanel .detail > * {
    padding: 0 0 1em 0;
}

.detailsInlineEditPanel .detail > *:first-child {
    width: 35%;
}

.detailsInlineEditPanel .detail span.inline-edit {
    margin-right: 1em;
    text-align: right;
}

span.inline-edit.editable-span, span.inline-edit:not(.contains-editable-span), span.inline-edit.contains-editable-span span {
    border: 1px dotted black;
    cursor: pointer;
    display: inline-block;
    padding: 0.3em 0.55em;
}

td.inline-edit input {
    width: 100%;
}

td > span.inline-edit {
    min-width: calc(100% - 2em);
}

td.inline-edit-percentage input {
    width: 6em;
}

/* ==========================================================================
   Main Content - Repeating Tabular Field Layout
   ========================================================================== */

.tabularFieldGroup {
	display: table;
}

.tabularFieldRowGroup {
	display: table-row-group;
}

.tabularFieldHeadings, .tabularFieldRow {
	display: table-row;
}

.tabularFieldHeading, .tabularField {
	display: table-cell;
	vertical-align: top;
	padding-bottom: 0.5em;
}

.tabularField > .tabularField {
    width: 100%;
}

.tabularField.buttonTabularField {
    text-align: right;
}

/* ==========================================================================
   Main Content - Navigation indicators
   ========================================================================== */

.wicketExtensionsWizardHeader {
    display: none;
}

.pager {
    background-color: #EBEBEB;
    border-top: 2px solid #CCCCCC;
    color: #666666;
    padding: 0.5em 0 0.5em 1.5em;
}

.pager .label {
  color: #363636;
}

.tablePanel .pager {
    display: none;
}

/* ==========================================================================
   Main Content - Body Panel Links
   ========================================================================== */

/*TODO Refactor to use common class */
#continueLink,
.watchlistLink a, .msip .editBankDetailsLink a, .ccmInceptionLinkPanel a, 
.productSelectorLinkPanel a,
.ccm_add_success .bodyPanel a, .ccmTemplateList a, 
.ccm_bank_success #pdfLink a, .navigationLink a,
.combinedPortfolioTablePanel .linkColumn span, 
a.clickHereNavigation, .cgtGainLossSummaryPanel td.description {
	font-weight: bold;
}

.cmsNavigationLinks a span, .cmsNavigationLinks a img  {
	cursor: pointer;
}

.cmsNavigationLinks div + img {
    margin-top: 1.5em;
}

/* ==========================================================================
   Main Content - Form Button Components/Containers 
   				  (Download, Reset, Delete, Browser Back, Home, etc)
   ========================================================================== */

#resetButton {
  display: none;
}

/* TODO OJS - Refactor PortfolioSelector, Transaction History, Statements pdf/download buttons so they are consistent */
span.pageFunctionButtons, div.pageFunctionButtons, #pdfButton,
span.pageFunctionButtons div, .formButtonAreaPanel .pageFunctionButtons,
div.buttonsSections input.cancelButton, div.backButtonContainer input,
div.buttonsPanel input.buttonBack {
	float: left;
}

form .buttonsPanel.deprecated .submitButtonContainer,
.formButtonAreaPanel div, div.buttonsSections input.submitButton, div.buttonsPanel input.submitButton,
div.submitButtonContainer input, .baseFieldset input.formButton, div.deleteButtonDiv {
	float:right;
	margin-right: 0.5em;
}

div.submitButtonContainer input:last-child {
    margin-right: 0;
}

.formButtonPanel.lonelyButton div {
	margin-top: -3em;
	margin-right: 0;
}

.submitButtonContainer, .backButtonContainer {
    display: inline-block;
}

span.pageFunctionButtons div {
    margin-right: 1em;
}

form .buttonsPanel, form #buttonsSection,
.browserBackButtonPanel div, .homeButtonPanel div {
    padding-bottom: 1em;
    padding-top: 1em;
}

/*Used to return to login page from e.g. Inception Success page */
.logoutLinkPanel {
    padding-top: 1em;
}

form .buttonsPanel.deprecated {
	margin-bottom: 0;
    padding-bottom: 0;
}

.submitButtonContainer  {
    width: 100%;
}

.backButtonContainer + .submitButtonContainer, .backButtonContainer {
    width: 49.7%;
}

form .dialogButtons, fieldset .formButtonPanel,
.formButtonAreaPanel div, div.buttonsSections input.cancelButton, 
div.backButtonContainer, div.submitButtonContainer {
    margin-bottom: 0;
}

fieldset .formButton {
    margin-left: 0.5em;
}

fieldset .formButton:first-child {
    margin-left: 0;
}

span.field + input.formButton, .fieldGroup + .submitButtonContainer > input {
    float: left;
    margin-left: 0;
    margin-right: 100%;
    margin-top: 0.5em;
}

.pageRedirectOptions .buttonAction + .buttonAction,
.buttonPanel .buttons ~ .buttons {
    margin-left: 0.5em;
}

input.refreshButton + table {
    margin-top: 1.5em;
}

.bodyPanel form:last-child .formButtonAreaPanel:last-child {
    padding-bottom: 1em;
}

/* ==========================================================================
   Main Content - Form Field Components/Containers
   ========================================================================== */

.baseFieldset + div {
    margin: 0;
}

.extendedFieldset {
	margin: 1em 0 0;
	padding: 0;
}

.baseFieldset, .fieldGroup {
	display: table-row;
}

.fieldGroup .field {
	display: table-cell;
	padding-bottom: 0.75em;
}

.baseFieldset .field {
    padding-right: 2.5vw;
}

.fieldGroup .field {
	padding-right: 1.5em;
}

.fieldGroup .field > label {
    min-width: 10.5em;
}

.formInputArea.deprecated label, label.summaryHeader {
    min-width: 15em;
}

fieldset div.formInputAreaPanel div, .innerFormContainer div {
    margin-bottom: 1em;
}

div.checkbox {
    margin-top: 1em;
}

div.dateInput {
    clear: both;
    position: relative;
}

div.dateInput .value {
    margin: 0;
    padding: 0;
}

input.dashboard[disabled] ~ button.dashboard {
    display: none;
}

.radioButtonGroup .radioButtonField {
	display: block;
	margin-bottom: 0.5em;
}

/* ==========================================================================
   Main Content - New Detail Fieldset - Components/Containers (used in first step of Wizard)
   ========================================================================== */

.newDetailsForm .detailField,
.wizardConfirmText .confirmTextStatic {
	margin-bottom: 1em;
}

.newDetailsForm .detailField label {
	min-width: 12em;
}

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

.newDetailsForm .detailFieldGroup {
	margin-bottom: 1.75em;
}

.newDetailsForm .detailFieldGroup .detailField {
	margin-left: 2em;
}

.newDetailsForm .detailFieldGroup .groupLabel {
    margin-bottom: 1em;
}

.newDetailsForm .detailFieldGroup .detailField label {
	min-width: 10em;
}

.newDetailsForm textarea {
    width: calc(100% - 14em);
}

/* ==========================================================================
   Main Content - Form with Info Sidebar
   ========================================================================== */

.formWithInfoSidebar, .infoSidebar {
    display: inline-block;
    vertical-align: top;
}

.formWithInfoSidebar {
	width: 58%;
    min-width: 46em;
}

.infoSidebar {
    width: 41.75%;
}

.infoSidebar .dataTable {
	width: 100%;
}


/* ==========================================================================
   Main Content - Wizard
   ========================================================================== */

.wicketExtensionsWizardInnerTable {
    margin-top: 1em;
}

.wicketExtensionsWizardInnerTable p:first-child {
    margin-top: 0;
}

.wizardConfirmText .confirmTextStatic {
	font-weight: bold;
}

.wizardButtons {
	text-align: right;
}

.wizardButtons .buttons:first-child {
    float: left;
}

.wizardButtons .buttons + .buttons {
    margin-left: 0.5em;
}

.wizardConfirmText.confirmPrompt {
    padding-bottom: 1em;
}


/* ==========================================================================
    Main Content - Summary List
   ========================================================================== */


.dataAspects {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 0.5em;
    -webkit-column-gap: 0.5em;
    column-gap: 0.5em;
}


.dataAspects .dataAspectItem > * {
    display: table-cell;
    padding: 1em 0.5em 0.5em;
}

.dataAspects .dataAspectItem:last-child > * {
    padding-bottom: 1em;
}

.dataAspects .dataAspectItem > *:first-child {
    padding-left: 1em;
}

/* ==========================================================================
    Main Content - Item Selectors & Editors 
   (TODO refactor - currently only used on Fantasy Portfolio, could be used for Msip, etc)
   ========================================================================== */

.itemSelectorAndCreationPanel {
	padding: 1em;
}

.newItemButton {
    margin-top: 1em;
}

.itemSelector, .itemDescription, .itemEditButtons > input[type="button"] {
	display: inline-block;
}

.itemEditButtons {
    display: inline-block;
    margin-left: 2em;
}

.itemEditButtons > input[type="button"] {
	margin-left: 1em;
}

.itemDescription {
	font-weight: bold;
    margin-left: 2em;
}


/* ==========================================================================
   Item Selector Popup
   ========================================================================== */

.window header {
	display: none;
}

.maintain-portfolio-groups .figaroModalWindow {
	width: 605px;
}

.listSelectInput .palette td.buttons {
	border: none;
    width: 5em;
}

.listSelectInput .pane .selection {
    border: none;
    width: 5em;
}

.listSelectInput .selectionSelect {
    height: 170px;
}

.listSelectInput .choicesSelect {
    height: 170px;
}




/* ==========================================================================
    Main Content - Labels (TODO refactor all to use label)
   ========================================================================== */

label, .label, .boldLabel,
 .accountCashLabel, .currentSubsLabel, .remainingSubsLabel, 
.client-name-label, .client-account-label, 
.client-number-label, .navigatorLabel span {
     font-weight: bold;
}

/* ==========================================================================
   Main Content - Table Components/Containers
   ========================================================================== */

.tablePanel tbody a {
	font-weight: bold;
}

.norecords, .no-records {
    display: block;
    color: #555A62;
    padding: 1em;
}

td > span.no-records {
    left: calc(50% - 7.5em);
    position: absolute;
    top: calc(100% + 1em);
    width: 15em;
}

.indicator,
.norecords {
    text-align:center;
}

td.priority span {
    color: maroon;
}

.usingClosePrice, .usingClosePriceContainer,
.withdrawableBalance_false td,
.usingClosePrice-key .icon::before,
.currency-not-withdrawable-key.infoLegendItem .icon::before {
  color: #959595;
}

.sortableColumn span:hover {
    cursor: pointer;
}

td.longNote {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Main Content - JQ Grid Component
   ========================================================================== */

.tablePanel {
    overflow-x: auto;
}

.tablePanel form {
    padding: 0;
    margin: 0;
}

.ui-jqgrid-labels a {
    text-align: left;
    display: block;
}

.ui-jqgrid .ui-jqgrid-sortable {
	text-align: left;
}

.ui-jqgrid .ui-jqgrid-sortable a, .ui-jqgrid .ui-jqgrid-sortable .s-ico {
	display: inline-block;
}

.ui-jqgrid .ui-jqgrid-sortable .s-ico span {
    height: 1.25em;
    margin-top: -1.1em;
    width: 2em;
}

.ui-jqgrid .ui-jqgrid-htable,
.ui-jqgrid .ui-jqgrid-btable,
.ui-jqgrid .ui-jqgrid-ftable {
	width: auto !important;
	min-width: 100%;
}

.ui-jqgrid .ui-jqgrid-htable.withVScrollingBody,
.ui-jqgrid .ui-jqgrid-ftable.withVScrollingBody {
    min-width: calc(100% - 1.25em);
}

.ui-jqgrid .ui-jqgrid-htable tr th {
	padding-top: 0.5em;
	padding-bottom: 0.25em;
	padding-left: 1em;
	padding-right: 1em;
}

.ui-jqgrid .ui-jqgrid-htable td.filter-td {
	padding-bottom: 0.5em;
}

.ui-jqgrid tr.jqgrow td {
	padding: 1em;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;/* css hack for job 234209 F63 */
}

.ui-jqgrid .ui-jqgrid-htable tr th,
.ui-jqgrid tr.footrow-ltr td,
.ui-jqgrid tr.jqgrow td {
    box-sizing: border-box;
}

.ui-jqgrid tr.footrow-ltr td {
    padding: 1em 0 1em 1em;
}

.ui-jqgrid td input, .ui-jqgrid td select .ui-jqgrid td textarea {
    width: calc(100% - 2.75em);
}

.ui-jqgrid td input[type='checkbox'] {
    width: initial;
}

.ui-jqgrid-resize.ui-jqgrid-resize-ltr {
    display: none;
}

.ui-jqgrid .ui-jqgrid-htable tr th.icon span {
    text-align: center;
}

.ui-jqgrid .ui-jqgrid-htable td.filter-td > * {
	margin-left: 1em;
}

.ui-jqgrid-hdiv {
  background-color: #959595;
}

.ui-jqgrid-labels a, .ui-jqgrid-labels span {
    color: white;
}



/* ==========================================================================
   Main Content - Wicket Tree Table
   ========================================================================== */

/*First level sub-stree*/
.tree-subtree > .tree-branch > .tree-node {
    margin-left: 1em;
}

/*Second level sub-stree*/
.tree-subtree > .tree-branch > .tree-subtree > .tree-branch > .tree-node {
    margin-left: 2em;
}

/*Third level sub-stree*/
.tree-subtree > .tree-branch > 
.tree-subtree > .tree-branch > .tree-subtree > .tree-branch > .tree-node {
    margin-left: 4em;
}

/*Fourth level sub-stree*/
.tree-subtree > .tree-branch > 
.tree-subtree > .tree-branch > 
.tree-subtree > .tree-branch > .tree-subtree > .tree-branch > .tree-node {
    margin-left: 6em;
}

/*Row without children (i.e. without an expand/contract icon) */
:not(a) + .tree-content {
    margin-left: 2.25em;
}




/* ==========================================================================
   Main Content - Stock Search Components/Containers
   ========================================================================== */

.searchInput {
	height: 1.75em;
	width: 19.25em;
  	color: #363636;
}

.stockSearchInputField .stockSearchInput {
    margin-bottom: 0;
}

.stockSearchInput label {
	margin-bottom: 0.25em;
}

label[for="sedol"] + div, 
label[for="sedol"] + div > div {
    display: inline;
}

section.stockSearchSection form {
	padding: 1.5em 2.8em 0 0;
}

section.stockSearchSection input {
���padding: 0.4em; 
}

.stockSearchSection .lookupButton:empty:not([value])::before {
����padding: 0.5em 0.6em;
����vertical-align: text-bottom;
}

.stockSearchInput.disabled .lookupButton {
    display: none;
}

/* ==========================================================================
   Main Content - High Level Totals Summary/Dashboard
   ========================================================================== */

.totalValuesList {
    display: table;
    table-layout: fixed;
    margin-top: 1em; /*when the totalValuesList is a dl, this matches the default browser styling in Firefox */
    margin-bottom: 1.5em;
    width: 100%;
}

.totalValuesList li {
    display: table-cell;
}

.totalValuesList dd {
    font-size: 120%;
    font-weight: bold;
    margin-left: 0;
    margin-bottom: 0.25em;
}

.totalValuesList dt {
    background-color: #ebebeb;
    font-size: 200%;
    font-weight: bold;
    padding-bottom: 0.2em;
    padding-left: 0.5em;
    padding-top: 0.2em;
}

.totalValuesList li:nth-child(odd) * {
    margin-right: 2.5%;
}

.totalValuesList li:nth-child(even) * {
    margin-left: 2.5%;
}


/* ==========================================================================
   Main Content - iFrames
   ========================================================================== */

iframe {
    overflow-x: hidden;
    width: 100%;
    height: 47em;
    border: none;
}


/* ==========================================================================
   Main Content - Wicket Autocomplete Component
   ========================================================================== */

.wicket-aa-container {
    left: 37.5em;
    overflow: auto;
    padding: 0;
    position: absolute;
    top: 3.5em;
    width: 37.5;
}

.wicket-aa {
    position: relative;
    width: 100%;
}

.wicket-aa ul {
    margin: 0;
    padding: 0;
    max-height: 23em;
}

.wicket-aa li {
    cursor: pointer;
    margin: 0;
	padding: 1em;
    background-color: #E0E7ED;
    color: #5E5F63;
	border-color: #F0F0F0 #5E5F63 #5E5F63;
    border-right: 1px solid #5E5F63;
    border-top: 1px solid #D0D0D0;
    border-style: solid;
    border-width: 1px;
}

.wicket-aa li.selected {
    background: none repeat scroll 0 0 #C1CED8;
    color: #444242;
}

.wicket-aa li.selected .searchMatch {
    color: inherit;
}

/* ==========================================================================
   Main Content - Information Panel Components/Containers
   ========================================================================== */

.introductoryInformationPanel, .introductoryContentPanel, .note {
	margin-bottom: 1em;
}

.instruction {
	margin-bottom: 1.25em;
}

.instruction > .instruction {
	margin-bottom: 0;
}

.introductoryInformationPanel p:first-child {
    margin-top: 0.25em;
}

.informationBodyPanel p:last-child {
    margin-bottom: 2em;
}

.additionalInformationPanel, .panelInfoText {
	padding-top: 0.5em;
}

.introductoryInformationPanel:empty, .introductoryContentPanel:empty, .note:empty, .panelNote:empty,
.additionalInformationPanel:empty {
	display: none;
}

 .importantInfo, p.info, .questionText, .infoLine p, #pricingInfo p, #name.priceInfoData {
	font-weight: bold;
}


/* ==========================================================================
   Main Content - Section links
   ========================================================================== */

.sectionlinks, .cmsNavigationLinks {
    display: table;
    table-layout: fixed;
    margin-top: 1em;
    margin-bottom: 2em;
}

.sectionlinks > div, .cmsNavigationLinks > div {
    display: table-row;
}

.sectionlinks a, .cmsNavigationLinks a {
	display: table-cell;
}

.sectionlinks > div + div a {
    padding-top: 0.5em;
}


/* ==========================================================================
   Main Content - Contact Details
   ========================================================================== */

.vcard {
	margin-bottom: 2em;
}

.vcard .tel .type {
	display: none;
}

.vcard .telephone-type-description {
	font-weight: bold;
}

.vcard .tel a {
	display: none;
}

div + .email-info {
	margin-top: 2em;
}

.contactInfoType,
.contactNumberType {
	font-weight: bold;
}


/* ==========================================================================
   Main Content - Pie Chart Components/Containers
   ========================================================================== */

.piechartPanel .generalPiechartTitle p {
    margin-bottom: 0;
}


.piechartPanel map > span:last-child > area:focus { /*Do not show outline when graph background clicked*/
    outline: none;
}

.piechartPanel {
    position: relative;
}

.piechartPanel map.withSelectedKey > span:last-child > area[href]:hover:after {
    content: "To remove filter, click here or on the selected segment.";
    display: block;
    position: absolute;
    padding: 0.25em 0.5em;
    left: calc(27.5% + 55px);
    margin-top: -170px;
    padding-bottom: 0.5em;
    font-size: 100%;
    font-family: Arial;
    text-align: center;
    opacity: 0.6;
    width: 10em;
}

@media screen and (max-width: 1023px) {

	.piechartPanel map.withSelectedKey > span:last-child > area[href]:hover:after {
    	width: 10em;
    margin-top: -370px;
    font-size: 130%;
    left: 0;
    margin-left: calc(50% - 5.25em);
	}

}



/* ==========================================================================
   Main Content - Legend Panel Components/Containers
   ========================================================================== */
 
.legendPanel {
    padding-top: 1em;
}
  
.legendPanel ul {
  padding: 0;
  margin: 0;
}

.legendContainer ul li {
    font-size: 90%;
    padding-top: 0.5em;
}

.legendContainer img {
  position: relative;
  margin: 0 0.2em 0 0;
  vertical-align: text-bottom;
}

.legendContainer .usingClosePrice-key img, .legendContainer .currency-not-withdrawable-key img {
    top: 0.35em;
}


/* ==========================================================================
  Main Content - Feedback Components/Containers 
   ========================================================================== */
   
.riskWarning {
    background: none repeat scroll 0 0 #EBEBEB;
    border: 1px solid #363636;
    padding-left: 1em;
    padding-right: 1em;
}

form .feedbackContainer {
    margin-bottom: 0;
}

.sso-login-error .feedbackPanel {
  padding: 0;
  background: none;
}

.sso-login-error .feedbackPanel ul {
  padding: 0;
  margin: 0;
}

ul.feedbackPanel,
.feedbackPanel ul {
    padding-left: 0;
    word-break: keep-all; /*Prevents Firefox word-breaking dates in feedback messages*/
}


li.feedbackPanelERROR, li.feedbackPanelWARNING, li.feedbackPanelINFO, .feedbackMessage,
.failureLabel, .cardPaymentsNotAllowedMessage, .notGranted, #navigationError, .unmatchedStocksPanel  {
    padding: 0.8em 3em 0.8em 1em;
  	margin-bottom: 1.5em;
    border-radius: 4px;
}

.feedbackPanelERROR {
     font-weight: bold;
}

.statusInfo {
	display: block;
	padding-top: 2em;
	font-weight: bold;
}

.feedbackMessage {
    display: block;
    margin-bottom: 0;
}

/* ==========================================================================
  Main Content - Confirmation Panel
   ========================================================================== */

.content > .confirmationPanel {
    margin: auto 0.5em 0.5em;
}

.confirmationPanel .confirmButton {
  float: right;
}

.confirmationMessage label {
  padding: 0.5em;
  width: auto;
}

.confirmationPanel > form {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
}

.confirmationPanel > form {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
}

/* ==========================================================================
   Main Content - Calendar
   ========================================================================== */

div.dashboard table caption,
div.dashboard td.active, div.dashboard td.hover,
div.dashboard td.active.today {
    color: white;
}

div.dashboard table caption span a {
    background-color: white;
}

div.dashboard table thead, 
div.dashboard td {
    border: 1px solid lightgray;
}


/* ==========================================================================
   Main Content - IE Only Rules
   ========================================================================== */

@media screen and (min-width:0\0) {

	div.dashboard tr {
		border-left: 2px solid lightgray;
		border-right: 2px solid lightgray;
	} 

}

@supports (-ms-ime-align:auto) {

	div.dashboard tr {
		border-left: 2px solid lightgray;
		border-right: 2px solid lightgray;
	} 
	
}

/* ==========================================================================
   Main Content - Breadcrumbs
   ========================================================================== */

.wicketExtensionsBreadCrumbBar {
    text-transform: capitalize;
}


.wicketExtensionsBreadCrumbBarCrumb em {
    display: inline-block;
}

.wicketExtensionsBreadCrumbBarCrumb:not(:first-child):before {
    content: ">";
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.wicketExtensionsBreadCrumbBar a {
    text-decoration: underline;
}

/* ==========================================================================
   Footer Components
   ========================================================================== */

.footerPanel p, .footerPanel div.footerTextLine {
	font-size: 80%;
	font-weight: bold;
	text-align: justify;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

#footerInfo > p:last-child {
    margin-bottom: 0;
}

.footerPanel p:not(:last-child), .footerPanel p.warning:not(:last-child) { 
	padding-bottom: 1em;
    margin-bottom: 0; 
}

.footerPanel .footerInfo .warning {
  border: 0 solid #555555;
  padding: 0;
  margin: 0;
}

.footerPanel .footerInfo + .footerInfo {
    margin-top: 2em;
}

div.secondaryNavigation {
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    min-height: auto;
    padding-bottom: 2em;
    padding-top: 0.75em;
    font-weight: bold;
}

div.secondaryNavigation div {
	display: inline-block;
    margin-right: 1.5em;
    padding-right: 1.5em;
}

div.secondaryNavigation div:last-child,
div.secondaryNavigation div.last-link {
    border-right: none;
}

div.secondaryNavigation a {
    font-size: 85%;
}