/* == Segment == */
.wojo.segment,
.wojo.card {
  position: relative;
  background: #ffffff;
  margin: 2rem 0em;
  padding: 2em;
  border-radius: .250rem;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.14);
}
.wojo.top.attached.segment,
.wojo.top.attached.card {
  margin-top: 0px;
  margin-bottom: 2em;
}
.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
  margin-bottom: 0px;
  margin-top: 2em;
}
.wojo.attached.segment,
.wojo.attached.card {
  margin: 0 0;
}
.wojo.card {
  padding: 0;
}
.wojo.card > .header,
.wojo.card > .header.banner {
  border-radius: .250rem;
  top: -1em;
  padding: 1em;
  position: relative;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(233,30,99,.4);
  background: linear-gradient(60deg, #ec407a, #d81b60);
  margin: 0 1em;
}
.wojo.card > .header.banner {
  margin: 0;
  width: calc(100% + 2rem);
  left: 1em;
}
.wojo.card > .content {
  padding: 2em;
}
.wojo.card > .content.small {
  padding: 1em;
}
.wojo.card .description {
  padding: 1em;
}
.wojo.card > .image.avatar {
  margin: auto 0;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  width: 150px;
  height: 150px;
  position: relative;
  top: -50px;
  left: 50%;
  background: #fff;
  display: inline-flex;
  transform: translate(-50%);
  box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.wojo.card > .image.photo {
  position: relative;
  margin: 2em;
  z-index: 1;
  top: -1em;
  border-radius: 0.250em;
  box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.wojo.card > .image.photo img {
  border-radius: 0.250em;
}
.wojo.card > .footer {
  padding: 2em;
}
.wojo.card > .secondary.header,
.wojo.secondary.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(103,58,183, 0.4);
  background: transparent linear-gradient(60deg, #7E57C2, #5E35B1) repeat scroll 0% 0%;
}
.wojo.card > .positive.header,
.wojo.positive.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(67,160,71, 0.4);
  background: transparent linear-gradient(60deg, #66BB6A, #43A047) repeat scroll 0% 0%;
}
.wojo.card > .negative.header,
.wojo.negative.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(229,57,53, 0.4);
  background: transparent linear-gradient(60deg, #EF5350, #E53935) repeat scroll 0% 0%;
}
.wojo.card > .white.header {
  background: linear-gradient(60deg, #fff, #fff);
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,0,0,.2);
}
.wojo.card > .grey.header,
.wojo.grey.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(84,110,122, 0.4);
  background: transparent linear-gradient(60deg, #78909C, #546E7A) repeat scroll 0% 0%;
}
.wojo.card > .pink.header,
.wojo.pink.card {
  background: transparent linear-gradient(60deg, #EC407A, #D81B60) repeat scroll 0% 0%;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(233, 30, 99, 0.4);
}
.wojo.card > .indigo.header,
.wojo.indigo.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(57,73,171, 0.4);
  background: transparent linear-gradient(60deg, #5C6BC0, #3949AB) repeat scroll 0% 0%;
}
.wojo.card > .blue.header,
.wojo.blue.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(30,136,229, 0.4);
  background: transparent linear-gradient(60deg, #42A5F5, #1E88E5) repeat scroll 0% 0%;
}
.wojo.card > .blue.teal,
.wojo.teal.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(30,136,229, 0.4);
  background: transparent linear-gradient(60deg, #26A69A, #00897B) repeat scroll 0% 0%;
}
.wojo.card > .cyan.header,
.wojo.cyan.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(30,136,229, 0.4);
  background: transparent linear-gradient(60deg, #26C6DA, #00ACC1) repeat scroll 0% 0%;
}
.wojo.card > .amber.header,
.wojo.amber.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(30,136,229, 0.4);
  background: transparent linear-gradient(60deg, #FFCA28, #FFB300) repeat scroll 0% 0%;
}
.wojo.card > .orange.header,
.wojo.orange.card {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14), 0px 7px 10px -5px rgba(30,136,229, 0.4);
  background: transparent linear-gradient(60deg, #FFA726, #FB8C00) repeat scroll 0% 0%;
}
.wojo.basic.segment {
  box-shadow: 0 0 0 1px rgba(0,0,0,.14);
}
.wojo.simple.card,
.wojo.simple.segment {
  box-shadow: none;
}
.wojo.passive.card,
.wojo.passive.segment {
  box-shadow: none;
  padding: 0
}
.wojo.segment.active,
.wojo.card.active {
  box-shadow: inset 0 0 0 2px #E91E63;
}
/* == Movable == */
.wojo.segment.movable,
.wojo.card.movable {
  cursor: move;
  point-events: none;
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
  border-radius: 0.250;
  border: 3px dashed rgba(233,30,99,.4);
}
.wojo.segment.movable::before,
.wojo.card.movable::before {
  position: absolute;
  content: '';
  top: 0%;
  left: 0%;
  background: rgba(255, 255, 255, 0.85);
  width: 100%;
  height: 100%;
  border-radius: 0.250;
  z-index: 100;
}
.wojo.movable.segment::after,
.wojo.movable.card::after {
  font-family: 'WojoIcons';
  position: absolute;
  content: '\ea1a';
  font-size: 1rem;
  top: 10%;
  left: 80%;
  z-index: 101;
}
/* == Loading == */
.wojo.loading.segment,
.wojo.loading.card,
.wojo.loader {
  position: relative;
  cursor: default;
  point-events: none;
  text-shadow: none !important;
  color: transparent !important;
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
}
.wojo.loading.segment::before,
.wojo.loading.card::before,
.wojo.loader::before {
  position: absolute;
  content: '';
  top: 0%;
  left: 0%;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  border-radius: 0.250;
  z-index: 100;
}
.wojo.loading.segment::after,
.wojo.loading.card::after,
.wojo.loader::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -1.5em 0em 0em -1.5em;
  width: 3em;
  height: 3em;
  -webkit-animation: segment-spin 0.6s linear;
  animation: segment-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: #767676 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 0.2em;
  box-shadow: 0px 0px 0px 1px transparent;
  visibility: visible;
  z-index: 101;
}
.wojo.small.loading.segment:after,
.wojo.small.loading.card:after,
.wojo.small.loader:after {
  margin: -1em 0em 0em -1em;
  width: 2em;
  height: 2em;
}
@-webkit-keyframes segment-spin {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes segment-spin {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
