:root {
  --color-text: #000000;
  --color-unactive: #00000080;
  --color-border: #0000001A;
  --color-primary: #0C4999;
  --color-primary-unactive: #0C499980;
  --color-primary-light: #0C49991A;
  --color-error: #e8042a;
  --color-primary-hover: #1A66CA;
  --color-white: #FFFFFF;
  --color-white-transparent: #FFFFFF80;
  --color-white-hover: #FFFFFFCC;
  --color-bg: #0E1424;
  --color-block-bg: #0C49991A;
  --color-tooltip-text: #00000066;
  --border-radius: 2px;
  --border-radius-circle: 100%;
  --border-width: 2px;
  --transition: all .15s ease-in-out;
  --transition-for: .15s ease-in-out;
  --transition-button: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  --transition-property: .15s ease-in-out;
  --font-family: "Roboto Flex", sans-serif;
  --font-size-base: 20px;
  --font-size-xs: 15px;
  --font-size-xm: 16px;
  --font-size-sm: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 24px;
  --font-size-xxl: 26px;
  --font-size-xxxl: 56px;
  --font-size-title: 32px;
  --font-size-h1: 36px;
  --font-weight: 400;
  --font-weight-bold: 500;
  --cursor-pointer: pointer;
  --block-padding: 45px 55px;
  --shadow: 0px 5px 50px 0px #00000080;
  --base-margin: 14px;
  --title-margin: 30px;
  --section-margin: 45px;
  --title-margin-xl: 48px;
  --base-gap: 30px;
  --input-padding: 14px 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size-xm: 12px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 14px;
    --font-size-xxxl: 36px;
    --font-size-title: 20px;
    --font-size-h1: 20px;
    --block-padding: 18px 23px;
    --title-margin: 16px;
    --title-margin-xl: 28px;
    --base-gap: 12px;
    --input-padding: 14px 15px;
    --section-margin: 17px;
  }
}
.pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 0 28px;
}
.pagination__item {
  transition: var(--transition);
  -webkit-transition: var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 17px 8px;
  min-width: 56px;
  height: 56px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  border: var(--border-width) solid var(--color-primary);
  color: var(--color-primary);
  cursor: pointer;
}
.pagination__item:not(:first-child) {
  margin-left: -2px;
}
.pagination__item.active, .pagination__item:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.pagination__button {
  transition: var(--transition);
  -webkit-transition: var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 14px 35px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-border);
  cursor: pointer;
}
.pagination__button.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination__button:not(div):hover {
  background: var(--color-primary);
  color: var(--color-white);
}
@media (max-width: 768px) {
  .pagination {
    margin-top: 24px;
  }
  .pagination__list {
    padding: 0 14px;
  }
  .pagination__item {
    padding: 3px 1px;
    min-width: 24px;
    height: 24px;
    font-size: var(--font-size-xm);
  }
  .pagination__button {
    padding: 3px 6px;
    font-size: var(--font-size-xm);
  }
}

/*# sourceMappingURL=style.css.map */