@import 'hr-core-consts.scss';
/*=====================================
             DX-ADDITIONAL
======================================*/

.dx-tooltip-wrapper .dx-overlay-content {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: $hrBorder-radius-small;
}

.dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow:after {
  border: 1px solid #ddd;
  background: #fff;
}

.dx-slider .dx-tooltip-wrapper .dx-overlay-content {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow {
  display: block;
}


// DX Tabs styling
//---------------- Tabs
.dx-tab {
  background: $hrColor-DarkBlue;
  transition: all 0.3s ease;
}

.dx-tab.dx-tab-selected,
.dx-tab.dx-tab-selected .mat-icon {
  color: $hrColor-LightBlue;
}

.dx-tab-content,
.dx-tab-text {
  vertical-align: middle;
  text-transform: uppercase;
  line-height: 24px;
  font-weight: 500;
}


.dx-tabs.dx-state-focused .dx-tab.dx-state-focused {
  background-color: $hrColor-DarkBlue; //rgba(3,169,244,.12)
}

.dx-tab.dx-tab-selected:before {
  height: 2px !important;
}

.dx-tab:hover:not([disabled]) {
  background-color: $hrColor-LightBlue !important;
  color: $hrColor-DarkBlue !important;
}

.dx-tab:hover:not([disabled]) .mat-icon {
  color: $hrColor-DarkBlue !important;
}

.dx-tab:not(.dx-tab-selected):not(.dx-state-hover) {
  background: 0 0;
}

.dx-tabs {
  text-align: center;
}
