body {
  font-family: sans-serif;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

.main {
  display: flex;
  height: calc(100vh - 16.0px);
  background-color: #EEE8E8;
}

.navbar {
  width: 300.0px;
  background-color: #FFF;
  padding: 8.0px;
}

.content {
  width: calc(100vw - 300px);
  padding: 8.0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16.0px;
}

.board-head {

}

.board-heading {
  font-size: 18px;
}

.board-lanes {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  overflow-x: scroll;
  flex-grow: 1;
}

.lane {
  min-width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8.0px;
}

.lane-head {
  background-color: #FAFAFA;
  padding: 8.0px;
  border-radius: 8.0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.lane-inner {
  gap: 8.0px;
  overflow-y: scroll;
  border: solid #888 1px;
  padding: 8.0px;
  flex-direction: column;
  min-height: 100.0px;
  background-color: #F3EEEE;
  border-radius: 4px;
  display: flex;
}

.icon-button {
  display: inline-block;
  width: 16.0px;
  height: 16.0px;
  padding: 4.0px;
}

.drag-over > .lane-inner {
  background-color: #F5F0EA;
  flex-grow: 1;
}

.card-inner {
  gap: 8px;
  max-width: 300.0px;
  justify-content: space-between;
  border: solid #444 1px;
  padding: 8px;
  flex-direction: column;
  min-height: 100.0px;
  cursor: pointer;
  background-color: #FAFAFA;
  border-radius: 4px;
  display: flex;
}

.card-header {
  font-size: 12px;
  color: #333;
}

.card-content {
  flex-grow: 1;
  font-size: 16px;
}

.card-footer {

}

.card-footer-right {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.card-title {
  view-transition-name: post-title;
}

.card-page-card-title {
  font-size: 32.0px;
}

.drop-zone-below {
  height: 8.0px;
}

.drop-zone-inner {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8.0px;
  margin: 4.0px;
  height: 100.0px;
  font-size: 12px;
}

.drag-over.drop-zone-below {
  height: auto;
}

.drag-over > .drop-zone-inner {
  display: flex;
}

.drag-over.card {

}

.horizontal-space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.person-icon {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #000;
}

.scrollable {
  overflow-y: scroll;
}

.scrollable::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollable::-webkit-scrollbar-track {
  background-color: #F3EEEE;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 6px;
  border: 2px solid #000;
}