#root {
  margin: 0 auto;

  --white: #fff;
  --black: #212121;
  --primary: #03c9d7;
  --green: #05b187;
  --orange: #fb9678;
  --yellow: #fec90f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main-page {
  height: calc(100svh - 64px);
  display: flex;
  overflow: hidden;
}

#main-page .main-content {
  max-height: calc(100svh - 64px);
  overflow-y: auto;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

.scroll-shadow-horizontal {
  background:
    linear-gradient(90deg,white 33%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(255,255,255,0),white 66%) 0 100%,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.1),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.1),transparent) 0 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-position: 0 0,100%,0 0,100%;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
}

.scroll-shadow-vertical {
  background:
    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
    linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

.input,
.textarea {
  &:focus,
  &:focus-within {
    outline-color: transparent !important;
  }
}