/* title bar */
div[class^="p-titlebar-cat-"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(25px, 3vw, 50px);
  margin-bottom: clamp(15px, 1.5vw, 30px);
}
span.p-titlebar-titleleft-text {
  cursor: default;
}
div.p-titlebar-titleleft {
  display: flex;
  align-items: center;
  font-size: clamp(18px, 2dvw, 28px);
}

/*titlebar button*/
div[class^="p-titlebar-cat-"] span.p-titlebar-titleleft-text {
  font-weight: 600;
  margin-left: 0.25em;
}
div[class^="p-titlebar-cat-"] a.p-titlebar-titleleft-btn {
  color: black;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background-color: var(--btn-color);
  padding: 0.25em 0.75em 0.25em 0.75em;
  white-space: nowrap;
  margin-left: 0.65em;
  margin-right: 0.65em;
  font-size: clamp(14px, 1.5vw, 20px);
  transition: 0.3s ease;
}
div[class^="p-titlebar-cat-"] a.p-titlebar-titleleft-btn:hover {
  color: white !important;
  border: 1px solid white !important;
}
div[class^="p-titlebar-cat-"] a,
div[class^="p-titlebar-cat-"] span {
  color: #222;
}

/*left-right buttons */
a.p-titlebar-titleright-linkL,
a.p-titlebar-titleright-linkR {
  font-size: 0;
}
div.p-titlebar-titleright {
  display: flex;
  column-gap: clamp(5px, 1vw, 10px);
  line-height: 1;
}
a.p-titlebar-titleright-linkL::after,
a.p-titlebar-titleright-linkR::after {
  font-family: "Font Awesome 6 free";
  font-size: 16px;
  font-weight: 600;
  background-color: lightgray;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: 0.3s ease;
  padding-top: clamp(2px, 1vw, 7px);
  padding-bottom: clamp(2px, 1vw, 7px);
  padding-left: clamp(7px, 1.25vw, 14px);
  padding-right: clamp(7px, 1.25vw, 14px);
}
a.p-titlebar-titleright-linkL:hover::after,
a.p-titlebar-titleright-linkR:hover::after {
  background-color: gray !important;
}
a.p-titlebar-titleright-linkL::after {
  content: "\f053";
}
a.p-titlebar-titleright-linkR::after {
  content: "\f054";
}

/* image */
img.p-titlebar-titleleft-icon {
  width: 50px;
}