/* == 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 {
  margin-left: .5rem;
  font-weight: 400
}
/* == 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.active,
.wojo.celled.horizontal.list > .item.active {
  font-weight: 700;
  color: var(--dark-color);
}
.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;
}
.wojo.horizontal.compact.list .item {
padding-left: .5rem;
margin-left: .5rem;
}
/* == Compact == */
/* == Sortable == */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list .dd-list {
  padding-left: 2em;
}
.dd-collapsed .dd-list {
  display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;/*min-height: 2em;*/
}
.dd-item {
  box-shadow: 0 1px 0 0 #1E88E5, 1px 0 0 0 #1E88E5;
}
.dd-item:first-child {
  box-shadow: 0 1px 0 0 #1E88E5, 0 -1px 0 0 #1E88E5, 1px 0 0 0 #1E88E5;
}
.dd-handle {
  display: block;
  height: 2em;
  margin: 5px 0;
  padding: 5px 10px;
  text-decoration: none;
  background: #fafafa;
  box-sizing: border-box;
}
.dd-handle:hover {
  color: #2ea8e5;/*background: #fff;*/
}
.dd-item > button {
  font-family: 'WojoIcons';
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 2rem;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  white-space: nowrap;
  border: 0;
  background: transparent;
  text-align: center;
}
.dd-item > button::before {
  content: "\e948";
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: -.613rem;
}
.dd-item > button[data-action="collapse"]:before {
  content: "\e94b";
}
.dd-placeholder,
.dd-empty {
  padding: 0;
  min-height: 2em;
  background: #f2fbff;
  border: 1px dashed var(--primary-color);
  box-sizing: border-box;
}
.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
}
.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}
.dd-dragel .dd-handle {
  box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
.dd3-content {
  display: block;
  margin: 0;
  padding: .750em 1em .750em 4em;
  font-size: .875em;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
}
.dd3-content:hover {
}
.dd3-content > a {
  margin-right: 2em;
  color: #222;
  font-weight: 400;
}
.dd-dragel > .dd3-item > .dd3-content {
  margin: 0;
}
.dd3-item > button {
  margin-left: 2.5em;
}
.dd3-handle {
  font-family: 'WojoIcons';
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  cursor: move;
  width: 2em;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-color: var(--primary-color);;
  line-height: 1;
}
.dd3-handle:before {
  content: "\ea1a";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 100%;
  text-align: center;
  color: #fff;
}
.dd3-handle:hover {
  background-color: var(--dark-color);;
}
.dd3-content .actions {
  float: right;
}
.wojo.placeholder,
.wojo.sortable .empty,
.sort.active,
.wojo.sortable .ghost,
.ghost {
  margin: 0;
  padding: 0;
  background: var(--primary-color-inverted);
  outline: 4px solid var(--primary-color);
}
/* == 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;
}
}