:root {
  --bg-white: #ffffff;
  --bg-whitesmoke: #eef5f7;
  --bg-lightgrey: #dae6ec;
  --mt-dark: #505b61;
  --mt-grey: #b9bdc0;
  --hc-blue: #396087;
  --hc-green: #b5be00;
  --hc-orange: #ed7c3a;
  --brand: #cc0066;
  --in3-font-family: lexend;
  /* Merchant PORTAL
  /* Login */
--in3-secondary: var(--mt-dark);
--in3-secondary-darker: var(--mt-dark);
--in3-tertiary: var(--brand);
--clr-p1-color: var(--mt-dark);
--clr-forms-text-color: var(--mt-dark);
--in3-danger: var(--hc-orange);
  --in3-merchant-login-background: var(--bg-whitesmoke);
  --in3-merchant-login-panel: #fafafa;
  --in3-merchant-login-welcome-header: var(--mt-dark, #102f76);
  --in3-merchant-login-portal-text: var(--mt-dark, #102f76);
  --clr-dropdown-active-text-color: var(--brand);
  /* Sidebar */
  --in3-merchant-logo-background: var(--bg-whitesmoke);
  --in3-merchant-sidebar-portal-text: #19197c;
  --in3-merchant-sidebar-background: var(--bg-whitesmoke);
  --in3-merchant-sidebar-menuitem: var(--mt-dark, #102f76);
  --in3-merchant-sidebar-menuitem-active: var(--brand, #713dff);
  --in3-merchant-sidebar-menuitem-hover: var(--brand, #713dff);
  --in3-merchant-sidebar-menuitem-hover-text: white;
  --in3-merchant-language-menu-background: var(--bg-white);
  --in3-merchant-language-menu-menuitem: var(--mt-dark, #102f76);
  --in3-merchant-language-menu-menuitem-hover: var(--bg-white, #102f76);
  --in3-merchant-language-menu-menuitem-hover-bg: var(--brand, #713dff);
  /* Sidebar Onboarding */
  --in3-merchant-sidebar-onboarding-background: #c8b6fc;
  --in3-merchant-sidebar-onboarding-text: white;
  --in3-merchant-sidebar-onboarding-button: var(--brand, #713dff);
  --in3-merchant-sidebar-onboarding-button-text: white;
  --in3-merchant-sidebar-onboarding-button-hover-text: white;
  --in3-merchant-sidebar-onboarding-button-hover-bg: var(--brand, #713dff);
  /* Onboarding steps */
  --in3-merchant-onboarding-steps: var(--hc-blue, #713dff);
  --in3-merchant-onboarding-steps-not-fill: #cacee4;
  --in3-merchant-onboarding-steps-upload-button-text: var(--brand, #713dff);
  --in3-merchant-onboarding-steps-upload-button: var(--brand, #713dff);
  --in3-merchant-onboarding-steps-upload-button-hover-text: white;
  --in3-merchant-onboarding-steps-upload-button-hover: var(--brand, #713dff);
  --in3-merchant-onboarding-steps-uploaded-file: var(--brand, #713dff);
  --in3-merchant-onboarding-steps-uploaded-file-text: white;
  --in3-merchant-onboarding-payment-card-surrounding: var(--bg-lightgrey, #713dff);
  --in3-merchant-onboarding-payment-card-payment-body: #ffffff;
  --in3-merchant-onboarding-payment-pay-color: var(--hc-orange, #713dff);
  --in3-merchant-onboarding-payment-card-term-paid: var(--hc-blue, #713dff);
  --in3-merchant-onboarding-payment-card-term-open: #f0ebff;
  --in3-merchant-onboarding-payment-card-term-overdue: #ff1454;
  --in3-merchant-onboarding-payment-card-primary-text: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-card-secondary-text: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-title: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-body: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-input-text: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-input-border: var(--mt-dark, #713dff);
  --in3-merchant-onboarding-payment-checkbox-text: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-checkbox-bg: var(--brand, #713dff);
  --in3-merchant-onboarding-payment-checkbox-btn: var(--mt-dark, #102f76);
  --in3-merchant-onboarding-payment-category-selector: var(--brand, #713dff);
  --in3-merchant-onboarding-payment-category-selector-sub: var(--brand, #713dff);
  /* Panel-BG Transaction page (Primary) */
  --in3-merchant-dashboard-background: var(--bg-white, #e1e1e1);
--in3-merchant-panel-date-color-hover: var(--bg-white);
  --in3-merchant-panel-date-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-date-border-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-date-hover: var(--brand, #102f76);
  --in3-merchant-panel-date-dark-color-hover: var(--bg-white) !important;
  --in3-merchant-panel-card-block-background: white;
  --in3-merchant-panel-card-block-text-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-card-block-text-weight: 800;
  --in3-merchant-panel-card-block-header-color: var(--mt-grey, #102f76);
  --in3-merchant-panel-card-block-header-weight: 500;
  --in3-merchant-panel-card-header-text-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-card-shadow: darkgray;
  --in3-merchant-panel-table-border: transparent;
  --in3-merchant-panel-table-background: white;
  --in3-merchant-panel-table-row-background: white;
  --in3-merchant-panel-table-text-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-table-header-text-color: white;
  --in3-merchant-panel-table-header-background: #284383;
  --in3-merchant-panel-table-secondary-border: transparent;
  --in3-merchant-panel-table-secondary-background: white;;
  --in3-merchant-panel-table-secondary-row-background: white;
  --in3-merchant-panel-table-secondary-text-color: var(--mt-dark, #102f76);
  --in3-merchant-panel-table-secondary-header-text-color: white;
  --in3-merchant-panel-table-secondary-header-background: #284383;
  /* Merchant Graph General */
  --in3-merchant-graph-text: var(--mt-dark);
  --in3-merchant-graph-gridlines: transparent;
  /* Merchant Graph Revenue */
  --in3-merchant-graph-revenue-primary: #3367EB42;
  --in3-merchant-graph-revenue-primary-border: #0048FF;
  --in3-merchant-graph-revenue-line: var(--hc-blue);
  --in3-merchant-graph-revenue-line-fill: var(--bg-lightgrey);
  --in3-merchant-graph-revenue-line-dot: var(--brand);
  --in3-merchant-graph-revenue-line-dot-fill: var(--brand);
  /* Merchant Graph Acceptance */
  --in3-merchant-graph-acceptance-helper: var(--brand, #713dff);
  --in3-merchant-graph-acceptance-helper-hover: var(--brand, #713dff);
  --in3-merchant-graph-acceptance-paid: #799dfa;
  --in3-merchant-graph-acceptance-recovery-success-bg: #799DFA;
  --in3-merchant-graph-acceptance-recovery-success-pt: #0048FF;
  --in3-merchant-graph-acceptance-ftnp: #EBBA3499;
  --in3-merchant-graph-acceptance-recovery-failed: #EB833499;
  --in3-merchant-graph-acceptance-rejected: #d94152;
  /* Merchant Graph Acceptance pie */
  --in3-merchant-graph-acceptance-pie-accepted: #33ebc7;
  --in3-merchant-graph-acceptance-pie-rejected: #D94152FF;
  /* Depends on the styling u might need to make some values transparent /
  --in3-merchant-graph-acceptance-tab-background: #c4c4c4;
  --in3-merchant-graph-acceptance-tab-selected-background: white;
  --in3-merchant-graph-acceptance-tab-btn-selected: transparent;
  --in3-merchant-graph-acceptance-tab-btn-text-hover: blue;
  --in3-merchant-graph-acceptance-tab-btn-not-selected: transparent;
  --in3-merchant-graph-acceptance-tab-btn-text-selected: transparent;
  --in3-merchant-graph-acceptance-tab-btn-text-not-selected: transparent;
  / Merchant Graph Payouts */
  --in3-merchant-graph-payouts-today-bar-color: var(--brand, #713dff);
  --in3-merchant-graph-payouts-today-bar-hover: var(--brand, #713dff);
  --in3-merchant-graph-payouts-selected-bar-color: var(--brand, #713dff);
  --in3-merchant-graph-payouts-selected-bar-hover: var(--brand, #713dff);
  --in3-merchant-graph-payouts-bar: #102E75E5;
  --in3-merchant-graph-payouts-bar-hover: var(--mt-dark, #102f76);
  --in3-merchant-graph-acceptance-tab-btn-selected: var(--brand);
  --in3-merchant-graph-acceptance-tab-btn-not-selected: var(--bg-whitesmoke);
  --in3-merchant-graph-acceptance-tab-btn-text-hover: inherit;
  --clr-btn-success-color: var(--bg-white);
  --clr-btn-inverse-color: var(--mt-dark);
  /* Content Page */
  --in3-merchant-content-background: var(--bg-white, #e1e1e1);
  --in3-merchant-content-header-text-color: var(--mt-dark, #102f76);
  --in3-merchant-content-tab-color: var(--mt-dark, #102f76);
  --in3-merchant-content-tab-hover-color: var(--mt-dark, #102f76);
  --in3-merchant-content-text-color: var(--mt-dark, #713dff);
  --in3-merchant-content-text-color-secondary: var(--mt-dark, #102f76);
  --in3-merchant-content-card-background: white;
  --in3-merchant-content-card-btn-hover: var(--brand, #713dff);;
  --in3-merchant-content-card-btn-hover-text: var(--bg-white, #102f76);
  --in3-merchant-content-card-text-and-border: var(--mt-dark, #102f76);
  --in3-merchant-content-card-input-placeholder: var(--mt-grey, #713dff);
  /* buttons */
  --in3-merchant-button-primary: var(--brand, #713dff);
  --in3-merchant-button-primary-text: var(--bg-white);
  --in3-merchant-button-primary-hover: var(--brand, #713dff);
  --in3-merchant-button-primary-hover-text: var(--bg-white, #102f76);
  /* buttons Outline */
  --in3-merchant-button-outline: var(--brand, #713dff);
  --in3-merchant-button-outline-text: var(--brand, #713dff);
  --in3-merchant-button-outline-hover: var(--brand, #713dff);
  --in3-merchant-button-outline-hover-text: var(--bg-white, #102f76);
  /* Modal */
  --in3-merchant-modal-background: white;
  --in3-merchant-modal-backdrop: gray;
  --in3-merchant-modal-title-color: var(--mt-dark, #102f76);;
  --in3-merchant-modal-body-color: var(--mt-dark);
  --in3-merchant-modal-body-header: var(--mt-dark, #102f76);;
  /* Modal Inputs */
  --in3-merchant-modal-input-border: var(--mt-dark, #102f76);;
  --in3-merchant-modal-input-placeholder: var(--mt-dark, #102f76);;
  --in3-merchant-modal-input-text: var(--mt-dark, #102f76);;
  --in3-merchant-modal-input-label: var(--mt-dark, #102f76);;
  /* END merchant PORTAL */
}
.date-inverse.dropdown button {
    color: var(--mt-dark);
}
.date-inverse .clr-input-group input {
    color: var(--mt-dark);
}
.card-block-color {
    box-shadow: 0px 3px 7px 0px var(--in3-merchant-panel-card-shadow, transparent)!important;
}
.extra-contact-wrapper {
    background-color: var(--bg-lightgrey);
    backdrop-filter: none!important;
}
#language-selector-holder {
    width: 150px;
}
.clr-control-container {
    background-color: var(--bg-white);
}
.clr-input-wrapper input:disabled {
    background-color: var(--bg-lightgrey);
    border-radius: 0%!important;
}
.onoff {
    background-color: var(--bg-lightgrey);
    color: var(--bg-white)!important;
}
.category-row-text-high-title.text-checked span {
    color: var(--bg-white)!important;
}
.category-wrapper .v2.category-row-container.checked-border.category-type-product {
    background-color: var(--brand);
}
/* major changes */
.title.sidebar-portal-text-color{
  background-color: #396087;
  border-radius: 5px;
  color: white !important;
  font-size: large;
  line-height: normal;
  text-align: center;
  margin: 0;
}
.sidebar-container{
  margin-top: 200px !important;
}
.merchant-header .logo{
  width: 140px !important;
  height:  unset !important;
}
.sidebar-in3-circle svg circle{
  r: 185;
}
.organization-name-wrapper{
  padding-left: 12px;
}
.merchant-header .logo {
    margin-bottom: 20px;
}
.custom-nav-footer{
  align-items: flex-start !important;
  margin-left: 60px;
}
.marketing-onboarding-wrapper {
    display: none;
}
.clr-input-wrapper input:enabled {
    background-color: var(--bg-white);
}
.date-inverse .clr-input-wrapper input:enabled {
    background-color: unset;
}
.bottom-elements {
  text-align: left;
}
 .bottom-elements.btn.btn-inverse.inherit-bg {
    font-size: 17px;
    letter-spacing: normal;
}
.bottom-elements.btn.btn-inverse.inherit-bg.icon-color {
    margin-right: 0.6rem;
}
  #dashboard-data-order-count, #dashboard-data-order-amount, #dashboard-data-order-total-amount {
    margin-top: 0;
    padding-bottom: 2rem;
    height: 100%;
    font-size: xx-large;
  }
  .card-header.chart-header.card-header-color, .header-padding {
    padding-left: 0 !important;
  }
  #language-selector-holder div {
    padding-left: 12px;
  }
[routerlink="/promotions"] {
    display: none!important;
}
.tab-button.nav-link:hover {
    color: var(--brand)!important;
}
.tab-button.nav-link.active {
    color: var(--brand)!important;
}
.page-title-color.merchant-details-header {
    display: block;
}
.login-wrapper {
    background-image: url(asset/202)!important;
    background-size: 700px;
    background-position: center;
    background-position-x: 62%;
}
@media (max-width: 1500px) {
    .login-wrapper {
        background-size: 300px;
    }
}
.sidenav-custom .custom-nav-footer   .bottom-elements .organization-name-button
{
    background-color: inherit;
    &:hover {
        background-color: var(--in3-tertiary);
        color: #fff;
    }
}