.color_ActiveColor {
  color: var(--tc--active-color) !important;
  fill: var(--tc--active-color) !important;
}

.bg_ActiveColor {
  background-color: var(--tc--active-color) !important;
}

.border_ActiveColor {
  border-color: var(--tc--active-color) !important;
}

.color_BaseColor {
  color: var(--tc--base-color) !important;
  fill: var(--tc--base-color) !important;
}

.bg_BaseColor {
  background-color: var(--tc--base-color) !important;
}

.border_BaseColor {
  border-color: var(--tc--base-color) !important;
}

.color_TextColor {
  color: var(--tc--text-color) !important;
  fill: var(--tc--text-color) !important;
}

.bg_TextColor {
  background-color: var(--tc--text-color) !important;
}

.border_TextColor {
  border-color: var(--tc--text-color) !important;
}

.color_Neutral1Color {
  color: var(--tc--neutral1-color) !important;
  fill: var(--tc--neutral1-color) !important;
}

.bg_Neutral1Color {
  background-color: var(--tc--neutral1-color) !important;
}

.border_Neutral1Color {
  border-color: var(--tc--neutral1-color) !important;
}

.color_Neutral2Color {
  color: var(--tc--neutral2-color) !important;
  fill: var(--tc--neutral2-color) !important;
}

.bg_Neutral2Color {
  background-color: var(--tc--neutral2-color) !important;
}

.border_Neutral2Color {
  border-color: var(--tc--neutral2-color) !important;
}

.color_Neutral3Color {
  color: var(--tc--neutral3-color) !important;
  fill: var(--tc--neutral3-color) !important;
}

.bg_Neutral3Color {
  background-color: var(--tc--neutral3-color) !important;
}

.border_Neutral3Color {
  border-color: var(--tc--neutral3-color) !important;
}

.color_Neutral4Color {
  color: var(--tc--neutral4-color) !important;
  fill: var(--tc--neutral4-color) !important;
}

.bg_Neutral4Color {
  background-color: var(--tc--neutral4-color) !important;
}

.border_Neutral4Color {
  border-color: var(--tc--neutral4-color) !important;
}

.color_Neutral5Color {
  color: var(--tc--neutral5-color) !important;
  fill: var(--tc--neutral5-color) !important;
}

.bg_Neutral5Color {
  background-color: var(--tc--neutral5-color) !important;
}

.border_Neutral5Color {
  border-color: var(--tc--neutral5-color) !important;
}

.color_SuccessColor {
  color: var(--tc--success-color) !important;
  fill: var(--tc--success-color) !important;
}

.bg_SuccessColor {
  background-color: var(--tc--success-color) !important;
}

.border_SuccessColor {
  border-color: var(--tc--success-color) !important;
}

.color_ErrorColor {
  color: var(--tc--error-color) !important;
  fill: var(--tc--error-color) !important;
}

.bg_ErrorColor {
  background-color: var(--tc--error-color) !important;
}

.border_ErrorColor {
  border-color: var(--tc--error-color) !important;
}

.color_NewsColor {
  color: var(--tc--news-color) !important;
  fill: var(--tc--news-color) !important;
}

.bg_NewsColor {
  background-color: var(--tc--news-color) !important;
}

.border_NewsColor {
  border-color: var(--tc--news-color) !important;
}

.color_SocialsColor {
  color: var(--tc--socials-color) !important;
  fill: var(--tc--socials-color) !important;
}

.bg_SocialsColor {
  background-color: var(--tc--socials-color) !important;
}

.border_SocialsColor {
  border-color: var(--tc--socials-color) !important;
}

.color_TwitterColor {
  color: var(--tc--twitter-color) !important;
  fill: var(--tc--twitter-color) !important;
}

.bg_TwitterColor {
  background-color: var(--tc--twitter-color) !important;
}

.border_TwitterColor {
  border-color: var(--tc--twitter-color) !important;
}

.color_FundamentalValueColor {
  color: var(--tc--fundamental-value-color) !important;
  fill: var(--tc--fundamental-value-color) !important;
}

.bg_FundamentalValueColor {
  background-color: var(--tc--fundamental-value-color) !important;
}

.border_FundamentalValueColor {
  border-color: var(--tc--fundamental-value-color) !important;
}

.color_FundamentalGrowthColor {
  color: var(--tc--fundamental-growth-color) !important;
  fill: var(--tc--fundamental-growth-color) !important;
}

.bg_FundamentalGrowthColor {
  background-color: var(--tc--fundamental-growth-color) !important;
}

.border_FundamentalGrowthColor {
  border-color: var(--tc--fundamental-growth-color) !important;
}

.color_FundamentalIncomeColor {
  color: var(--tc--fundamental-income-color) !important;
  fill: var(--tc--fundamental-income-color) !important;
}

.bg_FundamentalIncomeColor {
  background-color: var(--tc--fundamental-income-color) !important;
}

.border_FundamentalIncomeColor {
  border-color: var(--tc--fundamental-income-color) !important;
}

.color_BullishColor {
  color: var(--tc--bullish-color) !important;
  fill: var(--tc--bullish-color) !important;
}

.bg_BullishColor {
  background-color: var(--tc--bullish-color) !important;
}

.border_BullishColor {
  border-color: var(--tc--bullish-color) !important;
}

.color_BearishColor {
  color: var(--tc--bearish-color) !important;
  fill: var(--tc--bearish-color) !important;
}

.bg_BearishColor {
  background-color: var(--tc--bearish-color) !important;
}

.border_BearishColor {
  border-color: var(--tc--bearish-color) !important;
}

.color_BackgroundColor {
  color: var(--tc--background-color) !important;
  fill: var(--tc--background-color) !important;
}

.bg_BackgroundColor {
  background-color: var(--tc--background-color) !important;
}

.border_BackgroundColor {
  border-color: var(--tc--background-color) !important;
}

.color_ModerateColor {
  color: var(--tc--moderate-color) !important;
  fill: var(--tc--moderate-color) !important;
}

.bg_ModerateColor {
  background-color: var(--tc--moderate-color) !important;
}

.border_ModerateColor {
  border-color: var(--tc--moderate-color) !important;
}


.tc-presto {
  --ActiveColor: var(--tc--active-color);
  --BaseColor: var(--tc--base-color);
  --TextColor: var(--tc--text-color);
  --Neutral1Color: var(--tc--neutral1-color);
  --Neutral2Color: var(--tc--neutral2-color);
  --Neutral3Color: var(--tc--neutral3-color);
  --Neutral4Color: var(--tc--neutral4-color);
  --Neutral5Color: var(--tc--neutral5-color);
  --SuccessColor: var(--tc--success-color);
  --ErrorColor: var(--tc--error-color);
  --NewsColor: var(--tc--news-color);
  --SocialsColor: var(--tc--socials-color);
  --TwitterColor: var(--tc--twitter-color);
  --FundamentalValueColor: var(--tc--fundamental-value-color);
  --FundamentalGrowthColor: var(--tc--fundamental-growth-color);
  --FundamentalIncomeColor: var(--tc--fundamental-income-color);
  --BullishColor: var(--tc--bullish-color);
  --BearishColor: var(--tc--bearish-color);
  --BackgroundColor: var(--tc--background-color);
  --ModerateColor: var(--tc--moderate-color);

}

/*====================================== App Font Start ======================*/

.tc-presto .tc-pop-text {
    font-family: var(--tc--font-family);
}
/* Angular Material components should not be scoped to descendants of tc-presto. */
.mat-option, 
.mat-slide-toggle-content, 
.mat-checkbox,
.mat-tab-label, 
.mat-tab-link {
    font-family: var(--tc--font-family);
}
/* Angular 16 classes */
.mat-mdc-option, 
.mat-slide-toggle-content, 
.mat-mdc-checkbox,
.mat-mdc-tab, 
.mat-tab-link {
    font-family: var(--tc--font-family);
}
/*====================================== App Font End ======================*/

/*====================================== App Color Reset start ======================*/
.tc-presto {
    li, p, input, textarea, select, td, th, button, div, h1, legend {
        font-family: var(--tc--font-family);
        font-size: 0.875rem;
        color: var(--tc--text-color);
    }
    h2, h3, h4, h5 {
        font-family: var(--tc--font-family);
    }
}

/*====================================== App Color Reset end ======================*/

/*====================================== App Defaults start ======================*/
.tc-presto .error-text-color {
    color: red;
}
/*====================================== App Defaults end ======================*/

/*====================================== ClearFix start ======================*/
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/*====================================== ClearFix end ========================*/

.tc-presto .tc-neutral3-background {
   background-color: var(--tc--neutral3-color);
}

.tc-presto .tc-accent-background {
    background: var(--tc--neutral4-color);
}

.tc-presto .tc-accent2-background {
    background-color: var(--tc--neutral4-color);
}

.tc-presto .tc-title-text {
    font-size: 1.5rem;
    font-weight: 300;
}
.tc-presto .tc-title-variant-text {
    font-size: 1.5rem;
    font-weight: 600;
}
.tc-presto .tc-subtitle1-text {
    font-size: 1.375rem;
    font-weight: normal;
}
.tc-presto .tc-subtitle1-variant-text {
    font-size: 1.375rem;
    font-weight: 600;
}
.tc-presto .tc-subtitle2-text {
    font-size: 1.125rem;
    font-weight: normal;
}
.tc-presto .tc-subtitle2-variant-text {
    font-size: 1.125rem;
    font-weight: 600;
}
.tc-presto .tc-subtitle3-text {
    font-size: 1rem;
    font-weight: normal;
}
.tc-presto .tc-subtitle3-variant-text {
    font-size: 1rem;
    font-weight: 600;
}
.tc-presto .tc-normal-text {
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.375rem;
}
.tc-presto .tc-normal-text-color {
    color: var(--tc--text-color);
}
.tc-presto .tc-normal-variant-text {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.375rem;
}
.tc-presto .tc-note1-text {
    font-size: 0.8125rem;
    font-weight: normal;
}
.tc-presto .tc-note1-variant-text {
    font-size: 0.8125rem;
    font-weight: 600;
}
.tc-presto .tc-note2-text {
    font-size: 0.75rem;
    font-weight: normal;
}
.tc-presto .tc-note2-variant-text {
    font-size: 0.75rem;
    font-weight: 600;
}
.tc-presto .tc-note3-text {
    font-size: 0.6875rem;
    font-weight: normal;
}
.tc-presto .tc-note3-variant-text {
    font-size: 0.6875rem;
    font-weight: 600;
}

.tc-presto .tc-link {
    text-decoration: none;
}

.tc-presto .tc-link, .tc-presto .tc-link * {
    color: var(--tc--link-color);
}

.tc-presto .tc-link, .tc-presto .tc-link svg {
    stroke: var(--tc--link-color);
}

.tc-presto .tc-link-color {
    color: var(--tc--link-color);
}

.tc-link-background {
  background-color: var(--tc--active-color);
}

.tc-presto .tc-link:hover {
    text-decoration: underline;
}

.tc-presto .tc-link:hover, .tc-presto .tc-link:hover * {
    color: var(--tc--link-hover-color);
}

.tc-presto .tc-link:hover, .tc-presto .tc-link:hover svg {
    stroke: var(--tc--link-hover-color);
}

.tc-presto .mat-menu-item.kebab-menu-item:focus:enabled *,
.tc-presto .mat-menu-item.hamburger-menu-item:focus:enabled * {
    color: var(--tc--text-color);
}

.tc-presto .mat-menu-item.kebab-menu-item:hover:enabled *,
.tc-presto .mat-menu-item.hamburger-menu-item:hover:enabled * {
    color: var(--tc--neutral5-color);
}

.tc-presto .tc-active-hover-background:hover, .tc-presto .tc-active-focus-background:focus {
    background-color: var(--tc--active-color);
    text-decoration: none;
}

.tc-presto .tc-active-hover-background:hover *, .tc-presto .tc-active-focus-background:focus * {
    color: var(--tc--neutral5-color);
    stroke: var(--tc--neutral5-color);
}

.tc-presto .tc-active-hover:hover {
    color: var(--tc--active-color);
    text-decoration: none;
}

.tc-presto .tc-active {
    color: var(--tc--active-color);
    text-decoration: none;
}

.tc-presto .tc-disabled-text {
    opacity: 0.4;
}
.tc-presto .tc-neutral-text {
    color: var(--tc--neutral1-color);
}

.tc-presto .tc-neutral2-border {
    border-color: var(--tc--border-color);
}

.tc-presto .tc-neutral3-border {
    border-color: var(--tc--light-border-color);
}

/* TODO: This rule has an extra selector (.tc-presto.tc-normal-background) that could be avoided
    if we could upgrad Angular Material, which would probably involve upgrading Angular.
 */
.tc-presto .tc-normal-background, .tc-presto.tc-normal-background {
    background-color: var(--tc--background-color);
}

.tc-presto .tc-bullish-background {
    background: var(--tc--bullish-color);
}

.tc-presto .tc-bearish-background {
    background: var(--tc--bearish-color);
}

.tc-presto .tc-undefined-background {
    background: #000000;
}

.tc-presto .tc-neutral-background {
    background: var(--tc--neutral1-color);
}

.tc-presto .tc-error-background {
    color: var(--tc--error-color);
}

.tc-presto .tc-border-style {
    border: 1px solid var(--tc--light-border-color);
}

.tc-presto .tc-normal-divider-style {
    border: 0.5px solid var(--tc--light-border-color);
}

.tc-presto .tc-bullish-border {
    border-color: var(--tc--bullish-color);
    outline-color: var(--tc--bullish-color);
}

.tc-presto .tc-bearish-border {
    border-color: var(--tc--bearish-color);
    outline-color: var(--tc--bearish-color);
}

.tc-presto .tc-neutral-border {
    border-color: var(--tc--neutral1-color);
    outline-color: var(--tc--neutral1-color);
}

.tc-presto .tc-bullish-box-shadow {
    box-shadow: 0 0 0 0.0625rem var(--tc--bullish-color);
}

.tc-presto .tc-bearish-box-shadow {
    box-shadow: 0 0 0 0.0625rem var(--tc--bearish-color);
}

.tc-presto .tc-neutral-box-shadow {
    box-shadow: 0 0 0 0.0625rem var(--tc--neutral1-color);
}

.tc-presto .tc-success {
    color: var(--tc--success-color) !important;
}

.tc-presto .tc-bullish {
    color: var(--tc--bullish-color) !important;
}

.tc-presto .tc-bearish {
    color: var(--tc--bearish-color) !important;
}

.tc-presto .tc-bullish-inverse {
    color: var(--tc--neutral5-color);
}

.tc-presto .tc-bearish-inverse {
    color: var(--tc--neutral5-color);
}

.tc-presto .tc-main-border-color {
    border-color: var(--tc--border-color);
}

.tc-presto .tc-light-border-color{
    border-color: var(--tc--neutral4-color);
}

.tc-presto .tc-icon-bg-color {
    background-color: var(--tc--neutral2-color);
}

.tc-presto .tc-light-background {
    background-color: var(--tc--neutral3-color);
}

.tc-presto .tc-light-background-color {
    background: var(--tc--neutral4-color);
}

.tc-presto .tc-select-color {
    color: var(--tc--neutral5-color);
}

.tc-presto .tc-bold {
    font-weight: bold;
}

.tc-presto .tc-uppercase {
    text-transform: uppercase;
}

.tc-presto .mat-ripple-element {
    background-color: var(--tc--active-color) !important;
}

.tc-presto .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
    opacity: 0.26;
}

.tc-presto {
    .mat-checkbox-checked.mat-accent .mat-checkbox-background,
    .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
    .mat-checkbox .mat-ripple-element {
        background-color: var(--tc--active-color) !important;
    }

    .mat-checkbox-frame,
    .mat-radio-outer-circle {
        border-color: var(--tc--base-color);
    }

    .mat-checkbox {
        .mat-checkbox-checkmark-path {
            stroke: var(--tc--neutral5-color) !important;
        }

        .mat-checkbox-mixedmark {
            background-color: var(--tc--neutral5-color) !important;
        }
    }

    .mat-checkbox {
        .mat-mdc-checkbox-checkmark-path {
            stroke: var(--tc--neutral5-color) !important;
        }

        .mat-checkbox-mixedmark {
            background-color: var(--tc--neutral5-color) !important;
        }
    }

    .mat-radio-button.mat-accent.mat-radio-checked {
        .mat-radio-outer-circle {
            border-color: var(--tc--active-color);
        }
    }

    .mat-radio-button.mat-accent {
        .mat-radio-inner-circle {
            background-color: var(--tc--active-color);
        }
    }
}

/* New Angular 16 classes */
.tc-presto {
    .mat-mdc-checkbox-checked.mat-accent .mdc-checkbox__background,
    .mat-mdc-checkbox-indeterminate.mat-accent .mdc-checkbox__background,
    .mat-mdc-checkbox .mat-ripple-element {
        background-color: var(--tc--active-color) !important;
    }

    .mat-mdc-checkbox-frame,
    .mdc-radio__outer-circle {
        border-color: var(--tc--base-color);
    }

    .mat-mdc-checkbox {
        .mdc-checkbox__checkmark-path {
            stroke: var(--tc--neutral5-color) !important;
        }

        .mat-mdc-checkbox-mixedmark {
            background-color: var(--tc--neutral5-color) !important;
        }
    }

    .mat-mdc-checkbox {
        .mat-mdc-checkbox-checkmark-path {
            stroke: var(--tc--neutral5-color) !important;
        }

        .mat-mdc-checkbox-mixedmark {
            background-color: var(--tc--neutral5-color) !important;
        }
    }

    .mat-mdc-radio-button.mat-accent.mat-radio-checked {
        .mdc-radio__outer-circle {
            border-color: var(--tc--active-color);
        }
    }

    .mat-mdc-radio-button.mat-accent {
        .mdc-radio__inner-circle {
            background-color: var(--tc--active-color);
        }
    }
}


html[dir="rtl"] .tc-flip-icon {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
} 

/*====================================== Common Components Start ===========================*/
.tc-presto {
    
  /*====================================== Buttons start ============================*/
.tc-main-navigation-button {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tc--text-color);
    padding: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.5s;

    &:hover {
        background-color: var(--tc--neutral2-color);
        transition: background-color 150ms;
    }
}

.tc-primary-button, .tc-standard-button {
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 1rem;
    height: 2.25rem;
    line-height: 1;
}

.tc-tag-button,
.tc-taglink1-button,
.tc-taglink2-button,
.tc-primary-button,
.tc-standard-button {
    transition: 0.5s;
}

.tc-tag-button:hover,
.tc-taglink1-button:hover,
.tc-taglink2-button:hover,
.tc-primary-button:hover:enabled,
.tc-standard-button:hover:enabled {
    transition: 150ms;
}

.material-icons.tc-primary-button,
.material-icons.tc-standard-button {
    text-transform: none;
    padding: 0;
}

.tc-primary-button {
    background-color: var(--tc--primary-button-background-color);
    color: var(--tc--primary-button-text-color);
    * {
        color: var(--tc--primary-button-text-color);
    }
    border-radius: 0.25rem;
    border: 0.0625rem solid var(--tc--primary-button-background-color);
}
.tc-primary-button:hover:enabled {
    background-color: lighten(var(--tc--primary-button-background-color), 4%);
    border-color: lighten(var(--tc--primary-button-background-color), 4%);
}

.tc-standard-button {
    background-color: var(--tc--standard-button-background-color);
    color: var(--tc--standard-button-text-color);
    * {
        color: var(--tc--standard-button-text-color);
    }
    border-radius: 0.25rem;
    border: 0.0625rem solid var(--tc--standard-button-border-color);
}
.tc-standard-button:hover:enabled {
    background-color: fade(var(--tc--standard-button-text-color), 4%);
    color: var(--tc--standard-button-text-color);
    * {
        color: var(--tc--standard-button-text-color);
    }
}

.tc-primary-button:disabled,
.tc-standard-button:disabled,
.tc-taglink1-button:disabled,
.tc-taglink2-button:disabled {
    opacity: 0.38;
    cursor: auto;
}

.tc-primary-button:focus,
.tc-standard-button:focus {
    outline: none;
    border: 0.125rem solid var(--tc--base-color);
}
.tc-toggle-button {
    width: 5.96rem;
    height: 2.125rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    border: 0.0625rem solid var(--tc--neutral2-color);
    color: fade(var(--tc--base-color), 60%);
    background: var(--tc--neutral5-color);
    border-radius: 0.375rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
        background: var(--tc--neutral4-color);
        border-color: var(--tc--neutral2-color);
        color: var(--tc--base-color);
    }
    &:active {
        background: var(--tc--neutral3-color);
        border-color: var(--tc--neutral2-color);
        color: var(--tc--base-color);
    }
    &:focus {
        border: 0.125rem solid var(--tc--base-color);
    }
    &.tc-toggle-button-selected {
        background: var(--tc--neutral2-color);
        border-color: var(--tc--neutral2-color);
        color: var(--tc--base-color);
    }
    &.tc-toggle-button-selected:focus {
        border: 0.125rem solid var(--tc--base-color);
    }
}

.tc-tag-button {
    background-color: var(--tc--tag-button-background-color);
    color: var(--tc--tag-button-text-color);
}
.tc-tag-button-selected, .tc-tag-button:hover {
    background-color: var(--tc--tag-button-hover-selected-background-color);
    color: var(--tc--tag-button-hover-selected-text-color);
}

.tc-taglink1-button {
    background-color: var(--tc--tag-link1-background-color);
    color: var(--tc--tag-link1-text-color);
    * {
        color: var(--tc--tag-link1-text-color);
    }
}
.tc-taglink1-button:hover:enabled {
    background-color: var(--tc--tag-link1-hover-background-color);
    color: var(--tc--tag-link1-hover-text-color);
    * {
        color: var(--tc--tag-link1-hover-text-color);
    }
}

.tc-taglink2-button {
    background-color: var(--tc--tag-link2-background-color);
    color: var(--tc--tag-link2-text-color);
    * {
        color: var(--tc--tag-link2-text-color);
    }
}
.tc-taglink2-button:hover:enabled {
    background-color: var(--tc--tag-link2-hover-background-color);
    color: var(--tc--tag-link2-hover-text-color);
    * {
        color: var(--tc--tag-link2-hover-text-color);
    }
}

.tc-primary-tag, .tc-secondary-tag {
    border-radius: 0.125rem;
    white-space: break-spaces;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 1;
}

.tc-primary-tag {
    background-color: var(--tc--neutral1-color);
    color: var(--tc--neutral5-color);
    padding: 0.25rem 0.5rem;
}

.tc-secondary-tag {
    background-color: var(--tc--neutral3-color);
    color: var(--tc--base-color);
    padding: 0.125rem 0.5rem;
}

.tc-scroll-top-button-container button {
    color: var(--tc--base-color) !important;
}

.tc-scroll-top-button {
    box-shadow: 0 0.625rem 1.25rem 0 var(--tc--neutral2-color);
}

.tc-scroll-top-button-container {
    text-align: center;
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    right: 2.5rem;
    bottom: 1rem !important;
    opacity: 0.8;
}

.tc-scroll-top-button-container:hover {
    opacity: 1;
}

.tc-scroll-top-button {
    display: inline-block;
    height: 3.125rem;
    width: 3.125rem;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}

.tc-scroll-top-button i {
    font-size: 2.25rem;
    line-height: 3.125rem;
}
/*====================================== Buttons end ========================*/
/* used in TC News, Conductor, SB, TI, EI, PV, EOD */

.tc-primary-button:hover:enabled {
    background-color: var(--tc--primary-button-background-color);
    border-color: var(--tc--primary-button-background-color);
    opacity: 0.96; /* sort of equivalent to lighten(4%) */
}

.tc-standard-button:hover:enabled {
    background-color: var(--tc--neutral4-color);
}

.tc-toggle-button {
    color: var(--tc--base-color);
    opacity: 0.6;

    &:hover {
        opacity: 1;
    }

    &:active {
        opacity: 1;
    }

    &.tc-toggle-button-selected {
        opacity: 1;
    }
}



}
/*====================================== Common Components End =============================*/

.tc-layover {
    opacity: 0.2;
    background-color: var(--tc--base-color);
    z-index: 50;
}

.tc-neutral2-background {
    background: var(--tc--neutral2-color);
}

.tc-tab-button-beak-neutral:before {
    border-top-color: var(--tc--neutral3-color);
}

.tc-tab-button-beak-neutral:after {
    border-top-color: var(--tc--neutral3-color);
}

.tc-tab-button-beak-bullish:before, .tc-tab-button-beak-bullish:after {
	border-top-color: var(--tc--bullish-color);
}

.tc-tab-button-beak-bearish:before, .tc-tab-button-beak-bearish:after {
	border-top-color: var(--tc--bearish-color);
}

.tc-slider-icon {
    color: var(--tc--base-color);
    opacity: 0.5;
}

button:disabled .tc-slider-icon {
    opacity: 0.1;
}

/*======================================== Datepicker Start ================================*/

.mat-datepicker-content {
    background: var(--tc--neutral5-color);
    box-shadow: 0 6px 12px 0 rgba(red(var(--tc--box-shadow-color)), green(var(--tc--box-shadow-color)), blue(var(--tc--box-shadow-color)), 0.2);
}
.mat-calendar-table-header-divider::after {
    background-color: var(--tc--base-color);
}

.mat-datepicker-content * {
    color: var(--tc--base-color);
}

.mat-datepicker-content .mat-calendar-arrow {
    border-top-color: var(--tc--base-color);
}

.mat-datepicker-content .mat-calendar-previous-button, .mat-datepicker-content .mat-calendar-next-button {
    color: var(--tc--base-color);
}

.mat-datepicker-content table .mat-calendar-body-disabled {
    color: var(--tc--border-color);
}

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    color: var(--tc--base-color);
    opacity: 0.38;
}

.mat-datepicker-content table .mat-calendar-body-today {
    color: var(--tc--active-color);
}

.mat-datepicker-content table .mat-calendar-body-selected {
    background: var(--tc--active-color);
    color: var(--tc--neutral5-color) !important;
}

/* This selector is copied from Angular Material's datepicker to identify when a day-of-month should get focused/hover treatment
 (Angular Material v10) */
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected), 
.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected), 
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    background-color: var(--tc--neutral2-color) !important;
}

.mat-calendar-controls .mat-button-focus-overlay {
    background-color: var(--tc--base-color) !important;
}
/*======================================== Datepicker End ================================*/

/* MOTION */

@keyframes fadeIn {
    from {
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
    }
    to {
        opacity: 1;
    }
}

.tc-fade-in {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}

/* fade in and up animation */
@keyframes fadeInUp {
    from {
        transform: translate3d(0,2.5rem,0);
    }
    to {
        transform: unset;
        opacity: 1;
    }
}

.tc-fade-in-up {
    opacity: 0;
    animation-name: fadeInUp;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}

/* fade in left animation */
@keyframes fadeInLeft {
    from {
        transform: translate3d(2.5rem,0,0);
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        transform: translate3d(2.5rem,0,0);
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.tc-fade-in-left {
    opacity: 0;
    animation-name: fadeInLeft;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}

/* fade in right animation */
@keyframes fadeInRight {
    from {
        transform: translate3d(-2.5rem,0,0);
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInRight {
    from {
        transform: translate3d(-2.5rem,0,0);
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.tc-fade-in-right {
    opacity: 0;
    animation-name: fadeInRight;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}

.tc-action-control {
    opacity: 0.80;
    transition: 300ms;
}
.tc-action-control:hover {
    opacity: 1;
    cursor: pointer;
    transition: 150ms;
}