@font-face {
  font-family: "Droid Sans";
  src: url("./fonts/droid-sans.woff2");
}
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
html {
  translate: no;
}

body {
  background: #f5f5f5;
  height: 100vh;
  font-family: "Droid Sans";
  font-size: 2.2vh;
  overflow-x: hidden;
}

:root {
  --color-primary: #05ca83;
  --color-secondary: #0d1f18;
  --color-primary-25: #05ca8340;
  --color-primary-50: #05ca8380;

  --hover-button-background-color: #e8fff7;
  --border-button-color: #01945f;

  --button-danger-background-color: #dc3545;
  --button-danger-background-color-hover: #fbeded;
  --button-danger-border-color: #940101;

  --color-error: #ff4546;
  --content-background: linear-gradient(180deg, #ffffff, #96969640);

}

[data-theme="silmaq"] {
  --color-primary: #f54245;
  --color-primary-25: #f5424540;
  --color-primary-50: #f5424580;

  --color-secondary: #1558ab;
  --border-button-color: #f53134;
}

.App {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

.App-wrapper {
  display: flex;
  flex-flow: row nowrap;
  min-height: calc(100vh - var(--header-height));
  width: min(95%, 1700px);
}

.App-content {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  min-height: 100%;
  padding: 1em;
}

.react-datepicker__input-container svg {
  padding: 0 !important;
  top: 5px;
  left: 3px;
}

.badge-add {
  justify-content: start;
}

.badge-add:hover {
  cursor: pointer;
}

@media (max-width: 767px) {
  .col3 {
    margin-left: 0 !important;
  }
}

div.css-g1d714-ValueContainer {
  padding: 0px 8px !important;
}

div.css-19vd1s4-menu {
  position: absolute;
}

div.css-19vd1s4-menu div {
  cursor: pointer;
}

.custom-range {
  accent-color: var(--color-primary);
}

.custom-range:focus {
  box-shadow: 0px 0px 2px 0px var(--border-button-color);
}

.css-623h2l-control:hover {
  cursor: pointer;
}