/*----------------------------+
 | Site: TradingBlock         |
 | Part: Dashboard stylesheet |
 +----------------------------*/

/* Imports
=====================================================================*/
/* Use relative paths for CSS imports to support feature branch deployments.
When CSS is served from /TBFE-1955-2/styles/master.css, relative imports
(e.g., reset.css) resolve to /TBFE-1955-2/styles/reset.css correctly. */
@import url(reset.css);
@import url(fontawesome.css);
@import url(third-party.css);
@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);


/* Basics
=====================================================================*/
:root {
    /* Colors */
    --blue-dark: #001236;
    --blue-dark-lighter: #33415e;
    --blue: #a4cfff;
    --blue-dull-light: #d1d8e6;
    --blue-medium: #386094;
    --blue-medium-lighten: #6187be;
    --blue-vibrant: #3a95fb;
    --blue-vibrant-lighten: #74b2fb;
    --darken: rgba(0, 0, 0, 0.3);
    --gold: #f6ce28;
    --green: #1b958f;
    --green-dull: #00b2ac;
    --green-lighten: #33aaa6;
    --lighten: rgba(255, 255, 255, 0.15);
    --lighten2x: rgba(255, 255, 255, 0.30);
    --lighten3x: rgba(255, 255, 255, 0.45);
    --purple: #68369a;
    --purple-light: #9c72c6;
    --red: #c00000;
    --red-dull: #c44f62;
    --red-dull-lighten: #d07281;
    --red-light: #fea8a9;
    --salmon: #ed6767;
    --salmon-lighten: #f29595;
    --teal: #02fff6;
    --teal-light: #a9fbf8;
    --yellow: #ffcd7e;

    /* Dimensions */
    --check-size: 21px;
    --dashboard-alert-height: 33px;
    --dashboard-nav-height: 46px;
    --field-height: 2.1rem;
    --gap: 15px;
    --icon-size: 19px;
    --radius: 5px;
}

*::-webkit-scrollbar {
    background-color: transparent;
    width: 0.7rem;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

a,
a:not([href]):not([tabindex]) {
    color: var(--blue);
    transition: all 0.05s ease-in-out;
}

a:hover {
    color: #fff;
}

body {
    height: 100%;
    overflow: hidden;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

button {
    appearance: normal;
    background: none;
    border: 0;
    color: var(--blue);
    padding: 0;
    transition: all 0.05s ease-in-out;
}

button:hover {
    color: #fff;
}

em {
    font-style: italic;
}

html {
    font-size: 16px;
    height: 100%;
}

hr {
    background: var(--lighten2x);
    border: 0;
    clear: both;
    color: var(--lighten2x);
    height: 1px;
    margin: 1rem 0;
}

img {
    max-width: 100%;
}

ol {
    list-style: decimal;
    margin-left: 2em;
}

ol,
p,
table,
ul {
    margin-bottom: 1em;
}

strong {
    font-weight: 900;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-width: 1px 0;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.3em 0.35em;
    vertical-align: middle;
}

thead th {
    color: rgba(255, 255, 255, 0.5);
    border-width: 0 0 1px;
}

tr:last-child td {
    border: 0;
}

ul {
    list-style: disc;
    margin-left: 1.5em;
}

#releaseNotesTable td {
    font-size: .95rem
}


/* Layout
=====================================================================*/
#app-root {
    height: 100%;
}

#portal-root {
    z-index: 999;
}


/* Content
=====================================================================*/
/* Account summary */
.account-summary-env .column:first-child {
    padding-top: 0.3em;
}

.account-summary-env p {
    margin-bottom: 0.2rem;
}

.account-summary-nickname>* {
    line-height: 1.3;
}

.account-summary-nickname>*,
.account-summary-switcher .btn-link {
    font-weight: bold;
    text-align: left;
}

/* Account switcher */
#account-switcher-table .selected {
    color: var(--green);
}

#account-switcher-table tr {
    line-height: 1.5;
} 

#account-switcher-table tr.highlighted {
    background-color: var(--lighten);
}

/* Actions */
.inline-actions {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
}

.inline-actions>li {
    margin-right: 0.1rem;
}

.inline-actions>li:last-child {
    margin: 0;
}

/* Alerts */
.alert {
    border: 0;
}

.alert,
.alert * {
    color: var(--blue-dark) !important;
}

.alert p:last-child {
    margin: 0;
}

.alert-danger {
    background: var(--salmon);
}

.alert-info {
    background: var(--blue);
    padding-bottom: 0;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 600;
}

.alert-success {
    background: var(--teal-light);
}

.alert-warning {
    background: var(--yellow);
}

.order-warning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
}

/* Toasters */
.Toastify__toast--warning .btn-link {
    color: var(--blue-dark-lighter);
}

.Toastify__toast.not-closable {
    cursor: default;
}

div.Toastify>div>div[class*='Toastify__toast Toastify__toast--info not-closable'] {
    background: var(--blue-dark-lighter);
    border-radius: 5px;
}

/* Badges */
.badge {
    font-size: 1rem;
    padding: 0.15rem 0.8rem 0.1rem;
}

.badge-dark {
    background: var(--lighten);
}

.badge-icon {
    color: var(--blue);
    font-size: 0.8rem;
    vertical-align: 0.1em;
}

.badge-title-icon .badge-title {
    margin-right: 1rem;
}

button.badge-dark {
    color: var(--blue);
}

/* Editable */
/* Input */
.badge-input {
    background: none;
    border: 0;
    padding: 0;
    width: 6em;
}

.badge-dark .badge-input {
    color: #fff;
}

.badge-dark input::-moz-placeholder {
    color: var(--blue);
}

.badge-dark input::-webkit-input-placeholder {
    color: var(--blue);
}

/* React select */
.badge .select__control {
    background: none;
    border: 0;
    border-radius: 0;
    min-height: 0;
    min-width: 6em;
}

.badge .select__indicator {
    padding: 0 0 0 0.5em;
}

.badge .select__indicator-separator {
    display: none;
}

.badge .select__input,
.badge .select__single-value {
    color: #fff;
    font-weight: normal;
}

.badge .select__input input {
    text-transform: uppercase;
}

.badge .select__placeholder {
    color: var(--blue);
    font-weight: normal;
}

.badge .select__value-container {
    padding: 0;
}

/* Blocks */
.block {
    background: var(--blue-dark);
    border-radius: var(--radius);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 0.975rem;
    height: 100%;
    margin-bottom: var(--gap);
}

/* Add block */
.add-block-grid {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: 1fr 1fr 1fr;
}

.add-block-grid .btn {
    border-radius: var(--radius);
    display: block;
    padding: 0.7em 0;
    text-align: center;
}

.add-block-grid .btn:hover {
    background: var(--lighten);
}

/* Linked accounts */
.linked-accounts {
    list-style: none;
    margin-left: 0;
}

.linked-accounts>li {
    display: flex;
    margin-bottom: 1em;
}

.linked-accounts-icon,
.linked-accounts-remove {
    flex: 0 0 auto;
    width: 2.3rem;
}

.linked-accounts-name,
.linked-accounts-status,
.linked-accounts-upload {
    flex: 0 0 auto;
    padding: 0 1em;
    width: calc((100% - 4.6rem) / 3);
}

.linked-accounts-remove {
    text-align: right;
}

.linked-accounts-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linked-accounts-warning {
    width: 100vw;
    min-width: 10rem;
    max-width: 26rem;
    margin-top: 1em;
}

@media (max-width: 768px) {
    .linked-accounts-warning {
        max-width: 25rem;
    }
    .trade-auth-help-text {
        margin-bottom: 1rem;
    }
}

.add-block-title {
    display: block;
    padding-top: 0.3em;
    white-space: pre-wrap;
}

/* Body */
.block-body {
    flex: 1 1 auto;
    padding: 0 var(--gap) var(--gap);
    overflow-x: scroll;
    overflow-y: auto;
}

.block-body:first-child {
    padding: var(--gap);
}

.block-body-noscroll {
    overflow: hidden;
}

.block-body-has-scrollable-content {
    display: flex;
    flex-direction: column;
}

/* Footer */
.block-footer {
    flex: 0 0 auto;
    padding: 0 var(--gap) var(--gap);
}

.block-footer-actions {
    text-align: right;
}

/* Header */
.block-header {
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    justify-content: space-between;
    align-items: center;
}

/* Actions */
.block-actions {
    flex: 0 0 auto;
    align-items: center;
}

.block-actions ul {
    display: flex;
    list-style: none;
    margin: 0;
    align-items: center;
}

.block-action-button {
    background: none;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    min-width: 2rem;
    padding: var(--gap);
}

.block-action-button:hover {
    color: #fff;
}

.block-action-button.disabled {
    color: var(--blue-dark-lighter);
    cursor: default;
}

/* Title */
.block-title {
    flex: 1 1 auto;
    display: flex;
    align-content: center;
    font-weight: 300;
    line-height: 1;
    padding: var(--gap);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-direction: column;
}

.block-title .badge-input {
    width: 4em;
}

.block-title .badge .select__dropdown-indicator {
    display: none;
}

/* Tabs */
.block-nav {
    align-items: center;
    margin-bottom: calc((var(--gap) / 2) * -1);
    min-width: 0;
    overflow: hidden;
}

.block-nav .nav-link {
    border-radius: 0;
    color: var(--blue);
    cursor: pointer;
    margin-right: var(--gap);
    min-width: 0;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-nav .nav-link.active {
    background: none;
    color: #fff;
    opacity: 1;
}

.block-nav .nav-item {
    flex: 0 0 auto;
    margin: 0 var(--gap) 0 0;
    min-width: 0;
}

.block-nav .nav-item-last {
    flex: 1 1 0%;
    margin: 0 var(--gap) 0 0;
    min-width: 0;
    overflow: hidden;
}

.block-nav .nav-item-last.symbol-list-nav {
    max-width: 55%;
    min-width: 0;
}

.expand-rows-nav-item {
    display: flex;
    align-items: center;
}

.block-nav .nav-item:last-child {
    margin-right: 0;
}

.block-nav .nav-price {
    align-items: center;
    display: flex;
}

.block-nav .nav-price-change {
    margin-left: 0.3em;
}

.block-nav .nav-stock-name .mute {
    max-width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Edit mode */
.block-header .block-drag-handle,
.block-header .block-drag-handle:hover {
    cursor: move;
    text-decoration: underline;
}

.edit-mode .block-mask.block-movable {
    display: flex;
}

.edit-mode .react-grid-item>.react-resizable-handle::after {
    background: none;
    border: 13px solid #fff;
    border-left-color: transparent;
    border-top-color: transparent;
    bottom: 3px;
    height: 25px;
    right: 3px;
    width: 25px;
}

.edit-mode .react-grid-item.react-grid-placeholder {
    background: #fff;
}

/* Highlighted */
@keyframes highlighted-pulse {
    0% {
        box-shadow: 0 0 0 3px var(--yellow);
    }

    100% {
        box-shadow: 0 0 0 70px rgba(255, 205, 126, 0), 0 0 0 3px var(--yellow);
    }
}

.highlighted-block.block {
    box-shadow: 0 0 0px 3px var(--yellow);
}

.highlighted-block.animated.block {
    animation: highlighted-pulse 0.5s 1;
    animation-timing-function: ease-out;
    box-shadow: 0 0 0px 3px var(--yellow);
}

/* Link mode */
@keyframes linked-pulse {
    0% {
        box-shadow: 0 0 0 3px var(--teal);
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px var(--teal);
    }
}

@keyframes linked-pulse-GREEN {
    0% {
        box-shadow: 0 0 0 3px rgb(114, 255, 131);
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px rgb(114, 255, 131);
    }
}

@keyframes linked-pulse-RED {
    0% {
        box-shadow: 0 0 0 3px #ed6767;
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px #ed6767;
    }
}

@keyframes linked-pulse-WHITE {
    0% {
        box-shadow: 0 0 0 3px ghostwhite;
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px ghostwhite;
    }
}

@keyframes linked-pulse-TEAL {
    0% {
        box-shadow: 0 0 0 3px #02fff6;
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px #02fff6;
    }
}

@keyframes linked-pulse-YELLOW {
    0% {
        box-shadow: 0 0 0 3px rgb(255, 255, 120);
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px rgb(255, 255, 120);
    }
}

@keyframes linked-pulse-ORANGE {
    0% {
        box-shadow: 0 0 0 3px #FFAF19;
    }

    100% {
        box-shadow: 0 0 0 70px rgba(2, 255, 246, 0), 0 0 0 3px #FFAF19;
    }
}

.link-mode .block-mask.block-linkable {
    display: flex;
}

.linked-block .block,
.linked-block.block {
    box-shadow: 0 0 0 3px var(--teal);
}

.linked-block.animated .block,
.linked-block.animated.block {
    animation: linked-pulse 0.5s 1;
    box-shadow: 0 0 0 3px var(--teal);
}

.linked-block.animated.GREEN {
    animation: linked-pulse-GREEN 0.5s 1;
    box-shadow: 0 0 0 3px rgb(114, 255, 131);
}

.linked-block.animated.RED {
    animation: linked-pulse-RED 0.5s 1;
    box-shadow: 0 0 0 3px #ed6767;
}

.linked-block.animated.WHITE {
    animation: linked-pulse-WHITE 0.5s 1;
    box-shadow: 0 0 0 3px ghostwhite;
}

.linked-block.animated.TEAL {
    animation: linked-pulse-TEAL 0.5s 1;
    box-shadow: 0 0 0 3px #02fff6;
}

.linked-block.animated.YELLOW {
    animation: linked-pulse-YELLOW 0.5s 1;
    box-shadow: 0 0 0 3px rgb(255, 255, 120);
}

.linked-block.animated.ORANGE {
    animation: linked-pulse-ORANGE 0.5s 1;
    box-shadow: 0 0 0 3px #FFAF19;
}


/* Mask */
.block-mask {
    background: rgba(49, 55, 103, 0.5);
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    display: none;
    font-size: 2rem;
    height: calc(100% - 4px);
    justify-content: center;
    left: 2px;
    position: absolute;
    top: 2px;
    width: calc(100% - 4px);
    z-index: 100;
}

.block-mask.current-group {
    background: var(--teal);
    opacity: 0.5;
}

.block-linkable {
    cursor: pointer;
}

.block-unlinkable {
    cursor: not-allowed;
}

.block-movable {
    cursor: move;
}

/* Sections */
.block-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: var(--gap);
    padding-bottom: calc(var(--gap) / 2);
}

.block-section:last-child {
    border: 0;
    margin: 0;
    padding: 0;
}

.block-section-noborder {
    border: 0;
    padding: 0;
}

.block-section-fixed {
    flex: 0 0 auto;
}

.block-section-flexible {
    flex: 1 1 auto;
}

/* Specifics */
/* Account */
.block-account.block-width-md .block-body,
.block-account.block-width-lg .block-body {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
}

.block-account.block-width-md .block-section,
.block-account.block-width-lg .block-section {
    border: 0;
    flex: 1 1 auto;
    margin: 0 var(--gap) 0 0;
    padding: 0;
}

.order-block-settings {
    min-height: 30em;
}

.order-block-settings .select__menu-list {
    max-height: 200px;
}

/* Options chain */
.chain .chain-head {
    color: var(--blue);
    padding: 0.3em 0.7em;
    padding-top: 0.5em;
    text-align: center;
    position: sticky;
}

.chain .monthly th {
    color: var(--white);
}

.chain .inmoney {
    background: var(--lighten2x);
}

.chain .outmoney {
    background: var(--lighten);
}

.chain .row-link:hover td {
    background: none;
}

.chain .row-link:hover td.inmoney {
    background: var(--lighten3x);
}

.chain .row-link:hover td.outmoney {
    background: var(--lighten);
}

.chain .strike {
    text-align: center;
}

/* Mutual fund */
.mutual-leg {
    display: grid;
    grid-gap: calc(var(--gap) * 0.66);
    grid-template-columns: 4em 4em minmax(4em, 8em) 3.6em minmax(7em, auto) 3.6em;
    margin-bottom: calc(var(--gap) * 0.66);
}

.mutual-leg-action {
    align-items: center;
    display: flex;
}

.mutual-leg-action-icon {
    flex: 0 0 auto;
    margin-right: var(--gap);
}

.mutual-leg-setting {
    align-self: center;
}

/* Sizes */
.block-mutual.block-width-sm .mutual-leg {
    grid-template-columns: repeat(4, 1fr);
}

.block-mutual.block-width-sm .mutual-leg-action {
    grid-column: 2 / span 2;
    grid-row: 2;
}

.block-mutual.block-width-sm .mutual-leg-amt {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.block-mutual.block-width-sm .mutual-leg-position {
    grid-row: 2;
}

/* Order */
/* Footer */
.block-order-footer {
    display: flex;
}

.block-order-footer-action.btn {
    background: var(--green);
    border-radius: 0 0 var(--radius) 0;
    flex: 0 0 auto;
    padding: 0 var(--gap);
}

.block-order-footer-action.btn:hover {
    background: var(--green-lighten);
}

.block-order-footer-summary {
    background: var(--lighten);
    border-radius: 0 0 0 var(--radius);
    flex: 1 1 auto;
    padding: calc(var(--gap) / 2) var(--gap);
}

.block-order-footer-summary p {
    margin: 0;
}

/* Legs */
.order-leg {
    display: grid;
    grid-gap: calc(var(--gap) * 0.66);
    grid-template-columns: 3.6em minmax(4em, 5em) minmax(4em, 8em) 3.6em minmax(4em, auto) minmax(4em, auto) minmax(7em, 15em) 1em;
    margin-bottom: calc(var(--gap) * 0.66);
}

.order-leg .props-aligned .prop-title {
    margin-right: 1em;
    width: 2.5em;
}

.order-leg .props-cols {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.order-leg.invalid {
    border-radius: 6px;
    box-shadow: 0 0 0 2px var(--orange) !important;
}

.order-leg-askbid .columns {
    grid-gap: 3px;
}

.order-leg-askbid .trunc-abbr {
    display: none;
}

.order-leg-remove {
    justify-self: end;
}

.order-leg-remove .btn {
    font-size: 20px;
    line-height: 1;
}

.order-leg-setting {
    align-self: center;
    min-width: 0;
}

.order-leg-setting .btn .select__control {
    min-width: 0;
}

.order-leg-sentiment {
    grid-column: 5 / span 4;
}

.order-leg-sentiment .tb-icon-multiline {
    margin-right: 0.4em;
}

.order-leg-strategy {
    grid-column: 3 / span 2;
}

.order-leg-timing {
    grid-column: 5;
}

/* Add/clear */
.order-leg-add {
    border-top: 3px solid var(--lighten);
    margin: calc(2 * var(--gap)) calc(-1 * var(--gap));
    position: relative;
}

.order-leg-add .btn:disabled {
    cursor: not-allowed;
}

.order-leg-add .btn:hover .fa-stack-1x {
    color: #000;
}

.order-leg-add .btn:hover .fa-stack-2x {
    color: #fff;
}

.order-leg-add .fa-stack {
    background: var(--blue-dark);
    box-shadow: 0 0 0 var(--blue-dark);
}

.order-leg-add .fa-stack-1x,
.order-leg-add .btn:disabled:hover .fa-stack-1x {
    color: var(--blue);
    transition: all 0.05s ease-in-out;
}

.order-leg-add .fa-stack-2x,
.order-leg-add .btn:disabled:hover .fa-stack-2x {
    color: var(--lighten);
    transition: all 0.05s ease-in-out;
}

.order-leg-clear {
    right: var(--gap);
}

.order-leg-clear .btn {
    padding: 0 0.4em;
    opacity: 0.5;
    transition: all 0.05s ease-in-out;
}

.order-leg-clear .btn:hover {
    opacity: 1;
}

.order-leg-clear,
.order-leg-plus {
    background: var(--blue-dark);
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}

.order-leg-plus {
    left: var(--gap);
}

.order-leg-plus .btn {
    font-size: 0.5rem;
}

/* Settings */
.order-settings {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: 8.25em 3.6em minmax(6em, 12em) 3.6em minmax(9em, auto);
}

.order-settings-feature {
    align-self: center;
}

/* Sizes */
.block-order.block-width-lg .block-order-footer {
    min-height: 2.9rem;
}

/* Large */
.block-order.block-width-lg .order-leg-askbid .trunc-abbr {
    display: none;
}

.block-order.block-width-lg .order-leg-askbid .column:first-child .prop-title {
    width: 2.5em;
}

.block-order.block-width-lg .order-leg-askbid .column:last-child .prop-title {
    width: 2.4em;
}

/* Medium / small */
.block-order.block-width-md .block-order-footer,
.block-order.block-width-sm .block-order-footer {
    display: block;
}

.block-order.block-width-md .block-order-footer-action.btn,
.block-order.block-width-sm .block-order-footer-action.btn {
    border-radius: 0 0 var(--radius) var(--radius);
    display: block;
    padding: var(--gap);
    width: 100%;
}

.block-order.block-width-md .order-leg,
.block-order.block-width-sm .order-leg {
    grid-template-columns: 3.6em 1fr 1fr 1fr 1fr 1fr 1fr 1.3rem;
}

.block-order.block-width-md .order-leg-set .order-leg,
.block-order.block-width-sm .order-leg-set .order-leg {
    border-bottom: 1px solid var(--blue-dark-lighter);
    margin-bottom: calc(var(--gap) / 2);
    padding-bottom: calc(var(--gap) / 2);
}


.block-order.block-width-md .order-leg-set .order-leg:last-child,
.block-order.block-width-sm .order-leg-set .order-leg:last-child {
    border-bottom: 0;
    margin-bottom: var(--gap);
    padding: 0;
}

.block-order.block-width-md .order-leg-askbid,
.block-order.block-width-sm .order-leg-askbid {
    grid-column: 5 / span 3;
    grid-row: 1;
}

.block-order.block-width-md .order-leg-askbid .columns,
.block-order.block-width-sm .order-leg-askbid .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(3.5em, auto));
}

.block-order.block-width-md .order-leg-position,
.block-order.block-width-sm .order-leg-position {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.block-order.block-width-md .order-leg-putcall,
.block-order.block-width-sm .order-leg-putcall {
    grid-column: 1;
    grid-row: 2;
}

.block-order.block-width-md .order-leg-qty,
.block-order.block-width-sm .order-leg-qty {
    grid-column: 5 / span 3;
    grid-row: 2;
}

.block-order.block-width-md .order-leg-remove,
.block-order.block-width-sm .order-leg-remove {
    align-self: start;
    grid-column: 8;
    grid-row: 1;
}

.block-order.block-width-md .order-leg-setting:empty,
.block-order.block-width-sm .order-leg-setting:empty {
    display: none;
}

.block-order.block-width-md .order-leg-sentiment,
.block-order.block-width-sm .order-leg-sentiment {
    grid-column: 5 / span 3;
}

.block-order.block-width-md .order-leg-sentiment .tb-icon-multiline-label,
.block-order.block-width-sm .order-leg-sentiment .tb-icon-multiline-label {
    display: none;
    grid-column: 5;
}

.block-order.block-width-md .order-leg-timing,
.block-order.block-width-sm .order-leg-timing {
    grid-column: 2 / span 3;
    grid-row: 2;
}

.block-order.block-width-md .order-settings,
.block-order.block-width-sm .order-settings {
    grid-template-columns: repeat(4, 1fr);
}

.block-order.block-width-md .order-settings-feature-minask,
.block-order.block-width-sm .order-settings-feature-minask {
    grid-column: 1 / span 4;
    grid-row: 2;
    margin: var(--gap) 0;
}

@media (max-width: 450px) {
    .block-order.block-width-sm .order-leg {
        grid-template-columns: 3.6em 1fr 1fr 9em 1.3rem;
    }

    .block-order.block-width-sm .order-leg-askbid .prop-title {
        width: 0.6em;
    }

    .block-order.block-width-sm .order-leg-askbid {
        grid-column: 4;
    }

    .block-order.block-width-sm .order-leg-position {
        grid-column: 3;
    }

    .block-order.block-width-sm .order-leg-putcall {
        grid-column: 1;
    }

    .block-order.block-width-sm .order-leg-qty {
        grid-column: 4 / span 2;
    }

    .block-order.block-width-sm .order-leg-remove {
        grid-column: 5;
    }

    .block-order.block-width-sm .order-leg-timing {
        grid-column: 2 / span 2;
    }
}

/* Price chart */
.block-price-chart .block-body {
    display: flex;
    flex-direction: column;
}

.block-price-chart .block-section {
    position: relative;
}

.block-price-chart .tradingview-widget-container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.block-price-chart .tradingview-widget-copyright {
    display: none;
}

.chart-disabled {
    pointer-events: none;
}


.price-chart {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Quote */
.block-quote-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gap);
}

.block-quote-header-primary {
    flex: 0 0 auto;
    margin-right: var(--gap);
}

.block-quote-header-secondary {
    flex: 1 1 auto;
}

.block-quote.block-width-sm .block-quote-header {
    display: block;
}

.block-quote.block-width-sm .block-quote-header-primary {
    margin-bottom: var(--gap);
}

.block-quote.block-width-sm .symbol-summary {
    display: flex;
}

.block-quote.block-width-sm .symbol-summary-title {
    margin: 0 var(--gap) 0 0;
}

.block-quote .block-quote-ask .prop-value .price,
.block-quote .block-quote-bid .prop-value .price {
    display: inline;
}

/* Quote-Extended */

.symbol-summary-price {
    padding-left: 5px;
}

.block-quote-extended.block-width-sm .block-quote-header {
    display: block;
}

.block-quote-extended.block-width-sm .block-quote-header-primary {
    margin-bottom: var(--gap);
}

.block-quote-extended.block-width-sm .symbol-summary {
    display: flex;
}

.block-quote-extended.block-width-sm .symbol-summary-title {
    margin: 0 var(--gap) 0 0;
}

.quote-description {
    display: flex;
}

.quote-description-copy {
    flex: 1 1 auto;
    max-height: 4.4rem;
    overflow: hidden;
    position: relative;
}

.quote-description-image {
    flex: 0 0 auto;
    margin-right: var(--gap);
    width: 69px;
}

.quote-description-toggle {
    background: var(--blue-dark);
    bottom: -0.3rem;
    padding: 0.3rem 1rem;
    position: absolute;
    right: 0;
}

/* Sizes */
/* Small */
.block-quote.block-width-sm .block-quote-ask {
    order: 2;
}

.block-quote.block-width-sm .block-quote-bid {
    order: 1;
}

.block-quote.block-width-sm .block-quote-close {
    order: 6;
}

.block-quote.block-width-sm .block-quote-header .prop-stacked {
    width: 48%;
}

.block-quote.block-width-sm .block-quote-high {
    order: 3;
}

.block-quote.block-width-sm .block-quote-low {
    order: 4;
}

.block-quote.block-width-sm .block-quote-open {
    order: 5;
}

.block-quote.block-width-sm .timestamp-date {
    margin-right: 0.5em;
}

.block-quote.block-width-sm .timestamp-date,
.block-quote.block-width-sm .timestamp-time {
    display: inline;
}

/* Medium */
.block-quote.block-width-md .block-quote-ask {
    order: 4;
}

.block-quote.block-width-md .block-quote-bid {
    order: 1;
}

.block-quote.block-width-md .block-quote-close {
    order: 6;
}

.block-quote.block-width-md .block-quote-header .prop-stacked {
    width: 30%;
}

.block-quote.block-width-md .block-quote-high {
    order: 2;
}

.block-quote.block-width-md .block-quote-low {
    order: 5;
}

.block-quote.block-width-md .block-quote-open {
    order: 3;
}

/* Medium + small */
.block-quote.block-width-md .block-quote-header .props,
.block-quote.block-width-sm .block-quote-header .props {
    flex-wrap: wrap;
}

.block-quote.block-width-md .block-quote-header .prop-stacked,
.block-quote.block-width-sm .block-quote-header .prop-stacked {
    display: flex;
    flex: 0 0 auto;
    margin: 0 0 0.2em;
}

.block-quote.block-width-md .block-quote-header .prop-title,
.block-quote.block-width-sm .block-quote-header .prop-title {
    flex: 0 0 auto;
    margin-right: 1em;
    width: 2.6em;
}

.block-quote.block-width-md .block-quote-header .prop-value,
.block-quote.block-width-sm .block-quote-header .prop-value {
    flex: 1 1 auto;
}

/* TODO: Remove/refactor 'block-quote-extended' styles */

.block-quote-extended.block-width-sm .block-quote-ask {
    order: 2;
}

.block-quote-extended.block-width-sm .block-quote-bid {
    order: 1;
}

.block-quote-extended.block-width-sm .block-quote-close {
    order: 6;
}

.block-quote-extended.block-width-sm .block-quote-header .prop-stacked {
    width: 48%;
}

.block-quote-extended.block-width-sm .block-quote-high {
    order: 3;
}

.block-quote-extended.block-width-sm .block-quote-low {
    order: 4;
}

.block-quote-extended.block-width-sm .block-quote-open {
    order: 5;
}

/* Medium */
.block-quote-extended.block-width-md .block-quote-ask {
    order: 4;
}

.block-quote-extended.block-width-md .block-quote-bid {
    order: 1;
}

.block-quote-extended.block-width-md .block-quote-close {
    order: 6;
}

.block-quote-extended.block-width-md .block-quote-header .prop-stacked {
    width: 30%;
}

.block-quote-extended.block-width-md .block-quote-high {
    order: 2;
}

.block-quote-extended.block-width-md .block-quote-low {
    order: 5;
}

.block-quote-extended.block-width-md .block-quote-open {
    order: 3;
}

/* Medium + small */
.block-quote-extended.block-width-md .block-quote-header .props,
.block-quote-extended.block-width-sm .block-quote-header .props {
    flex-wrap: wrap;
}

.block-quote-extended.block-width-md .block-quote-header .prop-stacked,
.block-quote-extended.block-width-sm .block-quote-header .prop-stacked {
    display: flex;
    flex: 0 0 auto;
    margin: 0 0 0.2em;
}

.block-quote-extended.block-width-md .block-quote-header .prop-title,
.block-quote-extended.block-width-sm .block-quote-header .prop-title {
    flex: 0 0 auto;
    margin-right: 1em;
    width: 2.6em;
}

.block-quote-extended.block-width-md .block-quote-header .prop-value,
.block-quote-extended.block-width-sm .block-quote-header .prop-value {
    flex: 1 1 auto;
}



/* Buttons */
.btn {
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 0.5em 2em 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn[title*='Options'],
#data-toggle {
    text-transform: none
}

.btn,
.btn:hover {
    color: #fff;
}

.btn.disabled {
    background: var(--lighten2x);
    border: 0;
}

.btn-blend {
    padding: 0;
}

.btn-buy {
    background: var(--blue-vibrant);
}

.btn-buy:hover {
    background: var(--blue-vibrant-lighten);
}

.btn-call {
    background: var(--green);
}

.btn-call:hover {
    background: var(--green-lighten);
}

.btn-credit,
.btn-credit:hover {
    color: var(--teal);
    ;
}

.btn-dark {
    background: var(--blue-dark-lighter);
    border-color: transparent;
}

.btn-dark.focus,
.btn-dark:focus {
    box-shadow: none !important;
}

.btn-darken {
    background: var(--darken);
}

.btn-dark:hover {
    background: var(--lighten2x);
    border-color: transparent;
}

.btn-dark.dropdown-toggle::after {
    color: var(--blue);
}

.btn-debit,
.btn-debit:hover {
    color: var(--salmon);
}

.btn-exchange {
    background: var(--purple);
}

.btn-exchange:hover {
    background: var(--purple-light);
}

.btn-group>.btn.dropdown-toggle-split {
    flex: 0 0 auto;
}

.btn-light,
.btn-light:hover {
    color: var(--blue-dark);
}

.btn-lighten {
    background: var(--lighten);
}

.btn-lighten:hover {
    background: var(--lighten2x);
}

.btn-link {
    color: var(--blue);
}

.btn-link:hover {
    color: var(--blue);
}

.btn-live {
    background: var(--green);
}

.btn-narrow.btn-tall {
    padding: 0 0.3rem;
}

.btn-narrow.dropdown-toggle::after {
    right: 0.4rem;
}

.btn-mini {
    font-size: 0.65rem;
    padding: 0.4em 1em 0.25em;
}

.btn-order {
    background: var(--green);
}

.btn-order:hover {
    background: var(--green-lighten);
}

.btn-primary,
.btn-primary:hover:not(.disabled) {
    border: 0;
    background: var(--green);
}

.btn-primary:hover {
    opacity: 0.7;
}

.btn-put {
    background: var(--salmon);
}

.btn-put:hover {
    background: var(--salmon-lighten);
}

.btn-reject {
    background: var(--salmon);
}

.btn-reject:hover {
    opacity: 0.7;
}

.btn-outline-light {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.4);
}

.btn-shares {
    background: var(--blue-medium);
}

.btn-sell {
    background: var(--red);
}

.btn-sell:hover {
    background: var(--red-light);
}

.btn-tall {
    border-radius: 4px;
    height: var(--field-height);
    padding: 0 0.6em;
}

.btn-virtual {
    background: var(--gold);
}

.btn-virtual,
.btn-virtual:hover {
    color: var(--blue-dark);
}

/* Multi-line buttons */
.btn-subtitle {
    font-size: 0.625rem;
}

.btn-title {
    font-size: 0.9375rem;
}

.btn-title,
.btn-subtitle {
    display: block;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Toggle switches */
.btn.toggle {
    border-radius: var(--radius);
    border: 0;
    padding: 4px;
    min-height: var(--field-height);
    min-width: 0;
}

.btn.toggle * {
    height: var(--field-height);
}

.btn.toggle[disabled] {
    cursor: not-allowed;
}

.btn.toggle[disabled] .toggle-handle {
    opacity: 0.3;
}

.btn.toggle[disabled] .toggle-off,
.btn.toggle[disabled] .toggle-on {
    opacity: 0.7;
}

.btn.toggle .btn {
    align-items: center;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    padding: 0 0.75rem;
}

.btn.toggle .toggle-on.btn {
    padding-left: 0.2rem;
}

.btn.toggle .toggle-off.btn {
    padding-right: 0.2rem;
}

.btn.toggle .btn-active {
    cursor: default;
}

.btn.toggle[disabled].btn-shares {
    cursor: default;
}

.btn.toggle[disabled].btn-shares .toggle-handle {
    display: none;
}

.btn.toggle[disabled].btn-shares .toggle-off.btn {
    padding-right: 0.8rem;
}

.btn.toggle[disabled].btn-shares .toggle-on.btn {
    padding-left: 0.8rem;
}

.toggle-handle {
    background: #fff;
    border-radius: var(--radius);
    border: 0;
}

/* Calendar */
.CalendarMonth_table td {
    border: 1px solid #e4e7e7 !important;
}

.CalendarMonth_table td:empty {
    border: 0 !important;
}

/* Carousel */
.boards {
    height: 176px;
    margin: 0 calc(var(--gap) * -1) 3rem;
}

.boards .slick-slide {
    padding: 20px var(--gap);
}

.board-thumb {
    background: var(--lighten);
    border-radius: 6px;
    cursor: pointer;
    height: 100%;
    padding: 9px;
    position: relative;
    transition: all 0.15s ease-in-out;
}

.board-thumb:hover {
    opacity: 0.7;
}

.board-thumb-current {
    background: var(--green);
}

.board-thumb-current-indicator {
    font-size: 1.4rem;
    position: absolute;
    right: -26px;
    top: -20px;
}

.board-thumb-current-indicator .fa-stack-1x {
    color: var(--green);
}

.board-thumb-edit {
    float: right;
    padding: 4px 0 0 4px;
    text-align: right;
}

.board-thumb-edit button,
.board-thumb-edit a {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.board-thumb-edit [class *="fa-"] {
    opacity: 0.5;
}

.board-thumb-empty {
    align-items: center;
    background: none;
    border: 2px dashed var(--lighten2x);
    display: flex;
    justify-content: center;
}

.board-thumb-empty [class *="fa"] {
    transition: all 0.15s ease-in-out;
}

.board-thumb-empty:hover {
    background: var(--lighten);
    opacity: 1;
}

.board-thumb-empty:hover .fa-stack-1x {
    color: var(--blue-dark);
}

.board-thumb-empty:hover .fa-stack-2x {
    color: #fff;
}

.board-thumb-empty .fa-stack-1x {
    color: var(--blue);
}

.board-thumb-empty .fa-stack-2x {
    color: var(--lighten2x);
}

.board-thumb-icon {
    opacity: 0.7;
    position: absolute;
    right: 19px;
    top: 22px;
}

.board-thumb-image {
    background-color: var(--lighten);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    padding: 20px 23px;
}

.board-thumb-title {
    align-items: flex-end;
    display: flex;
    font-size: 1.6rem;
    font-weight: 300;
    height: 3.9rem;
    line-height: 1.2;
    overflow: hidden;
}

/* Arrows */
.boards .slick-arrow {
    background: var(--blue-dark);
    border-radius: 100%;
    height: 46px;
    width: 46px;
    z-index: 1;
}

.boards .slick-arrow:hover {
    background: var(--lighten2x);
}

.boards .slick-arrow:hover:before {
    border-color: #fff;
}

.boards .slick-arrow:before {
    border: 1px solid var(--blue);
    border-width: 0 2px 2px 0;
    content: "";
    left: 50%;
    height: 10px;
    position: absolute;
    top: 50%;
    width: 10px;
}

.boards .slick-disabled {
    display: none !important;
}

.boards .slick-next {
    right: -8px;
}

.boards .slick-next:before {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.boards .slick-prev {
    left: -8px;
}

.boards .slick-prev:before {
    transform: translate(-30%, -50%) rotate(135deg);
}

/* Checklists */
.checklist {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

.checklist .checkcontainer {
    position: absolute;
    left: 0;
    top: 0;
}

.checklist label {
    cursor: pointer;
    display: block;
}

.checklist label.disabled {
    cursor: inherit;
}

.checklist>li {
    margin-bottom: 0.75em;
    padding-left: calc(var(--check-size) + 10px);
    position: relative;
}

.checklist-descriptions .mute {
    display: block;
}

.checklist-icons>li {
    padding-left: calc((var(--check-size) + 10px) * 2)
}

.checklist-icons .checklist-icon {
    position: absolute;
    left: calc(var(--check-size) + 10px);
}

/* Columns */
.columns {
    display: grid;
    grid-gap: var(--gap);
}

.columns2 {
    grid-template-columns: repeat(2, 1fr);
}

.columns3 {
    grid-template-columns: repeat(3, 1fr);
}

.columns4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Widths */
.block-width-sm .columns {
    display: block;
}

/* Currency symbol */
.currency {
    font-size: 0.8rem;
    vertical-align: 0.3em;
}

/* Dashboard */
.dashboard {
    height: 100%;
}

.dashboard-content {
    /* Use relative path for background image to support feature branch deployments.
    When CSS is served from /TBFE-1955-2/styles/master.css, ../images/ resolves
    to /TBFE-1955-2/images/ correctly. */
    background: #242e42 url(../images/bg-default.jpg) no-repeat 50% 50%;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--dashboard-nav-height) + (var(--gap) / 2)) calc(var(--gap) / 2) calc(var(--gap) / 2);
    position: relative;
}

/* Alerts */
.dashboard-alert {
    align-items: center;
    background: var(--red);
    display: flex;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    height: var(--dashboard-alert-height);
    justify-content: center;
    left: 0;
    letter-spacing: 0.1em;
    position: fixed;
    top: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 500;
}

.dashboard-alert.warn {
    background: var(--orange);
    color: #fff;
}

.dashboard-alert.info {
    background: var(--blue);
    color: var(--blue-dark);
}

.dashboard-alert.info a {
    color: var(--blue-dark);
}

.has-alert .dashboard-nav {
    top: var(--dashboard-alert-height);
}

.has-alert .dashboard-content {
    padding-top: calc(var(--dashboard-nav-height) + var(--dashboard-alert-height))
}

/* Backgrounds */
/* Use relative paths for background images to support feature branch deployments. */
.day .dashboard-content {
    background-image: url(../images/bg-day.jpg);
}

.night .dashboard-content {
    background-image: url(../images/bg-night.jpg);
}

/* Drawer */
.dashboard-drawer {
    background: var(--blue-dark-lighter);
    color: #fff;
    height: calc(100% - var(--dashboard-nav-height));
    padding: calc(var(--gap) * 2);
    opacity: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: var(--dashboard-nav-height);
    transform: translateY(-30%);
    transition: all 0.15s ease-in-out;
    visibility: hidden;
    width: 100%;
}

.dashboard-drawer-header {
    border-bottom: 1px solid var(--lighten);
    margin-bottom: calc(var(--gap) * 2);
    padding: 0 var(--gap) calc(var(--gap) * 2);
}

.dashboard-drawer-open {
    overflow: hidden;
}

.dashboard-drawer-open .dashboard-drawer {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Menu */
.dashboard-menu {
    background: var(--blue-dark-lighter);
    box-shadow: 0 0 200px 100px var(--blue-dark);
    color: #fff;
    height: 100%;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--dashboard-nav-height) + 20px) 25px 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(50%);
    transition: all 0.15s ease-in-out;
    visibility: hidden;
    width: 300px;
}

.dashboard-menu:after {
    content: "";
    display: block;
    margin-bottom: 20px;
}

.dashboard-menu-hr {
    background: var(--lighten2x);
    margin: 1rem 0 0.5rem;
}

.dashboard-menu-list {
    font-weight: bold;
    list-style: none;
    margin-left: 0;
}

.dashboard-menu-list li {
    margin-bottom: 0.3em;
}

.dashboard-menu-list .btn-link {
    font-weight: bold;
    text-align: left;
}

.dashboard-menu .btn-link:hover {
    color: #fff;
}

.dashboard-menu-signout {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.dashboard-menu-signout .column:last-child {
    font-weight: bold;
    text-align: right;
}

/* Account summary */
.dashboard-menu-countdown {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.dashboard-menu-countdown p {
    margin-bottom: 0.2rem;
}

.dashboard-menu-countdown svg {
    margin-right: 4px;
}

/* Headings */
.dashboard-menu-heading {
    letter-spacing: 0.05em;
    opacity: 0.5;
    font-size: 0.75rem;
}

.dashboard-menu-title {
    font-size: 1.1875rem;
}

/* Nav */
.dashboard-menu-nav {
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    margin: 1em 0;
    text-transform: uppercase;
}

.dashboard-menu-nav .nav {
    list-style: none;
    margin-left: 0;
}

.dashboard-menu-nav .nav li {
    margin-right: 1em;
}

.dashboard-menu-nav .nav-link {
    font-weight: 900;
    padding: 0;
    text-transform: uppercase;
}

/* Navigation */
.dashboard-nav {
    align-items: stretch;
    background: var(--blue-dark);
    border-bottom: 1px solid #000;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    height: var(--dashboard-nav-height);
    justify-content: space-between;
    left: 0;
    position: fixed;
    top: 0;
    transition: all 0.05s ease-in-out;
    width: 100%;
    z-index: 99;
}

.dashboard-nav.collapsed {
    height: calc(var(--gap) / 3);
}

.dashboard-nav.collapsed .dashboard-nav-panel {
    display: none;
}

.dashboard-nav-panel {
    align-items: stretch;
    display: flex;
    flex: 0 0 auto;
    height: var(--dashboard-nav-height);
}

/* Primary */
.dashboard-switcher-trigger {
    color: #fff;
    display: block;
    flex: 0 0 auto;
    height: 100%;
    margin-right: var(--gap);
    padding: 6px;
    width: calc(var(--dashboard-nav-height) + 3px);
}

.dashboard-switcher-trigger:active,
.dashboard-switcher-trigger:focus,
.dashboard-switcher.open {
    background: var(--blue-dark-lighter);
    color: #fff !important;
}

.dashboard-switcher-trigger:hover {
    opacity: 0.7;
}

.dashboard-switcher-trigger svg {
    height: 100%;
    width: 100%;
}

.dashboard-title {
    display: flex;
    flex-direction: column;
    font-weight: 300;
    justify-content: center;
}

.dashboard-title-primary {
    display: block;
}

.dashboard-title-secondary {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Secondary */
.dashboard-nav-secondary {
    justify-content: center;
}

.dashboard-nav-time {
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    text-transform: uppercase;
}

.dashboard-nav-time .tb-icon {
    margin-right: 10px;
}

.dashboard-nav-tool {
    align-items: center;
    display: flex;
    height: var(--dashboard-nav-height);
    padding: 0 calc(var(--gap) / 2);
}

.dashboard-nav-tool-btn:hover .tb-icon-counter-value {
    border-color: var(--blue-dark-lighter);
}

.dashboard-nav-tool-btn:hover:not(:disabled) {
    background: var(--lighten);
}

.dashboard-nav-tool-btn:disabled {
    color: var(--blue-dark-lighter);
}

/* Tertiary */
.dashboard-nav-tertiary {
    justify-content: flex-end;
}

.dashboard-nav-account {
    display: flex;
}

.dashboard-nav-account-item {
    font-weight: 900;
    padding: 0 calc(var(--gap) / 2);
}

a.dashboard-nav-account-item {
    margin: auto;
}

.dashboard-nav-account-item:hover {
    background: var(--lighten);
}

.dashboard-nav-account-trigger {
    padding: 0 var(--gap);
}

/* Toggle */
.dashboard-nav-toggle {
    border: 11px solid transparent;
    border-top: 11px solid var(--blue-dark);
    height: 0;
    left: 50%;
    position: absolute;
    text-indent: -9999px;
    transform: translateX(-47%);
    transition: all 0.05s ease-in-out;
    top: var(--dashboard-nav-height);
    width: 0;
}

.dashboard-nav-toggle:after {
    border: 4px solid transparent;
    border-top: 4px solid var(--blue);
    content: "";
    height: 0;
    bottom: 3px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    transition: all 0.05s ease-in-out;
    transform: translateX(-50%);
    width: 0;
}

.dashboard-nav-toggle:hover {
    cursor: pointer;
}

.dashboard-nav-toggle:hover:after {
    border-top-color: #fff;
}

/* States */
/* Collapsed nav */
.collapsed-nav .dashboard-content {
    padding-top: calc(var(--gap) * (4 / 3));
}

.collapsed-nav .dashboard-nav-toggle {
    top: calc(var(--gap) / 3);
}

/* Menu open */
.dashboard-menu-open .dashboard-menu {
    opacity: 1;
    transform: translateX(0%);
    visibility: visible;
}

/* Dropdowns */
/* Basic */
.dropdown-dashboard-options .dropdown-toggle {
    font-weight: bold;
}

.dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item {
    color: #fff;
    font-weight: 700;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--lighten3x);
}

.dropdown-item:hover {
    background: var(--lighten);
    color: #fff;
}

.dropdown-menu {
    background: var(--blue-dark-lighter);
    box-shadow: 0 0 20px 5px var(--blue-dark);
    max-height: 10em;
    overflow-x: hidden;
    overflow-y: auto;
}

.dropdown-toggle {
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: normal;
    overflow: hidden;
    text-transform: none;
    padding-right: 1rem;
}

.dropdown-toggle .mute {
    color: var(--blue);
    opacity: 1;
}

.btn .select__value-container {
    padding: 0rem;
    margin-right: -15px;
}


.dropdown-toggle::after {
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.dropdown-toggle.no-caret::after {
    display: none;
}

td .dropdown-toggle {
    font-size: inherit;
}

/* React select */
.btn .basic-multi-select {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

.btn .select__control {
    background: none;
    border: 0;
    border-radius: 0;
    min-height: 0;
    min-width: 7.5em;
    margin-left: -15px;
    padding-left: 15px;
}

.btn .select__indicator {
    padding: 0 0 0 0.5em;
}

.btn .select__indicator-separator {
    display: none;
}

.btn .select__input,
.badge .select__single-value {
    color: #fff;
    font-weight: normal;
}

.btn .select__menu-list {
    max-height: 10em;
    overflow-x: hidden;
    overflow-y: auto;
}

.btn .select__placeholder {
    color: var(--blue);
    font-weight: normal;
}

/* Dark */
.btn-dark .select__single-value {
    color: #fff;
    font-weight: normal;
}

/* Tall */
.btn.btn-tall .basic-multi-select,
.btn.btn-tall .select__control,
.btn.btn-tall .select__value-container,
.btn.btn-tall .select__indicators {
    height: var(--field-height);
}

/* Empty messages */
.empty {
    border: 2px dashed var(--lighten2x);
    font-style: italic;
    opacity: 0.7;
    padding: 2em;
    margin-bottom: 1rem;
    margin-top: 1rem;
    position: relative;
    text-align: center;
}

.empty-title {
    font-style: normal;
    left: 1rem;
    position: absolute;
    top: 1rem;
}


/* Environments */
.dashboard-switcher-trigger.env-beta {
    background: var(--blue-medium-lighten) !important;
}

.env-beta .dashboard-title-secondary {
    color: var(--blue);
}

.dashboard-switcher-trigger.env-local {
    background: #fff !important;
}

.dashboard-switcher-trigger.env-dev {
    background: #fff !important;
}

.dashboard-switcher-trigger.env-production {
    background: var(--blue-dark) !important;
}

/* Field titles */
.fields-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* Floating labels */
.flabel {
    background: var(--lighten);
    border: 1px solid transparent;
    border-radius: var(--radius);
    margin: -1px -1px 0.5em -1px;
    position: relative;
}

.flabel.on {
    background: var(--lighten2x);
}

.flabel.on .flabel-title,
.flabel.filled .flabel-title {
    font-size: 0.8rem;
    top: 4px;
    transform: translateY(0);
}

.flabel-input {
    background: none;
    border: 0;
    color: #fff;
    display: block;
    padding: 1.25rem 1rem 0.45rem;
    width: 100%;
}

/* When filled/focused, label is hidden – use uniform padding so value is vertically centered */
.flabel.filled .flabel-input,
.flabel.on .flabel-input {
    padding: 1rem;
}

.flabel-title {
    color: rgba(255, 255, 255, 0.5);
    left: 1rem;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
}

.flabel.disabled {
    cursor: pointer;
    opacity: 0.5;
}

.flabel+div.mute,
.flabel+p.mute {
    margin-top: 0.5em;
}

/* Icon */
.flabel-icon {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}

/* Number input spinner buttons - hide native spinners */
.flabel-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    padding-right: 3rem; /* Make room for custom buttons */
}

.flabel-input[type="number"]::-webkit-inner-spin-button,
.flabel-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom number input buttons */
.flabel-value {
    position: relative;
}

.flabel-number-buttons {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;
}

.flabel-number-button {
    background: var(--lighten);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    color: var(--teal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: 22px;
    padding: 0;
    transition: all 0.2s ease-in-out;
    line-height: 1;
}

.flabel-number-button:hover:not(:disabled) {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}

.flabel-number-button:active:not(:disabled) {
    background: var(--teal-light);
    transform: scale(0.95);
}

.flabel-number-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.flabel-number-button i {
    font-size: 0.7rem;
}

/* Adjust icon position when number buttons are also present */
.flabel:has(.flabel-number-buttons) .flabel-icon {
    right: 3.5rem;
}

/* Nested */
.flabel-multi .flabel {
    background: none;
    border: 0;
}

/* Prefixes */
.flabel:before {
    font-size: 1.2rem;
    content: attr(data-prefix);
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
}

.flabel.filled .flabel:before,
.flabel.on .flabel:before {
    opacity: 1;
    transform: translateY(-25%);
}

/* React-select */
.flabel .select__control {
    background: none;
    border: 0;
    min-height: 51px;
}

.flabel.filled .select__control,
.flabel.on .select__control {
    padding-top: 0;
}

.flabel.filled .select__indicator,
.flabel.on .select__indicator {
    transform: none;
}

.flabel .select__control--is-focused,
.flabel .select__control--is-focused:hover .flabel .select__control--menu-is-open {
    background: none;
    border: 0 !important;
    box-shadow: none;
}

.flabel .select__indicator-separator {
    display: none;
}

.flabel .select__input,
.flabel .select__single-value {
    color: #fff;
}

/* Vertically center selected value and placeholder */
.flabel .select__placeholder,
.flabel .select__single-value {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.flabel .select__menu {
    background: none;
    box-shadow: none;
    max-width: none;
    position: absolute !important;
    width: 100% !important;
}

.remove-position .flabel .select__menu {
    position: unset !important;
    max-height: unset !important;
}

.flabel .select__option {
    color: #fff !important;
}

.flabel .select__option--is-focused {
    background: var(--lighten) !important;
}

.flabel .select__value-container {
    padding-left: calc(1rem - 2px);
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    height: 100%;
}

.select__option--is-focused {
    background: #e5e7eb !important;
}

.select__option--is-selected {
    background: var(--blue-dark-lighten) !important;
    color: #fff;
}

/* Form content */
.form-content {
    margin: 0 auto;
    max-width: 536px;
}

/* Form group */
.form-group {
    margin-bottom: 1rem;
}

.form-group:after {
    clear: both;
    content: "";
    display: block;
}

/* Icons */
.tb-icon {
    display: inline-block;
    height: var(--icon-size);
    position: relative;
    vertical-align: -3px;
    width: var(--icon-size);
}

.tb-icon-sm {
    height: calc(var(--icon-size) * 0.8);
    width: calc(var(--icon-size) * 0.8);
}

.tb-icon-lg {
    height: calc(var(--icon-size) * 1.3);
    width: calc(var(--icon-size) * 1.3);
}

.tb-icon-2x {
    height: calc(var(--icon-size) * 1.5);
    width: calc(var(--icon-size) * 1.5);
}

.tb-icon-5x {
    height: calc(var(--icon-size) * 3.3);
    width: calc(var(--icon-size) * 3.3);
}

.tb-icon svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.dashboard-icon {
    color: var(--teal);
}

/* Column stack */
.tb-icon-column {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
}

.tb-icon-column-text {
    font-size: 0.8rem;
}

/* Counter */
.tb-icon-counter {
    display: inline-block;
    position: relative;
}

.tb-icon-counter-value {
    background: #fff;
    border: 3px solid var(--blue-dark);
    border-radius: 1em;
    color: var(--blue-dark);
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.1em 0.3em;
    position: absolute;
    right: -5px;
    top: -4px;
}

.tb-icon-counter-value-notifications {
    background: var(--yellow);
}

/* Multiline */
.tb-icon-multiline {
    align-items: center;
    display: inline-flex;
    line-height: 1;
}

.tb-icon-multiline-icon {
    flex: 0 0 auto;
    margin-right: 0.3em;
}

.tb-icon-multiline-label {
    flex: 1 1 auto;
}

/* Stacked */
/* Custom */
.tb-icon-stack {
    position: relative;
    vertical-align: -4px;
}

.tb-icon-stack .tb-icon-stack-1x {
    height: calc(var(--icon-size) * 0.6);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--icon-size) * 0.6);
}

.tb-icon-stack .tb-icon-stack-1x,
.tb-icon-stack .tb-icon-stack-2x {
    display: inline-block;
    position: absolute;
}

.tb-icon-stack .tb-icon-stack-2x {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.tb-icon-stack.tb-icon-5x .tb-icon-stack-1x {
    height: calc(var(--icon-size) * 1.2);
    width: calc(var(--icon-size) * 1.4);
}

/* Icon-specific overrides */
.tb-icon-clipboard .tb-icon-stack-1x {
    transform: translate(-50%, -30%);
}

/* FontAwesome */
.fa-stack .fa-clipboard+.fa-stack-1x {
    transform: translateY(10%);
}

.fa-stack .fa-calendar+.fa-stack-1x {
    font-size: 0.8em;
    transform: translateY(16%);
}

/* Strategies */
.strategy-icon {
    display: inline-block;
    height: var(--icon-size);
    position: relative;
    width: calc(var(--icon-size) * 3.26);
}

.strategy-icon svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Inline lists */
.inline-list {
    list-style: none;
    margin: 0;
}

.inline-list>li {
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: baseline;
}

.inline-list>li:last-child {
    margin: 0;
}

/* Input fields */
.input {
    border: 0;
    background: none;
    border-radius: var(--radius);
    min-width: 0;
}

.input-block {
    display: block;
    width: 100%;
}

.input-dark {
    background: var(--blue-dark-lighter);
    color: #fff;
}

.input-dark::placeholder {
    color: var(--blue);
}

.input-dark:-ms-input-placeholder {
    color: var(--blue);
}

.input-dark::-webkit-input-placeholder {
    color: var(--blue);
}

.input-tall {
    border-radius: 4px;
    height: var(--field-height);
    padding: 0 0.6em;
}

/* Invalid */
.invalid {
    box-shadow: 0 0 0 2px inset var(--orange) !important;
}

/* Mask */
.mask {
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: all 0.15s ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 100;
}

.mask-on .mask {
    opacity: 1;
    visibility: visible;
}

/* Modals */
.modal-body {
    max-height: 75vh;
    overflow-x: auto;
}

.modal-dialog {
    background: none;
}

.modal-content {
    background: var(--blue-dark-lighter);
    border: 0;
    box-shadow: 0 0 200px 30px var(--blue-dark);
    color: #fff;
}

.modal-error .modal-content {
    box-shadow: 0 0 0 2px var(--salmon), 0 0 200px 30px var(--blue-dark)
}

.modal-error .modal-header {
    background: var(--salmon);
}

.modal-error .modal-header .close {
    color: #fff;
}

.modal-footer {
    border: 0;
    display: flex;
    justify-content: flex-end;
}

.modal-footer-justified {
    justify-content: space-between;
}

.modal-header {
    background: var(--blue-dark);
    border: 0;
    display: block;
    padding: calc(var(--gap) / 2);
    position: relative;
    text-align: center;
}

.modal-header .close {
    color: var(--blue);
    font-weight: 300;
    padding: var(--gap);
    position: absolute;
    right: 0.5em;
    top: 0.25em;
}

.modal-header .modal-title {
    font-size: 1rem;
    line-height: 1.2;
}

.financialUpdate {
    height: 565px;
}

.suitabilityModal {
    height: 170px;
}

.experienceModal {
    height: auto;
    min-height: 295px;
}

.update-employment-info-modal-body {
    height: auto;
    min-height: 235px;
}

.suitabilityUpdate {
    height: 650px;
}

.tradeGoalUpdate {
    min-height: 325px;
    height: auto;
}

.error {
    color: var(--orange);
}

.phoneUpdate {
    min-height: 125px;
}

#releaseNotes {
    min-height: 400px;
    height: auto
}

/* Muted text */
.mute {
    font-weight: 500;
    opacity: 0.65;
}

/* News */
.news {
    list-style: none;
    margin-left: 0;
}

.news-item:last-child .news-title {
    border: 0;
    margin: 0;
    padding: 0;
}

.news-title {
    border-bottom: 1px solid var(--lighten2x);
    display: flex;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
}

.news-title-details {
    list-style: none;
    margin: 0;
}

.news-title-details>li {
    display: inline-block;
    margin-right: 1rem;
}

.news-title-icon {
    flex: 0 0 auto;
    margin-right: 0.5rem;
    width: 1.4rem;
}

.news-title-link {
    color: #fff;
}

.news-title-link:hover {
    text-decoration: underline;
}

.news-title-summary {
    flex: 1 1 auto;
}

.news-title-summary p {
    margin: 0 0 0.2rem;
}

.article_pane a {
    pointer-events: none;
    cursor: default;
    color: #fff
}

.stocks {
    display: inline-block;
    color: var(--blue);
    font-weight: bold;
    margin-right: 10px;
}

.block-info .tab-pane {
    position: relative;
}

.block-info .time-stamp {
    margin-right: 10px;
}

.block-info .article_pane {
    position: absolute;
    top: 0;
    left: 0;
}

/* Notifications */
.notifications .popover-body {
    max-height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.notify-action {
    flex: 0 0 auto;
}

.notify-action a {
    color: var(--blue-dull-light);
}

.notify-action a:hover {
    color: var(--blue-dark);
}

.notify-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    font-size: 0.8rem;
    padding: var(--gap);
    transition: all 0.15s ease-in-out;
}

.notify-item:last-child {
    border: 0;
}

.notify-item p {
    margin: 0;
}

.notify-item-clickable:hover {
    background: rgba(0, 0, 0, 0.05);
}

.notify-primary {
    flex: 0 0 auto;
    width: 6em;
}

.notify-read {
    opacity: 0.5;
}

.notify-secondary {
    flex: 1 1 auto;
    padding: 0 var(--gap);
}

/* Paging */
.paging .btn {
    margin: 0 !important;
    padding: 0.4em 0.5em;
}

.paging .btn:hover:not([disabled]) {
    background: var(--lighten);
    color: var(--blue);
}

.paging-current {
    margin: 0 0.5em;
}

/* Placeholder values */
*::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

*:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

*::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* Popovers */
.popover {
    border: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    max-width: 336px;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.popover *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Properties (key / value display) */
.prop-value {
    line-height: 1.2;
}

.prop-value.currency-abr {
    text-transform: uppercase;
}

.props {
    list-style: none;
    margin: 0;
}

/* Bordered */
.props-bordered .prop-inline {
    border-bottom: 1px solid var(--lighten2x);
    margin-bottom: 0.2rem;
    padding-bottom: 0.3rem;
}

/* Columns */
/* Auto */
.props-cols-auto {
    display: flex;
    justify-content: space-between;
}

.props-cols-auto [class *="prop"] {
    margin-right: var(--gap);
}

.props-cols-auto [class *="prop"]:last-child {
    margin-right: 0;
}

/* Grid */
.props-cols {
    column-gap: var(--gap);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    row-gap: 0.4em;
}

.props-cols>li {
    margin: 0;
}

/* Inline */
.prop-inline {
    display: flex;
    margin: 0 1em 0.5rem 0;
}

.prop-title {
    margin-right: 0.5em;
}

.prop-title.compact {
    margin-right: 0.25em;
}

.prop-title.caps {
    font-size: 0.6875rem;
}

/* Aligned */
.props-aligned .prop-title {
    flex: 0 0 auto;
    margin-right: 1em;
    width: 5.5em;
}

.props-aligned .prop-value {
    flex: 1 1 auto;
}

.props-aligned-auto .prop-title {
    flex: 1 1 auto;
    width: auto;
}

.props-aligned-auto .prop-value {
    text-align: right;
}

.props-aligned-icons .prop-title {
    width: 1.4em;
}

.props-aligned-wide .prop-title {
    width: 11em;
}

/* Block size variations */
.block-width-sm .prop-inline {
    margin-right: 0;
}

.block-width-lg .prop-inline {
    display: flex;
}

.block-width-lg .prop-inline>li {
    flex: 1 1 auto;
    flex-direction: column;
}

/* Stacked */
.prop-stacked .prop-title {
    display: block;
}

/* Radio buttons and checkboxes */
.checkcontainer {
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: var(--check-size);
    vertical-align: -0.25em;
    width: var(--check-size);
}

.checkcontainer.disabled {
    cursor: inherit;
}

.checkcontainer .checkbox,
.checkcontainer .radiobtn {
    background: var(--lighten);
    height: 100%;
    position: absolute;
    transition: all 0.15s ease-in-out;
    width: 100%;
}

.checkcontainer.disabled .checkbox,
.checkcontainer.disabled .radiobtn {
    background: var(--darken);
}

.checkcontainer input {
    opacity: 0;
    position: absolute;
}

.checkcontainer input:checked+.radiobtn,
.checkcontainer input:checked+.checkbox {
    background: var(--lighten2x);
}

/* Checkboxes */
.checkcontainer .checkbox {
    border-radius: var(--radius);
}

.checkcontainer .checkbox:after {
    border: 1px solid var(--teal);
    border-width: 0 4px 4px 0;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    transform: scale(0);
    transition: all 0.05s ease-in-out;
    top: 50%;
    width: 60%;
}

.checkcontainer input:checked+.checkbox:after {
    transform: translate(-50%, -53%) scale(0.6) rotate(45deg);
}

/* Radio buttons */
.checkcontainer .radiobtn {
    border-radius: 100%;
}

.checkcontainer .radiobtn:after {
    background: var(--teal);
    border-radius: 100%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: all 0.05s ease-in-out;
    width: 100%;
}

.checkcontainer input:checked+.radiobtn:after {
    transform: scale(0.4);
}

/* Remove button */
.remove-btn {
    color: var(--lighten);
}

.remove-btn:hover {
    color: #fff;
}

/* Screens */
.screen {
    background: var(--blue-dark-lighter);
    color: #fff;
    height: 100%;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Body */
.screen-body {
    background: var(--darken);
    border-radius: 0 0 var(--radius) var(--radius);
    margin: 0 auto;
    max-width: 950px;
}

.screen-body-section {
    border-bottom: 1px solid var(--lighten);
    padding: calc(var(--gap) * 1.5);
}

/* Footer */
.screen-footer {
    display: flex;
    justify-content: flex-end;
    padding: calc(var(--gap) * 1.5);
}

.screen-footer-actions-primary .btn {
    margin-left: 0.5rem;
}

.incomplete-application-warning {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(var(--gap) * 1.5);
    padding-bottom: calc(var(--gap) * 1.5);
}

.screen-footer-actions-secondary .btn {
    margin-right: 0.5rem;
}

.screen-footer-justified {
    justify-content: space-between;
}

/* Header */
.screen-actions {
    align-items: center;
    display: flex;
}

.screen-actions .close {
    color: #fff;
    float: none;
    font-size: 1rem;
    font-weight: normal;
    margin: -1.2em 0 -1em 0;
    padding: 0.3em 0.5em;
    opacity: 0.7;
    text-shadow: none;
}

.screen-actions .close:not(:disabled):not(.disabled):focus,
.screen-actions .close:not(:disabled):not(.disabled):hover {
    opacity: 1;
}

.screen-header {
    align-items: center;
    background: var(--blue-dark);
    display: flex;
    justify-content: space-between;
    padding: var(--gap);
}

.screen-header .logo {
    height: 31px;
    width: 150px;
}

.screen-header .logo a {
    color: #fff;
}

.screen-header .logo svg {
    height: 100%;
    width: 100%;
}

.screen-help-short {
    display: none;
}

/* Icons */
.screen i.fa-inverse {
    color: initial;
}

/* Select (React Select) */
.select__control--is-focused {
    box-shadow: none !important;
}

.select__menu {
    background: var(--blue-dark-lighter) !important;
    box-shadow: 0 0 20px 5px var(--blue-dark) !important;
    max-width: 300px;
    min-width: 5em;
    position: static !important;
    width: auto !important;
}

.select__option {
    color: #fff !important;
    cursor: pointer;
    font-weight: bold;
    padding: 0.3em 0.5em !important;
    text-align: left;
}

.select__option.weekly {
    color: var(--blue) !important;
}

.select__option:hover,
.select__option--is-focused {
    background: var(--lighten) !important;
}

.select__option--is-selected {
    background: var(--blue-vibrant) !important;
}

.select__option--is-selected.weekly {
    color: #fff !important;
}

/* Separators */
.inline-sep {
    font-size: 0.9rem;
    margin: 0 0.5em;
}

/* Sliders */
.slider {
    padding: 0 1.4em;
    cursor: pointer;
}

.slider .rc-slider-disabled {
    background: none;
    cursor: not-allowed;
}

.slider .rc-slider-disabled .rc-slider-handle,
.slider .rc-slider-disabled .rc-slider-track {
    display: none !important;
}

.slider .rc-slider-handle {
    border-color: #fff;
    margin: 0;
    transform: translate(-50%, 5%);
    height: 12px;
    top: 1px;
    width: 12px;
}

.slider .rc-slider-mark-text {
    color: inherit;
}

.slider .rc-slider-rail {
    background-color: var(--blue);
    height: 5px;
    opacity: 0.5;
}

.slider.no-track .rc-slider-step,
.slider.no-track .rc-slider-track {
    display: none;
}

.slider-marker-bottom {
    display: block;
}



.slider-marker-top {
    position: absolute;
    top: -2.2rem;
}

.slider.is-reversed .rc-slider-track {
    right: 0;
    left: undefined !important;
}


/* media queries for slider text sizing */
@media (max-width: 767px) {
    .slider .rc-slider-mark-text .slider-marker-bottom {
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .slider .rc-slider-mark-text .slider-marker-bottom {
        font-size: 0.9rem;
    }
    .beneficiary-card {
        grid-template-columns: 1fr 1fr; /* Restore 2 columns for larger screens */
    }
}

@media (min-width: 992px) {
    .slider .rc-slider-mark-text .slider-marker-bottom {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) {
    .slider .rc-slider-mark-text .slider-marker-bottom {
        font-size: 1.0rem;
    }
}

/* Spinners */
.spinner {
    display: inline-block;
    height: var(--field-height);
}

.spinner .rc-input-number {
    border: 0;
    font-size: 1rem;
    height: 100%;
    width: 100%;
}

.spinner .rc-input-number:hover .rc-input-number-handler-up,
.spinner .rc-input-number:hover .rc-input-number-handler-wrap {
    border-color: var(--blue-dark);
}

.spinner .rc-input-number-disabled {
    border: 1px solid var(--lighten);
}

.spinner .rc-input-number-disabled .rc-input-number-handler-wrap {
    opacity: 0;
    visibility: hidden;
}

.spinner .rc-input-number-disabled .rc-input-number-input {
    background: none;
}

.spinner .rc-input-number-disabled .rc-input-number-input:hover {
    background: none;
}

.spinner .rc-input-number-focused {
    box-shadow: none;
}

.spinner .rc-input-number-handler {
    align-items: center;
    background: var(--lighten);
    display: flex;
    justify-content: center;
    height: 50%;
}

.spinner .rc-input-number-handler:hover {
    background: var(--lighten2x);
    cursor: pointer;
}

.spinner .rc-input-number-handler-down {
    border-bottom-right-radius: var(--radius);
}

.spinner .rc-input-number-handler-down-inner::after {
    content: "\2212";
}

.spinner .rc-input-number-handler-down-inner,
.spinner .rc-input-number-handler-up-inner {
    color: var(--blue);
    font-size: 1rem;
    font-weight: 500;
}

.spinner .rc-input-number-handler-up {
    border-bottom: 2px solid var(--blue-dark);
    border-top-right-radius: var(--radius);
}

.spinner .rc-input-number-handler-wrap {
    border-left: 2px solid var(--blue-dark);
    height: 100%;
}

.spinner .rc-input-number-input {
    background: var(--lighten);
    color: #fff;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0 0.5em;
}

.spinner .rc-input-number-input:hover {
    background: var(--lighten2x);
}

.spinner.text-left .rc-input-number-input {
    text-align: left;
}

input.rc-input-number-input::placeholder {
    color: orange;
}

/* Steppers */
.stepper {
    border: 2px solid var(--lighten);
    border-radius: var(--radius);
    padding: 2px;
}

.stepper .btn {
    background: none;
    border-radius: var(--radius) !important;
    margin: 0 !important;
    padding: 0.65rem 0.5rem 0.45rem;
}

.stepper .btn:hover {
    background: var(--lighten);
    text-decoration: none;
}

.stepper .btn-active,
.stepper .btn-active:hover {
    background: var(--blue);
    color: var(--blue-dark);
}

.stepper .btn-group {
    background: none;
}

/* Single-option stepper (e.g. RQD Limited only) - full width at all screen sizes */
.stepper-single-option .btn-group {
  display: grid;
  grid-template-columns: 1fr;
}
.stepper-single-option .btn-group .btn {
  width: 100%;
  min-width: 0;
}

/* Stepper overflow fix for mobile/small screens */
@media (max-width: 768px) {
  .stepper .btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stepper-single-option .btn-group {
    grid-template-columns: 1fr;
  }
  .stepper .btn-group .btn {
    flex: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Touch devices (real mobile) – narrow desktop emulation has pointer:fine.
   Apply stepper grid layout on touch devices so formatting works on actual phones/tablets
   even when viewport reporting differs from browser devtools. */
@media (pointer: coarse) {
  .stepper .btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stepper-single-option .btn-group {
    grid-template-columns: 1fr;
  }
  .stepper .btn-group .btn {
    flex: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Strategy templates */
.strategy-templates {
    display: grid;
    grid-gap: calc(var(--gap) / 3);
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    list-style: none;
    margin: 1rem 0;
}

.strategy-templates .btn {
    border-radius: var(--radius);
    display: block;
    height: 100%;
    padding: 0.6rem 0.5rem 0.4rem;
    white-space: normal;
    width: 100%;
}

.strategy-templates li {
    margin: 0;
}

.strategy-templates-icon {
    display: block;
    margin-bottom: 5px;
    transition: 1s all;
}

.strategy-templates-icon [class *="fa-"] {
    color: var(--yellow);
    font-size: 1.2rem;
}

.strategy-templates-icon .strategy-icon {
    color: var(--yellow);
    display: block;
    width: 100%;
}

.strategy-templates-title {
    display: block;
    line-height: 1.1;
}

.strategy-templates-title-sentiment {
    opacity: 0;
    padding-left: 2rem;
    margin-left: 2rem;
    display: block;
    font-size: 12px;
}

/* Symbols */
.symbol-summary-button {
    margin: 0 3px;
}

.symbol-summary-price,
.symbol-summary-title {
    align-items: center;
    display: flex;
}

.symbol-summary-title {
    margin-bottom: 0.3rem;
}

.symbol-summary-title .btn {
    margin-left: 0.5rem;
}

/* Tables */
/* Clickable rows */
.row-link td,
.row-link th {
    transition: background 0.05s ease-in-out;
}

.row-link:hover td,
.row-link:hover th {
    background: #2D3D58;
    cursor: pointer;
}

.row-link .default-cursor:hover {
    cursor: inherit;
}

/* Delete column */
.col-delete {
    text-align: center;
    width: 1em !important;
}

/* Expandable rows */
.row-expanded {
    background: var(--lighten);
}

.row-expanded td:first-child {
    padding-left: 0.5em;
}

.row-sub td:first-child {
    padding-left: 1.5em;
}

.table-inline-btn {
    color: var(--blue);
    display: inline-block;
    text-align: left;
    width: 100%;
}

/* Fixed header */
.table-fixed {
    position: relative;
}

.table-fixed-body tr:first-child td {
    border-top-width: 0;
}

.table-fixed-header {
    background: var(--blue-dark);
    left: 0;
    width: 100%;
    z-index: 1;
}

.table-fixed-header th {
    background: var(--blue-dark);
    position: sticky;
    top: -1px;
    z-index: 1;
}

/* Responsive */
.responsiveTable td .inlineheader {
    display: none;
}

.block-width-sm .responsiveTable td .inlineheader {
    color: rgba(255, 255, 255, 0.5);
    display: block;
}

.block-width-sm .responsiveTable table,
.block-width-sm .responsiveTable tbody,
.block-width-sm .responsiveTable td,
.block-width-sm .responsiveTable thead,
.block-width-sm .responsiveTable th,
.block-width-sm .responsiveTable tr {
    display: block;
}

.block-width-sm .responsiveTable thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-width: 1px 0;
    left: -9999px;
    position: absolute;
    top: -9999px;
}

.block-width-sm .responsiveTable tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.block-width-sm .responsiveTable td.pivoted {
    border: none !important;
    min-height: 1.6rem;
    position: relative;
    padding-left: calc(35% + 10px) !important;
    text-align: right !important;
    text-overflow: ellipsis;
    width: auto !important;
}

.block-width-sm .responsiveTable td.pivoted .text-center {
    text-align: right !important;
}

/* Sortable */
.sortable:hover {
    cursor: pointer;
}

.sortable:hover,
.sorting-asc,
.sorting-desc {
    color: #fff;
}

.sorting-asc:after,
.sorting-desc:after {
    margin-left: 0.3em;
}

.sorting-asc:after {
    content: "\25B2";
}

.sorting-desc:after {
    content: "\25BC";
}

/* Toolbars */
.table-toolbar {
    display: flex;
    justify-content: space-between;
}

.table-toolbar .btn {
    margin: 0 0.35rem;
}

.table-toolbar-bottom {
    margin-top: 0.5rem;
}

.table-toolbar-top {
    margin-bottom: 0.5rem;
}

.table-toolbar-primary,
.table-toolbar-secondary {
    align-items: center;
    display: flex;
}

.table-toolbar .btn-block+.btn-block {
    margin: 0;
}

.sub-account-filter {
    position: absolute;
    top: .8rem;
    right: 6rem;
}

.sub-account-filter-position-override {
    right: 9rem;
}

/* Tabs */
.nav-tabs {
    border: 0;
}

.nav-tabs .nav-link {
    background: var(--lighten3x);
    border: 0;
    color: var(--blue-dark);
    flex: 1 1 auto;
    text-align: center;
}

.block-width-sm .nav-tabs .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.nav-tabs .nav-link.disabled {
    color: #fff;
    opacity: 0.3;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    box-shadow: inset 0 -4px 0 0 var(--blue);
}

.tab-content {
    padding-top: 1rem;
}

.tab-pane-tools {
    margin-bottom: 1rem;
}

/* Pill style */
.nav-tabs-pill .nav-tabs {
    border: 1px solid var(--lighten3x);
    border-radius: 100px;
    padding: 1px;
}

.nav-tabs-pill .nav-tabs .nav-link {
    background: none;
    border: 0;
    color: var(--blue);
    margin: 0;
    padding: 0.3rem 1rem;
}

.nav-tabs-pill .nav-tabs .nav-link.active {
    background: var(--lighten2x);
    box-shadow: none;
    border-radius: 100px;
}

/* Scrollable content */
.nav-tabs-scrollable {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.nav-tabs-scrollable .nav-tabs {
    flex: 0 0 auto;
}

.nav-tabs-scrollable .tab-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.nav-tabs-scrollable .tab-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.nav-tabs-scrollable .tab-pane-content {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-tabs-scrollable .tab-pane-tools {
    flex: 0 0 auto;
}

/* Text */
/* Colors */
.neg {
    color: var(--salmon);
}

.neg-semi {
    color: var(--red-light);
}

.neg.bold {
    font-weight: 400;
}

.pending {
    color: var(--yellow);
}

.pos {
    color: var(--teal);
}

.pos.bold {
    font-weight: 400;
}

.pos-semi {
    color: var(--teal-light);
}

.warn {
    color: var(--orange);
}

/* No break */
.nb {
    white-space: nowrap;
}

/* Sizes */
.txt-xs {
    font-size: 0.6875rem;
}

.txt-sm {
    font-size: 0.8125rem;
    line-height: 1.2;
}

.txt-rg {
    font-size: 1rem !important;
}

.txt-lg {
    font-size: 1.1875rem;
    line-height: 1.2;
}

.txt-2x {
    font-size: 1.375rem;
    line-height: 1.1;
}

/* Transforms */
.flash {
    -webkit-transition: color 1s;
    /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}

.caps {
    text-transform: uppercase;
}

/* TradingView */
.tradingviewChart {
    height: 100%
}

/* Timestamps */
.timestamp {
    text-align: left;
}

.timestamp button {
    color: #fff;
}

.timestamp-date,
.timestamp-time {
    display: block;
    text-align: left;
    padding: 10px;
}

/* Tips */
.tip {
    font-size: 1.125rem;
    text-align: center;
}

/* Virtual trading - always override other environment styles */
.dashboard-switcher-trigger.env-virtual,
.dashboard-switcher-trigger.env-virtual.env-local,
.dashboard-switcher-trigger.env-virtual.env-dev,
.dashboard-switcher-trigger.env-virtual.env-beta,
.dashboard-switcher-trigger.env-virtual.env-production {
    background: var(--gold) !important;
}

.env-virtual.env-beta .dashboard-switcher-trigger {
    box-shadow: 0 0 0 4px inset var(--gold);
}

.env-virtual.env-dev .dashboard-switcher-trigger {
    box-shadow: 0 0 0 4px inset var(--gold);
}

.env-virtual.env-prod .dashboard-switcher-trigger {
    background: var(--gold);
}

.env-virtual .dashboard-nav-account-menu {
    color: var(--gold);
}

.env-virtual .block-order-footer-action.btn {
    background: var(--gold);
    color: var(--blue-dark);
}

.vr {
    color: var(--gold);
}

/* Risk level */
.risk-level {
    display: inline-block;
    height: 1.5em;
    position: relative;
    vertical-align: -0.3em;
    width: 1.5em;
}

.risk-level-base {
    left: 0;
    opacity: 0.55;
    position: absolute;
    top: 0;
}

.risk-level-value {
    color: var(--teal);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.risk-level-0 {
    display: none;
}

.risk-level-1 {
    width: 25%;
}

.risk-level-2 {
    width: 43%;
}

.risk-level-3 {
    width: 66%;
}

.risk-level-4 {
    width: 100%;
}


/* Breakpoints
=====================================================================*/

@media (max-width: 670px) {

    /* Basics */
    :root {
        --dashboard-nav-height: 33px;
        --gap: 8px;
        --icon-size: 15px;
    }

    html {
        font-size: 14px;
    }

    /* Hide elements on mobile view */
    .hide-mobile {
        display: none;
    }

    /* Buttons */
    .btn-tall {
        padding: 0 0.2em;
    }

    /* Dashboard */
    .dashboard-content {
        padding: calc(var(--dashboard-nav-height) + var(--gap)) var(--gap) var(--gap);
    }

    /* Navigation */
    .dashboard-nav-secondary {
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    /* Dropdowns */
    .btn .select__indicator {
        padding-left: 0;
    }

    /* Properties (key / value display) */
    /* Inline */
    /* Aligned */
    .props-aligned-wide .prop-inline {
        display: block;
    }

    .props-aligned-wide .prop-title {
        display: block;
        width: auto;
    }

    .props-aligned-wide .prop-value {
        display: block;
        margin-bottom: 0.5em;
    }

    /* Screens */
    /* Body */
    .screen-body {
        max-width: none;
        width: auto;
    }

    /* Header */
    .screen-help-long {
        display: none;
    }

    .screen-help-short {
        display: block;
    }

    /* Tables */
    .responsiveTable td .inlineheader {
        color: rgba(255, 255, 255, 0.5);
        display: block;
        left: 1rem;
        overflow-wrap: break-word;
        position: absolute;
        text-align: left !important;
        width: calc(50% - 20px);
        white-space: pre-wrap;
    }

    .responsiveTable table,
    .responsiveTable tbody,
    .responsiveTable td,
    .responsiveTable thead,
    .responsiveTable th,
    .responsiveTable tr {
        display: block;
    }

    .responsiveTable thead tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-width: 1px 0;
        left: -9999px;
        position: absolute;
        top: -9999px;
    }

    .responsiveTable tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .responsiveTable td.pivoted {
        border: none !important;
        position: relative;
        padding-left: calc(50% + 10px) !important;
        text-align: left !important;
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }

    /* Text */
    .caps {
        font-size: 0.785rem;
    }
}

/* Removable form groups */
.form-group-removable {
    position: relative;
}

.form-group-removable .remove {
    position: absolute;
    top: 0em;
    right: 1em;
}

.form-group-removable-titled .remove {
    top: 0;
}

.form-group-removable-untitled .remove {
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive tables */
#accountTable {
    display: flex;
    flex-direction: column;
}

#accountSearch {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    margin-bottom: 1em;
    align-items: center;
}

#selectAccount {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1em;
    align-items: center;
}

.doc-approval {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.doc-approval .btn {
    margin-left: 0.5em;
}

.chart-container {
    display: flex;
    flex-direction: column;
}

.chart-element {
    flex: 1;
    /* TODO: Nathan: don't do this, make it work right with flex */
    /* Reference to height: unintentional interaction with flex */
    height: 50%;
}

.analytics-account-id {
    padding-top: 10px
}

.no-graph-data {
    font-size: calc(90% + 10px);
    color: rgba(222, 222, 222, 0.3);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fetch-graph-data-analytics {
    font-size: calc(90% + 10px);
    color: rgba(222, 222, 222, 0.3);
    margin: 0;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Icon Block Styles */

.account-block-icon {
    color: rgb(114, 255, 131);
}

.exchange-block-icon {
    color: rgb(114, 255, 131);
}

.activity-block-icon {
    color: #93fffb;
}

.favorites-block-icon {
    color: rgb(255, 255, 120);
}

.table-block-icon {
    color: rgb(114, 255, 131);
}

.wallet-block-icon {
    color: rgb(194, 224, 120);
}

.priceChart-block-icon {
    color: rgb(103, 237, 125);
}

.quote-block-icon {
    color: rgb(122, 166, 252)
}

.info-block-icon {
    color: #abe2fb;
}

.strategy-block-icon {
    color: #3d5a80;
}

.accountManagement-block-icon {
    color: rgb(116, 178, 251);
}

.adminTools-block-icon {
    color: var(--red-dull);
}

.accountStatements-block-icon {
    color: rgb(255, 158, 131)
}

.analytics-block-icon {
    color: rgb(122, 166, 252)
}


.analytics-pill .nav-tabs {
    display: inline-flex;
    margin-left: 5px;
}

.analytics-pill {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
}

.cashflow-timeframe {
    margin-bottom: 15px;
}

.handleDownloadCSVButton {
    display: inherit;
    justify-content: space-between;
}

.wheelPickerWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.wheelPickerWrapperArrow {
    color: #d5d8dc;
    opacity: 0.5;
}

.matchStrategyButton {
    border-radius: 5px;
    border-color: rgb(41, 194, 186, 0.5);
    font-size: 7px;
    margin-right: 10px;
}

.unmatchStrategyButton {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: rgb(41, 194, 186, 0.5);
    cursor: pointer;
    padding: 5px;
}

.wheelPickerContainer {
    position: fixed;
}

.wheelPickerParent {
    margin-bottom: 5em;
}

.expirations-filter {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.expirations-filter-item {
    margin-left: 1em;
}

.expirations-filter-item:first-child {
    margin-left: 0;
}

.expirations-filter-icon {
    color: #a4cfff;
}

.selected-row {
    background-color: rgba(25, 186, 180, 0.15) !important;
    /* Remove border-left and position */
    /* border-left: 4px solid var(--teal) !important; */
    /* position: relative; */
    box-shadow: 0 0 0 2px var(--teal) inset;
}

/* Remove the ::before pseudo-element highlight */
/* [class*="-selected-row"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(25, 186, 180, 0.1) 0%, transparent 100%);
  pointer-events: none;
} */

.security-table td {
    line-height: 2em;
}

.disableScroll {
    overflow-y: hidden;
}


.highlightBlockScroll {
    border: 5px solid lightgreen;
    border-radius: 5px;
    background-color: var(--blue-dark);
    animation: fadeOut 10s forwards;
    -webkit-animation: fadeOut 10s forwards;
    -moz-animation: fadeOut 10s forwards;
    -o-animation: fadeOut 10s forwards;
    animation: fadeOut 10s forwards;
}

@keyframes fadeOut {
    30% {
        border-color: lightgreen;
    }

    100% {
        border-color: var(--blue-dark);
    }

}

table>tbody>tr:has(i[class*='far fa-angle-up']) {
    border-left: 5px solid var(--light);
}

table>tbody>tr[class*='row-expanded row-sub'] {
    border-left: 1px solid var(--gray);
}

/* Style for Low Risk Score */
.low-risk-score {
    font-weight: bold;
    color: #006400; /* Dark green text for low risk */
    background-color: #90EE90; /* Light green background for low risk */
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #006400;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 100, 0, 0.5);
    text-transform: uppercase;
    font-size: 1.2em;
  }
  
  /* Style for Medium Risk Score */
  .medium-risk-score {
    font-weight: bold;
    color: #FF8C00; /* Dark orange text for medium risk */
    background-color: #FFD700; /* Gold background for medium risk */
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #FF8C00;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
    text-transform: uppercase;
    font-size: 1.2em;
  }
  
  /* Style for High Risk Score */
  .high-risk-score {
    font-weight: bold;
    color: #8B0000; /* Dark red text for high risk */
    background-color: #FFB6C1; /* Light red/pink background for high risk */
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #8B0000;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 1.2em;
  }

  .subAccountManagement-block-icon {
      color: var(--salmon)
  }
  
  .subAccount-management-toolbar {
      padding-bottom: 20px;
      padding-top: 10px;
  
  }

.block-settings-form-buttons {
    margin-top: 48px;
}

.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-space-between {
    justify-content: space-between;
}

.justify-content-flex-end {
    justify-content: flex-end;
}

.align-items-center {
    align-items: center;
}

.block-settings-global-error-msg {
    margin-top: 0.5em;
}

.submit-btn:disabled {
    border: 0;
    background: var(--green);
}

.submit-btn:disabled:hover {
    opacity: 0.65;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.pending-entitlement-modal-body p:last-of-type {
    margin-bottom: 0;
}

.disabled-refresh-btn:hover {
    color: var(--blue);
    cursor: not-allowed;
}

.admin-cashiering-screen-body-width-override {
    max-width: 90% !important;
    min-height: 100% !important;
}

@media (max-width: 1200px) {
    .admin-cashiering-screen-body-width-override {
        max-width: 100% !important;
    }

    .admin-cashiering-index {
        flex-direction: column-reverse;
    }
}

.position-relative {
    position: relative;
}

.cashiering-filters-wrapper {
    border-left: 1px solid var(--lighten);
}

.mb-20px {
    margin-bottom: 20px;
}

.m-lr-5px {
    margin-left: 5px;
    margin-right: 5px;
}

.flex-direction-col {
    flex-direction: column;
}

.align-items-flex-start {
    align-items: flex-start;
}

.flex-1 {
    flex: 1;
}

.cashiering-filters {
    position: sticky;
    top: 20px;
}

.cashiering-filters-filter-dropdown > span > div {
    width: 100% !important;
    max-width: unset !important;
}

.cashiering-filters-filter-dropdown > span > div > div:first-of-type {
    padding-left: 0;
    margin-left: 0;
    min-width: none;
    max-width: none;
    padding-left: 0.4em;
}

.cashiering-filters-tooltip-wrapper > span {
    width: 100%;
}

.cashiering-filters-select-dropdown-input {
    max-width: 300px;
}

.cashiering-filters-select-dropdown-input .select__control {
    padding-top: 20px !important;
    color: var(--blue);
}

.cashiering-filters-select-dropdown-input .flabel,
.cashiering-filters-select-dropdown-input .basic-multi-select,
.cashiering-filters-select-dropdown-input .select__multi-value {
    background-color: var(--blue-dark-lighter);
    color: var(--blue);
}

.cashiering-filters-select-dropdown-input .select__multi-value__label {
    color: var(--blue);
}

.cashiering-filters-select-dropdown-input .flabel-title {
    z-index: 2;
    color: var(--white);
}

.cashiering-filters-select-dropdown-input .select__dropdown-indicator {
    transform: translateY(-8px) !important;
}

.cashiering-filters-select-dropdown-input .select__dropdown-indicator,
.cashiering-filters-select-dropdown-input .select__clear-indicator {
    color: var(--blue);
}

.cashiering-filters-select-dropdown-input .select__dropdown-indicator:hover,
.cashiering-filters-select-dropdown-input .select__clear-indicator:hover {
    color: var(--blue);
}

.cashiering-filters-select-dropdown-input .flabel {
    margin-bottom: 0;
}

.styled-canvas {
    border: 2px solid #000; /* Adjust the border size and color as needed */
    border-radius: 10px; /* Adjust the border-radius as needed */
    box-sizing: border-box; /* Ensure the border and padding are included in the element's total width and height */
  }
  

/* Market Data Questionnaire Modal */
.market-data-questionnaire-modal .market-data-questionnaire-form .quotes button {
    white-space: pre-wrap;
    min-width: 50%;
}

.market-data-questionnaire-modal .modal-body {
    padding-bottom: 0;
}
/* Market Data Questionnaire Modal */

.fw-bold {
    font-weight: bold;
}

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

/* This is to hide the browser eye icon on the password fields on Microsoft Edge. */
input[type="password"]::-ms-reveal {
    display: none;
}

mb-0 {
    margin-bottom: 0;
}

.d-inline-block {
  display: inline-block;
}

.scrolling-ticker {
    width: 100%; /* Full width for the ticker */
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.2;
    font-weight: bold;
    padding: 10px 0;
  }

  .ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 10s linear infinite;
    animation-play-state: running; /* Ensure animation runs by default */
  }

 /* Restart the animation by triggering a reflow on hover */
 .scrolling-ticker:hover .ticker-content {
    animation-play-state: paused;
    /* animation: none; Stop the animation */
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0%); /* Start position */
    }
    20% {
      transform: translateX(0%); /* Delay animation */
    }
    100% {
      transform: translateX(-100%); /* End position */
    }
  }

  .beneficiary-card {
    background: var(--blue-dark-lighter);
    border: 1px solid var(--lighten);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 8px var(--darken);
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
  }

  .icon-corner {
    position: absolute;
    top: 0.75rem; /* Adjust based on card height */
    right: 0.75rem; /* Consistent with top spacing */
    font-size: 1.75rem;
    color: var(--blue-dull-light);
    opacity: 0.7;
    transition: all 0.2s ease;
  }
  
  .icon-corner:hover {
    color: var(--blue);
    opacity: 1;
    transform: scale(1.1);
  }

  .icon-corner i:hover {
    color: var(--blue); /* Match the theme */
    transform: scale(1.1); /* Slight hover effect */
    transition: all 0.2s ease-in-out;
}
  
  .beneficiary-card.primary .icon-corner {
    color: var(--blue);
    opacity: 0.9;
  }

  .beneficiary-card .row {
    margin-bottom: 1rem;
  }

  .address-section {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.07); /* Slightly lighter */
    margin-bottom: 1rem;
    border-radius: var(--radius);
  }

  .address-section span {
    display: block; /* Make address lines consistent */
    margin-bottom: 0.25rem;
  }
  
  .address-section .beneficiary-address {
    display: block;
    margin-top: 0.5rem;
    line-height: 1.5;
  }

  .beneficiary-card .address-section {
    padding-top: 1rem;
    border-top: 1px solid var(--light-gray);
  }

  .beneficiary-card.primary {
    background: rgba(0, 123, 255, 0.1); /* Light blue */ /* Different background for primary */
    border: 2px solid var(--blue);
  }
  
  .beneficiary-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle hover shadow */
      border-color: var(--blue-vibrant);
  }

  /* Typography and Spacing */
  .beneficiary-name {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: var(--blue) !important;
  }
  
  .beneficiary-type {
    background-color: var(--blue-vibrant);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .badge-primary {
    background-color: #007bff; /* Bright Blue */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .badge-contingent {
    background-color: #adb5bd; /* Muted Gray */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .badge-primary, .badge-contingent {
    padding: 0.3rem 0.75rem; /* Increase horizontal padding */
    font-size: 0.875rem; /* Slightly larger font size */
    font-weight: 600; /* Increase font weight for emphasis */
}

.badge-primary:hover {
    background-color: #0056b3; /* Slightly darker blue */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow */
}

.badge-contingent:hover {
    background-color: #5a6473; /* Slightly darker gray */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow */
}

  
  /* Form Elements */
  .block-footer-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .form-group-removable {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--lighten);
  }
  
  .form-group-removable:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  

  
  /* Responsive Layout */
  @media (min-width: 768px) {
    .beneficiary-card {
      grid-template-columns: 1fr 1fr;
    }
  }

  .section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--light-gray);
    text-transform: uppercase;
  }

  .fund-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Space between icon and text */
    background-color: teal;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .fund-button i {
    font-size: 16px;
  }
  
  .fund-button:hover {
    background-color: #005f7a;
    transform: scale(1.05);
  }
  
  .available-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  tr:hover {
    background-color: rgba(255, 255, 255, 0.08); /* Light highlight */
    transition: background 0.2s ease-in-out;
  }

  .undo-button {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease-in-out, transform 0.1s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
  }

  .undo-button:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .account-table-filter {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #account-switcher-accounts {
    line-height: 1.5;
  }

  #account-switcher-accounts tr.highlighted {
    background-color: var(--lighten);
  }

  .divider {
    height: .2rem;
    background-color: var(--lighten);
    margin: 1rem 0;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: 0;

    margin-right: 0;
  }

  .status-label {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 80px;
    max-width: auto !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
  }

  .status-label:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transition: background 0.2s ease-in-out;
  }

  /* Radio buttons and checkboxes */
  .checkcontainer {
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: var(--check-size);
    vertical-align: -0.25em;
    width: var(--check-size);
  }

  .checkcontainer.disabled {
    cursor: inherit;
  }

  .checkcontainer .checkbox,
  .checkcontainer .radiobtn {
    background: var(--lighten);
    height: 100%;
    position: absolute;
    transition: all 0.15s ease-in-out;
    width: 100%;
  }

  /* Enhanced radio button styles */
  .account-radio .checkcontainer {
    height: calc(var(--check-size) * 1.25);
    width: calc(var(--check-size) * 1.25);
    margin-top: 0.125rem;
  }

  .account-radio .checkcontainer .radiobtn {
    border: 2px solid var(--teal);
    transition: all 0.15s ease-in-out;
  }

  .account-radio .checkcontainer input:checked + .radiobtn {
    background: var(--teal);
    box-shadow: 0 0 0 2px var(--blue-dark), 0 0 0 4px var(--teal);
  }

  .account-radio .checkcontainer input:checked + .radiobtn:after {
    transform: scale(0.5);
  }

  /* Enhanced linked accounts styles */
  .linked-accounts.checklist > li {
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 1em;
    padding: 1.25em;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: flex-start;
    position: relative;
    background: var(--blue-dark-lighter);
    border: 1px solid var(--blue-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Position the check icon absolutely */
  .linked-accounts.checklist > li .fa-check-square {
    position: absolute;
    right: 1.25em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  /* Adjust status position to not conflict with check icon */
  .linked-accounts-status {
    margin-right: 2.5em; /* Make room for the check icon */
    text-align: right;
  }

  .linked-accounts.checklist > li:hover {
    background: var(--blue-dark);
    border-color: var(--blue-vibrant);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  }

  .linked-accounts.checklist > li.selected {
    background: var(--blue-dark);
    border-color: var(--blue-vibrant);
    box-shadow: 0 0 0 1px var(--blue-vibrant), 0 3px 6px rgba(0, 0, 0, 0.3);
  }

  /* Account info layout */
  .account-info {
    flex: 1;
    padding-right: 2em;
  }

  .linked-accounts.checklist > li.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--blue-dark);
    border-color: var(--blue-dark-lighter);
    box-shadow: none;
  }

  .linked-accounts.checklist > li.disabled:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark-lighter);
    box-shadow: none;
    transform: none;
  }

  .linked-accounts-icon {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  .linked-accounts-name {
    flex: 1 1 auto;
    color: var(--blue);
  }

  .linked-accounts.checklist > li:hover .linked-accounts-name,
  .linked-accounts.checklist > li.selected .linked-accounts-name {
    color: #fff;
  }

  /* Selected state styling */
  .linked-accounts.checklist > li.selected {
    background: var(--blue-dark);
    border-color: var(--blue-vibrant);
  }

  .linked-accounts.checklist > li label {
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
    display: block;
    margin-bottom: 0;
    width: 100%;
  }

  .linked-accounts.checklist > li label.selected {
    color: #fff;
    font-weight: bold;
  }

  /* Non-selectable styles */
  .linked-accounts.non-selectable > li {
    cursor: default;
    padding: 1em;
  }

  .linked-accounts.non-selectable > li:hover {
    background: var(--blue-dark-lighter);
    border-color: var(--blue-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: none;
    border-radius: var(--radius);  
    padding: 1em;
  }

  .linked-accounts.non-selectable > li:hover .linked-accounts-name {
    color: var(--blue);
  }

  .linked-accounts.non-selectable > li label {
    cursor: default;
  }

  /* Account selection guidance */
  .account-selection-guidance {
    color: var(--green-dull);
    font-size: 0.9em;
    margin-bottom: 1em;
    padding: 0.75em 1em;
    text-align: center;
    background: var(--lighten);
    border-radius: var(--radius);
  }

  .account-selection-error {
    color: var(--salmon);
    font-size: 0.9em;
    margin-top: 0.5em;
    padding: 0.75em 1em;
    text-align: center;
    background: rgba(237, 103, 103, 0.1);
    border-radius: var(--radius);
  }

.transfer-instruction {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.instruction-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.instruction-field > div:last-child {
  color: white;
}

/* 1. Give the entire block a fluid max-width, so it can stretch on desktop */
.scheduled-transfer-fields {
    margin-top: 1.5rem;
    background: #3b4252;
    padding: 1.5rem;
    border-radius: 8px;
    width: 100%;           /* fill available space */
    max-width: 600px;      /* but don't let it get absurdly huge */
    box-sizing: border-box;
    max-width: 100%;
  }
  
  /* 2. Widen the label column, let the input column take the rest */
  .scheduled-transfer-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    column-gap: 1rem;
    margin-bottom: 1rem;
  }
  
  /* 3. Inline group: make the number input fixed but dropdown flex */
  .scheduled-transfer-inline {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .scheduled-transfer-input {
    flex: 0 0 100px !important;     /* just wide enough for "99" → "999" */
    min-width: 100px !important;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: 6px;
    border: 1px solid #3b4252;
    background: #2e3440;
    color: #eceff4;
    font-size: 1rem;
  }
  
  .scheduled-transfer-dropdown {
    flex: 1 1 auto;
    min-width: 200px;   /* or whatever you want */
    max-width: 400px;   /* increase this as needed */
    height: 44px;
    padding: 0 0.75rem;
    border-radius: 6px;
    border: 1px solid #3b4252;
    background: #2e3440;
    color: #eceff4;
    font-size: 1rem;
}
  
  /* 4. Responsive: stack on narrow viewports */
  @media (max-width: 600px) {
    .scheduled-transfer-row {
      grid-template-columns: 1fr;
      row-gap: 0.5rem;
    }
    .scheduled-transfer-label {
      margin-bottom: 0.25rem;
    }
  }

  /* Table-specific selected row highlighting */
  [class*="-selected-row"] {
    background-color: rgba(25, 186, 180, 0.08) !important;
    border-left: 4px solid var(--teal) !important;
    border-right: none !important;
    position: relative;
  }

  [class*="-selected-row"]::before {
    content: none !important;
  }
  
  .fields-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* Cashiering admin specific styling for fields-title */
.screen-body-section .fields-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Cashiering admin specific styling for mute class */
.screen-body-section .mute {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400;
    opacity: 1 !important;
}

/* Cashiering admin specific styling for prop-title and prop-value */
.screen-body-section .prop-title {
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-right: 0.5rem !important;
}

.screen-body-section .prop-value {
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.2 !important;
}

.screen-body-section .prop-stacked {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.warning {
  color: var(--orange);
}

.symbol-list-and-arrows {
    position: relative;
}

.symbol-list-scroll-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.symbol-list-scroll-hint--left {
    left: 0;
    border-radius: var(--radius, 4px) 0 0 var(--radius, 4px);
    background: linear-gradient(to right, var(--teal-light) 0%, transparent 100%);
}

.symbol-list-scroll-hint--right {
    right: 0;
    left: auto;
    border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
    background: linear-gradient(to left, var(--teal-light) 0%, transparent 100%);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-hint--left,
.symbol-list-and-arrows--light-bg .symbol-list-scroll-hint--right {
    opacity: 0.75;
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-hint--left {
    border-radius: 0;
    background: linear-gradient(to right, var(--teal-light) 0%, transparent 100%);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-hint--right {
    border-radius: 0;
    background: linear-gradient(to left, var(--teal-light) 0%, transparent 100%);
}

.symbol-list-scroll {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.symbol-list-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.symbol-list-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    min-width: 20px;
    z-index: 1;
    border: none;
    color: var(--blue-dark);
    cursor: pointer;
    padding: 0;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, var(--teal-light) 60%, transparent);
    transition: color 0.05s ease-in-out, background-color 0.05s ease-in-out;
    border-radius: var(--radius, 4px) 0 0 var(--radius, 4px);
}

.symbol-list-scroll-arrow--right {
    left: auto;
    right: 0;
    border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
    background: linear-gradient(to left, var(--teal-light) 60%, transparent);
}

.symbol-list-scroll-arrow--left {
    left: 0;
    right: auto;
}

.symbol-list-scroll-arrow:hover {
    color: var(--blue-dark);
    background: linear-gradient(to right, var(--teal) 60%, transparent);
}

.symbol-list-scroll-arrow--right:hover {
    background: linear-gradient(to left, var(--teal) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow {
    color: var(--blue-dark);
    border-radius: 0;
    background: linear-gradient(to right, var(--teal-light) 60%, transparent);
}


.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow--left {
    background: linear-gradient(to right, var(--teal-light) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow--right {
    border-radius: 0;
    background: linear-gradient(to left, var(--teal-light) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow:hover {
    background: linear-gradient(to right, var(--teal) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow--right:hover {
    background: linear-gradient(to left, var(--teal) 60%, transparent);
}

.symbol-list-scroll-arrow:active,
.symbol-list-scroll-arrow:focus {
    outline: none;
}

.symbol-list-scroll-arrow:active {
    background: linear-gradient(to right, var(--teal-light) 60%, transparent);
}

.symbol-list-scroll-arrow--right:active {
    background: linear-gradient(to left, var(--teal-light) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow--left:active {
    background: linear-gradient(to right, var(--teal-light) 60%, transparent);
}

.symbol-list-and-arrows--light-bg .symbol-list-scroll-arrow--right:active {
    background: linear-gradient(to left, var(--teal-light) 60%, transparent);
}

.symbol-list-clear-filter {
    background: none;
    border: none;
    color: var(--blue);
    cursor: pointer;
    padding: 0 8px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.symbol-list-clear-filter:hover {
    color: #fff;
}

.symbol-list-clear-filter:active,
.symbol-list-clear-filter:focus {
    outline: none;
}

.unfiltered-symbol {
    font-weight: normal;
    color: var(--blue-dull-light);
}

.filtered-symbol { outline: none; border: none; background: none; }

.symbol-popup {
    position: relative;
    background-color: var(--blue-dark);
    border: 1px solid var(--lighten3x);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    min-width: 120px;
}

.symbol-popup-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--blue-dark);
    pointer-events: none;
}

.symbol-popup button {
    background: none;
    border: none;
    color: var(--blue);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.symbol-popup button:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.showing-symbol-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.showing-symbol-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}