@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@import url("https://fonts.googleapis.com/css?family=Roboto:400");

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

:root {
  --x5b648a: #fdfeff;
  --primary300: #5a638a;
  --black: #000000;
  --snuff: #d7daeb;
  --mystic: #e5e6f0;
  --blue-bell: #979fc1;
  --font-size-m3: 16px;
  --font-size-l2: 20px;
  --font-family-roboto: "Roboto", Helvetica;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

.menu-item-categories a {
  color: #68719a !important;
  text-decoration: none !important;
}

.menu-item-categories a:hover {
  color: #68719a !important;
  text-decoration: none !important;
}

.hide-modal-categories {
  display: none !important;
}

.hide-modal-ebook {
  display: none !important;
}

.hide-modal-settings {
  display: none !important;
}

.modal-categories {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(29, 28, 31, 0.9);
  z-index: 200;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.categories-menu-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 284px;
}

.menu-item-categories {
  align-items: center;
  align-self: stretch;
  background-color: var(--mystic);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--snuff);
  display: flex;
  height: 40px;
  padding: 10px 10px 10px 46px;
  position: relative;
  width: 100%;
  cursor: pointer;
  transition: 0.3s;
}

.menu-item-categories:hover {
  background-color: #dadceb;
  /* color: #fff !important; */
  padding: 10px 10px 10px 46px;
}

.menu-item-categories-text {
  flex: 1;
  font-weight: 400;
  line-height: 19.2px;
  margin-top: -0.5px;
  position: relative;
}

.categories-menu-item-font {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m3);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* .menu-item-categories a {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m3);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: #68719a;
  text-decoration: none;
}

.menu-item-categories a:hover {
  color: #fff !important;
  text-decoration: none;
} */

.categories-panel {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}

.container-panel-top-bar {
  align-items: center;
  align-self: stretch;
  background-color: var(--blue-bell);
  display: flex;
  height: 50px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.categories-icon-close {
  height: 24px;
  left: 257px;
  position: absolute;
  top: 3px;
  width: 24px;
  cursor: pointer;
  transition: 0.3s;
}

.categories-icon-close:hover {
  opacity: 0.75;
}

.categories-title-box {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 10px;
  justify-content: center;
  padding: 0px 29px;
  position: relative;
}

.categories-title-text {
  color: #fff;
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l2);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 2px #00000040;
}

.categories-panel-bottom-bar-box {
  align-self: stretch;
  background-color: var(--blue-bell);
  height: 50px;
  position: relative;
  width: 100%;
}