:root {
 --hb-library-green: #97C15A;
 --hb-library-sage: #498559;
 --hb-library-soft: #f8fbf2;
 --hb-library-soft-2: #eef5df;
 --hb-library-line: #d8e4cc;
 --hb-library-white: #ffffff;
 --hb-library-ink: #173737;
 --hb-library-yellow: #f7d66b;
 --hb-library-orange: #ff9f5a;
 --hb-library-blue: #7cc7d9;
 --hb-library-pink: #f4a6c8;
 --hb-library-danger: #ef4d43;
}

.hb-v11-library-body {
 background: #ffffff;
 color: var(--hb-library-ink);
 overflow-x: hidden;
 overflow-y: scroll;
 scrollbar-gutter: stable;
}

.hb-v11-library-shell {
 width: min(1760px, calc(100% - 48px));
}

.hb-v11-library-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 20px 18px 14px;
 background: transparent;
}

.hb-v11-library-header h1 {
 margin: 0;
 color: var(--hb-library-ink);
 font-size: 1.65rem;
 font-weight: 400;
 letter-spacing: 0;
}

.hb-v11-library-tools {
 display: grid;
 grid-template-columns: auto minmax(260px, 1fr) minmax(170px, 220px) minmax(150px, 190px) minmax(92px, 104px) minmax(150px, auto);
 gap: 10px;
 align-items: center;
 margin: 0 18px;
 border: 1px solid color-mix(in srgb, var(--hb-library-green) 58%, var(--hb-library-line));
 border-bottom: 0;
 border-left: 5px solid var(--hb-library-green);
 border-radius: 8px 8px 0 0;
 padding: 10px 12px;
 background: color-mix(in srgb, var(--hb-library-green) 12%, white);
}

.hb-v11-library-tools label {
 white-space: nowrap;
 color: var(--hb-library-ink);
 font-weight: 400;
}

.hb-v11-library-tools input,
.hb-v11-library-tools select {
 box-sizing: border-box;
 width: 100%;
 min-height: 40px;
 border: 1px solid var(--hb-library-line);
 border-radius: 8px;
 padding: 7px 12px;
 background: #ffffff;
 color: var(--hb-library-ink);
 font: inherit;
 font-weight: 400;
 line-height: 1.25;
}

.hb-v11-library-tools input::placeholder {
 color: #70807e;
}

.hb-v11-library-tools input:focus,
.hb-v11-library-tools select:focus {
 border-color: var(--hb-library-green);
 box-shadow: 0 0 0 3px rgba(151, 193, 90, 0.2);
 outline: none;
}

.hb-v11-library-button,
.hb-v11-library-demo-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 border: 1px solid color-mix(in srgb, var(--hb-library-green) 72%, var(--hb-library-sage));
 border-radius: 8px;
 padding: 7px 15px;
 background:
  linear-gradient(180deg, color-mix(in srgb, var(--hb-library-green) 36%, white), var(--hb-library-green));
 color: var(--hb-library-ink);
 font: inherit;
 font-weight: 400;
 text-decoration: none;
 box-shadow: 0 5px 11px rgba(73, 133, 89, 0.22);
 cursor: pointer;
}

.hb-v11-library-tools .hb-v11-library-button {
 width: 100%;
}

.hb-v11-library-button:hover,
.hb-v11-library-demo-button:hover {
 transform: translateY(-1px);
}

.hb-v11-library-count {
 justify-self: end;
 color: #48635e;
 white-space: nowrap;
}

.hb-v11-library-panel {
 overflow-x: auto;
 margin: 0 18px 40px;
 border: 1px solid color-mix(in srgb, var(--hb-library-green) 58%, var(--hb-library-line));
 border-radius: 0 0 8px 8px;
 background: rgba(255, 255, 255, 0.97);
}

.hb-v11-library-table {
 width: 100%;
 min-width: 1180px;
 border-collapse: collapse;
 table-layout: fixed;
 color: var(--hb-library-ink);
}

.hb-v11-library-table th,
.hb-v11-library-table td {
 border-bottom: 1px solid var(--hb-library-line);
 padding: 11px 12px;
 vertical-align: middle;
}

.hb-v11-library-table th {
 background: color-mix(in srgb, var(--hb-library-green) 14%, white);
 color: var(--hb-library-ink);
 font-size: 0.95rem;
 font-weight: 400;
 text-align: center;
}

.hb-v11-library-table th:nth-child(1) {
 width: 260px;
 text-align: center;
}

.hb-v11-library-table td:nth-child(1) {
 width: 260px;
 text-align: left;
}

.hb-v11-library-table th:nth-child(2) {
 width: 230px;
 text-align: left;
}

.hb-v11-library-table td:nth-child(2) {
 width: 230px;
 text-align: left;
}

.hb-v11-library-table th:nth-child(3) {
 text-align: center;
}

.hb-v11-library-table td:nth-child(3) {
 text-align: left;
 line-height: 1.35;
}

.hb-v11-library-table th:nth-child(4),
.hb-v11-library-table td:nth-child(4) {
 width: 140px;
 text-align: center;
}

.hb-v11-library-row {
 background: rgba(255, 255, 255, 0.98);
}

.hb-v11-library-row[data-category="vocabulary"] {
 --row-colour: var(--hb-library-green);
}

.hb-v11-library-row[data-category="grammar"] {
 --row-colour: var(--hb-library-yellow);
}

.hb-v11-library-row[data-category="receptive"] {
 --row-colour: var(--hb-library-blue);
}

.hb-v11-library-row[data-category="productive"] {
 --row-colour: var(--hb-library-pink);
}

.hb-v11-library-row td:first-child {
 border-left: 6px solid var(--row-colour, var(--hb-library-green));
}

.hb-v11-library-row.is-open {
 background: color-mix(in srgb, var(--row-colour, var(--hb-library-green)) 9%, white);
}

.hb-v11-library-toggle {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 max-width: 100%;
 border: 0;
 padding: 0;
 background: transparent;
 color: var(--hb-library-ink);
 font: inherit;
 font-weight: 400;
 text-align: left;
 cursor: pointer;
}

.hb-v11-library-toggle:hover span:last-child {
 transform: scale(1.025);
}

.hb-v11-library-activity-name {
 display: inline-flex;
 align-items: center;
 min-height: 30px;
 color: var(--hb-library-ink);
}

.hb-v11-library-demo-button.is-disabled {
 border-color: var(--hb-library-line);
 background: #f8fbf2;
 color: #70807e;
 box-shadow: none;
 cursor: default;
}

.hb-v11-library-detail-row[data-category="vocabulary"] {
 --row-colour: var(--hb-library-green);
}

.hb-v11-library-detail-row[data-category="grammar"] {
 --row-colour: var(--hb-library-yellow);
}

.hb-v11-library-detail-row[data-category="receptive"] {
 --row-colour: var(--hb-library-blue);
}

.hb-v11-library-detail-row[data-category="productive"] {
 --row-colour: var(--hb-library-pink);
}

.hb-v11-library-detail-row > td {
 padding: 0;
 background: color-mix(in srgb, var(--row-colour, var(--hb-library-green)) 8%, white);
}

.hb-v11-library-details {
 border-left: 6px solid var(--row-colour, var(--hb-library-green));
 padding: 14px 18px 16px;
}

.hb-v11-library-detail-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: 14px;
 align-items: start;
 max-width: 860px;
}

.hb-v11-library-detail-section {
 border: 1px solid color-mix(in srgb, var(--row-colour, var(--hb-library-green)) 34%, var(--hb-library-line));
 border-left: 6px solid var(--row-colour, var(--hb-library-green));
 border-radius: 8px;
 padding: 12px 14px;
 background: rgba(255, 255, 255, 0.82);
}

.hb-v11-library-detail-section h3 {
 margin: 0 0 8px;
 color: var(--hb-library-ink);
 font-size: 1rem;
 font-weight: 600;
}

.hb-v11-library-fit-line {
 display: grid;
 grid-template-columns: 132px minmax(0, 1fr);
 gap: 12px;
 padding: 6px 0;
 border-top: 1px solid color-mix(in srgb, var(--row-colour, var(--hb-library-green)) 24%, var(--hb-library-line));
}

.hb-v11-library-fit-line span:first-child {
 color: color-mix(in srgb, var(--row-colour, var(--hb-library-green)) 72%, var(--hb-library-ink));
 white-space: nowrap;
}

.hb-v11-library-empty {
 padding: 18px;
 color: #48635e;
}

@media (max-width: 980px) {
 .hb-v11-library-shell {
  width: min(100%, calc(100% - 20px));
 }

 .hb-v11-library-tools {
  grid-template-columns: 1fr;
  margin-inline: 10px;
 }

 .hb-v11-library-count {
  justify-self: start;
 }

 .hb-v11-library-panel {
  margin-inline: 10px;
 }

 .hb-v11-library-detail-grid {
  grid-template-columns: 1fr;
 }
}