.flot-chart {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.popup.profit {
  width: 600px;
  border: solid 3px #39577b;
  background-color: #a4b0c6;
  margin-left: -300px;
  text-align: center; }
  .popup.profit .title {
    font-weight: bold;
    font-size: 1.2em;
    text-align: center; }
  .popup.profit .intraday-chart {
    margin-top: 15px;
    padding: 15px; }
  .popup.profit .yoy-chart {
    margin-top: 10px;
    padding: 15px; }
    .popup.profit .yoy-chart .year-totals {
      margin: 4px; }
      .popup.profit .yoy-chart .year-totals .year-total {
        margin: 2px 4px;
        padding: 2px 8px;
        border: 1px solid #000;
        background-color: #eee; }
  .popup.profit .chart-title {
    text-align: center;
    font-size: 0.8em;
    font-weight: bold; }
  .popup.profit .ignore-dates {
    text-align: left;
    border: 1px solid #000;
    background-color: #eee;
    margin: 15px;
    padding: 5px; }
    .popup.profit .ignore-dates .dates {
      margin: 10px; }
      .popup.profit .ignore-dates .dates .date {
        display: inline-block;
        margin: 3px;
        border: 1px solid #000;
        background-color: #dce0e9;
        padding: 3px; }
      .popup.profit .ignore-dates .dates .delete {
        color: #f00; }
        .popup.profit .ignore-dates .dates .delete:hover {
          font-weight: bold;
          cursor: pointer; }
    .popup.profit .ignore-dates .add-date {
      float: right; }
    .popup.profit .ignore-dates .input-date {
      width: 100px; }

/* highlighting for accounts */
.status-active {
  color: #007700; }

.status-inactive {
  color: Coral; }

.status-closed {
  color: Red; }

.clearable-input-wrapper {
  position: relative;
  display: inline-block; }
  .clearable-input-wrapper input {
    padding-right: 20px;
    /* Space for the clear button */ }

.clear-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  font-size: 14px;
  line-height: 1;
  display: none; }
  .clear-btn.visible {
    display: inline; }
  .clear-btn:hover {
    color: #000; }

.datagrid {
  background-color: #a4b0c6;
  color: #000;
  font-size: 8pt;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid black; }
  .datagrid > thead {
    font-weight: bold;
    background-color: #39577b;
    color: #ffffff; }
    .datagrid > thead > tr > th {
      padding: 4px 6px;
      border: 1px solid black; }
  .datagrid > tbody {
    background-color: #dce0e9; }
    .datagrid > tbody > tr > td {
      padding: 4px 6px;
      border: 1px solid black; }
  .datagrid > tfoot {
    background-color: #dce0e9;
    color: #000;
    font-weight: bold; }
    .datagrid > tfoot > tr > td {
      padding: 4px 6px;
      border: 1px solid black; }
      .datagrid > tfoot > tr > td.buttons {
        text-align: center; }
  .datagrid.refreshable {
    border: 2px solid #000; }
    .datagrid.refreshable.loading {
      border-color: darkgrey; }

.datagrid-body {
  background-color: #a4b0c6;
  color: #000;
  font-size: 8pt;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid black; }
  .datagrid-body > thead {
    font-weight: bold;
    background-color: #39577b;
    color: #ffffff; }
    .datagrid-body > thead > tr > th {
      padding: 4px 6px;
      border: 1px solid black; }
  .datagrid-body > tbody {
    background-color: #dce0e9;
    border: 1px solid black; }
    .datagrid-body > tbody > tr > td {
      padding: 4px 6px;
      border: 1px dotted black; }
  .datagrid-body > tfoot {
    background-color: #dce0e9;
    color: #000;
    font-weight: bold; }
    .datagrid-body > tfoot > tr > td {
      padding: 4px 6px;
      border: 1px solid black; }
      .datagrid-body > tfoot > tr > td.buttons {
        text-align: center; }
  .datagrid-body.refreshable {
    border: 2px solid #000; }
    .datagrid-body.refreshable.loading {
      border-color: darkgrey; }

.date-shortcuts button.date-shortcut {
  font-weight: bold; }

.date-shortcuts button.date-shortcut + button.date-shortcut {
  margin-left: 10px; }

tr.drillable {
  cursor: pointer; }
  tr.drillable > td {
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important; }
    tr.drillable > td:first-child {
      border-left: 2px solid transparent !important; }
    tr.drillable > td:last-child {
      border-right: 2px solid transparent !important; }
  tr.drillable:hover > td {
    border-top: 2px solid #f90 !important;
    border-bottom: 2px solid #f90 !important; }
    tr.drillable:hover > td:first-child {
      border-left: 2px solid #f90 !important; }
    tr.drillable:hover > td:last-child {
      border-right: 2px solid #f90 !important; }

table.editable > tbody > tr:hover {
  cursor: pointer;
  background-color: #ddd !important; }

tr.editable {
  cursor: pointer;
  border: 2px solid transparent !important; }
  tr.editable > td.not-editable {
    cursor: default; }
  tr.editable:hover {
    cursor: pointer;
    background-color: #ddd !important; }
    tr.editable:hover > td {
      border-top: 2px solid #f90 !important;
      border-bottom: 2px solid #f90 !important; }
      tr.editable:hover > td:first-child {
        border-left: 2px solid #f90 !important; }
      tr.editable:hover > td:last-child {
        border-right: 2px solid #f90 !important; }

.editable a {
  text-decoration: inherit;
  color: inherit; }

.environment-picker label {
  margin: 0 8px; }

.environment-picker label input {
  vertical-align: bottom;
  margin-right: 5px; }

.environment-none {
  background-color: #fff; }

.environment-qa {
  background-color: pink; }

.environment-prod {
  background-color: #dce0e9; }

.export-csv {
  margin: 10px 0; }
  .export-csv button img {
    vertical-align: middle; }

.fadein.ng-hide-remove,
.fadeout.ng-hide-add {
  -webkit-transition: 1000s ease-in-out all;
  -moz-transition: 1000ms ease-in-out all;
  -o-transition: 1000ms ease-in-out all;
  transition: 1000ms ease-in-out all;
  display: inline-block !important; }

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0; }

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1; }

fieldset.filters {
  border-radius: 6px;
  border: 1px solid black;
  padding: 5px;
  background-color: #dce0e9;
  display: inline-block; }
  fieldset.filters table.datagrid.no-borders {
    border: none; }
    fieldset.filters table.datagrid.no-borders tr td {
      border: none; }
  fieldset.filters .filter + .filter {
    margin-top: 5px; }

input {
  padding: 1px 2px; }

.field-error {
  background-color: #ff0000 !important; }

.input-error {
  border: 2px solid #f00; }

.input-warning {
  border: 2px solid #dd8300; }

.field-required:after {
  color: #e32;
  content: ' *';
  display: inline; }

.field-span {
  padding: 6px 2px; }

.input-box {
  border-radius: 6px;
  padding: 5px;
  background-color: #dce0e9;
  display: inline-block; }
  .input-box .input-row + .input-row {
    margin-top: 5px; }
  .input-box .input-row {
    margin: 0 0 5px 0; }
    .input-box .input-row .input-label {
      display: inline-block;
      font-weight: bold; }

/* override normalize.less's disabled button */
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button,
button:disabled,
select:disabled,
keygen:disabled,
optgroup:disabled,
option:disabled,
select[disabled] > option {
  color: graytext; }

label:not(.plain) span:not(.normal-weight) {
  font-weight: bold; }

.plain {
  /* undo all the bootstrap nonsense */
  all: revert; }

fieldset.plain {
  border-radius: 5px; }
  fieldset.plain legend {
    all: revert;
    padding: 0 5px; }
  fieldset.plain.right legend {
    text-align: right; }

.gear-settings {
  display: inline-flex;
  /* make it a flex container */
  align-items: center;
  /* vertical centering */
  gap: 0.5rem;
  /* space between text and icon */
  cursor: pointer;
  color: #6b7280; }
  .gear-settings:hover {
    color: #111827; }
    .gear-settings:hover .gear-icon {
      fill: #111827; }
  .gear-settings .gear-icon {
    width: 15px;
    height: 15px;
    fill: #6b7280; }

label.plain {
  /* this should allow checkboxes to line up perfectly with label text */
  display: inline-flex;
  align-items: center;
  gap: 0.5ch; }
  label.plain input {
    all: revert; }
  label.plain span:not(.preserve) {
    all: revert; }
  label.plain .text {
    position: relative;
    top: 0.15em; }

label + label {
  margin-left: 10px; }

button.delete {
  background: #cc0000;
  color: #fff;
  font-weight: bold; }

body {
  background-color: #ffffff;
  color: #000;
  font-size: 9pt;
  font-family: Verdana, helvetica, sans-serif; }

#lblBackOfficePageHeaderText {
  font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif;
  margin: 0px;
  font-size: 1.2em;
  font-weight: bold; }

.page-header {
  font-family: Trebuchet MS, Verdana, helvetica, sans-serif;
  font-size: 1.2em;
  font-weight: bold; }

.sub-header {
  font-family: Trebuchet MS, Verdana, helvetica, sans-serif;
  font-size: 1.2em;
  font-weight: bold; }

.error {
  font-weight: bold;
  color: #f00; }

.success {
  font-weight: bold;
  color: #0a0; }

.left {
  text-align: left; }

.centered {
  text-align: center; }

.right {
  text-align: right; }

.ngTopPanel {
  background-color: #99bfe6; }

.aside {
  font-size: 0.9em;
  font-style: italic; }

.warning-box {
  background-color: #ffeeee;
  border: solid 2px #ff0000;
  padding: 7px 7px 10px 7px; }

.warning {
  font-weight: bold;
  color: #dd8300; }

.notation {
  font-style: italic;
  text-align: left; }

.code {
  display: inline-block;
  font-family: Courier New;
  margin: 10px 0px 0px 20px;
  padding: 2px 8px 2px 8px;
  background-color: #eee;
  color: #000;
  border: 1px solid #000; }

.button-icon {
  vertical-align: bottom; }

.delete-button {
  font-weight: bold;
  color: #f00;
  text-transform: uppercase; }

.breaker {
  clear: both; }

/* Styles for showing rolled-up accounts */
:not(.flot-plot) > .legend {
  border: 2px solid #aa9999;
  padding: 5px;
  background-color: #dce0e9;
  width: 400px; }
  :not(.flot-plot) > .legend .legend-head {
    text-align: left;
    font-weight: bold; }
    :not(.flot-plot) > .legend .legend-head .expander {
      cursor: pointer; }
      :not(.flot-plot) > .legend .legend-head .expander .expand-state,
      :not(.flot-plot) > .legend .legend-head .expander .count {
        font-weight: normal; }
  :not(.flot-plot) > .legend .legend-body {
    padding-top: 10px; }
    :not(.flot-plot) > .legend .legend-body .item .item-delete .bracket,
    :not(.flot-plot) > .legend .legend-body .item .item-delete .delete {
      font-weight: bold; }
    :not(.flot-plot) > .legend .legend-body .item .item-delete .delete {
      color: red;
      cursor: pointer; }
    :not(.flot-plot) > .legend .legend-body .item .item-add .bracket,
    :not(.flot-plot) > .legend .legend-body .item .item-add .add {
      font-weight: bold; }
    :not(.flot-plot) > .legend .legend-body .item .item-add .add {
      color: green;
      cursor: pointer; }

/* not inside a flot chart */

.text-link {
  /*	font-weight: bold;  */
  cursor: pointer;
  color: blue;
  text-decoration: underline; }

.icon-link {
  cursor: pointer;
  border: outset 1px transparent;
  margin: 0px 3px; }

.icon-link:hover {
  border: outset 1px #eee; }

.icon-link-disabled {
  border: outset 1px transparent; }

.gain {
  font-weight: bold;
  color: green !important; }

.loss {
  font-weight: bold;
  color: #ff0000 !important; }

.negative-number {
  color: #ff0000; }

.number {
  text-align: right; }

.edit-popup {
  display: none;
  background-color: #dce0e9;
  padding: 10px 20px 20px 20px;
  border: solid 2px #39577b;
  z-index: 3; }

.popup {
  position: fixed;
  top: 100px;
  margin-left: -250px;
  width: 500px;
  left: 50%;
  margin-left: -250px;
  background-color: #dce0e9;
  border: solid 2px #39577b;
  padding: 25px 15px 15px 15px;
  z-index: 5;
  text-align: center; }
  .popup .popup-close {
    font-size: 10pt;
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: normal;
    cursor: pointer; }
    .popup .popup-close:hover {
      font-weight: bold; }
  .popup table {
    margin-left: auto;
    margin-right: auto; }

.error-popup {
  width: 500px;
  margin-left: -250px;
  background-color: #ffeeee;
  border: solid 3px #ff0000;
  padding: 7px 7px 10px 7px;
  z-index: 5000; }
  .error-popup .error-details {
    font-weight: bold;
    margin: 7px;
    padding: 10px 15px 10px 15px;
    border: solid 1px #000000;
    background-color: #eeeeee; }
  .error-popup .error-details div {
    margin: 3px 0px; }

.popup2 {
  position: fixed;
  top: 100px;
  margin-left: -250px;
  width: 500px;
  left: 50%;
  margin-left: -250px;
  border: solid 1px #fff;
  z-index: 5;
  text-align: center;
  padding: 0;
  /* .inner */ }
  .popup2 .inner {
    width: 100%;
    border: solid 3px #39577b;
    margin: 0; }
    .popup2 .inner .menu-bar {
      margin: 0;
      padding: 0.5em;
      background-color: #39577b;
      color: #fff;
      height: 30px;
      width: 100%;
      border-bottom: solid 1px #999;
      text-align: left;
      cursor: move; }
      .popup2 .inner .menu-bar .title {
        text-align: left;
        font-weight: bold; }
      .popup2 .inner .menu-bar .popup-close {
        font-size: 10pt;
        position: absolute;
        right: 5px;
        top: 5px;
        font-weight: normal;
        cursor: pointer; }
        .popup2 .inner .menu-bar .popup-close:hover {
          font-weight: bold; }
    .popup2 .inner .content {
      padding: 7px;
      background-color: #dce0e9; }
      .popup2 .inner .content .information {
        text-align: left;
        font-size: 8pt;
        border: solid 1px #39577b;
        background-color: #fff;
        padding: 5px;
        margin-top: 15px; }

.tab-label {
  border: 1px solid #000;
  background-color: #eee;
  padding: 5px;
  display: inline-block;
  cursor: pointer; }

.tab-label-selected {
  border-bottom: none;
  background-color: #fff;
  cursor: inherit; }

.tabbed-pane {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #f0f2f7;
  padding: 5px; }

div.m-tabs {
  border-bottom: 1px solid #999999;
  zoom: 1;
  margin-bottom: 10px;
  padding-left: 4px; }
  div.m-tabs:before, div.m-tabs:after {
    display: table;
    content: ""; }
  div.m-tabs:after {
    clear: both; }
  div.m-tabs a {
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom-width: 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
    color: #666;
    float: left;
    margin-right: 7px;
    padding: 4px 15px 4px 15px;
    position: relative;
    text-decoration: none;
    cursor: pointer; }
    div.m-tabs a:hover {
      text-decoration: underline; }
    div.m-tabs a.active {
      border-color: #999;
      color: #333;
      font-weight: bold;
      padding-bottom: 5px;
      margin-top: -1px;
      top: 1px;
      cursor: inherit; }
      div.m-tabs a.active:hover {
        text-decoration: none; }

.ktg-tooltip {
  position: fixed;
  top: 100px;
  border: 2px solid #aa9999;
  padding: 2px;
  background-color: #fff7ef;
  z-index: 5; }
  .ktg-tooltip table tbody th, .ktg-tooltip table tbody td {
    padding: 2px 4px; }

table.zebra > tbody > tr:nth-child(odd) {
  background-color: #ffffff; }

table.zebra > tbody > tr:nth-child(even) {
  background-color: #f0f0f0; }

table.zebra-body > tbody:nth-child(odd) {
  background-color: #ffffff; }

table.zebra-body > tbody:nth-child(even) {
  background-color: #f0f0f0; }

div.field-account {
  white-space: nowrap; }
  div.field-account tr.account-selected .close {
    color: red;
    cursor: pointer; }
  div.field-account tr.account-selected .account {
    width: 100%; }
  div.field-account input.account-search {
    width: 300px; }
  div.field-account .uib-typeahead-match.active .status-active,
  div.field-account .uib-typeahead-match.active .status-inactive,
  div.field-account .uib-typeahead-match.active .status-closed {
    /* we are coloring the text of the account options, and we want to make sure 
            the current selection stands out against the highlighting's colored background*/
    color: #fff !important; }
  div.field-account .input-error {
    border: 2px solid red; }

/* styles related to the loading message */
.angular-loading-div-outer {
  background-color: #39577b;
  padding: 2px;
  margin: 10px 0px 10px 0px;
  display: inline-block;
  border-radius: 8px; }

.angular-loading-div-inner {
  background-color: #ffffff;
  padding: 5px 15px 5px 5px;
  vertical-align: middle;
  border-radius: 6px; }

.angular-loading-message {
  font-size: 10px;
  font-weight: bold;
  color: #39577b; }

.popup.error-popup .error,
.popup.error-popup .error-list,
.popup.error-popup .error-codes,
.popup.error-popup .error-details {
  text-align: left; }

.popup.error-popup .error-codes {
  font-size: 0.9em;
  margin-top: 10px; }

.popup.error-popup .error-details {
  margin-top: 10px; }

.popup.error-popup .login {
  font-weight: normal; }

.popup.error-popup .buttons {
  margin-top: 5px; }