.toolbar .index { background-image: url(img/koten/toolbar-index.png); }
.toolbar [data-action="show-all"],
.toolbar [data-action="hide-all"] { display: block; }
.toolbar [data-action="show-all"] { background-image: url(img/koten/toolbar-show-all.png); }
.toolbar [data-action="show-all"]::after,
.toolbar [data-action="show-all"]:disabled { background-image: url(img/koten/toolbar-show-all-disabled.png); }
.toolbar [data-action="hide-all"],
.toolbar [data-action="hide-all"]:disabled::after { background-image: url(img/koten/toolbar-hide-all.png) }
.toolbar [data-action="hide-all"]:disabled { background-image: url(img/koten/toolbar-hide-all-disabled.png); }

.tabbar {
  position: absolute;
  left: 0;
  top: 5.58rem;
  z-index: 11;
}
.tabbar button {
  display: block;
  margin-bottom: .22rem;
  width: 1.14rem;
  height: 1.45rem;
  border-radius: 0 .14rem .14rem 0;
  background: center / .44rem no-repeat #8db7da;
}
.tabbar button::after { /* for preloading */
  content: '';
  z-index: -1;
  visibility: hidden;
}
.tabbar > .active { background-color: white; }
.tabbar > :nth-child(1),
.tabbar > :nth-child(1).active::after { background-image: url(img/koten/tab-1.png); }
.tabbar > :nth-child(1).active { background-image: url(img/koten/tab-1-active.png); }
.tabbar > :nth-child(2) { background-image: url(img/koten/tab-2.png);}
.tabbar > :nth-child(2).active,
.tabbar > :nth-child(2)::after { background-image: url(img/koten/tab-2-active.png); }