/* 
  Это стили Дизайн системы, сквозные стили для элементов интерфейса
  всего приложения: шрифты, кнопки, инпуты и так далее
*/

@font-face {
  font-family: "StratosSkyeng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/stratosskyengweb-regular.woff2") format("woff2");
}

@font-face {
  font-family: "StratosSkyeng";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/stratosskyengweb-medium.woff2") format("woff2");
}

html {
  /* скрывает скролбары в firefox */
  scrollbar-width: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: StratosSkyeng;
  overflow: auto;
  font-size: 14px;
  line-height: 18px;
}

/* скрывает скролбары в chrome */
body::-webkit-scrollbar {
/*  display: none;*/
}

p {
  margin: 0;
}

.button,
.secondary-button,.add_button {
  display: block;
  padding: 10px 13px 13px;
  font-size: 18px;
  line-height: 22px;
  border-radius: 5px;
  background-color: #565eef;
  color: #ffffff;
  border: none;
}

.link-button {
  display: inline;
  border: 0;
  padding: 0;
  background: none;
  color: #565eef;
  cursor: pointer;
}

.button:hover,.add_button:hover {
  background-color: #6d73ff;
}
.button:hover, .add_button:disabled {
  background-color: #26284085;
}

.button[disabled="true"],
.secondary-button[disabled="true"] {
  background-color: #f4f5f6;
  color: rgba(153, 153, 153, 0.6);
  pointer-events: none;
}

.button:active {
  background-color: #4f56ce;
}

.secondary-button {
  background-color: #edecff;
  color: #565eef;
}

.secondary-button:hover {
  background-color: #f2eeff;
}

.secondary-button:active {
  background-color: #d8d7ff;
}

.input {
  height: 36px;
  box-sizing: border-box;
  padding: 15px;
  font-size: 14px;
  line-height: 18px;
  color: rgb(4, 18, 27);
  border: none;
  border-radius: 5px;
  background-color: #e8e8e8;
}

.input .-error {
  background-color: #fff;
}

.input:focus {
  background-color: #fff;
}

.textarea {
  padding: 15px;
  resize: none;
  width: 100%;
  height: 100px;
}

strong {
  font-weight: 500;
}

/** Анимация загрузки **/
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loader div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #000;
  animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loader div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.loader div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.loader div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes loader {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}