@import url("fonts/stylesheet.css");
:root {
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 576px;
  --vh: 1vh;
  --font-family: 'SF Pro Display';
  --background: #EAF1FF;
  --padding: 12px;
  --text-font-size: 14px;
  --pacing-lr-btn: 24px;
  --height-form-control: 38px;
  --pacing-lr-modal: 16px;
  --border-radius-card: 10px;
  --border-radius-input: 6px;
  --primary-color: #F58220;
  --highlight-color: #EEB809;
  --text-color: #000;
  --text-note-color: #64748B;
  --table-border-color: #F0F0F0;
  --input-border-color: #C9C9C9;
  --bg-menu-gradient: linear-gradient(45deg, #e45909, #F58220);
  --bg-menu-gradient-hover: #e45909;
  --table-background-thead: #EAF1FF;
  --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  --card-heading-background: #FFFDEB;
  /*custom color sidebar*/
  --sidebar-background-color: #fff;
  --bg-sidebar-menu-active: linear-gradient(45deg, #B84300, #F58220);
  --color-sidebar-menu-active: white;
  --bg-sidebar-menu-hover: linear-gradient(45deg, #B84300, #F58220);
  --color-sidebar-menu: var(--text-color);
  --color-sidebar-menu-hover: var(--primary-color);
  --color-blur: #EBFDFF;
}

@media (max-width: var(--breakpoint-tablet)) {
  :root {
    --padding: 10px;
    --text-font-size: 14px;
    --pacing-lr-btn: 12px;
    --pacing-lr-modal: 12px;
  }
}
::placeholder {
  color: #BABABA;
  opacity: 1;
}

html {
  font-size: var(--text-font-size);
  min-height: calc(var(--vh, 1vh) * 100);
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--background);
  min-height: calc(var(--vh, 1vh) * 100);
}