@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * 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 {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 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"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[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 {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/*not-selected tab*/
.dark .bgColor {
  background-color: #000000; }

body.dark {
  background-color: #000000;
  color: white; }

.dark .gwapBlue {
  color: #478FCC; }

.dark .half-pixel-top-border {
  box-shadow: 0 -1px 0.5px -1px white; }

.dark div.pageCanvas {
  background-color: #000000; }

.dark div.boxTitle {
  background-color: #1f3357;
  color: white; }

.dark div.boxTitle.shadow {
  background-color: #161616;
  color: #595959; }

.dark table.metrics {
  background-color: #27406d;
  color: white; }

.dark table.metrics th {
  background-color: #1f3357; }

.dark .svgChart .axis text {
  fill: white; }

.dark .svgChart .namelabel, .svgChart .namelabel2 {
  fill: white; }

/*.dark svg.chartContainer {
    fill: $tblBody;//TO DO
}*/
.value-positive {
  color: #50E3C2 !important; }

.value-negative {
  color: #FF4954 !important; }

.value-zero {
  color: grey !important; }

.dark button.generic.red {
  background-color: #FF4954;
  color: white; }

.dark .flexTblHdr {
  background-color: #1f3357;
  color: white; }
  .dark .flexTblHdr.onCanvas {
    background-color: #1f3357; }
  .dark .flexTblHdr div.withBar::after {
    background-color: #505065; }
  .dark .flexTblHdr div.withBottomBar {
    border-bottom-color: #505065; }

.dark .flexTbl > div {
  color: white; }

.dark .flexTbl div.flexTblRow.withTopBar {
  border-top-color: #505065; }

@media all and (min-width: 768px) {
  /* white (default) inputs */
  .dark input[type="text"],
  .dark input[type="number"],
  .dark input[type="password"],
  .dark input[type="email"],
  .dark input[type="date"],
  .dark textarea {
    color: white;
    background-color: #0C131C;
    border-color: #0C131C; }
  .dark input[type="text"]:focus,
  .dark input[type="number"]:focus,
  .dark input[type="password"]:focus,
  .dark input[type="email"]:focus,
  .dark input[type="date"]:focus,
  .dark textarea:focus {
    border-color: #478FCC; }
  .dark input[type="text"]:disabled,
  .dark input[type="number"]:disabled,
  .dark input[type="password"]:disabled,
  .dark input[type="email"]:disabled,
  .dark textarea:disabled {
    color: #647a88; } }

@media all and (max-width: 767px) {
  .dark input[type="text"],
  .dark input[type="number"],
  .dark input[type="password"],
  .dark input[type="email"],
  .dark input[type="date"],
  .dark textarea {
    color: white;
    background-color: transparent;
    border-bottom-color: #478FCC; } }

.dark input {
  /*Edge*/
  /*IE 10-11*/ }
  .dark input ::placeholder {
    color: #BFBFBF; }
  .dark input ::-ms-input-placeholder {
    color: #BFBFBF; }
  .dark input :-ms-input-placeholder {
    color: #BFBFBF; }
  .dark input:disabled {
    /*Edge*/
    /*IE 10-11*/ }
    .dark input:disabled ::placeholder {
      color: #647a88; }
    .dark input:disabled ::-ms-input-placeholder {
      color: #647a88; }
    .dark input:disabled :-ms-input-placeholder {
      color: #647a88; }

.dark #header,
.dark #headerNewPortMobi,
.dark #headerStrategySelectionMobi {
  background-color: #16243e; }

.dark .footer {
  background-color: #111831; }

.dark .logoColor {
  fill: white; }

.dark #menu {
  background-color: #16243e;
  color: white;
  border-color: #16243e; }
  .dark #menu div.withSeparator {
    border-top: 1px solid #16243e; }

@media all and (min-width: 768px) {
  .dark #menu {
    background-color: #16243e; } }

@media all and (max-width: 767px) {
  .dark #menu {
    background-color: black; } }

body.dark.hasHover #menu div:hover,
body.dark #menu div:active {
  color: #485065; }

body.dark.hasHover #header > svg {
  fill: #478FCC;
  stroke: #478FCC; }

body.dark.hasHover #header > svg:hover,
body.dark #header > svg:active {
  fill: #ACE4FD;
  stroke: #ACE4FD; }

.dark .tab {
  /* next 2 are tab delimiters */ }
  .dark .tab.selected {
    background-color: #000000; }
    .dark .tab.selected input[type="text"].readonly {
      background-color: #000000;
      color: white; }
  .dark .tab.selected.live-port input[type="text"].readonly {
    color: #50E3C2; }
  .dark .tab:not(.selected)::after {
    background-color: #505065; }
  .dark .tab:first-child::before {
    background-color: #505065; }
  .dark .tab span {
    color: #505065; }
  .dark .tab.adv.selected span {
    color: white; }
  .dark .tab.order-pending span {
    color: #FF4954; }
  .dark .tab.live-port span {
    color: #50E3C2; }

.dark .subHeader {
  background-color: transparent; }
  .dark .subHeader .navButtons .navBtnFull {
    background-color: transparent;
    border-color: #505065; }
    .dark .subHeader .navButtons .navBtnFull:disabled {
      border-color: #16243e; }
      .dark .subHeader .navButtons .navBtnFull:disabled svg {
        fill: #478FCC; }
    .dark .subHeader .navButtons .navBtnFull svg {
      fill: #478FCC; }
    .dark .subHeader .navButtons .navBtnFull.red svg {
      fill: red; }
    .dark .subHeader .navButtons .navBtnFull.colored {
      background-color: #478FCC; }

/*.dark .footer div.mbox svg {
	fill:$gwapBlue;
}*/
body.dark.hasHover .subHeader .navButtons .navBtnFull:hover,
body.dark .subHeader .navButtons .navBtnFull:active {
  border-color: #b0b7c0; }
  body.dark.hasHover .subHeader .navButtons .navBtnFull:hover svg,
  body.dark .subHeader .navButtons .navBtnFull:active svg {
    fill: #ACE4FD; }

body.dark .pageMobile,
body.dark .pageMobileOnly,
body.dark .dlgMobile {
  background-color: #16243e; }

@media all and (max-width: 767px) {
  body.dark .canvasBlueOnMobile {
    background-color: #16243e; } }

.dark div.questionBox .greyBlueRadio {
  border-color: #505065; }
  .dark div.questionBox .greyBlueRadio.selected {
    color: white;
    border-color: #478FCC;
    background-color: #478FCC; }
  .dark div.questionBox .greyBlueRadio.disabled {
    background-color: #1f3357;
    border-color: #1f3357;
    color: #5B5967; }

.dark div.questionBox .blueToggle {
  border-color: #478FCC;
  color: white; }
  .dark div.questionBox .blueToggle.selected {
    background-color: #478FCC; }

.dark div.questionBox .coloredHeader {
  background-color: #478FCC;
  color: white; }

.dark div.questionBox div.questionLine:nth-child(1n+2) {
  border-color: #505065; }

.coloredRadio.disabled {
  background-color: #1f3357;
  border-color: #1f3357;
  color: #5B5967; }

body.dark.hasHover div.questionBox .greyBlueRadio:hover,
body.dark div.questionBox .greyBlueRadio:active {
  color: #478FCC;
  border-color: #478FCC; }

.dark #returnVsRisk,
.dark #returnVsRisk2 {
  stroke: white;
  fill: white; }

.dark button.mobiTransparent {
  color: #478FCC;
  border-color: #478FCC;
  background-color: transparent;
  outline: transparent; }

.dark button.mobiTransparent:disabled {
  color: grey;
  border-color: grey; }

.dark button.mobiNone {
  color: #478FCC;
  background-color: transparent;
  outline: transparent;
  cursor: pointer; }

.dark .metricsItemBtm,
.dark .greyRow {
  color: gray; }

.dark div.pageColumn .columnBox {
  background-color: #16243e; }
  .dark div.pageColumn .columnBox .monthlyReturnsTable {
    background-color: #27406d; }
    .dark div.pageColumn .columnBox .monthlyReturnsTable th {
      background-color: #1f3357; }
    .dark div.pageColumn .columnBox .monthlyReturnsTable td:nth-child(1n+2) {
      border-left: 1px solid #1f3357; }

.dark #portfolioNews a,
.dark #portfolioNewsMobi a {
  color: #478FCC; }

.dark .aaPrev {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="10,0 0,10 10,20"/></svg>'); }
  .dark .aaPrev:disabled {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23122A43" points="10,0 0,10 10,20"/></svg>'); }

.dark .aaNext {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="0,0 10,10 0,20"/></svg>'); }
  .dark .aaNext:disabled {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23122A43" points="0,0 10,10 0,20"/></svg>'); }

.dark div.pageCanvas1 {
  background-color: #000000; }

.dark div.pageCanvas2 {
  background-color: #16243e; }

.dark #page2ReturnAndVolatility table {
  border-color: #505065; }
  .dark #page2ReturnAndVolatility table th {
    border-color: #505065; }

.dark #aaFilters .filterBox .buttonsBox div {
  border-color: #000000; }
  .dark #aaFilters .filterBox .buttonsBox div.selected {
    border-color: #b0b7c0; }
  .dark #aaFilters .filterBox .buttonsBox div input[type="text"] {
    background-color: #0C131C;
    color: white; }

.dark #aaFilters .filterBox .buttonsBox div {
  background-color: #161616; }
  .dark #aaFilters .filterBox .buttonsBox div span.leveraged {
    color: #595959; }

.dark #aaFilters .filterBox .buttonsBox.shadow div {
  border-color: none; }

.dark #aaETFsTbl > div.flexTblRow {
  border-bottom: 0px solid #1f3357; }

.dark #aaETFsTbl > div.flexTblRow:not(.group) {
  background-color: #27406d; }

.dark #aaETFsTbl > div.flexTblRow.group {
  background-color: #16243e; }

.dark .withLocker {
  /*.bar .range {
		background-color: #0D152F;
	}*/ }
  .dark .withLocker .bar .value {
    background-color: #478FCC; }
  .dark .withLocker div:not(.locked) .bar .tip {
    background-color: #478FCC; }
  .dark .withLocker div.locked .bar .tip {
    background-color: none; }

.dark div.corrHdr {
  color: white; }
  .dark div.corrHdr.topleft {
    background-color: #1f3357; }
  .dark div.corrHdr.horizontal > span:not(.styled-select) {
    background-color: #1f3357; }
  .dark div.corrHdr.vertical > div {
    background-color: #1f3357; }

.dark div.corrTbl > div > span {
  background-color: #27406d; }
  .dark div.corrTbl > div > span.hdr {
    background-color: #1f3357; }
  .dark div.corrTbl > div > span.corrRed {
    color: #FF4954; }
  .dark div.corrTbl > div > span.corrDarkGreen {
    color: #50E3C2; }
  .dark div.corrTbl > div > span.corrSel {
    background-color: #4e6287; }

.dark #rebalanceTbl > div.flexTblRow:not(.noBorder) > div:not(.bgColor) {
  border-bottom: 0px solid #485065; }

.dark #rebalanceTbl > div.flexTblRow:not(.group) {
  background-color: #27406d; }

.dark #rebalanceTbl > div.flexTblRow.group {
  background-color: #16243e; }

.dark #rebalanceTbl > div.flexTblRow input[type="number"] {
  color: white;
  background-color: #0C131C;
  border-color: #0C131C; }

.dark #rebalanceTbl > div.flexTblRow input[type="number"]:focus {
  color: white;
  background-color: #0C131C;
  border-color: #478FCC; }

.dark #rebalanceTbl > div.flexTblRow.selected div:not(.bgColor) {
  background-color: #4e6287; }

.dark #holdingsTbl > div.flexTblRow:not(.noBorder) > div:not(.bgColor) {
  border-bottom: 0px solid #485065; }

.dark #holdingsTbl > div.flexTblRow:not(.group) {
  background-color: #27406d; }

.dark #holdingsTbl > div.flexTblRow.group {
  background-color: #16243e; }

.dark #trPortfolioTbl {
  background-color: #27406d; }
  .dark #trPortfolioTbl > div.flexTblRow.selected2 {
    background-color: #4e6287;
    color: white; }

.dark #trPortfolioTblFtr {
  background-color: #16243e; }

.dark #trTransactionsTbl {
  background-color: #27406d; }
  .dark #trTransactionsTbl > div.flexTblRow input[type="text"] {
    color: white;
    background-color: #0C131C;
    border-color: #0C131C; }
  .dark #trTransactionsTbl > div.flexTblRow input[type="text"]:focus {
    color: white;
    background-color: #0C131C;
    border-color: #478FCC; }

.dark #trTransactionsTblFtr {
  background-color: #16243e; }

.dark table.page {
  color: white; }

.dark table.page tr {
  background-color: #27406d; }

.dark table.page td.alt {
  background-color: #27364E; }

.dark table.page tr.selected td {
  background-color: #F2F2F3;
  color: #1B3C5A; }

.dark table.page tr.selected2 td {
  background-color: #FFBF60;
  color: #1B3C5A; }

.dark table.page tr.selected td.alt {
  background-color: #F1E1D6;
  color: #1B3C5A; }

/* not used
.dark table.page tr.autogenerated td {
	background-color: #2B4C6A;
}*/
.dark table.page th {
  background-color: #1f3357; }

.dark table.page th.alt {
  background-color: #478fcc; }

.dark table.page th.alt.warning {
  background-color: #E45E30; }

.dark table.page tbody tr:nth-last-child(1n+2) td {
  border-bottom: 0px solid #485065; }

.dark table.page input[type="text"],
.dark table.page input[type="number"],
.dark .flexTbl input[type="number"] {
  /*color: white;
	background-color: #7F8597;*/
  color: black;
  background-color: white;
  transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; }

.dark table.page input[type=text]:disabled,
.dark table.page input[type=number]:disabled,
.dark .flexTbl input[type=number]:disabled {
  background-color: #27364E;
  color: #DDDDDD; }

.dark .commonOrdersTblContainer > .flexTbl {
  background-color: #27406d; }
  .dark .commonOrdersTblContainer > .flexTbl > div.flexTblRow input[type="text"] {
    color: white;
    background-color: #0C131C;
    border-color: #0C131C; }
  .dark .commonOrdersTblContainer > .flexTbl > div.flexTblRow input[type="text"]:focus {
    color: white;
    background-color: #0C131C;
    border-color: #478FCC; }

.dark commonOrdersTblHdr1Row,
.dark commonOrdersTblHdr2Rows {
  background-color: #16243e; }

/*
.dark #openOrdersTbl .flexTblRow:not(.modified) input[type=text],
.dark #openOrdersTbl .flexTblRow:not(.modified) input[type=number] {
	background-color: $blueishInput;	
}*/
.dark .ordersCashTbl table {
  border-color: #505065; }

.dark #strselBg {
  background-color: #000000; }

.dark #strselBox {
  background-color: #000000; }

.dark .strategyCard {
  background-color: #000000;
  border-color: #505065; }
  .dark .strategyCard div.intro {
    background-color: #1f3357;
    color: white; }
  .dark .strategyCard div.title {
    background-color: #1f3357;
    color: white; }
  .dark .strategyCard div.srcLastUpdated {
    background-color: #27406d; }

.dark #header span.etf {
  color: white; }

.dark .svgChart {
  background-color: #16243e; }
  .dark .svgChart .grid line {
    stroke: lightgrey; }
  .dark .svgChart .focus text {
    fill: white; }

/* dark (used in forms) inputs */
.dark .styled-select {
  border-color: #478FCC;
  background-color: #478FCC; }
  .dark .styled-select select {
    color: white; }

.dark div.msgBox {
  background-color: #16243e;
  color: white;
  border: none; }
  .dark div.msgBox a {
    color: white; }
  .dark div.msgBox div.header {
    background-color: #1f3357;
    color: white; }
  .dark div.msgBox div.header.warning {
    background-color: #FF4954;
    color: white; }

.dark button.btnDownload {
  border-color: #505065; }

.dark .dialog-item input[type=text],
.dark .dialog-item input[type=number],
.dark .dialog-item input[type=password],
.dark .dialog-item input[type=email],
.dark .dialog-item input[type=date],
.dark .dialog-item textarea {
  border-color: #0C131C; }

.dark #saveStrategy_strategiesListHdr {
  background-color: #1f3357; }

.dark #saveStrategy_strategiesListTbl {
  background-color: #27406d; }

.dark #saveStrategy_Name,
.dark #saveStrategy_Description {
  background-color: #0C131C;
  border-color: #0C131C; }

.dark #saveStrategy_Name:focus, #saveStrategy_Description:focus {
  border-color: #478FCC; }

.dark #saveStrategy_strategiesListTbl > div.flexTblRow:nth-child(even) {
  background-color: #27406d; }

.dark #saveStrategy_strategiesListTbl > div.flexTblRow:nth-child(odd) {
  background-color: #2e4c82; }

.dark #portSettingsTbl > div.flexTblRow:nth-child(even) {
  background-color: #27406d; }

.dark #portSettingsTbl > div.flexTblRow:nth-child(odd) {
  background-color: #2e4c82; }

.dark .canvasColor {
  background-color: #27406d; }

.dark .dialog-item .orderRow .orderRight.topBorder {
  border-top-color: white; }

.dark .dialog-item .orderRow.bottomBorder {
  border-bottom-color: white; }

.light .bgColor {
  background-color: #F3F1ED; }

body.light {
  background-color: #F3F1ED;
  color: black; }

.light .gwapBlue {
  color: #478FCC; }

.light .half-pixel-top-border {
  box-shadow: 0 -1px 0.5px -1px black; }

.light .pageWithoutSubheader,
.light .pageWithSubheader {
  background-color: #F3F1ED; }

.light div.pageCanvas {
  background-color: #F3F1ED; }

.light div.boxTitle {
  background-color: #1f3357;
  color: white; }

.light div.boxTitle.shadow {
  background-color: #E9E9E9;
  color: #B9B9B9; }

.light table.metrics {
  background-color: #c1c6d0;
  color: black; }

.light table.metrics th {
  background-color: #1f3357;
  color: white; }

.light .svgChart .axis text {
  fill: black; }

.light .svgChart .namelabel, .svgChart .namelabel2 {
  fill: black; }

/*.light .svgChart .overlay {
    fill: $tblBody;//TO DO
}*/
.value-positive {
  color: #50E3C2 !important; }

.value-negative {
  color: #FF4954 !important; }

.value-zero {
  color: grey !important; }

.light .flexTblHdr {
  background-color: #1f3357;
  color: white; }
  .light .flexTblHdr.onCanvas {
    background-color: #1f3357; }
  .light .flexTblHdr div.withBar::after {
    background-color: #a4a4b4; }
  .light .flexTblHdr d
div.withBottomBar {
    border-bottom-color: #a4a4b4; }

.light .flexTbl > div {
  color: black; }

.light .flexTbl div.flexTblRow.withTopBar {
  border-top-color: #a4a4b4; }

.light #header {
  background-color: #d5d9df; }

.light .logoColor {
  fill: black; }

.light #menu {
  background-color: #d5d9df;
  color: black;
  border-color: #d5d9df; }
  .light #menu div.withSeparator {
    border-top: 1px solid #d5d9df; }

body.hasHover.light #menu div:hover,
body.light #menu div:active {
  color: #485065; }

body.light.hasHover #header > svg {
  fill: #478FCC;
  stroke: #478FCC; }

body.light.hasHover #header > svg:hover,
body.light #header > svg:active {
  fill: #ACE4FD;
  stroke: #ACE4FD; }

.light .tab {
  /* next 2 are tab delimiters */ }
  .light .tab.selected {
    background-color: #F3F1ED; }
    .light .tab.selected input[type="text"].readonly {
      background-color: #F3F1ED;
      color: black; }
  .light .tab.selected.live-port input[type="text"].readonly {
    color: #50E3C2; }
  .light .tab:not(.selected)::after {
    background-color: #a4a4b4; }
  .light .tab:first-child::before {
    background-color: #a4a4b4; }
  .light .tab span {
    color: #a4a4b4; }
  .light .tab.adv.selected span {
    color: black; }
  .light .tab.order-pending span {
    color: #FF4954; }
  .light .tab.live-port span {
    color: #50E3C2; }

.light .subHeader {
  background-color: #F3F1ED; }
  .light .subHeader .navButtons .navBtnFull {
    background-color: transparent;
    border-color: #a4a4b4; }
    .light .subHeader .navButtons .navBtnFull:disabled {
      border-color: #d5d9df; }
      .light .subHeader .navButtons .navBtnFull:disabled svg {
        fill: #478FCC; }
    .light .subHeader .navButtons .navBtnFull svg {
      fill: #478FCC; }
    .light .subHeader .navButtons .navBtnFull.red svg {
      fill: red; }
    .light .subHeader .navButtons .navBtnFull.colored {
      background-color: #478FCC; }

body.light.hasHover .subHeader .navButtons .navBtnFull:hover,
body.light .subHeader .navButtons .navBtnFull:active {
  border-color: #616177; }
  body.light.hasHover .subHeader .navButtons .navBtnFull:hover svg,
  body.light .subHeader .navButtons .navBtnFull:active svg {
    fill: #ACE4FD; }

.light div.questionBox {
  /*border: solid 1px white;*/ }
  .light div.questionBox .greyBlueRadio {
    border-color: #a4a4b4; }
    .light div.questionBox .greyBlueRadio.selected {
      color: white;
      border-color: #478FCC;
      background-color: #478FCC; }
    .light div.questionBox .greyBlueRadio.disabled {
      background-color: #1f3357;
      border-color: #1f3357;
      color: #5B5967; }
  .light div.questionBox .coloredHeader {
    background-color: #478FCC;
    color: white; }
  .light div.questionBox div.questionLine:nth-child(1n+2) {
    border-color: #a4a4b4; }

.coloredRadio.disabled {
  background-color: #1f3357;
  border-color: #1f3357;
  color: #5B5967; }

body.light.hasHover div.questionBox .greyBlueRadio:hover,
body.light div.questionBox .greyBlueRadio:active {
  color: #478FCC;
  border-color: #478FCC; }

.light #returnVsRisk,
.light #returnVsRisk2 {
  stroke: black;
  fill: black; }

.light div.pageColumn .columnBox {
  background-color: #d5d9df; }
  .light div.pageColumn .columnBox .monthlyReturnsTable {
    background-color: #c1c6d0; }
    .light div.pageColumn .columnBox .monthlyReturnsTable th {
      background-color: #1f3357; }
    .light div.pageColumn .columnBox .monthlyReturnsTable td:nth-child(1n+2) {
      border-left: 1px solid #1f3357; }

.light #portfolioNews a,
.light #portfolioNewsMobi a {
  color: #478FCC; }

.light .aaPrev {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="10,0 0,10 10,20"/></svg>'); }
  .light .aaPrev:disabled {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23122A43" points="10,0 0,10 10,20"/></svg>'); }

.light .aaNext {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="0,0 10,10 0,20"/></svg>'); }
  .light .aaNext:disabled {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23122A43" points="0,0 10,10 0,20"/></svg>'); }

.light div.pageCanvas1 {
  background-color: #F3F1ED; }

.light div.pageCanvas2 {
  background-color: #d5d9df; }

.light #page2ReturnAndVolatility table {
  border-color: #a4a4b4; }

.light #aaFilters .filterBox .buttonsBox div {
  border-color: #F3F1ED; }
  .light #aaFilters .filterBox .buttonsBox div.selected {
    border-color: #616177; }

.light #aaFilters .filterBox .buttonsBox div {
  background-color: #E9E9E9; }
  .light #aaFilters .filterBox .buttonsBox div span.leveraged {
    color: #B9B9B9; }

.light #aaFilters .filterBox .buttonsBox.shadow div {
  border-color: none; }

.light #aaETFsTbl > div.flexTblRow {
  border-bottom: 0px solid #1f3357; }

.light #aaETFsTbl > div.flexTblRow:not(.group) {
  background-color: #c1c6d0; }

.light #aaETFsTbl > div.flexTblRow.group {
  background-color: #d5d9df; }

.light .withLocker {
  /*.bar .range {
		background-color: #0D152F;
	}*/ }
  .light .withLocker .bar .value {
    background-color: #478FCC; }
  .light .withLocker div:not(.locked) .bar .tip {
    background-color: #478FCC; }
  .light .withLocker div.locked .bar .tip {
    background-color: none; }

.light div.corrHdr {
  color: white; }
  .light div.corrHdr.topleft {
    background-color: #1f3357; }
  .light div.corrHdr.horizontal > span:not(.styled-select) {
    background-color: #1f3357; }
  .light div.corrHdr.vertical > div {
    background-color: #1f3357; }

.light div.corrTbl > div > span {
  background-color: #c1c6d0; }
  .light div.corrTbl > div > span.hdr {
    background-color: #1f3357;
    color: white; }
  .light div.corrTbl > div > span.corrRed {
    background-color: #c1c6d0;
    color: #FF4954; }
  .light div.corrTbl > div > span.corrOrange {
    background-color: #c1c6d0; }
  .light div.corrTbl > div > span.corrDarkGreen {
    background-color: #c1c6d0;
    color: #50E3C2; }
  .light div.corrTbl > div > span.corrDiffBg {
    background-color: #c1c6d0; }
  .light div.corrTbl > div > span.corrSel {
    background-color: #a3abba; }
  .light div.corrTbl > div > span.empty {
    background-color: #c1c6d0; }

.light #rebalanceTbl > div.flexTblRow:not(.noBorder) > div:not(.bgColor) {
  border-bottom: 0px solid #485065; }

.light #rebalanceTbl > div.flexTblRow:not(.group) {
  background-color: #c1c6d0; }

.light #rebalanceTbl > div.flexTblRow.group {
  background-color: #d5d9df; }

.light #rebalanceTbl > div.flexTblRow input[type="number"] {
  color: white;
  background-color: #478FCC;
  border-color: #c1c6d0; }

.light #rebalanceTbl > div.flexTblRow input[type="number"]:focus {
  color: black;
  background-color: white; }

.light #holdingsTbl > div.flexTblRow:not(.noBorder) > div:not(.bgColor) {
  border-bottom: 0px solid #485065; }

.light #holdingsTbl > div.flexTblRow:not(.group) {
  background-color: #c1c6d0; }

.light #holdingsTbl > div.flexTblRow.group {
  background-color: #d5d9df; }

.light #trPortfolioTbl {
  background-color: #c1c6d0; }
  .light #trPortfolioTbl > div.flexTblRow.selected2 {
    background-color: #a3abba;
    color: white; }

.light #trPortfolioTblFtr {
  background-color: #d5d9df; }

.light #trTransactionsTbl {
  background-color: #c1c6d0; }
  .light #trTransactionsTbl > div.flexTblRow input[type="text"] {
    color: white;
    background-color: #478FCC;
    border-color: #c1c6d0; }
  .light #trTransactionsTbl > div.flexTblRow input[type="text"]:focus {
    color: black;
    background-color: white; }

.light #trTransactionsTblFtr {
  background-color: #d5d9df; }

.light .commonOrdersTblContainer > .flexTbl {
  background-color: #c1c6d0; }
  .light .commonOrdersTblContainer > .flexTbl > div.flexTblRow input[type="text"] {
    color: white;
    background-color: #478FCC;
    border-color: #c1c6d0; }
  .light .commonOrdersTblContainer > .flexTbl > div.flexTblRow input[type="text"]:focus {
    color: black;
    background-color: white; }

.light commonOrdersTblHdr1Row,
.light commonOrdersTblHdr2Rows {
  background-color: #d5d9df; }

.light #openOrdersTbl .flexTblRow:not(.modified) input[type=text],
.light #openOrdersTbl .flexTblRow:not(.modified) input[type=number] {
  background-color: white; }

.light .ordersCashTbl table {
  border-color: #a4a4b4; }

.light #strselBox {
  background-color: #F3F1ED; }

.light .strategyCard {
  background-color: #F3F1ED;
  border-color: #a4a4b4; }
  .light .strategyCard div.title {
    background-color: #1f3357;
    color: white; }
  .light .strategyCard div.srcLastUpdated {
    background-color: #c1c6d0; }

.light #header span.etf {
  color: white; }

.light #returnVsVolatility .svgChart {
  background-color: #d5d9df; }

.light .svgChart {
  background-color: #c1c6d0; }
  .light .svgChart .grid line {
    stroke: #323941; }
  .light .svgChart .focus text {
    fill: black; }

/* light (used in forms) inputs */
/*.light input[type="text"].light,
.light input[type="number"].light,
.light input[type="password"].light,
.light input[type="email"].light,
.light input[type="date"].light,
.light textarea.light {
	color: $bodyColor;
	background-color: $tblBlue;
    border-color: $lightMargin;
}

.light input[type="text"].light:focus,
.light input[type="number"].light:focus,
.light input[type="password"].light:focus,
.light input[type="email"].light:focus,
.light textarea.light:focus {
	color: black;
	background-color: white;
}
.light input[type="text"].light:disabled,
.light input[type="number"].light:disabled,
.light input[type="password"].light:disabled,
.light input[type="email"].light:disabled,
.light textarea.light:disabled  {
	color: rgb(100,122,136); //REDO
}

.light input.light::placeholder,
.light input.light::-ms-input-placeholder, /*Edge*/
/*.light input.light:-ms-input-placeholder { /*IE 10-11*/
/*color:#BFBFBF;
}

.light input.light:disabled::placeholder,
.light input.light:disabled::-ms-input-placeholder,
.light input.light:disabled:-ms-input-placeholder {
	color:rgb(100,122,136);
}*/
.light .styled-select {
  border-color: #a4a4b4; }
  .light .styled-select select {
    color: black; }

.light div.msgBox,
.light #strselBox {
  background-color: #F3F1ED;
  color: black;
  border: none; }

.light div.msgBox div.header,
.light #strselBox div.header {
  background-color: #F0F0F0;
  color: black; }

.light div.msgBox div.header.warning {
  background-color: #E45E30;
  color: white; }

.light button.btnDownload {
  border-color: #a4a4b4; }

.light .dialog-item .orderRow .orderRight.topBorder {
  border-top-color: black; }

.light .dialog-item .orderRow.bottomBorder {
  border-bottom-color: black; }

@media all and (max-width: 767px) {
  body, html {
    font-size: 1rem;
    --font-small: 0.8rem;
    --font-smallest: 0.6rem;
    --font-big: 1.4rem;
    --font-biggest: 1.75rem; }
  body .font-normal {
    font-size: 1rem; }
  body .font-big-desktop {
    font-size: 14px; }
  body .font-small {
    font-size: 0.8rem; }
  body .font-smallest {
    font-size: 0.6rem; }
  body .font-big {
    font-size: 1.4rem; }
  body .font-biggest {
    font-size: 1.75rem; } }

@media all and (min-width: 768px) and (max-width: 1023px) {
  body, html {
    font-size: 10px;
    --font-small: 8px;
    --font-smallest: 8px;
    --font-big: 12px;
    --font-biggest: 14px; }
  body .font-normal {
    font-size: 10px; }
  body .font-small {
    font-size: 8px; }
  body .font-smallest {
    font-size: 8px; }
  body .font-big,
  body .font-big-desktop {
    font-size: 12px; }
  body .font-biggest {
    font-size: 14px; } }

@media all and (min-width: 1024px) and (max-width: 1365px), (min-width: 1024px) and (max-height: 767px) {
  /*previous 1279px*/
  body, html {
    font-size: 12px;
    --font-small: 9.5px;
    --font-smallest: 9px;
    --font-big: 14px;
    --font-biggest: 16px; }
  body .font-normal {
    font-size: 12px; }
  body .font-small {
    font-size: 9.5px;
    /*11.2*/ }
  body .font-smallest {
    font-size: 9px;
    /*8.4*/ }
  body .font-big,
  body .font-big-desktop {
    font-size: 14px;
    /*16.8*/ }
  body .font-biggest {
    font-size: 16px;
    /*19.6*/ } }

/*IPad Pro -- 1366px, Surface Book -- 1500px*/
@media all and (min-width: 1366px) and (min-height: 768px) {
  /*previous 1280 - 1450*/
  body, html {
    font-size: 14px;
    --font-small: 12px;
    --font-smallest: 10px;
    --font-big: 16px;
    --font-biggest: 20px; }
  body .font-normal {
    font-size: 14px; }
  body .font-small {
    font-size: 12px;
    /*previous 13px 12.8*/ }
  body .font-smallest {
    font-size: 10px;
    /*9.6*/ }
  body .font-big,
  body .font-big-desktop {
    font-size: 16px;
    /*previous 19px 19.2*/ }
  body .font-biggest {
    font-size: 20px;
    /*previous 22px 22.4*/ } }

@media all and (min-width: 768px) {
  .onlyOnMobile {
    display: none !important; } }

@media all and (max-width: 767px) {
  .onlyOnDesktop {
    display: none !important; } }

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: local("Nunito ExtraLight"), local("Nunito-ExtraLight"), url("/fonts/Nunito_200.woff") format("woff"); }

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: local("Nunito Light"), local("Nunito-Light"), url("/fonts/Nunito_300.woff") format("woff"); }

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local("Nunito Regular"), local("Nunito-Regular"), url("/fonts/Nunito_400.woff") format("woff"); }

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local("Nunito Bold"), local("Nunito-Bold"), url("/fonts/Nunito_700.woff") format("woff"); }

* {
  -webkit-touch-callout: none;
  -webkit-user-callout: none; }

/*
body:not(.hasHover) * {
	-webkit-user-select: none;
}*/
input {
  -webkit-user-select: initial !important; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Nunito', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /*-ms-overflow-style: -ms-autohiding-scrollbar;*/
  position: fixed; }

.left {
  text-align: left !important; }

.right {
  text-align: right !important; }

.center {
  text-align: center !important; }

.fullWidth {
  width: 100%; }

.trnsprnt {
  background-color: transparent !important; }

.red {
  color: red; }

.green {
  color: green; }

.w2em {
  width: 2em; }

.w3em {
  width: 3em; }

.w5em {
  width: 5em; }

.w6em {
  width: 6em; }

.w7em {
  width: 7em; }

.w9em {
  width: 9em; }

.w10em {
  width: 10em; }

.w12em {
  width: 12em; }

.w15em {
  width: 15em; }

.w2pct {
  width: 2%; }

.w3pct {
  width: 3%; }

.w4pct {
  width: 4%; }

.w5pct {
  width: 5%; }

.w6pct {
  width: 6%; }

.w7pct {
  width: 7%; }

.w8pct {
  width: 8%; }

.w9pct {
  width: 9%; }

.w10pct {
  width: 10%; }

.w12pct {
  width: 12%; }

.w14pct {
  width: 14%; }

.w15pct {
  width: 15%; }

.w16pct {
  width: 16%; }

.w18pct {
  width: 18%; }

.w20pct {
  width: 20%; }

.w24pct {
  width: 24%; }

.w25pct {
  width: 25%; }

.w80pct {
  width: 80%; }

.ticker {
  color: white; }
  .ticker span {
    display: inline-block;
    height: 1.3em;
    border-radius: 0.4em;
    text-align: center; }

body.hasHover [data-tthover]:hover,
[data-tthover]:active,
body.hasHover .ticker:hover,
.ticker:active {
  text-decoration: underline;
  cursor: pointer;
  color: #478FCC; }

/** Input & textarea **/
@media all and (min-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0.3em;
    outline: 0;
    border: 1px solid;
    font-size: inherit;
    margin: 0;
    transition: border-color 0.2s linear, background-color 0.2s linear; } }

@media all and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    border-bottom: 2px solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    font-size: inherit;
    margin: 0;
    padding: 0; } }

input[type="text"].number {
  text-align: right; }

input[type="text"].text,
textarea {
  text-align: left;
  padding: 1px 0.5em; }

/*
input[type="text"]:focus {
	outline: 0;
}*/
.styled-select {
  height: 1.8em;
  /*1.6em*/
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: middle;
  transition: border-color 0.2s linear; }
  .styled-select.big {
    background-size: 2em 2em; }
  .styled-select select {
    background: transparent;
    width: calc(100% - 2px);
    /*substracting the border */
    border: 0;
    font-size: inherit;
    border-radius: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.2em 1em;
    outline: none; }
    .styled-select select:disabled {
      color: rgba(255, 255, 255, 0.15); }
    .styled-select select option {
      color: black; }

@media all and (min-width: 768px) {
  .styled-select {
    border: 1px solid;
    border-radius: 5px;
    background: url("img/selectArrowDark.png") no-repeat right;
    background-size: 1.8em 1.8em;
    margin-right: -0.5px; } }

@media all and (max-width: 767px) {
  .styled-select {
    height: calc(2rem + 2px);
    border: 0;
    border-radius: 8px;
    background: url("img/selectArrowDark.png") no-repeat right;
    background-size: calc(2rem + 2px) calc(2rem + 2px); }
  .styled-select select {
    padding: calc(0.5rem - 1px) 0.5rem; }
    .styled-select select.padding4big {
      padding: 2px 0.5rem; } }

.styled-select select:disabled {
  color: black; }

/***** flex table *****/
.flexTblHdr {
  border-top-left-radius: 0.7em;
  border-top-right-radius: 0.7em; }
  .flexTblHdr > div {
    letter-spacing: 0.5px;
    text-align: center; }
  .flexTblHdr div.flexTblRowHdr {
    width: 100%;
    height: 100%;
    display: flex; }
    .flexTblHdr div.flexTblRowHdr > div {
      padding-top: 4px; }
  .flexTblHdr div.withBar {
    position: relative; }
    .flexTblHdr div.withBar::after {
      content: '';
      width: 1px;
      height: 70%;
      position: absolute;
      right: 0;
      top: 15%; }
  .flexTblHdr div.withBottomBar {
    border-bottom: 1px solid; }

.flexTblContainer {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  .flexTblContainer .flexTbl {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    width: 100%;
    /*this is new as of 2020-05-29*/ }
    .flexTblContainer .flexTbl > div {
      letter-spacing: 0.5px;
      text-align: center; }
    .flexTblContainer .flexTbl div.flexTblRow {
      width: 100%;
      display: flex;
      align-items: center; }
      .flexTblContainer .flexTbl div.flexTblRow.withTopBar {
        border-top-width: 1px;
        border-top-style: solid; }

.flexTblContainer2 {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  .flexTblContainer2 .flexTbl {
    overflow: visible; }
    .flexTblContainer2 .flexTbl > div {
      letter-spacing: 0.5px;
      text-align: center; }
    .flexTblContainer2 .flexTbl div.flexTblRow {
      width: 100%;
      display: flex;
      align-items: center; }

.flexTblMobi {
  margin: 2rem 5vw 1rem 5vw;
  /*& > div {
		letter-spacing: 0.5px; //previous 1px
		text-align: center;
	}*/ }
  .flexTblMobi div.flexTblRowHdr {
    background: rgba(255, 255, 255, 0.15);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0.5em 0;
    font-weight: bold;
    width: 100%;
    display: flex;
    align-items: center; }
  .flexTblMobi div.flexTblRow {
    width: 100%;
    display: flex;
    align-items: center; }

.flexTblFtr > div {
  letter-spacing: 0.5px;
  text-align: center; }

.flexTblFtr div.flexTblRowFtr {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; }

div.flexRowGeneric {
  width: 100%;
  display: flex;
  align-items: center; }

.tabDelete {
  position: absolute;
  width: 10px;
  height: 10px;
  padding: 5px;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.3; }

body.hasHover .tabDelete:hover,
.tabDelete:active {
  opacity: 1; }

/* scrollBody */
table.scrollBody {
  table-layout: fixed;
  /* Not mandatory, but makes things faster. Setting columns width is mandatory */ }
  table.scrollBody tbody {
    overflow: auto; }
  table.scrollBody thead, table.scrollBody tbody, table.scrollBody tfoot {
    float: left;
    width: 100%; }
  table.scrollBody tr {
    width: 100%;
    display: table; }

.priceSourceDelay {
  position: absolute;
  padding-left: 0.5rem;
  left: 0;
  bottom: 0;
  color: #FF4954; }

/*
.warningBarBelowHeader {
	position: absolute;
	top: 0.2em;
	left: $pageMargin;
	right: $pageMargin;
	height: 1rem;
	color: $negativeColor;
}*/
.warningBar {
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 1rem;
  color: #FF4954; }

.warningBox {
  position: absolute;
  left: 0;
  color: #FF4954; }

/*** download button ***/
button.btnDownload {
  background-color: transparent;
  cursor: pointer;
  border-style: solid;
  border-width: 0;
  border-radius: 0.5em;
  transition: border-color 0.2s linear;
  outline: 0;
  height: 1.7rem;
  float: right;
  text-align: center;
  padding: 0 0.7rem 0 0; }
  button.btnDownload svg {
    height: 1.7em;
    display: block;
    margin: 0 auto;
    outline: 0;
    transition: fill 0.2s linear;
    fill: #478FCC; }
  button.btnDownload svg.red {
    fill: red; }

body.hasHover button.btnDownload:hover svg,
button.btnDownload:active svg {
  fill: #ACE4FD; }

.screenCentered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.loadingDataTxt {
  color: white;
  font-size: 24px;
  margin-bottom: 1em; }

.loader {
  border: 16px solid black;
  border-top: 16px solid #478FCC;
  border-bottom: 16px solid #478FCC;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: gwSpin 2s linear infinite;
  margin: auto;
  font-size: 15px;
  line-height: 4em; }

@keyframes gwSpin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.loader3p,
.loader3p:before,
.loader3p:after {
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: gwLoad3p 1.8s infinite ease-in-out;
  animation: gwLoad3p 1.8s infinite ease-in-out; }

.loader3p {
  color: #ffffff;
  font-size: 10px;
  margin: -1.2em 2.5em;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader3p:before,
.loader3p:after {
  content: '';
  position: absolute;
  top: 0; }

.loader3p:before {
  left: -1em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader3p:after {
  left: 1em; }

@-webkit-keyframes gwLoad3p {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

@keyframes gwLoad3p {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

/*************************** Header: */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: none;
  opacity: 0;
  transition: opacity 0.5s linear;
  overflow: hidden; }

#headerNewPortMobi,
#headerStrategySelectionMobi {
  display: none; }

.footer {
  display: none; }

@media all and (min-width: 768px) {
  #header {
    height: 3.1em; }
    #header .gwapLogo {
      fill: white;
      position: absolute;
      left: 1em;
      margin: 0;
      padding: 0;
      width: 100px; }
  #accType {
    right: 6.5rem;
    width: 5rem;
    height: inherit;
    line-height: 3.3rem;
    position: absolute;
    color: white;
    font-weight: bold;
    text-align: right; } }

@media all and (max-width: 767px) {
  #header {
    height: 4rem;
    border-bottom: 1px solid gray; }
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(4rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid gray;
    opacity: 0;
    transition: opacity 0.5s linear; }
    .footer div.mbox {
      position: relative;
      width: 25%;
      height: 4rem;
      display: inline-block;
      vertical-align: top; }
      .footer div.mbox svg {
        display: block;
        width: 50%;
        margin: 0 auto; }
      .footer div.mbox span {
        display: block;
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 15%;
        font-size: var(--font-small); }
    .footer div.mbox.selected {
      color: #478FCC;
      fill: #478FCC; }
    .footer div.mbox:not(.selected) {
      color: gray;
      fill: gray; }
    .footer div.mbox.red {
      color: red;
      fill: red; }
    .footer div.mbox:not(:last-child)::after {
      content: '';
      width: 1px;
      height: 60%;
      position: absolute;
      right: -1px;
      top: 15%;
      background-color: transparent; }
  #headerNewPortMobi,
  #headerStrategySelectionMobi {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4em;
    border-bottom: 1px solid gray;
    text-align: left; }
    #headerNewPortMobi h1,
    #headerStrategySelectionMobi h1 {
      font-size: var(--font-big);
      padding-left: 1rem;
      margin-top: 1rem; }
    #headerNewPortMobi h2,
    #headerStrategySelectionMobi h2 {
      font-size: var(--font-big);
      text-align: center;
      margin: 1rem 4rem 0 4rem; } }

#menuButton {
  letter-spacing: 2px;
  position: absolute;
  top: 0;
  right: 3.1rem;
  width: 3.3rem;
  height: inherit;
  cursor: pointer; }
  #menuButton img,
  #menuButton > div {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    overflow: hidden; }
  #menuButton div div {
    color: black;
    background-color: white;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.3em 0 0.4em 0.1em;
    font-family: "Arial Narrow", Arial, sans-serif; }
  #menuButton > span {
    font-size: 1.5em;
    padding-left: 0.05em;
    margin-top: 0.1em;
    display: inline-block; }

/* the common one above works
@media all and (min-width: 768px) {
	//desktop
	#menuButton {
		letter-spacing: 2px;
	
		position: absolute;
		top:0;
		right: 3.1rem;
		width: 3.3rem;
		height: inherit;
	
		cursor: pointer;
	    
	    img,
	    & > div {
		    position: absolute;
			top: 0.55rem;
			left: 0.55rem;
			width: 2rem;
			height: 2rem;
			border-radius: 1rem;
			overflow: hidden;
	    }
	    
	    div div {
			color: black;
			background-color: white;
			font-size: 1.4em;
			font-weight: bold;
			padding: 0.3em 0 0.4em 0.1em;
			font-family: "Arial Narrow", Arial, sans-serif;
		}
	}
}*/
#goFullscreenBtn,
#exitFullscreenBtn {
  display: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.6rem;
  position: absolute;
  right: 0;
  top: 0; }

/*************************** Menu: */
#menu {
  position: absolute;
  right: 0;
  top: 3.25em;
  width: 12em;
  border: 1px solid;
  text-align: left;
  transition: opacity 0.3s linear;
  z-index: 10; }
  #menu > div {
    padding: 0.6em 1em;
    cursor: pointer; }
    #menu > div a {
      color: inherit; }

@media all and (min-width: 768px) and (max-width: 1023px) {
  #tabs {
    left: 12em;
    display: flex; }
  #header .gwapLogo {
    top: 0.2em; } }

@media all and (min-width: 1024px) {
  #tabs {
    left: 10em;
    display: flex; }
  #header .gwapLogo {
    top: 0.5em; } }

#tabs {
  position: absolute;
  top: 0;
  right: 12em;
  height: inherit;
  overflow: hidden; }
  #tabs .tab {
    padding: 0.75em 0;
    line-height: 1.4em;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    float: left;
    /*width: 13em;*/
    /*height: inherit; -> not working as intended because of the padding */
    letter-spacing: 0px;
    /*previous 2px*/
    font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    flex: 0 1 13em;
    /* next 2 are tab delimiters */ }
    #tabs .tab.adv {
      padding: 0.25em 0; }
    #tabs .tab.selected {
      flex: 0 0 13em;
      font-weight: bold; }
      #tabs .tab.selected input[type="text"] {
        font-size: 1em;
        font-family: 'Nunito', sans-serif;
        font-weight: bold;
        letter-spacing: 0px;
        /*2px*/
        text-align: center;
        width: 80%;
        cursor: pointer; }
        #tabs .tab.selected input[type="text"].readonly {
          border: 0; }
      #tabs .tab.selected:first-child::before {
        content: '';
        width: 0; }
    #tabs .tab:not(.selected)::after {
      content: '';
      width: 1px;
      height: 70%;
      position: absolute;
      right: -1px;
      top: 15%; }
    #tabs .tab:first-child::before {
      content: '';
      width: 0;
      height: 70%;
      position: absolute;
      left: 0;
      top: 15%; }
    #tabs .tab:last-child {
      margin-right: 1px; }
    #tabs .tab span {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      position: absolute;
      left: 0;
      padding-left: 0.5em;
      white-space: nowrap;
      text-overflow: ellipsis; }
    #tabs .tab span.IBname {
      font-size: var(--font-small);
      position: relative;
      top: -0.5em; }

#portfolioSelectorDiv {
  width: calc(100% - 8rem);
  margin: 1rem auto 0 auto;
  background-color: #478FCC; }

@media all and (max-width: 767px) {
  #menuButton,
  #mobileAddButton {
    height: 2rem;
    width: 2rem;
    position: absolute;
    top: 1rem;
    border: 1px solid #478FCC;
    border-radius: 8px;
    color: #478FCC; }
  #mobileAddButton {
    left: 1rem; }
  #menuButton {
    right: 1rem; } }

/*************************** Sub-header: */
@media all and (max-width: 767px) {
  .subHeader {
    display: none; } }

@media all and (min-width: 768px) {
  .subHeader {
    height: 5rem;
    /*previous 4.5em*/
    position: absolute;
    top: 3.1rem;
    /* this is the header height*/
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.5s linear;
    /*box-shadow: 0 3px 5px 0px #C0C0C0;*/
    /*text-align: right;*/
    /*
	    div.subHdrRow1 {
		    margin: 1.5rem 1.5rem 0 $pageMargin;
		    height: 1.5rem;
		    padding: 0;
		    
		    font-weight: bold;
	    }
	    div.subHdrRow2 {
		    margin: 0.5rem 1.5rem 0 $pageMargin;
		    height: 1.5rem;
		    padding: 0;
		    
		    font-weight: bold;
	    }*/ }
    .subHeader span.withLpad {
      padding-left: 2rem; }
    .subHeader span.withRpad {
      padding-right: 2rem; }
    .subHeader span.ib {
      display: inline-block; }
    .subHeader .reblCol2Width {
      width: 17rem; }
    .subHeader div.flexRow1 {
      display: flex;
      align-items: center;
      margin: 1rem 1.5rem 0 1rem;
      height: 2rem;
      padding: 0;
      font-weight: bold; }
    .subHeader div.flexRow2 {
      display: flex;
      align-items: center;
      margin: 0.5rem 1.5rem 0 1rem;
      height: 1.5rem;
      padding: 0;
      font-weight: bold; }
    .subHeader .subSubHeader {
      display: inline-block;
      position: relative;
      padding-left: 1rem;
      letter-spacing: 0px;
      /*previous 2px*/
      float: left;
      margin: 0.5rem 0;
      font-weight: bold;
      height: 4rem; }
      .subHeader .subSubHeader p {
        height: 2rem;
        margin: 0; }
        .subHeader .subSubHeader p.toBottom {
          padding-top: 1rem; }
    .subHeader .timestamp {
      display: inline-block;
      font-style: italic;
      position: absolute;
      height: 1em;
      bottom: -1em;
      right: 1rem; }
    .subHeader .brokerConnection {
      display: inline-block;
      font-style: italic;
      position: absolute;
      height: 1em;
      bottom: -1em;
      right: 1rem; }
    .subHeader .navButtons {
      position: absolute;
      height: inherit;
      right: 1.1em;
      top: 0;
      /* not used
			a {
				display:inline-block;
				color:white;
			}*/ }
      .subHeader .navButtons .navBtnFull {
        box-sizing: border-box;
        position: relative;
        font-size: 1em;
        color: inherit;
        padding: 0;
        height: 4.15em;
        /*previous 3.7em*/
        width: 5.5em;
        /*previous 5.2em*/
        margin: 0.4em 0 0.4em 0.8em;
        border-radius: 0.5em;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        border-style: solid;
        border-width: 1px;
        transition: border-color 0.2s linear;
        outline: 0; }
        .subHeader .navButtons .navBtnFull:disabled {
          cursor: default; } }
      @media all and (min-width: 768px) and (max-width: 767px) {
        .subHeader .navButtons .navBtnFull:not(.showOnMobile) {
          display: none; } }

@media all and (min-width: 768px) {
        .subHeader .navButtons .navBtnFull img, .subHeader .navButtons .navBtnFull svg {
          height: 2.3em;
          display: block;
          margin: 0 auto;
          outline: 0;
          transition: fill 0.2s linear; }
        .subHeader .navButtons .navBtnFull svg.navArrowFw {
          position: absolute;
          top: 1.15em;
          right: 0.2em;
          height: 0.7em; }
        .subHeader .navButtons .navBtnFull svg.navArrowBk {
          position: absolute;
          top: 1.15em;
          left: 0.2em;
          height: 0.7em; }
        .subHeader .navButtons .navBtnFull div.txtBig {
          margin-top: 0em;
          /*previous 0.5em*/
          letter-spacing: 0px;
          /*previous 1px*/ }
        .subHeader .navButtons .navBtnFull div.txtBig2 {
          position: absolute;
          width: 100%;
          margin-top: -0.5em;
          letter-spacing: 0px;
          /*previous 1px*/ } }

@media all and (min-width: 768px) {
  div.pageMobile {
    display: none; } }

div.pageMobileOnly {
  position: fixed;
  top: 4rem;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0));
  left: 0;
  right: 0;
  overflow-y: auto;
  display: none; }
  div.pageMobileOnly h1 {
    margin: 0;
    padding: 3em 0;
    font-size: 6rem;
    text-align: center;
    color: #fff;
    background-color: #f1f1f1;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); }

div.pageMobile {
  height: calc(100% - 4rem - env(safe-area-inset-bottom, 0));
  overflow-y: auto; }
  div.pageMobile h1 {
    text-align: center;
    font-size: var(--font-big);
    margin-top: 1.5rem; }
  div.pageMobile .mobiSubpage:not(.selected) {
    display: none; }

div.dlgMobile {
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 4rem;
  left: 0;
  right: 0;
  display: none; }

.portfolioNAVMobi {
  padding-top: 1.5rem;
  font-size: var(--font-biggest);
  text-align: center;
  font-weight: bold; }

.underNAVrowMobi {
  font-weight: normal;
  text-align: center; }

div.mobileTabs {
  width: 61.8%;
  margin: 1.5em auto;
  border: 1px solid #478FCC;
  border-radius: 8px;
  overflow: hidden; }
  div.mobileTabs span {
    display: inline-block;
    width: 50%;
    padding: 0.5em 0;
    text-align: center; }
    div.mobileTabs span.selected {
      background-color: #478FCC; }

div.mobileTabs2 {
  width: 50%;
  margin: 0;
  border: 1px solid #478FCC;
  border-radius: 8px;
  overflow: hidden; }
  div.mobileTabs2 span {
    display: inline-block;
    width: 50%;
    padding: 0.5em 0;
    text-align: center; }
    div.mobileTabs2 span.selected {
      background-color: #478FCC; }

/*
div.mobileSwitches {
	font-size: var(--font-small);
	width: 95%;
	height: 2em;
	margin: 0 2.5%;
	
	div.mobileSwitchesLeft {
		float: left;
	}
	div.mobileSwitchesRight {
		float: right;
	}
	
	span {
		padding: 0 0.5em;
		display: inline-block;
		height: 4px;
	}
	
	span.selected {
		color: $gwapBlue;
		font-weight: bold;
		border-radius: 4px;
		box-shadow: 0 1.2em 0 0 $gwapBlue;
	}
	span:not(.selected) {
		color: gray;
	}
}*/
button.mobiTransparent {
  box-sizing: border-box;
  height: 3rem;
  width: calc(33vw - 1rem);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  text-align: center;
  transition: color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear; }
  button.mobiTransparent span.arrow {
    font-size: var(--font-big);
    line-height: 2.5rem; }

button.mobiNone {
  width: 4rem;
  border: none;
  text-align: center; }
  button.mobiNone span.arrow {
    font-size: 2.5em; }

button.textLike {
  font-size: var(--font-smallest);
  width: auto;
  height: 2em;
  padding: 0; }

button.textLikeSameSize {
  width: auto;
  /*height: 2em;*/
  padding: 0; }

.multiChartContainer {
  width: 100%;
  height: 61.8vw;
  position: relative; }

.svgChartMobi {
  background-color: transparent;
  width: 100%;
  height: 61.8vw;
  font-size: var(--font-small);
  transition: opacity 0.3s linear; }
  .svgChartMobi.selected {
    opacity: 1; }
  .svgChartMobi:not(.selected) {
    opacity: 0; }

.absPos {
  position: absolute; }

/* not used anymore
.graphLabel {
	position: absolute;
	top:4px;
	left: 52px; //48+4, 48-> left margin for mobile graph
	font-size: var(--font-small);
}*/
.mobiTreemapContainer {
  width: 55vw;
  height: 55vw;
  margin: 2rem auto 0 auto; }

.nameOrShares {
  color: grey; }

.flexTblRow.mobiGroup {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  /*border-bottom: 1px solid grey;*/
  font-weight: bold;
  background: rgba(255, 255, 255, 0.1); }

.flexTblRow.row1 {
  margin-top: 0.7em; }

.flexTblRow.row2 {
  margin-bottom: 0.7em; }

#signupContainer label input,
#signupContainer label span,
#signupContainer2 label input, #signupContainer2 label span {
  vertical-align: middle; }

/* Base for label styling */
[type="checkbox"].miaumiau:not(:checked),
[type="checkbox"].miaumiau:checked {
  position: absolute;
  left: -9999px; }

[type="checkbox"].miaumiau:not(:checked) + label,
[type="checkbox"].miaumiau:checked + label {
  position: relative;
  padding-left: 1.95em;
  padding-top: 0.15em;
  cursor: pointer; }

/* checkbox aspect */
[type="checkbox"].miaumiau + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  border: 2px solid #478FCC;
  background: transparent;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); }

/* checked mark aspect */
[type="checkbox"].miaumiau + label:after {
  content: '\2713\0020';
  position: absolute;
  top: 4px;
  left: 2px;
  font-size: 1.3em;
  line-height: 0.5;
  color: #478FCC;
  transition: all 0.2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; }

/* checked mark aspect changes */
[type="checkbox"].miaumiau:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0); }

[type="checkbox"].miaumiau:checked + label:after {
  opacity: 1;
  transform: scale(1); }

/*************************** Home page: */
@media all and (min-width: 768px) {
  #signxxContainer {
    font-size: 18px;
    --font-normal: 18px;
    --font-small: 16px;
    --font-smallest: 14px;
    --font-big: 20px;
    --font-biggest: 22px; }
  #signxxContainer .font-normal {
    font-size: 18px; }
  #signxxContainer .font-small {
    font-size: 16px; }
  #signxxContainer .font-smallest {
    font-size: 14px; }
  #signxxContainer .font-big {
    font-size: 20px; }
  #signxxContainer .font-biggest {
    font-size: 22px; } }

@media all and (max-width: 767px) {
  #signxxContainer {
    font-size: 18px;
    --font-normal: 18px;
    --font-small: 16px;
    --font-smallest: 14px;
    --font-big: 20px;
    --font-biggest: 12px; }
  #signxxContainer .font-normal {
    font-size: 18px; }
  #signxxContainer .font-small {
    font-size: 16px; }
  #signxxContainer .font-smallest {
    font-size: 14px; }
  #signxxContainer .font-big {
    font-size: 20px; }
  #signxxContainer .font-biggest {
    font-size: 22px; } }

#homePage {
  background: no-repeat fixed center center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  top: 0;
  opacity: 0.01;
  transition: opacity 0.5s linear; }

@media all and (min-width: 768px) {
  #homePage {
    background-image: url("img/signinDesktopBg.jpg"); } }

@media all and (min-width: 768px) and (max-height: 799px) {
  #signxxContainer {
    height: 600px;
    top: calc(50vh - 600px/2); } }

@media all and (min-width: 768px) and (min-height: 700px) {
  #signxxContainer {
    height: 700px;
    top: calc(50vh - 700px/2); } }

@media all and (min-width: 768px) {
  #homePage > .gwapLogo {
    fill: white;
    position: absolute;
    left: 1.2em;
    top: 0.7em;
    width: 7em;
    margin: 0;
    padding: 0; }
  #signxxContainer {
    width: 380px;
    position: absolute;
    left: calc(50vw - 380px/2); }
    #signxxContainer .labelRow {
      font-size: var(--font-small); }
    #signxxContainer .labelRowWhite {
      margin-top: 3rem;
      line-height: 120%; }
    #signxxContainer .tosRow {
      margin-top: 3rem;
      line-height: 120%;
      font-size: var(--font-normal); }
    #signxxContainer .litBtnsContainer span {
      width: calc(380px/4);
      line-height: calc(380px/4); }
    #signxxContainer button.sbmt {
      width: calc(380px/2); }
  #copyright {
    position: absolute;
    bottom: 2em;
    width: 100%;
    font-size: 0.7em;
    text-align: center;
    color: white;
    margin: 0; } }

@media all and (min-width: 768px) and (max-height: 770px) {
  #copyright {
    display: none; } }

@media all and (max-width: 767px) {
  #signxxContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto; }
    #signxxContainer .litBtnsContainer span {
      width: 25vw;
      line-height: 25vw; }
    #signxxContainer button.sbmt {
      width: 50vw; }
  #copyright {
    display: none; } }

#noInternetMsg {
  display: none;
  color: white;
  text-align: center;
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  font-size: 2em;
  line-height: 2em; }

#signupTOS {
  position: absolute;
  padding: 1rem;
  background-color: white;
  color: black;
  top: 0;
  bottom: 4em;
  overflow-y: scroll; }

#signupTOSbuttons {
  position: absolute;
  text-align: center;
  padding: 1rem;
  bottom: 0;
  left: 0;
  right: 0; }

/*#signupTOSbuttons {
	height: 3em;
}*/
#signupTOSbuttons {
  height: 4em;
  background-color: white;
  color: black; }

#signxxContainer {
  background-color: #1F1F2F;
  /* white (default) inputs */ }
  #signxxContainer input[type="text"],
  #signxxContainer input[type="number"],
  #signxxContainer input[type="password"],
  #signxxContainer input[type="email"],
  #signxxContainer input[type="date"],
  #signxxContainer textarea {
    background-color: transparent;
    border-bottom-color: #478FCC; }
  #signxxContainer .gwapLogo {
    fill: white;
    width: 9.5rem;
    margin: 0 auto;
    padding: 0; }
  #signxxContainer .gwapLogoInvSmart {
    font-size: var(--font-big);
    line-height: 50%; }
  #signxxContainer div.signupFooter,
  #signxxContainer div.signupFooterSmall {
    /*position: absolute;
		bottom: 0;*/
    width: 100%;
    height: 7rem;
    margin-top: 2rem;
    position: -webkit-sticky;
    position: sticky;
    top: calc(100% - 7rem); }
  #signxxContainer div.signupFooterSmall {
    height: 3rem;
    top: calc(100% - 3rem); }
  #signxxContainer div.alreadyAccount {
    opacity: 0.7;
    border-top: rgba(255, 255, 255, 0.3) thin solid;
    font-size: var(--font-normal);
    line-height: 150%;
    margin: 1rem 0.5rem;
    padding-top: 0.3rem; }
  #signxxContainer .fgtPw {
    font-size: var(--font-normal);
    line-height: 4rem; }

#signinContainer,
#signupContainer,
#signupContainer2 {
  /*position: absolute;
	top:0;
	left:2rem;
	right: 2rem;
	bottom: 0;*/
  text-align: center;
  padding: 1px 2rem;
  min-height: calc(100% - 2px); }
  #signinContainer .halfRow,
  #signupContainer .halfRow,
  #signupContainer2 .halfRow {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 50%; }
  #signinContainer h1,
  #signupContainer h1,
  #signupContainer2 h1 {
    font-size: 1.5rem; }
  #signinContainer button.sbmt,
  #signupContainer button.sbmt,
  #signupContainer2 button.sbmt {
    padding: 0.3rem 0;
    border-radius: 25px;
    font-size: var(--font-big);
    cursor: pointer; }
  #signinContainer p.cl1,
  #signupContainer p.cl1,
  #signupContainer2 p.cl1 {
    width: 100%;
    margin-top: 0;
    font-size: var(--font-big); }
    #signinContainer p.cl1 input,
    #signupContainer p.cl1 input,
    #signupContainer2 p.cl1 input {
      width: 100%;
      height: 2em;
      border-top-width: 0;
      border-right-width: 0;
      border-left-width: 0;
      margin-bottom: 1em;
      border-radius: 2px; }
    #signinContainer p.cl1 input::placeholder,
    #signupContainer p.cl1 input::placeholder,
    #signupContainer2 p.cl1 input::placeholder {
      color: rgba(255, 255, 255, 0.7); }

#signupAccountExplanation {
  min-height: 7rem;
  font-size: var(--font-normal); }

#signinContainer h1 {
  margin: 3rem 0; }

#signupContainer h1,
#signupContainer2 h1 {
  margin: 2rem 0 0 0; }

#signupContainer .litBtnsContainer,
#signupContainer2 .litBtnsContainer {
  display: flex;
  justify-content: space-around;
  margin: 0.5em 0 0.3em 0; }
  #signupContainer .litBtnsContainer span,
  #signupContainer2 .litBtnsContainer span {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: var(--font-big);
    cursor: pointer; }
  #signupContainer .litBtnsContainer span.selected,
  #signupContainer2 .litBtnsContainer span.selected {
    background-color: #478FCC; }
  #signupContainer .litBtnsContainer span.disabled,
  #signupContainer2 .litBtnsContainer span.disabled {
    background-color: #FF4954; }
  #signupContainer .litBtnsContainer span:hover,
  #signupContainer2 .litBtnsContainer span:hover {
    background-color: #2c5c88; }

@media all and (max-height: 699px) {
  #signxxContainer div.logoBox {
    margin: 2rem 0; }
  #signxxContainer .spacer {
    width: 100%;
    height: 1rem; } }

@media all and (min-height: 700px) {
  #signxxContainer div.logoBox {
    margin: 2em 0; }
  #signxxContainer .spacer {
    width: 100%;
    height: 2rem; } }

#signinChangePassword {
  display: none; }

.linkColor {
  color: #478FCC;
  cursor: pointer; }

/*************************** Start page: */
.radioButtonsContainer {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between; }

@media all and (min-width: 768px) {
  .radioButtonsContainer.risks {
    position: absolute;
    width: 60%;
    padding-left: 4px;
    padding-top: 10px; } }

@media all and (max-width: 767px) {
  .radioButtonsContainer {
    margin-top: 1rem;
    flex-wrap: wrap; } }

#returnVsRisk,
#returnVsRisk2 {
  width: calc(100% + 10px);
  height: 200px;
  margin-top: 2rem;
  margin-left: -10px; }

.nextContainer {
  position: relative;
  bottom: 0;
  width: 60%;
  margin: 1.5rem auto;
  padding: 1rem 0;
  height: 5rem;
  text-align: center; }

.questTitle {
  text-align: center;
  color: #6F6F6F;
  margin-top: 2.5rem;
  letter-spacing: 0.5px; }

@media all and (min-width: 768px) {
  div.questionBox {
    width: 60%; }
  .coloredRadio,
  .greyBlueRadio {
    flex: 0 1 calc(9rem - 2px);
    font-size: 1rem;
    height: 3.4rem; } }

@media all and (max-width: 767px) {
  div.questionBox {
    width: calc(100% - 2rem); }
    div.questionBox input {
      width: 100%;
      font-size: var(--font-big); }
    div.questionBox .blueToggle {
      height: 3rem;
      width: calc(33vw - 1.5rem);
      background-color: transparent; }
  .coloredRadio,
  .greyBlueRadio {
    flex: 0 0 calc(33vw - 1.5rem);
    margin-top: 1rem;
    height: 3rem; }
  button.generic {
    width: calc(33vw - 1.5rem); }
  button.btn3AlignCenter {
    position: absolute;
    left: calc(33vw - 0.66rem); }
  button.btn3AlignRight {
    position: absolute;
    left: calc(66vw - 0.33rem); } }

div.questionBox {
  margin: 0 auto;
  border-radius: 5px;
  border-style: solid;
  border-width: 0px;
  padding: 1em 0;
  box-sizing: border-box;
  transition: opacity 0.5s linear, border-color 0.2s linear; }
  div.questionBox p.question {
    margin: 0;
    padding: 0;
    letter-spacing: 0.5px; }
  div.questionBox p.textBig {
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0 0;
    padding: 0; }
  div.questionBox span.labelSpan {
    color: gray; }
  div.questionBox .coloredHeader {
    width: 100%;
    margin: -1em -3em 0 -3em;
    padding: 1em 3em; }
  div.questionBox div.questionLine {
    width: 100%;
    padding: 1rem 0;
    transition: opacity 0.5s linear; }
    div.questionBox div.questionLine > table {
      margin-left: 0px;
      width: calc(100% - 0px); }
    div.questionBox div.questionLine:nth-child(1n+2) {
      border-top-style: solid;
      border-top-width: 1px;
      transition: border-color 0.2s linear; }
  div.questionBox .newPortRow {
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0 0;
    padding: 0;
    height: 2.4rem; }
    div.questionBox .newPortRow .newPortElmLeft {
      flex: 1 1 10rem;
      text-align: left; }
    div.questionBox .newPortRow .newPortElmCenter {
      flex: 0 0 10rem;
      text-align: center; }
    div.questionBox .newPortRow .newPortElmRight {
      flex: 1 1 10rem;
      text-align: right; }
  div.questionBox .newPortRow.withMarginBottom {
    margin-bottom: 1.5rem; }
  div.questionBox .newPortRow.doubleHeight {
    height: 4.8rem; }
  div.questionBox .newPortRow.smallHeight {
    height: 0.7rem; }

.greyBlueRadio,
.coloredRadio,
.blueToggle {
  box-sizing: border-box;
  border-style: solid;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center; }

.greyBlueRadio {
  border-width: 1px; }
  .greyBlueRadio.disabled {
    cursor: not-allowed; }

.coloredRadio {
  border-width: 2px; }
  .coloredRadio.disabled {
    cursor: not-allowed; }
  .coloredRadio:not(.disabled).r1 {
    color: #185f29;
    border-color: #185f29; }
    .coloredRadio:not(.disabled).r1.selected {
      color: white;
      background-color: #185f29; }
  .coloredRadio:not(.disabled).r2 {
    color: #608c42;
    border-color: #608c42; }
    .coloredRadio:not(.disabled).r2.selected {
      color: white;
      background-color: #608c42; }
  .coloredRadio:not(.disabled).r3 {
    color: #b9c94a;
    border-color: #b9c94a; }
    .coloredRadio:not(.disabled).r3.selected {
      color: white;
      background-color: #b9c94a; }
  .coloredRadio:not(.disabled).r4 {
    color: #eeb533;
    border-color: #eeb533; }
    .coloredRadio:not(.disabled).r4.selected {
      color: white;
      background-color: #eeb533; }
  .coloredRadio:not(.disabled).r5 {
    color: #dc5a34;
    border-color: #dc5a34; }
    .coloredRadio:not(.disabled).r5.selected {
      color: white;
      background-color: #dc5a34; }
  .coloredRadio:not(.disabled).r6 {
    color: red;
    border-color: red; }
    .coloredRadio:not(.disabled).r6.selected {
      color: white;
      background-color: red; }

body.hasHover div.questionBox .coloredRadio:not(.disabled):hover,
div.questionBox .coloredRadio:not(.disabled):active {
  border-width: 3px;
  padding-top: calc(0.5em - 1px); }

div.selStrategyName {
  font-size: var(--font-biggest);
  text-align: center;
  padding-top: 1rem;
  padding: 1rem 4rem 0 4rem; }

div.selStrategyNameFlex {
  font-size: var(--font-biggest);
  text-align: center;
  flex: 1 0 10rem; }

#mobiStrategySelector {
  height: 100%; }

.mobiSlide {
  text-align: center;
  outline: none;
  height: 100%; }
  .mobiSlide div.slideContainer {
    overflow-y: auto;
    height: 100%; }
  .mobiSlide .metricsRow {
    margin: 1rem 1.5rem 0 1.5rem;
    display: flex;
    align-content: space-around; }
    .mobiSlide .metricsRow .metricsItem {
      flex: 1 0 5rem;
      text-align: center; }
      .mobiSlide .metricsRow .metricsItem .metricsItemTop {
        font-size: var(--font-biggest); }
      .mobiSlide .metricsRow .metricsItem .metricsItemBtm {
        font-size: var(--font-small); }
  .mobiSlide .greyRow {
    margin-top: 2rem;
    text-align: center;
    font-size: var(--font-smallest); }
  .mobiSlide .subpagePerformance:not(.selected) {
    display: none; }
  .mobiSlide .subpageAllocation:not(.selected) {
    display: none; }
  .mobiSlide p {
    text-align: justify;
    margin: 2rem 1.5rem; }

.btnStrat {
  flex: 0 0 4rem;
  height: 4rem; }
  .btnStrat span {
    display: inline-block;
    margin: 1.2rem;
    width: 1.6rem;
    height: 1.6rem;
    text-align: center;
    font-size: var(--font-big);
    color: white;
    line-height: 1.25; }
    .btnStrat span.r1 {
      background-color: #185f29; }
    .btnStrat span.r2 {
      background-color: #608c42; }
    .btnStrat span.r3 {
      background-color: #b9c94a; }
    .btnStrat span.r4 {
      background-color: #eeb533; }
    .btnStrat span.r5 {
      background-color: #dc5a34; }
    .btnStrat span.r6 {
      background-color: red; }
    .btnStrat span.fill {
      border: 1px solid #478FCC;
      border-radius: 8px;
      color: #478FCC; }

.pageColumn1 {
  left: 1rem;
  width: calc(27.5vw - 1rem); }

.pageColumn2 {
  left: calc(27.5vw + 1rem);
  width: calc(45vw - 2*1rem); }

.pageColumn3 {
  left: 72.5vw;
  width: calc(27.5vw - 1rem); }

@media all and (max-width: 767px) {
  div.pageColumn {
    display: none; } }

div.pageColumn {
  position: absolute;
  top: 1rem; }
  div.pageColumn .columnBox .h1 {
    height: calc(27.5vw - 3*1rem); }
  div.pageColumn .columnBox .h12 {
    height: calc(55vw - 2*1rem + 1rem + 4px); }
  div.pageColumn .columnBox .h1half {
    height: calc(13.75vw - 2*1rem - 1.5rem - 2px); }
  div.pageColumn .columnBox .h1noMargin {
    height: calc(27.5vw - 4*1rem); }
  div.pageColumn .columnBox .h1extraMargin {
    height: calc(27.5vw - 2*1rem); }
  div.pageColumn .columnBox.h1double {
    height: calc(55vw - 4*1rem + 9rem + 2px);
    overflow: hidden; }
    div.pageColumn .columnBox.h1double > p {
      margin: 0; }
  div.pageColumn .columnBox .h1tbl {
    height: calc(27.5vw - 3*1rem + 3rem - 6px); }
  div.pageColumn .columnBox .tblBottomMargin {
    margin-bottom: calc(1*1rem); }

div.columnBox {
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative; }
  div.columnBox .h1half {
    margin-bottom: 1em; }

.halfWidthLeft {
  width: calc(50% - 0.5rem);
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin-bottom: 1rem; }

.halfWidthRight {
  width: calc(50% - 0.5rem);
  display: inline-block;
  vertical-align: top;
  text-align: right;
  margin-bottom: 1rem;
  margin-left: 1rem; }

.monthlyReturnsTable {
  width: 100%;
  text-align: center;
  border-radius: 0.7em;
  overflow: hidden;
  border-spacing: 0; }
  .monthlyReturnsTable th {
    font-weight: normal;
    padding: 0.2em 0.1em; }
  .monthlyReturnsTable td {
    padding: 0.4em 0.1em; }

.aaNav {
  height: 4em;
  width: 2em;
  margin: -1em -0.8em;
  border: none;
  outline: 0;
  background-size: auto 40%;
  background-repeat: no-repeat;
  background-color: transparent;
  color: white;
  cursor: pointer; }

.aaPrev {
  background-position: right center;
  float: left;
  text-align: right; }

.aaNext {
  background-position: left center;
  float: right;
  text-align: left; }

.aaPrev:disabled,
.aaNext:disabled {
  cursor: default; }

/* Facts sheet page */
.svgChart {
  border-radius: 0.5rem; }

/* next 2 are SVG CSS */
.svgChart--positive {
  fill: #50E3C2; }

.svgChart--negative {
  fill: #FF4954; }

body.hasHover .svgChart--positive:hover {
  fill: #56e48f; }

body.hasHover .svgChart--negative:hover {
  fill: #FEC93E; }

.svgChart path.domain {
  stroke: #6F6F6F; }

.svgChart .line path {
  fill: none;
  stroke-width: 2px;
  /*stroke-linejoin: round;*/ }

/*.svgChart .axis {
  font-size: 10px;
}*/
.svgChart .axis path,
.svgChart .axis line {
  fill: none;
  stroke: #676b7e;
  stroke-width: 1px;
  shape-rendering: auto;
  /*previous crispEdges*/ }

.stop-left-fill-blue {
  stop-color: #174168; }

.stop-right-fill-blue {
  stop-color: #277DBE; }

.stop-left-fill-orange {
  stop-color: #BD302C; }

.stop-right-fill-orange {
  stop-color: #E78932; }

.stop-left-fill-green {
  stop-color: #619e38; }

.stop-right-fill-green {
  stop-color: #3f6f16; }

.stop-left-stroke-blue {
  stop-color: #155C7F; }

.stop-right-stroke-blue {
  stop-color: #5ACAF0; }

.stop-left-stroke-orange {
  stop-color: #F0642F; }

.stop-right-stroke-orange {
  stop-color: #FEC93E; }

.stop-left-stroke-green {
  stop-color: #8dd244; }

.stop-right-stroke-green {
  stop-color: #4c8b30; }

.svgChart .line path.fill-orange {
  fill: #FF4954;
  stroke: none; }

.svgChart .line path.fill-green {
  fill: #50E3C2;
  stroke: none; }

.svgChart .line path.stroke-blue {
  fill: none;
  stroke: url(#gradient-stroke-blue);
  stroke-width: 2px;
  /* previously 0.5px */
  /*stroke-linejoin: round;*/ }

.svgChart .line path.stroke-orange {
  fill: none;
  stroke: #FF4954;
  stroke-width: 2px;
  /* previously 0.5px */
  /*stroke-linejoin: round;*/ }

.svgChart .line path.stroke-green {
  fill: none;
  stroke: #50E3C2;
  stroke-width: 2px;
  /* previously 0.5px */
  /*stroke-linejoin: round;*/ }

/* .svgChart .line text {
  font: 10px sans-serif;
  /*text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
} */
.svgChart .namelabel, .svgChart .namelabel2 {
  /*font: 0.5em sans-serif;*/
  vertical-align: middle; }

.svgChart .textlabel--positive {
  /*font: 0.5em sans-serif;*/
  fill: #50E3C2;
  text-align: center;
  vertical-align: middle; }

.svgChart .textlabel--negative {
  /*font: 0.5em sans-serif;*/
  fill: #FF4954;
  text-align: center;
  vertical-align: middle; }

.svgChart .grid line {
  stroke-opacity: 0.1; }

.svgChart .grid path {
  stroke-width: 0; }

.svgChart .overlay {
  fill: none;
  pointer-events: all; }

.svgChart .focus {
  pointer-events: none !important; }

.svgChart .focus circle {
  fill: #478FCC;
  stroke: #478FCC; }

/* Overview page */
#portfolioNews,
#portfolioNewsMobi {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  #portfolioNews li,
  #portfolioNewsMobi li {
    margin-bottom: 1em; }
  #portfolioNews p,
  #portfolioNewsMobi p {
    margin: 0;
    line-height: normal; }
    #portfolioNews p.related,
    #portfolioNewsMobi p.related {
      font-style: italic; }

/*
#monthlyReturnsPort,
#monthlyReturnsPortTable, 
#HoldingsPortTable {
	min-height: 13rem;
}*/
#monthlyReturnsPortTable {
  min-height: 4rem; }

#dailyMoversMobileContainer {
  height: calc(30vh - 2.7rem); }

#graphMobileContainer {
  height: calc(37vh - 2.7rem); }

#newsMobiContainer {
  height: calc(33vh - 2.7rem); }
  #newsMobiContainer #portfolioNewsMobi {
    height: calc(100% - 3.5rem);
    overflow-y: auto; }

/* not used
#NAVPortMobi,
#cumulativeReturnsPortMobi {
	transition: all 0.5s linear;
}*/
#graphMobiFS {
  display: none;
  opacity: 0.01;
  position: absolute;
  transform: rotate(90deg);
  transform-origin: bottom left;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vw;
  margin-top: -100vw;
  transition: opacity 0.5s linear;
  background-color: black; }

div.graphSwitches {
  font-size: var(--font-small);
  width: 95%;
  height: 2em;
  margin: 0 2.5%; }
  div.graphSwitches.graphSwitchesCenter {
    text-align: center; }
  div.graphSwitches div.graphSwitchesLeft {
    float: left; }
  div.graphSwitches div.graphSwitchesRight {
    float: right; }
  div.graphSwitches span {
    padding: 0 0.5em;
    display: inline-block;
    height: 4px;
    cursor: pointer; }
  div.graphSwitches span.selected {
    color: #478FCC;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 1.2em 0 0 #478FCC; }
  div.graphSwitches span:not(.selected) {
    color: gray; }

.hdrW3 {
  width: calc(100vw/11*3 - 5*1rem/11*3 - 0.01px);
  max-width: 25.5rem; }

.hdrW2 {
  width: calc(100vw/11*2 - 5*1rem/11*2 - 0.01px);
  max-width: 17rem; }

.hdrW2less {
  width: calc(100vw/11*2 - 5*1rem/11*2 - 0.01px - 0.5rem);
  max-width: calc(2*8.5rem - 0.5rem); }

.hdrW1 {
  width: calc(100vw/11*1 - 5*1rem/11*1 - 0.01px);
  max-width: 8.5rem; }

.hdrBtn {
  width: calc(100vw/11 - 5*1rem/11 - 1rem);
  max-width: calc(8.5rem - 1rem); }

#sh2Bottom2 {
  display: none; }

#page2ReturnAndVolatility {
  width: 20rem;
  /*previously 18.2rem */
  height: 4.6rem;
  float: left;
  margin: 0.2rem 1rem; }
  #page2ReturnAndVolatility table {
    height: inherit;
    width: 100%;
    line-height: 0.9em;
    border: 1px solid;
    transition: border-color 0.2s linear;
    border-radius: 5px;
    text-align: center; }
    #page2ReturnAndVolatility table tr:first-child > th {
      border-bottom: 0px solid; }

/* not used ATM
#aaCumulativeReturns {
	width: 18em;
	height: 5em;
	float: left;
	margin: 0.2em 0;
}
@media only screen and (max-width: 800px){
	#aaCumulativeReturns {
		display: none; //we need space for 3 buttons, so we need to take this out for too-small resolutions
	}
}
*/
div.pageCanvas1 {
  padding: 1em 1em 0 1em; }

div.pageCanvas2 {
  border-radius: 0.5em;
  padding: 0em 1em 1em 1em;
  position: relative;
  height: 85vh; }

#aaFilters {
  width: 100%; }
  #aaFilters .filterBox {
    display: inline-block;
    vertical-align: top; }
    #aaFilters .filterBox:not(:last-child) {
      margin-right: 1rem; }
    #aaFilters .filterBox.w1 {
      width: calc(100vw/11*1 - 5*1rem/11*1 - 0.01px);
      max-width: 8.5rem; }
    #aaFilters .filterBox.w2 {
      width: calc(100vw/11*2 - 5*1rem/11*2 - 0.01px);
      max-width: 17rem; }
    #aaFilters .filterBox.w3 {
      width: calc(100vw/11*3 - 5*1rem/11*3 - 0.01px);
      max-width: 25.5rem; }
    #aaFilters .filterBox.w4 {
      width: calc(100vw/11*4 - 5*1rem/11*4 - 0.01px);
      max-width: 34rem; }
    #aaFilters .filterBox.w5 {
      width: calc(100vw/11*5 - 5*1rem/11*5 - 0.01px);
      max-width: 42.5rem; }
    #aaFilters .filterBox .buttonsBox div {
      position: relative;
      border: 2px solid;
      box-sizing: border-box;
      outline: none;
      vertical-align: bottom;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      line-height: 1em;
      padding: 12px 6px 6px 6px;
      border-radius: 0.5em;
      width: calc(100vw/11*1 - 5*1rem/11*1 - 0.01px);
      max-width: 8.5rem;
      height: calc(100vw/11*0.618 - 5*1rem/11/1.618);
      max-height: 5.253rem; }
      #aaFilters .filterBox .buttonsBox div span.name {
        color: white;
        display: table-cell;
        vertical-align: middle;
        width: inherit;
        height: calc(3.9em - 4px);
        line-height: 1.2em; }
      #aaFilters .filterBox .buttonsBox div span.lock {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        padding: 0 0.7em;
        /*cursor: crosshair;
				label {
					cursor: inherit;
				}*/ }
      #aaFilters .filterBox .buttonsBox div span.filterPercent {
        position: absolute;
        top: 0;
        right: 0;
        color: white;
        padding: 0.3em;
        min-width: 2.5em;
        width: 3.7em;
        display: inline-block;
        text-align: right; }
      #aaFilters .filterBox .buttonsBox div span.maxFilter {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0.2em;
        color: #FF4954; }
      #aaFilters .filterBox .buttonsBox div input[type="text"] {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.1em;
        min-width: 2.5em;
        width: 3.7em;
        display: inline-block;
        text-align: right;
        border-radius: 0.27em;
        border: 0px; }
        #aaFilters .filterBox .buttonsBox div input[type="text"]:disabled {
          -webkit-text-fill-color: white;
          color: white;
          background-color: inherit;
          border-color: transparent; }
      #aaFilters .filterBox .buttonsBox div input[type="checkbox"] {
        display: none; }

#aaSortAndGroup {
  width: 100%;
  height: 2rem;
  padding: 1rem 0;
  overflow: hidden;
  letter-spacing: 0.5px;
  white-space: nowrap; }

#aaETFsTblHdr {
  width: 100%;
  height: 4em; }

#aaETFsTblContainer {
  bottom: 1rem;
  right: 0;
  left: 1rem;
  top: 8rem; }

#aaETFsTbl > div.flexTblRow.group div.hdr {
  text-align: left;
  font-weight: bold;
  padding: 0.2em 0em;
  /*previously padding: 0.2em 2em; */ }

#aaETFsTbl > div.flexTblRow {
  /* :not(.group) */
  height: 3em;
  align-items: center; }
  #aaETFsTbl > div.flexTblRow input[type="text"]:disabled {
    background-color: transparent;
    border-color: transparent;
    color: white; }

/** lock checkbox **/
.withLocker input[type="checkbox"] {
  display: none; }

.withLocker input[type="checkbox"] + label svg {
  display: inline-block;
  vertical-align: middle;
  height: 1.8em;
  max-width: 2em;
  /* IE*/ }

.withLocker label {
  cursor: pointer; }

.withLocker span {
  cursor: pointer; }

.withLocker .bar {
  position: relative; }
  .withLocker .bar .full {
    position: absolute;
    width: 100%;
    left: 0%;
    right: 0%;
    top: 1.5em;
    height: 3px; }
  .withLocker .bar .range, .withLocker .bar .value {
    position: absolute;
    background-color: #69697a;
    top: 1.5em;
    height: 3px;
    transition: background-color 0.4s linear; }
  .withLocker .bar .tip {
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    top: 1.5em;
    border-radius: 0.5em;
    margin-left: -0.5em;
    margin-top: -0.5em;
    transition: background-color 0.4s linear; }
  .withLocker .bar div.gridPlaceholder {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    height: 50%;
    color: #FF4954;
    text-align: left;
    pointer-events: none; }
    .withLocker .bar div.gridPlaceholder svg {
      stroke: white;
      /*#0C152F*/
      stroke-width: 1;
      fill: none;
      text-anchor: middle; }

.withLocker div:not(.locked) .bar .tip {
  /*border:0.6em solid;/* previously 0.5em */
  cursor: ew-resize; }

.withLocker .hidden {
  display: none; }

.warningBarFilters {
  margin: 0.2rem 0;
  height: 1rem;
  color: #FF4954; }

/* Correlations page */
/*#correlationsExportContainer {
	position: absolute;
	top: 0.3rem;//2rem;
	left:$pageMargin;
	right: $pageMargin;
	height: 1.7rem;
    z-index: 10;
}*/
div.corrHdr {
  position: absolute;
  white-space: nowrap; }
  div.corrHdr.topleft {
    top: 1em;
    left: 1rem;
    height: 2em;
    width: 11em;
    text-align: left;
    border-top-left-radius: 0.78em;
    /*0.5/0.64*/ }
  div.corrHdr.horizontal {
    top: 1em;
    height: 2em;
    left: calc(11em + 1rem);
    right: 0;
    overflow: hidden;
    text-align: left; }
    div.corrHdr.horizontal > span {
      position: relative;
      display: inline-block;
      vertical-align: top;
      height: 100%;
      width: 9em;
      /* 9/1.2 */
      text-align: center;
      line-height: 1.8em; }
      div.corrHdr.horizontal > span .tabDelete {
        top: 0;
        right: 0; }
  div.corrHdr.vertical {
    top: 3em;
    left: 1rem;
    width: 11em;
    bottom: 0;
    overflow: hidden;
    text-align: center;
    white-space: nowrap; }
    div.corrHdr.vertical > div {
      height: 1em;
      width: 11em;
      padding: 0.3em;
      box-sizing: border-box; }
  div.corrHdr > div.roundedTL {
    border-top-left-radius: 0.78em;
    /*0.5/0.64*/ }

div.corrTbl {
  position: absolute;
  top: 3em;
  left: calc(11em + 1rem);
  bottom: 0;
  right: 0;
  overflow: auto; }
  div.corrTbl > div {
    white-space: nowrap; }
    div.corrTbl > div > span {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      width: 8em;
      /*width + padding: 9em */
      padding: 0.3em 0.5em;
      white-space: normal;
      /*otherwise it is inherited from above*/
      height: calc(100% - 0.6em); }
      div.corrTbl > div > span.hdr.roundedTR {
        border-top-right-radius: 0.78em;
        /*0.5/0.64*/ }

.closeLines {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1em; }

#trPortfolioTblHdr {
  position: absolute;
  top: 1em;
  left: 1rem;
  right: 1rem; }

#trPortfolioTblContainer {
  top: 6em;
  /*1+2+3*/
  bottom: 0em;
  right: 0;
  left: 1rem;
  height: 8em;
  /* approx 3 rows */ }

#trPortfolioTblFtr {
  position: absolute;
  top: 14em;
  /*6+8*/
  left: 1rem;
  right: 1rem; }

/*
#transactionsExportContainer {
	position: absolute;
	top: 17rem;//14 +2.5+0.5
	left:$pageMargin;
	right: $pageMargin;
	height: 1.7rem;
}*/
#trTransactionsTblHdr {
  position: absolute;
  top: 19rem;
  /*17+1.5+0.5*/
  left: 1rem;
  right: 1rem; }

#trTransactionsTblContainer {
  top: 24em;
  /*19+2+3*/
  bottom: 3em;
  right: 0;
  left: 1rem; }

#trTransactionsTblFtr {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  height: 2em; }

input.qtyInput {
  width: 80%;
  max-width: 5em; }

#trTransactionsTbl > div.flexTblRow input:disabled {
  background-color: transparent !important;
  border: 0em; }

#trTransactionsTbl > div.flexTblRow > div:not(.opaque) {
  transition: opacity 0.3s linear; }

#trTransactionsTbl > div.flexTblRow.disabled > div:not(.opaque) {
  opacity: 0.1;
  transition: opacity 0.3s linear; }

button.ShowAddTransaction {
  border-radius: 0.3em;
  font-size: 1em;
  outline: 0;
  padding: 0.2em 0.1em;
  margin: -0.3em 0;
  width: 80%; }

button.ConfCancTransaction {
  border-radius: 0.3em;
  font-size: 1em;
  outline: 0;
  padding: 0.2em 0.1em;
  margin: -0.3em 0;
  width: 45%; }

#importTransactionsDateLast {
  margin-left: 2rem; }

/* Holdings page */
#holdingsTblHdr {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  height: 3rem; }

#holdingsTblContainer {
  position: absolute;
  top: 4rem;
  bottom: 1rem;
  right: 0;
  left: 1rem; }

#holdingsTbl .securityName {
  overflow-x: hidden;
  white-space: nowrap; }

@media all and (min-width: 768px) {
  #holdingsTblContainer {
    bottom: 1rem; } }

@media all and (max-width: 767px) {
  #holdingsTblContainer {
    bottom: 0; } }

.commonOrdersTblHdr1Row {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  height: 3rem; }

.commonOrdersTblHdr2Rows {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  height: 5rem; }

#openOrdersTblHdr {
  top: 11rem; }

.commonOrdersTblContainer {
  position: absolute;
  top: 4rem;
  left: 1rem;
  right: 1rem;
  bottom: 3rem;
  overflow-x: hidden; }

#newOrderTblContainer {
  top: 6rem; }

#openOrdersTblContainer {
  top: 16rem; }

.ordersCashTbl {
  position: absolute;
  left: 15rem;
  top: 0;
  width: 22rem;
  height: 4.6rem;
  margin: 0.2rem 1rem 0.2rem 4rem; }
  .ordersCashTbl table {
    height: inherit;
    width: 100%;
    line-height: 1em;
    border: 1px solid;
    transition: border-color 0.2s linear;
    border-radius: 5px; }

/*
#portOrdersExportContainer {
	position: absolute;
	top: 0.3rem;
	//left:$pageMargin;
	right: $pageMargin;
	height: 1.7rem;
	width: 4rem;
}*/
/*
#rebalanceTblContainer {
	top:4rem;
	bottom: $pageMargin;
	right: 0;
	left: $pageMargin;
}*/
#rebalanceTbl > div.flexTblRow input:disabled {
  background-color: transparent !important;
  border: 0em; }

div.portfolioStatusRow {
  width: 25em;
  margin: 2em auto;
  overflow-x: visible;
  white-space: nowrap; }
  div.portfolioStatusRow input[type=checkbox] {
    width: 3em;
    transform: scale(1.5); }
  div.portfolioStatusRow span.spacer {
    width: 2em;
    display: inline-block; }

#page11 .onlyOnMobile h1,
#page11 .portStatContent h1 {
  text-align: center;
  margin: 0 0 1rem 0;
  padding-top: 1.5rem; }

#page11 .onlyOnMobile p,
#page11 .portStatContent p {
  margin: 1.5rem; }

@media all and (max-width: 767px) {
  #page11 {
    background-color: #16243e; } }

@media all and (min-width: 768px) {
  .portStatContent {
    margin-left: 23rem; }
  #portStatusKYC {
    width: calc(100% - 23rem); } }

/* not used
#portfolioStatusShowBankTransfer {
	display: none;
	padding-left: 3em;
	margin-top: 1em;
}
#portfolioStatusBankDetails {
	white-space: normal;
}*/
#cliPortTabs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 23rem;
  background-color: #303030; }
  #cliPortTabs .cliporta-tab {
    width: 19rem;
    height: 5rem;
    margin-bottom: 2rem;
    border: 1px solid grey;
    border-left: none;
    border-bottom-right-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    cursor: pointer; }
    #cliPortTabs .cliporta-tab.selected {
      background-color: grey; }
    #cliPortTabs .cliporta-tab div {
      height: 1.5rem;
      margin: 0.7rem; }
      #cliPortTabs .cliporta-tab div .cliportaSpace {
        display: inline-block;
        width: 2rem;
        padding-right: 0.7rem; }

#cliportaName {
  text-align: center;
  margin: 3rem 0 5rem 0;
  color: #50E3C2; }

.tabPortStatus.red {
  color: red; }

.tabPortStatus.orange {
  color: orange; }

.tabPortStatus.green {
  color: #50E3C2; }

.tabPortStatus.grey {
  color: grey; }

div.mobiPortBox {
  margin: 1.5rem;
  border: 1px solid #478FCC;
  border-radius: 8px;
  position: relative;
  padding: 1rem 1.5rem 0.5rem 0.4rem;
  height: 5.5rem; }
  div.mobiPortBox .mobiPortTitle {
    font-size: var(--font-big);
    font-weight: bold;
    margin: 0.3em 0; }
  div.mobiPortBox .mobiPortDescription {
    font-size: var(--font-small); }
  div.mobiPortBox.disabled {
    color: gray; }
  div.mobiPortBox::after {
    content: '>';
    display: block;
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 0;
    width: 1em;
    color: #478FCC;
    font-size: var(--font-big);
    margin-top: -0.7em; }

#portStatusKYC {
  display: block; }

#page12 .orderRow {
  margin: 1rem 0 1rem 1.5rem; }
  #page12 .orderRow input {
    margin-right: 0.5rem;
    margin-left: -1.5rem;
    width: 1rem;
    vertical-align: middle; }
  #page12 .orderRow label span {
    vertical-align: middle; }

#page12 .orderRow2 {
  margin-left: 1.5rem; }
  #page12 .orderRow2 input {
    margin-right: 0.5rem;
    margin-left: -1.5rem;
    width: 1rem;
    vertical-align: middle; }
  #page12 .orderRow2 label span {
    vertical-align: middle; }

#page12 .orderTitle,
#portStatusFunding .orderTitle {
  font-weight: bold;
  border-bottom: 1px solid white; }

#p1orderSummary,
#p12PartSummary,
#portStatusFunding {
  padding: 1rem; }
  #p1orderSummary > div,
  #p12PartSummary > div,
  #portStatusFunding > div {
    margin-bottom: 1rem; }

#portStatusDetails {
  padding: 1rem; }

@media all and (min-width: 768px) {
  #portStatusDetails {
    margin-left: 26rem;
    max-width: 640px; } }

.orderSummaryTitle {
  font-weight: bold; }

#page12 input:disabled {
  color: gray; }

#subpageBankTitle,
#subpageBankDetails,
#subpageAcknowledgements {
  width: calc(100% - 2rem);
  margin: auto; }

@media all and (min-width: 768px) {
  .bankPara {
    width: 100%;
    font-size: 1rem;
    margin: 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid gray;
    text-align: right; }
    .bankPara .bankItem {
      color: gray;
      font-weight: bold;
      width: 45%;
      float: left;
      text-align: left; }
    .bankPara .bankDataBig {
      font-weight: bold;
      width: 50%;
      display: inline-block;
      text-align: left; }
    .bankPara .bankDataSmall {
      width: 50%;
      display: inline-block;
      text-align: left; }
    .bankPara .bankDescr {
      width: 100%;
      text-align: left;
      font-size: var(--font-small); } }

@media all and (max-width: 767px) {
  .bankPara {
    width: 100%;
    font-size: 1rem;
    margin: 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid gray; }
    .bankPara .bankItem,
    .bankPara .bankDataBig {
      font-weight: bold; }
    .bankPara .bankItem {
      color: gray; }
    .bankPara .bankDescr {
      font-size: var(--font-small); } }

.mobiStatusSpace {
  height: calc(4rem + env(safe-area-inset-bottom,0));
  margin-bottom: 0; }

@media all and (max-width: 767px) {
  div.pseudoInputRow {
    margin-bottom: 1em;
    border-bottom: 2px solid;
    border-bottom-color: grey;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-size: var(--font-big);
    height: 1.5em;
    line-height: 1.5em; }
  div.subInputRow {
    margin-top: -1em;
    color: gray;
    font-size: var(--font-small); } }

@media all and (min-width: 768px) {
  div.pseudoInputRow {
    margin-bottom: 1em;
    font-size: var(--font-big);
    height: 1.5em;
    line-height: 1.5em; }
  div.subInputRow {
    margin-top: -1em;
    color: gray;
    font-size: var(--font-small); } }

#page16 h1 {
  margin: 1rem; }

table.competitionHeaderTbl {
  margin: 1rem;
  font-size: var(--font-big); }
  table.competitionHeaderTbl tr td.large {
    padding: 0 1rem; }
  table.competitionHeaderTbl tr td.styled-select {
    width: 13rem; }
    table.competitionHeaderTbl tr td.styled-select select {
      padding: 0 1em !important; }
  table.competitionHeaderTbl tr td.styled-select.wide {
    width: 17rem; }
  table.competitionHeaderTbl tr.separator {
    height: 1rem; }
  table.competitionHeaderTbl tr td.separator {
    width: 5rem; }

#competeBoardTblHdr {
  top: 14rem; }
  #competeBoardTblHdr div.left {
    padding-left: 1rem; }

#competeBoardTblContainer {
  top: 17rem; }
  #competeBoardTblContainer div.selected {
    background-color: #4e6287; }
  #competeBoardTblContainer div.left {
    padding-left: 1rem; }
  #competeBoardTblContainer .rank {
    font-size: var(--font-biggest); }
  #competeBoardTblContainer .rank-movement {
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    position: relative;
    top: -3px; }
  #competeBoardTblContainer .rank-movement-up:before,
  #competeBoardTblContainer .rank-movement-down:before {
    content: "";
    display: inline-block;
    margin-right: .1rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent; }
  #competeBoardTblContainer .rank-movement-up {
    color: #50E3C2; }
  #competeBoardTblContainer .rank-movement-up:before {
    border-bottom: 6px solid #50E3C2; }
  #competeBoardTblContainer .rank-movement-down {
    color: #FF4954; }
  #competeBoardTblContainer .rank-movement-down:before {
    margin-top: .1rem;
    border-top: 6px solid #FF4954; }
  #competeBoardTblContainer .rank-movement-none {
    color: #478FCC; }

#strselBox {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  text-align: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.3s linear; }
  #strselBox div.boxTitle {
    margin: 0; }
  #strselBox div.header p {
    white-space: normal;
    color: #FF4954; }

#strselContainer {
  position: absolute;
  top: 6rem;
  height: calc(100% - 11rem);
  left: 0;
  right: 0; }

#strselBtnContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  text-align: center; }

.strategyCard {
  position: relative;
  border-radius: 1rem;
  margin: 1rem;
  height: calc(100% - 3.236rem) !important;
  border: 2px solid;
  outline: none;
  overflow: hidden; }
  .strategyCard.selected {
    border-color: white; }
  .strategyCard.greyed {
    opacity: 0.5; }
  .strategyCard div.title {
    width: 100%;
    height: 1.2em;
    text-align: center;
    padding: 1rem 0; }
  .strategyCard div.intro {
    width: 100%;
    height: 1em;
    text-align: center;
    padding: 0.5rem 0 0 0; }
  .strategyCard div.srcLastUpdated {
    width: calc(100% - 2*1rem);
    height: 1rem;
    padding: 1rem; }
  .strategyCard div.treemapTbl {
    width: calc(100% - 2*1rem);
    padding: 1rem;
    text-align: left; }
    .strategyCard div.treemapTbl div.strselTreemap {
      width: calc(40% - 0.5*1rem);
      padding-bottom: calc(40% - 1rem); }
    .strategyCard div.treemapTbl table {
      width: calc(60% - 0.5*1rem);
      float: right;
      table-layout: fixed; }
  .strategyCard div.description {
    width: calc(100% - 2*1rem);
    margin: 0.5rem 1rem 1rem 1rem;
    text-align: left;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*
	    div { //this is (no description) div
		    text-align: center;
		    color: grey;
            line-height: 1.2rem;
	    }*/ }
  .strategyCard div.descriptionTitle {
    width: calc(100% - 2*1rem);
    margin: 0.5rem 1rem;
    text-align: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255, 255, 255, 0.3); }
  .strategyCard > table {
    /* this was fixed position, at the bottom of the card
		position: absolute;
	    bottom: $strselMargin;
	    left: $strselMargin;
	    right: $strselMargin; */
    width: calc(100% - 2*1rem);
    margin: 1.5rem 1rem 0.5rem 1rem; }
  .strategyCard table.metrics th {
    padding: 0.4rem 0.5rem; }

/* Arrows */
.slick-prev,
.slick-next {
  height: 4rem;
  width: 2rem;
  border: none;
  outline: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 2rem);
  display: block;
  padding: 0; }

.slick-prev {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="10,0 0,10 10,20"/></svg>');
  left: -2rem; }

.slick-next {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 20" xml:space="preserve"><polygon fill="%23478FCC" points="0,0 10,10 0,20"/></svg>');
  right: -2rem; }

/* Dots */
.slick-dots {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center; }

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer; }

.slick-dots li button {
  font-size: 20px;
  line-height: 0;
  content: '•';
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent; }

body.hasHover .slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none; }

body.hasHover .slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1; }

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: #478FCC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: #478FCC; }

.h2em {
  height: 2em; }

.h25em {
  height: 2.5em; }

#portSettings {
  height: calc(7rem + 50vh); }

#portSettingsTblHdr {
  width: calc(100% - 2rem); }

#portSettingsTblContainer {
  left: 1rem;
  right: 1rem;
  height: 50vh; }

#portSettingsTbl {
  left: 0;
  right: 1rem; }
  #portSettingsTbl input {
    background-color: #16243e;
    color: white;
    border: 0em; }
  #portSettingsTbl input:focus {
    color: black;
    background-color: white; }

#legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  text-align: left;
  font-size: 0.7rem;
  line-height: 1rem; }

#accountSettings,
#accSettingsPart,
#accRegisterPart {
  padding: 0; }
  #accountSettings > div.flex,
  #accSettingsPart > div.flex,
  #accRegisterPart > div.flex {
    padding: 0.5em 1em 0.5em 1em;
    width: calc(100% - 2em); }
    #accountSettings > div.flex.canvasColor,
    #accSettingsPart > div.flex.canvasColor,
    #accRegisterPart > div.flex.canvasColor {
      padding: 1em 1em 1em 1em; }

#accRegisterPart p.notice {
  padding: 0.5em 1em 0 1em;
  max-width: 34em;
  text-align: left; }

#accountSettings {
  min-width: 33em; }

.dialog-item {
  display: none;
  padding: 1em 1em 0.5em 1em;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }

.dialog-item a {
  color: #478FCC; }

.dialog-item p {
  margin: 0;
  line-height: normal;
  font-weight: normal; }

.dialog-item p.header {
  text-align: left; }

.dialog-item p.text {
  text-align: left;
  margin-bottom: 1em; }

.dialog-item p.closeToNext {
  margin-bottom: 0; }

.dialog-item p.closeishToNext,
.dialog-item div.closeishToNext {
  margin-bottom: 0.5em; }

.dialog-item p.withTopBorder {
  border-top: 1px solid #647a88;
  padding-top: 0.7em; }

.dialog-item span.withTopBorder {
  border-top: 1px solid #647a88; }

.dialog-item .total {
  display: inline-block;
  box-sizing: border-box;
  padding-right: 0.5em; }

.dialog-item span.withDoubleTopBorder {
  border-top: 4px double #647a88; }

.dialog-item p.withBottomBorder {
  border-bottom: 1px solid #647a88;
  padding-top: 2em; }

.dialog-item span.link {
  color: #478FCC;
  cursor: pointer; }

body.hasHover .dialog-item span.link:hover {
  color: #2C5C88; }

.dialog-item ul {
  margin-top: 0;
  font-weight: normal;
  font-size: 1em;
  width: 100%;
  max-height: 5em;
  text-align: left;
  overflow-y: auto; }

.dialog-item .registerQuestion {
  margin-bottom: 1em; }

.dialog-item input[type=text],
.dialog-item input[type=number],
.dialog-item input[type=password],
.dialog-item input[type=email],
.dialog-item input[type=date],
.dialog-item textarea {
  width: 100%;
  font-size: 1em;
  padding: 1em 0.5em;
  border-radius: 5px;
  border: 1px solid;
  transition: box-shadow 0.3s linear, border 0.3s linear, background-color 0.3s linear; }

.dialog-item input[type=text]:focus,
.dialog-item input[type=email]:focus,
.dialog-item input[type=password]:focus,
.dialog-item textarea:focus {
  border-color: #478FCC; }

.dialog-item input::placeholder,
.dialog-item input::-ms-input-placeholder, .dialog-item input:-ms-input-placeholder {
  /*IE 10-11*/
  font-style: italic; }

.dialog-item input:disabled::placeholder,
.dialog-item input:disabled::-ms-input-placeholder,
.dialog-item input:disabled:-ms-input-placeholder {
  font-style: italic; }

.dialog-item textarea::placeholder {
  font-style: italic; }

.dialog-item div.flex {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center; }

.dialog-item div.flex input[type=checkbox] {
  flex: 0 0 2em;
  margin-left: 0; }

.dialog-item div.flex label {
  flex: 1 1 5em; }

#saveStrategySave:focus {
  background-color: #478FCC;
  color: white; }

.dialog-item .orderRow {
  display: flex;
  width: 100%;
  min-width: 52em;
  align-items: center;
  margin: 0.5em 0;
  transition: opacity 0.2s linear; }
  .dialog-item .orderRow.spaceAbove {
    margin-top: 1em; }
  .dialog-item .orderRow.bottomBorder {
    border-bottom: solid 1px; }
  .dialog-item .orderRow .orderLeft {
    flex: 1 1 30em;
    text-align: left; }
    .dialog-item .orderRow .orderLeft.bold {
      font-weight: bold; }
  .dialog-item .orderRow .orderLeftLong {
    flex: 3 3 42em;
    text-align: left; }
  .dialog-item .orderRow .orderSpace {
    flex: 0 0 2em; }
  .dialog-item .orderRow .order3rd {
    flex: 1 1 10em;
    text-align: center; }
  .dialog-item .orderRow .orderRight {
    flex: 1 1 10em;
    text-align: center; }
    .dialog-item .orderRow .orderRight.topBorder {
      border-top: solid 1px; }
  .dialog-item .orderRow .halfLeftRight {
    flex: 2 2 26em;
    text-align: center; }
  .dialog-item .orderRow input[type=text] {
    padding: 0.1em 0.5em;
    width: 7em;
    text-align: center; }

.dialog-item .orderRow.nonFlex {
  display: block; }

#advisedPortOrderSelect p {
  text-align: left;
  padding-left: 5em;
  padding-bottom: 0.5em; }

table.transactions {
  margin: 1em auto 0 auto;
  border-collapse: collapse; }
  table.transactions td, table.transactions th {
    padding: 0.2em 0.5em; }
  table.transactions, table.transactions th, table.transactions td {
    border: 1px solid white; }

/*
.dialog-item input[type=text]:focus,
.dialog-item input[type=password]:focus,
.dialog-item input[type=email]:focus,
.dialog-item input[type=date]:focus,
.dialog-item textarea:focus {
	border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}*/
@media all and (min-width: 768px) {
  .min30em {
    min-width: 30em; } }

.floatLeft {
  float: left; }

.floatRight {
  float: right; }

.inlineBlock {
  display: inline-block; }

.clickable {
  cursor: pointer; }

body.hasHover .clickable:hover span,
.clickable:active span {
  color: #478FCC;
  text-decoration: underline; }

.defaultCursor {
  cursor: default; }

.nowrap {
  white-space: nowrap; }

.tooltipBar {
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  color: black;
  border: 0px solid #6F257F;
  border-radius: 0.5rem;
  padding: 0.3rem;
  text-align: center; }

div.tooltipL,
div.tooltipR {
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  position: absolute;
  padding: 0.3rem;
  border: 0px;
  border-radius: 0.5rem;
  pointer-events: none;
  z-index: 100;
  max-width: 25em;
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s linear; }

/*Creates a small triangle extender for the tooltip*/
div.tooltipL:after,
div.tooltipR:after {
  box-sizing: border-box;
  display: inline;
  top: 50%;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  position: absolute;
  text-align: center; }

div.tooltipL:after {
  left: -8px;
  margin: -4px 0 0 0;
  content: "\25C0 \FE0E"; }

div.tooltipR:after {
  left: 100%;
  margin: -4px 0 0 -2.5px;
  content: "\25B6 \FE0E"; }

/*** generic button ***/
button.generic {
  line-height: 1em;
  padding: 0.8em 1.5em;
  border-width: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 10px;
  letter-spacing: 0px;
  /*previous 1px*/
  outline: 0;
  transition: background-color 0.1s linear; }

button.generic.notsolong {
  padding: 0.8em 1em; }

button.generic.midsize {
  padding: 0.57em 2em;
  /*previously padding: 0.4em 2em; */ }

button.generic.long {
  padding: 0.5em 3em; }

button.generic.small {
  padding: 0.1em; }

button.generic.free {
  width: initial; }

button.generic:disabled {
  background-color: grey !important;
  color: white; }

/*** colored button ***/
.light .colored {
  border: 1px solid #478FCC;
  background-color: #478FCC;
  color: white; }

body.hasHover.light .colored:hover,
.light .colored:active {
  background-color: #95C8EC;
  border-color: #95C8EC; }

.light .colored:disabled {
  background-color: #DDDDDD;
  border-color: #DDDDDD; }

.dark .colored {
  border: 1px solid #478fcc;
  /*** previous #E45E30 ***/
  background-color: #478fcc;
  /*** previous #E45E30 ***/
  color: white; }

body.hasHover.dark .colored:hover,
.dark .colored:active {
  background-color: #2c5c88;
  /* previously #F46730 */
  border-color: #2c5c88;
  /* previously #F46730 */ }

.dark .colored:disabled {
  background-color: #0A1127;
  border-color: #0A1127;
  color: #5B5967; }

/*** transparent button ***/
.dark .transparent {
  background-color: white;
  color: #478FCC; }

body.hasHover.dark .transparent:hover,
.dark .transparent:active {
  color: white;
  background-color: #478FCC; }

.dark .transparent:disabled {
  color: #DDDDDD;
  border-color: #DDDDDD; }

/*** metrics table ***/
table.metrics {
  text-align: center;
  letter-spacing: 0px;
  /*previous 1px*/
  border-radius: 0.7em;
  overflow: hidden;
  border-spacing: 0; }

table.metrics th {
  font-weight: bold;
  padding: 0.2em 0.5em; }

table.metrics tr.notBold th {
  font-weight: normal; }

table.metrics td {
  padding: 0.4em; }

table.metrics.tight td {
  padding: 0 0.5em; }

/*.light table.metrics {
	background-color: white;
	color: #6F6F6F;
	border: 1px solid #F2F2F2;
}
.light table.metrics th {
	background-color: #F2F2F2;
	color: white;
}*/
/* first column border */
.dark table.verticalBar td:first-child {
  border-right: 1px solid #485065; }

.light table.verticalBar td:first-child {
  border-right: 1px solid #676b7e; }

/* contrasting table (colors) */
.dark table.contrasting {
  color: #6F6F6F;
  background-color: white; }

.dark table.contrasting th {
  background-color: #0C152F;
  color: white; }

.dark table.contrasting th.borderBottom {
  border-bottom: 1px solid white; }

/* first column border */
.dark table.contrasting td:first-child {
  border-right: 1px solid #676b7e; }

/*** page table ***/
/* this is used in transactions page only */
table.page {
  width: 100%;
  text-align: center;
  letter-spacing: 0px;
  /*previous 1px*/
  border: none;
  border-radius: 0.7em;
  border-spacing: 0;
  overflow: hidden; }

table.page th {
  font-weight: normal;
  padding: 0.3em 0.5em 0.3em 0;
  overflow: hidden; }

table.page th.withBar {
  position: relative; }
  table.page th.withBar::after {
    content: '';
    width: 1px;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    right: 1px;
    top: 15%; }

table.page td {
  padding: 0.7em 0.5em 0.7em 0; }

table.page td.left {
  padding: 0.7em 0 0.7em 0.5em; }

table.page th.left {
  padding: 0.3em 0 0.3em 0.5em; }

table.page input[type="text"],
table.page input[type="number"],
.flexTbl input[type="text"],
.flexTbl input[type="number"] {
  font-size: 1em;
  border-radius: 0.3em;
  outline: 0;
  padding: 0.2em 0.1em;
  margin: -0.3em 0;
  width: 80%; }

input[type="number"] {
  text-align: right; }

.light table.page {
  background-color: white;
  color: #6F6F6F; }

.light table.page th {
  background-color: #F2F2F2; }

.light table.page tr:nth-last-child(1n+2) td {
  border-bottom: 1px solid #F2F2F2; }

.light table.page input[type=text],
.light table.page input[type=number] {
  color: #478FCC;
  border: solid 1px #DDDDDD;
  background-color: #F2F2F2; }

.light table.page input[type=text]:disabled,
.light table.page input[type=text]:disabled {
  color: #DDDDDD; }

table.page input[type=text]:focus,
table.page input[type=number]:focus {
  background-color: white;
  color: black; }

table th.transparent {
  background-color: transparent; }

table th.white {
  background-color: white !important;
  color: #1B3C5A !important; }

table th.blue {
  background-color: #478FCC;
  color: white; }

table th.darkblue {
  background-color: #22465E;
  color: white; }

table .borderRight {
  border-right: solid 1px #F2F2F2; }

table .borderRightBottom {
  border-right: solid 1px #F2F2F2;
  border-bottom: solid 1px #F2F2F2; }

/*** We have 2 types of pages, with Subheader and without Subheader */
.pageWithoutSubheader {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; }

@media all and (min-width: 768px) {
  .pageWithoutSubheader {
    top: 3.1rem; }
  .pageWithSubheader {
    top: 8.1rem; } }

@media all and (max-width: 767px) {
  .pageWithoutSubheader,
  .pageWithSubheader {
    top: 4rem; } }

.pageWithSubheader {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; }

.pageWithSubheaderExtra {
  position: fixed;
  top: 9.1rem;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; }

.light .pageWithoutSubheader,
.light .pageWithSubheader {
  background-color: #F2F2F2; }

div.pageCanvas {
  border-radius: 0.5em;
  padding: 1em;
  margin-bottom: 1em;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0em;
  left: 0em; }

table.fullWidthPageCanvas {
  margin: 14px 1.5em;
  /*14px: so we can substract it in gw_rebalance*/
  width: calc(100% - 3em);
  box-sizing: border-box;
  overflow-x: hidden; }

/*** treemap graphs ***/
div.treemap {
  border-radius: 0.5em;
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: 1;
  vertical-align: top; }

div.treemap .node {
  padding: 0;
  margin: 0;
  line-height: 1;
  overflow: hidden;
  position: absolute;
  /* do not add a border here, ask Florin how to do it!*/
  transition: width 0.2s linear, height 0.2s linear, left 0.2s linear, top 0.2s linear;
  /*border-radius: 4px;*/ }

div.treemap .node.selected {
  border: 1px solid white;
  box-sizing: border-box; }

div.treemap .node div {
  width: inherit;
  height: inherit;
  color: white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  transition: color 0.2s linear; }

div.boxTitle {
  font-weight: bold;
  letter-spacing: 0px;
  /*previous 2px*/
  margin: 0 0 1rem 0;
  width: 100%;
  text-align: center;
  border-radius: 0.5em;
  /*border-radius: 4px; */
  line-height: 2em; }

div.treemap.treemapSquare {
  width: 100%;
  padding-bottom: 100%; }
  div.treemap.treemapSquare .treemapLong {
    position: absolute;
    left: 0;
    bottom: calc(1em + 2px);
    width: calc(50% - 2px);
    height: calc(100% - 1em - 2px); }
  div.treemap.treemapSquare .treemapShort {
    position: absolute;
    right: 0;
    bottom: calc(1em + 2px);
    width: calc(50% - 2px); }
  div.treemap.treemapSquare .treemapText {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1em;
    overflow-x: hidden; }
    div.treemap.treemapSquare .treemapText span {
      display: inline-block;
      height: 1em;
      width: 50%;
      text-align: center;
      color: white; }

div.notification {
  font-weight: bold;
  position: absolute;
  top: -0.6em;
  right: -0.6em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.6em;
  background-color: #E45E30;
  border: 1px solid white;
  color: white;
  display: none; }

.highlight {
  background-color: #E45E30; }

.labelRow {
  color: grey;
  text-align: left;
  font-size: var(--font-small);
  margin: 0.5em 0 0.3em 0; }

.labelRowWhite {
  text-align: left;
  margin: 0.5em 0 0.3em 0; }

.tosRow {
  text-align: left;
  margin: 0.5em 0 0.3em 0;
  opacity: 0.7; }

/* Order page */
.trashbin {
  fill: #478FCC;
  /*stroke:white;*/
  height: 2em;
  margin: -0.7em -0.5em -0.7em 0;
  padding: 0 1em;
  cursor: pointer; }

body.hasHover .trashbin:hover,
.trashbin:active {
  fill: #E45E30; }

.addBtn {
  /* this is just a + sign*/
  font-size: 2em;
  cursor: pointer;
  color: #478FCC; }

body.hasHover .addBtn:hover,
.addBtn:active {
  color: #478FCC;
  /*previously #478fcc #E45E30*/
  /*background-color: white;*/ }

/*************************** Dialogs: */
.darkened-bg {
  background-color: transparent;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 100;
  display: none;
  transition: background-color 0.3s linear; }

#colorScheme {
  width: 30em;
  height: 90vh; }

#colorSchemeWrapper {
  position: absolute;
  top: 3.5em;
  bottom: 10em;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 1em 1.7em 0 1.7em;
  /* no point in having padding-bottom, scrolls over it*/ }

#signinNotification, #signupNotification1, #signupNotification2, #accSettingsNotification, #accRegisterNotification {
  color: #FF4954; }

#signinNotification, #signupNotification1, #signupNotification2 {
  font-size: var(--font-small); }

#gwapVsBrokerDiffDiv {
  width: 100%;
  margin: 0 auto 1.5em auto;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5em; }
  #gwapVsBrokerDiffDiv table {
    width: 100%;
    text-align: center;
    vertical-align: top;
    border-radius: inherit;
    border-collapse: collapse; }
    #gwapVsBrokerDiffDiv table th {
      padding: 0.7em 0.7em; }
    #gwapVsBrokerDiffDiv table td {
      padding: 0.7em 0.7em; }
      #gwapVsBrokerDiffDiv table td.qBox {
        padding-right: 1.4em;
        text-align: right; }
    #gwapVsBrokerDiffDiv table .withBar {
      position: relative; }
    #gwapVsBrokerDiffDiv table .withBar::after {
      content: '';
      width: 1px;
      height: 40%;
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      right: 1px;
      top: 30%; }
    #gwapVsBrokerDiffDiv table .svg-inline--fa {
      vertical-align: 0 !important; }

/*
//TODO next 2 items should be reviewed and them moved to themeDark & themeLight (if they are ever enabled back)
#gwapVsBrokerDiffDiv {
	tr {
		background-color:$canvasBlue;
		border-bottom: 2px solid #0c131d;
	}
	th.bgColorBroker {
		background-color: blue;
	}
	th.bgColorGWAP {
		background-color: $gwapBlue;
	}
	th.bgColorAdj {
		background-color: black;
	}		
	th.bgColorDlg {
		background-color: #0c131d;
	}
}
#gwapVsBrokerDiffDlg {
	background-color: #0c131d;
}*/
/*************************** Message(s): */
div.msgBox {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* -webkit-user-select: none; */
  display: inline-block;
  top: 5%;
  position: relative;
  text-align: center;
  max-height: 90%;
  padding: 0;
  opacity: 0;
  transition: opacity 0.3s linear; }
  div.msgBox .messageCnfSpace, div.msgBox .messageCnfSpace2 {
    display: inline-block; }

@media all and (max-width: 767px) {
  div.msgBox .messageCnfSpace {
    width: 20%; }
  div.msgBox .messageCnfSpace2 {
    width: 0; } }

@media all and (min-width: 768px) {
  div.msgBox .messageCnfSpace,
  div.msgBox .messageCnfSpace2 {
    width: 36%; } }

@media all and (max-width: 899px) {
  div.msgBox {
    max-width: 90%; }
  #portSettings {
    width: 90vw; } }

@media all and (min-width: 900px) {
  div.msgBox {
    max-width: 80%; }
  #portSettings {
    width: 80vw; } }

div.msgBox div.header,
#strselBox div.header {
  text-align: center;
  padding: 1em;
  white-space: nowrap;
  margin-top: -2px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: sticky;
  top: 0; }

div.msgBox div.header h1,
#strselBox div.header h1 {
  padding: 0 1em 0 0;
  margin: 0;
  white-space: nowrap;
  font-weight: normal; }

div.msgBox .msg h1 {
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  margin-top: 0; }

div.msgBox .msg div.lineBreak {
  width: 100%;
  height: 1px;
  background-color: white; }

div.header .dismiss {
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  padding: 1em 1em 2em 2em;
  opacity: 0.3;
  font-size: 1rem; }

body.hasHover div.header .dismiss:hover,
div.header .dismiss:active {
  opacity: 1; }

div.msgBox .msg {
  text-align: left; }

@media all and (max-width: 767px) {
  #messageBoxTitle,
  #messageBoxMsg {
    font-size: 1rem; }
  div.msgBox .msg {
    padding: 1em 1em; } }

@media all and (min-width: 768px) {
  #messageBoxTitle,
  #messageBoxMsg {
    font-size: var(--font-big); }
  div.msgBox .msg {
    padding: 1em 2.5em; } }

/*************************** used in ETF page: */
#header span.etf {
  padding: 0 0.5em; }

.scatterChartEtf {
  max-width: 300px;
  max-height: 300px;
  margin: auto; }

.scatterChartEtf text.blue {
  fill: #478FCC; }

.scatterChartEtf text.grey {
  fill: #478FCC; }

.scatterChartEtf rect {
  stroke: #478FCC; }

#etfCumulativeReturns, #etfMonthlyReturns {
  width: 100%;
  height: 300px;
  display: block; }

.etfDividendYield {
  width: 90%;
  margin: 1em auto; }

.etfDividendYieldText {
  display: inline-block;
  width: 9em; }

.etfDividendYieldBar {
  display: inline-block;
  width: calc( 100% - 9.5em);
  background-color: #909090;
  border-radius: 5px;
  float: right;
  overflow: hidden; }

.etfDYBvalue {
  width: 17%;
  height: 1.4em;
  border-radius: 5px;
  background: #619e38;
  /* Old browsers */
  background: -moz-linear-gradient(top, #619e38 0%, #3f6f16 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #619e38 0%, #3f6f16 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #619e38 0%, #3f6f16 100%); }

.columnBox ul.etf {
  padding: 0;
  margin: 0;
  text-align: left; }

.columnBox ul.etf li {
  margin-left: 1.4em; }

#auxPage {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  display: none;
  opacity: 0.01;
  transition: opacity 0.3s linear; }

#pageNothingTxt {
  margin-top: 35vh;
  text-align: center; }

/*# sourceMappingURL=gwap.map */