.demo-viewport {
  height: 500px;
  width: 500px;
  border: 1px solid black;

  .cdk-virtual-scroll-content-wrapper {
    display: flex;
    flex-direction: column;
  }
}

.demo-horizontal {
  .cdk-virtual-scroll-content-wrapper {
    flex-direction: row;
  }

  .demo-item {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
  }
}

.demo-state-item {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-state {
  font-size: 20px;
  font-weight: 500;
}

.demo-capital {
  font-size: 14px;
}

.demo-dt {
  height: 30px;
  font-weight: bold;
}

.demo-dd {
  height: 30px;
}

.demo-li,
.demo-td {
  height: 50px;
}

.demo-td {
  border: 1px solid gray;
}

.demo-resize-example {
  display: flex;
  width: 500px;
  height: 500px;
}

cdk-virtual-scroll-window-scrolling-example {
  display: block;
  width: 500px;
}
