@import "../utils/utils";
@import "./../style-guide-fixes";

@mixin theme(
    $header-menu--active--icon-background,
    $header-menu--active--box-shadow,
    $header-menu-background-color,
    $header-menu-item--hover--background-color,
    $selector-active-border-color,
    $selector-active-text-color,
    $selector-border-color,
    $selector-text-color,
    $tabs-content-background-color,
    $tabs-border-size,
    $tabs-border-color,
    $tabs-background-color,
    $tabs-item-background-color,
    $tabs-item-color,
    $tabs-item-border-size,
    $tabs-item-border-color,
    $tabs-item--active--color,
    $tabs-item--active--border-color,
    $tabs-item--active--background-color,
    $header-background-color,
    $header-shadow,
    $header-item--color,
    $header-item-background-color,
    $header-item--active--background-color,
    $header-item--active--color,
    $explorer-tab-content-background-color,
    $tab-content-background-color,
    $primary-text-color,
    $bg-color,
    $dark-text-color,
    $inactive-text-color,
    $link-text-color,
    $light-text-color,
    $secondary-text-color,
    $success-color,
    $info-color,
    $warning-color,
    $alert-color,
    $super-light-panel-bg-color,
    $panel-bg-color,
    $button-bg-color,
    $secondary-button-bg-color,
    $fee-color,
    $bid-color,
    $ask-color,
    $call-color,
    $light-panel-bg-color,
    $positive-color,
    $negative-color,
    $row-accent-color,
    $header-color,
    $input-background,
    $account-header,
    $account-cells,
    $account-green,
    $account-primarytext,
    $account-dimmed,
    $account-border,
    $account-background,
    $account-tabs-background,
    $pulsate-green-start,
    $pulsate-green-end,
    $pulsate-red-start,
    $pulsate-red-end,
    $settings-select-bg,
    $settings-select-color,
    $settings-menu-hover-bg,
    $settings-menu-active-bg,
    $settings-api-node-border-color,
    $main-content-margin-block-bg-color,
    $modal-bg-color,
    $mobile-input-bg,
    $incognito-bg,
    $explorer--witnesses--info-bg,
    $explorer--witnesses--info-border,
    $explorer--witnesses--info-table-title-color,
    $explorer--witnesses--info-table-text-color,
    $explorer--assets--bg,
    $negative-color-alternative,
    $positive-color-alternative,
    $separator-line,
    $medium-color,
    $dark-help-text,
    $settings-label-color
) {
    $hamburger-submenu-display-endpoint: 990px;
    ul.header-menu {
        .divider {
            margin: 0;
        }
        background-color: $header-menu-background-color !important;
    }
    .menu-dropdown-wrapper {
        &.active {
            background: $header-menu--active--icon-background !important;
            ul.header-menu {
                box-shadow: $header-menu--active--box-shadow;
                li {
                    &:hover {
                        background-color: $header-menu-item--hover--background-color;
                    }
                }
            }
        }
    }
    .selector {
        > .inline-block {
            border: 1px solid $selector-border-color !important;
            border-right: 0 !important;
            color: $selector-text-color !important;
            line-height: 1.9rem;
            &:last-child {
                border-right: 1px solid $selector-border-color !important;
            }
        }
        > *:not(.inactive).inline-block {
            color: $selector-active-text-color !important;
            border: 1px solid $selector-active-border-color !important;
        }
        > *:not(.inactive).inline-block + * {
            border-left: 0 !important;
        }
    }
    .showcases-grid {
        margin: 32px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .showcases-grid--wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: calc((450px + 32px) * 3); // 450px + 32px padding * 3 cells
    }
    .showcases-grid--wrapper--item {
        color: $secondary-text-color;
        padding: 1rem;
        min-width: 380px;
        width: 33.3%;
        height: 320px;
        h2.no-margin {
            margin: 0;
        }
        span.icon {
            margin: 0;
            svg {
                margin: 0;
            }
        }
    }
    .showcases-grid--wrapper--item--wrapper {
        padding: 1rem;
        height: calc(320px - 2rem);
        transition: 0.3s;
        border-radius: 10px;
        cursor: pointer;
        background-color: $header-color;
        border: 1px solid $header-color;
        &:hover {
            background-color: $header-color;
            border-color: $link-text-color;
        }
        &:focus {
            border-color: transparentize($link-text-color, 0.95);
            outline: none !important;
            box-shadow: 0 0 0 2px transparentize($link-text-color, 0.85);
        }
    }
    .showcases-grid--wrapper--item--wrapper--disabled {
        padding: 1rem;
        height: calc(320px - 2rem);
        transition: 0.3s;
        border-radius: 10px;
        background-color: $header-color;
        border: 1px solid $header-color;
    }
    .showcases-grid--wrapper--item--wrapper--content {
        padding: 1rem;
        display: flex;
        height: calc(100% - 32px);
        align-items: center;
    }
    .showcases-grid--wrapper--item--wrapper--content--description {
        line-height: 1.5rem;
    }
    .exchange--chart-control {
        background: $panel-bg-color;
    }
    @media (max-width: 1150px) {
        .showcases-grid--wrapper {
            width: 900px;
        }
        .showcases-grid--wrapper--item {
            width: 50%;
        }
    }
    @media (max-width: 750px) {
        .showcases-grid--wrapper {
            width: 450px;
        }
        .showcases-grid--wrapper--item {
            width: 100%;
        }
    }
    .exchange--price-alert--show-modal--active {
        color: $link-text-color;
    }
    .price-alert--notification--pair-name {
        font-weight: 600;
    }
    .price-alert--notification--icon {
        &.price-alert--notification--icon--up {
            color: $positive-color;
        }
        &.price-alert--notification--icon--down {
            color: $negative-color;
        }
    }
    .price-alert--notification--actual-price {
        &.price-alert--notification--actual-price-up {
            color: $positive-color;
        }
        &.price-alert--notification--actual-price-down {
            color: $negative-color;
        }
    }
    .explore-witness--info {
        width: 100%;
        border: 1px solid $explorer--witnesses--info-border;
        background: $explorer--witnesses--info-bg;
        padding: 12px;
        border-radius: 5px;
        table {
            width: 100%;
            thead {
                th {
                    font-weight: 400;
                    color: $explorer--witnesses--info-table-title-color;
                    font-size: 14px;
                    padding-bottom: 8px;
                }
            }
            tbody {
                td {
                    color: $explorer--witnesses--info-table-text-color;
                }
            }
        }
    }
    #incognito {
        background: $incognito-bg;
    }
    .settings-select {
        height: 36px;
        padding: 0 12px;
        background-color: $settings-select-bg;
        color: $settings-select-color;
    }
    .settings--select {
        width: 100%;
    }
    .settings-input {
        /* !important to overwrite styles for Inputs on User Settings. By default inputs take styles from
    .block-list and it uses on many places. To keep everything OK and do not break something I just do
    overwrite for Inputs on settings and keep default styles for inputs on another places. */
        color: $settings-select-color !important;
        height: 36px !important;
        background-color: $settings-select-bg !important;
        border-bottom: 0 !important;
        max-width: 100% !important;
    }
    .modal-separator {
        border-color: $secondary-text-color;
    }
    .positive {
        color: $positive-color !important;
    }
    .negative {
        color: $negative-color !important;
    }
    .amount-selector-field {
        .amount-selector-field--label {
        }
        .amount-selector-field--balance {
            float: right;
            .amount-selector-field--link {
                cursor: pointer;
                &:hover {
                    color: $link-text-color;
                }
            }
        }
    }
    .input-group-unbordered-before {
        > span > span:first-of-type {
            background: none !important;
            border: none !important;
        }
    }
    .form-input-header {
        .form-input-header--label {
        }
        .form-input-header--right {
            float: right;
            cursor: pointer;
        }
    }
    .dark-text-color {
        color: $dark-text-color;
    }
    .fz_12 {
        font-size: 12px;
    }
    .unlock_wallet_modal2 {
        .upload-button {
            border-color: $border-color;
            span {
                color: $settings-select-color;
            }
        }
        .login-select {
            color: $primary-text-color;
            border-color: $border-color;
            background: $input-background
                url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGCAYAAAAVMmT4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gUEEhssVJbYaQAAAHVJREFUGNN1z7ERgkAUBNAHnOUQGdCDRRAaGlwFVkDgGBFeEfZAaA2MY2AL3GCogvz47e78wnVOsl4y2LpWo3IsZb0gajWbMIiyvvI6P9VGQVQb3T1WcNJJhhIkg0n3s7CAUNjPuz9NN8HhG67xJ3AyuSyffgPoxSqQfV+TFgAAAABJRU5ErkJggg==")
                right 10px center no-repeat;
        }
        .login-label {
            color: $primary-text-color;
        }
        .themed-input {
            background-color: $input-background;
        }
    }
    .spinner-button-circle .circle-wrapper {
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        margin-top: -2px;
        .circle:before {
            background-color: #fff;
        }
    }
    .font-secondary {
        color: $secondary-text-color;
    }
    svg path {
        transition: all 0.3s ease 0s;
    }
    #content-wrapper {
        @include color($primary-text-color, $bg-color);
    }
    hr {
        border-color: $dark-text-color;
        background-color: $dark-text-color !important;
    }
    a {
        color: $link-text-color;
        &:hover,
        &:focus,
        &:active {
            color: lighten($link-text-color, 4%);
        }
    }
    *#{$ant-fix} > {
        label,
        label > span {
            color: $primary-text-color;
        }
    }
    // select:hover {
    // background-color: $panel-bg-color;
    // }
    .label.success {
        color: $success-color;
        border-color: $success-color;
    }
    .label.info {
        color: $info-color;
        border-color: $info-color;
    }
    .label.warning {
        color: $warning-color;
        border-color: $warning-color;
    }
    .nested-approval-state {
        .tooltip {
            text-decoration: underline dotted $primary-text-color;
        }
        .tooltip.error {
            color: $alert-color;
        }
        .tooltip.warning {
            color: $warning-color;
        }
    }
    .label.cancel,
    .label.alert {
        color: $alert-color;
        border-color: $alert-color;
    }
    .txtlabel.success {
        color: $success-color;
    }
    .txtlabel.info {
        color: $info-color;
    }
    .txtlabel.warning {
        color: $warning-color;
    }
    .txtlabel.cancel,
    .txtlabel.alert,
    .label.alert {
        color: $alert-color;
    }
    .txtann.success {
        color: $success-color;
    }
    .txtann.info {
        color: $info-color;
    }
    .txtann.warning {
        color: $warning-color;
    }
    .txtann.error {
        color: $alert-color;
    }
    // notification
    .notification {
        @include color($primary-text-color, $light-panel-bg-color, true);
    }
    .notification-dismiss {
        @include color($primary-text-color, $super-light-panel-bg-color, true);
    }
    .notification-success {
        border-left-color: $success-color !important;
    }
    .action-sheet {
        @include color($light-text-color, $super-light-panel-bg-color);
        &::after {
            border-bottom-color: $super-light-panel-bg-color;
        }
        > ul > li > a {
            color: $light-text-color;
            border-top-color: $panel-bg-color;
            &:hover {
                @include color(
                    $light-text-color,
                    lighten($super-light-panel-bg-color, 4%)
                );
                // color: $link-text-color;
            }
        }
    }
    .account-browsing-mode {
        button {
            margin-right: 24px;
        }
    }
    .__react_component_tooltip.type-light {
        @include color($light-text-color, $super-light-panel-bg-color, true);
        &.place-bottom:after {
            border-bottom-color: $super-light-panel-bg-color !important;
        }
        &.place-top:after {
            border-top-color: $super-light-panel-bg-color !important;
        }
        &.place-right:after {
            border-right-color: $super-light-panel-bg-color !important;
        }
        &.place-left:after {
            border-left-color: $super-light-panel-bg-color !important;
        }
    }
    .json-inspector__key {
        color: $secondary-text-color !important;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $primary-text-color;
    }
    // copyicons
    .copyIcon {
        background-color: $button-bg-color;
        > button.copyIcon {
            background-color: $button-bg-color;
        }
    }
    .modal#marketPicker,
    .modal#settingsModal {
        background-color: $bg-color;
        border: 1px solid black;
    }
    .modal {
        @include color($light-text-color, $account-cells);
        .modal__highlight {
            color: $info-color;
        }
        .close-button {
            color: $secondary-text-color;
            &:hover {
                color: $primary-text-color;
            }
        }
        .modal-header {
            > h6 {
                color: $secondary-text-color;
            }
            &.has-error > h6 {
                color: $error-text-color;
            }
        }
        .circle-wrapper {
            .circle:before {
                background-color: $primary-text-color;
            }
        }
        .table {
            > thead > tr > th,
            > tbody > tr > td {
                border-bottom-color: darken($secondary-text-color, 10%);
            }
        }
        span.send-name {
            color: $link-text-color;
        }
    }
    .icon > svg path {
        fill: $primary-text-color;
    }
    .footer {
        @include color($secondary-text-color, $panel-bg-color);
        svg path {
            fill: $secondary-text-color;
        }
        .logo .version {
            color: darken($secondary-text-color, 10%);
        }
    }
    .node-access-popup {
        @include color($secondary-text-color, $panel-bg-color);
        border: 1px solid black;
        .nodes-list .api-status {
            border-bottom: 1px solid lighten($bg-color, 4%);
        }
    }
    .panel-left {
        @include color($light-text-color, $light-panel-bg-color);
        .block-list li > a {
            color: $light-text-color;
            &:hover {
                background-color: darken($light-panel-bg-color, 4%);
            }
        }
    }
    .tabs {
        @include color($secondary-text-color, $bg-color);
    }
    .page-layout {
        background-color: lighten($account-header, 4%);
        .column-header {
            > ul {
                border-bottom: 1px solid $panel-bg-color;
                > li.active,
                li:hover {
                    border-bottom: 3px solid lightblue;
                }
            }
        }
        .left-column {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: $panel-bg-color; // lighten($bg-color, 4%);
        }
        .left-column-2 {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: darken($bg-color, 4%);
        }
        .main-content {
            background-color: $bg-color;
            &.margin-block {
                background-color: $main-content-margin-block-bg-color;
            }
        }
        .right-column {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: $panel-bg-color;
        }
    }
    .asset-prefix {
        color: $light-text-color !important;
    }
    .transfer-top {
        background-color: $light-panel-bg-color;
        label,
        label > span {
            color: $light-text-color;
        }
    }
    // buttons
    .button {
        background: $button-bg-color;
        &:hover,
        &:focus,
        &:active {
            background-color: lighten($button-bg-color, 4%) !important;
        }
        &.outline {
            span {
                color: $primary-text-color !important;
            }
            color: $secondary-text-color;
            border-color: $secondary-text-color;
            &:hover {
                color: $light-text-color;
                border-color: $light-text-color;
            }
        }
    }
    .button:disabled {
        opacity: 0.2 !important;
        cursor: not-allowed !important;
    }
    .button.secondary {
        @include color($dark-text-color, $secondary-button-bg-color);
        &:hover,
        &:focus,
        &:active {
            @include color(
                lighten($dark-text-color, 4%),
                lighten($secondary-button-bg-color, 4%),
                true
            );
        }
    }
    .button.danger {
        @include color(white, $alert-color);
        &:hover,
        &:focus,
        &:active {
            @include color(white, lighten($alert-color, 4%), true);
        }
    }
    .header .button,
    .header .button:active {
        background-color: transparent !important;
    }
    .header .modal .button {
        background-color: $button-bg-color !important;
        &:hover,
        &:focus,
        &:active {
            background-color: lighten($button-bg-color, 4%) !important;
        }
    }
    .header .modal .button.danger {
        background-color: $alert-color !important;
        &:hover,
        &:focus,
        &:active {
            background-color: lighten($alert-color, 4%) !important;
        }
    }
    .header a.button.create-account {
        transition: color 0s !important;
        color: $button-bg-color !important;
        > span > svg path {
            fill: $button-bg-color;
        }
        &:hover {
            color: lighten($button-bg-color, 10%) !important;
            > span > svg path {
                fill: lighten($button-bg-color, 10%);
            }
        }
    }
    .header div.account-drop-down {
        div.total-value {
            color: $account-green;
        }
        div.header-right-lock {
            cursor: pointer;
            padding: 0.9rem 0.25rem;
            &:hover {
                background-color: $bg-color;
            }
        }
        div.dropdown-wrapper {
            > li {
                div.hamburger > .icon > svg rect {
                    fill: $bs-blue;
                }
            }
            &:hover {
                background-color: $bg-color;
            }
        }
        div.dropdown-wrapper.hover-transparent {
            &:hover {
                background-color: transparent;
            }
        }
        div.dropdown-wrapper.cursor-default {
            cursor: default;
        }
        div.dropdown-wrapper.active {
            transition: background-color 0s;
            background-color: $bg-color;
            ul {
                background-color: $bg-color;
            }
            > li {
                div.hamburger > .icon > svg rect {
                    fill: $link-text-color;
                }
            }
        }
        ul.dropdown.header-menu {
            > li {
                > div:first-of-type {
                    > span.icon > svg {
                        > path {
                            fill: $primary-text-color;
                        }
                    }
                }
                &:hover,
                &.active {
                    background-color: $light-panel-bg-color;
                }
                &.divider {
                    border-bottom: 1px solid $account-border;
                    height: 0;
                    padding: 0;
                }
            }
        }
        ul.dropdown.header-submenu {
            > li {
                &.parent-item {
                    background-color: $main-content-margin-block-bg-color;
                    color: $dark-text-color;
                    &:hover {
                        color: lighten($dark-text-color, 10%);
                        background-color: lighten(
                            $main-content-margin-block-bg-color,
                            10%
                        );
                    }
                }
            }
        }
    }
    @media (max-width: $hamburger-submenu-display-endpoint) {
        ul.dropdown.header-menu {
            li.mobile-only {
                display: block;
            }
            li.desktop-only {
                display: none;
            }
        }
    }
    .header-container span.icon.lock-unlock > svg path {
        fill: $button-bg-color;
    }
    .header-dropdown-sub-link.enabled {
        color: $secondary-text-color;
        &:hover {
            color: $link-text-color;
        }
    }
    .blue {
        color: $button-bg-color;
    }
    .grp-menu-item button {
        &:hover,
        &:focus,
        &:active {
            background-color: $light-panel-bg-color !important;
        }
    }
    .grp-menu-item {
        > a,
        .button {
            color: $primary-text-color !important;
        }
    }
    .header .logo {
        color: $secondary-text-color;
    }
    .header-right-menu {
        // a:hover {background-color: lighten($panel-bg-color, 4%);}
        // a.active {background-color: lighten($panel-bg-color, 4%);}
        li.current-account > a {
            color: $info-color;
            &:hover {
                color: $info-color;
            }
            > span {
                @include RobotoMedium;
            }
        }
        svg path {
            fill: #fff;
        }
        // svg:hover > path { fill: $primary-text-color; }
    }
    .settings-cog {
        svg path {
            fill: $secondary-text-color;
        }
    }
    // cards
    .card-section {
        color: black;
        padding-left: 0.5rem;
        > ul {
            color: $light-text-color;
            list-style: none;
            font-size: 85%;
            margin-left: 0;
        }
    }
    .card {
        @include color($primary-text-color, $panel-bg-color);
        background-color: $panel-bg-color;
        &:hover {
            background-color: lighten($panel-bg-color, 4%);
            > h4 {
                background-color: lighten($light-panel-bg-color, 4%);
            }
        }
        a {
            color: $primary-text-color;
        }
        .card-divider {
            @include color($primary-text-color, $light-panel-bg-color);
        }
        > h4 {
            background-color: $light-panel-bg-color;
        }
    }
    // tables
    .table {
        > thead > tr > th {
            border-bottom-color: $dark-text-color;
            color: $secondary-text-color;
        }
        > tbody > tr > td {
            border-bottom-color: $dark-text-color;
            font-size: 0.875rem;
        }
        &.table-hover > tbody > tr:hover > td,
        .table-hover > tbody > tr:hover > th {
            background-color: lighten($bg-color, 4%);
        }
        > tbody > tr.table-empty > td {
            padding: 5rem 0;
            font-size: 1.5rem;
            text-align: center;
            color: $account-dimmed !important;
            background-color: $bg-color !important;
        }
    }
    // Sticky Order-Row
    div.sticky-table-row.order-row:hover {
        background-color: lighten($bg-color, 4%);
    }
    // block-list
    .block-list {
        color: $primary-text-color;
        li {
            border-bottom: 1px solid $border-color;
        }
        li > a {
            color: $secondary-text-color;
        }
        li > a:hover,
        li > label:hover,
        li select:hover,
        li.active > a {
            color: $light-text-color;
            background-color: lighten($bg-color, 4%);
        }
        li:first-child {
            border-top: 1px solid $border-color;
        }
        header {
            margin-left: 0;
            margin-bottom: 1rem;
            color: $secondary-text-color;
        }
        &.no-border-bottom {
            li {
                border-bottom: 0;
            }
        }
        li.with-dropdown {
            .settings-select {
                @extend .settings-select;
            }
            > input.settings-input[type="text"]#{$ant-fix} {
                @extend .settings-input;
            }
            > input.settings--input[type="text"] {
                max-width: 100%;
                width: 100%;
            }
        }
    }
    // forms
    .right-label,
    .left-label {
        color: $secondary-text-color;
        > span {
            color: inherit;
        }
    }
    div.input-wrapper {
        > div.input-right-symbol {
            color: $secondary-text-color;
        }
    }
    .dropdown-wrapper {
        > div:first-of-type {
            color: $secondary-text-color;
        }
        ul.dropdown {
            @include color($light-text-color, $super-light-panel-bg-color);
            &::after {
                border-bottom-color: $super-light-panel-bg-color;
            }
            > li > span {
                color: $light-text-color;
            }
            /* Hover state */
            li:hover > span {
                @include color(
                    $light-text-color,
                    lighten($super-light-panel-bg-color, 4%)
                );
                color: $link-text-color;
            }
        }
        &.active:after {
            border-color: $link-text-color transparent;
        }
        &:after {
            /* Little arrow */
            border-color: $secondary-text-color transparent;
        }
    }
    .account-image {
        .icon:hover {
            svg path {
                fill: darken($secondary-text-color, 5%);
            }
        }
    }
    .account-selector,
    .pubkey-input {
        .account-image {
            > canvas {
                color: black;
            }
            .icon > svg path {
                fill: $primary-text-color;
            }
            .icon:hover {
                svg path {
                    fill: darken($secondary-text-color, 5%);
                }
            }
        }
    }
    .has-error,
    div.has-error > label,
    div.has-error > label > span,
    .error-msg {
        color: $error-text-color !important;
    }
    .floatRight {
        float: right;
    }
    .has-warning,
    div.has-warning > label,
    div.has-warning > label > span {
        color: $warning-color;
    }
    div.has-error > input,
    div.has-error > input:hover,
    div.has-error > input:focus {
        border-color: $error-text-color;
    }
    .has-error input,
    .has-error select,
    .has-error textarea {
        border-color: $error-text-color;
    }
    input[type="text"]#{$ant-fix},
    input[type="password"]#{$ant-fix},
    input[type="email"]#{$ant-fix},
    input[type="number"]#{$ant-fix},
    input[type="search"]#{$ant-fix},
    textarea#{$ant-fix},
    input[role="combobox"]#{$ant-fix},
    select[role="combobox"]#{$ant-fix} {
        background-color: $input-background;
        border: 0;
        color: $primary-text-color;
        &:hover,
        &:focus,
        &:active,
        &:disabled {
            background-color: $input-background;
        }
        &:focus {
            border-color: #aaa;
        }
    }
    input[type="range"] {
        /* These need to be independent selectors */
        &::-moz-range-thumb {
            background: $link-text-color;
            outline: none;
            border: none;
            border-radius: 3px;
        }
        &::-webkit-slider-thumb {
            background: $link-text-color;
            outline: none;
            border: none;
            border-radius: 3px;
        }
        &::-ms-thumb {
            background: $link-text-color;
            outline: none;
            border: none;
            border-radius: 3px;
        }
        &::-moz-range-track {
            background-color: $input-background;
            border-radius: 3px;
        }
        &::-webkit-slider-runnable-track {
            background-color: $input-background;
            border-radius: 3px;
        }
        &::-ms-track {
            background-color: $input-background;
            border-radius: 3px;
        }
    }
    textarea {
        line-height: 22px;
    }
    // Typeahead
    input[role="combobox"] {
        padding: 5px 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .typeahead {
        > div {
            > div {
                z-index: 1003;
                background-color: $input-background !important;
                > div {
                    color: $primary-text-color;
                    background-color: transparent !important;
                    &:hover,
                    &:active,
                    &:focus,
                    &:visited {
                        background-color: darken(
                            $input-background,
                            10%
                        ) !important;
                    }
                }
            }
        }
        .typeahead__input {
            background: $input-background;
        }
        .typeahead__innerList {
            background: $panel-bg-color;
        }
        .typeahead__innerItem {
            color: $primary-text-color;
            > .typeahead__innerItem__highlight {
                background-color: darken($input-background, 10%) !important;
            }
            > .typeahead__innerItem__disabled {
                color: $inactive-text-color;
            }
        }
    }
    ul.account-overview.segmented {
        > li > a {
            background: $bg-color !important;
            border-right: none;
        }
    }
    ul.button-group.segmented {
        > li.is-active > a {
            background: $input-background;
            color: $primary-text-color;
            border-bottom: 1px solid $button-bg-color;
        }
    }
    // Tabs
    .tabs {
        border-bottom-color: $dark-text-color;
        > .tab-item {
            color: $secondary-text-color;
            &.is-active {
                color: $primary-text-color;
                border-bottom-color: $button-bg-color;
            }
            &:hover,
            &:focus,
            &:active {
                color: $primary-text-color;
            }
        }
    }
    .tab-content {
        background-color: $tabs-content-background-color;
        div.header-selector {
            .filter input {
                background-color: $bg-color;
            }
            .selector {
                .inactive {
                    color: $inactive-text-color;
                }
            }
        }
        &.explorer-tab-content {
            background-color: $explorer-tab-content-background-color;
        }
    }
    div.header-selector {
        > .filter {
            margin-right: 1rem;
            input {
                margin: 0;
                height: 2rem;
                padding: 0 10px;
            }
        }
        > .selector div {
            font-size: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            &:nth-of-type(n + 1) {
                padding-left: 10px;
                padding-right: 10px;
                border-right: 1px solid white;
                // TODO: FIX
            }
            &:hover.inactive {
                color: inherit;
            }
        }
        > .selector div:last-of-type {
            border-right: 0px;
        }
        > .group-by {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        > .filter-block {
            float: left;
            display: flex;
            align-items: center;
            > .filter {
                margin-right: 10px;
            }
        }
        > .action-buttons {
            float: right;
        }
        > .header-selector--error {
            color: red;
            line-height: 2rem;
            vertical-align: middle;
            margin-left: 1rem;
        }
    }
    // Exchange
    .depthchart {
        background-color: $bg-color;
        &:hover {
            background-color: $bg-color;
        }
        &.area {
            color: #fff;
        }
    }
    .bid-total {
        color: $bid-color !important;
    }
    .ask-total {
        color: $ask-color !important;
    }
    .stats .stat .negative {
        color: $negative-color !important;
    }
    .stats .stat .positive {
        color: $positive-color !important;
    }
    .value.negative {
        color: $ask-color !important;
        @include RobotoMedium;
    }
    .value.positive {
        color: $bid-color !important;
        @include RobotoMedium;
    }
    .active-bucket {
        background-color: lighten($light-panel-bg-color, 12%);
    }
    .bucket-option:hover {
        background-color: $panel-bg-color;
    }
    .buy-sell-box {
        background-color: lighten($light-panel-bg-color, 12%);
        > select {
            background-color: lighten($light-panel-bg-color, 12%);
            background: lighten($light-panel-bg-color, 12%)
                url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%3E%3Cpolygon%20points%3D%220%2C0%2032%2C0%2016%2C24%22%20style%3D%22fill%3A%20black%22%3E%3C/polygon%3E%3C/svg%3E")
                right 10px center no-repeat;
        }
    }
    .buy-sell-input > input.no-balance {
        color: $alert-color;
    }
    // Account page
    .account-left-panel {
        h5 {
            color: $primary-text-color;
        }
        h6 {
            @include RobotoMedium;
        }
        .bottom {
            border-top-color: $bg-color;
        }
        .advanced-toggle > a {
            color: $primary-text-color;
        }
        a.pay-button {
            background-color: $bg-color;
            color: $primary-text-color;
            &:hover {
                background-color: $light-panel-bg-color !important;
            }
        }
        div.create-account-button {
            background: transparent;
            border: 2px solid $button-bg-color;
            > a {
                @include RobotoMedium;
                color: $primary-text-color;
            }
        }
    }
    .account-info {
        color: $primary-text-color;
        > p:first-of-type {
            color: $light-text-color;
        }
        .account-title {
            &.flash {
                color: white;
            }
        }
        > div.secondary {
            > span:first-of-type {
                color: $primary-text-color;
            }
            > span:last-of-type {
                color: $secondary-text-color;
            }
        }
    }
    .my-account h5,
    .my-account h4,
    .my-account p,
    table.table > tbody > tr > td.my-account > span {
        @include RobotoMedium;
        color: $info-color;
    }
    .account-left-menu {
        > li > a:hover,
        > li > label:hover,
        > li select:hover {
            color: $light-text-color;
            background-color: lighten($panel-bg-color, 5%);
        }
        > li > a.active {
            color: $light-text-color;
            background-color: lighten($panel-bg-color, 4%);
            border-right-color: darken($button-bg-color, 4%);
        }
    }
    .pagination {
        background-color: $panel-bg-color;
    }
    .invoice {
        .item-description {
            color: $secondary-text-color;
        }
    }
    // Formatted assets
    .facolor-success {
        color: $success-color;
    }
    .facolor-alert {
        color: $alert-color;
    }
    .facolor-warning {
        color: $warning-color;
    }
    .facolor-info {
        color: $info-color;
    }
    .facolor-error {
        color: $error-text-color;
    }
    .facolor-fee {
        color: $fee-color;
    }
    // AccountSelector component
    .error-area {
        color: $error-text-color;
    }
    .account-selector {
        .right-label {
            color: $secondary-text-color;
        }
    }
    .icon.success {
        padding-right: 0.5rem;
        > svg path {
            fill: $success-color;
        }
    }
    .icon.error {
        padding-right: 0.5rem;
        > svg path {
            fill: $warning-color;
        }
    }
    .circle-wrapper {
        .circle:before {
            background-color: $secondary-text-color;
        }
    }
    // Misc
    .chart-zoom-dropdown {
        width: 24px;
        height: 28px;
        padding: 4px;
        opacity: 0.5;
        overflow: hidden;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover,
        &:active,
        &:focus {
            background-color: $bg-color;
            padding: 4px;
            opacity: 0.85;
            border-radius: 2px;
            color: $light-text-color;
            font-size: 60%;
            width: 348px;
            height: 48px;
        }
    }
    .remove {
        color: $alert-color;
        border: none;
        padding: 2px 4px;
        font-size: 120%;
        background-color: transparent;
        border-radius: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover,
        &:active,
        &:focus {
            color: $light-text-color;
            background-color: $alert-color;
            font-size: 120%;
            border-radius: 2px;
        }
    }
    .memo {
        color: $secondary-text-color;
    }
    .help-content-layout div {
        background-color: $bg-color !important;
        .help-toc {
            ul {
                margin: 0px;
                li {
                    padding-top: 3px;
                    padding-left: 5px;
                    background: none;
                    color: $secondary-text-color;
                    a {
                        color: $secondary-text-color;
                    }
                    a:hover {
                        color: $light-text-color;
                    }
                    ul {
                        margin-left: 1.1rem;
                    }
                }
                li:hover {
                    background-color: $header-color;
                    a {
                        color: $light-text-color;
                    }
                    a:hover {
                        background-color: $header-color;
                        color: $light-text-color;
                    }
                }
            }
            h4 {
                color: $secondary-text-color;
            }
            a {
                display: block;
            }
        }
    }
    .help-content {
        padding: 10px;
        ul {
            list-style: none;
        }
        li {
            @include image($bg-color);
            background-size: 7px 10px;
            padding-left: 12px;
        }
        a {
            color: $link-text-color;
        }
        a:hover {
            background-color: $link-text-color;
            color: $bg-color;
        }
        hr {
            border: none;
            height: 1px;
            width: 100%;
            background-color: $panel-bg-color;
        }
        code {
            color: $primary-text-color;
            background-color: transparent;
            border-color: $dark-text-color;
        }
        blockquote {
            color: $secondary-text-color;
            border-left: 3px solid $panel-bg-color;
        }
    }
    .click-for-help {
        border-bottom-color: $secondary-text-color !important;
    }
    // Block List (section)
    section.block-list input[type="text"]#{$ant-fix},
    section.block-list input[type="password"] {
        border-bottom: 1px solid $panel-bg-color;
        background-color: transparent;
        color: $primary-text-color;
        &:hover,
        &:active,
        &:focus {
            color: $primary-text-color;
            background-color: transparent;
            border-bottom: 1px solid $panel-bg-color;
        }
    }
    .remove {
        color: $alert-color;
        border: none;
        padding: 2px 4px;
        font-size: 120%;
        background-color: transparent;
        border-radius: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover,
        &:active,
        &:focus {
            color: $light-text-color;
            background-color: $alert-color;
            font-size: 120%;
            border-radius: 2px;
        }
    }
    .menu-group.primary,
    .menu-group.primary .menu-bar {
        background-color: $account-background;
        li {
            > a {
                color: $account-dimmed;
                .icon > svg path {
                    fill: $account-dimmed;
                }
            }
            > a:hover,
            > a.active {
                background-color: $bg-color !important;
                color: $primary-text-color;
                .icon > svg path {
                    fill: $primary-text-color;
                }
            }
        }
    }
    // Asset Detail
    .asset-card {
        .card-divider {
            background: $panel-bg-color;
        }
    }
    // Exchange
    .mymarkets-header {
        border-bottom-color: $button-bg-color;
        &.inactive {
            border-bottom-color: transparent;
            color: $secondary-text-color;
        }
    }
    div.exchange-content-header {
        background-color: transparent !important;
    }
    .exchange-content-header {
        color: $light-text-color;
    }
    .exchange-content-header--buy-sell-form {
        border-bottom: 0 !important;
    }
    // .block-content-header {
    // //text-transform: uppercase;
    // @include RobotoLight;
    // }
    .orderHistoryBid {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $bid-color;
        }
        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }
    .orderHistoryAsk {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $ask-color;
        }
        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }
    .orderHistoryCall {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $call-color;
        }
        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }
    .order-table .my-order {
        > .vertical-order-table-cell,
        > td {
            font-weight: bold;
            color: $info-color;
        }
        span.price-integer,
        span.price-decimal {
            color: $info-color !important;
            opacity: 1;
        }
    }
    .bid {
        background-color: $bid-color !important;
    }
    .ask {
        background-color: $ask-color !important;
    }
    .orderbook-latest-price {
        > div {
            $orderbook-center-horizontal-margin: 5px;
            margin-top: $orderbook-center-horizontal-margin;
            margin-bottom: $orderbook-center-horizontal-margin;
            background-color: $panel-bg-color !important;
            border-bottom: 1px solid grey !important;
            border-top: 1px solid grey !important;
            padding: 7px 0 !important;
        }
    }
    .sticky-table .sticky-table-column,
    .sticky-table .sticky-table-corner {
        @include color($primary-text-color, $bg-color);
    }
    .left-order-book {
        background-color: $bg-color;
        .orderbook-center-title {
            color: $inactive-text-color;
        }
        .spread .spread-value {
            color: $primary-text-color;
        }
    }
    .sticky-table-header {
        width: 100%;
        height: 32px;
        > .sticky-table-cell {
            background-color: $panel-bg-color !important;
            border-bottom: 1px solid grey !important;
        }
        .sticky-table-row {
            width: 100%;
            background-color: $bg-color;
            &.order-row:hover {
                background-color: $panel-bg-color;
            }
        }
    }
    .sticky-table-cell {
        background-color: transparent;
    }
    // .order-table {
    // > tbody > tr:nth-of-type(even) {
    // background-color: $row-accent-color;
    // }
    // }
    .mymarkets-header {
        background-color: $header-color;
    }
    tr.activeMarket,
    tr.activeMarket:hover {
        color: #4c85d8;
        background-color: $header-color;
    }
    .market-stats .stat .value {
        color: $primary-text-color;
    }
    li.stat.input {
        &:hover {
            background-color: lighten($panel-bg-color, 4%);
        }
    }
    .stats .stressed-stat {
        padding: 10px 0;
        font-size: 18px;
        &.is-call {
            color: $call-color !important;
        }
        &.daily_change {
            &.positive {
                color: $account-green !important;
            }
            &.negative {
                color: $negative-color !important;
            }
        }
    }
    .stat-text {
        margin-top: 3px;
        font-size: 11px;
        color: gray;
    }
    .buy-sell-box {
        background-color: $header-color;
        > select {
            padding: 0;
            margin: 0;
            height: 1.75rem;
            line-height: 1.75rem;
            border: none;
            color: $primary-text-color;
            background-size: 8px 8px;
            background-color: $header-color;
            font-size: 12px;
            > option {
                color: $primary-text-color;
                background-color: $header-color;
            }
        }
    }
    .change-up {
        color: $bid-color !important;
    }
    .change-down {
        color: $ask-color !important;
    }
    .header-sub-title {
        font-size: 11px;
        color: $light-text-color;
    }
    .label {
        background-color: $panel-bg-color;
    }
    .mymarkets-group-header {
        background-color: $header-color;
        padding: 8px 35px;
        border-bottom: 1px solid grey;
        @include RobotoMedium;
        text-transform: uppercase;
        cursor: pointer;
    }
    // .table > tbody > tr:nth-of-type(even) {
    // background-color: lighten($bg-color, 4%);
    // }
    // bottom stats
    .bucket-option {
        @include button-focus($secondary-text-color, $panel-bg-color, 0);
        &:hover {
            @include button-focus($primary-text-color, $panel-bg-color, 10);
        }
    }
    .active-bucket {
        @include button-focus($primary-text-color, $panel-bg-color, 10);
    }
    li.stat.clickable {
        color: $secondary-text-color;
        // &:hover{
        // @include button-focus($primary-text-color, $panel-bg-color, 10);
        // }
    }
    .mymarkets-tabs {
        > li {
            @include button-focus($secondary-text-color, $panel-bg-color, 0);
            &:hover {
                @include button-focus($primary-text-color, $panel-bg-color, 10);
            }
            &.active {
                @include button-focus($primary-text-color, $panel-bg-color, 10);
            }
        }
    }
    .mymarkets-list {
        border-top: 2px solid $panel-bg-color;
    }
    select.bts-select,
    select.native-coin-types,
    select.external-coin-types {
        color: $secondary-text-color;
        background-color: $light-panel-bg-color;
        border: 0;
        &:hover,
        &:focus,
        &:active {
            background-color: $light-panel-bg-color;
        }
    }
    .api-node {
        .icon.shuffle svg path {
            fill: $button-bg-color !important;
        }
        .icon.link svg path {
            fill: $positive-color !important;
        }
        .icon.minus-circle svg path {
            fill: $negative-color !important;
        }
        &:nth-child(odd) {
            background-color: lighten($bg-color, 4%);
        }
    }
    .active-node {
        border-bottom: 1px solid lighten($bg-color, 4%);
        border-top: 1px solid lighten($bg-color, 4%);
    }
    div.ant-row.ant-form-item.no-offset {
        margin-bottom: 0;
    }
    // Settings
    .settings-menu {
        > ul {
            width: 200px;
            transition: 0.3s;
            margin-left: 0;
            > li {
                border-radius: 2px;
                color: $secondary-text-color;
                padding: 3px 11px;
                margin: 5px;
                &:hover {
                    color: $primary-text-color;
                    background-color: $settings-menu-hover-bg;
                }
                &.active {
                    color: $primary-text-color;
                    background-color: $settings-menu-active-bg;
                }
            }
        }
    }
    .unstyled-list {
        list-style: none;
        margin-left: 0;
        margin-bottom: 0;
    }
    .settings-container {
        // hardcode style overriding for style-guide labels of Form.Item
        .ant-form-item-label label {
            font-weight: 500 !important;
            text-transform: uppercase !important;
            color: $settings-label-color !important;
        }
    }
    .settings--notifications {
        .settings--notifications--group {
            .settings--notifications--item {
                label {
                    color: $settings-select-color;
                }
            }
        }
        .settings--notifications--no-browser-support {
            color: $error-text-color;
            font-size: 12px;
        }
    }
    @media (max-width: $hamburger-submenu-display-endpoint) {
        .settings-menu {
            display: none;
        }
    }
    a {
        &.order-cancel > .icon > svg {
            > path {
                fill: $negative-color;
            }
        }
        &.action-plus > .icon > svg {
            > path {
                fill: $positive-color;
            }
        }
    }
    .margin-row > td:last-of-type {
        padding: 0px !important;
        margin: 0px !important;
    }
    .margin-ratio {
        padding: 6px;
        @include RobotoMedium;
    }
    .margin-ratio.danger {
        background-color: darken($alert-color, 15%) !important;
        color: darken($dark-text-color, 15%);
    }
    .margin-ratio.warning {
        background-color: darken($warning-color, 15%) !important;
        color: darken($dark-text-color, 15%);
    }
    tr.margin-row {
        > td.danger {
            background-color: darken($alert-color, 15%) !important;
            color: $dark-text-color;
            @include RobotoMedium;
        }
        > td.warning {
            background-color: darken($warning-color, 15%) !important;
            color: $dark-text-color;
            @include RobotoMedium;
        }
    }
    .nodes-header {
        border-bottom-color: $button-bg-color;
        background-color: $bg-color;
        &.inactive {
            border-bottom-color: transparent;
            color: $secondary-text-color;
        }
    }
    div.custom-dropdown-content {
        background: $panel-bg-color;
        color: $primary-text-color;
        > ul > li {
            &.clickable:hover {
                background-color: lighten($panel-bg-color, 5%);
            }
            > div.clickable:hover {
                background-color: lighten($panel-bg-color, 5%);
            }
        }
    }
    .blocktrades-bridge input,
    .blocktrades-bridge select {
        color: $secondary-text-color;
        border: 1px solid $secondary-text-color;
        background-color: $panel-bg-color !important;
        &.native-coin-types,
        &.external-coin-types {
            background-color: transparent !important;
        }
        > option {
            color: $primary-text-color;
            background-color: $panel-bg-color !important;
        }
        &:hover,
        &:focus {
            color: $primary-text-color; // box-shadow: 1px 2px 3px #000;
            border: 2px solid $primary-text-color;
        }
    }
    .SimpleTrade__modal {
        .Modal__header {
            background-color: lighten($panel-bg-color, 5%);
        }
        .Modal__divider {
            border-bottom: 2px solid #020202;
        }
    }
    ul.dashboard-links {
        > li.active {
            color: $primary-text-color;
        }
    }
    .switch input:checked + label {
        background-color: darken($positive-color, 10%);
        &::after {
            border: none;
            background-color: lighten($positive-color, 5%);
        }
    }
    div.ok-indicator {
        color: $secondary-text-color;
        &.success {
            color: $success-color;
        }
    }
    .login-selector {
        > div.box {
            background-color: $panel-bg-color;
            &:hover {
                background-color: darken($panel-bg-color, 2%);
            }
            a {
                color: $primary-text-color;
            }
        }
    }
    table.table > tbody > tr.in-use {
        > td:nth-child(2) {
            @include RobotoMedium;
        }
    }
    .SimpleDepositBridge__info-row {
        > div {
            > div.float-right {
                &.above-limit {
                    color: $error-text-color;
                }
            }
        }
    }
    input.my-key,
    td.my-key a {
        @include RobotoMedium;
        color: $info-color;
    }
    td.pub-key {
        word-break: break-all;
    }
    /* Table view account */
    div.grid-content.app-tables {
        background-color: $account-background;
    }
    div.tabs-container {
        background-color: $account-background;
    }
    div.account-tabs {
        > div.service-selector {
            background-color: $bg-color;
            border-bottom: $tabs-border-size solid $tabs-border-color;
        }
    }
    ul.account-overview {
        background-color: $tabs-background-color;
        li {
            transition: all 0.3s ease 0s;
            background-color: $tabs-item-background-color;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: $tabs-item-border-size solid $tabs-item-border-color;
            > a {
                background-color: $tabs-item-background-color;
                color: $tabs-item-color;
                border: none;
                transition: all 0.3s ease 0s;
                &:hover {
                    color: $account-primarytext;
                }
                > div.tab-subtext {
                    color: $account-green;
                }
            }
            &.is-active,
            &:hover {
                border-bottom: $tabs-item-border-size solid
                    $tabs-item--active--border-color;
                background-color: $tabs-item--active--background-color;
                > a {
                    color: $account-primarytext;
                }
            }
            &.total-value {
                > a {
                    background-color: $account-cells;
                    &:hover > span.tab-title {
                        color: $account-dimmed;
                    }
                }

                .icon.locked > svg path {
                    fill: $button-bg-color;
                }
            }
        }
    }
    table.table.dashboard-table {
        > thead > tr > th {
            background-color: $account-header;
            color: $account-primarytext;
            border-color: $account-border;
        }
        > tbody > tr.dashboard-table--hiddenAccounts {
            > td {
                height: 20px;
                text-align: left;
                padding-left: 45px;
                background-color: $account-header;
                color: $account-primarytext;
            }
        }
        > tbody > tr {
            > td {
                background-color: $account-cells;
                color: $account-primarytext;
                border-color: $account-border;
                .icon > svg path {
                    fill: $account-primarytext;
                }
                .icon.locked > svg path {
                    fill: $button-bg-color;
                }
                .icon.unlocked > svg path {
                    fill: $button-bg-color;
                }
            }
            &.total-value {
                td {
                    background-color: $account-header;
                }
                td:nth-child(n + 2) {
                    color: $account-green;
                    text-align: right;
                }
            }
            &.unsupported {
                > td {
                    color: grey;
                    > a {
                        color: grey;
                    }
                    svg path {
                        fill: grey;
                    }
                }
            }
        }
    }
    .ant-table-content .ant-table-footer .total-value {
        .value {
            color: $account-green;
        }
    }
    .ant-table-placeholder {
        min-height: 140px;
        z-index: 0;
    }
    div.account-creation {
        border: 1px solid $account-cells;
        border-radius: 6px;
        div.button > a {
            color: $primary-text-color;
        }
    }
    span.danger {
        color: darken($alert-color, 15%);
    }
    span.warning {
        color: darken($warning-color, 15%);
    }
    .api-status {
        .low {
            color: $bid-color;
            > svg path {
                fill: $bid-color;
            }
        }
        .medium {
            color: $call-color;
            > svg path {
                fill: $call-color;
            }
        }
        .high {
            color: $ask-color;
            > svg path {
                fill: $ask-color;
            }
        }
    }
    .footer {
        div.footer-status {
            > span.testnet {
                font-size: 0.85rem;
            }
            > span.success {
                color: $success-color;
            }
            > span.warning {
                color: $alert-color;
            }
        }
    }
    tr > td > a.primary-text {
        color: $primary-text-color;
    }
    .pulsate {
        animation: 0.5s ease-out 1;
        &.red {
            animation-name: pulsate-red;
        }
        &.green {
            animation-name: pulsate-green;
        }
        &.reverse {
            animation-timing-function: ease-in;
            animation-direction: reverse;
        }
    }
    @keyframes pulsate-green {
        0% {
            color: $pulsate-green-start;
        }
        100% {
            color: $pulsate-green-end;
        }
    }
    @keyframes pulsate-red {
        0% {
            color: $pulsate-red-start;
        }
        100% {
            color: $pulsate-red-end;
        }
    }
    .introjs-launcher {
        margin-left: 5px;
        background-color: $bs-blue;
        padding: 0 10px;
        font-size: 18px;
        line-height: 1.8;
        transition: background-color 0.2s ease;
        color: #fff;
        &:hover {
            cursor: pointer;
            background-color: darken($bs-blue, 10%);
        }
        @include breakpoint(small only) {
            position: absolute;
            bottom: 1rem;
            right: 0.3rem;
            z-index: 9999;
            display: block;
            line-height: 0;
            font-size: 0;
            color: transparent;
            background-color: transparent;
            &:after {
                content: "?";
                color: #fff;
                font-size: 1rem;
                line-height: 1.5;
                text-align: center;
                padding: 0.3rem 0.8rem;
                background-color: $bs-blue;
                border: 1px solid $bg-color;
            }
        }
    }
    .footer {
        padding-right: 0;
    }
    .tab-no-background {
        background-color: transparent !important;
    }
    .header-container {
        background-color: $header-background-color;
        box-shadow: $header-shadow;
        z-index: 2;
        .menu-group {
            .menu-bar {
                li {
                    a {
                        text-decoration: none;
                        background: $header-item-background-color;
                        color: $header-item--color;
                        svg path {
                            fill: $header-item--color !important;
                        }
                        &:hover {
                            background-color: $header-item--active--background-color !important;
                            color: $header-item--active--color;
                            svg path {
                                fill: $header-item--active--color !important;
                            }
                        }
                        &.active {
                            background-color: $header-item--active--background-color !important;
                            color: $header-item--active--color;
                            svg path {
                                fill: $header-item--active--color !important;
                            }
                        }
                    }
                }
            }
        }
        .menu-dropdown-wrapper {
            &.active {
                background: $panel-bg-color;
            }
        }
        .dropdown.header-menu {
            background-color: $panel-bg-color;
            li.divider {
                border-bottom: 1px solid $dark-text-color;
                height: 0;
                padding: 0;
            }
            > li:hover {
                background-color: $super-light-panel-bg-color;
            }
        }
        .total-value {
            color: $account-green;
        }
    }
    .flip-arrow:hover {
        color: $bs-blue;
        cursor: pointer;
    }
    .order-2 .flip-arrow,
    .order-5 .flip-arrow {
        display: none;
    }
    .order-book-button-h svg path {
        fill: #fff;
        &:hover {
            fill: $bs-blue;
            cursor: pointer;
        }
    }
    .order-book-button-v {
        display: none;
    }
    @include breakpoint(medium) {
        .order-book-button-v {
            display: inline-block;
            margin-left: 5px;
            svg path {
                fill: #fff;
                &:hover {
                    fill: $bs-blue;
                    cursor: pointer;
                }
            }
        }
    }
    .expiration-datetime-picker {
        &.scaled-orders {
            > div {
                margin-top: -5px;
            }
        }
        > div {
            float: left;
            min-width: 145px;
        }
        input {
            padding: 0;
            margin: 0 5px 0 0;
            background: transparent;
            border-radius: 0 !important;
            border-bottom: 1px dotted rgb(160, 159, 159);
            display: inline-block;
            text-align: left;
            font-size: 90%;
            line-height: 1.75rem;
            height: 1.75rem;
            &:hover {
                background: transparent;
            }
        }
        select {
            width: auto;
            padding: 0;
            background: transparent;
            border: 0;
            color: $primary-text-color;
            border-bottom: 1px dotted rgb(160, 159, 159);
            margin: 0 0 1px;
            font-size: 90%;
            line-height: 1.75rem;
            height: 1.75rem;
            > option {
                background-color: $light-panel-bg-color;
            }
        }
        .expiration-datetime-picker--select--specific {
            float: right;
        }
    }
    .marketPicker {
        .results {
            background: $input-background;
            border: 1px solid $bg-color;
        }
    }
    .qr-address-scanner {
        &-btn {
            background: #049cce;
            height: 2.4rem;
            border-radius: 0 5px 5px 0;
            width: 40px;
            span.icon {
                background: transparent;
            }
            svg {
                background: transparent;
            }
        }

        &-divider {
            margin: 24px 0;
            height: 1px;
            width: 100%;
            background: $bg-color;
        }
        &-modal {
        }
        &-input-field {
            border-radius: 5px 0 0 5px !important;
        }
        &-status {
            font-size: 0.95rem;
            margin: 12px 24px 0 24px;
            &-title {
                margin-bottom: 12px;
                margin-top: 12px;
                &:first-child {
                    margin-top: 0;
                }
            }
            &-address {
                color: $success-color;
            }
            &-amount {
                color: $success-color;
            }
        }
        &-actions {
            margin: 24px;
        }
        .modal {
            height: 100%;
            max-width: 500px;
            margin: 0 auto;
        }
    }
    .grouped_order {
        select {
            float: right;
            width: auto;
            padding: 0;
            background: transparent;
            border: 0;
            color: $primary-text-color;
            border-bottom: 1px dotted rgb(160, 159, 159);
            font-size: 0.7rem;
            height: 17px;
            margin: 0 0 1px 10px;
            > option {
                background-color: $light-panel-bg-color;
            }
        }
    }
    .login-selector--language-select {
        .login-selector--language-select--icon {
            font-size: 18px;
            margin-top: 7px;
            margin-right: 7px;
            color: $link-text-color;
        }
        .login-selector--language-select--wrapper {
            margin-left: 0;
            // center language select for width icon takes
        }
    }
    .registration-layout {
        .attention-note {
            background-color: rgba($medium-color, 0.06);
        }
        .attention-text {
            color: $medium-color;
        }
        .button-primary {
            background-color: $button-bg-color;
            color: $light-text-color;
            &:hover {
                background-color: lighten($button-bg-color, 10%) !important;
            }
            &:active {
                background-color: lighten($button-bg-color, 15%) !important;
            }
        }
        .button-secondary {
            background-color: initial;
            color: $button-bg-color;
            border-color: $button-bg-color;
            &:hover {
                border-color: lighten($button-bg-color, 10%) !important;
                color: lighten($button-bg-color, 10%) !important;
            }
            &:active {
                border-color: lighten($button-bg-color, 15%) !important;
                color: lighten($button-bg-color, 10%) !important;
            }
        }
        .registration-title {
            color: $light-text-color;
        }
        .selection-block {
            .selection-title,
            .choice-model,
            .model-option {
                color: $light-text-color;
            }
            .recommended {
                background-color: $positive-color-alternative;
                color: $dark-help-text;
            }
            .model-option-value {
                color: $positive-color-alternative;
            }
            .account-option-value {
                color: $negative-color-alternative;
            }
            .account-security {
                color: $medium-color;
            }
            .option-border {
                border-bottom-color: $separator-line;
            }
            div.inactive-left-block,
            div.inactive-right-block {
                background-color: darken($modal-bg-color, 10);
            }
        }
        .plate.inactive-model-block {
            background-color: transparentize($modal-bg-color, 0.6);
        }
        .plate {
            background-color: $modal-bg-color;
        }
        span.checkbox {
            border-color: $button-bg-color;
            background-color: transparentize($button-bg-color, 0.9);
        }
        span.checkbox-active {
            border-color: $button-bg-color;
            background-color: $button-bg-color;
            svg path {
                fill: $bg-color;
            }
        }
        .file-input-container {
            background-color: darken($modal-bg-color, 5);
            border-color: transparentize($button-bg-color, 0.5);
            .upload-text {
                color: transparentize($light-text-color, 0.3);
            }
            &:hover,
            &.dropHover {
                border-color: $button-bg-color;
                background-color: darken($modal-bg-color, 10);
            }
            &.downloaded {
                border-color: $button-bg-color;
                background-color: transparentize($button-bg-color, 0.8);
            }
            &.invalid {
                border-color: $negative-color-alternative;
                background-color: transparentize(
                    $negative-color-alternative,
                    0.9
                );
            }
        }
        .dismiss-icon {
            color: $negative-color-alternative;
        }
        .approve-icon svg path {
            fill: $positive-color-alternative;
        }
        @include breakpoint(small only) {
            .plate {
                background-color: darken($modal-bg-color, 10);
                .header-block,
                .wallet-block,
                .account-block,
                .wallet-block-registration,
                .account-block-registration {
                    background-color: $modal-bg-color;
                    .overflow-bg-block {
                        .content {
                            background-color: $modal-bg-color;
                        }
                    }
                }
            }
            .small-container {
                border: 1px solid transparentize($light-text-color, 0.8);
                background-color: transparentize($light-text-color, 0.9);
                .active-upload-text {
                    background-color: transparentize($dark-text-color, 0.9);
                }
            }
        }
    }
    i.anticon.icon-fill {
        &:hover {
            color: $bs-blue;
            cursor: pointer;
        }
    }
    .icon-fill {
        svg path {
            fill: $light-text-color;
            &:hover {
                fill: $bs-blue;
                cursor: pointer;
            }
        }
    }
    .modal--transaction-confirm {
        zindex: 10000; // make transaction confirm modal above another modals
    }
    .asset-collapse {
        .ant-collapse-header {
            background: $panel-bg-color;
            color: $primary-text-color !important;
            border: solid 1.2px $panel-bg-color !important;
        }
    }
}
.rc-time-picker-panel {
    z-index: 9999 !important;
}
.midnightTheme .gate_fee .amount-selector {
    width: 100%;
    display: inline-block;
}
.midnightTheme .gate_fee .right-selector {
    text-align: right;
    width: 26%;
    display: inline-block;
    color: #adadad;
    text-transform: uppercase;
}
.midnightTheme .gate_fee .right-selector .right-selector-input {
    text-align: right;
    width: 100%;
}
.clear-text,
.search-wrapper {
    position: relative;
}
.market-filter-input,
.clear-text,
.search-wrapper {
    position: relative;
}
.clear-text {
    top: 10px;
    right: -30px;
    position: absolute;
    border: 0;
    background-color: transparent;
    display: block;
    outline: 0;
    cursor: pointer;
}
.clear-text:after {
    content: "X";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: transparent;
    z-index: 1;
    right: 35px;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
}
.market-filter-input:not(:valid) ~ .clear-text {
    display: none;
}
.header-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 64px;
    .menu-bar {
        overflow: visible;
    }
    .logo {
        padding-top: 0.7rem;
        padding-bottom: 0.8rem;
    }
    .dropdown-wrapper:after {
        display: none;
    }
    .menu-dropdown-wrapper {
        height: 65px;
        width: 65px;
        text-align: left;
        border-radius: 0;
        .hamburger .icon {
            position: relative;
            top: 12px;
        }
    }
    .dropdown.header-menu {
        top: 65px;
    }
    .hamburger svg rect,
    .hamburger-x svg rect {
        fill: $bs-blue;
    }
    .total-value {
        text-align: right;
        font-size: 80%;
        line-height: normal;
    }
}
.local-wallet-menu {
    // top: 50px!important;
    .table-cell {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:nth-of-type(2) {
            max-width: 17em;
        }
    }
}
.app-menu {
    flex: 0;
}
.truncated {
    flex: 1;
    min-width: 0; /* or some value */
    .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }
}
#qr_scanner_modal {
    > section {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media screen and (max-width: 640px) {
    .responsive-list > .help-content > ul {
        height: 300px;
        overflow-y: scroll;
        border-radius: 6px;
        background: #2a2a2a;
        border: 1px solid #4b5158;
        margin-bottom: 2rem !important;
        li {
            border-bottom: 1px solid #393939;
            padding: 4px;
            ul li {
                border: 0;
            }
        }
    }
}
div.customizable-column--selector {
    position: absolute;
    right: 1rem;
    top: -3rem;
    > .customizable-column--selector--option {
        padding: 10px;
        .ant-checkbox-wrapper {
            width: 100%;
        }
    }
}
div.customizable-column--selector--dropdown {
    ul.ant-select-dropdown-menu-vertical {
        max-height: 100% !important;
    }
}
.ant-table-tbody > tr.ant-table-row-selected td {
    background-color: #4f596633 !important;
}
