@font-face {
  font-family: 'Anderson Grotesk';
  src: local('Anderson Grotesk UltraBold'),
    url(fonts/AndersonGrotesk-Ultrabold.otf) format('opentype');
  font-weight: 800;
}
@font-face {
  font-family: 'Anderson Grotesk';
  src: local('Anderson Grotesk Bold'),
    url(fonts/AndersonGrotesk-Bold.otf) format('opentype');
  font-weight: 600;
}
@font-face {
  font-family: 'Anderson Grotesk';
  src: local('Anderson Grotesk'),
    url(fonts/AndersonGrotesk.otf) format('opentype');
  font-weight: 400;
}

html {
  /* Load system fonts */
  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Roboto,
    Segoe UI, Helvetica Neue, sans-serif;
  font-size: 16px;
  color: #31393c;
  background: #f4f5f7;
  scroll-behavior: smooth;

  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Disable auto-enlargement of small text in Safari */
  text-size-adjust: 100%;

  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;

  box-sizing: border-box;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

/**
 * Form elements render using OS defaults,
 * so font-family inheritance must be specifically declared
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

input:focus, textarea:focus {
  outline: none;
}

a {
  font-size: 16px;
  font-weight: 500;
  color: #006ed8;
}

/* total width */
::-webkit-scrollbar {
  width: 12px;
  background: #dfe1e5;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}


::-webkit-scrollbar-track {
  box-shadow: inset 0 0 12px 12px transparent;
  border: solid 2px transparent;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #97a0af;
  border: solid 2px transparent;
  border-radius: 12px;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
  display: none;
}

/* React Modal */
.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

.Modal {
  margin: auto;
  width: max-content;
  height: max-content;
  outline: none;
}

.ModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  overflow: auto;
  display: inline-flex;
  align-items: center;
  outline: none;
  overflow-y: scroll;
}

.ReactModal__Html--open {
  overflow-y: hidden;
}

.ReactModal__Body--open {
  overflow-y: hidden;
}

.Toastify__toast-body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0052cc; /* Primary */
}

.Toastify__toast {
  background: #ffffff !important;
  border-radius: 4px !important;
  z-index: 101;
}

.Toastify__close-button {
  font-weight: lighter !important;
  color: #c6c9c9 !important; /* Light 4*/
  opacity: 1 !important;
}

.Toastify__close-button:hover {
  color: #97a0af !important; /* Dark 3 */
  opacity: 1 !important;
}

#root {
  min-height: 100vh;
}