.documentlist {
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  gap:2rem;
  -webkit-box-align:start;
  -webkit-align-items:flex-start;
  -moz-box-align:start;
  -ms-flex-align:start;
align-items:flex-start}

.sidebar {
  width:21.5rem;
  -webkit-flex-shrink:0;
  -ms-flex-negative:0;
  flex-shrink:0;
  position:-webkit-sticky;
  position:sticky;
top:1.25rem}

.category-list {
  list-style:none;
  padding:0;
  margin:0;
  padding:1rem 0;
  background:var(--white);
  -webkit-border-radius:.5rem;
  -moz-border-radius:.5rem;
  border-radius:.5rem;
  -webkit-box-shadow:var(--shadow);
  -moz-box-shadow:var(--shadow);
  box-shadow:var(--shadow);
overflow:hidden}

.category-item {
  margin-bottom: 0;
  padding:.9375rem 1.25rem;
  cursor:pointer;
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -moz-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -moz-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  color:var(--blue1);
  -webkit-transition:all .2s ease;
  -o-transition:all .2s ease;
  -moz-transition:all .2s ease;
  transition:all .2s ease;
border-left:.1875rem solid transparent}

.category-item:hover {
  background-color:var(--grey2);
color:var(--gold)}

.category-item.active {
  background-color:var(--grey2);
  color:var(--gold);
border-left-color:var(--gold)}

.count-badge {
  background-color:var(--grey2);
  color:var(--grey1);
  font-size:.75rem;
  padding:.125rem .5rem;
  -webkit-border-radius:.75rem;
  -moz-border-radius:.75rem;
  border-radius:.75rem;
  min-width:1.75rem;
  margin-left: .5rem;
  text-align:center;
  -webkit-transition:all .2s ease;
  -o-transition:all .2s ease;
  -moz-transition:all .2s ease;
transition:all .2s ease}

.category-item.active .count-badge {
  background-color:var(--gold);
color:var(--white)}

.content-area {
  -webkit-box-flex:1;
  -webkit-flex-grow:1;
  -moz-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
min-width:0}

.document-item {
  background:var(--white);
  border:.0625rem solid var(--grey2);
  -webkit-border-radius:.5rem;
  -moz-border-radius:.5rem;
  border-radius:.5rem;
  margin-bottom:.9375rem;
  padding:1.25rem;
  overflow:hidden;
  -webkit-transition:-webkit-box-shadow .2s ease;
  transition:-webkit-box-shadow .2s ease;
  -o-transition:box-shadow .2s ease;
  -moz-transition:box-shadow .2s ease,-moz-box-shadow .2s ease;
  transition:box-shadow .2s ease;
transition:box-shadow .2s ease,-webkit-box-shadow .2s ease,-moz-box-shadow .2s ease}

.document-item:hover {
  -webkit-box-shadow:var(--shadow);
  -moz-box-shadow:var(--shadow);
  box-shadow:var(--shadow);
border-color:var(--gold)}

.document-header {
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -moz-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -moz-box-align:center;
  -ms-flex-align:center;
  align-items:center;
margin-bottom:.9375rem}
.document-header h3, .document-header h6{
    margin-bottom: 0;
}
.price {
  color:var(--gold);
white-space:nowrap}



@media(max-width:48rem) {
  .documentlist {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-flex-direction:column;
  flex-direction:column}

  .sidebar {
    width:100%;
    position:static;
  margin-bottom:1.25rem}

  .category-list {
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    padding:.5rem 0;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
  background:transparent}

  .category-item {
    border:.0625rem solid var(--grey2);
    -webkit-border-radius:1.25rem;
    -moz-border-radius:1.25rem;
    border-radius:1.25rem;
    margin-right:.625rem;
    padding:.5rem 1rem;
    font-size:.875rem;
  border-left:.0625rem solid var(--grey2)}

  .category-item.active {
    border-color:var(--gold);
    background-color:var(--gold);
  color:var(--white)}

  .category-item.active .count-badge {
    background-color:var(--gold);
  color:var(--white)}

  .document-header h3 {
    font-size:1rem;
  }
}