:root {
  --main-background-color: #f6f5f4;

  --main-spiner-loader-color: #F7A51E;

  --navigation-title-bgcolor: #ffffff;
  --navigation-title-color: #2D2926;
  --navigation-title-active-bgcolor: #ffffff;
  --navigation-title-active-color: #F7A51E;
  --navigation-title-hover-bgcolor: #ffffff;
  --navigation-title-hover-color: #F7A51E;

  --link-color: #F7A51E;
  --dropdown-bgcolor: #F7A51E;
  --radio-checkbox-color: #F7A51E;
  --reset-account-bgcolor: #F7A51E;
  --table-edit-icon-color: #2D2926;
  --balance-color: #231640;

  --button-primary-bgcolor: #F7A51E;
  --button-primary-color: #ffffff;
  --button-primary-bgcolor-hover: #FB8D05;
  --button-primary-color-hover: #ffffff;

  --button-secondary-bgcolor: #f29436;
  --button-secondary-color: #ffffff;
  --button-secondary-bgcolor-hover: #FB8D05;
  --button-secondary-color-hover: #ffffff;

  --button-search-bgcolor: #F7A51E;
  --button-search-color: #ffffff;
  --button-search-bgcolor-hover: #FB8D05;
  --button-search-color-hover: #ffffff;

  --button-accept-bgcolor: #F7A51E;
  --button-accept-color: #ffffff;
  --button-accept-bgcolor-hover: #FB8D05;
  --button-accept-color-hover: #ffffff;

  --button-border-bgcolor: #F7A51E;
  --button-border-bgcolor-hover: #F7A51E;

  --button-reset-bgcolor: #f1f1f1;
  --button-reset-color: #2D2926;
  --button-reset-bgcolor-hover: #f1f1f1;
  --button-reset-color-hover: #2D2926;

  --button-previous-bgcolor: #606060;
  --button-previous-color: #ffffff;
  --button-previous-bgcolor-hover: #867474;
  --button-previous-color-hover: #ffffff;

  --button-decline-bgcolor: #606060;
  --button-decline-bgcolor-hover: #606060;

  --workflow-dashboard-overview-acivebgcolor: #0b1038;
  --workflow-dashboard-overview-acivetextcolor: #ffffff;
  --workflow-dashboard-overview-bgcolor: #f5f5f5;
  --workflow-dashboard-overview-textcolor: #0b1038;
  --workflow-dashboard-overview-hoverbgcolor: #0b1038;
  --workflow-dashboard-overview-hovertextcolor: #ffffff;

  --transaction-dashboard-heading-color: #2D2926;
  --transaction-dashboard-rate-color: #f7a51e;
  --transaction-dashboard-active-color: #333;
  --transaction-dashboard-hover-color: #333;

  --table-header-bgcolor: #f7a51e;
  --table-header-color: #2D2926;
  --table-hover-color: rgb(249 206 152 / 30%);

  --pagination-bgcolor: #f7a51e;
  --pagination-color: #2D2926;

  --dialog-header-color: #0b1038;

  --dialog-heading-color: #0b1038;
  
  --stepper-active-color: #f7be67;
  --stepper-inactive-color: #b8b8b8;
  --stepper-previous-color: #f7a51e;

  --payment-status-posted: #e05b25;
  --payment-status-paid: #1970B8;
  --payment-status-sent: #5AC6CC;
  --payment-status-finished: #55BA47;

  --type-drawdown: #1970B8;
  --type-predelivery: #1BA6DF;
  --type-extension: #b753c9;

  --chip-grid-bgcolor: #f7a51e;
  --chip-grid-color: #ffffff;
}

/*----- Login, Forgot, Reset CSS -----*/

/*Box background color*/
#login-form-wrapper, #forgot-password, #reset-password,
#splash-screen, .show-loader {
  background-color: var(--main-background-color)!important;
}

/*Box logo image*/
#login-form .logo, #forgot-password .logo, #reset-password .logo {
  background-image: url("../../../assets/images/logo.png");
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 300px;

  height: 165px !important;
  line-height: 165px !important;
}

p.maintenancemessage {
  color: #685c55;
  font-size: 10pt;
  font-family: Arial, Verdana, sans-serif !important;
  max-width: 380px;
  text-align: center;
  line-height: 1.5;
  word-break: break-word;
}

/*Login Link Color*/
#reset-password a,
#login a,
#forgot-password a {
  color: var(--link-color) !important;
}

/*Login button disabled Color*/
#login .md-button.md-default-theme.md-accent[disabled], #forgot-password .md-button.md-default-theme.md-accent[disabled],
#login .md-button.md-accent[disabled], #forgot-password .md-button.md-accent[disabled],  
#login .md-button.md-default-theme.md-fab[disabled], #forgot-password .md-button.md-default-theme.md-fab[disabled],
#login .md-button.md-fab[disabled], #forgot-password .md-button.md-fab[disabled], 
#login .md-button.md-default-theme.md-raised[disabled], #forgot-password .md-button.md-default-theme.md-raised[disabled],  
#login .md-button.md-raised[disabled], #forgot-password .md-button.md-raised[disabled],  
#login .md-button.md-default-theme.md-warn[disabled], #forgot-password .md-button.md-default-theme.md-warn[disabled],  
#login .md-button.md-warn[disabled], #forgot-password .md-button.md-warn[disabled], 
#login .md-button.md-default-theme[disabled], #forgot-password .md-button.md-default-theme[disabled],  
#login .md-button[disabled], #forgot-password .md-button[disabled],
#login .md-button.md-default-theme.md-fab[disabled], #forgot-password .md-button.md-default-theme.md-fab[disabled],  
#login .md-button.md-fab[disabled], #forgot-password .md-button.md-fab[disabled], 
#login .md-button.md-default-theme.md-raised[disabled], #forgot-password .md-button.md-default-theme.md-raised[disabled], 
#login .md-button.md-raised[disabled], #forgot-password .md-button.md-raised[disabled],
#reset-password-form form .submit-button[disabled], #reset-password-form form .submit-button[disabled]:hover  {
  background-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.38)  !important;
  cursor: default;
  border: none;
}

/*Login button Main Color*/
.btn-color-light,
.changePasswordForm .md-button.submit-button,
.securityQuestionForm .submit-button.md-button,
.resetSecurityQuestionForm .submit-button.md-button,
.tmAccept,
#verification-code-form .submit-button,
#two-factor-authentication form .submit-button,
#two-factor-verification-code-form .submit-button,
#reset-password-form form .submit-button  {
  background-color: var(--button-primary-bgcolor) !important;
  color: var(--button-primary-color) !important;
}

/*Login button Main Hover Color*/
.btn-color-light:hover,
.changePasswordForm .md-button.submit-button:hover,
.securityQuestionForm .submit-button.md-button:hover,
.resetSecurityQuestionForm .submit-button.md-button:hover,
.tmAccept:hover,
#verification-code-form .submit-button:hover,
#two-factor-authentication form .submit-button:hover,
#two-factor-verification-code-form .submit-button:hover,
#reset-password-form form .submit-button:hover{
  background-color: var(--button-primary-bgcolor-hover) !important;
  color: var(--button-primary-color-hover) !important;
}

/*Dropdown Hover Color*/
md-menu-content md-menu-item:hover{
  background-color: var(--dropdown-bgcolor) !important;
}

/*Select Option Hover Color*/
md-select-menu.md-default-theme md-content md-option:not([disabled]):focus, md-select-menu md-content md-option:not([disabled]):focus, md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, md-select-menu md-content md-option:not([disabled]):hover {
  background-color: rgba(158,158,158,0.18) !important;
}

div#login-form, #forgot-password-form, div#reset-password-form {
  box-shadow: 0 3px 6px 0 #00000033;
}

/*----- Spinner -----*/

#splash-screen .spinner-wrapper .spinner .inner .left .half-circle,
#splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
  border: 10px solid var(--main-spiner-loader-color);

  border-bottom-color: transparent;
  border-radius: 70%;
}

md-progress-circular.md-default-theme.md-accent path,
md-progress-circular.md-accent path, md-progress-circular.md-default-theme path,
md-progress-circular path {
  stroke: var(--main-spiner-loader-color) !important;
}

/*----- Vertical Navigation -----*/
#vertical-navigation{
  background-color: #ffffff;
}

#vertical-navigation .navigation-header .logo .logo-image {
  background-image: url(../../../assets/images/dashboard-logo.png) !important;
  background-repeat: no-repeat;
  background-position: 10px 20px;
  text-indent: -1999px;
  width: 50px !important;
  min-width: 215px !important;
  position: relative;
  height: 88px !important;
  left: -30px;
  top: -11px;
  background-size: 180px;
}

.ms-navigation-folded #vertical-navigation .navigation-header .logo .logo-image {
  background-image: url(../../../assets/images/logo-small.png) !important;

  background-position: 20px 25px;
  min-width: 180px !important;
  background-size: 45px !important;
}

.ms-navigation-folded-open #vertical-navigation .navigation-header .logo .logo-image {
  background-image: url(../../../assets/images/dashboard-logo.png) !important;
  
  background-size: 180px !important;
  background-position: 10px 20px !important;
  min-width: 215px !important;
}

/*Main Color*/
.ms-navigation .ms-navigation-node .ms-navigation-item > .ms-navigation-button .title,
.ms-navigation .ms-navigation-node i.icon-chevron-right,
.ms-navigation .ms-navigation-node .ms-navigation-item > .ms-navigation-button .icon{
  color: var(--navigation-title-color);
  font-weight: 500;
}

/*Active Color*/
a.ms-navigation-button.md-default-theme.active.md-accent-bg{
  background-color: var(--navigation-title-active-bgcolor) !important;
}

a.ms-navigation-button.md-default-theme.active.md-accent-bg .title {
  color: var(--navigation-title-active-color) !important;
}

/*Hover Color*/
.ms-navigation .ms-navigation-node .ms-navigation-item:hover {
  background: var(--navigation-title-hover-bgcolor);
}

.ms-navigation .ms-navigation-node .ms-navigation-item:hover .main_menu_heading, 
.ms-navigation .ms-navigation-node .ms-navigation-item:hover span,
.ms-navigation .ms-navigation-node .ms-navigation-item:hover i,
.ms-navigation .ms-navigation-node .ms-navigation-item > .ms-navigation-button .icon:hover{
  color: var(--navigation-title-hover-color) !important;
}

/*Main BG Color*/
.ms-navigation .ms-navigation-node{
  background-color: var(--navigation-title-bgcolor) !important;
}

/*Navigate Menu Icon Color*/
md-toolbar.md-default-theme:not(.md-menu-toolbar) .toggle-button-navbar md-icon {
  color: rgb(0 0 0 / 87%) !important;
  fill: rgb(0 0 0 / 87%) !important;
}

/*----- WorkFlow Dashboard -----*/

/*OverView Color*/
#dashboard-project .blue {
  background-color: var(--workflow-dashboard-overview-acivebgcolor);
}

#dashboard-project .blue span {
  color: var(--workflow-dashboard-overview-acivetextcolor) !important;
}

#dashboard-project card-style2 .grey {
  background-color: var(--workflow-dashboard-overview-bgcolor);
}

#dashboard-project .grey span {
  color: var(--workflow-dashboard-overview-textcolor) !important;
}

#dashboard-project .grey:hover span {
  color: var(--workflow-dashboard-overview-hovertextcolor) !important;
}

#dashboard-project card-style2 .grey:hover{
  background-color: var(--workflow-dashboard-overview-hoverbgcolor) !important;
}

.norecordondashboard {
  background: #F7A51E !important;
  color: #fff !important;
}

/*----- Transaction Dashboard -----*/

.institutionalFXWidgets .container h2 {
  color: var(--transaction-dashboard-heading-color);
}

/*Spot Rate Main Color */
.institutionalFXWidgets div#rates .fleft .spot-rates .row1 label {
  color: var(--transaction-dashboard-rate-color);
}

/*Spot Rate Active Color */
.institutionalFXWidgets div#rates .fleft .spot-rates .selected .row3 button, .institutionalFXWidgets div#rates .fleft .spot-rates .selected .row1 label, .institutionalFXWidgets div#newsFeed label {
  color: var(--transaction-dashboard-active-color);
}

/*Spot Rate Hover Color */
a.allTransaction.right.md-default-theme, .institutionalFXWidgets div#rates .fleft .spot-rates > div:hover label, .institutionalFXWidgets div#rates .fleft .spot-rates > div:hover button, .institutionalFXWidgets div#outstanding .outstanding-table td:nth-child(6) button:hover, .institutionalFXWidgets div#chart .selectedPair, .institutionalFXWidgets div#chart span.md-select-icon{
  color: var(--transaction-dashboard-hover-color) !important;
}

.trade-dialog #filters-form md-toolbar {
  background-color: transparent !important;
}

/*Spot Rate Popup Button Color */
.trade-dialog.dialogBox .fright button.md-button, .trade-close-dialog .fright button.md-button{
  background-color: var(--button-primary-bgcolor) !important;
  color: var(--button-primary-color) !important;
}

.trade-dialog.dialogBox .fright button.md-button:hover, .trade-close-dialog .fright button.md-button:hover {
  background-color: var(--button-primary-bgcolor-hover) !important;
  color: var(--button-primary-color-hover) !important;
}

/*----- Href Link Color -----*/
.para-view-history > a,
table tr td a.md-default-theme,
.dealsToggle .md-list-item-text a.md-default-theme,
.popup span,
.viewbankdetails,
.institutionalFXWidgets div#newsFeed a,
.entityfunding a.link.md-default-theme,
a.settlementLinkOnStep1.link.md-default-theme,
a.link.md-default-theme, .editfundingpopup{
  color: var(--link-color) !important;
  text-decoration: underline;
}

/*----- Table Header Color -----*/
table thead th, table th, table th tr, table thead tr, thead tr th {
  background: var(--table-header-bgcolor) !important;
  color: var(--table-header-color)!important;
}

.ng-table th.sortable .sort-indicator {
  color: var(--table-header-color)!important;
  font-size: 12px;
}

.modern-data-tables-summary > div table th,
#make_a_payment .step-1-final-make-payment-table .responsive table thead tr, #make_a_payment .step-1-final-make-payment-table .responsive th,
.step-1-final-make-payment-table .ms-responsive-table-wrapper table thead tr, .step-1-final-make-payment-table .ms-responsive-table-wrapper table thead th {
  background-color: #ebebeb !important;
}


/*Sorting arrow*/
.ng-table th.sortable .sort-indicator:after, .ng-table th.sortable .sort-indicator:before,
.content table.dataTable thead .sorting .table-header .column-title:after, .content table.dataTable thead .sorting_asc .table-header .column-title:after, .content table.dataTable thead .sorting_desc .table-header .column-title:after {
  border-color:  var(--table-header-color) transparent !important;
}

/*Table Filter label Color*/
md-dialog#single_payment_dialog .payment_single_popup md-select span, .editpayee_table input, .editpayee_table label, .editpayee_table md-select span, .picker label, .inline-data-table .md-select-value span, .advance-data-table thead tr th md-input-container input,
md-dialog#single_payment_dialog .payment_single_popup label, #multiple_payment_dialog table thead th input, #multiple_payment_dialog table thead th label, #multiple_payment_dialog table thead tr th:nth-child(2) span, #multiple_payment_dialog table thead tr th:nth-child(3) span,
md-dialog#single_payment_dialog .payment_single_popup input, .simple.records-filter label, .simple.records-filter input, .account-data-table table.records-filter .md-select-value > span, .inline-data-table .makeapaymentacountpopup input, #make_a_payment .makeapaymentacountpopup label, .inline-data-table .md-select-value span .md-text, .md-inline-form .inline-data-table.picker md-input-container input, .advance-data-table thead tr th md-input-container span {
  color: var(--table-header-color)!important;
}

/*Table hover Color*/
.account-data-table table tbody tr:hover, .inline-data-table table tbody tr:hover, .advance-data-table tbody tr:hover, #pick_routing_dialog table.filter-table tbody tr:hover {
  background-color: var(--table-hover-color)!important;
  cursor: pointer;
}

/*Edit Color*/
span.sort-indicator, #view_account_transfer_history md-card.classic-design table.responsive-table thead tr th:last-child span.sort-indicator {
  color: var(--table-header-color) !important;
}

/*workflow table bg Color*/
.workflow-dashboard .filters_table tr, .workflow-dashboard .filters_table th {
  background-color: #fff !important;
}

/*----- Radio And CheckboxColor -----*/
md-radio-button.md-primary .md-container .md-off, md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off {
  border-color: var(--radio-checkbox-color)!important;
}

md-switch.md-default-theme.md-checked .md-thumb, md-switch.md-checked .md-thumb,
md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon,
md-radio-button.md-primary .md-container .md-on, md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
  background-color: var(--radio-checkbox-color)!important;
}

md-switch.md-default-theme.md-checked:not([disabled]) .md-bar, md-switch.md-checked:not([disabled]) .md-bar {
  background-color: #f7a51e8c;
}

/*----- Pagination Color -----*/
.routing_pagination_dealinghistory li:nth-child(3) a:nth-child(1),
#ng-table-options .pages button.active,
.ng-table-paging-options .pages button.active,
.pagination li a.active {
  background-color: var(--pagination-bgcolor) !important;
  color: var(--pagination-color) !important;
}

#view_spot_history .pagination li:nth-child(3) a:first-child{
  background-color: var(--pagination-bgcolor) !important;
  color: var(--pagination-color) !important;
}

/*----- Record Per Page Color -----*/
.ng-table-options .pages button.active {
  background-color: #f7a51e!important;
  color: #2D2926!important;
}

#ng-table-options .pagination ul a.active {
  background-color: #f7a51e!important;
  color: #2D2926!important;
}



/*----- Dialog Top Header Color -----*/
#filters-form md-toolbar, #single_payment_dialog .dialog-title, .topRow.termCondition.dialog-title, .popupdialog {
  background: var(--dialog-header-color) !important;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar) md-icon, md-toolbar:not(.md-menu-toolbar) md-icon {
  color: rgb(255 255 255 / 87%) !important;
  fill: rgb(255 255 255 / 87%) !important;
}


/*----- Button Colors -----*/

/*Button 01 - Dialog Accept, Next, Get Quote, Add New, Print Button Statement */
.next-button-container button.md-primary, .next-button-container button.md-primary.info-button.ds-custom-info-color-dd-spot, .addnewbutton button.md-primary, .print-button-position button.md-primary{
  background: var(--button-primary-bgcolor) !important;
  color: var(--button-primary-color) !important;
  font-weight: 500 !important;
}

.next-button-container button.md-primary:hover, .next-button-container button.md-primary.info-button.ds-custom-info-color-dd-spot:hover, .addnewbutton button.md-primary:hover, .print-button-position button.md-primary:hover{
  background: var(--button-primary-bgcolor-hover) !important;
  color: var(--button-primary-color-hover) !important;
}

.next-button-container .md-primary a.md-default-theme {
  color: var(--button-primary-color) !important;
}

.next-button-container .md-primary i, .addnewbutton button.button-with-icon i.material-icons {
  color: var(--button-primary-color) !important;
}


/*Button 02 - Dialog Reset*/
.btn-reset {
  background-color: var(--button-reset-bgcolor) !important;
  color: var(--button-reset-color) !important;
} 

.btn-reset:hover {
  background-color: var(--button-reset-bgcolor-hover) !important;
  color:  var(--button-reset-color-hover) !important;
}


/*Button 03 - Search*/
.next-button-container button.custom-button-color.md-primary {
  background: var(--button-search-bgcolor) !important;
  color: var(--button-search-color) !important;
}

.next-button-container button.custom-button-color.md-primary:hover {
  background: var(--button-search-bgcolor-hover) !important;
  color: var(--button-search-color-hover) !important;
}

/*Button 04 -  Previous*/
.next-button-container button.md-secondary, .tmDecline{
  background: var(--button-previous-bgcolor) !important;
  color: var(--button-previous-color) !important;
}

.next-button-container button.md-secondary:hover, .tmDecline:hover{
  background: var(--button-previous-bgcolor-hover) !important;
  color: var(--button-previous-color-hover) !important;
}

/*Button 05 - Accept*/
.next-button-container button.custom-accept-button.md-primary {
  background: var(--button-accept-bgcolor) !important;
  color: var(--button-accept-color) !important;
}

.next-button-container button.custom-accept-button.md-primary:hover {
  background: var(--button-accept-bgcolor-hover) !important;
  color: var(--button-accept-color-hover) !important;
}

/*Button 06 - Decline*/
.next-button-container button.md-secondary.custom-decline-button {
  background-color: var(--button-decline-bgcolor) !important;
}

.next-button-container button.md-secondary.custom-decline-button:hover {
  background-color: var(--button-decline-bgcolor-hover) !important;
}

/*Button 07 - Approval, Done, Finalize, Update*/
.next-button-container button.info-button.md-primary{
  background: var(--button-secondary-bgcolor) !important;
  color: var(--button-secondary-color) !important;
}

.next-button-container button.info-button.md-primary:hover {
  background: var(--button-secondary-bgcolor-hover) !important;
  color: var(--button-secondary-color-hover) !important;
}

/*Button 08 - Border button*/
.next-button-container button.md-primary.md-border-button, .single-multi-custom-class.next-button-container button.md-secondary, .next-button-container button.md-primary.info-button.md-border-button {
    background-color: #fff !important;
    border: 0.14em solid var(--button-border-bgcolor)  !important;
    color: var(--button-border-bgcolor)  !important;
    font-weight: 500 !important;
}
.next-button-container button.md-primary.md-border-button i, .next-button-container button.md-primary.md-border-button a, #account_transfer a i.fa.fa-print{
  color: var(--button-border-bgcolor) !important;
}

.next-button-container button.md-primary.md-border-button:hover, .single-multi-custom-class.next-button-container button.md-secondary:hover, .next-button-container button.md-primary.info-button.md-border-button:hover {
  background-color: #fff !important;
  color: var(--button-border-bgcolor-hover) !important;
  border: 0.14em solid var(--button-border-bgcolor-hover)  !important;
  font-weight: 500 !important;
}
.next-button-container button.md-primary.md-border-button i:hover, .next-button-container button.md-primary.md-border-button a:hover{
  color: var(--button-border-bgcolor-hover) !important;
}

/*CSV Button on Account Statement*/
.entity-statement-section-height .custom-submit-button {
  border: 1px solid #ddd;
  box-shadow: none !important;
  border-left: none !important;
}

/*----- Steppers Colors -----*/

/*Active Color*/
.ms-form-wizard-step-label {
  color: var(--stepper-active-color);
}
.ms-form-wizard-step-label .ms-form-wizard-step-icon .icon-circle {
  color:  var(--stepper-active-color);
  border-color: var(--stepper-active-color);
}
.ms-form-wizard-step-label .ms-form-wizard-step-icon .icon-circle .icon-svg path, .ms-form-wizard-step-label .ms-form-wizard-step-icon .icon-circle .icon-svg polyline {
  fill: var(--stepper-active-color);
}

md-tab-item.md-active::before, md-tab-item.md-active::after {
  border-color: var(--stepper-active-color) !important;
}


/*Not Active Color*/
md-tab-item:not(.md-active) .ms-form-wizard-step-label {
  color:  var(--stepper-inactive-color);
}

md-tab-item:not(.md-active) .ms-form-wizard-step-label .icon-circle {
  color: var(--stepper-inactive-color);
  border-color: #fff;
}
md-tab-item:not(.md-active):after,
md-tab-item:not(.md-active):before {
  border-bottom: 3px solid var(--stepper-inactive-color);
}

md-tab-item:not(.md-active) .ms-form-wizard-step-label .icon-circle .icon-svg path,
md-tab-item:not(.md-active) .ms-form-wizard-step-label .icon-circle .icon-svg polyline{
  fill: var(--stepper-inactive-color);
}

/*Previous Color*/
md-tab-item.md-previous .ms-form-wizard-step-label {
  color: var(--stepper-previous-color) !important;
}

md-tab-item.md-previous .ms-form-wizard-step-label .ms-form-wizard-step-icon .icon-circle {
  border-color:  var(--stepper-previous-color) !important;
  background:  var(--stepper-previous-color) !important;
}
md-tab-item.md-previous:before,
md-tab-item.md-previous:after{
  border-bottom: 3px solid  var(--stepper-previous-color) !important;
}

.icon-circle-outline {
  border: 1px solid transparent;
}

/*steper border active color*/
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
  color: var(--stepper-active-color);
  background: var(--stepper-active-color);
}

/*steper border color*/
md-tab-item::before, md-tab-item::after{
  border-bottom: 3px solid var(--stepper-inactive-color) !important;
}

/*----- Browser Colors -----*/

.browsebutton {
  background-color: var(--button-primary-bgcolor) !important;
}

.browsebutton span {
  color: var(--button-primary-color) !important;
  font-weight: 400 !important;
}


/*----- MAP Table Footer Color -----*/
#make_a_payment .step3-quote table tfoot tr {
  background-color: var(--dialog-heading-color);
}

/*----- Deal Heading Color -----*/
.ForexTradingSteppersHeading, #make_a_payment md-tabs h3.md-text-accent {
  background: var(--dialog-heading-color) !important
}


/*----- Benificiary and Margin Stepper Colors -----*/
.md-tab.md-active-add-active,
.md-tab.md-active-remove-active{
  background-color: #ffffff !important;
}

#add_beneficiary .md-tab.md-active, #margin_summary .md-tab.md-active {
  border-bottom: 23px solid var(--stepper-active-color);
  background-color: #ffffff !important;
}
#add_beneficiary .md-tab.md-active .ms-form-wizard-step-label,
#margin_summary .md-tab.md-active .ms-form-wizard-step-label {
  background-color: transparent !important;
}

/*----- Payment Tracker Status Color -----*/
#payment_tracker md-card.classic-design table tr td .status span.posted {
  background-color: var(--payment-status-posted) !important;
  color: #fff;
}
#payment_tracker md-card.classic-design table tr td .status span.paid {
  background-color: var(--payment-status-paid) !important;
  color: #fff;
}
#payment_tracker md-card.classic-design table tr td .status span.sent {
  background-color: var(--payment-status-sent) !important;
  color: #fff;
}
#payment_tracker md-card.classic-design table tr td .status span.finished {
  background-color: var(--payment-status-finished) !important;
  color: #fff;
}

/*----- Drawdown Type Color -----*/
span.type.drawdown {
  background-color: var(--type-drawdown);
}
span.type.predelivery {
  background-color: var(--type-predelivery);
}
span.type.extension {
  background-color: var(--type-extension);
}

#draw_down tr.extra.drawdown {
  background: rgba(13, 155, 140, 1);
  background: -moz-linear-gradient(left, rgba(13, 155, 140, 1) 0%, rgba(13, 155, 140, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -webkit-linear-gradient(left, rgb(166, 192, 189) 0%, rgba(13, 155, 140, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -o-linear-gradient(left, rgba(13, 155, 140, 1) 0%, rgba(13, 155, 140, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -ms-linear-gradient(left, rgba(13, 155, 140, 1) 0%, rgba(13, 155, 140, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: linear-gradient(to right, rgba(13, 155, 140, 1) 0%, rgba(13, 155, 140, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3466b1', endColorstr='#dddddd', GradientType=1);
  /* IE6-9 */
}
#draw_down tr.extra.predelivery {
  background: rgba(83, 193, 201, 1);
  background: -moz-linear-gradient(left, rgba(35, 22, 64, 1) 0%, rgba(35, 22, 64, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(35, 22, 64, 1) 0%, rgba(35, 22, 64, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -o-linear-gradient(left, rgba(35, 22, 64, 1) 0%, rgba(35, 22, 64, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -ms-linear-gradient(left, rgba(35, 22, 64, 1) 0%, rgba(35, 22, 64, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: linear-gradient(to right, rgba(35, 22, 64, 1) 0%, rgba(35, 22, 64, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53c1c9', endColorstr='#dddddd', GradientType=1);
}

#draw_down tr.extra.extension {
  background: rgba(183, 83, 201, 1);
  background: -moz-linear-gradient(left, rgba(183, 83, 201, 1) 0%, rgba(183, 83, 201, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(183, 83, 201, 1) 0%, rgba(183, 83, 201, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -o-linear-gradient(left, rgba(183, 83, 201, 1) 0%, rgba(183, 83, 201, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: -ms-linear-gradient(left, rgba(183, 83, 201, 1) 0%, rgba(183, 83, 201, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  background: linear-gradient(to right, rgba(183, 83, 201, 1) 0%, rgba(183, 83, 201, 1) 1%, rgba(221, 221, 221, 1) 1%, rgba(221, 221, 221, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53c1c9', endColorstr='#dddddd', GradientType=1);
}

/*----- Reset Account -----*/
.resetAccounts {
  background: var(--reset-account-bgcolor) !important;
}

/*----- Table edit icon color -----*/
.edit-button-icon {
  border: 1px dashed var(--table-edit-icon-color);
  color: var(--table-edit-icon-color);
}

/*----- Balance Color -----*/
.next-button-container .balance * {
  color: var(--balance-color) !important;
}

/*----- Grid Chips Color -----*/
.chips-filter md-chip {
  background-color: var(--chip-grid-bgcolor) !important;
  color: var(--chip-grid-color) !important;
}


/*----- Execute Engine -----*/
#transaction_spot-deal .slider, #transaction_spot-deal .step1-spot .step1 button, #transaction_spot-deal .step2-spot .flip-card-back .row_2 button, .trade-close-dialog .middle button.md-button {
  background-color: #1970B8;
}

#transaction_spot-deal .step1-spot .step1 button:hover, #transaction_spot-deal .step2-spot .flip-card-back .row_2 button:hover, .trade-close-dialog .middle button.md-button:hover{
  background-color: #1970B8;
}

#transaction_spot-deal .step2-spot .flip-card-back .net-rate span:nth-child(1), #transaction_spot-deal .step2-spot .flip-card-back .net-rate span:nth-child(2), #transaction_spot-deal .step2-spot .flip-card-back .fmiddle .row_1 p{
  color: #2a2a2a;
}

#transaction_spot-deal .step2-spot .flip-card-back .top h2, #transaction_spot-deal .step2-spot .flip-card-back h3{
  color: #1970B8;
}

#transaction_spot-deal .step2-spot .flip-card-back .row_1 > span{
  color: #2a2a2a;
}

#transaction_spot-deal .step3-spot h5, #transaction_spot-deal .step3-spot h2, .trade-dialog.dialogBox h2, .trade-close-dialog h2 {
  color: #68a57c;
}

#transaction_spot-deal .step3-spot .made-mistake{
  color: #2a2a2a
}

#transaction_spot-deal md-tabs md-tab-content {
  margin-bottom: 25px;
}

#trading_history .editdeal_viewconfirmation{
  background-color: #f7a51e!important;
}

#trading_history .editdeal_viewconfirmation:hover{
  background-color: #f7a51e!important;
}


/*----- Messages -----*/
.ui-notification.success {
  color: #fff;
  background: #5cb85c;
}

.ui-notification.logoutMsg {
  color: #fff;
  background: #d9534f;
}

.ui-notification.error {
  color: #fff;
  background: #d9534f;
}

.ui-notification.info {
  color: #fff;
  background: #5bc0de;
}

.ui-notification.warning {
  color: #fff;
  background: #5bc0de;
}

.ui-notification.quoteError {
  color: #fff;
  background: #d9534f;
}


/*----- Order Book Border Color -----*/
#order_book .borderdiv {
  border: 2px solid #2d2926 !important;
}

#order_book .value-pair-container .value-pair-body{
  border-bottom: 2px solid #2d2926 !important;
}

/*----- Multi payment Plus icon color -----*/
#multiple_payment_dialog table i.material-icons {
  color: #2d292a;
}

/*----- Change password disable Color-----*/
#change-password .greycolor {
  cursor: not-allowed;
  border-color: none;
  background-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.38)  !important;
}

.changePasswordForm .md-button.md-raised[disabled] {
  border-color: rgba(0,0,0,0.12) !important;
}

/*----- Date Picker Color-----*/

/*main date picker color*/
.ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:active, html .ui-button.ui-state-disabled:hover {
  border: 1px solid #0b1038 !important;
  font-weight: 700;
  background-color: #fff !important;
  color: #0b1038;
  background: none !important;
}
.bootstrap-datetimepicker-widget td.day {
  background: transparent !important;
  border: 1px solid #0b1038;
}
/*hover date picker color*/
.ui-button.ui-state-active:hover, .ui-button:active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active {
  border: 1px solid #f7a51e !important;
  background: none !important;
  font-weight: 700;
  color: #fff !important;
  background-color: #f7a51e !important;
}
/*samedate active and highlighted*/
a.ui-state-default.ui-state-highlight.ui-state-active {
  background-color: #0b1038  !important;
  background: none;
  border: 1px solid #0b1038  !important;
}
/*highlighted color*/
a.ui-state-default.ui-state-highlight {
  background-color: #0b1038  !important;
  border: 1px solid #0b1038  !important;
  color: #fff;
  background: none;
}
select.ui-datepicker-month, select.ui-datepicker-year {
  background-color: #0b1038;
  border: 1px solid #0b1038;
  color: #fff;
  font-weight: 900;
}
select.ui-datepicker-month option, select.ui-datepicker-year option {
  background-color: #fff;
  color: #000;
}

.bootstrap-datetimepicker-widget td.day.active{
  background-color: #0b1038  !important;
  color: #fff !important;
  background-image: none !important;
  border: none !important;
}
/* select.ui-datepicker-month option:hover{
	 background-color: black !important;
}
 */
/*datepicker hover*/
a.ui-state-default:hover {
  color: #fff !important;
  background-color: #f7a51e !important;
  border: 1px solid #f7a51e !important;
}
/*main datepicker rounded and border*/
.ui-widget.ui-widget-content {
  border: 1px solid #199fda !important;
  border-radius: 6px;
}
/*main header color*/
.ui-widget-header {
  border: 1px solid #0b1038 !important;
  background: none !important;
  color: #0b1038 !important;
  font-weight: 700 !important;
  background-color: #0b1038 !important;
}
tr.dateTimePickerHeader, tr.dateTimePickerHeader th{
  border: 1px solid #0b1038 !important;
  background: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  background-color: #0b1038 !important;
}
/*center the text */
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
  text-align-last: center;
}
/*view history date picker backgorund color*/
.comiseo-daterangepicker-triggerbutton {
  background-color: transparent !important;
}
/*view history month color*/
span.ui-datepicker-month {
  color: #fff;
}
.comiseo-daterangepicker-triggerbutton {
  color: #000000;
}
.comiseo-daterangepicker-calendar .ui-state-highlight a.ui-state-default {
  color: #199fda;
}
/*arrow Color*/
.ui-widget-header .ui-icon {
  background-image: url(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/hot-sneaks/images/ui-icons_ffffff_256x240.png) !important;
}
/*arrow hover*/
.ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover {
  border: none !important;
}
#language-message{
	display: none !important;
}

.ms-navigation .has-children ul {
  overflow: visible !important;
}

.ms-navigation .has-children.collapsing ul {
  overflow: hidden !important;
}

.ms-navigation .has-children.collapsed ul {
  overflow: hidden !important;
}

.ms-navigation .has-children.expanding ul {
  overflow: hidden !important;
}

#login #login-form-wrapper #login-form .title {
    display: none;
}
#pick_routing_dialog table th {
    white-space: normal !important;
    word-break: break-word !important;

}

.ms-navigation .ms-navigation-node .ms-navigation-item>.ms-navigation-button.active .icon {
    color: var(--navigation-title-active-color) !important;
}


.next-button-container button.md-primary, button.md-primary {
    background: var(--button-primary-bgcolor) !important;
    color: #fff;
}