@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* @import '~antd/dist/antd.css'; */

#root {
  --menu-size-width: 75px;
  height: 100%;
}

*:not(i) {
  font-family: 'DM Sans', 'sans-serif' !important;
}

.ui.header,
.ui.secondary.pointing.menu .active.item,
.ui.button,
.ui.buttons .button,
.ui.buttons,
.ui.divider,
.ui.modal > .header:not(.ui),
h2,
h3,
h4,
h5,
b {
  font-weight: 500 !important;
}

.ui.progress {
  height: 20px !important;
  border-radius: 10px !important;
}

.main-menu-item {
  width: var(--menu-size-width);
  height: 55px;
  color: var(--darkLight);
  transition: color 0.2s ease;
}

.main-menu-item.active {
  background-color: #3c4a61;
}

.main-menu-icon {
  color: var(--white);
  opacity: 0.25;
  align-items: center;
}

.main-menu-icon:hover {
  color: var(--secondary);
  opacity: 1;
}

.main-menu-item.active > .main-menu-icon {
  color: var(--white);
  opacity: 1;
}

.main-menu-new-item {
  width: 10px;
  height: 10px;
  background-color: var(--positive);
  position: relative;
  transform: translate(45px, -45px);
  border-radius: 50%;
}

.ui.active.modal {
  position: static !important;
}

.ui.breadcrumb .active.section {
  font-weight: 500 !important;
}

.ui.page.dimmer {
  overflow-y: scroll;
}

.ui.progress > .bar {
  height: 20px !important;
  border-radius: 10px !important;
}

.ui.progress > .bar > .progress {
  font-size: 11px;
  /* transform: translateY(-1px); */
  padding-right: 2px;
  /* margin-bottom: 1px; */
}

.ui.toggle.checkbox input[type='checkbox']:checked ~ label::before,
.ui.toggle.checkbox input[type='checkbox']:checked:focus ~ label::before {
  background: var(--secondary) !important;
}

.ui.toggle.checkbox > label:before {
  box-shadow: 0px 0px 0px 1px var(--border);
  background-color: var(--light) !important;
}

.ui.toggle.checkbox > label:after {
  left: 0rem !important;
}

.ui.checked.toggle.checkbox > label:after {
  left: 2rem !important;
}

.ui.toggle.checkbox label:hover {
  text-decoration: underline;
  color: var(--primary) !important;
}

.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label:hover {
  color: var(--primary) !important;
}

.ui.checked.toggle.checkbox label:hover {
  text-decoration: underline;
  color: var(--primary) !important;
}

.submenu-flex {
  display: flex;
  flex-direction: column;
}

.ui.segment {
  box-shadow: none !important;
  border: solid 1px var(--border);
}

.light-submenu {
  background-color: var(--white) !important;
  box-shadow: 0px 2px 1px var(--lightShadow) !important;
}

.menu.inverted.mini {
  background-color: var(--primaryDark);
}

.ui.vertical.menu {
  border-radius: 0px;
}

.ui.vertical.menu > a.item:hover {
  background-color: var(--primaryLight) !important;
  color: var(--primary) !important;
}

.ui.menu {
  box-shadow: none !important;
}

.ui.menu .active.item {
  background: var(--greyBackground) !important;
  color: var(--dark) !important;
  font-weight: 500;
}

.ui.inverted.pointing.menu .active.item::after {
  display: none;
}

.ui.pointing.secondary.submenu a.submenuItem {
  color: var(--darkLight);
  border-radius: 0px;
  padding: 15px;
  opacity: 0.75;
  font-weight: 500 !important;
}

.ui.vertical.menu > .active.item:first-child {
  border-radius: 0px;
}

.ui.vertical.menu > .active.item {
  border-radius: 0px;
}

.client-search-input {
  width: 100%;
}

.ui.loader-primary.loader::after {
  border-color: var(--primary) transparent transparent !important;
}

.ui.dimmer .ui.loader:after {
  border-color: #767676 transparent transparent !important;
}

.ui.dimmer .ui.loader:before {
  border: 0.2em solid rgba(0, 0, 0, 0.1) !important;
}

.client-search-input > * {
  width: 100%;
}

.ui.modal.custom-modal {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

.ui.fullscreen.modal.offer-view {
  width: auto !important;
}

.submenu {
  background-color: var(--white) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
  /* border-bottom: 1px solid var(--border) !important; */
  box-shadow: 0px 1px 10px var(--shadow);
  margin-bottom: 0 !important;
  min-height: 55px !important;
  height: 55px;
}

.ui.pointing.secondary.submenu a.submenuItem.active {
  border-color: var(--primary);
  color: var(--primary);
  opacity: 1;
}

.ui.pointing.secondary.submenu a.submenuItem:hover {
  color: var(--primary);
}

.ui.pointing.secondary.submenu a.submenuItem.active:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ui.pointing.secondary.submenu a.submenuItem:active {
  border-color: var(--lights);
  color: var(--primary);
}

.ui.pointing.secondary.submenu a.submenuItem.active:active {
  color: var(--primary);
}

.ui.secondary.pointing.menu .item {
  color: var(--darkLight) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ui.secondary.pointing.menu .item:hover {
  color: var(--primary) !important;
  box-shadow: none !important;
  background-color: unset !important;
  /* font-weight: unset !important; */
}

.ui.secondary.pointing.menu .active.item {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: none !important;
}

.ui.secondary.menu .item {
  color: var(--shadow) !important;
}

.ui.secondary.menu .item:hover {
  color: var(--primary) !important;
  background-color: var(--white) !important;
  box-shadow: 0px 0px 3px 0px var(--primary) !important;
  /* font-weight: 500 !important; */
}

.ui.secondary.menu .active.item {
  color: var(--primary) !important;
  background-color: var(--white) !important;
  box-shadow: 0px 0px 3px 0px var(--primary) !important;
  /* font-weight: 300 !important; */
}

.ui.secondary.menu .disabled.item {
  color: var(--border) !important;
}
.ui.secondary.menu .disabled.item:hover {
  color: var(--border) !important;
}

.settingsMenu {
  flex: 1 0 auto !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background-color: var(--primaryLight) !important;
  border-radius: none !important;
  padding: 0 0.8em 0 0.4em !important;
}

.ui.menu.vertical.settingsMenu {
  box-shadow: none !important;
}

.settingsMenu:after {
  display: none !important;
}

.ui.vertical div.settingsMenuList {
  cursor: pointer !important;
}

.ui.vertical a.settingsMenuItem,
.ui.vertical div.settingsMenuList,
.ui.vertical div.settingsMenuList a.settingsMenuItem {
  background-color: var(--primaryLight) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 1em 0.4em !important;
  font-weight: 400 !important;
}

.ui.vertical a.settingsMenuItem:hover,
.ui.vertical a.settingsMenuItem.active,
.ui.vertical div.settingsMenuList div.closed:hover,
.ui.vertical div.settingsMenuList div.opened,
.ui.vertical div.settingsMenuList a.settingsMenuItem:hover,
.ui.vertical div.settingsMenuList a.settingsMenuItem.active {
  color: var(--primary) !important;
  font-weight: 400 !important;
}

.ui.vertical a.settingsMenuItem.item:before,
.ui.vertical div.header.settingsMenuList.item:before {
  background-color: none;
  width: 0;
  height: 0;
}

.ui.label {
  font-weight: 500 !important;
}

.ui.dropdown .menu .active.item {
  font-weight: 500 !important;
}

.ui.dropdown .menu > .item {
  font-weight: 400 !important;
}

.ReactVirtualized__Table__rowColumn > div {
  width: 100%;
}

.ReactVirtualized__Table__rowColumn > .ui.progress {
  margin: 0 !important;
}

::-webkit-scrollbar {
  height: 5px !important;
  width: 5px !important;
  background: rgba(0, 0, 0, 0) !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0) !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: var(--border) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lightDark) !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0) !important;
}

button.ui.button {
  margin: 0;
}

@keyframes blinker {
  to {
    opacity: 0;
  }
}

.DayPickerKeyboardShortcuts__show--bottom-right {
  display: none !important;
}

::-webkit-input-placeholder {
  color: var(--light);
}
:-moz-placeholder {
  color: var(--light);
  opacity: 1;
}
::-moz-placeholder {
  color: var(--light);
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--light);
}

/* Add support for uk in semantic ui flags */
i.flag.uk:before {
  background-position: -36px -26px;
}

.DateInput__input,
.needsclick {
  cursor: pointer;
}

.opacity-child:hover > * {
  opacity: 1;
}

.opacity-child:first-child:hover > span {
  color: var(--primary) !important;
}

.active-offer > div.ui.input {
  display: block;
}

.active-offer > div.ui.input > input.prompt {
  border-radius: 4px;
  width: 100%;
}

.active-offer > .results {
  max-height: 200px;
  overflow-y: scroll;
}

.active-offer > .results > .result:hover {
  background-color: var(--lightBackground) !important;
}

.active-offer > .results > .result > div:not(.selected) > i.icon {
  color: var(--white) !important;
}

.active-offer > .results > .result:hover > div > i.icon {
  color: var(--secondary) !important;
}

.active-offer > .results > .result .selected {
  background-color: var(--lightBackground) !important;
  margin: -1em;
  padding: 0.85714286em 1.14285714em;
}

.active-offer > .results > .result .selected > i.icon {
  color: var(--secondary) !important;
}

.active-offer > .results > .result > div.disabled {
  opacity: 0.3 !important;
}

/* .ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {
  color: inherit !important;
} */

i.icon {
  padding-left: 0.75px;
}

::-webkit-scrollbar {
  height: 5px !important;
  width: 7px !important;
  background: rgba(0, 0, 0, 0) !important;
}

.Toastify__toast-container {
  width: 400px !important;
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  position: relative;
}

.highcharts-tooltip {
  pointer-events: auto !important;
  height: auto;
  max-height: 95%;
}

.highcharts-tooltip > span {
  height: inherit;
}

.highcharts-react-container {
  overflow: visible !important;
}

@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes snowflakes-shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(60px);
    transform: translateX(60px);
  }
}
@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@keyframes snowflakes-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(60px);
  }
}
.snowflake {
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
  -webkit-animation-delay: 6s, 0.5s;
  animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
  -webkit-animation-delay: 4s, 2s;
  animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
  -webkit-animation-delay: 2s, 2s;
  animation-delay: 2s, 2s;
}