/* == List == */
ul.wojo.list,
ol.wojo.list {
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}
ul.wojo.list li,
ol.wojo.list li {
  list-style-type: none;
  list-style-position: outside;
  padding: .125rem 0;
}
ul.wojo.list ul,
ol.wojo.list ol,
ul ul,
ol ol {
  margin: 0;
  padding: 0 0 0 .750rem;
}
.wojo.list .item {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  margin-bottom: .250rem;
}
.wojo.list.middle.aligned .item {
  align-items: center;
}
.wojo.list .item > .content,
.wojo.list .item > .icon {
  flex: 1 1 0px;
  min-width: 0;
}
.wojo.list .item > .icon,
.wojo.list .item > b.index {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-right: 1rem;
}
.wojo.list .item > .image {
  margin-right: 1rem;
}
.wojo.list .item .icon:only-child,
.wojo.list .item .image:only-child {
  -ms-grid-row-align: center;
  align-self: center;
}
.wojo.list .item .header {
  line-height: 1rem;
  margin-bottom: .250rem;
  font-weight: 600
}
.wojo.list .item .description {
  font-size: .875rem;
}
/* == horizontal == */
.wojo.horizontal.list {
  display: inline-flex;
  flex-flow: row wrap;
}
.wojo.horizontal.list > .item {
  margin-left: 1rem;
  align-items: center;
}
.wojo.horizontal.list:not(.celled):not(.bulleted) > .item:first-child {
  margin-left: 0em;
  padding-left: 0em;
}
/* == divided == */
.wojo.divided.list:not(.horizontal) > .item {
  border-top: 1px solid var(--grey-color-300);
}
.wojo.divided.list:not(.horizontal) > .item:first-child {
  border-top: none;
}
.wojo.divided.horizontal.list > .item,
.wojo.celled.horizontal.list > .item {
  padding-left: 1rem;
}
.wojo.divided.horizontal.list > .item::before,
.wojo.celled.horizontal.list > .item::before,
.wojo.horizontal.celled.list > .item:last-child::after {
  border-left: 1px solid var(--grey-color-300);
  height: 50%;
  left: 0;
  top: 25%;
  width: 1px;
  position: absolute;
  content: '';
}
.wojo.horizontal.divided.list > .item:first-child::before {
  border: none;
}
/* == celled == */
.wojo.celled.list:not(.horizontal) > .item {
  border-top: 1px solid var(--grey-color-300);
  padding: 0.5rem;
}
.wojo.celled.list:not(.horizontal) > .item:last-child {
  border-bottom: 1px solid var(--grey-color-300);
}
.wojo.horizontal.celled.list > .item:last-child::after {
  left: auto;
  right: -1rem;
}
.wojo.celled.horizontal.list > .item:first-child {
  margin-left: 0;
}
/* == relaxed == */
.wojo.relaxed.list:not(.horizontal) > .item:not(:first-child) {
  padding-top: 0.5rem;
}
.wojo.relaxed.list:not(.horizontal) > .item:not(:last-child) {
  padding-bottom: 0.5rem;
}
.wojo.horizontal.relaxed.list .list > .item:not(:first-child),
.wojo.horizontal.relaxed.list > .item:not(:first-child) {
  padding-left: 1rem;
}
.wojo.horizontal.relaxed.list .list > .item:not(:last-child),
.wojo.horizontal.relaxed.list > .item:not(:last-child) {
  padding-right: 1rem;
}
.wojo[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
  padding-top: 0.875em;
}
.wojo[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
  padding-bottom: 0.875em;
}
.wojo.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
.wojo.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
  padding-left: 1.5rem;
}
.wojo.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
.wojo.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
  padding-right: 1.5rem;
}
/* == Flex == */
.wojo.fluid.list .item {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 0;
}
.wojo.fluid.list .item > .content {
  flex: 1 1 0px;
  min-width: 0;
}
.wojo.fluid.list .item > .content.auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
/* == Sortable == */
ol.wojo.sortable {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height:2em;
}
ol.wojo.sortable li {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  align-items: center;
}
ol.wojo.sortable li .item {
  flex: 1 1 0px;
  min-width: 0;
  padding:.5em;
  line-height:1rem;
}
ol.wojo.sortable li .item.auto {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
}
ol.wojo.selection.sortable li {
  cursor: pointer;
}
ol.wojo.selection.sortable li.active,
ol.wojo.selection.sortable li.active:hover {
  box-shadow: inset 0 0 0 1px #d4e157;
  background: #f9fbe7;
}
ol.wojo.selection.sortable li:hover {
  background-color: #F7F9FA;
}
ol.wojo.divided.sortable li {
  border-bottom: 1px solid var(--grey-color-300);
}
ol.wojo.celled.sortable li {
  border-top: 1px solid var(--grey-color-300);
}
ol.wojo.celled.sortable li:last-child {
  border-bottom: 1px solid var(--grey-color-300);
}
ol.wojo.sortable .handle {
  cursor: move;
  color: var(--body-color);
}
ol.wojo.sortable .handle .icon{
  vertical-align:middle;
}
ol.wojo.sortable li.ghost {
  background-color: #f9fbe7;
  border:1px solid #d4e157;
}
/* == Items == */
.wojo.items {
  display: flex;
  flex-direction: column;
}
.wojo.items > .item {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  position:relative;
}
.wojo.items > .item > .columns {
  flex: 1 1 0px;
  min-width: 0;
  padding: 0.750em;
  white-space: nowrap;
}
.wojo.items > .item > .columns.auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}
.wojo.items > .item > .columns > .header {
  font-weight:500;
}
.wojo.divided.items > .item {
  border-top: 1px solid var(--grey-color-300);
}
.wojo.celled.items > .item {
  border-top: 1px solid var(--grey-color-300);
}
.wojo.celled.items > .item:last-child {
  border-bottom: 1px solid var(--grey-color-300);
}
/* == Grid Based == */
.wojo.items > .item > .columns.one.wide {
  flex: 0 0 10%;
  max-width: 10%;
}
.wojo.items > .item > .columns.two.wide {
  flex: 0 0 20%;
  max-width: 20%;
}
.wojo.items > .item > .columns.three.wide {
  flex: 0 0 30%;
  max-width: 30%;
}
.wojo.items > .item > .columns.four.wide {
  flex: 0 0 40%;
  max-width: 40%;
}
.wojo.items > .item > .columns.five.wide {
  flex: 0 0 50%;
  max-width: 50%;
}
.wojo.items > .item > .columns.six.wide {
  flex: 0 0 60%;
  max-width: 60%;
}
.wojo.items > .item > .columns.seven.wide {
  flex: 0 0 70%;
  max-width: 70%;
}
.wojo.items > .item > .columns.eight.wide {
  flex: 0 0 80%;
  max-width: 80%;
}
.wojo.items > .item > .columns.nine.wide {
  flex: 0 0 90%;
  max-width: 90%;
}
.wojo.items > .item > .columns.ten.wide {
  flex: 0 0 100%;
  max-width: 100%;
}
/* == size == */
.wojo.mini.list {
  font-size: 0.750rem;
}
.wojo.tiny.list,
.wojo.tiny.items {
  font-size: 0.813rem;
}
.wojo.small.list,
.wojo.small.items {
  font-size: 0.938rem;
}
.wojo.list,
.wojo.items {
  font-size: 1rem;
}

@media screen and (max-width:48.063em) {
.wojo.items {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.wojo.items > .item > .columns.one.wide,
.wojo.items > .item > .columns.two.wide,
.wojo.items > .item > .columns.three.wide,
.wojo.items > .item > .columns.four.wide,
.wojo.items > .item > .columns.five.wide,
.wojo.items > .item > .columns.six.wide,
.wojo.items > .item > .columns.seven.wide,
.wojo.items > .item > .columns.eight.wide,
.wojo.items > .item > .columns.nine.wide,
.wojo.items > .item > .columns.ten.wide,
.wojo.items > .item > .columns  {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}
.wojo.divided.items > .item {
  border-top: 1px solid var(--grey-color-300);
  border-left: 1px solid var(--grey-color-300);
}
.wojo.divided.items > .item:first-child {
  border-left: 0;
}
}