/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

.r-widget body {
  line-height: 1;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #ffffff;
  cursor: default;
}

.r-widget div,
.r-widget h1 {
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.r-widget #container {
  overflow-y: scroll;
}

.r-widget {
  background: #fff;
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow-x: hidden;
}

.r-widget>div {
  width: 100%;
}

.r-widget ul,
.r-widget li {
  margin: 0;
  padding: 0;
}

/* placeholder */
::-webkit-input-placeholder {
  font-size: 13px;
  color: rgba(58, 63, 82, .4);
}

::-moz-placeholder {
  font-size: 13px;
  color: rgba(58, 63, 82, .4);
}

:-ms-input-placeholder {
  font-size: 13px;
  color: rgba(58, 63, 82, .4);
}

:-moz-placeholder {
  font-size: 13px;
  color: rgba(58, 63, 82, .4);
}

.tb-widget-title {
  display: none !important;
}

.tb-dashboard-container {
  z-index: 14;
}

@media screen and (max-width: 1023px) {
  .ReactTable .-pagination .-pageSizeOptions {
    display: none;
  }
}

/* override styles for fabric ui components */
.ms-Button--primary {
  background-color: #CC9966 !important;
}

.ms-Button--primary:disabled {
  opacity: 0.3;
  color: #fff;
}

.ms-TagItem {
  margin: 5px;
}

.tag-picker input {
  height: 30px;
}

.amount input {
  font-size: 14px;
  width: 80px;
  text-align: left;
  padding-left: 10px;
  height: 30px !important;
  border: 1px solid #C2C2C2
}

.amount input:focus-visible {
  border: #272727 solid 1px;
}

.amount :focus-visible {
  outline: 0px;
}

.percentage input {
  font-size: 14px;
  width: 50px;
  height: 32px;
  text-align: right;
  padding-right: 5px;
}

.percentage {
  padding-bottom: 10px;
  align-items: center !important;
}

.amount {
  padding-bottom: 0px !important;
  height: 32px !important;
}

.ms-Dropdown-container span {
  padding: 0 2px;
}

.ms-Dropdown-titleIsPlaceHolder {
  border: 1px solid #a6a6a6 !important;
}

.ms-Dropdown-titleIsPlaceHolder:focus,
.ms-Dropdown:focus .ms-Dropdown-titleIsPlaceHolder,
.ms-Dropdown:focus .ms-Dropdown-title {
  border: 1px solid #938376 !important;
  /*#0078d7*/
}

.ms-TextField-fieldGroup {
  border: 1px solid #938376 !important;
}

.is-checked .ms-Checkbox-checkbox {
  border: solid 1px #CC9966;
  background-color: #CC9966 !important;
}

.ms-Checkbox:focus .ms-Checkbox-checkbox {
  border: solid 1px #938376 !important;
}

.ms-Spinner-label {
  color: #CC9966 !important;
}

#search-spinner .ms-Spinner-circle {
  border: 1.5px solid rgba(221, 187, 153, 0.3) !important;
  border-top-color: #CC9966 !important;
}

.ms-Button--action.is-checked {
  color: #CC9966 !important;
}

#loader .ms-Spinner-circle {
  width: 112px;
  height: 112px;
  display: grid;
  border: 8px solid #0000;
  border-radius: 50%;
  border-right-color: #cc9966;
  animation: spinner-a4dj62 1s infinite linear;
  position: relative;
}

#loader .ms-Spinner-circle::before,
#loader .ms-Spinner-circle::after {
  content: "";
  grid-area: 1/1;
  margin: 4px;
  border: inherit;
  border-radius: 50%;
  animation: spinner-a4dj62 2s infinite;
  position: relative;
}

#loader .ms-Spinner-circle::after {
  margin: 16px;
  animation-duration: 3s;
}

@keyframes spinner-a4dj62 {
  100% {
    transform: rotate(1turn);
  }
}

@media print {

  .no-print,
  .no-print * {
    display: none !important;
  }
}

.white-tab-effect:before {
  background: white; /* new background color for :before */
}

.tab-effect-hover:hover {
  color: white;
}

.tab-effect {
  position: relative;
  z-index: 1;

  &:before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tab-effect-background, #CC9966);
    transform: scaleX(var(--tab-effect-scale, 0));
    transform-origin: 0 50%;
    transition: transform 0.3s ease-out;
  }

  &.active i,
  &:hover i {
    color: #CC9966; 
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    &:before {
      transform: translate(-50%, -50%) scale(1); 
    }
  }

  &:hover,
  &:focus,
  &:active {
    &:before {
      transform: scaleX(1);
    }
  }

  i:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; 
    height: 100%; 
    background: white;
    transform: translate(-50%, -50%) scale(0); 
    transition: transform 0.3s ease-out;
    z-index: -1;
  }



  &.no-icon-effect:hover i,
  &.no-icon-effect.active i {
    color: #8391b0; 
    background: transparent;
  }
}