#menu-button {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-dropdown-menu.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-dropdown-menu.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#menu-button:hover, #menu-button.active {
  background-color: #121314;
}

#search-button {
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-search.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-search.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#search-button:hover, #search-button.active {
  background-color: #121314;
}

.search-inp-btn {
  width: 1.3125rem;
  height: 1.3125rem;
  display: flex;
  align-items: center;
  background-color: #d9dbe0;
  -webkit-mask-image: url("../img/icon/icon-search.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-search.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
@media screen and (min-width: 768px) {
  .search-inp-btn {
    background-color: #47494d;
  }
}
.search-inp-btn:hover, .search-inp-btn.active {
  background-color: #47494d;
}

.reset-inp-btn {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  background-color: #d9dbe0;
  border-radius: 50%;
}
.reset-inp-btn::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #f3f5fa;
  -webkit-mask-image: url("../img/icon/icon-X.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-X.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
.reset-inp-btn:hover, .reset-inp-btn.active {
  background-color: #47494d;
}

#copy-button {
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#copy-button:hover::after, #copy-button.active::after {
  background-color: #121314;
}
#copy-button::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-copy.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-copy.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}

#aside-button {
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
#aside-button:active, #aside-button:focus {
  outline: none;
}
#aside-button::after {
  content: "";
  width: 24px;
  height: 24px;
  margin: 13px;
  border: 1px solid red;
  background-color: #47494d;
  -webkit-mask-image: url("../img/icon/icon-chapter.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-chapter.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}

.active #aside-button::after {
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-side-close-right.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-side-close-right.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}

#page-prev {
  display: flex;
}
#page-prev::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-prev.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-prev.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#page-prev:hover::after {
  background-color: #47494d;
  -webkit-mask-image: url("../img/icon/icon-prev.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-prev.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#page-prev:disabled::after {
  background-color: #d9dbe0;
  -webkit-mask-image: url("../img/icon/icon-prev.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-prev.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}

#page-next {
  display: flex;
}
#page-next::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #8d9299;
  -webkit-mask-image: url("../img/icon/icon-next.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-next.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#page-next:hover::after {
  background-color: #47494d;
  -webkit-mask-image: url("../img/icon/icon-next.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-next.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}
#page-next:disabled::after {
  background-color: #d9dbe0;
  -webkit-mask-image: url("../img/icon/icon-next.svg");
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url("../img/icon/icon-next.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}/*# sourceMappingURL=style.css.map */